/* ==========================================================================
   Skylight Leadership - Marketing Site Stylesheet
   Design system matched to the Skylight 360 portal (rgw_assessment_portal_v2.html)
   No build tools. Plain CSS. Edit directly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette (matched to the live portal) */
  --navy:      #0D1B2A;   /* primary dark */
  --navy-deep: #122233;   /* deeper navy variant */
  --navy-mid:  #1A3A52;   /* secondary navy, used for service cards */
  --gold:      #C9973A;   /* brand accent / CTAs */
  --gold-lt:   #E8B96A;   /* lighter gold for gradients + hover */
  --gold-dk:   #B0812C;   /* darker gold for pressed states */
  --cream:     #FAF7F2;   /* warm page background */
  --white:     #FFFFFF;
  --gray-lt:   #F5F5F5;
  --gray-bd:   #E5E0D8;   /* borders on cream */
  --slate:     #4A5568;   /* body text */
  --gray-md:   #666666;   /* secondary text */
  --gray-dk:   #333333;   /* text on light */

  /* Typography */
  /* No webfont CDN calls. System stacks only, per deployment rules. */
  --font-head: Georgia, Garamond, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Radius + elevation */
  --r:   12px;
  --r-sm: 8px;
  --r-xs: 4px;
  --sh:  0 4px 24px rgba(13, 27, 42, .10);
  --sh2: 0 12px 48px rgba(13, 27, 42, .18);
  --sh-card: 0 2px 8px rgba(0, 0, 0, .08);

  /* Layout */
  --container: 1200px;
  --gap: 24px;
  --section-y: 56px;
  --pad-x: 24px;
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--slate);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(38px, 5.2vw, 64px); line-height: 1.1; }
h2 { font-size: clamp(28px, 3.4vw, 40px); }
h3 { font-size: clamp(21px, 2.1vw, 28px); line-height: 1.3; }
h4 { font-size: 18px; line-height: 1.4; }

p { line-height: 1.6; }

a { color: var(--gold-dk); text-decoration: none; transition: color .2s; }
a:hover { color: var(--gold); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

ul, ol { list-style: none; }

/* Accessible focus ring, gold, 2px offset (per brand spec) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Skip link for keyboard and screen reader users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--gold);
  color: var(--navy);
  padding: 12px 24px;
  font-weight: 700;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; text-decoration: none; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.section { padding: var(--section-y) 0; }
.section--tight { padding: 40px 0; }
.section--cream { background: var(--cream); }
.section--gray  { background: var(--gray-lt); }
.section--navy  { background: var(--navy); }
.section--navy h2, .section--navy h3, .section--navy h4 { color: var(--white); }
.section--navy p { color: rgba(255, 255, 255, .82); }

/* Section heading block */
.section-head { max-width: 760px; margin-bottom: 36px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-dk);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: '';
  width: 28px; height: 2px;
  background: var(--gold);
  flex-shrink: 0;
}
.section-head--center .eyebrow::before { display: none; }
.section--navy .eyebrow { color: var(--gold-lt); }

.section-sub {
  font-size: 17px;
  color: var(--gray-md);
  margin-top: 16px;
  line-height: 1.65;
}
.section--navy .section-sub { color: rgba(255, 255, 255, .78); }

/* Generic responsive grids */
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Fits as many columns as the space allows, then wraps. Use this instead of a
   fixed column count for tile rows that sit inside an already narrow column,
   otherwise they overflow the viewport on tablet widths. */
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s, border-color .2s;
  text-align: center;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Primary: gold background, navy text */
.btn-primary { background: var(--gold); color: var(--navy); }
.btn-primary:hover { background: var(--gold-dk); color: var(--navy); box-shadow: var(--sh); }

/* Secondary: navy background, gold text */
.btn-secondary { background: var(--navy); color: var(--gold-lt); }
.btn-secondary:hover { background: var(--navy-deep); color: var(--gold-lt); box-shadow: var(--sh); }

/* Outline variants */
.btn-outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-outline:hover { background: var(--navy); color: var(--white); }

.btn-outline-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, .45);
}
.btn-outline-light:hover { background: rgba(255, 255, 255, .12); color: var(--white); border-color: var(--white); }

.btn-lg { font-size: 17px; padding: 15px 32px; }
.btn-sm { font-size: 14px; padding: 9px 18px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   5. HEADER + NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13, 27, 42, .97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nav-brand:hover { text-decoration: none; }

.nav-mark {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--gold), var(--gold-lt));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  flex-shrink: 0;
  letter-spacing: -.02em;
}
.nav-name {
  font-family: var(--font-head);
  font-size: 19px;
  color: var(--white);
  line-height: 1.1;
}
.nav-name span { display: block; font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-lt); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.nav-link {
  display: inline-block;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, .72);
  padding: 9px 14px;
  border-radius: var(--r-sm);
  transition: color .2s, background .2s;
  white-space: nowrap;
}
.nav-link:hover { color: var(--white); background: rgba(255, 255, 255, .09); text-decoration: none; }
.nav-link[aria-current="page"] { color: var(--gold-lt); }
.nav-link[aria-current="page"]:hover { color: var(--gold-lt); }

.nav-cta {
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  white-space: nowrap;
  transition: background .2s;
}
.nav-cta:hover { background: var(--gold-lt); color: var(--navy); text-decoration: none; }

