/**
 * Client theme: Corvinus Business Solutions
 *
 * Palette and type follow the capability statement build
 * (capability-statement/build/README.md):
 *   navy  #283775  primary (logo .st1)
 *   ink   #32313b  text on light backgrounds (logo .st0)
 *   gold  #C8A15C  accent only: rules, small details, text on navy
 *   Lusitana 700 display, Source Sans 3 body
 *
 * Mood: sophisticated and restrained. Generous whitespace, thin gold rules,
 * flat colour (no gradients), minimal shadow.
 *
 * Contrast notes (WCAG 2.1 AA, computed):
 *   brand gold on white is 2.41:1, so gold is NEVER used for text on a light
 *   background. Light-background labels use --gold-text (#7D5F28, 5.48:1 on
 *   the tint, 6.0:1 on white). Gold text on navy is 4.6:1 (navy) and
 *   5.66:1 (navy-deep).
 *
 * Structure ported from the Paige Mead site (paigemead_1/new-website).
 */

@import url('https://fonts.googleapis.com/css2?family=Lusitana:wght@400;700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  /* ===== BRAND ===== */
  --navy: #283775;
  --navy-deep: #1D2A5C;
  --navy-darker: #16204A;
  --navy-line: #3C4A87;
  --gold: #C8A15C;
  --gold-soft: #E4CFA6;
  --gold-text: #7D5F28;
  --ink: #32313b;
  --ink-soft: #55545E;
  --rule: #D8DCE8;
  --tint: #F4F6FA;

  /* ===== TEMPLATE VARIABLES (read by clue.css, search.css, header CSS) ===== */
  --primary-color: #283775;
  --primary-color-dark: #1D2A5C;
  --primary-color-light: #3C4A87;
  --primary-color-bright: #3C4A87;

  --bs-primary: #283775;
  --bs-primary-rgb: 40, 55, 117;
  --bs-link-color: #283775;
  --bs-link-color-rgb: 40, 55, 117;
  --bs-link-hover-color: #1D2A5C;
  --bs-link-hover-color-rgb: 29, 42, 92;

  --secondary-color: #55545E;
  --accent-color: #C8A15C;

  --link-color: var(--navy);
  --link-hover-color: var(--navy-deep);
  --button-color: var(--navy);
  --button-hover-color: var(--navy-deep);

  --bg-primary: var(--navy);
  --bg-secondary: var(--tint);
  --bg-light: var(--tint);
  --hero-bg-color: var(--navy-deep);
  --sidebar-bg: rgba(22, 32, 74, 0.97);

  --text-primary: var(--ink);
  --text-secondary: var(--ink-soft);
  --text-light: var(--ink-soft);
  --text-white: #ffffff;

  /* ===== TYPOGRAPHY =====
     --font-script is the template's per-language script-font hook (set by
     the layout only for a language that names a fontFamily); with one
     language it is undefined and the stacks start at the brand faces. */
  --font-family-base: var(--font-script, "Source Sans 3"), -apple-system, BlinkMacSystemFont,
                      "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-headings: "Lusitana", Georgia, "Times New Roman", serif;
  --bs-body-font-family: var(--font-script, "Source Sans 3"), -apple-system, "Segoe UI",
                         Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-color: var(--ink);
  --font-size-base: 1.0625rem;
  --line-height-base: 1.7;
  --heading-font-weight: 700;

  /* ===== SPACING ===== */
  --section-padding: 5.5rem;
  --section-padding-mobile: 3.25rem;

  /* ===== SHAPE ===== */
  --border-radius-sm: 2px;
  --border-radius: 3px;
  --border-radius-lg: 4px;
  --border-radius-pill: 3px;

  --box-shadow-sm: 0 1px 2px rgba(22, 32, 74, 0.06);
  --box-shadow: 0 2px 10px rgba(22, 32, 74, 0.06);
  --box-shadow-lg: 0 6px 22px rgba(22, 32, 74, 0.08);

  /* No top contact bar on this site (header-modern.njk). The template's hero
     height calculation subtracts this value. */
  --top-bar-height: 0px;
}


/* ========================================================================
   GLOBAL TYPOGRAPHY
   ======================================================================== */

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--ink);
  line-height: var(--line-height-base);
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-family-headings);
  font-weight: var(--heading-font-weight);
  color: var(--navy);
  letter-spacing: 0;
  line-height: 1.22;
}

