/* ============================================================
   MALINOWSKI ENGINEERING CONSULTING — Theme Stylesheet
   "Safety Systems" direction · Navy + Red, gold secondary accent
   All tokens centralized in :root. Plain CSS — WordPress-ready.
   Same class contract as the Editorial set, restyled.

   Ported VERBATIM from site-safety/styles.css (the finished static
   design). The only inline change vs. the source is one asset-path
   swap (.brand .monogram background → images/mec-logo.png per spec).
   Everything WordPress-specific (ticker hardening, block-style
   aliases, legacy-content compatibility) is APPENDED in a labeled
   block at the file tail — the design body above is untouched.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* palette */
  --navy-deep:#0A1A2F;
  --navy-base:#0F2440;
  --navy-panel:#11294A;
  --cream:#EEF1F5;
  --cream-2:#FFFFFF;
  --light-2:#DDE3EC;
  --muted:#8896AB;
  --muted-d:#5E6E86;
  --red:#E11D2A;
  --red-d:#B5121D;
  --gold:#C9A84C;
  --gold-l:#E2C47A;
  --gold-d:#A8852E;
  --white:#FFFFFF;
  --charcoal:#0A1525;
  /* alerts */
  --alert-green:#3FB950;

  /* lines */
  --line-dark:rgba(255,255,255,.11);
  --line-dark-2:rgba(255,255,255,.18);
  --line-light:rgba(10,26,47,.13);
  --line-gold:rgba(201,168,76,.45);

  /* type families */
  --font-display:'Saira Condensed',system-ui,sans-serif;
  --font-semi:'Barlow Semi Condensed',system-ui,sans-serif;
  --font-body:'Barlow',system-ui,-apple-system,sans-serif;

  /* type scale */
  --fs-hero:clamp(52px,7.4vw,116px);
  --fs-h1:clamp(42px,5.4vw,76px);
  --fs-h2:clamp(34px,4.4vw,62px);
  --fs-h3:clamp(22px,2.1vw,30px);
  --fs-lead:clamp(17px,1.45vw,21px);
  --fs-body:16.5px;
  --fs-sm:14.5px;
  --fs-eyebrow:13px;

  /* spacing */
  --sp-1:0.25rem; --sp-2:0.5rem; --sp-3:1rem; --sp-4:1.5rem; --sp-5:2rem; --sp-6:3rem;

  /* layout */
  --maxw:1320px;
  --pad:2.75rem;
  --clip:polygon(0 0,100% 0,100% 72%,92% 100%,0 100%);
  --clip-btn:polygon(0 0,100% 0,100% 68%,90% 100%,0 100%);
}

/* ---------- RESET ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.55;
  color:var(--cream);
  background:var(--navy-deep);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ---------- LAYOUT ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.section{padding:var(--sp-6) 0}
@media(min-width:900px){.section{padding:5.5rem 0}}

/* ---------- TYPE ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:.94;letter-spacing:.005em;text-transform:uppercase;color:var(--white)}
.accent-italic{color:var(--red);font-style:normal}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--light-2)}

.eyebrow{
  font-family:var(--font-semi);
  font-size:var(--fs-eyebrow);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--red);
  display:inline-flex;
  align-items:center;
  gap:.7rem;
}
.eyebrow::before{content:"";width:24px;height:3px;background:var(--red);display:inline-block}
.eyebrow.no-rule::before{display:none}
.eyebrow.on-dark{color:var(--gold-l)}
.eyebrow.on-dark::before{background:var(--gold)}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:.8rem 1.6rem;transition:.16s ease;border:2px solid transparent;white-space:nowrap;
  clip-path:var(--clip-btn);
}
.btn .arr{transition:transform .18s ease}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn-primary:hover{background:var(--red-d);border-color:var(--red-d)}
.btn-gold{background:var(--red);color:#fff;border-color:var(--red)}
.btn-gold:hover{background:var(--red-d);border-color:var(--red-d)}
.btn-ghost{background:transparent;color:var(--navy-base);border-color:var(--line-light)}
.btn-ghost:hover{border-color:var(--navy-base);background:transparent}
.btn-ghost.on-dark{color:var(--cream);border-color:var(--line-dark-2)}
.btn-ghost.on-dark:hover{border-color:var(--gold);color:var(--gold-l)}

/* ---------- PLACEHOLDERS ---------- */
.ph{position:relative;width:100%;height:100%;overflow:hidden;
  background:repeating-linear-gradient(135deg,var(--cream),var(--cream) 13px,rgba(10,26,47,.05) 13px,rgba(10,26,47,.05) 26px);
  display:grid;place-items:center}
.ph.on-dark{background:repeating-linear-gradient(135deg,var(--navy-panel),var(--navy-panel) 13px,rgba(255,255,255,.03) 13px,rgba(255,255,255,.03) 26px)}
.ph .ph-label{font-family:var(--font-semi);font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-d);background:var(--white);border:1px solid var(--line-light);padding:.5rem .9rem;text-align:center}
.ph.on-dark .ph-label{background:var(--navy-deep);color:var(--muted);border-color:var(--line-dark-2)}

/* red corner-bracket frame motif */
.framed{position:relative}
.framed::before,.framed::after{content:"";position:absolute;width:20px;height:20px;border:2px solid var(--red);z-index:2}
.framed::before{top:13px;left:13px;border-right:none;border-bottom:none}
.framed::after{bottom:13px;right:13px;border-left:none;border-top:none}

