/* ============================================================
   St. Mary Cathedral School — Redesign Design System
   Palette sourced from the school seal (#4e63ac / #d9ad39) and
   the Blue Jays mark (#012c61 / #0696d6).
   ============================================================ */

:root {
  --navy-950: #08182e;
  --navy-900: #0c2648;
  --navy-800: #123a6b;
  --royal:    #4e63ac;
  --royal-700:#3b4f92;
  --sky:      #1291c7;
  --sky-100:  #e4f3fa;
  --gold:     #c8992f;
  --gold-600: #b3841f;
  --gold-100: #faf0d9;
  --cream:    #faf7f1;
  --paper:    #ffffff;
  --ink:      #1c1f26;
  --ink-soft: #565b6b;
  --ink-faint:#8790a3;
  --line:     #e6e2d6;

  --font-display: 'Playfair Display', 'Libre Franklin', Georgia, serif;
  --font-body: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 26px;
  --shadow-sm: 0 2px 10px rgba(10,25,50,.06);
  --shadow-md: 0 14px 40px rgba(10,25,50,.14);
  --shadow-lg: 0 24px 70px rgba(10,25,50,.22);
  --container: 1220px;
}

.sm26 *, .sm26 *::before, .sm26 *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
.sm26 img { max-width:100%; display:block; }
.sm26 a { color: inherit; text-decoration: none; }
.sm26 ul { margin:0; padding:0; list-style:none; }
.sm26 h1, .sm26 h2, .sm26 h3, .sm26 h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; color: var(--navy-900); }
.sm26 p { margin: 0 0 1em; }
.sm26 .container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.sm26 .eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-600);
  margin-bottom: 14px;
}
.sm26 .eyebrow::before { content:""; width:26px; height:2px; background: var(--gold); display:inline-block; }
.sm26 .section { padding: 88px 0; }
.sm26 .section--tight { padding: 60px 0; }
.sm26 .section-head { max-width: 680px; margin-bottom: 46px; }
.sm26 .section-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.sm26 .lede { font-size: 19px; color: var(--ink-soft); }

