/* =========================================================
   talentedPros — site stylesheet
   Follows the genani.com standards (type, sizing, layout,
   header, footer) with the talentedPros logo colors.
   ========================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Brand colors (from the talentedPros logo) */
  --navy: #102A56;            /* logo navy: headings, primary text accents */
  --navy-dark: #0A1C3D;       /* hero, inner-page heroes, footer */
  --navy-hover: #1A3B72;
  --teal: #27BAC7;            /* logo teal: primary buttons, accents on dark */
  --teal-hover: #4FCBD6;
  --teal-deep: #0B6E79;       /* links and small teal text on light backgrounds */
  --teal-soft: #E5F6F8;
  --red: #F40B08;             /* logo red: thin accent lines only */
  --red-text: #D90A07;        /* small red text on light backgrounds */
  --red-on-dark: #FF6B68;     /* red text on navy */

  /* Neutrals (genani.com standard) */
  --text: #1E293B;
  --muted: #5B6474;
  --line: #E3E8EF;
  --panel: #F3F6FA;
  --panel-2: #EEF3F8;
  --white: #FFFFFF;

  /* Text on dark bands (genani.com standard) */
  --on-dark-head: #FFFFFF;
  --on-dark-body: #D3DCEC;
  --on-dark-soft: #A9B6C8;

  /* Type (genani.com standard: one family; menu in Inter) */
  --font: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-nav: "Inter", "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;

  /* Layout (genani.com standard) */
  --content: 1200px;
  --gutter: 32px;
  --section: 88px;
  --hero-h: 460px;
}
@media (max-width: 860px) {
  :root { --gutter: 22px; --section: 64px; }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-deep); text-underline-offset: 3px; }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(32px, 3.4vw, 48px); letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
h2 { font-size: clamp(28px, 2.6vw, 36px); }
h3 { font-size: 20px; letter-spacing: -0.01em; }
h4 { font-size: 16px; letter-spacing: 0; }
p { margin: 0 0 1em; max-width: 70ch; }
.lead { font-size: 18px; color: var(--muted); max-width: 62ch; }
.muted { color: var(--muted); }

