/* ==========================================================================
   Caring Hearts Training Academy
   Implementation of "Caring Hearts Training Academy.dc.html" (Claude Design).
   Design tokens and layout are taken from the design file; the responsive
   behaviour below is added so the layout holds up outside the canvas.
   ========================================================================== */

:root {
  --bg:          #f3f2f2;
  --panel:       #eae9e9;
  --ink:         #201e1d;
  --ink-2:       #2d2b2b;
  --ink-3:       #444141;
  --muted:       #605d5d;
  --red:         #ec3013;
  --red-hover:   #dd2b0f;
  --red-deep:    #ae1800;
  --red-darkest: #7c1405;
  --pale:        #ffe0d9;
  --coral:       #ff9783;
  --rule:        rgba(32, 30, 29, 0.4);
  --rule-soft:   rgba(32, 30, 29, 0.2);
  --on-dark:     #d7d3d3;
  --foot-muted:  #9b9797;

  --wrap: 1280px;
  --pad: 24px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}

p { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font-family: inherit; }

a { color: var(--red-deep); text-underline-offset: 3px; }
a:hover { color: var(--red); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
::selection { background: rgba(236, 48, 19, 0.3); }

/* --- accessibility helpers ------------------------------------------------ */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--bg);
  padding: 12px 18px; font-weight: 800; text-decoration: none;
}
.skip:focus { left: 8px; top: 8px; color: var(--bg); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- layout primitives ---------------------------------------------------- */

.page { min-height: 100vh; display: flex; flex-direction: column; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); width: 100%; }
main { flex: 1; }

.rule { height: 2px; background: var(--rule); }

.section { padding: 48px 0; }
.section--tight { padding: 32px 0; }
.section--head { padding: 48px 0 0; }
.section--flush-top { padding-top: 0; }

.eyebrow {
  font-size: 13px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 8px;
}
.eyebrow--red { color: var(--red-deep); }
.eyebrow--coral { color: var(--coral); }

.h1    { font-size: clamp(38px, 5.6vw, 66px); }
.h1-lg { font-size: clamp(42px, 6.4vw, 80px); }
.h2    { font-size: clamp(30px, 3.6vw, 44px); }
.h2-sm { font-size: clamp(26px, 3vw, 36px); }

.lede { font-size: 18px; margin: 20px 0 0; color: var(--ink-2); }
.body { font-size: 15px; color: var(--ink-2); }

.measure-18 { max-width: 18ch; }
.measure-20 { max-width: 20ch; }
.measure-22 { max-width: 22ch; }
.measure-24 { max-width: 24ch; }
.measure-26 { max-width: 26ch; }
.measure-46 { max-width: 46ch; }
.measure-50 { max-width: 50ch; }
.measure-52 { max-width: 52ch; }
.measure-54 { max-width: 54ch; }
.measure-56 { max-width: 56ch; }
.measure-58 { max-width: 58ch; }

.badge {
  display: inline-block; background: var(--pale); color: var(--red-darkest);
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 6px 12px;
}
.badge--sm { font-size: 11px; padding: 5px 10px; }

.panel { background: var(--panel); }
.dark  { background: var(--ink); color: var(--bg); }
.dark p { color: var(--on-dark); }

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center;
  border: 0; cursor: pointer; text-decoration: none;
  padding: 16px 22px; font-size: 15px; font-weight: 800;
  min-height: 48px; text-align: left;
}
.btn--sm { padding: 15px 20px; font-size: 14px; min-height: 46px; }

.btn--primary { background: var(--red); color: var(--bg); }
.btn--primary:hover  { background: var(--red-hover); color: var(--bg); }
.btn--primary:active { background: var(--red-deep); }

.btn--outline { border: 1px solid var(--rule); color: var(--ink); background: none; }
.btn--outline:hover { background: rgba(32, 30, 29, 0.07); color: var(--ink); }

.btn--light { background: var(--bg); color: var(--ink); }
.btn--light:hover { background: var(--ink); color: var(--bg); }

