/* ExactPay Payroll — clone stylesheet (HalyardCo takeover outline) */
:root{
  /* Brand refresh 2026-08-25 (task 0224): ground is Craig's logo neutral #111111 (hue 0, sat 0%),
     NOT navy. The --navy* tokens are kept as NAMES so the whole site re-grounds from here, but their
     VALUES are now neutral near-black. Golds recut to #c1a969 / #8e794b; new pale --highlight. */
  --navy:#111111;
  --navy-bar:#1c1c1c;
  --navy-hero:#0a0a0a;
  --gold:#c1a969;
  --gold-dark:#8e794b;
  --gold-2:#8e794b;
  --highlight:#f3eeac;
  --amber:#c1a969;
  --cream:#ffffff;
  --gray-bg:#f3f5f8;
  --gray-card:#f1f3f5;
  --ink:#181818;
  --muted:#646e7c;
  --line:#e4e7ec;
  --maxw:1200px;
  --font-head:'Poppins',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:#fff;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.15;margin:0}
p{margin:0 0 1rem}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--font-head);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.8rem;color:var(--gold-dark);margin-bottom:.6rem}
/* batch1 #3/#6: eyebrow is bright gold on the DARK hero, but gold-dark on white body sections for legibility */
.hero .eyebrow,.svc-hero .eyebrow,.site-header .eyebrow{color:var(--gold)}
.btn{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:.95rem;padding:.85rem 1.6rem;border-radius:8px;cursor:pointer;border:0;transition:filter .15s,transform .15s;text-align:center}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-gold{background:var(--gold);color:#fff}
.btn-amber{background:var(--amber);color:#101828}
.btn-navy{background:var(--navy);color:#fff}
.btn-outline{background:transparent;border:1px solid var(--line);color:var(--ink)}
.center{text-align:center}
.section{padding:72px 0}
.section-sm{padding:52px 0}
.bg-gray{background:var(--gray-bg)}
.bg-navy{background:var(--navy);color:#fff}

/* ---------- TOP BAR ---------- */
.topbar{background:var(--navy-bar);color:#e6e9ee;font-size:.82rem}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:38px}
.topbar .addr{display:flex;align-items:center;gap:.4rem}
.topbar .socials{display:flex;gap:.9rem;align-items:center}
.topbar .socials a{opacity:.85}
.topbar .socials a:hover{opacity:1;color:var(--gold)}
.topbar svg{width:16px;height:16px;fill:currentColor}

/* ---------- HEADER / NAV ---------- */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand img{height:46px;width:auto}
.nav{display:flex;align-items:center;gap:1.9rem}
.nav a{font-family:var(--font-head);font-weight:500;font-size:.9rem;color:#1c2635;white-space:nowrap}
.nav a:hover{color:var(--gold)}
.nav .has-drop{position:relative}
.nav .has-drop>a::after{content:"▾";font-size:.7rem;margin-left:.3rem;color:#7a8494}
.dropdown{position:absolute;top:130%;left:-12px;min-width:220px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 34px rgba(16,24,40,.12);padding:.5rem;opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s}
.nav .has-drop:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:.55rem .75rem;border-radius:7px;font-weight:500;font-size:.92rem}
.dropdown a:hover{background:var(--gray-bg);color:var(--gold)}
.header-call{display:flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-weight:600;font-size:.92rem;color:var(--ink);white-space:nowrap}
.header-call svg{width:18px;height:18px;fill:var(--gold)}
.hamburger{display:none;background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--ink)}

/* mobile nav panel */
.mobile-nav{display:none;background:#fff;border-bottom:1px solid var(--line);padding:1rem 24px 1.4rem}
.mobile-nav a{display:block;padding:.7rem 0;border-bottom:1px solid var(--line);font-family:var(--font-head);font-weight:500}
.mobile-nav .m-call{margin-top:1rem}
.mobile-nav.open{display:block}

/* ---------- HERO (home) ---------- */
.hero{position:relative;min-height:560px;display:flex;align-items:center;color:#fff;background:#111111}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(15,15,15,.97) 0%,rgba(15,15,15,.9) 42%,rgba(15,15,15,.62) 78%,rgba(15,15,15,.5) 100%)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(2.4rem,5vw,4rem);text-transform:uppercase;max-width:620px;letter-spacing:-.01em}
.hero p{font-size:1.15rem;max-width:520px;margin:1.2rem 0 2rem;color:#e7eaef}

/* page hero (dark band) */
.page-hero{background:var(--navy);color:#fff;text-align:center;padding:74px 0}
.page-hero h1{font-size:clamp(2.2rem,4.5vw,3.4rem);text-transform:uppercase}
.page-hero p{color:#c3cad4;max-width:640px;margin:1rem auto 0;font-size:1.1rem}
.page-hero .amber{color:var(--amber)}

/* service dark hero (left aligned) */
.svc-hero{background:var(--navy-hero);color:#fff;padding:96px 0}
.svc-hero h1{font-size:clamp(2.2rem,4.6vw,3.4rem);text-transform:uppercase;max-width:640px}
.svc-hero .lead{font-size:1.3rem;font-weight:600;margin:1rem 0;color:#fff;max-width:640px}
.svc-hero p{color:#c3cad4;max-width:600px}

/* ---------- SPLIT ROWS ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.reverse .split-media{order:2}
.split h2{font-size:clamp(1.7rem,3vw,2.3rem);text-transform:uppercase;margin-bottom:1.2rem}
.split-media img{border-radius:14px;box-shadow:0 18px 40px rgba(16,24,40,.14);width:100%;object-fit:cover}
.media-card{background:var(--gray-bg);border-radius:16px;padding:22px}
.media-card img{border-radius:12px}

/* ---------- SERVICE CARDS (home) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px}
.svc-card{background:var(--gray-card);border-radius:14px;padding:30px 24px;text-align:center}
.svc-card .ic{width:58px;height:58px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.svc-card .ic svg{width:26px;height:26px;fill:none;stroke:var(--gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.svc-card h3{font-size:1.15rem;margin-bottom:.6rem}
.svc-card p{font-size:.9rem;color:var(--muted);margin-bottom:1.3rem}
.svc-card .btn{padding:.6rem 1.2rem;font-size:.85rem}

/* numbered services (services page) */
.num-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px}
.num-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 24px}
.num-card .num{width:44px;height:44px;border-radius:50%;background:var(--gold);color:#fff;font-family:var(--font-head);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:16px}
.num-card h3{font-size:1.15rem;margin-bottom:.6rem}
.num-card p{font-size:.9rem;color:var(--muted);margin-bottom:1.3rem}
.num-card .btn{padding:.55rem 1.1rem;font-size:.85rem}

/* ---------- CTA BANDS ---------- */
.cta-navy{background:var(--navy);color:#fff;text-align:center;padding:56px 0}
.cta-navy .accent{color:var(--gold);font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.03em;max-width:760px;margin:0 auto 1.5rem;font-size:1.05rem}
.cta-gold{background:var(--gold);color:#fff;text-align:center;padding:70px 0}
.cta-gold h2{font-size:clamp(1.9rem,3.6vw,2.6rem);text-transform:uppercase;margin-bottom:1rem}
.cta-gold p{max-width:660px;margin:0 auto 1.8rem;color:#fff6ea}
.cta-gold .btn{background:var(--navy);color:#fff}

/* ---------- TESTIMONIALS ---------- */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.tst-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px;box-shadow:0 10px 30px rgba(16,24,40,.05)}
.stars{color:var(--amber);letter-spacing:.15em;margin-bottom:1rem;font-size:1.05rem}
.tst-card .quote{font-style:italic;color:#2a3444}
.tst-card .who{font-family:var(--font-head);font-weight:600;margin-top:1.2rem}
.tst-card .date{color:var(--muted);font-size:.85rem}

/* ---------- ABOUT TEAM ---------- */
.team-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin:64px 0}
.team-row.reverse .team-photo{order:2}
.team-photo img{border-radius:14px;width:100%;box-shadow:0 18px 40px rgba(16,24,40,.14)}
.team-photo.placeholder{display:flex;align-items:center;justify-content:center}
.team-photo.placeholder img{width:220px;box-shadow:none;opacity:.9}
.team-info h3{font-size:1.9rem}
.team-info .role{color:var(--gold);font-family:var(--font-head);font-weight:600;margin:.2rem 0 1rem}
.team-info p{color:#2a3444}

/* ---------- BULLETS (service why) ---------- */
.checks{list-style:none;padding:0;margin:1.2rem 0 0}
.checks li{display:flex;align-items:flex-start;gap:.7rem;margin-bottom:.8rem;font-family:var(--font-head);font-weight:500}
.checks li::before{content:"";flex:0 0 20px;height:20px;margin-top:2px;border-radius:50%;background:var(--gold);position:relative}
.checks li{position:relative}

/* ---------- RESOURCES ---------- */
.res-section h2{font-size:1.5rem;margin:40px 0 18px}
.res-group{font-family:var(--font-head);font-weight:600;font-size:1.05rem;margin:26px 0 14px}
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.res-card{background:var(--gray-card);border-radius:12px;padding:22px}
.res-card h4{font-size:1rem;margin-bottom:.3rem}
.res-card .sub{color:var(--muted);font-size:.9rem;margin-bottom:1rem;white-space:pre-line}
.res-card .btn{padding:.5rem 1.1rem;font-size:.82rem}

/* ---------- EVENTS ---------- */
.ev-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:10px}
.ev-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:32px;box-shadow:0 10px 30px rgba(16,24,40,.05)}
.ev-card .ic{width:52px;height:52px;border-radius:12px;background:var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-size:1.5rem}
.ev-card h3{font-size:1.25rem;margin-bottom:.6rem}
.ev-card p{color:var(--muted);margin:0}

/* ---------- TRAINING ---------- */
.filters{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:36px 0 8px}
.filter{font-family:var(--font-head);font-weight:500;font-size:.9rem;padding:.5rem 1.1rem;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer}
.filter.active{background:var(--gold);color:#fff;border-color:var(--gold)}
.vid-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:36px}
.vid-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.vid-thumb{aspect-ratio:16/10;background:#eceff3;position:relative;display:flex;align-items:center;justify-content:center}
.vid-thumb .play{width:52px;height:52px;border-radius:50%;background:#d6336c;display:flex;align-items:center;justify-content:center}
.vid-thumb .play::after{content:"";border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.vid-thumb .dur{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.7);color:#fff;font-size:.72rem;padding:2px 7px;border-radius:5px}
.vid-body{padding:18px}
.vid-body h4{font-size:1.02rem;margin-bottom:.4rem}
.vid-body p{font-size:.86rem;color:var(--muted);margin-bottom:.7rem}
.vid-cat{font-family:var(--font-head);font-weight:600;font-size:.8rem;color:var(--gold)}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:0;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(16,24,40,.12)}
.contact-info{background:var(--navy);color:#fff;padding:48px 40px}
.contact-info h2{font-size:1.6rem;margin-bottom:1.6rem}
.contact-info a{display:block;color:var(--amber);font-family:var(--font-head);font-weight:600;margin-bottom:1rem}
.contact-info .eyebrow{color:var(--gold);margin-bottom:.35rem}
.contact-map{margin-top:1.2rem;border-radius:12px;overflow:hidden;border:1px solid #2a3546}
.contact-map iframe{width:100%;height:230px;border:0;display:block}
.contact-form{background:#fff;padding:48px 40px}
.field{margin-bottom:20px}
.field label{display:block;font-size:.9rem;color:#344054;margin-bottom:.4rem;font-weight:500}
.field input,.field textarea,.field select{width:100%;padding:.8rem .9rem;border:1px solid #d0d5dd;border-radius:8px;font-family:inherit;font-size:.95rem}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--gold);border-color:var(--gold)}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--navy);color:#c3cad4;padding:60px 0 0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:48px;padding-bottom:44px}
.site-footer img.flogo{height:52px;margin-bottom:18px}
.site-footer .desc{font-size:.9rem;line-height:1.7;max-width:360px}
.site-footer h4{color:#fff;font-size:1.05rem;margin-bottom:1rem}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer ul li{margin-bottom:.6rem}
.site-footer ul a:hover{color:var(--gold)}
.fcontact div{display:flex;gap:.6rem;margin-bottom:.9rem;font-size:.92rem}
.fcontact svg{width:16px;height:16px;fill:var(--gold);flex:0 0 16px;margin-top:3px}
.fsocials{display:flex;gap:.9rem;margin-top:.4rem}
.fsocials a{width:34px;height:34px;border-radius:7px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center}
.fsocials a:hover{background:var(--gold)}
.fsocials svg{width:17px;height:17px;fill:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;justify-content:space-between;font-size:.82rem;color:#8a94a2}
.footer-bottom a:hover{color:var(--gold)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:960px){
  .nav,.header-call{display:none}
  .hamburger{display:block}
  .svc-grid,.num-grid,.vid-grid{grid-template-columns:repeat(2,1fr)}
  .tst-grid{grid-template-columns:1fr}
  .split,.team-row,.contact-grid,.footer-grid{grid-template-columns:1fr;gap:32px}
  .split.reverse .split-media,.team-row.reverse .team-photo{order:0}
  .res-grid,.ev-grid{grid-template-columns:1fr}
  .topbar .addr{font-size:.72rem}
}
@media(max-width:560px){
  .svc-grid,.num-grid,.vid-grid{grid-template-columns:1fr}
  .section{padding:52px 0}
  .footer-bottom{flex-direction:column;gap:8px}
  .topbar .addr span{display:none}
}

/* ============================================================
   DEMO REBUILD (HalyardCo, 2026-08) — elevation layer.
   Adds: hero motion, home "people" strip, portal + media pages,
   honest empty states, placeholder badges, form status UI.
   Everything above is the carried-forward clone; this refines it.
   ============================================================ */

/* ---- placeholder / pending badge (visible markers for gaps) ---- */
.pending-badge{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-head);font-weight:600;font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;color:var(--gold-dark);background:rgba(193,169,105,.12);border:1px solid rgba(193,169,105,.35);padding:.28rem .6rem;border-radius:999px}

/* ===== HERO — orchestrated premium entrance (Craig: "cool and sharp") =====
   Transform/opacity only (60fps). Explicit z-layering: image(0) < dark
   overlay(1) < brass glow + light sweep(2) < copy(3). Full static fallback
   for prefers-reduced-motion at the end of this block. ===== */
.hero{overflow:hidden}
.hero-bg{z-index:0;transform-origin:60% 40%;animation:heroKen 20s ease-out both}
.hero::before{z-index:1}                 /* dark readability overlay, above the photo */
.hero .wrap{position:relative;z-index:3} /* copy always on top */
@keyframes heroKen{from{transform:scale(1.14)}to{transform:scale(1)}}

/* brass ambient glow behind the copy — gentle drift gives depth */
.hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(58% 78% at 20% 46%,rgba(193,169,105,.22),transparent 62%);
  animation:heroGlow 13s ease-in-out infinite alternate}
@keyframes heroGlow{from{opacity:.45;transform:translate3d(-3%,0,0)}to{opacity:.95;transform:translate3d(3%,0,0)}}

/* one-pass diagonal light sweep across the hero on arrival */
.hero .sweep{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hero .sweep::before{content:"";position:absolute;top:-40%;left:-70%;width:45%;height:180%;transform:skewX(-16deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),rgba(255,255,255,.24),rgba(255,255,255,.10),transparent);
  animation:heroSweep 2.4s cubic-bezier(.4,0,.15,1) .45s 1 both}
@keyframes heroSweep{from{left:-70%}to{left:135%}}

/* crisp typographic build — each line masked, rises in on sharp easing */
.hero-title{margin:0}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.05em}
.hero-title .inner{display:inline-block;transform:translateY(116%);opacity:0;
  animation:heroLine .85s cubic-bezier(.16,1,.3,1) forwards;will-change:transform}
.hero-title .line:nth-child(1) .inner{animation-delay:.30s}
.hero-title .line:nth-child(2) .inner{animation-delay:.46s}
@keyframes heroLine{to{transform:translateY(0);opacity:1}}
/* "Off" in amber with an accent underline that wipes in */
.hero-title em{font-style:normal;color:var(--amber);position:relative}
.hero-title em::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:.085em;border-radius:2px;
  background:var(--amber);transform:scaleX(0);transform-origin:left;animation:heroWipe .7s cubic-bezier(.16,1,.3,1) 1.2s forwards}
@keyframes heroWipe{to{transform:scaleX(1)}}

/* sub / actions / trust rise in after the headline lands */
.hero .hero-sub{opacity:0;transform:translateY(16px);animation:heroRise .7s cubic-bezier(.22,.61,.36,1) .9s forwards}
.hero .hero-actions{opacity:0;transform:translateY(16px);animation:heroRise .7s cubic-bezier(.22,.61,.36,1) 1.08s forwards}
.hero .trust-line{opacity:0;transform:translateY(12px);animation:heroRise .7s ease 1.3s forwards}
@keyframes heroRise{to{opacity:1;transform:translateY(0)}}

.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 22px}
/* CTA — soft breathing glow + a periodic light sheen to land the eye on it */
.hero-actions .btn-gold{position:relative;overflow:hidden;animation:ctaGlow 3s ease-in-out 1.6s infinite}
.hero-actions .btn-gold::after{content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);animation:ctaSheen 5s ease-in-out 2.2s infinite}
@keyframes ctaGlow{0%,100%{box-shadow:0 6px 22px rgba(240,177,0,0)}50%{box-shadow:0 8px 30px rgba(240,177,0,.28)}}
@keyframes ctaSheen{0%{left:-80%}18%,100%{left:150%}}

.hero-phone{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-head);font-weight:600;font-size:1.12rem;color:#fff}
.hero-phone svg{width:20px;height:20px;fill:var(--amber)}
.hero-phone .num{border-bottom:2px solid transparent;transition:border-color .15s}
.hero-phone:hover .num{border-bottom-color:var(--amber)}
.hero-phone .cue{display:inline-block;color:var(--amber);animation:cueNudge 1.8s ease-in-out infinite}
@keyframes cueNudge{0%,100%{transform:translateX(0);opacity:.5}50%{transform:translateX(5px);opacity:1}}
.hero .trust-line{margin-top:1.6rem;font-size:.9rem;color:#c3cad4;font-family:var(--font-head);font-weight:500;letter-spacing:.02em}
.hero .trust-line b{color:var(--amber);font-weight:700}

/* graceful static fallback — no motion, everything in its final state */
@media(prefers-reduced-motion:reduce){
  .hero-bg,.hero::after,.hero .sweep::before,.hero-title .inner,.hero-title em::after,
  .hero .hero-sub,.hero .hero-actions,.hero .trust-line,
  .hero-actions .btn-gold,.hero-actions .btn-gold::after,.hero-phone .cue{animation:none!important}
  .hero-title .inner{transform:none;opacity:1}
  .hero-title em::after{transform:scaleX(1)}
  .hero .hero-sub,.hero .hero-actions,.hero .trust-line{opacity:1;transform:none}
  .hero-bg{transform:scale(1)}
  .hero::after{opacity:.7;transform:none}
  .hero .sweep{display:none}
}

/* ---- HOME people strip (real, named partners above the fold-ish) ---- */
.people-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:40px}
.person{display:flex;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:0 10px 30px rgba(16,24,40,.05);text-align:left}
.person img{width:84px;height:84px;border-radius:12px;object-fit:cover;flex:0 0 84px}
.person h3{font-size:1.15rem;margin-bottom:.15rem}
.person .role{color:var(--gold);font-family:var(--font-head);font-weight:600;font-size:.86rem;margin-bottom:.4rem}
.person p{font-size:.86rem;color:var(--muted);margin:0}

/* ---- PORTAL page ---- */
.portal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:40px;max-width:820px;margin-left:auto;margin-right:auto}
.portal-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:38px 32px;text-align:center;box-shadow:0 12px 34px rgba(16,24,40,.07);display:flex;flex-direction:column;align-items:center}
.portal-card .plogo{height:44px;margin-bottom:20px;display:flex;align-items:center;justify-content:center}
.portal-card h3{font-size:1.35rem;margin-bottom:.5rem}
.portal-card p{font-size:.92rem;color:var(--muted);margin-bottom:1.6rem;min-height:2.6em}
.portal-card .btn{width:100%}
.portal-card .btn[aria-disabled="true"]{background:var(--gray-card);color:var(--muted);cursor:not-allowed;pointer-events:none;border:1px solid var(--line)}
.portal-note{text-align:center;color:var(--muted);font-size:.9rem;margin-top:34px}

/* ---- MEDIA page + generic empty state ---- */
.empty-state{max-width:640px;margin:56px auto;text-align:center;background:var(--gray-bg);border:1px dashed var(--line);border-radius:18px;padding:56px 40px}
.empty-state .es-ic{width:64px;height:64px;border-radius:16px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:1.8rem}
.empty-state h2{font-size:1.5rem;margin-bottom:.7rem;text-transform:none}
.empty-state p{color:var(--muted);max-width:460px;margin:0 auto 1rem}

/* ---- FORM status + honeypot ---- */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:14px;padding:.85rem 1rem;border-radius:8px;font-size:.92rem;display:none}
.form-status.show{display:block}
.form-status.ok{background:#e7f6ec;color:#12603a;border:1px solid #b7e0c4}
.form-status.err{background:#fdecec;color:#8a2020;border:1px solid #f2c2c2}
.field .req{color:#c0392b}

/* collapse the horizontal nav to the hamburger earlier — 9 items need room to breathe */
@media(max-width:1100px){
  .nav,.header-call{display:none}
  .hamburger{display:block}
}
@media(max-width:960px){
  .people-strip,.portal-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .hero{min-height:auto;padding:56px 0}
  .hero .hero-actions{gap:14px}
  .hero .trust-line{margin-top:1.2rem}
}

/* ---- "client photo — pending" slot (NEVER stock; real photos incoming from Craig) ---- */
.photo-pending{position:relative;width:100%;min-height:300px;border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;
  background:linear-gradient(135deg,#eef1f4,#e4e8ee);border:1px dashed #c7d0da;color:var(--muted)}
.photo-pending::after{content:"Pending";position:absolute;top:12px;right:12px;font-family:var(--font-head);font-weight:600;
  font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-dark);
  background:rgba(193,169,105,.12);border:1px solid rgba(193,169,105,.35);padding:.22rem .55rem;border-radius:999px}
.photo-pending .pi{width:44px;height:44px;margin-bottom:14px;opacity:.6}
.photo-pending .pi svg{width:100%;height:100%;fill:none;stroke:var(--navy);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.photo-pending .pl{font-family:var(--font-head);font-weight:600;font-size:.98rem;color:var(--navy)}
.photo-pending .ps{font-size:.82rem;margin-top:.35rem;max-width:230px;line-height:1.5}
.team-photo .photo-pending{min-height:260px}

/* ---------- Iteration 2 (task 0224) additions ---------- */
/* Who We Serve — four claim cards */
.claims-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px}
.claim-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 22px;text-align:center;box-shadow:0 10px 30px rgba(16,24,40,.05)}
.claim-ic{width:54px;height:54px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.claim-ic svg{width:26px;height:26px;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.claim-card h3{font-size:1.05rem;margin-bottom:.5rem}
.claim-card p{font-size:.9rem;color:var(--muted);margin:0}
@media(max-width:900px){.claims-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.claims-grid{grid-template-columns:1fr}}

/* Testimonials carousel */
.tst-carousel{max-width:760px;margin:40px auto 0}
.tst-track .tst-card.is-live{background:#fff;border:1px solid var(--line);border-radius:14px;padding:34px 36px;box-shadow:0 12px 34px rgba(16,24,40,.07);text-align:left}
.tst-carousel .stars{color:var(--gold);letter-spacing:2px;font-size:1.05rem}
.tst-carousel .quote{font-style:italic;color:#2a3444;font-size:1.05rem;line-height:1.6;margin:.6rem 0 0}
.tst-carousel .who{font-family:var(--font-head);font-weight:600;margin-top:1.2rem}
.tst-carousel .who-sub{color:var(--muted);font-size:.9rem}
.tst-carousel .date{color:var(--muted);font-size:.85rem;margin-top:.2rem}
.tst-dots{display:flex;gap:9px;justify-content:center;margin-top:22px}
.tst-dot{width:10px;height:10px;border-radius:50%;border:0;background:var(--line);cursor:pointer;padding:0}
.tst-dot.on{background:var(--gold)}

/* Events (auto-expiry render) */
.events-grid{display:grid;gap:20px;margin-top:12px}
.event-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:12px;padding:22px 24px;text-align:left;box-shadow:0 10px 30px rgba(16,24,40,.05)}
.event-card .ev-date{font-family:var(--font-head);font-weight:600;color:var(--gold);font-size:.9rem;text-transform:uppercase;letter-spacing:.02em}
.event-card h3{margin:.4rem 0 .3rem;font-size:1.2rem}
.event-card .ev-loc{color:var(--muted);font-size:.9rem;margin-bottom:.5rem}
.event-card .btn{margin-top:.6rem;padding:.5rem 1.1rem;font-size:.85rem}

/* State-forms "Submit a Request" form + Employer/Employee login rows */
.req-form{max-width:640px;margin:26px auto 0;text-align:left;background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px}
.req-form .fld{margin-bottom:16px}
.req-form label{display:block;font-family:var(--font-head);font-weight:600;font-size:.85rem;margin-bottom:.4rem}
.req-form input,.req-form select,.req-form textarea{width:100%;padding:.7rem .85rem;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:.95rem}
.req-form textarea{min-height:96px;resize:vertical}
.req-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.req-form .row2{grid-template-columns:1fr}}
.req-status{margin-top:12px;font-size:.92rem;display:none}
.req-status.show{display:block}
.req-status.ok{color:#1a7f4b}
.req-status.err{color:#b3261e}
.portal-row-label{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--gold);font-size:.9rem;margin:34px 0 14px;text-align:left}
.portal-row-label:first-of-type{margin-top:0}

/* ================= iteration-3 P1: black header · chrome · CTA (2026-08-26) ================= */
/* #10 whole header black; logo gold pops against it. #12 gold #c1a969/#8e794b re-checked on black — reads high-contrast. */
.site-header{background:#111111;border-bottom:1px solid #2a2a2a}
.site-header .wrap{height:92px}
.topbar{background:#000000;color:#e8e8e8}
/* #11 logo MUCH bigger — preserve 4.16 aspect (no horizontal squash) */
.brand{flex-shrink:0;display:flex;align-items:center}
.brand img{height:66px;width:auto;max-width:none}
@media(max-width:760px){.brand img{height:50px}}
/* nav text light on black; hover stays gold */
.nav a{color:#f2efe6}
.nav a:hover{color:var(--gold)}
.nav .has-drop>a::after{color:#c1a969}
.header-call{color:#f4f1e8}
.header-call svg{fill:var(--gold)}
/* #13 bigger social icons — Luke repeat ask, make unmistakable */
.topbar svg{width:28px;height:28px}
.topbar .socials{gap:1.5rem}
/* #14 big gold Client Login, top right */
/* batch1 #4: more space between the media/nav button and the phone icon */
.header-right{display:flex;align-items:center;gap:.8rem;margin-left:1.2rem}
/* batch1 amend 4/5 + header-overflow fix (Relic measured clip at 1280): the 8-item nav + phone +
   Client Login + big logo can't fit the 1200 body width, so the HEADER row gets a wider wrap, a
   tightened nav, and collapses to the hamburger below 1240 (content grids still break at 960).
   Keeps Luke's big logo; at 1280 the login button clears the viewport edge (>=24px). */
.site-header>.wrap,.topbar>.wrap{max-width:1360px}
.site-header .wrap{padding-right:28px}
.brand{margin-right:.6rem}
.nav{gap:.55rem}
.nav a{font-size:.92rem}
@media(max-width:1240px){.nav,.header-call{display:none}.hamburger{display:block}}
/* batch1 #7: multi-state chips on the Client Resources state-request form */
.sr-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}
.sr-chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--gold);color:#111;font-weight:600;font-size:.9rem;padding:.35rem .5rem .35rem .75rem;border-radius:999px}
.sr-chip-x{border:0;background:rgba(0,0,0,.18);color:#111;width:20px;height:20px;border-radius:50%;font-size:15px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.sr-chip-x:hover{background:rgba(0,0,0,.34)}
.sr-hint{color:var(--muted);font-size:.85rem;margin:.5rem 0 0}
/* #40 video tiles: ExactPay-branded posters (Luke: our tiles own their posters), clickable + lightbox */
.vid-card[data-embed]{cursor:pointer;transition:transform .18s,box-shadow .18s}
.vid-card[data-embed]:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(16,24,40,.14)}
.vid-card[data-embed]:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.vid-thumb.branded{background:linear-gradient(135deg,#0a0a0a 0%,#1c1c1c 58%,#241f16 100%)}
.vid-thumb.branded::before{content:"";position:absolute;inset:0;background:url(/images/exactpay-mark.png) center/84px no-repeat;opacity:.18}
.vid-thumb.branded::after{content:"ExactPay";position:absolute;bottom:8px;right:11px;font-family:var(--font-head);font-weight:600;font-size:.7rem;letter-spacing:.06em;color:var(--gold);opacity:.9}
.vid-thumb .play{background:var(--gold);box-shadow:0 4px 14px rgba(0,0,0,.4);position:relative;z-index:1}
.vid-thumb .play::after{border-left-color:#111}
/* lightbox */
.vid-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center}
.vid-modal.open{display:flex}
.vid-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.82)}
.vid-modal-inner{position:relative;width:min(960px,92vw);z-index:1}
.vid-modal-frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.55)}
.vid-modal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-modal-x{position:absolute;top:-46px;right:0;background:transparent;border:0;color:#fff;font-size:2.3rem;line-height:1;cursor:pointer;padding:0 6px}
.vid-modal-x:hover{color:var(--gold)}
/* Apex FLEX YouTube CTA (no fabricated tiles — links the real channel) */
.apex-cta{display:flex;gap:22px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 28px}
.apex-cta-mark{flex-shrink:0;width:74px;height:74px;border-radius:12px;background:linear-gradient(135deg,#0a0a0a,#241f16);position:relative}
.apex-cta-mark::after{content:"";position:absolute;inset:0;background:url(/images/exactpay-mark.png) center/44px no-repeat;opacity:.9}
.apex-cta-body h3{font-size:1.15rem;margin-bottom:.3rem}
.apex-cta-body p{color:var(--muted);font-size:.9rem;margin-bottom:.9rem;max-width:620px}
@media(max-width:600px){.apex-cta{flex-direction:column;align-items:flex-start}}
.header-login{display:inline-flex;align-items:center;gap:.45rem;background:var(--gold);color:#111;font-family:var(--font-head);font-weight:700;font-size:.9rem;padding:.62rem 1.15rem;border-radius:8px;white-space:nowrap;box-shadow:0 3px 12px rgba(193,169,105,.35);transition:filter .15s,transform .15s}
.header-login:hover{filter:brightness(1.06);transform:translateY(-1px);color:#111}
.header-login svg{width:16px;height:16px;fill:#111}
/* #07 keep the GLOW (ctaGlow), drop the shimmer sheen; hover jiggle stays via .btn:hover */
.hero-actions .btn-gold::after{content:none!important}
/* #05 enlarge the primary "Free Payroll Assessment" CTA */
.btn-cta-lg{font-size:1.14rem;padding:1.05rem 2.15rem;border-radius:10px}
/* #06 sticky floating CTA — stays centered through the whole scroll */
.floating-cta{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:60;background:var(--gold);color:#111;font-family:var(--font-head);font-weight:700;font-size:1rem;padding:.85rem 1.7rem;border-radius:40px;box-shadow:0 8px 26px rgba(0,0,0,.3);display:inline-flex;align-items:center;gap:.55rem;animation:ctaGlow 3s ease-in-out 1s infinite;text-decoration:none}
.floating-cta:hover{filter:brightness(1.05);transform:translateX(-50%) translateY(-2px);color:#111}
/* #01/#02 hero animation embedded INSIDE the strip; never gates the page */
.hero-embed{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:0;pointer-events:none}
.hero.has-embed .hero-bg{opacity:0}
/* Ryan 08-26: the brass glow (built for the photo hero) sat over the animation
   and washed out its left side. Kill it only when the embed is live; the photo
   fallback keeps its ambience. */
.hero.has-embed::after{display:none}
/* Ryan round 2: the readability scrim itself was the occluder, near-opaque on
   the left (.97). Halved for the embed variant so the animation's words read;
   headline keeps contrast via text-shadow instead of a heavy scrim. */
.hero.has-embed::before{background:linear-gradient(105deg,rgba(15,15,15,.60) 0%,rgba(15,15,15,.44) 42%,rgba(15,15,15,.30) 78%,rgba(15,15,15,.22) 100%)}
.hero.has-embed h1,.hero.has-embed p,.hero.has-embed .trust-line{text-shadow:0 2px 14px rgba(0,0,0,.65),0 1px 3px rgba(0,0,0,.5)}
/* #08 footer tap targets to 44px on mobile */
@media(max-width:760px){
  .site-footer a{display:inline-flex;align-items:center;min-height:44px}
  .floating-cta{font-size:.9rem;padding:.72rem 1.25rem;bottom:14px}
  .header-login{padding:.5rem .82rem;font-size:.82rem}
  .header-right{gap:.5rem}
}

/* services dropdown + mobile-nav match the black header (Ryan 08-26 19:13 CT) */
.dropdown{background:#111111;border-color:#2a2a2a;box-shadow:0 12px 34px rgba(0,0,0,.45)}
.dropdown a{color:#f2efe6}
.dropdown a:hover{background:#1e1e1e;color:var(--gold)}
.mobile-nav{background:#111111;border-bottom-color:#2a2a2a}
.mobile-nav a{color:#f2efe6;border-bottom-color:#2a2a2a}
.mobile-nav a:hover{color:var(--gold)}

/* iteration-3 P2: Demos page — black band + book-a-live-demo button (#35), distinct colour */
.demo-band{background:#111111;color:#fff}
.demo-band-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.8rem 0;flex-wrap:wrap}
.demo-band-in h2{font-size:1.35rem;margin:0 0 .2rem;color:#fff}
.demo-band-in p{margin:0;color:#cfcabb;font-size:.98rem}
.btn-book-demo{background:#2e9bd6;color:#fff;font-family:var(--font-head);font-weight:700;padding:.9rem 1.7rem;border-radius:10px;white-space:nowrap;box-shadow:0 6px 20px rgba(46,155,214,.35);transition:filter .15s,transform .15s}
.btn-book-demo:hover{filter:brightness(1.07);transform:translateY(-1px);color:#fff}
@media(max-width:600px){.demo-band-in{flex-direction:column;align-items:flex-start}.btn-book-demo{width:100%;text-align:center;min-height:44px}}

/* iteration-3 addendum #24: social carousel + follow state (Media page) */
.social-carousel{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1rem}
.social-track{display:flex;gap:16px;padding-bottom:6px}
.social-card{flex:0 0 300px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(16,24,40,.05)}
.social-card .sc-img{height:180px;background-size:cover;background-position:center}
.social-card .sc-body{padding:1rem}
.social-card .sc-plat{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gold-dark);font-weight:700;margin-bottom:.4rem}
.social-card .sc-body p{font-size:.92rem;color:var(--ink);margin:0 0 .6rem}
.social-follow{text-align:center;padding:1.4rem 0}
.social-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(max-width:600px){.social-btns .btn{min-height:44px}}

/* iteration-3 #40: demo video tiles are PENDING until Craig sends the URLs (#38). Honest state,
   like the login placeholders — not interactive, clearly "coming soon". Removing .vid-pending +
   data-needs (once a real video URL is wired) makes the tile live again with no redesign. */
.vid-card.vid-pending{cursor:default;position:relative}
.vid-card.vid-pending:hover{transform:none;box-shadow:0 2px 10px rgba(16,24,40,.05)}
.vid-card.vid-pending .vid-thumb{opacity:.6;filter:grayscale(.35)}
.vid-card.vid-pending .play{opacity:.45}
.vid-card.vid-pending::after{content:"Video coming soon";position:absolute;top:10px;right:10px;background:rgba(17,17,17,.85);color:var(--highlight);font-family:var(--font-head);font-size:.68rem;font-weight:600;letter-spacing:.03em;padding:3px 9px;border-radius:20px;pointer-events:none}