.slot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block}
.ac-img .ac-cat{z-index:3}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{position:sticky;top:0;z-index:100;background:rgba(10,26,47,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-dark)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:.85rem}
.brand .monogram{width:40px;height:50px;background:url('../images/mec-logo.png') center/contain no-repeat;display:block;flex-shrink:0}
.brand .monogram span{display:none}
.brand .wordmark b{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--white);line-height:.9;letter-spacing:.01em;text-transform:uppercase;display:block}
.brand .wordmark small{font-family:var(--font-semi);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-l);display:block;margin-top:4px;white-space:nowrap}
.nav-menu{display:flex;align-items:center;gap:2rem}
.nav-menu a{font-family:var(--font-semi);font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--light-2);position:relative;padding:.3rem 0;white-space:nowrap}
.nav-menu a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--red);transition:width .2s ease}
.nav-menu a:hover::after,.nav-menu a.active::after{width:100%}
.nav-right{display:flex;align-items:center;gap:1.2rem}
.nav-toggle{display:none;width:42px;height:42px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.nav-toggle span{width:22px;height:2px;background:var(--cream);transition:.25s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1040px){.nav-menu{gap:1.4rem}.nav-menu a{font-size:13px}}
@media(max-width:920px){
  .nav-menu{position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;background:var(--navy-base);border-bottom:1px solid var(--line-dark);padding:.5rem var(--pad) 1.5rem;transform:translateY(-130%);transition:transform .3s ease}
  .nav-menu.open{transform:translateY(0)}
  .nav-menu a{width:100%;padding:1rem 0;border-bottom:1px solid var(--line-dark);font-size:16px}
  .nav-toggle{display:flex}
  .nav-right .btn{display:none}
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--charcoal);color:var(--cream);padding:4.5rem 0 2rem;border-top:1px solid var(--line-dark)}
.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1.3fr;gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid var(--line-dark)}
.footer-brand p{font-size:var(--fs-sm);color:var(--muted);line-height:1.6;max-width:34ch;margin-top:1.2rem}
.footer-col h4{font-family:var(--font-semi);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-l);margin-bottom:1.2rem}
.footer-col ul{display:flex;flex-direction:column;gap:.8rem}
.footer-col a,.footer-col li{font-size:var(--fs-sm);color:var(--muted)}
.footer-col a:hover{color:var(--gold-l)}
.footer-tagline{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:21px;color:var(--gold-l);line-height:1.05}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:1.8rem;flex-wrap:wrap;gap:1rem;font-size:13px;color:var(--muted-d)}
.footer-bottom .states{color:var(--muted);letter-spacing:.04em}
@media(max-width:880px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* ============================================================
   HERO
   ============================================================ */
.hero{background:var(--navy-deep);color:var(--cream);position:relative;overflow:hidden;border-bottom:1px solid var(--line-dark)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);background-size:46px 46px;opacity:.5;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 80% 15%,rgba(225,29,42,.10),transparent 45%);pointer-events:none}
.hero-inner{position:relative;display:grid;grid-template-columns:1.12fr .88fr;gap:3.5rem;align-items:center;padding:4.5rem 0 5rem}
.hero-pe{display:inline-flex;align-items:center;gap:.8rem;border:1px solid var(--line-dark-2);padding:.5rem .9rem .5rem .55rem;margin-bottom:1.8rem}
.hero-pe .pe-seal{width:38px;height:38px;border:2px solid var(--gold);border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--gold-l);flex-shrink:0}
.hero-pe .hero-pe-txt b{font-family:var(--font-semi);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--white);display:block}
.hero-pe .hero-pe-txt span{font-family:var(--font-semi);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-l);display:block;margin-top:2px}
.hero h1{color:var(--white);font-size:var(--fs-hero);line-height:.9;letter-spacing:.005em}
.hero h1 .accent-italic{color:var(--red)}
.hero-vp{font-size:var(--fs-lead);color:var(--light-2);max-width:46ch;margin-top:1.8rem;line-height:1.55}
.hero-actions{display:flex;gap:1rem;margin-top:2.4rem;flex-wrap:wrap}
.hero-meta{display:flex;gap:0;margin-top:3rem;border:1px solid var(--line-dark)}
.hero-meta .m-item{flex:1;display:flex;flex-direction:column;padding:1.4rem 1.3rem;border-right:1px solid var(--line-dark)}
.hero-meta .m-top{display:flex;align-items:center;gap:.85rem}
.hero-meta .m-ic{display:block;color:var(--gold-l);flex-shrink:0}
.hero-meta .m-ic svg{width:36px;height:36px;display:block}
.hero-meta .m-item:last-child{border-right:none}
.hero-meta .m-num{display:block;font-family:var(--font-display);font-weight:800;font-size:44px;line-height:.8;color:var(--gold-l)}
.hero-meta .m-lbl{display:block;font-family:var(--font-semi);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.9rem;line-height:1.3}
.hero-meta a.m-item{text-decoration:none;cursor:pointer;transition:background .16s}
.hero-meta a.m-item:hover{background:rgba(201,168,76,.07)}
.hero-meta .m-arrow{color:var(--gold-l)}
.hero-meta a.m-item:hover .m-arrow{text-decoration:underline}
.hero-visual{aspect-ratio:4/5;border:1px solid var(--line-dark);position:relative}
.hero-visual .hero-tag{position:absolute;left:0;bottom:0;background:var(--red);color:#fff;font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;padding:.7rem 1.2rem;z-index:3}
@media(max-width:980px){
  .hero-inner{grid-template-columns:1fr;gap:2.5rem;padding:3rem 0 3.5rem}
  .hero-visual{aspect-ratio:16/10;order:-1}
}

/* ============================================================
   TICKER (signature element)
   ============================================================ */
.ticker{background:var(--red);color:#fff;overflow:hidden;border-bottom:1px solid var(--line-dark)}
.ticker-in{display:flex;white-space:nowrap;animation:ticker 32s linear infinite}
.ticker-in span{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:.06em;text-transform:uppercase;padding:.8rem 0;display:flex;align-items:center}
.ticker-in span::after{content:"\25C6";font-size:8px;margin:0 1.5rem;opacity:.7}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ============================================================
   SECTION HEAD
   ============================================================ */
.section-head{max-width:680px;margin-bottom:3rem}
.section-head .eyebrow{margin-bottom:1.2rem}
.section-head h2{font-size:var(--fs-h2)}
.section-head p{font-size:var(--fs-lead);color:var(--muted);margin-top:1.1rem;line-height:1.5}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}

/* ============================================================
   PILLARS  (LIGHT section)
   ============================================================ */
.pillars{background:var(--cream);color:var(--navy-deep)}
.pillars .section-head h2{color:var(--navy-deep)}
.pillars .section-head p{color:var(--muted-d)}
.pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line-light);border-top:3px solid var(--red)}
.pillar{padding:2.2rem 1.6rem 2.4rem;border-right:1px solid var(--line-light);position:relative;background:var(--cream);transition:.2s}
.pillar:last-child{border-right:none}
.pillar:hover{background:var(--white)}
.pillar .p-num{font-family:var(--font-display);font-weight:800;font-size:20px;color:var(--gold-d)}
.pillar h3{font-size:var(--fs-h3);margin:1.4rem 0 .8rem;color:var(--navy-deep)}
.pillar .p-what{font-size:var(--fs-sm);color:var(--muted-d);line-height:1.55}
.pillar .p-when{font-family:var(--font-semi);font-size:14px;color:var(--red);margin-top:.9rem;font-weight:500}
@media(max-width:880px){
  .pillar-grid{grid-template-columns:1fr 1fr}
  .pillar{border-bottom:1px solid var(--line-light)}
  .pillar:nth-child(2n){border-right:none}
}
@media(max-width:520px){.pillar-grid{grid-template-columns:1fr}.pillar{border-right:none}}

/* ============================================================
   CAPABILITIES / REPRESENTATIVE SCOPE  (DARK section)
   ============================================================ */