h1, .h1 { font-size: 2.75rem; }
h2, .h2 { font-size: 2.125rem; }
h3, .h3 { font-size: 1.375rem; }
h4, .h4 { font-size: 1.15rem; }

@media (max-width: 767.98px) {
  h1, .h1 { font-size: 2.1rem; }
  h2, .h2 { font-size: 1.7rem; }
  h3, .h3 { font-size: 1.25rem; }
}

a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: rgba(40, 55, 117, 0.35);
  text-underline-offset: 0.18em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a:hover,
a:focus {
  color: var(--navy-deep);
  text-decoration-color: var(--gold);
}

p {
  margin-bottom: 1.25rem;
}

.lead {
  font-size: 1.2rem;
  line-height: 1.75;
  color: var(--ink-soft);
}

strong, b {
  font-weight: 700;
}


/* ========================================================================
   BUTTONS
   Square-shouldered, lightly tracked, no lift or glow.
   ======================================================================== */

.btn {
  border-radius: var(--border-radius);
  font-family: var(--font-family-base);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn:not(.appt-nextstep) {
  font-size: 0.85rem;
}

.btn-lg:not(.appt-nextstep) {
  padding: 0.85rem 1.9rem;
  font-size: 0.9rem;
}

.btn-primary {
  --bs-btn-bg: var(--navy);
  --bs-btn-border-color: var(--navy);
  --bs-btn-hover-bg: var(--navy-deep);
  --bs-btn-hover-border-color: var(--navy-deep);
  --bs-btn-active-bg: var(--navy-darker);
  --bs-btn-active-border-color: var(--navy-darker);
  background-color: var(--navy);
  border-color: var(--navy);
  color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--navy-deep);
  border-color: var(--navy-deep);
  color: #ffffff;
}

/* clue.css renders .btn-outline-primary as a SOLID pill with
   color: white !important. This site uses a true outline variant, so the
   colour needs !important to win. */
.btn-outline-primary {
  background-color: transparent;
  color: var(--navy) !important;
  --bs-btn-color: var(--navy);
  --bs-btn-border-color: var(--navy);
  --bs-btn-hover-bg: var(--navy);
  --bs-btn-hover-border-color: var(--navy);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--navy-deep);
  color: var(--navy);
  border-color: var(--navy);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--navy);
  border-color: var(--navy);
  color: #ffffff !important;
}

.btn-primary,
.btn-outline-primary {
  border-radius: var(--border-radius);
}

/* Light buttons, for navy bands and the hero */
.btn-light {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--navy);
}

.btn-light:hover,
.btn-light:focus {
  background-color: var(--gold-soft);
  border-color: var(--gold-soft);
  color: var(--navy-darker);
}

.btn-outline-light {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.75);
}

.btn-outline-light:hover,
.btn-outline-light:focus {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--navy);
}


/* ========================================================================
   SECTION UTILITIES
   ======================================================================== */

.section-padding {
  padding: var(--section-padding) 0;
}

@media (max-width: 767.98px) {
  .section-padding {
    padding: var(--section-padding-mobile) 0;
  }
}

.section-tint,
.section-warm {
  background-color: var(--tint);
}

.section-dark {
  background-color: var(--navy);
  color: #DCE0EE;
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
  color: #ffffff;
}

.section-dark .lead,
.section-dark p {
  color: #DCE0EE;
}

.section-dark a:not(.btn) {
  color: #ffffff;
  text-decoration-color: var(--gold);
}

.section-label {
  display: inline-block;
  font-family: var(--font-family-base);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold-text);
  margin-bottom: 0.9rem;
}

.section-dark .section-label,
#inside-header .section-label,
.cta-band .section-label,
#homepage-cover .section-label {
  color: var(--gold);
}

.section-divider,
.section-divider-left {
  width: 56px;
  height: 1px;
  background-color: var(--gold);
  border: 0;
}

.section-divider {
  margin: 1.25rem auto 1.5rem;
}

.section-divider-left {
  margin: 1.25rem 0 1.5rem;
}


/* ========================================================================
   INSIDE PAGE HEADER  (macro: pageHeader)
   ======================================================================== */

#inside-header {
  background: var(--navy);   /* flat: replaces the template gradient in clue.css */
  color: #ffffff;
  padding: 4.25rem 0 3.75rem;
  border-bottom: 1px solid var(--gold);
}

#inside-header h1 {
  color: #ffffff;
  margin-bottom: 0;
}