.btn--onred { background: var(--bg); color: var(--ink); }
.btn--onred:hover { background: #ffc4b8; color: var(--ink); }

.btn--outline-light { border: 1px solid rgba(243, 242, 242, 0.7); color: var(--bg); background: none; }
.btn--outline-light:hover { background: rgba(243, 242, 242, 0.15); color: var(--bg); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.linkish {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  color: var(--red-deep); font-size: 14px; font-weight: 800; text-align: left;
}
.linkish:hover { color: var(--red); }

/* --- grids ---------------------------------------------------------------
   The design draws dividing lines with border-left, which breaks as soon as
   a grid wraps. These use a 2px gap over a rule-coloured background instead,
   so the lines stay correct at every column count.
   ------------------------------------------------------------------------- */

.bgrid {
  display: grid; gap: 2px;
  background: var(--rule);
  border: 2px solid var(--rule);
  grid-template-columns: 1fr;
}
.bgrid--no-top { border-top: 0; }
.bgrid > * { background: var(--bg); min-width: 0; }
.bgrid > .panel { background: var(--panel); }
.bgrid > .dark { background: var(--ink); }

.ogrid {
  display: grid; gap: 2px;
  background: var(--rule);
  grid-template-columns: 1fr;
}
.ogrid > * { background: var(--bg); min-width: 0; padding: 32px 0; }

.cols-2, .cols-3, .cols-4 { display: grid; grid-template-columns: 1fr; gap: 0; }

/* --- announcement banner -------------------------------------------------- */

.banner {
  background: var(--ink); color: var(--bg);
  padding: 10px var(--pad);
  display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline;
}
.banner__text {
  font-weight: 800; font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--coral);
}
.banner__tel {
  color: var(--bg); font-size: 13px; font-weight: 600;
  text-decoration: none; border-bottom: 1px solid rgba(243, 242, 242, 0.5);
}
.banner__tel:hover { color: var(--bg); }

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

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(243, 242, 242, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(32, 30, 29, 0.18);
}
/* Without blur support a 55% wash is unreadable — fall back to near-opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgba(243, 242, 242, 0.96); }
}
/* Nav labels sit over video, so give them a touch more weight and contrast. */
.site-header .nav a:not(.btn) { font-weight: 700; }
.site-header__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 14px var(--pad);
  display: flex; gap: 14px 28px; align-items: center; justify-content: space-between;
}
.site-header__accent { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.site-header__accent > div { border-top: 2px solid var(--red); }

.brand {
  display: flex; align-items: center; gap: 12px;
  background: none; border: 0; padding: 0; cursor: pointer;
  text-align: left; text-decoration: none; color: inherit;
}
.brand img { width: 46px; height: auto; flex: none; }
.brand__name { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name b { font-weight: 800; font-size: 16px; letter-spacing: -0.01em; }
.brand__name span {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}

.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
/* :not(.btn) matters — a bare `.nav a` outranks `.btn--primary` on
   specificity and would strip the CTA's background. */
.nav a:not(.btn) {
  background: none; border: 0; border-bottom: 2px solid transparent;
  cursor: pointer; padding: 8px 10px; font-size: 13px; font-weight: 600;
  color: var(--ink); text-decoration: none;
}
.nav a:not(.btn):hover { background: rgba(32, 30, 29, 0.07); color: var(--ink); }
.nav a:not(.btn)[aria-current="page"] { border-bottom-color: var(--red); color: var(--red-deep); }
.nav .btn { margin-left: 8px; padding: 12px 18px; font-size: 14px; min-height: 44px; }

.nav-toggle {
  display: none; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--rule); cursor: pointer;
  padding: 10px 14px; font-size: 14px; font-weight: 800; color: var(--ink);
  min-height: 44px;
}
.nav-toggle:hover { background: rgba(32, 30, 29, 0.07); }

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

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink);
  min-height: clamp(520px, 78vh, 760px);
  display: flex; align-items: flex-end;
  /* Pull up behind the sticky header, then pad the space back so the
     min-height still describes the visible area. --header-h is measured
     in site.js because the header wraps differently per breakpoint. */
  margin-top: calc(-1 * var(--header-h, 76px));
  padding-top: var(--header-h, 76px);
}
.hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
  z-index: -2; pointer-events: none;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(22,20,20,0.92) 0%, rgba(22,20,20,0.72) 38%, rgba(22,20,20,0.28) 70%, rgba(22,20,20,0.35) 100%),
    linear-gradient(to right, rgba(22,20,20,0.75) 0%, rgba(22,20,20,0.15) 65%, transparent 100%);
}
.hero__inner { padding-top: 64px; padding-bottom: 52px; color: #fff; }
.hero__h1 {
  font-size: clamp(34px, 5vw, 62px); font-weight: 800;
  line-height: 1.06; letter-spacing: -0.02em;
  margin: 18px 0 0; max-width: 17ch; color: #fff;
  text-wrap: balance;
}
.hero__lede {
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5;
  margin: 18px 0 0; max-width: 52ch; color: rgba(255,255,255,0.88);
}
.hero__cta { margin-top: 30px; }
.hero__meta {
  margin: 22px 0 0; font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.badge--glow {
  background: rgba(236,48,19,0.92); color: #fff;
  backdrop-filter: blur(2px);
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg { display: none; }
  .hero { background: var(--ink) url("hero-poster.jpg") center 35% / cover; }
}

/* --- photos --------------------------------------------------------------- */

figure { margin: 0; }
.ph img, .ph video { width: 100%; height: auto; }

.map {
  display: block; width: 100%; height: 100%; min-height: 320px;
  border: 0; background: var(--panel);
}
.map--sm { min-height: 190px; height: 190px; border: 1px solid var(--rule); }
.ph--cover img { height: 280px; object-fit: cover; }
.ph--short img { height: 220px; object-fit: cover; }
.ph--wide img { height: 340px; object-fit: cover; }
.gallery-wide { grid-column: 1 / -1; }
figcaption { font-size: 11px; margin-top: 4px; color: rgba(32, 30, 29, 0.55); }
.bgrid figcaption { padding: 8px 12px; margin-top: 0; }

/* --- stats strip ---------------------------------------------------------- */

.stats { border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule); }
.stats__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 2px; background: var(--rule);
}
.stats__grid > div { background: var(--bg); padding: 24px 20px; min-width: 0; }
.stats__n { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.stats__n--red { color: var(--red); }
.stats__l { font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 8px; }

/* --- schedule cards ------------------------------------------------------- */

.orient-strip {
  background: var(--ink); color: var(--bg); padding: 20px 24px; margin-top: 28px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline;
}
.orient-strip__label {
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--coral);
}
.orient-strip__date { font-size: 20px; font-weight: 800; }