.capabilities{background:var(--navy-deep)}
.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line-dark)}
.work-card{border-right:1px solid var(--line-dark);padding:0 0 1.8rem;display:flex;flex-direction:column;transition:.2s}
.work-card:last-child{border-right:none}
.work-card:hover{background:var(--navy-panel)}
.work-card .w-img{aspect-ratio:4/3;position:relative;margin-bottom:1.3rem;border-bottom:1px solid var(--line-dark)}
.work-card .w-cat{font-family:var(--font-semi);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-l);padding:0 1.4rem}
.work-card h3{font-size:21px;margin:.7rem 0 .6rem;padding:0 1.4rem;color:var(--white)}
.work-card p{font-size:var(--fs-sm);color:var(--muted);line-height:1.55;padding:0 1.4rem;flex:1}
.work-card .w-meta{margin-top:1rem;padding:1rem 1.4rem 0;border-top:1px solid var(--line-dark);font-family:var(--font-semi);font-size:12px;letter-spacing:.04em;color:var(--muted-d)}
.work-card .w-meta b{display:block;font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--gold-l);margin-top:.2rem;text-transform:uppercase;letter-spacing:.02em}
@media(max-width:980px){.work-grid{grid-template-columns:1fr 1fr}.work-card:nth-child(2n){border-right:none}.work-card:nth-child(-n+2){border-bottom:1px solid var(--line-dark)}}
@media(max-width:560px){.work-grid{grid-template-columns:1fr}.work-card{border-right:none;border-bottom:1px solid var(--line-dark)}}

/* ============================================================
   COVERAGE  (DARK)
   ============================================================ */
.coverage{background:var(--navy-base)}
.coverage-inner{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.coverage h2{color:var(--white)}
.coverage .lead{color:var(--muted);margin-top:1rem;max-width:40ch}
.coverage .eyebrow{margin-bottom:1.2rem}
.region-list{margin-top:2rem;border:1px solid var(--line-dark)}
.region{display:flex;align-items:center;gap:1.5rem;padding:1.3rem 1.5rem;border-bottom:1px solid var(--line-dark);transition:.16s}
.region:last-child{border-bottom:none}
.region:hover{background:var(--navy-panel)}
.region .r-ab{font-family:var(--font-display);font-weight:800;font-size:34px;color:var(--gold-l);width:62px;line-height:.8}
.region .r-name{display:block;font-family:var(--font-display);font-weight:700;font-size:21px;color:var(--white);text-transform:uppercase;letter-spacing:.01em}
.region .r-desc{display:block;font-size:13.5px;color:var(--muted);margin-top:.5rem}
.region .r-status{margin-left:auto;font-family:var(--font-semi);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-l);display:flex;align-items:center;gap:.5rem}
.region .r-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--alert-green)}
.coverage-visual{aspect-ratio:5/4;border:1px solid var(--line-dark);position:relative;background:var(--navy-deep)}
.cov-map{position:absolute;inset:0;width:100%;height:100%;display:block}
.cov-map .cov-state path{fill:rgba(201,168,76,.16);stroke:var(--gold);stroke-width:2;transition:fill .2s ease}
.cov-map .cov-state:hover path{fill:rgba(201,168,76,.32)}
.cov-map .cov-link{stroke:var(--gold-l);stroke-width:1.5;stroke-dasharray:2 6;stroke-linecap:round;opacity:.5}
.cov-map .cov-pin circle{fill:var(--red);stroke:var(--navy-deep);stroke-width:2}
.cov-map .cov-ab{fill:#fff;font-family:var(--font-display);font-size:13px;font-weight:700;text-anchor:middle;letter-spacing:.03em}
.cov-map .cov-cap{fill:var(--muted);font-family:var(--font-semi);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
@media(max-width:880px){.coverage-inner{grid-template-columns:1fr;gap:2.5rem}}

/* ============================================================
   CREDENTIALS STRIP (gold-accented dark band)
   ============================================================ */
.credentials{background:var(--charcoal);border-top:1px solid var(--line-gold);border-bottom:1px solid var(--line-gold)}
.credentials .container{padding-top:2.4rem;padding-bottom:2.4rem}
.cred-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cred-license{display:flex;align-items:center;gap:1.1rem}
.cred-license .seal{width:56px;height:56px;border:2px solid var(--gold);border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--gold-l);flex-shrink:0}
.cred-license .c-main{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--white);text-transform:uppercase;letter-spacing:.01em}
.cred-license .c-sub{font-family:var(--font-semi);font-size:13px;color:var(--muted);letter-spacing:.04em}
.cred-standards{display:flex;gap:2.2rem;flex-wrap:wrap}
.cred-standards .c-item{font-family:var(--font-semi);font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.cred-standards .c-item b{display:block;font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--gold-l);margin-top:.25rem;letter-spacing:.02em}
@media(max-width:700px){.cred-inner{flex-direction:column;align-items:flex-start;gap:1.5rem}}

/* ============================================================
   INSIGHTS FEED + ARTICLE CARD (repeatable unit) (LIGHT)
   ============================================================ */
.insights-feed{background:var(--cream);color:var(--navy-deep)}
.insights-feed .section-head h2,.feed-head h2{color:var(--navy-deep)}
.feed-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2.6rem;flex-wrap:wrap}
.feed-head .section-head{margin-bottom:0}
.feed-head .btn-ghost{color:var(--navy-base);border-color:var(--line-light)}
.feed-head .btn-ghost:hover{border-color:var(--red);color:var(--red)}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line-light)}
@media(max-width:880px){.card-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.card-grid{grid-template-columns:1fr}}

/* ONE repeatable article card */
.article-card{display:flex;flex-direction:column;background:var(--white);border-right:1px solid var(--line-light);transition:.2s ease;height:100%}
.card-grid .article-card:last-child{border-right:none}
.article-card:hover{background:#fbfcfd}
.article-card .ac-img{aspect-ratio:1200/628;position:relative;border-bottom:1px solid var(--line-light);background:var(--navy-deep);overflow:hidden}
.article-card .ac-mark{position:absolute;right:-22px;bottom:-30px;width:160px;height:160px;background:url('../images/mec-logo.png') center/contain no-repeat;opacity:.07;pointer-events:none;z-index:1}
.article-card .ac-cat{position:absolute;top:12px;left:12px;background:var(--red);color:#fff;font-family:var(--font-semi);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.4rem .7rem;z-index:3}
.article-card .ac-body{padding:1.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;flex:1}
.article-card .ac-date{font-family:var(--font-semi);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-d)}
.article-card h3{font-size:21px;line-height:1.05;margin:.6rem 0 .7rem;color:var(--navy-deep)}
.article-card h3 a{color:inherit}
.article-card:hover h3 a{color:var(--red)}
.article-card .ac-excerpt{font-size:14px;color:var(--muted-d);line-height:1.55;flex:1}
.article-card .ac-more{margin-top:1.2rem;font-family:var(--font-semi);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-d);display:inline-flex;align-items:center;gap:.4rem}
.article-card:hover .ac-more{color:var(--red)}

/* archive grid variant: cards wrap as standalone bordered tiles */
.archive-grid .card-grid{border:none;gap:1.5rem}
.archive-grid .article-card{border:1px solid var(--line-light)}

/* ============================================================
   QUOTE CTA BAND
   ============================================================ */