/* Portal login group. Three separate login buttons crowd the bar, so they
   live behind one gold button that opens a small panel. On mobile the panel
   renders inline as a plain list. */
.nav-portal { position: relative; display: flex; align-items: center; }

/* Portal Login is now a real link. The small caret beside it opens the
   role picker for people who need a specific login. */
.nav-portal-link { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.nav-portal-toggle {
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  border: none;
  border-left: 1px solid rgba(13, 27, 42, .22);
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.nav-portal-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  background: var(--white);
  border: 1px solid var(--gray-bd);
  border-radius: var(--r-sm);
  box-shadow: var(--sh2);
  padding: 6px;
  z-index: 120;
}
.nav-portal-menu[hidden] { display: none; }
.nav-portal-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--r-xs);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--navy);
}
.nav-portal-menu a:hover { background: var(--cream); color: var(--gold-dk); text-decoration: none; }
.nav-portal-menu .nav-portal-label {
  display: block;
  padding: 8px 14px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray-md);
}

/* Mobile menu toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  padding: 8px;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.nav-toggle:hover { background: rgba(255, 255, 255, .09); }
.nav-toggle svg { display: block; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open  { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--navy);
  overflow: hidden;
}
.hero::after {
  /* soft gold light bloom, evokes the "skylight" idea */
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(201, 151, 58, .22) 0%, rgba(201, 151, 58, 0) 68%);
  pointer-events: none;
  z-index: 1;
}

/* Full bleed hero photo, matching the portal treatment: the image spans the
   whole width and a navy gradient runs across it so text stays readable on the
   left while the photo shows through on the right.
   TO ADD THE REAL PHOTO: drop it at assets/img/hero.jpg. Nothing else to change.
   Until then the gradient alone renders, which still looks intentional. */
.hero-img {
  position: absolute;
  inset: 0;
  background-image: url('../img/hero.jpg');
  /* Keep the presenter and screens in frame. The audience fills the lower half,
     so anchoring high shows the room rather than the backs of chairs. */
  background-position: 76% 30%;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Left third stays near solid so the headline holds, then opens up sharply
     so the projection screens actually read through on the right. The earlier
     ramp bottomed out at .55, which over a dark ballroom left the photo
     invisible. */
  background: linear-gradient(90deg,
    rgba(13, 27, 42, .97) 0%,
    rgba(13, 27, 42, .93) 32%,
    rgba(13, 27, 42, .66) 58%,
    rgba(13, 27, 42, .34) 82%,
    rgba(13, 27, 42, .26) 100%);
}
/* Single column on the home hero now that the photo is the background */
.hero--photo .hero-grid { grid-template-columns: 1fr; }
/* Desktop and mobile are set independently. A single vh value cannot serve
   both, and vh was not the binding constraint anyway: the content is taller
   than the min-height, so the real levers are type scale and spacing. */
.hero--photo .hero-inner { padding: 44px 0 40px; min-height: 0; display: flex; align-items: center; }
/* Hero headline runs smaller than the global h1, which is sized for page titles
   that sit on one or two lines. This one runs to three. */
.hero--photo h1 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.06; margin-bottom: 14px; }
.hero--photo .hero-tagline { font-size: clamp(17px, 1.6vw, 20px); margin-bottom: 12px; }
.hero--photo .hero-sub { font-size: 16.5px; line-height: 1.6; margin-bottom: 20px; max-width: 520px; }
.hero--photo .btn-lg { font-size: 16px; padding: 12px 26px; }
.hero--photo .hero-text { max-width: 620px; }

@media (max-width: 768px) {
  /* Vertical gradient on narrow screens so the text sits over the dark end */
  .hero-overlay {
    background: linear-gradient(180deg,
      rgba(13, 27, 42, .92) 0%,
      rgba(13, 27, 42, .88) 55%,
      rgba(13, 27, 42, .78) 100%);
  }
  .hero--photo .hero-inner { padding: 30px 0 28px; min-height: 0; }
  .hero--photo h1 { font-size: 30px; line-height: 1.08; margin-bottom: 10px; }
  .hero--photo .hero-tagline { font-size: 16px; margin-bottom: 9px; }
  .hero--photo .hero-sub { font-size: 15px; line-height: 1.55; margin-bottom: 16px; }
  .hero--photo .btn-row { gap: 10px; }
  .hero--photo .btn-lg { font-size: 15px; padding: 11px 20px; }
}
.hero-inner {
  position: relative;
  z-index: 2;
  padding: 88px 0 76px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items: center;
}
.hero h1 { color: var(--white); margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: var(--gold-lt); }
.hero-sub {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .86);
  max-width: 540px;
  margin-bottom: 30px;
}
.hero .eyebrow { color: var(--gold-lt); }

/* Compact hero for interior pages */
.hero--page .hero-inner { padding: 56px 0 50px; }
.hero--page .hero-grid { grid-template-columns: 1fr; gap: 0; }
.hero--page .hero-sub { margin-bottom: 0; max-width: 680px; }

/* Stat strip under the hero */
.hero-stats {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
}
.hero-stats .grid { padding: 26px 0; }
.stat { text-align: center; }
.stat-num {
  font-family: var(--font-head);
  font-size: 34px;
  color: var(--gold-lt);
  line-height: 1;
  margin-bottom: 6px;
}
.stat-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */

