/* ============================================================
   CCSJ Charter Authority — homepage
   Desktop design: Figma node 1:2 (1280w) · Mobile: 1:1296 (480w)
   Palette: maroon #8c2232 · steel #54727a (darkened from #7098a3 for WCAG AA contrast, 10/6) · sky #b6cfd6
   ============================================================ */

* { box-sizing: border-box; }

html, body { overflow-x: clip; }

body {
  margin: 0;
  background: #fff;
  color: #000;
  font-family: 'Lato', sans-serif;
}

img { display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, p { margin: 0; }

/* ---------------- header ---------------- */

.site-header {
  position: relative;
  isolation: isolate; /* scope the mobile header-fan multiply; keeps resize repaints section-local */
  z-index: 3; /* the overlapping logo must paint above the hero's isolation group */
}

.util {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 21px;
  padding: 0 60px 10px 0;
}

.btn-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 158px;
  height: 34.45px;
  padding: 9px 16px;
  background: #8c2232;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.util-nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-left: 198px;
  font-size: 14px;
  line-height: normal;
  white-space: nowrap;
}

.util-nav-left { display: flex; gap: 20px; }

.util-nav-right { display: flex; gap: 20px; font-weight: 700; color: #8c2232; }

.util-nav a:hover { text-decoration: underline; }

.brand-bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 60px;
  background: #54727a;
}

.logo {
  position: relative;
  flex: none;
  width: 114.84px;
  height: 115.02px;
  align-self: center;
}

.logo-ring {
  position: absolute;
  left: -1px;
  top: 0.15px;
  width: 118.72px;
  height: 118.72px;
  max-width: none;
}