.quote-cta{background:var(--navy-deep);color:var(--cream);position:relative;overflow:hidden;border-top:8px solid transparent;border-image:repeating-linear-gradient(-45deg,var(--red),var(--red) 13px,var(--navy-deep) 13px,var(--navy-deep) 26px) 8}
.quote-cta::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 15% 120%,rgba(225,29,42,.12),transparent 45%);pointer-events:none}
.quote-inner{position:relative;text-align:center;max-width:760px;margin:0 auto}
.quote-inner .eyebrow{justify-content:center;margin-bottom:1.4rem}
.quote-inner h2{color:var(--white);font-size:var(--fs-h1)}
.quote-inner h2 .accent-italic{color:var(--red)}
.quote-inner p{font-size:var(--fs-lead);color:var(--muted);margin:1.3rem auto 0;max-width:48ch;line-height:1.5}
.quote-actions{display:flex;gap:1rem;justify-content:center;margin-top:2.4rem;flex-wrap:wrap}
.quote-contact{margin-top:2rem;font-family:var(--font-semi);font-size:14px;color:var(--muted-d);letter-spacing:.03em}
.quote-contact a{color:var(--gold-l);border-bottom:1px solid var(--line-gold);padding-bottom:1px}

/* ============================================================
   PAGE HEADER (interior)
   ============================================================ */
.page-header{background:var(--navy-deep);color:var(--cream);padding:3.5rem 0 3rem;position:relative;overflow:hidden;border-bottom:1px solid var(--line-dark)}
.page-header::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);background-size:46px 46px;opacity:.5;pointer-events:none}
.page-header .container{position:relative}
.page-header .eyebrow{margin-bottom:1.2rem}
.page-header h1{color:var(--white);font-size:var(--fs-h1)}
.page-header p{font-size:var(--fs-lead);color:var(--muted);max-width:52ch;margin-top:1rem;line-height:1.45}
.breadcrumb{display:flex;gap:.5rem;align-items:center;font-family:var(--font-semi);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-d);margin-bottom:1.6rem}
.breadcrumb a:hover{color:var(--gold-l)}
.breadcrumb .sep{color:var(--gold-d)}

/* ============================================================
   INSIGHTS INDEX — filters + pagination
   ============================================================ */
.filter-bar-wrap{background:var(--navy-base);border-bottom:1px solid var(--line-dark);position:sticky;top:74px;z-index:40}
.filter-bar{display:flex;gap:.6rem;flex-wrap:wrap;padding:1.4rem 0}
.filter-chip{font-family:var(--font-semi);font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--light-2);padding:.5rem 1rem;border:1px solid var(--line-dark-2);transition:.16s;white-space:nowrap;text-transform:uppercase}
.filter-chip:hover{border-color:var(--gold);color:var(--gold-l)}
.filter-chip.active{background:var(--red);color:#fff;border-color:var(--red)}
.filter-chip .chip-n{font-size:11px;color:var(--muted);font-weight:600;margin-left:.2rem}
.filter-chip:hover .chip-n{color:var(--gold-l)}
.filter-chip.active .chip-n{color:rgba(255,255,255,.8)}

.archive-grid{background:var(--navy-deep);padding-top:3rem}
.no-results{text-align:center;padding:4rem 0;color:var(--muted);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:24px;display:none}

.pagination{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-top:3.5rem}
.pagination a,.pagination span{min-width:44px;height:44px;display:grid;place-items:center;font-family:var(--font-semi);font-size:14px;font-weight:600;border:1px solid var(--line-dark-2);color:var(--light-2);transition:.16s;padding:0 .4rem}
.pagination a:hover{border-color:var(--gold);color:var(--gold-l)}
.pagination .current{background:var(--red);color:#fff;border-color:var(--red)}
.pagination .dots{border:none}

/* ============================================================
   SINGLE ARTICLE
   ============================================================ */
.article-hero{background:var(--navy-deep);color:var(--cream);padding:3.5rem 0 3rem;position:relative;overflow:hidden;border-bottom:1px solid var(--line-dark)}
.article-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);background-size:46px 46px;opacity:.45;pointer-events:none}
.article-hero .container{max-width:1180px;position:relative}
.article-hero .a-cat{display:inline-flex;align-items:center;gap:.9rem;margin-bottom:1.4rem;font-family:var(--font-semi);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-l)}
.article-hero .a-cat .readtime{color:var(--muted);border:1px solid var(--line-dark-2);padding:.25rem .6rem;letter-spacing:.1em;white-space:nowrap}
.article-hero h1{color:var(--white);font-size:clamp(34px,4.6vw,62px);line-height:.95;max-width:22ch}
.article-meta{display:flex;align-items:center;gap:1.2rem;margin-top:1.8rem;flex-wrap:wrap;font-family:var(--font-semi);font-size:13.5px;color:var(--muted)}
.article-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--gold)}
.article-meta .byline b{color:var(--cream);font-weight:600}

.article-figure{aspect-ratio:21/9;position:relative;margin:0}

.article-layout{max-width:1180px;margin:0 auto;padding:3.5rem var(--pad) 1rem;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:4rem;align-items:start}
.article-main{min-width:0}
.article-body{max-width:720px}
.article-body > *{margin-bottom:1.5rem}
.article-body p{font-size:18px;line-height:1.7;color:#d7deea}
.article-body .drop-lead{font-size:var(--fs-lead);color:var(--white);line-height:1.55}
.article-body h2{font-family:var(--font-display);font-size:clamp(27px,2.9vw,38px);color:var(--white);margin-top:3.2rem;margin-bottom:1.1rem;scroll-margin-top:100px}
.article-body h2::before{content:"";display:block;width:44px;height:3px;background:var(--gold);margin-bottom:.9rem}
.article-body h3{font-size:24px;color:var(--white);margin-top:2.2rem;margin-bottom:.6rem}
.article-body ul.bullets{padding-left:0;display:flex;flex-direction:column;gap:.8rem}
.article-body ul.bullets li{position:relative;padding-left:1.6rem;font-size:17.5px;line-height:1.6;color:#d7deea}
.article-body ul.bullets li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;background:var(--red)}
.article-body a.inline{color:var(--gold-l);border-bottom:1.5px solid var(--line-gold)}
.article-body a.inline:hover{background:rgba(201,168,76,.12)}
.article-body strong{color:var(--white)}

.pullquote{margin:2.5rem 0;padding:.5rem 0 .5rem 2rem;border-left:3px solid var(--red)}
.pullquote p{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(26px,3.2vw,38px);line-height:1.04;color:var(--white)}
.callout{background:var(--navy-base);border:1px solid var(--line-gold);padding:1.6rem 1.8rem;margin:2.5rem 0}
.callout .c-tag{font-family:var(--font-semi);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-l);margin-bottom:.6rem}
.callout p{font-size:16px;line-height:1.6;margin:0;color:var(--light-2)}

/* stat-card cluster */
.stat-cluster{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-top:3px solid var(--gold);margin:2.5rem 0}
.stat-card{background:var(--navy-base);padding:1.5rem 1.3rem 1.6rem}
.stat-card .s-num{font-family:var(--font-display);font-weight:800;font-size:38px;color:var(--gold-l);line-height:.9;letter-spacing:.01em}
.stat-card .s-lbl{font-size:13.5px;color:var(--light-2);margin-top:.6rem;line-height:1.4}
.stat-card .s-src{font-family:var(--font-semi);font-size:12px;color:var(--muted-d);margin-top:.5rem;display:block;letter-spacing:.03em}
@media(max-width:600px){.stat-cluster{grid-template-columns:1fr 1fr}}