/* Service card: navy background, white text, gold heading (per brand spec) */
.service-card {
  background: var(--navy-mid);
  color: rgba(255, 255, 255, .86);
  padding: 22px 20px;
  border-radius: var(--r-xs);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .2s, box-shadow .2s;
}
.service-card:hover { transform: translateY(-3px); box-shadow: var(--sh2); }
.service-card h3 { color: var(--gold-lt); font-size: 24px; }

/* Home page teaser variant. Smaller, tighter, and topped with a restrained gold
   rule instead of an emoji. */
.service-card--rule::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 6px;
}

.service-card--teaser { padding: 20px 18px; gap: 8px; }
.service-card--teaser::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 4px;
}
.service-card--teaser h3 { font-size: 19px; line-height: 1.25; }
.service-card--teaser p { font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .8); }
.service-card--teaser .service-meta { padding-top: 10px; font-size: 12px; }
.service-card p { color: rgba(255, 255, 255, .86); font-size: 15.5px; }
.service-card .service-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: rgba(201, 151, 58, .18);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: 4px;
}
.service-card .service-meta {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-lt);
}

/* Feature card: light surface */
.feature-card {
  background: var(--white);
  border: 1px solid var(--gray-bd);
  border-radius: var(--r);
  padding: var(--gap);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--sh); border-color: var(--gold); }
.feature-card h3 { font-size: 22px; margin-bottom: 10px; }
.feature-card p { font-size: 15.5px; color: var(--gray-md); }
/* Restrained alternative to an icon: a short gold rule, matching the home
   service card teasers. Used where an emoji would read too casual. */
.feature-card--rule::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 16px;
}

/* Hero tagline: the positioning line, set between the headline and the
   descriptive paragraph and larger than body copy so it lands first. */
.hero-tagline {
  font-family: var(--font-head);
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.4;
  color: var(--gold-lt);
  margin-bottom: 18px;
  max-width: 560px;
}

.feature-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--gold), var(--gold-lt));
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}

/* Testimonial card: white, 3px gold left border (per brand spec) */
.testimonial {
  background: var(--white);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  padding: var(--gap);
  box-shadow: var(--sh-card);
  color: var(--navy);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.testimonial blockquote {
  font-size: 16px;
  font-style: italic;
  line-height: 1.65;
  color: var(--navy);
}
.testimonial-attr { margin-top: auto; }
.testimonial-name  { font-size: 14px; font-weight: 600; color: var(--navy); }
.testimonial-title { font-size: 14px; font-weight: 400; color: var(--gray-md); }
.testimonial-org   { font-size: 14px; font-weight: 400; color: var(--gray-md); }

/* Numbered step card */
.step { position: relative; padding-top: 8px; }
.step-num {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-lt));
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 21px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.step h3 { font-size: 22px; margin-bottom: 10px; }
.step p { color: var(--gray-md); font-size: 15.5px; }
.section--navy .step p { color: rgba(255, 255, 255, .78); }

/* Pillar tile (Leadership Health Index) */
.pillar {
  background: var(--white);
  border: 1px solid var(--gray-bd);
  border-radius: var(--r);
  padding: 22px 18px;
  text-align: center;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.pillar:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--sh); }
.pillar-icon { font-size: 26px; margin-bottom: 10px; }
.pillar-name { font-family: var(--font-head); font-size: 17px; color: var(--navy); margin-bottom: 8px; line-height: 1.25; }
.pillar-weight {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gold-dk);
  background: rgba(201, 151, 58, .14);
  border-radius: 999px;
  padding: 3px 12px;
}

/* Portal / audience entry card */
.entry-card {
  background: var(--white);
  border: 1px solid var(--gray-bd);
  border-radius: var(--r);
  padding: 28px var(--gap);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.entry-card:hover { transform: translateY(-3px); box-shadow: var(--sh2); border-color: var(--gold); }
.entry-card h3 { font-size: 22px; }
.entry-card p { font-size: 15px; color: var(--gray-md); }
.entry-card .btn { margin-top: auto; align-self: flex-start; }

/* Assessment category card */
.cat-card {
  background: var(--white);
  border: 1px solid var(--gray-bd);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 22px var(--gap);
}
.cat-card h3 { font-size: 20px; margin-bottom: 6px; }
.cat-card .cat-count {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-dk); margin-bottom: 12px; display: block;
}
.cat-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cat-list li {
  font-size: 13px;
  color: var(--slate);
  background: var(--cream);
  border: 1px solid var(--gray-bd);
  border-radius: 999px;
  padding: 4px 12px;
}

/* --------------------------------------------------------------------------
   8. LOGO CAROUSEL / CLIENT STRIP
   -------------------------------------------------------------------------- */
.logo-strip { background: var(--white); padding: 40px 0; border-top: 1px solid var(--gray-bd); border-bottom: 1px solid var(--gray-bd); }
.logo-strip-label {
  text-align: center;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gray-md);
  margin-bottom: 26px;
}

/* Viewport with faded edges. The gradient masks are pseudo elements so they
   sit above the moving track without clipping it. */
.logo-carousel {
  position: relative;
  overflow: hidden;
}
.logo-carousel::before,
.logo-carousel::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 90px;
  z-index: 2;
  pointer-events: none;
}
.logo-carousel::before { left: 0;  background: linear-gradient(to right, var(--white) 0%, rgba(255,255,255,0) 100%); }
.logo-carousel::after  { right: 0; background: linear-gradient(to left,  var(--white) 0%, rgba(255,255,255,0) 100%); }

