/*
Theme Name: Train & Retain
Description: Lightweight custom theme for Train & Retain, rebuilt from the approved visual audit of the Wilmer/Mikado implementation. Native WordPress/Gutenberg content editing, no page builder, no slider library.
Author: Train & Retain
Version: 0.9.3
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: trainandretain
*/

/* =========================================================
   1. SELF-HOSTED TYPEFACE
   Yantramanav only ships real static weights 100/300/400/500/700/900.
   The old theme requested 600/800 (which don't exist as real font
   files and were being silently substituted by the browser). This
   rebuild uses the real weights: 400 (body), 500 (nav/labels),
   700 (H2/H3), 900 (H1) -- latin subset only, self-hosted, no
   Google Fonts request at runtime.
   ========================================================= */
@font-face {
  font-family: 'Yantramanav';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/yantramanav-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Yantramanav';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/yantramanav-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Yantramanav';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/yantramanav-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Yantramanav';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fonts/yantramanav-900.woff2') format('woff2');
}

/* =========================================================
   2. DESIGN TOKENS
   Values sourced directly from the approved visual audit.
   ========================================================= */
:root{
  /* brand colours (measured from the live site) */
  --color-navy: #001659;
  --color-blue: #008fd5;
  --color-orange: #ff5e14;
  --color-gray: #565969;
  --color-gray-light: #f5f6f8;
  --color-border: #e3e5ea;
  --color-white: #ffffff;
  --color-footer: #00102e;

  /* type */
  --font-base: 'Yantramanav', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --text-body: 1.125rem;      /* 18px, matches audited base size */
  --text-small: 0.9375rem;    /* 15px */
  --text-overline: 0.875rem;  /* 14px */
  --text-h1: clamp(2.25rem, 1.3rem + 4.5vw, 5rem);   /* ~36px -> 80px */
  --text-h2: clamp(1.875rem, 1.3rem + 2.6vw, 3.75rem); /* ~30px -> 60px */
  --text-h3: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); /* ~22px -> 30px */
  --text-h4: 1.375rem;
  --line-tight: 1.05;
  --line-heading: 1.15;
  --line-body: 1.6;

  /* spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* layout */
  --content-width: 1100px; /* matches the audited theme's own content_width */
  --wide-width: 1320px;

  /* geometry -- sharp / industrial, matches audit finding of 2px button radius */
  --radius: 2px;
  --border-width: 1px;

  /* motion -- short, functional only */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --speed: 0.2s;
}

/* =========================================================
   3. RESET & BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--text-body);
  line-height: var(--line-body);
  color: var(--color-gray);
  background: var(--color-white);
}
img, svg, video{ max-width: 100%; height: auto; display: block; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
/* Content lists authored in the editor should look like lists. */
.wp-block-list{
  margin: 0 0 var(--space-md);
  padding-left: 1.25em;
  list-style: disc;
}
.wp-block-list.is-style-ordered,
ol.wp-block-list{ list-style: decimal; }
.wp-block-list li{ margin-bottom: var(--space-2xs); }
h1, h2, h3, h4, h5, h6{
  margin: 0 0 var(--space-sm);
  font-family: var(--font-base);
  color: var(--color-navy);
  line-height: var(--line-heading);
  font-weight: 700;
}
h1{ font-size: var(--text-h1); font-weight: 900; letter-spacing: -0.02em; line-height: var(--line-tight); }
h2{ font-size: var(--text-h2); font-weight: 700; letter-spacing: -0.01em; line-height: var(--line-tight); }
h3{ font-size: var(--text-h3); font-weight: 700; }
h4{ font-size: var(--text-h4); font-weight: 700; }
p{ margin: 0 0 var(--space-sm); }
p:last-child{ margin-bottom: 0; }
a{ color: var(--color-blue); text-decoration: none; transition: color var(--speed) var(--ease); }
a:hover{ color: var(--color-navy); }

/* Accessible, visible, on-brand focus state everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline: 3px solid var(--color-orange);
  outline-offset: 2px;
}

.screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-sm);
  font-weight: 500;
}
.skip-link:focus{ left: var(--space-sm); top: var(--space-sm); }

/* =========================================================
   4. LAYOUT PRIMITIVES
   ========================================================= */
.container{
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}
.container--wide{ max-width: var(--wide-width); }

.section{ padding-block: var(--space-xl); }
.section--tight{ padding-block: var(--space-lg); }

.bg-light{ background: var(--color-gray-light); }
.bg-blue{ background: var(--color-blue); color: var(--color-white); }
.bg-blue h2, .bg-blue h3, .bg-blue h4{ color: var(--color-white); }
.bg-navy{ background: var(--color-navy); color: rgba(255,255,255,0.85); }
.bg-navy h2, .bg-navy h3, .bg-navy h4{ color: var(--color-white); }

@media (min-width: 782px){
  .section{ padding-block: var(--space-2xl); }
}

/* =========================================================
   5. BUTTONS & LINKS
   Solid fill, near-square corners, no shadow -- matches the
   audited button treatment (radius 2px, no border, no shadow).
   ========================================================= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.85rem 2.25rem;
  border-radius: var(--radius);
  border: var(--border-width) solid transparent;
  font-family: var(--font-base);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.btn--blue{ background: var(--color-blue); color: var(--color-white); }
.btn--blue:hover{ background: var(--color-navy); color: var(--color-white); }
.btn--navy{ background: var(--color-navy); color: var(--color-white); }
.btn--navy:hover{ background: var(--color-blue); color: var(--color-white); }
.btn--outline{ background: transparent; border-color: currentColor; color: var(--color-white); }
.btn--outline:hover{ background: var(--color-white); color: var(--color-navy); }
.btn--orange{ background: var(--color-orange); color: var(--color-white); }
.btn--orange:hover{ background: var(--color-navy); color: var(--color-white); }

/* =========================================================
   6. SECTION HEADING ACCENT
   Previously also rendered an oversized pale duplicate of the
   heading text as a decorative background watermark (via a PHP
   render_block filter in inc/blocks.php). That watermark text
   routinely overflowed and clipped mid-word because its wrapper
   was sized to the real (much smaller) heading -- removed as a
   rendering bug. Only the restrained orange accent rule below
   remains.
   ========================================================= */

/* is-style-watermark -- a Heading block style applied directly in
   content (Workforce Solutions here; also used on the Our Services
   page). It previously had no matching CSS at all, so it rendered as
   a bare heading with none of the "signature device" treatment this
   theme uses everywhere else -- the flattest moment on the page.
   Kept restrained (a short accent rule, not a giant pale word) so it
   reads as deliberate rather than decorative clutter. */
.is-style-watermark{ position: relative; }
.is-style-watermark::before{
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  margin-bottom: var(--space-sm);
  background: var(--color-orange);
}

/* Overline label -- native Paragraph block style, reused above
   section headings, the hero, and the Job Seekers transition. */
.is-style-overline{
  display: block;
  margin-bottom: var(--space-sm);
  font-size: var(--text-overline);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-blue);
}
.bg-navy .is-style-overline,
.bg-blue .is-style-overline,
.job-seekers .is-style-overline{ color: var(--color-white); opacity: 0.9; }

/* =========================================================
   7. SITE HEADER
   ========================================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: var(--border-width) solid var(--color-border);
}
.site-header__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-xs);
}
.site-header__branding{
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.site-header__logo img{ max-height: 42px; width: auto; }
.site-header__logo-text{
  font-size: 1.375rem;
  font-weight: 900;
  color: var(--color-navy);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.site-header__contact{
  display: none;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--text-small);
}
.site-header__contact a{
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  color: var(--color-navy);
  font-weight: 500;
  white-space: nowrap;
}
.site-header__contact a:hover{ color: var(--color-blue); }
.site-header__contact svg{ width: 18px; height: 18px; flex-shrink: 0; }

/* Phone stays visible but reads as secondary to the CTA -- lighter
   weight and the neutral gray used elsewhere for supporting text,
   rather than competing brand-navy. */