.article-share{max-width:720px;margin:2.5rem 0 0;padding:1.5rem 0 0;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.tag-row{display:flex;gap:.5rem;flex-wrap:wrap}
.tag-row .t{font-family:var(--font-semi);font-size:12px;color:var(--muted);border:1px solid var(--line-dark-2);padding:.35rem .8rem;letter-spacing:.03em;text-transform:uppercase}
.article-share .btn-ghost{color:var(--cream);border-color:var(--line-dark-2)}
.article-share .btn-ghost:hover{border-color:var(--gold);color:var(--gold-l)}

/* sticky sidebar */
.article-sidebar{position:sticky;top:100px;display:flex;flex-direction:column;gap:1.8rem}
.sb-block{border:1px solid var(--line-dark);padding:1.3rem 1.4rem;background:var(--navy-base)}
.sb-block h4{font-family:var(--font-semi);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-l);margin-bottom:1rem;display:flex;align-items:center;gap:.6rem}
.sb-block h4::before{content:"";width:18px;height:2px;background:var(--gold)}
.toc ul{display:flex;flex-direction:column;gap:.1rem}
.toc a{display:block;font-size:13.5px;line-height:1.4;color:var(--muted);padding:.45rem 0 .45rem .8rem;border-left:2px solid var(--line-dark-2);transition:.15s}
.toc a:hover{color:var(--cream);border-color:var(--gold-l)}
.toc a.active{color:var(--white);font-weight:600;border-color:var(--red)}
.series-nav ul{display:flex;flex-direction:column;gap:.7rem}
.series-nav li{font-size:13px;line-height:1.4;color:var(--muted);display:flex;gap:.6rem;align-items:baseline}
.series-nav li .s-no{font-family:var(--font-display);font-size:13px;color:var(--muted-d);flex-shrink:0;font-weight:700}
.series-nav li a:hover{color:var(--gold-l)}
.series-nav li.current{color:var(--white);font-weight:600}
.series-nav li.current .s-no{color:var(--gold-l)}
.sb-tags{display:flex;gap:.4rem;flex-wrap:wrap}
.sb-tags .t{font-family:var(--font-semi);font-size:11.5px;color:var(--muted);border:1px solid var(--line-dark-2);padding:.3rem .7rem;text-transform:uppercase;letter-spacing:.02em}
.sb-cta{background:var(--red);color:#fff;padding:1.5rem 1.4rem;text-align:center}
.sb-cta p{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:19px;line-height:1.05;margin-bottom:1rem}
.sb-cta .btn{width:100%;justify-content:center;background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}
.sb-cta .btn:hover{background:var(--charcoal);border-color:var(--charcoal)}
@media(max-width:980px){.article-layout{grid-template-columns:1fr;gap:0}.article-sidebar{display:none}}

.related{background:var(--navy-base)}
.related .section-head{margin-bottom:2.2rem}
.related .section-head h2{color:var(--white)}
.related .card-grid{border:1px solid var(--line-dark)}
.related .article-card{border-right:1px solid var(--line-dark);background:var(--navy-deep)}
.related .article-card h3{color:var(--white)}
.related .article-card .ac-date{color:var(--muted)}
.related .article-card .ac-excerpt{color:var(--muted)}
.related .article-card:hover{background:var(--navy-panel)}
.related .article-card .ac-img{border-bottom:1px solid var(--line-dark)}

/* reading progress */
.read-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--red);z-index:200;transition:width .1s linear}

/* utility */
.mt-0{margin-top:0}
.center{text-align:center}

/* ============================================================
   WORDPRESS APPENDED RULES — ticker hardening, block-style aliases,
   and legacy-content compatibility. Layout / selector-alias only,
   NO new color hexes (tokens only). The design body above is
   untouched. Each block is called out in README.md.
   ============================================================ */

/* ------------------------------------------------------------
   (A0) HERO IMAGE FRAMING — the hero art is a landscape source set into
   a 4:5 (desktop) / 16:10 (mobile) frame. Anchor the cover-crop to the
   TOP so a subject mounted at the top of the frame (e.g. the sprinkler
   head) survives the mobile crop instead of being sliced to the spray
   band. No effect on desktop, where the 4:5 image fills the frame exactly.
   ------------------------------------------------------------ */
.hero-visual .slot-img{object-position:center top}

/* ------------------------------------------------------------
   (A) TICKER HARDENING — seamless + pause-on-hover + reduced-motion.
   The design's .ticker-in already duplicates the keyword track and
   animates translateX(-50%), so the loop is seamless with no snap
   (the two halves are identical; at -50% the second half sits exactly
   where the first began). These rules ADD the two behaviors the
   bundled CSS lacked: pause on hover, and a hard freeze to a static
   strip when the visitor prefers reduced motion. CSS-only.
   ------------------------------------------------------------ */
.ticker:hover .ticker-in{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .ticker-in{animation:none;transform:none}
}

/* ------------------------------------------------------------
   (B) GUTENBERG BLOCK-STYLE ALIASES.
   register_block_style() makes WP emit is-style-<name>; the design's
   selectors are bare (.pullquote / .callout / ul.bullets / .drop-lead).
   These aliases let editor blocks reuse the design's existing component
   look with zero new properties of their own. Tokens only — no hexes.
   Targets verified against THIS design's styles.css (RED accent, not gold).
   ------------------------------------------------------------ */
.wp-block-quote.is-style-pullquote{margin:2.5rem 0;padding:.5rem 0 .5rem 2rem;border-left:3px solid var(--red)}
.wp-block-quote.is-style-pullquote p{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(26px,3.2vw,38px);line-height:1.04;color:var(--white)}
.wp-block-quote.is-style-pullquote cite{display:none}

.wp-block-group.is-style-callout{background:var(--navy-base);border:1px solid var(--line-gold);padding:1.6rem 1.8rem;margin:2.5rem 0}
.wp-block-group.is-style-callout :where(h1,h2,h3,h4,h5,h6){font-family:var(--font-semi);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-l);margin:0 0 .6rem}
.wp-block-group.is-style-callout p{font-size:16px;line-height:1.6;margin:0;color:var(--light-2)}

.wp-block-list.is-style-bullets{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:.8rem}
.wp-block-list.is-style-bullets li{position:relative;padding-left:1.6rem;font-size:17.5px;line-height:1.6;color:#d7deea}
.wp-block-list.is-style-bullets li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;background:var(--red)}

.is-style-drop-lead{font-size:var(--fs-lead);color:var(--white);line-height:1.55}

/* (C) Stat-cluster pattern. The "Stat cluster" pattern emits wrappers
   carrying the design's bare .stat-cluster / .stat-card classes, so the
   design's existing rules govern directly; only .wp-block-group's default
   margin needs zeroing on the cards. */