/* The moving track. JS duplicates the logo set once so the loop is seamless. */
.logo-track {
  display: flex;
  align-items: center;
  gap: var(--gap);
  width: max-content;
  animation: logo-scroll 60s linear infinite;
  /* Promote to its own compositor layer. Without this the browser repaints the
     whole strip each frame, which is what caused the stutter. */
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.logo-carousel:hover .logo-track,
.logo-carousel:focus-within .logo-track { animation-play-state: paused; }

@keyframes logo-scroll {
  from { transform: translate3d(0, 0, 0); }
  /* -50% because the track holds exactly two copies of the logo set */
  to   { transform: translate3d(-50%, 0, 0); }
}

.logo-track img,
.logo-track .logo-name {
  height: 48px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
}

/* Interim treatment: real client names as text until logo files arrive.
   Swap each .logo-name for <img class="logo-track-img" src="..." alt="Org name">. */
.logo-name {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 0 18px;
  font-family: var(--font-head);
  font-size: 17px;
  color: var(--navy);
  opacity: .78;
}
.logo-track img {
  filter: grayscale(1);
  opacity: .7;
  transition: filter .2s, opacity .2s;
}
.logo-track img:hover { filter: grayscale(0); opacity: 1; }

/* Scroll arrows. Hidden on desktop where auto scroll plus hover pause is enough,
   shown on touch widths where hovering to pause is not possible. */
.logo-nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--gray-bd);
  background: var(--white);
  color: var(--navy);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--sh-card);
}
.logo-nav:hover { background: var(--cream); border-color: var(--gold); }
.logo-nav--prev { left: 4px; }
.logo-nav--next { right: 4px; }

/* When JS hands manual control to the user, swap the animation for real scrolling */
.logo-carousel.is-manual { overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.logo-carousel.is-manual::-webkit-scrollbar { display: none; }
.logo-carousel.is-manual .logo-track { animation: none; }

@media (max-width: 768px) {
  .logo-nav { display: flex; }
  .logo-carousel::before, .logo-carousel::after { width: 48px; }
}

/* Respect reduced motion: stop the scroll, let the row wrap normally */
@media (prefers-reduced-motion: reduce) {
  .logo-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .logo-carousel::before, .logo-carousel::after { display: none; }
  .logo-nav { display: none; }
}

/* --------------------------------------------------------------------------
   9. PLACEHOLDER TREATMENT
   Everything Rhonda still needs to swap is marked with .ph so it is
   impossible to miss on the page. Delete the class once real content lands.
   -------------------------------------------------------------------------- */
.ph {
  position: relative;
  border: 2px dashed var(--gold);
  background: repeating-linear-gradient(
    45deg,
    rgba(201, 151, 58, .05),
    rgba(201, 151, 58, .05) 10px,
    rgba(201, 151, 58, .10) 10px,
    rgba(201, 151, 58, .10) 20px
  );
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 24px;
  color: var(--gold-dk);
  min-height: 180px;
}
.ph-label { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ph-note  { font-size: 13px; color: var(--gray-md); max-width: 300px; line-height: 1.5; }
.ph--logo { min-height: 56px; width: 150px; padding: 12px; }
.ph--logo .ph-label { font-size: 11px; letter-spacing: .06em; }
.ph--wide { min-height: 320px; }
.ph--portrait { min-height: 420px; }

/* Inline badge for placeholder text, so copy still reads naturally */
.ph-text {
  background: rgba(201, 151, 58, .16);
  border-bottom: 2px dotted var(--gold);
  padding: 0 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   10. SPLIT / MEDIA SECTIONS
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split--media-right .split-media { order: 2; }
.split-body h2 { margin-bottom: 18px; }
.split-body p + p { margin-top: 16px; }
.split-body p { color: var(--gray-md); font-size: 16.5px; }
.section--navy .split-body p { color: rgba(255, 255, 255, .82); }

.portrait {
  border-radius: var(--r);
  box-shadow: var(--sh2);
  width: 100%;
}

/* Checklist */
.checklist { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  color: var(--slate);
  line-height: 1.55;
}
.section--navy .checklist li { color: rgba(255, 255, 255, .86); }
.checklist li::before {
  content: '';
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230D1B2A'%3E%3Cpath d='M8.2 13.8 5 10.6l1.3-1.3 1.9 1.9 5.5-5.5L15 7z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* --------------------------------------------------------------------------
   11. CALL TO ACTION BAND
   -------------------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  content: '';
  position: absolute;
  bottom: -50%; left: -5%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(201, 151, 58, .18) 0%, rgba(201, 151, 58, 0) 70%);
  pointer-events: none;
}
.cta-band .container { position: relative; z-index: 2; text-align: center; }
.cta-band h2 { color: var(--white); margin-bottom: 16px; }
.cta-band p { color: rgba(255, 255, 255, .82); font-size: 17.5px; max-width: 620px; margin: 0 auto 28px; }

/* --------------------------------------------------------------------------
   12. FORMS
   -------------------------------------------------------------------------- */
.form-card {
  background: var(--white);
  border: 1px solid var(--gray-bd);
  border-radius: var(--r);
  padding: 32px;
  box-shadow: var(--sh);
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 7px;
}
.field .req { color: var(--gold-dk); }
.field .hint { font-size: 13px; color: var(--gray-md); font-weight: 400; margin-top: 6px; }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--gray-dk);
  background: var(--white);
  border: 1px solid var(--gray-bd);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 151, 58, .16);
}
.field textarea { resize: vertical; min-height: 130px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.form-note { font-size: 13.5px; color: var(--gray-md); margin-top: 16px; line-height: 1.55; }

/* Honeypot field, hidden from humans, catches naive bots */
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Contact detail list */
.contact-list { display: flex; flex-direction: column; gap: 20px; }
/* No icon glyphs. A thin gold rule marks each entry, matching the treatment used
   on the media list, pull quotes, and the service and conviction cards. */
.contact-item {
  border-left: 2px solid var(--gold);
  padding-left: 16px;
}
.contact-item h4 { margin-bottom: 3px; }
.contact-item p, .contact-item a { font-size: 15px; color: var(--gray-md); }

/* --------------------------------------------------------------------------
   13. FAQ / ACCORDION
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--gray-bd); }
.faq-item { border-bottom: 1px solid var(--gray-bd); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  background: none;
  border: none;
  font-family: var(--font-head);
  font-size: 19px;
  color: var(--navy);
  padding: 22px 4px;
  cursor: pointer;
  line-height: 1.35;
}
.faq-q:hover { color: var(--gold-dk); }
.faq-icon { flex-shrink: 0; color: var(--gold); font-size: 22px; transition: transform .2s; line-height: 1; }
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-a { padding: 0 4px 22px; max-width: 860px; }
.faq-a p { color: var(--gray-md); font-size: 16px; }
.faq-a[hidden] { display: none; }

/* --------------------------------------------------------------------------
   14. TABLES (pricing / comparison)
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--gray-bd); border-radius: var(--r); background: var(--white); }
table { width: 100%; border-collapse: collapse; min-width: 620px; }
thead th {
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  padding: 14px 18px;
}
tbody td { padding: 14px 18px; border-bottom: 1px solid var(--gray-bd); font-size: 15px; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) { background: var(--cream); }
tbody th { text-align: left; padding: 14px 18px; font-weight: 600; color: var(--navy); border-bottom: 1px solid var(--gray-bd); font-size: 15px; }

/* Pricing tiers */
.tier {
  background: var(--white);
  border: 1px solid var(--gray-bd);
  border-radius: var(--r);
  padding: 30px var(--gap);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.tier--featured { border: 2px solid var(--gold); box-shadow: var(--sh2); }
.tier-badge {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--navy);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.tier-name { font-family: var(--font-head); font-size: 24px; color: var(--navy); }
.tier-price { font-family: var(--font-head); font-size: 40px; color: var(--navy); line-height: 1; }
.tier-price span { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--gray-md); }
.tier-desc { font-size: 15px; color: var(--gray-md); }
.tier .checklist { margin-top: 4px; margin-bottom: 8px; }
.tier .checklist li { font-size: 15px; }
.tier .btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy); color: rgba(255, 255, 255, .68); padding: 56px 0 28px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px var(--gap);
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.footer-brand .nav-brand { margin-bottom: 16px; }
.footer-blurb { font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, .62); max-width: 320px; }
.footer-col h4 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14.5px; color: rgba(255, 255, 255, .68); }
.footer-col a:hover { color: var(--gold-lt); text-decoration: none; }

