/* Scouting Robotics — site.css
   Frontend styles for the rendered WP pages.
   Designed to pair with tokens.css.
*/

/* ─── Section heads ─────────────────────────────────────── */
.sr-section-head {
	display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end;
	margin-bottom: 40px;
}
.sr-lede { font-size: 17px; line-height: 1.6; color: var(--sr-slate); max-width: 640px; margin-top: 12px; }

/* ─── Page hero ─────────────────────────────────────────── */
.sr-pagehero {
	background: var(--sr-parchment);
	padding: 88px 0 80px;
	border-bottom: 1px solid var(--sr-rule);
	position: relative; overflow: hidden;
}
.sr-pagehero__title {
	font-size: 84px; font-weight: 800;
	letter-spacing: -0.025em; line-height: 0.95;
	text-transform: uppercase; max-width: 980px; text-wrap: balance;
	margin: 14px 0 0;
}
.sr-pagehero__ctas { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ─── Stats strip (catalog) ─────────────────────────────── */
.sr-stats { background: var(--sr-bone); border-bottom: 1px solid var(--sr-rule); }
.sr-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; padding: 36px 48px; }
.sr-stats__n { font-family: var(--sr-display); font-size: 36px; font-weight: 800; color: var(--sr-teal); letter-spacing: -0.02em; line-height: 1; border-left: 3px solid var(--sr-yellow); padding-left: 14px; }
.sr-stats__l { font-family: var(--sr-mono); font-size: 11px; color: var(--sr-slate); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 8px; padding-left: 14px; }

/* ─── Breadcrumb ────────────────────────────────────────── */
.sr-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-family: var(--sr-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.sr-breadcrumb a { color: var(--sr-slate); text-decoration: none; }
.sr-breadcrumb span:not(.sr-breadcrumb__current) { color: var(--sr-slate-2); }
.sr-breadcrumb__current { color: var(--sr-ink); }

/* ─── Catalog ──────────────────────────────────────────── */
.sr-catalog { background: var(--sr-parchment); padding: 64px 0 120px; }
.sr-catalog__toolbar {
	background: var(--sr-bone);
	border: 2px solid var(--sr-ink);
	border-radius: 22px;
	padding: 22px;
	display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
	box-shadow: 6px 6px 0 var(--sr-ink);
	margin-bottom: 36px;
}
.sr-catalog__search { display: flex; align-items: center; gap: 12px; color: var(--sr-slate); }
.sr-catalog__search input {
	flex: 1; border: 0; outline: none; background: transparent;
	font-family: var(--sr-sans); font-size: 16px; color: var(--sr-ink);
	padding: 6px 0;
}
.sr-catalog__search button[data-search-clear] {
	background: transparent; border: 0; cursor: pointer;
	color: var(--sr-slate); font-size: 13px; font-family: var(--sr-mono);
	letter-spacing: 0.08em; text-transform: uppercase;
}
.sr-catalog__status {
	display: inline-flex; border: 1.5px solid var(--sr-ink); border-radius: 999px; padding: 3px; background: var(--sr-parchment);
}
.sr-catalog__status button {
	padding: 8px 16px; border-radius: 999px; border: 0; cursor: pointer;
	font-family: var(--sr-sans); font-size: 13px; font-weight: 600;
	background: transparent; color: var(--sr-ink);
	transition: all .15s ease;
}
.sr-catalog__status button.is-active { background: var(--sr-ink); color: #fff; }

.sr-catalog__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.sr-chip-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px; border-radius: 999px;
	border: 1.5px solid var(--sr-rule);
	background: var(--sr-bone);
	color: var(--sr-ink); cursor: pointer;
	font-family: var(--sr-mono); font-size: 11.5px; font-weight: 600;
	letter-spacing: 0.1em; text-transform: uppercase;
	transition: all .15s ease;
}
.sr-chip-btn.is-active {
	border: 2px solid var(--sr-ink);
	background: var(--sr-yellow);
	box-shadow: 2px 2px 0 var(--sr-ink);
}
.sr-chip-btn__sw { width: 10px; height: 10px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.2); display: inline-block; }
.sr-chip-btn span:last-child { opacity: 0.55; font-weight: 500; }

.sr-catalog__resultcount {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 24px;
	font-family: var(--sr-mono); font-size: 12px; letter-spacing: 0.1em;
	color: var(--sr-slate); text-transform: uppercase;
}
.sr-catalog__resultcount button {
	background: transparent; border: 0; cursor: pointer; color: var(--sr-teal); font-weight: 600; font-size: 14px;
	font-family: var(--sr-sans); text-transform: none; letter-spacing: normal; padding: 0;
}

.sr-catalog__grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.sr-catalog__empty {
	background: var(--sr-bone); border: 1px dashed var(--sr-rule); border-radius: 14px;
	padding: 48px; text-align: center;
}
.sr-catalog__empty .sr-display { font-size: 22px; font-weight: 700; text-transform: uppercase; }
.sr-catalog__empty p { margin-top: 8px; color: var(--sr-slate); }

/* ─── Crest card ───────────────────────────────────────── */
.sr-crest-card {
	display: block; text-decoration: none; color: inherit;
	background: var(--sr-bone); border: 1.5px solid var(--sr-ink);
	border-radius: 14px; padding: 24px; position: relative;
	transition: transform .15s ease, box-shadow .15s ease;
}
.sr-crest-card:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--sr-ink); }
.sr-crest-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.sr-crest-card__badge {
	font-family: var(--sr-mono); font-size: 9.5px; letter-spacing: 0.14em;
	text-transform: uppercase; font-weight: 700;
	padding: 4px 8px; border-radius: 999px;
	background: var(--sr-parchment-2);
	color: var(--sr-ink); border: 1px solid var(--sr-ink);
}
.sr-crest-card__badge.is-live { background: var(--sr-yellow); }
.sr-crest-card__cat { font-family: var(--sr-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; margin-top: 18px; }
.sr-crest-card__name { font-family: var(--sr-display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.1; margin-top: 6px; }
.sr-crest-card__tag { margin-top: 10px; font-size: 13.5px; color: var(--sr-slate); line-height: 1.5; }
.sr-crest-card__pre { margin-top: 14px; font-size: 11.5px; color: var(--sr-slate); }
.sr-crest-card__pre .sr-mono { letter-spacing: 0.1em; text-transform: uppercase; font-size: 10px; }
.sr-crest-card__foot { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--sr-rule); display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.sr-crest-card__foot .sr-mono { color: var(--sr-slate); letter-spacing: 0.08em; text-transform: uppercase; font-size: 10.5px; }
.sr-crest-card__arrow { color: var(--sr-teal); font-weight: 600; }
.sr-crest-card__time { display: inline-flex; align-items: center; gap: 4px; color: var(--sr-slate); letter-spacing: 0.08em; text-transform: uppercase; font-size: 10.5px; }
.sr-crest-card__time svg { flex-shrink: 0; color: var(--sr-slate-2); }
.sr-crest-card.is-hidden { display: none; }

.sr-crest-card--mini { padding: 20px; text-align: center; }
.sr-crest-card--mini .sr-crest { margin: 0 auto; display: block; }
.sr-crest-card--mini .sr-crest-card__name { margin-top: 14px; font-size: 16px; }
.sr-crest-card--mini .sr-crest-card__status { font-family: var(--sr-mono); font-size: 10px; color: var(--sr-slate); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 6px; }

.sr-crest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sr-crest-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ─── Single crest hero ─────────────────────────────────── */
.sr-crest-hero { background: var(--sr-parchment); padding: 36px 0 88px; border-bottom: 1px solid var(--sr-rule); }
.sr-crest-hero__grid { display: grid; grid-template-columns: 1fr 320px; gap: 64px; align-items: start; margin-top: 36px; }
.sr-crest-hero__chips { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.sr-chip--cat {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 12px; border-radius: 999px;
	font-family: var(--sr-mono); font-size: 11px; font-weight: 700;
	letter-spacing: 0.12em; text-transform: uppercase;
	border: 0;
}
.sr-chip--cat .sr-chip-dot { background: var(--sr-yellow); }
.sr-chip--status {
	padding: 6px 12px; border-radius: 999px;
	background: var(--sr-yellow); color: var(--sr-ink);
	border: 1.5px solid var(--sr-ink);
	font-family: var(--sr-mono); font-size: 11px; font-weight: 700;
	letter-spacing: 0.12em; text-transform: uppercase;
}
.sr-crest-hero__title { font-size: 88px; font-weight: 800; letter-spacing: -0.025em; line-height: 0.95; text-transform: uppercase; text-wrap: balance; }
.sr-crest-hero__tagline { margin-top: 20px; font-size: 22px; line-height: 1.4; color: var(--sr-teal-deep); font-weight: 500; max-width: 680px; text-wrap: pretty; }
.sr-crest-hero__intro { margin-top: 24px; font-size: 17px; line-height: 1.65; color: var(--sr-slate); max-width: 680px; text-wrap: pretty; }
.sr-crest-hero__ctas { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

.sr-crest-hero__aside { position: sticky; top: 96px; }
.sr-crest-hero__card {
	background: var(--sr-bone); border: 2px solid var(--sr-ink);
	border-radius: 18px; padding: 28px; box-shadow: 6px 6px 0 var(--sr-ink);
}
.sr-crest-hero__card .sr-crest { margin: 0 auto; display: block; }

.sr-fact { margin-bottom: 14px; }
.sr-fact__k { font-family: var(--sr-mono); font-size: 10.5px; color: var(--sr-slate); letter-spacing: 0.12em; text-transform: uppercase; }
.sr-fact__v { margin-top: 4px; font-size: 14.5px; font-weight: 600; color: var(--sr-ink); }
.sr-prereq-list { display: grid; gap: 6px; margin-top: 6px; }
.sr-prereq { color: var(--sr-teal); text-decoration: none; font-weight: 600; display: flex; align-items: center; gap: 8px; }

/* ─── Requirements ─────────────────────────────────────── */
.sr-crest-reqs { background: var(--sr-cream); padding: 88px 0; border-top: 1px solid var(--sr-rule); }
.sr-progress {
	background: var(--sr-bone); border: 2px solid var(--sr-ink); border-radius: 18px;
	padding: 20px; min-width: 280px;
}
.sr-progress__head { display: flex; justify-content: space-between; align-items: baseline; }
.sr-progress__pct { font-size: 28px; font-weight: 800; color: var(--sr-teal); }
.sr-progress__bar { height: 8px; background: var(--sr-parchment); border-radius: 999px; margin-top: 8px; overflow: hidden; border: 1px solid var(--sr-ink); }
.sr-progress__fill { height: 100%; width: 0%; background: var(--sr-yellow); transition: width .3s ease; }
.sr-progress__count { margin-top: 10px; font-size: 13px; color: var(--sr-slate); }

.sr-reqs-list { display: grid; gap: 24px; }
.sr-req-group { background: var(--sr-bone); border: 1.5px solid var(--sr-ink); border-radius: 18px; overflow: hidden; }
.sr-req-group__head { padding: 20px 28px; background: var(--sr-parchment); border-bottom: 1.5px solid var(--sr-ink); display: flex; justify-content: space-between; align-items: center; }
.sr-req-group__title { display: flex; align-items: center; gap: 14px; }
.sr-req-group__title h3 { font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.005em; }
.sr-req-group__count { font-size: 11px; color: var(--sr-slate); letter-spacing: 0.1em; text-transform: uppercase; }

.sr-req-list { list-style: none; padding: 0; margin: 0; }
.sr-req-item { padding: 16px 28px; border-bottom: 1px dashed var(--sr-rule); cursor: pointer; display: flex; align-items: flex-start; gap: 14px; transition: background .15s ease; }
.sr-req-item:last-child { border-bottom: 0; }
.sr-req-item.is-checked { background: rgba(229,233,0,0.08); }
.sr-req-item.is-checked span:not(.sr-req-item__num) { color: var(--sr-slate-2); text-decoration: line-through; }
.sr-req-check {
	flex: 0 0 22px; height: 22px; border-radius: 6px;
	border: 2px solid var(--sr-ink); background: var(--sr-bone);
	display: flex; align-items: center; justify-content: center;
	transition: all .15s ease; margin-top: 2px;
}
.sr-req-item.is-checked .sr-req-check { background: var(--sr-yellow); }
.sr-req-item.is-checked .sr-req-check::after {
	content: ""; display: block; width: 11px; height: 6px;
	border-left: 2.5px solid var(--sr-ink); border-bottom: 2.5px solid var(--sr-ink);
	transform: rotate(-45deg) translate(1px, -1px);
}
.sr-req-item span:not(.sr-req-item__num):not(.sr-req-parent-label__num) { font-size: 15px; line-height: 1.55; color: var(--sr-ink); flex: 1; min-width: 0; }

.sr-reqs-note {
	margin-top: 24px; padding: 16px; background: var(--sr-bone);
	border: 1px dashed var(--sr-rule); border-radius: 10px;
	font-size: 13.5px; color: var(--sr-slate); text-align: center;
}

/* ─── Find a trainer ────────────────────────────────────── */
.sr-find-trainer { background: var(--sr-teal-ink); color: var(--sr-bone); padding: 96px 0; }
.sr-find-trainer__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; }
.sr-find-trainer h2 { font-size: 60px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.98; margin-top: 12px; }
.sr-find-trainer p { margin-top: 20px; font-size: 17px; color: rgba(255,255,255,0.8); line-height: 1.6; max-width: 540px; }
.sr-find-trainer__ctas { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.sr-eyebrow--yellow { color: var(--sr-yellow); }
.sr-find-trainer__steps { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2); border-radius: 18px; padding: 28px; }
.sr-find-trainer__steps ol { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.sr-find-trainer__steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; }
.sr-find-trainer__steps li span {
	flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
	background: var(--sr-yellow); color: var(--sr-ink);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 12px; font-family: var(--sr-mono);
}

/* ─── Related ───────────────────────────────────────────── */
.sr-related { background: var(--sr-parchment); padding: 88px 0; }

/* ─── Mobile overrides for the WP pages ─────────────────── */
@media (max-width: 760px) {
	.sr-stats__grid { grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px 18px; }
	.sr-catalog__grid,
	.sr-crest-grid,
	.sr-crest-hero__grid,
	.sr-section-head,
	.sr-find-trainer__grid { grid-template-columns: 1fr !important; }
	.sr-crest-hero__aside { position: static; top: auto; }
	.sr-crest-hero__title,
	.sr-pagehero__title,
	.sr-find-trainer h2 { font-size: clamp(36px, 10vw, 60px) !important; }
	.sr-progress { min-width: 0; }
	.sr-catalog__toolbar { grid-template-columns: 1fr; }
}

/* ============================================================
   HOME PAGE
   ============================================================ */
.sr-home-hero { background: var(--sr-parchment); padding: 88px 0 96px; position: relative; overflow: hidden; }
.sr-home-hero__bg { position: absolute; right: -360px; top: -340px; opacity: 0.06; color: var(--sr-teal); }
.sr-home-hero__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; position: relative; }
.sr-home-hero__h1 { margin-top: 28px; font-size: 92px; font-weight: 800; letter-spacing: -0.02em; line-height: 0.95; text-transform: uppercase; }
.sr-home-hero__lede { margin-top: 32px; font-size: 19.5px; line-height: 1.55; color: var(--sr-slate); max-width: 580px; text-wrap: pretty; }
.sr-home-hero__ctas { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.sr-btn-link { background: transparent; color: var(--sr-teal); font-weight: 600; border: 0; }
.sr-btn-link:hover { background: transparent; color: var(--sr-teal-deep); }
.sr-home-hero__stats { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 28px; border-top: 1.5px solid var(--sr-ink); }
.sr-home-hero__stats .sr-display { font-size: 32px; font-weight: 800; color: var(--sr-teal); letter-spacing: -0.02em; line-height: 1; }
.sr-home-hero__stats .sr-mono { margin-top: 8px; font-size: 10.5px; color: var(--sr-slate); letter-spacing: 0.1em; text-transform: uppercase; }
.sr-home-hero__crests { position: relative; height: 500px; }
.sr-home-hero__crest { position: absolute; filter: drop-shadow(0 14px 20px rgba(0,0,0,0.18)); }
.sr-home-hero__pip {
	position: absolute; bottom: 10px; right: 0;
	background: var(--sr-bone); padding: 12px 16px;
	border: 2px solid var(--sr-ink); border-radius: 999px;
	box-shadow: var(--sr-shadow-stamp);
	font-family: var(--sr-mono); font-size: 11.5px; letter-spacing: 0.08em;
	text-transform: uppercase; font-weight: 600;
}

.sr-home-mission { background: var(--sr-cream); padding: 120px 0; border-top: 1px solid var(--sr-rule); border-bottom: 1px solid var(--sr-rule); }
.sr-home-mission__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 80px; align-items: end; }
.sr-home-mission h2 { font-size: 64px; font-weight: 700; letter-spacing: -0.02em; line-height: 0.98; text-transform: uppercase; margin-top: 18px; }
.sr-home-mission p { font-size: 18.5px; line-height: 1.6; color: var(--sr-slate); text-wrap: pretty; }

.sr-home-programs { background: var(--sr-parchment); padding: 120px 0; }
.sr-home-programs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.sr-home-program {
	border: 2px solid var(--sr-ink); border-radius: 22px;
	padding: 36px;
	box-shadow: 6px 6px 0 var(--sr-ink);
}
.sr-home-program--camp { background: var(--sr-teal); color: var(--sr-bone); }
.sr-home-program--camp .sr-mono { color: var(--sr-yellow); }
.sr-home-program--camp p { color: rgba(255,255,255,0.85); }
.sr-home-program--crests { background: var(--sr-yellow); color: var(--sr-ink); }
.sr-home-program__facts { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.18); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sr-home-program--camp .sr-home-program__facts { border-top-color: rgba(255,255,255,0.25); }
.sr-home-program h3 { font-size: 40px; font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; margin-top: 12px; }
.sr-home-program p { margin-top: 16px; font-size: 16.5px; line-height: 1.6; }
.sr-home-program__facts > div .sr-mono { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.sr-home-program__facts > div strong { font-weight: 700; font-size: 15px; margin-top: 4px; display: block; }
.sr-home-program__ctas { margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; }

.sr-home-crests { background: var(--sr-teal-ink); color: var(--sr-bone); padding: 120px 0; }
.sr-section-head--dark { color: inherit; }
.sr-section-head--dark h2 { color: inherit; }
.sr-home-crests h2 { font-size: 68px; font-weight: 700; letter-spacing: -0.025em; line-height: 0.98; text-transform: uppercase; }
.sr-home-crests__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 56px; }
.sr-home-crests__chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 14px; border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.2);
	background: rgba(255,255,255,0.04);
	font-size: 12.5px; font-family: var(--sr-mono); letter-spacing: 0.1em;
	text-transform: uppercase; color: var(--sr-bone); text-decoration: none; font-weight: 500;
}
.sr-home-crests__chip span:first-child { width: 10px; height: 10px; border-radius: 2px; border: 1px solid rgba(255,255,255,0.3); display: inline-block; }
.sr-home-crests__chip strong { color: var(--sr-yellow); font-weight: 700; }
.sr-home-crests__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; row-gap: 48px; }
.sr-home-crests__card { text-decoration: none; color: inherit; text-align: center; display: block; }
.sr-home-crests__card .sr-crest { margin: 0 auto; display: block; filter: drop-shadow(0 12px 18px rgba(0,0,0,0.35)); }
.sr-home-crests__card .sr-display { margin-top: 18px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; }
.sr-home-crests__card .sr-mono { margin-top: 6px; font-size: 10.5px; color: var(--sr-yellow); text-transform: uppercase; letter-spacing: 0.12em; }