.wp-block-group.stat-card{margin:0}

/* (D) Custom-logo image. When a Site Identity logo is set, header.php emits a
   bare <img class="brand-logo-img"> in place of the .monogram flame-shield.
   Size it to match the .monogram footprint (40x50 box) so the lockup is
   unchanged whether the CSS-background mark or an uploaded logo is used. */
.brand .brand-logo-img{height:50px;width:auto;max-width:160px;display:block;flex-shrink:0;object-fit:contain}

/* ============================================================
   LEGACY CONTENT COMPATIBILITY
   The 52 existing posts embed exactly six element types in
   the_content() (verified via the WP REST API): clean semantic
   HTML, no inline <style>, no page chrome:
     .stat-row (+ .stat-value/.stat-label/.stat-note),
     .callout, plain class-less <ul>, inline <a>,
     <div class="post-cta">, <div class="post-tags"> (links + <br>).
   These aliases map those legacy classes onto THIS design's
   component styling so the back catalog renders correctly under
   this theme WITHOUT editing any post content. Tokens only.
   Retire this block if/when the catalog is migrated to the
   Gutenberg block styles registered above.

   Legacy → design class map used here:
     .stat-row              → .stat-cluster treatment (grid + gold top rule)
     .stat-card             → shared (design already styles .stat-card)
     .stat-value            → .s-num   (gold display number)
     .stat-label            → .s-lbl   (light label)
     .stat-note             → .s-src   (muted source line)
     plain <ul>/<ol>        → ul.bullets treatment (red square markers)
     inline <a>             → a.inline treatment (gold underline)
     .post-cta / .post-tags → display:none (template owns CTA + tags)
   ============================================================ */

/* Legacy stat block — live content uses
   .stat-row > .stat-card > .stat-value/.stat-label/.stat-note;
   the design uses .stat-cluster > .stat-card > .s-num/.s-lbl/.s-src.
   .stat-card itself is shared (already styled by the design). Alias the
   grid wrapper and the inner three classes onto the design's treatment. */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-top:3px solid var(--gold);margin:2.5rem 0}
.stat-card .stat-value{font-family:var(--font-display);font-weight:800;font-size:38px;color:var(--gold-l);line-height:.9;letter-spacing:.01em}
.stat-card .stat-label{font-size:13.5px;color:var(--light-2);margin-top:.6rem;line-height:1.4}
.stat-card .stat-note{font-family:var(--font-semi);font-size:12px;color:var(--muted-d);margin-top:.5rem;display:block;letter-spacing:.03em}
@media(max-width:600px){.stat-row{grid-template-columns:1fr 1fr}}

/* Legacy in-content CTA — every post body ends with its own
   .post-cta block. single.php already appends the shared quote-cta,
   so suppress the embedded one to avoid a duplicate. */
.post-content .post-cta{display:none}
/* Embedded in-content tags block (<div class="post-tags"> with links +
   <br>) — redundant with the template's tag chips + sidebar tags, and
   renders as a stray vertical link list. Suppress it; the template owns
   tag display. */
.post-content .post-tags{display:none}

/* Legacy lists — the 52 posts author plain, class-less <ul>/<ol>; the
   global ul{list-style:none} reset (line ~76 above) strips markers and the
   design only styled ul.bullets / .is-style-bullets. Restore the red-square
   bullet treatment for any article-body list that isn't already one of those
   custom classes. Colors track the design's body text (#d7deea on navy). */
.article-body ul:not(.bullets):not(.is-style-bullets){padding-left:0;list-style:none;display:flex;flex-direction:column;gap:.7rem}
.article-body ul:not(.bullets):not(.is-style-bullets) li{position:relative;padding-left:1.6rem;font-size:17.5px;line-height:1.65;color:#d7deea}
.article-body ul:not(.bullets):not(.is-style-bullets) li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;background:var(--red)}
.article-body ol:not(.bullets){padding-left:1.4rem;display:flex;flex-direction:column;gap:.7rem;color:#d7deea}
.article-body ol:not(.bullets) li{font-size:17.5px;line-height:1.65;padding-left:.3rem}

/* Legacy inline links — posts use plain <a> (no .inline class); match the
   design's inline-link styling so body links read as intentional, not default
   browser blue. Exclude .btn so the embedded CTA button (if shown) is unaffected. */
.article-body a:not(.inline):not(.btn){color:var(--gold-l);border-bottom:1.5px solid var(--line-gold)}
.article-body a:not(.inline):not(.btn):hover{background:rgba(201,168,76,.12)}

/* (E) Suppress empty CoBlocks form placeholder. The live Contact page (slug
   'contact') carries an empty .wp-block-coblocks-form shell with no working
   form. page-contact.php owns the designed Request-a-Quote block and gates
   the_content() on real content; this CSS is the belt-and-suspenders so the
   stray empty form never paints if it ever reaches the_content() on any
   template. Layout-only, no new color. */
.wp-block-coblocks-form:empty{display:none}

/* ============================================================
   (F) COBLOCKS CONTACT FORM — DARK INDUSTRIAL SKIN
   The live Contact page (slug 'contact') body is a WORKING CoBlocks
   form (+ contact-info column + Google map) rendered via the_content()
   inside .contact-body in page-contact.php. CoBlocks ships its own
   light default styling; these rules re-skin it for the dark "Safety
   Systems" theme. Tokens ONLY — no new color hexes.

   Targets both modern and legacy CoBlocks class names defensively
   (the rendered markup varies by plugin version): the form wrapper,
   the field rows (.coblocks-field / .coblocks-form__field), inputs by
   TYPE (text/email/tel) + textarea, the labels, and the submit button
   (.coblocks-field-submit__button / .wp-block-coblocks-field-submit-button button).
   The 2-column CoBlocks layout (form | contact-info) and the Google map
   are made to read on navy and to stack on mobile.
   ------------------------------------------------------------ */

/* --- intro block above the form --- */
.contact-intro{max-width:760px;margin:0 auto 2.6rem}
.contact-intro .drop-lead{color:var(--light-2)}

/* --- form/content wrapper: full design width, not the 720px article cap --- */
.contact-body{max-width:none}
.contact-body > *{margin-bottom:1.5rem}

/* CoBlocks' two-column row (form | contact info). Newer CoBlocks emits a
   wp-block-columns; make it a clean responsive grid on the dark bg. */
.contact-body .wp-block-columns{display:grid;grid-template-columns:1.4fr 1fr;gap:2.6rem;align-items:start}
.contact-body .wp-block-column{min-width:0}
@media(max-width:880px){
  .contact-body .wp-block-columns{grid-template-columns:1fr;gap:2rem}
}

/* --- form wrapper --- */
.contact-body .wp-block-coblocks-form,
.contact-body .coblocks-form{margin:0;color:var(--cream)}

/* --- field rows --- */
.contact-body .coblocks-form__field,
.contact-body .coblocks-field{margin:0 0 1.4rem;max-width:none}

/* --- labels: semi/condensed, light, tracked-out, uppercase-ish --- */
.contact-body .coblocks-form .coblocks-label,
.contact-body .coblocks-form label,
.contact-body .coblocks-field label{
  display:block;
  font-family:var(--font-semi);
  font-size:13px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--light-2);
  margin:0 0 .55rem;
}
/* required asterisk in the action color */
.contact-body .coblocks-form .required,
.contact-body .coblocks-label .required{color:var(--red)}

