/* ============================================================
   JA School — premium re-skin layer (2026-06-25)
   Adapted from ja-design-system.css. Loaded AFTER main.css.
   Visual only — no content/structure changes.
   Display: Fraunces (self-hosted)  ·  Body: Inter (self-hosted)
   Red is punctuation, not paint. Hairlines over heavy cards.
   ============================================================ */

/* ---------- self-hosted variable fonts (no CDN) ---------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  font-optical-sizing: auto;
  src: url('../fonts/fraunces-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  font-optical-sizing: auto;
  src: url('../fonts/fraunces-variable-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'InterVar';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-variable.woff2') format('woff2');
}

/* ---------- one authoritative token set + legacy remap ---------- */
:root {
  --paper:#FBF7F2; --paper-2:#F4EBE4; --blush:#FBF0F0; --card:#FFFFFF;
  --ink:#23191B; --body:#4C4245; --muted:#6E6467;
  --red:#BF2D38; --red-deep:#8E2028;
  --hair:#E8DBD7; --hair-2:#D8C7C2; --gold:#C0954B; --footer:#1C1618;
  --shadow:0 1px 2px rgba(35,25,27,.05);
  --shadow-lift:0 18px 50px -28px rgba(35,25,27,.35);
  --maxw:1200px; --gutter:40px;
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'InterVar', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius:4px;

  /* Remap legacy token systems so existing component CSS picks up the new palette. */
  /* --ja-* system (line 313) */
  --ja-red:#BF2D38; --ja-red-dark:#8E2028; --ja-red-soft:#FBF0F0; --ja-red-tint:#FBF0F0;
  --ja-ink:#23191B; --ja-body:#4C4245; --ja-muted:#6E6467; --ja-white:#FFFFFF;
  --ja-ivory:#FBF7F2; --ja-blush:#FBF0F0; --ja-paper:#F4EBE4; --ja-border:#E8DBD7;
  --ja-gold:#C0954B; --ja-footer:#1C1618;
  --ja-shadow-soft:0 1px 2px rgba(35,25,27,.05); --ja-shadow-card:0 1px 2px rgba(35,25,27,.05);
  --ja-radius-sm:4px; --ja-radius-md:4px; --ja-radius-lg:5px; --ja-radius-xl:6px;
  /* line-1 system (--ink/--paper/--berry/…) */
  --charcoal:#23191B; --plum:#8E2028; --berry:#BF2D38; --rose:#C0954B;
  --copper:#C0954B; --ivory:#FBF7F2; --soft:#FFFFFF; --line:#E8DBD7;
  --shadow:0 1px 2px rgba(35,25,27,.05);
  /* --premium-* system (line 2122) */
  --premium-red:#BF2D38; --premium-ink:#23191B; --premium-paper:#FBF7F2;
  --premium-ivory:#F4EBE4; --premium-copper:#C0954B; --premium-border:#E8DBD7;
}

/* ---------- base + flatten gradient background ---------- */
html { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body {
  background: var(--paper) !important;
  color: var(--body);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.68;
}

/* ---------- typography: Fraunces headings, INK not red ---------- */
h1, h2, h3, h4,
.home-hero h1, .home-hero .home-hero__slogan, .program-page-hero h1, .program-page-hero .home-hero__slogan, .blog-hero h1, .about-v8-hero h1,
.section-title, .section-heading, .section-heading__title, .display, .h2, .h3,
.eyebrow + h2, .program-card h3, .faq summary, .ja-program-snapshot h2 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -.012em;
  font-weight: 400;
}
h1, .display { font-weight: 370; line-height: 1.04; }
h2, .h2 { font-weight: 380; line-height: 1.1; }
h3, .h3 { font-weight: 420; line-height: 1.2; }
/* italic emphasis inside copy = Fraunces italic */
p em, li em, .lede em, .prose em { font-family: var(--font-display); font-style:italic; color: var(--ink); }

/* eyebrows / kickers = Inter, uppercase tracked, red punctuation */
.eyebrow, .kicker, .section-eyebrow, .program-card__eyebrow,
.ja-program-snapshot__eyebrow, [class*="eyebrow"] {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--red) !important;
  font-style: normal !important;
}

/* kicker dash — red rule before the eyebrow text (matches approved comp) */
.eyebrow, .kicker, .section-eyebrow {
  display: inline-flex !important; align-items: center !important; gap: 12px !important;
}
.eyebrow::before, .kicker::before, .section-eyebrow::before {
  content: "" !important; width: 28px; height: 1.5px; background: var(--red);
  flex: 0 0 auto; display: inline-block;
}
.eyebrow.center, .kicker.center, .section-eyebrow.center { justify-content: center !important; }

/* explore links (.text-link) — refined underlined red link with arrow (per comp .btn-text) */
.text-link {
  color: var(--red) !important; font-weight: 600 !important; font-size: 15px !important;
  text-decoration: none !important; border-bottom: 1.5px solid var(--red) !important;
  padding-bottom: 2px !important; display: inline-block !important; line-height: 1.2 !important;
  width: fit-content !important; align-self: flex-start !important;
}
.text-link::after { content: " \2192"; }
.text-link:hover { color: var(--red-deep) !important; border-bottom-color: var(--red-deep) !important; }

/* Demote any red headline -> ink (red is punctuation only). Keep links/CTAs red. */
h1, h2, h3, h4, h5,
.section-title, .section-heading__title, .home-hero h1, .home-hero .home-hero__slogan {
  color: var(--ink) !important;
}

/* ---------- buttons (low radius, ink/red system) ---------- */
.button, .btn, .wp-block-button__link, button.button,
.home-hero .button, .cta-band .button, input[type="submit"], .ja-lead-form button[type="submit"] {
  border-radius: 3px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}
.button--primary, .btn-primary, .button.button--primary,
.ja-lead-form button[type="submit"], input[type="submit"] {
  background: var(--red) !important; color: #fff !important; border-color: var(--red) !important;
}
.button--primary:hover, .btn-primary:hover,
.ja-lead-form button[type="submit"]:hover, input[type="submit"]:hover {
  background: var(--red-deep) !important; border-color: var(--red-deep) !important;
}
.button--secondary, .btn-ghost, .button.button--secondary {
  background: var(--card) !important; color: var(--ink) !important; border:1px solid var(--hair-2) !important;
}
.button--secondary:hover, .btn-ghost:hover { border-color: var(--ink) !important; color: var(--ink) !important; }

