/* ────────────────────────────────────────────────────────────────────────
   Polish overlay — lives ABOVE the legacy page_styles in the cascade.
   Goal: smooth out cross-page rough edges without changing content.
   ──────────────────────────────────────────────────────────────────────── */

/* Alpine FOUC guard — hide x-cloak elements until Alpine initialises.
   Without this rule the search overlay, exit-intent modal, and mobile
   drawer briefly flash visible on every page load. */
[x-cloak] { display: none !important; }

/* Anchor links don't disappear under the fixed nav. */
html { scroll-padding-top: 84px; }

/* Body backdrop matches the off-white surface used by the homepage hero break. */
body { background: var(--white); color: var(--text); }

/* Selection uses the brand gold. */
::selection { background: var(--gold-mid); color: var(--navy-deep); }

/* Smooth focus rings — accessibility + corporate polish. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Legacy images: keep aspect, never overflow on narrow viewports. */
img { max-width: 100%; height: auto; }
img[width][height] { height: auto; }

/* Quiet down any horizontal-scroll mistakes from legacy CSS. */
html, body { overflow-x: clip; }

/* Section breakpoint compression — many legacy pages forget tablet (601–900px). */
@media (max-width: 900px) {
  section {
    padding-left: max(20px, env(safe-area-inset-left)) !important;
    padding-right: max(20px, env(safe-area-inset-right)) !important;
  }
  /* Tighten the giant inline padding-top some hero sections use. Scope to the
     hero SECTION only — a bare `[class^="hero"]` also matched .hero-eyebrow,
     .hero-left, .hero-card, etc. and wrongly padded them (inflating the eyebrow
     pill into a big box over the heading on mobile). */
  .legacy-content .hero, .legacy-content .article-header {
    padding-top: 96px !important;
  }
}