.site-header__phone{
  color: var(--color-gray);
  font-weight: 500;
}
.site-header__phone:hover{ color: var(--color-navy); }
.site-header__phone svg{ color: var(--color-gray); }

/* Header CTA: same .btn/.btn--orange base as the rest of the button
   system, just reined in to header-appropriate proportions -- the
   base .btn padding (0.85rem 2.25rem) is sized for in-page CTAs and
   was what made "Contact Us" tower over the nav. */
.site-header__cta{
  padding: 0.6875rem 1.75rem;
  font-size: var(--text-small);
}

.site-header__toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
}
.site-header__toggle svg{ width: 22px; height: 22px; }
.site-header__toggle .icon-close{ display: none; }
.site-header__toggle[aria-expanded="true"] .icon-open{ display: none; }
.site-header__toggle[aria-expanded="true"] .icon-close{ display: block; }

/* Primary nav: collapsed off-canvas panel below the nav breakpoint */
.primary-nav{
  position: fixed;
  inset: 0 0 0 auto;
  width: min(320px, 86vw);
  height: 100vh;
  background: var(--color-white);
  box-shadow: -8px 0 24px rgba(0,22,89,0.12);
  transform: translateX(100%);
  transition: transform var(--speed) var(--ease);
  overflow-y: auto;
  padding: var(--space-xl) var(--space-md) var(--space-md);
  z-index: 99;
}
.primary-nav.is-open{ transform: translateX(0); }
.primary-nav__menu > li{ border-bottom: var(--border-width) solid var(--color-border); }
.primary-nav__menu a{
  display: block;
  padding: var(--space-sm) 0;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--color-navy);
}
.primary-nav__menu a:hover{ color: var(--color-blue); }
.primary-nav__menu .current-menu-item > a{ color: var(--color-blue); }

.primary-nav__menu .sub-menu{ display: none; padding-left: var(--space-sm); }
.primary-nav__menu .sub-menu.is-open{ display: block; }
.primary-nav__item{ position: relative; }
.primary-nav__submenu-toggle{
  position: absolute;
  right: 0;
  top: 0;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.primary-nav__submenu-toggle svg{ transition: transform var(--speed) var(--ease); }
.primary-nav__submenu-toggle[aria-expanded="true"] svg{ transform: rotate(180deg); }

.nav-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,22,89,0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--speed) var(--ease);
  z-index: 98;
}
.nav-overlay.is-open{ opacity: 1; visibility: visible; }

@media (min-width: 960px){
  /* Desktop-only: a little more breathing room than the compact
     mobile bar, landing the header at ~76px total height (the
     42px logo plus this padding). Mobile keeps its original
     tighter padding untouched. */
  .site-header__bar{ padding-block: 1rem; }

  .site-header__contact{ display: flex; }
  .site-header__toggle{ display: none; }

  .primary-nav{
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    box-shadow: none;
    transform: none;
    overflow: visible;
    padding: 0;
  }
  .primary-nav__menu{ display: flex; align-items: center; gap: 1.875rem; }
  .primary-nav__menu > li{ border-bottom: 0; }
  .primary-nav__menu a{ padding: var(--space-2xs) 0; }

  .primary-nav__item{ position: relative; }
  .primary-nav__submenu-toggle{ display: none; }
  .primary-nav__menu .sub-menu{
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--color-white);
    border: var(--border-width) solid var(--color-border);
    padding: var(--space-2xs) 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease);
  }
  .primary-nav__menu .sub-menu li{ padding-inline: var(--space-sm); }
  .primary-nav__item:hover > .sub-menu,
  .primary-nav__item:focus-within > .sub-menu,
  .primary-nav__menu .sub-menu.is-open{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* =========================================================
   8. INNER PAGE BANNER
   Plain CSS background-image banner. No slider, no JS.
   ========================================================= */
.inner-banner{
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 260px;
  padding: var(--space-lg) 0;
  background-color: var(--color-navy);
  background-size: cover;
  background-position: center;
  color: var(--color-white);
}
.inner-banner::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,22,89,0.55) 0%, rgba(0,22,89,0.8) 100%);
}
.inner-banner__inner{ position: relative; z-index: 1; }
.inner-banner__overline{
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: var(--text-overline);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  opacity: 0.85;
}
.inner-banner h1{ color: var(--color-white); margin-bottom: var(--space-2xs); }
.inner-banner__subtitle{ max-width: 640px; font-size: 1.125rem; opacity: 0.9; margin: 0; }

@media (min-width: 782px){
  .inner-banner{ min-height: 360px; padding: var(--space-xl) 0; }
}

/* =========================================================
   9. SPLIT IMAGE / TEXT BLOCK
   Built on core/columns (2 columns) -- WP's own block already
   stacks below 782px, we only add brand spacing/alignment and
   an optional reversed order for alternating rhythm.
   ========================================================= */
.split-section{ gap: var(--space-xl) !important; align-items: center; }
.split-section .wp-block-column{ align-self: center; }
.split-section .split-section__media img{ width: 100%; height: auto; display: block; }

/* Media pass, About "Who We Are": the new team/high-rise photo is a
   tall vertical original (native ~0.56 aspect) -- in a normal ~50%
   desktop column that renders at ~900px tall, towering over the text
   beside it. Capped so it still reads as a tall portrait photo
   without dominating the row; object-position keeps the three people
   and the skyline behind them in frame rather than centring on empty
   sky. On mobile's narrower single-column width the natural height
   already sits under this cap, so nothing crops there. */
.split-section__media--photo img{
  max-height: 640px;
  object-fit: cover;
  object-position: center 35%;
}
@media (min-width: 782px){
  .split-section.split-section--reverse{ flex-direction: row-reverse; }
}

/* =========================================================
   10. FEATURE GRIDS (photo cards + icon items share a grid)
   WordPress prints its own dynamic block-support CSS for Columns
   blocks (.is-layout-flex{display:flex;flex-wrap:nowrap}) with the
   same specificity as a single class, sometimes later in the
   cascade than the theme stylesheet -- without !important here it
   silently wins, squeezing every column into one flex-nowrap row
   instead of this grid's controlled wrap. With 3 columns (the
   homepage's service cards) that's indistinguishable from the
   intended layout, which is why it went unnoticed; with more
   columns and longer words (service-page category tiles) it forces
   ugly mid-word breaks. !important forces the real grid every time.
   ========================================================= */
.feature-grid{
  display: grid !important;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 640px){
  .feature-grid{ grid-template-columns: repeat(var(--cols, 3), 1fr) !important; }
}

.photo-card{ display: block; }
.photo-card__media{ margin-bottom: var(--space-sm); aspect-ratio: 4 / 3; overflow: hidden; }
.photo-card__media img{ width: 100%; height: 100%; object-fit: cover; }
.photo-card__title{
  margin: 0;
  padding-top: var(--space-2xs);
  border-top: 3px solid var(--color-blue);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-navy);
}

.icon-feature{ display: flex; flex-direction: column; gap: var(--space-2xs); }
.icon-feature__icon{ width: 44px; height: 44px; color: var(--color-orange); }
.icon-feature__icon svg{ width: 100%; height: 100%; }
.icon-feature__title{ margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--color-navy); }
.icon-feature__text{ margin: 0; font-size: var(--text-small); }

/* =========================================================
   11. STAT / TRUST BAND
   Built on core/columns (4 columns) -- core handles the flex
   layout and mobile stacking, we only add brand typography.
   ========================================================= */
.stat-band-section .wp-block-column{ text-align: center; }
/* Thin dividers tie the four numbers into one strip, rather than
   four separate floating widgets, once there's room for them
   side-by-side. */
