/* =========================================================
   COLLECTIVE STAFFING GROUP — DESIGN SYSTEM (v2, rebalanced)
   Deep Navy = primary corporate color (header, footer, hero, and a
     small number of high-impact sections/closing CTAs only).
   Royal Blue = secondary accent, used sparingly (rare highlight only —
     not used on buttons, icons, or card accents by default).
   Luxury Gold = premium accent — primary CTA buttons, divider marks,
     active nav state, hover states, icon links, borders.
   Soft Silver / Light Gray = the dominant supporting background across
     the site (cards, photography placeholders, alternating sections).
   White / Warm Off-White = clean content backgrounds.
   Display: Fraunces (serif, corporate-premium)  Body: Inter
   Signature motif: the "Split Path" — a converging diagonal that
   represents the two journeys (Request Staff / Apply Now) branching
   from one company. It recurs as a divider between major sections.
   ========================================================= */

:root{
  --navy: #0A1F44;
  --navy-2: #0E2A5C;
  --royal: #1F4FD8;
  --royal-2: #3D6BFF;
  --silver: #B9C1CC;
  --silver-2: #E4E8EE;
  --gray: #F4F5F7;
  --mist: #DCEAF7;
  --mist-2: #CFE0F3;
  --white: #FFFFFF;
  --gold: #B08D3E;
  --gold-dark: #8F7130;
  --gold-light: #E8DCC2;
  --ink: #10141F;
  --muted: #5B6472;
  --muted-2: #8992A1;
  --line: #E1E4EA;

  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 22px;

  --shadow-s: 0 2px 10px rgba(10,31,68,0.06);
  --shadow-m: 0 12px 32px rgba(10,31,68,0.10);
  --shadow-l: 0 24px 60px rgba(10,31,68,0.16);

  --container: 1240px;
  --pad: clamp(20px, 5vw, 96px);

  --ease: cubic-bezier(.22,.68,0,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:130px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:'Fraunces',Georgia,serif;
  color:var(--navy);
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
  font-weight:600;
}
h1{ font-size:clamp(2.4rem,4.6vw,4.2rem); font-weight:560; }
h2{ font-size:clamp(1.9rem,3.2vw,2.75rem); }
h3{ font-size:clamp(1.25rem,1.8vw,1.55rem); }
p{ margin:0 0 1em; color:var(--muted); line-height:1.65; font-size:1.05rem; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--navy); font-weight:600; margin-bottom:16px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--gold); display:inline-block; }
.eyebrow.on-dark{ color:var(--silver-2); }
.eyebrow.on-dark::before{ background:var(--gold); }

.container{ max-width:var(--container); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.section{ padding:96px 0; position:relative; }
.section.tight{ padding:64px 0; }
.section.dark{ background:var(--navy); color:var(--silver-2); }
.section.dark h2, .section.dark h3{ color:var(--white); }
.section.dark p{ color:var(--silver); }
.section.gray{ background:var(--gray); }
.section.silver{ background:var(--silver-2); }
/* Soft pale/mist blue — used sparingly on alternating content sections
   and card groups to add depth, per the background-balance revision.
   Kept very light and desaturated so it reads as premium, not cyan. */
.section.mist{ background:var(--mist); }
.section.mist .card, .section.mist .testi-card{ background:var(--white); }
/* Warm off-white/cream — a softer alternative to stark white for content
   sections that want a light, premium (not clinical) background. */
.section.cream{ background:#FAF7F1; }

.section-head{ max-width:680px; margin-bottom:52px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head p.lede{ font-size:1.15rem; color:var(--muted); }
.section.dark .section-head p.lede{ color:var(--silver); }

/* ---------- Buttons ----------
   Hierarchy: Gold = primary conversion action (Request Staff, form
   Continue/Submit). Navy/white outline = secondary action (Apply Now,
   Learn More). Royal blue is not used for buttons — reserved as a rare
   small accent elsewhere. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px; border-radius:999px; font-weight:600; font-size:.95rem;
  letter-spacing:.01em; border:1.5px solid transparent; transition:all .3s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--gold); color:var(--white); box-shadow:0 10px 24px rgba(176,141,62,.30); }
.btn-primary:hover{ background:var(--gold-dark); transform:translateY(-2px); box-shadow:0 14px 30px rgba(176,141,62,.38); }
.btn-outline{ background:transparent; color:var(--navy); border-color:var(--navy); }
.btn-outline:hover{ background:var(--navy); color:var(--white); transform:translateY(-2px); }
.btn-outline.on-dark{ color:var(--white); border-color:rgba(255,255,255,.55); }
.btn-outline.on-dark:hover{ background:var(--white); color:var(--navy); }
.btn-gold{ background:var(--gold); color:var(--white); }
.btn-gold:hover{ background:var(--gold-dark); transform:translateY(-2px); }
.btn-navy{ background:var(--navy); color:var(--white); }
.btn-navy:hover{ background:var(--navy-2); transform:translateY(-2px); }
.btn-block{ width:100%; }
.btn-sm{ padding:11px 20px; font-size:.85rem; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

.cta-row{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:1000; width:100%;
  background:var(--navy); box-shadow:0 2px 14px rgba(10,31,68,.14);
  transition:box-shadow .35s var(--ease), padding .35s var(--ease);
  padding:20px 0;
}
/* Header is solid Deep Navy at all times for guaranteed nav contrast —
   never transparent, so links never wash out against a light hero. */
.site-header.solid{ box-shadow:0 6px 24px rgba(10,31,68,.22); padding:14px 0; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:var(--container); margin:0 auto; padding:0 var(--pad); }
.logo{ display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-weight:600; font-size:1.28rem; color:var(--white); letter-spacing:-0.01em; }
.logo .mark{
  width:44px; height:44px; border:0; border-radius:0;
  background:url('img/collective-staffing-group-emblem.png') center/contain no-repeat;
  position:relative; flex:0 0 auto;
}
.logo .mark::before,.logo .mark::after{ display:none; }
.logo small{ display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--silver); margin-top:2px; }

.main-nav{ display:flex; align-items:center; gap:30px; }
.main-nav a{ font-size:.9rem; font-weight:500; color:var(--silver-2); position:relative; padding:6px 0; }
.main-nav a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--gold); transition:width .3s var(--ease); }
.main-nav a:hover::after, .main-nav a.active::after{ width:100%; }
.main-nav a.active{ color:var(--white); }

.header-ctas{ display:flex; align-items:center; gap:12px; }
.header-ctas .btn{ padding:12px 22px; font-size:.85rem; }

.nav-toggle{ display:none; width:44px; height:44px; border-radius:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); align-items:center; justify-content:center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ content:""; display:block; width:20px; height:2px; background:#fff; position:relative; transition:all .25s var(--ease); }
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

.mobile-nav{ display:none; position:fixed; inset:0; background:var(--navy); z-index:1100; padding:26px var(--pad); flex-direction:column; }
.mobile-nav.open{ display:flex; }
.mobile-nav-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:40px; }
.mobile-nav a{ color:var(--white); font-family:'Fraunces',serif; font-size:1.6rem; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.mobile-nav .cta-row{ margin-top:32px; flex-direction:column; }
.mobile-nav .cta-row .btn{ width:100%; }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:92vh; display:flex; align-items:center; color:var(--white); overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media .ph{ width:100%; height:100%; }
.hero-scrim{ position:absolute; inset:0; background:linear-gradient(100deg, rgba(10,20,44,.92) 5%, rgba(10,31,68,.72) 45%, rgba(10,31,68,.35) 100%); z-index:1; }
.hero-inner{ position:relative; z-index:2; max-width:var(--container); margin:0 auto; padding:120px var(--pad) 90px; width:100%; }
.hero-content{ max-width:680px; }
.hero .eyebrow{ color:var(--silver-2); }
.hero h1{ color:var(--white); margin-bottom:22px; }
.hero .sub{ font-size:1.2rem; color:var(--silver-2); max-width:560px; margin-bottom:14px; }
.hero .supporting{ color:var(--silver); max-width:560px; font-size:1rem; margin-bottom:34px; }
.hero .trust-line{ margin-top:28px; display:flex; align-items:center; gap:12px; font-size:.85rem; color:var(--silver); }
.hero .trust-line .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }
.hero-page{ min-height:52vh; }
.hero-page .hero-content{ max-width:760px; }

/* ---------- Home page hero: real photograph background (replaces the
   placeholder). Scoped to .hero-photo-bg only — the shared .hero-media
   / .hero-scrim rules above stay untouched for every other page that
   still uses the placeholder version of this same pattern. ---------- */