/* Tables in legacy pages get a horizontal scroller on mobile rather than overflowing. */
@media (max-width: 720px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Lucide stroke icons in the legacy pages — give them a default size. */
[data-lucide] { width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; }

/* Image fade-in to mask LCP layout shift. Scoped to LAZY images only — eager
   images (heroes, LCP) keep whatever opacity Tailwind sets, so design overlays
   like a 0.7 opacity hero image continue to render as authored. */
img[loading="lazy"] { transition: opacity .25s; }
img[loading="lazy"]:not(.loaded) { opacity: 0; }
img[loading="lazy"].loaded { opacity: 1; }

/* ── Heading anchor links (added by blog-enhance.js) ── */
[data-article-root] h2,
[data-article-root] h3 { position: relative; scroll-margin-top: 96px; }

/* ── Legacy section normalization ──
   Migrated WordPress sections with a background colour are nested inside a
   legacy `.container` (max-width 960px) that caps AND insets them, so their
   background can't reach the page edges — unlike the Tailwind template
   sections whose background is full-bleed with content capped at max-w-page.
   Break each background-bearing section out to the full viewport width, then
   re-centre its content in a 1200px column via responsive padding (matches
   max-w-page). The `max()` keeps a 24px minimum gutter on narrow screens. */
.legacy-content .concur-section,
.legacy-content .expect-section,
.legacy-content .team-section,
.legacy-content .quote-section {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 80px max(24px, calc(50vw - 600px));
}
@media (max-width: 900px) {
  .legacy-content .concur-section,
  .legacy-content .expect-section,
  .legacy-content .team-section,
  .legacy-content .quote-section { padding-top: 56px; padding-bottom: 56px; }
}
/* Guard against the 100vw breakout introducing a horizontal scrollbar. */
main { overflow-x: hidden; }

/* ── Legacy card & step system → 2026 corporate aesthetic ──
   The migrated cards/steps were flat (hard borders, no shadow, cream icon
   chips). Bring them up to the template's card tokens: 16px radius, soft
   layered shadow, navy/gold icon chips, gold Playfair numerals, hover lift.
   Prefixed with `main` so specificity (0,2,1) beats the inline page_styles
   that load after polish.css. */

/* Cards — soft shadow, rounded, hover lift */
main .legacy-content .concur-card,
main .legacy-content .team-card,
main .legacy-content .expect-card,
main .legacy-content .value-card,
main .legacy-content .sister-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 28px -8px rgba(15,34,56,.10), 0 2px 6px -2px rgba(15,34,56,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
main .legacy-content .concur-card { padding: 30px; }
main .legacy-content .concur-card:hover,
main .legacy-content .team-card:hover,
main .legacy-content .expect-card:hover,
main .legacy-content .value-card:hover,
main .legacy-content .sister-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 50px -12px rgba(15,34,56,.18), 0 4px 10px -2px rgba(15,34,56,.08);
  border-color: rgba(255,184,28,.45);
}
/* Navy feature panels (.why-card) — rounded + soft shadow, gold accent rail */
main .legacy-content .why-card {
  border-radius: 16px;
  box-shadow: 0 18px 50px -16px rgba(15,34,56,.30);
}

/* Icon chip — navy square, gold glyph (matches template value cards) */
main .legacy-content .cc-icon {
  background: var(--navy);
  color: var(--gold);
  border-radius: 12px;
}
main .legacy-content .cc-icon [data-lucide] { width: 20px; height: 20px; }

/* Step numerals (how-we-work badge) — navy disc, gold Playfair figure, soft
   shadow. Scoped to .step-item so it does NOT leak onto the homepage's flat
   .step-num (which would paint a full-width navy bar). */
main .legacy-content .step-item .step-num {
  background: var(--navy);
  color: var(--gold);
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  box-shadow: 0 6px 18px -6px rgba(15,34,56,.35);
}

/* Homepage "How it works" steps — turn the flat, faded numeral into a clean
   navy disc badge with a gold Playfair figure (matches the site's icon chips
   and the how-we-work step badges). */
main .legacy-content .steps .step .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  opacity: 1;
  font-size: 22px;
  margin-bottom: 22px;
  box-shadow: 0 8px 20px -8px rgba(15,34,56,.45);
}
/* Connector rail between steps */
main .legacy-content .step-num-wrap { position: relative; }
main .legacy-content .step-item:not(:last-child) .step-num-wrap::after {
  content: "";
  position: absolute;
  top: 56px; bottom: -40px; left: 50%;
  width: 2px; transform: translateX(-50%);
  background: linear-gradient(var(--border), transparent);
}

/* Step detail checklist box — rounded, ruled */
main .legacy-content .step-detail {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--off-white);
  padding: 18px 22px;
}

/* Navy callout — gold accent rail + rounded */
main .legacy-content .concur-note {
  border-radius: 16px;
  border-left: 3px solid var(--gold);
  box-shadow: 0 18px 50px -16px rgba(15,34,56,.30);
}

/* Card heads/titles — tighten to editorial type rhythm */
main .legacy-content .concur-card h3,
main .legacy-content .tc-title { letter-spacing: -0.01em; }

/* Expectation-card phase pills — normalize the migrated off-brand colours
   (green "Week one", brown "Day one") to the navy/gold palette (telios skill:
   navy/gold only). Two-tone: gold-ringed for the early phases, navy-ringed
   for the later/ongoing ones. */
main .legacy-content .ec-tag { font-weight: 600; padding: 3px 10px; }
/* Early phases → gold-ringed pill (specificity 0,3,1 beats legacy .ec-tag.day1 at 0,3,0). */
main .legacy-content .ec-tag.day1,
main .legacy-content .ec-tag.week1 {
  background: var(--gold-light);
  color: var(--navy);
  box-shadow: inset 0 0 0 1px rgba(255, 184, 28, .45);
}
/* Later / ongoing phases → navy-ringed pill. */
main .legacy-content .ec-tag.ongoing {
  background: rgba(27, 58, 92, .06);
  color: var(--navy);
  box-shadow: inset 0 0 0 1px rgba(27, 58, 92, .14);
}
.heading-anchor {
  position: absolute;
  left: -1.25em;
  top: 0;
  opacity: 0;
  text-decoration: none;
  color: var(--gold);
  font-weight: 400;
  transition: opacity 0.15s;
  padding-right: 0.3em;
}
[data-article-root] h2:hover .heading-anchor,
[data-article-root] h3:hover .heading-anchor,
.heading-anchor:focus { opacity: 1; }