.orient-block { background: var(--red); color: var(--bg); padding: 28px; }
.orient-block__label {
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.orient-block__date {
  font-size: clamp(26px, 3.4vw, 40px); font-weight: 800;
  line-height: 1.12; letter-spacing: -0.015em; margin: 10px 0 0;
}

.sched { padding: 28px; }
.sched__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: baseline; }
.sched__range { font-size: 20px; font-weight: 800; margin: 14px 0 0; }
.sched__begins { font-size: 13px; font-weight: 600; color: var(--muted); margin: 4px 0 0; }
.sched__rule { height: 2px; background: var(--rule); margin: 20px 0; }
.sched__list { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.sched__row { display: flex; gap: 14px; }
.sched__wk { font-weight: 800; color: var(--red-deep); flex: none; width: 28px; white-space: nowrap; }

.sched--lg { padding: 32px; }
.sched--lg .sched__range { font-size: 22px; margin: 16px 0 0; }
.sched--lg .sched__rule { margin: 22px 0; }
.sched--lg .sched__list { gap: 12px; font-size: 16px; }
.sched--lg .sched__wk { width: 62px; }

/* --- link cards ----------------------------------------------------------- */

.linkcard {
  padding: 26px; background: var(--bg); color: var(--ink);
  text-decoration: none; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.linkcard:hover { background: var(--pale); color: var(--ink); }
.linkcard__kicker {
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--red-deep);
}
.linkcard__title { font-size: 20px; font-weight: 800; }
.linkcard__meta { font-size: 14px; color: var(--ink-3); }
.linkcard--sm { padding: 24px; gap: 6px; }
.linkcard--sm .linkcard__title { font-size: 18px; }

/* --- product cards -------------------------------------------------------- */

.product { padding: 26px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.product p { flex: 1; }
.product__price {
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--red-deep);
}

/* --- numbered lists ------------------------------------------------------- */

.numlist { border-top: 2px solid var(--rule); margin: 0; padding: 0; list-style: none; }
.numlist li {
  padding: 14px 0; border-bottom: 1px solid var(--rule-soft);
  display: flex; gap: 14px; font-size: 16px;
}
.numlist li:last-child { border-bottom: 2px solid var(--rule); }
.numlist b { font-weight: 800; color: var(--red-deep); flex: none; }

.reqlist { border-top: 2px solid var(--rule); margin: 0; padding: 0; list-style: none; }
.reqlist li {
  display: flex; gap: 18px; align-items: baseline;
  padding: 20px 0; border-bottom: 2px solid var(--rule);
}
.reqlist b { font-size: 20px; font-weight: 800; color: var(--red); flex: none; }
.reqlist span { font-size: 18px; font-weight: 600; }

/* --- hours breakdown ------------------------------------------------------ */

.hours { border: 2px solid var(--rule); }
.hours > div { padding: 22px; background: var(--panel); }
.hours > div + div { border-top: 2px solid var(--rule); }
.hours__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: baseline; }
.hours__n { font-weight: 800; color: var(--red-deep); }