#inside-header .page-header-rule {
  margin: 1.25rem 0 1.25rem;
}

#inside-header .lead {
  color: #DCE0EE;
  max-width: 46rem;
}

@media (max-width: 767.98px) {
  #inside-header {
    padding: 3rem 0 2.75rem;
  }
}


/* ========================================================================
   CARDS  (macro: capabilityList; home page grids)
   ======================================================================== */

.service-card {
  background: #ffffff;
  border: 1px solid var(--rule);
  border-top: 2px solid var(--gold);
  border-radius: var(--border-radius);
  box-shadow: none;
  height: 100%;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.service-card:hover {
  border-color: var(--navy-line);
  border-top-color: var(--gold);
  box-shadow: var(--box-shadow);
}

.service-card .card-body {
  padding: 2.25rem 2rem;
}

.service-card .card-title {
  font-size: 1.3rem;
  margin-bottom: 0.85rem;
}

.service-card .card-title a {
  color: var(--navy);
  text-decoration: none;
}

.service-card .card-title a:hover,
.service-card .card-title a:focus {
  text-decoration: underline;
  text-decoration-color: var(--gold);
}

.card-link-arrow {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}


/* ========================================================================
   INTRO SPLIT  (macro: introSplit)
   ======================================================================== */

.intro-split-image {
  width: 100%;
  border-radius: var(--border-radius);
  border-bottom: 2px solid var(--gold);
}


/* ========================================================================
   PROCESS STEPS  (macro: processSteps)
   ======================================================================== */

.process-list {
  margin: 0;
  padding: 0;
}

.process-step {
  height: 100%;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.process-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-family: var(--font-family-headings);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--navy);
}

.process-step h3 {
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
}


/* ========================================================================
   WHY CORVINUS  (macro: whyCorvinus)
   ======================================================================== */

.why-item {
  height: 100%;
  padding-top: 1.1rem;
  border-top: 1px solid var(--gold);
}

.why-item h3 {
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
}


/* ========================================================================
   FAQ  (macro: faqAccordion)
   ======================================================================== */

.accordion {
  --bs-accordion-color: var(--ink);
  --bs-accordion-border-color: var(--rule);
  --bs-accordion-border-radius: var(--border-radius);
  --bs-accordion-inner-border-radius: var(--border-radius);
  --bs-accordion-btn-color: var(--navy);
  --bs-accordion-active-color: var(--navy);
  --bs-accordion-active-bg: var(--tint);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(40, 55, 117, 0.25);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23283775'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23283775'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.faq-accordion .accordion-header {
  margin: 0;
  font-size: 1rem;
}

.faq-accordion .accordion-button {
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.45;
  padding: 1.15rem 1.35rem;
}

.faq-accordion .accordion-body {
  padding: 0.25rem 1.35rem 1.35rem;
  background-color: var(--tint);
}

.faq-accordion .accordion-button:not(.collapsed) {
  box-shadow: inset 0 -1px 0 var(--rule), inset 3px 0 0 var(--gold);
}


/* ========================================================================
   CTA BAND  (macro: ctaBand)
   ======================================================================== */

.cta-band {
  background-color: var(--navy-deep);
  color: #DCE0EE;
  border-top: 1px solid var(--gold);
}

.cta-band h2 {
  color: #ffffff;
}

.cta-band .lead {
  color: #DCE0EE;
}


/* ========================================================================
   HOME PAGE
   ======================================================================== */

/* Audience routing cards */
.audience-card {
  height: 100%;
  padding: 2.5rem 2.25rem;
  background-color: #ffffff;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--gold);
  border-radius: var(--border-radius);
}

.audience-card h3 {
  margin-bottom: 0.85rem;
}

.audience-card .btn {
  margin-top: 0.5rem;
}

/* Credentials band */
.credentials-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.credentials-list li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.4rem;
  border-bottom: 1px solid var(--rule);
}

.credentials-list.has-icons li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding-left: 0;
}

.credentials-list.has-icons li::before {
  display: none;
}

.credentials-list.has-icons .icon {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.15rem;
  color: var(--navy);
}

.credentials-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--gold);
}

.cert-panel {
  height: 100%;
  padding: 2.25rem 2rem;
  background-color: var(--tint);
  border-top: 2px solid var(--gold);
  border-radius: var(--border-radius);
}

.cert-panel .cert-decals {
  margin: 0.5rem 0 1rem;
  justify-content: flex-start;
}


