/* ==========================================================================
   Sac CSL — Centerly · THEME
   --------------------------------------------------------------------------
   Every rule is scoped under .sc-site (a body class added in PHP) so nothing
   leaks into the Divi builder UI. Layout hangs off Divi 5's RETAINED front-end
   classes (.et_pb_section / .et_pb_row / .et_pb_column / .et_pb_module) plus
   our own .sc-* className hooks set on the blocks.

   Divi 5 dropped the fractional column classes (.et_pb_column_1_2 etc.), so
   nothing here sizes a column by them — widths come from grid + :has().
   ========================================================================== */

/* ---------------------------------------------------------------- reset -- */
.sc-site,
.sc-site * { box-sizing: border-box; }

.sc-site {
  background: var(--sc-bg);
  color: var(--sc-ink);
  font-family: var(--sc-font-body);
  font-size: var(--sc-fs-md);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.sc-site img { max-width: 100%; height: auto; display: block; }

.sc-site a { color: var(--sc-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sc-site a:hover { color: var(--sc-primary-deep); }

.sc-site :focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
  border-radius: var(--sc-r-sm);
}

/* Divi wraps sections and rows in hard-coded gutters; we take spacing back.
   What we deliberately do NOT touch is how Divi sizes its own columns — no
   width, no display on .et_pb_row. Divi 5 dropped the fractional column
   classes (.et_pb_column_1_2 and friends), so overriding either one here is
   how a Divi 5 layout silently collapses. */
.sc-site .et_pb_section { padding: 0; background: transparent; }
.sc-site .et_pb_row {
  width: min(var(--sc-wrap), 100% - var(--sc-sp-12));
  max-width: none;
  margin-inline: auto;
  padding: 0;
}
/* Row/column layout is ours, deterministically.
   Divi 5.10.1 DOES still emit the fractional column classes (.et_pb_column_1_4
   and friends — verified in the DOM), but it leaves the row display:block and
   the columns float:none, so columns stack unless something lays them out.
   Rather than guess at Divi's intent, the row is a flex container here and each
   fraction gets an explicit basis. Nothing depends on Divi's own layout CSS. */
.sc-site .et_pb_row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--sc-sp-6);
}
.sc-site .et_pb_column {
  float: none !important;
  margin: 0 !important;
  min-width: 0;
  width: auto !important;
  display: flex;
  flex-direction: column;
  gap: var(--sc-sp-6);
}
.sc-site .et_pb_column_4_4 { flex: 1 1 100%; }
.sc-site .et_pb_column_1_2 { flex: 1 1 calc(50%     - var(--sc-sp-6) * 1 / 2); }
.sc-site .et_pb_column_1_3 { flex: 1 1 calc(33.3333% - var(--sc-sp-6) * 2 / 3); }
.sc-site .et_pb_column_2_3 { flex: 1 1 calc(66.6666% - var(--sc-sp-6) * 1 / 3); }
.sc-site .et_pb_column_1_4 { flex: 1 1 calc(25%     - var(--sc-sp-6) * 3 / 4); }
.sc-site .et_pb_column_3_4 { flex: 1 1 calc(75%     - var(--sc-sp-6) * 1 / 4); }

@media (max-width: 1024px) {
  .sc-site .et_pb_column_1_4,
  .sc-site .et_pb_column_1_3 { flex: 1 1 calc(50% - var(--sc-sp-6) / 2); }
}
@media (max-width: 700px) {
  .sc-site .et_pb_column_1_2,
  .sc-site .et_pb_column_1_3,
  .sc-site .et_pb_column_1_4,
  .sc-site .et_pb_column_2_3,
  .sc-site .et_pb_column_3_4 { flex: 1 1 100%; }
}
.sc-site .et_pb_module { margin-bottom: 0; }

/* Consecutive grid rows read as one grid, so they share the column gutter. */
.sc-site .sc-grid-row + .sc-grid-row { margin-top: var(--sc-sp-6); }

/* The hero-canvas module carries no layout — it paints behind the section. */
.sc-site .sc-hero-fx { position: absolute; inset: 0; pointer-events: none; }

/* ------------------------------------------------------------ typography - */
.sc-site h1, .sc-site h2, .sc-site h3, .sc-site h4 {
  font-family: var(--sc-font-display);
  text-wrap: balance;
  margin: 0;
  color: var(--sc-ink);
}
.sc-site h1 {
  font-weight: var(--sc-display-weight);
  font-size: var(--sc-fs-hero);
  line-height: .95;
  letter-spacing: var(--sc-display-track);
}
.sc-site h2 {
  font-weight: var(--sc-h2-weight);
  font-size: var(--sc-fs-h2);
  line-height: 1.04;
  letter-spacing: calc(var(--sc-display-track) * .8);
}
.sc-site h3 {
  font-weight: var(--sc-h2-weight);
  font-size: var(--sc-fs-h3);
  line-height: 1.18;
  letter-spacing: calc(var(--sc-display-track) * .6);
}
.sc-site p { margin: 0 0 1.1em; max-width: var(--sc-measure); }
.sc-site p:last-child { margin-bottom: 0; }
.sc-site .sc-lede { font-size: clamp(1.02rem, 1.6vw, 1.22rem); color: var(--sc-ink-2); }
.sc-site .sc-mute { color: var(--sc-ink-mute); }

/* numbers line up wherever they stack */
.sc-site .sc-num, .sc-site table td, .sc-site .sc-stat b { font-variant-numeric: tabular-nums; }

/* eyebrow — a labelled marker, used only where the label is real information */
.sc-site .sc-eyebrow {
  font-family: var(--sc-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sc-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--sc-sp-3);
  max-width: none;
}
.sc-site .sc-eyebrow::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sc-primary);
  box-shadow: 0 0 14px var(--sc-primary);
  flex: 0 0 auto;
}
.sc-dir-a .sc-eyebrow::before { width: 26px; height: 1px; border-radius: 0; box-shadow: none; opacity: .6; }
.sc-dir-c .sc-eyebrow::before { display: none; }
.sc-site .sc-eyebrow--center { justify-content: center; }

/* ---------------------------------------------------------------- rhythm - */
.sc-site .sc-sec { padding-block: clamp(76px, 11vh, 150px); position: relative; }
.sc-site .sc-sec--tight { padding-block: clamp(48px, 7vh, 90px); }
.sc-site .sc-sec--band { background: var(--sc-bg-2); border-block: 1px solid var(--sc-line); }
.sc-site .sc-sec--invert {
  background: var(--sc-invert-bg);
  color: var(--sc-invert-ink);
}
.sc-site .sc-sec--invert h1,
.sc-site .sc-sec--invert h2,
.sc-site .sc-sec--invert h3 { color: var(--sc-invert-ink); }
.sc-site .sc-sec--invert p { color: var(--sc-invert-mute); }
.sc-site .sc-sec--invert .sc-eyebrow { color: var(--sc-accent); }
.sc-site .sc-sec--invert .sc-eyebrow::before { background: var(--sc-accent); box-shadow: 0 0 14px var(--sc-accent); }

.sc-site .sc-stack   { display: flex; flex-direction: column; gap: var(--sc-sp-6); }
.sc-site .sc-stack-8 { display: flex; flex-direction: column; gap: var(--sc-sp-8); }
.sc-site .sc-center  { text-align: center; }
.sc-site .sc-center p, .sc-site .sc-center h2 { margin-inline: auto; }

/* Two-up split: fluid, no fractional column classes involved. */
.sc-site .sc-split {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 900px) { .sc-site .sc-split { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- buttons */
/* divi/button prints a wrapper div carrying our className, with the real <a>
   inside it. So the class is a hook on the wrapper and the styling lands on
   the anchor — writing it the other way round styles an invisible box. */
.sc-site .sc-btns { display: flex; flex-wrap: wrap; gap: var(--sc-sp-3); }
.sc-site .sc-btns--center { justify-content: center; }
.sc-site .et_pb_button_module_wrapper { display: flex; }
.sc-site .sc-btn--center { justify-content: center; }
.sc-dir-b .sc-hero .et_pb_button_module_wrapper { justify-content: center; }

.sc-site .sc-btn > .et_pb_button,
.sc-site .sc-btn > a,
.sc-site .et_pb_promo .et_pb_button,
.sc-site a.sc-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sc-font-body);
  font-size: .93rem;
  font-weight: 600;
  line-height: 1;
  padding: 15px 28px;
  min-height: 44px;
  border-radius: var(--sc-btn-radius);
  background: var(--sc-primary);
  color: var(--sc-on-primary);
  border: 1px solid var(--sc-primary);
  text-decoration: none;
  transition: transform var(--sc-t-slow) var(--sc-ease),
              box-shadow var(--sc-t-slow) var(--sc-ease),
              background var(--sc-t-base), color var(--sc-t-base), border-color var(--sc-t-base);
}
.sc-site .sc-btn > .et_pb_button:hover,
.sc-site .sc-btn > a:hover,
.sc-site .et_pb_promo .et_pb_button:hover,
.sc-site a.sc-btn:hover {
  color: var(--sc-on-primary);
  transform: translateY(calc(-2px * var(--sc-motion)));
  box-shadow: var(--sc-shadow-3);
}
.sc-site .sc-btn--sm > .et_pb_button,
.sc-site a.sc-btn--sm { padding: 10px 20px; min-height: 0; font-size: .85rem; }