.logo-seal {
  /* white-on-alpha version of the seal — a real alpha channel instead of
     mix-blend-screen, which breaks inside the mobile logo's stacking context */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-title {
  margin-left: 22px;
  font-family: 'Vollkorn', serif;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}

.brand-title strong { font-weight: 700; }

.brand-pipe { color: #b6cfd6; }

.hamburger { display: none; }

.mobile-menu { display: none; }

.header-fan { display: none; }

.notice {
  height: 44.75px;
  padding: 14px 60px 14px 198px;
  background: rgba(182, 207, 214, 0.5);
  font-size: 14px;
  line-height: normal;
}

.notice-mobile { display: none; }

/* ---------------- hero ---------------- */

.hero {
  position: relative;
  height: 477px;
  overflow: hidden;
  isolation: isolate; /* panel/fan multiply only needs the in-section photo backdrop */
}

.hero-photo {
  position: absolute;
  left: 343.79px;
  right: 0;
  top: -3px;
  height: 450.19px;
  background: #d9d9d9;
  transform: scaleX(-1);
  overflow: hidden;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-fan {
  position: absolute;
  right: 20.2px;
  top: -3px;
  width: 296.64px;
  height: 479.77px;
  mix-blend-mode: multiply;
  transform: scaleX(-1);
}

.hero-fan span,
.header-fan span,
.different-fan span {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: block;
}

.hero-fan img {
  position: absolute;
  width: 241%;
  height: 149.24%;
  left: -3.11%;
  top: -22.92%;
  max-width: none;
}

.hero-veil {
  position: absolute;
  left: 0;
  right: 0;
  top: 135.64px;
  height: 341.13px;
  background: linear-gradient(to bottom, rgba(182, 207, 214, 0), rgba(182, 207, 214, 0.3));
}

.hero-panel-bg,
.hero-panel {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 532px;
  height: 436.77px;
}

.hero-panel-bg {
  background: #8c2232;
  mix-blend-mode: multiply;
}

.hero-panel {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 136px 51px 71px 60px;
  color: #fff;
}

.hero-panel h1 {
  font-family: 'Vollkorn', serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.15;
}

.hero-panel h1 .h1-b { font-weight: 700; }

.tagline {
  font-size: 24px;
  line-height: 1.15;
}

/* ---------------- intro + cards ---------------- */

.intro-cards {
  margin-top: 56px;
  padding: 0 60px;
}

.intro {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.intro h2 {
  margin-bottom: 4px; /* 12 in Figma; browser Vollkorn line box runs 8px taller than Figma's heading node */
  font-family: 'Vollkorn', serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.5;
  color: #8c2232;
}

.intro h2 strong { font-weight: 700; }

.intro p {
  font-size: 20px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.cards {
  display: flex;
  align-items: stretch;
  gap: 50px;
  max-width: 1300px;
  margin: 56px auto 0; /* 58 in Figma: −2 net after the h2 margin trim above, keeps the card rule at Figma y=909.7 */
}

.card {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  border-top: 3px solid #b6cfd6;
  padding-top: 18.5px;
}

.card-body {
  display: flex;
  gap: 17px;
  flex: 1 0 auto;
  padding-bottom: 16px;
}

.card-icon {
  width: 50px;
  height: 50px;
  flex: none;
}

.card-text h3 {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  color: #8c2232;
}

.card-text p {
  font-size: 16px;
  line-height: normal;
}

.btn-card {
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 45.46px;
  padding: 11px 40px;
  margin: auto 0 0 67px;
  background: rgba(182, 207, 214, 0.75);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  text-align: center;
}

/* ---------------- what makes ccsj different ---------------- */

.different {
  position: relative;
  isolation: isolate;
  height: 428.24px;
  margin-top: 56px;
  padding: 0 60px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.different-bg {
  position: absolute;
  inset: 0;
  background: #fff;
}

.different-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.different-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

.different-tint {
  position: absolute;
  inset: 0;
  background: #54727a;
  mix-blend-mode: multiply;
}

.different-fan {
  position: relative;
  flex: none;
  width: 264.78px;
  height: 428.24px;
  margin-right: -50px;
  mix-blend-mode: screen;
  transform: scaleY(-1);
}

.different-fan img {
  position: absolute;
  width: 234.79%;
  height: 145.39%;
  left: 0;
  top: -20.27%;
  max-width: none;
}

.different-content {
  position: relative;
  width: 660.58px;
  display: flex;
  flex-direction: column;
  color: #fff;
}

.different-content h2 {
  font-family: 'Vollkorn', serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.5;
}

.different-content h2 strong { font-weight: 700; }

.different-copy { margin-top: 15px; }

.different-lede {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
}

.different-copy p:not(.different-lede) {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.btn-outline {
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  height: 45.46px;
  padding: 11px 20px;
  margin-top: 34px;
  border: 1px solid #fff;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------------- contact ---------------- */

.contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 43px;
  height: 263.33px;
  margin-top: 56px;
  padding: 0 60px;
}

.contact-photo {
  position: relative;
  flex: none;
  width: 238.49px;
  height: 263.33px;
  overflow: hidden;
}

.contact-photo img {
  position: absolute;
  width: 102.6%;
  height: 120.3%;
  left: -1.3%;
  top: -10.15%;
  max-width: none;
}

.contact-info {
  flex: none;
  width: 181.24px;
  display: flex;
  flex-direction: column;
}

.contact-info h2 {
  font-family: 'Vollkorn', serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: #8c2232;
}

.contact-details {
  margin-top: 8.64px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
}

.contact-name {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  color: #8c2232;
}

.contact-info .btn-card { margin: 16px 0 0; width: 100%; }

/* ---------------- footer ---------------- */

.site-footer {
  position: relative;
  isolation: isolate;
  margin-top: 56px;
  padding-top: 5.39px;
}

.footer-main {
  display: flex;
  gap: 47px;
  height: 183px;
  padding: 40px 60px 0;
  background: rgba(182, 207, 214, 0.5);
}

.footer-logo {
  flex: none;
  width: 216px;
  height: 69.06px;
}

.footer-col {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.36px;
}

.footer-head {
  font-weight: 700;
  color: #8c2232;
}

.footer-col a:hover { text-decoration: underline; }

.ext-arrow {
  display: inline-block;
  width: 9px;
  height: 9px;
  vertical-align: 0;
  margin-left: 1px;
}

.footer-address { width: 162.02px; }

.footer-links { width: 136.7px; }

.footer-main .footer-links:nth-of-type(2) { width: 114.3px; }

.footer-resources { width: 238.34px; }

.addr-sep, .addr-pipe { display: none; }

.footer-bottom {
  display: flex;
  align-items: center;
  gap: 38px;
  height: 59px;
  padding: 0 60px;
  background: #b6cfd6;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 15px;
}

.footer-social img:nth-child(1) { width: 23.46px; height: 23.46px; }

.footer-social a:nth-child(1) img { width: 23.46px; height: 23.46px; }
.footer-social a:nth-child(2) img { width: 24.24px; height: 24.24px; }
.footer-social a:nth-child(3) img { width: 23px; height: 24px; }

.footer-legal {
  display: flex;
  gap: 38px;
  font-size: 12px;
  line-height: 1.5;
}

/* Figma's export claims rotate(-120°)+flip here, but its own render disagrees
   (transformed-group coords are unreliable); these values were fitted against
   the render itself: ring mirrored, tilted -12°, 660px, at (612,-238) footer-local */
.footer-fan {
  position: absolute;
  top: 0;
  bottom: 0.4px;
  left: 79.53%;
  right: 2.11%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.footer-fan img {
  position: absolute;
  right: -19px; /* right-anchored so the fan hugs the page edge at any viewport width */
  top: -238px;
  width: 660px;
  height: 661px;
  max-width: none;
  transform: rotate(-12deg) scaleX(-1);
}




/* ---------------- charter amendments ---------------- */

/* this band uses its own photo and multiply only (no flat 0.25 layer) */
.page-title-amend .page-title-photo {
  content: url('../images/amendments-classroom.jpg');
  top: -267px; /* fitted against the Figma render, same method as the base band */
}

.page-title-amend .page-title-panel::after { content: none; }

/* two-line sidebar label renders tighter in Figma than the export claims */
.sidebar-oversight .sidebar-label { line-height: 1.18; }

.sidebar-oversight .sidebar-nav { margin-top: 6.5px; }

.triggers .content-heading { margin-bottom: 16px; }

.triggers-body p {
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.triggers-body ul {
  margin: 0;
  padding: 0;
  list-style: disc;
}

.triggers-body li {
  margin-left: 24px;
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.triggers-body .closure-sub {
  font-family: 'Lato', sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  margin: 20px 0 6px;
}


/* ---------------- monitoring framework ---------------- */

.fw-icon {
  flex: none;
  height: 50px;
  width: auto;
}

.team .content-heading { margin-bottom: 24px; }

.team-row {
  display: flex;
  align-items: flex-start; /* Figma: cards keep independent heights */
  gap: 20px;
  max-width: 1300px;
}

.team-row > * { align-self: stretch; }

.team-row.row-loose > * { align-self: auto; } /* parental-rights variant */

.team-card {
  flex: 1 0 0;
  min-width: 1px;
  border: 1px solid #8c2232;
  padding: 16px;
}

.team-card h3 {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  color: #8c2232;
}

.team-role {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: normal;
}

.team-email {
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  color: #8c2232;
}

.team-email a:hover { text-decoration: underline; }

.material.material-center { /* compound selector: must outrank the base .material rule that appears later */
  align-items: center;
  min-height: 50px;
}

/* seam trims: browser line boxes run ~4px taller per content section than Figma here */
.page-monitoring .how-it-works { margin-bottom: -3.7px; }
.page-monitoring .team { margin-bottom: -1.6px; }
.page-monitoring .triggers { margin-bottom: -4.8px; }
.page-monitoring .site-footer { margin-top: 62.2px; } /* re-tuned after the .material-center min-height fix */


/* ---------------- parental rights ---------------- */

.btn-feedback {
  max-width: 246px;
  width: 100%;
  margin: 24px 0 0;
}

/* seam trims for this page's line-box tax */
.page-parental .how-it-works { margin-bottom: -2.5px; }
.page-parental .site-footer { margin-top: 54px; }

.res-card p {
  font-size: 16px;
  line-height: normal;
}

.res-card h3 { text-decoration: underline; }

.res-card:hover h3 { text-decoration: none; }


/* ---------------- partnership opportunities ---------------- */

.page-title-partner .page-title-photo {
  content: url('../images/partnership-classroom.jpg');
  top: -145px; /* fitted against the Figma render */
}

.difference .page-heading { margin-bottom: 16.9px; }

.difference .page-heading:last-child { margin-bottom: 0; } /* heading with no intro under it (contact, 9/28) */

.difference-body { display: flex; flex-direction: column; gap: 16px; }

.difference-lede {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: #8c2232;
}

.support-grid-section .content-heading { margin-bottom: 24px; }

.support-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1300px;
}

.support-card {
  display: flex;
  gap: 17px;
  align-items: flex-start;
  border-top: 3px solid #b6cfd6;
  padding-top: 18.5px;
}

.support-card h3 {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  color: #8c2232;
}

.support-card p {
  font-size: 16px;
  line-height: normal;
}

.quote-card { display: flex; gap: 17px; flex-direction: row; align-items: flex-start; }

.quote-mark {
  flex: none;
  width: 21px;
  font-size: 61px;
  line-height: 1;
  color: #8c2232;
}

.quote-card p {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.5;
}

.quote-card .quote-attr {
  margin-bottom: 0;
  color: #8c2232;
}

.refs-row { gap: 40px; }

.material.material-ref { width: 279.67px; min-height: 72px; } /* compound: page rules precede generics in this file */

.material.material-ref span { line-height: normal; }

.page-title-about .page-title-photo {
  content: url('../images/about-classroom.jpg');
  left: -15px;
  top: -365px;
  width: calc(100% + 17px); /* fitted against the Figma render */
}

.page-title-about .page-title-panel { width: 854px; } /* About band panel is wider */

.page-mission .how-it-works .page-heading { margin-bottom: 24px; }

.page-mission .steps .step-text p { line-height: 19.8px; } /* fig row bodies: 3 lines in an 89px block */

/* board page */
.bio-step { display: flex; gap: 17px; border-top: 3px solid #b6cfd6; padding-top: 18.5px; }

.bio-photo {
  flex: none;
  width: 142.59px;
  height: 163.08px;
  background: #d9d9d9;
  overflow: hidden;
}

.bio-photo img { width: 100%; height: 100%; object-fit: cover; }

.step-text.bio-text h3 {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  color: #8c2232;
}

.step-text.bio-text p {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: normal;
  white-space: pre-wrap;
}

.step-text.bio-text p:last-child { margin-bottom: 0; }

.page-board .step-text.bio-text p { line-height: 1.5; } /* readability (Mike 9/28) */

.memberships .content-heading { margin-bottom: 24px; }

.membership { margin-left: 5px; }

.nacsa-logo { width: 158px; height: 50px; margin-bottom: 16px; }

.membership p { font-size: 16px; line-height: 1.5; }

.page-board .site-footer { margin-top: 40.7px; } /* seam trim: bios+cards line-box tax */

/* our team grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.bio-step.bio-center { align-items: center; }

.step-text.bio-text .bio-contact {
  font-weight: 700;
  color: #8c2232;
}

.step-text.bio-text .bio-contact a:hover { text-decoration: underline; }

.page-team .site-footer { margin-top: 49px; }

/* form pages (feedback / records / contact) */
.page-title-utility .page-title-photo {
  content: url('../images/utility-classroom.jpg');
  top: -353px; /* fitted against the Figma render */
}

.page-title-utility .page-title-panel { width: 328.8px; } /* narrower panel on the utility pages */

.page-fullwidth { display: block; }

.form-columns {
  display: flex;
  gap: 56px;
  align-items: flex-start;
}

.form-main { flex: none; width: 676px; }

.form-block .page-heading { margin-bottom: 24px; }

.inquiry-form { display: flex; flex-direction: column; gap: 16px; }

.inquiry-form input,
.inquiry-form textarea,
.inquiry-form select {
  width: 100%;
  padding: 8px 16px;
  border: 0;
  border-radius: 0;
  background: rgba(182, 207, 214, 0.3);
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.48px;
  color: #000;
}

.inquiry-form input { height: 40px; }

.inquiry-form ::placeholder { color: rgba(0, 0, 0, 0.6); opacity: 1; }

.inquiry-form textarea { min-height: 181px; resize: vertical; }

.form-select { position: relative; }

.form-select select {
  height: 40px;
  appearance: none;
  -webkit-appearance: none;
  font-weight: 700;
  color: #54727a;
  cursor: pointer;
}

.select-caret {
  position: absolute;
  right: 16px;
  top: 14px;
  pointer-events: none;
}

.inquiry-form .btn-submit {
  align-self: flex-start;
  width: auto;
  margin: 0;
  border: 0;
  cursor: pointer;
  font-family: 'Lato', sans-serif;
}

.form-aside { flex: 1; min-width: 1px; max-width: 250px; }

.form-aside .content-heading { margin-bottom: 12px; }

.form-aside .aside-copy { font-size: 16px; line-height: 1.5; white-space: pre-wrap; }

.inquiry-form input:focus,
.inquiry-form textarea:focus,
.inquiry-form select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(140, 34, 50, 0.55);
}

/* charter schools FAQ accordion */
.page-faq .site-footer { margin-top: 44.8px; }

.faq-group .content-heading { margin-bottom: 39px; }

.faq-item { border-top: 3px solid #b6cfd6; }

.faq-item + .faq-item { margin-top: 27px; }

.faq-q {
  display: flex;
  align-items: center;
  gap: 17px;
  width: 100%;
  padding: 18.5px 0 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Lato', sans-serif;
}

.faq-q span {
  flex: 1;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  color: #8c2232;
}

.faq-caret {
  flex: none;
  width: 12.3px;
  height: 9.5px;
  transform: rotate(180deg);
  transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}

.faq-q[aria-expanded="true"] .faq-caret { transform: rotate(0deg); }

.faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}

.faq-a p {
  padding: 12px 0 4px;
  font-size: 16px;
  line-height: 1.5;
}

/* upcoming events table */
.events .content-heading { margin-bottom: 0; } /* fig: column heads sit flush under the heading */

.events-head, .events-row {
  display: grid;
  grid-template-columns: 244px 255px 282px 1fr;
  gap: 0;
}

.events-head p {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #8c2232;
}

.events-head {
  border-bottom: 3px solid #b6cfd6;
  padding-bottom: 14.5px; /* 16 to the rule's center line */
}

.events-row { margin-top: 18.5px; }

.events-row + .events-row { margin-top: 20px; }

.events-row p { font-size: 16px; line-height: 1.5; }

.events-row a { color: inherit; }

.events-row a:hover { text-decoration: underline; }

/* annual reports banner */
.results-banner {
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: 60px;
  overflow: hidden;
}

.banner-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  max-width: 660.58px;
  color: #fff;
}

.banner-content h2 {
  font-family: 'Vollkorn', serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.5;
}

.banner-content .btn-outline { margin-top: 0; }

.page-areports .results-banner { padding: 57.7px 60px; }

.page-areports .site-footer { margin-top: 49.7px; }

/* our schools */
.school .page-heading { margin-bottom: 17px; }

.school-row { display: flex; gap: 17px; align-items: flex-start; }

.school-logo { flex: none; object-fit: contain; }

.school-body { flex: 1; min-width: 1px; display: flex; flex-direction: column; gap: 17px; }

.school-btns { display: flex; gap: 17px; }

.btn-card.btn-school { width: 246px; max-width: 246px; margin: 0; }

.btn-card.btn-school-2 { width: auto; max-width: 266px; flex: 1 0 0; }

/* Box is sized to the image so %-positioned pins track it at any width (Mike 9/28: recentered on the two schools) */
.school-map {
  position: relative;
  width: 100%;
  max-width: 924px;
  aspect-ratio: 866 / 432;
  margin: 0 auto;
}

.map-img { width: 100%; height: 100%; object-fit: contain; }

.map-pin { position: absolute; width: 24px; height: 37px; }

/* mission page: intro follows page-heading with 16px gap */
.difference > .page-intro { margin-top: 0; }

/* ---------------- motion & interaction ---------------- */

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.will-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.will-reveal.revealed {
  opacity: 1;
  transform: none;
}

a, .btn-card, .btn-outline, .btn-back {
  transition: background-color 0.25s cubic-bezier(0.33, 1, 0.68, 1),
              color 0.25s cubic-bezier(0.33, 1, 0.68, 1),
              border-color 0.25s cubic-bezier(0.33, 1, 0.68, 1);
}

.btn-card strong,
.btn-outline strong {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */
}

.btn-card:hover { background: #b6cfd6; }

.btn-card:hover strong,
.btn-outline:hover strong { transform: translateX(5px); }

.btn-outline:hover {
  background: #fff;
  color: #8c2232;
}

.btn-back:hover { background: #6e1a27; }

.util-nav a,
.footer-col a,
.sidebar-nav a,
.footer-legal a,
.notice a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}

.util-nav a:hover,
.footer-col a:hover,
.sidebar-nav a:hover,
.footer-legal a:hover,
.notice a:hover {
  text-decoration: none;
  background-size: 100% 1px;
}

.footer-social a {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}

.footer-social a:hover {
  transform: translateY(-3px);
  opacity: 0.75;
}

.material span {
  transition: color 0.25s ease;
}

.material:hover span {
  text-decoration: none;
  color: #6e1a27;
}

.material .material-icon {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.material:hover .material-icon { transform: translateY(-3px); }

.logo img { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }

.logo:hover img { transform: rotate(8deg); }

.mobile-menu.open a { transition: color 0.2s ease; }

.mobile-menu.open a:hover { color: #8c2232; }

/* ---------------- interior page: title band ---------------- */

.page-title {
  position: relative;
  isolation: isolate;
  height: 136.71px;
  overflow: hidden;
  background: #d9d9d9;
}

.page-title-photo {
  /* Figma's fill uses a custom crop its export doesn't carry; fitted against the render:
     image at full band width, shifted up 310px (the strip just above the photo's vertical middle) */
  position: absolute;
  left: 0;
  top: -310px;
  width: 100%;
  height: auto;
  max-width: none;
}

.page-title-panel {
  position: relative;
  width: 436px; /* export claims 514 (1280−766) but Figma's render draws the tint 436 wide */
  height: 100%;
  display: flex;
  align-items: center;
  padding: 43px 60px;
}

.page-title-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #8c2232;
  mix-blend-mode: multiply;
}

.page-title-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(140, 34, 50, 0.25);
}

.page-title h1 {
  position: relative;
  z-index: 1;
  font-family: 'Vollkorn', serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.96px;
  color: #fff;
  white-space: nowrap;
}

/* ---------------- interior page: layout ---------------- */

.page-layout {
  display: flex;
  gap: 56px; /* was 20px (Figma); widened for breathing room, Mike 9/28 */
  align-items: flex-start;
  margin-top: 56px;
  padding: 0 60px;
}

.sidebar {
  flex: none;
  width: 216px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-end;
}

.sidebar-label {
  width: 100%;
  padding: 8px 16px;
  background: #54727a;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
}

.sidebar-nav {
  width: 200px;
  font-size: 16px;
  line-height: normal;
}

.sidebar-nav p { margin: 0; }

.sidebar-nav p:not(:last-child) { margin-bottom: 12px; }

.sidebar-nav a.active {
  font-weight: 700;
  color: #54727a;
}

.sidebar-nav a:hover { text-decoration: underline; }

.page-content {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.page-intro {
  font-size: 20px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.statute-ref {
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: #5a5a5a;
  margin: 4px 0 20px;
}

.content-heading {
  font-family: 'Lato', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: #8c2232;
}

.how-it-works .content-heading { margin-bottom: 21.5px; } /* 24 in Figma; heading line box renders 2.5px taller */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px; /* 20 in Figma; step text blocks render ~2px taller per row */
}

.step {
  display: flex;
  gap: 17px;
  border-top: 3px solid #b6cfd6;
  padding-top: 18.5px; /* 20 gap measured from the rule's center line */
}

.step-icon {
  flex: none;
  width: 40.62px; /* 50px box, icon inset 9.38% */
  height: 40.62px;
  margin: 4.69px;
}

.step-text h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: #8c2232;
}

.step-text p {
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.materials .content-heading { margin-bottom: 24px; }

.materials-row {
  display: flex;
  gap: 40px;
  margin-left: 5px;
  max-width: 1300px;
}

.materials-two { margin-left: -8.5px; } /* Figma centers the 944px pair inside a 919px box; net −8.5 */

.material {
  flex: none; /* Figma lets the 452px items overflow the 924px column; shrinking breaks the wrap */
  display: flex;
  gap: 17px;
  align-items: flex-start;
  width: 452px;
  min-height: 60px;
}

.material-icon {
  flex: none;
  width: 50px;
  height: 50px;
}

.material span {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: #8c2232;
}

.material:hover span { text-decoration: underline; }

/* ---------------- interior page: CTA band ---------------- */

.cta-band {
  position: relative;
  isolation: isolate;
  height: 331.97px;
  margin-top: 53px; /* 56 in Figma; content column line boxes run ~3px taller */
  padding: 0 60px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.cta-tint {
  position: absolute;
  inset: 0;
  background: #8c2232;
  mix-blend-mode: multiply;
}

.cta-band .different-fan {
  position: relative;
  height: 428.24px; /* taller than the band, clipped — as designed */
}

.cta-content {
  position: relative;
  width: 660.58px;
  display: flex;
  flex-direction: column;
  color: #fff;
}

.cta-content h2 {
  font-family: 'Vollkorn', serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.5;
}

.cta-copy { margin-top: 15px; }

.cta-lede {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.cta-details {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.cta-details strong { font-weight: 700; }

.cta-band .btn-outline { margin-top: 34px; }



/* ---------------- application submissions ---------------- */

.page-heading {
  font-family: 'Vollkorn', serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.96px;
  color: #8c2232;
}

.subs-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #8c2232;
  white-space: nowrap;
}

.subs-head p { margin: 0; }

.subs-body {
  border-top: 3px solid #b6cfd6;
  padding-top: 18.5px; /* 20 gap measured from the rule's center line */
}

.subs-empty {
  font-size: 16px;
  line-height: 1.5;
  font-style: italic;
}

/* Status description above each group's list (Mike 9/28) */
.subs-desc {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 8px;
}

/* Status-grouped submissions (CCSJ feedback 8/17 — replaces the tabular head row) */
.subs-groups { display: flex; flex-direction: column; gap: 32px; }

.subs-group-head {
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  border-bottom: 3px solid #b6cfd6;
  padding-bottom: 6px;
  margin-bottom: 12px;
}

/* ============================================================
   TWEEN — 900-1279px. No Figma design exists here; compress the
   1280 header fluidly so nothing collides or overflows.
   ============================================================ */

@media (min-width: 900px) and (max-width: 1279px) {

  .util-nav {
    /* keep the 198px indent — it clears the overlapping logo */
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 24px;
  }

  .util-nav-left {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .util-nav-right { margin-left: auto; }

  .brand-title { font-size: clamp(16px, 1.6vw, 20px); }

}

/* ============================================================
   MOBILE — Figma node 1:1296 (480w design)
   ============================================================ */

@media (max-width: 899px) {

  /* ----- header ----- */

  .util { display: none; }

  .site-header { padding-top: 57.63px; }

  .brand-bar {
    height: 66.89px;
    padding: 0 0 0 138.29px;
  }

  .logo {
    position: absolute;
    left: 24.53px;
    top: -16.11px; /* containing block is .brand-bar (position:relative): 41.52 page − 57.63 strip */
    width: 98.95px;
    height: 99.1px;
    z-index: 2;
  }

  .logo-ring {
    left: -1px;
    top: 0.99px;
    width: 103.12px;
    height: 103.12px;
  }

  .brand-title {
    margin-left: 0;
    font-size: 16px;
    white-space: normal;
  }

  .brand-sep { display: none; }

  .brand-sub { display: block; }

  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    right: 24px;
    top: -34.11px; /* 23.52 page − 57.63 header pad */
    width: 25px;
    height: 15px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    z-index: 3;
  }

  .hamburger span {
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.8);
  }

  .mobile-menu.open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 3px solid #b6cfd6;
    padding: 10px 24px 16px;
    z-index: 10;
  }

  .mobile-menu.open a {
    display: block;
    padding: 10px 0;
    font-size: 16px;
    border-bottom: 1px solid rgba(182, 207, 214, 0.5);
  }

  .mobile-menu.open a:last-child { border-bottom: 0; color: #8c2232; font-weight: 700; }

  .header-fan {
    display: block;
    position: absolute;
    top: 0.51px;
    left: calc(60% + 7px);
    width: 173.27px;
    height: 124.01px;
    mix-blend-mode: multiply;
    transform: scaleX(-1);
    z-index: 1;
    pointer-events: none;
  }

  .header-fan img {
    position: absolute;
    width: 241%;
    height: 337.24%;
    left: -3.11%;
    top: -51.8%;
    max-width: none;
  }

  .notice-desktop { display: none; }

  .notice-mobile {
    display: block;
    margin-top: 8px; /* Figma: hero ends 487.49, notice starts 495.49 */
    padding: 14px 10px;
    text-align: center;
    white-space: nowrap;
  }

  /* ----- hero ----- */

  .hero {
    height: 355.05px;
    margin-top: 7.92px; /* Figma: white gap between brand bar (ends 124.52) and hero (starts 132.44) */
  }

  .hero-photo {
    left: -9.27px;
    right: auto;
    top: 0;
    width: 738.36px;
    height: 355.05px;
  }

  .hero-photo img {
    position: absolute;
    width: 100%;
    height: 138.64%;
    left: 0;
    top: -15.39%;
    object-fit: cover;
  }

  .hero-fan { display: none; }

  .hero-veil {
    top: 285.61px;
    height: 73.97px;
  }

  .hero-panel-bg,
  .hero-panel {
    top: 0;
    bottom: auto;
    width: 286.02px;
    height: 355.05px;
  }

  .hero-panel { padding: 114.07px 20px 0 24px; }

  .hero-panel h1 { font-size: 32px; }

  .tagline {
    font-size: 16px;
    max-width: 216.5px;
  }

  /* ----- intro + cards ----- */

  .intro-cards {
    margin-top: 40px;
    padding: 0 24px;
  }

  .intro { max-width: 431.47px; }

  .intro h2 {
    margin-bottom: 12px; /* restore Figma's 12 — the desktop -8 trim doesn't apply at this size */
    font-size: 20px;
    line-height: 1.25;
  }

  .intro p { font-size: 16px; }

  .cards {
    flex-direction: column;
    gap: 0;
    max-width: 432px;
    margin: 40px auto 0;
  }

  .card {
    border-top: 0;
    padding-top: 0;
  }

  .card + .card::before {
    content: '';
    display: block;
    width: 252px;
    height: 3px;
    margin: 28.5px auto;
    background: #b6cfd6;
  }

  .card-body {
    gap: 16px;
    flex: none;
    padding-bottom: 17px;
  }

  .card-text h3 {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 1.5;
  }

  .card-text p { line-height: 1.5; }

  .br-desktop { display: none; }

  .btn-card {
    margin: 0 auto;
    white-space: nowrap;
  }

  /* ----- different ----- */

  .different {
    display: block;
    height: 436.77px;
    margin-top: 37.5px; /* 40 in Figma; card line boxes run 2.5px taller upstream */
    padding: 0;
  }

  .different-fan {
    position: absolute;
    left: calc(60% + 16.15px);
    top: 0;
    width: 270.05px;
    height: 436.77px;
    margin: 0;
    transform: rotate(180deg);
  }

  .different-content {
    width: auto;
    padding: 69.15px 24px 0;
  }

  .different-content h2 {
    font-size: 20px;
    line-height: 1.5;
  }

  .different-copy {
    margin-top: 8px;
    padding-left: 2px;
    max-width: 415.18px;
  }

  .different-lede { font-size: 16px; }

  .btn-outline { margin-top: 24px; }

  /* ----- contact ----- */

  .contact {
    align-items: flex-start;
    gap: 20px;
    height: auto;
    margin-top: 40px;
    padding: 0 24px;
  }

  .contact-photo {
    width: 161px;
    height: 201.98px;
  }

  .contact-photo img {
    height: 105.88%;
    top: 0;
  }

  /* ----- footer ----- */

  .site-footer {
    margin-top: 61.9px;
    padding-top: 0;
  }

  .footer-fan { display: none; }

  .footer-main {
    display: block;
    height: 234.24px;
    padding: 34.44px 24px 0;
    text-align: center;
  }

  .footer-logo {
    width: 268.63px;
    height: 85.89px;
    margin: 0 auto;
  }

  .footer-address {
    width: auto;
    margin-top: 19.91px;
  }

  .addr-sep, .addr-pipe { display: inline; }

  .br-desktop { display: none; }

  .footer-links, .footer-resources { display: none; }

  .footer-bottom {
    display: block;
    height: 105.99px;
    padding: 21.75px 62.29px 0;
  }

  .footer-social {
    justify-content: center;
    gap: 15.2px;
  }

  .footer-legal {
    justify-content: space-between;
    gap: 0;
    margin-top: 20.23px;
  }

  /* ----- interior page (no Figma mobile frame; follows homepage mobile idiom) ----- */

  .page-title { height: 220px; } /* doubled with desktop (Mike 9/30: 110 → 220) */

  /* fitted desktop crops don't scale down — cover-fit all band photos on mobile */
  .page-title .page-title-photo {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  .page-title-panel {
    width: auto; /* hug long titles; 286 min mirrors the hero panel */
    min-width: 286.02px;
    max-width: calc(100% - 24px);
    align-items: flex-end; /* keep the title clear of the overlapping header logo */
    padding: 0 24px 14px;
  }

  .page-title h1 { white-space: normal; }

  .page-title h1 { font-size: 22px; }

  .page-layout {
    flex-direction: column;
    align-items: stretch; /* children otherwise shrink-to-fit and the scrollable table's min-content widens the column */
    gap: 32px;
    margin-top: 40px;
    padding: 0 24px;
  }

  .sidebar { width: 100%; align-items: stretch; }

  .sidebar-label { font-size: 16px; }

  .sidebar-nav { width: auto; }

  .page-content { gap: 40px; }

  .page-intro { font-size: 16px; }

  .content-heading { font-size: 20px; }

  .how-it-works .content-heading,
  .materials .content-heading { margin-bottom: 16px; }

  .step { gap: 16px; }

  .materials-row {
    flex-direction: column;
    gap: 24px;
    margin-left: 0;
  }

  .team-row { flex-direction: column; }

  .support-grid { grid-template-columns: 1fr; }

  .form-columns { flex-direction: column; gap: 32px; }

  .form-main { width: 100%; }

  .form-aside { max-width: none; }

  .team-grid { grid-template-columns: 1fr; }

  .school-row { flex-direction: column; }

  .school-btns { flex-wrap: wrap; }

  .events-head, .events-row { grid-template-columns: 70px 1fr 1fr 90px; column-gap: 8px; }

  .events-head p { font-size: 13px; }

  .events-row p { font-size: 14px; }

  .school-map { max-width: none; }

  .map-pin { display: none; } /* pins are positioned for the desktop map box */

  .results-banner { padding: 40px 24px; }

  .banner-content h2 { font-size: 24px; }

  .bio-step { flex-direction: column; }

  .bio-step.bio-center { align-items: flex-start; }

  .material { width: auto; min-height: 0; }

  .material span { font-size: 16px; }

  .page-heading { font-size: 22px; }

  .subs-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .subs-scroll .subs-head { min-width: 560px; gap: 24px; }

  .cta-band {
    display: block;
    height: auto;
    margin-top: 40px;
    padding: 40px 24px 44px;
  }

  .cta-band .different-fan {
    position: absolute;
    left: calc(60% + 16.15px);
    top: 0;
    width: 270.05px;
    height: 100%;
    margin: 0;
    transform: rotate(180deg);
  }

  .cta-content { width: auto; }

  .cta-content h2 { font-size: 24px; }

  .cta-lede { font-size: 16px; margin-bottom: 8px; }

  .cta-band .btn-outline { margin-top: 24px; }
}


/* ---------------- upcoming events: chronological list (evlist) ---------------- */

.evlist-note {
  font-size: 15px;
  font-style: italic;
  color: #5a5a5a;
  margin: 6px 0 0;
}

.evlist { margin-top: 4px; }

.evlist-month {
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: #8c2232;
  margin: 36px 0 10px;
}

.evlist-item {
  display: flex;
  gap: 26px;
  border-top: 3px solid #b6cfd6;
  padding: 20px 0 22px;
  margin: 0;
}

.evlist-date {
  flex: 0 0 64px;
  text-align: center;
  font-family: 'Lato', sans-serif;
  padding-top: 2px;
}

.evlist-dow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #54727a;
}

.evlist-day {
  display: block;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  color: #8c2232;
}

.evlist-body { min-width: 0; }

.evlist-tags { margin: 0 0 7px; }

.evtag {
  display: inline-block;
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 4px 10px;
}

.evtag-board { background: #8c2232; color: #fff; }

.evtag-school { background: #54727a; color: #fff; }

.evtag-ccsj { border: 1.5px solid #8c2232; color: #8c2232; padding: 2.5px 8.5px; }

.evlist-title {
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

.evlist-meta {
  font-size: 15px;
  line-height: 1.5;
  color: #5a5a5a;
  margin: 4px 0 0;
}

.evlist-links {
  font-size: 15px;
  line-height: 1.5;
  margin: 7px 0 0;
}

.evlist-links a { color: inherit; }

.evlist-links a:hover { text-decoration: underline; }

@media (max-width: 899px) {
  .evlist-month { font-size: 18px; margin-top: 30px; }

  .evlist-item { gap: 16px; padding: 16px 0 18px; }

  .evlist-date { flex-basis: 48px; }

  .evlist-dow { font-size: 12px; }

  .evlist-day { font-size: 28px; }

  .evlist-title { font-size: 16px; }

  .evlist-meta, .evlist-links, .evlist-note { font-size: 14px; }
}

/* ===== 9/15 content pass (Cathy's 9/13 v3 doc) ===== */
.step-text p + p { margin-top: 10px; }                 /* multi-paragraph steps (Application Process) */
.triggers-body p + p,
.triggers-body ul + p { margin-top: 10px; }            /* multi-paragraph prose sections */
.triggers-body p + ul { margin-top: 6px; }
.triggers-body p + .closure-sub { margin-top: 24px; }
.how-it-works .triggers-body.process-lede { margin: -6px 0 20px; }
.how-it-works .triggers-body.process-after { margin-top: 20px; }
@media (min-width: 900px) {
  .materials-row.materials-wrap { flex-wrap: wrap; row-gap: 24px; margin-left: 5px; } /* two per row, wrapping */
  .materials-row.materials-wrap .material { width: 438px; }                          /* 2×438 + 40 gap fits the 919px column */
  .team-row.team-wrap { flex-wrap: wrap; }
  .team-row.team-wrap > .team-card { flex: 1 0 280px; }
}
.team-card .team-role { line-height: 1.4; }
.faq-a p.doc-pending { font-style: italic; color: #5a5a5a; }
.bio-step.bio-nophoto .step-text.bio-text { flex: 1 1 auto; min-width: 0; }
.step-text.bio-text .bio-role { font-weight: 700; color: #5a5a5a; margin-bottom: 12px; }

/* application timeline (Cathy 9/20) — two proposal cycles, side by side on desktop */
.cycles .content-heading { margin-bottom: 12px; }
.cycles .cycles-intro { font-size: 16px; line-height: 1.5; margin-bottom: 28px; }
.cycles .cycles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.cycles .cycle-title { font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0 0 4px; color: #8c2232; }
.cycles .cycle-sub { font-size: 15px; line-height: 1.5; color: #5a5a5a; margin: 0 0 14px; }
.cycles .cycle-head, .cycles .cycle-row { display: grid; grid-template-columns: 1fr 172px; gap: 16px; }
.cycles .cycle-head p { font-size: 14px; font-weight: 700; line-height: 1.5; text-transform: uppercase; color: #8c2232; }
.cycles .cycle-head { border-bottom: 3px solid #b6cfd6; padding-bottom: 10px; }
.cycles .cycle-row { padding: 11px 0; border-bottom: 1px solid #e3e8ea; }
.cycles .cycle-row p { font-size: 16px; line-height: 1.5; }
.cycles .cycle-row p:last-child { white-space: nowrap; }
.cycles + .materials { margin-top: 56px; }
/* partnership items carry a paragraph each, not a one-line blurb: two columns, roomier */
.support-grid.support-grid-long { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
.support-grid.support-grid-long .support-card p { line-height: 1.5; }
@media (max-width: 899px) {
  .cycles .cycles-grid { grid-template-columns: 1fr; gap: 32px; }
  .cycles .cycle-head, .cycles .cycle-row { grid-template-columns: 1fr 150px; gap: 12px; }
  .cycles .cycle-row p:last-child { white-space: normal; }
  .support-grid.support-grid-long { grid-template-columns: 1fr; }
}
/* School Results: single pending line until the client posts updated reports (compound selector — page rules precede generics) */
.materials p.doc-pending { font-style: italic; color: #5a5a5a; font-size: 16px; line-height: 1.5; }
.triggers p.doc-pending { font-style: italic; color: #5a5a5a; font-size: 16px; line-height: 1.5; }
/* mobile: long outline buttons wrap inside the gutter instead of running off-screen (homepage
   "see how we support our schools" is 372px at nowrap). Vertical padding trimmed so one-line
   buttons keep the designed 45.46px height once height goes auto. */
@media (max-width: 899px) {
  .btn-outline { white-space: normal; max-width: 100%; height: auto; min-height: 45.46px; padding-top: 9.73px; padding-bottom: 9.73px; text-align: center; }
}
/* Our Team bios match Board: 1.5 leading for readability (Mike 9/28) */
.page-team .step-text.bio-text p { line-height: 1.5; }
/* interior title band doubled (Mike 9/29: 136.71 → 273.42). The fitted per-band photo crops,
   re-centered for the taller window, all land at ~50%, so desktop is a centered cover-fit now
   (also avoids gaps between 900 and ~1050px, where the shortest photo would run out). The red
   panel hugs long titles, never narrower than its designed width, so the text always sits inside it. */
@media (min-width: 900px) {
  .page-title { height: 273.42px; }
  .page-title .page-title-photo { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .page-title .page-title-panel { width: fit-content; min-width: 436px; max-width: 100%; }
  .page-title-about .page-title-panel { min-width: 854px; }
  .page-title-utility .page-title-panel { min-width: 328.8px; }
}
/* title band: the red panel's right edge fades into the photo instead of stopping hard (Mike 9/29).
   Both tint layers extend past the panel and are masked, so the fade starts 40px short of the panel
   edge (still clear of the title's 60px right padding) and ends 160px beyond it. */
.page-title .page-title-panel::before,
.page-title .page-title-panel::after {
  right: -160px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 200px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 200px), transparent);
}
@media (max-width: 899px) {
  .page-title .page-title-panel::before,
  .page-title .page-title-panel::after {
    right: -60px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 76px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 76px), transparent);
  }
}
/* application timeline breathing room (Mike 9/29): the fixed 172px date column was narrower than
   "On or before November 30" at nowrap, so dates ran past each table and into the 40px gutter, and
   side by side even a wider date column crushed the task names into two lines. The two tables now
   stack at every width (each gets the full content column), with a 196px date column (longest ~190). */
@media (min-width: 900px) {
  .cycles .cycles-grid { grid-template-columns: minmax(0, 760px); gap: 48px; } /* capped so task and date stay in one eye-span on wide screens */
  .cycles .cycle-head, .cycles .cycle-row { grid-template-columns: 1fr 196px; gap: 32px; }
}
/* Annual Reports results banner: the desktop `.page-areports .results-banner` padding (60px sides) outranked
   the mobile 24px, squeezing the banner to 152px at 320 and wrapping "School Results →" (Mike 9/30) */
@media (max-width: 899px) {
  .page-areports .results-banner { padding: 40px 24px; }
}
/* Mission guiding principles: every icon sits in the same 50×50 slot so the five text blocks share one left
   edge (the handshake is 85 wide at 50 tall and pushed Community Partners' text right) (Mike 9/30) */
.page-mission .steps .fw-icon { width: 50px; height: 50px; object-fit: contain; }
/* header brand lines at the narrowest phones: below 360 the 182px beside the logo can't hold
   "Calumet College of St. Joseph" at 16px (209px), so it broke to 3 lines into the fan (Mike 9/30) */
@media (max-width: 359px) {
  .brand-bar .brand-title { font-size: 13.5px; }
}
/* inquiry forms wired to form-handler.php (Mike 9/30): honeypot off-screen, status line under Submit */
.inquiry-form .form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inquiry-form .form-status { font-size: 16px; line-height: 1.5; margin: 0; }
.inquiry-form .form-status.form-status-ok { color: #2f6b3a; }
.inquiry-form .form-status.form-status-error { color: #8c2232; }
.inquiry-form .btn-submit:disabled { opacity: 0.6; cursor: default; }

/* legal pages (privacy / accessibility): single column, reading width (10/4) */
.page-layout.page-legal .page-content { max-width: 919px; gap: 40px; }
.page-legal .triggers-body a { color: #8c2232; text-decoration: underline; }
.page-legal .statute-ref { margin: -36px 0 0; }

/* board: meeting notices & minutes list, two columns of PDF links (10/4) */
.triggers.notices .notices-intro { font-size: 16px; line-height: 1.5; margin: 0 0 20px; }
.notices-cols { display: flex; gap: 56px; }
.notices-col { flex: 1 1 0; min-width: 0; }
.notices-col h3 { font-family: 'Lato', sans-serif; font-size: 18px; font-weight: 700; line-height: 1.5; color: #5a5a5a; margin: 0 0 10px; }
.notices-col ul { list-style: none; margin: 0; padding: 0; }
.notices-col li { font-size: 16px; line-height: 1.5; padding: 7px 0; border-bottom: 1px solid #e3e3e3; }
.notices-col a { color: #8c2232; }
.notices-col a:hover { text-decoration: underline; }
.notices-col .notices-pdf { color: #5a5a5a; font-size: 14px; }
.evlist.evlist-empty .evlist-note a { color: #8c2232; text-decoration: underline; }
@media (max-width: 899px) {
  .notices-cols { flex-direction: column; gap: 28px; }
  .page-legal .statute-ref { margin-top: -20px; }
}

/* accessibility: skip link (hidden until keyboard focus) + screen-reader-only text */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: #8c2232;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }
main:focus { outline: none; }
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* visible form labels (WCAG 3.3.2): label above each field; optional fields say so */
.inquiry-form .field { display: flex; flex-direction: column; gap: 6px; }
.inquiry-form label { font-size: 15px; font-weight: 700; line-height: 1.4; letter-spacing: 0.3px; color: #222; }
.inquiry-form .field-optional { font-weight: 400; color: #555; }

/* footer link columns: 24px line pitch so each link meets the WCAG 2.2 target-size spacing (was 18px) */
.footer-links p:has(a) + p { margin-top: 6px; }