.sr-home-camp { background: var(--sr-yellow); color: var(--sr-ink); padding: 120px 0; border-top: 2px solid var(--sr-ink); border-bottom: 2px solid var(--sr-ink); position: relative; overflow: hidden; }
.sr-home-camp__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; position: relative; }
.sr-home-camp h2 { font-size: 124px; font-weight: 800; letter-spacing: -0.04em; line-height: 0.88; text-transform: uppercase; margin-top: 24px; }
.sr-home-camp p { margin-top: 28px; font-size: 20px; line-height: 1.5; max-width: 540px; text-wrap: pretty; color: var(--sr-ink); }
.sr-home-camp__facts { margin-top: 36px; display: grid; grid-template-columns: repeat(3, auto); gap: 32px; align-items: start; }
.sr-home-camp__facts .sr-display { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.sr-home-camp__facts .sr-mono { font-size: 10.5px; margin-top: 4px; letter-spacing: 0.12em; text-transform: uppercase; }
.sr-home-camp__ctas { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; }
.sr-home-camp__art { position: relative; height: 520px; }
.sr-home-camp__art .sr-photo {
	position: absolute; inset: 0; border-radius: 18px;
	border: 2px solid var(--sr-ink);
	box-shadow: 8px 8px 0 var(--sr-ink);
}
.sr-chip--inverse { background: var(--sr-ink); color: var(--sr-yellow); border-color: var(--sr-ink); }
.sr-chip--inverse span { background: var(--sr-yellow); }

.sr-home-news { background: var(--sr-cream); border-top: 1px solid var(--sr-rule); padding: 120px 0; }
.sr-home-news__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.sr-home-news__card { background: var(--sr-bone); border: 1.5px solid var(--sr-ink); border-radius: 18px; padding: 24px; }
.sr-home-news__card .sr-mono { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sr-slate); }
.sr-home-news__card h3 { font-size: 20px; line-height: 1.2; font-weight: 700; text-transform: uppercase; letter-spacing: -0.005em; margin-top: 12px; }
.sr-home-news__card h3 a { color: var(--sr-ink); text-decoration: none; }
.sr-home-news__card p { margin-top: 10px; font-size: 14.5px; color: var(--sr-slate); line-height: 1.6; }
.sr-home-news__more { display: inline-block; margin-top: 14px; color: var(--sr-teal); font-weight: 600; font-size: 14px; text-decoration: none; }

.sr-home-partners { background: var(--sr-bone); padding: 64px 0; border-top: 1px solid var(--sr-rule); }
.sr-home-partners__row { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 28px; flex-wrap: wrap; }
.sr-home-partners__row .sr-display { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: var(--sr-ink); }

/* ============================================================
   PAGE TEMPLATES (about/students/trainers/etc.)
   ============================================================ */
.sr-pagehero--teal { background: var(--sr-teal-ink); color: var(--sr-bone); }
.sr-pagehero--teal .sr-eyebrow { color: var(--sr-yellow); }
.sr-pagehero--teal .sr-lede { color: rgba(255,255,255,0.78); }
.sr-pagehero--yellow { background: var(--sr-yellow); color: var(--sr-ink); }
.sr-pagehero--cream { background: var(--sr-cream); }
.sr-pagehero--parchment { background: var(--sr-parchment); }

.sr-page-content { background: var(--sr-bone); padding: 80px 0 96px; }
.sr-page-content .sr-container { max-width: 880px; }
.sr-page-content h2 { font-family: var(--sr-display); font-size: 42px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.015em; margin: 56px 0 16px; }
.sr-page-content h3 { font-family: var(--sr-display); font-size: 24px; font-weight: 700; text-transform: uppercase; margin: 32px 0 12px; }
.sr-page-content p  { font-size: 17px; line-height: 1.65; color: var(--sr-ink); margin: 0 0 16px; }
.sr-page-content ul, .sr-page-content ol { font-size: 17px; line-height: 1.65; color: var(--sr-ink); padding-left: 24px; }
.sr-page-content li { margin-bottom: 8px; }

.sr-contact-info { background: var(--sr-parchment); padding: 64px 0 96px; }
.sr-contact-info__email { display: block; margin-top: 12px; font-size: 28px; font-weight: 700; color: var(--sr-teal); text-decoration: none; word-break: break-all; }

.sr-partners-list { background: var(--sr-parchment); padding: 80px 0 96px; }
.sr-partners-list__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.sr-partner-card { background: var(--sr-bone); border: 2px solid var(--sr-ink); border-radius: 18px; padding: 32px; }
.sr-partner-card .sr-mono { font-size: 11px; color: var(--sr-teal); letter-spacing: 0.16em; font-weight: 700; }
.sr-partner-card h3 { margin-top: 14px; font-size: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.005em; }

.sr-camp-facts { background: var(--sr-bone); padding: 48px 0; border-bottom: 1px solid var(--sr-rule); }
.sr-camp-facts .sr-stats__n { font-size: 22px; }
.sr-camp-facts .sr-stats__l { font-size: 11px; }

/* Mobile overrides for the home + page templates */
@media (max-width: 760px) {
	.sr-home-hero__grid,
	.sr-home-mission__grid,
	.sr-home-programs__grid,
	.sr-home-crests__grid,
	.sr-home-camp__grid,
	.sr-home-news__grid,
	.sr-partners-list__grid { grid-template-columns: 1fr !important; }

	.sr-home-hero__h1 { font-size: clamp(40px, 11vw, 64px) !important; }
	.sr-home-hero__stats { grid-template-columns: 1fr; }
	.sr-home-hero__crests { display: none; }
	.sr-home-mission h2 { font-size: clamp(36px, 9vw, 48px) !important; }
	.sr-home-camp h2 { font-size: clamp(56px, 16vw, 100px) !important; }
	.sr-home-program h3 { font-size: clamp(28px, 7vw, 36px) !important; }
	.sr-home-camp__facts { grid-template-columns: 1fr 1fr; }
	.sr-home-camp__art { height: 280px; }
	.sr-home-partners__row > * { flex: 1 1 45%; text-align: center; }
}


/* ─── Disclaimer ─────────────────────────────────────────── */
.sr-disclaimer-section { padding: 32px 0; background: var(--sr-parchment-2); border-top: 1px solid var(--sr-rule); }
.sr-disclaimer {
	display: flex; gap: 16px; align-items: flex-start;
	padding: 20px 24px;
	background: var(--sr-bone);
	border: 1.5px solid var(--sr-ink);
	border-radius: 10px;
	max-width: 900px;
}
.sr-disclaimer__icon {
	flex-shrink: 0;
	background: var(--sr-yellow);
	color: var(--sr-ink);
	font-family: var(--sr-display);
	font-weight: 800; font-size: 14px;
	width: 32px; height: 32px;
	border-radius: 50%; border: 1.5px solid var(--sr-ink);
	display: flex; align-items: center; justify-content: center;
}
.sr-disclaimer p { font-size: 12.5px; line-height: 1.6; color: var(--sr-slate); margin: 0; }

/* ─── Rank requirement grid ──────────────────────────────── */
.sr-crest-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ─── Page content (block editor output) ─────────────────── */
.sr-page-content { padding: 64px 0; }
.sr-page-content .wp-content p { font-size: 17px; line-height: 1.7; color: var(--sr-slate); margin-bottom: 1.2em; }
.sr-page-content .wp-content h2 { font-family: var(--sr-display); font-size: 36px; font-weight: 700; text-transform: uppercase; margin: 2em 0 0.6em; }
.sr-page-content .wp-content h3 { font-family: var(--sr-display); font-size: 22px; font-weight: 700; text-transform: uppercase; margin: 1.5em 0 0.5em; }
.sr-page-content .wp-content ul, .sr-page-content .wp-content ol { font-size: 16px; line-height: 1.7; color: var(--sr-slate); padding-left: 24px; margin-bottom: 1.2em; }
.sr-page-content .wp-content a { color: var(--sr-teal); }

/* ─── Container ──────────────────────────────────────────── */
.sr-container { max-width: 1360px; margin: 0 auto; padding: 0 48px; }

@media (max-width: 900px) {
	.sr-container { padding: 0 20px; }
	.sr-home-hero__grid { grid-template-columns: 1fr !important; }
	.sr-crest-grid, .sr-catalog__grid { grid-template-columns: repeat(2, 1fr) !important; }
	.sr-crest-grid--3 { grid-template-columns: repeat(2, 1fr) !important; }
	.sr-crest-hero__grid { grid-template-columns: 1fr !important; }
	.sr-pagehero__title { font-size: 52px !important; }
}
@media (max-width: 600px) {
	.sr-crest-grid, .sr-catalog__grid, .sr-crest-grid--3 { grid-template-columns: 1fr !important; }
	.sr-crest-hero__title { font-size: 52px !important; }
	.sr-pagehero__title { font-size: 40px !important; }
	.sr-stats__grid { grid-template-columns: repeat(2, 1fr) !important; padding: 20px !important; }
}

/* ─── Home: .sr-chip base ───────────────────────── */
.sr-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 999px;
    background: var(--sr-bone); border: 1.5px solid var(--sr-ink);
    font-family: var(--sr-mono); font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--sr-ink);
}
.sr-chip-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--sr-teal); flex-shrink: 0;
}