/* ========================================================================
   SBA CERTIFICATION DECALS  (macro: certDecals)
   Unaltered SBA artwork (src/img/certifications/, SVG converted from SBA's
   own PDFs, identical to SBA's PNGs). Rules: CLAUDE.md "SBA certification
   decals". No wrapper tile, card or border: each decal sits directly on the
   section's light background, with SBA's clear space (at least the width
   and height of the "B" in SBA; 22% of the decal width) as empty space.
   Never below 120px wide (this site's decal floor), no shadow, no filter, never over a photo or on
   navy.
   ======================================================================== */

.cert-decals {
  /* Clear space = 22% of the decal width. Measured on a 1208px-wide render
     of SBA's artwork: the "B" in SBA is 213px wide (17.6%) and 258px tall
     (21.4%), so 22% covers the larger of the two. It is applied once
     around the pair and once between them (the neighbouring decal counts
     as "other content"), so each decal has at least that much empty space
     on every side. */
  --decal-clear: calc(var(--decal-w, 150px) * 0.22);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--decal-clear);
  padding: var(--decal-clear);
}

.cert-decal {
  /* No tile: the decal sits directly on the section's light background.
     SBA's clear space is the empty padding/gap on .cert-decals. */
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  line-height: 0;
}

.cert-decal img {
  display: block;
  width: var(--decal-w, 150px);
  min-width: 120px;
  height: auto;
  box-shadow: none;
  filter: none;
}


/* ========================================================================
   HERO OVERRIDES (homepage)
   ======================================================================== */

#homepage-cover {
  background-color: var(--navy-deep);
  /* clue.css points at the template's vid/home-cover.jpg; this site's poster */
  background-image: url("../vid/homepage-cover.jpg");
  position: relative;
  min-height: 100vh;
}

/* The template's overlay (modern-header-modern.css) is three gradient
   layers driven by these variables. Corvinus uses one flat navy tint, so the
   two corner layers are made transparent. */
:root {
  --hero-overlay-corner-1: rgba(22, 32, 74, 0);
  --hero-overlay-corner-2: rgba(22, 32, 74, 0);
  --hero-overlay-tint: rgba(22, 32, 74, 0.8);
}

#homepage-cover .bg-cover {
  position: relative;
  z-index: 2;
}

body.homepage #homepage-cover h1,
#homepage-cover h1 {
  text-wrap: balance;   /* no one- or two-word last line */
  font-family: var(--font-family-headings);
  font-weight: 700;
  font-size: 3.1rem;
  line-height: 1.18;
  color: #ffffff;
  margin-bottom: 0;
  text-shadow: none;
}

body.homepage #homepage-cover .lead,
#homepage-cover .lead {
  color: #DCE0EE;
  font-size: 1.2rem;
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
}

#homepage-cover .hero-eyebrow {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  body.homepage #homepage-cover h1,
  #homepage-cover h1 {
    font-size: 2.1rem;
  }
}

/* Template hero parts this site does not use */
.hero-search-wrapper,
.hero-service-boxes,
.hero-scroll-indicator {
  display: none !important;
}

/* LOGO: three stacked variants crossfaded inside one sized box.
   The box (.navbar-brand) has an explicit height and a width from the
   visible variant's aspect ratio, and both animate, so the swap is
   flicker-free and the only visible change is the intended size change.
     --logo-h      rendered logo height
     --logo-ratio  width / height of the visible variant
   Full logo (corvinus-logo*.svg)          644 x 482.4 -> 1.335
   Compact logo (corvinus-logo-compact.svg) 616.2 x 413.7 -> 1.4895
   States:
     inner page, top                 full colour, 64px
     homepage, at the very top       full INVERTED, enlarged (110 / 88 / 72)
     homepage, 0 < scroll < threshold  full colour, still enlarged
     any page, body.header-scrolled  compact colour, 46px (44px phone)
   Overrides the template's single-image sizing in modern-header-modern.css. */
.main-header .navbar-brand {
  --logo-h: 64px;
  --logo-ratio: 1.335;
  position: relative;
  display: block;
  height: var(--logo-h);
  width: calc(var(--logo-h) * var(--logo-ratio));
  transition: height 0.3s ease, width 0.3s ease, margin 0.3s ease;
}

