.hero {
      position: relative; height: 85vh; min-height: 520px;
      overflow: hidden; display: flex; align-items: flex-end;
      background-size: cover; background-position: center;
      background-color: #001428;
      /* URL comes from --hero-bg / --hero-bg-m custom props set inline by the
         generator, so mobile can swap to a w_900 variant of the same crop */
      background-image: var(--hero-bg);
    }
    .hero-semester { border-bottom: 8px solid var(--teal); }
    .hero-summer1 { border-bottom: 8px solid var(--orange); }
    .hero-summer2 { border-bottom: 8px solid var(--orange); }
    .hero-semester .hero-eyebrow { color: var(--teal); }
    .hero-semester .hero-eyebrow::before { background: var(--teal); }
    .hero-summer1 .hero-eyebrow { color: var(--orange); }
    .hero-summer1 .hero-eyebrow::before { background: var(--orange); }
    .hero-summer2 .hero-eyebrow { color: var(--orange); }
    .hero-summer2 .hero-eyebrow::before { background: var(--orange); }
    .hero-overlay {
      position: absolute; inset: 0; z-index: 1;
    }
    .hero-content {
      position: relative; z-index: 2; text-align: left; color: #fff;
      padding: 0 48px 56px; max-width: 900px; width: 100%;
      margin-right: auto; margin-left: clamp(24px, 5vw, 80px);
    }
    .hero-eyebrow {
      font-family: var(--font-head); font-weight: 700; font-size: 20px;
      letter-spacing: 3px; text-transform: uppercase;
      color: var(--lime); margin-bottom: 20px;
      display: flex; align-items: center; gap: 14px;
      text-shadow: 0 2px 12px rgba(0,0,0,0.8), 0 1px 4px rgba(0,0,0,0.6);
    }
    .hero-eyebrow::before { content: ''; display: block; width: 32px; height: 2px; background: var(--lime); }
    .hero-title {
      font-family: var(--font-head); font-weight: 800;
      font-size: 72px; letter-spacing: -2px;
      line-height: 0.95; text-transform: uppercase; margin-bottom: 28px;
      text-wrap: balance;
      text-shadow: 0 2px 16px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.45);
    }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
    /* §5.5: the shared teal anthem band sits between the navy field-sites section and the
       warm-gray courses section on program pages, so it carries both 3px white seams here. */
    .anthem-section { border-top: 3px solid #fff; border-bottom: 3px solid #fff; }
    @media (max-width: 860px) {
      .hero-overlay { background: linear-gradient(to bottom, rgba(0,20,40,0.04) 0%, rgba(0,20,40,0.08) 30%, rgba(0,20,40,0.26) 50%, rgba(0,20,40,0.50) 68%, rgba(0,20,40,0.68) 85%, rgba(0,20,40,0.74) 100%); }
      /* shared.css's tablet hero inset: this sheet loads after it, so its base rule kept 48px plus the desktop
         margin from 641 to 860 (pass 7, cycle 4). The 640 rule below resets both for phones. */
      .hero-content { padding-left: 32px; padding-right: 32px; margin-left: 16px; }
    }
    @media (max-width: 640px) {
      .hero { height: auto; min-height: 0; background-image: var(--hero-bg-m, var(--hero-bg)); }
      .hero-content { padding: 120px 24px 40px; margin-left: 0; }
      .hero-ctas { flex-direction: column; }
      .hero-ctas .btn { width: 100%; text-align: center; }
    }
    /* Phone hero crop (pass 8): a hero-only wide band is magnified by cover on a near-square phone hero,
       so the generator gives those heroes a square --hero-bg-p; every other page falls back to --hero-bg-m. */
    @media (max-width: 480px) {
      .hero { background-image: var(--hero-bg-p, var(--hero-bg-m, var(--hero-bg))); }
    }
    /* Tablet hero crop (pass 8, cycle 4): the same heroes' square at w_1200 from 641 to 860, where the 85vh hero is
       taller than wide and cover drew their wide band at 0.93 to 1.0x; every other page falls back to --hero-bg. */
    @media (min-width: 641px) and (max-width: 860px) {
      .hero { background-image: var(--hero-bg-t, var(--hero-bg)); }
    }
    .program-intro {
      max-width: 1200px; margin: 0 auto; padding: 72px 48px;
      display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
    }
    .program-intro-body h2 {
      font-family: var(--font-head); font-weight: 800; font-size: 40px;
      text-transform: uppercase; letter-spacing: -0.5px; color: var(--navy);
      line-height: 1.1; margin-bottom: 24px;
    }
    .program-intro-body p {
      font-size: 16px; line-height: 1.75; color: var(--dark); margin-bottom: 16px;
    }
    .program-intro-body p:last-child { margin-bottom: 0; }   /* the photo centres on the text, not on the text plus 16px (brand 5.6) */
    .program-intro-visual { border-radius: 8px; overflow: hidden; }
    .program-intro-visual img {
      width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 4 / 3;
    }
    @media (max-width: 860px) {
      .program-intro { grid-template-columns: 1fr; gap: 32px; padding: 64px 24px; }
    }
    .activities-section {
      background: var(--off-white); padding: 72px 48px;
      border-top: 3px solid var(--orange);
    }
    .activities-inner { max-width: 1200px; margin: 0 auto; }
    .activities-inner h2 {
      font-family: var(--font-head); font-weight: 800; font-size: 40px;
      text-transform: uppercase; letter-spacing: -0.5px; color: var(--navy);
      margin-bottom: 48px;
    }
    .activities-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    }
    .activity-card {
      background: #fff; border-radius: 8px; overflow: hidden;
      box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }
    .activity-img { overflow: hidden; }
    .activity-img img {
      width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 3 / 2;
    }
    .activity-card-body { padding: 20px 24px 28px; }
    .activity-card h3 {
      font-family: var(--font-head); font-weight: 700; font-size: 15px;
      text-transform: uppercase; letter-spacing: 0.5px; color: var(--navy);
      margin-bottom: 10px; line-height: 1.3;
    }
    .activity-card p {
      font-size: 16px; line-height: 1.7; color: var(--dark);
    }
    @media (max-width: 860px) {
      .activities-section { padding: 64px 24px; }
      .activities-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      .activities-grid { grid-template-columns: 1fr; }
    }
    .acad-courses {
      background: var(--warm-gray); padding: 72px 48px;
    }
    .acad-courses .section-label { color: #fff; }
    .acad-courses .section-label::before { background: currentColor; }
    .acad-courses-inner {
      max-width: 1200px; margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
    }
    .acad-text h2 {
      font-family: var(--font-head); font-weight: 800; font-size: 40px;
      text-transform: uppercase; letter-spacing: -0.5px; color: #fff;
      margin-bottom: 20px;
    }
    .acad-text p {
      font-size: 16px; font-weight: 300; line-height: 1.75; color: #fff; margin-bottom: 16px;
    }
    .theme-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
    .theme-tag {
      font-family: var(--font-head); font-weight: 600; font-size: 14px;
      letter-spacing: 1px; text-transform: uppercase;
      background: rgba(0,0,0,0.18); color: #fff;   /* darker chip ground: white text was 4.34:1 on the 15% white tint (pass 4, 2026-09-13) */
      padding: 7px 14px; border-radius: 3px;
    }
    .acad-courses-right h3 {
      font-family: var(--font-head); font-weight: 700; font-size: 18px;
      text-transform: uppercase; letter-spacing: -0.3px; color: #fff;
      margin-bottom: 8px;
    }
    .courses-subtitle {
      font-size: 16px; font-weight: 300; line-height: 1.5; color: #fff; margin-bottom: 20px;
    }
    .course-single {
      background: var(--off-white); border-radius: 8px; padding: 28px 28px 24px;
    }
    .course-single-header {
      display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
    }
    .course-single-header .course-code {
      font-family: var(--font-body); font-weight: 700; font-size: 20px;
      letter-spacing: 1px; color: var(--dark); white-space: nowrap;
    }
    .course-single-header .course-name {
      font-family: var(--font-head); font-weight: 700; font-size: 16px;
      color: var(--navy); flex: 1;
    }
    .course-single-header .course-credits {
      font-family: var(--font-body); font-weight: 700; font-size: 20px;
      letter-spacing: 1px; text-transform: uppercase;
      background: var(--navy); color: #fff;
      padding: 5px 12px; border-radius: 3px; white-space: nowrap;
    }
    .course-single p {
      font-size: 16px; line-height: 1.75; color: var(--dark);
      border-top: 1px solid var(--light-gray); padding-top: 16px;
    }
    .course-syllabus-link {
      display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
      margin-top: 6px; font-family: var(--font-head); font-weight: 700;
      font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--navy); text-decoration: none; padding-bottom: 2px;
      border-bottom: 2px solid transparent; transition: border-color 0.2s;
    }
    .course-syllabus-link:hover { border-bottom-color: var(--navy); }
    .course-syllabus-link svg {
      width: 13px; height: 13px; fill: none; stroke: currentColor;
      stroke-width: 2.5; flex-shrink: 0;
    }
    @media (max-width: 860px) {
      .acad-courses { padding: 64px 24px; }
      .acad-courses-inner { grid-template-columns: 1fr; gap: 32px; }
    }
    @media (max-width: 640px) {
      .course-single { padding: 20px; }
      .course-single-header { flex-wrap: wrap; gap: 8px; }
      .course-single-header .course-name { width: 100%; order: 3; }
    }
    .field-sites-section {
      background: var(--navy); padding: 72px 48px;
      border-top: 3px solid #fff;
    }
    .field-sites-inner { max-width: 1200px; margin: 0 auto; }
    .field-sites-section .section-label { color: var(--bright-teal); }
    .field-sites-section .section-label::before { background: currentColor; }
    .field-sites-section h2 {
      font-family: var(--font-head); font-weight: 800; font-size: 40px;
      text-transform: uppercase; color: #fff; margin-bottom: 12px;
    }
    .field-sites-section > .field-sites-inner > p {
      font-size: 16px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,0.85); margin-bottom: 40px; max-width: 640px;
    }
    .field-sites-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    }
    .field-site-card {
      position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3;
      container-type: size;   /* lets the caption band measure the card (cqh) */
    }
    .field-site-card img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    /* The dark band belongs to the caption, not to the card (pass 4, 2026-09-19). As a share of
       card height it only reached the title on the 1440 layout it was tuned on; on phones and on
       narrow 3-up cards the caption was taller than the band and the white title sat on bare photo.
       It is the caption's ::before now: 140% of the caption, never less than 54% of the card (cqh;
       browsers without container units keep the first height).
       Strength (Dougie, 2026-09-19: "strengthen the band"): 0.82 at the foot, still 0.62 two thirds
       of the way up, which is always above the title's top edge, then clear. White type on 0.62 of
       this navy is 5.0:1 over a pure white photo, so the title passes AA on any picture; the old
       0.76 / 0.24 / clear recipe left it at 2.8 to 4.4 over bright skies. Field-site cards only:
       the homepage center cards keep the lighter recipe on his word. */
    .field-site-card-label {
      position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 20px;
      isolation: isolate;
    }
    .field-site-card-label::before {
      content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none;
      height: 140%;
      height: max(140%, 54cqh);
      background: linear-gradient(to top, rgba(0,20,40,0.82) 0%, rgba(0,20,40,0.62) 66%, transparent 100%);
    }
    .field-site-card-label h3 {
      font-family: var(--font-head); font-weight: 700; font-size: 14px;
      text-transform: uppercase; letter-spacing: 0.5px; color: #fff;
    }
    .field-site-card-label p {
      /* 400 on purpose: photo-card captions are the brand.md §3.4 exception (Dougie, 2026-09-19) */
      font-size: 14px; font-weight: 400; line-height: 1.55; color: rgba(255,255,255,0.85); margin-top: 6px;
    }
    @media (max-width: 1100px) {
      /* Two across from 1100 down (was 860): a 3-up card narrower than ~340px is nearly all caption. */
      .field-sites-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 860px) {
      .field-sites-section { padding: 64px 24px; }
    }
    @media (max-width: 640px) {
      .field-sites-grid { grid-template-columns: 1fr; }
    }
    .center-cta {
      background: var(--teal); padding: 36px 48px;
      display: flex; align-items: center; justify-content: center; gap: 48px;
      border-top: 3px solid #fff;
    }
    .center-cta h2 {
      font-family: var(--font-head); font-weight: 800; font-size: 26px;
      text-transform: uppercase; color: var(--forest); margin-bottom: 4px;
    }
    .center-cta p {
      color: var(--forest); margin: 0;
    }
    .center-cta .btn-navy { white-space: nowrap; }
    @media (max-width: 860px) {
      .center-cta { flex-direction: column; text-align: center; padding: 36px 24px; gap: 20px; }
    }
    .dates-section {
      padding: 36px 48px; background: var(--off-white);
      border-top: 3px solid var(--orange);
    }
    .dates-inner { max-width: 1100px; margin: 0 auto; }
    .dates-header {
      display: flex; justify-content: space-between; align-items: flex-end;
      margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
    }
    .dates-inner h2 {
      font-family: var(--font-head); font-weight: 800; font-size: 26px;
      text-transform: uppercase; letter-spacing: -0.5px; color: var(--navy);
      margin: 0;
    }
    .dates-aid-link {
      display: inline-flex; align-items: center; min-height: 44px;
      font-family: var(--font-body); font-weight: 700; font-size: 20px;
      color: var(--navy); text-decoration: none; letter-spacing: 0.5px;
      text-transform: uppercase; padding-bottom: 2px;
      border-bottom: 2px solid var(--lime);
    }
    .dates-aid-link:hover { border-bottom-color: var(--navy); }
    .sessions-row {
      display: flex; gap: 16px; flex-wrap: wrap;
    }
    .session-pill {
      background: #fff; border-radius: 10px; padding: 20px 24px;
      flex: 1 1 0; min-width: 220px; max-width: 480px;
      border: 1px solid rgba(0,0,0,0.06);
    }
    .session-pill-top {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 4px;
    }
    .session-pill-term {
      font-family: var(--font-head); font-weight: 800; font-size: 15px;
      text-transform: uppercase; color: var(--navy);
    }
    .session-pill-status {
      font-family: var(--font-head); font-weight: 700;
      font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase;
      padding: 3px 10px; border-radius: 3px;
    }
    .status-open { background: rgba(170,185,35,0.12); color: var(--olive); }
    .status-field { background: rgba(0,72,98,0.08); color: var(--navy); }
    .status-filling { background: var(--gold); color: var(--navy); }
    .status-waitlist { background: rgba(61,53,47,0.08); color: var(--dark); }
    .session-pill-dates {
      font-size: 16px; color: var(--dark); margin-bottom: 10px;
    }
    .session-pill-cost {
      font-family: var(--font-body); font-weight: 700; font-size: 22px;
      color: var(--navy);
    }
    .dates-note {
      font-size: 16px; color: var(--dark); margin-top: 16px;
    }
    @media (max-width: 860px) {
      .dates-section { padding: 32px 24px; }
      .sessions-row { flex-direction: column; }
      .session-pill { min-width: 0; }
      .dates-header { flex-direction: column; align-items: flex-start; }
    }
    .other-programs {
      background: var(--off-white); padding: 72px 48px;
      border-top: 3px solid var(--orange);   /* the summer accent, like the page's other lines (Dougie, 2026-09-27: "orange"); it was the semester sheet's teal */
    }
    .other-programs-inner { max-width: 1200px; margin: 0 auto; }
    .other-programs h2 {
      font-family: var(--font-head); font-weight: 800; font-size: 40px;
      text-transform: uppercase; letter-spacing: -0.5px; color: var(--navy);
      margin-bottom: 40px;
    }
    .sibling-grid {
      display: grid; gap: 24px;
    }
    .sibling-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
    .sibling-card {
      position: relative; border-radius: 8px; overflow: hidden;
      text-decoration: none; display: block; aspect-ratio: 3 / 2;
      background-color: var(--navy);
      container-type: size;   /* lets the caption band measure the card (cqh) */
    }
    .sibling-card img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      transition: transform 0.5s;
    }
    .sibling-card:hover img { transform: scale(1.05); }
    /* Same band as the field-site cards above (Dougie, 2026-09-19: "same treatment for the sibling
       cards"): it is the caption's ::before, 140% of the caption and never less than the old 55% of
       the card, 0.82 at the foot and still 0.62 above the title's top edge, then clear. The old
       fixed 55% strip (0.84, 0.54 at 40%, clear) left a three-line program name above it on the
       narrow 4-up cards, and titles at 3.0 to 4.4 over bright photos. */
    .sibling-card-info {
      position: absolute; bottom: 0; left: 0; right: 0; padding: 20px;
      color: #fff;
      isolation: isolate;
    }
    .sibling-card-info::before {
      content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none;
      height: 140%;
      height: max(140%, 55cqh);
      background: linear-gradient(to top, rgba(0,20,40,0.82) 0%, rgba(0,20,40,0.62) 66%, transparent 100%);
    }
    .sibling-card-title {
      font-family: var(--font-head); font-weight: 800; font-size: 16px;
      text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.2;
    }
    .sibling-card-meta {
      font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.9);   /* §3.4 photo-card caption exception */ margin-top: 4px;
      white-space: nowrap;
    }
    @media (max-width: 1100px) {
      .sibling-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 860px) {
      .other-programs { padding: 64px 24px; }
      .hero-title { font-size: 56px; letter-spacing: -1px; }
    }
    @media (max-width: 640px) {
      /* One column only on phones. It used to start at 860, so from 641 to 860 the four cards stacked
         at full width (720x480 each at 768, a 1,992px strip); they hold two across down to 640, like
         the field-site grid (pass 7, 2026-09-20). The generator's `sizes` says 46vw up to 1100 to match. */
      .sibling-grid, .sibling-grid.cols-4 { grid-template-columns: 1fr; }
      .program-intro-body h2,
      .activities-inner h2,
      .acad-text h2,
      .field-sites-section h2,
      .other-programs h2 { font-size: 28px; }   /* §3.7 mobile H2 */
      .center-cta h2 { font-size: 22px; }
      .hero-title { font-size: 36px; letter-spacing: -0.5px; line-height: 1.05; }
    }
    @media (max-width: 380px) {
      .hero-content { padding-left: 16px; padding-right: 16px; }
      .hero-title { font-size: 32px; overflow-wrap: break-word; }
      .program-intro { padding: 48px 16px; }
      .activities-section { padding: 48px 16px; }
      .acad-courses { padding: 48px 16px; }
      .field-sites-section { padding: 48px 16px; }
      .other-programs { padding: 48px 16px; }
      .center-cta { padding: 36px 16px; }
      .dates-section { padding: 32px 16px; }
      .session-pill { padding: 16px 18px; }
    }

/* Mobile hero type scale (matches the homepage pattern) */
@media (max-width: 640px) {
  .hero-eyebrow { font-size: 13px; letter-spacing: 2px; }
}