/* ─── Home: Mission pillars ─────────────────────── */
.sr-home-mission { background: var(--sr-cream); padding: 120px 0; border-top: 1px solid var(--sr-rule); border-bottom: 1px solid var(--sr-rule); }
.sr-home-mission__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.sr-home-mission h2 { font-size: 64px; font-weight: 700; letter-spacing: -0.02em; line-height: 0.98; text-transform: uppercase; margin-top: 18px; }
.sr-home-mission > .sr-container > div > p { font-size: 18.5px; line-height: 1.6; color: var(--sr-slate); margin-top: 24px; }
.sr-home-mission__pillars { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
.sr-home-mission__pillar {
    background: var(--sr-bone); border: 2px solid var(--sr-ink); border-radius: 18px;
    padding: 28px 24px; position: relative;
}
.sr-home-mission__pillar h3 { font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; margin-top: 10px; }
.sr-home-mission__pillar p  { margin-top: 12px; font-size: 14.5px; line-height: 1.65; color: var(--sr-slate); }
.sr-home-mission__tri { position: absolute; right: 18px; bottom: 18px; }

/* ─── Home: Steps (How it works) ────────────────── */
.sr-home-steps { background: var(--sr-parchment); padding: 120px 0; }
.sr-home-steps__head {
    display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 56px; gap: 40px;
}
.sr-home-steps__head h2 { font-size: 68px; font-weight: 700; letter-spacing: -0.025em; line-height: 0.98; text-transform: uppercase; margin-top: 14px; }
.sr-home-steps__head p { max-width: 360px; font-size: 15.5px; line-height: 1.6; color: var(--sr-slate); }
.sr-home-steps__highlight { background: var(--sr-yellow); padding: 0 8px; display: inline-block; }
.sr-home-steps__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.sr-home-steps__card {
    background: var(--sr-bone); border: 2px solid var(--sr-ink); border-radius: 18px;
    padding: 28px 22px;
}
.sr-home-steps__card--accent { background: var(--sr-yellow); }
.sr-home-steps__num { font-size: 56px; font-weight: 800; color: var(--sr-teal); letter-spacing: -0.03em; line-height: 0.9; }
.sr-home-steps__card--accent .sr-home-steps__num { color: var(--sr-ink); }
.sr-home-steps__title { margin-top: 16px; font-family: var(--sr-display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; }
.sr-home-steps__card p { margin-top: 10px; font-size: 14px; color: var(--sr-slate); line-height: 1.55; }
.sr-home-steps__footer {
    margin-top: 40px; padding: 22px 28px;
    background: var(--sr-bone); border: 1.5px solid var(--sr-rule); border-radius: 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.sr-home-steps__footer-msg { display: flex; align-items: center; gap: 16px; }

/* ─── Home: Camp CTA (yellow) ───────────────────── */
.sr-home-camp { background: var(--sr-yellow); color: var(--sr-ink); padding: 120px 0; border-top: 2px solid var(--sr-ink); border-bottom: 2px solid var(--sr-ink); position: relative; overflow: hidden; }
.sr-home-camp__ghost { position: absolute; right: -100px; bottom: -60px; font-size: 380px; font-weight: 800; color: rgba(15,20,25,0.05); letter-spacing: -0.05em; line-height: 1; pointer-events: none; }
.sr-home-camp__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; position: relative; }
.sr-home-camp__h2 { font-size: 124px; font-weight: 800; letter-spacing: -0.04em; line-height: 0.88; text-transform: uppercase; margin-top: 24px; }
.sr-home-camp p { margin-top: 28px; font-size: 20px; line-height: 1.5; max-width: 540px; color: var(--sr-ink); }
.sr-home-camp__facts { margin-top: 36px; display: grid; grid-template-columns: repeat(4, auto); gap: 32px; }
.sr-home-camp__facts .sr-display { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.sr-home-camp__facts .sr-mono { font-size: 10.5px; margin-top: 4px; letter-spacing: 0.12em; text-transform: uppercase; }
.sr-home-camp__ctas { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; }
.sr-home-camp__art { position: relative; height: 520px; }

/* ─── Home: Quote ───────────────────────────────── */
.sr-home-quote { background: var(--sr-parchment); padding: 120px 0; }
.sr-home-quote__inner { max-width: 800px; margin: 0 auto; text-align: center; }
.sr-home-quote__text { margin: 32px 0 0; font-family: var(--sr-sans); font-size: 28px; line-height: 1.4; font-weight: 500; color: var(--sr-ink); }
.sr-home-quote__attr { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* ─── Home: News cards with image ───────────────── */
.sr-home-news { background: var(--sr-cream); border-top: 1px solid var(--sr-rule); padding: 120px 0; }
.sr-home-news__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.sr-home-news__card { background: var(--sr-bone); border: 1.5px solid var(--sr-ink); border-radius: 18px; overflow: hidden; }
.sr-home-news__meta { display: flex; align-items: center; gap: 8px; font-family: var(--sr-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sr-slate); }
.sr-home-news__tag { color: var(--sr-teal); font-weight: 700; }
.sr-home-news__title { font-size: 20px; line-height: 1.2; font-weight: 700; text-transform: uppercase; letter-spacing: -0.005em; margin-top: 12px; }
.sr-home-news__title a { color: var(--sr-ink); text-decoration: none; }
.sr-home-news__card p { margin-top: 10px; font-size: 14.5px; color: var(--sr-slate); line-height: 1.6; }
.sr-home-news__more { display: inline-block; margin-top: 14px; color: var(--sr-teal); font-weight: 600; font-size: 14px; text-decoration: none; }

/* ─── Home: Partners ────────────────────────────── */
.sr-home-partners { background: var(--sr-bone); padding: 64px 0; border-top: 1px solid var(--sr-rule); }
.sr-home-partners__row { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 20px; align-items: center; }
.sr-home-partners__row .sr-display { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; color: var(--sr-slate); }

/* ─── Responsive home ───────────────────────────── */
@media (max-width: 1100px) {
    .sr-home-camp__h2 { font-size: 80px; }
    .sr-home-steps__grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 900px) {
    .sr-home-hero__grid  { grid-template-columns: 1fr !important; }
    .sr-home-hero__crests { display: none; }
    .sr-home-mission__grid { grid-template-columns: 1fr; gap: 32px; }
    .sr-home-mission h2 { font-size: 44px; }
    .sr-home-steps__head { flex-direction: column; gap: 16px; }
    .sr-home-steps__head h2 { font-size: 44px; }
    .sr-home-steps__grid { grid-template-columns: repeat(2,1fr); }
    .sr-home-camp__grid { grid-template-columns: 1fr; }
    .sr-home-camp__art { display: none; }
    .sr-home-camp__h2 { font-size: 64px; }
    .sr-home-news__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .sr-home-steps__grid { grid-template-columns: 1fr; }
    .sr-home-news__grid  { grid-template-columns: 1fr; }
    .sr-home-camp__h2 { font-size: 48px; }
    .sr-home-camp__facts { grid-template-columns: 1fr 1fr; }
}

/* ─── Per-requirement item media ────────────────── */
.sr-req-item { cursor: pointer; }
/* Only the label text span should grow — not the number prefix span */
.sr-req-item__body { flex: 1; min-width: 0; }
.sr-req-item__text-row > span:not(.sr-req-item__num) { flex: 1; min-width: 0; }
.sr-req-item__images {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 12px;
}
.sr-req-item__img {
    width: 160px; height: 110px; object-fit: cover;
    border-radius: 8px; border: 1px solid var(--sr-rule);
    display: block;
}
.sr-req-item__docs {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}
.sr-req-item__doc {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--sr-bone); border: 1.5px solid var(--sr-ink);
    color: var(--sr-teal); font-weight: 600; font-size: 13px;
    text-decoration: none; transition: all .15s;
}
.sr-req-item__doc:hover { background: var(--sr-teal); color: #fff; border-color: var(--sr-teal); }

/* ═══════════════════════════════════════════════════
   INNER PAGE COMPONENTS
   ═══════════════════════════════════════════════════ */

/* Page hero variants */
.sr-pagehero--teal  { background: var(--sr-teal); color: var(--sr-bone); }
.sr-pagehero--teal .sr-eyebrow { color: var(--sr-yellow); }
.sr-pagehero--yellow { background: var(--sr-yellow); color: var(--sr-ink); border-bottom: 2px solid var(--sr-ink); }
.sr-pagehero--yellow .sr-pagehero__title { font-size: 96px; line-height: 0.88; }
.sr-pagehero__title--big { font-size: 96px !important; line-height: 0.88 !important; }

/* Shared inner-section wrapper */
.sr-inner-section { padding: 96px 0; }
.sr-inner-section--dark { background: var(--sr-teal-ink); color: var(--sr-bone); }
.sr-inner-section--dark .sr-eyebrow { color: var(--sr-yellow); }

/* Split layout (photo + text) */
.sr-inner-split { padding: 96px 0; }
.sr-inner-split--cream { background: var(--sr-cream); }
.sr-inner-split__grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
}
.sr-inner-split__grid--60-40 {
    grid-template-columns: 1.2fr 1fr;
}
.sr-inner-split__grid--55-45 {
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
}
.sr-inner-split__media { position: relative; }

/* Shared photo */
.sr-inner-photo {
    width: 100%;
    border-radius: 18px;
    border: 2px solid var(--sr-ink);
    box-shadow: 6px 6px 0 var(--sr-ink);
    display: block;
    object-fit: cover;
}
.sr-inner-photo.sr-photo { aspect-ratio: 4/5; }

/* Typography within inner sections */
.sr-inner-h2 {
    font-size: 56px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-top: 14px;
}
.sr-inner-body {
    font-size: 18px;
    line-height: 1.65;
    color: var(--sr-slate);
    margin-top: 18px;
    text-wrap: pretty;
}
.sr-inner-section--dark .sr-inner-body { color: rgba(255,255,255,0.8); }

/* Card grid system */
.sr-card-grid { display: grid; gap: 24px; }
.sr-card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sr-card-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Card component */
.sr-card {
    background: var(--sr-bone);
    border: 2px solid var(--sr-ink);
    border-radius: 18px;
    padding: 32px;
}
.sr-card--yellow { background: var(--sr-yellow); }
.sr-card--cream  { background: var(--sr-cream); }
.sr-card--dark   {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--sr-bone);
}
.sr-card--media  { padding: 0; overflow: hidden; }
.sr-card__img    { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; border-bottom: 1.5px solid var(--sr-ink); }
.sr-card__img-placeholder { aspect-ratio: 16/9; border-radius: 0; border: 0; border-bottom: 1.5px solid var(--sr-ink); }
.sr-card__body-wrap { padding: 24px; }
.sr-card__num  { font-size: 12px; color: var(--sr-teal); letter-spacing: 0.14em; font-weight: 700; }
.sr-card__tag  { font-size: 11px; letter-spacing: 0.16em; font-weight: 700; }
.sr-card__title { font-size: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; margin-top: 12px; }
.sr-card__body  { font-size: 15.5px; line-height: 1.6; color: var(--sr-slate); margin-top: 12px; }
.sr-card--yellow .sr-card__body { color: var(--sr-ink); }

/* CTA bar (students page bottom) */
.sr-inner-cta-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 32px; background: var(--sr-bone); border: 1.5px dashed var(--sr-ink); border-radius: 18px;
}

/* Contact form fields */
.sr-form-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; font-family: var(--sr-sans); }
.sr-form-field input, .sr-form-field textarea, .sr-form-field select {
    border: 1.5px solid var(--sr-ink); border-radius: 10px; padding: 14px 16px;
    font-size: 15px; font-family: var(--sr-sans); outline: none; width: 100%; box-sizing: border-box;
    background: var(--sr-parchment); color: var(--sr-ink);
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none; appearance: none;
}
.sr-form-field input:focus, .sr-form-field textarea:focus, .sr-form-field select:focus {
    border-color: var(--sr-teal);
    box-shadow: 0 0 0 3px rgba(1,143,166,0.12);
}
.sr-form-field input::placeholder, .sr-form-field textarea::placeholder {
    color: var(--sr-mist);
}
/* Restore custom select arrow */
.sr-form-field select {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%230F1419' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}
.sr-form-field textarea { resize: vertical; }

/* ══════════════════════════════════════════════════════════
   CONTACT FORM 7 — design-system skin
   Targets CF7's own markup when rendered inside .sr-cf7-wrap.
   Mirrors .sr-form-field styles so shortcode forms match the
   native fallback form exactly.
   ══════════════════════════════════════════════════════════ */

/* Strip CF7's default paragraph spacing and layout */
.sr-cf7-wrap .wpcf7 { margin: 0; }
.sr-cf7-wrap form { margin: 0; }
.sr-cf7-wrap p {
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sr-cf7-wrap p:last-of-type { margin-bottom: 0; }

/* Labels — mono uppercase like .sr-mono eyebrow labels */
.sr-cf7-wrap label {
    font-family: var(--sr-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sr-slate);
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

/* Required asterisk teal */
.sr-cf7-wrap .wpcf7-not-valid-tip { display: none; } /* suppress inline errors; use response div */
.sr-cf7-wrap abbr[title="required"] { color: var(--sr-teal); text-decoration: none; }

/* All inputs, textareas, selects */
.sr-cf7-wrap input:not([type="submit"]),
.sr-cf7-wrap textarea,
.sr-cf7-wrap select {
    border: 1.5px solid var(--sr-ink);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 15px;
    font-family: var(--sr-sans);
    outline: none;
    width: 100%;
    box-sizing: border-box;
    background: var(--sr-parchment);
    color: var(--sr-ink);
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
    appearance: none;
}
.sr-cf7-wrap input:not([type="submit"]):focus,
.sr-cf7-wrap textarea:focus,
.sr-cf7-wrap select:focus {
    border-color: var(--sr-teal);
    box-shadow: 0 0 0 3px rgba(1,143,166,0.12);
}
.sr-cf7-wrap input::placeholder,
.sr-cf7-wrap textarea::placeholder { color: var(--sr-mist); }

/* Custom select arrow */
.sr-cf7-wrap select {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%230F1419' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}
.sr-cf7-wrap textarea { resize: vertical; }

/* Invalid state */
.sr-cf7-wrap input.wpcf7-not-valid,
.sr-cf7-wrap textarea.wpcf7-not-valid,
.sr-cf7-wrap select.wpcf7-not-valid {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px rgba(192,57,43,0.1);
}

/* Submit button — matches sr-btn sr-btn-primary sr-btn-stamp */
.sr-cf7-wrap input[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px !important;
    border-radius: var(--sr-r-pill);
    font-family: var(--sr-sans);
    font-weight: 600;
    font-size: 14px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em;
    background: var(--sr-teal);
    color: #fff;
    border: 2px solid var(--sr-ink);
    box-shadow: var(--sr-shadow-stamp);
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
    white-space: nowrap;
    margin-top: 8px;
    width: auto;
    -webkit-appearance: none;
    appearance: none;
}
.sr-cf7-wrap input[type="submit"]:hover {
    background: var(--sr-teal-deep);
    box-shadow: 6px 6px 0 var(--sr-ink);
    transform: translateY(-1px);
}

/* CF7 response/status messages */
.sr-cf7-wrap .wpcf7-response-output {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: 10px;
    font-family: var(--sr-sans);
    font-size: 14px;
    border: 1.5px solid var(--sr-ink);
}
.sr-cf7-wrap .wpcf7-mail-sent-ok {
    background: #e8f8f0;
    border-color: #27ae60;
    color: #1a6b3c;
}
.sr-cf7-wrap .wpcf7-mail-sent-ng,
.sr-cf7-wrap .wpcf7-aborted {
    background: #fdf0ef;
    border-color: #c0392b;
    color: #7b241c;
}
.sr-cf7-wrap .wpcf7-spam-blocked,
.sr-cf7-wrap .wpcf7-validation-errors {
    background: #fef9e7;
    border-color: #d4ac0d;
    color: #7d6608;
}

/* Quick facts strip (camp page) */
@media (max-width: 900px) {
    .sr-inner-split__grid, .sr-inner-split__grid--60-40, .sr-inner-split__grid--55-45 { grid-template-columns: 1fr; gap: 32px; }
    .sr-inner-split__media { display: none; }
    .sr-inner-h2 { font-size: 36px; }
    .sr-card-grid--2, .sr-card-grid--3 { grid-template-columns: 1fr; }
    .sr-inner-cta-bar { flex-direction: column; align-items: flex-start; }
    .sr-pagehero--yellow .sr-pagehero__title { font-size: 56px; }
    .sr-inner-section { padding: 64px 0; }
    .sr-inner-split { padding: 64px 0; }
}




/* ══════════════════════════════════════════════════════════
   HOME: mission section responsive fix
   ══════════════════════════════════════════════════════════ */
.sr-home-camp__ghost {
    position: absolute; right: -100px; bottom: -60px;
    font-size: 380px; font-weight: 800;
    color: rgba(15,20,25,0.05);
    letter-spacing: -0.05em; line-height: 1;
    pointer-events: none;
    text-transform: uppercase;
}
.sr-home-camp { position: relative; overflow: hidden; }

/* ══════════════════════════════════════════════════════════
   HOME responsive fixes (below 900px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .sr-home-hero__h1 { font-size: 72px; }
}
@media (max-width: 900px) {
    .sr-home-hero__grid { grid-template-columns: 1fr !important; }
    .sr-home-hero__crests { display: none; }
    .sr-home-hero__h1 { font-size: 56px; }
    /* mission overview */
    .sr-container > div[style*="grid-template-columns:0.9fr"] { grid-template-columns: 1fr !important; gap: 32px !important; }
    /* programs */
    .sr-home-programs__grid { grid-template-columns: 1fr !important; }
    /* steps */
    .sr-container > div[style*="repeat(5,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
    /* camp */
    .sr-home-camp__grid { grid-template-columns: 1fr !important; }
    .sr-home-camp__art { display: none; }
    .sr-home-camp h2 { font-size: 72px !important; }
    .sr-home-camp__ghost { display: none; }
    /* pillar cards */
    .sr-container > div[style*="repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
    .sr-home-hero__h1 { font-size: 44px; }
    .sr-home-crests__grid { grid-template-columns: repeat(2,1fr) !important; }
    .sr-home-camp h2 { font-size: 52px !important; }
}

/* ══════════════════════════════════════════════════════════
   sr-section-head (used across home)
   ══════════════════════════════════════════════════════════ */
.sr-section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 40px; margin-bottom: 56px; flex-wrap: wrap;
}
.sr-section-head h2 { font-size: 56px; font-weight: 700; letter-spacing: -0.02em; margin-top: 14px; line-height: 0.98; }
.sr-section-head p { max-width: 480px; font-size: 16px; line-height: 1.6; color: var(--sr-slate); }
.sr-section-head--dark { color: var(--sr-bone); }
.sr-section-head--dark h2 { color: inherit; }
.sr-section-head--dark p { color: rgba(255,255,255,0.75); }

/* ─── Requirement image lightbox link ────────────── */
.sr-req-item__img-link { display: block; }
.sr-req-item__img-link:hover .sr-req-item__img { opacity: 0.88; box-shadow: 0 4px 16px rgba(0,0,0,.18); }

/* ─── Completion form CTA bar ────────────────────── */
.sr-reqs-footer { margin-top: 32px; }
.sr-completion-cta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    margin-top: 20px; padding: 20px 24px;
    background: var(--sr-bone); border: 2px solid var(--sr-ink);
    border-radius: 8px;
}
.sr-completion-cta__text { flex: 1; font-size: 15px; line-height: 1.5; }
@media (max-width: 640px) {
    .sr-completion-cta { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   NEWS / BLOG SINGLE POST — sr-news-body
   ============================================================ */
.sr-news-body {
    font-family: var(--sr-sans);
    font-size: 17.5px;
    line-height: 1.72;
    color: var(--sr-slate);
}
.sr-news-body > * + * {
    margin-top: 1.3em;
}
.sr-news-body p {
    margin: 0 0 1.3em;
}
/* Lead / opening paragraph — slightly larger */
.sr-news-body > p:first-child {
    font-size: 18.5px;
    line-height: 1.65;
    color: var(--sr-ink);
    font-weight: 400;
}
.sr-news-body h2 {
    font-family: var(--sr-display);
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--sr-ink);
    margin: 2.2em 0 0.5em;
    line-height: 1.05;
}
.sr-news-body h3 {
    font-family: var(--sr-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--sr-ink);
    margin: 1.8em 0 0.4em;
}
.sr-news-body a {
    color: var(--sr-teal);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(1,143,166,0.4);
}
.sr-news-body a:hover {
    color: var(--sr-teal-deep);
    text-decoration-color: var(--sr-teal-deep);
}
.sr-news-body ul,
.sr-news-body ol {
    padding-left: 22px;
    margin-bottom: 1.3em;
}
.sr-news-body li {
    margin-bottom: 0.45em;
    line-height: 1.65;
}
.sr-news-body strong {
    color: var(--sr-ink);
    font-weight: 700;
}
.sr-news-body em {
    font-style: italic;
}
/* On-brand blockquote — yellow-bar stamp card */
.sr-news-body blockquote {
    margin: 2em 0;
    padding: 0;
    background: none;
    border: none;
    display: grid;
    grid-template-columns: 5px 1fr;
    gap: 0 20px;
    align-items: stretch;
}
.sr-news-body blockquote::before {
    content: '';
    display: block;
    background: var(--sr-yellow);
    border: 1.5px solid var(--sr-ink);
    border-radius: 3px;
    grid-column: 1;
    grid-row: 1 / 99;
}
.sr-news-body blockquote > * {
    grid-column: 2;
}
.sr-news-body blockquote p {
    font-size: 17px;
    font-style: italic;
    line-height: 1.65;
    color: var(--sr-ink);
    margin: 0 0 0.4em;
}
.sr-news-body blockquote cite {
    display: block;
    font-family: var(--sr-mono);
    font-size: 11px;
    font-style: normal;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sr-slate-2);
}
/* WP figure / image blocks */
.sr-news-body figure {
    margin: 2.4em 0;
}
.sr-news-body figure img {
    width: 100%;
    border-radius: 12px;
    border: 1.5px solid var(--sr-ink);
    display: block;
}
.sr-news-body figcaption {
    font-family: var(--sr-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sr-slate-2);
    margin-top: 10px;
    text-align: center;
}
.sr-news-body hr {
    border: 0;
    border-top: 1.5px solid var(--sr-rule);
    margin: 3em 0;
}
/* Body column grid — responsive fallback */
@media (max-width: 900px) {
    .sr-news-col-grid {
        grid-template-columns: 0 1fr 0 !important;
    }
}


/* ============================================================
   UNIFIED REQUIREMENTS FOOTER ZONE  (single-sr_techcrest)
   ============================================================ */

/* Outer wrapper — single shared border for the whole block */
.sr-footer-zone-wrap {
    margin-top: 32px;
    border: 1.5px solid var(--sr-ink);
    border-radius: 14px;
    overflow: hidden;
}

/* Upper two-column row */
.sr-footer-zone {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--sr-bone);
}

.sr-footer-zone--single {
    grid-template-columns: 1fr;
}

/* Left: progress note */
.sr-footer-zone__note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 22px 24px;
    border-right: 1.5px solid var(--sr-ink);
    background: var(--sr-parchment);
}

.sr-footer-zone--single .sr-footer-zone__note {
    border-right: none;
}

.sr-footer-zone__note svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--sr-slate);
    opacity: 0.7;
}