.hero-photo-bg .hero-bg-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 25%;
}
.hero-photo-bg .hero-scrim{
  background:linear-gradient(100deg, rgba(7,26,51,.66) 0%, rgba(7,26,51,.50) 45%, rgba(7,26,51,.30) 100%);
}
/* Elegant, one-time slide-in from the left on page load (not scroll-
   triggered) — respects prefers-reduced-motion via the global rule.
   Distance increased to be clearly perceptible as a genuine slide from
   off to the left, not just a small nudge. */
@keyframes heroSlideIn{
  from{ opacity:0; transform:translateX(-90px); }
  to{ opacity:1; transform:translateX(0); }
}
.hero-slide-in{ animation:heroSlideIn 1.15s cubic-bezier(.19,.68,.24,1) .1s both; }

/* ---------- Contact page hero: two-stage sequence ----------
   Stage 1 (0 → 1.05s): the Boston skyline photo itself slides in as
   one panel (position only — it stays fully visible/opaque throughout,
   never fades). Stage 2 begins only once Stage 1 has finished: the
   text slides in from the left + fades, reusing the same heroSlideIn
   motion used elsewhere, just delayed until the photo has settled.
   Scoped entirely to .hero-contact / .hero-photo-slide-in /
   .contact-text-slide-in — does not touch any other page's hero. */
.hero.hero-contact{ background:var(--navy); }
.hero-contact .hero-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 50%; }
@keyframes contactPhotoSlideIn{
  from{ transform:translateX(130px); }
  to{ transform:translateX(0); }
}
.hero-photo-slide-in{ animation:contactPhotoSlideIn 1.05s cubic-bezier(.19,.68,.24,1) both; }
.contact-text-slide-in{ animation:heroSlideIn .95s cubic-bezier(.19,.68,.24,1) 1.15s both; }

/* ---------- Services page hero: large premium photo with the text
   group overlaid directly on top of it (left side), on a navy scrim.
   Fully independent of .about-hero / .about-hero-grid / .hero-photo-card
   (those stay untouched for the About page).
   IMPORTANT: .servicesPhotoSlideIn keyframe and .services-photo-slide-in
   are UNCHANGED from the prior approved version — only the surrounding
   layout (photo now fills one single frame, text is absolutely
   positioned on top of it instead of sitting in its own column) and
   the text's colors (now light, to read against the navy scrim instead
   of the white page background it previously sat on) changed. ---------- */
.hero.services-hero{ min-height:auto; padding:0; display:block; background:var(--white); }
.services-hero-frame{
  position:relative; overflow:hidden; border-radius:26px;
  margin:130px var(--pad) 90px;
  min-height:560px; height:74vh; max-height:720px;
  display:flex; align-items:center;
  box-shadow:0 30px 70px rgba(10,31,68,.18);
}
.services-hero-photo{ position:absolute; inset:0; z-index:0; }
.services-hero-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.services-hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(7,26,51,.74) 0%, rgba(7,26,51,.52) 40%, rgba(7,26,51,.18) 75%, rgba(7,26,51,.05) 100%);
}
.services-hero-text-wrap{ position:relative; z-index:2; max-width:560px; padding:0 64px; }
.services-hero-text-wrap .breadcrumb, .services-hero-text-wrap .breadcrumb a{ color:var(--silver-2); }
.services-hero-text-wrap .breadcrumb a:hover{ color:var(--gold); }
.services-hero-text-wrap h1{ color:#DFC189; }
.services-hero-text-wrap .sub{ color:var(--silver-2); }
.services-hero .hero-content{ max-width:none; }

@keyframes servicesPhotoSlideIn{
  from{ transform:translateX(140px); }
  to{ transform:translateX(0); }
}
.services-photo-slide-in{ animation:servicesPhotoSlideIn 1.05s cubic-bezier(.19,.68,.24,1) both; }
.services-text-slide-in{ animation:heroSlideIn .95s cubic-bezier(.19,.68,.24,1) 1.15s both; }

@media (max-width: 1080px){
  .services-hero-frame{ height:64vh; min-height:500px; margin-top:110px; }
  .services-hero-text-wrap{ padding:0 44px; }
}
@media (max-width: 900px){
  .services-hero-frame{ margin-left:20px; margin-right:20px; border-radius:22px; height:64vh; min-height:480px; }
  .services-hero-text-wrap{ padding:0 32px; max-width:100%; }
}
@media (max-width: 640px){
  .services-hero-frame{ margin-left:16px; margin-right:16px; margin-top:96px; height:78vh; min-height:520px; max-height:640px; align-items:flex-end; }
  .services-hero-text-wrap{ padding:0 24px 40px; }
}

/* ---------- Healthcare Staffing — large full-width feature slider ----------
   A cinematic, hero-scale slider (six roles: CNA, HHA, LPN, RN,
   Housekeepers, Dietary Aides). Visually extends the Home Hero
   language: real/placeholder photo, navy scrim, left-aligned content
   that slides in from the left + fades, independent of the photo's own
   horizontal carousel motion. Scoped entirely to .hc-* classes. */
.hc-feature-section{ padding-bottom:72px; }
.hc-feature-section .section-head{ margin-bottom:44px; }

.hc-slider{
  position:relative; overflow:hidden; outline:none;
  border-radius:var(--radius-l);
  margin:0 var(--pad);
}
.hc-track{ display:flex; width:100%; transition:transform .9s cubic-bezier(.22,.68,0,1); will-change:transform; }
.hc-slide{
  flex:0 0 100%; position:relative; overflow:hidden;
  min-height:640px; height:78vh; max-height:760px;
  display:flex; align-items:center;
}
.hc-slide .ph{ position:absolute; inset:0; width:100%; height:100%; border-radius:0; border:none; }
/* Real photo (once approved) — same absolute-fill treatment as the
   placeholder it replaces, professional cover-crop, no stretching. */
.hc-slide-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.hc-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(7,26,51,.72) 0%, rgba(7,26,51,.52) 40%, rgba(7,26,51,.18) 75%, rgba(7,26,51,.05) 100%);
}
.hc-slide-content{
  position:relative; z-index:2; max-width:560px; padding:0 64px;
  opacity:0; transform:translateX(-60px);
  transition:opacity .95s cubic-bezier(.19,.68,.24,1), transform .95s cubic-bezier(.19,.68,.24,1);
}
.hc-slide-content.no-anim{ transition:none !important; }
.hc-slide-content.play{ opacity:1; transform:translateX(0); }
.hc-slide-content .eyebrow{ color:var(--gold-light); }
.hc-slide-content .eyebrow::before{ background:var(--gold); }
.hc-slide-content h3{ color:#fff; font-size:clamp(2.2rem,4vw,3.4rem); margin-bottom:16px; }
.hc-slide-content p{ color:var(--silver-2); font-size:1.08rem; max-width:480px; margin-bottom:28px; }

.hc-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px;
  border-radius:50%; background:rgba(7,26,51,.5); border:1.5px solid rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center; z-index:4; cursor:pointer;
  opacity:0; transition:opacity .3s var(--ease), background .3s var(--ease);
}
.hc-arrow svg{ width:20px; height:20px; stroke:#fff; }
.hc-arrow.prev{ left:20px; }
.hc-arrow.next{ right:20px; }
.hc-slider:hover .hc-arrow, .hc-slider:focus-within .hc-arrow{ opacity:1; }
.hc-arrow:hover{ background:var(--gold-dark); }

.hc-dots{ position:absolute; bottom:24px; left:0; right:0; display:flex; justify-content:center; gap:9px; z-index:4; }
.hc-dots .dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.5); border:1.5px solid rgba(255,255,255,.7); padding:0; cursor:pointer; transition:background .25s var(--ease), transform .25s var(--ease); }
.hc-dots .dot.active{ background:var(--gold); border-color:var(--gold); transform:scale(1.35); }

@media (max-width: 1080px){
  .hc-slide{ height:64vh; min-height:520px; }
  .hc-slide-content{ padding:0 44px; }
}
@media (max-width: 900px){
  .hc-slider{ margin:0 20px; border-radius:var(--radius-m); }
  .hc-slide{ height:64vh; min-height:480px; }
  .hc-slide-content{ padding:0 32px; max-width:100%; }
  .hc-slide-content h3{ font-size:clamp(1.9rem,7vw,2.6rem); }
  .hc-slide-content p{ font-size:.98rem; max-width:100%; }
  .hc-scrim{ background:linear-gradient(190deg, rgba(7,26,51,.30) 0%, rgba(7,26,51,.62) 55%, rgba(7,26,51,.8) 100%); }
}
@media (max-width: 640px){
  .hc-slider{ margin:0 16px; }
  .hc-slide{ height:74vh; min-height:460px; max-height:620px; align-items:flex-end; }
  .hc-slide-content{ padding:0 22px 42px; }
  .hc-arrow{ opacity:1; width:38px; height:38px; }
  .hc-dots{ bottom:14px; }
}