/* --- inputs + textarea: dark navy panel, light text, dark line, gold focus --- */
.contact-body .coblocks-form input[type="text"],
.contact-body .coblocks-form input[type="email"],
.contact-body .coblocks-form input[type="tel"],
.contact-body .coblocks-form input[type="number"],
.contact-body .coblocks-form select,
.contact-body .coblocks-form textarea,
.contact-body .coblocks-field input[type="text"],
.contact-body .coblocks-field input[type="email"],
.contact-body .coblocks-field input[type="tel"],
.contact-body .coblocks-field textarea{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  color:var(--cream);
  background:var(--navy-panel);
  border:1px solid var(--line-dark-2);
  border-radius:0;
  padding:.85rem 1rem;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.contact-body .coblocks-form textarea,
.contact-body .coblocks-field textarea{min-height:150px;resize:vertical}

/* placeholder text reads as muted, not invisible, on navy */
.contact-body .coblocks-form input::placeholder,
.contact-body .coblocks-form textarea::placeholder,
.contact-body .coblocks-field input::placeholder,
.contact-body .coblocks-field textarea::placeholder{color:var(--muted)}

/* gold focus border (matches the theme's gold-secondary focus motif) */
.contact-body .coblocks-form input[type="text"]:focus,
.contact-body .coblocks-form input[type="email"]:focus,
.contact-body .coblocks-form input[type="tel"]:focus,
.contact-body .coblocks-form input[type="number"]:focus,
.contact-body .coblocks-form select:focus,
.contact-body .coblocks-form textarea:focus,
.contact-body .coblocks-field input:focus,
.contact-body .coblocks-field textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 1px var(--line-gold);
}

/* name field first/last sub-fields sit side by side, gap between */
.contact-body .coblocks-form__inline-fields,
.contact-body .coblocks-field-name__inline-fields{display:flex;gap:1rem;flex-wrap:wrap}
.contact-body .coblocks-form__inline-field,
.contact-body .coblocks-field-name__inline-field{flex:1 1 140px;min-width:0}
.contact-body .coblocks-form__inline-field label{font-size:11px;letter-spacing:.1em;color:var(--muted);margin-top:.4rem}

/* --- submit button: theme red action button, clipped corner --- */
.contact-body .wp-block-coblocks-field-submit-button button,
.contact-body .coblocks-field-submit__button,
.contact-body .coblocks-form button[type="submit"],
.contact-body .wp-block-coblocks-form button.wp-block-button__link{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-display);
  font-size:16px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--white);
  background:var(--red);
  border:2px solid var(--red);
  border-radius:0;
  padding:.8rem 1.8rem;
  clip-path:var(--clip-btn);
  box-shadow:none;
  transition:.16s ease;
}
.contact-body .wp-block-coblocks-field-submit-button button:hover,
.contact-body .coblocks-field-submit__button:hover,
.contact-body .coblocks-form button[type="submit"]:hover,
.contact-body .wp-block-coblocks-form button.wp-block-button__link:hover{
  background:var(--red-d);
  border-color:var(--red-d);
  color:var(--white);
}

/* --- contact-info column (service area + email; phone stripped server-side) --- */
.contact-body .wp-block-coblocks-icon svg,
.contact-body .coblocks-icon__inner svg{fill:var(--gold-l)}
.contact-body .wp-block-column p{color:var(--light-2);line-height:1.6}
.contact-body .wp-block-column a{color:var(--gold-l);border-bottom:1.5px solid var(--line-gold)}
.contact-body .wp-block-column a:hover{background:rgba(201,168,76,.12)}
.contact-body .wp-block-column h2,
.contact-body .wp-block-column h3,
.contact-body .wp-block-column h4{color:var(--white)}

/* --- Google map: frame it on the dark bg, fluid, stacks under on mobile --- */
.contact-body .wp-block-coblocks-map,
.contact-body .wp-block-coblocks-gist,
.contact-body .coblocks-map{border:1px solid var(--line-dark-2);margin-top:1.5rem}
.contact-body .wp-block-coblocks-map iframe,
.contact-body .coblocks-map__figure{width:100%;display:block}


/* ============================================================
   (G) ABOUT / PRINCIPAL PAGE - page-about.php. Tokens only.
   ============================================================ */
