/* ==========================================================================
   Safety Pro Solutions, Inc. — Design System
   Static mockup. Tokens here map 1:1 to Spectra One theme.json on migration.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  /* Brand */
  --red:            #D6162E;
  --red-hover:      #B10F24;
  --red-tint:       rgba(214,22,46,.10);

  /* Dark surfaces */
  --ink:            #0B0C0E;
  --ink-2:          #14161A;
  --ink-3:          #1D2126;
  --ink-4:          #262B31;

  /* Light surfaces */
  --paper:          #FFFFFF;
  --paper-2:        #F4F5F7;
  --paper-3:        #E9EBEF;

  /* Text */
  --text:           #14181D;
  --text-muted:     #5C646E;
  --on-dark:        #FFFFFF;
  --on-dark-muted:  #A9B0B9;

  /* Lines */
  --line-dark:      rgba(255,255,255,.12);
  --line-light:     #DFE3E8;

  /* Type */
  --font-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --font-body:    'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --wrap:      1280px;
  --wrap-tight: 980px;
  --gutter:    clamp(20px, 4vw, 48px);
  --radius:    3px;

  /* Spacing */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 88px; --s-8: 120px;

  --header-h: 92px;

  --shadow-1: 0 1px 3px rgba(11,12,14,.08), 0 8px 24px rgba(11,12,14,.06);
  --shadow-2: 0 2px 6px rgba(11,12,14,.10), 0 18px 48px rgba(11,12,14,.12);
}

/* --- 2. Reset ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--font-body); font-size:16.5px; line-height:1.68;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
ul,ol{margin:0; padding:0}
h1,h2,h3,h4,h5,p{margin:0}
:focus-visible{outline:2px solid var(--red); outline-offset:3px}

/* --- 3. Typography ------------------------------------------------------- */
h1,h2,h3,h4,.display,.eyebrow,.btn,.stat-num,.nav a,.card-num{
  font-family:var(--font-display);
}
h1,h2,h3,h4{
  font-weight:700; line-height:1.02; letter-spacing:-.005em;
  text-transform:uppercase; text-wrap:balance;
}
h1,.h1{font-size:clamp(2.9rem, 6.4vw, 5.4rem)}
h2,.h2{font-size:clamp(2.1rem, 3.9vw, 3.35rem)}
h3,.h3{font-size:clamp(1.35rem, 1.9vw, 1.72rem); letter-spacing:0}
h4,.h4{font-size:1.08rem; letter-spacing:.015em}

.eyebrow{
  display:block; font-size:1.02rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--red);
}
.eyebrow--light{color:var(--red)}
.eyebrow-rule{width:88px; height:3px; background:var(--red); margin:var(--s-3) 0}
.lead{font-size:clamp(1.02rem,1.25vw,1.14rem); line-height:1.72; color:var(--text-muted)}
.on-dark .lead, .dark .lead{color:var(--on-dark-muted)}
.tight{max-width:64ch}
.red{color:var(--red)}
.small{font-size:.86rem}
.upper{text-transform:uppercase; letter-spacing:.08em}

/* --- 4. Layout ----------------------------------------------------------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.wrap--tight{max-width:var(--wrap-tight)}
.section{padding-block:clamp(56px, 8vw, var(--s-8))}
.section--sm{padding-block:clamp(40px, 5vw, var(--s-6))}
.section--dark{background:var(--ink); color:var(--on-dark)}
.section--ink2{background:var(--ink-2); color:var(--on-dark)}
.section--paper2{background:var(--paper-2)}
.section--dark h1,.section--dark h2,.section--dark h3,
.section--ink2 h1,.section--ink2 h2,.section--ink2 h3{color:var(--on-dark)}
.section--dark p,.section--ink2 p{color:var(--on-dark-muted)}

.grid{display:grid; gap:var(--s-3)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center}
/* Form beside a sidebar: wider main column, top-aligned rather than centred. */
.split--form{grid-template-columns:1.25fr .75fr; align-items:start}
.section-head{max-width:70ch; margin-bottom:clamp(32px,4vw,var(--s-6))}
.section-head p{margin-top:var(--s-3)}
.center{text-align:center; margin-inline:auto}

@media (max-width:1000px){
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr}
}
@media (max-width:620px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
}