.sr-footer-zone__note p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--sr-slate);
}

/* Right: trainer CTA */
.sr-footer-zone__cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 24px;
    background: var(--sr-bone);
}

.sr-footer-zone__cta-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--sr-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sr-ink);
}

.sr-footer-zone__cta-label svg {
    flex-shrink: 0;
    color: var(--sr-teal);
}

.sr-footer-zone__cta p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--sr-slate);
}

/* Legal strip — sits inside the wrapper, just needs a top divider */
.sr-footer-zone__legal {
    border-top: 1px solid var(--sr-rule);
    background: var(--sr-parchment);
}

.sr-footer-zone__legal-inner {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 24px;
}

.sr-footer-zone__legal-icon {
    flex-shrink: 0;
    font-family: var(--sr-mono);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--sr-slate);
    text-transform: uppercase;
    border: 1px solid var(--sr-rule);
    border-radius: 4px;
    padding: 2px 5px;
    background: var(--sr-bone);
    white-space: nowrap;
    margin-top: 2px;
    line-height: 1.4;
}

.sr-footer-zone__legal p {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--sr-slate);
}

@media (max-width: 640px) {
    .sr-footer-zone {
        grid-template-columns: 1fr;
    }
    .sr-footer-zone__note {
        border-right: none;
        border-bottom: 1.5px solid var(--sr-ink);
    }
}


/* ============================================================
   CATEGORY LANDING PAGE  (taxonomy-sr_crest_category)
   ============================================================ */

.sr-cat-page {}

/* ── Hero ─────────────────────────────────────────────────── */
.sr-cat-hero {
    background: var(--sr-parchment);
    padding: 72px 0 56px;
    border-bottom: 1.5px solid var(--sr-ink);
    position: relative;
    overflow: hidden;
}

/* Subtle color splash in the background */
.sr-cat-hero::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -120px;
    width: 520px;
    height: 520px;
    background: var(--cat-color, #015F70);
    opacity: 0.05;
    border-radius: 50%;
    pointer-events: none;
}

.sr-cat-hero__grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    align-items: end;
    margin-bottom: 40px;
}

.sr-cat-hero__badge {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.sr-cat-hero__title {
    font-size: 80px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 0.94;
    text-transform: uppercase;
    color: var(--sr-ink);
    margin: 0;
}

.sr-cat-hero__blurb {
    margin-top: 20px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--sr-slate);
    max-width: 520px;
}

/* Stat strip */
.sr-cat-hero__stats {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px 28px;
    background: var(--sr-bone);
    border: 1.5px solid var(--sr-ink);
    border-radius: 16px;
    min-width: 200px;
    align-self: start;
}

.sr-cat-stat__n {
    font-family: var(--sr-display);
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

.sr-cat-stat__l {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--sr-slate);
    font-weight: 500;
}

/* Other category chips row */
.sr-cat-hero__other-cats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 28px;
    border-top: 1px solid var(--sr-rule);
}

.sr-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--sr-rule);
    background: var(--sr-bone);
    color: var(--sr-ink);
    font-family: var(--sr-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}

.sr-cat-chip:hover {
    border-color: var(--sr-ink);
    background: var(--sr-parchment);
}

.sr-cat-chip__sw {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.15);
    flex-shrink: 0;
}

/* ── Crest grid section ───────────────────────────────────── */
.sr-cat-grid-section {
    background: var(--sr-cream);
    padding: 72px 0 96px;
}

/* ── Group labels (Released / Coming soon) ───────────────── */
.sr-cat-group {
    margin-bottom: 64px;
}

.sr-cat-group:last-child {
    margin-bottom: 0;
}

.sr-cat-group__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1.5px solid var(--sr-rule);
}

.sr-cat-group__label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sr-mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sr-ink);
}

.sr-cat-group__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sr-cat-group__dot--live { background: var(--sr-teal); }
.sr-cat-group__dot--soon { background: var(--sr-slate); opacity: 0.5; }

.sr-cat-group__count {
    font-size: 11px;
    color: var(--sr-slate);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── Empty state ─────────────────────────────────────────── */
.sr-cat-empty {
    text-align: center;
    padding: 80px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.sr-cat-empty h2 {
    font-size: 40px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.sr-cat-empty p {
    font-size: 16px;
    color: var(--sr-slate);
    max-width: 380px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .sr-cat-hero__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .sr-cat-hero__stats {
        flex-direction: row;
        min-width: 0;
        align-self: auto;
    }
    .sr-cat-hero__title { font-size: 52px; }
}

@media (max-width: 640px) {
    .sr-cat-hero__stats { flex-direction: column; }
    .sr-cat-hero__title { font-size: 40px; }
}

/* ══════════════════════════════════════════════════════════════════
   CATEGORY PAGE PAGINATION  (taxonomy-sr_crest_category)
   ══════════════════════════════════════════════════════════════════ */
.sr-cat-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid var(--sr-rule);
}

.sr-cat-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1.5px solid var(--sr-rule);
    border-radius: 4px;
    background: var(--sr-parchment);
    color: var(--sr-ink);
    font-family: var(--sr-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.sr-cat-pagination .page-numbers:hover {
    background: var(--sr-ink);
    color: #fff;
    border-color: var(--sr-ink);
}

.sr-cat-pagination .page-numbers.current {
    background: var(--sr-ink);
    color: #fff;
    border-color: var(--sr-ink);
    box-shadow: 3px 3px 0 var(--sr-yellow);
}

.sr-cat-pagination .page-numbers.dots {
    background: transparent;
    border-color: transparent;
    pointer-events: none;
    color: var(--sr-slate);
}

/* ══════════════════════════════════════════════════════════════════
   CATEGORY BREADCRUMB IMPROVEMENTS
   ══════════════════════════════════════════════════════════════════ */
.sr-cat-hero .sr-breadcrumb {
    margin-bottom: 32px;
}

.sr-cat-hero .sr-breadcrumb a:hover {
    color: var(--sr-teal);
}

/* Mobile pagination */
@media (max-width: 480px) {
    .sr-cat-pagination .page-numbers {
        min-width: 36px;
        height: 36px;
        padding: 0 8px;
        font-size: 12px;
    }
}


/* ══════════════════════════════════════════════════════════════════
   GLOBAL PARTNERS MARQUEE STRIP
   ══════════════════════════════════════════════════════════════════ */
.sr-partners-strip {
    background: var(--sr-bone);
    padding: 48px 0 52px;
    border-top: 1px solid var(--sr-rule);
    overflow: hidden;
}

.sr-partners-strip__label {
    text-align: center;
    margin-bottom: 28px;
}

.sr-partners-strip__label .sr-mono {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sr-slate);
}

/* Text fallback (no logo partners yet) */
.sr-partners-strip__text-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 0;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
}

.sr-partners-strip__text-item {
    font-family: var(--sr-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--sr-ink);
    padding: 0 24px;
}

.sr-partners-strip__sep {
    color: var(--sr-rule);
    font-size: 16px;
}

/* Logo marquee */
.sr-partners-marquee {
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.sr-partners-marquee__track {
    display: flex;
    align-items: center;
    gap: 0;
    width: max-content;
    animation: sr-marquee 32s linear infinite;
}

.sr-partners-marquee__track:hover {
    animation-play-state: paused;
}

@keyframes sr-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.sr-partners-marquee__item {
    flex-shrink: 0;
    padding: 0 48px;
    display: flex;
    align-items: center;
}

.sr-partners-marquee__logo {
    height: 52px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    filter: grayscale(1) contrast(0.85);
    opacity: 0.75;
    transition: filter 0.2s, opacity 0.2s;
}

.sr-partners-marquee__item a:hover .sr-partners-marquee__logo,
.sr-partners-marquee__logo:hover {
    filter: grayscale(0) contrast(1);
    opacity: 1;
}

@media (max-width: 640px) {
    .sr-partners-marquee__track { animation-duration: 20s; }
    .sr-partners-marquee__item  { padding: 0 28px; }
    .sr-partners-marquee__logo  { height: 40px; }
}

/* ══════════════════════════════════════════════════════════════════
   DUAL-AUDIENCE SECTION  (sr-home.php)
   ══════════════════════════════════════════════════════════════════ */
.sr-audience-section {
    background: var(--sr-parchment);
    padding: 120px 0;
    border-top: 1px solid var(--sr-rule);
}

.sr-audience-header {
    margin-bottom: 48px;
}

.sr-audience-header .sr-eyebrow {
    margin-bottom: 16px;
}

.sr-audience-header__headline {
    font-size: 52px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1;
    max-width: 640px;
}

.sr-audience-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.sr-audience-card {
    position: relative;
    border-radius: 22px;
    border: 2px solid var(--sr-ink);
    padding: 40px 40px 48px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sr-audience-card--students {
    background: var(--sr-teal);
    color: var(--sr-bone);
}

.sr-audience-card--trainers {
    background: var(--sr-yellow);
    color: var(--sr-ink);
}

.sr-audience-card__tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 16px;
}

.sr-audience-card--students .sr-audience-card__tag { color: var(--sr-yellow); opacity: 1; }
.sr-audience-card--trainers .sr-audience-card__tag { color: var(--sr-ink); }

.sr-audience-card__title {
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.05;
    margin-bottom: 16px;
}

.sr-audience-card__body {
    font-size: 16px;
    line-height: 1.65;
    flex: 1;
    margin-bottom: 28px;
}

.sr-audience-card--students .sr-audience-card__body { color: rgba(255,255,255,0.85); }
.sr-audience-card--trainers .sr-audience-card__body { color: var(--sr-ink); }

.sr-audience-card__cta { align-self: flex-start; }

/* Decorative triangle watermark */
.sr-audience-card__deco {
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 200px;
    height: 200px;
    pointer-events: none;
}

.sr-audience-card__deco svg {
    width: 100%;
    height: 100%;
}

/* Responsive */
@media (max-width: 900px) {
    .sr-audience-grid { grid-template-columns: 1fr; }
    .sr-audience-header__headline { font-size: 40px; }
}

@media (max-width: 640px) {
    .sr-audience-card { padding: 28px 24px 36px; }
    .sr-audience-card__title { font-size: 26px; }
}

/* ══════════════════════════════════════════════════════════════════
   TECHCREST ARCHIVE HERO — stats strip
   ══════════════════════════════════════════════════════════════════ */
.sr-arc-stats {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1.5px solid var(--sr-ink);
}

.sr-arc-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sr-arc-stat__n {
    font-family: var(--sr-display);
    font-size: 36px;
    font-weight: 800;
    color: var(--sr-teal);
    letter-spacing: -0.02em;
    line-height: 1;
}

.sr-arc-stat__l {
    font-size: 13px;
    font-weight: 500;
    color: var(--sr-slate);
    text-transform: none;
}

@media (max-width: 640px) {
    .sr-arc-stats { gap: 24px; }
    .sr-arc-stat__n { font-size: 28px; }
}

/* ══════════════════════════════════════════════════════════════════
   AUDIENCE CARD — outlined button variant (for dark/teal card)
   White outline, transparent fill; solid on hover
   ══════════════════════════════════════════════════════════════════ */
.sr-audience-card__cta--outlined {
    background: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 999px;
    padding: 10px 22px;
    font-family: var(--sr-sans);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background 0.15s, color 0.15s;
}

.sr-audience-card__cta--outlined:hover {
    background: #ffffff;
    color: var(--sr-teal);
}

/* ══════════════════════════════════════════════════════════════════
   CAMP SESSION CARDS  (sr-camp.php landing page)
   ══════════════════════════════════════════════════════════════════ */
.sr-camp-sessions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
    gap: 28px;
}

.sr-camp-card {
    background: var(--sr-bone);
    border: 2px solid var(--sr-ink);
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s, transform 0.15s;
}

.sr-camp-card:hover {
    box-shadow: 6px 6px 0 var(--sr-ink);
    transform: translateY(-2px);
}

.sr-camp-card--featured {
    border-color: var(--sr-teal);
    box-shadow: 0 0 0 3px var(--sr-teal), 6px 6px 0 var(--sr-ink);
}

.sr-camp-card--featured:hover {
    box-shadow: 0 0 0 3px var(--sr-teal), 8px 8px 0 var(--sr-ink);
}

.sr-camp-card__photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-bottom: 2px solid var(--sr-ink);
}