.sc-site .sc-btn--ghost > .et_pb_button,
.sc-site .sc-btn--ghost > a,
.sc-site a.sc-btn--ghost {
  background: transparent;
  color: var(--sc-ink);
  border-color: var(--sc-line);
  box-shadow: none;
}
.sc-site .sc-btn--ghost > .et_pb_button:hover,
.sc-site .sc-btn--ghost > a:hover,
.sc-site a.sc-btn--ghost:hover {
  background: var(--sc-primary-soft);
  border-color: var(--sc-primary);
  color: var(--sc-ink);
  box-shadow: none;
}
.sc-site .sc-btn--accent > .et_pb_button,
.sc-site a.sc-btn--accent {
  background: var(--sc-accent);
  border-color: var(--sc-accent);
  color: var(--sc-on-accent);
}
.sc-site .sc-sec--invert .sc-btn--ghost > .et_pb_button { color: var(--sc-invert-ink); border-color: var(--sc-invert-line); }
.sc-site .sc-sec--invert .sc-btn--ghost > .et_pb_button:hover { background: rgba(255, 255, 255, .08); border-color: var(--sc-invert-ink); }
.sc-site .sc-sec--invert .et_pb_promo .et_pb_button {
  background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-on-accent);
}

/* Direction C prints rather than glows. */
.sc-dir-c .sc-btn > .et_pb_button,
.sc-dir-c a.sc-btn,
.sc-dir-c .et_pb_promo .et_pb_button {
  font-family: var(--sc-font-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sc-dir-c .sc-btn > .et_pb_button:hover,
.sc-dir-c a.sc-btn:hover { transform: translate(calc(-2px * var(--sc-motion)), calc(-2px * var(--sc-motion))); }

/* ------------------------------------------------------------------ hero - */
.sc-site .sc-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.sc-site .sc-hero .sc-hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2;
  display: block;
}
.sc-site .sc-hero .sc-hero-wash {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.sc-dir-b .sc-hero .sc-hero-wash {
  background:
    radial-gradient(120% 70% at 50% 108%, rgba(79, 163, 232, .18), transparent 62%),
    radial-gradient(90% 60% at 12% -10%, rgba(0, 108, 180, .26), transparent 60%),
    radial-gradient(80% 55% at 92% 4%, rgba(232, 163, 61, .14), transparent 62%);
}
.sc-dir-a .sc-hero .sc-hero-wash {
  background: linear-gradient(to bottom,
    rgba(231, 237, 234, .92) 0%, rgba(231, 237, 234, 0) 34%,
    rgba(231, 237, 234, .28) 72%, rgba(231, 237, 234, .86) 100%);
}
.sc-dir-c .sc-hero { min-height: 0; padding-block: clamp(96px, 14vh, 170px) clamp(56px, 8vh, 96px); }
.sc-dir-c .sc-hero .sc-hero-wash {
  opacity: .5;
  background-image: radial-gradient(rgba(222, 78, 38, .5) 1px, transparent 1.2px);
  background-size: 5px 5px;
  -webkit-mask-image: radial-gradient(80% 70% at 78% 22%, #000, transparent 70%);
  mask-image: radial-gradient(80% 70% at 78% 22%, #000, transparent 70%);
}

.sc-site .sc-hero h1 { max-width: 16ch; }
.sc-site .sc-hero .et_pb_column { gap: var(--sc-sp-4); }
.sc-dir-b .sc-hero .et_pb_row { text-align: center; }
.sc-dir-b .sc-hero .et_pb_column { align-items: center; }
.sc-dir-b .sc-hero .sc-eyebrow { justify-content: center; }
.sc-dir-b .sc-hero .et_pb_module { width: 100%; }
.sc-dir-b .sc-hero .sc-svc { width: auto; margin-inline: auto; }
.sc-dir-b .sc-hero h1 {
  margin-inline: auto;
  background: linear-gradient(178deg, #FFF 8%, #C8DFF4 52%, #7FB8E8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sc-dir-b .sc-hero p, .sc-dir-b .sc-hero .sc-btns { margin-inline: auto; }
.sc-dir-b .sc-hero .sc-btns { justify-content: center; }
.sc-dir-a .sc-hero h1 em { font-style: italic; font-weight: 400; color: var(--sc-primary-deep); }
.sc-dir-c .sc-hero h1 .sc-ink2 { color: var(--sc-primary); }

/* Service chip — the one fact every first-time visitor came for. */
.sc-site .sc-svc {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 20px;
  padding: 14px 22px;
  border-radius: var(--sc-r-pill);
  background: var(--sc-surface);
  border: 1px solid var(--sc-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  max-width: none;
}
.sc-site .sc-svc b { font-weight: 700; font-size: .95rem; }
.sc-site .sc-svc span { font-size: .82rem; color: var(--sc-ink-mute); }
.sc-site .sc-svc::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sc-accent); box-shadow: 0 0 0 4px var(--sc-accent-soft);
}
.sc-dir-c .sc-svc { border-radius: 0; backdrop-filter: none; }

/* Stat strip */
.sc-site .sc-stats {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  font-size: .82rem; color: var(--sc-ink-mute); max-width: none;
}
.sc-dir-b .sc-hero .sc-stats { justify-content: center; }
.sc-site .sc-stats b { color: var(--sc-ink); font-weight: 700; }

/* --------------------------------------------------- cards (divi/blurb) -- */
/* Divi prints a blurb as
     .et_pb_blurb > .et_pb_blurb_content
        > .et_pb_main_blurb_image        (icon or image)
        > .et_pb_blurb_container
            > h4.et_pb_module_header
            > .et_pb_blurb_description
   Our className lands on the outermost div. Everything below styles Divi's own
   inner elements, and pairs each one with a bare tag selector so the rules
   still hold if Divi renames an inner class. */

.sc-site .sc-card {
  background: var(--sc-surface);
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-card-radius);
  padding: var(--sc-sp-8);
  box-shadow: var(--sc-shadow-1);
  position: relative;
  overflow: hidden;
  height: 100%;
  transition: transform var(--sc-t-slow) var(--sc-ease),
              box-shadow var(--sc-t-slow) var(--sc-ease),
              border-color var(--sc-t-slow);
}
.sc-site .sc-card:hover {
  transform: translateY(calc(-5px * var(--sc-motion)));
  box-shadow: var(--sc-shadow-2);
  border-color: var(--sc-primary);
}
.sc-dir-b .sc-card { background: linear-gradient(165deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012)); }
.sc-dir-c .sc-card:hover { transform: none; }

.sc-site .sc-card--quiet { padding: var(--sc-sp-6); }
.sc-site .sc-card--quiet:hover { transform: none; border-color: var(--sc-line); box-shadow: var(--sc-shadow-1); }

/* Blurb internals — shared by every blurb-based component below. */
.sc-site .et_pb_blurb_content { display: flex; flex-direction: column; gap: var(--sc-sp-3); height: 100%; }
.sc-site .et_pb_blurb_container { display: flex; flex-direction: column; gap: var(--sc-sp-2); }
.sc-site .et_pb_blurb .et_pb_module_header,
.sc-site .et_pb_blurb h4 {
  font-family: var(--sc-font-display);
  font-weight: var(--sc-h2-weight);
  font-size: var(--sc-fs-h3);
  line-height: 1.18;
  letter-spacing: calc(var(--sc-display-track) * .6);
  color: var(--sc-ink);
  margin: 0;
}
.sc-site .et_pb_blurb .et_pb_blurb_description { color: var(--sc-ink-mute); }
.sc-site .et_pb_blurb .et_pb_blurb_description p { font-size: .94rem; margin-bottom: .7em; }
.sc-site .et_pb_blurb .et_pb_blurb_description p:last-child { margin-bottom: 0; }

/* The icon slot carries the sequence number on numbered lists. */
.sc-site .et_pb_main_blurb_image { margin: 0; }
.sc-site .et_pb_main_blurb_image .et-pb-icon,
.sc-site .et_pb_main_blurb_image .et_pb_only_icon {
  font-family: var(--sc-font-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--sc-accent);
  display: inline-block;
}
.sc-site .et_pb_main_blurb_image img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }

/* Title-only cards (the past-events wall) shouldn't leave an empty body gap. */
.sc-site .sc-card--title-only .et_pb_blurb_description:empty { display: none; }
.sc-site .sc-card--title-only .et_pb_module_header { font-size: 1.05rem; }

/* ---------------------------------------------------- numbered principles - */
/* Numbered because the Principles ARE a taught sequence — the numbers carry
   information the reader uses, not decoration. */
/* The hairlines are per-item rings sitting in a 1px gap, not a coloured
   container showing through — so a row that does not fill (10 principles in a
   4-up grid) leaves plain background, never an orphaned empty cell. */
/* Numbered sequences use CSS counters, not Divi's icon field. The icon field
   takes an index into Divi's icon FONT (%%123%%) — passing a numeral there
   renders an arbitrary glyph, not the number. Counters also survive an editor
   reordering or deleting a module, which a hard-coded number would not. */
.sc-site .sc-numbered { counter-reset: sc-n; }
.sc-site .sc-numbered .sc-row-item,
.sc-site .sc-numbered .sc-seq-item { counter-increment: sc-n; }
.sc-site .sc-numbered .sc-row-item .et_pb_blurb_content::before,
.sc-site .sc-numbered .sc-seq-item .et_pb_blurb_container::before {
  content: counter(sc-n, decimal-leading-zero);
  font-family: var(--sc-font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--sc-accent);
  flex: 0 0 auto;
}
.sc-site .sc-numbered .sc-seq-item .et_pb_blurb_container::before {
  color: var(--sc-primary-deep);
  margin-bottom: var(--sc-sp-3);
}

.sc-site .sc-seq .et_pb_row { gap: 1px; }
.sc-site .sc-seq .sc-grid-row { margin-bottom: 1px; }
/* A hairline stack of beliefs, not a set of separated cards. */
.sc-site .sc-rows { gap: 1px; }
.sc-site .sc-rows-row { margin-bottom: 1px; }
.sc-site .sc-seq-item {
  background: var(--sc-bg);
  box-shadow: 0 0 0 1px var(--sc-line);
  padding: 30px 26px 34px;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: background var(--sc-t-slow);
}
.sc-site .sc-seq-item::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 2px;
  background: linear-gradient(90deg, var(--sc-primary), var(--sc-accent));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--sc-t-slow) var(--sc-ease);
}
.sc-site .sc-seq-item:hover { background: var(--sc-bg-2); }
.sc-site .sc-seq-item:hover::after { transform: scaleX(1); }
.sc-site .sc-seq-item .et_pb_main_blurb_image .et-pb-icon { color: var(--sc-primary-deep); }