.wrap { width: 100%; max-width: calc(var(--content) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.wrap > *, .hero-grid > *, .split > * { min-width: 0; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--navy); color: var(--white); padding: 10px 16px; }
.skip-link:focus { top: 12px; color: var(--white); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 3. Buttons (genani.com standard) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 15px/1.2 var(--font);
  padding: 15px 26px;
  border-radius: 4px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn--primary { background: var(--teal); border-color: var(--teal); color: var(--navy); }
.btn--primary:hover { background: var(--teal-hover); border-color: var(--teal-hover); color: var(--navy); }
.btn--ghost { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--white); }
.btn--light { background: var(--teal); border-color: var(--teal); color: var(--navy); }
.btn--light:hover { background: var(--teal-hover); border-color: var(--teal-hover); color: var(--navy); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Buttons on dark bands */
.is-dark .btn--ghost, .hero--full .btn--ghost, .page-hero .btn--ghost, .footer-cta .btn--ghost {
  color: var(--white); border-color: rgba(255,255,255,.75);
}
.is-dark .btn--ghost:hover, .hero--full .btn--ghost:hover, .page-hero .btn--ghost:hover, .footer-cta .btn--ghost:hover {
  background: var(--white); color: var(--navy);
}

/* ---------- 4. Utility bar ---------- */
.utility-bar { background: var(--navy-dark); color: var(--on-dark-soft); font-size: 14px; }
.utility-inner { display: flex; align-items: center; justify-content: space-between; min-height: 40px; gap: 16px; }
.utility-note { margin: 0; }
.utility-links { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
.utility-links a { color: var(--on-dark-body); text-decoration: none; }
.utility-links a:hover, .utility-links a[aria-current="page"] { color: var(--white); text-decoration: underline; }
.utility-bar :focus-visible { outline-color: var(--teal); }

/* ---------- 5. Header (genani.com standard: white, 80px+, not sticky) ---------- */
.site-header { position: relative; z-index: 999; background: var(--white); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 80px; padding-top: 12px; padding-bottom: 12px; }
.brand { display: inline-flex; flex-direction: column; align-items: flex-start; text-decoration: none; flex: 0 0 auto; }
.brand img { height: 48px; width: auto; }
.brand-tagline { display: block; margin: 1px 0 0 33%; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 14px; line-height: 1.1; color: var(--red-text); white-space: nowrap; }

.nav { display: flex; align-items: center; gap: 8px; }
.nav > ul { list-style: none; display: flex; align-items: center; margin: 0; padding: 0; }
.nav a, .nav button.nav-parent {
  display: block; padding: 15px;
  font: 600 16px/1.2 var(--font-nav);
  color: #1D1E3D; text-decoration: none;
  background: none; border: 0; cursor: pointer;
}
.nav a:hover, .nav button.nav-parent:hover { color: var(--teal-deep); }
.nav a[aria-current="page"] { color: var(--navy); box-shadow: inset 0 -2px 0 var(--red); }
.nav-parent::after { content: ""; display: inline-block; margin-left: 8px; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); }

.has-sub { position: relative; }
.sub {
  position: absolute; left: 0; top: 100%; min-width: 220px;
  list-style: none; margin: 0; padding: 6px 0;
  background: var(--white); border: 1px solid #E6EBF2; border-radius: 4px;
  box-shadow: 0 18px 40px -20px rgba(16,42,86,.35);
  display: none;
}
.has-sub:hover .sub, .has-sub:focus-within .sub, .has-sub.open .sub { display: block; }
.sub a { padding: 10px 16px; font-weight: 500; font-size: 15px; }
.sub a:hover { background: #F2F6FA; }

/* Header button (genani.com standard: Inter 18px 700, 20px radius) */
.nav .btn {
  margin-left: 8px; padding: 12px 24px; border-radius: 20px;
  font: 700 18px/1.2 var(--font-nav);
  background: var(--navy); border-color: var(--navy); color: var(--white);
}
.nav .btn:hover { background: var(--navy-hover); border-color: var(--navy-hover); color: var(--white); }

.nav-toggle { display: none; background: none; border: 1.5px solid var(--line); border-radius: 4px; padding: 10px 14px; cursor: pointer; font: 600 15px var(--font-nav); color: var(--navy); }
.nav-mobile-only { display: none; }

@media (max-width: 1024px) {
  .utility-bar { display: none; }
  .nav-toggle { display: inline-block; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch;
    background: var(--white); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 24px; display: none;
    max-height: calc(100vh - 80px); overflow-y: auto;
    box-shadow: 0 24px 40px -24px rgba(16,42,86,.35);
  }
  .nav.open { display: flex; }
  .nav > ul { flex-direction: column; align-items: stretch; }
  .nav a, .nav button.nav-parent { padding: 13px 2px; text-align: left; width: 100%; }
  .nav-parent::after { display: none; }
  .sub { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 0 14px; }
  .sub a:hover { background: none; }
  .nav-mobile-only { display: block; }
  .nav .btn { margin: 14px 0 0; justify-content: center; }
}
@media (max-width: 640px) {
  .brand img { height: 36px; }
  .brand-tagline { font-size: 11.5px; }
}

/* ---------- 6. Heroes (genani.com standard: dark band with soft glow) ---------- */
.hero--full, .page-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 85% 15%, rgba(39,186,199,.20), transparent 55%),
    radial-gradient(ellipse at 10% 100%, rgba(26,59,114,.55), transparent 60%),
    var(--navy-dark);
  color: var(--on-dark-body);
}
.hero--full h1, .page-hero h1, .hero--full h2, .page-hero h2 { color: var(--on-dark-head); }
.hero--full .lead, .page-hero .lead { color: var(--on-dark-body); }
.hero--full :focus-visible, .page-hero :focus-visible { outline-color: var(--teal); }

/* Home hero */
.hero--full { display: flex; align-items: center; min-height: var(--hero-h); padding: 48px 0; }
.hero--full .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero--full::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,28,61,.95) 0%, rgba(10,28,61,.85) 45%, rgba(10,28,61,.55) 100%); }
.hero--full .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.hero--full h1 { max-width: 18ch; margin-bottom: 16px; text-wrap: balance; }

/* Timeline card in the home hero */
.shortlist {
  justify-self: end; width: min(420px, 100%);
  background: var(--white); color: var(--text);
  border-radius: 12px; border-top: 3px solid var(--red);
  padding: 22px 26px 14px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.6);
}
.shortlist h2 { font-size: 18px; color: var(--navy); margin-bottom: 2px; }
.shortlist .note { font-size: 14px; color: var(--muted); margin: 0 0 6px; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { padding: 10px 0; border-top: 1px solid var(--line); }
.steps li:first-child { border-top: 0; }
.steps .when { display: block; font-style: normal; font-size: 13px; font-weight: 600; color: var(--red-text); }
.steps strong { display: block; font-size: 15.5px; font-weight: 600; color: var(--navy); }
.steps span { display: block; font-size: 14px; color: var(--muted); }

/* Inner-page hero: two columns with a tilted image card when a photo exists */
.page-hero { padding: 72px 0; }
.page-hero:has(.frame:not([style*="none"])) { display: flex; align-items: center; min-height: var(--hero-h); }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { max-width: 20ch; }
.page-hero .frame {
  min-height: 320px; border-radius: 20px;
  transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.7);
}
.crumbs { font-size: 14px; color: var(--on-dark-soft); margin-bottom: 16px; }
.crumbs a { color: var(--on-dark-body); }