@media (min-width: 600px){
  .stat-band.wp-block-columns > .wp-block-column + .wp-block-column{
    border-left: 1px solid rgba(255,255,255,0.25);
  }
}
.stat-band__number{
  margin: 0 0 var(--space-3xs);
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3rem);
  font-weight: 900;
  line-height: 1;
  color: var(--color-white);
}
.stat-band__label{
  margin: 0;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-white);
  opacity: 0.9;
}

/* Restrained trade-flavoured line icons, one per stat. Hand-drawn,
   single consistent stroke weight (1.75), CSS mask so colour always
   tracks the band background -- not a generic icon-library import. */
.stat-icon{ position: relative; padding-top: 3.25rem; }
.stat-icon::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2.25rem;
  height: 2.25rem;
  background-color: var(--color-white);
  opacity: 0.95;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.stat-icon--people::before{
  -webkit-mask-image: 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.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17.5h18'/%3E%3Cpath d='M5 17.5a7 7 0 0 1 14 0'/%3E%3Cpath d='M10.5 17.5V13'/%3E%3Cpath d='M12 8v2.2'/%3E%3C/svg%3E");
  mask-image: 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.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17.5h18'/%3E%3Cpath d='M5 17.5a7 7 0 0 1 14 0'/%3E%3Cpath d='M10.5 17.5V13'/%3E%3Cpath d='M12 8v2.2'/%3E%3C/svg%3E");
}
.stat-icon--cap::before{
  -webkit-mask-image: 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.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5 2 9.5 12 14l10-4.5L12 5Z'/%3E%3Cpath d='M6 11.5V16c0 1.4 2.7 2.5 6 2.5s6-1.1 6-2.5v-4.5'/%3E%3Cpath d='M21 9.5v5'/%3E%3C/svg%3E");
  mask-image: 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.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5 2 9.5 12 14l10-4.5L12 5Z'/%3E%3Cpath d='M6 11.5V16c0 1.4 2.7 2.5 6 2.5s6-1.1 6-2.5v-4.5'/%3E%3Cpath d='M21 9.5v5'/%3E%3C/svg%3E");
}
.stat-icon--check::before{
  -webkit-mask-image: 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.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='12' height='17' rx='1.5'/%3E%3Cpath d='M9 4V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1'/%3E%3Cpath d='M9 12.5l2 2 4-4.5'/%3E%3C/svg%3E");
  mask-image: 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.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='12' height='17' rx='1.5'/%3E%3Cpath d='M9 4V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1'/%3E%3Cpath d='M9 12.5l2 2 4-4.5'/%3E%3C/svg%3E");
}
.stat-icon--compass::before{
  -webkit-mask-image: 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.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='6.5' r='1.4'/%3E%3Cpath d='M12 7.9v1'/%3E%3Cpath d='M12 8.9 7.5 20'/%3E%3Cpath d='M12 8.9 16.5 20'/%3E%3Cpath d='M7.5 20h9'/%3E%3C/svg%3E");
  mask-image: 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.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='6.5' r='1.4'/%3E%3Cpath d='M12 7.9v1'/%3E%3Cpath d='M12 8.9 7.5 20'/%3E%3Cpath d='M12 8.9 16.5 20'/%3E%3Cpath d='M7.5 20h9'/%3E%3C/svg%3E");
}
@media (max-width: 599px){
  /* More compact on small screens: tighter band padding and
     tighter gaps between the four stacked stats, numbers/labels
     stay full size -- nothing shrinks, it just sits closer together.
     --wp--style--block-gap is what core's own responsive column
     CSS actually uses for stacked spacing; the explicit margin is
     a belt-and-braces fallback so this works regardless of which
     mechanism is in play. */
  .stat-band-section.section{ padding-block: var(--space-lg); }
  .stat-band.wp-block-columns{ --wp--style--block-gap: 1rem; }
  .stat-band.wp-block-columns .wp-block-column{ margin-bottom: var(--space-sm) !important; }
  .stat-band.wp-block-columns .wp-block-column:last-child{ margin-bottom: 0 !important; }
}

/* =========================================================
   12. CTA BAND
   Stronger typography + one orange accent rule. A layered
   graphic (the client's branded pens photo) was evaluated and
   dropped -- the only available source asset was visibly soft
   at display size and no higher-resolution original exists, so
   a clean typography-led band is used instead of a low-quality
   image (see the visual-QA notes for what was checked).
   ========================================================= */
.cta-band{ text-align: center; }
.cta-band h2{
  max-width: 14ch;
  margin-inline: auto;
  font-size: var(--text-h1);
}
.cta-band h2::before{
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  margin: 0 auto var(--space-md);
  background: var(--color-orange);
}
.cta-band p{ max-width: 44ch; margin-inline: auto; }
.cta-band__actions{ display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; margin-top: var(--space-md); }

/* Homepage-only split layout: content + the branded pens graphic.
   Scoped to .cta-band__content/__media/__layout (new wrapper classes
   only the homepage uses) rather than editing the rules above, so
   the Our Services page's plain centered CTA band -- same .cta-band
   class, no graphic -- is completely unaffected.
   The source pens photo is a real 545x931 asset (native resolution,
   not a soft upscale) -- displayed here well under its native width
   so it stays sharp; see style.css history/QA notes for the earlier
   "drop it, it's soft" call this reverses now that it's shown at a
   restrained size instead of large. */
.cta-band__layout{ gap: var(--space-xl) !important; }
.cta-band .cta-band__content{ text-align: left; flex: 1 1 58% !important; }
.cta-band .cta-band__content h2{
  max-width: 17ch;
  margin-inline: 0;
  text-align: left;
  /* The base .cta-band h2 rule (still in effect for the Our Services
     page's plain, ungraphic CTA) intentionally sizes this heading at
     --text-h1 for extra weight in a full-width centered band. In this
     narrower ~58%-wide column that reads as oversized and forces an
     awkward 3-way wrap, so it steps back down to the standard H2
     scale here -- still bold, still the largest thing in the column. */
  font-size: var(--text-h2);
}
.cta-band .cta-band__content h2::before{ margin: 0 0 var(--space-md) 0; }
.cta-band .cta-band__content p{ margin-inline: 0; text-align: left; }
.cta-band__content .cta-band__actions{ justify-content: flex-start; }
.cta-band__media{ display: flex; justify-content: center; flex: 1 1 36% !important; }
.cta-band__pens{ margin: 0; max-width: 300px; }
.cta-band__pens img{ width: 100%; height: auto; display: block; filter: drop-shadow(0 24px 32px rgba(0,0,0,0.35)); }
@media (max-width: 781px){
  .cta-band__media{ margin-top: var(--space-lg); }
  .cta-band__pens{ max-width: 180px; margin-inline: auto; }
}

/* =========================================================
   13. TESTIMONIAL CARD
   Equal-height cards: the card is a flex column, the quote
   grows to fill available space, so every card's person/role
   block lands on the same baseline regardless of quote length.
   ========================================================= */
.testimonial-card{
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-top: 3px solid var(--color-orange);
}
.testimonial-card::before{
  content: "\201C";
  position: absolute;
  top: -0.05em;
  left: var(--space-md);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-blue);
  opacity: 0.16;
  pointer-events: none;
}
.testimonial-card__quote{
  flex: 1;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--color-navy);
}
.testimonial-card__person{
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-top: var(--space-sm);
  border-top: var(--border-width) solid var(--color-border);
}
.testimonial-card__avatar{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.9375rem;
  flex-shrink: 0;
  overflow: hidden;
}
.testimonial-card__avatar img{ width: 100%; height: 100%; object-fit: cover; }
.testimonial-card__name{ margin: 0; font-weight: 700; color: var(--color-navy); font-size: var(--text-small); line-height: 1.3; }
.testimonial-card__role{ margin: 0; font-size: 0.8125rem; color: var(--color-gray); line-height: 1.3; }