/* --- 5. Buttons --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:17px 30px; font-size:1.02rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  border:2px solid transparent; border-radius:var(--radius);
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn svg{width:17px; height:17px; flex:none; transition:transform .18s ease}
.btn:hover svg{transform:translateX(4px)}
.btn--primary{background:var(--red); color:#fff}
.btn--primary:hover{background:var(--red-hover)}
.btn--ghost{border-color:rgba(255,255,255,.55); color:#fff}
.btn--ghost:hover{border-color:#fff; background:rgba(255,255,255,.1)}
.btn--outline{border-color:var(--text); color:var(--text)}
.btn--outline:hover{background:var(--text); color:#fff}
.btn--sm{padding:12px 22px; font-size:.92rem}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-5)}

.link-arrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--red);
}
/* Red emphasis link inside a paragraph. */
.link-inline{color:var(--red); font-weight:600}
.link-inline:hover{text-decoration:underline}

.link-arrow svg{width:15px; height:15px; transition:transform .18s ease}
.link-arrow:hover svg{transform:translateX(4px)}

/* --- 6. Header ---------------------------------------------------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:200; height:var(--header-h);
  display:flex; align-items:center;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease, height .25s ease;
}
.site-header.is-solid{
  background:rgba(11,12,14,.96); backdrop-filter:blur(10px);
  border-bottom-color:var(--line-dark); height:76px;
}
body.has-light-header .site-header{background:rgba(11,12,14,.96); border-bottom-color:var(--line-dark)}
/* The WordPress admin bar is also position:fixed at the top, so for logged-in
   users the site header sits underneath it and the logo gets clipped. Offset
   by the admin bar's height. No effect for logged-out visitors. */
body.admin-bar .site-header{top:32px}
body.admin-bar .drawer{top:calc(var(--header-h) + 32px)}
@media screen and (max-width:782px){
  body.admin-bar .site-header{top:46px}
  body.admin-bar .drawer{top:calc(var(--header-h) + 46px)}
}
.header-inner{display:flex; align-items:center; gap:var(--s-4); width:100%;
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}

.brand{display:flex; align-items:center; gap:14px; flex:none}
/* Official horizontal lockup. The supplied artwork is dark-text (for light
   backgrounds), so a white-knockout variant is used on the dark header and
   footer. Swap the src if the client supplies an official knockout. */
.brand .brand-lockup{height:52px; width:auto}
.site-header.is-solid .brand .brand-lockup{height:44px}
.footer-brand .brand-lockup{height:58px}
@media (max-width:1080px){ .brand .brand-lockup{height:44px} }

