/* ==========================================================================
   Gutenberg bridge
   msdc.css was written against hand-authored markup. Core blocks emit their
   own elements and wrappers, so this file maps block output onto the same
   visual contract. It introduces no new design decisions: every value here is
   copied from an existing rule in msdc.css.
   ========================================================================== */

/* Groups are used as layout primitives; core's flow layout would otherwise add
   its own block-gap between them. Wrapped in :where() so these carry ZERO
   specificity: they still beat core's own :where(.is-layout-flow) rules on
   cascade order, but they lose to any real design-system rule. Without the
   :where(), this matched .sec-head and .note at equal specificity and — loading
   later than msdc.css — silently erased their bottom margins sitewide. */
/* Core emits, at specificity (0,1,0) because of the :root prefix:
     :root :where(.is-layout-flow) > :first-child { margin-block-start: 0 }
     :root :where(.is-layout-flow) > *           { margin-block-start: 24px }
   That staggers every group: first child flush, siblings pushed down 24px —
   which tilted the trust bar and made the first card in a grid taller.

   So this must match (0,1,0) and win on cascade order, NOT be :where()'d.
   It sets margin-block-START only. Leaving margin-block-end alone is what
   keeps .sec-head's 52px and .note's 34px bottom margins intact — those live
   in msdc.css, which also loads after core, so they win on their own. */
.wp-block-group{ margin-block-start:0; }