/* =========================================================
   14. JOB CARD
   ========================================================= */
.job-card{
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  border: var(--border-width) solid var(--color-border);
  border-top: 3px solid var(--color-blue);
}
.job-card__meta{ display: flex; flex-wrap: wrap; gap: var(--space-xs); font-size: 0.8125rem; color: var(--color-gray); text-transform: uppercase; letter-spacing: 0.04em; }
.job-card__title{ margin: 0; font-size: 1.125rem; color: var(--color-navy); }
.job-card__excerpt{ font-size: var(--text-small); }
.job-card .btn{ align-self: flex-start; margin-top: var(--space-2xs); }

/* =========================================================
   15. GRAVITY FORMS WRAPPER
   Gravity Forms keeps its own markup/behaviour (fields, IDs,
   conditional logic, notifications, the hidden job_ref field) --
   this is CSS-only normalisation so the two forms on the site
   (Register Your Interest, Contact) read as part of the same
   design system instead of default Gravity Forms output.
   Verified against this install's actual rendered markup (GF
   2.9, "gravity-theme"/no-framework), not guessed selectors.

   !important note: GF's own plugin stylesheet
   (gravityforms/assets/css/dist/theme.min.css) enqueues AFTER this
   theme's style.css and, on several of these properties, matches at
   equal or higher selector specificity (e.g. its
   ".gfield_required .gfield_required_text" beats a bare
   ".gfield_required_text"). Confirmed by inspecting the actual
   matched CSSOM rules on this install, not assumed -- !important is
   used only on the specific properties proven to lose that fight. */
.gform_wrapper.gravity-theme{ font-family: var(--font-base); }
.gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper.gravity-theme .gform-field-label__text{ font-weight: 500; color: var(--color-navy) !important; }
.gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper.gravity-theme legend.gfield_label{ margin-bottom: var(--space-2xs); font-size: var(--text-small); }

/* Consistent vertical rhythm between fields -- GF's own spacing here
   relied entirely on its layout grid's gutters, which read as uneven
   next to the rest of the site's deliberate spacing scale. */
.gform_wrapper.gravity-theme .gfield{ margin-bottom: var(--space-md) !important; }

/* Required indicator: GF's default is an alarming italic red
   "(Required)". Quieter and on-brand instead -- still legible as
   a required-field cue, without reading as an error. */
.gform_wrapper.gravity-theme .gfield_required_text{
  color: var(--color-gray) !important;
  font-style: normal !important;
  font-size: 0.8125rem !important;
  font-weight: 400;
}

.gform_wrapper.gravity-theme input[type="text"],
.gform_wrapper.gravity-theme input[type="email"],
.gform_wrapper.gravity-theme input[type="tel"],
.gform_wrapper.gravity-theme input[type="number"],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea{
  border-radius: var(--radius);
  border: var(--border-width) solid var(--color-border) !important;
  padding: var(--space-xs) var(--space-sm) !important;
  font-family: var(--font-base);
  font-size: 1rem !important;
  color: var(--color-navy);
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.gform_wrapper.gravity-theme textarea{ min-height: 8rem; }
.gform_wrapper.gravity-theme input[type="text"]:focus,
.gform_wrapper.gravity-theme input[type="email"]:focus,
.gform_wrapper.gravity-theme input[type="tel"]:focus,
.gform_wrapper.gravity-theme input[type="number"]:focus,
.gform_wrapper.gravity-theme select:focus,
.gform_wrapper.gravity-theme textarea:focus{
  border-color: var(--color-blue) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 143, 213, 0.18);
}

/* Checkboxes/radios: native controls, just recoloured and given
   breathing room -- no custom-built control markup, so screen
   readers and keyboard behaviour are exactly what GF ships. */
.gform_wrapper.gravity-theme .gfield_checkbox,
.gform_wrapper.gravity-theme .gfield_radio{ display: flex; flex-direction: column; gap: var(--space-2xs); }
.gform_wrapper.gravity-theme .gchoice{ display: flex; align-items: center; gap: var(--space-2xs); }
.gform_wrapper.gravity-theme .gfield-choice-input{
  width: 18px;
  height: 18px;
  accent-color: var(--color-blue);
  margin: 0;
}
.gform_wrapper.gravity-theme .gchoice label{ font-size: var(--text-small); color: var(--color-navy); }

/* Expo Candidate Screening form (ID 4) only: it has ten Yes/No radio
   questions. The site-wide .gfield_radio rule above stacks choices
   vertically -- right for Register Your Interest's 8-option trade
   checklist, but it doubles the height of every single Yes/No
   question here for no reason. Scoped to this one form (by its
   wrapper ID) so Register Your Interest's checkbox/radio layout is
   completely unaffected. */
#gform_wrapper_4 .gfield_radio{ flex-direction: row; flex-wrap: wrap; column-gap: var(--space-lg); row-gap: var(--space-2xs); }

/* File upload dropzone (Register Your Interest's CV field) */
.gform_wrapper.gravity-theme .gform_drop_area{
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  background: var(--color-gray-light);
  padding: var(--space-md);
  text-align: center;
}
.gform_wrapper.gravity-theme .gform_drop_instructions{ color: var(--color-gray); font-size: var(--text-small); }
.gform_wrapper.gravity-theme .gform_button_select_files{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-2xs);
  padding: 0.6rem 1.5rem;
  border-radius: var(--radius);
  border: var(--border-width) solid var(--color-navy);
  background: transparent;
  color: var(--color-navy);
  font-family: var(--font-base);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.gform_wrapper.gravity-theme .gform_button_select_files:hover{ background: var(--color-navy); color: var(--color-white); }

.gform_wrapper.gravity-theme .gform_button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 2.25rem;
  border-radius: var(--radius);
  background: var(--color-blue);
  color: var(--color-white);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  border: 0;
  cursor: pointer;
}
.gform_wrapper.gravity-theme .gform_button:hover{ background: var(--color-navy); }
.gform_wrapper.gravity-theme .gform_button:focus-visible{ outline: 2px solid var(--color-blue); outline-offset: 2px; }

@media (max-width: 599px){
  .gform_wrapper.gravity-theme .gfield{ margin-bottom: var(--space-sm); }
}

/* =========================================================
   16. SITE FOOTER
   ========================================================= */
.site-footer{ background: var(--color-footer); color: rgba(255,255,255,0.7); }
.site-footer a{ color: rgba(255,255,255,0.7); }
.site-footer a:hover{ color: var(--color-white); }
.site-footer__grid{
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
  padding-block: var(--space-lg);
}
.site-footer__heading{
  margin-bottom: var(--space-sm);
  color: var(--color-white);
  font-size: 1.25rem;
}
.site-footer__about p{ max-width: 32em; }
.site-footer__nav li{ margin-bottom: var(--space-2xs); }
.site-footer__contact li{ display: flex; align-items: center; gap: var(--space-2xs); margin-bottom: var(--space-2xs); }
.site-footer__contact svg{ width: 18px; height: 18px; flex-shrink: 0; }

.site-footer__bottom{
  border-top: var(--border-width) solid rgba(255,255,255,0.12);
  padding-block: var(--space-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: 0.8125rem;
}
.site-footer__social{ display: flex; gap: var(--space-xs); }
.site-footer__social a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: var(--border-width) solid rgba(255,255,255,0.2);
  border-radius: var(--radius);
}
.site-footer__social svg{ width: 18px; height: 18px; }

@media (min-width: 782px){
  .site-footer__grid{ grid-template-columns: 2fr 1fr 1fr; gap: var(--space-lg); padding-block: var(--space-xl); }
}

/* =========================================================
   17. DEVELOPMENT PLACEHOLDER IMAGES
   ========================================================= */