.about-intro{background:var(--cream);color:var(--navy-deep)}
.about-grid{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:3.2rem;align-items:start}
.about-photo{position:relative;align-self:start}
.about-photo img{display:block;width:100%;height:auto;border:1px solid var(--line-light)}
.about-photo .about-tag{position:absolute;left:0;bottom:0;background:var(--navy-deep);color:#fff;font-family:var(--font-semi);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:.6rem 1rem}
.about-bio .drop-lead{font-size:clamp(18px,1.55vw,21px);line-height:1.6;color:var(--navy-deep);font-weight:600;margin-top:1rem}
.about-bio p{margin-top:1.1rem;line-height:1.75;color:var(--navy-deep)}
.about-bio .btn{margin-top:1.9rem}
.about-quals{background:var(--navy-deep);color:var(--cream)}
.about-quals .about-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem;margin-top:2.2rem}
.about-quals .about-col h3{font-family:var(--font-display);font-weight:700;font-size:clamp(15px,1.3vw,17px);text-transform:uppercase;letter-spacing:.04em;color:#fff;margin:0 0 1.1rem;padding-bottom:.75rem;border-bottom:1px solid var(--line-dark)}
.about-quals .about-col ul{list-style:none;margin:0;padding:0}
.about-quals .about-col li{position:relative;padding-left:1.5rem;margin-bottom:.85rem;font-size:14.5px;line-height:1.55;color:var(--muted)}
.about-quals .about-col li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
@media(max-width:860px){
  .about-grid{grid-template-columns:1fr;gap:2.2rem}
  .about-photo{max-width:300px}
  .about-quals .about-cols{grid-template-columns:1fr;gap:2rem}
}


/* ============================================================
   (H) REQUEST A QUOTE - native theme form (replaced the broken
   CoBlocks form). Dark form on the navy contact page. Tokens only.
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr minmax(260px,330px);gap:3.5rem;align-items:start;margin-top:2.6rem}
.mec-quote-form .field{margin-bottom:1.3rem}
.mec-quote-form label{display:block;font-family:var(--font-semi);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-l);margin-bottom:.5rem}
.mec-quote-form .req{color:var(--red)}
.mec-quote-form input,.mec-quote-form textarea{width:100%;background:var(--navy-panel);border:1px solid var(--line-dark-2);color:var(--white);font-family:var(--font-body);font-size:15.5px;padding:.85rem 1rem;transition:border-color .16s,background .16s}
.mec-quote-form input:focus,.mec-quote-form textarea:focus{outline:none;border-color:var(--gold);background:var(--navy-base)}
.mec-quote-form input::placeholder,.mec-quote-form textarea::placeholder{color:var(--muted-d)}
.mec-quote-form textarea{resize:vertical;min-height:140px;line-height:1.55}
.mec-quote-form button.btn{margin-top:.4rem;border:none;cursor:pointer}
.mec-quote-form .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-note{padding:1rem 1.2rem;margin-bottom:1.8rem;font-size:14.5px;line-height:1.5;border-left:3px solid}
.form-note.form-ok{background:rgba(63,185,80,.10);border-color:var(--alert-green);color:var(--cream)}
.form-note.form-err{background:rgba(225,29,42,.10);border-color:var(--red);color:var(--cream)}
.contact-aside{border-top:2px solid var(--gold);padding-top:1.6rem}
.contact-aside .ca-item{margin-bottom:1.5rem}
.contact-aside .ca-lbl{display:block;font-family:var(--font-semi);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.contact-aside .ca-val{display:block;font-size:16px;color:var(--white);font-weight:500;line-height:1.45}
.contact-aside a.ca-val{color:var(--gold-l)}
.contact-aside a.ca-val:hover{color:var(--gold)}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:2.4rem}}


/* (H) cont. — select + LinkedIn (old-page parity) */
.mec-quote-form select{width:100%;background:var(--navy-panel);border:1px solid var(--line-dark-2);color:var(--white);font-family:var(--font-body);font-size:15.5px;padding:.85rem 2.4rem .85rem 1rem;transition:border-color .16s,background .16s;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%23C9A84C' stroke-width='1.8' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;cursor:pointer}
.mec-quote-form select:focus{outline:none;border-color:var(--gold);background-color:var(--navy-base)}
.mec-quote-form select option{background:var(--navy-panel);color:var(--white)}
.contact-aside .ca-linkedin{display:inline-flex;align-items:center;gap:.4rem;color:var(--gold-l);font-size:15px;font-weight:600;font-family:var(--font-semi)}
.contact-aside .ca-linkedin:hover{color:var(--gold)}


/* ============================================================
   (I) FPE PE-PREP CROSS-PROMO (.fpe-promo)
   Secondary "from the firm" band near the bottom of the homepage,
   just above the quote-cta. Navy panel + gold top rule + red action
   button. Tokens only. Educational cross-sell to the separate paid
   product at fpe.malinowskiengineering.com.
   ============================================================ */
.fpe-promo{background:var(--navy-base)}
.fpe-card{
  position:relative;display:grid;grid-template-columns:1fr minmax(220px,300px);
  gap:3.2rem;align-items:center;
  background:var(--navy-panel);
  border-top:3px solid var(--gold);
  border-left:1px solid var(--line-dark);border-right:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  padding:3rem 3.2rem;clip-path:var(--clip);overflow:hidden;
}
.fpe-card::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 100% 0%,rgba(201,168,76,.12),transparent 42%);pointer-events:none}
.fpe-body{position:relative}
.fpe-body .eyebrow{margin-bottom:1.1rem}
.fpe-body h2{color:var(--white);font-size:var(--fs-h2);max-width:18ch}
.fpe-body p{font-size:var(--fs-lead);color:var(--cream);opacity:.82;margin-top:1.1rem;max-width:56ch;line-height:1.5}
.fpe-actions{margin-top:2rem}
.fpe-aside{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.6rem;border-left:1px solid var(--line-gold);padding-left:3.2rem}
.fpe-badge{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.fpe-badge-mark{
  display:flex;align-items:center;justify-content:center;width:74px;height:74px;
  font-family:var(--font-display);font-weight:800;font-size:30px;letter-spacing:.04em;
  color:var(--navy-deep);background:var(--gold);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.fpe-badge-sub{font-family:var(--font-semi);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-l)}
.fpe-stats{list-style:none;display:flex;gap:1.6rem;margin:0;padding:0}
.fpe-stats li{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.1}
.fpe-stats li b{font-family:var(--font-display);font-weight:700;font-size:21px;color:var(--white)}
.fpe-stats li span{font-family:var(--font-semi);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:.25rem}
@media(max-width:860px){
  .fpe-card{grid-template-columns:1fr;gap:2.2rem;padding:2.4rem 1.8rem;text-align:left}
  .fpe-aside{flex-direction:row;justify-content:flex-start;flex-wrap:wrap;gap:1.6rem 2rem;border-left:0;padding-left:0;border-top:1px solid var(--line-gold);padding-top:2rem;width:100%}
  .fpe-body h2{max-width:none}
}

/* --- FPE cross-promo: COMING SOON (deactivated) state ----------------
   The product cross-promo is a teaser only for now. Nav item + band CTA are
   non-clickable and visibly dimmed, each with an on-brand "soon" cue. The red
   action color now reads as muted/disabled, not a live CTA. */

/* Nav "PE Exam Prep" — non-clickable, dimmed, with a gold "Soon" pill. Inherits
   .nav-menu a typography (set on the <a>; restated here for the <span>). */
.nav-menu .nav-coming-soon{
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  font-family:var(--font-semi);font-size:14px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted-d);opacity:.7;
  padding:.3rem 0;cursor:default;pointer-events:none;user-select:none;
}
.nav-menu .nav-coming-soon .nav-soon-pill{
  font-size:9px;font-weight:700;letter-spacing:.1em;line-height:1;
  color:var(--gold-l);background:rgba(201,168,76,.14);
  border:1px solid var(--line-gold);border-radius:999px;
  padding:.28em .55em;pointer-events:none;
}
@media(max-width:1040px){.nav-menu .nav-coming-soon{font-size:13px}}
@media(max-width:920px){
  /* Mobile drawer: match the bordered full-width row treatment of .nav-menu a. */
  .nav-menu .nav-coming-soon{width:100%;padding:1rem 0;border-bottom:1px solid var(--line-dark);font-size:16px;justify-content:flex-start}
}

/* Band CTA — disabled "Coming soon" pill: muted red, non-interactive. */
.fpe-actions .btn.is-disabled{
  background:rgba(192,57,43,.28);border-color:rgba(192,57,43,.35);
  color:rgba(255,255,255,.7);cursor:default;pointer-events:none;box-shadow:none;
}
.fpe-actions .btn.is-disabled:hover{background:rgba(192,57,43,.28);border-color:rgba(192,57,43,.35)}

/* Headline "Coming soon" badge in the band. */
.fpe-body h2 .fpe-soon-badge{
  display:inline-block;vertical-align:middle;margin-left:.6rem;
  font-family:var(--font-semi);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;line-height:1;
  color:var(--gold-l);background:rgba(201,168,76,.14);
  border:1px solid var(--line-gold);border-radius:999px;padding:.4em .7em;
}