/* ---- Buttons: core/button puts the class on the wrapper, .btn belongs on the anchor. */
.wp-block-buttons.btn-row{ gap:14px; }
.wp-block-buttons .wp-block-button{ margin:0; }
.wp-block-button__link{
  display:inline-block; font-family:var(--font-ui); font-weight:600;
  font-size:.82rem; text-transform:uppercase; letter-spacing:.14em;
  padding:16px 30px; border:2px solid var(--accent); background:var(--accent);
  color:#fff; border-radius:var(--radius); cursor:pointer;
  transition:.18s ease; text-align:center; text-decoration:none;
  touch-action:manipulation;
}
.wp-block-button__link:hover{ background:var(--accent-dark); border-color:var(--accent-dark); text-decoration:none; transform:translateY(-2px); box-shadow:0 10px 24px var(--accent-glow); }
.wp-block-button.is-ghost .wp-block-button__link{ background:transparent; color:var(--accent); }
.wp-block-button.is-ghost .wp-block-button__link:hover{ background:var(--accent); color:#fff; }
.wp-block-button.is-quiet .wp-block-button__link{ background:transparent; border-color:var(--line); color:var(--text); }
.wp-block-button.is-quiet .wp-block-button__link:hover{ background:transparent; border-color:var(--accent); color:var(--accent); box-shadow:none; }
.sec-light .wp-block-button.is-quiet .wp-block-button__link{ border-color:#C9C4BE; color:var(--ink); }
.cta-band .wp-block-button__link{ background:#fff; color:var(--accent-dark); border-color:#fff; }
.cta-band .wp-block-button__link:hover{ background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:none; }
.cta-band .wp-block-button.is-ghost .wp-block-button__link{ background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.cta-band .wp-block-button.is-ghost .wp-block-button__link:hover{ background:#fff; color:var(--accent-dark); border-color:#fff; }
@media (hover:none){ .wp-block-button__link:hover{ transform:none; box-shadow:none; } }

/* ---- Trust bar: <b>/<span> become paragraphs. */
.trust-item .stat{ display:block; font-family:var(--font-display); font-size:2.3rem; line-height:1; color:var(--accent); font-weight:600; margin:0; }
.trust-item .stat-label{ font-family:var(--font-ui); font-size:.72rem; text-transform:uppercase; letter-spacing:.15em; color:var(--text-dim); margin:0; }

/* ---- Cards */
p.badge{ margin:0; }
p.card-price{ margin:0; }
.card-price-unit{
  font-family:var(--font-ui); font-size:.78rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.12em; color:var(--text-dim);
  margin:2px 0 0;
}
.sec-light .card-price-unit{ color:var(--text-dim-light); }
.card-cta p{ margin:0; }
.card-cta p a{
  font-family:var(--font-ui); font-weight:600; font-size:.76rem;
  text-transform:uppercase; letter-spacing:.14em; display:inline-block;
}
.card-cta p a::after{ content:" \2192"; }
@media (hover:none),(max-width:960px){
  .card-cta p a{ padding:12px 0; }
}

/* ---- Numbered steps: core/list-item cannot hold a heading, so steps are groups. */
.steps-blocks{ counter-reset:s; }
.steps-blocks .step{ counter-increment:s; position:relative; padding:0 0 30px 62px; }
.steps-blocks .step::before{
  content:counter(s); position:absolute; left:0; top:-6px;
  font-family:var(--font-display); font-size:2.6rem; font-weight:600;
  color:var(--accent); line-height:1;
}
.steps-blocks .step h4{ margin-bottom:6px; }
.steps-blocks .step p{ font-size:.98rem; color:var(--text-dim); margin:0; }
.sec-light .steps-blocks .step p{ color:#55504B; }

/* ---- Lists */
ul.wp-block-list.ticks, ul.wp-block-list.chips, ul.wp-block-list.bars{ padding-left:0; }

/* ---- FAQ: core/details IS a <details>, so msdc.css matches it already. */
.faq .wp-block-details{ border-bottom:1px solid var(--line); }
.faq .wp-block-details summary{ list-style:none; }

/* ---- Tables: core/table wraps the table in a <figure>, which takes the class. */
figure.wp-block-table.tbl{ margin:0 0 40px; }
figure.wp-block-table.tbl > table{ width:100%; border-collapse:collapse; font-family:var(--font-ui); font-size:.95rem; }
figure.wp-block-table.tbl th, figure.wp-block-table.tbl td{ text-align:left; vertical-align:top; padding:14px 16px; border-bottom:1px solid var(--line); }
figure.wp-block-table.tbl th{ font-weight:600; color:#fff; }
.sec-light figure.wp-block-table.tbl th{ color:var(--ink); }
@media (max-width:620px){
  figure.wp-block-table.tbl th, figure.wp-block-table.tbl td{ display:block; width:auto; padding:8px 0; border:0; }
  figure.wp-block-table.tbl tr{ display:block; border-bottom:1px solid var(--line); padding:18px 0; }
  figure.wp-block-table.tbl thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); }
  figure.wp-block-table.tbl td[data-label]::before{ content:attr(data-label); display:block; margin-bottom:2px; font-family:var(--font-ui); font-size:.64rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--accent); }
}
/* ---- Full-bleed sections -------------------------------------------------
   Astra caps every top-level block in .entry-content at its content width and
   centres it, which stops each section's background at the content width. The
   redesign expects sections to run edge to edge with .wrap doing the centring,
   exactly as the header and footer already do.

   Deliberately the same selector Astra uses, not a heavier one: this file is
   enqueued after Astra's stylesheet, so equal specificity plus later cascade
   position wins and no !important is needed.
   ------------------------------------------------------------------------- */
.entry-content[data-ast-blocks-layout] > *{
  max-width:none;
  margin-left:0;
  margin-right:0;
}

/* The section itself is the full-width surface; .wrap centres the content.
   Guard against any wrapper reintroducing a horizontal inset. */
.entry-content > section,
.entry-content > .trust{ width:100%; }

/* ---- Heading colour ------------------------------------------------------
   Astra declares  h1..h6, .entry-content :where(h1..h6) { color: #1e293b }
   which overrides inheritance. msdc.css sets no heading colour on purpose:
   headings are meant to take their section's colour, so they read #E9E6E3 on
   the dark grounds, #1A1A1A inside .sec-light, and #FFFFFF in .cta-band.

   Restoring inheritance rather than hard-coding #E9E6E3 gives that literal
   value everywhere the ground is dark, while keeping the light section legible
   -- a fixed #E9E6E3 would put near-white text on the #F4F2F0 panel at about
   1.1:1 contrast.
   ------------------------------------------------------------------------- */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6{
  color:inherit;
}

/* ==========================================================================
   Interior page patterns
   Additional mappings needed by the interior pages. Same principle as above:
   every value is lifted from an inline style or rule already in the drafts.
   ========================================================================== */

/* The drafts use inline gap/alignment on nested splits inside cards. */
.split.top{ gap:38px; align-items:start; }

/* .btn-sm equivalent for core/button. */
.wp-block-button.is-sm .wp-block-button__link{ padding:11px 20px; font-size:.72rem; }

/* Spacing utilities standing in for the drafts' inline margin-top values. */
.wp-block-buttons.mt-12{ margin-top:12px; }
.wp-block-buttons.mt-28{ margin-top:28px; }
.wp-block-buttons.mt-34{ margin-top:34px; }
.wp-block-buttons.mt-44{ margin-top:44px; }
.mt-40{ margin-top:40px; }

/* Lead paragraph inside a card (draft used inline font-size/color). */
.p-lead{ font-size:1.05rem; color:var(--text); }
.sec-light .p-lead{ color:#332F2C; }

/* core/quote is a <blockquote>, so .quote applies; neutralise core padding. */
.wp-block-quote.quote{ margin:0; }
.wp-block-quote.quote p{ margin-bottom:0; }

/* Figure variants the drafts set inline. */
.figure.fig-wide{ aspect-ratio:16/7; margin:40px 0 12px; }
.figure.fig-portrait{ aspect-ratio:3/4; }

/* core/table renders its caption as <figcaption> outside the <table>. */
figure.wp-block-table.tbl > figcaption{
  text-align:left; font-family:var(--font-display); font-size:1.5rem;
  text-transform:uppercase; color:var(--accent); padding-bottom:10px;
  margin:0; caption-side:top; order:-1;
}
figure.wp-block-table.tbl{ display:flex; flex-direction:column; }
figure.wp-block-table.tbl.facts > table{ font-size:.92rem; }
figure.wp-block-table.tbl.facts th{ width:38%; }
figure.wp-block-table.tbl.facts td{ color:var(--text-dim); }
.sec-light figure.wp-block-table.tbl td{ color:#55504B; }
figure.wp-block-table.tbl th[scope="row"]{ font-family:var(--font-ui); }

/* Forms are queued as a single core/html fragment inside a block-built
   section; the draft's own .form-* rules in msdc.css style them unchanged. */
.wp-block-html > form{ display:block; }
/* Figure placeholder label: the drafts used <span>, core/paragraph emits <p>. */
.figure p{
  font-family:var(--font-ui); font-size:.76rem; text-transform:uppercase;
  letter-spacing:.16em; color:var(--text-dim); margin:0;
}
.sec-light .figure p{ color:#6B6660; }

/* Generic spacing utilities (the buttons-scoped ones above stay for clarity). */
.mt-12{ margin-top:12px; }
.mt-28{ margin-top:28px; }
.mt-34{ margin-top:34px; }
.mt-44{ margin-top:44px; }
/* ---- Lineage photo grid ---------------------------------------------------
   core/image inside .grid replaces the .figure placeholders. The images carry
   the frame the placeholders used to draw, and crop to the same 4:3 so the
   rows stay even regardless of each photo's native aspect ratio. */
.grid figure.wp-block-image{ margin:0; }
.grid figure.wp-block-image img{
  display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  border:1px solid var(--line); border-radius:var(--radius);
}
.grid figure.wp-block-image figcaption{
  margin:10px 0 0; padding:0;
  font-family:var(--font-ui); font-size:.76rem; line-height:1.45;
  color:var(--text-dim); text-align:left;
}
.sec-light .grid figure.wp-block-image figcaption{ color:#6B6660; }
.sec-light .grid figure.wp-block-image img{ border-color:#D8D2CB; }
/* ---- Per-photo framing ----------------------------------------------------
   The grid crops every photo to 4:3 with object-fit:cover, which anchors on the
   centre. Five photos need something else, addressed by their wp-image-{id}
   class so no block markup changes.

   Panning uses object-position. Zooming uses object-view-box, which narrows the
   source region the crop reads from -- the right tool here, because scaling with
   transform would paint outside the image box and overlap the caption beneath
   it. object-view-box resolves the source region first, so object-position pans
   within the zoomed region; the two compound where both are set.

   inset(n%) reads a region (100 - 2n)% of each dimension:
     inset(10%) -> 80% of frame -> ~1.25x
     inset(14%) -> 72% of frame -> ~1.39x
     inset(20%) -> 60% of frame -> ~1.67x

   Listed in the order the photos appear in the grid, not by id, so this reads
   top-to-bottom against the page.

   Browsers without object-view-box show the standard centre crop, a safe
   degradation rather than a broken layout. */

/* Row 1 */
.grid img.wp-image-157{   /* George Kirby   - 396x470 portrait    */
  object-position: center top;
}

/* Row 2 */
.grid img.wp-image-161{   /* Joe Moreira    - 1920x2560 portrait  */
  object-view-box: inset(14%);
  object-position: center 10%;
}
.grid img.wp-image-160{   /* Tamir Gilad    - 1920x2560 portrait  */
  object-view-box: inset(20%);
}
.grid img.wp-image-162{   /* Bobby Taboada  - 641x855 portrait    */
  object-view-box: inset(10%);
  object-position: center 20%;
}

/* Row 3 */
.grid img.wp-image-156{   /* Jason Lambert  - 2560x1700 landscape */
  object-view-box: inset(14%);
}


/* ---- Standalone content photos --------------------------------------------
   Real images replacing the .figure placeholders outside the lineage grid.
   They carry the frame the placeholders drew, and crop to a fixed ratio so a
   portrait or landscape source does not change the surrounding layout.
   is-wide keeps the 16:7 the facility placeholder used; the default is 4:3. */
figure.wp-block-image.msdc-photo{ margin:0; }
figure.wp-block-image.msdc-photo img{
  display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  border:1px solid var(--line); border-radius:var(--radius);
}
figure.wp-block-image.msdc-photo.is-wide img{ aspect-ratio:16/7; }
figure.wp-block-image.msdc-photo.mt-40{ margin-top:40px; }
figure.wp-block-image.msdc-photo figcaption{
  margin:10px 0 0; padding:0;
  font-family:var(--font-ui); font-size:.76rem; line-height:1.45;
  color:var(--text-dim); text-align:left;
}
.sec-light figure.wp-block-image.msdc-photo img{ border-color:#D8D2CB; }
.sec-light figure.wp-block-image.msdc-photo figcaption{ color:#6B6660; }

/* 437x720 portrait cropped to 4:3 loses a lot top and bottom; bias upward so
   the subject rather than the floor survives. */
figure.wp-block-image.msdc-photo img.wp-image-171{ object-position: center 10%; }

/* Facility exterior is 534x367 native. Show the whole frame rather than an
   is-wide 16:7 crop: match the ratio to the source so nothing is cut, and cap
   the figure at native width so a 534px file is never upscaled into mush. The
   cap sits on the figure, not the img, so the caption tracks the photo's left
   edge instead of the column's. The img max-width repeats it as a fallback for
   engines without :has(). Ratio now equals the source, so contain and cover
   resolve identically; contain is stated as the guarantee. */
figure.wp-block-image.msdc-photo.is-wide:has(img.wp-image-172){
  max-width: 534px;
  margin-inline: auto;
}
figure.wp-block-image.msdc-photo.is-wide img.wp-image-172{
  aspect-ratio: 534 / 367;
  object-fit: contain;
  max-width: 534px;
  margin-inline: auto;
}

/* ==========================================================================
   Hero cover images
   Shared tokens so adding a photo to a new hero is a two-line change: point
   background-image at var(--hero-wash), var(--hero-scrim), url(...) and pick a
   background-position. The scrim is the agreed standard at .45 / .41 / .475,
   which shows the photo at roughly 55% / 59% / 52%.

   Legibility caveat, measured: over a blown-out white region of a photo the
   .41 midpoint composites to about #A1A1A1, giving #E9E6E3 text ~2.08:1 --
   under the 4.5:1 WCAG AA wants for body text. The standard therefore assumes
   hero photos are dark where the headline and lede sit. If a future photo is
   bright there, add a localised scrim behind .hero-in rather than darkening
   the whole layer.
   ========================================================================== */
:root{
  --hero-wash:  radial-gradient(1100px 520px at 78% 8%, rgba(243,78,58,.17), transparent 62%);
  --hero-scrim: linear-gradient(180deg, rgba(26,26,26,.45) 0%, rgba(33,33,33,.41) 55%, rgba(26,26,26,.475) 100%);
}

/* ---- Watermark ------------------------------------------------------------
   The oversized "SELF DEFENSE" behind every hero. msdc.css sets it at 2.8%
   white, which all but vanished once photos went in behind it. Raised to 7%,
   about 2.5x, so it reads as deliberate texture rather than a rendering
   artefact while still sitting behind the type. Same specificity as the rule
   in msdc.css and loaded later, so no !important needed. */
.hero::before{ color: rgba(255,255,255,.07); }

/* ---- Homepage -------------------------------------------------------------
   Predates the .41 standard and is deliberately left heavier, so the cover
   photo stays a texture rather than a subject. Not an oversight. */
.home .hero{
  background-color: var(--bg);
  background-image:
    var(--hero-wash),
    linear-gradient(180deg, rgba(26,26,26,.90) 0%, rgba(33,33,33,.82) 55%, rgba(26,26,26,.95) 100%),
    url('/wp-content/uploads/2026/08/msdc-hero-cover.jpg');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: auto, auto, cover;
  background-position: center, center, center 10%;
}

/* ---- About ---------------------------------------------------------------- */
.page-id-21 .hero{
  background-color: var(--bg);
  background-image:
    var(--hero-wash),
    var(--hero-scrim),
    url('/wp-content/uploads/2026/08/msdc-roy-harris-group-1024x768.jpg');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: auto, auto, cover;
  background-position: center, center, center 50%;
}

/* Seminars & Workshops.
   Requested as a 40% scrim; using the shared --hero-scrim token, which is the
   .45 / .41 / .475 standard. The 1% difference is not perceptible, and minting
   a near-duplicate token would split the hero standard in two for no visible
   gain. If a literally distinct value is ever wanted here, give this rule its
   own gradient rather than editing the token, which every hero now reads.

   Source is 719x598 -- landscape, so it crops far more gracefully into a wide
   hero band than the 540x720 portrait it replaces. Still modest in absolute
   terms: cover upscales it roughly 2x at a 1400px viewport, which the scrim
   largely conceals. A larger original would still be an improvement. */
.page-id-19 .hero{
  background-color: var(--bg);
  background-image:
    var(--hero-wash),
    var(--hero-scrim),
    url('/wp-content/uploads/2026/08/31970_433386694313_37429079313_5609085_238763_n.jpg');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: auto, auto, cover;
  background-position: center, center, center 40%;
}

/* Online Courses.
   Uses the shared --hero-scrim standard (.45 / .41 / .475) with no override,
   so it follows if that standard is ever retuned.

   Source is 1920x1080 -- 16:9 and the largest hero source on the site after
   the Chris Martell section photo. No upscaling at any common viewport, and
   16:9 crops into a hero band with far less loss than the 540x720 portrait
   this pattern started with. Positioned centre; nothing here argues for a
   bias up or down. Set to 15% after review. */
.page-id-20 .hero{
  background-color: var(--bg);
  background-image:
    var(--hero-wash),
    var(--hero-scrim),
    url('/wp-content/uploads/2026/08/vr-cover-1.jpg');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: auto, auto, cover;
  background-position: center, center, center 15%;
}
/* ==========================================================================
   Section cover images
   Same idea as the hero tokens, one level down. A section opts in with the
   sec-photo class, then supplies its own photo through two custom properties,
   so adding another one later touches no shared rule.

   The scrim here is heavier than the hero standard: .84 / .80 / .865, the .80
   midpoint being the agreed value. Section bodies carry running copy and card
   text rather than one short headline, so they need the photo further back
   than a hero does. At .80 the photo reads at roughly 20% and functions as
   texture; contrast against --text stays close to the flat --bg-raise value it
   replaces, so no legibility regression.

   background-color still resolves to --bg-raise underneath, so if the image
   404s the section degrades to exactly what it looked like before.
   ========================================================================== */
:root{
  --sec-scrim-80: linear-gradient(180deg, rgba(26,26,26,.84) 0%, rgba(33,33,33,.80) 55%, rgba(26,26,26,.865) 100%);
  /* Same shape, different midpoint: top is midpoint +.04, bottom +.065. */
  --sec-scrim-20: linear-gradient(180deg, rgba(26,26,26,.24) 0%, rgba(33,33,33,.20) 55%, rgba(26,26,26,.265) 100%);
  /* Light counterpart for photo sections that stay on .sec-light. Built on
     --bg-light #F4F2F0 so the wash matches neighbouring light sections.
     .70 is the practical floor: body copy #332F2C over it measures 5.7:1
     worst case, still clearing AA, while showing the photo at 30%. At .60
     the body copy drops to 4.25:1 and fails. */
  --sec-scrim-light-70: linear-gradient(180deg, rgba(244,242,240,.74) 0%, rgba(244,242,240,.70) 55%, rgba(244,242,240,.765) 100%);
  --sec-scrim-light-65: linear-gradient(180deg, rgba(244,242,240,.69) 0%, rgba(244,242,240,.65) 55%, rgba(244,242,240,.715) 100%);
  --sec-scrim-40: linear-gradient(180deg, rgba(26,26,26,.44) 0%, rgba(33,33,33,.40) 55%, rgba(26,26,26,.465) 100%);
  --sec-scrim-50: linear-gradient(180deg, rgba(26,26,26,.54) 0%, rgba(33,33,33,.50) 55%, rgba(26,26,26,.565) 100%);
  --sec-scrim-70: linear-gradient(180deg, rgba(26,26,26,.74) 0%, rgba(33,33,33,.70) 55%, rgba(26,26,26,.765) 100%);
  --sec-scrim-85: linear-gradient(180deg, rgba(26,26,26,.89) 0%, rgba(33,33,33,.85) 55%, rgba(26,26,26,.915) 100%);
}
/* Keyed off the element rather than .sec-raise, because a photo section is not
   necessarily a raised one -- the Seminars booking section is a plain section.
   section.sec-photo is (0,1,1), so it still outranks .sec-raise's background
   shorthand without needing !important. Both the scrim and the fallback colour
   are overridable so a section degrades to whatever it looked like before. */
section.sec-photo{
  background-color: var(--sec-photo-bg, var(--bg-raise));
  background-image: var(--sec-scrim, var(--sec-scrim-80)), var(--sec-photo-src);
  background-repeat: no-repeat, no-repeat;
  /* The scrim is deliberately 2px taller than the box and pinned to the top.
     At auto (= exactly 100%) a fractional section height lets the cover image
     round up while the gradient rounds down, leaving an uncovered hairline of
     photo along the bottom edge. Overscanning costs nothing -- the surplus is
     clipped by the box -- and removes the rounding race entirely. */
  background-size: 100% calc(100% + 2px), cover;
  background-position: center top, var(--sec-photo-pos, center);
}

/* Per-section photos. Each section carries its own modifier class rather than
   being addressed by page, because a page can hold more than one of these --
   the homepage now holds two, and a page-scoped selector would have fed the
   same photo to both. */

/* 'Pick one. Or build your own combination.'
   Source is 700x398, so it upscales on wide viewports. Acceptable only because
   an .80 scrim hides the softness; do not reuse this file anywhere it sits
   under a lighter scrim without re-importing a larger original. */
.sec-photo-programs{
  --sec-photo-src: url('/wp-content/uploads/2026/08/msdc-clint-blue-belt-roy-harris-2010.jpg');
  --sec-photo-pos: center;
}

/* FAQ - 'Straight answers.'
   Source is 2560x1707, so no upscaling concern at any viewport. This is the
   -scaled derivative WordPress generates for large uploads, which is the file
   actually served; the attachment guid points at the unscaled original. */
.sec-photo-faq{
  --sec-photo-src: url('/wp-content/uploads/2026/08/KnSelfDefense_0940-scaled.jpg');
  --sec-photo-pos: center;
}

/* ---- Seminars: photo above the pull quote, right-hand column of .split -----
   Column maths at --wrap 1180: 1180 - 48 gutters = 1132, less the 56px split
   gap = 1076, times .475 (the .95fr share) = ~511px of usable width.

   hype13.jpg is 540x720 portrait. At full column width it would stand ~681px
   tall and tower over the four-paragraph column beside it, which .split then
   has to centre against. Capped at 380px, giving ~507px of height, so the two
   columns finish at roughly the same point. 380 is also well inside the 540px
   native width, so nothing is upscaled.

   No crop: the whole frame shows, matching the facility photo rather than the
   4:3 .msdc-photo treatment, since cropping a portrait to 4:3 discards about
   half of it. Left-aligned so the edge lines up with the quote's accent
   border directly beneath. max-width rather than width means narrow viewports
   shrink it to fit once .split collapses to one column. */
figure.wp-block-image.msdc-photo-quote{
  margin: 0 0 28px 27px;
  max-width: 380px;
}
figure.wp-block-image.msdc-photo-quote img{
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Seminars - 'From inquiry to delivered session.'
   Requested 0% centre, read as the vertical axis to match every other photo
   here: horizontal centre, top of the frame.

   This section had no background of its own, so --sec-photo-bg is transparent
   rather than --bg-raise; a missing image leaves it exactly as it was instead
   of silently promoting it to a raised panel.

   Source is 598x336 -- landscape, which suits a wide band, but small: cover
   upscales it roughly 2.3x at a 1400px viewport. The .85 scrim is heavier than
   the .80 used on the homepage, so that softness is well hidden. */
.sec-photo-booking{
  --sec-photo-src: url('/wp-content/uploads/2026/08/hype7.jpg');
  --sec-photo-pos: center 0%;
  --sec-scrim: var(--sec-scrim-85);
  --sec-photo-bg: transparent;
}

/* ---- Natural-ratio variant of .msdc-photo ---------------------------------
   .msdc-photo forces 4:3 with object-fit:cover so mixed sources cannot alter
   the surrounding layout. That is wrong for a book cover, where cropping the
   edges off the artwork is worse than an uneven column. This variant keeps the
   frame, caption styling and light-section overrides, and only releases the
   ratio, so the whole cover shows at its own proportions.

   Relevant here because the placeholder it replaced was fig-portrait (3:4)
   while the artwork is 1491x1399, very close to square -- forcing either 3:4
   or 4:3 would have sliced roughly a third off one axis of a book cover. */
figure.wp-block-image.msdc-photo.msdc-photo-natural img{
  aspect-ratio: auto;
  height: auto;
  object-fit: fill;
}

/* Chris Martell - 'Three parts, roughly.'
   A .tight section (60px padding rather than 96), so the visible band is short
   and most of a 2560x1700 landscape is cropped away vertically. That is fine
   here -- the file is large enough that the surviving strip is still sharp,
   unlike the 600px-wide sources used elsewhere.

   .40 is the lightest scrim on the site, so the photo is genuinely visible
   rather than texture. Only the h2 and the card grid sit here; .card is opaque
   #262626, so card copy never touches the photo. The heading is large text,
   where AA asks 3:1. Measured for --text #E9E6E3 through this scrim: ~2.0:1
   over a blown-out area, ~15.9:1 over a dark one. If the heading lands on a
   bright part of the frame, --sec-scrim-70 is a one-line change.

   transparent rather than --bg-raise: .tight sets padding only and carries no
   background, so a missing image leaves the section exactly as it was. */
.sec-photo-threeparts{
  --sec-photo-src: url('/wp-content/uploads/2026/08/Chris-Martell-Modern-Self-Defense-Center-Founder-and-Head-Instructor-scaled.jpg');
  --sec-photo-pos: center 5%;
  --sec-scrim: var(--sec-scrim-40);
  --sec-photo-bg: transparent;
}

/* Height set so the whole photo shows. The file is 2560x1700, i.e. 1700/2560
   = .6641 of its own width, so a full-bleed section that tall reveals the
   entire frame under background-size:cover with nothing cropped. Capped at the
   image's natural 1700px, because past a 2560px viewport a taller section
   would only upscale it. Narrow viewports still crop: once the stacked cards
   exceed .6641 of the width, min-height stops binding.

   Content is anchored to the BOTTOM, not centred. The section now matches the
   photo's own ratio exactly, so --sec-photo-pos is inert -- there is nothing
   left to crop -- and the only way to keep part of the frame clear is to move
   the content off it. flex-end leaves the upper half open for the faces. If
   they turn out to sit LOW in the frame, flip this to flex-start. */
section.sec-photo-threeparts{
  min-height: min(66.41vw, 1700px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 84px;
}

/* Scaling the content up to fill the taller band. Every rule is scoped to this
   section, so the shared .card / .p-lead / .kicker sizes used across the rest
   of the site are untouched. Column width is deliberately NOT widened: .wrap
   stays at --wrap 1180 so this section's edges still line up with every other
   section on the page. The boxes grow in height and weight instead. */
.sec-photo-threeparts h2{
  font-size: clamp(2.8rem, 5.6vw, 4.6rem);   /* base h2 is 2.3 / 4.6vw / 3.7 */
}
.sec-photo-threeparts .grid.mt-34{ margin-top: 46px; }
.sec-photo-threeparts .grid.g3{ gap: 34px; }
.sec-photo-threeparts .card{
  padding: 46px 40px;                        /* base 32px 28px */
}
.sec-photo-threeparts .card .kicker{
  font-size: .86rem;                         /* base .68rem */
  letter-spacing: .18em;
  margin-bottom: 16px;
}
.sec-photo-threeparts .p-lead{
  font-size: 1.3rem;                         /* base 1.05rem */
  line-height: 1.6;
}
/* '(please don't check our math)'. .small is .9rem in --text-dim #A9A5A1,
   about 1.03:1 through the .40 scrim over a blown-out area of the photo.
   Size raised and colour lifted to --text, taking that worst case to ~2.03:1.
   Delete the colour line alone to restore the dimmer aside. */
.sec-photo-threeparts .small{
  font-size: 1.05rem;
  color: var(--text);
  margin-top: 28px;
}

/* Chris Martell - 'Why MSDC exists.'
   No scrim or position given, so both take the shared defaults: --sec-scrim-80
   and centre. Writing neither means this section follows if the default is
   ever retuned.

   transparent rather than --bg-raise: the section carried no background, so a
   missing image leaves it exactly as it was.

   Source is 604x365, upscaled ~2.3x at a 1400px viewport. The content here is
   a pull quote in .wrap-narrow rather than cards, so unlike the other photo
   sections the copy sits directly on the photo across its full width -- the
   .80 default is doing real work for legibility, not just texture. */
.sec-photo-why{
  --sec-photo-src: url('/wp-content/uploads/2026/08/BJJ-seminar-at-Modern-Self-Defense-Center-2009.jpg');
  --sec-scrim: var(--sec-scrim-20);
  --sec-photo-bg: transparent;
}

/* Height set to reveal the whole frame: 365/604 = .6043 of the image's own
   width, so a full-bleed section that tall shows all of it under cover.

   Deliberately NO natural-height cap here, unlike sec-photo-threeparts. That
   cap existed to avoid upscaling a 2560px original past 1:1. This file is only
   604x365 and is already being upscaled roughly 2.3x at any normal viewport,
   so capping at 365px would simply stop the section growing and reinstate the
   crop. The trade is accepted softness in exchange for the full frame.

   Content centred rather than bottom-anchored: no faces to keep clear was
   specified here, and a centred quote reads better than one pinned low. */
section.sec-photo-why{
  min-height: 60.43vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Localised panel behind the quote, so the section scrim can drop to .20 and
   let the photo show while the copy stays readable.

   Compounding, worst case (a blown-out white area of the photo):
     .20 scrim over #FFFFFF          -> #D1D1D1
     .60 panel of #1A1A1A over that  -> #636363
     #FFFFFF text on #636363         -> 6.0:1, clears AA for body text
   Over darker parts of the frame it only improves. The two layers multiply
   rather than add: .20 and .60 give .68 effective, not .80.

   The panel sits on the blockquote, so it covers the cite as well as the three
   paragraphs -- one box rather than three. Padding replaces .quote's 6px/24px
   so the text is not flush to the panel edge; the accent left border is kept.

   NOT covered: the eyebrow and h2 above still sit on the bare .20 scrim, where
   --text measures about 1.2:1 over a bright area. Extending the panel or
   giving them their own is the fix if that reads badly. */
.sec-photo-why .wp-block-quote.quote{
  background: rgba(26,26,26,.60);
  padding: 34px 36px 34px 32px;
  border-radius: var(--radius);
}
.sec-photo-why .wp-block-quote.quote p{
  font-size: 1.34rem;
  line-height: 1.58;
  color: #FFFFFF;
}

/* Private Lessons - 'One rate. No contract. No upsell.'
   No scrim or position given, so both take the shared defaults (80, centre);
   writing neither means this section follows if the default is ever retuned.

   The section carried no background of its own, hence transparent rather than
   --bg-raise: a missing image leaves it exactly as it was.

   Source is 1572x699 -- wide (2.25:1) and large enough that a full-width band
   does not upscale it at common viewports. The best-proportioned source used
   for a section band so far. */
.sec-photo-pricing{
  --sec-photo-src: url('/wp-content/uploads/2026/08/2011-jordan-josh-purple.jpg');
  --sec-photo-bg: transparent;
}

/* Private Lessons - 'You are not the average of a room.'
   Defaults for scrim and position (80, centre). transparent background so a
   missing image leaves the section as it was.

   Unlike the pricing band lower down, this section is a .split of running
   copy with no opaque cards -- the text sits directly on the photo across the
   left column. The .80 default is doing real legibility work here, not just
   holding the image back as texture. Do not lighten it without adding a
   localised panel, as was needed on Chris Martell.

   Source is 604x453 -- 4:3, so a wide band crops it heavily top and bottom,
   and cover upscales it roughly 2.3x at 1400px. Well concealed at .80. */
.sec-photo-whyprivate{
  --sec-photo-src: url('/wp-content/uploads/2026/08/2009-roy-harris.jpg');
  --sec-photo-bg: transparent;
}

/* Private Lessons - 'Bring people. Split the bill. Keep the attention.'
   Default scrim (80), position centre 75%. sec-photo-weaponsgap on this same
   page sits at 100%, so there is now 25 points of separation between the two
   crops -- enough that they should not read as the same frame twice.
   transparent background.

   Another .split of running copy with no opaque cards, so as with
   sec-photo-whyprivate the .80 is carrying legibility, not just texture.

   Source is 800x531 (3:2) -- crops well into a band and upscales only ~1.75x
   at 1400px. But the file is 425KB, which is heavy for those dimensions: 2.6x
   the pricing photo at half the width. Worth re-exporting at a lower JPEG
   quality; it is the largest single image request on this page. */
.sec-photo-semiprivate{
  --sec-photo-src: url('/wp-content/uploads/2026/08/2011-jason-lambert-triangle.jpg');
  --sec-photo-bg: transparent;
}
/* Online Courses - 'Before you buy.' (course FAQ)
   Named coursefaq rather than faq: sec-photo-faq is already taken by the
   homepage FAQ section, and these are different photos.

   Defaults for scrim and position (80, centre); transparent background so a
   missing image leaves the section exactly as it was.

   Six <details> in .wrap-narrow with no opaque cards, so every answer sits
   directly on the photo. The .80 default is carrying legibility here rather
   than holding the image back as texture -- do not lighten without a panel.
   FAQ bodies are --text-dim #A9A5A1, dimmer than --text, so this section is
   less tolerant of a light scrim than one with full-strength copy.

   Source is 2560x1700; no upscaling at any common viewport. */
.sec-photo-coursefaq{
  --sec-photo-src: url('/wp-content/uploads/2026/08/training-notes-scaled.jpg');
  --sec-photo-bg: transparent;
}

/* Online Courses - 'Four honest use cases.' The one photo section that stays
   LIGHT: .sec-light is retained alongside .sec-photo, so dark text, white
   cards and every .sec-light descendant rule keep applying.

   Scrim is .70 rather than .88 -- pushed as far as the text allows so the
   photo reads at 30% instead of 12%. Measured worst case (photo near-black):
     body copy #332F2C   5.7:1   clears AA
     h2 #1A1A1A          7.0:1   clears AA
     eyebrow --accent    1.5:1   FAILS -- see below

   The four cards are opaque #fff, so card copy never touches the photo. The
   only weak element is the accent-coloured eyebrow, which is already marginal
   at 3.2:1 on plain --bg-light and degrades under any wash. If it reads badly,
   darkening it for this section is the fix, not lightening the scrim. */
.sec-photo-usecases{
  --sec-photo-src: url('/wp-content/uploads/2026/08/online-fitness-course-scaled.jpg');
  --sec-scrim: var(--sec-scrim-light-70);
  --sec-photo-bg: var(--bg-light);
}

/* Height sized to show the middle 60% of the frame, cropping 20% off the top
   and 20% off the bottom as agreed.

   Source is 2560x1707. Showing the whole image under background-size:cover
   needs a section 66.68% of viewport width tall; 60% of that is
   40.01vw. background-position stays centre, which is what makes the
   discarded 40% split evenly top and bottom rather than falling on one side.

   Capped at 1024px -- the natural height of that 60% band -- so past a
   2560px viewport the section stops growing rather than upscaling the source.

   Narrow viewports: once the four cards stack and exceed 40.01vw, min-height
   stops binding and MORE of the image shows, not less. Nothing breaks.

   Flex column so the heading and card grid stay optically centred in the
   taller band instead of hugging the top. */
section.sec-photo-usecases{
  min-height: min(40.01vw, 1024px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Filipino Martial Arts - 'The weapons gap in your training is bigger than
   you think.' Moved here from the page hero, which is back to the flat
   gradient and now matches the other three program pages again.

   Default scrim (80). Position is centre 100% -- the very bottom of the frame,
   the furthest down the axis goes; there is no more room in that direction.
   transparent background so a missing image leaves the section as it was.

   A .split of running copy with no opaque cards, so the .80 is carrying
   legibility rather than holding the photo back as texture.

   Source is 2560x1700; no upscaling. Still 644KB, which matters less here
   than it did as a hero -- this loads below the fold rather than on first
   paint -- but is worth re-exporting lighter regardless. */
.sec-photo-weaponsgap{
  --sec-photo-src: url('/wp-content/uploads/2026/08/2011-fma-scaled.jpg');
  --sec-photo-pos: center 100%;
  --sec-photo-bg: transparent;
}

/* Filipino Martial Arts - 'What the first few months look like.'
   Default scrim (80), position centre 75%. sec-photo-weaponsgap on this same
   page sits at 100%, so there is now 25 points of separation between the two
   crops -- enough that they should not read as the same frame twice.
   transparent background.

   Second photo section on this page, after sec-photo-weaponsgap. They sit two
   sections apart with the lineage band between them, so the page now
   alternates photo / flat / photo -- worth a look to confirm that reads as
   rhythm rather than repetition.

   Six .step blocks in .wrap, plus the sec-head above them. Unlike .card these
   are not opaque panels, so all of the copy sits on the photo and the .80
   default is carrying legibility.

   Source swapped to the protective-gear photo. Below the fold, so less costly
   than a hero, but this page still loads two large backgrounds. */
.sec-photo-progression{
  --sec-photo-src: url('/wp-content/uploads/2026/08/FMA-training-with-protective-gear-scaled.jpg');
  --sec-photo-pos: center 75%;
  --sec-photo-bg: transparent;
}

/* Krav Maga - 'What you'll actually work on.'
   Defaults for scrim and position (80, centre); transparent background.

   REUSED SOURCE: this file is also the Seminars page hero (.page-id-19).
   Same photo in two places on the site, at different scrims and crops.
   Deliberate, but if either is ever swapped the other is unaffected -- they
   are separate rules, not a shared token.

   Source is 719x598, the smallest still in use: cover upscales it about 2x
   at 1400px. Acceptable under .80, and it is landscape so it crops into a
   band without heavy loss. Do not reuse under a lighter scrim.

   No opaque cards in this section, so the copy sits on the photo. */
.sec-photo-curriculum{
  --sec-photo-src: url('/wp-content/uploads/2026/08/31970_433386694313_37429079313_5609085_238763_n.jpg');
  --sec-photo-bg: transparent;
}

/* Krav Maga - 'Sophisticated simplicity.'
   Default scrim (80), position centre 20%. transparent background.

   Source is 1024x1024 -- SQUARE, which is the worst shape for a wide band.
   At a 1400px viewport cover scales it to 1400x1400 and the section shows
   only the middle third or so; roughly two thirds of the frame is discarded,
   more than any other section source here. It also upscales ~1.37x. Expect
   to need --sec-photo-pos more than usual to land on the subject; set to 20%.

   A .split of running copy plus a .note, no opaque cards, so the .80 is
   carrying legibility. Second photo section on this page, three sections
   above sec-photo-curriculum. */
.sec-photo-simplicity{
  --sec-photo-src: url('/wp-content/uploads/2026/08/vr-fitness-2.jpg');
  --sec-photo-pos: center 20%;
  --sec-photo-bg: transparent;
}

/* Jeet Kune Do - 'Common ones.' (JKD FAQ)
   Same photo and the same centre position as sec-photo-faq on the homepage,
   which is the other FAQ using this file. Written explicitly rather than
   left to inherit, so the pairing is visible when reading either rule -- if
   the shared default ever changes these two should still match each other.

   Third use of KnSelfDefense_0940 on the site. Source is 2560x1707, so no
   upscaling anywhere, and it holds up well under the .80 default.

   Four <details> in .wrap-narrow, no opaque cards. FAQ bodies are --text-dim
   #A9A5A1, dimmer than --text, so this section is less tolerant of a light
   scrim than one with full-strength copy -- same caveat as sec-photo-coursefaq. */
.sec-photo-jkdfaq{
  --sec-photo-src: url('/wp-content/uploads/2026/08/KnSelfDefense_0940-scaled.jpg');
  --sec-photo-pos: center;
  --sec-photo-bg: transparent;
}

/* Jeet Kune Do - 'Not an art. A process.'
   Default scrim (80), position centre 0% -- top edge of the frame, the end of\n   the axis; transparent background.

   Source is the FMA photo that was briefly on sec-photo-progression before
   being swapped out; it has been unused since. Filename says fma but the
   two arts overlap heavily in this material -- trapping, ranges, weapons
   transfer -- so it is not necessarily off-topic. Worth a look to confirm
   nothing in frame is distinctly FMA if that would confuse the page.

   2560x1700, no upscaling. Second photo section on this page, with the JKD
   FAQ near the bottom. */
.sec-photo-process{
  --sec-photo-src: url('/wp-content/uploads/2026/08/2011-fma-nola-scott-scaled.jpg');
  --sec-photo-pos: center 0%;
  --sec-photo-bg: transparent;
}

/* Jeet Kune Do - 'What we actually train.'
   Named jkdcurriculum because sec-photo-curriculum is already the Krav Maga
   section of the same name.

   No --sec-photo-bg here, unlike the other instances: this section keeps its
   .sec-raise class, and the shared rule already falls back to --bg-raise. So
   a missing image degrades to exactly the raised panel it was before.

   Six .card blocks, opaque #262626, so card copy never touches the photo --
   only the eyebrow, h2 and lede do. That makes this one of the few sections
   that can take a lighter scrim than .80 -- set to .50 by request.

   CONTRAST NOTE: at .50, --text over a blown-out highlight measures 2.7:1.
   That is below AA for body text (4.5:1) and below the large-text threshold
   (3:1) as well. The six cards are opaque so card copy is unaffected, but the
   eyebrow, h2 and lede sit on the photo and will be hard to read wherever the
   image is bright behind them. .70 was the last value that cleared AA here.
   If it reads badly, a localised panel behind .sec-head -- as used on
   sec-photo-why -- fixes it without raising the section scrim.

   Source is 1707x1382 (1.24:1), close to square, so a wide band discards a
   lot of height. Positioned at 20%. Third photo
   section on this page. */
.sec-photo-jkdcurriculum{
  --sec-photo-src: url('/wp-content/uploads/2026/08/kickboxing-savate-montreal-canada-connecticut-USA.jpg');
  --sec-photo-pos: center 20%;
  --sec-scrim: var(--sec-scrim-50);
}

/* Brazilian Jiu-Jitsu - 'The martial art that always tells you if it's working.'
   Defaults for scrim and position (80, centre); transparent background so a
   missing image leaves the section as it was.

   Source is 1080x1080 (1:1) at 149KB.

   A .split of running copy plus a .note, no opaque cards, so the .80 default
   is carrying legibility rather than holding the photo back as texture.
   First photo section on this page. */
.sec-photo-whybjj{
  --sec-photo-src: url('/wp-content/uploads/2026/08/Brazilian-Jiu-Jitsu-BJJ-Gi-and-No-Gi-training-Connecticut-2024.jpg');
  --sec-photo-bg: transparent;
}

/* Brazilian Jiu-Jitsu - 'Belts are earned, and they mean something.'
   Second light photo section, treated the same way as sec-photo-usecases on
   Online Courses: .sec-light retained alongside .sec-photo so dark text,
   white cards and every .sec-light descendant rule keep applying, with the
   light wash at .65 -- one step down from the .70 used on sec-photo-usecases,
   so more of the photo reads through and the panel sits darker. Body copy
   #332F2C still clears AA at 5.0:1 worst case; .60 would drop it to 4.25:1
   and fail, so this is close to the floor.

   Three opaque #fff cards, so card copy never touches the photo. Only the
   eyebrow, h2 and lede sit on it. The accent-coloured eyebrow is the weak
   element under any wash, same as on sec-photo-usecases.

   --sec-photo-bg is --bg-light so a missing image degrades to exactly the
   section's previous appearance.

   Source is 1440x1224 (1.18:1) -- close to square, so a wide band discards a
   lot of height;
   positioned at 10%, biased high on the assumption heads sit near the top of\n   the frame -- not verified visually. */
.sec-photo-rank{
  --sec-photo-src: url('/wp-content/uploads/2026/08/2022-blue-belts.jpg');
  --sec-photo-pos: center 20%;
  --sec-scrim: var(--sec-scrim-light-65);
  --sec-photo-bg: var(--bg-light);
}

/* Brazilian Jiu-Jitsu - FAQ.
   Defaults for scrim and position (80, centre); transparent background.

   Note this breaks the FAQ pairing: the homepage and Jeet Kune Do FAQs both
   use KnSelfDefense_0940 at centre, deliberately matched. This one uses the
   BJJ training photo instead -- reasonable on a program page, but the three
   FAQ sections no longer read as one system.

   Source is 1360x904 (3:2), 196KB -- the file previously on sec-photo-whybjj
   before that section was swapped to the square 2024 photo. Unused since.
   Effectively native at desktop width.

   <details> in .wrap-narrow with no opaque cards, and FAQ bodies are
   --text-dim #A9A5A1, dimmer than --text -- so this section is less tolerant
   of a light scrim than most. Same caveat as sec-photo-coursefaq. */
.sec-photo-bjjfaq{
  --sec-photo-src: url('/wp-content/uploads/2026/08/Brazilian-Jiu-Jitsu-self-defense-training-Middletown-Connecticut.jpg');
  --sec-photo-bg: transparent;
}

/* Programs - 'Beyond the four core programs.'
   Defaults for scrim and position (80, centre); transparent background so a
   missing image leaves the section as it was.

   Four opaque .card blocks, so card copy never touches the photo -- only the
   eyebrow, h2 and lede do. Like sec-photo-jkdcurriculum, this one could take
   a lighter scrim if the photo deserves it; .70 is the floor while the lede
   sits on the image.

   Source is 2560x1700 (3:2) -- no upscaling. 525KB though, so worth a lighter
   re-export; this is the first photo section on the Programs page and the
   page already carries a full comparison table. */
.sec-photo-beyond{
  --sec-photo-src: url('/wp-content/uploads/2026/08/Group16-scaled.jpg');
  --sec-photo-bg: transparent;
}

/* Home - 'Credentials you can check.'
   Defaults for scrim and position (80, centre); transparent background so a
   missing image leaves the section as it was.

   This section was .sec-light until just now; it is plain dark again, which
   is what makes a dark scrim viable here at all.

   Four opaque .card blocks, so card copy never touches the photo -- only the
   eyebrow, h2 and lede do. Could take a lighter scrim than .80 if wanted;
   .70 is the floor while the lede sits on the image.

   Third photo section on the homepage, and the middle one of three: programs
   above, FAQ below, with the light Phenomenal grid between this and the FAQ. */
.sec-photo-credentials{
  --sec-photo-src: url('/wp-content/uploads/2026/08/bjj-5.jpg');
  --sec-photo-bg: transparent;
}

/* Programs - 'Blending is what you do after you understand the pieces.'
   Defaults for scrim and position (80, centre); transparent background.

   A .split of running copy plus a .note, no opaque cards, so the .80 is
   carrying legibility rather than holding the photo back as texture. Unlike
   sec-photo-beyond lower down this page, which is all cards, this one should
   NOT be lightened below .70.

   Source is 2560x1700 (3:2) at 302KB -- no upscaling, and less than half the
   weight of Group16 on the same page.

   Second photo section on Programs, near the top; sec-photo-beyond sits near
   the bottom with the comparison table and guest list between them. */
.sec-photo-blending{
  --sec-photo-src: url('/wp-content/uploads/2026/08/MSDC-instructor-training-self-defense-connecticut-scaled.jpg');
  --sec-photo-bg: transparent;
}

/* ---- Homepage timeline grid: per-photo zoom ------------------------------
   Same technique as the lineage grid above: object-view-box narrows the
   source region the 4:3 crop reads from, so the subject fills more of the
   frame without transform painting outside the box and over the caption.
   inset(20%) reads the middle 60% of each dimension, roughly 1.67x.

   These are all group shots where the people sit small in a wide frame.
   Listed newest first, matching their order on the page. */
.grid img.wp-image-336{ object-view-box: inset(6%); }   /* 2023 IKMF Civilian Instructor Course Graduates */
.grid img.wp-image-332{ object-view-box: inset(8%); }   /* 2019 Seminar and newly promoted purple belts in New Britain CT */
.grid img.wp-image-329{ object-position: 53% center; }   /* 2012 new graduates of the apprentice grappling instructor course in CT */
.grid img.wp-image-327{ object-view-box: inset(10%); }   /* 2011 Instructors at the International Modern Arnis Federation IMAF annual camp */
.grid img.wp-image-323{ object-view-box: inset(6% 0 4% 0); object-position: 45% center; }   /* 2010 MSDC visits Virginia for a rare public seminar by the legendary Rickson Gracie */
.grid img.wp-image-321{ object-view-box: inset(15%); }   /* 2010 Blue Belt Competitors after BJJ Competition */
.grid img.wp-image-313{ object-view-box: inset(8%); }   /* 2006 NoGi Seminar */