.dev-placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, var(--color-gray-light), var(--color-gray-light) 10px, #eceef2 10px, #eceef2 20px);
  color: var(--color-gray);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: center;
  border: 1px dashed var(--color-border);
}

/* =========================================================
   18. ENTRY CONTENT (Gutenberg output on standard pages)
   ========================================================= */
.entry-content{ padding-block: var(--space-xl); }
.entry-content > *{ max-width: var(--content-width); margin-inline: auto; }
.entry-content > .alignwide{ max-width: var(--wide-width); }
.entry-content > .alignfull{ max-width: none; }

/* Homepage + service pages (template-service-page.php): same
   width-constraint logic, no forced top/bottom padding -- the hero
   must sit flush under the header, and every section below manages
   its own spacing via .section. */
.home-content > *,
.page-content > *{ max-width: var(--content-width); margin-inline: auto; }
.home-content > .alignwide,
.page-content > .alignwide{ max-width: var(--wide-width); }
.home-content > .alignfull,
.page-content > .alignfull{ max-width: none; }

/* =========================================================
   19. NATIVE BLOCK BUTTON STYLES
   theme.json already brands the default (solid blue) button.
   This adds the outline variant used for secondary CTAs, and
   a navy solid variant, targeting WP core's own button markup
   so content authored with the native Buttons block matches
   the brand without needing a custom class.
   ========================================================= */
.wp-block-button.is-style-outline .wp-block-button__link{
  border: 2px solid currentColor;
  color: inherit;
  background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background: var(--color-white);
  color: var(--color-navy);
}
.wp-block-button.is-style-outline-navy .wp-block-button__link{
  border: 2px solid var(--color-navy);
  color: var(--color-navy);
  background: transparent;
}
.wp-block-button.is-style-outline-navy .wp-block-button__link:hover{
  background: var(--color-navy);
  color: var(--color-white);
}
.wp-block-button.is-style-btn-navy .wp-block-button__link{
  background: var(--color-navy);
  color: var(--color-white);
}
.wp-block-button.is-style-btn-navy .wp-block-button__link:hover{
  background: var(--color-blue);
}

/* =========================================================
   20. HERO
   Semantic markup (core/cover), no slider, no JS. Content is
   always visible -- entrance animation (if any) is a progressive
   enhancement only, never required for visibility.
   ========================================================= */
/* Height: the Cover block itself still carries a fixed 545px inline
   style (its own minHeight/minHeightUnit attributes, left untouched
   so the block stays exactly what the editor shows) -- inline style
   specificity always wins over a bare class, so these rules need
   !important to actually make the hero responsive. Tuned close to
   the source photo's native 650px height so the browser is never
   forced to upscale it much (a taller box needs cover to zoom the
   image in further, softening it). */
.hero.wp-block-cover{ min-height: 68vh !important; }
@media (min-width: 782px){
  .hero.wp-block-cover{ min-height: 74vh !important; }
}
.hero.wp-block-cover::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,22,89,0.6) 0%, rgba(0,22,89,0.72) 100%);
}
.hero.wp-block-cover .wp-block-cover__inner-container{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}
.hero .is-style-overline{
  color: var(--color-white);
  opacity: 0.9;
  margin-bottom: var(--space-sm);
}
.hero h1{
  color: var(--color-white);
  margin-bottom: var(--space-2xs);
}
.hero__brand{
  display: block;
  margin: 0 0 var(--space-md);
  font-size: clamp(1.5rem, 1rem + 3vw, 2.75rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-blue);
}
.hero__lede{
  max-width: 620px;
  margin-bottom: var(--space-lg);
  font-size: 1.1875rem;
  color: var(--color-white);
  opacity: 0.92;
}
.hero .wp-block-buttons{ margin: 0; }

/* "Looking for Work?" secondary CTA: the shared native-block
   is-style-outline rule (section 19) uses border-color: currentColor
   and color: inherit, which resolve to the page's default near-black
   text color here since nothing upstream cascades a white color down
   to this button -- hence the heavy black border/black text bug.
   Scoped to .hero only, so the CTA band further down this same page
   (which reuses is-style-outline too) is completely unaffected.
   Padding is the shared 0.85rem/2.25rem from theme.json's button
   element minus this button's own 2px border, so the outer box
   height comes out identical to the borderless primary button next
   to it rather than 4px taller. */
.hero .wp-block-button.is-style-outline .wp-block-button__link{
  padding: calc(0.85rem - 2px) calc(2.25rem - 2px);
  border-color: var(--color-white);
  color: var(--color-white);
  background: transparent;
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.hero .wp-block-button.is-style-outline .wp-block-button__link:hover{
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-navy);
}

/* Mobile-only refinement (~375-599px). Desktop/tablet hero is
   untouched above this breakpoint. Two problems at narrow widths:
   1) .hero__brand ("TRAIN & RETAIN") sits at up to ~1.7rem, bold
      and uppercase -- close enough to the H1's own size/weight that
      the two read as competing headlines instead of headline +
      wordmark. Shrunk and tightened to the H1 here specifically.
   2) The buttons were already stacking (auto width, left-aligned)
      but not using the full available width, which reads as
      cramped/unbalanced under a two-line H1. Stretched to full
      width with a clear gap; height stays equal automatically since
      both already share the same padding/border-compensated sizing. */
@media (max-width: 599px){
  .hero__brand{
    margin-bottom: var(--space-sm);
    font-size: 1.375rem;
  }
  .hero__lede{
    font-size: 1.0625rem;
    line-height: 1.5;
  }
  .hero .wp-block-buttons{
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }
  .hero .wp-block-buttons .wp-block-button{ width: 100%; }
  .hero .wp-block-buttons .wp-block-button__link{ width: 100%; }
}

/* =========================================================
   20b. PAGE HERO -- inner service pages
   Smaller sibling of .hero (section 20): same core/cover pattern,
   same gradient/overline/H1 treatment, sized for a secondary page
   rather than the homepage's primary landing hero. Used by
   template-service-page.php; content (overline/H1/lede/CTA) is
   ordinary Gutenberg content inside the Cover block, so it stays
   fully editable.
   ========================================================= */
.page-hero.wp-block-cover{ min-height: 46vh; }
.page-hero.wp-block-cover::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,22,89,0.6) 0%, rgba(0,22,89,0.82) 100%);
}
.page-hero.wp-block-cover .wp-block-cover__inner-container{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}
.page-hero .is-style-overline{ color: var(--color-white); opacity: 0.9; margin-bottom: var(--space-sm); }
.page-hero h1{ color: var(--color-white); margin-bottom: var(--space-sm); }
.page-hero p{ max-width: 620px; margin-bottom: var(--space-lg); font-size: 1.1875rem; color: rgba(255,255,255,0.92); }
.page-hero .wp-block-buttons{ margin: 0; }
@media (min-width: 782px){
  .page-hero.wp-block-cover{ min-height: 52vh; }
}
@media (max-width: 480px){
  .page-hero.wp-block-cover{ min-height: 58vh; }
}

/* Round-2 detail polish, Apprentices / Labour Hire / Recruitment Only,
   later extended (pre-client fix pass) to Job Seekers, Register Your
   Interest, About Us, Contact and Our Services -- i.e. every page
   using .page-hero. Each of these Cover blocks carries its own fixed
   inline min-height (629px on most of them, a literal 100vh on the
   original Labour Hire/Recruitment Only) which -- inline always beats
   a class selector on specificity -- silently made the .page-hero
   rules a few lines up dead code everywhere. Confirmed live at 375px:
   every one of these pages sat at exactly 629px (out of an 812px
   viewport, ~77% of the screen) regardless of how little hero copy
   the page actually had. !important here makes every page-hero
   consistently sized and genuinely responsive instead of each
   carrying whatever height its block happened to be set to. Also
   softens the overlay the same amount as the homepage hero (0.82 ->
   0.72 at its darkest), since these photos were reading flatter/
   darker than necessary. min-height is a floor, not a cap, so this
   never clips content -- a page whose copy genuinely needs more room
   simply renders taller than the floor, exactly as before. */