.main-header .navbar-brand .header-logo {
  position: absolute;
  top: 0;
  left: 0;
  height: 100% !important;
  width: auto;
  max-width: none;
  filter: none !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.main-header .navbar-brand .header-logo-color {
  opacity: 1;
  visibility: visible;
}

/* Homepage at the very top: inverted logo over the video */
body.homepage:not(.header-not-at-top) .navbar-brand .header-logo-color {
  opacity: 0;
  visibility: hidden;
}

body.homepage:not(.header-not-at-top) .navbar-brand .header-logo-white {
  opacity: 1;
  visibility: visible;
}

/* Homepage, header not yet shrunk: enlarged (about 2x the scrolled size)
   and set clear of the top-left corner (the hero's padding-top absorbs the
   extra 12px of header height). */
body.homepage:not(.header-scrolled) .navbar-brand { --logo-h: 110px; margin: 0.75rem 0 0 1.25rem; }

@media (max-width: 991.98px) {
  body.homepage:not(.header-scrolled) .navbar-brand { --logo-h: 88px; }
}

@media (max-width: 575.98px) {
  .main-header .navbar-brand { --logo-h: 54px; }
  body.homepage:not(.header-scrolled) .navbar-brand { --logo-h: 72px; }
}

/* Every page once the header has shrunk: compact logo */
body.header-scrolled .main-header .navbar-brand {
  --logo-h: 46px;
  --logo-ratio: 1.4895;
}

@media (max-width: 575.98px) {
  body.header-scrolled .main-header .navbar-brand { --logo-h: 44px; }
}

body.header-scrolled .navbar-brand .header-logo-color,
body.header-scrolled .navbar-brand .header-logo-white {
  opacity: 0;
  visibility: hidden;
}

body.header-scrolled .navbar-brand .header-logo-compact {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .main-header .navbar-brand,
  .main-header .navbar-brand .header-logo {
    transition: none;
  }
}

/* Header consultation button */
.header-consult-btn {
  margin-inline-end: 0.5rem;
  letter-spacing: 0.06em;
}

body.homepage:not(.header-not-at-top) .header-consult-btn {
  background-color: transparent;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.75);
}

body.homepage:not(.header-not-at-top) .header-consult-btn:hover,
body.homepage:not(.header-not-at-top) .header-consult-btn:focus {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--navy) !important;
}

body.homepage:not(.header-not-at-top) .header-consult-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Homepage: the header is FIXED over the hero instead of the template's
   sticky header pulled up with a negative margin. The enlarged logo makes
   the header taller at the top than when scrolled; out of the flow, that
   size change can never move the hero text. Inner pages keep the sticky
   header. */
body.homepage .main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

body.homepage #homepage-cover {
  margin-top: 0;
  padding-top: 146px;
}


/* ========================================================================
   SLIDE MENU
   ======================================================================== */

.slide-menu-title {
  font-family: var(--font-family-headings);
  letter-spacing: 0.04em;
}

.slide-nav-cta .btn-outline-primary {
  background-color: #ffffff;
  color: var(--navy) !important;
  border: 1px solid var(--navy);
}

.slide-nav-cta .btn-outline-primary:hover,
.slide-nav-cta .btn-outline-primary:focus {
  background-color: var(--navy);
  color: #ffffff !important;
}


/* ========================================================================
   FOOTER (v4)  partials/footer.njk
   Two stacked bands plus the bottom bar inside <footer id="footer">, each padded with the
   shared --band-pad rhythm and sized by its content:
     .footer-masthead  light tint: logo + description | SBA decals | QB badges
     .footer-nav       navy: Capabilities, Services, Resources (+ search)
     #footer-bottom    darkest navy bottom bar (unchanged)
   Type: Lusitana for the section headings, Source Sans 3 for links, labels
   and values. Gold only for rules.
   Contrast (computed): white on navy 11.1:1, #DCE0EE on navy 8.4:1, white
   on navy-deep 13.7:1, gold labels on navy-deep 5.7:1, ink on tint 11.9:1.
   ======================================================================== */

#footer {
  background: none;                 /* bands carry their own colour */
  border-top: 1px solid var(--rule);
  color: #DCE0EE;
  font-size: 0.97rem;
}

/* Outer gutters: ~72px at 1440 come from .container; ~24px on phones. */
@media (max-width: 575.98px) {
  #footer .container,
  #footer-bottom .container,
  .quick-contact .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

#footer .footer-heading {
  text-align: start;
  font-family: var(--font-family-headings);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 1.1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--gold);
}

#footer a,
#footer-bottom a {
  color: #ffffff;
  text-decoration: none;
}