/* --- payment plan --------------------------------------------------------- */

.plan-row { display: flex; gap: 18px; align-items: baseline; padding: 16px 0; border-bottom: 2px solid var(--rule); }
.plan-row:first-of-type { padding-top: 0; }
.plan-row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.plan-row b { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; flex: none; width: 88px; }
.plan-row span { font-size: 15px; color: var(--ink-2); }
.plan__price { font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; margin: 0; }
.plan__warn { margin: 22px 0 0; font-size: 14px; font-weight: 600; color: var(--red-deep); }

/* --- FAQ ------------------------------------------------------------------ */

.faq { border-top: 2px solid var(--rule); }
.faq__item { border-bottom: 2px solid var(--rule); }
.faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  gap: 16px; background: none; border: 0; padding: 20px 0; cursor: pointer;
  text-align: left; font-size: 18px; font-weight: 800; color: var(--ink);
  min-height: 48px; letter-spacing: -0.015em;
}
.faq__q:hover { color: var(--red-deep); }
.faq__sign { font-weight: 800; color: var(--red); font-size: 22px; flex: none; }
.faq__a { margin: 0; padding: 0 0 22px; font-size: 16px; color: var(--ink-2); max-width: 68ch; }
.faq__a[hidden] { display: none; }

/* --- forms ---------------------------------------------------------------- */

.form { display: flex; flex-direction: column; gap: 16px; }
.form--narrow { max-width: 480px; }
.form label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; margin-bottom: 5px; color: var(--ink-3);
}
.form input, .form select, .form textarea {
  width: 100%; border: 1px solid var(--rule); background: var(--bg);
  color: var(--ink); padding: 13px 14px; font-size: 14px; min-height: 46px;
}
.form textarea { resize: vertical; min-height: auto; }
.form--on-panel input, .form--on-panel select, .form--on-panel textarea { background: var(--bg); }
.form--on-bg input, .form--on-bg select, .form--on-bg textarea { background: var(--panel); }
.form .btn { width: 100%; justify-content: flex-start; }
.form--narrow .btn { width: auto; align-self: flex-start; }
.form__note { margin: 0; font-size: 12px; color: var(--muted); }

.form-card { background: var(--panel); border: 2px solid var(--rule); padding: 32px; min-width: 0; }

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

.rail > div { padding: 32px; }
.rail > div + div { border-top: 2px solid var(--rule); }
.rail__tel { font-size: 32px; font-weight: 800; letter-spacing: -0.015em; margin: 0; }
.rail__tel a { color: var(--ink); text-decoration: none; }
.rail__tel a:hover { color: var(--red-deep); }

/* --- CTA band ------------------------------------------------------------- */

.cta-band { background: var(--red); color: var(--bg); }
.cta-band__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 48px var(--pad);
  display: grid; grid-template-columns: 1fr; gap: 28px; align-items: end;
}
.cta-band__h {
  font-size: clamp(30px, 4.4vw, 54px); font-weight: 800;
  line-height: 1.08; letter-spacing: -0.02em; margin: 0; max-width: 22ch;
}
.cta-band__p { font-size: 17px; margin: 14px 0 0; max-width: 40ch; }

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

