/* Extracted verbatim from ../../../css/style.css (design tokens + rules shared by
   both bridge-split-section and bridge-image-card) plus two page-local rules that
   were never in style.css to begin with — see README.md for why. */

/* ─── DESIGN TOKENS (css/style.css:6-21) ─── */
:root {
  --darknavy:  #060E2A;
  --navy:      #0C2054;
  --blue:      #1D51D3;
  --softblue:  #E8EDFB;
  --white:     #FFFFFF;
  --lgray:     #F5F7FA;
  --mgray:     #D0D5DD;
  --dgray:     #667085;

  --font-display: 'Inter', Arial, sans-serif;
  --font-body:    'Inter', Arial, sans-serif;

  --ease-snappy: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-base:   cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Scoped box-sizing reset — the static site's global `*` reset (css/style.css:24)
   isn't imported wholesale (see README), so it's re-applied narrowly to just the
   markup these two elements emit instead of touching the whole Bricks page. */
.container, .container *,
.s-light, .s-light *, .s-dark, .s-dark *,
.s-card-wrap, .s-card-wrap * {
  box-sizing: border-box;
}

/* ─── CONTAINER (css/style.css:40-46) ─── */
.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 120px;
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .container { padding: 0 24px; }
}

/* ─── EYEBROW LABEL (css/style.css:540-556) ─── */
.label {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 2.4rem;
}
.label::before { display: none; }
.label.on-dark { color: rgba(255,255,255,0.8); }

/* ─── DISPLAY TYPE (css/style.css:561-570) ─── */
.display-xl {
  font-family: var(--font-display);
  font-size: max(4rem, min(5.2vw, 7.2rem));
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--navy);
}
.display-xl.on-dark { color: var(--white); }

/* ─── BODY COPY (css/style.css:596-606) ─── */
.body-copy {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  color: var(--dgray);
  letter-spacing: 0.01em;
}
.body-copy.on-dark { color: rgba(255,255,255,0.8); }

/* ─── PRIMARY CTA (css/style.css:389-409) ─── */
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  background: var(--blue);
  color: var(--white);
  padding: 16px 24px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  transition: background 150ms, transform 150ms;
}
.hero-cta:hover { background: #1641b0; transform: translateY(-2px); }
.hero-cta-arrow { width: 20px; height: 20px; transition: transform 150ms; }
.hero-cta:hover .hero-cta-arrow { transform: translate(3px, -3px); }

/* Ghost CTA variant, dark background (css/style.css:2409-2418) */
.hero-cta.ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--white);
}
.hero-cta.ghost:hover {
  background: transparent;
  border-color: var(--blue);
  color: var(--blue);
}

/* Ghost CTA variant, light background — NOT in css/style.css; duplicated as a
   page-local <style> block on every page that uses it (e.g. for-leaders.html:18-30).
   See README: this is one of two rules copied from a page, not the stylesheet. */
.hero-cta.ghost-light {
  background: transparent;
  border: 1px solid rgba(6,14,42,0.2);
  color: var(--navy);
}
.hero-cta.ghost-light:hover {
  background: transparent;
  border-color: var(--blue);
  color: var(--blue);
}
.hero-cta.ghost-light .hero-cta-arrow {
  color: var(--navy);
}

/* ─── SECTION BASES used by split-section's theme attr (css/style.css:456-462) ─── */
.s-light { background: var(--lgray);    padding: 160px 0; position: relative; overflow: hidden; }
.s-dark  { background: transparent; padding: 160px 0; position: relative; overflow: hidden; z-index: 1; }
@media (max-width: 768px) {
  .s-dark { padding: 80px 0; }
}

/* ─── UTILITIES (css/style.css:465-473) — section-class="pt-0|pb-0"; .w-full/
   .text-center are used directly in image-card's own markup (card-image-content
   text-center, body-copy w-full), not authorable via a section-class attr. ─── */
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.w-full { max-width: 100% !important; }
.text-center { text-align: center !important; align-items: center !important; }

/* ─── FLOATING CARD WRAPPER used by image-card (css/style.css:476-490) ─── */
.s-card-wrap {
  background: transparent;
  padding: 80px 40px 160px;
  position: relative;
  z-index: 1;
}
.s-card-wrap--light {
  background: var(--lgray);
  padding-bottom: 80px;
}
.s-card {
  border-radius: 8px;
  padding: 120px 120px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 768px) {
  .s-card-wrap { padding: 40px 12px 0; }
  .s-card { padding: 48px 24px; border-radius: 6px; }
}

/* ─── IMAGE PLACEHOLDER — NOT in css/style.css; duplicated as a page-local <style>
   block on for-advisors.html/for-healthcare.html/for-leaders.html/
   component-playground.html (identical in each; copied from for-leaders.html:33-44).
   split-section's "placeholder" slot uses this. See README. ─── */
.img-placeholder {
  border-radius: 8px;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.img-placeholder p {
  font-size: 13px;
  line-height: 1.5;
}