.sr-camp-card__photo-placeholder {
    aspect-ratio: 16 / 9;
    background: repeating-linear-gradient(135deg, rgba(1,143,166,0.08) 0 8px, transparent 8px 16px);
    border-bottom: 2px solid var(--sr-rule);
}

.sr-camp-card__body {
    padding: 28px 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}

.sr-camp-card__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.sr-camp-card__featured-badge {
    font-family: var(--sr-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--sr-teal);
    color: #fff;
    padding: 3px 10px;
    border-radius: 999px;
}

.sr-camp-card__status {
    font-family: var(--sr-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sr-camp-card__title {
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.05;
    margin-bottom: 10px;
}

.sr-camp-card__title a {
    color: var(--sr-ink);
    text-decoration: none;
}
.sr-camp-card__title a:hover { color: var(--sr-teal); }

.sr-camp-card__desc {
    font-size: 15px;
    color: var(--sr-slate);
    line-height: 1.6;
    margin-bottom: 20px;
}

.sr-camp-card__facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 20px 0;
    border-top: 1px solid var(--sr-rule);
    border-bottom: 1px solid var(--sr-rule);
    margin-bottom: 20px;
    flex: 1;
    align-content: start;
}

.sr-camp-card__ctas {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .sr-camp-sessions-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATION PATCH — v3.6
   Comprehensive mobile-first fixes for all layouts, components,
   forms, navigation, touch targets, typography, and overflow.
   Applied after all existing rules to serve as authoritative overrides.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Global safe-area / notch support ───────────────────────────── */
.sr-page {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
.sr-container,
.sr-container--narrow {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
}

/* ── 2. Touch target enforcement (WCAG 2.5.5 — 44×44 px min) ──────── */
.sr-btn,
.sr-catalog__status button,
.sr-chip-btn,
.sr-faq-nav__link,
.sr-breadcrumb a,
.sr-req-item__img-link,
.sr-prereq,
.page-numbers {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Pagination items already have height from existing rules; just ensure min */
.sr-cat-pagination .page-numbers {
    min-height: 44px;
    min-width: 44px;
    height: auto;
}

/* ── 3. Prevent body-level horizontal overflow ─────────────────────── */
html, body { max-width: 100%; overflow-x: hidden; }
.sr-page { overflow-x: clip; }

/* ── 4. Form inputs — prevent iOS auto-zoom (font-size ≥ 16px) ─────── */
.sr-form-field input,
.sr-form-field textarea,
.sr-form-field select,
.sr-cf7-wrap input:not([type="submit"]),
.sr-cf7-wrap textarea,
.sr-cf7-wrap select,
.sr-catalog__search input {
    font-size: 16px !important; /* iOS won't zoom when ≥ 16px */
    -webkit-text-size-adjust: 100%;
}

/* ── 5. Workbook chrome — scroll safely on small screens ───────────── */
.wb-chrome {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    flex-wrap: wrap;
    gap: 8px;
}
.wb-doc {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── 6. Stats grid — graceful 2-col → 1-col collapse ──────────────── */
@media (max-width: 480px) {
    .sr-stats__grid {
        grid-template-columns: 1fr 1fr !important;
        padding: 20px 16px !important;
        gap: 20px !important;
    }
    .sr-stats__n { font-size: 26px !important; }
}

/* ── 7. Hero sections — clamp font sizes aggressively ──────────────── */
@media (max-width: 480px) {
    .sr-pagehero__title,
    .sr-crest-hero__title,
    .sr-home-hero__h1 {
        font-size: clamp(32px, 9vw, 48px) !important;
        line-height: 1.0 !important;
    }
    .sr-crest-hero__tagline { font-size: 16px !important; }
    .sr-home-hero__lede { font-size: 16px !important; }
    .sr-pagehero { padding: 56px 0 48px !important; }
    .sr-crest-hero { padding: 36px 0 56px !important; }
}

/* ── 8. Catalog toolbar — full-width on mobile ─────────────────────── */
@media (max-width: 760px) {
    .sr-catalog__toolbar {
        grid-template-columns: 1fr !important;
        border-radius: 14px !important;
    }
    .sr-catalog__status {
        width: 100%;
        justify-content: stretch;
    }
    .sr-catalog__status button {
        flex: 1;
        min-height: 44px;
    }
    .sr-catalog__chips {
        gap: 6px;
    }
    .sr-chip-btn {
        font-size: 10.5px;
        padding: 8px 12px;
    }
    .sr-catalog__grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}
@media (min-width: 480px) and (max-width: 760px) {
    .sr-catalog__grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── 9. Crest cards — full-width + improved readability ────────────── */
@media (max-width: 480px) {
    .sr-crest-card { padding: 18px; }
    .sr-crest-card__name { font-size: 16px; }
    .sr-crest-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}

/* ── 10. Contact page form — single-col on mobile ──────────────────── */
@media (max-width: 760px) {
    /* The inline-grid on the contact form name+email row */
    .sr-page .sr-card div[style*="grid-template-columns:1fr 1fr"],
    .sr-page .sr-card div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ── 11. FAQ — hide sticky sidebar, show inline on mobile ──────────── */
@media (max-width: 760px) {
    .sr-faq-nav {
        position: static !important;
        top: auto !important;
        border: 1.5px solid var(--sr-rule);
        border-radius: 12px;
        background: var(--sr-bone);
        padding: 16px;
        margin-bottom: 32px;
    }
    /* The sidebar / main grid on faq page */
    .sr-page div[style*="grid-template-columns:260px"],
    .sr-page div[style*="grid-template-columns: 260px"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .sr-faq-nav__link {
        padding: 10px 12px;
        font-size: 14px;
    }
}

/* ── 12. News single — body column grid mobile fix ─────────────────── */
@media (max-width: 640px) {
    .sr-news-col-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .sr-news-body { font-size: 16px !important; line-height: 1.65 !important; }
    .sr-news-body h2 { font-size: clamp(22px, 6vw, 32px) !important; }
    .sr-news-body h3 { font-size: clamp(18px, 5vw, 24px) !important; }
}

/* ── 13. Camp session cards — minmax fix for very small screens ─────── */
@media (max-width: 500px) {
    .sr-camp-sessions-grid {
        grid-template-columns: 1fr !important;
    }
    .sr-camp-card__title { font-size: 22px !important; }
    .sr-camp-card__body { padding: 20px 20px 24px !important; }
    .sr-camp-card__facts { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
}

/* ── 14. Single camp session page ──────────────────────────────────── */
@media (max-width: 760px) {
    .sr-page div[style*="grid-template-columns: 1fr 360px"],
    .sr-page div[style*="grid-template-columns:1fr 360px"],
    .sr-page div[style*="grid-template-columns: 1fr 340px"],
    .sr-page div[style*="grid-template-columns: 1fr 300px"] {
        grid-template-columns: 1fr !important;
    }
}

/* ── 15. Rank / badge pages ─────────────────────────────────────────── */
@media (max-width: 760px) {
    .sr-page div[style*="grid-template-columns: 200px"],
    .sr-page div[style*="grid-template-columns:200px"],
    .sr-page div[style*="grid-template-columns: 180px"],
    .sr-page div[style*="grid-template-columns: 160px 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ── 16. Admin — mobile-friendly metaboxes ─────────────────────────── */
@media (max-width: 782px) {
    .sr-req-item-row__attachments {
        grid-template-columns: 1fr !important;
    }
    .sr-req-attach--image {
        border-right: none !important;
        border-bottom: 1px solid #eee;
    }
    .sr-reqs__group-head {
        flex-wrap: wrap;
    }
    .sr-reqs__title {
        min-width: 0;
        width: 100%;
    }
}

/* ── 17. Partners strip — touch-scroll on mobile ───────────────────── */
@media (max-width: 640px) {
    .sr-partners-strip {
        padding: 32px 0 36px;
    }
    .sr-partners-marquee__track {
        animation-duration: 18s;
    }
    /* Fix: disable mask-image fade on mobile — it can cause clipping bugs */
    .sr-partners-marquee {
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }
    /* Ensure marquee container doesn't overflow page width */
    .sr-partners-marquee {
        width: 100vw;
        max-width: 100%;
        overflow: hidden;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ── 18. Footer zone — stack on mobile ─────────────────────────────── */
@media (max-width: 600px) {
    .sr-footer-zone {
        grid-template-columns: 1fr !important;
    }
    .sr-footer-zone__note {
        border-right: none !important;
        border-bottom: 1.5px solid var(--sr-ink);
    }
    .sr-footer-zone__legal-inner {
        flex-direction: column;
        gap: 8px;
    }
}

/* ── 19. Personal growth process — small screen ────────────────────── */
@media (max-width: 640px) {
    .sr-pgp-stage { padding: 20px !important; }
    .sr-pgp-stage__num { font-size: 32px !important; }
}

/* ── 20. Breadcrumb — truncate gracefully ───────────────────────────── */
@media (max-width: 480px) {
    .sr-breadcrumb { font-size: 11px; flex-wrap: wrap; }
    .sr-breadcrumb__current { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
}

/* ── 21. Section heads — avoid overflow ────────────────────────────── */
@media (max-width: 640px) {
    .sr-section-head { gap: 16px; margin-bottom: 32px; }
    .sr-section-head h2 { font-size: clamp(28px, 7.5vw, 40px) !important; }
}

/* ── 22. Home hero stats — single column on smallest screens ───────── */
@media (max-width: 380px) {
    .sr-home-hero__stats { grid-template-columns: 1fr !important; }
    .sr-stats__grid { grid-template-columns: 1fr !important; }
}

/* ── 23. Audience cards — better mobile padding ─────────────────────── */
@media (max-width: 480px) {
    .sr-audience-section { padding: 64px 0 !important; }
    .sr-audience-card { padding: 24px 20px 32px !important; }
    .sr-audience-card__title { font-size: 22px !important; }
    .sr-audience-card__body { font-size: 14px !important; }
}

/* ── 24. Smooth scroll & tap highlight ─────────────────────────────── */
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
a, button { -webkit-tap-highlight-color: rgba(1,143,166,0.15); }

/* ── 25. Improve focus visibility for keyboard/touch nav ───────────── */
.sr-btn:focus-visible,
.sr-chip-btn:focus-visible,
.sr-catalog__status button:focus-visible,
.sr-faq-nav__link:focus-visible,
.sr-form-field input:focus-visible,
.sr-form-field select:focus-visible,
.sr-form-field textarea:focus-visible {
    outline: 3px solid var(--sr-teal);
    outline-offset: 2px;
}

/* ── 26. Disclaimer / info boxes — don't overflow ───────────────────── */
@media (max-width: 640px) {
    .sr-disclaimer {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }
}

/* ── 27. Legal / policy pages ───────────────────────────────────────── */
.sr-legal-page { background: var(--sr-parchment); }

.sr-legal-hero {
    background: var(--sr-teal-ink);
    color: var(--sr-bone);
    padding: 72px 0 64px;
    border-bottom: 3px solid var(--sr-yellow);
}
.sr-legal-hero .sr-eyebrow { color: var(--sr-yellow); }
.sr-legal-hero__title {
    font-size: clamp(36px, 7vw, 72px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 0.95;
    text-transform: uppercase;
    margin-top: 16px;
    text-wrap: balance;
}
.sr-legal-hero__meta {
    margin-top: 20px;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center;
}
.sr-legal-hero__date {
    font-family: var(--sr-mono);
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
}

/* Table of contents sidebar */
.sr-legal-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 64px;
    padding: 72px 0 120px;
    align-items: start;
}
.sr-legal-toc {
    position: sticky;
    top: 96px;
    background: var(--sr-bone);
    border: 1.5px solid var(--sr-ink);
    border-radius: 14px;
    padding: 20px;
}
.sr-legal-toc__title {
    font-family: var(--sr-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sr-slate);
    margin-bottom: 12px;
    font-weight: 700;
}
.sr-legal-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sr-legal-toc a {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sr-ink);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    line-height: 1.4;
}
.sr-legal-toc a:hover { background: var(--sr-parchment); color: var(--sr-teal); }

/* Body content */
.sr-legal-body { max-width: 720px; }
.sr-legal-section {
    margin-bottom: 56px;
    scroll-margin-top: 96px;
}
.sr-legal-section:last-child { margin-bottom: 0; }
.sr-legal-section h2 {
    font-size: clamp(20px, 3.5vw, 28px) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--sr-yellow);
    display: flex;
    align-items: center;
    gap: 12px;
}
.sr-legal-section h2::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 24px;
    background: var(--sr-teal);
    border-radius: 2px;
    flex-shrink: 0;
}
.sr-legal-section h3 {
    font-size: clamp(15px, 2.5vw, 18px) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    margin: 24px 0 10px !important;
    color: var(--sr-teal-deep) !important;
}
.sr-legal-body p {
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: var(--sr-slate) !important;
    margin-bottom: 14px !important;
}
.sr-legal-body ul,
.sr-legal-body ol {
    margin: 12px 0 16px 0;
    padding-left: 20px;
}
.sr-legal-body li {
    font-size: 15px;
    line-height: 1.7;
    color: var(--sr-slate);
    margin-bottom: 6px;
}
.sr-legal-body a {
    color: var(--sr-teal);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sr-legal-body a:hover { color: var(--sr-teal-deep); }

/* Highlight box */
.sr-legal-highlight {
    background: var(--sr-bone);
    border: 1.5px solid var(--sr-ink);
    border-left: 4px solid var(--sr-teal);
    border-radius: 10px;
    padding: 18px 20px;
    margin: 20px 0;
}
.sr-legal-highlight p {
    font-size: 14px !important;
    color: var(--sr-ink) !important;
    margin-bottom: 0 !important;
}

/* Contact block */
.sr-legal-contact {
    background: var(--sr-teal-ink);
    color: var(--sr-bone);
    border-radius: 18px;
    padding: 32px 36px;
    margin-top: 48px;
    border: 2px solid var(--sr-ink);
}
.sr-legal-contact h3 {
    font-family: var(--sr-display);
    font-size: 22px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--sr-yellow) !important;
    margin: 0 0 14px !important;
}
.sr-legal-contact p {
    font-size: 14px !important;
    color: rgba(255,255,255,0.8) !important;
    line-height: 1.65 !important;
}
.sr-legal-contact a:not(.sr-legal-contact-btn) { color: var(--sr-yellow) !important; }

/* Responsive legal pages */
@media (max-width: 900px) {
    .sr-legal-layout {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 48px 0 80px;
    }
    .sr-legal-toc {
        position: static;
        top: auto;
    }
    .sr-legal-body { max-width: 100%; }
}
@media (max-width: 640px) {
    .sr-legal-hero { padding: 48px 0 40px; }
    .sr-legal-hero__meta { gap: 12px; }
    .sr-legal-contact { padding: 24px 20px; }
    .sr-legal-section h2 { font-size: 20px !important; }
}

/* ── 28. Ensure no table overflows on mobile ────────────────────────── */
.sr-page table {
    width: 100%;
    overflow-x: auto;
    display: block;
}
@media (max-width: 640px) {
    .sr-page table { font-size: 13px; }
    .sr-page td, .sr-page th { padding: 8px 10px; white-space: nowrap; }
}

/* ── 29. Progress bar — accessible on mobile ────────────────────────── */
@media (max-width: 480px) {
    .sr-progress { padding: 16px; }
    .sr-progress__pct { font-size: 22px; }
    .sr-reqs-list { gap: 16px; }
}

/* ── End Mobile Optimization Patch v3.6 ─────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════
   LEGAL CONTACT BUTTON  — matches .tc-nav__register style exactly:
   yellow fill, dark ink border + stamp shadow, dark ink text.
   ══════════════════════════════════════════════════════════════════ */
.sr-legal-contact-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px !important;
    border-radius: 999px;
    border: 2px solid #0F1419;
    background: #E5E900;
    color: #0F1419 !important;
    font-family: var(--sr-sans, 'Space Grotesk', system-ui, sans-serif);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer;
    box-shadow: 4px 4px 0 #0F1419;
    transition: box-shadow 0.15s, transform 0.15s;
    white-space: nowrap;
}
.sr-legal-contact-btn:hover {
    box-shadow: 6px 6px 0 #0F1419;
    transform: translateY(-1px);
    color: #0F1419 !important;
}


/* ══════════════════════════════════════════════════════════════════
   BUTTON SIZE ENFORCEMENT — appended last so it wins over everything.
   Matches the nav "Register for Camp" reference size exactly.
   ══════════════════════════════════════════════════════════════════ */
html body .sr-btn,
html body a.sr-btn,
html body button.sr-btn,
html body .sr-cf7-wrap input[type="submit"],
html body .sr-legal-contact-btn {
    padding-top:    10px !important;
    padding-bottom: 10px !important;
    padding-left:   18px !important;
    padding-right:  18px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    min-height: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
}
/* Restore compact header/workbook exceptions */
html body .sr-page header .sr-btn,
html body .tc-nav .sr-btn {
    padding-top:    8px !important;
    padding-bottom: 8px !important;
    padding-left:   12px !important;
    padding-right:  12px !important;
    font-size: 12.5px !important;
}
html body .wb-chrome .sr-btn {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 13px !important;
}


/* ══════════════════════════════════════════════════════════════════
   GLOBAL MOBILE OPTIMIZATIONS — v2.2
   Covers: all inner pages, legal pages, partners strip, headings.
   Breakpoints: ≤1024 tablet, ≤760 mobile, ≤480 small mobile.
   ══════════════════════════════════════════════════════════════════ */

/* ── Global heading size caps on mobile ──────────────────────────── */
@media (max-width: 760px) {
  /* Page hero headings — prevent overflow/crop */
  .sr-pagehero__title,
  .sr-display.sr-pagehero__title {
    font-size: clamp(28px, 9vw, 52px) !important;
    line-height: 1.05 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Generic large display headings */
  h1.sr-display { font-size: clamp(28px, 9vw, 52px) !important; line-height: 1.05 !important; }
  h2.sr-display { font-size: clamp(24px, 7.5vw, 44px) !important; line-height: 1.08 !important; }
  h3.sr-display { font-size: clamp(18px, 5.5vw, 32px) !important; line-height: 1.1 !important; }

  /* Inline-style-overridden headings on all pages */
  .sr-page h1[style*="font-size"] { font-size: clamp(28px, 9vw, 52px) !important; line-height: 1.05 !important; overflow-wrap: break-word !important; }
  .sr-page h2[style*="font-size"] { font-size: clamp(22px, 7vw, 40px) !important; line-height: 1.08 !important; overflow-wrap: break-word !important; }
  .sr-page h3[style*="font-size"] { font-size: clamp(17px, 5vw, 28px) !important; line-height: 1.1  !important; }

  /* Section padding reduction */
  .sr-page section[style*="padding:120px"],
  .sr-page section[style*="padding: 120px"] {
    padding-top: clamp(48px, 10vw, 72px) !important;
    padding-bottom: clamp(48px, 10vw, 72px) !important;
  }

  /* Container horizontal padding */
  .sr-container { padding-left: 20px !important; padding-right: 20px !important; }

  /* Grid stacking */
  .sr-page div[style*="grid-template-columns"],
  .sr-page section[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Keep 2-col layouts that are explicitly narrow (stat grids, etc.) */
  .sr-page div[style*="grid-template-columns:repeat(2,1fr)"][style*="gap:8px"],
  .sr-page div[style*="grid-template-columns:repeat(2,1fr)"][style*="gap:12px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Lede text size */
  .sr-lede { font-size: 15px !important; }

  /* Section inner sections */
  .sr-inner-section { padding-top: clamp(40px, 8vw, 64px) !important; padding-bottom: clamp(40px, 8vw, 64px) !important; }
}

@media (max-width: 480px) {
  .sr-page h1[style*="font-size"] { font-size: clamp(24px, 8.5vw, 40px) !important; }
  .sr-page h2[style*="font-size"] { font-size: clamp(20px, 7vw, 32px) !important; }
  .sr-pagehero__title { font-size: clamp(24px, 8.5vw, 40px) !important; }
}

/* ── Partners strip mobile fix ───────────────────────────────────── */
@media (max-width: 760px) {
  .sr-partners-strip {
    padding: 24px 0 !important;
  }
  .sr-partners-strip__label {
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
  }
  /* Slow down marquee on mobile so logos are readable */
  .sr-partners-marquee__track {
    animation-duration: 30s !important;
  }
  /* Ensure marquee doesn't overflow on small screens */
  .sr-partners-marquee {
    overflow: hidden !important;
  }
  .sr-partners-marquee__logo {
    max-height: 36px !important;
  }
  .sr-partners-marquee__item {
    padding: 0 28px !important;
  }
  /* Text row fallback */
  .sr-partners-strip__text-row {
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
    justify-content: center !important;
    padding: 0 16px !important;
  }
  .sr-partners-strip__text-item {
    font-size: 9px !important;
  }
}

/* ── Partners page: hide the strip marquee (logos shown in cards) ── */
.sr-partners .sr-partners-strip,
.page-template-sr-partners .sr-partners-strip,
.page-slug-partners .sr-partners-strip {
  display: none !important;
}

/* ── Legal pages mobile ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .sr-legal-layout {
    grid-template-columns: 1fr !important;
  }
  .sr-legal-toc {
    position: static !important;
    top: auto !important;
    border-right: none !important;
    padding-right: 0 !important;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--sr-rule);
    padding-bottom: 16px;
  }
}
@media (max-width: 760px) {
  .sr-legal-hero { padding: 48px 0 28px !important; }
  .sr-legal-hero__title { font-size: clamp(28px, 8.5vw, 48px) !important; }
  .sr-legal-body h2 { font-size: clamp(16px, 4.5vw, 24px) !important; }
  .sr-legal-highlight { padding: 16px 18px !important; font-size: 14px !important; }
}

/* ── About page mobile ───────────────────────────────────────────── */
@media (max-width: 760px) {
  .sr-about div[style*="position:sticky"],
  .sr-about div[style*="position: sticky"] {
    position: static !important;
    top: auto !important;
  }
}

/* ── For Students / For Trainers / For Parents page mobile ────────── */
@media (max-width: 760px) {
  /* Step grid — 5 columns becomes 2 */
  .sr-students div[style*="grid-template-columns:repeat(5,1fr)"],
  .sr-trainers div[style*="grid-template-columns:repeat(5,1fr)"],
  .sr-parents  div[style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  /* Crest badge images at top of For Students */
  .sr-students .sr-crest-badge-row {
    gap: 12px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .sr-students .sr-crest-badge-row img,
  .sr-students .sr-crest-badge-row svg {
    max-width: 64px !important;
    height: auto !important;
  }
}

/* ── Contact page mobile ────────────────────────────────────────── */
@media (max-width: 760px) {
  .sr-contact div[style*="position:sticky"],
  .sr-contact div[style*="position: sticky"] {
    position: static !important;
    top: auto !important;
  }
}

/* ── Global: prevent any heading from overflowing its container ──── */
.sr-page h1, .sr-page h2, .sr-page h3, .sr-page h4 {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ══ END GLOBAL MOBILE OPTIMIZATIONS ════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   CARD & IMAGE MOBILE OVERHAUL — v3.7.1
   Covers: all .sr-card variants, camp cards, news cards, partner logo
   cards, inline article grids, about/parents/trainers content grids,
   and the legal contact block button colour fix.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Legal contact block — button text colour fix ─────────────────
   The dark teal background of .sr-legal-contact causes white colour to
   inherit. Force black/ink on the yellow button explicitly.            */
.sr-legal-contact .sr-btn-yellow,
.sr-legal-contact a.sr-btn-yellow,
.sr-legal-contact .sr-btn-yellow:visited,
.sr-legal-contact .sr-btn-yellow:hover {
    color: var(--sr-ink) !important;
    background: var(--sr-yellow) !important;
}


/* ── 2. Reusable responsive card utilities ───────────────────────────
   These classes can be applied site-wide. Templates already use them
   via .sr-card, .sr-card-grid, .sr-camp-card, inline article grids.  */

/* Media-inside card: always stack image above content */
.sr-card--media {
    display: flex;
    flex-direction: column;
}
.sr-card--media .sr-card__img {
    flex-shrink: 0;
}

/* Responsive image defaults: every card image is already full-width
   on mobile since they use width:100%. Belt-and-suspenders:          */
.sr-card img,
.sr-card__img,
.sr-camp-card__photo {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Full-width tap target for CTA buttons on mobile */
@media (max-width: 480px) {
    .sr-card .sr-btn,
    .sr-camp-card .sr-btn,
    .sr-card__ctas .sr-btn,
    .sr-camp-card__ctas .sr-btn {
        flex: 1;
        justify-content: center;
        text-align: center;
    }
    .sr-camp-card__ctas {
        flex-direction: column;
        gap: 10px;
    }
    .sr-card__ctas,
    .sr-inner-cta-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .sr-inner-cta-bar .sr-btn {
        text-align: center;
        justify-content: center;
    }
}


/* ── 3. .sr-card-grid breakpoints ────────────────────────────────────
   Desktop: defined above (--2 = 2-col, --3 = 3-col)
   Tablet ≤900px: 2-col for --3, 1-col for --2
   Mobile ≤640px: always 1-col                                         */
@media (max-width: 900px) {
    .sr-card-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .sr-card-grid--2,
    .sr-card-grid--3 { grid-template-columns: 1fr; }
    .sr-card { padding: 24px 20px; }
}
@media (max-width: 480px) {
    .sr-card { padding: 20px 16px; }
    .sr-card__title { font-size: 22px !important; }
}


/* ── 4. .sr-camp-card mobile ─────────────────────────────────────────
   Photo already uses aspect-ratio:16/9 — that's fine on desktop.
   On mobile increase the photo ratio to 3/2 for more visual impact.   */
@media (max-width: 640px) {
    .sr-camp-card__photo,
    .sr-camp-card__photo-placeholder {
        aspect-ratio: 3 / 2;
    }
    .sr-camp-card__body {
        padding: 20px 20px 24px;
    }
    .sr-camp-card__title {
        font-size: 22px !important;
        line-height: 1.1 !important;
    }
    .sr-camp-card__facts {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
}
@media (max-width: 480px) {
    .sr-camp-card__photo,
    .sr-camp-card__photo-placeholder {
        aspect-ratio: 4 / 3;
    }
    .sr-camp-card__facts {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .sr-camp-card__ctas {
        flex-direction: column;
    }
    .sr-camp-card__ctas .sr-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}


/* ── 5. Inline article grids — site-wide stacking ────────────────────
   All inline grid article cards (homepage pillars, news grid, about
   principles/orgs, parents why-cards, trainers elig-cards, programs
   two-ways) are targeted by the .sr-page selectors below.             */

/* Tablet ≤1024px: 2-col for 3-col grids, keep 2-col */
@media (max-width: 1024px) {
    /* 3-col → 2-col */
    .sr-page div[style*="grid-template-columns:repeat(3,1fr)"],
    .sr-page section[style*="grid-template-columns:repeat(3,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    /* Exception: stat/fact strips inside cards stay 3-col */
    .sr-page div[style*="grid-template-columns:repeat(3,1fr)"][style*="padding-top:20px"],
    .sr-page div[style*="grid-template-columns:repeat(3,1fr)"][style*="border-top"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Mobile ≤760px: all content grids → 1-col */
@media (max-width: 760px) {
    /* 2-col content grids → 1-col */
    .sr-page div[style*="grid-template-columns:1fr 1fr"],
    .sr-page div[style*="grid-template-columns: 1fr 1fr"],
    .sr-page div[style*="grid-template-columns:1fr 1.2fr"],
    .sr-page div[style*="grid-template-columns: 1fr 1.2fr"],
    .sr-page div[style*="grid-template-columns:1.1fr 1fr"],
    .sr-page div[style*="grid-template-columns: 1.1fr 1fr"],
    .sr-page div[style*="grid-template-columns:1fr 1.1fr"],
    .sr-page div[style*="grid-template-columns: 1fr 1.1fr"],
    .sr-page div[style*="grid-template-columns:1.2fr 1fr"],
    .sr-page div[style*="grid-template-columns: 1.2fr 1fr"],
    .sr-page section[style*="grid-template-columns:1fr 1fr"],
    .sr-page section[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    /* 3-col → 1-col on mobile */
    .sr-page div[style*="grid-template-columns:repeat(3,1fr)"],
    .sr-page section[style*="grid-template-columns:repeat(3,1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    /* Exception: inline stat strips inside cards (3-col padded/bordered) stay 3-col */
    .sr-page div[style*="grid-template-columns:repeat(3,1fr)"][style*="padding-top:20px"],
    .sr-page div[style*="grid-template-columns:repeat(3,1fr)"][style*="border-top:1px"] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }
    /* 5-col step grids → 2-col */
    .sr-page div[style*="grid-template-columns:repeat(5,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
    /* Article padding — reduce on mobile */
    .sr-page article[style*="padding:32px"],
    .sr-page article[style*="padding: 32px"] {
        padding: 24px 20px !important;
    }
    /* Image panels that were in a side-by-side grid: go full-width */
    .sr-page img[style*="aspect-ratio:4/5"],
    .sr-page div[style*="aspect-ratio:4/5"] {
        aspect-ratio: 16 / 9 !important;
        max-height: none !important;
        width: 100% !important;
    }
    /* Button stacks on mobile */
    .sr-page div[style*="display:flex"][style*="gap:10px"],
    .sr-page div[style*="display:flex"][style*="gap:12px"],
    .sr-page div[style*="display: flex"][style*="gap:10px"],
    .sr-page div[style*="display: flex"][style*="gap:12px"] {
        flex-wrap: wrap !important;
    }
    /* Inner CTA bar stack */
    .sr-inner-cta-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }
}

/* Small mobile ≤480px */
@media (max-width: 480px) {
    /* 5-col → 1-col */
    .sr-page div[style*="grid-template-columns:repeat(5,1fr)"] {
        grid-template-columns: 1fr !important;
    }
    /* Stat/fact strips inside cards (small screen) → 2-col to save space */
    .sr-page div[style*="grid-template-columns:repeat(3,1fr)"][style*="padding-top:20px"],
    .sr-page div[style*="grid-template-columns:repeat(3,1fr)"][style*="border-top:1px"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Article padding — tightest on small */
    .sr-page article[style*="padding:32px"],
    .sr-page article[style*="padding: 32px"] {
        padding: 18px 16px !important;
    }
    /* h3 inside cards */
    .sr-page article h3[style*="font-size:26px"],
    .sr-page article h3[style*="font-size: 26px"] {
        font-size: 20px !important;
    }
    .sr-page article h3[style*="font-size:40px"],
    .sr-page article h3[style*="font-size: 40px"] {
        font-size: 26px !important;
        line-height: 1.05 !important;
    }
    /* Step number display on small */
    .sr-page div[style*="font-size:56px"][style*="font-weight:800"] {
        font-size: 36px !important;
        line-height: 1 !important;
    }
    /* News card image */
    .sr-home article[style*="border-radius:18px"][style*="overflow:hidden"] img {
        aspect-ratio: 16 / 9 !important;
    }
    /* CTA button row → full-width stacked */
    .sr-page article > div > a.sr-btn,
    .sr-page article div[style*="display:flex"] > a.sr-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
    }
}


/* ── 6. News card grid (homepage & archive) ──────────────────────────
   3-col on desktop, 2-col tablet, 1-col mobile                       */
@media (max-width: 900px) {
    .sr-home div[style*="grid-template-columns:repeat(3,1fr)"][style*="gap:28px"],
    .sr-home div[style*="grid-template-columns: repeat(3,1fr)"][style*="gap:28px"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}
@media (max-width: 640px) {
    .sr-home div[style*="grid-template-columns:repeat(3,1fr)"][style*="gap:28px"],
    .sr-home div[style*="grid-template-columns: repeat(3,1fr)"][style*="gap:28px"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    /* News card image — bigger on mobile */
    .sr-home article img[style*="aspect-ratio:16/10"],
    .sr-home article img[style*="aspect-ratio: 16/10"],
    .sr-home article div[style*="aspect-ratio:16/10"] {
        aspect-ratio: 16 / 8 !important;
    }
    /* News card body padding */
    .sr-home article div[style*="padding:24px"] {
        padding: 20px !important;
    }
}


/* ── 7. Partners sponsor card grid ───────────────────────────────────
   2-col → 1-col on mobile                                             */
@media (max-width: 640px) {
    .sr-card-grid--2 { grid-template-columns: 1fr; }
    /* Partner logo panel — larger on mobile */
    .sr-card div[style*="min-height:120px"] {
        min-height: 160px !important;
        padding: 24px !important;
    }
    .sr-card div[style*="max-height:90px"] img,
    .sr-card img[style*="max-height:90px"] {
        max-height: 80px !important;
        width: auto !important;
    }
}


/* ── 8. About page: image+text side-by-side → stack ─────────────────
   The grid is `1fr 1.2fr` — stack image above text on mobile.        */
@media (max-width: 760px) {
    /* Force the image to come first and be full-width */
    .sr-about section div[style*="grid-template-columns:1fr 1.2fr"],
    .sr-page section div[style*="grid-template-columns:1fr 1.2fr"],
    .sr-page .sr-container[style*="grid-template-columns:1fr 1.2fr"] {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    /* Aspect ratio for portrait photo: flatten to landscape on mobile */
    .sr-page img[style*="aspect-ratio:4/5"],
    .sr-page div.sr-photo[style*="aspect-ratio:4/5"] {
        aspect-ratio: 16 / 9 !important;
    }
    /* Remove fixed shadow offset that adds to layout width */
    .sr-page img[style*="box-shadow:6px 6px 0"],
    .sr-page div[style*="box-shadow:6px 6px 0"] {
        box-shadow: 3px 3px 0 var(--sr-ink) !important;
    }
}


/* ── 9. Parents & trainers two-col content grids → stack ─────────────
   `1fr 1fr` and `1.1fr 1fr` grids: already caught by rule 5 above.
   Extra specificity for the teal crests section on parents page.      */
@media (max-width: 760px) {
    .sr-page div[style*="grid-template-columns:1fr 1fr"][style*="gap:64px"],
    .sr-page div[style*="grid-template-columns: 1fr 1fr"][style*="gap:64px"] {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
}


/* ── 10. Spacing cleanup after stacking ─────────────────────────────
   When cards go from 2+ cols to 1-col, sections feel tight.
   These rules add breathing room between stacked items.               */
@media (max-width: 760px) {
    .sr-page section > .sr-container > div[style*="display:grid"] > article + article,
    .sr-page section > .sr-container > div[style*="display:grid"] > div + div {
        margin-top: 0; /* gap handles it */
    }
    /* Partner/org dark cards: bigger text on mobile for scannability */
    .sr-page article[style*="rgba(255,255,255,0.04)"] h3 {
        font-size: 20px !important;
        line-height: 1.15 !important;
        margin-top: 10px !important;
    }
    .sr-page article[style*="rgba(255,255,255,0.04)"] p {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }
}


/* ── 11. Programs two-ways cards (homepage) ──────────────────────────
   Already stacked by rule 5. Extra care for internal stat strips
   and button rows inside the teal/yellow cards.                       */
@media (max-width: 760px) {
    /* Stat strips INSIDE the programs cards: keep 3-col but smaller */
    .sr-home article div[style*="grid-template-columns:repeat(3,1fr)"][style*="padding-top:20px"] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    .sr-home article div[style*="grid-template-columns:repeat(3,1fr)"][style*="padding-top:20px"] strong {
        font-size: 13px !important;
    }
}
@media (max-width: 480px) {
    /* On the smallest screens, stat strip inside programs cards → 2-col */
    .sr-home article div[style*="grid-template-columns:repeat(3,1fr)"][style*="padding-top:20px"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    /* Button rows in programs cards → full-width stacked */
    .sr-home article div[style*="margin-top:28px"][style*="display:flex"] {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .sr-home article div[style*="margin-top:28px"][style*="display:flex"] a.sr-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}


/* ── 12. Camp sessions grid (sr-camp.php) ────────────────────────────
   Already 1-col at ≤900px. Activity cards 3-col → 1-col on mobile.  */
@media (max-width: 760px) {
    .sr-camp div[style*="grid-template-columns:repeat(3,1fr)"],
    .sr-page .sr-camp-sessions-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .sr-camp div[style*="grid-template-columns:1.1fr 1fr"],
    .sr-camp div[style*="grid-template-columns: 1.1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    /* Activity card image: bigger on mobile */
    .sr-camp div[style*="aspect-ratio:16/9"] {
        aspect-ratio: 16 / 8 !important;
    }
}


/* ── 13. Responsive image loading: performance ───────────────────────
   Lazy-loading for all non-hero images; contain image rendering.      */
.sr-card img:not([loading]),
.sr-camp-card__photo:not([loading]),
.sr-page article img:not([loading]) {
    /* PHP templates already set loading="lazy" on most images.
       This catches any missed via CSS content-visibility.             */
    content-visibility: auto;
}

/* ══ END CARD & IMAGE MOBILE OVERHAUL v3.7.1 ════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   CARD GRID ELEMENT-TYPE FIX — v3.7.2
   Previous rules only targeted div/section[style*="grid-template-columns"].
   Articles, containers with fixed-px columns, and flex-row icon cards
   were untouched. This block covers them all.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. article elements with inline grids ────────────────────────── */
@media (max-width: 760px) {
    /* ANY article with an inline grid → stack */
    .sr-page article[style*="grid-template-columns"],
    .sr-page article[style*="display:grid"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    /* Featured news article: image+content 1fr 1fr → stack, image top */
    .sr-news-archive article[style*="grid-template-columns:1fr 1fr"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        margin-bottom: 20px !important;
    }
    .sr-news-archive article[style*="grid-template-columns:1fr 1fr"] img {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 9 !important;
        object-fit: cover !important;
    }
    .sr-news-archive article[style*="grid-template-columns:1fr 1fr"] .sr-photo {
        min-height: 0 !important;
        aspect-ratio: 16 / 9 !important;
    }
    .sr-news-archive article > div[style*="padding:40px"] {
        padding: 24px 20px !important;
    }
}

/* ── 2. Step cards: 120px 1fr 80px → full-width stacked card ─────── */
@media (max-width: 760px) {
    .sr-page article[style*="grid-template-columns:120px"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 22px 20px !important;
        align-items: flex-start !important;
    }
    /* Big number — stays prominent */
    .sr-page article[style*="grid-template-columns:120px"] > .sr-display[style*="font-size:64px"],
    .sr-page article[style*="grid-template-columns:120px"] > div.sr-display {
        font-size: 36px !important;
        line-height: 1 !important;
        margin: 0 !important;
    }
    /* Icon column — hide: purely decorative on mobile */
    .sr-page article[style*="grid-template-columns:120px"] > div[style*="justify-content:flex-end"] {
        display: none !important;
    }
    /* Content column — full-width */
    .sr-page article[style*="grid-template-columns:120px"] > div:not([style*="justify-content"]) {
        width: 100% !important;
    }
    .sr-page article[style*="grid-template-columns:120px"] h3 {
        font-size: 17px !important;
        line-height: 1.2 !important;
        margin: 0 0 6px !important;
    }
    .sr-page article[style*="grid-template-columns:120px"] p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin: 0 !important;
    }
}

@media (max-width: 480px) {
    .sr-page article[style*="grid-template-columns:120px"] {
        padding: 18px 16px !important;
        gap: 8px !important;
    }
    .sr-page article[style*="grid-template-columns:120px"] > div.sr-display {
        font-size: 28px !important;
    }
}

/* ── 3. Fixed-pixel sidebar grids: 260px 1fr, 1fr 300px ──────────── */
@media (max-width: 760px) {
    .sr-page div[style*="grid-template-columns:260px"],
    .sr-page div[style*="grid-template-columns: 260px"],
    .sr-page div[style*="grid-template-columns:1fr 300px"],
    .sr-page div[style*="grid-template-columns: 1fr 300px"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

/* ── 4. Flex-row icon cards → stack icon above text on mobile ──────
   Pattern: display:flex;gap:Npx;align-items:flex-start
   Used in: parents expect cards, trainers eligibility cards           */
@media (max-width: 640px) {
    /* Icon+text flex cards with fixed-size icon */
    .sr-page div[style*="display:flex"][style*="gap:20px"][style*="align-items:flex-start"],
    .sr-page div[style*="display:flex"][style*="gap:18px"][style*="align-items:flex-start"] {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .sr-page div[style*="display:flex"][style*="gap:20px"][style*="align-items:flex-start"] > div[style*="flex-shrink:0"],
    .sr-page div[style*="display:flex"][style*="gap:18px"][style*="align-items:flex-start"] > div[style*="flex-shrink:0"] {
        margin-top: 0 !important;
    }
}

/* ── 5. Parents page: 5-col step grid → horizontal rows on mobile ── */
@media (max-width: 760px) {
    /* 5-col → 1-col with horizontal number+content layout */
    .sr-page div[style*="grid-template-columns:repeat(5,1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    /* Make each step card horizontal: number | title+body */
    .sr-page div[style*="grid-template-columns:repeat(5,1fr)"] > div[style*="display:flex"][style*="flex-direction:column"] {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 16px !important;
        padding: 16px 18px !important;
    }
    /* Big number in horizontal mode */
    .sr-page div[style*="grid-template-columns:repeat(5,1fr)"] > div .sr-display[style*="font-size:48px"] {
        font-size: 28px !important;
        line-height: 1.1 !important;
        flex-shrink: 0 !important;
        min-width: 36px !important;
    }
    /* Title in step card */
    .sr-page div[style*="grid-template-columns:repeat(5,1fr)"] > div h3,
    .sr-page div[style*="grid-template-columns:repeat(5,1fr)"] > div div[style*="font-weight:700"] {
        font-size: 15px !important;
        margin-bottom: 4px !important;
    }
    /* Body in step card */
    .sr-page div[style*="grid-template-columns:repeat(5,1fr)"] > div p {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }
}

/* ── 6. CTA bars / space-between flex rows → stack on mobile ───────── */
@media (max-width: 640px) {
    .sr-page div[style*="justify-content:space-between"][style*="align-items:center"],
    .sr-page div[style*="justify-content: space-between"][style*="align-items:center"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }
    /* CTA button → full-width */
    .sr-page div[style*="justify-content:space-between"] > a.sr-btn,
    .sr-page div[style*="justify-content: space-between"] > a.sr-btn {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ── 7. All sr-container inline grids → 1-col fallback on mobile ─── */
@media (max-width: 760px) {
    .sr-container[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

/* ══ END CARD GRID ELEMENT-TYPE FIX v3.7.2 ════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   MOBILE-FIRST CARD LAYOUT OVERHAUL — v3.7.3
   ─────────────────────────────────────────────────────────────────────
   Comprehensive stacked-layout, large-image-on-top treatment for every
   card variant across the site.  Rules are ordered from widest to
   narrowest breakpoint so cascade reads cleanly.

   Components addressed:
     • .sr-card / .sr-card--media / .sr-card-grid (all variants)
     • .sr-camp-card (sessions grid)
     • .sr-crest-card (catalog + crest-card partial)
     • .sr-home-news__card (homepage news strip)
     • archive-sr_news featured article & grid cards
     • partner logo cards (.sr-card inside .sr-card-grid--2)
     • inline article + div image grids (home, about, camp, parents,
       trainers, students, programs two-ways)
   ══════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────
   UTILITY CLASSES  (reusable, apply anywhere)
   ───────────────────────────────────────────────────────────────────── */

/* Responsive image: always fills its container, preserves ratio */
.sr-img-fluid {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Aspect-ratio wrappers — use as a wrapping div when needed */
.sr-img-wrap--16x9  { aspect-ratio: 16 / 9;  overflow: hidden; }
.sr-img-wrap--16x10 { aspect-ratio: 16 / 10; overflow: hidden; }
.sr-img-wrap--4x3   { aspect-ratio: 4 / 3;   overflow: hidden; }
.sr-img-wrap--3x2   { aspect-ratio: 3 / 2;   overflow: hidden; }
.sr-img-wrap--1x1   { aspect-ratio: 1 / 1;   overflow: hidden; }

.sr-img-wrap--16x9  img,
.sr-img-wrap--16x10 img,
.sr-img-wrap--4x3   img,
.sr-img-wrap--3x2   img,
.sr-img-wrap--1x1   img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

/* Stack: image above content — media card base */
.sr-card--stacked {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.sr-card--stacked .sr-card__img,
.sr-card--stacked img:first-child {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    border-bottom: 1.5px solid var(--sr-ink);
}
.sr-card--stacked .sr-card__body-wrap {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Full-width button utility */
.sr-btn--full {
    width: 100%;
    justify-content: center;
    text-align: center;
}


/* ─────────────────────────────────────────────────────────────────────
   FEATURED NEWS ARTICLE — class-based targeting
   (.sr-news-featured-article on archive-sr_news.php)
   ───────────────────────────────────────────────────────────────────── */
.sr-news-featured-article {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.sr-news-featured-article img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}
@media (max-width: 900px) {
    .sr-news-featured-article {
        grid-template-columns: 1fr !important;
    }
    .sr-news-featured-article img {
        aspect-ratio: 16 / 9 !important;
        border-bottom: 2px solid var(--sr-ink) !important;
    }
    .sr-news-featured-article .sr-photo {
        aspect-ratio: 16 / 9 !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        border-bottom: 2px solid var(--sr-ink) !important;
    }
    .sr-news-featured-article > div[style*="padding"] {
        padding: 28px 24px !important;
    }
}
@media (max-width: 640px) {
    .sr-news-featured-article > div[style*="padding"] {
        padding: 22px 18px !important;
    }
    .sr-news-featured-article a.sr-btn {
        width: 100% !important;
        justify-content: center !important;
        display: flex !important;
    }
    .sr-news-featured-article h2 {
        font-size: clamp(22px, 6vw, 30px) !important;
        line-height: 1.1 !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────
   TABLET  (≤ 1024px)
   Cards at this width start transitioning gracefully.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

    /* ── Camp sessions: 440px minmax → fixed 2-col ── */
    .sr-camp-sessions-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 22px !important;
    }

    /* ── Featured news article: narrow the gap ── */
    .sr-news-archive article[style*="grid-template-columns:1fr 1fr"] {
        gap: 0 !important;
    }

    /* ── Crest grid: 4-col → 3-col ── */
    .sr-crest-grid,
    .sr-catalog__grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* ── Home crests grid: 4-col → 3-col ── */
    .sr-home-crests__grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 28px !important;
        row-gap: 36px !important;
    }

    /* ── Partner logo inside card: slightly smaller ── */
    .sr-card div[style*="min-height:120px"] {
        min-height: 100px !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────
   TABLET NARROW  (≤ 900px)
   Further compression; 2-col layouts mostly remain, 3-col drops to 2.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

    /* ── Camp sessions: 2-col → 1-col ── */
    .sr-camp-sessions-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* ── Camp card photo: widen aspect ratio for impact ── */
    .sr-camp-card__photo,
    .sr-camp-card__photo-placeholder {
        aspect-ratio: 16 / 7 !important;
    }

    /* ── Crest grid / catalog: 3-col → 2-col ── */
    .sr-crest-grid,
    .sr-catalog__grid,
    .sr-crest-grid--4,
    .sr-crest-grid--3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ── Home crests: 3-col → 2-col ── */
    .sr-home-crests__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ── Inline news cards: 3-col → 2-col ── */
    .sr-home-news__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────
   MOBILE  (≤ 760px)
   Full stacking: every card becomes single-column, images on top.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {

    /* ════════ CORE CARD BASES ════════ */

    /* .sr-card-grid: all variants collapse to 1-col */
    .sr-card-grid,
    .sr-card-grid--2,
    .sr-card-grid--3 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* .sr-card: comfortable single-col padding */
    .sr-card {
        padding: 22px 18px !important;
    }

    /* .sr-card--media stacked image: taller for visual impact */
    .sr-card--media .sr-card__img,
    .sr-card__img {
        aspect-ratio: 16 / 9 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Remove any fixed heights on card images */
    .sr-card img[style*="height"],
    .sr-card a img {
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
    }

    .sr-card__body-wrap { padding: 20px 18px !important; }
    .sr-card__title     { font-size: 22px !important; }


    /* ════════ CAMP CARD (.sr-camp-card) ════════ */

    /* Image: large 3/2 ratio for strong visual impact on mobile */
    .sr-camp-card__photo,
    .sr-camp-card__photo-placeholder {
        aspect-ratio: 3 / 2 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }

    .sr-camp-card__body  { padding: 22px 20px 28px !important; }
    .sr-camp-card__title { font-size: 24px !important; line-height: 1.08 !important; }
    .sr-camp-card__desc  { font-size: 15px !important; margin-bottom: 16px !important; }

    /* Camp facts: 2-col on mobile (readable, not cramped) */
    .sr-camp-card__facts {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    /* Camp CTA buttons: fill width, easy tap */
    .sr-camp-card__ctas {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .sr-camp-card__ctas .sr-btn {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }


    /* ════════ CREST CARD (.sr-crest-card) ════════ */

    /* Grid: all crest grids → 2-col on mobile (badges look better tiled) */
    .sr-crest-grid,
    .sr-crest-grid--4,
    .sr-crest-grid--3,
    .sr-catalog__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    /* Crest badge image: bigger, centered */
    .sr-crest-card .sr-crest,
    .sr-crest-card img.sr-crest {
        width: 80px !important;
        height: 80px !important;
    }

    .sr-crest-card__name { font-size: 16px !important; }
    .sr-crest-card__tag  { font-size: 13px !important; }
    .sr-crest-card__foot { margin-top: 14px !important; padding-top: 12px !important; }


    /* ════════ HOME NEWS CARD (.sr-home-news__card) ════════ */

    .sr-home-news__grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Give news cards more breathing room */
    .sr-home-news__card {
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Image area (when cards use inline images) */
    .sr-home-news__card img {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        object-fit: cover !important;
        display: block !important;
        border-bottom: 1.5px solid var(--sr-ink) !important;
    }

    /* Text content padding */
    .sr-home-news__card > div,
    .sr-home-news__card .sr-home-news__body {
        padding: 20px 18px !important;
    }

    .sr-home-news__card h3    { font-size: 18px !important; margin-top: 10px !important; }
    .sr-home-news__card p     { font-size: 14px !important; margin-top: 8px !important; }


    /* ════════ NEWS ARCHIVE CARDS (archive-sr_news.php) ════════ */

    /* Featured article: horizontal → stacked, image on top */
    .sr-news-archive article[style*="grid-template-columns:1fr 1fr"],
    .sr-news-archive article[style*="grid-template-columns: 1fr 1fr"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        margin-bottom: 20px !important;
    }

    /* Featured image: large, full-width */
    .sr-news-archive article[style*="grid-template-columns:1fr 1fr"] img,
    .sr-news-archive article[style*="grid-template-columns: 1fr 1fr"] img {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        min-height: 0 !important;
        object-fit: cover !important;
        display: block !important;
        border-bottom: 2px solid var(--sr-ink) !important;
    }

    /* Featured article placeholder */
    .sr-news-archive article[style*="grid-template-columns:1fr 1fr"] .sr-photo,
    .sr-news-archive article[style*="grid-template-columns: 1fr 1fr"] .sr-photo {
        min-height: 0 !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 0 !important;
        border-bottom: 2px solid var(--sr-ink) !important;
    }

    /* Featured article content: good padding */
    .sr-news-archive article[style*="grid-template-columns:1fr 1fr"] > div[style*="padding"],
    .sr-news-archive article[style*="grid-template-columns: 1fr 1fr"] > div[style*="padding"] {
        padding: 24px 20px !important;
    }

    /* Heading scale */
    .sr-news-archive article h2[style*="font-size:42px"],
    .sr-news-archive article h2[style*="font-size: 42px"] {
        font-size: clamp(22px, 6vw, 32px) !important;
        line-height: 1.1 !important;
    }

    /* CTA → full width */
    .sr-news-archive article a.sr-btn {
        width: 100% !important;
        justify-content: center !important;
        display: flex !important;
        margin-top: 18px !important;
    }

    /* Rest grid (3-col) → 1-col on mobile */
    .sr-news-archive div[style*="grid-template-columns:repeat(3,1fr)"],
    .sr-news-archive div[style*="grid-template-columns: repeat(3,1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Small news card images: bump to 16/9 for impact */
    .sr-news-archive article img[style*="aspect-ratio:16/9"],
    .sr-news-archive article img[style*="aspect-ratio: 16/9"],
    .sr-news-archive article div[style*="aspect-ratio:16/9"] {
        aspect-ratio: 16 / 8 !important;
    }

    .sr-news-archive article div[style*="padding:24px"] {
        padding: 18px 16px !important;
    }


    /* ════════ PARTNER LOGO CARDS (.sr-card inside .sr-card-grid--2) ════════ */

    /* Logo panel: taller, more prominent */
    .sr-card div[style*="min-height:120px"] {
        min-height: 180px !important;
        padding: 28px 20px !important;
    }

    /* Remove any size constraints on logos */
    .sr-card div[style*="max-height:90px"] img,
    .sr-card img[style*="max-height:90px"],
    .sr-card div[style*="min-height:120px"] img {
        max-height: 100px !important;
        max-width: 80% !important;
        width: auto !important;
        height: auto !important;
    }

    /* Partner card heading */
    .sr-partner-card h3 { font-size: 20px !important; margin-top: 10px !important; }


    /* ════════ INLINE ARTICLE IMAGE+TEXT GRIDS ════════ */

    /* Any article or div rendered as a side-by-side horizontal card:
       force stacking with image first */
    .sr-page article[style*="display:grid"],
    .sr-page article[style*="display: grid"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* Images inside stacked articles: large and full-width */
    .sr-page article[style*="display:grid"] img,
    .sr-page article[style*="display:grid"] .sr-photo,
    .sr-page article[style*="display: grid"] img,
    .sr-page article[style*="display: grid"] .sr-photo {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        min-height: 0 !important;
        object-fit: cover !important;
        border-radius: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Content inside stacked articles: comfortable padding */
    .sr-page article[style*="display:grid"] > div[style*="padding"],
    .sr-page article[style*="display: grid"] > div[style*="padding"] {
        padding: 22px 18px !important;
    }

    /* Portrait aspect-ratio images (4/5, 3/4): flatten to landscape */
    .sr-page img[style*="aspect-ratio:4/5"],
    .sr-page div[style*="aspect-ratio:4/5"],
    .sr-page img[style*="aspect-ratio: 4/5"],
    .sr-page div[style*="aspect-ratio: 4/5"] {
        aspect-ratio: 16 / 9 !important;
        max-height: none !important;
        width: 100% !important;
    }

    /* Activity/org cards inside a grid: image first, content below */
    .sr-page div[style*="grid-template-columns:repeat(3,1fr)"] article img,
    .sr-page div[style*="grid-template-columns:repeat(3,1fr)"] article .sr-photo {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        object-fit: cover !important;
        border-radius: 0 !important;
    }


    /* ════════ CAMP PAGE SPECIFIC ════════ */

    /* Camp activity cards (3-col grid of small article cards) */
    .sr-camp div[style*="grid-template-columns:repeat(3,1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Camp section hero image: taller for impact */
    .sr-camp div[style*="aspect-ratio:4/5"],
    .sr-camp img[style*="aspect-ratio:4/5"] {
        aspect-ratio: 3 / 2 !important;
        width: 100% !important;
        border-radius: 14px !important;
    }


    /* ════════ HOME PAGE PROGRAMS CARDS ════════ */

    /* Programs two-ways cards: single column */
    .sr-home-programs__grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Programs card padding & heading */
    .sr-home-program { padding: 28px 22px !important; }
    .sr-home-program h3 { font-size: clamp(26px, 7vw, 36px) !important; }

    /* Stat strip inside programs card: keep 3-col */
    .sr-home-program__facts {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* CTA button row in programs card */
    .sr-home-program__ctas {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
    }
    .sr-home-program__ctas .sr-btn {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }


    /* ════════ CAMP ART / HERO IMAGE ════════ */
    .sr-home-camp__art {
        height: 260px !important;
    }
    .sr-home-camp__art .sr-photo {
        position: absolute !important;
        inset: 0 !important;
    }


    /* ════════ BOX-SHADOW OFFSET: reduce on stacked layouts ════════ */
    .sr-card[style*="box-shadow:6px 6px"],
    .sr-card[style*="box-shadow: 6px 6px"],
    .sr-news-archive article[style*="box-shadow:6px 6px"] {
        box-shadow: 3px 3px 0 var(--sr-ink) !important;
    }


    /* ════════ SECTION VERTICAL SPACING: tighter on mobile ════════ */
    .sr-news-archive section[style*="padding"] {
        padding-top: clamp(40px, 8vw, 64px) !important;
        padding-bottom: clamp(40px, 8vw, 64px) !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────
   SMALL MOBILE  (≤ 480px)
   Final tightening: smallest screens get slightly more breathing room
   and the most impactful image ratios.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

    /* Crest grid: 2-col → 1-col on tiny phones */
    .sr-crest-grid,
    .sr-crest-grid--4,
    .sr-catalog__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Camp card photo: even taller aspect ratio for full-bleed feel */
    .sr-camp-card__photo,
    .sr-camp-card__photo-placeholder {
        aspect-ratio: 4 / 3 !important;
    }

    /* Camp facts strip: 1-col so values breathe */
    .sr-camp-card__facts {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Partner logo panel: full-height display */
    .sr-card div[style*="min-height:120px"] {
        min-height: 160px !important;
    }

    /* Programs stat strip: 2-col at smallest */
    .sr-home-program__facts {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Camp card body: tightest padding */
    .sr-camp-card__body { padding: 18px 16px 22px !important; }
    .sr-camp-card__title { font-size: 21px !important; }

    /* Card title universal tighten */
    .sr-card__title { font-size: 20px !important; }

    /* News article content padding */
    .sr-news-archive article > div[style*="padding"] {
        padding: 18px 16px !important;
    }

    /* Inline article image stacks: always square-ish for impact */
    .sr-page article[style*="display:grid"] img,
    .sr-page article[style*="display: grid"] img {
        aspect-ratio: 4 / 3 !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────
   PERFORMANCE: IMAGE LOADING
   Lazy-load all non-hero card images; hint to browser for compositing.
   ───────────────────────────────────────────────────────────────────── */

/* Smooth image rendering in all card contexts */
.sr-card img,
.sr-card__img,
.sr-camp-card__photo,
.sr-home-news__card img,
.sr-crest-card img,
.sr-card--media img,
.sr-news-archive article img {
    will-change: auto;
    image-rendering: auto;
    /* Prevent layout thrash while image loads */
    content-visibility: auto;
}

/* Image placeholder shimmer while loading */
.sr-card img[loading="lazy"],
.sr-camp-card__photo[loading="lazy"],
.sr-news-archive article img[loading="lazy"] {
    background: linear-gradient(
        90deg,
        var(--sr-parchment) 25%,
        var(--sr-cream) 50%,
        var(--sr-parchment) 75%
    );
    background-size: 200% 100%;
    animation: sr-shimmer 1.4s ease-in-out infinite;
}

@keyframes sr-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Remove shimmer once image is loaded (JS adds .is-loaded class) */
.sr-card img.is-loaded,
.sr-camp-card__photo.is-loaded {
    animation: none;
    background: none;
}

/* Prevent overflow from any residual fixed widths or inline styles */
.sr-card, .sr-camp-card, .sr-crest-card, .sr-home-news__card {
    max-width: 100%;
    box-sizing: border-box;
}

.sr-card img, .sr-camp-card img, .sr-crest-card img {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

/* ══ END MOBILE-FIRST CARD LAYOUT OVERHAUL v3.7.3 ════════════════════ */

/* ─── Activity cards grid (sr-camp.php) ───────────────────────────── */
.sr-activity-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 900px) {
    .sr-activity-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }
}
@media (max-width: 640px) {
    .sr-activity-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .sr-activity-cards-grid article img {
        aspect-ratio: 16 / 9 !important;
    }
    .sr-activity-cards-grid article div[style*="padding:24px"] {
        padding: 18px 16px !important;
    }
}


/* ── Camp session flyer download button ─────────────────────────────────── */
.sr-camp-flyer-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.sr-camp-flyer-btn svg {
    flex-shrink: 0;
    position: relative;
    top: -1px;
}