.page-id-7198 .page-hero.wp-block-cover,
.page-id-7199 .page-hero.wp-block-cover,
.page-id-7200 .page-hero.wp-block-cover,
.page-id-7122 .page-hero.wp-block-cover,
.page-id-7215 .page-hero.wp-block-cover,
.page-id-1458 .page-hero.wp-block-cover,
.page-id-1743 .page-hero.wp-block-cover,
.page-id-1636 .page-hero.wp-block-cover{ min-height: 48vh !important; }
@media (min-width: 782px){
  .page-id-7198 .page-hero.wp-block-cover,
  .page-id-7199 .page-hero.wp-block-cover,
  .page-id-7200 .page-hero.wp-block-cover,
  .page-id-7122 .page-hero.wp-block-cover,
  .page-id-7215 .page-hero.wp-block-cover,
  .page-id-1458 .page-hero.wp-block-cover,
  .page-id-1743 .page-hero.wp-block-cover,
  .page-id-1636 .page-hero.wp-block-cover{ min-height: 56vh !important; }
}
.page-id-7198 .page-hero.wp-block-cover::before,
.page-id-7199 .page-hero.wp-block-cover::before,
.page-id-7200 .page-hero.wp-block-cover::before,
.page-id-7122 .page-hero.wp-block-cover::before,
.page-id-7215 .page-hero.wp-block-cover::before,
.page-id-1458 .page-hero.wp-block-cover::before,
.page-id-1743 .page-hero.wp-block-cover::before,
.page-id-1636 .page-hero.wp-block-cover::before{
  background: linear-gradient(180deg, rgba(0,22,89,0.55) 0%, rgba(0,22,89,0.72) 100%) !important;
}

/* =========================================================
   21. WORKFORCE SOLUTIONS -- SERVICE CARDS
   ========================================================= */
.service-card{
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.service-card:hover,
.service-card:focus-within{
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 22, 89, 0.12);
}
.service-card .service-card__media{ aspect-ratio: 4 / 3; overflow: hidden; }
.service-card .service-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s var(--ease);
}
.service-card:hover .service-card__media img,
.service-card:focus-within .service-card__media img{
  transform: scale(1.03);
}
.service-card .service-card__body{ padding: var(--space-md); display: flex; flex-direction: column; flex: 1; }
.service-card h3{
  margin: 0 0 var(--space-2xs);
  padding-top: var(--space-2xs);
  border-top: 3px solid var(--color-orange);
  font-size: 1.375rem;
}
.service-card p{ flex: 1; }
.service-card .wp-block-button{ margin-top: var(--space-sm); }
.service-card .wp-block-button__link::after{
  content: "\2192";
  display: inline-block;
  margin-left: var(--space-2xs);
  transition: transform var(--speed) var(--ease);
}
.service-card .wp-block-button__link:hover::after{ transform: translateX(3px); }

/* =========================================================
   22. JOB SEEKERS TRANSITION SECTION
   ========================================================= */
.job-seekers.wp-block-cover{ min-height: auto; }
.job-seekers.wp-block-cover::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(120deg, rgba(0,22,89,0.88) 0%, rgba(0,22,89,0.7) 100%);
}
.job-seekers.wp-block-cover .wp-block-cover__inner-container{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
  padding-block: var(--space-xl);
}
.job-seekers h2{ color: var(--color-white); }
.job-seekers p{ color: rgba(255,255,255,0.9); max-width: 640px; }

/* =========================================================
   23. TESTIMONIALS
   Card styling itself lives in section 13. This just guarantees
   equal card heights on desktop (belt-and-braces on top of the
   Columns block's own default stretch) and clean, evenly spaced
   stacking on mobile.
   ========================================================= */
.wp-block-columns:has(> .testimonial-card){ align-items: stretch; }
@media (max-width: 781px){
  .wp-block-columns:has(> .testimonial-card) > .testimonial-card{ margin-bottom: var(--space-md); }
  .wp-block-columns:has(> .testimonial-card) > .testimonial-card:last-child{ margin-bottom: 0; }
}

/* =========================================================
   24. PORTRAIT FRAME -- signature layered photo composition
   Reusable on any split-section (or future service page). Three
   real layers instead of an arbitrary outer rectangle:
     1. a genuine technical-drawing motif (assets/images/
        blueprint-motif.svg -- a vector, so it stays sharp at any
        size) sitting behind and peeking out top-left;
     2. the photo itself in a white matte frame (a real "printed
        photo" treatment, not just a box-shadow);
     3. one orange accent that physically touches the frame's
        corner rather than floating near it.
   The photo is targeted via .wp-block-image (the figure Gutenberg
   already outputs) so no extra markup/wrapper block is needed --
   content stays fully editable.
   ========================================================= */
.portrait-frame{
  position: relative;
  isolation: isolate;
  padding: var(--space-lg) var(--space-sm) var(--space-sm) var(--space-lg);
}
.portrait-frame::before{
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: url('assets/images/blueprint-motif.svg');
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 84% auto;
  opacity: 0.22;
}
.portrait-frame .wp-block-image{
  position: relative;
  margin: 0;
  background: var(--color-white);
  padding: var(--space-xs);
  box-shadow: 0 20px 40px rgba(0, 22, 89, 0.18);
}
.portrait-frame .wp-block-image img{ display: block; width: 100%; height: auto; }
.portrait-frame .wp-block-image::after{
  content: "";
  position: absolute;
  z-index: 2;
  left: -2px;
  bottom: 2.75rem;
  width: 2.5rem;
  height: 4px;
  background: var(--color-orange);
  transform-origin: left center;
  transform: rotate(-38deg);
}
@media (max-width: 599px){
  .portrait-frame{ padding: var(--space-md) var(--space-2xs) var(--space-2xs) var(--space-md); }
  .portrait-frame::before{ background-size: 78% auto; }
}

/* =========================================================
   25. FRAME ACCENT -- restrained corner detail
   Lighter-weight sibling of .portrait-frame: a single orange
   corner bracket, no offset card. Used on Labour Hire so the
   two split-sections don't compete for attention; reusable
   anywhere a photo needs a small brand touch without the full
   layered treatment.
   ========================================================= */
.frame-accent{ position: relative; }
.frame-accent::before{
  content: "";
  position: absolute;
  z-index: 2;
  top: calc(-1 * var(--space-xs));
  left: calc(-1 * var(--space-xs));
  width: 2.75rem;
  height: 2.75rem;
  border-top: 3px solid var(--color-orange);
  border-left: 3px solid var(--color-orange);
  pointer-events: none;
}

/* =========================================================
   26. VIEWPORT-ENTRY MOTION SYSTEM
   Reusable, JS-optional reveal system (see assets/js/motion.js).

   Gating, in order:
   1. Everything here lives under html.js-motion -- a class the
      inline bootstrap script in header.php sets synchronously in
      <head>. If JS is disabled/fails, that class never appears,
      these rules never match, and every element below is simply
      visible with no hidden initial state. Motion is enhancement
      only, never required for content visibility.
   2. Nested inside that, prefers-reduced-motion: no-preference --
      so a reduced-motion user never receives the hidden initial
      state either; motion.js independently marks the same
      elements .is-in-view immediately under reduced motion, so
      the two agree without depending on each other.

   Apprentices composition sequence (.portrait-frame.is-in-view):
     A. blueprint (::before) reveals via clip-path            (0s)
     B. photo/frame slides in ~24px from the right             (+0.25s)
     C. orange accent draws in (scaleX) from its touch-point    (+0.55s)

   Labour Hire's lighter sibling (.frame-accent.is-in-view):
     A. photo slides in ~20px                                  (0s)
     B. orange corner bracket draws in                          (+0.3s)
   ========================================================= */