/* ---------- button flicker fix: flat fills, clean transition, no transform/animated shadow ---------- */
.button, .btn, .header-cta, .cta-button, .wp-block-button__link,
.ja-lead-form button[type="submit"], input[type="submit"] {
  transition: background-color .16s ease, border-color .16s ease, color .16s ease !important;
  box-shadow: var(--shadow) !important;
  background-image: none !important; /* kill gradients that flicker against solid hover */
}
.header-cta, .cta-button {
  background: var(--red) !important; color:#fff !important;
  border:1px solid var(--red) !important; border-radius:3px !important;
}
.button:hover, .button:focus-visible, .btn:hover, .btn:focus-visible,
.button--primary:hover, .button--primary:focus-visible,
.header-cta:hover, .header-cta:focus-visible, .cta-button:hover, .cta-button:focus-visible,
.wp-block-button__link:hover, .ja-lead-form button:hover, .ja-lead-form button:focus-visible,
input[type="submit"]:hover {
  background: var(--red-deep) !important; background-image: none !important;
  border-color: var(--red-deep) !important; color:#fff !important;
  transform: none !important; box-shadow: var(--shadow) !important;
}
/* High-specificity flat override (beats main.css a.button.button--primary gradient) */
a.button.button--primary, a.button.header-cta, a.button.button--primary.header-cta,
.entry-content a.button.button--primary, .content-layout a.button.button--primary {
  background: var(--red) !important; background-image: none !important;
  border:1px solid var(--red) !important; border-radius:3px !important;
}
a.button.button--primary:hover, a.button.button--primary:focus-visible,
a.button.header-cta:hover, a.button.header-cta:focus-visible,
.entry-content a.button.button--primary:hover {
  background: var(--red-deep) !important; background-image: none !important;
  border-color: var(--red-deep) !important; transform: none !important;
}

/* ---------- hairline cards, kill heavy shadows/pills ---------- */
.program-card, .resource-card, .card, .ja-program-snapshot, .aid-highlight-card,
.review-card, .rev, .doc-card, .pricing-card, .blog-card, .program-side-card {
  border-radius: var(--radius) !important;
  border: 1px solid var(--hair) !important;
  box-shadow: var(--shadow) !important;
}
.program-card:hover, .blog-card:hover, .resource-card:hover { box-shadow: var(--shadow-lift) !important; }

/* ---------- sections: flat warm backgrounds ---------- */
.section--alt, .section--paper { background: var(--paper-2) !important; }
.section--blush, .section--rose, .section--aid-home { background: var(--blush) !important; }

/* ---------- forms ---------- */
.ja-lead-form input, .ja-lead-form select, .ja-lead-form textarea, .field input, .field select {
  border-radius: 3px !important; border:1px solid var(--hair-2) !important; background: var(--paper) !important;
  font-family: var(--font-body) !important; color: var(--ink) !important;
}
.ja-lead-form label, .field label { font-family: var(--font-body) !important; }

/* ---------- FAQ summary marker on-system ---------- */
.faq summary, details summary { font-family: var(--font-display) !important; color: var(--ink) !important; }