/* Row list variant: the icon slot becomes a left gutter holding the number. */
.sc-site .sc-row-item {
  background: var(--sc-surface);
  box-shadow: 0 0 0 1px var(--sc-line);
  padding: 24px 28px;
  transition: background var(--sc-t-base);
}
.sc-site .sc-row-item:hover { background: var(--sc-surface-2); }
.sc-site .sc-row-item .et_pb_blurb_content {
  flex-direction: row; align-items: baseline; gap: 20px;
}
.sc-site .sc-row-item .et_pb_main_blurb_image { flex: 0 0 2ch; }
.sc-site .sc-row-item .et_pb_module_header {
  font-family: var(--sc-font-body); font-weight: 700; font-size: 1.06rem; letter-spacing: -.01em;
}
.sc-dir-c .sc-row-item .et_pb_module_header { font-family: var(--sc-font-display); font-weight: 400; }
.sc-site .sc-row-item .et_pb_blurb_description p { font-size: .93rem; }

/* ----------------------------------------------------- the year / almanac - */
/* A month is a blurb: the theme is the header, the month label and its Sunday
   list are the description. Dates ARE a sequence here, so they are set as one. */
.sc-site .sc-month {
  background: var(--sc-bg); box-shadow: 0 0 0 1px var(--sc-line);
  padding: 22px 22px 26px; height: 100%;
  transition: background var(--sc-t-base);
}
.sc-site .sc-month:hover { background: var(--sc-surface); }
.sc-site .sc-month .et_pb_blurb_container { flex-direction: column-reverse; gap: 0; }
.sc-site .sc-month .et_pb_module_header { margin: 8px 0 12px; font-size: 1.28rem; }
.sc-site .sc-month .sc-m {
  font-family: var(--sc-font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sc-accent); margin: 0; max-width: none;
}
.sc-site .sc-talks { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sc-line); }
.sc-site .sc-talks li {
  display: grid; grid-template-columns: 3.2em 1fr; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--sc-line); font-size: .88rem;
  color: var(--sc-ink-2);
}
.sc-site .sc-talks li:last-child { border-bottom: 0; }
.sc-site .sc-talks li span {
  font-family: var(--sc-font-mono); font-size: .72rem;
  color: var(--sc-primary); padding-top: 2px; font-variant-numeric: tabular-nums;
}

/* ── The month card with its printed bulletin cover ───────────────────────
   Their office designs a cover for every month's bulletin, and those twelve
   covers are the only artwork on the site that is genuinely *about* the
   themes. So the card leads with one: full-bleed across the top, the theme
   name and Sunday list beneath it.

   Divi renders the blurb as .et_pb_main_blurb_image + .et_pb_blurb_container,
   and the base .sc-month rule reverses that order (description above header)
   for the text-only case. A cover card wants the natural order back and the
   image out of its default 56px circle. */
.sc-site .sc-month--cover {
  padding: 0 0 22px;
  overflow: hidden;
  border-radius: var(--sc-card-radius);
  display: flex; flex-direction: column;
}
.sc-site .sc-month--cover .et_pb_main_blurb_image {
  margin: 0 0 18px; width: 100%; max-width: none;
}
.sc-site .sc-month--cover .et_pb_main_blurb_image img {
  width: 100%; height: auto;
  aspect-ratio: 244 / 281;
  object-fit: cover; object-position: top center;
  border-radius: 0;
  display: block;
  transition: transform var(--sc-t-slow, .6s) cubic-bezier(.2, .7, .2, 1);
  /* A broken image still paints its own background, so a cover that has not
     been pulled down yet shows a quiet tinted panel instead of a void. */
  background:
    linear-gradient(160deg, rgba(79, 163, 232, .16), rgba(232, 163, 61, .07)),
    var(--sc-surface-2);
}
.sc-site .sc-month--cover:hover .et_pb_main_blurb_image img { transform: scale(1.03); }
/* Same reading order the card always had — month label, talks, then the theme
   name. The cover is added above it; nothing else about the card moves. */
.sc-site .sc-month--cover .et_pb_blurb_container {
  flex-direction: column-reverse;
  padding-inline: 22px;
}

/* ------------------------------------------------------- CTA (divi/cta) -- */
/* Divi prints .et_pb_promo > .et_pb_promo_description (h2 + body) + button. */
.sc-site .sc-cta {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sc-sp-6);
}
.sc-site .sc-cta .et_pb_promo_description { display: flex; flex-direction: column; gap: var(--sc-sp-3); }
.sc-site .sc-cta .et_pb_module_header {
  font-family: var(--sc-font-display);
  font-weight: var(--sc-h2-weight);
  font-size: var(--sc-fs-h2);
  line-height: 1.04;
  letter-spacing: calc(var(--sc-display-track) * .8);
  margin: 0; max-width: 18ch; text-wrap: balance;
  color: var(--sc-ink);
}
.sc-site .sc-cta p { font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--sc-ink-2); }
.sc-site .sc-sec--invert .sc-cta .et_pb_module_header { color: var(--sc-invert-ink); }
.sc-site .sc-sec--invert .sc-cta p { color: var(--sc-invert-mute); }

/* Plain variant: a signpost mid-page, not a full-bleed appeal. */
.sc-site .sc-cta--plain .et_pb_module_header { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.sc-site .sc-cta--class {
  background: var(--sc-surface); border: 1px solid var(--sc-primary);
  border-radius: var(--sc-card-radius); padding: var(--sc-sp-8); max-width: 720px;
}
.sc-dir-b .sc-cta--class { background: var(--sc-primary-soft); }

/* ------------------------------------- testimonial (the founder's line) -- */
.sc-site .sc-quote-mod { text-align: center; }
.sc-site .sc-quote-mod .et_pb_testimonial_description_inner p {
  font-family: var(--sc-font-display);
  font-weight: 300;
  font-size: clamp(1.35rem, 3.5vw, 2.6rem);
  line-height: 1.26;
  letter-spacing: calc(var(--sc-display-track) * .8);
  max-width: 24ch;
  margin: 0 auto var(--sc-sp-6);
  text-wrap: balance;
  color: var(--sc-ink);
}
.sc-dir-a .sc-quote-mod .et_pb_testimonial_description_inner p,
.sc-dir-c .sc-quote-mod .et_pb_testimonial_description_inner p { font-style: italic; }
.sc-site .sc-quote-mod .et_pb_testimonial_author {
  font-family: var(--sc-font-mono); font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sc-ink-mute);
  display: block; font-style: normal;
}
.sc-site .sc-quote-mod .et_pb_testimonial_meta {
  font-family: var(--sc-font-mono); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink-mute);
  margin: 4px 0 0; opacity: .7;
}
.sc-site .sc-quote-mod .et_pb_testimonial_portrait { display: none; }

/* --------------------------------------------------------------- quote --- */
.sc-site .sc-quote { text-align: center; }
.sc-site .sc-quote blockquote {
  font-family: var(--sc-font-display);
  font-weight: 300;
  font-size: clamp(1.35rem, 3.5vw, 2.6rem);
  line-height: 1.26;
  letter-spacing: calc(var(--sc-display-track) * .8);
  max-width: 24ch;
  margin: var(--sc-sp-6) auto var(--sc-sp-4);
  text-wrap: balance;
  color: var(--sc-ink);
  border: 0; padding: 0;
}
.sc-dir-a .sc-quote blockquote, .sc-dir-c .sc-quote blockquote { font-style: italic; }
.sc-site .sc-quote cite {
  font-family: var(--sc-font-mono); font-style: normal;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sc-ink-mute);
}