.footer-bottom {
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .5);
}
.footer-bottom a { color: rgba(255, 255, 255, .5); }
.footer-bottom a:hover { color: var(--gold-lt); text-decoration: none; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 18px; }

/* --------------------------------------------------------------------------
   16. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .container { padding-left: 32px; padding-right: 32px; }
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split--media-right .split-media { order: 0; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  :root { --section-y: 44px; --pad-x: 24px; }

  .nav { min-height: 62px; }
  .nav-toggle { display: block; }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--navy);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    padding: 14px var(--pad-x) 20px;
    box-shadow: var(--sh2);
  }
  .nav-links.is-open { display: flex; }
  .nav-link { padding: 12px 14px; font-size: 16px; }
  .nav-cta { text-align: center; padding: 13px 20px; font-size: 16px; margin-top: 6px; }

  /* On mobile the portal logins render inline, no dropdown needed */
  .nav-portal { width: 100%; }
  .nav-portal-toggle { display: none; }
  .nav-portal-menu {
    position: static;
    display: block;
    min-width: 0;
    margin-top: 10px;
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    box-shadow: none;
  }
  .nav-portal-menu[hidden] { display: block; }
  .nav-portal-menu a { color: var(--white); font-size: 16px; padding: 12px 14px; }
  .nav-portal-menu a:hover { background: rgba(255, 255, 255, .1); color: var(--gold-lt); }
  .nav-portal-menu .nav-portal-label { color: var(--gold-lt); }

  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .hero-inner { padding: 60px 0 52px; }
  .hero-sub { font-size: 17px; }
  .hero-stats .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .form-card { padding: 24px; }
  .split { gap: 30px; }
}

/* Very narrow screens. The brand lockup plus the menu button is the tightest row
   on the page, so scale it down rather than let the header push the page wide. */
@media (max-width: 360px) {
  .nav-name { font-size: 15px; }
  .nav-name span { font-size: 9px; letter-spacing: .1em; }
  .nav-mark { width: 30px; height: 30px; font-size: 11px; }
  .nav-brand { gap: 8px; }
}