/* ---------- CTA band (red, white text) ---------- */
.cta-band, .footer-cta, .section--cta { background: var(--red) !important; }
.cta-band h2, .footer-cta h2, .section--cta h2 { color: #fff !important; }
.footer-cta, .footer-cta * { color: #fff !important; }

/* ---------- .final-cta is a LIGHT section — readable ink heading (fixes white-on-light) ---------- */
body .final-cta, .final-cta { background: var(--paper-2) !important; box-shadow: none !important; border:1px solid var(--hair) !important; }
.final-cta, .final-cta *, .final-cta p { color: var(--body) !important; }
.final-cta h2, .final-cta h3 { color: var(--ink) !important; }
.final-cta .eyebrow, .final-cta [class*="eyebrow"] { color: var(--red) !important; }

/* ---------- footer stays dark ---------- */
.site-footer, .footer { background: var(--footer) !important; }

/* ---------- accessibility: visible focus + reduced motion ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--red) !important; outline-offset: 2px !important;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- unified warm image grade (calm the mixed colour temps) ---------- */
.program-card img, .resource-card img, .blog-card img, .ja-gallery-grid__item img,
.home-hero__media img, .program-page-hero img, .why .figure img, .imgband img,
.home-hero__photo img {
  filter: saturate(.92) contrast(1.02) sepia(.04);
}

/* ---------- demote red-as-paint display values to ink Fraunces ---------- */
/* Large stat/number/value elements: red was paint; make them ink display type. */
.program-fact-strip strong,
.aid-highlight-card__number, .aid-card--amount span,
.spec dd, .stat__number, .stat-number, .trust-band__score,
.review-score__value, .revscore .n, .score .big {
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -.01em !important;
}
/* keep the eyebrow/label part muted-uppercase on those strips */
.program-fact-strip span { color: var(--muted) !important; }
/* go-links / inline text links stay red (punctuation) — do not demote these */
.prog .go, .program-card__link, a.go, .button--text { color: var(--red) !important; }

/* ============================================================
   Feedback batch (2026-06-25) — comp-matched components
   ============================================================ */

/* ---------- utility bar (top header): warm dark, comp design ---------- */
.utility-bar { background: var(--footer) !important; color: #EFE6E2 !important; font-size: 13px !important; letter-spacing: .01em; }
.utility-bar__inner { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 16px; padding-top: 10px !important; padding-bottom: 10px !important; }
.utility-bar span, .utility-bar a { color: #C6B8B3 !important; text-decoration: none; }
.utility-bar a[href^="tel"] { color: #fff !important; font-weight: 600 !important; }

/* ---------- footer: comp design (dark warm, red column heads, hairline) ---------- */
.site-footer { background: var(--footer) !important; color: #B7AAA6 !important; padding: 72px 0 36px !important; font-size: 14px; }
.site-footer .footer-grid--wide { border-bottom: 1px solid rgba(255,255,255,.1) !important; padding-bottom: 46px !important; }
.site-footer section h2 { font-size: 11px !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: #E58A91 !important; margin: 0 0 16px !important; font-weight: 600 !important; font-family: var(--font-body) !important; }
.site-footer a { color: #C7BAB6 !important; text-decoration: none; }
.site-footer a:hover { color: #fff !important; }
.site-footer .footer-brand p { color: #B7AAA6 !important; line-height: 1.7; }
.site-footer address, .site-footer address a { color: #B7AAA6 !important; font-style: normal; line-height: 1.8; }
.site-footer address a[href^="tel"] { color: #fff !important; font-weight: 600 !important; }
.site-footer .footer-bottom { padding-top: 26px !important; color: #8C7F7B !important; font-size: 12.5px; border-top: 0; }

/* ---------- consistent button spacing in groups (fixes "too close") ---------- */
.footer-cta__actions, .hero-cta, .ja-program-snapshot__cta, .hero__actions,
.button-row, .btn-row, .cta-actions, .actions, .about-v8-actions, .program-hero__actions,
[class*="__actions"], .buttons, .button-group {
  display: flex !important; flex-wrap: wrap !important; gap: 14px !important; align-items: center;
}
.ja-program-snapshot__cta { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }

/* ---------- reviews (goodreviews) — comp .revs design ---------- */
.goodreviews-home__actions .button--primary { background: var(--card) !important; color: var(--ink) !important; border:1px solid var(--hair-2) !important; }
.goodreviews-home__actions .button--primary:hover { border-color: var(--ink) !important; background: var(--card) !important; color: var(--ink) !important; }
.goodreviews-strip { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.goodreview-card { background: var(--card) !important; border:1px solid var(--hair) !important; border-radius:5px !important; box-shadow: var(--shadow) !important; padding: 24px !important; }
.goodreview-card .stars, .goodreview-card [class*="star"], .goodreview-card__stars { color: var(--gold) !important; letter-spacing: 1px; }
.goodreview-card p, .goodreview-card__quote { font-family: var(--font-display) !important; font-style: italic !important; font-weight: 380 !important; font-size: 15.5px !important; line-height: 1.5 !important; color: var(--ink) !important; }
.goodreview-card__name, .goodreview-card cite, .goodreview-card__by, .goodreview-card strong { color: var(--ink) !important; font-weight: 600 !important; font-style: normal !important; }
.goodreview-card__source, .goodreview-card small, .goodreview-card__label { color: var(--muted) !important; font-size: 12px !important; }
.goodreview-card__avatar { display: none !important; } /* comp uses no avatar — keep clean */
@media(max-width:980px){ .goodreviews-strip { grid-template-columns: 1fr 1fr; } }
@media(max-width:640px){ .goodreviews-strip { grid-template-columns: 1fr; } }

/* ---------- FAQ / Q&A — comp light design, applied site-wide ---------- */
.section--faq-rich { background: var(--paper-2) !important; }
.section--faq-rich, .section--faq-rich p, .section--faq-rich .faq-grid, .section--faq-rich li { color: var(--body) !important; }
.section--faq-rich h1, .section--faq-rich h2, .section--faq-rich h3 { color: var(--ink) !important; }
.section--faq-rich .eyebrow, .section--faq-rich [class*="eyebrow"] { color: var(--red) !important; }
.faq-list, .program-faq__list { border-top: 1px solid var(--hair-2) !important; }
.faq-list details, .program-faq details, .faq details {
  border-bottom: 1px solid var(--hair) !important; padding: 22px 0 !important; background: transparent !important;
}
.faq-list summary, .program-faq summary, .faq summary {
  font-family: var(--font-display) !important; font-size: 20px !important; color: var(--ink) !important;
  cursor: pointer; list-style: none; display: flex !important; justify-content: space-between; gap: 20px; font-weight: 420 !important;
}
.faq-list summary::-webkit-details-marker, .program-faq summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display:none; }
.faq-list summary::after, .program-faq summary::after, .faq summary::after {
  content: "+"; color: var(--red) !important; font-family: var(--font-body); font-weight: 400; font-size: 22px; line-height: 1; flex:0 0 auto;
}
.faq-list details[open] summary::after, .program-faq details[open] summary::after, .faq details[open] summary::after { content: "\2013"; }
.faq-list details p, .program-faq details p, .faq details p { margin: 16px 0 2px !important; color: var(--body) !important; max-width: 74ch; }

/* ---------- pills / tags on inner pages — comp .pills outline design ---------- */
.pill-list a, .topic-tags a, .pills a, .cross-links a, .related-pills a {
  border: 1px solid var(--hair-2) !important; border-radius: 40px !important; padding: 9px 17px !important;
  font-size: 13.5px !important; font-weight: 600 !important; color: var(--ink) !important;
  text-decoration: none !important; background: transparent !important; display: inline-block; line-height: 1.2;
}
.pill-list a:hover, .topic-tags a:hover, .pills a:hover, .cross-links a:hover { border-color: var(--red) !important; color: var(--red) !important; }

/* ---------- program two-col: allow sticky aside ---------- */
.program-two-col, .program-two-col--reverse { align-items: start !important; }

/* ---------- "At a glance" panel — sticky + comp .panel design ---------- */
.ja-program-snapshot {
  position: sticky !important; top: 24px !important; align-self: start !important;
  background: var(--card) !important; border: 1px solid var(--hair) !important; border-radius: 5px !important;
  box-shadow: var(--shadow) !important; overflow: hidden; padding: 0 !important;
}
.ja-program-snapshot__eyebrow { margin: 26px 28px 6px !important; }
.ja-program-snapshot h2 { margin: 0 28px 0 !important; font-size: 24px !important; padding: 0 0 22px !important; border-bottom: 1px solid var(--hair); }
.ja-program-snapshot__list { margin: 0 !important; padding: 6px 28px !important; }
.ja-program-snapshot__list li { display: flex !important; justify-content: space-between !important; gap: 16px !important; padding: 15px 0 !important; border-bottom: 1px solid var(--hair) !important; align-items: baseline !important; }
.ja-program-snapshot__list li:last-child { border-bottom: 0 !important; }
.ja-program-snapshot__k { font-size: 11px !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--muted) !important; font-weight: 600 !important; }
.ja-program-snapshot__v { font-size: 15px !important; color: var(--ink) !important; text-align: right !important; font-weight: 500 !important; }
.ja-program-snapshot__confirm { color: var(--muted) !important; font-style: italic; font-weight: 400; }
.ja-program-snapshot__cta { padding: 18px 28px 28px !important; }
@media(max-width:980px){ .ja-program-snapshot { position: static !important; } }

/* ---------- "What students practice" → comp editorial enum (numbered) ---------- */
.program-two-col .check-list, .program-two-col--reverse .check-list {
  list-style: none !important; margin: 0 !important; padding: 0 !important; counter-reset: enum;
  border-top: 1px solid var(--hair) !important; display: block !important;
}
.program-two-col .check-list li, .program-two-col--reverse .check-list li {
  counter-increment: enum; position: relative; display: block !important;
  padding: 20px 0 20px 44px !important; border-bottom: 1px solid var(--hair) !important;
  color: var(--ink) !important; font-size: 16.5px !important; background: none !important;
}
.program-two-col .check-list li::before, .program-two-col--reverse .check-list li::before {
  content: counter(enum, decimal-leading-zero) !important; position: absolute !important; left: 0 !important; top: 20px !important;
  font-family: var(--font-display) !important; font-style: italic !important; font-size: 15px !important;
  color: var(--red) !important; background: none !important; width: auto !important; height: auto !important;
  border: 0 !important; transform: none !important;
}
.program-two-col .check-list li::after, .program-two-col--reverse .check-list li::after { display: none !important; }

/* ---------- reviews: fix vertical-name (force block layout, full-width body) ---------- */
.goodreview-card { display: block !important; }
.goodreview-card > div { display: block !important; width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; }
.goodreview-card header { display: flex !important; flex-wrap: wrap !important; gap: 6px 10px !important; align-items: baseline !important; margin: 0 0 12px !important; }
.goodreview-card header h3 { white-space: normal !important; word-break: normal !important; font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--ink) !important; margin: 0 !important; }
.goodreview-card header span[aria-label*="star" i], .goodreview-card header span { color: var(--gold) !important; letter-spacing: 1px; white-space: nowrap; }
.goodreview-card p { white-space: normal !important; }
.goodreview-card small { display: block !important; white-space: normal !important; margin-top: 12px !important; }

/* avatar must stay hidden (beat the > div width rule) */
.goodreview-card > .goodreview-card__avatar { display: none !important; }

/* two-col: hide empty wpautop p/br that steal a grid cell (snapshot can sit in right col) */
.program-two-col > p:empty, .program-two-col > br,
.program-two-col--reverse > p:empty, .program-two-col--reverse > br { display: none !important; }

/* "Read Google reviews" -> ghost (beat the high-specificity flat-red primary) */
.goodreviews-home__actions a.button.button--primary {
  background: var(--card) !important; color: var(--ink) !important; border:1px solid var(--hair-2) !important;
}
.goodreviews-home__actions a.button.button--primary:hover { border-color: var(--ink) !important; background: var(--card) !important; color: var(--ink) !important; }

/* Explicit grid placement (only in the two-col that holds the snapshot): main content +
   any side-card flow in col1; the snapshot is the ONLY thing in col2 (spans both rows so
   it sticks cleanly without the side-card sliding under it). */
.program-two-col:has(.ja-program-snapshot) > div:first-child,
.program-two-col--reverse:has(.ja-program-snapshot) > div:first-child { grid-column: 1 !important; grid-row: 1 !important; }
.program-two-col:has(.ja-program-snapshot) > .program-side-card,
.program-two-col--reverse:has(.ja-program-snapshot) > .program-side-card { grid-column: 1 !important; grid-row: 2 !important; margin-top: 24px !important; position: static !important; }
.program-two-col:has(.ja-program-snapshot) > .ja-program-snapshot,
.program-two-col--reverse:has(.ja-program-snapshot) > .ja-program-snapshot { grid-column: 2 !important; grid-row: 1 / span 2 !important; align-self: start !important; }
.program-two-col > p:empty, .program-two-col > br, .program-two-col--reverse > p:empty, .program-two-col--reverse > br { display: none !important; }

/* ---------- meet-ja: broken red-circle badges -> clean outline pills (comp) ---------- */
.about-v8-card-grid article > span {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  place-items: unset !important; width: auto !important; height: auto !important;
  border-radius: 40px !important; background: transparent !important; color: var(--ink) !important;
  font-weight: 600 !important; border: 1px solid var(--hair-2) !important; padding: 6px 14px !important;
  font-size: 11.5px !important; letter-spacing: .08em !important; text-transform: uppercase !important;
  margin-bottom: 16px !important; line-height: 1.2 !important; overflow: visible !important;
}
.about-v8-ink .about-v8-card-grid article > span { color: #fff !important; border-color: rgba(255,255,255,.3) !important; }

/* ---------- about-v8 hero: make Schedule-a-Tour (button--light) visible on light hero ---------- */
.about-v8-hero .button--light, .about-v8-hero .button--outline-light {
  background: var(--card) !important; color: var(--ink) !important; border: 1px solid var(--hair-2) !important;
}
.about-v8-hero .button--light:hover, .about-v8-hero .button--outline-light:hover { border-color: var(--ink) !important; color: var(--ink) !important; background: var(--card) !important; }

/* ============================================================
   Feedback batch 3 (2026-06-25)
   ============================================================ */

/* ---------- A. form: normal-case labels, darker for AA + space above (batch 7→8) ---------- */
.ja-lead-form label, .field label, .home-hero-form-card .ja-lead-form label {
  text-transform: none !important; letter-spacing: .01em !important;
  font-size: 13px !important; font-weight: 500 !important; color: var(--body) !important;
  margin-top: 6px !important;
}
.ja-lead-form input:focus, .ja-lead-form select:focus, .ja-lead-form textarea:focus,
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--red) !important;
  outline: 2px solid var(--red) !important; outline-offset: 2px !important; box-shadow: none !important;
}

/* ---------- B. button--light / --outline-light visible on light sections ---------- */
.button--light { background: var(--card) !important; color: var(--ink) !important; border: 1px solid var(--hair-2) !important; }
.button--outline-light { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--hair-2) !important; }
.button--light:hover, .button--outline-light:hover { border-color: var(--ink) !important; color: var(--ink) !important; background: var(--card) !important; }
/* keep white styling inside dark bands */
.footer-cta .button--light, .cta-band .button--light, .section--cta .button--light, [class*="--ink"] .button--light {
  background: #fff !important; color: var(--red-deep) !important; border-color: transparent !important;
}
.footer-cta .button--outline-light, .cta-band .button--outline-light, [class*="--ink"] .button--outline-light {
  background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.5) !important;
}

/* ---------- E. At-a-glance: labels on one line ---------- */
.ja-program-snapshot__list li { align-items: baseline !important; gap: 18px !important; }
.ja-program-snapshot__k { flex: 0 0 auto !important; white-space: nowrap !important; min-width: max-content !important; }
.ja-program-snapshot__v { flex: 1 1 auto !important; min-width: 0 !important; text-align: right !important; }

/* ---------- F. pills/tags (they are <span>) -> comp outline pills, everywhere ---------- */
.pill-list span, .pill-list a, .topic-tags span, .topic-tags a, .pills span, .pills a,
.cross-links span, .cross-links a {
  display: inline-block !important; border: 1px solid var(--hair-2) !important; border-radius: 40px !important;
  padding: 9px 18px !important; font-size: 13.5px !important; font-weight: 700 !important;
  color: var(--red-deep) !important; background: transparent !important; line-height: 1.2 !important; text-decoration: none !important;
}
.pill-list span:hover, .pill-list a:hover, .topic-tags a:hover, .pills a:hover { border-color: var(--red) !important; color: var(--red) !important; }

/* ---------- G. program-page Google reviews -> comp card design ---------- */
.google-review-card { background: var(--card) !important; border: 1px solid var(--hair) !important; border-radius: 5px !important; box-shadow: var(--shadow) !important; }
.google-review-card__quote, .google-review-card p { font-family: var(--font-display) !important; font-style: italic !important; font-weight: 380 !important; color: var(--ink) !important; }
.google-review-avatar { display: none !important; }
.google-review-g, .google-review-card .stars, .google-review-card [aria-label*="star" i] { color: var(--gold) !important; }
.google-review-showcase__heading h2, .google-review-showcase h2 { font-family: var(--font-display) !important; color: var(--ink) !important; }
.google-review-button { background: var(--card) !important; color: var(--ink) !important; border: 1px solid var(--hair-2) !important; }

/* ---------- H. /locations/ contact cards -> hairline cards + Explore-Program links ---------- */
.location-detail-cards-v130 article { background: var(--card) !important; border: 1px solid var(--hair) !important; border-radius: 5px !important; box-shadow: var(--shadow) !important; padding: 24px !important; }
.location-detail-cards-v130 article > span { display: block !important; text-transform: uppercase !important; font-size: 11px !important; letter-spacing: .08em !important; color: var(--muted) !important; font-weight: 600 !important; margin-bottom: 8px !important; }
.location-detail-cards-v130 article > a:not([href^="tel"]):not([href^="mailto"]), .location-mini-actions-v130 a {
  color: var(--red) !important; font-weight: 600 !important; text-decoration: none !important;
  border-bottom: 1.5px solid var(--red) !important; padding-bottom: 2px !important; display: inline-block !important; width: fit-content !important; margin-top: 10px;
}
.location-detail-cards-v130 article > a:not([href^="tel"]):not([href^="mailto"])::after, .location-mini-actions-v130 a::after { content: " \2192"; }
.location-mini-actions-v130 { display: flex !important; flex-wrap: wrap !important; gap: 20px !important; }

/* ---------- J. /financial-aid/ 3 cards alignment ---------- */
.aid-card-grid--three { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; align-items: stretch !important; }
.aid-card-grid--three > * { height: 100% !important; margin: 0 !important; }
@media(max-width:880px){ .aid-card-grid--three { grid-template-columns: 1fr !important; } }

/* program reviews: kill the green first-line heading; keep gold stars, blue Google G */
.google-review-showcase__heading h2, .google-review-showcase__heading h2::first-line { color: var(--ink) !important; }
.google-review-stars { color: var(--gold) !important; }
.google-review-card header p { color: var(--muted) !important; font-weight: 600 !important; }
.google-review-card__quote { font-family: var(--font-display) !important; font-style: italic !important; font-weight: 400 !important; color: var(--ink) !important; }

/* /financial-aid/ top highlight cards (.aid-intro-grid): align the 3 cards cleanly */
.aid-intro-grid > div:empty, .aid-intro-grid > p:empty, .aid-intro-grid > br { display: none !important; }
.aid-intro-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 20px !important; align-items: stretch !important; }
.aid-intro-grid > :not(.aid-highlight-card):not(.aid-card) { grid-column: 1 / -1 !important; }
.aid-intro-grid > .aid-highlight-card { height: 100% !important; margin: 0 !important; }
@media(max-width:880px){ .aid-intro-grid { grid-template-columns: 1fr !important; } }

/* MOBILE: reset the explicit grid placement so program two-col stacks (fixes vertical text) */
@media (max-width: 980px) {
  .program-two-col, .program-two-col--reverse { grid-template-columns: 1fr !important; }
  .program-two-col:has(.ja-program-snapshot) > div:first-child,
  .program-two-col:has(.ja-program-snapshot) > .ja-program-snapshot,
  .program-two-col:has(.ja-program-snapshot) > .program-side-card,
  .program-two-col--reverse:has(.ja-program-snapshot) > div:first-child,
  .program-two-col--reverse:has(.ja-program-snapshot) > .ja-program-snapshot,
  .program-two-col--reverse:has(.ja-program-snapshot) > .program-side-card {
    grid-column: 1 / -1 !important; grid-row: auto !important; margin-top: 0 !important;
  }
  .ja-program-snapshot { position: static !important; }
}

/* ============================================================
   Feedback batch 4 (2026-06-25)
   ============================================================ */

/* ---------- pills: cover ALL variants + consistent subtle hover ---------- */
.pill-list span, .pill-list a, .topic-tags span, .topic-tags a, .pills span, .pills a,
.cross-links span, .cross-links a, .program-inline-links span, .program-inline-links a,
.video-chip-row span, .video-chip-row a {
  display: inline-block !important; border: 1px solid var(--hair-2) !important; border-radius: 40px !important;
  padding: 9px 18px !important; font-size: 13.5px !important; font-weight: 700 !important;
  color: var(--red-deep) !important; background: transparent !important; text-decoration: none !important;
  line-height: 1.2 !important; transition: border-color .16s ease, color .16s ease, background-color .16s ease !important;
}
.pill-list a:hover, .topic-tags a:hover, .pills a:hover, .cross-links a:hover,
.program-inline-links a:hover, .video-chip-row a:hover, .pill-list span:hover,
.program-inline-links span:hover, .topic-tags span:hover, .pills span:hover {
  border-color: var(--red) !important; color: var(--red) !important; background: var(--blush) !important;
}

/* ---------- subtle button hover movement (back, now that gradients are flat) ---------- */
.button--primary, .header-cta, .cta-button, .footer-cta .button--light, .footer-cta .button--outline-light,
.button--light, .button--secondary, .button--outline-light {
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease !important;
}
.button--primary:hover, .header-cta:hover, .cta-button:hover,
.footer-cta .button--light:hover, .footer-cta .button--outline-light:hover,
.button--light:hover, .button--secondary:hover, .button--outline-light:hover,
a.button.button--primary:hover {
  transform: translateY(-2px) !important;
}

/* ---------- form: consistent control font-size (fix tiny nested select) + campus-note box ---------- */
.ja-lead-form select, .ja-lead-form input:not([type="checkbox"]):not([type="radio"]), .ja-lead-form textarea,
.field select, .field input:not([type="checkbox"]) { font-size: 15px !important; font-weight: 400 !important; }
.ja-lead-form label select { font-size: 15px !important; font-weight: 400 !important; }
/* Make the campus note behave like a labeled field (label above, value in a 54px box) so
   it aligns with the adjacent Program-of-Interest field. */
.ja-campus-note {
  display: flex !important; flex-direction: column !important; gap: 8px !important;
  border: 0 !important; background: transparent !important; padding: 0 !important;
  min-height: 0 !important; height: auto !important; align-self: stretch !important; margin: 0 !important;
}
.ja-campus-note span { text-transform: uppercase !important; font-size: 12px !important; letter-spacing: .06em !important; color: var(--muted) !important; font-weight: 600 !important; }
.ja-campus-note strong {
  display: flex !important; align-items: center !important; min-height: 54px !important;
  border: 1px solid var(--hair-2) !important; border-radius: 12px !important; background: var(--paper) !important;
  padding: 0 16px !important; font-size: 16px !important; color: var(--ink) !important; line-height: 1.2 !important;
}

/* ---------- /financial-aid/ Q&A (.faq-grid) -> comp accordion design ---------- */
.faq-grid:not(.faq-grid--rich) { display: block !important; max-width: 880px; }
.faq-grid:not(.faq-grid--rich) details { border-bottom: 1px solid var(--hair) !important; padding: 22px 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; border-left: 0 !important; border-right: 0 !important; }
.faq-grid:not(.faq-grid--rich) details:first-child { border-top: 1px solid var(--hair-2) !important; }
.faq-grid:not(.faq-grid--rich) summary { font-family: var(--font-display) !important; font-size: 20px !important; color: var(--ink) !important; cursor: pointer; list-style: none; display: flex !important; justify-content: space-between; gap: 20px; font-weight: 420 !important; }
.faq-grid:not(.faq-grid--rich) summary::-webkit-details-marker { display: none; }
.faq-grid:not(.faq-grid--rich) summary::after { content: "+"; color: var(--red) !important; font-family: var(--font-body); font-weight: 400; font-size: 22px; line-height: 1; flex: 0 0 auto; }
.faq-grid:not(.faq-grid--rich) details[open] summary::after { content: "\2013"; }
.faq-grid:not(.faq-grid--rich) details p { margin: 16px 0 2px !important; color: var(--body) !important; max-width: 74ch; }

/* ---------- /salon-spa/ : constrain tall hero image + consistent service-nav cards ---------- */
.service-hero-v122 figure { aspect-ratio: 4 / 3 !important; max-height: 440px !important; overflow: hidden !important; border-radius: 5px !important; align-self: start !important; }
.service-hero-v122 figure img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }
.service-card-grid-v122 { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; gap: 20px !important; align-items: stretch !important; }
.service-nav-card-v121 { background: var(--card) !important; border: 1px solid var(--hair) !important; border-radius: 5px !important; box-shadow: var(--shadow) !important; padding: 24px !important; height: 100% !important; display: flex !important; flex-direction: column !important; }
.service-nav-card-v121 h2, .service-nav-card-v121 h3, .service-nav-card-v121 h4 { color: var(--ink) !important; font-family: var(--font-display) !important; font-weight: 420 !important; }
.service-nav-card-v121 a { color: var(--red) !important; font-weight: 600 !important; text-decoration: none !important; border-bottom: 1.5px solid var(--red) !important; padding-bottom: 2px !important; display: inline-block !important; width: fit-content !important; margin-top: auto !important; }
.service-nav-card-v121 a::after { content: " \2192"; }

/* salon-spa hero img crop to upper body; service-nav card <strong> heading + <span> CTA */
.service-hero-v122 figure img { object-position: center 22% !important; }
.service-nav-card-v121 { color: var(--ink) !important; text-decoration: none !important; }
.service-nav-card-v121 strong { color: var(--ink) !important; font-family: var(--font-display) !important; font-weight: 420 !important; font-size: 1.3rem !important; display: block !important; margin-bottom: 8px !important; }
.service-nav-card-v121 p { color: var(--body) !important; flex: 1 1 auto !important; }
.service-nav-card-v121 > span { color: var(--red) !important; font-weight: 600 !important; border-bottom: 1.5px solid var(--red) !important; padding-bottom: 2px !important; display: inline-block !important; width: fit-content !important; margin-top: 14px !important; }
.service-nav-card-v121 > span:not(.service-nav-card-v121__tag)::after { content: " \2192" !important; }

/* ============================================================
   Feedback batch 5 (2026-06-25) — utility bar + footer CTA
   ============================================================ */
/* Utility (top) bar finalize */
.utility-bar { background: #23191B !important; border-top: 0 !important; }
.utility-bar__inner { padding-top: 6px !important; padding-bottom: 6px !important; }   /* slightly reduced height */
.utility-bar span, .utility-bar a { color: #D9CDC9 !important; }     /* Oak Forest + address (AA ~10.8:1) */
.utility-bar a[href^="tel"] { color: #fff !important; font-weight: 700 !important; }   /* phone white/bold */

/* Footer CTA band: tone red down BF2D38 -> A82A33 (white text still AA ~5.2:1). Nothing else changed. */
.footer-cta { background: #A82A33 !important; }

/* bottom-align form-grid items so the Admissions Team box lines up with the adjacent select */
.ja-form-grid { align-items: end !important; }
.ja-form-grid > p { margin: 0 !important; }
.ja-campus-note { justify-content: flex-end !important; }

/* ---------- /salon-spa/ hero: 2-col grid (image RIGHT like other heroes) ---------- */
.service-hero-v122__grid { display: grid !important; grid-template-columns: 1.05fr .95fr !important; gap: 48px !important; align-items: center !important; }
.service-hero-v122 figure { aspect-ratio: 4 / 3 !important; max-height: 420px !important; }
.service-hero-v122 figure img { object-position: center top !important; }
@media (max-width: 900px) { .service-hero-v122__grid { grid-template-columns: 1fr !important; } }
/* card link: remove the double underline (keep only the border-bottom) */
.service-nav-card-v121 > span { text-decoration: none !important; }

/* ============================================================
   Feedback batch 6 (2026-06-26)
   ============================================================ */
/* Top nav links: medium weight, ink, red hover (Request Info stays emphasized) */
.primary-nav a { font-weight: 500 !important; font-size: 15px !important; color: #23191B !important; }
.primary-nav a:hover, .primary-nav a:focus-visible { color: #BF2D38 !important; background: transparent !important; }
.primary-nav .header-cta, .primary-nav .header-cta:hover { color: #fff !important; }   /* button text stays white */
.header-cta { font-weight: 600 !important; }   /* Request Info stays the one emphasized element */
/* dropdown carets: light/thin */
.primary-nav .menu-item-has-children > a::after {
  border-right-width: 1.5px !important; border-bottom-width: 1.5px !important;
  width: 6px !important; height: 6px !important; opacity: .55 !important;
}

/* ---------- /salon-spa/ cards: match home program cards (top accent, pill, non-bold) ---------- */
.service-nav-card-v121 { position: relative !important; overflow: hidden !important; padding-top: 28px !important; }
.service-nav-card-v121::before { content: "" !important; position: absolute !important; top: 0; left: 0; right: 0; height: 5px !important; background: linear-gradient(90deg, var(--red), var(--gold)) !important; }
.service-nav-card-v121 p { font-weight: 400 !important; color: var(--muted) !important; }
.service-nav-card-v121__tag {
  display: inline-block !important; width: max-content !important; max-width: 100% !important;
  border: 1px solid var(--hair-2) !important; border-radius: 999px !important; padding: 5px 12px !important;
  color: var(--red-deep) !important; font-size: 12.5px !important; font-weight: 700 !important;
  background: transparent !important; margin: 0 0 14px !important; line-height: 1.2 !important;
}

/* pill is also a > span — keep the arrow on the CTA link only */
.service-nav-card-v121__tag::after { content: none !important; }

/* ============================================================
   Global form-component cleanup (batch 7, 2026-06-26)
   Shared component — applies to every JA form site-wide.
   ============================================================ */
/* Lighter fields: reduced height + padding; identical box for input/select/textarea */
.ja-lead-form input:not([type="checkbox"]):not([type="radio"]),
.ja-lead-form select, .ja-lead-form textarea,
.field input:not([type="checkbox"]), .field select, .field textarea {
  min-height: 44px !important; padding: 8px 13px !important;
  border: 1px solid var(--hair-2) !important; border-radius: 3px !important;
  background-color: var(--paper) !important; color: var(--ink) !important;
  font-size: 15px !important; font-weight: 400 !important; line-height: 1.3 !important;
}
.ja-lead-form textarea, .field textarea { min-height: 116px !important; height: auto !important; padding: 11px 13px !important; }

/* <select> identical to text inputs + consistent custom caret */
.ja-lead-form select, .field select {
  -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236E6467' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important; background-position: right 13px center !important;
  padding-right: 38px !important;
}

/* Consent rows: no bordered box — plain checkbox + sentence text, checkbox top-aligned */
.ja-consent {
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  padding: 0 !important; border-radius: 0 !important; margin: 0 0 14px !important;
  font-size: 14px !important; color: var(--body) !important;
}
.ja-consent label {
  display: grid !important; grid-template-columns: 20px minmax(0, 1fr) !important; gap: 10px !important;
  align-items: start !important; text-transform: none !important; letter-spacing: normal !important;
  font-size: 14px !important; font-weight: 400 !important; color: var(--body) !important;
}
.ja-consent input[type="checkbox"] {
  width: 18px !important; height: 18px !important; min-height: 18px !important;
  margin: 1px 0 0 !important; justify-self: start !important; accent-color: var(--red) !important;
}

/* Visible AA focus ring on every control incl. checkbox */
.ja-consent input[type="checkbox"]:focus-visible,
.ja-lead-form input[type="checkbox"]:focus-visible, .ja-lead-form input[type="checkbox"]:focus {
  outline: 2px solid var(--red) !important; outline-offset: 2px !important; box-shadow: none !important;
}

/* focus ring on text inputs too (out-specify the base :not() rule) — outline, offset, no clip */
.ja-lead-form input:not([type="checkbox"]):not([type="radio"]):focus,
.field input:not([type="checkbox"]):focus {
  border-color: var(--red) !important;
  outline: 2px solid var(--red) !important; outline-offset: 2px !important; box-shadow: none !important;
}

/* ---------- batch 8: label contrast/spacing + faint phone hint ---------- */
/* don't add the field-label top space to consent rows */
.ja-consent label { margin-top: 0 !important; }
/* border is already #D8C7C2 (--hair-2); state it explicitly for all controls */
.ja-lead-form input:not([type="checkbox"]):not([type="radio"]),
.ja-lead-form select, .ja-lead-form textarea,
.field input:not([type="checkbox"]), .field select, .field textarea { border-color: #D8C7C2 !important; }
/* faint format-hint placeholder (Phone only gets one in markup); kept light as a hint */
.ja-lead-form input::placeholder, .field input::placeholder { color: var(--muted) !important; opacity: 1 !important; font-weight: 400 !important; }

/* ---------- batch 9: focus-ring clearance (no clipping) ---------- */
/* the form no longer clips its own content; give edge fields + checkboxes a little
   breathing room so the offset outline always has clearance on the left/right. */
.ja-lead-form { overflow: visible !important; }
.home-hero-form-card .ja-lead-form { padding: 0 3px !important; }
.ja-form-grid { padding: 2px 3px !important; }
.ja-consent { padding-left: 3px !important; }

/* ============================================================
   FIX 2 — mobile tap targets >= 44x44 (mobile only; no desktop change)
   Sizes interactive targets via padding/min-height, not font-size.
   ============================================================ */
@media (max-width: 640px) {
  /* footer column links + brand contact links */
  .site-footer .footer-grid section ul li a,
  .site-footer .footer-brand address a {
    display: flex; align-items: center; min-height: 44px; width: fit-content;
  }
  /* (breadcrumb link tap target + vertical alignment handled in the Breadcrumb section
     below, applied at all widths) */
  /* blog pagination — real tappable page numbers + prev/next, wrap to avoid overflow */
  .pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0 10px; box-sizing: border-box;
  }
  /* dense inline link rows / pills */
  .program-inline-links a, .pill-list a, .pill-list span,
  .topic-tags a, .cross-links a, .video-chip-row a, .video-chip-row span {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}

/* ============================================================
   Breadcrumb alignment — line the breadcrumb up with the HERO CONTENT (the
   eyebrow/heading/lede), not just the hero card's outer edge. The heroes are padded
   cards, so the breadcrumb takes the same container width AND the hero's left padding
   so "Home" sits directly above the hero text. Mobile (<=900px): both the program and
   blog heroes pad their content ~34px in (content lands ~54px). Pure .wrap pages have
   no hero and keep their gutter (already aligned).
   ============================================================ */
/* Vertical alignment — keep "Home", the "/" separator, and the current-page label on a
   single centered line. The dropped-baseline bug only happens at <=640px, where the 44px
   tap target on the link pushes it below the adjacent plain-text nodes. So the whole
   vertical block is mobile-scoped: at >640px the breadcrumb is left exactly as-is, because
   changing the link's box/line-height there shrinks the row and shifts all page content
   below it up ~7px (a layout change outside the breadcrumb). */
@media (max-width: 640px) {
  .breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; column-gap: 8px; row-gap: 4px; }
  .breadcrumbs a, .breadcrumbs span { display: inline-flex; align-items: center; line-height: 1.2; }
  .breadcrumbs a { min-height: 44px; }
}

/* program-page-hero: content inset = 1px border + 34px(<=900) / 52px(>900) padding */
main:has(.program-page-hero) .breadcrumbs {
  width: min(1180px, calc(100% - 40px));
  padding-left: 53px;
}
@media (max-width: 900px) {
  main:has(.program-page-hero) .breadcrumbs { padding-left: 35px; }
}
/* blog-hero: fluid inset (1px border + fluid padding + nested .wrap centering) */
main:has(.blog-hero) .breadcrumbs {
  width: min(1180px, calc(100% - 40px));
  padding-left: clamp(35px, 9vw, 109px);
}

/* ============================================================
   Hero H1 wrapping — break only between words, never mid-word.
   (body main * sets overflow-wrap:anywhere, which dropped a lone "y" off
   "Cosmetology" on narrow screens.) Applies to all hero headings.
   ============================================================ */
.home-hero h1, .home-hero .home-hero__slogan, .program-page-hero h1, .program-page-hero .home-hero__slogan, .blog-hero h1, .about-v8-hero h1,
.service-hero-v121 h1, .service-hero-v122 h1, .legal-hero-v2 h1,
.disclosures-live-hero h1, [class*="hero"] h1 {
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  hyphens: none !important;
}

/* ============================================================
   Home hero — real framed photo, MOBILE ONLY.
   At mobile the hero photo is just a faint full-bleed background, so the hero reads as
   all text. Add a real framed image inside the copy column, between the CTA and the
   quick-facts. Scoped to <=980px (where .home-hero-form-grid stacks to one column);
   the desktop hero is untouched because the figure is display:none above that width.
   Frame matches the site's photo treatment: rounded, hairline border, soft shadow,
   object-fit:cover, 4/3, fixed box (no layout shift). Warm grade applied via the
   unified image-grade rule above so it matches other site photos.
   ============================================================ */
.home-hero__photo { display: none; }
@media (max-width: 980px) {
  .home-hero--with-form .home-hero__copy .home-hero__photo {
    display: block;
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 24px 0 2px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(35, 25, 27, 0.12);
    box-shadow: 0 18px 40px -22px rgba(35, 25, 27, 0.35);
    background: var(--paper-2);
  }
  .home-hero--with-form .home-hero__copy .home-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .home-hero--with-form .home-hero__copy .home-hero__photo-badge {
    position: absolute;
    left: 12px;
    bottom: 12px;
    margin: 0;
    padding: 5px 11px;
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(23, 19, 22, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}


/* ===== Go-fix 3.2 — hero H1 = location line, slogan = non-heading =====
   The hero location line is now <h1 class="eyebrow"> and must keep the eyebrow look.
   The slogan is now <div class="home-hero__slogan"> and inherits the former-H1 look from the
   .home-hero(--with-form)/.program-page-hero h1 rules, which were selector-extended to include
   .home-hero__slogan. These two blocks pin the eyebrow-h1 back to eyebrow metrics (beating the
   hero h1 !important font-size) and keep the slogan a block. Values match pre-change computed styles. */
body .home-hero h1.eyebrow,
body .home-hero--with-form h1.eyebrow,
body .home-hero--form-preview h1.eyebrow,
body .program-page-hero h1.eyebrow {
  font-size: 0.78rem !important;
  line-height: 1.68 !important;
  margin: 0 0 12px !important;
  max-width: none !important;
}
.home-hero .home-hero__slogan,
.home-hero--with-form .home-hero__slogan,
.program-page-hero .home-hero__slogan {
  display: block;
}
/* ===== end Go-fix 3.2 ===== */

/* ===== Go-fix 3.3 — landing text/SMS CTA: never break the phone number across lines
   (wrap it in .ja-nowrap in the content), only wrap at spaces (undo the global
   `body main *{overflow-wrap:anywhere}` that split words mid-character), and center
   the button text like the other two. ===== */
.ja-sms-cta { text-align: center; }
.ja-sms-cta__label { display: block; width: 100%; text-align: center; overflow-wrap: normal; word-wrap: normal; word-break: keep-all; }
.ja-nowrap { white-space: nowrap; overflow-wrap: normal; word-wrap: normal; }
/* ===== end Go-fix 3.3 ===== */

/* ===== Go-fix follow-up E — /student-testimonials/ wrapping card grid.
   The homepage .goodreviews-strip is a horizontal scroller (grid-auto-flow:column); reused for 57
   testimonials it squished the first cards. This is a plain responsive wrapping grid for the
   goodreview-card list on the testimonials page. ===== */
.ja-testimonial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
@media (max-width: 980px) { .ja-testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ja-testimonial-grid { grid-template-columns: 1fr; } }
/* ===== end Go-fix follow-up E ===== */