#footer a:hover,
#footer a:focus,
#footer-bottom a:hover,
#footer-bottom a:focus {
  color: var(--gold-soft);
  text-decoration: underline;
  text-decoration-color: var(--gold);
}

#footer a:focus-visible,
#footer-bottom a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* --- Masthead (light tint) --------------------------------------------- */

#footer .footer-masthead {
  background-color: var(--tint);
  color: var(--ink);
  padding: var(--band-pad) 0;
}

.masthead-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
}

.masthead-brand {
  max-width: 30rem;
}

.masthead-logo {
  display: block;
  width: 160px;
  height: auto;
  margin-bottom: 1rem;
}

.masthead-desc {
  margin: 0;
  color: var(--ink);
  line-height: 1.6;
}

.masthead-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
}

.masthead-marks .cert-decals {
  margin: 0;
}

.masthead-rule {
  width: 1px;
  align-self: stretch;
  margin: 1.25rem 0;
  background-color: var(--rule);
}

.masthead-proadvisor {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  line-height: 0;
}

.masthead-proadvisor img {
  /* 112px wide (~149px tall) so the badges read at the same height as the
     120px (150px tall) SBA decals beside them. */
  width: 112px;
  height: auto;
}

#footer .masthead-logo-link:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 4px;
}

@media (max-width: 767.98px) {
  .masthead-rule { display: none; }
}

/* Phones: the three badges (3 x 112px + gaps) would exceed a 342px column,
   so they shrink to share the width (about 103px at 390). */
@media (max-width: 575.98px) {
  .masthead-proadvisor img {
    width: min(112px, calc((100vw - 48px - 2rem) / 3));
  }
}

@media (min-width: 1200px) {
  .masthead-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
  }
  .masthead-brand { flex: 1 1 22rem; }
}

/* --- Navigation (navy) --------------------------------------------------- */

#footer .footer-nav {
  background-color: var(--navy);
  padding: var(--band-pad) 0;
}

.footer-links {
  margin: 0;
}

.footer-links li {
  padding: 0.25rem 0;
  line-height: 1.45;
}

/* Quieter than the template's slide-and-underline hover (clue.css). */
#footer .footer-links a:hover {
  padding-inline-start: 0;
  opacity: 1;
}

#footer .footer-links a::before {
  display: none;
}

/* clue.css centres footer headings and links below 768px; this footer keeps
   everything left-aligned at every width. */
@media (max-width: 767.98px) {
  #footer .footer-heading,
  #footer .footer-links {
    text-align: start;
  }
}

/* Resources column: site search (GET /search/?q=) above the links. */
.footer-search {
  margin-bottom: 1.1rem;
}

.footer-search-label {
  display: block;
  font-size: 0.85rem;
  color: #DCE0EE;
  margin-bottom: 0.35rem;
}

.footer-search-row {
  display: flex;
  gap: 0.5rem;
}

.footer-search-row .form-control {
  min-width: 0;
  border-color: rgba(255, 255, 255, 0.5);
}

.footer-search-row .form-control:focus {
  border-color: #ffffff;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.35);
}

#footer .footer-search .btn-outline-light {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.7);
  flex: 0 0 auto;
}

#footer .footer-search .btn-outline-light:hover,
#footer .footer-search .btn-outline-light:focus {
  background-color: #ffffff;
  color: var(--navy) !important;
}

/* --- Bottom bar (unchanged content) ------------------------------------- */

#footer-bottom {
  background: var(--navy-darker);
  backdrop-filter: none;
  color: #B9C0DA;
  border-top: 1px solid rgba(255, 255, 255, 0.12);   /* subtle divider */
}

.footer-bottom-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.5rem;
  color: #B9C0DA;
}

.footer-bottom-nav .list-inline-item {
  margin-right: 0;
}


/* ========================================================================
   LEGAL / LONG-FORM COPY (privacy policy)
   ======================================================================== */

.legal-copy h2 {
  font-size: 1.45rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}


/* ========================================================================
   FORMS (contact form, consultation wizard)
   ======================================================================== */

.contact-form .form-control,
.multistep-appt .form-control {
  border: 1px solid #b9bfd3;
  border-radius: var(--border-radius);
  padding: 0.85rem 1rem;
  font-size: 1rem;
}

.contact-form .form-control:focus,
.multistep-appt .form-control:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 0.2rem rgba(40, 55, 117, 0.2);
}