@media (prefers-reduced-motion: no-preference){
  .js-motion .portrait-frame::before{
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.6s var(--ease);
  }
  .js-motion .portrait-frame.is-in-view::before{
    clip-path: inset(0 0 0 0);
  }
  .js-motion .portrait-frame .wp-block-image{
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.5s var(--ease) 0.25s, transform 0.5s var(--ease) 0.25s;
  }
  .js-motion .portrait-frame.is-in-view .wp-block-image{
    opacity: 1;
    transform: none;
  }
  .js-motion .portrait-frame .wp-block-image::after{
    transform: scaleX(0) rotate(-38deg);
    transition: transform 0.35s var(--ease) 0.55s;
  }
  .js-motion .portrait-frame.is-in-view .wp-block-image::after{
    transform: scaleX(1) rotate(-38deg);
  }

  /* Stat count-up: motion.js tweens the text content itself, this
     just reserves a stable width so digits don't jitter the layout
     as they count from 0 up to the final value. */
  .js-motion .stat-band__number{
    display: inline-block;
    min-width: 3.5ch;
  }

  /* .reveal-frame is an explicit opt-in modifier (new service pages
     only) -- bare .frame-accent, already live and approved on the
     homepage's Labour Hire section, is intentionally left static so
     nothing about that approved section changes here. */
  .js-motion .frame-accent.reveal-frame img{
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  }
  .js-motion .frame-accent.reveal-frame.is-in-view img{
    opacity: 1;
    transform: none;
  }
  .js-motion .frame-accent.reveal-frame::before{
    width: 0;
    height: 0;
    transition: width 0.3s var(--ease) 0.3s, height 0.3s var(--ease) 0.3s;
  }
  .js-motion .frame-accent.reveal-frame.is-in-view::before{
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* =========================================================
   27. SERVICE PAGE COMPONENTS
   Small, deliberately reused vocabulary for the three core
   service pages (Apprentices & Trainees, Labour Hire,
   Recruitment Only) -- built on .feature-grid (section 10) and
   .icon-feature (section 10) rather than a new grid system.
   ========================================================= */

/* Icon Feature Grid: icon is injected by render_block (inc/blocks.php)
   from a className on the wrapping Group -- heading/paragraph stay
   plain, fully editable content. */
.icon-feature{
  padding: var(--space-md);
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-top: 3px solid var(--color-blue);
}
.icon-feature__icon{ margin-bottom: var(--space-sm); }

/* Apprentices & Trainees (page-id-7198) only, mobile only: the six
   Service Pillar cards read as a tall, slow-to-scan stack at narrow
   widths. Trims vertical padding/gaps -- icon size, typography,
   borders and copy are untouched, only the empty space around them
   shrinks. Scoped by page ID (not a bare .icon-feature rule) so
   Labour Hire's "Why Train & Retain" cards and Recruitment Only's
   comparison cards, which reuse the same class, are unaffected.
   Round-2 detail polish tightened this further (space-xs -> space-2xs
   card padding, plus a smaller inter-card grid gap) since six full-size
   cards still made for a long scroll even after the first pass. */
@media (max-width: 599px){
  .page-id-7198 .icon-feature{
    padding-block: var(--space-2xs);
    gap: var(--space-3xs);
  }
  .page-id-7198 .icon-feature__icon{ margin-bottom: var(--space-3xs); }
  .page-id-7198 .feature-grid.reveal-grid{ gap: var(--space-sm); }
}

/* Round-2 detail polish: service-page cards (Apprentices' six Service
   Pillars, Labour Hire's three "Why Train & Retain" reasons,
   Recruitment Only's comparison cards) pick up the same orange top
   accent the homepage's service cards now use, instead of the old
   flat blue -- it also now matches this component's own icon colour
   (--color-orange, set in section 10). Scoped to the three service
   pages only: About Us reuses bare .icon-feature for its own cards
   (team/credibility/evolution) and must not change. */
.page-id-7198 .icon-feature,
.page-id-7199 .icon-feature,
.page-id-7200 .icon-feature{
  border-top-color: var(--color-orange);
}

/* Recruitment Only's service-comparison grid: the card for the
   service you're already on (no "Explore" button) is visually the
   odd one out -- navy top border + a light tint -- rather than
   orange like the two genuine "go look at this instead" options. */
.icon-feature--current{
  border-top-color: var(--color-navy) !important;
  background: var(--color-gray-light);
}

/* Process / How It Works: numbered steps on the same feature-grid,
   large index number instead of an icon. Stacks on mobile like any
   other feature-grid card -- no connecting line to break. */
.process-step{
  position: relative;
  padding-top: var(--space-md);
  border-top: 3px solid var(--color-orange);
}
.process-step__index{
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  color: var(--color-navy);
  opacity: 0.28;
}
.process-step__title{ margin: 0 0 var(--space-3xs); font-size: 1.0625rem; }
.process-step__text{ margin: 0; font-size: var(--text-small); color: var(--color-gray); }

/* Category tile: Labour Hire's workforce categories. A numbered,
   spec-sheet-style card instead of six bespoke trade icons. */
.category-tile{
  position: relative;
  padding: var(--space-md);
  background: var(--color-gray-light);
  border: var(--border-width) solid var(--color-border);
}
.category-tile__index{
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--color-blue);
  opacity: 0.25;
}
.category-tile__title{ margin: 0; padding-right: var(--space-lg); font-size: 1.0625rem; }

/* Round-2 detail polish: a restrained hover state so the six category
   tiles read as an interactive reference sheet even though they carry
   no link -- border and index pick up the brand orange briefly, mouse
   only, nothing to trip prefers-reduced-motion checks. */
.category-tile{ transition: border-color var(--speed) var(--ease); }
.category-tile:hover{ border-color: var(--color-orange); }
.category-tile:hover .category-tile__index{ color: var(--color-orange); }

/* Round-2 detail polish: Recruitment Only's eight-step process reads
   as a long stack on mobile even split into two phases (see the
   page's own content grouping) -- trims the same way page-id-7198's
   pillars were trimmed above, scoped so Apprentices' five-step and
   Labour Hire's three-step processes (same .process-step class,
   already a comfortable length) are untouched. */
@media (max-width: 599px){
  .page-id-7200 .process-step{ padding-top: var(--space-sm); }
  .page-id-7200 .feature-grid.reveal-grid{ gap: var(--space-sm); }
}

/* =========================================================
   28. REVEAL GRID -- service pages only
   Opt-in modifier (.reveal-grid) kept separate from the bare
   .feature-grid used on the already-approved homepage, so nothing
   about the homepage's Workforce Solutions cards changes. Cards
   fade/rise in a short stagger, capped so it never depends on
   exact child count.
   ========================================================= */
@media (prefers-reduced-motion: no-preference){
  .js-motion .reveal-grid > *{
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  }
  .js-motion .reveal-grid.is-in-view > *{ opacity: 1; transform: none; }
  .js-motion .reveal-grid.is-in-view > *:nth-child(2){ transition-delay: 0.08s; }
  .js-motion .reveal-grid.is-in-view > *:nth-child(3){ transition-delay: 0.16s; }
  .js-motion .reveal-grid.is-in-view > *:nth-child(4){ transition-delay: 0.24s; }
  .js-motion .reveal-grid.is-in-view > *:nth-child(5){ transition-delay: 0.32s; }
  .js-motion .reveal-grid.is-in-view > *:nth-child(n+6){ transition-delay: 0.4s; }
}

/* =========================================================
   29. REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   30. JOB SEEKERS -- outline-navy plain button
   .btn (section 5) has no light-background outline variant --
   the other three are solid-blue, solid-navy and white-on-dark.
   Used on job single/archive secondary CTAs that sit on
   .bg-light or plain white sections.
   ========================================================= */
.btn--outline-navy{ background: transparent; border-color: var(--color-navy); color: var(--color-navy); }
.btn--outline-navy:hover{ background: var(--color-navy); color: var(--color-white); }

/* =========================================================
   31. JOB CARD -- meta line
   Extends .job-card (section 14) with the small icon+text meta
   items used on every card (location / type / employment).
   ========================================================= */
.job-card__meta-item{ display: inline-flex; align-items: center; gap: 0.3em; }
/* !important: in this WP install's block editor, any apiVersion-1 block
   on the page (e.g. the legacy RevSlider block) forces the whole editor
   into non-iframe compatibility mode, so wp-admin/block-library's own
   bare `svg` sizing rules can share the same specificity as this one and
   win on source order -- confirmed via a 1100px-wide icon in the editor
   canvas otherwise. Matches the existing .feature-grid !important
   precedent (section 10) for the same category of admin-CSS conflict. */
.job-card__meta-item svg{ width: 14px !important; height: 14px !important; flex-shrink: 0; }

/* =========================================================
   32. JOBS EMPTY STATE
   Shown whenever there are zero (or zero filter-matching)
   published jobs, on the landing-page preview and the archive
   alike -- the site must never show "Current Opportunities"
   followed by blank space.
   ========================================================= */
.jobs-empty-state{
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  background: var(--color-white);
  border: var(--border-width) dashed var(--color-border);
}
.jobs-empty-state h3{ margin: 0 0 var(--space-2xs); }
.jobs-empty-state p{ max-width: 44ch; margin: 0 auto var(--space-md); color: var(--color-gray); }

/* =========================================================
   33. CURRENT OPPORTUNITIES ARCHIVE
   ========================================================= */
.opportunities-intro{ max-width: 56ch; font-size: 1.125rem; }

.job-filter{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
}
.job-filter__pill{
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.1rem;
  border: var(--border-width) solid var(--color-border);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-navy);
  text-decoration: none;
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.job-filter__pill:hover{ border-color: var(--color-blue); color: var(--color-blue); }
.job-filter__pill.is-active{ background: var(--color-navy); border-color: var(--color-navy); color: var(--color-white); }

/* =========================================================
   34. SINGLE JOB OPPORTUNITY
   ========================================================= */
.job-back-link{
  display: inline-block;
  margin-bottom: var(--space-md);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-blue);
  text-decoration: none;
}
.job-back-link:hover{ color: var(--color-navy); }