/* Buttons */
.sm26 .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  padding: 15px 30px; border-radius: 999px; cursor:pointer; border:2px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.sm26 .btn-gold { background: linear-gradient(180deg, #d7ab45, var(--gold-600)); color: var(--navy-950); box-shadow: 0 10px 26px rgba(200,153,47,.35); }
.sm26 .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(200,153,47,.45); }
.sm26 .btn-outline { border-color: rgba(255,255,255,.55); color:#fff; }
.sm26 .btn-outline:hover { background: rgba(255,255,255,.12); border-color:#fff; }
.sm26 .btn-navy { background: var(--navy-900); color:#fff; }
.sm26 .btn-navy:hover { background: var(--navy-800); transform: translateY(-2px); }
.sm26 .btn-ghost-navy { border-color: var(--navy-800); color: var(--navy-900); }
.sm26 .btn-ghost-navy:hover { background: var(--navy-900); color:#fff; }
.sm26 .btn-sm { padding: 10px 20px; font-size: 13px; }

/* ===== Utility bar ===== */
.sm26 .utility-bar { background: var(--navy-950); color: rgba(255,255,255,.82); font-size: 13.5px; }
.sm26 .utility-bar .container { display:flex; align-items:center; justify-content:space-between; gap: 20px; padding-top:9px; padding-bottom:9px; flex-wrap: wrap; }
.sm26 .utility-left { display:flex; align-items:center; gap: 26px; flex-wrap: wrap; }
.sm26 .utility-left a { display:inline-flex; align-items:center; gap:7px; opacity:.92; }
.sm26 .utility-left a:hover { color: var(--gold); }
.sm26 .utility-right { display:flex; align-items:center; gap: 10px; }
.sm26 .pill-link {
  font-weight: 700; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase;
  padding: 7px 15px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28);
}
.sm26 .pill-link:hover { background: rgba(255,255,255,.12); }
.sm26 .pill-link.gold { background: var(--gold); color: var(--navy-950); border-color: var(--gold); }
.sm26 .pill-link.gold:hover { background: var(--gold-600); }

/* ===== Header ===== */
.sm26 .site-header { background: var(--paper); position: sticky; top:0; z-index: 60; box-shadow: 0 1px 0 var(--line); }
.sm26 .site-header .container { display:flex; align-items:center; justify-content:space-between; gap: 24px; padding-top:14px; padding-bottom:14px; }
.sm26 .brand { display:flex; align-items:center; gap:14px; }
.sm26 .brand img { height: 58px; width:auto; }
.sm26 .brand-text { line-height:1.15; }
.sm26 .brand-text .name { font-family: var(--font-display); font-weight:700; font-size: 19px; color: var(--navy-900); }
.sm26 .brand-text .place { font-size: 12.5px; letter-spacing:.06em; text-transform:uppercase; color: var(--gold-600); font-weight:700; }

.sm26 .main-nav { display:flex; align-items:center; gap: 30px; }
.sm26 .main-nav a { font-weight:600; font-size:15px; color: var(--ink); position:relative; padding: 6px 0; }
.sm26 .main-nav a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--gold); transform: scaleX(0); transform-origin:right; transition: transform .2s ease; }
.sm26 .main-nav a:hover::after, .sm26 .main-nav a.active::after { transform: scaleX(1); transform-origin:left; }
.sm26 .main-nav a.active { color: var(--navy-900); }
.sm26 .header-cta { display:flex; align-items:center; gap:12px; }
.sm26 .smschool-menu-toggle { display:none; }

@media (max-width: 1080px){
  .sm26 .main-nav { display:none; }
  .sm26 .smschool-menu-toggle { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; border:1px solid var(--line); background:#fff; }
  .sm26 .header-cta .btn-sm.hide-mobile { display:none; }
}

/* ===== Hero ===== */
.sm26 .hero { position:relative; color:#fff; overflow:hidden; background: var(--navy-950); }
.sm26 .hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.34; }
.sm26 .hero::before {
  content:""; position:absolute; inset:0;
  background: linear-gradient(115deg, rgba(8,24,46,.97) 20%, rgba(18,58,107,.86) 62%, rgba(78,99,172,.55) 100%);
}
.sm26 .hero-inner { position:relative; z-index:2; padding: 108px 0 90px; }
.sm26 .hero-crest { display:inline-flex; align-items:center; gap:12px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); padding: 8px 18px 8px 10px; border-radius:999px; margin-bottom:28px; }
.sm26 .hero-crest img { height:32px; width:32px; }
.sm26 .hero-crest span { font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color: var(--gold-100); }
.sm26 .hero h1 { color:#fff; font-size: clamp(36px, 5vw, 58px); max-width: 780px; margin-bottom: 22px; text-shadow: 0 2px 16px rgba(0,0,0,.35); }
.sm26 .hero h1 em { font-style:normal; color: var(--gold); }
.sm26 .hero .lede { color: rgba(255,255,255,.92); max-width: 560px; font-size:19px; margin-bottom:36px; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.sm26 .hero-ctas { display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 64px; }
.sm26 .stat-strip { display:grid; grid-template-columns: repeat(4,1fr); gap:0; border-top:1px solid rgba(255,255,255,.18); padding-top: 34px; max-width: 880px; }
.sm26 .stat-strip div { border-left:1px solid rgba(255,255,255,.18); padding-left:22px; }
.sm26 .stat-strip div:first-child { border-left:none; padding-left:0; }
.sm26 .stat-num { font-family: var(--font-display); font-size: 30px; color: var(--gold); font-weight:700; }
.sm26 .stat-label { font-size: 12.5px; letter-spacing:.06em; text-transform:uppercase; color: rgba(255,255,255,.72); margin-top:4px; }

@media (max-width: 720px){
  .sm26 .stat-strip { grid-template-columns: repeat(2,1fr); row-gap: 22px; }
  .sm26 .stat-strip div { border-left:none; padding-left:0; }
}

/* ===== Notification / announcement ===== */
.sm26 .announce { background: var(--gold-100); border-bottom:1px solid var(--line); }
.sm26 .announce .container { display:flex; align-items:center; justify-content:center; gap:14px; padding: 11px 28px; text-align:center; flex-wrap:wrap; }
.sm26 .announce strong { color: var(--navy-900); }
.sm26 .announce a { font-weight:700; text-decoration: underline; color: var(--gold-600); }

/* ===== Welcome / mission split ===== */
.sm26 .split { display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center; }
.sm26 .split img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.sm26 .split-media { position:relative; }
.sm26 .split-media .badge-card {
  position:absolute; bottom:-28px; left:-28px; background:#fff; border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 18px 22px; display:flex; align-items:center; gap:14px; max-width:260px;
}
.sm26 .split-media .badge-card img { height:44px; width:44px; border-radius:0; box-shadow:none; }
.sm26 .badge-card .num { font-family:var(--font-display); font-size:22px; color:var(--navy-900); font-weight:700; line-height:1; }
.sm26 .badge-card .lbl { font-size:12px; color:var(--ink-soft); }
@media (max-width: 900px){
  .sm26 .split { grid-template-columns: 1fr; gap: 40px; }
  .sm26 .split-media .badge-card { left: 16px; bottom:-20px; }
}

/* ===== Feature cards ===== */
.sm26 .card-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.sm26 .feature-card {
  background:#fff; border-radius: var(--radius-md); padding: 30px 26px; box-shadow: var(--shadow-sm);
  border: 1px solid var(--line); transition: transform .2s ease, box-shadow .2s ease;
}
.sm26 .feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.sm26 .feature-icon { width:52px; height:52px; border-radius:14px; background: var(--navy-900); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.sm26 .feature-icon svg { width:26px; height:26px; stroke:#fff; }
.sm26 .feature-card h3 { font-size:19px; margin-bottom:8px; }
.sm26 .feature-card p { color: var(--ink-soft); font-size:15px; margin-bottom:0; }
@media (max-width: 1000px){ .sm26 .card-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .sm26 .card-grid { grid-template-columns: 1fr; } }

/* ===== Academics band ===== */
.sm26 .band-navy { background: var(--navy-900); color:#fff; position:relative; overflow:hidden; }
.sm26 .band-navy .watermark { position:absolute; right:-60px; top:50%; transform: translateY(-50%); height:120%; opacity:.08; }
.sm26 .band-navy h2 { color:#fff; }
.sm26 .band-navy .lede { color: rgba(255,255,255,.78); }
.sm26 .grade-row { display:grid; grid-template-columns: repeat(5, 1fr); gap:16px; margin-top: 40px; }
.sm26 .grade-pill { background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius: var(--radius-md); padding: 22px 16px; text-align:center; }
.sm26 .grade-pill .g { font-family:var(--font-display); font-size:22px; color: var(--gold); margin-bottom:4px; }
.sm26 .grade-pill .l { font-size:12.5px; color: rgba(255,255,255,.75); }
@media (max-width: 900px){ .sm26 .grade-row { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 560px){ .sm26 .grade-row { grid-template-columns: repeat(2,1fr); } }

/* ===== News & events =====
   News posts and the events list are split into two independent tracks
   (.news-main / .news-events side by side) instead of one shared CSS grid.
   The old single-grid version force-stretched every card in a row to match
   the tallest cell -- since the events list is usually much taller than a
   2-3 line news excerpt, short cards ended up with a large dead gap above
   "Read More". Two independent columns means each card is always exactly
   as tall as its own content, however many posts or events come back from
   the query. */
.sm26 .news-layout { display:grid; grid-template-columns: 2fr 1fr; gap: 26px; align-items:start; }
.sm26 .news-main { display:flex; flex-direction:column; gap:26px; }
.sm26 .news-posts-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.sm26 .news-card { background:#fff; border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-sm); border:1px solid var(--line); display:flex; flex-direction:column; }
.sm26 .news-card .thumb { height: 190px; background-size:cover; background-position:center; }
.sm26 .news-card .body { padding: 22px; flex:1; display:flex; flex-direction:column; }
.sm26 .news-card .tag { font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--gold-600); font-weight:700; margin-bottom:8px; }
.sm26 .news-card h3 { font-size:18px; margin-bottom:10px; }
.sm26 .news-card p { color: var(--ink-soft); font-size:14.5px; margin-bottom:16px; }
.sm26 .news-card .more { margin-top:auto; font-weight:700; font-size:13.5px; color: var(--navy-900); }
.sm26 .news-card.feature .thumb { height: 320px; position:relative; }
.sm26 .news-card.feature .feature-overlay {
  position:absolute; inset:0; padding:26px; display:flex; align-items:flex-end;
  background: linear-gradient(0deg, rgba(8,24,46,.92) 0%, rgba(8,24,46,.15) 55%, rgba(8,24,46,0) 100%);
}
@media (max-width: 1000px){ .sm26 .news-layout { grid-template-columns: 1fr; } }
@media (max-width: 640px){ .sm26 .news-posts-grid { grid-template-columns: 1fr; } }

.sm26 .news-events { background:#fff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border:1px solid var(--line); padding:22px; display:flex; flex-direction:column; }
.sm26 .news-events .tag { font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--gold-600); font-weight:700; margin-bottom:8px; }
.sm26 .news-events .more { margin-top:16px; font-weight:700; font-size:13.5px; color: var(--navy-900); display:block; }
.sm26 .events-list { display:flex; flex-direction:column; gap:0; margin-top:6px; }
.sm26 .event-row { display:flex; align-items:center; gap: 20px; padding: 18px 0; border-bottom:1px solid var(--line); }
.sm26 .event-row:last-child { border-bottom:none; }
.sm26 .event-date { background: var(--navy-900); color:#fff; border-radius: var(--radius-sm); width:64px; height:64px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.sm26 .event-date .m { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color: var(--gold); }
.sm26 .event-date .d { font-family: var(--font-display); font-size:22px; font-weight:700; }
.sm26 .event-info h4 { font-size:16px; margin:0 0 3px; color: var(--navy-900); }
.sm26 .event-info span { font-size:13.5px; color: var(--ink-soft); }

/* ===== Testimonial ===== */
.sm26 .testi-section { position:relative; color:#fff; }
.sm26 .testi-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.sm26 .testi-section::before { content:""; position:absolute; inset:0; background: linear-gradient(120deg, rgba(8,24,46,.92), rgba(18,58,107,.82)); }
.sm26 .testi-inner { position:relative; z-index:2; max-width:760px; margin:0 auto; text-align:center; }
.sm26 .testi-inner .quote-mark { font-family: var(--font-display); font-size:80px; color: var(--gold); line-height:.5; margin-bottom: 10px; }
.sm26 .testi-inner p.quote { font-family: var(--font-display); font-size: clamp(22px,3vw,30px); line-height:1.4; margin-bottom:22px; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.sm26 .testi-inner .name { font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:13px; color: var(--gold-100); text-shadow: 0 1px 8px rgba(0,0,0,.35); }

/* ===== Admissions CTA band ===== */
.sm26 .cta-band { background: linear-gradient(120deg, var(--gold-600), var(--gold)); color: var(--navy-950); }
.sm26 .cta-band .container { display:flex; align-items:center; justify-content:space-between; gap: 30px; flex-wrap: wrap; padding: 56px 28px; }
.sm26 .cta-band h2 { color: var(--navy-950); margin-bottom:8px; }
.sm26 .cta-band p { margin:0; font-weight:600; }
.sm26 .cta-band .btns { display:flex; gap:14px; flex-wrap:wrap; }

/* ===== Portal strip ===== */
.sm26 .portal-strip { background: var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sm26 .portal-strip .container { display:grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 20px; padding: 40px 28px; align-items:center; }
.sm26 .portal-strip .intro h3 { font-size:20px; margin-bottom:4px; }
.sm26 .portal-strip .intro p { color: var(--ink-soft); font-size:14px; margin:0; }
.sm26 .portal-tile { display:flex; align-items:center; gap:14px; padding: 16px 18px; border:1px solid var(--line); border-radius: var(--radius-md); transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.sm26 .portal-tile:hover { box-shadow: var(--shadow-sm); transform: translateY(-3px); border-color: var(--royal); }
.sm26 .portal-tile .ic { width:42px; height:42px; border-radius:11px; background: var(--sky-100); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sm26 .portal-tile .ic svg { width:22px; height:22px; stroke: var(--sky); }
.sm26 .portal-tile h4 { font-size:14.5px; margin:0 0 2px; color: var(--navy-900); }
.sm26 .portal-tile span { font-size:12.5px; color: var(--ink-soft); }
@media (max-width: 900px){ .sm26 .portal-strip .container { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .sm26 .portal-strip .container { grid-template-columns: 1fr; } }

/* ===== Footer ===== */
.sm26 .site-footer { background: var(--navy-950); color: rgba(255,255,255,.78); position:relative; overflow:hidden; padding-top: 70px; }
.sm26 .site-footer .watermark { position:absolute; right:-40px; bottom:-60px; height: 360px; opacity:.06; }
.sm26 .footer-grid { position:relative; z-index:2; display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 50px; border-bottom:1px solid rgba(255,255,255,.12); }
.sm26 .footer-brand { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.sm26 .footer-brand img { height:52px; }
.sm26 .footer-brand .name { font-family: var(--font-display); color:#fff; font-size:18px; font-weight:700; }
.sm26 .footer-brand .est { font-size:12px; color: var(--gold); letter-spacing:.06em; text-transform:uppercase; }
.sm26 .footer-col h5 { color:#fff; font-size: 13px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:18px; font-family: var(--font-body); }
.sm26 .footer-col li { margin-bottom: 11px; font-size: 14.5px; }
.sm26 .footer-col a:hover { color: var(--gold); }
.sm26 .footer-contact li { display:flex; gap:10px; align-items:flex-start; }
.sm26 .footer-social { display:flex; gap:10px; margin-top: 18px; }
.sm26 .footer-social a { width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; }
.sm26 .footer-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-950); }
.sm26 .footer-bottom { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding: 22px 0; font-size:13px; color: rgba(255,255,255,.55); }
.sm26 .footer-bottom a:hover { color: var(--gold); }
@media (max-width: 900px){ .sm26 .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .sm26 .footer-grid { grid-template-columns: 1fr; } }

/* ===== Page hero (inner pages) ===== */
.sm26 .page-hero { position:relative; color:#fff; background: var(--navy-950); }
.sm26 .page-hero .hero-bg { opacity:.28; }
.sm26 .page-hero::before { content:""; position:absolute; inset:0; background: linear-gradient(120deg, rgba(8,24,46,.95), rgba(18,58,107,.82)); }
.sm26 .page-hero-inner { position:relative; z-index:2; padding: 76px 0 60px; }
.sm26 .page-hero .crumb { font-size:13px; letter-spacing:.06em; text-transform:uppercase; color: var(--gold-100); opacity:.95; margin-bottom:16px; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.sm26 .page-hero h1 { color:#fff; font-size: clamp(32px, 4.4vw, 48px); margin-bottom: 14px; max-width:760px; text-shadow: 0 2px 16px rgba(0,0,0,.35); }
.sm26 .page-hero .lede { color: rgba(255,255,255,.92); max-width:620px; margin-bottom:0; text-shadow: 0 1px 10px rgba(0,0,0,.35); }

/* ===== Generic content blocks used across inner pages ===== */
.sm26 .two-col { display:grid; grid-template-columns: 1fr 1fr; gap: 60px; }
@media (max-width: 900px){ .sm26 .two-col { grid-template-columns: 1fr; gap:32px; } }
.sm26 .timeline { border-left: 2px solid var(--line); padding-left: 30px; display:flex; flex-direction:column; gap: 30px; }
.sm26 .timeline-item { position:relative; }
.sm26 .timeline-item::before { content:""; position:absolute; left:-37px; top:4px; width:12px; height:12px; border-radius:50%; background: var(--gold); border:3px solid var(--cream); }
.sm26 .timeline-item .yr { font-family: var(--font-display); color: var(--navy-900); font-weight:700; font-size:19px; margin-bottom:4px; }
.sm26 .timeline-item p { color: var(--ink-soft); margin:0; font-size:15px; }

.sm26 .pillar-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
@media (max-width: 900px){ .sm26 .pillar-grid { grid-template-columns:1fr; } }
.sm26 .pillar { text-align:center; padding: 36px 24px; background:#fff; border-radius: var(--radius-md); border:1px solid var(--line); }
.sm26 .pillar .feature-icon { margin: 0 auto 18px; }

.sm26 .step-list { counter-reset: step; display:flex; flex-direction:column; gap:0; }
.sm26 .step { display:flex; gap:22px; padding: 26px 0; border-bottom:1px solid var(--line); }
.sm26 .step:last-child { border-bottom:none; }
.sm26 .step .num { counter-increment: step; font-family: var(--font-display); font-size:22px; color: var(--gold-600); font-weight:700; width:52px; flex-shrink:0; }
.sm26 .step .num::before { content: counter(step, decimal-leading-zero); }
.sm26 .step h4 { font-size:18px; margin:0 0 6px; color: var(--navy-900); }
.sm26 .step p { margin:0; color: var(--ink-soft); font-size:14.5px; }

.sm26 .info-card { background:#fff; border-radius: var(--radius-md); border:1px solid var(--line); padding: 30px 28px; box-shadow: var(--shadow-sm); }
.sm26 .info-card h3 { font-size:19px; margin-bottom:14px; }
.sm26 .info-card ul li { display:flex; gap:10px; margin-bottom:12px; font-size:14.5px; color: var(--ink-soft); }
.sm26 .info-card ul li svg { flex-shrink:0; width:18px; height:18px; stroke: var(--gold-600); margin-top:2px; }

.sm26 .stat-row-light { display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.sm26 .stat-box { text-align:center; background: var(--gold-100); border-radius: var(--radius-md); padding: 26px 16px; }
.sm26 .stat-box .n { font-family:var(--font-display); font-size:30px; color:var(--navy-900); font-weight:700; }
.sm26 .stat-box .l { font-size:12.5px; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }
@media (max-width: 700px){ .sm26 .stat-row-light { grid-template-columns:1fr 1fr; } }

/* Portal page specifics */
.sm26 .embed-frame {
  border-radius: var(--radius-lg); border: 2px dashed rgba(255,255,255,.35); background: rgba(255,255,255,.05);
  min-height: 420px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px; padding: 40px;
}
.sm26 .embed-frame .ic-lg { width:64px; height:64px; border-radius:16px; background: rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; }
.sm26 .embed-frame .ic-lg svg { width:32px; height:32px; stroke: var(--gold); }
.sm26 .embed-frame h3 { color:#fff; margin-bottom:4px; }
.sm26 .embed-frame p { color: rgba(255,255,255,.7); max-width:440px; margin:0; font-size:14.5px; }
.sm26 .portal-login-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:22px; }
@media (max-width: 700px){ .sm26 .portal-login-grid { grid-template-columns:1fr; } }
.sm26 .portal-login-card { background:#fff; border-radius: var(--radius-md); border:1px solid var(--line); padding: 28px; box-shadow: var(--shadow-sm); display:flex; flex-direction:column; gap:14px; }
.sm26 .portal-login-card .top { display:flex; align-items:center; gap:14px; }
.sm26 .portal-login-card .ic { width:48px; height:48px; border-radius:12px; background: var(--navy-900); display:flex; align-items:center; justify-content:center; }
.sm26 .portal-login-card .ic svg { width:24px; height:24px; stroke:#fff; }
.sm26 .portal-login-card h3 { font-size:18px; margin:0; }
.sm26 .portal-login-card p { color: var(--ink-soft); font-size:14px; margin:0; }

.sm26 .faq { border-bottom:1px solid var(--line); padding: 20px 0; }
.sm26 .faq h4 { font-size:16px; margin:0 0 8px; color: var(--navy-900); }
.sm26 .faq p { margin:0; color: var(--ink-soft); font-size:14.5px; }

.sm26 .form-card { background:#fff; border-radius: var(--radius-lg); border:1px solid var(--line); box-shadow: var(--shadow-md); padding: 34px; }
.sm26 .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
@media (max-width:560px){ .sm26 .form-row { grid-template-columns:1fr; } }
.sm26 .form-card label { font-size:13px; font-weight:700; color: var(--navy-900); display:block; margin-bottom:6px; }
.sm26 .form-card input, .sm26 .form-card select, .sm26 .form-card textarea {
  width:100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); font-family: var(--font-body); font-size:14.5px; background: var(--cream);
}
.sm26 .form-card input:focus, .sm26 .form-card select:focus, .sm26 .form-card textarea:focus { outline: 2px solid var(--royal); outline-offset:1px; }

.sm26 .skiplink { position:absolute; left:-999px; top:auto; }
.sm26 .skiplink:focus { left:16px; top:16px; background:#fff; color:var(--navy-900); padding:10px 16px; border-radius:8px; z-index:999; }

/* ============================================================
   WordPress integration: nav ul reset, mobile dropdown, ACF
   hero carousel (Slick) slides, and post/staff/calendar hero
   variants used by header.php.
   ============================================================ */
.sm26 .main-nav ul.topmenu { display:flex; align-items:center; gap:30px; margin:0; padding:0; list-style:none; }
.sm26 .main-nav ul.topmenu li { margin:0; list-style:none; }
.sm26 .main-nav ul.topmenu li.menu-item-has-children { position:relative; }
.sm26 .main-nav ul.topmenu .sub-menu {
  list-style:none; margin:0; padding:10px; position:absolute; top:100%; left:0; min-width:200px;
  background:#fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); border:1px solid var(--line);
  opacity:0; visibility:hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease;
}
.sm26 .main-nav ul.topmenu li.menu-item-has-children:hover .sub-menu, .sm26 .main-nav ul.topmenu li.menu-item-has-children:focus-within .sub-menu { opacity:1; visibility:visible; transform: translateY(0); }
.sm26 .main-nav ul.topmenu .sub-menu li { padding:0; }
.sm26 .main-nav ul.topmenu .sub-menu a { display:block; padding:8px 10px; font-size:14px; }
.sm26 .main-nav ul.topmenu .sub-menu a::after { display:none; }

@media (max-width: 1080px){
  .sm26 .main-nav.nav-open {
    display:flex; position:absolute; top:100%; left:0; right:0; background:#fff;
    box-shadow: var(--shadow-md); border-top:1px solid var(--line); z-index:70;
  }
  .sm26 .main-nav.nav-open ul.topmenu { flex-direction:column; align-items:flex-start; gap:0; width:100%; padding: 10px 28px 20px; }
  .sm26 .main-nav.nav-open ul.topmenu li { width:100%; }
  .sm26 .main-nav.nav-open ul.topmenu a { display:block; padding:12px 0; border-bottom:1px solid var(--line); }
  .sm26 .main-nav.nav-open ul.topmenu .sub-menu { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; padding:0 0 0 14px; }
  .sm26 #masthead { position:relative; }
}

/* Homepage hero carousel (ACF hero_carousal, rendered via Slick as .h-hero/.h-hero-item).
   This block does not assume Slick's own CSS/JS has loaded -- if slick-carousel ever fails
   to initialize (script blocked, plugin change, etc.), only the first slide shows instead of
   every slide stacking vertically down the page. */
.sm26 .hero .h-hero { position:relative; }
.sm26 .hero .h-hero:not(.slick-initialized) .h-hero-item:not(:first-child) { display:none; }
.sm26 .hero .h-hero-item {
  background-size:cover; background-position:center; position:relative; min-height: 560px; display:flex; align-items:center;
}
.sm26 .hero .h-hero-item::before {
  /* Admin-uploaded photos vary widely in brightness, so this overlay never
     drops below ~65% dark navy anywhere across the slide -- readability
     over images is guaranteed regardless of what photo gets uploaded. */
  content:""; position:absolute; inset:0;
  background: linear-gradient(115deg, rgba(6,16,32,.93) 0%, rgba(8,24,46,.8) 45%, rgba(18,58,107,.66) 100%);
}
.sm26 .hero .h-hero-item .hero-inner { padding: 90px 0; }
.sm26 .hero .hero-text-wrap { position:relative; z-index:2; }
.sm26 .hero .ht-header { color:#fff; font-size: clamp(34px,4.6vw,54px); max-width:780px; margin-bottom:16px; font-family: var(--font-display); text-shadow: 0 2px 16px rgba(0,0,0,.4); }
.sm26 .hero .ht-content { color: rgba(255,255,255,.92); max-width:560px; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.sm26 .hero .slick-dots { position:absolute; bottom:22px; left:0; right:0; z-index:3; display:flex; justify-content:center; gap:8px; list-style:none; padding:0; }
.sm26 .hero .slick-dots li { list-style:none; }
.sm26 .hero .slick-dots button { font-size:0; width:9px; height:9px; border-radius:50%; border:none; background: rgba(255,255,255,.4); cursor:pointer; }
.sm26 .hero .slick-dots li.slick-active button { background: var(--gold); }
.sm26 .hero .slick-arrow { display:none !important; }
.sm26 .hero .slide-play-control { position:absolute; right:26px; bottom:20px; z-index:3; }
.sm26 .hero .slide-play-control button {
  background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:11px;
  padding:6px 12px; border-radius:999px; cursor:pointer; letter-spacing:.05em; text-transform:uppercase;
}

/* Secondary / inner-page hero variants (staff, calendar, news, generic) reuse .page-hero */
.sm26 .page-hero .crumb { margin-bottom:14px; }
.sm26 .staff-single-hero .staff-hero-title, .sm26 .calendar-single-hero .calendar-hero-title, .sm26 .news-single-hero .news-hero-title { color:#fff; font-family: var(--font-display); font-size: clamp(30px,4vw,44px); margin:0; text-shadow: 0 2px 16px rgba(0,0,0,.4); }

/* News feature card: photo caption always needs a guaranteed-dark reading zone, independent of the source photo's own brightness. */
.sm26 .news-card.feature h3 { text-shadow: 0 1px 10px rgba(0,0,0,.5); }


/* ============================================================
   LEGACY CONTENT AREAS -- carried over from the old design.css
   ============================================================
   design.css has been removed. Everything below is the subset of it
   still actually used -- by the blog, staff directory + staff bio
   pages, the calendar landing page, board members, comments, and any
   legacy Contact Form 7 / WPBakery accordion content -- none of which
   the 2026 redesign has replaced yet. Confirmed against the current
   templates (template-parts/post/content.php, content-page.php,
   template-calendar.php, comments.php) before carrying each rule over.

   Everything here is prefixed with ".site-content-contain" the same
   way the redesign above is prefixed with ".sm26": that wrapper sits
   as a SIBLING of the new header/hero/footer markup (never a parent or
   child of it), so nothing here can ever apply inside .sm26, and
   nothing in .sm26 can ever apply here. That boundary is what the
   original CSS conflict (Aug 24) and this file's removal (Aug 28) both
   ran into, so it's kept explicit and total this time.

   Left OUT on purpose (dead weight, and some actively dangerous if
   reintroduced): the old header/hamburger/main-nav, hero/carousel,
   footer, and homepage news/events/testimonial/sponsor rules -- all
   fully replaced by the sections above. Several of those used the
   exact same #id (header#masthead, footer#colophon, #secondary-hero,
   #secondary-hero-staff, #secondary-hero-news) as the new markup, or
   bare unscoped selectors (a global "h2 { font-size:3rem !important }"
   among them) that would have silently overridden the redesign again
   the moment this file got merged back in.
   ============================================================ */

.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; width: 1px;
  overflow: hidden; position: absolute !important; word-wrap: normal !important; margin: -1px; padding: 0;
}

/* Generic post/page content (the_content() output on legacy templates) */
.site-content-contain .entry-content h2 { display:inline-block; position:relative; margin-top:30px; font-weight:700; font-family:'Roboto', sans-serif; color:#3e4047; margin-bottom:15px; }
.site-content-contain .entry-content h2::after { content:''; position:absolute; bottom:0; left:0; height:5px; width:100%; background: linear-gradient(45deg, #d8a806, transparent); }
.site-content-contain .entry-content p { line-height:2; font-family:'Montserrat', sans-serif; }
.site-content-contain .blockquote { margin:0 0 1rem; font-size:2em; padding-right:1em; font-family:'Permanent Marker', cursive; color:#0f1c3d !important; }

/* List bullets/numbers inside post & page content */
.site-content-contain .s-content ul, .site-content-contain .is_single ul { margin:40px 0 3em 0; padding:0; list-style:none; }
.site-content-contain .s-content ul li, .site-content-contain .is_single ul li { margin:15px 0 0 20px; position:relative; padding:0 0 0 24px; }
.site-content-contain .s-content ul li:not(.slick-dots li)::before, .site-content-contain .is_single ul li:not(.slick-dots li)::before {
  font-family:"Font Awesome 5 Free"; font-weight:900; content:"\f138"; color:#44b0e0; margin-left:-35px; display:inline-block; padding:0; font-size:18px; margin-right:8px; position:absolute;
}
.site-content-contain .s-content ol, .site-content-contain .is_single ol { position:relative; counter-reset:listitem; list-style:none; }
.site-content-contain .s-content ol li, .site-content-contain .is_single ol li { padding-left:12px; padding-bottom:15px; }
.site-content-contain .s-content ol li::before, .site-content-contain .is_single ol li::before {
  background:#2E2E2E; padding:2px 8px 0px; position:absolute; left:17px; z-index:-1; border-radius:13px; counter-increment:listitem; content: counters(listitem, '.') ''; color:#fff;
}

/* Staff directory (content-page.php) + staff single bio pages */
.site-content-contain .staff-img { width:100%; height:430px; background-repeat:no-repeat !important; background-size:cover !important; background-position:center; }
.site-content-contain .staff-img.default { background-size:60% !important; background-position:center !important; }
.site-content-contain .staff-pod { max-width:350px; margin:auto; box-shadow:1px 1px 10px 0px rgba(0,0,0,0.25); margin-bottom:60px; }
.site-content-contain .staff-info-wrap { padding:15px; text-align:center; }
.site-content-contain .staff-info-wrap h4 { color:#24266d; }
.site-content-contain .btn-staff-info { border:none; background:#d9a700; padding:10px 30px; color:#fff !important; font-weight:600; text-decoration:none !important; margin:10px auto; display:inline-block; }
.site-content-contain .staff-title { text-align:center; font-size:2.4rem; margin-bottom:30px; }
.site-content-contain .staff-single img { width:100%; }
.site-content-contain .staff-single { font-size:20px; text-align:justify; line-height:1.6; }
.site-content-contain img.staff-single-img { position:relative; display:block; }
.site-content-contain .staff-single-wrap { position:relative; display:block; overflow:hidden; margin-bottom:5%; }
.site-content-contain .staff-single a { background:#ffc300; padding:5px 15px; color:#1c1a1a; text-decoration:none; }
.site-content-contain .staff-single-wrap::after { content:''; position:absolute; top:7%; left:-50%; width:100%; height:10px; background:#ff0000; transform:rotate(-45deg); }
.site-content-contain .staff-single-wrap::before { content:''; position:absolute; bottom:7%; right:-50%; width:100%; height:10px; background:#ffc300; transform:rotate(-45deg); z-index:9; }

/* Calendar landing page pods (template-calendar.php) */
.site-content-contain .calendar-pod { border:1px solid #ffc300; margin-bottom:30px; box-shadow:2px 2px 5px 1px rgba(0,0,0,0.25); }
.site-content-contain .cp-wrap { display:block; width:100%; height:100%; position:relative; }
.site-content-contain .cp-date { display:flex; background:#4e63ac; color:#fff; width:78px; float:left; position:absolute; top:0; left:0; height:100%; justify-content:center; align-items:center; }
.site-content-contain .cp-month { font-size:24px; font-weight:500; }
.site-content-contain .cpd-1 { text-align:center; padding:8px; }
.site-content-contain .cpd-2 { background:#b62408; width:32px; text-align:center; float:right; position:absolute; left:78px; height:100%; top:0; display:flex; justify-content:center; align-items:center; font-size:24px; }
.site-content-contain .cp-title h3 { font-size:24px !important; }
.site-content-contain .cp-info-wrap { padding:15px; margin-left:110px; }

/* Board members (content-page.php) */
.site-content-contain .board-name-wrap { display:flex; flex-wrap:wrap; font-size:24px; font-weight:600; }
.site-content-contain .board-title, .site-content-contain .board-fname { margin-right:5px; }
.site-content-contain .board-img { width:100%; height:300px; background-color:darkgrey; display:block; background-size:cover !important; background-position:top center; }
.site-content-contain .board-info-wrap { padding:15px; }

/* WPBakery accordion, still usable in legacy page content */
.site-content-contain .vc_tta-panel-title { background:#44b0e066; border-bottom:1px solid #000000; }
.site-content-contain .vc_tta-panel-body ul { margin-bottom:5% !important; }
.site-content-contain .vc_tta-panel-title a { color:#000 !important; }
.site-content-contain .vc_tta-panel-body { background:#fff !important; }
.site-content-contain i.vc_tta-controls-icon::before, .site-content-contain i.vc_tta-controls-icon::after { border-color:#fff !important; }

/* Generic legacy buttons + comment form submit button */
.site-content-contain .btn_default, .site-content-contain #comments input[type="submit"], .site-content-contain .gform_button, .site-content-contain .site-button {
  background:#e44426; padding:13px 33px; color:#fff !important; font-size:14px; letter-spacing:0.13px; font-weight:700; cursor:pointer; display:inline-block; text-decoration:none !important; transition:.25s all; text-transform:uppercase; text-align:center; border:2px solid #e44426;
}
.site-content-contain .btn_default:hover, .site-content-contain #comments input[type="submit"]:hover, .site-content-contain .gform_button:hover,
.site-content-contain .btn_default:focus, .site-content-contain #comments input[type="submit"]:focus, .site-content-contain .gform_button:focus { color:#e44426 !important; background:#fff; outline:none; }
.site-content-contain .site-button:hover { background:#fff; color:#e44426 !important; }

/* Legacy Contact Form 7 (any CF7 form outside the 2026 redesign's own .form-card styling) */
.site-content-contain .wpcf7 { background:#fff; padding:30px 30px 0 30px; }
.site-content-contain .wpcf7 input, .site-content-contain .wpcf7 select, .site-content-contain .wpcf7 textarea { margin-bottom:15px; background:#edededba; padding:7px 15px 7px 15px; border-radius:5px; border-color:#b2b2b2; }
.site-content-contain input.wpcf7-form-control.wpcf7-submit { background:#ffc300; color:#1c1a1a !important; font-weight:700; font-size:17px; letter-spacing:0.89px; padding:15px 20px; display:block; margin:15px auto 30px auto; transition:.35s all; border:2px solid #ffc300; text-decoration:none !important; }
.site-content-contain input.wpcf7-form-control.wpcf7-submit:hover { background:#fff; }
.site-content-contain .wpcf7-form input:not([type="submit"]), .site-content-contain .wpcf7-form textarea { border-radius:5px; border:1px solid rgba(0,0,0,0.25); width:100%; }
.site-content-contain .wpcf7-form label { width:100%; }

/* Blog listing + single post + comments */
.site-content-contain .blog-single { max-width:100%; overflow:hidden; font-size:17px; }
.site-content-contain .news-pods-header { text-align:center; margin-bottom:3rem; }
.site-content-contain .meta-info { text-align:center; display:block; width:100%; margin-bottom:30px; }
.site-content-contain .meta-info p { display:inline-block; font-weight:700; }
.site-content-contain .meta-info p:first-of-type { margin-right:15px; }
.site-content-contain nav.navigation.pagination h2 { display:none; }
.site-content-contain nav.navigation.post-navigation { display:none; }
.site-content-contain .post-featured-image { width:100%; height:250px; padding-top:15px; background-size:cover !important; }
.site-content-contain .blog-landing-row { padding:5% 0; }
.site-content-contain .post-pod { box-shadow:0px 2px 12px rgba(0,0,0,0.5); margin-bottom:35px; }
.site-content-contain .post-pod h3 { padding:1em 1em 0 1em; }
.site-content-contain .post-pod h3 a { color:#e44426 !important; text-decoration:none !important; }
.site-content-contain .post-pod-contnet { padding:0 2em 2em 2em; display:grid; }
.site-content-contain .post-pod .btnDefault { margin:3em auto 1em; display:table; }
.site-content-contain .single-content { padding:5% 0; }
.site-content-contain #comments { max-width:992px; margin:2% auto 5%; padding:0 15px; }
.site-content-contain #comments label { display:block; }
.site-content-contain #comments textarea, .site-content-contain #comments input:not([type="submit"]) { width:100%; border-radius:5px; }
.site-content-contain #comments input[type='submit'] { border:none; }
.site-content-contain .link-more a i { padding-left:5px; }
.site-content-contain h2.is_single { font-size:60px !important; }
.site-content-contain .site-content.is_single { padding:5% 0; }
.site-content-contain .site-content.is_single .wrap { margin:0 15px; }
.site-content-contain .container.blog_single_feature img { width:100%; }
.site-content-contain .container.blog_single_feature { margin-top:-40px; }
.site-content-contain .blog-btn-wrap { width:100%; text-align:center; margin:3% 0 0 0; }
.site-content-contain .archive_row { margin:10% 0 5% 0; }
.site-content-contain .auth-wrap { background-image: linear-gradient(to right, #0f1c3d, transparent); display:inline-block; padding:0.5em 3em 0.5em 1em; color:#fff; margin-top:7px; }
.site-content-contain span.auth_name { text-transform:uppercase; font-weight:600; }
.site-content-contain img.prod-title-img { max-height:50px; display:block; margin:auto; }
.site-content-contain a.more-link { display:block; margin-top:30px; background:#e44426; padding:15px; color:#fff !important; font-size:14px; letter-spacing:0.13px; font-weight:700; cursor:pointer; text-decoration:none !important; transition:.25s all; text-transform:uppercase; text-align:center; border:2px solid #e44426; }
.site-content-contain a.more-link:hover, .site-content-contain a.more-link:focus { background:#fff; color:#e44426 !important; outline:none; }
.site-content-contain p.link-more { margin:auto auto 0 auto; }