/* ---------- Warehouse & Logistics — large single-photo feature section ----------
   Same premium hero-scale visual language as the Healthcare Staffing
   feature slider (and, by extension, the Home Hero), but a single
   static photo — no carousel, no dots, no arrows, no autoplay. Scoped
   entirely to .wh-* classes; does not touch .hc-* or .hero-* rules. */
.wh-feature-section{ padding-top:72px; }
.wh-feature{
  position:relative; overflow:hidden; border-radius:var(--radius-l);
  margin:0 var(--pad);
  min-height:640px; height:78vh; max-height:760px;
  display:flex; align-items:center;
}
.wh-feature .ph{ position:absolute; inset:0; width:100%; height:100%; border-radius:0; border:none; }
/* Real photo (once approved) — same absolute-fill treatment as the
   placeholder it replaces, professional cover-crop, no stretching. */
.wh-feature-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wh-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(7,26,51,.72) 0%, rgba(7,26,51,.52) 40%, rgba(7,26,51,.18) 75%, rgba(7,26,51,.05) 100%);
}
.wh-content{
  position:relative; z-index:2; max-width:560px; padding:0 64px;
}
.wh-content .eyebrow{ color:var(--gold-light); }
.wh-content .eyebrow::before{ background:var(--gold); }
.wh-content h2{ color:#fff; font-size:clamp(2.2rem,4vw,3.4rem); margin-bottom:16px; }
.wh-content p{ color:var(--silver-2); font-size:1.08rem; max-width:480px; margin-bottom:24px; }
.role-tags.on-dark{ margin-bottom:28px; }
.role-tags.on-dark span{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(1px); }

@media (max-width: 1080px){
  .wh-feature{ height:64vh; min-height:520px; }
  .wh-content{ padding:0 44px; }
}
@media (max-width: 900px){
  .wh-feature{ margin:0 20px; border-radius:var(--radius-m); height:64vh; min-height:480px; }
  .wh-content{ padding:0 32px; max-width:100%; }
  .wh-content h2{ font-size:clamp(1.9rem,7vw,2.6rem); }
  .wh-content p{ font-size:.98rem; max-width:100%; }
  .wh-scrim{ background:linear-gradient(190deg, rgba(7,26,51,.30) 0%, rgba(7,26,51,.62) 55%, rgba(7,26,51,.8) 100%); }
}
@media (max-width: 640px){
  .wh-feature{ margin:0 16px; height:74vh; min-height:460px; max-height:620px; align-items:flex-end; }
  .wh-content{ padding:0 22px 42px; }
}

/* ---------- Home page — Responsive Support section: coordinator photo
   as a full-bleed background with the text block overlaid on the left,
   same visual language as the Warehouse feature section. Scroll-
   triggered two-stage sequence: Stage 1 — the photo slides in (position
   only, never fades) and settles; only once its transition duration has
   elapsed does Stage 2 begin — the text slides in from the left with a
   fade, landing on top of the photo. Both stages are driven by their
   own "in" class, added via the site's shared IntersectionObserver
   (see revealEls in app.js). Scoped entirely to .rs-* — does not touch
   any other section. ---------- */
.rs-feature-frame{
  position:relative; overflow:hidden; border-radius:var(--radius-l);
  min-height:460px; height:56vh; max-height:600px;
  display:flex; align-items:center;
  box-shadow:0 30px 70px rgba(10,31,68,.14);
}
.rs-photo-wrap{ position:absolute; inset:0; z-index:0; }
.rs-photo-slide-in{
  display:block; width:100%; height:100%; object-fit:cover;
  transform:translateX(120px);
  transition:transform .9s cubic-bezier(.19,.68,.24,1);
}
.rs-photo-slide-in.in{ transform:translateX(0); }
.rs-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(7,26,51,.76) 0%, rgba(7,26,51,.54) 40%, rgba(7,26,51,.18) 75%, rgba(7,26,51,.05) 100%);
}
.rs-text-overlay{ position:relative; z-index:2; max-width:540px; padding:0 56px; }
.rs-text-slide-in{
  opacity:0; transform:translateX(-120px);
  transition:opacity .9s cubic-bezier(.19,.68,.24,1) 1.05s, transform .9s cubic-bezier(.19,.68,.24,1) 1.05s;
}
.rs-text-slide-in.in{ opacity:1; transform:translateX(0); }
.rs-text-overlay .eyebrow{ color:var(--gold-light); }
.rs-text-overlay .eyebrow::before{ background:var(--gold); }
.rs-text-overlay h2{ color:#fff; font-size:clamp(1.9rem,3.4vw,2.6rem); margin-bottom:14px; }
.rs-text-overlay p{ color:var(--silver-2); margin-bottom:22px; }

@media (max-width: 1080px){
  .rs-feature-frame{ height:56vh; min-height:440px; }
  .rs-text-overlay{ padding:0 40px; }
}
@media (max-width: 900px){
  .rs-feature-frame{ border-radius:var(--radius-m); height:60vh; min-height:460px; }
  .rs-text-overlay{ padding:0 30px; max-width:100%; }
  .rs-scrim{ background:linear-gradient(190deg, rgba(7,26,51,.32) 0%, rgba(7,26,51,.64) 55%, rgba(7,26,51,.82) 100%); }
}
@media (max-width: 640px){
  .rs-feature-frame{ height:72vh; min-height:440px; max-height:580px; align-items:flex-end; }
  .rs-text-overlay{ padding:0 22px 36px; }
}

/* ---------- Job Seekers page hero: luxury gold/champagne background
   with Deep Navy text. Scoped to .gold-hero only — does not affect the
   header/nav or any other page's hero. ---------- */
.hero.gold-hero{
  background:linear-gradient(135deg, #F5E7C8 0%, #E9CE94 45%, #D2A85E 100%);
  position:relative; overflow:hidden;
}
.hero.gold-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.55), transparent 45%),
    radial-gradient(circle at 86% 88%, rgba(176,141,62,.35), transparent 52%);
}
.hero.gold-hero .hero-inner{ position:relative; z-index:1; }
.hero.gold-hero h1{ color:var(--navy); }
.hero.gold-hero .sub{ color:var(--navy); }
.hero.gold-hero .breadcrumb, .hero.gold-hero .breadcrumb a{ color:var(--navy); }
.hero.gold-hero .breadcrumb a:hover{ color:var(--gold-dark); }
.hero.gold-hero .eyebrow{ color:var(--navy); }
.hero.gold-hero .eyebrow::before{ background:var(--gold-dark); }

/* ---------- Home page hero: same premium champagne-gold family as the
   Job Seekers hero, using the exact suggested palette and a Deep Navy
   (#071A33) text treatment, with a right-side framed photo area (same
   proportions/behavior as the About/Services hero photo card). Scoped
   to .home-hero only — does not affect any other page's hero. ---------- */
