/* ════════════════════════════════════════════════════════════════════════
   BENCHMARK — 2026 HOMEPAGE REVISION LAYER
   Loaded after styles.css. Implements Jivar's review-meeting changes:
   black nav, single logo teal (#19C19E), new hero, team strip, navy
   "Our Approach", second advantages section, carrier + association logo
   strips, prominent teal CTAs. See Benchmark_Website_Revision_Brief.html.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  --teal: #19C19E;
  --teal-dark: #0f8e74;
  --ink-navy: #15183b;
}

/* ───────── Global CTA system: teal "Quote Now" + outline consult ───────── */
.btn-quote{
  background: var(--teal); color:#06241d; font-weight:800;
  border:none; padding:15px 26px; border-radius:8px; font-size:15px;
  letter-spacing:.01em; box-shadow:0 8px 24px rgba(25,193,158,.30);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-quote:hover{ background:#15ad8d; transform:translateY(-2px); box-shadow:0 12px 30px rgba(25,193,158,.42); color:#06241d; }
.btn-quote span{ transition:transform .15s ease; display:inline-block; }
.btn-quote:hover span{ transform:translateX(4px); }
.btn-outline-light{
  background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55);
  padding:15px 26px; border-radius:8px; font-size:15px; font-weight:600;
  transition: border-color .15s ease, background .15s ease;
}
.btn-outline-light:hover{ border-color:#fff; background:rgba(255,255,255,.10); color:#fff; }
/* the existing "Get a Quote" / accent buttons → teal, readable */
.btn-accent{ background:var(--teal) !important; color:#06241d !important; font-weight:700; }
.btn-accent:hover{ background:#15ad8d !important; color:#06241d !important; }

/* ───────── Navigation: black bar + light logo + light links ───────── */
.nav-wrap{ background:#0b0b0d !important; border-bottom:1px solid rgba(255,255,255,.10) !important; }
.nav-wrap.scrolled{ background:#000 !important; box-shadow:0 6px 24px rgba(0,0,0,.35); }
.nav-links a{ color:rgba(255,255,255,.85) !important; }
.nav-links a:hover, .nav-links a:focus-visible{ color:#fff !important; background:rgba(255,255,255,.08) !important; }
.nav-links a.active{ color:#fff !important; }
.nav-login{ color:rgba(255,255,255,.82) !important; border-bottom-color:rgba(255,255,255,.4) !important; }
.nav-login:hover{ color:#fff !important; border-bottom-color:#fff !important; }
.menu-toggle{ color:#fff !important; }
.nav .btn-accent{ background:var(--teal) !important; color:#06241d !important; }
.nav .btn-accent:hover{ background:#15ad8d !important; }
/* dropdown caret follows the light link colour */
.nav-links a[data-dropdown]::after{ border-top-color: currentColor !important; }

/* ───────── HERO (new): business-owner gradient + floating stat chips ───────── */
.hero2{ position:relative; min-height:clamp(620px,92vh,900px); display:flex; align-items:center;
  background: linear-gradient(115deg,#0c1430 0%, #12224a 48%, #103f4e 100%); overflow:hidden; }
.hero2-bg{ position:absolute; inset:0; z-index:0; }
.hero2-bg img{ width:100%; height:100%; object-fit:cover; object-position:72% 30%; opacity:.92; }
/* gradient veil — heavier on the left so copy stays legible */
.hero2-bg::after{ content:""; position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(10,18,42,.97) 0%, rgba(11,22,52,.86) 38%, rgba(13,46,58,.55) 68%, rgba(16,70,82,.30) 100%); }
.hero2-inner{ position:relative; z-index:1; width:100%; }
.hero2-copy{ max-width:660px; color:#fff; padding:40px 0; }
.hero2-eyebrow{ display:inline-block; font-family:'Hanken Grotesk',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--teal); margin-bottom:18px; }
.hero2-h1{ font-family:'Hanken Grotesk',sans-serif; font-weight:800; font-size:clamp(40px,6.4vw,72px);
  line-height:1.02; letter-spacing:-.02em; margin:0 0 8px; }
.hero2-h1 em{ font-style:italic; color:var(--teal); font-family:'Fraunces',serif; font-weight:500; }
.hero2-tagline{ font-family:'Fraunces',serif; font-style:italic; font-size:clamp(19px,2.4vw,26px);
  color:var(--gold); margin:0 0 22px; }
.hero2-lede{ font-size:clamp(15px,1.4vw,17px); line-height:1.6; color:rgba(255,255,255,.82); max-width:560px; margin:0 0 28px; }
.hero2-stats{ display:flex; flex-wrap:wrap; gap:12px; margin:0 0 30px; }
.hero2-stat{ background:rgba(255,255,255,.07); border:1px solid rgba(25,193,158,.38);
  border-radius:11px; padding:12px 16px; min-width:132px; backdrop-filter:blur(4px); }
.hero2-stat .v{ display:block; font-family:'Hanken Grotesk',sans-serif; font-weight:800;
  font-size:23px; color:var(--teal); line-height:1.05; }
.hero2-stat .l{ display:block; font-size:11.5px; color:rgba(255,255,255,.72); margin-top:3px; letter-spacing:.01em; }
.hero2-cta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
@media (max-width:860px){
  .hero2-bg img{ object-position:70% 24%; opacity:.5; }
  .hero2-bg::after{ background:linear-gradient(120deg, rgba(10,18,42,.96), rgba(13,46,58,.72)); }
  .hero2-stat{ min-width:calc(50% - 6px); flex:1 1 calc(50% - 6px); }
}

/* ───────── TEAM STRIP (homepage, right after hero) ───────── */
.team-strip{ background:var(--surface); padding:clamp(54px,7vw,88px) 0; border-bottom:1px solid var(--line); }
.team-strip-head{ text-align:center; max-width:640px; margin:0 auto 40px; }
.team-strip-head .eyebrow{ display:inline-block; margin-bottom:12px; }
.team-strip-head h2{ font-family:'Hanken Grotesk',sans-serif; font-weight:800; font-size:clamp(28px,3.4vw,40px);
  letter-spacing:-.02em; color:var(--ink); margin:0 0 10px; }
.team-strip-head p{ color:var(--muted); font-size:15.5px; margin:0; }
.team-grid{ display:flex; justify-content:center; flex-wrap:wrap; gap:28px; }
.team-card{ display:block; width:300px; background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:26px 24px; text-align:center; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.team-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(13,22,64,.12); border-color:rgba(25,193,158,.4); }
.team-card-photo{ width:104px; height:104px; border-radius:50%; object-fit:cover; margin:0 auto 16px;
  border:3px solid var(--teal); background:var(--bg-alt); }
.team-card-photo.placeholder{ display:flex; align-items:center; justify-content:center; font-family:'Hanken Grotesk',sans-serif;
  font-weight:800; font-size:34px; color:#fff; background:linear-gradient(135deg,#15183b,#19C19E); border-color:var(--teal); }
.team-card h3{ font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:19px; color:var(--ink); margin:0 0 2px; }
.team-card .role{ font-size:13px; color:var(--teal-dark); font-weight:600; letter-spacing:.02em; margin-bottom:12px; }
.team-card p{ font-size:13.5px; line-height:1.55; color:var(--muted); margin:0 0 16px; }
.team-card-links{ display:flex; justify-content:center; gap:14px; }
.team-card-links a{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  color:var(--accent-dark); text-decoration:none; }
.team-card-links a:hover{ color:var(--teal); }
.team-card-links svg{ width:15px; height:15px; }

/* ───────── OUR APPROACH → navy band so the teal reads ───────── */
.process3-section{ background:var(--ink-navy) !important; border-top:none !important; border-bottom:none !important; }
.process3-head .eyebrow{ color:var(--teal) !important; }
.process3-head h2{ color:#fff !important; }
.process3-cell{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
  border-radius:14px; padding:30px 26px; transition:border-color .18s ease, transform .18s ease; }
.process3-cell:hover{ border-color:rgba(25,193,158,.5); transform:translateY(-3px); }
.process3-num{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius:11px; background:rgba(25,193,158,.14); color:var(--teal) !important; font-weight:800;
  font-size:13px; letter-spacing:.04em; margin-bottom:18px; border:1px solid rgba(25,193,158,.4); }
.process3-cell h3{ color:#fff !important; }
.process3-cell p{ color:rgba(255,255,255,.72) !important; }
.process3-cta .btn-ghost{ color:#fff !important; border-color:rgba(255,255,255,.4) !important; }
.process3-cta .btn-ghost:hover{ border-color:#fff !important; background:rgba(255,255,255,.08) !important; }

/* ───────── WHY BENCHMARK — second advantages section ───────── */
.whybm-section{ padding:clamp(72px,9vw,112px) 0; background:var(--surface); }
.whybm-head{ text-align:center; max-width:720px; margin:0 auto 52px; }
.whybm-head .eyebrow{ display:inline-block; margin-bottom:14px; }
.whybm-head h2{ font-family:'Hanken Grotesk',sans-serif; font-weight:800; font-size:clamp(30px,3.6vw,46px);
  letter-spacing:-.02em; color:var(--ink); margin:0 0 12px; }
.whybm-head p{ color:var(--muted); font-size:16px; margin:0; }
.whybm-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.whybm-card{ background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:30px 26px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.whybm-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(13,22,64,.10); border-color:rgba(25,193,158,.4); }
.whybm-icon{ width:50px; height:50px; border-radius:13px; background:var(--accent-soft); color:var(--teal-dark);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.whybm-icon svg{ width:26px; height:26px; }
.whybm-card h3{ font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:18px; color:var(--ink); margin:0 0 10px; }
.whybm-card p{ font-size:14px; line-height:1.58; color:var(--muted); margin:0; }
@media (max-width:1000px){ .whybm-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .whybm-grid{ grid-template-columns:1fr; } }

/* ───────── LOGO WALL — framed carrier + association grid ───────── */
.logostrip-section{ padding:clamp(46px,6vw,70px) 0; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
.logostrip-section.alt{ background:var(--bg-alt); }
.logostrip-head{ text-align:center; margin-bottom:34px; }
.logostrip-head .label-caps{ display:block; margin-bottom:10px; color:var(--teal-dark); font-weight:700;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.logostrip-head h2{ font-family:'Hanken Grotesk',sans-serif; font-weight:800; font-size:clamp(24px,2.8vw,34px);
  letter-spacing:-.02em; color:var(--ink); margin:0 0 8px; }
.logostrip-head p{ font-size:14.5px; color:var(--muted); margin:0; }
/* framed hairline grid — the 1px gap renders as hairlines over the panel background */
.logowall{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:0 18px 44px -28px rgba(13,22,64,.22); }
.logowall-cell{ background:var(--surface); display:flex; align-items:center; justify-content:center;
  min-height:128px; padding:26px 22px; transition:background .2s ease; }
.logostrip-section.alt .logowall-cell{ background:#fff; }
.logowall-cell:hover{ background:var(--bg-alt); }
.logowall-cell img{ max-height:40px; max-width:84%; width:auto; object-fit:contain;
  filter:grayscale(100%); opacity:.66; transition:filter .25s ease, opacity .25s ease; }
.logowall-cell:hover img{ filter:none; opacity:1; }
.logowall.assoc .logowall-cell img{ max-height:60px; }
.logowall-cell--stat{ flex-direction:column; gap:4px; }
.logowall-cell--stat .s-v{ font-family:'Hanken Grotesk',sans-serif; font-weight:800; font-size:28px; letter-spacing:-.02em; color:var(--teal-dark); line-height:1; }
.logowall-cell--stat .s-l{ font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:center; }
@media (max-width:900px){ .logowall{ grid-template-columns:repeat(3,1fr); } .logowall-cell{ min-height:112px; } }
@media (max-width:560px){ .logowall{ grid-template-columns:repeat(2,1fr); } }

/* ───────── FAMILY OF COMPANIES (About page) ───────── */
.family-section{ padding:clamp(60px,8vw,96px) 0; background:var(--bg-alt); border-top:1px solid var(--line); }
.family-head{ text-align:center; max-width:680px; margin:0 auto 44px; }
.family-head .eyebrow{ display:inline-block; margin-bottom:12px; }
.family-head h2{ font-family:'Hanken Grotesk',sans-serif; font-weight:800; font-size:clamp(28px,3.4vw,42px); letter-spacing:-.02em; color:var(--ink); margin:0 0 10px; }
.family-head p{ color:var(--muted); font-size:15.5px; margin:0; }
.family-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px; }
.family-card{ width:230px; background:var(--surface); border:1px solid var(--line); border-radius:14px;
  height:130px; display:flex; align-items:center; justify-content:center; padding:24px; transition:transform .18s ease, box-shadow .18s ease; }
.family-card:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(13,22,64,.10); }
.family-card img{ max-width:170px; max-height:74px; width:auto; height:auto; object-fit:contain; }
.partners-row{ margin-top:40px; }
.partners-row .label-caps{ text-align:center; display:block; color:var(--muted); margin-bottom:22px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }

/* Teal TEXT on light backgrounds → deeper teal (#0f8e74) for legibility; still
   clearly teal. Buttons, fills, dark-section text, and the logo keep vibrant #19C19E
   (where the "pop" lives). */
.eyebrow, .hero-j-eyebrow, .mega-eyebrow,
.btn-link, .contact-card a, .we-serve dd span, .breadcrumb a,
.hero-j h1 em{ color: var(--accent-dark) !important; }
/* keep eyebrows bright on dark bands */
.process3-head .eyebrow{ color: var(--teal) !important; }

/* small helper */
.section-anchor-pad{ scroll-margin-top:90px; }

/* ════════════════════════════════════════════════════════════════════════
   NEWFRONT-STYLE INTERACTION LAYER — ported mechanics, Benchmark brand
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --ease-out-cubic: cubic-bezier(0.215,0.61,0.355,1);
  --ease-out-quad:  cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-in-out-cubic: cubic-bezier(0.645,0.045,0.355,1);
  --ease-out-expo:  cubic-bezier(0.19,1,0.22,1);
}

/* ── Scroll reveal: fade-in + slide-up (Newfront fadeInSlideUp) ── */
/* hiding is gated behind .js so content always shows if JS is unavailable */
.js [data-reveal]:not([data-reveal-stagger]){
  opacity:0; transform: translateY(30px);
  transition: opacity .75s var(--ease-out-quad), transform .75s var(--ease-out-quad);
  will-change: opacity, transform;
}
/* Reveal rules need higher specificity than the .js hide rules above
   (which are 0,3,0). Without the .js prefix + !important the content stays
   stuck at opacity:0 even after .is-in is added. */
.js [data-reveal].is-in{ opacity:1 !important; transform:none !important; }
.js [data-reveal-stagger] > *{
  opacity:0; transform: translateY(26px);
  transition: opacity .7s var(--ease-out-quad), transform .7s var(--ease-out-quad);
  transition-delay: calc(var(--reveal-i, 0) * 85ms);
  will-change: opacity, transform;
}
.js [data-reveal-stagger].is-in > *{ opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion: reduce){
  [data-reveal], [data-reveal] *, [data-reveal-stagger] > *{ opacity:1 !important; transform:none !important; }
}

/* ── Smart header: hide on scroll-down / show on scroll-up (transform-based) ── */
.nav-wrap{ transition: transform .26s var(--ease-out-cubic); }
.nav-wrap.nav-hidden{ transform: translateY(-115%) !important; }

/* ── Two-pane mega-menu (Newfront MenuGroupPopup) ── */
.megapanel{
  position:absolute; top:100%; left:0; right:0; z-index:60;
  background:#0b0b0d; border-top:1px solid rgba(255,255,255,.08);
  border-radius:0 0 16px 16px; overflow:hidden;
  max-height:0; opacity:0; pointer-events:none;
  transition: max-height .5s var(--ease-in-out-cubic), opacity .3s linear;
  box-shadow:0 36px 70px rgba(0,0,0,.5);
}
.megapanel.is-open{ max-height:480px; opacity:1; pointer-events:auto; }
.megapanel-inner{ display:grid; grid-template-columns:300px 1fr; gap:40px; padding:30px 0 38px; }
.megapanel-rail{ border-right:1px solid rgba(255,255,255,.10); padding-right:32px; }
.megapanel-eyebrow{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); font-weight:700; margin-bottom:9px; }
.megapanel-desc{ font-size:13.5px; color:rgba(255,255,255,.58); margin:0 0 18px; line-height:1.5; }
.megapanel-tabs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.megapanel-tab{ display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font-family:'Hanken Grotesk',sans-serif; font-size:15px; font-weight:600; color:rgba(255,255,255,.7);
  padding:11px 14px 11px 20px; border-radius:8px; transition:background .2s, color .2s; position:relative; }
.megapanel-tab:hover{ color:#fff; background:rgba(255,255,255,.05); }
.megapanel-tab.is-active{ color:#fff; background:rgba(25,193,158,.12); }
.megapanel-tab.is-active::before{ content:""; position:absolute; left:6px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--teal); }
.megapanel-panels{ position:relative; min-height:230px; }
.megapanel-panel{ display:none; }
.megapanel-panel.is-active{ display:grid; grid-template-columns:1fr 1fr; gap:4px 24px; align-content:start;
  animation: megaPanelReveal .34s var(--ease-out-quad) both; }
@keyframes megaPanelReveal{ from{ opacity:.001; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.megapanel-item{ display:flex; flex-direction:column; gap:3px; padding:10px 14px; border-radius:10px; text-decoration:none;
  border-left:2px solid transparent; transition:background .2s, border-color .2s; }
.megapanel-item:hover{ background:rgba(255,255,255,.05); border-left-color:var(--teal); }
.megapanel-item .mi-title{ color:#fff; font-weight:600; font-size:14.5px; line-height:1.25; }
.megapanel-item .mi-sub{ color:rgba(255,255,255,.52); font-size:12.5px; }
.megapanel-foot{ grid-column:1 / -1; margin-top:8px; padding:12px 14px 0; border-top:1px solid rgba(255,255,255,.08); }
.megapanel-foot a{ color:var(--teal); font-weight:600; font-size:13.5px; text-decoration:none; }
.megapanel-foot a:hover{ color:#fff; }
.nav-links a[data-mega-tab]{ position:relative; }
@media (max-width:1080px){ .megapanel{ display:none; } }

/* ── Card / button hover micro-interactions (Newfront-subtle) ── */
.btn-quote, .btn-accent, .btn-outline-light{ transition: transform .18s var(--ease-out-quad), box-shadow .18s var(--ease-out-quad), background .18s var(--ease-out-quad); }
.explore-card{ transition: transform .3s var(--ease-out-quad), box-shadow .3s var(--ease-out-quad); }
.explore-card:hover{ transform: translateY(-6px); }

/* ════════════════════════════════════════════════════════════════════════
   HERO — "Built for Growth" cinematic hero (floating KPI chips + metric row)
   ════════════════════════════════════════════════════════════════════════ */
.herox{ position:relative; min-height:clamp(640px,92vh,900px); display:flex; align-items:center; overflow:hidden; background:#0a1020; isolation:isolate; }
.herox-bg{ position:absolute; inset:0; z-index:0; }
.herox-bg img{ width:100%; height:100%; object-fit:cover; object-position:64% center; }
.herox-bg::after{ content:""; position:absolute; inset:0;
  background:
    linear-gradient(96deg, rgba(8,14,28,.96) 0%, rgba(10,18,38,.88) 32%, rgba(10,30,42,.55) 64%, rgba(12,48,58,.30) 100%),
    linear-gradient(0deg, rgba(8,14,28,.88) 0%, rgba(8,14,28,0) 42%); }
.herox-inner{ position:relative; z-index:1; width:100%; padding:64px 0 72px; }
.herox-copy{ max-width:560px; color:#fff; }
.herox-eyebrow{ display:inline-block; font-family:'Hanken Grotesk',sans-serif; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); margin-bottom:18px; }
.herox-h1{ font-family:'Hanken Grotesk',sans-serif; font-weight:800; font-size:clamp(46px,7.2vw,88px); line-height:.96; letter-spacing:-.025em; margin:0 0 20px; }
.herox-h1 em{ font-style:normal; color:var(--teal); display:block; }
.herox-tagline{ font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:clamp(18px,2vw,25px); color:#fff; margin:0 0 18px; }
.herox-lede{ font-size:clamp(15px,1.4vw,17px); line-height:1.6; color:rgba(255,255,255,.78); max-width:440px; margin:0 0 30px; }
/* metric strip carries the 4 data points on tablet/mobile (where the floating chips are hidden) */
.herox-metrics{ display:none; gap:clamp(20px,2.6vw,40px); flex-wrap:wrap; margin:0 0 30px; }
.herox-metric{ display:flex; flex-direction:column; gap:7px; align-items:flex-start; }
.herox-metric .mi{ width:26px; height:26px; color:var(--teal); display:flex; align-items:center; }
.herox-metric .mi svg{ width:24px; height:24px; }
.herox-metric .mtxt{ display:flex; flex-direction:column; gap:1px; line-height:1.2; }
.herox-metric .ml{ font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.58); max-width:96px; }
.herox-metric .mv{ font-family:'Hanken Grotesk',sans-serif; font-weight:800; font-size:20px; color:var(--teal); }
.herox-cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
/* floating KPI chips */
.herox-chips{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.herox-chip{ position:absolute; display:flex; gap:11px; align-items:flex-start; padding:13px 17px; width:max-content; max-width:220px;
  background:rgba(11,21,38,.6); border:1px solid rgba(25,193,158,.32); border-radius:13px; -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  box-shadow:0 16px 38px rgba(0,0,0,.4); animation:chipFloat 6.5s var(--ease-in-out-cubic) infinite; }
.herox-chip .ci{ width:32px; height:32px; border-radius:8px; background:rgba(25,193,158,.16); color:var(--teal); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.herox-chip .ci svg{ width:17px; height:17px; }
.herox-chip .cx{ display:flex; flex-direction:column; line-height:1.2; }
.herox-chip .cl{ font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.herox-chip .cv{ font-family:'Hanken Grotesk',sans-serif; font-weight:800; font-size:22px; color:#fff; }
.herox-chip .cs{ font-size:10px; color:var(--teal); font-weight:600; }
.herox-chip::before{ content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 5px rgba(25,193,158,.16); }
.herox-chip--1{ top:15%; right:36%; animation-delay:0s; }       .herox-chip--1::before{ bottom:-18px; left:26px; }
.herox-chip--2{ top:12%; right:5%; animation-delay:-1.6s; }     .herox-chip--2::before{ bottom:-18px; left:26px; }
.herox-chip--3{ top:55%; right:4%; animation-delay:-3.2s; }     .herox-chip--3::before{ top:46%; left:-18px; }
.herox-chip--4{ top:64%; right:31%; animation-delay:-4.8s; }    .herox-chip--4::before{ top:-18px; left:26px; }
@keyframes chipFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@media (prefers-reduced-motion: reduce){ .herox-chip{ animation:none; } }
.herox-loc{ position:absolute; left:0; bottom:8px; z-index:2; display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.herox-loc svg{ width:16px; height:16px; color:var(--teal); }
@media (max-width:1024px){
  .herox-chips{ display:none; }
  .herox-metrics{ display:flex; }
  .herox-bg::after{ background: linear-gradient(120deg, rgba(8,14,28,.95) 0%, rgba(12,46,56,.7) 100%), linear-gradient(0deg, rgba(8,14,28,.85), rgba(8,14,28,0) 50%); }
}
@media (max-width:560px){ .herox-metrics{ gap:18px 22px; } .herox-metric .mv{ font-size:18px; } }

/* ════════════════════════════════════════════════════════════════════════
   FLOATING ROUNDED NAV BAR  (Newfront-style shell, Benchmark colors)
   ════════════════════════════════════════════════════════════════════════ */
.nav-wrap{ background: transparent !important; border-bottom: none !important; padding: 15px 22px 0; }
.nav-wrap.scrolled{ background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* nav is always visible — the reveal-on-load animation was fragile and could leave it hidden */
.nav-wrap, .nav-wrap.nav-loaded{ animation: none !important; opacity: 1 !important; }
.nav-wrap:not(.nav-hidden){ transform: none !important; }
.nav-wrap .nav-row{
  max-width: 1440px; margin: 0 auto;
  height: 64px; padding: 0 16px 0 26px; gap: 18px;
  background: #ffffff;
  border: 1px solid rgba(13,17,24,0.10);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(13,17,24,0.13);
}
.nav-wrap nav[aria-label="Primary"]{ margin: 0 auto; }
/* full-color logo on the white bar (cancel the dark-nav knockout) */
.nav-wrap .brand-logo{ height: 26px; filter: none !important; }
/* links: title-case, dark, caret on dropdown items */
.nav-wrap .nav-links{ gap: 3px; }
.nav-wrap .nav-links a{
  font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--navy);
  padding: 9px 13px; border-radius: 9px;
  display: inline-flex; align-items: center;
}
.nav-wrap .nav-links a:hover{ color: var(--navy); background: rgba(13,17,24,0.05); }
.nav-wrap .nav-links a[aria-haspopup="true"]::after{
  content:""; width:6px; height:6px; margin-left:7px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-1px); opacity:.55;
  transition: transform .25s var(--ease-out-cubic), opacity .25s linear;
}
.nav-wrap .nav-links a[aria-haspopup="true"]:hover::after{ opacity:.85; }
.nav-wrap .nav-links a[aria-expanded="true"]{ color: var(--navy); background: rgba(13,17,24,0.05); border-bottom:none; padding-bottom:9px; border-radius:9px; }
.nav-wrap .nav-links a[aria-expanded="true"]::after{ transform: rotate(-135deg) translateY(2px); opacity:1; }
.nav-wrap .nav-links a.active{ color: var(--navy); border-bottom:none; }
/* right side: login + pill CTA */
.nav-wrap .nav-cta{ gap: 16px; }
.nav-wrap .nav-login{ font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--navy); }
.nav-wrap .nav-login:hover{ color: #0f8e74; }
.nav-wrap .btn.btn-accent{ font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 11px 20px; border-radius: 11px; }
/* mobile menu toggle: dark on the white bar */
.nav-wrap .menu-toggle{ color: var(--navy) !important; border-color: rgba(13,17,24,0.18) !important; background: transparent !important; }
/* the toggle icon strokes with currentColor, but the layered dark-nav -> white-nav
   overrides leave the stroke resolved to white (invisible on the white bar).
   Pin it to navy so the hamburger is always visible. */
.nav-wrap .menu-toggle svg{ stroke: var(--navy) !important; }
.nav-wrap .menu-toggle:hover{ background: rgba(13,17,24,0.05) !important; }
/* mega-menu: light panel below the white bar */
.megapanel{ top: calc(100% + 10px); border-radius: 16px; background:#ffffff !important; border:1px solid rgba(13,17,24,0.08) !important; box-shadow:0 30px 60px rgba(13,17,24,0.16) !important; }
.megapanel-rail{ border-right-color: rgba(13,17,24,0.10) !important; }
.megapanel-eyebrow{ color:#0f8e74 !important; }
.megapanel-desc{ color: rgba(13,17,24,0.55) !important; }
.megapanel-tab{ color: var(--navy) !important; }
.megapanel-tab:hover{ background: rgba(13,17,24,0.05) !important; color: var(--navy) !important; }
.megapanel-tab.is-active{ background: rgba(25,193,158,0.14) !important; color: var(--navy) !important; }
.megapanel-item:hover{ background: rgba(13,17,24,0.04) !important; }
.megapanel-item .mi-title{ color: var(--navy) !important; }
.megapanel-item .mi-sub{ color: rgba(13,17,24,0.52) !important; }
.megapanel-foot{ border-top-color: rgba(13,17,24,0.10) !important; }
.megapanel-foot a{ color:#0f8e74 !important; }
.megapanel-foot a:hover{ color: var(--navy) !important; }
/* homepage: dark hero fills behind the floating bar (no light strip above it) */
.herox{ margin-top: -90px; padding-top: 90px; }
@media (max-width:1080px){
  .nav-wrap{ padding: 12px 14px 0; }
  .nav-wrap .nav-row{ height: 58px; border-radius: 14px; padding: 0 12px 0 18px; }
  .herox{ margin-top: -73px; padding-top: 73px; }
}

/* ════════════════════════════════════════════════════════════════════════
   NAV REFINEMENT (2026-06-24): slightly larger pill, roomier internal spacing,
   and the dark hero now fills BEHIND the floating bar on stitch-hero pages
   (was floating on a light #f9f9fc strip). Desktop bar height = 18+72 = 90px,
   so .herox / .stitch-hero pull up 90 to sit under it.
   ════════════════════════════════════════════════════════════════════════ */
.nav-wrap{ padding: 18px 24px 0 !important; }
.nav-wrap .nav-row{ height: 72px !important; padding: 0 22px 0 26px !important; gap: 26px !important; border-radius: 18px !important; box-shadow: 0 14px 36px rgba(13,17,24,0.14) !important; }
.nav-wrap .brand-logo{ height: 30px !important; }
.nav-wrap .nav-links{ gap: 7px !important; }
.nav-wrap .nav-links a{ font-size: 14.5px !important; padding: 10px 15px !important; }
.nav-wrap .nav-cta{ gap: 18px !important; }
.nav-wrap .btn.btn-accent{ padding: 12px 22px !important; }
/* stitch-hero + hero-j pages: pull the dark hero up behind the floating bar (kills the light strip).
   (styles-polish.css §12 made .hero-j dark navy but never added this pull-up — that's the leftover white.) */
.stitch-hero{ margin-top: -90px; }
.hero-j{ margin-top: -90px !important; padding-top: clamp(124px, 13vw, 150px) !important; }
@media (max-width:1080px){
  .nav-wrap{ padding: 13px 16px 0 !important; }
  .nav-wrap .nav-row{ height: 62px !important; border-radius: 15px !important; padding: 0 14px 0 18px !important; gap: 14px !important; }
  .nav-wrap .brand-logo{ height: 27px !important; }
  .stitch-hero{ margin-top: -75px; }
  .hero-j{ margin-top: -75px !important; padding-top: 112px !important; }
}
/* force light nav text over the dark-nav base rules (styles.css set white) */
.nav-wrap .nav-links a,
.nav-wrap .nav-links a.active,
.nav-wrap .nav-links a[aria-expanded="true"]{ color: var(--navy) !important; }
.nav-wrap .nav-links a:hover{ color: var(--navy) !important; background: rgba(13,17,24,0.05) !important; }
.nav-wrap .nav-login{ color: var(--navy) !important; }
.nav-wrap .nav-login:hover{ color: #0f8e74 !important; border-bottom-color: #0f8e74 !important; }

/* ════════════════════════════════════════════════════════════════════════
   NATIVE SMOOTH SCROLLING (Lenis removed — it caused lag)
   Wheel/trackpad = native; section & anchor links glide smoothly, offset for
   the sticky nav so targets don't hide under the bar.
   ════════════════════════════════════════════════════════════════════════ */
/* Wheel/keyboard/scrollbar scrolling stays NATIVE (snappy, not "too smooth").
   Only clicked in-page section links glide smoothly — handled in scripts.js via
   scrollIntoView({behavior:'smooth'}). scroll-padding-top offsets the sticky nav. */
html{ scroll-padding-top: 96px; scroll-behavior: auto !important; }
/* CRITICAL: overflow-x:hidden on html/body creates a scroll container that breaks
   the sticky nav (it scrolls away instead of sticking). `clip` clips horizontal
   overflow WITHOUT creating a scroll container, so position:sticky keeps working. */
html, body{ overflow-x: clip !important; overflow-y: visible !important; }
@media (max-width:1080px){ html{ scroll-padding-top: 84px; } }

/* ════════════════════════════════════════════════════════════════════════
   OUR APPROACH — interactive, auto-advancing process flow
   Icon nodes on an animated teal rail (replaces the static Step 01/02/03 text
   cards). Click / hover / arrow-keys to focus a step; auto-cycles on scroll-in.
   ════════════════════════════════════════════════════════════════════════ */
.approach-flow{ position:relative; margin:0 0 46px; }
.approach-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
/* connecting rail — desktop: horizontal, threaded through the node centers.
   Each node sits (step padding-left 24px + half node 27px) = 51px from its
   card's left edge; columns are (100% - 2*22px gap)/3 wide. So the rail runs
   from the first node's center to the last node's center. */
.approach-rail{ position:absolute; top:51px; left:51px; right:calc((100% - 44px)/3 - 51px); height:2px; }
.approach-rail-track{ position:absolute; inset:0; background:rgba(255,255,255,.13); border-radius:2px; }
.approach-rail-fill{ position:absolute; left:0; top:0; height:100%; width:var(--approach-fill,0%);
  background:linear-gradient(90deg,var(--teal),#46e3c4); border-radius:2px; box-shadow:0 0 12px rgba(25,193,158,.55);
  transition:width .7s cubic-bezier(.4,0,.2,1); }
.approach-step{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.10); border-radius:16px;
  padding:24px 24px 26px; cursor:pointer; overflow:hidden; text-align:left;
  transition:border-color .25s ease, background .25s ease, transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease; }
.approach-node{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:50%; padding:0; cursor:pointer; color:var(--teal);
  background:rgba(25,193,158,.12); border:1.5px solid rgba(25,193,158,.42);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .25s ease, color .25s ease, box-shadow .3s ease; }
.approach-node svg{ width:24px; height:24px; display:block; }
.approach-step h3{ font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:19.5px;
  letter-spacing:-.015em; color:#fff; margin:0; line-height:1.24; }
.approach-step p{ font-size:14.5px; line-height:1.56; color:rgba(255,255,255,.66); margin:0; transition:color .25s ease; }
/* active step */
.approach-step.is-active{ background:rgba(25,193,158,.10); border-color:rgba(25,193,158,.55);
  box-shadow:0 20px 46px -26px rgba(25,193,158,.6); }
.approach-step.is-active .approach-node{ background:var(--teal); color:var(--ink-navy); border-color:var(--teal);
  transform:scale(1.08); box-shadow:0 0 0 6px rgba(25,193,158,.16), 0 10px 22px -6px rgba(25,193,158,.6); }
.approach-step.is-active p{ color:rgba(255,255,255,.86); }
.approach-step:hover{ border-color:rgba(25,193,158,.4); }
.approach-node:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
/* auto-advance timer bar along the bottom of the active card */
.approach-step-timer{ position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--teal); opacity:0; }
.approach-flow.is-playing .approach-step.is-active .approach-step-timer{ opacity:.9; animation:approachTimer 3800ms linear forwards; }
@keyframes approachTimer{ from{ width:0; } to{ width:100%; } }
/* Cards are ALWAYS visible. The entrance is an opacity-only enhancement that runs
   only when JS adds .is-revealed — it can NEVER leave the section blank if the
   reveal does not fire (the previous version defaulted cards to opacity:0). */
.approach-flow .approach-step{ opacity:1; }
.js .approach-flow.is-revealed .approach-step{ animation:approachStepIn .55s ease both; }
.js .approach-flow.is-revealed .approach-step:nth-child(2){ animation-delay:.10s; }
.js .approach-flow.is-revealed .approach-step:nth-child(3){ animation-delay:.20s; }
@keyframes approachStepIn{ from{ opacity:0; } to{ opacity:1; } }
.approach-flow .approach-step.is-active{ transform:translateY(-4px); }
@media (prefers-reduced-motion:reduce){ .js .approach-flow.is-revealed .approach-step{ animation:none; } }
/* reduced-motion / no-JS static state: all steps visible, rail complete */
.approach-flow.is-static .approach-step{ opacity:1 !important; transform:none !important; }
.approach-flow.is-static .approach-step-timer{ display:none; }
/* mobile: vertical rail + stacked rows */
@media (max-width:900px){
  .approach-steps{ grid-template-columns:1fr; gap:4px; padding-left:6px; }
  .approach-rail{ top:20px; bottom:32px; left:33px; right:auto; width:2px; height:auto; }
  .approach-rail-fill{ width:100%; height:var(--approach-fill,0%); top:0; left:0;
    transition:height .7s cubic-bezier(.4,0,.2,1); }
  .approach-step{ flex-direction:row; align-items:flex-start; gap:16px; background:transparent !important;
    border:none !important; box-shadow:none !important; transform:none !important; padding:14px 0 22px; }
  .approach-step.is-active{ transform:none !important; box-shadow:none !important; }
  .approach-step-body{ padding-top:4px; }
  .approach-step-timer{ display:none; }
}

/* ───────── Industry coverage bento tiles → real photo backgrounds ─────────
   The base `.bento-tile img` blends the photo into the color gradient (opacity .6 /
   mix-blend overlay) as a faint texture. Override so the photo is the REAL background
   with a dark scrim for white-text legibility — replaces the flat color gradients
   with images (client request, 2026-06-24). Layout/grid is unchanged. */
.specialty-bento .bento-tile .bento-tile-bg{ mix-blend-mode:normal !important; opacity:1 !important; }
.specialty-bento .bento-tile::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(165deg, rgba(11,17,40,.42) 0%, rgba(11,17,40,.60) 45%, rgba(11,17,40,.88) 100%); }
.specialty-bento .bento-tile-title, .specialty-bento .bento-tile-label{ color:#fff !important; }
.specialty-bento .bento-tile-arrow{ background:rgba(255,255,255,.18) !important; color:#fff !important; }

/* styles.css defines bento spans 3–7 only — the industry specialty tile uses
   bento-span-8, so without this it collapses to 1 column (a narrow clipped sliver).
   Define it (12-col grid → span-8 specialty + span-4 = a full row), and collapse
   it to 1 col on the ≤980px 2-col / ≤560px 1-col layouts like the other spans. */
.specialty-bento .bento-span-8{ grid-column: span 8; }
@media (max-width:980px){ .specialty-bento .bento-span-8{ grid-column: span 1; } }

/* ════ 2026-06-26 - Home section recolor (Jivar): Our Approach -> light; Industries + The Benchmark Difference -> navy. Scoped via .sec-light/.sec-navy so the shared section classes on other pages are unaffected. ════ */
.process3-section.sec-light{ background:#f9f9fc !important; }
.process3-section.sec-light .process3-head h2{ color:var(--ink) !important; }
.process3-section.sec-light .process3-head .eyebrow{ color:var(--accent-dark) !important; }
.process3-section.sec-light .approach-rail-track{ background:rgba(13,17,24,.12) !important; }
.process3-section.sec-light .approach-step{ border-color:rgba(13,17,24,.12) !important; }
.process3-section.sec-light .approach-step h3{ color:var(--ink) !important; }
.process3-section.sec-light .approach-step p{ color:var(--muted) !important; }
.process3-section.sec-light .approach-step.is-active{ background:rgba(25,193,158,.08) !important; border-color:rgba(25,193,158,.5) !important; }
.process3-section.sec-light .approach-step.is-active p{ color:var(--ink-2) !important; }

.explore-section.sec-navy{ background:var(--navy) !important; }

.approach-section.sec-navy{ background:var(--navy) !important; }
.approach-section.sec-navy .eyebrow{ color:var(--accent) !important; }
.approach-section.sec-navy .approach-h2{ color:#ffffff !important; }
.approach-section.sec-navy .approach-lede{ color:rgba(255,255,255,.78) !important; }
.bd-cta{ text-align:center; margin-top:36px; }
.bd-cta .btn-ghost{ color:#fff !important; border-color:rgba(255,255,255,.42) !important; }
.bd-cta .btn-ghost:hover{ border-color:#fff !important; background:rgba(255,255,255,.08) !important; }

/* ════ 2026-06-26 — Blog article layout (resources/blog/*) ════ */
.blog-post{ padding: clamp(40px,7vw,88px) 0 clamp(60px,9vw,110px); background:#fff; }
.blog-post-inner{ max-width: 760px; }
.blog-post .breadcrumb{ font-size:13px; color:var(--muted); margin-bottom:26px; }
.blog-post .breadcrumb a{ color:var(--accent-dark); text-decoration:none; }
.blog-eyebrow{ font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-dark); margin:0 0 14px; }
.blog-post h1{ font-family:'Hanken Grotesk',sans-serif; font-weight:800; font-size:clamp(30px,4.6vw,46px); line-height:1.12; letter-spacing:-.022em; color:var(--ink); margin:0 0 16px; }
.blog-meta{ font-size:14px; color:var(--muted); margin:0 0 30px; }
.blog-hero{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:14px; display:block; margin:0 0 40px; box-shadow:0 24px 60px rgba(13,17,24,.12); }
.blog-body{ font-family:'Inter',sans-serif; font-size:17.5px; line-height:1.72; color:var(--ink-2); }
.blog-body h2{ font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:clamp(22px,3vw,30px); line-height:1.2; letter-spacing:-.015em; color:var(--ink); margin:46px 0 14px; }
.blog-body p{ margin:0 0 20px; }
.blog-body ul,.blog-body ol{ margin:0 0 22px; padding-left:22px; }
.blog-body li{ margin:0 0 9px; }
.blog-body a{ color:var(--accent-dark); text-decoration:underline; text-underline-offset:2px; }
.blog-body strong{ color:var(--ink); }
.blog-cta{ margin-top:54px; padding:38px 32px; background:var(--navy); border-radius:16px; text-align:center; }
.blog-cta h3{ font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:24px; color:#fff; margin:0 0 8px; }
.blog-cta p{ color:rgba(255,255,255,.78); margin:0 0 22px; font-size:15.5px; }
.blog-cta .btn-ghost{ color:#fff !important; border-color:rgba(255,255,255,.42) !important; }
.blog-cta .btn-ghost:hover{ border-color:#fff !important; background:rgba(255,255,255,.08) !important; }

/* Blog index: 4 real articles in a clean 2-col grid (overrides 3-col highlights-grid) */
.blog-grid{ grid-template-columns: repeat(2,1fr) !important; max-width: 900px; margin-inline:auto; }
@media (max-width:600px){ .blog-grid{ grid-template-columns: 1fr !important; } }