/* ------------------------------------------------------------- accordion - */
.sc-site .sc-faq { border-top: 1px solid var(--sc-line); max-width: 78ch; }
.sc-site .sc-faq details { border-bottom: 1px solid var(--sc-line); }
.sc-site .sc-faq summary {
  cursor: pointer; list-style: none; padding: 22px 44px 22px 0; position: relative;
  font-family: var(--sc-font-display); font-weight: var(--sc-h2-weight);
  font-size: 1.12rem; line-height: 1.34; color: var(--sc-ink);
  transition: color var(--sc-t-base);
}
.sc-site .sc-faq summary::-webkit-details-marker { display: none; }
.sc-site .sc-faq summary:hover { color: var(--sc-primary); }
.sc-site .sc-faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%;
  width: 12px; height: 2px; background: var(--sc-primary);
  box-shadow: 0 0 0 0 transparent;
  transition: transform var(--sc-t-base) var(--sc-ease);
}
.sc-site .sc-faq summary::before {
  content: ''; position: absolute; right: 11px; top: 50%; margin-top: -6px;
  width: 2px; height: 12px; background: var(--sc-primary);
  transition: transform var(--sc-t-base) var(--sc-ease), opacity var(--sc-t-base);
}
.sc-site .sc-faq details[open] summary::before { transform: rotate(90deg); opacity: 0; }
.sc-site .sc-faq .sc-faq-a { padding: 0 44px 24px 0; color: var(--sc-ink-mute); }
.sc-site .sc-faq .sc-faq-a p { max-width: 62ch; }

/* ------------------------------------------------------------- practices - */
.sc-site .sc-practice { border-top: 2px solid var(--sc-ink); padding-top: var(--sc-sp-4); }
.sc-site .sc-practice h3 { margin: 0 0 var(--sc-sp-2); }
.sc-site .sc-practice > p { color: var(--sc-ink-mute); }
.sc-site .sc-practice ul { margin: var(--sc-sp-4) 0 0; padding: 0; list-style: none; }
.sc-site .sc-practice li { padding: 10px 0; border-bottom: 1px solid var(--sc-line-soft); font-size: .94rem; }
.sc-site .sc-practice li b { color: var(--sc-ink); }

/* ------------------------------------------------------------ prose page - */
.sc-site .sc-prose { max-width: var(--sc-measure); }
.sc-site .sc-prose h2 { margin-top: var(--sc-sp-12); }
.sc-site .sc-prose h2:first-child { margin-top: 0; }
.sc-site .sc-prose h3 { margin-top: var(--sc-sp-8); margin-bottom: var(--sc-sp-2); }
.sc-site .sc-prose ul { padding-left: 1.2em; }
.sc-site .sc-prose li { margin-bottom: .5em; }

/* ---------------------------------------- people (divi/team-member) ------ */
/* Divi prints .et_pb_team_member > .et_pb_team_member_image
                                  > .et_pb_team_member_description
                                      > h4.et_pb_module_header
                                      > p.et_pb_member_position
                                      > body                                  */
.sc-site .sc-person {
  border-top: 1px solid var(--sc-line);
  padding-top: var(--sc-sp-6);
  height: 100%;
}
.sc-site .sc-person .et_pb_team_member_image {
  margin: 0 0 var(--sc-sp-4); width: 84px;
}
.sc-site .sc-person .et_pb_team_member_image img {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  filter: grayscale(.25);
  transition: filter var(--sc-t-slow);
}
.sc-site .sc-person:hover .et_pb_team_member_image img { filter: none; }
.sc-site .sc-person .et_pb_module_header,
.sc-site .sc-person h4 {
  font-family: var(--sc-font-display);
  font-weight: var(--sc-h2-weight);
  font-size: var(--sc-fs-h3);
  letter-spacing: calc(var(--sc-display-track) * .6);
  color: var(--sc-ink);
  margin: 0 0 2px;
}
.sc-site .sc-person .et_pb_member_position {
  font-family: var(--sc-font-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sc-accent);
  margin: 0 0 var(--sc-sp-3); max-width: none;
}
.sc-site .sc-person p:not(.et_pb_member_position) { font-size: .94rem; color: var(--sc-ink-mute); }

/* The board roster is name + role only — no portrait, tighter rule. */
.sc-site .sc-person--compact { border-top-width: 2px; border-top-color: var(--sc-primary); padding-top: var(--sc-sp-3); }
.sc-site .sc-person--compact .et_pb_module_header { font-size: 1.02rem; }
.sc-site .sc-person--compact .et_pb_member_position { margin-bottom: 0; }

.sc-site .sc-subhead { margin-top: var(--sc-sp-12); margin-bottom: var(--sc-sp-4); }

/* -------------------------------------------- FAQ (divi/accordion) ------ */
/* Divi prints .et_pb_accordion > .et_pb_accordion_item (also .et_pb_toggle,
   plus .et_pb_toggle_open / .et_pb_toggle_close) > h5.et_pb_toggle_title
   + .et_pb_toggle_content. Divi's own JS drives the open/close. */
.sc-site .sc-faq { max-width: 78ch; border-top: 1px solid var(--sc-line); }
.sc-site .sc-faq-item {
  border: 0;
  border-bottom: 1px solid var(--sc-line);
  background: transparent;
  padding: 0;
}
.sc-site .sc-faq-item .et_pb_toggle_title {
  cursor: pointer;
  position: relative;
  margin: 0;
  padding: 22px 44px 22px 0;
  font-family: var(--sc-font-display);
  font-weight: var(--sc-h2-weight);
  font-size: 1.12rem;
  line-height: 1.34;
  letter-spacing: calc(var(--sc-display-track) * .5);
  color: var(--sc-ink);
  transition: color var(--sc-t-base);
}
.sc-site .sc-faq-item .et_pb_toggle_title:hover { color: var(--sc-primary); }

/* A plus that becomes a minus. Divi's own icon font is suppressed so the
   control matches the rest of the site rather than Divi's default chevron. */
.sc-site .sc-faq-item .et_pb_toggle_title::before,
.sc-site .sc-faq-item .et_pb_toggle_title::after { font-family: inherit; }
.sc-site .sc-faq-item .et_pb_toggle_title::before {
  content: ''; position: absolute; right: 6px; top: 50%;
  width: 12px; height: 2px; background: var(--sc-primary);
  transform: none; margin: 0;
}
.sc-site .sc-faq-item .et_pb_toggle_title::after {
  content: ''; position: absolute; right: 11px; top: 50%; margin-top: -6px;
  width: 2px; height: 12px; background: var(--sc-primary);
  transition: transform var(--sc-t-base) var(--sc-ease), opacity var(--sc-t-base);
}
.sc-site .et_pb_toggle_open.sc-faq-item .et_pb_toggle_title::after {
  transform: rotate(90deg); opacity: 0;
}
.sc-site .sc-faq-item .et_pb_toggle_content {
  padding: 0 44px 24px 0;
  color: var(--sc-ink-mute);
}
.sc-site .sc-faq-item .et_pb_toggle_content p { max-width: 62ch; font-size: .95rem; }

/* ------------------------------------------- form (divi/contact-form) ---- */
/* Divi prints .et_pb_contact_form_container > .et_pb_contact > form >
   .et_pb_contact_field > label + input/textarea. Layout is inlined structurally
   rather than hoped for, because form CSS is where themes fight hardest. */
.sc-site .sc-form { max-width: 640px; }
.sc-site .sc-form .et_pb_contact_form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-sp-4);
}
.sc-site .sc-form .et_pb_contact_field { display: block; width: auto; padding: 0; }
.sc-site .sc-form .et_pb_contact_field_last,
.sc-site .sc-form .et_pb_contact_field.et_pb_contact_field_last { grid-column: 1 / -1; }
.sc-site .sc-form .et_pb_contact_field[data-fullwidth="on"],
.sc-site .sc-form .et_pb_contact_field.sc-field--full { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .sc-site .sc-form .et_pb_contact_form { grid-template-columns: 1fr; }
}
.sc-site .sc-form label,
.sc-site .sc-form .et_pb_contact_form_label {
  display: block;
  font-family: var(--sc-font-mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sc-ink-mute);
  margin-bottom: var(--sc-sp-2);
}
.sc-site .sc-form input[type="text"],
.sc-site .sc-form input[type="email"],
.sc-site .sc-form input[type="tel"],
.sc-site .sc-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 13px 16px;
  font-family: var(--sc-font-body);
  font-size: 1rem;
  color: var(--sc-ink);
  background: var(--sc-surface);
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-r-md);
  transition: border-color var(--sc-t-base), box-shadow var(--sc-t-base);
}
.sc-dir-b .sc-form input, .sc-dir-b .sc-form textarea { background: rgba(255, 255, 255, .05); }
.sc-site .sc-form textarea { min-height: 148px; resize: vertical; }
.sc-site .sc-form input::placeholder,
.sc-site .sc-form textarea::placeholder { color: var(--sc-ink-mute); opacity: .7; }
.sc-site .sc-form input:focus,
.sc-site .sc-form textarea:focus {
  outline: none;
  border-color: var(--sc-primary);
  box-shadow: 0 0 0 3px var(--sc-primary-soft);
}
.sc-site .sc-form .et_pb_contact_submit,
.sc-site .sc-form button[type="submit"] {
  grid-column: 1 / -1; justify-self: start;
  min-height: 48px; padding: 15px 28px;
  font-family: var(--sc-font-body); font-size: .93rem; font-weight: 600;
  border-radius: var(--sc-btn-radius);
  background: var(--sc-primary); color: var(--sc-on-primary);
  border: 1px solid var(--sc-primary); cursor: pointer;
  transition: transform var(--sc-t-slow) var(--sc-ease), box-shadow var(--sc-t-slow) var(--sc-ease);
}
.sc-site .sc-form .et_pb_contact_submit:hover {
  transform: translateY(calc(-2px * var(--sc-motion)));
  box-shadow: var(--sc-shadow-3);
}
.sc-site .sc-form .et_pb_contact_error_text { color: var(--sc-critical); font-size: .85rem; }
.sc-site .sc-form .et-pb-contact-message { grid-column: 1 / -1; color: var(--sc-ink-2); }