.hero.home-hero{
  background:linear-gradient(135deg, #F3E7C3 0%, #E8D39A 45%, #D6B46A 100%);
  min-height:92vh; position:relative; overflow:hidden;
}
.hero.home-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 12% 16%, rgba(255,255,255,.5), transparent 45%),
    radial-gradient(circle at 88% 90%, rgba(176,141,62,.32), transparent 52%);
}
.hero.home-hero .hero-inner{ position:relative; z-index:1; padding:120px var(--pad) 90px; }
.hero.home-hero .about-hero-grid{ align-items:center; }
.hero.home-hero .hero-content{ max-width:none; }
.hero.home-hero h1{ color:#071A33; }
.hero.home-hero .sub{ color:#071A33; }
.hero.home-hero .supporting{ color:#0F2A4D; }
.hero.home-hero .eyebrow{ color:#071A33; }
.hero.home-hero .eyebrow::before{ background:var(--gold-dark); }
.hero.home-hero .trust-line{ color:#071A33; }
.hero.home-hero .trust-line .dot{ background:var(--gold-dark); }
.hero.home-hero .hero-photo-spec{ color:rgba(7,26,51,.68); text-align:right; }
.hero.about-hero{
  background:linear-gradient(120deg, #1D5BBF 0%, #174EA6 38%, var(--navy) 100%);
  min-height:auto; padding:0; display:block;
}
.about-hero .hero-inner{ padding:110px var(--pad) 80px; }
.about-hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.about-hero .hero-content{ max-width:none; }
/* Warm metallic-gold headline — sits on the Navy/Royal hero with strong
   WCAG contrast (light champagne-gold, not bright yellow/orange). */
.about-hero h1{ color:#DFC189; margin-bottom:22px; }
.hero-photo-card{
  position:relative; border-radius:22px; overflow:hidden; aspect-ratio:4/5;
  max-width:400px; margin:0 0 0 auto; box-shadow:0 26px 60px rgba(5,14,32,.4);
  border:1px solid rgba(255,255,255,.16);
}
.hero-photo-card .ph{ width:100%; height:100%; border-radius:0; }
.hero-photo-spec{ margin:14px 0 0 auto; max-width:400px; font-size:.72rem; color:var(--silver); text-align:right; line-height:1.5; }

/* ---------- Duo-image composition (Who We Serve) — a primary frame
   plus a smaller overlapping frame, structured so it can become a
   2-image composition or slider in Wix Studio. ---------- */
.duo-image{ position:relative; max-width:460px; }
.duo-image .ph.primary{ aspect-ratio:4/3.1; border-radius:20px; }
.duo-image .ph.secondary{
  position:absolute; right:-26px; bottom:-30px; width:58%; aspect-ratio:5/4;
  border-radius:16px; box-shadow:0 20px 40px rgba(10,31,68,.28); border:4px solid var(--white);
}

/* ---------- About page — "Who We Serve" two-photo composition with
   real photos. Reuses the exact geometry (size/radius/shadow/border)
   already established by .duo-image .ph.primary/.secondary above, so
   visual layout is unchanged from the approved placeholder version —
   only the elements are now <img> instead of .ph divs. Three-stage
   scroll-triggered sequence, all driven off the shared reveal
   IntersectionObserver: Stage 1 — the large Healthcare photo slides
   in from the left and settles (position only, never fades). Stage 2
   — only once Stage 1's duration has elapsed, the smaller Warehouse
   photo slides in from the right and settles on top of it. Stage 3 —
   only once both photos have settled, the Who We Serve text reveals
   with the sitewide slide-from-left + fade convention. Scoped
   entirely to .wws-*; does not touch .duo-image or .ph, so nothing
   else using those classes elsewhere is affected. ---------- */
.wws-photo-primary{
  display:block; width:100%; height:100%; object-fit:cover;
  aspect-ratio:4/3.1; border-radius:20px;
  transform:translateX(-130px);
  transition:transform 1s cubic-bezier(.19,.68,.24,1);
}
.wws-photo-secondary{
  display:block; object-fit:cover;
  position:absolute; right:-14px; bottom:-20px; width:46%; aspect-ratio:1/1;
  border-radius:50%; box-shadow:0 20px 40px rgba(10,31,68,.28); border:5px solid var(--white);
  transform:translateX(130px);
  transition:transform .85s cubic-bezier(.19,.68,.24,1);
}
.wws-text{ opacity:0; transform:translateX(-70px); transition:opacity .85s cubic-bezier(.19,.68,.24,1), transform .85s cubic-bezier(.19,.68,.24,1); }

.duo-image.in .wws-photo-primary{ transform:translateX(0); }
.duo-image.in .wws-photo-secondary{ transform:translateX(0); transition-delay:1.05s; }
.wws-text.in{ opacity:1; transform:translateX(0); transition-delay:2s; }

@media (max-width: 720px){
  .wws-photo-secondary{ width:42%; right:-8px; bottom:-14px; }
}

/* ---------- Employers page — Healthcare Facilities section: the one
   spot on the site where the photo slides in from the LEFT and the
   text slides in from the RIGHT (the opposite pairing of the standard
   .hc-section-photo/.hc-section-text convention used everywhere else,
   used here because this section's photo sits in the left column).
   Scoped entirely to .emp-*; the Warehouse section further down this
   same page intentionally reuses the standard .hc-section-photo /
   .hc-section-text classes unchanged, since its layout (reversed
   columns) already matches that convention's directions. ---------- */
.emp-photo-frame{ position:relative; border-radius:var(--radius-m); overflow:hidden; }
.emp-photo-left-in{
  display:block; width:100%; height:100%; object-fit:cover;
  transform:translateX(-120px);
  transition:transform 1.05s cubic-bezier(.19,.68,.24,1);
}
.emp-text-right-in{
  opacity:0; transform:translateX(70px);
  transition:opacity .95s cubic-bezier(.19,.68,.24,1) 1.15s, transform .95s cubic-bezier(.19,.68,.24,1) 1.15s;
}
.emp-photo-left-in.in{ transform:translateX(0); }
.emp-text-right-in.in{ opacity:1; transform:translateX(0); }

/* ---------- Gold-accent outline button — premium alternative to a
   solid fill, used where a lighter secondary CTA is wanted on a light
   background (e.g. About page final CTA, job-seeker panel). ---------- */
.btn-outline-gold{ background:transparent; color:var(--navy); border:1.5px solid var(--gold-dark); }
.btn-outline-gold:hover{ background:var(--gold); border-color:var(--gold); color:#fff; transform:translateY(-2px); }

/* ---------- Placeholder photography blocks ----------
   Redesigned around soft silver / warm gray so the site does not read
   as blue. Navy appears only as a fine edge + icon chip; gold marks the
   caption tag. A dedicated .ph.navy variant exists for the rare spot
   where a deliberately dark image block is wanted (used sparingly). */
.ph{
  position:relative; border-radius:var(--radius-m); overflow:hidden;
  background:linear-gradient(135deg, #EEF0F3 0%, #DBDFE6 55%, #C7CDD7 100%);
  display:flex; align-items:flex-end; min-height:220px; isolation:isolate;
  border:1px solid #D3D8E0;
}
.ph::before{ content:""; position:absolute; inset:0; background:
   radial-gradient(circle at 18% 18%, rgba(255,255,255,.65), transparent 42%),
   radial-gradient(circle at 88% 84%, rgba(10,31,68,.10), transparent 48%); }
.ph::after{ content:""; position:absolute; inset:0; background-image:
   linear-gradient(rgba(10,31,68,.05) 1px, transparent 1px),
   linear-gradient(90deg, rgba(10,31,68,.05) 1px, transparent 1px);
   background-size:26px 26px; opacity:.5; }
.ph .ph-icon{ position:relative; z-index:1; width:56px; height:56px; margin:24px; border-radius:14px; background:var(--navy); box-shadow:0 8px 20px rgba(10,31,68,.22); display:flex; align-items:center; justify-content:center; }
.ph .ph-icon svg{ width:26px; height:26px; stroke:#fff !important; }
.ph .ph-tag{ position:relative; z-index:1; margin:0 24px 22px auto; font-size:.68rem; letter-spacing:.08em; color:var(--navy); background:rgba(255,255,255,.85); border:1px solid var(--gold); padding:7px 12px; border-radius:999px; max-width:calc(100% - 48px); font-weight:600; }
.ph.square{ aspect-ratio:1/1; }
.ph.wide{ aspect-ratio:16/10; }
.ph.tall{ aspect-ratio:3/4; }
.ph.full{ width:100%; height:100%; min-height:100%; border-radius:0; border:none; }
.ph.gold{ background:linear-gradient(135deg, #F3ECDD 0%, #E4D6B4 55%, #C9B482 100%); border-color:#D8C89A; }
.ph.gold .ph-icon{ background:var(--gold); }
.ph.gold .ph-tag{ border-color:var(--navy); }
.ph.navy{ background:linear-gradient(135deg, #1D5BBF 0%, #174EA6 45%, #0B1F3A 100%); border-color:var(--navy); }
.ph.navy::before{ background: radial-gradient(circle at 20% 15%, rgba(255,255,255,.14), transparent 42%), radial-gradient(circle at 88% 85%, rgba(176,141,62,.24), transparent 48%); }
.ph.navy::after{ background-image:linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); }
.ph.navy .ph-icon{ background:rgba(255,255,255,.16); }
.ph.navy .ph-tag{ color:#fff; background:rgba(0,0,0,.28); border-color:var(--gold); }
.ph.silver{ background:linear-gradient(135deg, #EEF0F3 0%, #DBDFE6 55%, #C7CDD7 100%); }

/* ---------- Icon (line) ---------- */
.icon{ width:44px; height:44px; border-radius:12px; background:var(--gray); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.icon svg{ width:22px; height:22px; stroke:var(--navy); fill:none; stroke-width:1.6; }
.icon.on-dark{ background:rgba(255,255,255,.08); }
.icon.on-dark svg{ stroke:var(--gold); }
.icon.accent svg{ stroke:var(--royal); }
.icon.lg{ width:60px; height:60px; border-radius:16px; }
.icon.lg svg{ width:28px; height:28px; }

/* ---------- Split Path signature divider ---------- */
.split-divider{ position:relative; height:110px; overflow:hidden; }
.split-divider svg{ position:absolute; inset:0; width:100%; height:100%; }

/* ---------- Pathway (Employer / Job Seeker) ---------- */
.pathway{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-m); }
.pathway-card{ background:var(--white); padding:56px 48px; position:relative; transition:background .3s var(--ease); }
.pathway-card:first-child{ background:var(--navy); }
.pathway-card:first-child h3, .pathway-card:first-child .eyebrow{ color:var(--white); }
.pathway-card:first-child p{ color:var(--silver); }
.pathway-card .icon{ margin-bottom:22px; }
.pathway-card h3{ font-size:1.9rem; margin-bottom:14px; }
.pathway-card p{ margin-bottom:26px; }
/* Reusable dark-surface variant so any pathway card placed on a Navy
   section (e.g. the closing dual CTA) always keeps full text contrast —
   fixes the faint "Need Reliable Staff?" / "Ready for Your Next
   Opportunity?" text reported on the Home page final CTA. */
.pathway-card.on-dark{ background:rgba(255,255,255,.05); }
.pathway-card.on-dark .eyebrow{ color:var(--gold-light); }
.pathway-card.on-dark .eyebrow::before{ background:var(--gold); }
.pathway-card.on-dark h3{ color:#fff; }
.pathway-card.on-dark p{ color:var(--silver-2); }

/* Home page final CTA band only — two intentionally different, fully
   opaque card treatments so neither ever risks low-contrast text.
   Left (Employers): solid Navy/Royal, white text, gold button.
   Right (Job Seekers): solid pale Mist Blue, navy text, navy button. */
.pathway-card.cta-employer{ background:linear-gradient(135deg, #123B7A 0%, var(--navy) 100%); }
.pathway-card.cta-employer .eyebrow{ color:var(--gold); }
.pathway-card.cta-employer .eyebrow::before{ background:var(--gold); }
.pathway-card.cta-employer h3{ color:#fff; }
.pathway-card.cta-employer p{ color:var(--silver-2); }
.pathway-card.cta-employer .btn{ background:var(--gold); color:var(--navy); border-color:var(--gold); font-weight:700; }
.pathway-card.cta-employer .btn:hover{ background:#fff; border-color:#fff; color:var(--navy); }

.pathway-card.cta-jobseeker{ background:var(--mist); }
.pathway-card.cta-jobseeker .eyebrow{ color:var(--royal); }
.pathway-card.cta-jobseeker .eyebrow::before{ background:var(--royal); }
.pathway-card.cta-jobseeker h3{ color:var(--navy); }
.pathway-card.cta-jobseeker p{ color:var(--ink); }
.pathway-card.cta-jobseeker .btn{ background:var(--navy); color:#fff; border-color:var(--navy); }
.pathway-card.cta-jobseeker .btn:hover{ background:var(--royal); border-color:var(--royal); color:#fff; }
/* Override for pages (e.g. About) that want the lighter gold-accent
   outline treatment instead of the solid Navy button on this card. */
.pathway-card.cta-jobseeker .btn-outline-gold{ background:transparent; color:var(--navy); border-color:var(--gold-dark); }
.pathway-card.cta-jobseeker .btn-outline-gold:hover{ background:var(--gold); color:#fff; border-color:var(--gold); }

/* ---------- Cards / Grids ---------- */
.grid{ display:grid; gap:28px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }

.card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m); padding:34px 30px; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-m); border-color:transparent; }
.card .icon{ margin-bottom:20px; }
.card h3{ margin-bottom:10px; font-size:1.2rem; }
.card p{ font-size:.96rem; margin-bottom:16px; }
.card .link{ font-size:.85rem; font-weight:600; color:var(--gold-dark); display:inline-flex; align-items:center; gap:6px; }
.card .link svg{ width:14px; height:14px; stroke:var(--gold-dark); transition:transform .25s var(--ease); }
.card:hover .link svg{ transform:translateX(4px); }

/* ---------- "Why Collective Staffing Group" cards — alternating
   premium color treatment. Each rule only adds background/text-color
   overrides on top of the shared .card base above (padding, radius,
   hover-lift are untouched and still apply); no other page's plain
   .card usage is affected since these are compound selectors
   (.card.card-royal etc.), never a change to .card itself. ---------- */
.card.card-royal{ background:linear-gradient(135deg, #2456DE 0%, #17399E 100%); border-color:transparent; }
.card.card-royal h3{ color:#fff; }
.card.card-royal p{ color:rgba(255,255,255,.86); }
.card.card-royal .icon{ background:rgba(255,255,255,.16); color:#fff; }

.card.card-powder{ background:var(--mist); border-color:transparent; }
.card.card-powder h3{ color:var(--navy); }
.card.card-powder p{ color:#33475B; }
.card.card-powder .icon{ background:#fff; color:var(--navy); }

.card.card-charcoal{ background:linear-gradient(135deg, #262B36 0%, #171B23 100%); border-color:transparent; }
.card.card-charcoal h3{ color:var(--gold-light); }
.card.card-charcoal p{ color:rgba(255,255,255,.82); }
.card.card-charcoal .icon{ background:rgba(255,255,255,.12); color:var(--gold-light); }

.card.card-gold{ background:linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%); border-color:transparent; }
.card.card-gold h3{ color:var(--navy); }
.card.card-gold p{ color:#0A0A0F; }
.card.card-gold .icon{ background:rgba(10,31,68,.14); color:var(--navy); }

.card.card-navy{ background:linear-gradient(135deg, #0F2A55 0%, var(--navy) 100%); border-color:transparent; }
.card.card-navy h3{ color:#fff; }
.card.card-navy p{ color:var(--silver-2); }
.card.card-navy .icon{ background:rgba(255,255,255,.14); color:#fff; }

.card.card-slate{ background:#E5EAF1; border-color:transparent; }
.card.card-slate h3{ color:#1F4FD8; }
.card.card-slate p{ color:#33475B; }
.card.card-slate .icon{ background:#fff; color:var(--navy); }

.card.card-cream-gold{ background:linear-gradient(135deg, #FBF4E4 0%, #F1E1B8 100%); border-color:transparent; }
.card.card-cream-gold h3{ color:var(--navy); }
.card.card-cream-gold p{ color:#4A4230; }
.card.card-cream-gold .icon{ background:rgba(176,141,62,.16); color:var(--gold-dark); }

.card.card-cream{ background:#FAF7F1; border-color:transparent; }
.card.card-cream h3{ color:var(--navy); }
.card.card-cream p{ color:var(--ink); }
.card.card-cream .icon{ background:rgba(10,31,68,.08); color:var(--gold-dark); }

.card.dark{ background:var(--navy); border-color:var(--navy); }
.card.dark h3{ color:#fff; }
.card.dark p{ color:var(--silver); }

/* ---------- Featured card photo slider (Healthcare Staffing card) ----------
   Scoped entirely to .card-media / .card-slider — does not affect the
   base .card styles used by the other five service cards. */
.card.card-media{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.card.card-media:hover{ transform:translateY(-6px); box-shadow:var(--shadow-m); }
.card.card-media .card-body{ padding:26px 28px 30px; }
.card.card-media .icon{ display:none; }

.card-slider{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--navy); }
.card-slider-track{ display:flex; width:100%; height:100%; transition:transform .7s cubic-bezier(.22,.68,0,1); will-change:transform; }
.card-slide{ flex:0 0 100%; height:100%; position:relative; }
.card-slide .ph{ width:100%; height:100%; border-radius:0; border:none; min-height:0; }

.slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:32px; height:32px;
  border-radius:50%; background:rgba(7,26,51,.55); border:1px solid rgba(255,255,255,.45);
  display:flex; align-items:center; justify-content:center; opacity:0;
  transition:opacity .25s var(--ease), background .25s var(--ease); z-index:3; padding:0; cursor:pointer;
}
.slider-arrow svg{ width:15px; height:15px; stroke:#fff; }
.slider-arrow.prev{ left:10px; }
.slider-arrow.next{ right:10px; }
.card-slider:hover .slider-arrow, .card-slider:focus-within .slider-arrow{ opacity:1; }
.slider-arrow:hover{ background:var(--gold-dark); }

.slider-dots{ position:absolute; bottom:12px; left:0; right:0; display:flex; justify-content:center; gap:6px; z-index:3; }
.slider-dots .dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.7); padding:0; cursor:pointer; transition:background .25s var(--ease), transform .25s var(--ease); }
.slider-dots .dot.active{ background:var(--gold); border-color:var(--gold); transform:scale(1.3); }

.role-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.role-tags span{ font-size:.74rem; padding:6px 12px; border-radius:999px; background:var(--gray); color:var(--navy); font-weight:500; }

.industry-card{ position:relative; border-radius:var(--radius-m); overflow:hidden; min-height:260px; display:flex; align-items:flex-end; }
.industry-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 42%, rgba(10,31,68,.82) 100%); z-index:1; pointer-events:none; }
.industry-card .label{ position:relative; z-index:2; padding:26px; color:#fff; }
.industry-card .label h3{ color:#fff; font-size:1.15rem; margin:0; }
.industry-card .label span{ font-size:.78rem; color:var(--silver); }

/* ---------- Home page — Industries grid: "Hospitals" card with a real
   photo (once approved). Scoped entirely to .industry-featured* — the
   other seven cards keep their original simple fade-up reveal,
   completely untouched. The outer card bypasses the grid's generic
   .reveal-stagger child animation (opacity:1/transform:none from the
   start, higher specificity than the generic rule) so the ONLY visible
   motion is: 1) the photo sliding in, then 2) the label sliding onto
   it — matching the two-stage language used on the Home Hero and the
   Services page sections, scaled down for this card. Both stages are
   triggered by the SAME parent .grid.reveal-stagger receiving its
   existing ".in" class — no JavaScript changes needed. ---------- */
.industry-card.industry-featured{ opacity:1; transform:none; transition:none; }
.industry-featured-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transform:translateX(64px);
  transition:transform .95s cubic-bezier(.19,.68,.24,1);
}
.grid.reveal-stagger.in .industry-featured-img{ transform:translateX(0); }
.industry-featured-label-anim{
  opacity:0; transform:translateX(-46px);
  transition:opacity .85s cubic-bezier(.19,.68,.24,1) 1.05s, transform .85s cubic-bezier(.19,.68,.24,1) 1.05s;
}
.grid.reveal-stagger.in .industry-featured-label-anim{ opacity:1; transform:translateX(0); }

/* ---------- Process steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:24px; position:relative; }
.steps.steps-4{ grid-template-columns:repeat(4,1fr); }
.steps.steps-3{ grid-template-columns:repeat(3,1fr); }
.step{ position:relative; padding-top:8px; }
.step .num{ font-family:'Fraunces',serif; font-size:.85rem; color:var(--gold); letter-spacing:.05em; margin-bottom:14px; display:block; }
.step h3{ font-size:1.05rem; margin-bottom:8px; }
.step p{ font-size:.92rem; }
.step-line{ position:absolute; top:16px; left:0; right:0; height:1px; background:var(--line); z-index:0; }
.section.dark .step-line{ background:rgba(255,255,255,.15); }

/* ---------- Feature list (why choose us) ---------- */
.feature-row{ display:flex; gap:20px; padding:26px 0; border-bottom:1px solid var(--line); }
.section.dark .feature-row{ border-color:rgba(255,255,255,.12); }
.feature-row:last-child{ border-bottom:none; }
.feature-row h3{ font-size:1.05rem; margin-bottom:6px; }
.feature-row p{ margin:0; font-size:.94rem; }

/* ---------- Testimonial ---------- */
.testi-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m); padding:36px 32px; position:relative; box-shadow:0 6px 20px rgba(10,31,68,.06); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.testi-card:hover{ transform:translateY(-5px); box-shadow:0 18px 34px rgba(10,31,68,.12); }
.testi-card .badge{ display:inline-block; font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; background:var(--gold); color:#fff; padding:6px 12px; border-radius:999px; margin-bottom:18px; font-weight:600; }
.testi-stars{ display:flex; gap:4px; margin-bottom:16px; }
.testi-stars svg{ width:17px; height:17px; fill:var(--gold); flex:0 0 auto; }
.testi-card .quote{ font-family:'Fraunces',serif; font-size:1.22rem; color:var(--navy); line-height:1.5; margin-bottom:24px; }
.testi-person{ display:flex; align-items:center; gap:13px; padding-top:18px; border-top:1px solid var(--line); }
.testi-avatar{ width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg, var(--silver-2) 0%, var(--gray) 100%); border:1.5px solid var(--gold); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.testi-avatar svg{ width:20px; height:20px; stroke:var(--navy); fill:none; stroke-width:1.6; }
.testi-card .who{ font-size:.85rem; color:var(--muted); font-weight:600; margin:0; }
.testi-track{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }

/* ---------- Home page Testimonials — premium 3-card color treatment
   and sequenced entrance. Scoped to .testi-navy / .testi-royal /
   .testi-cream (compound with .testi-card) and .testi-cards-reveal —
   testimonials.html's plain .testi-card / .testi-stars / .badge are
   untouched since they never carry these extra classes. ---------- */
.testi-card.testi-navy{ background:linear-gradient(135deg, #0F2A55 0%, var(--navy) 100%); border-color:transparent; }
.testi-card.testi-navy .quote{ color:#fff; }
.testi-card.testi-navy .who{ color:var(--silver-2); }

.testi-card.testi-royal{ background:linear-gradient(135deg, #2456DE 0%, #17399E 100%); border-color:transparent; }
.testi-card.testi-royal .quote{ color:#fff; }
.testi-card.testi-royal .who{ color:rgba(255,255,255,.82); }

.testi-card.testi-cream{ background:linear-gradient(135deg, #FBF4E4 0%, #F1E1B8 100%); border-color:transparent; }
.testi-card.testi-cream .quote{ color:var(--navy); }
.testi-card.testi-cream .who{ color:#4A4230; }

/* Sequenced entrance: whole section rises first (.reveal-slide-up on
   the <section>, ~.9s), then — only once that has settled — each card
   slides up in turn, and only once a given card has settled do its
   stars reveal. All timed via transition-delay off the same shared
   IntersectionObserver "in" toggle (see revealEls in app.js); no
   separate JS logic needed. */
.testi-cards-reveal > .testi-card{
  opacity:0; transform:translateY(50px);
  transition:opacity .7s cubic-bezier(.19,.68,.24,1), transform .7s cubic-bezier(.19,.68,.24,1);
}
.testi-cards-reveal.in > .testi-card{ opacity:1; transform:translateY(0); }
.testi-cards-reveal.in > .testi-card:nth-child(1){ transition-delay:.95s; }
.testi-cards-reveal.in > .testi-card:nth-child(2){ transition-delay:1.15s; }
.testi-cards-reveal.in > .testi-card:nth-child(3){ transition-delay:1.35s; }

.testi-cards-reveal .testi-stars{ opacity:0; transform:scale(.82); transition:opacity .5s ease, transform .5s ease; }
.testi-cards-reveal.in .testi-stars{ opacity:1; transform:scale(1); }
.testi-cards-reveal.in > .testi-card:nth-child(1) .testi-stars{ transition-delay:1.75s; }
.testi-cards-reveal.in > .testi-card:nth-child(2) .testi-stars{ transition-delay:1.95s; }
.testi-cards-reveal.in > .testi-card:nth-child(3) .testi-stars{ transition-delay:2.15s; }

@media (prefers-reduced-motion: reduce){
  .testi-cards-reveal.in > .testi-card,
  .testi-cards-reveal.in .testi-stars,
  .reveal{ transition-delay:0s !important; }
}

/* ---------- Industries page — text-only industry sections. Scoped
   entirely to .ind-* classes; the page reuses the existing sitewide
   .section.cream/.mist/.dark/.silver tone classes and .reveal /
   .reveal-slide-up animation primitives already used elsewhere, so no
   other page or component is affected. ---------- */
.ind-head{ display:flex; align-items:center; gap:20px; margin-bottom:22px; }
.ind-head .eyebrow{ margin-bottom:6px; }
.ind-head h2{ margin:0; }
.ind-detail-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; margin:28px 0 30px; padding-top:28px; border-top:1px solid rgba(10,31,68,.1); }
.section.dark .ind-detail-grid{ border-top-color:rgba(255,255,255,.14); }
.ind-detail-grid h3{ font-family:'Inter',sans-serif; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--gold-dark); margin-bottom:16px; }
.section.dark .ind-detail-grid h3{ color:var(--gold-light); }
.ind-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.ind-needs{ font-size:.95rem; line-height:1.7; margin:0; }

@media (max-width: 720px){
  .ind-head{ align-items:flex-start; gap:14px; }
  .ind-detail-grid{ grid-template-columns:1fr; gap:26px; }
}

/* ---------- FAQ Accordion ---------- */
.faq-cat-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.faq-cat-tabs button{ padding:10px 20px; border-radius:999px; border:1.5px solid var(--line); background:#fff; font-size:.85rem; font-weight:600; color:var(--muted); transition:all .25s var(--ease); }
.faq-cat-tabs button.active, .faq-cat-tabs button:hover{ border-color:var(--gold-dark); color:var(--navy); background:var(--gold-light); }

.accordion{ border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-q{ width:100%; background:none; border:0; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 4px; text-align:left; font-family:'Fraunces',serif; font-size:1.08rem; color:var(--navy); }
.acc-q .plus{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; border:1.5px solid var(--line); position:relative; transition:transform .3s var(--ease), border-color .3s var(--ease); }
.acc-q .plus::before,.acc-q .plus::after{ content:""; position:absolute; background:var(--gold-dark); top:50%; left:50%; transform:translate(-50%,-50%); }
.acc-q .plus::before{ width:10px; height:1.5px; }
.acc-q .plus::after{ width:1.5px; height:10px; transition:opacity .25s var(--ease); }
.acc-item.open .acc-q .plus{ transform:rotate(180deg); border-color:var(--gold-dark); }
.acc-item.open .acc-q .plus::after{ opacity:0; }
.acc-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.acc-a-inner{ padding:0 4px 24px; max-width:760px; }
.acc-a-inner p{ margin:0; }

/* ---------- Forms ---------- */
.form-wrap{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-l); padding:48px; box-shadow:var(--shadow-m); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:.82rem; font-weight:600; color:var(--navy); }
.field .req{ color:var(--gold); }
.field input, .field select, .field textarea{
  border:1.5px solid var(--line); border-radius:var(--radius-s); padding:14px 16px;
  font-family:inherit; font-size:.95rem; color:var(--ink); background:#fbfbfc; transition:border-color .25s var(--ease), background .25s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:3px solid rgba(176,141,62,.22); border-color:var(--gold-dark); background:#fff; }
.field input.invalid, .field select.invalid, .field textarea.invalid{ border-color:#B4423C; }
.field-error{ color:#B4423C; font-size:.78rem; margin-top:4px; display:none; }
.field-error.show{ display:block; }
.upload-name{ font-size:.8rem; font-weight:600; color:var(--navy); margin-top:8px; display:block; }
.upload-error{ font-size:.8rem; font-weight:600; color:#B4423C; margin-top:8px; display:none; }
.upload-error.show{ display:block; }
.upload.has-file{ border-color:var(--gold-dark); background:var(--gold-light); }
.upload.has-error{ border-color:#B4423C; }
.field textarea{ resize:vertical; min-height:110px; }
.field-check{ display:flex; align-items:flex-start; gap:10px; font-size:.86rem; color:var(--muted); }
.field-check input{ margin-top:3px; }
.checkbox-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.checkbox-grid label{ display:flex; align-items:center; gap:8px; font-size:.86rem; font-weight:500; color:var(--ink); background:var(--gray); padding:11px 14px; border-radius:var(--radius-s); }
/* Upload control — the visible box IS a <label for="..."> natively bound
   to a real <input type="file" id="...">. Clicking anywhere in the label
   (including the JS-populated filename/error text) opens the OS file
   picker with zero dependency on JavaScript — this works even if a
   script error elsewhere on the page prevents app.js from running.
   The input itself is visually hidden using a non-display technique
   (clipped to 1px, not display:none) so it remains a real, clickable,
   focusable, screen-reader-visible control rather than being removed
   from the accessibility tree. */
.upload{ display:block; cursor:pointer; border:1.5px dashed var(--line); border-radius:var(--radius-s); padding:22px; text-align:center; font-size:.86rem; color:var(--muted); background:#fbfbfc; transition:border-color .2s var(--ease), background .2s var(--ease); }
.upload:hover{ border-color:var(--gold-dark); background:var(--gold-light); }
.upload:focus-within{ outline:3px solid rgba(176,141,62,.28); border-color:var(--gold-dark); }
.upload strong{ color:var(--gold-dark); }
.upload-input{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.form-steps{ display:flex; gap:8px; margin-bottom:36px; }
.form-steps span{ flex:1; height:4px; border-radius:99px; background:var(--line); }
.form-steps span.active{ background:var(--gold); }
.form-note{ font-size:.8rem; color:var(--muted-2); margin-top:18px; }
.hp-field{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; }
.form-submit-error{ background:#FFF4F2; border-left:3px solid #B4423C; padding:16px 20px; border-radius:var(--radius-s); color:#8B2E29; font-size:.9rem; }
.confirm-box{ background:var(--gray); border-left:3px solid var(--gold); padding:20px 24px; border-radius:var(--radius-s); font-size:.9rem; color:var(--muted); }

/* ---------- Live chat widget ---------- */
.chat-bubble{ position:fixed; bottom:26px; right:26px; z-index:900; width:64px; height:64px; border-radius:50%; background:var(--navy); border:2px solid var(--gold); box-shadow:var(--shadow-l); display:flex; align-items:center; justify-content:center; }
.chat-bubble svg{ width:26px; height:26px; stroke:#fff; }
.chat-panel{ position:fixed; bottom:100px; right:26px; z-index:900; width:320px; background:#fff; border-radius:var(--radius-m); box-shadow:var(--shadow-l); overflow:hidden; display:none; }
.chat-panel.open{ display:block; }
.chat-panel-head{ background:var(--navy); color:#fff; padding:18px 20px; }
.chat-panel-head strong{ font-family:'Fraunces',serif; font-size:1rem; }
.chat-panel-head span{ display:block; font-size:.78rem; color:var(--silver); margin-top:4px; }
.chat-panel-body{ padding:18px 20px; display:flex; flex-direction:column; gap:10px; }
.chat-panel-body button{ text-align:left; padding:13px 16px; border-radius:var(--radius-s); border:1.5px solid var(--line); background:var(--gray); font-size:.88rem; font-weight:600; color:var(--navy); }
.chat-panel-body button:hover{ border-color:var(--gold-dark); color:var(--gold-dark); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy); color:var(--silver); padding:80px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-grid h4{ color:#fff; font-family:'Inter',sans-serif; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:20px; font-weight:600; }
.footer-grid a{ display:block; font-size:.92rem; color:var(--silver); padding:7px 0; transition:color .2s; }
.footer-grid a:hover{ color:#fff; }
.footer-brand p{ color:var(--silver); max-width:280px; font-size:.92rem; }
.footer-social{ display:flex; gap:12px; margin-top:20px; }
.footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; padding:0; }
.footer-social svg{ width:16px; height:16px; stroke:#fff; }
/* Social icon not yet configured (no SOCIAL_LINKS URL set) — visible
   and on-brand, but intentionally not clickable and subtly dimmed so
   it doesn't read as broken, just "not connected yet". */
[data-social].social-pending{
  display:flex; opacity:1; cursor:default; pointer-events:none;
}
/* Keep the requested display order everywhere, including the mobile footer.
   Adding each real URL in app.js will activate the matching icon without
   requiring any HTML or layout changes. */
[data-social="facebook"]{ order:1; }
[data-social="tiktok"]{ order:2; }
[data-social="instagram"]{ order:3; }
[data-social="linkedin"]{ order:4; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding:26px 0; font-size:.8rem; color:var(--muted-2); flex-wrap:wrap; gap:12px; }
.footer-bottom .legal-links{ display:flex; gap:20px; }
.footer-bottom .legal-links a{ color:var(--muted-2); }
.footer-bottom .legal-links a:hover{ color:#fff; }
.footer-contact-item{ display:flex; gap:10px; align-items:flex-start; padding:8px 0; font-size:.92rem; color:var(--silver); }
.footer-contact-item svg{ width:16px; height:16px; stroke:var(--gold); margin-top:3px; flex:0 0 auto; }

/* ---------- Map ---------- */
.map-frame{ position:relative; border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-s); background:var(--gray); }
.map-frame iframe{ width:100%; height:340px; border:0; display:block; filter:grayscale(.15) contrast(1.02); }
.map-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; background:#fff; border-top:1px solid var(--line); flex-wrap:wrap; }
.map-actions span{ font-size:.85rem; color:var(--muted); }
.map-note{ font-size:.78rem; color:var(--muted-2); margin-top:10px; }

/* ---------- Sticky mobile CTA ---------- */
.sticky-mobile-cta{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:950; background:#fff; box-shadow:0 -8px 24px rgba(10,31,68,.14); padding:12px var(--pad); }
.sticky-mobile-cta .cta-row{ gap:10px; }
.sticky-mobile-cta .btn{ flex:1; padding:14px 10px; font-size:.82rem; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.in > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.12s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.19s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.26s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay:.33s; }
.reveal-stagger.in > *:nth-child(6){ transition-delay:.40s; }

/* Stronger "slide up from below" stagger variant — used only for the
   "Why Collective Staffing Group" cards. Same mechanism as
   .reveal-stagger (same shared IntersectionObserver, same .in-class
   toggle), just a larger vertical travel distance and its own delay
   ladder extended to 8 items. Does not touch .reveal-stagger itself,
   so every other grid using that class elsewhere is unaffected. */
.reveal-stagger-up > *{ opacity:0; transform:translateY(46px); transition:opacity .75s cubic-bezier(.19,.68,.24,1), transform .75s cubic-bezier(.19,.68,.24,1); }
.reveal-stagger-up.in > *{ opacity:1; transform:translateY(0); }
.reveal-stagger-up.in > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger-up.in > *:nth-child(2){ transition-delay:.12s; }
.reveal-stagger-up.in > *:nth-child(3){ transition-delay:.19s; }
.reveal-stagger-up.in > *:nth-child(4){ transition-delay:.26s; }
.reveal-stagger-up.in > *:nth-child(5){ transition-delay:.33s; }
.reveal-stagger-up.in > *:nth-child(6){ transition-delay:.40s; }
.reveal-stagger-up.in > *:nth-child(7){ transition-delay:.47s; }
.reveal-stagger-up.in > *:nth-child(8){ transition-delay:.54s; }

/* Same slide-in-from-left + fade motion as the approved Home Hero
   (.hero-slide-in), but scroll-triggered via the shared reveal
   IntersectionObserver instead of firing once on page load — for
   below-the-fold sections that should play this same animation the
   moment they enter the viewport. */
.reveal-slide-left{ opacity:0; transform:translateX(-90px); transition:opacity .95s cubic-bezier(.19,.68,.24,1), transform .95s cubic-bezier(.19,.68,.24,1); }
.reveal-slide-left.in{ opacity:1; transform:translateX(0); }

/* Whole-block slide-up-from-below + fade, scroll-triggered via the
   same shared reveal observer. Used for the Stats/Experience Counter
   section: the entire block rises into place; number count-up is
   handled separately in JS and only begins once this transition has
   finished (see initStatsCounters in app.js). */
.reveal-slide-up{ opacity:0; transform:translateY(100px); transition:opacity .9s cubic-bezier(.19,.68,.24,1), transform .9s cubic-bezier(.19,.68,.24,1); }
.reveal-slide-up.in{ opacity:1; transform:translateY(0); }

/* ---------- Home page — Stats / Experience Counter section ----------
   Premium navy band with gold counters, sitting between "Who We Are"
   and "Why Choose Us". Scoped entirely to .stats-* / .stat-* classes.
   The section container itself uses .reveal-slide-up (see above) for
   its whole-block rise-from-below entrance; the individual number
   count-up animations are handled in app.js and are timed to start
   only once that transition has completed. ---------- */
.stats-section{ background:var(--navy); padding:76px 0; }
.stats-grid{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
}
.stat-item{ flex:1; text-align:center; padding:0 12px; min-width:0; }
.stat-divider{ width:1px; align-self:stretch; background:rgba(255,255,255,.14); margin:4px 0; flex-shrink:0; }
.stat-number{
  font-family:'Fraunces', serif; font-weight:650; color:var(--gold-light);
  font-size:clamp(2.4rem, 4.2vw, 3.4rem); line-height:1; letter-spacing:-.01em;
  margin-bottom:10px;
}
.stat-number.stat-static{ color:var(--gold-light); opacity:0; transform:scale(.92); transition:opacity .6s ease, transform .6s ease; }
.stat-number.stat-static.stat-static-in{ opacity:1; transform:scale(1); }
.stat-label{ color:#fff; font-size:.98rem; font-weight:600; line-height:1.35; }
.stat-sub{ color:var(--silver); font-size:.76rem; margin-top:8px; letter-spacing:.02em; }

@media (max-width: 900px){
  .stats-grid{ flex-wrap:wrap; row-gap:36px; }
  .stat-item{ flex:0 0 calc(50% - 8px); }
  .stat-divider{ display:none; }
}
@media (max-width: 560px){
  .stats-section{ padding:56px 0; }
  .stat-number{ font-size:clamp(2rem, 9vw, 2.6rem); }
  .stat-label{ font-size:.88rem; }
}

/* ---------- Services page — "Clinical & Support Staffing for Healthcare
   Facilities" section: scroll-triggered two-stage sequence, same
   language as the Contact/Services heroes but fired on scroll instead
   of page load (this section is below the fold). Stage 1: the photo
   slides in from the right — position only, it never fades, so the
   motion itself stays clearly visible. Stage 2: only once Stage 1's
   transition duration has elapsed, the text (already in its normal
   left-column layout position — this does NOT overlay the photo)
   slides in from the left with a fade, via a matching transition-delay.
   Both classes get their "in" class added at the same moment (via the
   same IntersectionObserver used sitewide); the stagger comes purely
   from giving the text a longer transition-delay than the photo's
   duration. ---------- */
.hc-section-photo-frame{ position:relative; border-radius:var(--radius-m); overflow:hidden; aspect-ratio:16/10; }
.hc-section-photo{
  display:block; width:100%; height:100%; object-fit:cover;
  transform:translateX(120px);
  transition:transform 1.05s cubic-bezier(.19,.68,.24,1);
}
.hc-section-photo.in{ transform:translateX(0); }
.hc-section-text{
  opacity:0; transform:translateX(-70px);
  transition:opacity .9s cubic-bezier(.19,.68,.24,1) 1.15s, transform .9s cubic-bezier(.19,.68,.24,1) 1.15s;
}
.hc-section-text.in{ opacity:1; transform:translateX(0); }

/* ---------- Utility ---------- */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.two-col.reverse{ direction:rtl; }
.two-col.reverse > *{ direction:ltr; }
.bullet-list li{ display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.bullet-list li .icon{ width:34px; height:34px; border-radius:9px; }
.bullet-list li .icon svg{ width:16px; height:16px; }
.bullet-list li span{ font-size:.98rem; color:var(--ink); padding-top:5px; }
.tag-pill{ display:inline-flex; align-items:center; gap:8px; background:var(--gray); border-radius:999px; padding:8px 16px; font-size:.82rem; font-weight:600; color:var(--navy); margin:0 8px 8px 0; }
.breadcrumb{ font-size:.82rem; color:var(--muted-2); margin-bottom:18px; }
.breadcrumb a{ color:var(--muted-2); }
.breadcrumb a:hover{ color:var(--gold-dark); }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--navy); color:#fff; padding:12px 20px; z-index:2000; border-radius:0 0 8px 0; }
.skip-link:focus{ left:0; }
:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .steps, .steps.steps-4, .steps.steps-3{ grid-template-columns:repeat(2,1fr); }
  .step-line{ display:none; }
}
@media (max-width: 900px){
  .main-nav, .header-ctas{ display:none; }
  .nav-toggle{ display:flex; }
  .two-col, .two-col.reverse{ grid-template-columns:1fr; direction:ltr; gap:36px; }
  .pathway{ grid-template-columns:1fr; }
  .form-grid, .checkbox-grid{ grid-template-columns:1fr; }
  .testi-track{ grid-template-columns:1fr; }
  .sticky-mobile-cta{ display:block; }
  body{ padding-bottom:74px; }
  .form-wrap{ padding:28px; }
  .about-hero-grid{ grid-template-columns:1fr; gap:32px; }
  .hero-photo-card{ margin:0 auto; max-width:300px; order:-1; }
  .hero-photo-spec{ margin:12px auto 0; text-align:center; }
  .duo-image{ max-width:340px; margin:0 auto; }
  .duo-image .ph.secondary{ right:-14px; bottom:-20px; }
}
@media (max-width: 640px){
  .grid-4, .grid-3, .grid-2{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:34px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .section{ padding:64px 0; }
  .hero{ min-height:88vh; }
  .hero-inner{ padding:110px var(--pad) 60px; }
  .checkbox-grid{ grid-template-columns:1fr 1fr; }
  .hero-photo-bg .hero-bg-img{ object-position:center 18%; }
  .hero-photo-bg .hero-scrim{ background:linear-gradient(180deg, rgba(7,26,51,.72) 0%, rgba(7,26,51,.58) 55%, rgba(7,26,51,.42) 100%); }
}