.nav{margin-left:auto; display:flex; align-items:center; gap:clamp(14px,1.7vw,30px)}
.nav > li{list-style:none; position:relative}
.nav a{
  display:flex; align-items:center; gap:6px; padding:8px 0;
  font-size:1.02rem; font-weight:600; letter-spacing:.075em;
  text-transform:uppercase; color:#fff; white-space:nowrap;
}
.nav a:hover{color:var(--red)}
.nav .caret{width:9px; height:9px; opacity:.7}
.nav > li > a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--red); transition:width .2s ease;
}
.nav > li > a:hover::after{width:100%}
.nav > li.current > a{color:#fff}
.nav > li.current > a::after{width:100%}

.submenu{
  position:absolute; top:100%; left:-18px; min-width:266px; padding:10px 0;
  background:var(--ink-2); border:1px solid var(--line-dark);
  border-top:2px solid var(--red); box-shadow:var(--shadow-2);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav > li:hover .submenu, .nav > li:focus-within .submenu{opacity:1; visibility:visible; transform:translateY(0)}
.submenu li{list-style:none}
.submenu a{
  padding:11px 22px; font-family:var(--font-body); font-size:.93rem;
  font-weight:500; letter-spacing:.01em; text-transform:none;
  color:var(--on-dark-muted); border-left:2px solid transparent;
}
.submenu a:hover{background:var(--ink-3); color:#fff; border-left-color:var(--red)}

.header-cta{flex:none}
.nav-toggle{display:none; width:44px; height:44px; margin-left:auto; color:#fff}
.nav-toggle span{display:block; height:2px; background:currentColor; margin:5px auto; width:26px; transition:.2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1180px){
  .nav a{font-size:.95rem}
  .nav{gap:14px}
}
@media (max-width:1080px){
  :root{--header-h:74px}
  .nav-toggle{display:block}
  .nav, .header-cta{display:none}
  .site-header{background:rgba(11,12,14,.96); border-bottom-color:var(--line-dark)}
  .drawer.is-open{display:block}
}

/* Mobile drawer */
.drawer{
  display:none; position:fixed; inset:var(--header-h) 0 0 0; z-index:190;
  background:var(--ink); overflow-y:auto; padding:var(--s-3) var(--gutter) var(--s-6);
}
.drawer ul{list-style:none}
.drawer > ul > li{border-bottom:1px solid var(--line-dark)}
.drawer > ul > li > a, .drawer .acc-btn{
  display:flex; justify-content:space-between; align-items:center; width:100%;
  padding:16px 0; font-family:var(--font-display); font-weight:700; font-size:1.28rem;
  letter-spacing:.06em; text-transform:uppercase; color:#fff;
}
.drawer .acc-btn svg{width:13px; height:13px; transition:transform .2s}
.drawer .acc-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.drawer .acc-panel{display:none; padding-bottom:12px}
.drawer .acc-panel.is-open{display:block}
.drawer .acc-panel a{display:block; padding:9px 0 9px 16px; font-size:.98rem;
  color:var(--on-dark-muted); border-left:2px solid var(--ink-4)}
.drawer .acc-panel a:hover{color:#fff; border-left-color:var(--red)}
.drawer .btn{width:100%; justify-content:center; margin-top:var(--s-4)}

/* --- 7. Hero ------------------------------------------------------------ */
.hero{
  position:relative; display:flex; align-items:flex-end;
  min-height:min(880px, 100vh); padding-top:calc(var(--header-h) + 40px);
  background:var(--ink); color:#fff; overflow:hidden;
}
.hero__media{position:absolute; inset:0; z-index:0}
/* --hero-focus: which slice of the hero photo stays in frame once it is cropped
   to the hero's landscape box. The current photo is a portrait original, so this
   is the one value worth nudging: lower % favors the sky/upper structure,
   higher % favors the ground and foreground. */
.hero{--hero-focus:30%}
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  object-position:center var(--hero-focus);
  /* Slight desaturation keeps the brand red the loudest thing on the page. */
  filter:saturate(.88) contrast(1.04);
}
/* Scrim. Tuned for an arbitrary photograph: a heavy wedge on the left for the
   headline, a bottom fade into the feature strip, and a flat overall knockdown
   so a brighter photo can be dropped in without the copy going illegible. */
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(11,12,14,.96) 0%, rgba(11,12,14,.88) 30%,
                            rgba(11,12,14,.45) 58%, rgba(11,12,14,.62) 100%),
    linear-gradient(to top, rgba(11,12,14,.98) 0%, rgba(11,12,14,.15) 45%,
                            rgba(11,12,14,0) 72%),
    rgba(11,12,14,.26);
}
.hero__inner{position:relative; z-index:1; width:100%; max-width:var(--wrap);
  margin-inline:auto; padding:0 var(--gutter) clamp(40px,5vw,72px)}
.hero__copy{max-width:44rem}
.hero h1{
  margin-top:var(--s-2); text-shadow:0 2px 40px rgba(0,0,0,.5);
  /* Capped so "Industrial / Construction" stays on one line: it needs 684px at
     66px, and the copy column is 704px. Above ~4.1rem it wraps to a 4th line
     and pushes the feature strip below the fold. */
  font-size:clamp(2.4rem, 4.7vw, 4.1rem);
}
.hero p{margin-top:var(--s-3); max-width:38rem; color:#D6DAE0; font-size:1.08rem}
.hero .eyebrow{font-size:1.18rem; letter-spacing:.1em; line-height:1.3}
.hero .btn-row{margin-top:var(--s-4)}

/* --- 7b. Hero + feature strip share the first screen -------------------- */
/* Matches the design concept: the strip sits on the fold line rather than
   below it. Only applied where the strip is in its 5-across layout and the
   viewport is tall enough to hold both — otherwise they stack normally. */
.hero-block{display:flex; flex-direction:column}
@media (min-width:1081px) and (min-height:680px){
  .hero-block{min-height:100vh; min-height:100svh}
  .hero{
    flex:1 1 auto; min-height:420px;
    padding-top:calc(var(--header-h) + 20px);
  }
  .hero__inner{padding-bottom:clamp(24px,2.6vw,48px)}
  .feature-strip{flex:0 0 auto}
  .feature-strip li{padding-block:24px}
}

/* Page hero (interior pages) */
.page-hero{
  position:relative; background:var(--ink-2); color:#fff; overflow:hidden;
  padding:calc(var(--header-h) + clamp(56px,7vw,104px)) 0 clamp(56px,7vw,96px);
}
.page-hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(1100px 460px at 78% 6%, rgba(214,22,46,.22), transparent 62%),
    linear-gradient(180deg, #101317 0%, #0B0C0E 100%);
}
.page-hero::after{
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--line-dark) 1px, transparent 1px),
                   linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(105deg, transparent 30%, #000 100%);
}
.page-hero .wrap{position:relative; z-index:1}
.page-hero p{margin-top:var(--s-3); max-width:60ch; color:var(--on-dark-muted)}
.crumbs{display:flex; gap:10px; align-items:center; font-size:.82rem;
  letter-spacing:.1em; text-transform:uppercase; color:#7E868F; margin-bottom:var(--s-3)}
.crumbs a:hover{color:#fff}
.crumbs span{color:var(--red)}

/* --- 8. Feature strip --------------------------------------------------- */
.feature-strip{position:relative; z-index:2; background:var(--ink-2); border-top:1px solid var(--line-dark)}
.feature-strip ul{display:grid; grid-template-columns:repeat(5,1fr); list-style:none}
.feature-strip li{padding:var(--s-4) clamp(18px,2vw,32px); border-left:1px solid var(--line-dark)}
.feature-strip li:first-child{border-left:0}
.feature-strip svg{width:38px; height:38px; color:#fff; margin-bottom:16px}
.feature-strip h4{color:#fff; margin-bottom:8px; font-size:1.02rem; line-height:1.18}
.feature-strip p{font-size:.86rem; line-height:1.55; color:#9AA1AA; margin:0}
@media (max-width:1080px){ .feature-strip ul{grid-template-columns:repeat(2,1fr)}
  .feature-strip li{border-top:1px solid var(--line-dark)}
  .feature-strip li:nth-child(odd){border-left:0} }
@media (max-width:560px){ .feature-strip ul{grid-template-columns:1fr}
  .feature-strip li{border-left:0} }

/* --- 9. Cards ----------------------------------------------------------- */
.card{
  position:relative; background:var(--paper); border:1px solid var(--line-light);
  padding:clamp(26px,3vw,38px); border-radius:var(--radius);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display:flex; flex-direction:column;
}
.card::before{content:''; position:absolute; inset:0 0 auto 0; height:3px; background:var(--red);
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card__icon{width:46px; height:46px; color:var(--red); margin-bottom:var(--s-3)}
.card h3{margin-bottom:12px}
.card p{color:var(--text-muted); font-size:.97rem; flex:1}
.card .link-arrow{margin-top:var(--s-3)}

.card--dark{background:var(--ink-2); border-color:var(--line-dark)}
.card--dark h3{color:#fff}
.card--dark p{color:var(--on-dark-muted)}
.card--dark:hover{background:var(--ink-3); border-color:var(--line-dark)}

/* Red rule across the top of a card — was an inline style in three places. */
.card--topline{border-top:3px solid var(--red)}
.card--topline::before{content:none}   /* no hover rule; the border is the accent */
.card--ink{background:var(--ink)}

.card--num{padding-top:clamp(30px,3vw,42px)}
.card-num{font-size:2.6rem; font-weight:700; color:var(--paper-3); line-height:1; margin-bottom:14px}
.card--dark .card-num{color:var(--ink-4)}

/* Industry tile */
.tile{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:250px; padding:var(--s-4); overflow:hidden;
  background:var(--ink-2); border:1px solid var(--line-dark); color:#fff;
}
.tile::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(600px 240px at 20% 100%, rgba(214,22,46,.26), transparent 70%);
  transition:opacity .25s ease; opacity:.55;
}
.tile:hover::before{opacity:1}
.tile svg{position:relative; width:40px; height:40px; color:var(--red); margin-bottom:auto}
.tile h3{position:relative; color:#fff; margin-top:var(--s-3)}
.tile p{position:relative; color:var(--on-dark-muted); font-size:.92rem; margin-top:8px}

/* --- 10. Stats ---------------------------------------------------------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-dark)}
.stats > div{background:var(--ink); padding:var(--s-4) var(--s-3)}
.stat-num{display:block; font-size:clamp(2.6rem,4.2vw,3.6rem); font-weight:700;
  line-height:1; color:var(--red); letter-spacing:-.01em}
.stat-lbl{display:block; margin-top:12px; font-size:.84rem; line-height:1.45;
  letter-spacing:.08em; text-transform:uppercase; color:#fff}
@media (max-width:820px){ .stats{grid-template-columns:repeat(2,1fr)} }

.stats--inline{display:flex; flex-wrap:wrap; gap:clamp(28px,4vw,56px); background:none; margin-top:var(--s-5)}
.stats--inline > div{background:none; padding:0; border-left:3px solid var(--red); padding-left:18px}
.stats--inline .stat-lbl{color:var(--text)}
.on-dark .stats--inline .stat-lbl{color:#fff}

/* --- 11. Checklist / lists --------------------------------------------- */
.check{list-style:none; display:grid; gap:12px}
.check li{position:relative; padding-left:34px; font-size:.99rem}
.check li::before{
  content:''; position:absolute; left:0; top:.34em; width:18px; height:18px;
  background:var(--red); clip-path:polygon(14% 46%,3% 58%,38% 92%,97% 24%,86% 13%,37% 68%);
}
.check--2{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px var(--s-4)}
@media (max-width:620px){ .check--2{grid-template-columns:1fr} }

.pill-list{display:flex; flex-wrap:wrap; gap:10px; list-style:none}
.pill-list li{
  padding:9px 16px; font-size:.86rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; font-family:var(--font-display);
  border:1px solid var(--line-light); background:var(--paper); color:var(--text);
}
.on-dark .pill-list li, .section--dark .pill-list li, .section--ink2 .pill-list li{
  background:var(--ink-3); border-color:var(--line-dark); color:#fff
}
/* Pills that are links, rather than static labels. */
.pill-list--links li{padding:0; transition:border-color .18s ease, color .18s ease}
.pill-list--links a{display:block; padding:9px 16px}
.pill-list--links li:hover{border-color:var(--red); color:var(--red)}

/* --- 12. Testimonials --------------------------------------------------- */
.quote{
  background:var(--paper); border:1px solid var(--line-light); padding:clamp(26px,3vw,38px);
  display:flex; flex-direction:column; border-top:3px solid var(--red);
}
.stars{display:flex; gap:4px; color:var(--red); margin-bottom:var(--s-3)}
.stars svg{width:17px; height:17px}
.quote blockquote{margin:0; font-family:var(--font-display); font-weight:600;
  font-size:1.28rem; line-height:1.32; letter-spacing:.005em; flex:1}
.quote cite{display:block; margin-top:var(--s-3); font-style:normal; font-size:.84rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted)}
.section--dark .quote, .section--ink2 .quote{background:var(--ink-2); border-color:var(--line-dark); color:#fff}
.section--dark .quote cite, .section--ink2 .quote cite{color:var(--on-dark-muted)}

/* --- 13. Logo wall ------------------------------------------------------ */
.logo-wall{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(28px,5vw,72px); list-style:none}
.logo-wall li{font-family:var(--font-display); font-weight:700; font-size:clamp(1.1rem,1.7vw,1.5rem);
  letter-spacing:.06em; text-transform:uppercase; color:#6E767F; transition:color .2s}
.logo-wall li:hover{color:#fff}

/* --- 14. CTA band ------------------------------------------------------- */
.cta-band{position:relative; background:var(--red); color:#fff; overflow:hidden}
.cta-band::after{
  content:''; position:absolute; inset:0; opacity:.16;
  background-image:linear-gradient(135deg, rgba(0,0,0,.6) 25%, transparent 25%, transparent 50%,
    rgba(0,0,0,.6) 50%, rgba(0,0,0,.6) 75%, transparent 75%);
  background-size:14px 14px;
  mask-image:linear-gradient(90deg, transparent 55%, #000 100%);
}
.cta-band .wrap{position:relative; z-index:1; display:flex; align-items:center;
  justify-content:space-between; gap:var(--s-5); flex-wrap:wrap;
  padding-block:clamp(44px,6vw,76px)}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.9); margin-top:14px; max-width:52ch}
.cta-band .btn-row{margin-top:0}
.cta-band .btn--primary{background:#fff; color:var(--text)}
.cta-band .btn--primary:hover{background:var(--ink); color:#fff}

/* --- 15. Highlighted card, tags, inline pricing ------------------------ */
/* A single emphasised card sitting inside an ordinary card grid — used for the
   most-requested training program. Same visual language as its siblings, just
   full-width with a tag, so it reads as a highlight rather than a feature box. */
.tag{
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px;
  align-self:flex-start;      /* .card is a flex column — do not stretch */
  font-family:var(--font-display); font-weight:700; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase;
  background:var(--red); color:#fff; border-radius:2px;
}
.card--wide{grid-column:1 / -1}
/* Flagged cards keep the red rule on permanently instead of on hover, which is
   the whole of the emphasis — the card is otherwise identical to its siblings. */
.card--wide::before, .card--flag::before{transform:scaleX(1)}
.card-wide-inner{display:grid; grid-template-columns:1.4fr .6fr;
  gap:clamp(24px,3.5vw,52px); align-items:center; width:100%}
.card--wide .card__icon{margin-bottom:var(--s-2)}
@media (max-width:900px){ .card-wide-inner{grid-template-columns:1fr} }

.price-inline{display:flex; list-style:none; border:1px solid var(--line-light);
  border-radius:var(--radius); overflow:hidden; background:var(--paper-2)}
.price-inline li{flex:1; padding:15px 8px; text-align:center;
  border-left:1px solid var(--line-light)}
.price-inline li:first-child{border-left:0}
.price-inline b{display:block; font-family:var(--font-display); font-weight:700;
  font-size:1.55rem; line-height:1.1}
.price-inline span{display:block; margin-top:3px; font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted)}

table.data{width:100%; border-collapse:collapse; font-size:.96rem}
table.data th, table.data td{text-align:left; padding:15px 18px; border-bottom:1px solid var(--line-light)}
table.data th{font-family:var(--font-display); font-weight:700; font-size:.9rem;
  letter-spacing:.1em; text-transform:uppercase; background:var(--paper-2)}
.table-scroll{overflow-x:auto}

/* --- 16. FAQ accordion -------------------------------------------------- */
details.faq{border-bottom:1px solid var(--line-light); padding:6px 0}
details.faq summary{
  list-style:none; cursor:pointer; padding:20px 40px 20px 0; position:relative;
  font-family:var(--font-display); font-weight:700; font-size:1.24rem;
  text-transform:uppercase; letter-spacing:.01em;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{
  content:''; position:absolute; right:6px; top:50%; width:13px; height:13px;
  border-right:2.5px solid var(--red); border-bottom:2.5px solid var(--red);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s;
}
details.faq[open] summary::after{transform:translateY(-30%) rotate(225deg)}
details.faq .a{padding:0 40px 22px 0; color:var(--text-muted)}

/* --- 17. Forms ---------------------------------------------------------- */
.form{display:grid; gap:var(--s-3)}
.field{display:grid; gap:8px}
.field label{font-family:var(--font-display); font-weight:700; font-size:.86rem;
  letter-spacing:.11em; text-transform:uppercase}
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px; font:inherit; font-size:.98rem; color:var(--text);
  background:var(--paper); border:1px solid var(--line-light); border-radius:var(--radius);
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--red); outline:none; box-shadow:0 0 0 3px var(--red-tint)}
.field textarea{min-height:150px; resize:vertical}
.field--half{grid-column:span 1}
.form--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.form--2 .field--full{grid-column:1 / -1}
@media (max-width:620px){ .form--2{grid-template-columns:1fr} }
.form-note{font-size:.83rem; color:var(--text-muted)}
/* Empty notes exist only as a target for the mockup's submit message — take up
   no space until something is written into them. */
.form-note:empty{display:none}

/* --- 17b. Fluent Forms ---------------------------------------------------- */
/* Fluent Forms ships its own markup and stylesheet. These rules map its DOM
   onto the form design above, so a rendered form is indistinguishable from the
   static markup it replaced. Scoped to `.form-wrap` — that wrapper also raises
   specificity above Fluent Forms' own `.frm-fluent-form .ff-*` rules, which
   load after the theme stylesheet. */
.form-wrap .frm-fluent-form fieldset{
  border:0; margin:0; padding:0; min-width:0;
  display:grid; gap:var(--s-3); grid-template-columns:repeat(2,minmax(0,1fr));
}
.form-wrap .frm-fluent-form .ff-el-group{display:grid; gap:8px; margin:0; grid-column:1 / -1}
.form-wrap .frm-fluent-form .ff-el-group.sps-half{grid-column:span 1}
@media (max-width:620px){
  .form-wrap .frm-fluent-form fieldset{grid-template-columns:1fr}
  .form-wrap .frm-fluent-form .ff-el-group.sps-half{grid-column:1 / -1}
}

.form-wrap .frm-fluent-form .ff-el-input--label{margin:0; padding:0}
.form-wrap .frm-fluent-form .ff-el-input--label label{
  margin:0; font-family:var(--font-display); font-weight:700; font-size:.86rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--text);
}
.form-wrap .frm-fluent-form .ff-el-is-required label:after{color:var(--red)}

.form-wrap .frm-fluent-form .ff-el-form-control{
  width:100%; height:auto; padding:14px 16px; font:inherit; font-size:.98rem;
  line-height:1.4; color:var(--text); background:var(--paper);
  border:1px solid var(--line-light); border-radius:var(--radius); box-shadow:none;
}
.form-wrap .frm-fluent-form .ff-el-form-control:focus{
  border-color:var(--red); outline:none; box-shadow:0 0 0 3px var(--red-tint)}
.form-wrap .frm-fluent-form textarea.ff-el-form-control{min-height:150px; resize:vertical}

/* Fluent Forms prints a per-form <style> block after this stylesheet, tinting the
   submit button with its own --fluentform-primary. Re-point that variable rather
   than fighting it, and match the selector's specificity for the box model. */
.form-wrap{
  --fluentform-primary:var(--red);
  --arrow-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
/* The submit sits in a grid cell spanning both columns; without this it would
   stretch to the full form width instead of hugging its label. */
.form-wrap .frm-fluent-form .ff_submit_btn_wrapper{justify-items:start}
.form-wrap form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style){
  display:inline-flex; align-items:center; gap:12px; width:auto; height:auto;
  padding:17px 30px; font-family:var(--font-display); font-size:1.02rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  background:var(--red); background-color:var(--red); color:#fff;
  border:2px solid transparent; border-radius:var(--radius);
  transition:background-color .18s ease;
}
.form-wrap form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style):hover{
  background-color:var(--red-hover); color:#fff}
/* Every other primary button on the site pairs its label with an arrow glyph.
   Fluent Forms' button holds text only, so the arrow is drawn as a masked
   pseudo-element that inherits the button's colour. */
.form-wrap .frm-fluent-form .ff-btn-submit:after{
  content:""; width:17px; height:17px; flex:none; background-color:currentColor;
  -webkit-mask:var(--arrow-mask) center/contain no-repeat;
          mask:var(--arrow-mask) center/contain no-repeat;
  transition:transform .18s ease;
}
.form-wrap .frm-fluent-form .ff-btn-submit:hover:after{transform:translateX(4px)}

/* Validation and status messages in the site's own red rather than Bootstrap's. */
.form-wrap .frm-fluent-form .ff-el-is-error .ff-el-form-control{border-color:var(--red)}
.form-wrap .frm-fluent-form .error,
.form-wrap .frm-fluent-form .text-danger{
  margin-top:6px; font-size:.83rem; color:var(--red)}
.form-wrap .ff-message-success{
  padding:var(--s-3) var(--s-4); font-size:1.02rem; color:var(--text);
  background:var(--paper-2); border:0; border-left:4px solid var(--red);
  border-radius:var(--radius);
}

.contact-list{list-style:none; display:grid; gap:var(--s-3)}
.contact-list li{display:flex; gap:16px; align-items:flex-start}
.contact-list svg{width:22px; height:22px; color:var(--red); flex:none; margin-top:4px}
.contact-list b{display:block; font-family:var(--font-display); font-size:.86rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--on-dark-muted); margin-bottom:3px}
.contact-list a, .contact-list span{color:#fff; font-size:1.05rem}
.contact-list a:hover{color:var(--red)}

/* --- 18. Map slot ------------------------------------------------------- */
/* Holds the Google Maps iframe on the live site. Until then it renders as a
   labelled placeholder rather than an empty box. */
.map-slot{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:340px; padding:var(--s-4);
  background:var(--ink); border:1px solid var(--line-dark);
  background-image:linear-gradient(var(--line-dark) 1px, transparent 1px),
                   linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size:56px 56px;
}
.map-slot svg{width:44px; height:44px; color:var(--red); margin:0 auto var(--s-3)}
.map-slot h3{color:#fff}
.map-slot p{max-width:46ch; margin-inline:auto}
.map-slot iframe{width:100%; height:100%; border:0}

/* --- 19. Resource cards ------------------------------------------------ */
.res{display:flex; gap:var(--s-3); padding:var(--s-4); background:var(--paper);
  border:1px solid var(--line-light); transition:box-shadow .2s, transform .2s}
.res:hover{box-shadow:var(--shadow-1); transform:translateY(-3px)}
.res svg{width:34px; height:34px; color:var(--red); flex:none}
.res h4{margin-bottom:7px; font-size:1.05rem}
.res p{font-size:.92rem; color:var(--text-muted); margin:0}

/* --- 20. Footer -------------------------------------------------------- */
.site-footer{background:var(--ink); color:var(--on-dark-muted); border-top:3px solid var(--red)}
.footer-top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:clamp(28px,4vw,56px); padding-block:clamp(48px,6vw,var(--s-7))}
.site-footer h4{color:#fff; margin-bottom:var(--s-3); font-size:.95rem; letter-spacing:.13em}
.site-footer ul{list-style:none; display:grid; gap:11px; font-size:.95rem}
.site-footer a:hover{color:#fff}
.footer-brand .brand{margin-bottom:var(--s-3)}
.footer-brand p{font-size:.95rem; max-width:38ch}

/* Sister-company logos — their own full-width strip between the link columns
   and the legal bar. Stacking them inside the brand column made that column
   200px taller than its neighbours, and grid stretched the rest to match.
   The three marks have very different aspect ratios (1.5 / 3.1 / 5.5), so a
   shared height would look mismatched; each gets an identical box and scales
   to fit inside it instead. */
.sisters{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--s-3);
  padding-block:var(--s-5); border-top:1px solid var(--line-dark);
}
.sisters__label{
  flex:none;
  font-family:var(--font-display); font-weight:700; font-size:.8rem;
  letter-spacing:.16em; text-transform:uppercase; color:#fff;
}
.sisters ul{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:var(--s-3) clamp(28px,4vw,64px); list-style:none;
}
.sisters a{
  display:flex; align-items:center; justify-content:center;
  width:240px; height:70px; opacity:.85;
  transition:opacity .18s ease, transform .18s ease;
}
/* Caldwell's source PNG is 300x98 but only ~34px of that is ink -- roughly
   two thirds is baked-in vertical padding. Constrained to the shared 70px
   slot it rendered far smaller than the other two. This gives it a slot at
   its native size, so it renders 1:1 (no upscaling) and ~40% larger. */
.sisters a.native{width:300px; height:98px}

/* Optical alignment. Geometric centring is already exact, but these three
   marks have very different ink heights (24px for Caldwell's wordmark vs
   64-67px for the two stacked GFI lockups), so the taller ones read as
   hanging below Caldwell's baseline. .lift nudges a mark up without
   resizing it. Adjust the value per logo as artwork changes. */
.sisters a.lift img{transform:translateY(-6px)}
.sisters a:hover{opacity:1; transform:translateY(-2px)}
.sisters img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}

.footer-bottom{display:flex; justify-content:space-between; gap:var(--s-3); flex-wrap:wrap;
  padding-block:var(--s-3); border-top:1px solid var(--line-dark); font-size:.85rem}
.footer-bottom ul{display:flex; gap:var(--s-3); list-style:none; font-size:.85rem}
@media (max-width:940px){ .footer-top{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .footer-top{grid-template-columns:1fr} }

/* --- 21. Utilities ----------------------------------------------------- */
.mt-0{margin-top:0} .mt-2{margin-top:var(--s-2)} .mt-3{margin-top:var(--s-3)}
.mt-4{margin-top:var(--s-4)} .mt-5{margin-top:var(--s-5)} .mt-6{margin-top:var(--s-6)}
.mb-0{margin-bottom:0}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.no-scroll{overflow:hidden}

/* Progressive enhancement. Content is visible by default; the hidden state is
   only applied once JS has added .js-reveal, so a script failure, a blocked
   file, or no-JS can never leave a section permanently invisible. */
.reveal{transition:opacity .6s ease, transform .6s ease}
.js-reveal .reveal{opacity:0; transform:translateY(18px)}
.js-reveal .reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal, .js-reveal .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}