.site-footer { background: var(--ink); color: var(--on-dark); }
.site-footer__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 48px var(--pad) 24px;
  display: grid; grid-template-columns: 1fr; gap: 32px;
}
.site-footer h6 {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--foot-muted); margin: 0 0 14px;
}
.site-footer__brand { display: flex; align-items: center; gap: 12px; }
.site-footer__brand img { width: 44px; height: auto; flex: none; }
.site-footer__brand span { font-size: 16px; font-weight: 800; color: var(--bg); letter-spacing: -0.01em; }
.site-footer__blurb { margin: 16px 0 0; font-size: 14px; max-width: 32ch; }
.site-footer__list { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.site-footer__list a {
  color: var(--on-dark); font-size: 14px; font-weight: 600; text-decoration: none;
}
.site-footer__list a:hover { color: var(--coral); }
.site-footer__contact {
  display: flex; flex-direction: column; gap: 10px;
  font-size: 14px; font-weight: 600; line-height: 1.5;
}
.site-footer__contact a { color: var(--on-dark); text-decoration: none; }
.site-footer__contact a:hover { color: var(--coral); }
.site-footer__contact address { font-style: normal; font-weight: 400; }
.site-footer__legal {
  max-width: var(--wrap); margin: 0 auto;
  padding: 20px var(--pad);
  border-top: 2px solid rgba(215, 211, 211, 0.25);
  font-size: 13px; color: var(--foot-muted);
}
.break { word-break: break-word; }

/* --- routing -------------------------------------------------------------- */

.view[hidden] { display: none; }

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (max-width: 899px) {
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg);
    border-bottom: 2px solid var(--rule);
    padding: 8px var(--pad) 16px;
  }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) { padding: 14px 4px; font-size: 15px; border-bottom: 1px solid var(--rule-soft); }
  .nav a:not(.btn)[aria-current="page"] { border-bottom-color: var(--red); }
  .nav .btn { margin: 12px 0 0; justify-content: center; }
  .nav-toggle { display: inline-flex; }
  .site-header__inner { position: relative; flex-wrap: nowrap; }
}

@media (min-width: 640px) {
  .stats__grid { grid-template-columns: repeat(4, 1fr); }
  .stats__grid > div { padding: 28px 24px; }
  /* Flush the outer stats to the page margin so they line up with headings. */
  .stats__grid > div:first-child { padding-left: 0; }
  .stats__grid > div:last-child  { padding-right: 0; }
}

@media (min-width: 760px) {
  .bgrid--2 { grid-template-columns: repeat(2, 1fr); }
  .bgrid--3 { grid-template-columns: repeat(2, 1fr); }
  .bgrid--4 { grid-template-columns: repeat(2, 1fr); }
  .ogrid--3 { grid-template-columns: repeat(2, 1fr); }
  .cols-2  { grid-template-columns: repeat(2, 1fr); }
  .cta-band__inner { grid-template-columns: 1fr auto; gap: 32px; }
  .site-footer__inner { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {
  .section { padding: 56px 0; }
  .bgrid--3 { grid-template-columns: repeat(3, 1fr); }
  .bgrid--4 { grid-template-columns: repeat(4, 1fr); }
  .ogrid--3 { grid-template-columns: repeat(3, 1fr); }
  .cols-3 { grid-template-columns: repeat(3, 1fr); }
  .site-footer__inner { grid-template-columns: repeat(4, 1fr); }

  /* Flush the outer columns to the page margin, as the design does. */
  .ogrid { background: transparent; gap: 0; }
  .ogrid > * { padding: 32px 24px; position: relative; }
  .ogrid > * + *::before {
    content: ""; position: absolute; left: -1px; top: 0; bottom: 0;
    width: 2px; background: var(--rule);
  }
  .ogrid > :first-child { padding-left: 0; }
  .ogrid > :last-child  { padding-right: 0; }

  .split { display: grid; grid-template-columns: 1fr 1fr; }
  .split > :first-child { padding: 32px 32px 32px 0; min-width: 0; }
  .split > :last-child {
    padding: 32px 0 32px 32px; min-width: 0;
    border-left: 2px solid var(--rule);
  }
  .split--contact > :first-child { padding-right: 32px; }
}

/* A .bgrid paints dividers as gaps over a rule-coloured background, so a
   partly-filled last row would show as a dark block. Only the 2-column band
   can strand a lone item; at 3 columns .gallery-wide handles its own span. */
@media (min-width: 760px) and (max-width: 1039px) {
  .bgrid--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 1039px) {
  .split > * { padding: 32px 0; min-width: 0; }
  .split > * + * { border-top: 2px solid var(--rule); }
}