@media (max-width: 480px) {
  :root { --pad-x: 18px; --gap: 18px; }
  .grid-4 { grid-template-columns: 1fr; }
  .hero-stats .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .nav-name { font-size: 17px; }
  .stat-num { font-size: 28px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   17. MOTION + PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .btn:hover, .feature-card:hover, .service-card:hover,
  .entry-card:hover, .pillar:hover { transform: none; }
}

@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle { display: none; }
  body { color: #000; background: #fff; }
  .hero { background: #fff; }
  .hero h1, .hero-sub { color: #000; }
}


/* --------------------------------------------------------------------------
   19. CASE STUDY PAGE
   -------------------------------------------------------------------------- */
.case-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--gap); }
.case-metric {
  background: var(--white);
  border: 1px solid var(--gray-bd);
  border-top: 3px solid var(--gold);
  border-radius: var(--r-xs);
  padding: 20px 18px;
  text-align: center;
}
.case-metric-num {
  font-family: var(--font-head);
  font-size: 30px;
  color: var(--navy);
  line-height: 1.1;
  margin-bottom: 6px;
}
.case-metric-label { font-size: 13.5px; color: var(--gray-md); line-height: 1.45; }
.section--navy .case-metric { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.section--navy .case-metric-num { color: var(--gold-lt); }
.section--navy .case-metric-label { color: rgba(255,255,255,.75); }

/* Oversized single statistic, used for the facilitator NPS callout */
.stat-callout {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  border-top: 3px solid var(--gold);
  border-radius: var(--r-sm);
  padding: 32px 28px;
  text-align: center;
}
.stat-callout-num {
  font-family: var(--font-head);
  font-size: clamp(56px, 9vw, 88px);
  line-height: 1;
  color: var(--gold-lt);
  margin-bottom: 10px;
}
.stat-callout-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  margin-bottom: 16px;
}
.stat-callout-note {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .66);
  max-width: 260px;
  margin: 0 auto;
}
/* Light surface variant, in case the callout ever moves off a navy section */
.section:not(.section--navy) .stat-callout {
  background: var(--cream);
  border-color: var(--gray-bd);
}
.section:not(.section--navy) .stat-callout-num { color: var(--navy); }
.section:not(.section--navy) .stat-callout-label { color: var(--gray-dk); }
.section:not(.section--navy) .stat-callout-note { color: var(--gray-md); }

/* Quiet explanatory note beneath a metrics list. The selectors are qualified
   with .section--navy because the plain `.section--navy p` rule would otherwise
   out-specify a bare .metric-note and the note would not read as lighter. */
.metric-note {
  font-size: 14px;
  line-height: 1.55;
  border-left: 2px solid rgba(255, 255, 255, .2);
  padding-left: 14px;
  margin-top: 22px;
  max-width: 560px;
}
.section--navy p.metric-note { color: rgba(255, 255, 255, .55); }
.section:not(.section--navy) p.metric-note {
  color: var(--gray-md);
  border-left-color: var(--gray-bd);
}

/* Results layout: callout beside the metrics list */
.results-split { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: start; }
@media (max-width: 860px) { .results-split { grid-template-columns: 1fr; gap: 28px; } }

/* Pull quotes from participants */
.quote-group { margin-bottom: 28px; }
.quote-group h3 { font-size: 20px; margin-bottom: 18px; }
.pullquote {
  border-left: 3px solid var(--gold);
  padding: 2px 0 2px 20px;
  margin-bottom: 14px;
  font-size: 16.5px;
  font-style: italic;
  line-height: 1.6;
  color: var(--navy);
}

/* Provenance note, for work delivered under the former business name */
.provenance {
  background: var(--cream);
  border: 1px solid var(--gray-bd);
  border-radius: var(--r-sm);
  padding: 14px 18px;
  font-size: 14.5px;
  color: var(--gray-md);
}

/* Home page case study teaser */
.case-teaser { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; }
@media (max-width: 980px) { .case-teaser { grid-template-columns: 1fr; gap: 28px; } }


/* --------------------------------------------------------------------------
   20. MEDIA APPEARANCES (About page)
   A linked list grouped by outlet, not a logo bar. Station marks are not used,
   and no station video or imagery is embedded or self hosted.
   -------------------------------------------------------------------------- */
.media-grid {
  display: grid;
  /* min(280px, 100%) rather than a bare 280px: on a 320px screen the container is
     narrower than 280px, and a fixed min track would force an overflow. */
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 32px var(--gap);
}
.media-outlet {
  background: var(--white);
  border: 1px solid var(--gray-bd);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 22px 24px;
}
.media-outlet-name {
  font-size: 20px;
  color: var(--navy);
  margin-bottom: 2px;
  line-height: 1.25;
}
.media-affiliate {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-md);
  margin-bottom: 16px;
}
.media-list { display: flex; flex-direction: column; gap: 14px; }
.media-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gray-bd);
}
.media-item:last-child { border-bottom: none; padding-bottom: 0; }
.media-item a {
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--navy);
  font-weight: 500;
}
.media-item a:hover { color: var(--gold-dk); text-decoration: underline; }
/* Entries whose link has gone dead render as plain text, never a broken link */
.media-item span:not(.media-date) {
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--navy);
  font-weight: 500;
}
.media-date { font-size: 13px; color: var(--gray-md); }