/* ---------------------------------------------- practice / vision items -- */
.sc-site .sc-practice-title { position: sticky; top: 92px; }
@media (max-width: 980px) { .sc-site .sc-practice-title { position: static; } }
.sc-site .sc-practice-item {
  border-top: 1px solid var(--sc-line-soft); padding-top: var(--sc-sp-3);
}
.sc-site .sc-practice-item .et_pb_module_header { font-size: 1rem; font-family: var(--sc-font-body); font-weight: 700; }
.sc-site .sc-practice-item .et_pb_blurb_description p { font-size: .92rem; }

.sc-site .sc-vision-item {
  border-left: 2px solid var(--sc-primary); padding: 2px 0 2px var(--sc-sp-4); height: 100%;
}
.sc-site .sc-vision-item .et_pb_module_header {
  font-family: var(--sc-font-mono); font-size: .74rem; letter-spacing: .12em;
  color: var(--sc-accent); font-variant-numeric: tabular-nums;
}
.sc-site .sc-vision-item .et_pb_blurb_description p { font-size: .98rem; color: var(--sc-ink-2); }

/* ------------------------------------------------------------------ give - */
.sc-site .sc-give-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sc-sp-4); }
/* Centerly's own giving form, dropped in by [centerly_give]. Give it room and
   let it inherit the site's tokens rather than fighting it. */
.sc-site .centerly-give,
.sc-site .centerly-give * { font-family: var(--sc-font-body); }
.sc-site .centerly-give {
  --centerly-primary: var(--sc-primary);
  --centerly-radius: var(--sc-btn-radius);
  background: var(--sc-surface);
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-card-radius);
  padding: var(--sc-sp-8);
  max-width: 560px;
}

/* ----------------------------------------------------------------- header - */
.sc-site .sc-head {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--sc-bg) 82%, transparent);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--sc-t-base), background var(--sc-t-base);
}
.sc-site .sc-head.is-stuck { border-bottom-color: var(--sc-line); }
.sc-site .sc-head .sc-head-in {
  width: min(var(--sc-wrap), 100% - var(--sc-sp-12));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-sp-6);
  /* Grown with the logo — the bar has to clear 128px plus breathing room. */
  min-height: 164px;
}
.sc-site .sc-brand {
  font-family: var(--sc-font-display); font-weight: var(--sc-h2-weight);
  font-size: 1.06rem; letter-spacing: -.02em; text-decoration: none; color: var(--sc-ink);
  display: flex; align-items: baseline; gap: 9px; white-space: nowrap;
}
.sc-site .sc-brand small {
  font-family: var(--sc-font-mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sc-ink-mute); font-weight: 500;
}
.sc-site .sc-nav { display: flex; align-items: center; gap: var(--sc-sp-6); }
.sc-site .sc-nav a {
  font-size: .88rem; font-weight: 500; text-decoration: none; color: var(--sc-ink-2);
  transition: color var(--sc-t-fast);
}
.sc-site .sc-nav a:hover, .sc-site .sc-nav a[aria-current="page"] { color: var(--sc-primary); }
@media (max-width: 940px) { .sc-site .sc-nav { display: none; } }

/* ----------------------------------------------------------------- footer - */
.sc-site .sc-foot {
  background: var(--sc-bg-2);
  border-top: 1px solid var(--sc-line);
  padding-block: var(--sc-sp-16) var(--sc-sp-12);
}
.sc-site .sc-foot-grid {
  width: min(var(--sc-wrap), 100% - var(--sc-sp-12)); margin-inline: auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sc-sp-8);
}
.sc-site .sc-foot h4 {
  font-family: var(--sc-font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sc-primary); margin: 0 0 var(--sc-sp-3);
}
.sc-site .sc-foot p, .sc-site .sc-foot a { font-size: .9rem; line-height: 1.7; color: var(--sc-ink-mute); text-decoration: none; }
.sc-site .sc-foot a:hover { color: var(--sc-primary); }
.sc-site .sc-foot-bot {
  width: min(var(--sc-wrap), 100% - var(--sc-sp-12)); margin: var(--sc-sp-12) auto 0;
  padding-top: var(--sc-sp-6); border-top: 1px solid var(--sc-line);
  font-size: .78rem; color: var(--sc-ink-mute);
}

/* ------------------------------------------------------------- scroll rev - */
/* Two hooks for the same behaviour: [data-rv] on markup we author inside a
   text module, and .sc-rv-N on Divi blocks, which cannot carry a data attribute
   through their attribute JSON. */
.sc-site [data-rv],
.sc-site [class*="sc-rv-"] {
  opacity: 0;
  transform: translateY(calc(22px * var(--sc-motion)));
  transition: opacity var(--sc-t-reveal) var(--sc-ease), transform var(--sc-t-reveal) var(--sc-ease);
}
.sc-site [data-rv].is-in,
.sc-site [class*="sc-rv-"].is-in { opacity: 1; transform: none; }
.sc-site [data-rv="1"], .sc-site .sc-rv-1 { transition-delay: calc(90ms * var(--sc-motion)); }
.sc-site [data-rv="2"], .sc-site .sc-rv-2 { transition-delay: calc(180ms * var(--sc-motion)); }
.sc-site [data-rv="3"], .sc-site .sc-rv-3 { transition-delay: calc(270ms * var(--sc-motion)); }
.sc-site [data-rv="4"], .sc-site .sc-rv-4 { transition-delay: calc(360ms * var(--sc-motion)); }

/* Hero entrance runs on load, not on scroll. */
.sc-site .sc-hero [data-in] { animation: sc-rise 1.4s var(--sc-ease) both; }
.sc-site .sc-hero [data-in="1"] { animation-delay: .18s; }
.sc-site .sc-hero [data-in="2"] { animation-delay: .36s; }
.sc-site .sc-hero [data-in="3"] { animation-delay: .54s; }
.sc-site .sc-hero [data-in="4"] { animation-delay: .72s; }
@keyframes sc-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .sc-site [data-rv],
  .sc-site [class*="sc-rv-"] { opacity: 1 !important; transform: none !important; }
  .sc-site .sc-hero [data-in] { animation: none !important; }
  .sc-site * { transition-duration: 1ms !important; }
}

/* ------------------------------------------------------------- utilities - */
.sc-site .sc-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--sc-primary); color: var(--sc-on-primary);
  padding: 12px 20px; border-radius: 0 0 var(--sc-r-md) 0; text-decoration: none;
}
.sc-site .sc-skip:focus { left: 0; }
.sc-site .sc-rule { height: 1px; background: linear-gradient(90deg, transparent, var(--sc-line), transparent); }
.sc-site .sc-hairline { height: 1px; background: var(--sc-line); }

/* Small screens: reclaim the gutter Divi's row would eat. */
@media (max-width: 700px) {
  .sc-site .et_pb_row,
  .sc-site .sc-head .sc-head-in,
  .sc-site .sc-foot-grid,
  .sc-site .sc-foot-bot { width: min(var(--sc-wrap), 100% - var(--sc-sp-8)); }
}