.contact-form label,
.multistep-appt label.form-label {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

.contact-panel {
  height: 100%;
  padding: 2.25rem 2rem;
  background-color: var(--tint);
  border-top: 2px solid var(--gold);
  border-radius: var(--border-radius);
}

/* Contact page form column: the target of /contact/#capability-statement.
   The sticky header is 92px tall (about 65px once scrolled), so the native
   fragment scroll stops clear of it instead of hiding "Send a Message"
   underneath; the message box then fits in a 1440x900 or 390x844 view. */
#capability-statement {
  scroll-margin-top: 112px;
}

/* Consultation wizard tiles (template styles in clue.css, recoloured) */
.appt-day {
  background-color: var(--tint);
  border: 1px solid var(--rule);
  border-radius: var(--border-radius-lg);
}

.appt-day .btn-outline-primary,
.appt-nextstep {
  border-radius: var(--border-radius);
  padding: 1rem 0.75rem;
  margin: 0.25rem 0;
  height: calc(100% - 0.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  line-height: 1.3;
}

.appt-day .btn-outline-primary i {
  font-size: 1.9rem;
  margin: 0;
}

.appt-day .btn-outline-primary:hover,
.appt-nextstep:hover {
  background-color: #eef1f8 !important;
}

.multistep-appt .appt-step-heading {
  font-family: var(--font-family-headings);
  font-weight: 700;
  color: var(--navy);
  font-size: 1.35rem;
}

.multistep-appt .appt-nextstep {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}


/* ========================================================================
   HERO FADE-IN ANIMATION
   ======================================================================== */

@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-fade-in {
  opacity: 0;
  animation: heroFadeIn 0.8s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
  .hero-fade-in {
    opacity: 1;
    animation: none;
  }
}


/* ========================================================================
   SCROLL ANIMATIONS (js/scroll-animate.js adds .in-view)
   ======================================================================== */

[data-animate] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate].in-view {
  opacity: 1;
  transform: translateY(0);
}

[data-animate="fade"] {
  transform: none;
}

[data-animate-stagger] > *:nth-child(2) { transition-delay: 0.08s; }
[data-animate-stagger] > *:nth-child(3) { transition-delay: 0.16s; }
[data-animate-stagger] > *:nth-child(4) { transition-delay: 0.24s; }
[data-animate-stagger] > *:nth-child(5) { transition-delay: 0.32s; }
[data-animate-stagger] > *:nth-child(6) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ========================================================================
   ACCESSIBILITY WIDGET (Sienna) OVERRIDES
   ======================================================================== */

html body .asw-menu-btn {
  background: var(--navy) !important;
  outline-color: var(--navy-deep) !important;
}


/* ========================================================================
   FIXED-WIDGET CLEARANCE (mobile)
   The Sienna accessibility button (fixed, bottom-left) and the chat bubble
   (fixed, bottom-right) sit over whatever scrolls beneath them. On small
   screens:
   - form submit buttons go full width, so the widgets can never cover the
     whole target and its centre stays tappable at any scroll position;
   - the footer bottom bar gets extra bottom space, so the last links on a
     page can scroll fully clear of both widgets.
   ======================================================================== */

@media (max-width: 767.98px) {
  .contact-form button[type="submit"],
  .multistep-appt button[type="submit"] {
    width: 100%;
  }

  #footer-bottom {
    padding-bottom: 5.5rem;
  }
}



/* ========================================================================
   ICONS  ({% icon "name" %} shortcode, Tabler outline)
   Navy beside text on light backgrounds; gold on navy bands. Always
   aria-hidden: the text beside an icon carries the meaning.
   ======================================================================== */

.icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  flex: 0 0 auto;
  vertical-align: -0.3em;
  color: var(--navy);
}

h2.has-icon,
h3.has-icon,
.card-title.has-icon {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

h3.has-icon .icon,
.card-title.has-icon .icon {
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.02em;
}

.section-dark .icon,
.cta-band .icon,
.inline-cta .icon,
#inside-header .icon {
  color: var(--gold);
}


/* ========================================================================
   CARD BUTTONS, SECTION LINKS AND CTAs
   ======================================================================== */

.service-card .card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.service-card .card-more {
  align-self: flex-start;
  margin-top: 1.25rem;
}

.service-card .card-body > p {
  flex-grow: 1;
}

.section-link a,
.faq-more a,
.audience-link {
  font-weight: 600;
}

.section-link a::after,
.audience-link::after {
  content: " \2192";
}

.audience-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