/* ── Structured-block prose (.prose-telios) ──
   Styles the RichText output inside the StreamField blocks (rich_text,
   numbered_cards, callout, steps, feature_cards, faq). Self-contained hex —
   does NOT rely on the legacy :root vars, because restructured blog posts
   carry no page_styles. Mirrors the typography skill (Outfit body, navy
   entities, gold links, generous leading). */
.prose-telios > :first-child { margin-top: 0; }
.prose-telios > :last-child { margin-bottom: 0; }
.prose-telios p { margin: 0 0 1.1em; }
.prose-telios h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.6rem; line-height: 1.2; letter-spacing: -0.015em;
  color: #1A1A2A; margin: 1.6em 0 0.6em;
}
.prose-telios h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.2rem; line-height: 1.3; color: #1A1A2A; margin: 1.4em 0 0.5em;
}
.prose-telios a {
  color: #1B3A5C; font-weight: 500;
  text-decoration: underline; text-decoration-color: #FFB81C;
  text-decoration-thickness: 2px; text-underline-offset: 3px;
  transition: color 0.15s;
}
.prose-telios a:hover { color: #22486E; }
.prose-telios strong { color: #1B3A5C; font-weight: 600; }
.prose-telios ul, .prose-telios ol { margin: 0 0 1.1em; padding-left: 1.25em; }
.prose-telios ul { list-style: disc; }
.prose-telios ol { list-style: decimal; }
.prose-telios li { margin: 0.4em 0; padding-left: 0.25em; }
.prose-telios li::marker { color: #FFB81C; }
.prose-telios hr { border: 0; border-top: 1px solid #E8E4DC; margin: 2em 0; }
/* Two-column bullet lists inside wide editorial rows — fills horizontal space
   instead of a single tall narrow column. Collapses to one column on mobile. */
@media (min-width: 768px) {
  .prose-cols ul { columns: 2; column-gap: 2.5rem; }
  .prose-cols ul li { break-inside: avoid; }
}

/* Dark surface (navy callout) — flip link/entity colours for contrast. */
.prose-on-dark strong { color: #FFFFFF; }
.prose-on-dark a { color: #FFB81C; text-decoration-color: rgba(255,184,28,.6); }
.prose-on-dark a:hover { color: #FFEDB3; }

/* ── Anchor scroll flash glow ── */
@keyframes anchor-flash {
  0%   { box-shadow: 0 0 0 0 rgba(255, 184, 28, 0); background: transparent; }
  20%  { box-shadow: 0 0 0 12px rgba(255, 184, 28, 0.15); background: rgba(255, 248, 231, 0.6); }
  100% { box-shadow: 0 0 0 0 rgba(255, 184, 28, 0); background: transparent; }
}
.anchor-flash { animation: anchor-flash 1.5s ease-out 1; }

/* ── Article TOC card (sticky on desktop, inline on mobile) ── */
.toc-card {
  position: sticky;
  top: 96px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 8px 28px -8px rgba(15,34,56,0.06);
}
.toc-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94A3B8;
  font-weight: 500;
  margin-bottom: 12px;
}
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-item { margin: 4px 0; }
.toc-item a {
  display: block;
  padding: 6px 10px;
  font-size: 13px;
  color: #4A5568;
  text-decoration: none;
  border-radius: 6px;
  border-left: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.toc-3 a { padding-left: 24px; font-size: 12.5px; color: #94A3B8; }
.toc-item a:hover { color: #1B3A5C; background: #F9F8F5; }
.toc-item a.active {
  color: #1B3A5C;
  border-left-color: #FFB81C;
  background: #FFF8E7;
  font-weight: 500;
}

/* ── Print stylesheet — long-form readability for B2B buyers ── */
@media print {
  header, footer, nav, aside, .nav-toggle, [data-mobile-menu-backdrop],
  #mobile-menu, [data-article-toc], .heading-anchor,
  [x-data*="exit_intent"], [x-data*="open: false"]:has(.nav-toggle),
  .lg\:hidden, [class*="sticky"], [class*="fixed"] { display: none !important; }
  body { background: white !important; color: #000 !important; font-size: 11pt; }
  main, section { padding: 0 !important; background: white !important; color: #000 !important; }
  h1, h2, h3, h4 { color: #1B3A5C !important; page-break-after: avoid; }
  a { color: #1B3A5C !important; text-decoration: underline; }
  img { max-width: 100% !important; page-break-inside: avoid; }
  table { page-break-inside: avoid; }
  @page { margin: 0.6in 0.5in; }
}

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   LEGACY HOMEPAGE SECTION POLISH
   Applied across the legacy page_styles inline CSS for the home body.
   Targets the original section classes — modernises spacing, hover state,
   typography and mobile breakpoints without changing copy or markup.
   ──────────────────────────────────────────────────────────────────────── */

/* Unified section breathing room (desktop) — homepage source uses inline
   px values that vary slightly. Snap everything to a coherent 96/120 grid. */
.positioning, .how, .proof, .diff, .quote-section, .concur, .team-strip, .cta-section {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}
@media (min-width: 1024px) {
  .positioning, .how, .proof, .diff, .concur, .team-strip {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
  }
}
@media (max-width: 720px) {
  .positioning, .how, .proof, .diff, .quote-section, .concur, .team-strip, .cta-section {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}

/* Smoother headline typography across all section headers. */
.pos-h2, .how h2, .proof h2, .diff h2, .concur h2, .team-strip h2, .cta-section h2 {
  letter-spacing: -0.015em !important;
  line-height: 1.08 !important;
}

/* Better eyebrow consistency. */
.pos-eyebrow, .how-eyebrow, .pf-eyebrow, .diff-eyebrow,
[class*="eyebrow"] {
  letter-spacing: 0.16em !important;
  font-weight: 500 !important;
}

/* ── Card components: unify radius + add hover lift ── */
.pf-card, .diff-grid > div, .step, .concur-inner > div,
.cta-section > div, .team-strip [class*="card"] {
  border-radius: 14px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.pf-card:hover, .diff-grid > div:hover, .step:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 50px -12px rgba(15, 34, 56, 0.18),
              0 4px 10px -2px rgba(15, 34, 56, 0.08) !important;
}

/* "How we work" steps — add gold step-number ring, smoother connector. */
.step { position: relative; }
.step::after {
  background: linear-gradient(to right, rgba(232, 228, 220, 0.8), rgba(232, 228, 220, 0)) !important;
}

/* Quote section — bigger, more editorial pull. */
.quote-section blockquote {
  letter-spacing: -0.015em;
  line-height: 1.25 !important;
}
.quote-section blockquote::before {
  content: '\201C';
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 64px;
  color: var(--gold);
  line-height: 0.5;
  margin-bottom: 16px;
  opacity: 0.7;
}

/* Concur partnership block — softer card edge, gold accent border. */
.concur .concur-inner {
  border-radius: 14px !important;
  box-shadow: 0 8px 28px -8px rgba(15, 34, 56, 0.10),
              0 2px 6px -2px rgba(15, 34, 56, 0.06);
}

/* Team strip — proper card treatment. */
.team-strip {
  background: var(--off-white);
}

/* Final CTA section — keep the legacy gold-light bg, just add a subtle
   inner glow so it doesn't read flat. Text/buttons keep the legacy contrast. */
.cta-section {
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(255, 184, 28, 0.12) 0%, transparent 50%);
  pointer-events: none;
}
.cta-section > * { position: relative; }

/* Buttons inside legacy CTA sections — tighten and add hover lift. */
.cta-section .btn-gold, .cta-section .btn-ghost,
.btn-gold, .btn-ghost {
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease !important;
}
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255, 184, 28, 0.25); }

/* ── Scroll-reveal: subtle fade-up for first-render sections ── */
@keyframes section-reveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .positioning, .how, .proof, .diff, .quote-section, .concur, .team-strip, .cta-section {
    animation: section-reveal 0.5s ease both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
}

/* ── Mobile typography compress ── */
@media (max-width: 720px) {
  .pos-h2, .how h2, .proof h2, .diff h2, .concur h2, .team-strip h2, .cta-section h2 {
    font-size: 30px !important;
  }
  .quote-section blockquote { font-size: 20px !important; }
}

/* ── Fix: doubled quote mark in testimonials ──────────────────────────────
   The source markup puts a literal quote glyph (.quote-mark / .qmark) above the
   blockquote, but polish.css already renders a gold curly quote via
   `.quote-section blockquote::before`. Hide the literal one so only the gold
   curly quote shows (applies to every page with a .quote-section). */
main .legacy-content .quote-section .quote-mark,
main .legacy-content .quote-section .qmark {
  display: none !important;
}

/* ── Fix: homepage hero eyebrow pill on mobile ────────────────────────────
   On mobile something in the cascade forced a large padding-top on the eyebrow,
   inflating the gold-bordered chip into a big translucent box over the heading.
   Keep it a snug, content-width inline pill on every viewport. */
main .legacy-content .hero-eyebrow {
  padding: 6px 14px !important;
  height: auto !important;
  min-height: 0 !important;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
}

/* ── Mobile lead-gen CTAs ──────────────────────────────────────────────────
   On phones, stack the landing's primary/secondary CTAs full-width with big
   tap targets — clearer primary action + higher conversion than small inline
   buttons. Applies to the hero and the closing CTA section. */
@media (max-width: 640px) {
  .legacy-content .hero-actions,
  .legacy-content .cta-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }
  .legacy-content .hero-actions .btn-primary,
  .legacy-content .cta-buttons .btn-navy,
  .legacy-content .cta-buttons .btn-outline {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .legacy-content .hero-actions .btn-ghost {
    width: 100%;
    text-align: center;
    padding: 8px 0;
  }
}

/* ── Solutions-by-role grid (homepage) ────────────────────────────────────
   The source hard-codes `grid-template-columns:repeat(4,1fr)` inline, which
   crams 4 cards off-screen on phones. Make it responsive: 4 cols desktop,
   2 cols tablet, 1 col phone, with tighter mobile padding. */
@media (max-width: 900px) {
  main .legacy-content .role-grid { grid-template-columns: 1fr 1fr !important; }
  main .legacy-content .role-section { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 560px) {
  main .legacy-content .role-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
}

/* ── Mobile audit fixes (UX only, no content changes) ─────────────────────── */

/* Collapse forced inline 4-col grids that some migrated pages hard-code with no
   mobile fallback (e.g. about-us, corporate-travel), cramming cards to ~70px.
   4 cols → 2 cols on tablet/phone, → 1 col on small phones. */
@media (max-width: 760px) {
  main .legacy-content [style*="repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
}
@media (max-width: 460px) {
  main .legacy-content [style*="repeat(4"] { grid-template-columns: 1fr !important; }
}

/* Article/guide layout: the grid content column keeps min-width:auto, so a wide
   child (comparison table, long token) pushes it past the viewport and clips
   text. Force a single shrinkable column + let tables scroll. */
@media (max-width: 900px) {
  main .legacy-content .article-wrap { grid-template-columns: 1fr !important; }
  main .legacy-content .article-main,
  main .legacy-content .article-body,
  main .legacy-content .article-aside,
  main .legacy-content .guide-section { min-width: 0 !important; max-width: 100% !important; }
  main .legacy-content .article-main table,
  main .legacy-content .guide-section table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}