/* Print: the almanac direction is the one people actually print. */
@media print {
  .sc-site .sc-head, .sc-site .sc-hero-canvas, .sc-site .sc-hero-wash, .sc-site .sc-btns { display: none !important; }
  .sc-site { background: #fff; color: #000; }
  .sc-site [data-rv] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   DIVI OVERRIDES — last in the cascade on purpose
   --------------------------------------------------------------------------
   Everything above styles our own markup. This block exists only to counter
   what Divi itself emits, and each rule is here because it was observed
   failing in the DOM on a live 5.10.1 install — not defensively guessed.
   ========================================================================== */

/* --- hero canvas containing block ---------------------------------------
   Divi gives .et_pb_row, .et_pb_column and .et_pb_text_inner position:relative.
   The canvas is inside a text module, so `inset:0` resolved against
   .et_pb_text_inner — a box with height 0 — and the canvas rendered 1px tall.
   Making those ancestors static hands the containing block back to .sc-hero. */
.sc-site .sc-hero { position: relative; }
.sc-site .sc-hero > .et_pb_row,
.sc-site .sc-hero .et_pb_column,
.sc-site .sc-hero-fx,
.sc-site .sc-hero-fx .et_pb_text_inner { position: static; }
.sc-site .sc-hero .sc-hero-canvas,
.sc-site .sc-hero .sc-hero-wash {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
/* Deliberately NOT position:relative — that would make the row the canvas's
   containing block again and box the animation into the content width. The
   canvas sits at z-index -2, so the row stacks above it while staying static. */

/* --- buttons -------------------------------------------------------------
   Divi sets colour and border on .et_pb_button with !important, so an
   ordinary rule loses no matter how correct it is. It also stretches the
   anchor to the column and appends an arrow via ::after. */
.sc-site a.et_pb_button.sc-btn {
  width: fit-content;
  color: var(--sc-on-primary) !important;
  background-color: var(--sc-primary) !important;
  border-color: var(--sc-primary) !important;
  border-width: 1px !important;
  border-radius: var(--sc-btn-radius) !important;
  padding: 15px 28px !important;
  font-family: var(--sc-font-body) !important;
  font-size: .93rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
.sc-site a.et_pb_button.sc-btn::after,
.sc-site a.et_pb_button.sc-btn::before { display: none !important; }
.sc-site a.et_pb_button.sc-btn:hover {
  background-color: var(--sc-primary) !important;
  transform: translateY(calc(-2px * var(--sc-motion)));
  box-shadow: var(--sc-shadow-3);
}
.sc-site a.et_pb_button.sc-btn--ghost {
  background-color: transparent !important;
  color: var(--sc-ink) !important;
  border-color: var(--sc-line) !important;
}
.sc-site a.et_pb_button.sc-btn--ghost:hover {
  background-color: var(--sc-primary-soft) !important;
  border-color: var(--sc-primary) !important;
  box-shadow: none;
}
.sc-site .sc-sec--invert a.et_pb_button.sc-btn {
  background-color: var(--sc-accent) !important;
  border-color: var(--sc-accent) !important;
  color: var(--sc-on-accent) !important;
}

/* Buttons share one column, so lay that column out as a row. */
.sc-site .sc-hero-btns .et_pb_column {
  flex-direction: row; flex-wrap: wrap; gap: var(--sc-sp-3); align-items: center;
}
.sc-dir-b .sc-hero-btns .et_pb_column { justify-content: center; }
.sc-site .et_pb_button_module_wrapper { display: flex; margin: 0 !important; }
.sc-site .sc-hero-btns .et_pb_button_module_wrapper { flex: 0 0 auto; width: auto; }

/* --- Divi's own spacing --------------------------------------------------
   Divi ships per-module-id margin rules and 4% section padding. Our columns own
   the vertical rhythm via gap, so those are zeroed — but NOT with a blanket
   !important on .et_pb_section, which would also outrank .sc-sec's own
   padding-block and crush every section flush against the next. */
.sc-site .et_pb_module { margin-bottom: 0 !important; }
.sc-site .et_pb_row { padding: 0 !important; }
.sc-site .et_pb_section { padding: 0; }

/* Section rhythm restated with !important so it survives Divi's per-id rules. */
.sc-site .sc-sec        { padding-block: clamp(84px, 11vh, 150px) !important; }
.sc-site .sc-sec--tight { padding-block: clamp(52px, 7vh, 92px) !important; }
.sc-site .sc-hero       { padding-block: 0 !important; }

/* --- testimonial ---------------------------------------------------------
   Divi's testimonial is a white card with a circular quote badge. Ours is a
   full-bleed pull quote, so the card has to be dismantled, not tinted. */
.sc-site .et_pb_testimonial {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.sc-site .et_pb_testimonial::before,
.sc-site .et_pb_testimonial::after { display: none !important; content: none !important; }
.sc-site .et_pb_testimonial .et_pb_testimonial_description { margin: 0 !important; }
.sc-site .et_pb_testimonial .et_pb_testimonial_description_inner p { color: var(--sc-ink) !important; }
.sc-site .et_pb_testimonial .et_pb_testimonial_author { color: var(--sc-primary) !important; }
.sc-site .et_pb_testimonial .et_pb_testimonial_meta { color: var(--sc-ink-mute) !important; }

/* --- CTA -----------------------------------------------------------------
   .et_pb_promo ships Divi's blue panel. The section behind it already carries
   our gradient, so the module itself must be transparent. */
.sc-site .et_pb_promo {
  background-color: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.sc-site .et_pb_promo .et_pb_module_header,
.sc-site .et_pb_promo h2 { color: var(--sc-ink) !important; }
.sc-site .sc-sec--invert .et_pb_promo .et_pb_module_header { color: var(--sc-invert-ink) !important; }
.sc-site .sc-sec--invert .et_pb_promo p { color: var(--sc-invert-mute) !important; }
.sc-site .sc-cta--class .et_pb_promo { padding: 0 !important; }

/* ==========================================================================
   HEADER / FOOTER — rendered by header.php + footer.php
   Divi's own header markup never renders because the child theme overrides
   those templates outright, so nothing here has to fight it.
   ========================================================================== */

.sc-site #page-container { padding-top: 0 !important; }
.sc-site #main-content { background: transparent; }

/* Their wordmark is three lines of script inside a 552×236 file, so the lower
   two lines are small relative to the whole. At 128px they read at a glance,
   which is the size Larry chose. */
.sc-site .sc-brand-mark { height: 128px; width: auto; display: block; }
@media (max-width: 700px) { .sc-site .sc-brand-mark { height: 84px; } }
.sc-site .sc-brand-word {
  font-family: var(--sc-font-display);
  font-weight: var(--sc-h2-weight);
  font-size: 1.12rem;
  letter-spacing: -.02em;
  color: var(--sc-ink);
}
.sc-site .sc-brand { text-decoration: none; }
.sc-site .sc-brand:hover .sc-brand-word { color: var(--sc-primary); }

/* wp_nav_menu output */
.sc-site .sc-nav-list {
  display: flex; align-items: center; gap: var(--sc-sp-6);
  list-style: none; margin: 0; padding: 0;
}
.sc-site .sc-nav-list li { position: relative; margin: 0; }
.sc-site .sc-nav-list a {
  font-size: .88rem; font-weight: 500; text-decoration: none;
  color: var(--sc-ink-2); transition: color var(--sc-t-fast); white-space: nowrap;
}
.sc-site .sc-nav-list a:hover,
.sc-site .sc-nav-list .current-menu-item > a,
.sc-site .sc-nav-list .current_page_item > a { color: var(--sc-primary); }

/* One level of dropdown, opened on hover and on keyboard focus. */
.sc-site .sc-nav-list .sub-menu {
  position: absolute; top: calc(100% + 12px); left: -16px; z-index: 20;
  min-width: 216px; padding: 10px; margin: 0; list-style: none;
  background: var(--sc-surface-2); border: 1px solid var(--sc-line);
  border-radius: var(--sc-r-md); box-shadow: var(--sc-shadow-2);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--sc-t-base), transform var(--sc-t-base), visibility var(--sc-t-base);
}
.sc-dir-b .sc-nav-list .sub-menu { background: #0D1B2A; }
.sc-site .sc-nav-list li:hover > .sub-menu,
.sc-site .sc-nav-list li:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: none;
}
.sc-site .sc-nav-list .sub-menu a {
  display: block; padding: 9px 12px; border-radius: var(--sc-r-sm); font-size: .87rem;
}
.sc-site .sc-nav-list .sub-menu a:hover { background: var(--sc-primary-soft); }

/* Burger — hidden until the nav no longer fits. */
.sc-site .sc-burger {
  display: none; flex-direction: column; gap: 5px; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
}
.sc-site .sc-burger span {
  display: block; height: 2px; width: 22px; background: var(--sc-ink);
  transition: transform var(--sc-t-base) var(--sc-ease), opacity var(--sc-t-base);
}
.sc-site .sc-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sc-site .sc-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sc-site .sc-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.sc-site .sc-mobile { border-top: 1px solid var(--sc-line); background: var(--sc-bg); }
.sc-site .sc-mobile[hidden] { display: none; }
.sc-site .sc-mobile-list,
.sc-site .sc-mobile-list .sub-menu {
  list-style: none; margin: 0;
  padding: var(--sc-sp-4) max(24px, calc((100vw - var(--sc-wrap)) / 2));
}
.sc-site .sc-mobile-list .sub-menu { padding: 0 0 0 var(--sc-sp-4); }
.sc-site .sc-mobile-list a {
  display: block; padding: 12px 0; text-decoration: none;
  color: var(--sc-ink); font-size: 1rem; border-bottom: 1px solid var(--sc-line-soft);
}
.sc-site .sc-mobile-list a:hover { color: var(--sc-primary); }

@media (max-width: 1040px) {
  .sc-site .sc-nav { display: none; }
  .sc-site .sc-burger { display: flex; }
  .sc-site .sc-head-cta { display: none; }
}

/* Footer links inherit the token palette rather than Divi's blue. */
.sc-site .sc-foot a { color: var(--sc-ink-mute); text-decoration: none; }
.sc-site .sc-foot a:hover { color: var(--sc-primary); text-decoration: underline; }
.sc-site .sc-foot p { max-width: none; }

/* A display heading sized for a full-width row is far too large inside a third
   or a quarter. Step it down by the column it actually lives in — the type
   scale should answer to its container, not to the viewport alone. */
.sc-site .et_pb_column_1_3 h2,
.sc-site .et_pb_column_2_3 h2 { font-size: clamp(1.7rem, 2.6vw, 2.5rem); }
.sc-site .et_pb_column_1_4 h2 { font-size: clamp(1.5rem, 2vw, 2rem); }
.sc-site .et_pb_column_1_3 h1,
.sc-site .et_pb_column_1_4 h1 { font-size: clamp(2rem, 3.4vw, 3rem); }

/* --- hero background plate ------------------------------------------------
   Three stacked layers behind the hero, deepest first:
     -3  photographic plate, desaturated and dimmed
     -2  particle canvas
     -1  colour wash that ties the plate to the palette
   The plate is deliberately quiet: the type and the particles are the subject,
   and a hero photo that competes with either is worse than no photo at all.
   Swap the file for Sac CSL's own dawn/mountain banner once the images land —
   nothing but the URL needs to change. */
.sc-site .sc-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -3;
  background-image: url('../images/hero-banner.jpg');
  background-size: cover;
  background-position: center 42%;
  opacity: .60;
}
/* A dark floor under the plate so the section never lightens, whatever photo
   is dropped in, and the copy keeps its contrast ratio. */
.sc-site .sc-hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(7,14,23,.72) 0%, rgba(7,14,23,.34) 34%, rgba(7,14,23,.86) 78%, rgba(7,14,23,.97) 100%),
    radial-gradient(105% 75% at 50% 44%, rgba(7,14,23,.10) 22%, rgba(7,14,23,.70) 100%),
    linear-gradient(180deg, rgba(17,48,82,.36) 0%, rgba(7,14,23,0) 60%);
}
/* Direction A and C keep their own treatments — the plate is B's. */
.sc-dir-a .sc-hero::before, .sc-dir-a .sc-hero::after,
.sc-dir-c .sc-hero::before, .sc-dir-c .sc-hero::after { display: none; }

@media (prefers-reduced-motion: no-preference) {
  /* A very slow drift gives the plate depth without reading as movement. */
  .sc-site .sc-hero::before { animation: sc-plate 60s ease-in-out infinite alternate; }
}
@keyframes sc-plate {
  from { transform: scale(1.06) translate3d(-.6%, -.4%, 0); }
  to   { transform: scale(1.12) translate3d(.6%, .4%, 0); }
}

/* Divi centres the promo's text but our .sc-cta stacks its children from the
   start edge, which left the button orphaned against a centred heading. */
.sc-site .sc-sec--invert .sc-cta,
.sc-site .sc-center .sc-cta { align-items: center; text-align: center; }
.sc-site .sc-sec--invert .sc-cta .et_pb_module_header { margin-inline: auto; }
.sc-site .sc-sec--invert .sc-cta p { margin-inline: auto; }

/* --- picture cards (blurb with a real photo) ------------------------------
   Divi puts the blurb image in .et_pb_main_blurb_image; the default 56px round
   avatar suits a person but not an event poster, so photo cards get a
   full-bleed 16:9 crop above the title. */
.sc-site .sc-photo-card { padding: 0; overflow: hidden; }
.sc-site .sc-photo-card .et_pb_main_blurb_image { margin: 0; width: 100%; }
.sc-site .sc-photo-card .et_pb_image_wrap { display: block; width: 100%; }
.sc-site .sc-photo-card .et_pb_main_blurb_image img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 0; display: block;
  transition: transform var(--sc-t-slow) var(--sc-ease);
}
.sc-site .sc-photo-card:hover .et_pb_main_blurb_image img {
  transform: scale(calc(1 + .03 * var(--sc-motion)));
}
.sc-site .sc-photo-card .et_pb_blurb_container { padding: var(--sc-sp-6); }
.sc-site .sc-photo-card .et_pb_blurb_description:empty { display: none; }
.sc-site .sc-photo-card .et_pb_blurb_content { gap: 0; }

/* Portraits: real people, so a round crop and a size that reads at a glance. */
.sc-site .sc-person .et_pb_team_member_image img { width: 84px; height: 84px; }
.sc-site .sc-person--compact .et_pb_team_member_image,
.sc-site .sc-person--compact .et_pb_team_member_image img { width: 56px; height: 56px; }

/* ==========================================================================
   INTERIOR PAGE HEADER — .sc-hero--band
   --------------------------------------------------------------------------
   Not the home hero repeated, and not their Wix banner strip repeated either.
   The home page earns the full performance: full viewport, centred, particles
   converging into the word. Every other page gets a compact header that reads
   as the same design system without re-spending that attention —
     · about a third of the height, so content starts above the fold
     · LEFT aligned, against the home hero's centre — the asymmetry is the
       signal that says "you are inside the site now, not at its front door"
     · no canvas, no photo; one horizon rule of light carries the family
       resemblance for the cost of a single gradient
   ========================================================================== */

.sc-site .sc-hero--band {
  /* No fallback. Every page names its own picture below; a page that names
     none simply gets the gradient header. */
  --sc-band-img: none;
  min-height: clamp(280px, 38vh, 420px);
  /* flex-direction MUST be column: a section holds multiple .et_pb_row
     children, and a bare `display:flex` lays them out side by side and kills
     their margin-inline:auto centring — heading, buttons and service chip end
     up in one horizontal line jammed against the viewport edge. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-block: clamp(48px, 8vh, 96px) clamp(36px, 5vh, 64px) !important;
  background:
    radial-gradient(90% 130% at 12% 0%, rgba(0, 108, 180, .22), transparent 62%),
    radial-gradient(80% 120% at 88% 10%, rgba(232, 163, 61, .10), transparent 60%),
    linear-gradient(180deg, #0C1723 0%, var(--sc-bg) 100%);
  overflow: hidden;
}
/* ── The page's own picture ────────────────────────────────────────────────
   Their Wix site heads each page with its own banner strip, and that
   page↔picture pairing is worth keeping — it is how their community knows
   where it is. What we do NOT keep is Wix's treatment: a separate blurred
   image band stacked above a separate title bar, two elements doing one job.
   Full-bleed behind the whole header was too much. These are warm
   cream-and-red photographs, and stretched across the band they turned a cool
   navy header brown and buried the horizon line — the header stopped looking
   like this site. So the picture is held to the right and masked out well
   before it reaches the type: the left side stays the clean gradient header
   that was there before, and their photograph is a presence beside it rather
   than a wash behind it.

   --sc-band-img is set per page below. Unset, ::before still paints nothing
   visible — a missing file can never leave a hole in the page. */
.sc-site .sc-hero--band::before {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
  display: block;
  background-image: var(--sc-band-img);
  background-size: cover;
  background-position: center right;
  opacity: .42;
  filter: saturate(.7);
  z-index: 0;
  /* Fades to nothing across its own left third, so there is no seam and no
     edge running down the middle of the header. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 38%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 38%, #000 100%);
  animation: sc-band-drift 1.6s cubic-bezier(.2, .7, .2, 1) both;
}

.sc-site .sc-hero--band { position: relative; }
.sc-site .sc-hero--band > * { position: relative; z-index: 1; }

@keyframes sc-band-drift {
  from { transform: scale(1.06); opacity: 0; }
  to   { transform: scale(1);    opacity: .42; }
}

/* Per-page bands, each the picture their live page carries.

   Our Culture, Shared Values and Welcome to CSL are deliberately absent. Their
   strips for those three have graphic text burned into the artwork — a "VALUES"
   word-mark, a 3D "CULTURE" word-mark, and a dated "2025 Global Theme" banner —
   which cannot be cropped out and would sit behind the page's own title. Those
   three keep the plain gradient header until replacement photographs exist. */
.sc-site .sc-band--about      { --sc-band-img: url('../images/bands/band-lotus-mural.jpg'); }
.sc-site .sc-band--believe    { --sc-band-img: url('../images/bands/band-teachings.jpg'); }
.sc-site .sc-band--principles { --sc-band-img: url('../images/bands/band-principles.jpg'); }
.sc-site .sc-band--practice   { --sc-band-img: url('../images/bands/band-principles.jpg'); }
.sc-site .sc-band--faq        { --sc-band-img: url('../images/bands/band-faq.jpg'); }
.sc-site .sc-band--sunday     { --sc-band-img: url('../images/bands/band-sunday.jpg'); }
.sc-site .sc-band--themes     { --sc-band-img: url('../images/bands/band-themes.jpg'); }
.sc-site .sc-band--classes    { --sc-band-img: url('../images/bands/band-classes.jpg'); }
.sc-site .sc-band--events     { --sc-band-img: url('../images/bands/band-events.jpg'); }
.sc-site .sc-band--outreach   { --sc-band-img: url('../images/bands/band-outreach.jpg'); }
.sc-site .sc-band--prayer     { --sc-band-img: url('../images/bands/band-prayer.jpg'); }
.sc-site .sc-band--give       { --sc-band-img: url('../images/bands/band-give.jpg'); }

@media (prefers-reduced-motion: reduce) {
  .sc-site .sc-hero--band::before { animation: none; opacity: .34; transform: none; }
}

/* The horizon: a hairline of light along the base of the header. It sweeps out
   from the left on load, which is the same gesture as the hero's particles
   resolving — one line instead of two thousand points. */
.sc-site .sc-hero--band::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; top: auto;
  height: 1px;
  background: linear-gradient(90deg,
    var(--sc-primary) 0%, rgba(79, 163, 232, .38) 34%, rgba(180, 204, 228, .20) 62%, transparent 100%);
  transform-origin: left;
  animation: sc-horizon 1.5s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes sc-horizon { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* Left aligned, and the title steps down from the home hero's scale. */
.sc-site .sc-hero--band .et_pb_row { text-align: left; }
.sc-site .sc-hero--band .et_pb_column { align-items: flex-start; gap: var(--sc-sp-3); }
.sc-site .sc-hero--band .sc-eyebrow { justify-content: flex-start; }
.sc-site .sc-hero--band h1 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  max-width: 18ch;
  margin-inline: 0;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--sc-ink);
}
.sc-site .sc-hero--band .sc-lede { margin-inline: 0; max-width: 56ch; }
.sc-site .sc-hero--band .sc-btns,
.sc-site .sc-hero--band .et_pb_button_module_wrapper { justify-content: flex-start; }
.sc-site .sc-hero--band .sc-svc { margin-inline: 0; }
.sc-site .sc-hero--band .et_pb_module { width: auto; }

@media (prefers-reduced-motion: reduce) {
  .sc-site .sc-hero--band::after { animation: none; }
}


/* Band header alignment: the heading sits left, so everything under it does.
   The dir-b centring rule targets .sc-hero-btns generally and would otherwise
   leave the buttons floating mid-width under a left-aligned title. */
.sc-site .sc-hero--band .sc-hero-btns .et_pb_column,
.sc-site .sc-hero--band .et_pb_button_module_wrapper { justify-content: flex-start; }
.sc-dir-b .sc-hero--band .sc-hero-btns .et_pb_column { justify-content: flex-start; }
.sc-site .sc-hero--band .sc-svc { margin-inline: 0; }
.sc-site .sc-hero--band .sc-stats { justify-content: flex-start; }


/* Footer base line: the centre's copyright at the start, the build credit at
   the end. Wraps to stacked on narrow screens rather than colliding. */
.sc-site .sc-foot-bot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sc-sp-3) var(--sc-sp-6);
}
.sc-site .sc-foot-bot p { margin: 0; font-size: .78rem; color: var(--sc-ink-mute); }
.sc-site .sc-built a {
  color: var(--sc-ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--sc-line);
  transition: color var(--sc-t-base), border-color var(--sc-t-base);
}
.sc-site .sc-built a:hover { color: var(--sc-primary); border-bottom-color: var(--sc-primary); }
@media (max-width: 620px) { .sc-site .sc-foot-bot { justify-content: flex-start; } }