@media (max-width: 860px) {
  .hero--full { min-height: 0; padding: 56px 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .shortlist { justify-self: stretch; width: auto; }
  .page-hero, .page-hero:has(.frame:not([style*="none"])) { min-height: 0; padding: 56px 0; display: block; }
  .page-hero .frame { transform: none; min-height: 220px; }
}

/* ---------- 7. Sections ---------- */
.section { padding: var(--section) 0; background: var(--white); }
.section--white { background: var(--white); }
.section--panel, .section:not(.section--white):not(.section--ink) { background: var(--panel); }
.section--ink { background: var(--navy-dark); color: var(--on-dark-body); }
.section--ink h2, .section--ink h3 { color: var(--on-dark-head); }
.section--ink a { color: var(--teal); }
.section--ink :focus-visible { outline-color: var(--teal); }
.section-head { max-width: 760px; margin-bottom: 44px; }
.section-head p { color: var(--muted); font-size: 17px; }
.section--ink .section-head p { color: var(--on-dark-soft); }

/* Facts */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 48px 0 8px; }
.fact { border-top: 2px solid var(--navy); padding-top: 16px; }
.fact b { display: block; font-size: 28px; font-weight: 600; color: var(--navy); line-height: 1.15; letter-spacing: -0.015em; margin-bottom: 6px; }
.fact span { font-size: 15px; color: var(--muted); }
@media (max-width: 860px) { .facts { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 520px) {
  .facts { grid-template-columns: 1fr; gap: 0; padding-top: 32px; }
  .fact { display: grid; grid-template-columns: 8.5rem 1fr; gap: 12px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); }
  .fact:first-child { border-top: 2px solid var(--navy); }
  .fact b { font-size: 20px; margin: 0; }
}