.job-single__meta{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-sm) 0;
  font-size: 0.9375rem;
  color: var(--color-gray);
}
.job-single__meta-item{ display: inline-flex; align-items: center; gap: 0.35em; }
.job-single__meta-item svg{ width: 16px !important; height: 16px !important; flex-shrink: 0; color: var(--color-blue); }

.job-single__intro{ max-width: 60ch; font-size: 1.125rem; margin-top: var(--space-sm); }

.job-photo{ max-height: 420px; overflow: hidden; }
.job-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.job-single__content{ max-width: var(--content-width); margin-inline: auto; }
.job-single__content > *{ margin-bottom: var(--space-sm); }

.job-single__apply{ max-width: var(--content-width); margin: var(--space-md) auto 0; }

.job-single__footer-cta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

/* =========================================================
   35. TEAM CARD -- About page ("Meet the Team", MVP)
   Deliberately a single wide card, not a grid -- only one
   verified team member exists for MVP. Built as a split-section
   variant (photo + content) so adding more people later means
   adding more cards to the row, not redesigning the component.
   ========================================================= */
.team-card{ gap: var(--space-lg) !important; align-items: center; }
.team-card .team-card__media{ align-self: center; }
.team-card .team-card__media img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.team-card__role{
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-blue);
}
.team-card__linkedin{
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  margin-top: var(--space-sm);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-navy);
  text-decoration: none;
}
.team-card__linkedin:hover{ color: var(--color-blue); }
.team-card__linkedin svg{ width: 18px; height: 18px; }

/* =========================================================
   36. CREDIBILITY -- partner logo row
   The awards/partnership facts themselves reuse .icon-feature
   (section 10/27) rather than a new list component.
   ========================================================= */
.partner-logos{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}
.partner-logos img{ height: 56px; width: auto; max-width: 100%; object-fit: contain; }

/* Media pass additions: the real 2026 award graphic and the one
   MATES site photo, both added to the existing Industry Credibility
   copy. Deliberately small/contained -- these are supporting proof
   next to a claim already made in the feature-grid above, not a
   second hero. */
.about-award-proof{ max-width: 280px; margin: var(--space-md) auto 0; }
.about-award-proof img{ display: block; width: 100%; height: auto; box-shadow: 0 12px 24px rgba(0,22,89,0.12); }
.about-mates-photo{ max-width: 560px; margin: var(--space-md) auto 0; }
.about-mates-photo img{ display: block; width: 100%; height: auto; border-radius: var(--radius); }

/* Media pass addition: the team group photo sits as a compact,
   captioned companion under Steve's individual profile -- not a
   second full-width hero, and it does not touch the existing
   team-card split above it. */
.about-team-photo{ max-width: 720px; margin: 0 auto; text-align: center; }
.about-team-photo img{ display: block; width: 100%; height: auto; border-radius: var(--radius); }
.about-team-photo figcaption{ margin-top: var(--space-2xs); font-size: var(--text-small); color: var(--color-gray); }

/* =========================================================
   37. EVOLUTION -- process-step reused as a 3-stage progression
   (About page "How Train & Retain Has Evolved"). No new
   component -- same numbered card as service-page "How It Works"
   sections, just three stages instead of five.
   ========================================================= */
.evolution-step{ position: relative; padding-top: var(--space-md); border-top: 3px solid var(--color-blue); }
.evolution-step__index{ display: block; margin-bottom: var(--space-2xs); font-size: 2rem; font-weight: 900; line-height: 1; color: var(--color-navy); opacity: 0.28; }
.evolution-step__title{ margin: 0 0 var(--space-3xs); font-size: 1.0625rem; }
.evolution-step__text{ margin: 0; font-size: var(--text-small); color: var(--color-gray); }

/* =========================================================
   38. ROUTING CTA -- "For Employers" / "For Job Seekers" split
   Used on both About (closing section) and Contact (opening
   routing section). Two equal cards on a dark band; each is
   just a heading + short list + button, no photography needed
   since both pages already carry photography elsewhere.
   ========================================================= */
.routing-card{
  padding: var(--space-lg) var(--space-md);
  background: rgba(255,255,255,0.04);
  border: var(--border-width) solid rgba(255,255,255,0.16);
}
.routing-card h3{ color: var(--color-white); margin-top: 0; }
.routing-card ul{ margin: 0 0 var(--space-md); padding-left: 1.1em; color: rgba(255,255,255,0.8); }
.routing-card li{ margin-bottom: var(--space-3xs); }

/* =========================================================
   39. CONTACT DETAILS LIST
   ========================================================= */
.contact-details-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.contact-details-list li{ display: flex; align-items: center; gap: var(--space-xs); font-size: 1.0625rem; }
.contact-details-list svg{ width: 22px; height: 22px; flex-shrink: 0; color: var(--color-blue); }
.contact-details-list a{ color: var(--color-navy); font-weight: 500; }
.contact-details-list a:hover{ color: var(--color-blue); }
.job-single__footer-cta p{ margin: 0; font-weight: 500; color: var(--color-navy); }

/* =========================================================
   40. EXPO SCREENING -- lean utility page (no page-hero, no
   marketing sections). Just the intro's supporting microcopy line;
   everything else on the page is either the default .section/
   .container/h1 treatment already used site-wide, or Gravity Forms
   output already styled by section 15 above.
   ========================================================= */
.expo-microcopy{ margin-top: var(--space-2xs); font-size: var(--text-small); color: var(--color-gray); }