/* ==========================================================================
   BUTTON STATES — every state a real, visible step
   The earlier hover rule repainted the base colour, so hovering did nothing,
   and it forced primary onto the accent button, flipping gold to blue.
   ========================================================================== */
.sc-site a.et_pb_button.sc-btn:hover,
.sc-site a.et_pb_button.sc-btn:focus-visible {
  background-color: var(--sc-primary-hover) !important;
  border-color: var(--sc-primary-hover) !important;
  color: var(--sc-on-primary) !important;
}
.sc-site a.et_pb_button.sc-btn:active { transform: translateY(0); filter: brightness(.94); }

.sc-site a.et_pb_button.sc-btn--ghost:hover,
.sc-site a.et_pb_button.sc-btn--ghost:focus-visible {
  background-color: var(--sc-primary-soft) !important;
  border-color: var(--sc-primary) !important;
  color: var(--sc-ink) !important;
}

/* The accent button stays accent on hover — it must not become the primary. */
.sc-site .sc-sec--invert a.et_pb_button.sc-btn:hover,
.sc-site a.et_pb_button.sc-btn--accent:hover,
.sc-site .sc-sec--invert .et_pb_promo .et_pb_button:hover,
.sc-site .sc-head-cta:hover {
  background-color: var(--sc-accent-hover) !important;
  border-color: var(--sc-accent-hover) !important;
  color: var(--sc-on-accent) !important;
}