/* External link marker, so it is obvious a click leaves the site */
.media-item a::after {
  content: '';
  display: inline-block;
  width: 11px; height: 11px;
  margin-left: 6px;
  vertical-align: baseline;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.4l-8.3 8.3-1.4-1.4L17.6 5H14V3zM5 5h5v2H7v10h10v-3h2v5H5V5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.4l-8.3 8.3-1.4-1.4L17.6 5H14V3zM5 5h5v2H7v10h10v-3h2v5H5V5z'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: .5;
}


/* --------------------------------------------------------------------------
   21. TESTIMONIAL CARDS (self hosted)
   Replaced the third party iframes, which ranged from 420 to 900px tall, could
   not be styled from outside, and drove the uneven spacing.
   -------------------------------------------------------------------------- */
/* Cards stretch to match the tallest in the row. The quote clamp already caps
   how tall any single card can get, so stretching evens the row without
   creating a runaway. */
.tcard-grid { align-items: stretch; }

.tcard {
  background: var(--white);
  border: 1px solid var(--gray-bd);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  box-shadow: var(--sh-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tcard-quote {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--navy);
  font-style: italic;
  position: relative;
  /* Clamp long quotes so a row cannot go ragged. JS reveals the toggle only
     on cards that actually overflow, so short quotes get no button. */
  max-height: 15.5em;
  overflow: hidden;
  transition: max-height .25s ease;
}
.tcard-quote::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3.2em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--white));
  pointer-events: none;
  transition: opacity .2s;
}
.tcard.is-open .tcard-quote { max-height: 200em; }
.tcard.is-open .tcard-quote::after { opacity: 0; }
/* No fade on cards short enough that nothing is hidden */
.tcard:not(.is-clamped) .tcard-quote::after { opacity: 0; }

.tcard-more {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-dk);
  cursor: pointer;
  margin-top: -6px;
}
.tcard-more:hover { color: var(--gold); text-decoration: underline; }

.tcard-person {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--gray-bd);
}
.tcard-photo {
  /* Sources are now ~766px, so 64px display at 192px asset is comfortably
     within native resolution rather than an upscale. */
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--gold);
}
/* Reusable fallback for any testimonial without a photo */
.tcard-initials {
  width: 64px; height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--navy);
  border: 2px solid var(--gold);
  box-shadow: 0 1px 3px rgba(13,27,42,.25);
  color: var(--gold-lt);
  font-family: var(--font-head);
  font-size: 19px;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tcard-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tcard-name { font-size: 15px; font-weight: 600; color: var(--navy); line-height: 1.3; }
.tcard-title { font-size: 13.5px; color: var(--gray-md); line-height: 1.4; }

/* --------------------------------------------------------------------------
   22. CONTACT OPTIONS
   Form and email presented as peers rather than one buried under the other.
   -------------------------------------------------------------------------- */
.contact-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--gap);
  margin-bottom: 40px;
}
.contact-option {
  background: var(--white);
  border: 1px solid var(--gray-bd);
  border-radius: var(--r);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-option--alt { background: var(--cream); }
.contact-option h2 { font-size: 22px; }
.contact-option p { font-size: 14.5px; color: var(--gray-md); }
.contact-option .checklist { margin-top: 2px; margin-bottom: 6px; }
.contact-option .btn { margin-top: auto; align-self: flex-start; }
.contact-option-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-dk);
}
.contact-email-big {
  font-family: var(--font-head);
  font-size: clamp(18px, 2.2vw, 23px) !important;
  color: var(--navy) !important;
  margin-top: auto;
  word-break: break-word;
}
.contact-email-big a { color: var(--navy); border-bottom: 2px solid var(--gold); }
.contact-email-big a:hover { color: var(--gold-dk); text-decoration: none; }

.contact-secondary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--gap);
  padding-top: 36px;
  border-top: 1px solid var(--gray-bd);
}


/* --------------------------------------------------------------------------
   23. CONTENT PHOTOGRAPHS
   Every environmental photo carries the same navy gradient so the set reads as
   one treatment. The tint is presentation only: it lowers contrast and detail,
   which helps a little, but it is NOT de-identification. Faces in these images
   are blurred at the pixel level, or cropped out of frame entirely.
   -------------------------------------------------------------------------- */
.photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  box-shadow: var(--sh);
  line-height: 0;
}
.photo img { width: 100%; height: auto; display: block; }
.photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(160deg,
    rgba(13, 27, 42, .58) 0%,
    rgba(13, 27, 42, .30) 45%,
    rgba(13, 27, 42, .52) 100%);
}
/* Portrait of Rhonda: sharp and unobstructed, no tint. */
.photo--plain::after { display: none; }

.photo-caption { line-height: 1.5; font-size: 13px; color: var(--gray-md); margin-top: 10px; }
.section--navy .photo-caption { color: rgba(255,255,255,.6); }

/* Phones get the narrower hero file rather than a 2048px download */
@media (max-width: 700px) {
  .hero-img {
    background-image: url('../img/hero-mobile.jpg');
    background-position: 54% 38%;
  }
}

/* --------------------------------------------------------------------------
   24. INQUIRY FORM
   -------------------------------------------------------------------------- */