/* Columns of short points (value props, engagement models, commitments) */
.models { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 36px; }
.models--3 { grid-template-columns: repeat(3, 1fr); }
.model { border-top: 1px solid var(--navy); padding-top: 18px; }
.model h3 { margin-bottom: 8px; }
.model p { font-size: 15.5px; color: var(--muted); margin-bottom: 8px; }
.model .best { color: var(--navy); font-weight: 500; }
@media (max-width: 1024px) { .models { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .models, .models--3 { grid-template-columns: 1fr; gap: 28px; } }

/* Practice index */
.practice-list { border-top: 1px solid var(--line); }
.practice { display: grid; grid-template-columns: 280px 1fr 1fr; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.practice h3 { margin: 0; }
.practice p { margin: 0; color: var(--muted); }
.roles { list-style: none; margin: 0; padding: 0; font-size: 15.5px; }
.roles li { padding: 3px 0; }
.skills { list-style: none; display: block; margin: 10px 0 0; padding: 0; font-size: 14.5px; color: var(--muted); }
.skills li { display: inline; }
.skills li + li::before { content: ", "; }
@media (max-width: 860px) { .practice { grid-template-columns: 1fr; gap: 10px; } }

/* Process (true sequence) */
.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; counter-reset: p; }
.process li { border-top: 2px solid var(--teal); padding-top: 18px; }
.process li::before { counter-increment: p; content: "Step " counter(p); display: block; font-size: 14px; font-weight: 600; color: var(--red-text); margin-bottom: 6px; }
.section--ink .process li::before { color: var(--red-on-dark); }
.process p { font-size: 15.5px; }
@media (max-width: 1024px) { .process { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .process { grid-template-columns: 1fr; } }

/* Two-column layouts */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.split--top { align-items: start; }
.split--form { grid-template-columns: 1.5fr 1fr; }
.split--solo { grid-template-columns: 1fr !important; }
.split--solo > div { max-width: 780px; }
@media (max-width: 860px) { .split, .split--form { grid-template-columns: 1fr; } }

/* Photo panels */
.frame { position: relative; overflow: hidden; min-height: 320px; border-radius: 20px; background: linear-gradient(150deg, var(--navy) 0%, #17406F 100%); }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Lists */
.checklist { list-style: none; margin: 0 0 1em; padding: 0; }
.checklist li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.section--ink .checklist li { border-color: rgba(255,255,255,.14); }

/* Certifications */
.certs { list-style: none; margin: 0; padding: 28px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 56px; border-top: 1px solid var(--line); }
.certs li { display: block; }
.certs img { max-height: 56px; width: auto; margin-bottom: 8px; filter: grayscale(100%); opacity: .85; transition: filter .2s, opacity .2s; }
.certs li:hover img { filter: none; opacity: 1; }
.certs span { font-size: 18px; font-weight: 600; color: var(--navy); }

/* Service detail blocks */
.detail { display: grid; grid-template-columns: 300px 1fr; gap: 48px; padding: 44px 0; border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.detail:first-of-type { border-top: 0; padding-top: 0; }
.detail .meta { font-size: 15px; color: var(--muted); margin: 0; }
.detail .meta dt { font-weight: 600; color: var(--navy); margin-top: 14px; }
.detail .meta dd { margin: 2px 0 0; }
@media (max-width: 860px) { .detail { grid-template-columns: 1fr; gap: 14px; } }

/* Supplier profile table and code lists */
.table-scroll { overflow-x: auto; }
.data { width: 100%; border-collapse: collapse; background: var(--white); border-top: 1px solid var(--line); }
.data th, .data td { text-align: left; vertical-align: top; padding: 14px 18px 14px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.data th { width: 34%; color: var(--navy); font-weight: 600; }
@media (max-width: 640px) {
  .data, .data tbody, .data tr, .data th, .data td { display: block; width: 100%; }
  .data th { border-bottom: 0; padding: 12px 0 2px; font-size: 14px; color: var(--muted); }
  .data td { padding: 0 0 12px; overflow-wrap: anywhere; }
}
.codes { list-style: none; margin: 0; padding: 0; }
.codes li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.codes--inline li { display: inline; padding: 0; border: 0; }
.codes--inline li + li::before { content: ", "; }

/* ---------- 8. Forms and contact ---------- */
.form { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--navy); border-radius: 8px; padding: clamp(24px, 4vw, 40px); }
.form h2 { font-size: 24px !important; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
label { display: block; font-weight: 600; font-size: 15px; color: var(--navy); margin-bottom: 6px; }
label .opt { font-weight: 400; color: var(--muted); }
input, select, textarea { width: 100%; font: 400 16px/1.4 var(--font); color: var(--text); padding: 12px 14px; border: 1px solid #C3CCD8; border-radius: 4px; background: var(--white); }
textarea { min-height: 140px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--teal-deep); outline-offset: 1px; border-color: var(--navy); }
.field-error { display: none; color: #A4262C; font-size: 14px; margin: 6px 0 0; }
.invalid .field-error { display: block; }
.invalid input, .invalid select, .invalid textarea { border-color: #A4262C; }
.form-status { margin-top: 16px; font-weight: 600; }
.form-status.is-error { color: #A4262C; }
.form-fine { font-size: 14px; color: var(--muted); margin-top: 14px; }

.contact-card { padding: 22px 0; border-bottom: 1px solid var(--line); }
.contact-card:first-child { padding-top: 0; }
.contact-card h3 { font-size: 18px; margin-bottom: 4px; }
.contact-card p { margin: 0; }
.next-steps { margin: 6px 0 0; padding-left: 1.2em; }
.next-steps li { padding: 4px 0; }
.next-steps li::marker { color: var(--red-text); font-weight: 600; }

/* ---------- 9. Footer (genani.com standard: navy, 4px accent top border, CTA strip) ---------- */
.site-footer { background: var(--navy-dark); color: var(--on-dark-soft); border-top: 4px solid var(--teal); font-size: 15.5px; }
.site-footer a { color: var(--on-dark-body); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer :focus-visible { outline-color: var(--teal); }

.footer-cta { border-bottom: 1px solid rgba(255,255,255,.12); padding: 48px 0; }
.footer-cta .wrap { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.footer-cta h2 { color: var(--white); font-size: clamp(24px, 2.2vw, 30px); margin-bottom: 6px; }
.footer-cta p { margin: 0; color: var(--on-dark-body); }
.footer-cta .btn-row { margin-top: 0; }
.footer-cta .btn { border-radius: 8px; }
.footer-cta .btn--ghost:hover { color: var(--navy); }

.footer-main { padding: 56px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; }
.footer-grid h2 { font-size: 16px; font-weight: 600; color: var(--white); margin-bottom: 14px; letter-spacing: 0; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { padding: 5px 0; }
.site-footer .brand img { height: 52px; margin-bottom: 12px; }
.site-footer p { max-width: 36ch; }
.tagline { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 17px; color: var(--red-text); margin: 0 0 12px; }
.site-footer .tagline { color: var(--red-on-dark); }

.footer-certs { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 36px 0 0; padding: 0; }
.footer-certs li { border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 6px 14px; font-size: 13.5px; color: var(--on-dark-body); }

.footer-base { border-top: 1px solid rgba(255,255,255,.12); margin-top: 28px; padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.footer-base p { margin: 0; max-width: none; }

@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-grid li { padding: 7px 0; }
  .footer-cta .wrap, .footer-cta .btn-row { flex-direction: column; align-items: stretch; }
  .footer-base { flex-direction: column; }
}

/* Legacy closing band (kept for any older page content) */
.cta-band { background: var(--navy-dark); color: var(--on-dark-body); padding: 64px 0; }
.cta-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-band h2 { color: var(--white); }
.cta-band .btn-row { margin-top: 0; }

/* ---------- 10. Mobile refinements ---------- */
@media (max-width: 640px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
  .lead { font-size: 17px; }
}

/* ---------- 11. WordPress ---------- */
.admin-bar .site-header { top: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Optional photos stay invisible until they actually load, so a photo that
   has not been uploaded yet never shows a broken-image icon. */
img[data-optional] { visibility: hidden; }
img[data-optional].is-loaded { visibility: visible; }


/* ---------- v2.2: larger vector logo, crisper top bar, interactive certification chips ---------- */
.header-inner { min-height: 92px; }
.brand img { height: 60px; width: auto; }
.brand-tagline { font-size: 15px; margin-top: 2px; }
@media (max-width: 640px) {
  .header-inner { min-height: 72px; }
  .brand img { height: 42px; }
  .brand-tagline { font-size: 12px; }
}

.utility-bar { font-size: 15px; font-weight: 500; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.utility-note { color: #E6ECF4; letter-spacing: .01em; }
.utility-links a { color: #E6ECF4; }
.utility-inner { min-height: 42px; }

.site-footer .brand img { height: 64px; }

.footer-certs li { border: 0; padding: 0; border-radius: 0; }
.footer-certs a {
  display: inline-block; padding: 7px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28); color: var(--on-dark-body);
  font-size: 13.5px; font-weight: 500; text-decoration: none;
  transition: border-color .15s, color .15s, background-color .15s;
}
.footer-certs a:hover, .footer-certs a:focus-visible {
  border-color: var(--teal); color: var(--white); background: rgba(39,186,199,.14); text-decoration: none;
}
#certifications { scroll-margin-top: 24px; }

/* ---------- v2.3: home hero with photo card and engagement timeline bar ---------- */
.hero--media { padding: 56px 0 112px; }
.hero--media::after { display: none; }
.hero-card {
  min-height: 340px; border-radius: 20px;
  transform: perspective(1200px) rotateY(-7deg) rotateX(2deg);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.75);
}
.timeline-bar {
  position: relative; z-index: 2; list-style: none;
  margin: -64px 0 0; padding: 22px 28px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  background: var(--white); border-radius: 12px; border-top: 3px solid var(--red);
  box-shadow: 0 30px 60px -30px rgba(16,42,86,.45);
}
.timeline-bar li { position: relative; }
.timeline-bar li + li::before { content: ""; position: absolute; left: -14px; top: 4px; bottom: 4px; width: 1px; background: var(--line); }
.timeline-bar .when { display: block; font-style: normal; font-size: 13px; font-weight: 600; color: var(--red-text); margin-bottom: 2px; }
.timeline-bar strong { display: block; font-size: 15.5px; font-weight: 600; color: var(--navy); line-height: 1.4; }
.timeline-bar + .facts, .wrap:has(.timeline-bar) + .wrap .facts { padding-top: 40px; }
@media (max-width: 860px) {
  .hero--media { padding: 48px 0 96px; }
  .hero-card { transform: none; min-height: 240px; }
  .timeline-bar { grid-template-columns: 1fr 1fr; gap: 18px 24px; padding: 20px; }
  .timeline-bar li + li::before { display: none; }
}
@media (max-width: 520px) { .timeline-bar { grid-template-columns: 1fr; } }

/* ---------- v2.3.1: button text colors that cannot be overridden by Elementor or plugin link styles ---------- */
a.btn, button.btn { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none; }
a.btn.btn--primary, a.btn.btn--light, button.btn.btn--primary { background: var(--teal); border-color: var(--teal); color: var(--navy); font-weight: 600; }
a.btn.btn--primary:hover, a.btn.btn--light:hover, button.btn.btn--primary:hover,
a.btn.btn--primary:focus-visible, a.btn.btn--light:focus-visible { background: var(--teal-hover); border-color: var(--teal-hover); color: var(--navy); }
a.btn.btn--ghost { color: var(--navy); }
a.btn.btn--ghost:hover { background: var(--navy); color: var(--white); }
.hero--full a.btn.btn--ghost, .page-hero a.btn.btn--ghost, .footer-cta a.btn.btn--ghost, .is-dark a.btn.btn--ghost { color: var(--white); border-color: rgba(255,255,255,.75); }
.hero--full a.btn.btn--ghost:hover, .page-hero a.btn.btn--ghost:hover, .footer-cta a.btn.btn--ghost:hover, .is-dark a.btn.btn--ghost:hover { background: var(--white); color: var(--navy); }
.nav a.btn, .nav a.btn:hover, .nav a.btn:focus-visible { color: var(--white); }

/* ---------- v2.4: robust timeline, compact practice grid, supplier glance card ---------- */
.timeline-bar .tl-step { position: relative; min-width: 0; }
.timeline-bar .tl-step + .tl-step::before { content: ""; position: absolute; left: -14px; top: 4px; bottom: 4px; width: 1px; background: var(--line); }
.timeline-bar p { margin: 0; max-width: none; }
.timeline-bar .tl-when { font-size: 13px; font-weight: 600; color: var(--red-text); line-height: 1.3; margin-bottom: 4px; }
.timeline-bar .tl-what { font-size: 15.5px; font-weight: 600; color: var(--navy); line-height: 1.4; }
@media (max-width: 860px) { .timeline-bar .tl-step + .tl-step::before { display: none; } }

.practice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 36px; }
.practice-card { border-top: 1px solid var(--navy); padding-top: 16px; }
.practice-card h3 { margin-bottom: 6px; }
.practice-card p { margin: 0; font-size: 15.5px; color: var(--muted); }
.section-link { margin: 28px 0 0; font-weight: 600; }
@media (max-width: 860px) { .practice-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .practice-grid { grid-template-columns: 1fr; gap: 22px; } }

.section--ink p { color: var(--on-dark-body); }
.section--ink .checklist li { color: var(--on-dark-body); }
.glance { background: var(--white); color: var(--text); border-radius: 12px; border-top: 3px solid var(--red); padding: 28px 30px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.6); }
.section--ink .glance h3 { color: var(--navy); margin-bottom: 12px; }
.glance dl { margin: 0 0 22px; }
.glance dt { font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 12px; }
.glance dd { margin: 2px 0 0; font-size: 15.5px; font-weight: 500; color: var(--navy); }
.glance dt:first-child { margin-top: 0; }
/* Header button: navy with white text */
.nav a.btn.btn--primary { background: var(--navy); border-color: var(--navy); color: var(--white); }
.nav a.btn.btn--primary:hover, .nav a.btn.btn--primary:focus-visible { background: var(--navy-hover); border-color: var(--navy-hover); color: var(--white); }

/* =========================================================
   v2.5
   ========================================================= */

/* Larger logo and tagline */
.header-inner { min-height: 100px; }
.brand img, .site-header .brand img { height: 70px; }
.brand-tagline { font-size: 17px; margin-top: 3px; }
@media (max-width: 640px) {
  .header-inner { min-height: 76px; }
  .brand img, .site-header .brand img { height: 46px; }
  .brand-tagline { font-size: 13px; }
}

/* Button colors, defended against Elementor kit and plugin link styles */
body a.btn.btn--primary, body a.btn.btn--light, body button.btn.btn--primary {
  background-color: var(--teal) !important; border-color: var(--teal) !important; color: var(--navy) !important;
}
body a.btn.btn--primary:hover, body a.btn.btn--light:hover, body button.btn.btn--primary:hover,
body a.btn.btn--primary:focus-visible, body a.btn.btn--light:focus-visible {
  background-color: var(--teal-hover) !important; border-color: var(--teal-hover) !important; color: var(--navy) !important;
}
body .nav a.btn.btn--primary { background-color: var(--navy) !important; border-color: var(--navy) !important; color: var(--white) !important; }
body .nav a.btn.btn--primary:hover, body .nav a.btn.btn--primary:focus-visible { background-color: var(--navy-hover) !important; border-color: var(--navy-hover) !important; color: var(--white) !important; }
body a.btn.btn--ghost { color: var(--navy) !important; }
body a.btn.btn--ghost:hover { background-color: var(--navy) !important; color: var(--white) !important; }
body .hero--full a.btn.btn--ghost, body .page-hero a.btn.btn--ghost, body .footer-cta a.btn.btn--ghost, body .practices-band a.btn.btn--ghost {
  color: var(--white) !important; border-color: rgba(255,255,255,.75) !important; background-color: transparent !important;
}
body .hero--full a.btn.btn--ghost:hover, body .page-hero a.btn.btn--ghost:hover, body .footer-cta a.btn.btn--ghost:hover, body .practices-band a.btn.btn--ghost:hover {
  background-color: var(--white) !important; color: var(--navy) !important;
}

/* Practices showcase */
.practices-band {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(39,186,199,.22), transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(244,11,8,.10), transparent 45%),
    var(--navy-dark) !important;
  color: var(--on-dark-body);
}
.practices-band h2 { color: var(--white); }
.practices-band .section-head p { color: var(--on-dark-soft); }
.pr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
body a.pr-tile {
  position: relative; display: block; text-decoration: none; color: var(--on-dark-body);
  padding: 28px 26px 24px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
body a.pr-tile:hover, body a.pr-tile:focus-visible {
  transform: translateY(-4px); border-color: var(--teal);
  background: linear-gradient(160deg, rgba(39,186,199,.16), rgba(255,255,255,.03));
  box-shadow: 0 24px 50px -24px rgba(39,186,199,.55); color: var(--on-dark-body);
}
.pr-tile::after { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--teal); opacity: 0; transition: opacity .2s; }
.pr-tile:hover::after { opacity: 1; }
.pr-icon { width: 40px; height: 40px; color: var(--teal); margin-bottom: 16px; }
.pr-tile h3 { color: var(--white); font-size: 21px; margin-bottom: 6px; }
.pr-tile p { margin: 0; max-width: none; }
.pr-desc { color: var(--on-dark-body); font-size: 15.5px; margin-bottom: 14px !important; }
.pr-roles { color: var(--white); font-size: 14.5px; font-weight: 500; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); }
.pr-skills { color: var(--teal); font-size: 13.5px; margin-top: 6px !important; }
.practices-band .btn-row { margin-top: 36px; }
@media (max-width: 1024px) { .pr-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pr-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { body a.pr-tile:hover { transform: none; } }

/* Supplier onboarding panel */
.onboard { background: var(--panel) !important; }
.onboard-panel {
  display: grid; grid-template-columns: 1.45fr 1fr; overflow: hidden;
  background: var(--white); border-radius: 16px; border-top: 4px solid var(--red);
  box-shadow: 0 40px 80px -40px rgba(16,42,86,.35);
}
.onboard-main { padding: 48px 48px 44px; }
.onboard-main h2 { max-width: 20ch; }
.onboard-main .lead { font-size: 17px; }
.onboard-steps { list-style: none; counter-reset: ob; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; }
.onboard-steps li { counter-increment: ob; display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; align-items: start; }
.onboard-steps li::before {
  content: counter(ob); grid-row: span 2;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 17px; color: var(--navy); background: var(--teal);
}
.onboard-steps h3 { font-size: 18px; margin: 6px 0 2px; }
.onboard-steps p { margin: 0; font-size: 15.5px; color: var(--muted); }
.onboard-facts { background: var(--navy-dark); color: var(--on-dark-body); padding: 48px 40px; }
.onboard-facts h3 { color: var(--white); font-size: 18px; margin-bottom: 18px; }
.onboard-facts dl { margin: 0; }
.onboard-facts dt { font-size: 13px; font-weight: 600; color: var(--on-dark-soft); margin-top: 16px; }
.onboard-facts dt:first-child { margin-top: 0; }
.onboard-facts dd { margin: 3px 0 0; font-size: 16px; font-weight: 500; color: var(--white); padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.onboard-facts dd:last-child { border-bottom: 0; padding-bottom: 0; }
body .onboard-facts a { color: var(--teal) !important; }
@media (max-width: 960px) {
  .onboard-panel { grid-template-columns: 1fr; }
  .onboard-main { padding: 32px 24px; }
  .onboard-facts { padding: 32px 24px; }
}

/* Link colors in the header, top bar and footer, defended against Elementor kit link styles */
body .nav a:not(.btn), body .nav button.nav-parent { color: #1D1E3D; }
body .nav a:not(.btn):hover, body .nav button.nav-parent:hover { color: var(--teal-deep); }
body .nav a[aria-current="page"]:not(.btn) { color: var(--navy); }
body .utility-links a { color: #E6ECF4; }
body .utility-links a:hover { color: var(--white); }
body .site-footer a:not(.btn) { color: var(--on-dark-body); }
body .site-footer a:not(.btn):hover { color: var(--white); }
body .footer-certs a { color: var(--on-dark-body); }
body .footer-certs a:hover { color: var(--white); }
body .crumbs a { color: var(--on-dark-body); }
body .section-link a, body .section a:not(.btn):not(.pr-tile) { color: var(--teal-deep); }
body .section--ink a:not(.btn):not(.pr-tile), body .practices-band a:not(.btn):not(.pr-tile) { color: var(--teal); }

/* ---------- v2.6: larger reading text across the site ---------- */
body { font-size: 17px; }
.lead, .onboard-main .lead { font-size: 19px; }
.section-head p { font-size: 18px; }
.model p, .practice-card p, .practice p, .process p, .roles, .data th, .data td,
.onboard-steps p, .pr-desc, .glance dd, .onboard-facts dd, .checklist li, .codes li { font-size: 16.5px; }
.pr-roles { font-size: 15.5px; }
.pr-skills { font-size: 14.5px; }
.fact span, .detail .meta, .contact-card p, .next-steps li { font-size: 16px; }
.skills { font-size: 15.5px; }
.steps .when, .timeline-bar .tl-when, .glance dt, .onboard-facts dt, .process li::before { font-size: 14px; }
.crumbs, .form-fine, .field-error { font-size: 15px; }
label { font-size: 16px; }
.site-footer { font-size: 16.5px; }
.footer-cta p { font-size: 17px; }
.footer-base { font-size: 15px; }
.footer-certs a { font-size: 14.5px; }
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .lead, .onboard-main .lead { font-size: 18px; }
}

/* ---------- v2.6.1: tagline tucked directly under the wordmark, starting at the "t" ----------
   Measured from the logo artwork: the wordmark starts 1.357 logo-heights from the left edge,
   and the space under the wordmark is 0.346 of the logo height (the bars extend lower). */
.brand { --logo-h: 70px; }
.site-footer .brand { --logo-h: 64px; margin-bottom: 18px; }
body .brand img, body .site-header .brand img, body .site-footer .brand img { height: var(--logo-h); width: auto; margin: 0; }
body .brand .brand-tagline {
  display: block; white-space: nowrap; line-height: 1.1;
  margin: calc(var(--logo-h) * -0.346 + 3px) 0 0 calc(var(--logo-h) * 1.357);
  font-size: calc(var(--logo-h) * 0.235);
  font-family: Georgia, "Times New Roman", serif; font-style: italic;
  color: var(--red-text);
}
body .site-footer .brand .brand-tagline { color: var(--red-on-dark); }
@media (max-width: 640px) {
  .site-header .brand { --logo-h: 46px; }
  .site-footer .brand { --logo-h: 54px; }
}

/* ---------- v2.8: reading text matched to genani.com body copy (larger, darker, clearer) ---------- */
:root { --muted: #4D5768; }
body { font-size: 18px; line-height: 1.65; }
p, li, dd { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.lead, .onboard-main .lead { font-size: 20px; }
.section-head p { font-size: 18px; }
.model p, .practice-card p, .practice p, .process p, .roles, .data th, .data td,
.onboard-steps p, .pr-desc, .glance dd, .onboard-facts dd, .checklist li, .codes li,
.detail p, .contact-card p, .next-steps li { font-size: 17.5px; }
.pr-roles { font-size: 16px; }
.pr-skills { font-size: 15px; }
.fact span, .detail .meta { font-size: 16.5px; }
.skills { font-size: 16px; }
.steps .when, .glance dt, .onboard-facts dt, .process li::before { font-size: 14.5px; }
.crumbs, .form-fine, .field-error { font-size: 15.5px; }
.site-footer { font-size: 17px; }
.footer-cta p { font-size: 18px; }
.footer-base { font-size: 15.5px; }
.utility-bar { font-size: 15.5px; }
@media (max-width: 640px) {
  body { font-size: 17px; }
  .lead, .onboard-main .lead { font-size: 18.5px; }
}

/* =========================================================
   v3.0: utility credentials, certification carousel (adapted from genani.com)
   ========================================================= */
.utility-creds { color: var(--teal); font-weight: 600; margin-left: 10px; letter-spacing: .01em; }
@media (max-width: 1180px) { .utility-creds { display: none; } }

.tcert-marquee { position: relative; overflow: hidden; padding: 6px 0; margin-top: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tcert-track { display: flex; gap: 20px; width: max-content; list-style: none; margin: 0; padding: 0; will-change: transform; }
.tcert-track li { flex: 0 0 220px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 16px 12px; text-align: center; transition: border-color .3s, box-shadow .3s; }
.tcert-track li.is-current { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal); }
.tcert-track .logo { height: 140px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; overflow: hidden; border-radius: 8px; }
.tcert-track img { height: 110px; width: auto; max-width: 100%; object-fit: contain; display: block; transform: scale(var(--logo-scale, 1)); }
.tcert-track span { font-size: 14px; font-weight: 700; color: var(--navy); line-height: 1.35; display: block; }
.tcert-track .tcert-sub { display: inline; white-space: nowrap; font-size: 12.5px; font-weight: 600; }
.tcert-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.tcert-dots button { width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.tcert-dots button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #C9D2DE; transition: background .25s, transform .25s; }
.tcert-dots button.is-active::before { background: var(--navy); transform: scale(1.25); }
.tcert-dots button[aria-pressed="true"]::before { background: var(--teal); box-shadow: 0 0 0 2px var(--navy); }
@media (max-width: 760px) {
  .tcert-track li { flex-basis: 180px; }
  .tcert-track .logo { height: 120px; }
  .tcert-track img { height: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .tcert-marquee { -webkit-mask-image: none; mask-image: none; }
  .tcert-track { width: auto; flex-wrap: wrap; justify-content: center; }
  .tcert-dots { display: none; }
}

/* ---------- v3.1: larger footer call to action and footer text ---------- */
.footer-cta { padding: 56px 0; }
.footer-cta h2 { font-size: clamp(26px, 2.4vw, 32px); }
.footer-cta p { font-size: 19px; }
body .footer-cta a.btn { font-size: 17px; padding: 17px 32px; border-radius: 8px; }
.site-footer { font-size: 18px; }
.footer-grid h2 { font-size: 18px; }
.footer-grid li { padding: 6px 0; }
.footer-base { font-size: 16px; }
body .footer-certs a { font-size: 15px; padding: 8px 18px; }
.site-footer .footer-cta p { max-width: 62ch; }

/* ---------- v3.3: larger menu and top bar ---------- */
.utility-bar { font-size: 16.5px; }
.utility-inner { min-height: 46px; }
body .nav a:not(.btn), body .nav button.nav-parent { font-size: 17.5px; }
.sub a, body .sub a { font-size: 16.5px; }
body .nav a.btn { font-size: 18px; padding: 13px 26px; }
@media (max-width: 1240px) {
  .nav a:not(.btn), .nav button.nav-parent { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 1024px) {
  body .nav a:not(.btn), body .nav button.nav-parent { font-size: 18px; }
}

/* ---------- v3.4.2: clearer breadcrumbs in page heroes ---------- */
.crumbs, body .page-hero .crumbs { font-size: 17px; font-weight: 500; color: #E6ECF4; margin-bottom: 18px; letter-spacing: .01em; }
body .crumbs a, body .page-hero .crumbs a { color: var(--white); text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: 4px; }
body .crumbs a:hover { color: var(--teal); text-decoration-color: var(--teal); }

/* ---------- v3.5: certification cards as uniform rounded white squares ----------
   Logos are shown at their natural sharpness (never enlarged past their size)
   and fitted inside the same box, so every card looks the same. */
.tcert-track li {
  flex: 0 0 210px; aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid var(--line); border-radius: 22px;
  padding: 20px 18px; box-shadow: 0 8px 22px -12px rgba(16,42,86,.25);
}
.tcert-track .logo { width: 100%; height: 118px; margin: 0 0 14px; display: flex; align-items: center; justify-content: center; overflow: visible; border-radius: 0; }
.tcert-track img {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain; transform: none !important;
  image-rendering: -webkit-optimize-contrast;
}
.tcert-track span { font-size: 14.5px; }
@media (max-width: 760px) {
  .tcert-track li { flex-basis: 170px; padding: 16px 14px; border-radius: 18px; }
  .tcert-track .logo { height: 92px; }
}