/* The header Give button is the site's one standing CTA — accent, not primary. */
.sc-site a.sc-head-cta {
  background: var(--sc-accent) !important;
  border-color: var(--sc-accent) !important;
  color: var(--sc-on-accent) !important;
}

/* Focus must be visible on every button, not just on hover. */
.sc-site a.et_pb_button.sc-btn:focus-visible,
.sc-site .sc-form .et_pb_contact_submit:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
}

/* Divi ships its own hover transform/background on .et_pb_button; ours wins. */
.sc-site a.et_pb_button.sc-btn { transition:
  background-color var(--sc-t-base), border-color var(--sc-t-base), color var(--sc-t-base),
  transform var(--sc-t-slow) var(--sc-ease), box-shadow var(--sc-t-slow) var(--sc-ease) !important; }

/* Links in body copy need a visible affordance, not colour alone. */
.sc-site .et_pb_text a:not(.sc-btn),
.sc-site .sc-foot a { text-underline-offset: 3px; }
.sc-site .et_pb_text a:not(.sc-btn):hover { color: var(--sc-primary-hover); }

/* --- kill Divi's button arrow, on EVERY Divi button -----------------------
   Divi injects an arrow from its ETmodules icon font as ::after (content "5"),
   hidden at opacity 0 and revealed on hover, and simultaneously re-pads the
   button (padding-right ~2em, padding-left ~0.7em) to make room. The result is
   the glyph sliding over the label and the label jumping left.

   The earlier rule only matched .sc-btn, so the CTA and promo buttons — class
   et_pb_promo_button — kept the arrow. Scope it to .et_pb_button itself, and
   pin the padding across every state so nothing shifts on hover. */
.sc-site .et_pb_button::after,
.sc-site .et_pb_button::before,
.sc-site .et_pb_button:hover::after,
.sc-site .et_pb_button:hover::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.sc-site .et_pb_button,
.sc-site .et_pb_button:hover,
.sc-site .et_pb_button:focus,
.sc-site .et_pb_button:active {
  padding-left: 28px !important;
  padding-right: 28px !important;
}
.sc-site .sc-btn--sm,
.sc-site .sc-btn--sm:hover { padding-left: 20px !important; padding-right: 20px !important; }

/* Payment cards: the card and its button read as one unit, so the column gap
   between them closes and the button anchors to the card's foot. */
.sc-site .sc-pay-card { margin-bottom: 0; }
.sc-site .et_pb_column:has(> .sc-pay-card) { gap: var(--sc-sp-4); }

/* Content images from their own pages. */
.sc-site .sc-img img { border-radius: var(--sc-card-radius); width: 100%; height: auto; }
.sc-site .sc-img--wide img { aspect-ratio: 21 / 7; object-fit: cover; }
.sc-site .sc-img--soft img { aspect-ratio: 4 / 3; object-fit: cover; }
.sc-site .sc-img .et_pb_image_wrap { display: block; width: 100%; }

/* Class flyers are portrait artwork, not banners — contain rather than crop so
   nothing on the poster gets cut off, and give each class row breathing space. */
.sc-site .sc-img--flyer img {
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: var(--sc-card-radius);
  background: var(--sc-surface-2);
}
.sc-site .sc-class-row { align-items: center; }
.sc-site .sc-class-row + .sc-class-row { margin-top: var(--sc-sp-12); }

/* Half columns need the same treatment as thirds and quarters — I capped those
   two and left 1_2 on the full-width scale, so a class title in a half column
   rendered at hero size. */
.sc-site .et_pb_column_1_2 h2 { font-size: clamp(1.7rem, 2.8vw, 2.5rem); }
.sc-site .et_pb_column_1_2 h1 { font-size: clamp(2.1rem, 4vw, 3.4rem); }


/* ==========================================================================
   PICTURES THEY ALREADY OWN
   --------------------------------------------------------------------------
   Everything below places a specific picture from saccsl.org onto the page it
   belongs to. Sizes are chosen from the artwork, not from a grid: a payment
   mark is a small wordmark, a QR code is a square you point a phone at, an
   emblem is a circle, a bulletin cover is a portrait poster.
   ========================================================================== */

/* Square and PayPal marks sit at the head of their own card, at the size a
   wordmark is legible and no larger. The default blurb rule crops every image
   into a 56px circle, which turns a wordmark into a smear. */
.sc-site .sc-pay-card .et_pb_main_blurb_image {
  margin: 0 0 var(--sc-sp-4); width: auto;
}
.sc-site .sc-pay-card .et_pb_main_blurb_image img {
  width: auto; height: 34px;
  max-width: 140px;
  border-radius: 6px;
  object-fit: contain;
  background: #fff;
  padding: 5px 9px;
}