.field-error { display: block; font-size: 13.5px; color: #a3271f; margin-top: 6px; }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #a3271f;
  box-shadow: 0 0 0 3px rgba(163, 39, 31, .12);
}
.form-status {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--r-sm);
  font-size: 14.5px; background: rgba(163, 39, 31, .08);
  border: 1px solid rgba(163, 39, 31, .3); color: #7d1f19;
}
.form-status[hidden] { display: none; }


/* --------------------------------------------------------------------------
   25. CLICKABLE SERVICE CARDS
   Each card is its own link, so a visitor interested in one service lands on
   that service rather than a page covering all four.
   -------------------------------------------------------------------------- */
.service-card--link { text-decoration: none; cursor: pointer; }
.service-card--link:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--sh2); }
.service-card--link:hover h3 { color: var(--gold); }
.service-more {
  margin-top: auto;
  padding-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-lt);
}
.service-card--link:hover .service-more { color: var(--gold); }
.service-more::after { content: ' \2192'; }

/* Compact assessment cards: four across, one line each */
.cat-compact .cat-card { padding: 16px 18px; }
.cat-compact .cat-card h3 { font-size: 16px; line-height: 1.3; margin-bottom: 6px; }
.cat-compact .cat-card p { font-size: 13.5px; line-height: 1.5; }
@media (max-width: 980px) { .cat-compact { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cat-compact { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   26. ANONYMOUS PROGRAM FEEDBACK
   -------------------------------------------------------------------------- */
.feedback-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 32px var(--gap);
}
.feedback-group h3 {
  font-size: 18px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gold);
  display: inline-block;
}
.feedback-list { display: flex; flex-direction: column; gap: 16px; }
.feedback-quote blockquote {
  font-size: 14.5px;
  font-style: italic;
  line-height: 1.6;
  color: var(--navy);
  border-left: 2px solid var(--gray-bd);
  padding-left: 14px;
}
.feedback-quote cite {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: var(--gray-md);
  padding-left: 16px;
  margin-top: 5px;
}

/* --------------------------------------------------------------------------
   27. PHOTO BANNERS
   The call to action bands sit over a photograph rather than flat navy, using
   the same treatment as the hero. The tint is heavier here because the text is
   centred over the whole width rather than held to one side.
   -------------------------------------------------------------------------- */
.cta-band--photo { position: relative; overflow: hidden; }
.cta-band--photo .band-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 40%;
  z-index: 0;
}
.cta-band--photo .band-tint {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(13, 27, 42, .90) 0%,
    rgba(13, 27, 42, .82) 50%,
    rgba(13, 27, 42, .90) 100%);
}
.cta-band--photo .container { position: relative; z-index: 2; }


/* --------------------------------------------------------------------------
   28. SCRIPT PULL QUOTES
   Two only, deliberately. They are an accent and lose force in volume.
   Colour is gold-light on navy, measured at 9.59:1, which clears AA for normal
   text and not merely the 3:1 large-text allowance. That matters here because
   script faces are harder to read than the ratio alone suggests.
   No webfont: these are system script faces, per the no-CDN rule. The stack
   degrades to the serif heading face if none are present, which stays legible.
   -------------------------------------------------------------------------- */
.pullquote-script {
  background: var(--navy);
  border-radius: var(--r);
  padding: 44px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pullquote-script::before {
  content: '';
  position: absolute;
  top: -40%; left: -10%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(201,151,58,.16) 0%, rgba(201,151,58,0) 70%);
  pointer-events: none;
}
.pullquote-script blockquote {
  position: relative;
  font-family: 'Snell Roundhand', 'Apple Chancery', 'Segoe Script',
               'Brush Script MT', var(--font-head), cursive;
  /* Large enough that a script face stays readable. Script metrics run small,
     so this is set well above where a serif would sit. */
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.45;
  color: var(--gold-lt);
  max-width: 22em;
  margin: 0 auto 18px;
}
/* Attribution stays in the body sans face. Setting it in script too would cost
   legibility for no gain, and it is the part a reader checks carefully. */
.pullquote-script cite {
  position: relative;
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

@media (max-width: 560px) {
  .pullquote-script { padding: 32px 20px; }
  .pullquote-script blockquote { font-size: 24px; }
}


/* --------------------------------------------------------------------------
   29. FEEDBACK SHOW MORE
   -------------------------------------------------------------------------- */
.feedback-group[hidden] { display: none; }
.feedback-more-wrap { grid-column: 1 / -1; text-align: center; margin-top: 8px; }

/* --------------------------------------------------------------------------
   30. CASE STUDY CAMPUS BANNER
   Picks up assets/img/campus.jpg the moment that file exists. Until then the
   gradient alone renders, which reads as a deliberate band rather than a gap.
   -------------------------------------------------------------------------- */
.case-banner { position: relative; overflow: hidden; background: var(--navy); }
.case-banner-img {
  position: absolute; inset: 0;
  background-image: url('../img/campus.jpg');
  background-size: cover;
  background-position: center 45%;
}
.case-banner-tint {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(13, 27, 42, .72) 0%,
    rgba(13, 27, 42, .58) 55%,
    rgba(13, 27, 42, .80) 100%);
}
.case-banner-inner {
  position: relative;
  padding: 72px 0 66px;
  text-align: center;
}
.case-banner-inner h2 { color: var(--white); margin: 0; }
.case-banner-inner .eyebrow { color: var(--gold-lt); }
.case-banner-inner .eyebrow::before { display: none; }
@media (max-width: 768px) { .case-banner-inner { padding: 52px 0 48px; } }