/* inlineCta: slim navy band, one sentence and one button */
.inline-cta {
  /* navy-deep, not navy, so it reads as its own band next to the navy
     whyCorvinus section */
  background-color: var(--navy-deep);
  color: #ffffff;
  padding: 2.25rem 0;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
}

.inline-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  text-align: center;
}

.inline-cta-text {
  font-family: var(--font-family-headings);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.4;
  color: #ffffff;
  max-width: 48rem;
}

.inline-cta .btn {
  flex: 0 0 auto;
}

@media (min-width: 992px) {
  .inline-cta-inner {
    flex-direction: row;
    text-align: start;
  }
}

.cta-band a:not(.btn) {
  color: #ffffff;
  text-decoration-color: var(--gold);
}


/* ========================================================================
   INTRO SPLIT PHOTO SLOT  (introSplit with an image; supply 1200x1000, 6:5)
   Fixed 6:5 box so the layout does not jump while the photo loads.
   ======================================================================== */

.intro-split-media {
  position: relative;
  aspect-ratio: 6 / 5;
  overflow: hidden;
  border-radius: 6px;
  border-bottom: 2px solid var(--gold);
  background-color: var(--tint);
}

.intro-split-media .intro-split-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
  border-radius: 0;
}


/* ========================================================================
   INSIDE-PAGE HEADER PHOTO  (front matter headerImage: /img/headers/...)
   The layout sets --header-image and adds body.has-header-image. A solid
   navy layer at 85% sits over the photo. Worst case (a pure-white photo)
   computes to 7.1:1 for the white h1 and 5.4:1 for the #DCE0EE lead. No parallax
   (background-attachment stays scroll). Supply 1920x640, landscape.
   ======================================================================== */

.has-header-image #inside-header {
  background:
    linear-gradient(rgba(40, 55, 117, 0.85), rgba(40, 55, 117, 0.85)),
    var(--header-image) center center / cover no-repeat,
    var(--navy);
  background-attachment: scroll;
  min-height: clamp(240px, 30vw, 400px);
  display: flex;
  align-items: center;
}

.has-header-image #inside-header > .container {
  width: 100%;
}



/* ========================================================================
   QUICK CONTACT BAND  (macro quickContact, rendered by the layout)
   White band with a gold top rule, between the page's last section (often
   the navy-deep ctaBand) and the footer's light-tint masthead. One row at
   >=1200px, heading row + field row at 992-1199px, stacked on phones.
   ======================================================================== */

:root {
  /* Shared vertical padding for the three closing bands: quick contact,
     certifications strip, footer columns. */
  --band-pad: 3rem;
}

@media (max-width: 767.98px) {
  :root { --band-pad: 2.25rem; }
}

.quick-contact {
  background-color: #ffffff;
  border-top: 1px solid var(--gold);
  padding: var(--band-pad) 0;
}

.quick-contact h2 {
  color: var(--navy);
  font-size: 1.6rem;
}

.quick-contact-intro p {
  color: var(--ink-soft);
  line-height: 1.5;
}

.quick-contact .form-label {
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.quick-contact .form-control {
  border: 1px solid #b9bfd3;
  border-radius: var(--border-radius);
  padding: 0.6rem 0.8rem;
}

.quick-contact .form-control:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 0.2rem rgba(40, 55, 117, 0.2);
}

.quick-contact-submit {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

/* Honeypot, as on the old site: out of sight, out of the tab order and
   out of the accessibility tree. */
.qc-hp {
  display: none !important;
}

/* The ctaBand directly above the quick-contact band loses its button
   styling, so two stacked bands never each carry a button. */
.has-quick-contact .cta-band .cta-band-btn {
  background: none;
  border: 0;
  padding: 0;
  color: #ffffff !important;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 0.25em;
}

.has-quick-contact .cta-band .cta-band-btn:hover,
.has-quick-contact .cta-band .cta-band-btn:focus {
  background: none;
  color: var(--gold-soft) !important;
}

@media (max-width: 767.98px) {
  /* Full-width submit: the fixed accessibility and chat widgets can never
     cover the whole target. */
  .quick-contact-submit {
    width: 100%;
  }
}


/* Count-aware grids (gridCols filter): at tablet width an odd count that 2
   and 3 columns cannot place without a lone last card (7, 13...) runs as 2
   columns with the first card spanning the row. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .row.grid-lead-md > :first-child {
    flex: 0 0 auto;
    width: 100%;
  }
}