/**
 * Theme Name: Hello Elementor Child
 * Description: Child theme of Hello Elementor. Carries the entire ScoreMasters® design system.
 * Author: ScoreMasters
 * Template: hello-elementor
 * Version: 1.0.93
 */

/* ==========================================================================
   ScoreMasters — global header pinning (DESIGN.md v2.1.x)
   --------------------------------------------------------------------------
   The header (smhdrjs, post 38) base rule uses position:sticky. On inner
   pages sticky FAILS because the HFE header wrapper (#masthead) is only
   header-height tall, so sticky has no scroll range and the espresso bar
   scrolls away. Force position:fixed on ALL pages here (JS-independent,
   works even with JS off). The homepage already used fixed via body.home,
   so its transparent->solid behaviour (handled by smhdrjs .sm-scrolled) is
   unaffected. Header height = 58px logo + 20px padding = 78px (desktop/
   tablet); 46px logo + 20px = 66px (<=767px).
   ========================================================================== */
.sm-header{
  position:fixed !important;
  top:0; left:0; right:0;
  width:100%;
  z-index:999;
}
/* Preserve the WP admin-bar offset for logged-in users */
body.admin-bar .sm-header{ top:32px !important; }
@media screen and (max-width:782px){ body.admin-bar .sm-header{ top:46px !important; } }

/* Offset inner-page content so it is not hidden behind the fixed header.
   The homepage hero sits UNDER the transparent header by design, so exclude
   body.home. */
body:not(.home) #content{ padding-top:78px; }
@media (max-width:767px){ body:not(.home) #content{ padding-top:66px; } }

/* ==========================================================================
   ScoreMasters — inner-page nav: force COMPACT solid height on tablet/mobile
   (item 5a / 5c). The outer .sm-header padding is already a compact 10px, but
   its inner boxed container (.e-con-inner) carries 30px (tablet) / 15px
   (mobile) of vertical padding left over from the hero-state layout — which
   inflated the SOLID inner-page bar to 138px (tablet) / 96px (mobile) even
   though the logo is already the compact 58px/46px. Zero that inner padding on
   inner pages so the bar = logo + 10/10 = 78px (tablet) / 66px (mobile),
   matching the #content padding-top offsets above (no gap, no overlap).
   Homepage (body.home) keeps its larger hero-state nav untouched.
   ========================================================================== */
@media (max-width:1024px){
  body:not(.home) .sm-header > .e-con-inner{ padding-top:0 !important; padding-bottom:0 !important; }
}

/* ==========================================================================
   Remove leftover Soudify demo decorative gradient-TRIANGLE spacers in
   Footer 1 (post 40): two `spacer` widgets with _mask_shape:triangle +
   gradient fill, pushed upward/right (offset_y -270, offset_x_end 150/-163.5,
   rotateZ 180) so they overhang into the bottom-right of the content ABOVE the
   footer — e.g. the contact "Get in Touch" section. Desktop-only decor
   (already hidden-mobile). Hidden site-wide. Reversible.
   ========================================================================== */
.elementor-element-66a64f5,
.elementor-element-82e2520{ display:none !important; }


/* ==========================================================================
   ScoreMasters — Credential Proof Band entrance (DESIGN.md v2.1.32)
   --------------------------------------------------------------------------
   Canonical motion standard: translateY(28px)->none, opacity 0->1, 1.0s
   cubic-bezier(.22,.61,.36,1). The pre-state class .sm-band-pre is applied by
   JS ONLY (inline script in functions.php) — with JS off the band is simply
   visible. Classes are removed ~1.1s after reveal so no transform lingers.
   Front page only (the band lives in the homepage hero, widget htrust).
   ========================================================================== */
body.home .elementor-element-htrust.sm-band-pre{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1);}
body.home .elementor-element-htrust.sm-band-pre.sm-band-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
body.home .elementor-element-htrust.sm-band-pre{opacity:1!important;transform:none!important;transition:none!important;}
}

/* ==========================================================================
   ScoreMasters — global footer (Footer 1, HFE post 40) · DESIGN.md v2.1.73
   --------------------------------------------------------------------------
   Espresso footer rebuilt in post 40 (background #151311, gold-light headings,
   warm-cream links, muted-tan fine print, gold-light low-opacity dividers).
   The widget-level colours are set in Elementor; these rules are the safety
   net for the link colours/hover that Elementor's text-editor + theme defaults
   would otherwise override, scoped to the footer container (#elementor-element-
   464b062) so nothing else is affected.
   ========================================================================== */
/* Body / contact / copyright links → warm cream, hover gold-light */
.elementor-element-464b062 .elementor-widget-text-editor a,
.elementor-element-464b062 .sm-ftr-copy-link{
  color:#DED3C3 !important;
  transition:color .25s ease;
}
.elementor-element-464b062 .elementor-widget-text-editor a:hover,
.elementor-element-464b062 .sm-ftr-copy-link:hover{ color:#C9A96E !important; }
/* Icon-list link hover (Services / Explore / Legal) → gold-light, belt-and-braces */
.elementor-element-464b062 .elementor-icon-list-item:hover .elementor-icon-list-text{ color:#C9A96E; }

/* --------------------------------------------------------------------------
   Back-to-top button (.scrollup) — keep bottom-RIGHT and never overlap the
   footer legal row. The theme pins it fixed bottom-left; we move it to the
   right, and an IntersectionObserver (child functions.php) adds .sm-btt-park
   when the footer enters the viewport, switching it to absolute so it docks
   just ABOVE the footer instead of sitting over the legal links.
   -------------------------------------------------------------------------- */
.scrollup{ left:auto !important; right:24px !important; }
.scrollup.sm-btt-park{ position:absolute !important; bottom:auto !important; right:24px !important; }
@media (max-width:767px){ .scrollup{ right:16px !important; } .scrollup.sm-btt-park{ right:16px !important; } }

/* --------------------------------------------------------------------------
   Footer v2.3 (DESIGN.md v2.1.76)
   FIX C — bottom bar flush to the four-column grid edges. The two bottom-bar
   child containers (58a70e7 copyright, c5a1fbe legal+social cluster) carry
   Elementor content_width:full, which stretched them to 50/50 so the cluster
   never reached the right grid edge. Force them to size to content so the
   parent's justify-content:space-between pins copyright flush-left and the
   cluster flush-right (matching the grid's Get-in-Touch ↔ Payment edges).
   Desktop/tablet_extra only; ≤767 the bar is column-centred (untouched).
   -------------------------------------------------------------------------- */
@media (min-width:1100px){
  /* Elementor's justify_content data key wasn't emitting CSS (computed
     "normal"), so the content-width children packed left. Force the split. */
  .elementor-element-2b1e002{ justify-content:space-between !important; }
  .elementor-element-2b1e002 > .e-con-inner > .elementor-element-58a70e7,
  .elementor-element-2b1e002 > .e-con-inner > .elementor-element-c5a1fbe,
  .elementor-element-2b1e002 > .elementor-element-58a70e7,
  .elementor-element-2b1e002 > .elementor-element-c5a1fbe{
    flex:0 1 auto !important;
    width:auto !important;
    max-width:none !important;
  }
  /* FIX C cont. (DESIGN.md v2.1.78 regression) — v2.1.78 appended a zero-width
     inline-script widget (ckstjs1, the Cookie-Settings consent shim) as a THIRD
     flex child of this space-between row. On the wide single-row desktop layout
     that invisible widget took the flush-right slot, pushing the legal+social
     cluster toward the middle and leaving a trailing gap after "Cookie Settings"
     (≈139px @1440). margin-left:auto re-pins the cluster hard against the right
     edge (matching the Accepted-Payment column), independent of any trailing
     zero-width sibling. No-op at the wrap breakpoints (≤1024) and at ≤767
     (column-centred, outside this media query); ckstjs1 left untouched. */
  .elementor-element-2b1e002 > .e-con-inner > .elementor-element-c5a1fbe,
  .elementor-element-2b1e002 > .elementor-element-c5a1fbe{
    margin-left:auto !important;
  }
}

/* FIX D — crisper light-on-dark footer type (no shadow): subpixel→grayscale
   smoothing across the footer, and bump the four Playfair column titles to
   weight 600 for more stroke presence on espresso. */
.elementor-element-464b062,
.elementor-element-464b062 *{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.elementor-element-ffb7a34 .elementor-heading-title,
.elementor-element-2d43dde .elementor-heading-title,
.elementor-element-6542251 .elementor-heading-title,
.elementor-element-cfdba64 .elementor-heading-title{
  font-weight:600 !important;
}

/* ── Complianz cookie table: neutralize Soudify h3/h4 heading bleed (DESIGN.md v2.1.82) ── */
#cmplz-cookies-overview summary.cmplz-service-header h3 {
  font-size: 18px;
  line-height: 1.3;
  text-transform: none;
}
#cmplz-cookies-overview h4 {
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: .04em;
}

/* ── Cookie table: widen + align service/category columns (DESIGN.md v2.1.83) ── */
/* Root cause: .sm-cookie-table (the [cmplz-cookies] shortcode widget) collapses to ~345px because
   it is a non-stretched flex item inside the smckbody flex-column, AND its intended
   max-width:760px is overridden by Elementor's .e-con>.elementor-widget{max-width:100%!important}.
   Forcing width:100% on #cmplz-cookies-overview alone does NOT help (it just fills the already-
   collapsed parent), so the width is forced on the widget itself, capped to the body-text column. */
.sm-cookie-table{
  width:100% !important;
  max-width:720px !important;
  margin-inline:auto !important;
}
.sm-cookie-table .elementor-shortcode{ width:100%; }
#cmplz-cookies-overview{
  width:100%;
  max-width:720px;
  margin-inline:auto;
}
/* Each service row is its own grid on summary.cmplz-service-header > div. Re-declare cmplz's named
   lines (heading/paragraph) so item placement stays deterministic. Columns:
   [heading] name minmax(40%,max-content) → 288px @720 so names + badges align across rows |
   [paragraph] category badge (max-content, never wraps) | [sr] 0 screen-reader label |
   [spacer] 1fr flexible | [end] max-content (cmplz's vestigial trailing track; no caret element exists). */
#cmplz-cookies-overview summary.cmplz-service-header > div{
  grid-template-columns:[heading] minmax(40%, max-content) [paragraph] max-content [sr] 0 [spacer] 1fr [end] max-content !important;
  column-gap:0 !important;
  align-items:center;
}
#cmplz-cookies-overview summary.cmplz-service-header > div > h3{
  padding-right:24px;            /* name ↔ category separation */
}

/* ── Cookie table: stack name over badge on phones (DESIGN.md v2.1.83) ── */
/* cmplz places name/badge into grid-template-AREAS ("heading paragraph label checkbox chevron",
   set via the grid-template shorthand in document-grid.min.css). Overriding only
   grid-template-columns leaves those 5 areas intact as implicit tracks, so the row never stacks.
   Reset grid-template-areas to none AND clear the children's named-area placement so they
   auto-flow into a single 1fr column — name over badge, both left-aligned. */
@media (max-width: 480px){
  #cmplz-cookies-overview summary.cmplz-service-header > div{
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    row-gap: 2px;
  }
  #cmplz-cookies-overview summary.cmplz-service-header > div > h3{ padding-right: 0; grid-area: auto !important; }
  #cmplz-cookies-overview summary.cmplz-service-header > div > p{ grid-area: auto !important; }
}

/* ==========================================================================
   Background-video FULL-BLEED (v1.0.16, DESIGN.md v2.1.98)
   --------------------------------------------------------------------------
   Make Elementor's hero background <video> behave like a native full-bleed
   hero video: object-fit:cover edge-to-edge, always visible, poster-backed
   (the poster is set in assets/js/sm-bgvideo.js to the section's fallback
   image). Replaces the old visibility:hidden/opacity:0 hide + .sm-bgvideo-
   ready frame-gated reveal (Safari paints a hidden bg-video black; the poster
   now covers the pre-first-frame moment instead, with no double-image since
   the video box exactly overlaps the section).

   Elementor sizes this <video> as a CENTERED BAND on this tall hero — it sets
   width/height (~1200x638) and a centering transform/offsets via its own
   stylesheet (NO inline style), leaving image strips top & bottom. We override
   to a true full-bleed box: top/right/bottom/left:0 !important (the bare
   `inset:0` shorthand loses to Elementor's longhand !important offsets, so the
   offsets are forced individually) + width/height:100% + transform:none, so
   the <video> bounding box == the hero section box (measured 1200x1883 @1200w,
   top:0 left:0) and object-fit:cover crops to fill, centered (matches the
   section's 50% 50% background-position). The container is already
   position:absolute;inset:0 filling the section; reinforced here.

   Selector matches only background videos, so the FAQ cellist (CSS background)
   and Selected Works video widgets are unaffected.
   ========================================================================== */
.elementor-background-video-container{ position:absolute; inset:0; }
.elementor-background-video-hosted{
  position:absolute !important;
  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  width:100% !important; height:100% !important; max-width:none !important; margin:0 !important;
  transform:none !important;
  object-fit:cover !important; object-position:center center !important;
  visibility:visible !important; opacity:1 !important; transition:none !important;
}

/* ==========================================================================
   Background-video STILL-ONLY state (v1.0.91, DESIGN.md v2.130.0)
   --------------------------------------------------------------------------
   assets/js/sm-bgvideo.js adds .sm-bgv-still to the video container when the
   visitor asks for reduced data (Save-Data) or reduced motion -- the video is
   then never requested -- or when play() is refused (autoplay blocked, e.g.
   iPhone Low Power Mode). Hiding the whole container lets the section's own
   fallback background (the same still) show, so no play button, black frame
   or broken-video icon can paint. WebKit's start-playback button is also
   suppressed on the bg video as a second line; it has its own rule so a
   browser that rejects the pseudo-element drops only that rule.
   ========================================================================== */
.elementor-background-video-container.sm-bgv-still{ display:none !important; }
.elementor-background-video-hosted::-webkit-media-controls-start-playback-button{ display:none !important; -webkit-appearance:none; }

/* ==========================================================================
   ScoreMasters — Who We Serve: equal-height card rows via subgrid (DESIGN.md v2.2.0)
   --------------------------------------------------------------------------
   Homepage post 23, widget wwscrd1 (.sm-serve). Card titles run 1-3 lines
   depending on width ("Sacred Music" = 1; most = 2; "Musical Theater, Artists
   & Producers" / "Ensembles, Choirs & Orchestras" reach 3 in the narrow 2-col
   (~768) and narrow 3-col (~1025-1300) bands), so a fixed 2-line min-height
   could not align rows that mix 2- and 3-line titles. Instead each card spans
   its three parent grid rows as a SUBGRID, so the title / image / blurb tracks
   size to the tallest title (and blurb) in their row at EVERY width — bodies
   always start at the same Y and cards in a row are equal height, with no
   per-breakpoint magic numbers. row-gap:0 on the card removes the inherited
   inter-track gap (internal spacing stays on the existing trow padding + 18px
   image margin); the parent's 32/24/20px row-gap still separates the visual
   rows. Column stacking (3 -> 2 <=1024 -> 1 <=767) is unchanged; subgrid simply
   re-flows with it. Higher specificity (.sm-serve prefix) beats the widget's
   inline <style>. Scoped strictly to .sm-serve cards.
   ========================================================================== */
.sm-serve .sm-serve-card{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:subgrid;
  grid-row:span 3;
  row-gap:0;
}

/* ==========================================================================
   ScoreMasters — Careers page (/careers/, post 7574)  [DESIGN.md v2.3.0]
   Scoped .careers-* rules only. Hero bg image+position lives page-scoped in the
   careerscss HTML widget (AA-tunable). Standalone 4th form (NOT the Parity Spec).
   ========================================================================== */
.careers-hero-photo{position:relative;overflow:hidden;}
.careers-hero-photo > *{position:relative;z-index:1;}
.careers-hero-photo .careers-h1,.careers-hero-photo .careers-motto{width:58%;max-width:640px;}
.careers-h1 .elementor-heading-title{font-family:'Playfair Display',serif;font-weight:700;font-size:64px;line-height:1.06;letter-spacing:.01em;color:#ffffff!important;text-shadow:0 2px 16px rgba(0,0,0,.6);margin:0 0 12px;text-align:left;}
.careers-motto .elementor-heading-title{font-family:'Playfair Display',serif;font-weight:700!important;font-style:italic!important;font-size:34px;line-height:1.2;letter-spacing:0;text-transform:none!important;color:#c9a96e!important;text-shadow:0 2px 14px rgba(0,0,0,.6);margin:0;text-align:left;}
@media(min-width:768px) and (max-width:1024px){.careers-hero-photo{min-height:540px;justify-content:flex-end;align-items:flex-start;}.careers-hero-photo .careers-h1,.careers-hero-photo .careers-motto{width:74%;max-width:none;}.careers-h1 .elementor-heading-title{font-size:48px;}.careers-motto .elementor-heading-title{font-size:29px;}}
@media(max-width:767px){.careers-hero-photo{align-items:flex-start;justify-content:flex-end;}.careers-hero-photo .careers-h1,.careers-hero-photo .careers-motto{width:100%;}.careers-h1 .elementor-heading-title{font-size:34px;text-align:left;}.careers-motto .elementor-heading-title{font-size:22px;text-align:left;}}@media(min-width:1300px) and (max-width:1400px) and (orientation:landscape){.careers-hero-photo{padding-top:120px;}}
/* ---- INTRO + ELIGIBILITY (Canvas #f7f1ea) ---- */
.careers-intro{max-width:820px;margin:0 auto;text-align:center;}
.careers-intro,.careers-intro p{font-family:'Manrope',sans-serif;font-size:18px;line-height:1.75;color:#3d342a;}
.careers-elig-wrap{width:100%;max-width:820px;margin:22px auto 0;}
.careers-elig{list-style:none;margin:0;padding:0;}
.careers-elig li{position:relative;padding:0 0 0 38px;margin:0 0 16px;font-family:'Manrope',sans-serif;font-size:16.5px;line-height:1.6;color:#1a1712;}
.careers-elig li:last-child{margin-bottom:0;}
.careers-elig li::before{content:'';position:absolute;left:0;top:3px;width:22px;height:22px;background:#7a5c2e;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;}
/* ---- WHAT HAPPENS NEXT (Sand #d4c4a8) ---- */
.careers-next-h .elementor-heading-title{font-family:'Playfair Display',serif;font-weight:700;font-size:32px;color:#1a1712;margin:0 0 12px;text-align:center;}
.careers-next-body{max-width:760px;margin:0 auto;text-align:center;}
.careers-next-body,.careers-next-body p{font-family:'Manrope',sans-serif;font-size:17px;line-height:1.7;color:#2e261b;margin:0;}
/* ---- FORM HEADINGS (Playfair near-black + gold rule) ---- */
.careers-form .elementor-field-group-html_personal,.careers-form .elementor-field-group-html_music,.careers-form .elementor-field-group-html_experience,.careers-form .elementor-field-group-html_additional{margin-top:14px;}
.careers-form .elementor-field-group-html_personal{margin-top:0;}
.careers-formhead__t{display:block;font-family:'Playfair Display',serif;font-weight:600;font-size:23px;line-height:1.2;color:#1a1712;padding-bottom:10px;border-bottom:2px solid #c9a96e;}
/* ---- FORM FIELDS (mirrors Contact smform; scoped .careers-form) ---- */
.careers-form .elementor-field-group{margin-bottom:18px;}
.careers-form .elementor-field-label{font-family:'Manrope',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:14px!important;font-weight:600!important;color:#4a4030;margin-bottom:8px;display:block;}
.careers-form .elementor-field-required .elementor-field-label:after,.careers-form .elementor-mark-required .elementor-field-label:after{color:#7c1f3a!important;font-size:1.35em;margin-left:4px;line-height:1;vertical-align:middle;}
.careers-form .elementor-field-textual,.careers-form .elementor-field-group .elementor-field:not(.elementor-field-type-upload):not([type=file]):not([type=checkbox]):not([type=radio]),.careers-form select.elementor-field{width:100%;background:#fff;border:1px solid #d8c8ac;border-radius:4px;padding:13px 16px;font-family:'Manrope',sans-serif;font-size:16px;line-height:1.5;color:#1a1712;box-shadow:none;transition:border-color .2s ease,box-shadow .2s ease;}
.careers-form .elementor-field-textual:focus,.careers-form select.elementor-field:focus,.careers-form .elementor-field:focus{outline:none;border:2px solid #7a5c2e;box-shadow:0 0 0 1px rgba(166,130,79,.15);}
.careers-form textarea.elementor-field-textual{min-height:104px;resize:vertical;}
.careers-form input[type=number]{-moz-appearance:textfield;}
/* radios + checkboxes */
.careers-form .elementor-field-subgroup{gap:8px 22px;margin-top:4px;}
.careers-form .elementor-field-subgroup .elementor-field-option{font-family:'Manrope',sans-serif;font-size:15px;color:#1a1712;display:inline-flex;align-items:center;gap:8px;}
.careers-form .elementor-field-subgroup input[type=checkbox],.careers-form .elementor-field-subgroup input[type=radio]{accent-color:#7a5c2e;width:17px;height:17px;flex:0 0 auto;}
.careers-form .elementor-field-subgroup.elementor-subgroup-inline{display:flex;flex-wrap:wrap;gap:10px 26px;}
/* multi-column checkbox groups */
.careers-form .elementor-field-group-notation_software .elementor-field-subgroup,.careers-form .elementor-field-group-daw_software .elementor-field-subgroup{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;}
.careers-form .elementor-field-group-services .elementor-field-subgroup{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px 20px;}
@media(max-width:1024px){.careers-form .elementor-field-group-services .elementor-field-subgroup{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.careers-form .elementor-field-group-notation_software .elementor-field-subgroup,.careers-form .elementor-field-group-daw_software .elementor-field-subgroup,.careers-form .elementor-field-group-services .elementor-field-subgroup{grid-template-columns:1fr;}}
/* uploads */
.careers-form .elementor-field-type-upload .elementor-field{width:100%;background:#fff;border:1px dashed #d8c8ac;border-radius:4px;padding:12px 16px;font-family:'Manrope',sans-serif;font-size:14px;color:#4a4030;}
/* helper text */
.careers-form .sm-help{margin:0;font-family:'Manrope',sans-serif;font-size:13px;line-height:1.5;color:#7a6a52;font-style:italic;}
.careers-form .elementor-field-group-samples_help{margin-top:0;}
/* selects: strip native wrapper (Choices.js replaces) */
.careers-form .elementor-select-wrapper{border:0!important;padding:0!important;background:transparent!important;box-shadow:none!important;min-height:0!important;}
.careers-form .elementor-select-wrapper .select-caret-down-wrapper{display:none!important;}
.careers-form .elementor-select-wrapper::before{content:none!important;display:none!important;}
/* reCAPTCHA v3 invisible */
.careers-form .elementor-field-type-recaptcha_v3{margin-bottom:0!important;}
.careers-form .elementor-field-type-recaptcha_v3 .elementor-field{background:none!important;border:0!important;padding:0!important;box-shadow:none!important;min-height:0!important;}
.grecaptcha-badge{visibility:hidden!important;}
.sm-recaptcha-disclosure{max-width:820px;margin:16px auto 0;font-family:'Manrope',sans-serif;font-size:12.5px;line-height:1.6;color:#4a4030;text-align:center;}
.sm-recaptcha-disclosure a{color:#7c1f3a;text-decoration:underline;}
/* acceptance (consent + declaration) */
.careers-form .elementor-field-type-acceptance .elementor-field-subgroup{align-items:flex-start;gap:10px;}
.careers-form .elementor-field-type-acceptance .elementor-field-option,.careers-form .elementor-field-type-acceptance label{font-family:'Manrope',sans-serif;font-size:14px;color:#4a4030;line-height:1.5;font-weight:400;text-transform:none;letter-spacing:normal;}
.careers-form .elementor-field-type-acceptance a{color:#7c1f3a;text-decoration:underline;}
.careers-form .elementor-field-type-acceptance input[type=checkbox]{accent-color:#7a5c2e;width:17px;height:17px;margin-top:2px;flex:0 0 auto;}
/* buttons: submit gradient pill + clear-form secondary */
.careers-form .elementor-field-type-submit{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:30px;}
.careers-form .elementor-button{display:inline-flex;align-items:center;justify-content:center;text-align:center;border:0;cursor:pointer;border-radius:999px;padding:16px 44px;color:#fff;font-family:'Manrope',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:13px;background-image:linear-gradient(100deg,#c9a96e 0%,#b07a4a 42%,#7c1f3a 100%)!important;background-color:transparent!important;box-shadow:0 4px 18px rgba(124,31,58,.22);transition:box-shadow .25s ease,transform .25s ease,background-image .25s ease;}
.careers-form .elementor-button:hover{background-image:linear-gradient(100deg,#d4b87f 0%,#bb854f 42%,#8e2545 100%)!important;box-shadow:0 8px 26px rgba(124,31,58,.30);transform:translateY(-2px);}
.careers-form .elementor-button .elementor-button-icon{display:none!important;}
.careers-clear-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:15px 36px;cursor:pointer;font-family:'Manrope',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:#151311;background:transparent;border:1px solid #7a5c2e;transition:background .2s ease,color .2s ease,border-color .2s ease;}
.careers-clear-btn:hover{background:#7a5c2e;color:#ffffff;border-color:#7a5c2e;}
/* [8] rolling-label keyboard parity + reduced-motion guard (theme drives :hover) */
.careers-form .soudify-button-effect:focus-visible .soudify-button-clip .hover-text{transform:translate3d(0,-100%,0);}
@media(prefers-reduced-motion:reduce){.careers-form .soudify-button-clip .hover-text{transition:none!important;transform:none!important;}}
@media(max-width:767px){.careers-form .elementor-button,.careers-clear-btn{width:100%;}}
/* success message centered */
.careers-form .elementor-message-success{text-align:center!important;margin-top:28px!important;}
/* Choices.js brand dropdown (country) */
.careers-form .elementor-field-type-select .choices{margin-bottom:0;width:100%;font-family:'Manrope',sans-serif;font-size:16px;}
.careers-form .elementor-field-type-select .choices__inner{display:flex;align-items:center;width:100%;background:#fff;border:1px solid #d8c8ac;border-radius:4px;min-height:52px;box-sizing:border-box;padding:0 42px 0 16px;font-size:16px;line-height:1.5;color:#1a1712;}
.careers-form .elementor-field-type-select .choices.is-focused .choices__inner,.careers-form .elementor-field-type-select .choices.is-open .choices__inner{border-color:#7a5c2e;box-shadow:0 0 0 1px rgba(166,130,79,.35);}
.careers-form .elementor-field-type-select .choices.is-open .choices__inner{border-radius:4px 4px 0 0;}
.careers-form .elementor-field-type-select .choices__list--single{padding:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.careers-form .elementor-field-type-select .choices__placeholder{opacity:1;color:#7a6a52;}
.careers-form .elementor-field-type-select .choices[data-type*=select-one]::after{content:'';border:0!important;width:18px;height:18px;margin-top:-9px;right:14px;background:#7a5c2e;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;transition:transform .2s ease;}
.careers-form .elementor-field-type-select .choices[data-type*=select-one].is-open::after{transform:rotate(180deg);}
.careers-form .elementor-field-type-select .choices__list--dropdown,.careers-form .elementor-field-type-select .choices__list[aria-expanded]{border:1px solid #d8c8ac;border-radius:0 0 4px 4px;background:#fff;box-shadow:0 12px 32px rgba(122,92,46,.18);z-index:999;}
.careers-form .elementor-field-type-select .choices__list--dropdown .choices__item,.careers-form .elementor-field-type-select .choices__list[aria-expanded] .choices__item{font-family:'Manrope',sans-serif;font-size:16px;color:#1a1712;padding:11px 16px;}
.careers-form .elementor-field-type-select .choices__input{font-family:'Manrope',sans-serif;font-size:15px;padding:10px 12px;background:#faf6ef;}
.careers-form .elementor-field-type-select .choices__item--choice.is-highlighted{background:#f0e3cc!important;color:#1a1712;}
.careers-form .elementor-field-type-select select.choices__input--hidden{display:block!important;position:absolute!important;left:8px!important;bottom:0!important;width:1px!important;height:1px!important;min-height:0!important;opacity:0!important;padding:0!important;margin:0!important;border:0!important;pointer-events:none!important;clip-path:inset(50%);}

/* ==========================================================================
   ScoreMasters — FAQ (post 7573): toggle icon moved RIGHT -> LEFT (DESIGN.md v2.3.6)
   --------------------------------------------------------------------------
   The /faq/ Nested-Accordion (native <details>/<summary>, de-boxed to hairline
   dividers) renders each row as summary.e-n-accordion-item-title
   (display:flex; justify-content:flex-start; align-items:center; gap:18px).
   Elementor pushes the toggle icon to the RIGHT via the icon wrapper
   .e-n-accordion-item-title-icon carrying order:5 + margin-inline-start:18px,
   so it trails the question text. This reposition is CSS-ONLY (no _elementor_
   data): the icon is flipped to the LEFT of the text on a common left edge by
   giving the wrapper order:-1 and zeroing its inline margin; the summary's gap
   (tuned 18px -> 14px) provides icon<->text spacing. The +/- swap (e-fas-plus /
   e-fas-minus, toggled by Elementor on the open state) and the open/close
   behaviour are UNTOUCHED — only the icon's position changes, not its art or
   its toggle. VERTICAL: summary align-items:flex-start + a first-line-tall
   (min-height:24px = the 16px/24px header line) icon box optically centres the
   glyph on the FIRST line of multi-line questions (reads cleaner than centring
   it against the whole multi-line block). Fixed 17px icon width keeps every +
   on one left edge regardless of question length. Scoped to body.page-id-7573
   so no other accordion/widget on the site is affected. Hairline dividers,
   hover/active styles and the sticky category nav are left untouched.
   ========================================================================== */
body.page-id-7573 summary.e-n-accordion-item-title,body .sm-page summary.e-n-accordion-item-title{
  justify-content:flex-start !important;
  align-items:flex-start !important;
  gap:14px !important;
}
body.page-id-7573 summary.e-n-accordion-item-title .e-n-accordion-item-title-icon,body .sm-page summary.e-n-accordion-item-title .e-n-accordion-item-title-icon{
  order:-1 !important;             /* place the toggle icon FIRST (left of the text) */
  margin-inline:0 !important;      /* drop Elementor's margin-inline-start:18px right-push */
  flex:0 0 auto !important;
  width:17px !important;           /* fixed icon column -> all + icons share one left edge */
  min-height:24px;                 /* = header first-line line-height: centre glyph on line 1 */
  align-items:center !important;   /* centre the 15px glyph inside the 24px box */
  justify-content:center !important;
}


/* === Per-page inner-form image overrides (keyed on body.page-id-N) — append one rule per page (DESIGN.md v2.3.10) === */
/* The shared before-footer form (enqsec-inner, post 7603) keeps its default cellist image; each inner page may swap it here with NO edit to 7603. */
body.page-id-7652 .enqsec-inner-photo{
  background-image:url('/wp-content/uploads/2025/02/contact-sax-1800.jpg') !important;
  background-image:image-set(url('/wp-content/uploads/2025/02/contact-sax-1800.webp') type('image/webp'),url('/wp-content/uploads/2025/02/contact-sax-1800.jpg') type('image/jpeg')) !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

/* who-we-are (post 7702) — string players side image (v1.0.27) */
body.page-id-7702 .enqsec-inner-photo{
  background-image:url('/wp-content/uploads/2025/02/who-we-are-contact-strings-1600.webp') !important;
  background-size:cover !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
}

/* who-we-are (7702) mobile stacked strip — show in-focus cellist bow hand + more upper cello (v1.0.28) */
@media (max-width:767px){
  body.page-id-7702 .enqsec-inner-photo{ background-position:center 68% !important; }
}

/* who-we-serve (post 7723) — violin/bow portrait side image (v1.0.31) */
body.page-id-7723 .enqsec-inner-photo{
  background-image:url('/wp-content/uploads/2025/02/serve-contact-form.webp') !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

/* music-orchestration-arranging (post 7567) — orchestral session side image (v1.0.51).
   7567 receives the shared form via 7603's HFE include list (v2.24.0), so the form renders
   OUTSIDE .sm-page and this body.page-id-N rule is the correct mechanism — same as 7652/7702/7723. */
body.page-id-7567 .enqsec-inner-photo{
  background-image:url('/wp-content/uploads/2025/02/start-project-orch-arr-1200.webp') !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

/* music-engraving-score-preparation (post 7568) - engraving side image (v1.0.65).
   Same mechanism as 7652/7702/7723/7567. *** THIS IS THE ONLY MECHANISM THAT WORKS: the
   before-footer template renders OUTSIDE .sm-page, so a .sm-page-scoped rule and a custom
   property inherited from the page root can BOTH never reach it. Proved by measurement at
   v2.42.1 -- see DESIGN.md. */
body.page-id-7568 .enqsec-inner-photo{
  background-image:url('/wp-content/uploads/2026/08/start-project-engr-1200.webp') !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}


/* === Off-canvas mobile submenu toggle affordance (v1.0.30: caret right-closed/down-open) ==================
   Root cause: Soudify's nav-mobile.js injects a working <button.dropdown-toggle>
   into the off-canvas MAIN MENU (.handheld-navigation), but the theme's
   dropdown-toggle styling is scoped to .mobile-navigation, so the caret rendered
   via the soudify-icon font in #1a1712 (near-black) on the near-black menu and
   was invisible. Restore a visible gold caret + comfortable tap target +
   rotate-on-open. Child-theme only; Header 38 untouched; desktop nav unaffected.
   aria-expanded + #-parent label-tap are added by assets/js/sm-mobile-submenu.js. */
.soudify-mobile-nav .handheld-navigation .menu-item-has-children{position:relative;}
.soudify-mobile-nav .handheld-navigation .menu-item-has-children>a{padding-right:52px;}
.soudify-mobile-nav .handheld-navigation .menu-item-has-children>.dropdown-toggle{
  position:absolute;top:0;right:0;height:47px;z-index:3;width:52px;margin:0;padding:0;
  background:transparent;border:0;box-shadow:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  -webkit-appearance:none;appearance:none;
}
.soudify-mobile-nav .handheld-navigation .menu-item-has-children>.dropdown-toggle:focus-visible{
  outline:2px solid #c9a96e;outline-offset:-4px;border-radius:4px;
}
.soudify-mobile-nav .handheld-navigation .menu-item-has-children>.dropdown-toggle::before{display:none!important;}
.soudify-mobile-nav .handheld-navigation .menu-item-has-children>.dropdown-toggle::after{
  content:""!important;display:block;width:9px;height:9px;margin-top:0;
  border:0!important;border-right:2px solid #c9a96e!important;border-bottom:2px solid #c9a96e!important;
  background:none!important;font-size:0!important;
  transform:rotate(-45deg);transition:transform .3s ease;
}
.soudify-mobile-nav .handheld-navigation .menu-item-has-children>.dropdown-toggle.toggled-on::after{
  margin-top:-3px;transform:rotate(45deg);
}


/* === who-we-serve (7723) — Film/TV/Game "Selected Work" example (audio player + before/after slider) · DESIGN.md v2.8.9 ============
   Scoped to page 7723. Sits inside the Ecru Film section, beneath its text/image row. Entrance motion is driven by the page's
   own .ws-reveal IntersectionObserver (canonical 28px/1.0s/cubic-bezier(.22,.61,.36,1), 120ms stagger, viewport guard, PRM-safe).
   The <img-comparison-slider> web component + its visibility-gate CSS are enqueued for this page via functions.php (is_page(7723)). */
body.page-id-7723 .ws-sw,body .sm-page .ws-sw{max-width:1180px;margin:56px auto 0;text-align:left;}
body.page-id-7723 .ws-sw-kicker,body .sm-page .ws-sw-kicker{display:inline-flex;align-items:center;gap:14px;font-family:"Manrope",sans-serif;font-weight:700;font-size:17px;letter-spacing:.12em;text-transform:uppercase;color:#7a5c2e;line-height:1.2;margin:0 0 18px;}
body.page-id-7723 .ws-sw-kicker::before,body .sm-page .ws-sw-kicker::before{content:"";flex:0 0 auto;width:42px;height:40px;background:url('/wp-content/uploads/2025/02/icon-violin-camelgold.png') center/contain no-repeat;}
body.page-id-7723 .ws-sw-caption,body .sm-page .ws-sw-caption{font-family:"Manrope",sans-serif;font-weight:400;font-size:18px;line-height:1.7;color:#4a4030;margin:0 0 32px;}

/* ---- Audio player ---- */
body.page-id-7723 .ws-ap,body .sm-page .ws-ap{display:flex;align-items:center;gap:18px;width:100%;margin:0 0 24px;padding:16px 20px;background:#faf6ef;border:1px solid rgba(122,92,46,.18);border-radius:14px;box-shadow:0 10px 30px rgba(26,23,18,.10);container-type:inline-size;}
body.page-id-7723 .ws-ap-play,body .sm-page .ws-ap-play{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:64px;height:64px;padding:0;border:0;border-radius:50%;cursor:pointer;background:linear-gradient(135deg,#c9a96e 0%,#a6824f 52%,#7a5c2e 100%);box-shadow:0 6px 18px rgba(122,92,46,.42);transition:transform .25s ease,box-shadow .25s ease;}
body.page-id-7723 .ws-ap-play:hover,body .sm-page .ws-ap-play:hover{transform:scale(1.05);box-shadow:0 9px 24px rgba(122,92,46,.52);}
body.page-id-7723 .ws-ap-play svg,body .sm-page .ws-ap-play svg{display:block;}
body.page-id-7723 .ws-ap-ico-play,body .sm-page .ws-ap-ico-play{margin-left:3px;}
body.page-id-7723 .ws-ap-ico-pause,body.page-id-7723 .ws-ap-spinner,body .sm-page .ws-ap-ico-pause,body .sm-page .ws-ap-spinner{display:none;}
body.page-id-7723 .ws-ap.is-playing .ws-ap-ico-play,body .sm-page .ws-ap.is-playing .ws-ap-ico-play{display:none;}
body.page-id-7723 .ws-ap.is-playing .ws-ap-ico-pause,body .sm-page .ws-ap.is-playing .ws-ap-ico-pause{display:block;}
body.page-id-7723 .ws-ap.is-loading .ws-ap-ico-play,body.page-id-7723 .ws-ap.is-loading .ws-ap-ico-pause,body .sm-page .ws-ap.is-loading .ws-ap-ico-play,body .sm-page .ws-ap.is-loading .ws-ap-ico-pause{display:none;}
body.page-id-7723 .ws-ap.is-loading .ws-ap-spinner,body .sm-page .ws-ap.is-loading .ws-ap-spinner{display:block;}
body.page-id-7723 .ws-ap-spinner,body .sm-page .ws-ap-spinner{width:26px;height:26px;border-radius:50%;border:3px solid rgba(255,255,255,.45);border-top-color:#fff;animation:ws-ap-spin .8s linear infinite;}
@keyframes ws-ap-spin{to{transform:rotate(360deg);}}
body.page-id-7723 .ws-ap-main,body .sm-page .ws-ap-main{flex:1 1 auto;min-width:0;}
body.page-id-7723 .ws-ap-seek,body .sm-page .ws-ap-seek{position:relative;display:flex;align-items:center;height:20px;margin:0 0 8px;cursor:pointer;touch-action:none;}
body.page-id-7723 .ws-ap-track,body .sm-page .ws-ap-track{position:relative;width:100%;height:6px;border-radius:3px;background:rgba(122,92,46,.20);overflow:hidden;}
body.page-id-7723 .ws-ap-buffered,body .sm-page .ws-ap-buffered{position:absolute;left:0;top:0;height:100%;width:0;background:rgba(122,92,46,.34);}
body.page-id-7723 .ws-ap-played,body .sm-page .ws-ap-played{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,#a6824f,#7a5c2e);}
body.page-id-7723 .ws-ap-thumb,body .sm-page .ws-ap-thumb{position:absolute;top:50%;left:0;width:14px;height:14px;border-radius:50%;background:#7a5c2e;box-shadow:0 1px 4px rgba(26,23,18,.4);transform:translate(-50%,-50%);pointer-events:none;}
body.page-id-7723 .ws-ap-row,body .sm-page .ws-ap-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
body.page-id-7723 .ws-ap-time,body .sm-page .ws-ap-time{font-family:"Manrope",sans-serif;font-weight:600;font-size:13px;line-height:1;color:#5a4e3e;font-variant-numeric:tabular-nums;white-space:nowrap;}
body.page-id-7723 .ws-ap-sep,body .sm-page .ws-ap-sep{opacity:.5;}
body.page-id-7723 .ws-ap-vol,body .sm-page .ws-ap-vol{display:flex;align-items:center;gap:8px;}
body.page-id-7723 .ws-ap-mute,body .sm-page .ws-ap-mute{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:transparent;color:#7a5c2e;cursor:pointer;transition:background .2s ease;}
body.page-id-7723 .ws-ap-mute:hover,body .sm-page .ws-ap-mute:hover{background:rgba(122,92,46,.12);}
body.page-id-7723 .ws-ap-ico-muted,body .sm-page .ws-ap-ico-muted{display:none;}
body.page-id-7723 .ws-ap.is-muted .ws-ap-ico-vol,body .sm-page .ws-ap.is-muted .ws-ap-ico-vol{display:none;}
body.page-id-7723 .ws-ap.is-muted .ws-ap-ico-muted,body .sm-page .ws-ap.is-muted .ws-ap-ico-muted{display:block;}
body.page-id-7723 .ws-ap-vol-range,body .sm-page .ws-ap-vol-range{width:88px;height:4px;accent-color:#7a5c2e;cursor:pointer;}
body.page-id-7723 .ws-ap-play:focus-visible,body.page-id-7723 .ws-ap-seek:focus-visible,body.page-id-7723 .ws-ap-mute:focus-visible,body.page-id-7723 .ws-ap-vol-range:focus-visible,body .sm-page .ws-ap-play:focus-visible,body .sm-page .ws-ap-seek:focus-visible,body .sm-page .ws-ap-mute:focus-visible,body .sm-page .ws-ap-vol-range:focus-visible{outline:2px solid #7a5c2e;outline-offset:3px;}

/* ---- Before/after comparison slider ---- */
body.page-id-7723 .ws-sw-compare-wrap,body .sm-page .ws-sw-compare-wrap{max-width:none;margin:0;}
body.page-id-7723 .ws-sw-compare,body .sm-page .ws-sw-compare{position:relative;line-height:0;border-radius:8px;overflow:hidden;aspect-ratio:1500/2119;box-shadow:0 12px 34px rgba(26,23,18,.16);background:#e7ddce;}
body.page-id-7723 .ws-sw-compare img-comparison-slider,body .sm-page .ws-sw-compare img-comparison-slider{width:100%;display:block;--divider-width:3px;--divider-color:#7a5c2e;--divider-shadow:0 0 6px rgba(21,19,17,.35);}
body.page-id-7723 .ws-sw-compare img-comparison-slider img,body .sm-page .ws-sw-compare img-comparison-slider img{width:100%;height:auto;display:block;}
body.page-id-7723 .ws-sw-compare img-comparison-slider:focus,body .sm-page .ws-sw-compare img-comparison-slider:focus{outline:2px solid #7a5c2e;outline-offset:3px;}
body.page-id-7723 .ws-sw-compare img-comparison-slider:focus-visible,body .sm-page .ws-sw-compare img-comparison-slider:focus-visible{outline:2px solid #7a5c2e;outline-offset:3px;}
body.page-id-7723 .ws-sw-handle,body .sm-page .ws-sw-handle{display:flex;align-items:center;justify-content:center;}
body.page-id-7723 .ws-sw-handle-circle,body .sm-page .ws-sw-handle-circle{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#c9a96e 0%,#a6824f 52%,#7a5c2e 100%);box-shadow:0 6px 20px rgba(21,19,17,.4);}
body.page-id-7723 .ws-sw-lbl,body .sm-page .ws-sw-lbl{position:absolute;top:14px;z-index:5;pointer-events:none;font-family:"Manrope",sans-serif;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(21,19,17,.72);padding:7px 12px;border-radius:4px;line-height:1.1;}
body.page-id-7723 .ws-sw-lbl-l,body .sm-page .ws-sw-lbl-l{left:14px;}
body.page-id-7723 .ws-sw-lbl-r,body .sm-page .ws-sw-lbl-r{right:14px;}

@media (max-width:767px){
  body.page-id-7723 .ws-sw,body .sm-page .ws-sw{margin-top:44px;}
  body.page-id-7723 .ws-sw-caption,body .sm-page .ws-sw-caption{font-size:16px;}
  body.page-id-7723 .ws-ap,body .sm-page .ws-ap{gap:14px;padding:14px 16px;}
  body.page-id-7723 .ws-ap-play,body .sm-page .ws-ap-play{width:56px;height:56px;}
  body.page-id-7723 .ws-ap-vol-range,body .sm-page .ws-ap-vol-range{width:70px;}
  body.page-id-7723 .ws-sw-handle-circle,body .sm-page .ws-sw-handle-circle{width:50px;height:50px;}
  body.page-id-7723 .ws-sw-handle-circle svg,body .sm-page .ws-sw-handle-circle svg{width:20px;height:20px;}
  body.page-id-7723 .ws-sw-lbl,body .sm-page .ws-sw-lbl{font-size:10px;padding:6px 9px;letter-spacing:.1em;top:10px;}
  body.page-id-7723 .ws-sw-lbl-l,body .sm-page .ws-sw-lbl-l{left:10px;}
  body.page-id-7723 .ws-sw-lbl-r,body .sm-page .ws-sw-lbl-r{right:10px;}
}


/* === v2.9.0 — Film "Selected Work" realigned to the homepage layout (left-aligned, full content-column) + eyebrow-icon system · DESIGN.md v2.9.0 ===
   Kicker now carries the VIOLIN icon at the homepage .sm-svc-eyebrow ("FLAGSHIP CRAFTS") sizing (48x48 / .12em / 24px — the ::before is added in the .ws-sw-kicker rule above).
   All SIX client-section .ws-eyebrow icons swap violin -> music-stand, sized to the homepage music-stand eyebrow (48x48 desktop / 38x38 mobile). Single shared rule; no section markup edited. */
body.page-id-7723 .ws-eyebrow::before,body .sm-page .ws-eyebrow::before{background-image:url('/wp-content/uploads/2025/02/icon-music-stand-camelgold.png');width:48px;height:48px;}
@media (max-width:767px){
  body.page-id-7723 .ws-sw-kicker,body .sm-page .ws-sw-kicker{font-size:15px;gap:12px;}
  body.page-id-7723 .ws-sw-kicker::before,body .sm-page .ws-sw-kicker::before{width:36px;height:34px;}
  body.page-id-7723 .ws-eyebrow::before,body .sm-page .ws-eyebrow::before{width:38px;height:38px;}
}

/* ==========================================================================
   ScoreMasters — REUSABLE "Selected Works" engraving gallery + lightbox
   (DESIGN.md v2.10.0). Component classes, NOT page-scoped — namespaced
   .ws-gallery / .ws-gallery__* / .ws-lightbox / .ws-lightbox__* so they can be
   dropped into any section or page. First use: Who We Serve (7723) Publishers
   "Selected Works" gallery (4 engraving excerpts, Option A image-lightbox +
   Download-PDF). Motion reuses the page's .ws-reveal IO; kicker reuses
   .ws-sw-kicker. Backdrop mirrors the site's espresso hero scrim (#151311) and
   Elementor's native video lightbox convention.
   ========================================================================== */

/* ---- Gallery block (kicker + grid) ---- */
.ws-gallery-block{margin-top:56px;}
@media (max-width:767px){.ws-gallery-block{margin-top:40px;}}

/* ---- Grid: 2 columns, collapses to 1 below 768px ---- */
.ws-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;width:100%;}
@media (max-width:767px){.ws-gallery{grid-template-columns:1fr;gap:22px;}}

/* ---- Card (progressively enhanced <a>) ---- */
.ws-gallery__item{
  -webkit-appearance:none;appearance:none;
  display:flex;flex-direction:column;
  margin:0;padding:0;overflow:hidden;
  text-align:left;text-decoration:none;color:inherit;
  background:#ffffff;border:1px solid rgba(26,23,18,.10);border-radius:10px;
  box-shadow:0 8px 24px rgba(26,23,18,.10);
  cursor:pointer;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s cubic-bezier(.22,.61,.36,1);
}
.ws-gallery__item:hover,.ws-gallery__item:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 16px 38px rgba(26,23,18,.18);
}
.ws-gallery__item:focus-visible{outline:3px solid #7a5c2e;outline-offset:3px;}

/* ---- Caption (top) — title in <em>, brand body color ---- */
.ws-gallery__caption{
  font-family:"Manrope",sans-serif;font-size:16px;line-height:1.5;color:#7a5c2e;
  padding:18px 20px 14px;margin:0;
}
.ws-gallery__caption em{font-style:italic;}

/* ---- Thumbnail — aspect reserved (CLS guard) ---- */
.ws-gallery__thumb{
  display:block;width:100%;height:auto;
  aspect-ratio:1200/1629;object-fit:cover;
  background:#e7ddce;
}

/* ---- "Click to enlarge" micro-label (bottom) ---- */
.ws-gallery__label{
  display:block;
  font-family:"Manrope",sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:#7a5c2e;
  padding:12px 20px 16px;
}

/* ==========================================================================
   Lightbox overlay (built once by assets/ws-lightbox.js, appended to <body>)
   ========================================================================== */
.ws-lightbox{
  position:fixed;inset:0;z-index:2147483000;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(21,19,17,.90);
  opacity:0;transition:opacity .28s cubic-bezier(.22,.61,.36,1);
}
.ws-lightbox[hidden]{display:none;}
.ws-lightbox.is-open{opacity:1;}

.ws-lightbox__dialog{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  max-width:min(1000px,94vw);max-height:96vh;
}

.ws-lightbox__stage{display:flex;align-items:center;justify-content:center;max-width:100%;}
.ws-lightbox__img{
  display:block;width:auto;height:auto;
  max-width:min(880px,92vw);max-height:82vh;
  object-fit:contain;
  border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,.5);background:#e7ddce;
}

.ws-lightbox__meta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 22px;
  width:100%;max-width:640px;margin-top:18px;text-align:center;
}
.ws-lightbox__caption{
  font-family:"Manrope",sans-serif;font-size:16px;line-height:1.5;color:#f2ebe0;
}
.ws-lightbox__caption em{font-style:italic;}
.ws-lightbox__pdf{
  flex:0 0 auto;
  display:inline-flex;align-items:center;
  font-family:"Manrope",sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.04em;text-decoration:none;
  color:#1a1712;background:#c9a96e;
  padding:11px 22px;border-radius:999px;
  transition:background .25s ease,transform .25s ease;
}
.ws-lightbox__pdf:hover,.ws-lightbox__pdf:focus-visible{background:#d9bd88;transform:translateY(-1px);}
.ws-lightbox__pdf:focus-visible{outline:3px solid #f2ebe0;outline-offset:2px;}

.ws-lightbox__close{
  position:absolute;top:-14px;right:-14px;
  /* v2.55.0 -- LIFT ABOVE THE INJECTED VIDEO IFRAME. .ws-lightbox__video is a
     LATER-IN-DOM positioned sibling at z-index:auto, so in video mode it painted
     over this button and swallowed the click at its geometric centre: only the
     top strip stayed hit-testable (3/9 probe points at 1440, 5/9 at 390).
     A positive z-index lifts the button out of the auto layer. Geometry is NOT
     changed -- same box, same offsets. See DESIGN.md close-control entry. */
  z-index:1;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;color:#1a1712;
  background:#f2ebe0;border:none;border-radius:50%;
  box-shadow:0 6px 18px rgba(0,0,0,.4);cursor:pointer;
  transition:background .25s ease,transform .25s ease;
}
.ws-lightbox__close:hover,.ws-lightbox__close:focus-visible{background:#ffffff;transform:scale(1.06);}
.ws-lightbox__close:focus-visible{outline:3px solid #c9a96e;outline-offset:2px;}

/* Body scroll-lock while the lightbox is open (position preserved by JS). */
html.ws-lightbox-open,body.ws-lightbox-open{overflow:hidden;}

@media (max-width:767px){
  .ws-lightbox{padding:16px;}
  .ws-lightbox__img{max-width:94vw;max-height:74vh;}
  .ws-lightbox__close{top:-10px;right:-10px;width:40px;height:40px;font-size:18px;}
  .ws-lightbox__caption{font-size:15px;}
}

@media (prefers-reduced-motion:reduce){
  .ws-gallery__item,.ws-lightbox,.ws-lightbox__pdf,.ws-lightbox__close{transition:none;}
  .ws-gallery__item:hover,.ws-gallery__item:focus-visible{transform:none;}
}

/* ==========================================================================
   Musical Theatre — "Selected Works" video-over-excerpt gallery (DESIGN.md v2.11.0)
   --------------------------------------------------------------------------
   REUSES the Publishers component: .ws-gallery (2-col grid), .ws-sw-kicker,
   .ws-gallery__caption (#a6824f credit), .ws-gallery__label, .ws-gallery__thumb.
   ADDS a video cell (.ws-gallery__video) whose play button CLONES the homepage
   Selected-Works facade (.elementor-custom-embed-play), and a video content-type
   for the lightbox (.ws-lightbox__video) that assets/ws-lightbox.js injects an
   iframe into on open and removes on close. Cell stack: credit caption -> 16:9
   video -> excerpt figure, with the video FLUSH to the figure (0 gap).
   ========================================================================== */

/* Media cell: a container of TWO controls (video + figure), not a single
   trigger — neutralize the base card's whole-item pointer + hover-lift. */
.ws-gallery__item--media{cursor:default;}
.ws-gallery__item--media:hover,
.ws-gallery__item--media:focus-within{
  transform:none;
  box-shadow:0 8px 24px rgba(26,23,18,.10);
}

/* Video facade — 16:9, full cell width, poster covers, click-to-play. */
.ws-gallery__video{
  -webkit-appearance:none;appearance:none;
  display:block;position:relative;width:100%;
  margin:0;padding:0;border:0;
  aspect-ratio:16/9;background:#151311;overflow:hidden;
  cursor:pointer;line-height:0;
}
.ws-gallery__poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;background:#151311;
}
/* Play button — cloned from the homepage Selected-Works facade:
   gradient circle + white triangle, brand shadow, hover scale. */
.ws-gallery__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  width:84px;height:84px;border-radius:50%;
  background:linear-gradient(100deg,#c9a96e 0%,#b07a4a 42%,#7c1f3a 100%);
  box-shadow:0 10px 30px rgba(124,31,58,.38);
  transition:transform .3s ease,box-shadow .3s ease;
  pointer-events:none;
}
.ws-gallery__play::after{
  content:"";display:block;width:0;height:0;
  border-style:solid;border-width:13px 0 13px 22px;
  border-color:transparent transparent transparent #fff;
  margin-left:6px;
}
.ws-gallery__video:hover .ws-gallery__play,
.ws-gallery__video:focus-visible .ws-gallery__play{
  transform:translate(-50%,-50%) scale(1.06);
  box-shadow:0 14px 40px rgba(124,31,58,.48);
}
.ws-gallery__video:focus{outline:none;}
.ws-gallery__video:focus-visible{outline:3px solid #7a5c2e;outline-offset:3px;}

/* Excerpt figure — the image-lightbox trigger, FLUSH beneath the video (0 gap
   via the flex-column .ws-gallery__item with no row-gap). */
.ws-gallery__figure{
  margin:0;padding:0;display:block;position:relative;cursor:pointer;
}
.ws-gallery__figure:focus{outline:none;}
.ws-gallery__figure:focus-visible{outline:3px solid #7a5c2e;outline-offset:3px;}
/* MT excerpt thumbs are 1200x1697 — reserve their true ratio (CLS guard). */
.ws-gallery__item--media .ws-gallery__thumb{aspect-ratio:1200/1697;}

/* EVERY SERVICE-PAGE SCORE THUMB IS 1200x1697, SO ONE SHARED RULE REPLACES THE THREE PAGE-LOCAL
   COPIES (promoted v2.104.0, decided by Samy). *** THIS SUPERSEDES THE v2.43.0 RULE 3(a) WORDING THAT
   SAID THIS OVERRIDE IS FIXED PAGE-LOCALLY, "NEVER IN style.css". *** It also replaces the two DIFFERENT
   page-local selectors PASS M5 found, which were never interchangeable:
     .sm-page .ws-gallery__item > .ws-gallery__thumb   (7568, gallery cells only)
     .sm-page .ws-ex-audio .ws-gallery__thumb          (7569 and 7571, audio cells only)
   Neither covered the other construction, which is why 7567 -- carrying both and neither rule -- was
   cropping six thumbs by 4.17% until v2.104.0 re-shot its last two 1629-family files.
   *** THE `.sm-page` SCOPE IS DELIBERATE AND IS WHAT KEEPS WHO WE SERVE ON THE 1629 BASE. *** 7723 carries
   NO `.sm-page` root -- measured zero occurrences in its blob and zero `.sm-page` elements in its DOM --
   so this rule provably cannot reach its Publishers cells, whose thumbs really are 1200x1629.
   Specificity (0,2,0): it outranks the (0,1,0) base above, and it TIES with the (0,2,0) `--media` rule
   directly above it. The tie is harmless and is resolved by source order in this rule`s favour, because
   both declare the same value -- a `--media` cell on a .sm-page gets 1200/1697 either way. */
.sm-page .ws-gallery__thumb{aspect-ratio:1200/1697;}

/* Mobile play button — matches the homepage facade at <=767px. */
@media (max-width:767px){
  .ws-gallery__play{width:66px;height:66px;}
  .ws-gallery__play::after{border-width:10px 0 10px 17px;margin-left:5px;}
}

/* Video lightbox — the injected 16:9 wrapper (iframe fills it); reuses the
   overlay / scroll-lock / focus-trap from the image lightbox. */
.ws-lightbox__video{
  position:relative;
  width:min(92vw, calc(86vh * 16 / 9));
  max-width:92vw;max-height:86vh;
  aspect-ratio:16/9;
  background:#000;border-radius:4px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden;
}
.ws-lightbox__video[hidden]{display:none;}
/* Video mode sets [hidden] on the image stage + meta; their base display:flex
   would override the UA [hidden] rule, so force them hidden when flagged. */
.ws-lightbox__stage[hidden],.ws-lightbox__meta[hidden]{display:none;}
.ws-lightbox__video iframe{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;display:block;
}

@media (prefers-reduced-motion:reduce){
  .ws-gallery__play{transition:none;}
  .ws-gallery__video:hover .ws-gallery__play,
  .ws-gallery__video:focus-visible .ws-gallery__play{transform:translate(-50%,-50%);}
}

/* ==========================================================================
   ScoreMasters — /who-we-serve/ (post 7723) · CLIENT-SECTION CENTERED HEADERS
   + mobile image-first order (DESIGN.md v2.12.0)
   --------------------------------------------------------------------------
   The music-stand eyebrow (client name) + sub-headline are lifted out of the
   left/right text column into a full-width, horizontally CENTERED header block
   (.ws-sec-head-block) above the body+image row, for all six client sections.
   The body+image two-column alternation (>=900px) and the Selected-Works
   galleries (left-aligned) are unchanged. When the layout stacks (<900px) the
   IMAGE renders before the BODY. Scoped under #ws-page so these rules outrank
   the widget's inline <style> (which is later in source order). */
#ws-page .ws-sec-inner > .ws-sec-head-block{
  text-align:center;
  margin:0 auto 40px;
}
/* music-stand ::before icon stays attached to the name and centers with it */
#ws-page .ws-sec-head-block .ws-eyebrow{
  justify-content:center;
}
/* constrain the sub-headline to a readable measure, centered */
#ws-page .ws-sec-head-block .ws-sec-head{
  max-width:760px;
  margin:16px auto 0;
}

/* stacked layout (<900px, the section's own two-col breakpoint): tighten header
   spacing and force the IMAGE before the BODY for all six sections. */
@media (max-width:899px){
  #ws-page .ws-sec-inner > .ws-sec-head-block{margin-bottom:30px;}
  #ws-page .ws-sec-row{display:flex;flex-direction:column;}
  #ws-page .ws-sec-row > .ws-col--media{order:-1;margin-top:0;}
  #ws-page .ws-sec-row > .ws-col--text{order:0;margin-top:26px;}
}
@media (max-width:767px){
  #ws-page .ws-sec-inner > .ws-sec-head-block{margin-bottom:26px;}
  #ws-page .ws-sec-head-block .ws-sec-head{max-width:100%;}
}

/* ==========================================================================
   ScoreMasters — /who-we-serve/ (post 7723) · STACKED-WIDTH EYEBROW ICON FIX
   (DESIGN.md v2.12.1)
   --------------------------------------------------------------------------
   On the stacked layout (<=899px, the sections' own two-col breakpoint) the
   music-stand ::before icon stacks ABOVE the centered client name, so multi-
   line names (e.g. Musical Theatre, Film) center cleanly instead of leaving
   the icon pinned to the LEFT of the wrapped 2-line text. The base .ws-eyebrow
   is inline-flex row (gap:14px) in the widget's inline <style>; here we switch
   to a centered column at the stacked breakpoint. Desktop (>=900px) is left
   untouched (icon beside name). Icon background/size, name typography, colour,
   letter-spacing, and the sub-headline are all unchanged. */
@media (max-width:899px){
  body.page-id-7723 .ws-eyebrow,body .sm-page .ws-eyebrow{flex-direction:column;align-items:center;text-align:center;gap:0;}
  body.page-id-7723 .ws-eyebrow::before,body .sm-page .ws-eyebrow::before{margin:0 auto 8px;}
}


/* ==========================================================================
   Ensembles, Choirs & Orchestras -- "Selected Works" ON-PAGE examples
   (DESIGN.md v2.14.0 -- relayout; supersedes the v2.13.0 card treatment)
   --------------------------------------------------------------------------
   The two audio examples now sit DIRECTLY on the Canvas band in the Film
   "Selected Work" pattern -- NO outer card. Each column stacks on the page
   background: credit (.ws-sw-caption, dark prose) -> "Audio Mockup" micro-label
   -> audio player (.ws-ap--cell) -> [gap] -> the score image as an independent
   Publishers-style card (.ws-gallery__figure). NEW private classes .ws-ex-grid
   and .ws-ex-audio (deliberately NOT .ws-gallery / .ws-gallery__item, so the
   Publishers and Musical Theatre galleries cannot be touched). The player
   (.ws-ap--cell) and its container-query compaction are UNCHANGED from v2.13.0.
   ========================================================================== */

/* Grid: private to these examples (never .ws-gallery). 2-col >=768 / 1-col <768,
   full .ws-sec-inner width; wide gutters do the separation the cards used to. */
.ws-ex-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:48px;row-gap:56px;width:100%;}
@media (max-width:767px){.ws-ex-grid{grid-template-columns:1fr;row-gap:44px;}}

/* Cell: a bare stacking context on the page background -- NO card. */
.ws-ex-audio{display:flex;flex-direction:column;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;}

/* Credit line: the FILM caption treatment verbatim (#4a4030 18px Manrope 1.7),
   NOT the gold card credit. Rule: GOLD for micro-labels, DARK for on-page prose. */
body.page-id-7723 .ws-ex-audio .ws-sw-caption,body .sm-page .ws-ex-audio .ws-sw-caption{margin:0 0 14px;}

/* "Audio Mockup" micro-label spacing (hugs the player directly below it). */
.ws-ex-audio .ws-gallery__label--mockup{margin:0 0 12px;padding:0;}

/* Player -> figure gap: mirrors the Film player->slider margin (24px) and is
   clearly larger than the credit/label/player spacing, so the score image reads
   as an independent object. */
body.page-id-7723 .ws-ex-audio .ws-ap--cell,body .sm-page .ws-ex-audio .ws-ap--cell{margin:0 0 24px;}

/* "Audio Mockup" micro-label -- reuses the .ws-gallery__label treatment
   (.12em tracking, 12px, uppercase) but in Gold Deep #7a5c2e: on the Canvas band
   #a6824f is only 3.16:1 (fails AA) once it leaves the white card; #7a5c2e is
   5.51:1 and matches the "Selected Works" kicker above it. */
.ws-gallery__label--mockup{
  display:inline-flex;align-items:center;
  font-family:"Manrope",sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:#7a5c2e;
}
/* v2.14.1 -- short gold rule before "AUDIO MOCKUP", inline to its left.
   currentColor tracks the label colour (moved #a6824f -> #7a5c2e at v2.14.0).
   SCOPED TO --mockup ONLY: never the shared .ws-gallery__label ("Click to
   enlarge") in Publishers / Musical Theatre / the figures. content:"" so it adds
   nothing to the accessible name; optically centred on the 12px cap height. */
.ws-gallery__label--mockup::before{content:"";flex:0 0 auto;width:28px;height:2px;background:currentColor;margin-right:10px;position:relative;top:-1px;}

/* Score image = a STANDALONE Publishers card: identical background / 1px border /
   radius / shadow / hover-lift / gold focus ring to a .ws-gallery__item. The base
   .ws-gallery__thumb reserves aspect-ratio 1200/1629 (CLS guard); "Click to
   enlarge" sits bottom-left, #a6824f on white. */
.ws-ex-audio .ws-gallery__figure{
  display:flex;flex-direction:column;position:relative;
  margin:0;padding:0;overflow:hidden;text-align:left;
  background:#ffffff;border:1px solid rgba(26,23,18,.10);border-radius:10px;
  box-shadow:none;cursor:pointer;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s cubic-bezier(.22,.61,.36,1);
}
.ws-ex-audio .ws-gallery__figure:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(26,23,18,.18);}
.ws-ex-audio .ws-gallery__figure:focus{outline:none;}
.ws-ex-audio .ws-gallery__figure:focus-visible{outline:3px solid #7a5c2e;outline-offset:3px;}

/* Player fills the cell width (matches the Film example's full-width player). */
.ws-ap--cell{width:100%;}

/* ---- Container-query compaction (UNCHANGED from v2.13.0). Capability governs
   control PRESENCE (the IIFE removes the volume slider where volume is not
   settable); WIDTH governs only ARRANGEMENT. Scoped to .ws-ap--cell so the
   full-width Film player never compacts at any width. ---- */
@container (max-width:420px){
  body.page-id-7723 .ws-ap--cell .ws-ap-play,body .sm-page .ws-ap--cell .ws-ap-play{width:52px;height:52px;}
  body.page-id-7723 .ws-ap--cell .ws-ap-row,body .sm-page .ws-ap--cell .ws-ap-row{flex-wrap:wrap;row-gap:10px;}
  body.page-id-7723 .ws-ap--cell .ws-ap-vol,body .sm-page .ws-ap--cell .ws-ap-vol{flex:1 0 100%;justify-content:flex-start;}
  /* v2.15.1 -- MUTE-ONLY (iOS: the IIFE removed the volume slider). Keep the mute
     on the PRIMARY control row, right-aligned to match the Film player, instead of
     stranded alone on a 2nd row. Detected via :has() on the SLIDER's absence
     (.ws-ap-vol-range), so the settable two-row layout above is untouched; guarded
     by @supports so non-:has() engines keep current behaviour. */
  @supports selector(:has(*)){
    body.page-id-7723 .ws-ap--cell:not(:has(.ws-ap-vol-range)) .ws-ap-vol,body .sm-page .ws-ap--cell:not(:has(.ws-ap-vol-range)) .ws-ap-vol{flex:0 0 auto;justify-content:flex-end;}
  }
}
@supports not (container-type: inline-size){
  @media (max-width:479px){
    body.page-id-7723 .ws-ap--cell .ws-ap-play,body .sm-page .ws-ap--cell .ws-ap-play{width:52px;height:52px;}
    body.page-id-7723 .ws-ap--cell .ws-ap-row,body .sm-page .ws-ap--cell .ws-ap-row{flex-wrap:wrap;row-gap:10px;}
    body.page-id-7723 .ws-ap--cell .ws-ap-vol,body .sm-page .ws-ap--cell .ws-ap-vol{flex:1 0 100%;justify-content:flex-start;}
  }
  @media (min-width:768px) and (max-width:929px){
    body.page-id-7723 .ws-ap--cell .ws-ap-play,body .sm-page .ws-ap--cell .ws-ap-play{width:52px;height:52px;}
    body.page-id-7723 .ws-ap--cell .ws-ap-row,body .sm-page .ws-ap--cell .ws-ap-row{flex-wrap:wrap;row-gap:10px;}
    body.page-id-7723 .ws-ap--cell .ws-ap-vol,body .sm-page .ws-ap--cell .ws-ap-vol{flex:1 0 100%;justify-content:flex-start;}
  }
}

/* prefers-reduced-motion: no hover transition on the standalone score card. */
@media (prefers-reduced-motion:reduce){
  .ws-ex-audio .ws-gallery__figure{transition:none;}
  .ws-ex-audio .ws-gallery__figure:hover{transform:none;}
}


/* v2.14.1 -- SUBGRID row alignment. At >=768 (2-col) the two cells share four
   parent row tracks (credit / label / player / figure) so the AUDIO MOCKUP
   label, the player and the figure sit on the SAME horizontal line in both
   columns despite unequal credit line-counts; the shorter credit stays
   top-aligned and its slack falls above its label. row-gap:0 so the existing
   14/12/24 child margins (not gap) set the within-cell spacing. @supports gates
   it -- browsers without subgrid keep the v2.14.0 flex behaviour (misaligned,
   never broken). Not applied <768 (cells stack; 44px row-gap unchanged). */
@supports (grid-template-rows: subgrid){
  @media (min-width:768px){
    .ws-ex-grid{grid-template-rows:repeat(4,auto);row-gap:0;}
    .ws-ex-audio{display:grid;grid-template-rows:subgrid;grid-row:span 4;}
    .ws-ex-audio > *{align-self:start;min-width:0;}
  }
}


/* v2.15.0 -- Musical Theatre subgrid row alignment (mirrors the Ensembles v2.14.1
   pattern). At >=768 the four cells form a 2x2 grid; each PAIR of cells (1+2, then
   3+4) shares three row tracks (caption / video / figure) so the video and figure
   align across each row despite unequal caption line-counts; the shorter caption
   stays top-aligned and its slack falls above the video. row-gap:0 keeps the 0px
   video<->figure flush and the caption's own 14px pad; the 30px inter-row gap is
   re-added as margin-bottom on the first-row (nth-child -n+2) figures. Scoped to
   #musical-theater ONLY -- never Publishers, which shares .ws-gallery. @supports
   gates it; non-subgrid engines keep today's flex layout. Not applied <768 (single
   column, nothing to align). */
@supports (grid-template-rows: subgrid){
  @media (min-width:768px){
    #musical-theater .ws-gallery{grid-template-rows:repeat(3,auto) 30px repeat(3,auto);row-gap:0;}
    #musical-theater .ws-gallery__item--media{display:grid;grid-template-rows:subgrid;}
    #musical-theater .ws-gallery__item--media:nth-child(1){grid-row:1/span 3;grid-column:1;}
    #musical-theater .ws-gallery__item--media:nth-child(2){grid-row:1/span 3;grid-column:2;}
    #musical-theater .ws-gallery__item--media:nth-child(3){grid-row:5/span 3;grid-column:1;}
    #musical-theater .ws-gallery__item--media:nth-child(4){grid-row:5/span 3;grid-column:2;}
    #musical-theater .ws-gallery__item--media > *{align-self:start;min-width:0;}
  }
}


/* ==========================================================================
   v2.16.0 -- EDUCATORS & INSTITUTIONS "Selected Works" -- course-material grid
   -----------------------------------------------------------------------------
   ADDITIVE. Grid B ("course material": credit + score figure, NO player, NO
   "Audio Mockup" label). Grid A (the two arrangements) REUSES .ws-ex-grid /
   .ws-ex-audio verbatim and adds NOTHING here. The doc grid element carries
   BOTH .ws-ex-grid (so it inherits the 2-col>=768 / 1-col<768 base, the 48px
   gutter and the v2.14.1 @supports(subgrid) guard) AND .ws-ex-grid--doc (which
   only changes the row COUNT: 2 tracks -- credit / figure -- not 4). The doc
   cell .ws-ex-doc mirrors .ws-ex-audio (a bare stacking context, no card) and
   the figure REUSES the standalone-card treatment, the 1200/1629 aspect-ratio
   CLS guard, the hover lift, the #a6824f focus ring and "Click to enlarge".
   ws-lightbox.js is NOT modified -- the four figures use its existing
   .ws-gallery__figure[data-full] binding. On the ecru band #f0e9dc: credit
   #4a4030 = 8.41:1, kicker/label #7a5c2e = 5.12:1 (both >= AA). PRM-safe. */

/* Inter-grid separation: matches the section's 56px base row-gap (44px <768) so
   the two arrangements read as one group, the two course examples as another. */
.ws-ex-grid--doc{margin-top:56px;}
@media (max-width:767px){.ws-ex-grid--doc{margin-top:44px;}}

/* Doc cell: a bare stacking context on the page background -- NO card (mirrors .ws-ex-audio). */
.ws-ex-doc{display:flex;flex-direction:column;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;}

/* Credit -> figure gap: mirrors the .ws-ex-audio player->figure 24px separation
   so the score reads as an independent object (no player sits between them). */
body.page-id-7723 .ws-ex-doc .ws-sw-caption,body .sm-page .ws-ex-doc .ws-sw-caption{margin:0 0 24px;}

/* Score image = a STANDALONE Publishers card: identical treatment to
   .ws-ex-audio .ws-gallery__figure (white bg / 1px border / 10px radius /
   hover-lift / gold focus ring). */
.ws-ex-doc .ws-gallery__figure{
  display:flex;flex-direction:column;position:relative;
  margin:0;padding:0;overflow:hidden;text-align:left;
  background:#ffffff;border:1px solid rgba(26,23,18,.10);border-radius:10px;
  box-shadow:none;cursor:pointer;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s cubic-bezier(.22,.61,.36,1);
}
.ws-ex-doc .ws-gallery__figure:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(26,23,18,.18);}
.ws-ex-doc .ws-gallery__figure:focus{outline:none;}
.ws-ex-doc .ws-gallery__figure:focus-visible{outline:3px solid #7a5c2e;outline-offset:3px;}

/* SUBGRID row alignment (mirrors .ws-ex-audio v2.14.1 but 2 tracks not 4). At
   >=768 the two doc cells share the parent's two row tracks (credit / figure) so
   the figures sit on the SAME line in both columns despite unequal credit
   line-counts; the shorter credit stays top-aligned, its slack above it. row-gap
   comes from the inherited base guard (0), so the 24px credit margin sets the
   within-cell spacing. @supports gates it -- non-subgrid engines keep the v2.14.0
   flex behaviour. Not applied <768 (cells stack; 44px row-gap). */
@supports (grid-template-rows: subgrid){
  @media (min-width:768px){
    .ws-ex-grid--doc{grid-template-rows:repeat(2,auto);}
    .ws-ex-doc{display:grid;grid-template-rows:subgrid;grid-row:span 2;}
    .ws-ex-doc > *{align-self:start;min-width:0;}
  }
}

/* prefers-reduced-motion: no hover transition on the standalone doc card. */
@media (prefers-reduced-motion:reduce){
  .ws-ex-doc .ws-gallery__figure{transition:none;}
  .ws-ex-doc .ws-gallery__figure:hover{transform:none;}
}

/* ==========================================================================
   ScoreMasters — SHARED SERVICE-PAGE FOUNDATION  ·  DESIGN.md v2.19.0
   FOUNDATION PASS 2 (shared CSS)
   --------------------------------------------------------------------------
   Everything in this block is scoped to the shared root class .sm-page and is
   INERT as it ships: .sm-page matches 0 elements site-wide (verified this pass
   across style.css, functions.php, all 56 live _elementor_data records, all
   474 non-revision post_content rows and a 23,495-file sweep). It is first
   exercised in Pass 3, when the class is attached to each service page's
   outermost Elementor container. That inertness is the structural reason this
   pass is zero-visible-change.

   PREFIX: new shell sub-components use `smp-`. Collision-checked to ZERO on
   every surface above before the prefix was committed.

   SPECIFICITY NOTE (load-bearing, cf. v2.17.3 SS(xii)(1) / v2.14.1 D(i)):
   Elementor's global `.elementor img{height:auto;max-width:100%}` sits at
   (0,1,1) and outranks ANY bare single-class rule. Every rule here carries the
   `.sm-page` ancestor, so the shell's own img/link rules land at (0,2,x) or
   better and win WITHOUT needing !important. Do not de-scope them.
   ========================================================================== */

/* ---------- B1. ROOT: tokens + base typography ---------- */
.sm-page{
  --smp-canvas:#f7f1ea;      /* default section band            */
  --smp-ecru:#f0e9dc;        /* alternate light band            */
  --smp-sand:#d4c4a8;        /* credential-heavy band           */
  --smp-taupe:#c9b99b;       /* final-CTA / heaviest light band  */
  --smp-gold:#7a5c2e;        /* primary accent                  */
  --smp-gold-light:#c9a96e;
  --smp-gold-deep:#7a5c2e;
  --smp-burgundy:#7c1f3a;    /* secondary accent                */
  --smp-ink:#1a1712;         /* all body text                   */
  --smp-body:#3d342a;
  --smp-rule:#d8c8ac;        /* 1px hairline divider            */
  --smp-content-width:1280px;
  --smp-measure:760px;       /* long-form measure (~70ch)       */
  font-family:"Manrope",sans-serif;
  color:var(--smp-ink);
}
.sm-page *{box-sizing:border-box;}

/* ---------- B2. SECTION BANDS + VERTICAL PADDING RAMP ----------
   Ramp measured from post-23.css on the sproof/process containers:
   96/30 -> (<=1024) 80/30 -> (<=880) 80/15 -> (<=767) 56/15.
   Container width 1280px = DESIGN.md "Layout & Spacing" and post 23's
   --content-width. DELIBERATE DEVIATION FROM 7723, RECORDED: 7723's .ws-sec
   uses 78/24 and a 1180px inner. The shell follows post 23 + DESIGN.md so the
   ported Process block sits flush with the shell around it. */
.sm-page .smp-sec{padding:96px 30px;overflow:hidden;scroll-margin-top:90px;}
.sm-page .smp-inner{max-width:var(--smp-content-width);margin:0 auto;}
.sm-page .smp-band--canvas{background-color:var(--smp-canvas);}
.sm-page .smp-band--ecru{background-color:var(--smp-ecru);}
.sm-page .smp-band--sand{background-color:var(--smp-sand);}
.sm-page .smp-band--taupe{background-color:var(--smp-taupe);}
.sm-page .smp-rule{border:0;border-top:1px solid var(--smp-rule);margin:0;}
.sm-page .smp-rule--gold{width:60px;border-top:2px solid var(--smp-gold);}

/* ---------- B3. FULL-WIDTH CENTERED HEADER BLOCK above body+image rows ----
   Structure modelled on 7723's .ws-sec-head-block (#ws-page rules, style.css
   lines 797-821 at md5 d4b74fa61d8afcdf24d5a7d2e6fa03c0). Authored FRESH:
   those nine #ws-page rules are NOT comma-appended and stay 7723-only. */
.sm-page .smp-head-block{text-align:center;margin:0 auto 40px;}
.sm-page .smp-head-block .smp-eyebrow{justify-content:center;}
.sm-page .smp-head-block .smp-subhead{max-width:var(--smp-measure);margin:16px auto 0;}

/* ---------- B4. EYEBROW + MUSIC-STAND ICON ----------
   Icon treatment from post 23 process1 (.sm-pr-eyebrow, 48x48) and 7723
   (38x38 at <=767). URL is ROOT-RELATIVE per v2.17.3 SS(ix)(e).
   .smp-eyebrow--rule is the DESIGN.md canonical 28x2px gold-rule variant. */
.sm-page .smp-eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:"Manrope",sans-serif;font-weight:700;font-size:24px;
  letter-spacing:.12em;line-height:1.2;text-transform:uppercase;
  color:var(--smp-gold-deep);margin:0;
}
.sm-page .smp-eyebrow::before{
  content:"";flex:0 0 auto;width:48px;height:48px;
  background:url('/wp-content/uploads/2025/02/icon-music-stand-camelgold.png') center/contain no-repeat;
}
.sm-page .smp-eyebrow--rule::before{
  width:28px;height:2px;background:var(--smp-gold);
}

/* ---------- B5. HEADINGS, SUB-HEADLINE BLOCK, BODY TYPE ----------
   Playfair 700/40px section headline + Manrope body per DESIGN.md Typography. */
.sm-page .smp-sec-head{
  font-family:"Playfair Display",serif;font-weight:700;font-size:40px;
  line-height:1.18;letter-spacing:-.01em;color:var(--smp-ink);
  text-transform:none;margin:18px 0 0;
}
.sm-page .smp-sub-head{
  font-family:"Playfair Display",serif;font-weight:600;font-size:24px;
  line-height:1.25;color:var(--smp-ink);text-transform:none;margin:0 0 10px;
}
.sm-page .smp-subhead{
  font-family:"Manrope",sans-serif;font-size:18px;line-height:1.75;
  color:var(--smp-body);margin:0;
}
.sm-page .smp-body{
  font-family:"Manrope",sans-serif;font-size:17px;line-height:1.75;
  color:var(--smp-body);margin:0 0 18px;
}
.sm-page .smp-body:last-of-type{margin-bottom:0;}
.sm-page .smp-proof{
  font-family:"Manrope",sans-serif;font-size:15.5px;line-height:1.65;
  color:#5a4e3e;margin:24px 0 0;padding:2px 0 2px 18px;
  border-left:3px solid var(--smp-gold);font-style:italic;
}

/* ---------- B6. BODY + IMAGE ROW ---------- */
.sm-page .smp-row{display:block;}
.sm-page .smp-col{width:100%;}
.sm-page .smp-col--media{margin-top:32px;}
.sm-page .smp-figure{
  margin:0;width:100%;aspect-ratio:3/2;border-radius:5px;overflow:hidden;
  box-shadow:0 10px 30px rgba(26,23,18,.14);background:#e7ddce;
}
.sm-page .smp-figure img{display:block;width:100%;height:100%;object-fit:cover;}

/* ---------- B7. SHARED MOTION MARKER CLASSES ----------
   The shared module assets/sm-reveal.js binds `.sm-page .smr-reveal` and
   SELF-INJECTS its own two base rules (.smr-pre / .smr-pre.smr-in, style id
   smr-reveal-css). THAT SELF-INJECTION IS DELIBERATE AND CLOSED (v2.18.0
   ITEM (iii)); it is NOT migrated here, so the module can never run without
   its CSS. Only the DIRECTIONAL variants -- which the module does not provide
   -- are authored here. They are gated on :not(.smr-in) at (0,4,0) so they
   apply in the pre-state only and cannot defeat the injected
   `.smr-pre.smr-in{transform:none}` (0,2,0) that ends the entrance. */
.sm-page .smr-pre:not(.smr-in).smp-dir-left{transform:translateX(-28px);}
.sm-page .smr-pre:not(.smr-in).smp-dir-right{transform:translateX(28px);}

/* ---------- D. TIER-1 HERO PROOF STRIP (.smp-trust) ----------
   A thin, STATIC, NON-STICKY single line of typeset proof inside a service
   page hero. No logos, no marquee, no JavaScript. Content authored per page
   in Pass 3.
   VISUAL TREATMENT reproduces the homepage hero's `htrust` strip, MEASURED on
   post 23 at all 8 widths this pass: border-top 2px solid rgba(201,169,110,
   .55); padding-top 18px; centered; Manrope 500; 15px / line-height 1.7 /
   letter-spacing .03em / uppercase / rgba(255,255,255,.78); 13px at <=767.
   Separator glyph reproduces htrust's inline span: 1.8em, line-height 0,
   vertical-align -.10em, colour #c9a96e.
   TWO DELIBERATE DEVIATIONS FROM htrust, BOTH RECORDED:
   (1) htrust's separators are LITERAL "\00b7" characters in the markup, inside
       styled <span>s. Here they are CSS-GENERATED so screen readers do not
       announce them and the markup carries proof text only.
   (2) The generated separator is ::after on every item EXCEPT the last, NOT
       ::before on every item after the first. ::before would travel with the
       FOLLOWING item and land at the START of line 2 -- a LEADING orphan.
       *** CORRECTED v2.28.0. THE CLAIM THAT THIS MAKES AN ORPHAN
       "STRUCTURALLY IMPOSSIBLE" WAS WRONG, AND THE ERROR MATTERED: ::after
       only makes a TRAILING orphan the only possible kind. That IS the
       defect, not the fix. With flex-wrap:wrap this strip measured 2+1 at
       EVERY width from 2200px down to 660px -- a separator stranded at the
       end of line 1 at every one of them -- because the content needs
       ~1071px and .smp-hero__inner caps at 1040px, so the one-line state
       was never reachable at any viewport size. ***
       ORPHANS ARE NOW PREVENTED BY CONSTRUCTION, NOT BY GLYPH PLACEMENT:
       the appended block "A1" at the END of this file replaces flex-wrap
       with an explicit TWO-STATE switch -- column below 1140px (separators
       display:none) and nowrap row at/above it (strip breaks out of the
       1040px inner cap) -- so a wrapped row never exists and 2+1 is not a
       reachable state. SEE THAT BLOCK BEFORE EDITING ANYTHING BELOW.
   NOT position:sticky and NOT position:fixed -- the nav is already fixed with
   78/66px body padding-top and a second pinned band would permanently cost
   fold height on every page. */
.sm-page .smp-trust{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  column-gap:.62em;row-gap:0;
  margin:0;padding-top:18px;
  border-top:2px solid rgba(201,169,110,.55);
  text-align:center;
  font-family:"Manrope",sans-serif;font-weight:500;font-size:15px;
  line-height:1.7;letter-spacing:.03em;text-transform:uppercase;
  color:rgba(255,255,255,.78);
  list-style:none;
}
.sm-page .smp-trust__item{white-space:nowrap;}
/* *** SUPERSEDED BY BLOCK A1 -- SEE THE `@media (min-width:1140px)` RULE NEAR THE END
   OF THIS FILE. COMMENTED OUT AT v1.0.56, DELIBERATELY NOT DELETED. ***
   This is the original TYPESET-GLYPH separator. It carries the SAME (0,3,0)
   specificity as A1's replacement and was losing ONLY on source order, which made it
   a live landmine: a session told to "fix the trust dot rule" could edit this block,
   see no effect whatsoever, and conclude the rule was not being applied.
   *** NOTE ITS `vertical-align:-.10em` -- A DIFFERENT VALUE FROM A1's `middle`. ***
   The two were never interchangeable, so this is not a duplicate that could simply
   be re-enabled; it is a superseded construction kept for the record only.
.sm-page .smp-trust__item:not(:last-child)::after{
  content:"\00b7";
  display:inline-block;
  margin-inline-start:.62em;
  font-size:1.8em;line-height:0;vertical-align:-.10em;
  color:var(--smp-gold-light);
}
*/


/* ---------- B8. RESPONSIVE RAMP for the shell + Tier-1 strip ---------- */
@media (max-width:1024px){
  .sm-page .smp-sec{padding:80px 30px;}
  .sm-page .smp-sec-head{font-size:34px;}
}
@media (min-width:900px){
  .sm-page .smp-row{display:flex;align-items:center;gap:60px;}
  .sm-page .smp-row--reverse{flex-direction:row-reverse;}
  .sm-page .smp-col{flex:1 1 0;min-width:0;}
  .sm-page .smp-col--media{margin-top:0;}
}
@media (max-width:899px){
  /* stacked: the IMAGE renders before the BODY, and the eyebrow icon stacks
     ABOVE the centered label so multi-line labels centre cleanly (the same
     treatment 7723 gained at v2.14.x for its wrapped client names). */
  .sm-page .smp-sec{padding:80px 15px;}
  .sm-page .smp-row{display:flex;flex-direction:column;}
  .sm-page .smp-row > .smp-col--media{order:-1;margin-top:0;}
  .sm-page .smp-row > .smp-col--text{order:0;margin-top:26px;}
  .sm-page .smp-head-block{margin-bottom:30px;}
  .sm-page .smp-eyebrow{flex-direction:column;align-items:center;text-align:center;gap:0;}
  .sm-page .smp-eyebrow::before{margin:0 auto 8px;}
}
@media (max-width:767px){
  .sm-page .smp-sec{padding:56px 15px;scroll-margin-top:72px;}
  .sm-page .smp-head-block{margin-bottom:26px;}
  .sm-page .smp-head-block .smp-subhead{max-width:100%;}
  .sm-page .smp-eyebrow{font-size:20px;}
  .sm-page .smp-eyebrow::before{width:38px;height:38px;}
  .sm-page .smp-eyebrow--rule::before{width:28px;height:2px;}
  .sm-page .smp-sec-head{font-size:30px;}
  .sm-page .smp-sub-head{font-size:21px;}
  .sm-page .smp-subhead{font-size:16.5px;}
  .sm-page .smp-body{font-size:16px;}
  .sm-page .smp-col--media{margin-top:26px;}
  .sm-page .smp-trust{font-size:13px;}
}
@media (prefers-reduced-motion:reduce){
  .sm-page .smr-pre:not(.smr-in).smp-dir-left,
  .sm-page .smr-pre:not(.smr-in).smp-dir-right{transform:none !important;}
}

/* ==========================================================================
   C. "THE PROCESS" — PORTED COMPONENT CSS
   --------------------------------------------------------------------------
   SOURCE: the inline <style> inside HTML widget `process1` on post 23,
   inner md5 9191f742f3cd510e58db1a9feecc6814, 5,404 bytes, re-measured this
   pass. POST 23 IS A READ-ONLY DONOR (v2.17.3 SS(ix)(f)) -- it was read and
   never written, and it keeps its own inline copy.

   *** EVERY PORTED SELECTOR IS PREFIXED .sm-page. *** An unscoped copy would
   ALSO match post 23 -- identically today, so no computed change -- but it
   would COUPLE the read-only donor to style.css, so a future style.css edit
   would silently alter a locked, signed-off page. The prefix makes style.css
   structurally unable to reach post 23. Class names are otherwise PRESERVED
   (.sm-pr...) so the Pass 3 markup port stays near-verbatim.

   ABSOLUTE URLS CONVERTED: 1 of the 1 that occurs inside the <style>
   (icon-music-stand-camelgold.png). process1 carries 2 absolute staging URLs
   in total (v2.17.3 SS(ix)(e)); the second is the panel <img src> in the
   MARKUP, which Pass 3 authors root-relative -- it is not a CSS rule and
   could not be converted here.

   LOAD-BEARING, CARRIED VERBATIM (v2.17.3 SS(iii)):
     - the five `.sm-pr .sm-pr-cta` two-class rules, here at (0,3,0), which
       beat the theme's .elementor-widget-html link box-shadow reset. Do NOT
       drop to a single class.
     - the THREE !important declarations on .sm-pr-panel-img. They defeat
       Elementor's `.elementor img` (0,1,1); the ported rule is (0,2,0) and
       already outranks it, but the declarations are carried unchanged
       because the record requires it and because they are what the homepage
       is verified against.
     - the hand-rolled label roll (.sm-pr-clip / .sm-pr-rt / .sm-pr-rt-b).
       KEEP THE PRIVATE STRUCTURE -- do not swap it for the theme's
       .soudify-button-clip / .hover-text markup.

   *** THE MOTION DOES NOT SURVIVE THE PORT -- SEE THE PASS 3 CONTRACT. ***
   process1's entrance is driven by its own bespoke IIFE, which is NOT ported.
   That IIFE ADDS the marker class `.sm-pr-anim` AT RUNTIME to six derived
   targets; the class appears NOWHERE in the source markup. Its two rules
   (.sm-pr-anim / .sm-pr-anim.is-in) and its reduced-motion override are
   therefore DELIBERATELY OMITTED below -- the shared module owns motion now.
   PASS 3 MUST ADD class="smr-reveal" to the six entrance targets by hand
   (.sm-pr-head, the four .sm-pr-step, .sm-pr-panel). There is no marker in
   the markup whose absence would hint at this. Omit it and the Process block
   simply never animates -- silently, with no error.
   ========================================================================== */
.sm-page .sm-pr{font-family:"Manrope",sans-serif;}
.sm-page .sm-pr *{box-sizing:border-box;}
.sm-page .sm-pr-head{text-align:left;}
.sm-page .sm-pr-eyebrow{display:inline-flex;align-items:center;font-family:"Manrope",sans-serif;font-weight:700;font-size:24px;letter-spacing:.12em;line-height:1.2;text-transform:uppercase;color:#7a5c2e;}
.sm-page .sm-pr-eyebrow::before{content:"";display:inline-block;flex:0 0 auto;width:48px;height:48px;margin-right:14px;background:url('/wp-content/uploads/2025/02/icon-music-stand-camelgold.png') center/contain no-repeat;}
.sm-page .sm-pr-title{font-family:"Playfair Display",serif;font-weight:700;font-size:40px;line-height:1.18;color:#1a1712;text-transform:none!important;margin:18px 0 0;}
.sm-page .sm-pr-body{display:grid;grid-template-columns:2fr 1fr;column-gap:40px;align-items:start;margin-top:56px;}
.sm-page .sm-pr-steps{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;row-gap:34px;}
.sm-page .sm-pr-step{display:flex;flex-direction:column;}
.sm-page .sm-pr-num{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto;background:#fef8f0;border:1px solid #d8c8ac;border-radius:4px;font-family:"Playfair Display",serif;font-weight:700;font-size:17px;line-height:1;color:#7a5c2e;margin-bottom:16px;}
.sm-page .sm-pr-step-title{font-family:"Playfair Display",serif;font-weight:600;font-size:24px;line-height:1.25;color:#1a1712;text-transform:none!important;margin:0 0 10px;}
.sm-page .sm-pr-step-body{font-family:"Manrope",sans-serif;font-size:16px;line-height:1.65;color:#4a4030;margin:0;}
.sm-page .sm-pr-panel{background:#d4c4a8;border-radius:4px;padding:40px;overflow:hidden;}
.sm-page .sm-pr-panel-img{display:block;width:calc(100% + 80px)!important;max-width:none!important;height:150px!important;object-fit:cover;object-position:center 45%;margin:-40px -40px 28px;border-radius:4px 4px 0 0;}
.sm-page .sm-pr-panel-title{font-family:"Playfair Display",serif;font-weight:700;font-size:26px;line-height:1.3;color:#1a1712;text-transform:none!important;margin:0 0 22px;}
.sm-page .sm-pr-panel-list{list-style:none;margin:0 0 30px;padding:0;}
.sm-page .sm-pr-panel-list li{position:relative;padding-left:26px;font-family:"Manrope",sans-serif;font-size:16px;line-height:1.6;color:#3d342a;}
.sm-page .sm-pr-panel-list li + li{margin-top:18px;}
.sm-page .sm-pr-panel-list li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:#7a5c2e;}
.sm-page .sm-pr .sm-pr-cta{display:block;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;font-family:"Manrope",sans-serif;font-weight:600;font-size:16px;letter-spacing:.08em;line-height:1.2;text-transform:uppercase;text-decoration:none;color:#fff;background:linear-gradient(100deg,#c9a96e 0%,#b07a4a 42%,#7c1f3a 100%);padding:15px 36px;border-radius:9999px;box-shadow:0 4px 18px rgba(124,31,58,.22);transition:transform .25s ease,box-shadow .25s ease,background .25s ease;}
.sm-page .sm-pr-cta:hover,.sm-page .sm-pr-cta:focus-visible{background:linear-gradient(100deg,#d4b87f 0%,#bb854f 42%,#8e2545 100%);transform:translateY(-2px);box-shadow:0 8px 26px rgba(124,31,58,.30);color:#fff;}
.sm-page .sm-pr-cta:focus-visible{outline:2px solid #7a5c2e;outline-offset:3px;}
.sm-page .sm-pr .sm-pr-clip{justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;}
.sm-page .sm-pr .sm-pr-clip .sm-pr-rt{transition:transform .3s linear;}
.sm-page .sm-pr .sm-pr-clip .sm-pr-rt.sm-pr-rt-b{position:absolute;bottom:-100%;}
.sm-page .sm-pr .sm-pr-cta:hover .sm-pr-clip .sm-pr-rt,.sm-page .sm-pr .sm-pr-cta:focus-visible .sm-pr-clip .sm-pr-rt{transform:translate3d(0px,-100%,0px) scale3d(1,1,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);transform-style:preserve-3d;}
@media(max-width:1280px){
  .sm-page .sm-pr .sm-pr-cta{font-size:14px;letter-spacing:.05em;padding:14px 24px;}
}
@media(max-width:1024px){
  .sm-page .sm-pr-body{grid-template-columns:1.63fr 1fr;column-gap:28px;}
  .sm-page .sm-pr-panel{padding:30px;}
  .sm-page .sm-pr-panel-img{width:calc(100% + 60px)!important;max-width:none!important;margin:-30px -30px 24px;height:140px!important;}
  .sm-page .sm-pr-panel-title{font-size:22px;margin-bottom:18px;}
  /* full-width centred pill in the narrow side-by-side band so it stays one line and breathes */
  .sm-page .sm-pr .sm-pr-cta{font-size:12px;letter-spacing:.04em;padding:13px 18px;}
}
@media(max-width:880px){
  .sm-page .sm-pr-steps{grid-template-columns:1fr;column-gap:0;row-gap:28px;}
}
@media(max-width:767px){
  .sm-page .sm-pr-body{grid-template-columns:1fr;row-gap:36px;margin-top:44px;}
  .sm-page .sm-pr-panel{padding:28px;}
  .sm-page .sm-pr-panel-img{width:calc(100% + 56px)!important;max-width:none!important;margin:-28px -28px 22px;height:158px!important;}
  .sm-page .sm-pr-panel-title{font-size:24px;}
  .sm-page .sm-pr .sm-pr-cta{font-size:16px;padding:15px 30px;}
  .sm-page .sm-pr-eyebrow{font-size:20px;}
  .sm-page .sm-pr-eyebrow::before{width:38px;height:38px;margin-right:12px;}
  .sm-page .sm-pr-title{font-size:30px;}
}
@media(max-width:480px){
  .sm-page .sm-pr-eyebrow{font-size:18px;}
}
@media(prefers-reduced-motion:reduce){
  .sm-page .sm-pr .sm-pr-cta{transition:none;}.sm-page .sm-pr .sm-pr-clip .sm-pr-rt{transition:none!important;}.sm-page .sm-pr .sm-pr-cta:hover .sm-pr-clip .sm-pr-rt,.sm-page .sm-pr .sm-pr-cta:focus-visible .sm-pr-clip .sm-pr-rt{transform:none!important;}
}


/* ==========================================================================
   PASS 3A (DESIGN.md v2.21.0) -- ADDITIVE ONLY. Three appends, nothing edited.
   Exercised for the first time by post 7567, the first page to carry .sm-page.
   ========================================================================== */

/* ---- 6.1  VIDEO-CELL SUBGRID, SINGLE ROW OF TWO (.sm-page equivalent) ----
   Mirrors the v2.15.0 #musical-theater rule but for ONE row of two cells, not
   a 2x2. The original block (style.css lines 973-984) is LEFT BYTE-IDENTICAL at
   its original specificity; this is a parallel block gated on .sm-page, which
   post 7723 never carries, so 7723's computed styles cannot move. Gated on a
   modifier class so only GRID 1 (the two video cells) is subgridded -- GRID 2
   and GRID 3 are .ws-ex-grid and keep the proven Ensembles/Educators shape. */
@supports (grid-template-rows: subgrid){
  @media (min-width:768px){
    .sm-page .ws-gallery--video{grid-template-rows:repeat(3,auto);row-gap:0;}
    .sm-page .ws-gallery--video .ws-gallery__item--media{display:grid;grid-template-rows:subgrid;}
    .sm-page .ws-gallery--video .ws-gallery__item--media:nth-child(1){grid-row:1/span 3;grid-column:1;}
    .sm-page .ws-gallery--video .ws-gallery__item--media:nth-child(2){grid-row:1/span 3;grid-column:2;}
    .sm-page .ws-gallery--video .ws-gallery__item--media > *{align-self:start;min-width:0;}
  }
}

/* ---- 6.2  .ws-gallery__label--live ----
   Treatment IDENTICAL to .ws-gallery__label--mockup (declarations copied, not
   comma-appended, so the existing --mockup rules stay byte-unchanged). Used by
   the Zero Visibility cell, which is a live recording rather than a mockup. */
.ws-gallery__label--live{
  display:inline-flex;align-items:center;
  font-family:"Manrope",sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:#7a5c2e;
}
.ws-gallery__label--live::before{content:"";flex:0 0 auto;width:28px;height:2px;background:currentColor;margin-right:10px;position:relative;top:-1px;}

/* ---- 6.5  FAQ ACCORDION SKIN (.faq-acc), PREFIXED .sm-page ----
   Declarations copied VERBATIM from the inline <style> in post 7573; only the
   selectors gain the .sm-page prefix. Post 7573 is READ-ONLY and keeps its own
   inline copy exactly where it is. Because .sm-page matches zero elements
   outside 7567 (probe 3.4), the two copies cannot interact.
   *** DESIGN DEBT: .faq-acc now exists in TWO places. A future pass should
   remove the inline copy from 7573 once all service pages are built. ***
   Donor inline <style> md5 b25c369cec5191dad6f6e6a68bf16707; 23 rules captured. */
.sm-page .faq-acc .e-n-accordion{display:flex;flex-direction:column;gap:0;width:100%;background:transparent!important;}
.sm-page .faq-acc .e-n-accordion-item,.sm-page .faq-acc details.e-n-accordion-item,.sm-page .faq-acc .e-n-accordion-item-title,.sm-page .faq-acc summary.e-n-accordion-item-title,.sm-page .faq-acc .e-n-accordion-item > .e-con,.sm-page .faq-acc .e-n-accordion-item > .e-con > .e-con-inner{background:transparent!important;background-color:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;}
.sm-page .faq-acc details.e-n-accordion-item{border-bottom:1px solid #d4c4a8!important;margin:0!important;}
.sm-page .faq-acc details.e-n-accordion-item:first-child{border-top:1px solid #d4c4a8!important;}
.sm-page .faq-acc summary.e-n-accordion-item-title,.sm-page .faq-acc .e-n-accordion-item-title{display:flex!important;align-items:center;justify-content:flex-start!important;gap:18px;cursor:pointer;padding:20px 4px;list-style:none;text-align:left;}
.sm-page .faq-acc summary.e-n-accordion-item-title::-webkit-details-marker{display:none;}
.sm-page .faq-acc summary:focus-visible{outline:2px solid #7a5c2e;outline-offset:2px;}
.sm-page .faq-acc .e-n-accordion-item-title-text{flex:1 1 auto;order:0;text-align:left;font-family:'Playfair Display',serif;font-weight:600;font-size:19px;line-height:1.35;color:#1a1712;letter-spacing:-.005em;transition:color .2s ease;}
.sm-page .faq-acc summary:hover .e-n-accordion-item-title-text{color:#7a5c2e;}
.sm-page .faq-acc details[open] > summary .e-n-accordion-item-title-text,.sm-page .faq-acc details[open] .e-n-accordion-item-title-text{color:#7a5c2e;}
.sm-page .faq-acc .e-n-accordion-item-title-icon{order:5;flex:0 0 auto;margin-left:18px;margin-right:0;color:#7a5c2e;display:inline-flex;align-items:center;justify-content:center;}
.sm-page .faq-acc .e-n-accordion-item-title-icon svg{width:17px;height:17px;fill:#7a5c2e;}
.sm-page .faq-acc .e-n-accordion-item-title-icon i{font-size:16px;color:#7a5c2e;}
.sm-page .faq-acc .e-n-accordion-item > .e-con{padding:0 4px 22px!important;}
.sm-page .faq-acc .e-n-accordion-item p{font-family:'Manrope',sans-serif;font-size:16px;line-height:1.7;color:#4a4030;margin:0 0 14px;}
.sm-page .faq-acc .e-n-accordion-item p:last-child{margin-bottom:0;}
.sm-page .faq-acc .e-n-accordion-item a{color:#7c1f3a;text-decoration:underline;}
.sm-page .faq-acc .e-n-accordion-item a:hover{color:#9e2a49;}
.sm-page .faq-acc .e-n-accordion-item ol,.sm-page .faq-acc .e-n-accordion-item ul{margin:0 0 14px;padding-left:22px;font-family:'Manrope',sans-serif;font-size:16px;line-height:1.7;color:#4a4030;}
.sm-page .faq-acc .e-n-accordion-item li{margin:0 0 8px;}
.sm-page .faq-acc .e-n-accordion-item li:last-child{margin-bottom:0;}
.sm-page .faq-acc .e-n-accordion-item strong{color:#1a1712;font-weight:700;}
.sm-page .faq-acc .e-n-accordion-item em{font-style:italic;}

/* ---- 6.3  AUDIO-CELL MICRO-LABEL: TREATMENT ON THE BASE CLASS (v2.23.0, Pass 3B) ----
   Generalises what --mockup and --live each carried separately, so a new label
   variant needs NO new rule.
   *** THE DIRECT-CHILD COMBINATOR IS LOAD-BEARING, NOT STYLE. *** .ws-gallery__label
   is SHARED: it styles both this micro-label and the figures' 'Click to enlarge'
   span. As a DESCENDANT, .ws-ex-audio .ws-gallery__label matched 8 nodes across 3A's
   4 audio cells -- only 4 of them micro-labels -- and at (0,3,0) it outranks the base
   (0,1,0), so it would STRIP the figure span's padding:12px 20px 16px. That is the
   hazard the comment above .ws-gallery__label--mockup::before warns of. Measured
   before writing: '>' matches exactly the 4 micro-labels and 0 figure labels.
   Scoped to .sm-page so post 7723 cannot be reached. --mockup and --live are left
   BYTE-IDENTICAL and are now redundant here; the modifiers carry MEANING ONLY.
   Colour: #a6824f is 3.16:1 on Canvas #f7f1ea and FAILS AA; #7a5c2e is 5.51:1.
   *** NEVER ADD A TREATMENT TWIN PER VARIANT. *** */
.sm-page .ws-ex-audio > .ws-gallery__label{
  display:inline-flex;align-items:center;
  font-family:"Manrope",sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:#7a5c2e;
  margin:0 0 12px;padding:0;
}
.sm-page .ws-ex-audio > .ws-gallery__label::before{content:"";flex:0 0 auto;width:28px;height:2px;background:currentColor;margin-right:10px;position:relative;top:-1px;}

/* ==========================================================================
   VISUAL PASS A — APPENDED v2.28.0 (2026-08-12)
   --------------------------------------------------------------------------
   Every rule in this block is scoped to `.sm-page` and therefore CANNOT reach
   post 23, 7702, 7652 or any page that does not carry the service-page shell.
   That scoping is the whole reason these can be promoted to the shared sheet
   while 7652 keeps its page-local copies untouched this pass.
   ========================================================================== */

/* ---------- A1. TIER-1 HERO PROOF STRIP — EXPLICIT TWO-STATE SWITCH ----------
   SUPERSEDES the flex-wrap:wrap behaviour of `.sm-page .smp-trust` above.
   See the corrected comment at section D for why the previous construction
   could not produce a one-line strip at ANY viewport width.

   THE MEASUREMENT THAT SETS THE BREAKPOINT (taken on 7567, Manrope 500 15px):
     item 1  307.61px   "Released on BMG, Universal, Polydor"
     item 2  377.11px   "Performed by Royal Philharmonic Orchestra"
     item 3  310.02px   "Created for Grammy-winning artists"
     text total                              994.74px
     + 2 separators x (14px gap + 10px dot + 14px gap) =  76.00px
     ONE LINE NEEDS                        ~1070.74px
     + .smp-hero left/right padding (30px x 2)          60.00px
     => one line fits from a viewport of ~1131px, so the switch is 1140px.
   *** THE COPY IS NOT NEGOTIABLE AGAINST THIS NUMBER. *** Each claim is tuned
   to the 42-character budget measured at 390px (see DESIGN.md, Trust Strip
   Copy Length Budget). That budget and this desktop pixel limit are DIFFERENT
   constraints and must never be traded against each other: shortening a claim
   to drop the breakpoint would spend a mobile-legibility guarantee to buy a
   desktop convenience.

   WHY A COLUMN BELOW THE BREAKPOINT RATHER THAN A WRAP: `flex-wrap` is never
   `wrap` in either state, so a 2+1 row cannot occur. It is not "unlikely" --
   there is no code path that produces it.

   THE GAP IS OWNED IN ONE PLACE. Previously the two sides of each separator
   were both authored `.62em` but resolved against DIFFERENT font-sizes -- the
   strip's 15px for `column-gap` (9.30px) and the separator's own 1.8em = 27px
   for `margin-inline-start` (16.74px) -- a 1.8x asymmetry that looked like a
   typo and was not. `--smp-trust-gap` is a PX value used on both sides, so the
   two can no longer diverge when the dot or the font-size changes.

   THE SEPARATOR IS NOW DRAWN, NOT TYPESET. A `\00b7` glyph scales its ink,
   its advance width AND its `vertical-align` offset with `font-size`, so
   enlarging it silently broke its own baseline alignment. An empty `content`
   with explicit width/height/border-radius makes the dot an exact, stated
   size at every breakpoint. The accessibility property that motivated the
   original CSS-generated separator is preserved and strengthened: `content:""`
   carries no text for a screen reader to announce at all. */
.sm-page .smp-trust{
  --smp-trust-gap:14px;
  --smp-trust-dot:6px;
  /* OPTICAL LIFT FOR THE DOT (added v1.0.56). `vertical-align:middle` aligns a box
     centre to baseline + half the X-HEIGHT -- but this strip is
     `text-transform:uppercase`, so NO x-height is ever rendered and the visual mass
     is the CAP band. The dot therefore sat low by exactly (capHeight - xHeight)/2.
     MEASURED at 15px Manrope: cap 10.900px, x-height 8.100px -> 1.400px, and the
     pre-fix offset measured +1.400px at 1194 AND 1440. Arithmetic and measurement
     agree, which is why this is a derivation and not a nudge.
     1.400 / 15 = 0.0933em -- BUT THE TOKEN IS AUTHORED IN px, AND THAT IS FORCED RATHER
     THAN PREFERRED. *** `em` IS UNUSABLE ON THIS PSEUDO-ELEMENT: THE ::after CARRIES
     `font-size:0` (vestigial from the typeset-glyph construction, where it killed the
     glyph's advance), AND `em` RESOLVES AGAINST THE ELEMENT'S OWN FONT-SIZE -- SO ANY em
     VALUE THERE COMPUTES TO EXACTLY ZERO AND THE LIFT SILENTLY DOES NOTHING. *** Measured
     live with three controls on this same pseudo-element at v1.0.56:
       top:-1.395px                                   -> -1.395px   (applies)
       top:calc(-1 * 0.093em)                         ->  0px       (silently dead)
       top:calc(-1 * var(--smp-trust-dot-rise)) @em   ->  0px       (silently dead)
     The token still does the job it was introduced for: it is INDEPENDENT OF
     --smp-trust-dot, so the dot size stays freely tunable. It IS tied to the strip's
     15px font-size, which this same rule fixes; if that ever changes, re-derive as
     (capHeight - xHeight)/2 at the new size.
     *** THE APPLIED VALUE IS 0.75px, NOT THE THEORETICAL 1.4px, BECAUSE THE RESPONSE IS A
     1px STAIRCASE AND 1.4px LANDS ON THE WRONG TREAD. *** Chrome quantises this
     inline-block's relative paint offset to whole CSS pixels, so only discrete offsets are
     reachable. MEASURED at 1440 across fifteen `top` values, entrance-gated and
     pixel-sampled at 10x (offset = dot-centre minus cap-band centre, + = dot sits low):
       top   0                        -> +1.399   the original defect
       top  -0.4 .. -1.1  ONE TREAD   -> +0.399   <-- best achievable
       top  -1.2 .. -1.5              -> -0.602   overshoot
       top  -2.1                      -> -0.601
       top  -2.8                      -> -1.601
     0.75px is the MIDDLE of the winning tread (about -0.35 to -1.15), chosen so a small
     future shift in font or layout cannot tip it onto a neighbouring step.
     *** A TARGET OF |offset| <= 0.15px IS NOT REACHABLE BY MOVING THE DOT: the treads are
     1.000px, so the reachable set is {+1.399, +0.399, -0.601, ...} and 0.399px is the
     minimum. That is a 3.5x improvement on the defect and about a third of the ~1px at
     which the eye begins to read a dot as sitting low. *** */
  --smp-trust-dot-rise:0.75px;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  column-gap:0;
  row-gap:2px;
}
.sm-page .smp-trust__item:not(:last-child)::after{display:none;}

@media (min-width:1140px){
  .sm-page .smp-hero .smp-trust{
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:baseline;
    column-gap:var(--smp-trust-gap);
    row-gap:0;
    /* break out of .smp-hero__inner's 1040px cap, staying centred on the
       viewport. The inner is itself centred, so left:50% + a -50% self
       translate re-centres the wider strip without touching the headline
       column. `translate` (not `transform`) is used deliberately: the strip
       carries `.smr-reveal`, whose entrance animates `transform`, and the two
       properties compose instead of clobbering each other. */
    width:max-content;
    max-width:calc(100vw - 60px);
    /* *** `margin-inline` IS 0 AND MUST STAY 0. IT WAS `auto` UNTIL v2.100.0, AND THAT ONE
       DECLARATION WAS THE CENTRING DEFECT. *** `.smp-hero__inner` is a block-level box capped at
       1040px, so `margin-inline:auto` ALREADY centres this ul inside the cap whenever the strip
       FITS -- and the `left:50%` + `translate:-50%` breakout below then applies a SECOND, full
       centring on top of the first. The two compose to a rightward drift of exactly
       (innerWidth - stripWidth) / 2, which is 0 only when the strip is exactly as wide as the cap.
       MEASURED BEFORE THE FIX, identical at 1140 / 1200 / 1315 / 1440 / 1920 / 2560 on each page:
         7568  strip  900.33  ->  +69.83px right     7571  strip  901.72  ->  +69.14px right
         7569  strip 1030.23  ->   +4.88px right     7567  strip 1061.14  ->    0.00px
         7570  strip 1040.63  ->    0.00px
       *** THE TWO PAGES THAT MEASURED 0 ARE NOT THE CORRECT ONES -- THEY ARE THE TWO WHOSE STRIPS
       ARE WIDER THAN THE CAP, SO THEIR auto MARGINS COLLAPSE TO 0 (over-constrained) AND THE
       BREAKOUT HAPPENS TO LAND RIGHT. *** That is why this read as a per-page defect for two
       passes: the component was centred only at one strip width, and every page with shorter
       claims drifted right by half the slack.
       WITH THE MARGINS AT 0 the strip's static position is the inner's content-box left edge at
       EVERY width, so `left:50%` + `translate:-50%` is the ONLY centring agent and it is exact for
       a strip narrower OR wider than the cap. The breakout itself is unchanged, and so are the
       1140px switch, `--smp-trust-gap`, the separators, the font sizes and the copy.
       *** DO NOT RESTORE `auto` AND DO NOT ADD A `margin:0 auto` SHORTHAND ANYWHERE THAT REACHES
       THIS ELEMENT: either one re-creates the defect silently, and it is invisible on 7567. *** */
    margin-inline:0;
    position:relative;
    left:50%;
    translate:-50%;
  }
  .sm-page .smp-trust__item:not(:last-child)::after{
    content:"";
    display:inline-block;
    width:var(--smp-trust-dot);
    height:var(--smp-trust-dot);
    margin-inline-start:var(--smp-trust-gap);
    border-radius:50%;
    background:var(--smp-gold-light);
    font-size:0;
    line-height:0;
    vertical-align:middle;
    /* The lift is a documented CORRECTION ON TOP of vertical-align:middle, not a
       replacement for it -- middle still does the baseline-relative placement and
       this only removes the x-height-vs-cap-height error. `position:relative` + `top`
       is used rather than `transform` on purpose: it causes NO reflow, does not alter
       the ::after's advance width (so the 1061.14px strip width is untouched), and
       cannot collide with `.smr-reveal`, whose entrance animates `transform` on the
       strip itself. */
    position:relative;
    top:calc(-1 * var(--smp-trust-dot-rise));
  }
}
/* *** DEFENSIVE ONLY -- UNREACHABLE. *** The separator is `display:none` below 1140px
   (see the unconditional rule above), and the stacked state covers everything below
   that, so `--smp-trust-dot:5px` CAN NEVER RENDER. The same was true of the 8px it
   replaced at v2.29.0, which recorded the fact; the file itself did not say so until
   v1.0.56. Kept so the token set stays complete if the strip ever gains a wrapped
   mobile state -- do not read it as live styling. `--smp-trust-gap` in this block IS
   live: it is the column-gap of the stacked column. */
@media (max-width:767px){
  .sm-page .smp-trust{--smp-trust-gap:10px;--smp-trust-dot:5px;}
}

/* ---------- A2. PRICING CTA PILL (.pp-btn) — PROMOTED FROM 7652 ----------
   PROMOTE-ON-SECOND-USE (DESIGN.md standing rule). 7567 carries a verbatim
   port of 7652's pricing block but NOT its page-local `.pp-btn` rules, so the
   LET'S CREATE control fell through to unstyled inline text. Declarations are
   copied VERBATIM from 7652 widget `ppwa` and differ only by the `.sm-page`
   scope, which is what keeps them off 7652.
   *** 7652 KEEPS ITS PAGE-LOCAL COPY THIS PASS. *** The intermediate state is
   two identical rule sets that cannot both match one element -- 7652 has no
   `.sm-page` root -- so they cannot conflict. Deleting 7652's copy completes
   the promotion and is Pass B. */
.elementor .pp-btn{display:inline-block;font-family:"Manrope",sans-serif;font-weight:700;font-size:15px;letter-spacing:.08em;line-height:1.2;text-transform:uppercase;text-decoration:none;color:#ffffff;background:linear-gradient(100deg,#c9a96e 0%,#b07a4a 42%,#7c1f3a 100%);padding:15px 36px;border-radius:9999px;box-shadow:0 4px 18px rgba(124,31,58,.22);transition:transform .25s ease,box-shadow .25s ease;border:0;cursor:pointer;}
.elementor .pp-btn:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(124,31,58,.30);}
.elementor .pp-btn:focus-visible{outline:2px solid #7a5c2e;outline-offset:3px;}
.elementor .pp-btn .soudify-button-clip{justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;}
.elementor .pp-btn .soudify-button-clip .hover-text{transition:transform .3s linear;color:#ffffff!important;}
.elementor .pp-btn .soudify-button-clip .hover-text.bottom-text{position:absolute;bottom:-100%;color:#ffffff!important;}
.elementor .pp-btn:hover .soudify-button-clip .hover-text,.elementor .pp-btn:focus-visible .soudify-button-clip .hover-text{transform:translate3d(0px,-100%,0px) scale3d(1,1,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);transform-style:preserve-3d;color:#ffffff!important;}
@media (prefers-reduced-motion:reduce){
  .elementor .pp-btn{transition:none;}
  .elementor .pp-btn .soudify-button-clip .hover-text{transition:none!important;}
  .elementor .pp-btn:hover .soudify-button-clip .hover-text,.elementor .pp-btn:focus-visible .soudify-button-clip .hover-text{transform:none!important;}
}

/* ---------- A3. CURRENCY TOGGLE (.pp-tab) — WHITE FILL ON SAND ----------
   MEASURED FAILURE, not a preference. On 7567 the pricing band is SAND
   #d4c4a8 and the inactive pill was `background:transparent` with a
   `#d8c8ac` border: border-vs-band 1.04:1 against WCAG 1.4.11's 3:1, and the
   13px/700 label at 3.61:1 against 1.4.3's 4.5:1. *** 13px BOLD IS NOT WCAG
   LARGE TEXT *** (that needs 18.66px bold / 24px regular), so 3:1 does not
   apply to the label and 3.61:1 is a genuine failure, not a near miss.
   White fill fixes both at once: the border becomes #7a5c2e on sand at
   3.61:1 (passes 1.4.11) and the label sits on its own white fill at 6.18:1
   (passes 1.4.3). The ACTIVE pill is unchanged in treatment -- #7a5c2e fill,
   white label, 6.18:1 -- and now reads as a filled/unfilled pair rather than
   two barely-different outlines.
   Scoped `.sm-page` at (0,2,0) so it outranks 7652's page-local `.pp-tab`
   (0,1,0) on 7567 while never matching on 7652 itself. 7652's own 1.47:1
   border remains and is recorded as Pass B. */
.elementor .pp-tab{background:#ffffff;border-color:#7a5c2e;color:#7a5c2e;}
.elementor .pp-tab:hover{background:#f0e3cc;border-color:#7a5c2e;}
.elementor .pp-tab.is-active{background:#7a5c2e;border-color:#7a5c2e;color:#ffffff;}
.elementor .pp-tab.is-active:hover{background:#6c5128;border-color:#6c5128;}

/* ---------- A4. INLINE LINK INSIDE THE PRICING CARD INTRO ----------
   `.sm-page .smp-prose a` is the correct treatment but is authored page-local
   on 7567 and scoped to `.smp-prose`, which the ported pricing block sits
   outside -- so the "Pricing page" link inherited the theme's
   `a{text-decoration:none}` and read as plain body text.
   Declarations mirror `.smp-prose a` exactly. Authored here rather than
   page-local because EVERY one of the 14 service pages carries this same
   sentence, which is the second-use condition the promote rule names. */
.sm-page .pp-card-intro a{color:#7c1f3a;text-decoration:underline;text-decoration-color:rgba(124,31,58,.45);text-underline-offset:3px;transition:color .2s ease;}
.sm-page .pp-card-intro a:hover,.sm-page .pp-card-intro a:focus-visible{color:#7a5c2e;text-decoration-color:#7a5c2e;}

/* ---------- A5. SELECTED WORKS ROW LABELS ----------
   No new treatment is authored. The "Orchestration" / "Arranging" labels gain
   the existing `.ws-sw-kicker` class in 7567's markup, which already carries
   `body .sm-page .ws-sw-kicker` at line ~493 (violin icon, uppercase, #7a5c2e,
   .12em) and already resolves for any `.sm-page`. This rule exists ONLY to
   restore the 6px top offset that `.ws-sw-kicker`'s `margin:0 0 18px`
   shorthand would otherwise zero on the FIRST label -- the second label keeps
   its 56px grid separation from `.sm-page .ws-ex-grid + .smp-sub-head`
   (0,3,0), which outranks the kicker (0,2,1). */
.sm-page .smp-head-block + .smp-sub-head.ws-sw-kicker{margin-top:6px;}

/* ---------- A6. RELATED SERVICES ROW ICONS (v2.29.0) ----------
   The four entries in the Related Services strip gain the SAME icon-font
   glyphs post 23 uses on its What We Do cards -- `soudify-icon-songwriter`,
   `soudify-icon-micro2`, `soudify-icon-electric`, `soudify-icon-speaker`.
   (THREE until v2.45.2, when 7567 gained AI Music to Score and matched 7568.
   The rule is count-independent -- see the note on `:nth-child` below.)

   *** THIS IS AN ADAPTATION, NOT A PORT, AND THE DIFFERENCE IS THE POINT. ***
   On post 23 the icon sits ABOVE the title inside a card at 42px. Here the
   strip is a thin text list with a rule between entries, so a 42px stacked
   icon would turn each row into a card -- exactly what this section is not.
   The icon therefore sits INLINE BEFORE the title at 26px (20px at <=767px),
   separated by `margin-inline-end:13px` (10px mobile), sized just above
   the 24px Playfair 600 title's ~17px cap height so it reads as part of the
   line rather than as an ornament leading it.

   MECHANISM: the glyph is chosen by a per-service class in 7567's markup
   (`soudify-icon-*`), because one CSS rule cannot select a different glyph per
   item without `:nth-child` tying the icon to a POSITION -- which silently
   mis-assigns every icon the moment an entry is reordered or added. The
   treatment lives here; only the glyph class lives in the markup. This is the
   same split used for `.ws-sw-kicker` at v2.28.0.

   *** NO FLEXBOX, AND THAT IS DELIBERATE -- THE FIRST ATTEMPT USED IT AND THE
   GAP MEASURED 0px. *** `.sm-page .smp-related__link` is ALSO declared
   page-local on 7567 as `display:inline-block`, at the SAME (0,2,0)
   specificity. A page-local `<style>` sits in the document BODY, so it wins on
   SOURCE ORDER against this file -- the same trap already recorded for
   `.enqsec-inner-photo`. `display:inline-flex` therefore never applied and
   `gap` was inert while still computing as `12px`, which is exactly the kind of
   declared-vs-computed mismatch that reads as "the rule isn't there".
   The separation is a plain `margin-inline-end` on the icon instead, which
   needs no flex context, no `!important`, and no specificity fight. **Baseline
   alignment comes free from ordinary inline flow** -- measured 0.8px off the
   title's first-line baseline at 1440 and 1.58px at 390.

   SCOPE -- AND WHY IT DIFFERS FROM THE `.pp-btn` / `.pp-tab` RULES ABOVE:
   those two were widened to `.elementor` at v2.29.0 because they MUST reach
   post 7652, which has no `.sm-page` root. This rule has no such requirement:
   the Related Services strip exists only on service pages, all of which carry
   `.sm-page`. *** SCOPE TO THE NARROWEST THING THAT REACHES EVERY TARGET --
   the two scoping choices are not inconsistent, they are each the tightest
   scope that works. ***

   ACCESSIBILITY: the span is `aria-hidden="true"` and empty, so the glyph is
   `::before` content on a hidden element and cannot enter the accessibility
   tree. Measured: the accessible name of each entry is the service title text
   alone, with no glyph artefact. */
.sm-page .smp-related__ico{
  font-family:"soudify-icon" !important;
  font-style:normal;
  font-weight:normal;
  font-variant:normal;
  text-transform:none;
  line-height:1;
  font-size:26px;
  color:#7a5c2e;
  margin-inline-end:13px;
  /* *** THE v2.29.0 NUDGE WAS BACKWARDS: IT READ `top:2px`, WHICH PUSHES THE
     GLYPH DOWN. *** Measured from rendered pixels at 1440, the glyph's ink ran
     -14.95px to +6.30px about the baseline -- 6.3px of ink HANGING BELOW the
     baseline -- while the title's cap band is -16.99px to 0. So a correct
     BASELINE alignment still left the ink centre +4.83px BELOW the cap band's
     centre. That gap is what "sits low" was, and it is why the 0.8px BASELINE
     offset recorded at v2.29.0 did not describe the defect: *** BASELINE-ALIGNED
     AND OPTICALLY CENTRED ARE DIFFERENT THINGS for a glyph whose ink is not
     drawn to the text baseline, and only the second one is what the eye reads. ***

     `-0.107em` is MEASURED, and two derivations were wrong before it:
     (1) that enlarging alone would centre it -- at 28px the offset only fell to
         +2.85px, because the inline box's own placement moves with font-size
         too, so ink does not simply scale about a fixed baseline; and
     (2) that the 30px line box set the size ceiling -- it does not. *** THE
         ENTRY-HEIGHT GROWTH CURVE GOVERNS, NOT THE LINE BOX: *** measured at
         1440 against a no-icon control of 118.40/118.40/144.80, growth is 0.00px
         at 20/22/24px, +0.80px at 26px, +1.80px at 28px, +2.80px at 30px.
     Expressing the nudge in `em` makes it scale with the <=767px step, so the
     mobile twin carries no second value to keep in sync. Measured after:
     optical offset +0.11px at 1440 (26px) and +0.42px at 390 (20px).

     SIZE: 26px desktop / 20px mobile. 26px accepts +0.80px per entry -- 0.7% of
     a 118.40px row, deliberately traded for a visible 18% ink increase, since
     24px moved the ink only 9% and left the "too small" complaint unanswered.
     *** 28px (+1.80px) WAS CONSIDERED AND REJECTED; THIS IS NOT A LICENCE TO
     RELAX FURTHER. *** Mobile STAYS at 20px: 390 is genuinely tight and 20px is
     its true zero-growth ceiling (delta 0.00, and no title gains a line).

     *** VERIFY BY RE-MEASURING RENDERED INK, NEVER BY READING THE COMPUTED
     PROPERTY -- the computed value was correct the whole time the v2.29.0
     `gap:12px` was inert. */
  position:relative;
  top:-0.107em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
@media (max-width:767px){
  .sm-page .smp-related__ico{font-size:20px;margin-inline-end:10px;}
}

/* ---------- A7. SELECTED WORKS HALF-DIVIDER (v2.29.1) ----------
   Twelve cells is a long scroll and the "Arranging" sub-head alone does not
   announce the second half of Selected Works. A rule now separates the two
   halves.

   *** THIS IS 7702's COMPONENT, REUSED VERBATIM -- NOT A NEW DIVIDER. ***
   Post 7702 already separates The Studio from What We Do with
   `<div class="ww-intro-divider" aria-hidden="true"></div>` and
   `.ww-intro-divider{border-top:1px solid #d8c8ac;margin:60px 0 0;}`
   (52px top at <=900px). Both the markup and every declaration below are
   copied from it unchanged; only the SCOPE is new.

   *** AND 7702 ALREADY PLACES IT ABOVE THE HEADING IT INTRODUCES, WHICH IS
   WHY THE SAME PLACEMENT IS CORRECT HERE RATHER THAN MERELY CONSISTENT. ***
   In 7702's markup the divider is the immediate previous sibling of
   `p.ww-svc-label` ("What We Do"), not a trailing element of the block above.
   The rule therefore belongs to the heading, and a future page with a
   different cell count keeps it correct with no re-placement. 7702's SECOND
   divider, `.ww-sw-divider`, is the trailing variant and is deliberately NOT
   the one reused here.

   RHYTHM, MEASURED ON 7702 RATHER THAN INVENTED: the divider contributes
   60px above itself; the gap below comes from the following label's own
   `margin-top` (52px on 7702's `.ww-svc-label`), and the two do not collapse
   through the border. On 7567 the following `.smp-sub-head.ws-sw-kicker`
   supplies that lower gap the same way.

   SCOPE: `.sm-page`, so all 14 service pages inherit it -- the strip exists
   only on service pages, so this is the narrowest scope that reaches every
   target, per the v2.29.0 scoping rule. It is NOT comma-appended onto 7702's
   own selector because 7702's copy is page-local and this pass has no write
   access to that post; when it is promoted, this is a one-line comma-append. */
.sm-page .ww-intro-divider{border-top:1px solid #d8c8ac;margin:60px 0 0;}
@media (max-width:900px){
  .sm-page .ww-intro-divider{margin-top:52px;}
}

/* The gap BELOW the rule is 7702's other half, and on 7567 it is NOT free.
   On 7702 it comes from the following label's own `margin-top:52px`
   (`.ww-svc-label`). Here the following label is `.smp-sub-head.ws-sw-kicker`,
   whose `margin:0 0 18px` shorthand ZEROES its top margin -- measured: hiding
   the divider leaves the grid and the "Arranging" label flush at 0px. So the
   lower gap is supplied here, on the ADJACENCY, which keeps it attached to the
   divider rather than changing `.ws-sw-kicker` for every other use of it.
   52px / 44px are 7702's own values, not new ones. */
.sm-page .ww-intro-divider + .smp-sub-head.ws-sw-kicker{margin-top:52px;}
@media (max-width:767px){
  .sm-page .ww-intro-divider + .smp-sub-head.ws-sw-kicker{margin-top:44px;}
}

/* ==========================================================================
   PASS A — FOOTER BREAKPOINT CONTRACT (DESIGN.md v2.32.0, appended v1.0.55)
   --------------------------------------------------------------------------
   Three changes to the global footer (HFE "Footer 1", post 40), authored
   ENTIRELY as child-theme overrides. *** POST 40 IS NOT EDITED BY THIS PASS,
   AND THE ELEMENTOR KIT BREAKPOINTS ARE NOT TOUCHED — THEY ARE KIT-WIDE AND
   MOVING ONE WOULD REFLOW THE WHOLE SITE. *** Everything below re-states an
   Elementor breakpoint locally, for this footer only.

   WHY (0,3,0) + !important ON EVERY RULE, AND IT IS NOT BELT-AND-BRACES:
   post-40.css is ALSO printed as a byte-identical page-local <style> in the
   document BODY (~doc line 1373), i.e. AFTER this head-enqueued sheet. At
   equal specificity the body copy wins on SOURCE ORDER. The (0,3,0) form
   `.elementor-40 .elementor-element.elementor-element-XXXX` matches
   Elementor's own generated selector exactly, so `!important` is what
   actually decides it. This mirrors the FIX C block above, which already
   carries `!important` for precisely this reason.

   ELEMENTOR DELIVERS CONTAINER LAYOUT THROUGH CUSTOM PROPERTIES, so most of
   what follows sets `--flex-direction` / `--width` / `--align-items` rather
   than the properties themselves. The rules that consume them live in
   Elementor's custom-frontend.min.css (`.e-con-full.e-flex{flex-direction:
   var(--flex-direction)}` etc.).
   ========================================================================== */


/* ---------- PA1. BOTTOM BAR — STACKED STATE RESTORED FOR 768–959 ----------
   Survey S1 §3.4 measured the 3-across bar needs 885.82px of bar content
   width = a 946px viewport, confirmed by 1px sweep (945 -> copyright wraps to
   2 lines, 946 -> all three groups on 1 line). The FIX C block above moves
   from `min-width:768px` to `min-width:960px` in the same pass, so the row
   state now begins at 960 rather than 768.

   *** 960, NOT 946, AND THE REASON IS NOT CAUTION-FOR-ITS-OWN-SAKE. *** The
   dominant component of that 885.82px is a TEXT RUN — the copyright line at
   365.03px — whose width is font-metric dependent (Manrope, self-hosted). At
   946 the fit has 0.01px of slack. 960 buys ~14px of headroom and nothing
   else in the footer switches between the two.

   THIS BLOCK MIRRORS post-40.css's OWN `@media(max-width:767px)` DECLARATIONS
   FOR THE SAME THREE ELEMENTS — values read from that file, not invented, so
   the stacked bar reads identically on both sides of 768. The padding is
   deliberately the ≤767 value (40/90) and not the ≤1024 value (40/100): a
   40/100 bar at 768–959 would step 10px taller at the 767/768 boundary for no
   reason, and the whole point of this block is that the boundary is invisible.

   *** THE BAR HAS THREE FLEX CHILDREN, NOT TWO. *** Copyright sits alone in
   58a70e7; socials AND legal share c5a1fbe; and ckstjs1 — the zero-width
   Complianz consent shim — is a third child. That third child is what took
   the flush-right slot at v2.1.78 and needed the margin-left:auto fix at
   v2.1.80 (see FIX C above). In the COLUMN state space-between is not in
   play, so the shim is layout-neutral here — but never reason about this bar
   from an assumed two-child model.                                          */
@media (min-width:768px) and (max-width:1099px){
  .elementor-40 .elementor-element.elementor-element-2b1e002{
    --flex-direction:column !important;
    --container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% ) !important;
    --container-widget-height:initial !important;
    --container-widget-flex-grow:0 !important;
    --container-widget-align-self:initial !important;
    --flex-wrap-mobile:wrap !important;
    --align-items:center !important;
    --gap:18px 0px !important;
    --row-gap:18px !important;
    --column-gap:0px !important;
    --padding-top:40px !important;
    --padding-bottom:90px !important;
    --padding-left:0px !important;
    --padding-right:0px !important;
  }
  .elementor-40 .elementor-element.elementor-element-c5a1fbe{
    --flex-direction:column !important;
    --container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% ) !important;
    --container-widget-height:initial !important;
    --container-widget-flex-grow:0 !important;
    --container-widget-align-self:initial !important;
    --flex-wrap-mobile:wrap !important;
    --align-items:center !important;
  }
  .elementor-40 .elementor-element.elementor-element-8afd673{
    margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 20px) 0px !important;
    text-align:center !important;
  }
}


/* ---------- PA2. TWO-COLUMN CENTRED FOOTER EXTENDED TO 1099 ----------
   The 881px boundary (Elementor's kit `mobile_extra`) currently flips BOTH
   the column width (50% -> 25%) AND the alignment (centre -> left) at once.
   In the resulting 4-across grid the payment column gets only 188–230px of
   content, which cannot hold a three-icon row (223.17px of ink) — that is the
   2+2+1 break S1 measured at 932 and 1024.

   DERIVATION. Payment column content width in the 4-across state
     = (viewport - 60) / 4 - 30        [30px = 464b062 gutters; 30px = column padding-left]
   A three-icon row needs 3 x 62.390625 + 2 x 18 = 223.17px, so
     (vw - 60)/4 - 30 >= 223.17  ->  vw >= 1072.68  ->  1073px.
   We switch at 1100: 6.8px of slack and an existing standard stop. The Form
   Parity Spec's own migration checklist (item 8, v1.11) already states the
   legal-row flush-right check at ">=1100px", so 1100 is the boundary this
   build was already documented against.

   *** THIS EXTENDS THE WHOLE STATE, NOT JUST THE WIDTH. *** A two-column but
   LEFT-aligned footer has never existed in this build. The selector list
   below is the output of a measured census (computed text-align for every
   text-bearing element in the footer at 880 vs 932, walking DESCENDANTS and
   not just labelled containers): 18 text-bearing elements differ, owned by 7
   widgets. Two of those seven — the Services and Explore icon lists — are NOT
   reached by text-align alone, because `.elementor-icon-list-item` and its
   `a` are `display:flex`; Elementor centres them with `justify-content` in a
   separate rule keyed on the class `elementor-mobile_extra-align-center`
   inside `@media(max-width:880px)`. Both halves are replicated below. A census
   keyed on the four headings alone would have left 13 links left-aligned.   */
@media (min-width:881px) and (max-width:1099px){

  /* -- the 2x2 grid itself: the row must be allowed to wrap, or four 50%
        columns cannot form two rows -- */
  .elementor-40 .elementor-element.elementor-element-dce9dfb{
    --flex-wrap:wrap !important;
    border-width:1px 0px 1px 0px !important;
    --border-top-width:1px !important;
    --border-right-width:0px !important;
    --border-bottom-width:1px !important;
    --border-left-width:0px !important;
    --margin-bottom:60px !important;
  }

  /* -- column widths + the per-column border/padding set that goes with the
        2x2 arrangement (mirrored from post-40.css's own <=880 block) -- */
  .elementor-40 .elementor-element.elementor-element-6ccf985{
    --width:50% !important;
    --align-items:center !important;
    --container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% ) !important;
  }
  .elementor-40 .elementor-element.elementor-element-3e5d279{
    --width:50% !important;
    border-width:0px 0px 0px 0px !important;
    --border-top-width:0px !important;
    --border-right-width:0px !important;
    --border-bottom-width:0px !important;
    --border-left-width:0px !important;
    --padding-top:60px !important;
    --padding-bottom:60px !important;
    --padding-left:30px !important;
    --padding-right:30px !important;
  }
  .elementor-40 .elementor-element.elementor-element-87799c8{
    --width:50% !important;
    border-width:1px 1px 0px 0px !important;
    --border-top-width:1px !important;
    --border-right-width:1px !important;
    --border-bottom-width:0px !important;
    --border-left-width:0px !important;
    --padding-top:60px !important;
    --padding-bottom:60px !important;
    --padding-left:30px !important;
    --padding-right:30px !important;
  }
  .elementor-40 .elementor-element.elementor-element-ba9bf39{
    --width:50% !important;
    border-width:1px 0px 0px 0px !important;
    --border-top-width:1px !important;
    --border-right-width:0px !important;
    --border-bottom-width:0px !important;
    --border-left-width:0px !important;
    --padding-top:60px !important;
    --padding-bottom:60px !important;
    --padding-left:30px !important;
    --padding-right:30px !important;
  }
  .elementor-40 .elementor-element.elementor-element-25b2d28{
    --margin-bottom:60px !important;
  }

  /* -- CENSUS OUTPUT, part 1: the widgets that own the 18 differing
        text-bearing elements. ffb7a34 "Get in Touch", c9b35bf the three-line
        address, 2d43dde "services", 6542251 "explore", cfdba64 "Accepted
        Payment Methods", plus the two icon-list widgets whose 13 link spans
        inherit from the widget box. -- */
  .elementor-40 .elementor-element.elementor-element-ffb7a34,
  .elementor-40 .elementor-element.elementor-element-c9b35bf,
  .elementor-40 .elementor-element.elementor-element-2d43dde,
  .elementor-40 .elementor-element.elementor-element-6542251,
  .elementor-40 .elementor-element.elementor-element-cfdba64,
  .elementor-40 .elementor-element.elementor-element-bdff189,
  .elementor-40 .elementor-element.elementor-element-aaca989{
    text-align:center !important;
  }

  /* -- CENSUS OUTPUT, part 2: the email link is centred by align-self, not by
        text-align — it is a shrink-to-fit flex item in a column container. -- */
  .elementor-40 .elementor-element.elementor-element-be7bce2.elementor-element{
    --align-self:center !important;
  }

  /* -- CENSUS OUTPUT, part 3: the icon-list rows are display:flex, so
        text-align does not move them. This is Elementor's own
        `.elementor-widget.elementor-mobile_extra-align-center
         .elementor-icon-list-item{justify-content:center}` re-stated for this
        band. WITHOUT IT the 13 service/explore links stay left-aligned inside
        a centred column and the state is only half-applied. -- */
  .elementor-40 .elementor-element.elementor-element-bdff189 .elementor-icon-list-item,
  .elementor-40 .elementor-element.elementor-element-bdff189 .elementor-icon-list-item a,
  .elementor-40 .elementor-element.elementor-element-aaca989 .elementor-icon-list-item,
  .elementor-40 .elementor-element.elementor-element-aaca989 .elementor-icon-list-item a{
    justify-content:center !important;
  }
}


/* ---------- PA3. PAYMENT BLOCK — CENTRING ACROSS 768–1099 ----------
   ITEM 4, and this is the band the defect actually lived in. The heading
   cfdba64 centres from an 880px Elementor breakpoint; the icon row and the
   caption centre from a 767px breakpoint in the widget's own page-local
   <style>. Between 768 and 880 the heading was therefore centred over a
   left-aligned icon row and a left-aligned caption. PA2 above fixes 881–1099;
   this block covers 768–880 as well, so all three agree across the whole
   two-column state.

   The caption carries max-width:300px, so text-align:center is not enough on
   its own — the 300px box must also be centred in the column, hence
   margin-inline:auto.                                                        */
@media (min-width:768px) and (max-width:1099px){
  .elementor-40 .elementor-element.elementor-element-a95141b .sm-ftr-pay__marks{
    justify-content:center !important;
  }
  .elementor-40 .elementor-element.elementor-element-a95141b .sm-ftr-pay__note{
    text-align:center !important;
    margin-inline:auto !important;
  }
}


/* ---------- PA4. PAYMENT MARKS — THE 2+3 SPLIT ----------
   ITEM 6. Required outcome: PayPal + Stripe on row 1, Visa + Mastercard +
   Amex on row 2, the pair optically centred over the trio. The grouping is
   SEMANTIC — processors above networks — so *** THE SOURCE ORDER IS NOT
   REORDERED: no `order` property, no DOM change. *** Rows 1 and 2 are the
   first two and last three children in document order.

   THE RULE, NOT A FIXED PATTERN: all five sit on one line whenever the
   container reaches 384px; below that they break 2+3. Never 4+1, never 3+2,
   never 2+2+1.

   THE MEASUREMENT THIS IS BUILT ON. Each mark is an inline <svg viewBox="0 0
   780 500"> whose height is pinned by the widget's own page-local
   `.sm-ftr-pay__marks svg{height:40px!important;width:auto!important}`. Its
   intrinsic width is therefore 40 x 780/500 = 62.4px exactly, which Chrome
   renders as 62.390625px (1/64 quantisation) — measured identical on all five
   marks. `--sm-pay-icon` is authored as the GEOMETRIC 62.4px, deliberately a
   hair ABOVE the rendered value: the track it sizes must never come out
   NARROWER than the ink, or the trio would wrap and the whole construction
   would fail. The 0.028px surplus across three marks is inert.
   `--sm-pay-gap` is the column-gap half of the base `gap:14px 18px`.

   *** A CONTAINER QUERY WAS THE PREFERRED MECHANISM AND IT WAS REJECTED ON A
   MEASUREMENT, NOT A PREFERENCE. *** `container-type:inline-size` on
   .sm-ftr-pay was tested with a zero-diff noise floor and a clean restore.
   At >=768 it perturbed nothing (1 diff across 204 elements, and that diff was
   the property itself). At 390 and 402 it moved 76 elements: the payment
   widget's height went 160px -> 1642px and the whole footer grew 1482px,
   because layout containment makes .sm-ftr-pay the containing block for the
   five `position:absolute` .sm-sr-only spans inside the <li>s (their computed
   `bottom` went 121px -> 1603px). The stop gate fired; media queries below.

   THE BANDS ARE DERIVED FROM THE POST-PA2 COLUMN WIDTHS, NOT S1'S PRE-CHANGE
   FIGURES. Payment column content width by state:
     <=767   stacked, full width      = vw - 30           ; five fit at vw >= 414
     768–1099 two-column (PA2)        = (vw - 60)/2 - 60  ; five fit at vw >= 948
     >=1100  four-column              = (vw - 60)/4 - 30  ; max 270px — five NEVER fit
   The three bands below are those complements, biased ~2px OUTWARD so the
   2+3 state covers a hair more than strictly necessary: landing one pixel
   short of the flex fit would fall back to 4+1, whereas one pixel of extra
   2+3 is a legal outcome.

   HOW THE BREAK IS FORCED, WITHOUT `order` AND WITHOUT A DOM NODE. The <ul>
   is sized to exactly the trio's width, so the trio fills line 2 on its own.
   Line 1 is then filled to the same width by a leading margin on mark 1 and a
   trailing margin on mark 2, which pushes mark 3 onto line 2. The leading
   margin is half a slot — (icon + gap)/2 = 40.2px — which is precisely the
   offset that centres a 2-up row over a 3-up row, so the centring is a
   consequence of the construction rather than a separate tuned value. The
   2px shortfall in the trailing margin is slack: with justify-content:
   flex-start it collects at the END of line 1 and shifts nothing.            */
.elementor-40 .elementor-element.elementor-element-a95141b .sm-ftr-pay__marks{
  --sm-pay-icon:62.4px;   /* 40px x 780/500 viewBox; renders 62.390625px, measured on all 5 */
  --sm-pay-gap:18px;      /* the column-gap half of the base `gap:14px 18px` */
  --sm-pay-pair:calc(2 * var(--sm-pay-icon) + var(--sm-pay-gap));      /* 142.8px */
  --sm-pay-trio:calc(3 * var(--sm-pay-icon) + 2 * var(--sm-pay-gap));  /* 223.2px */
  --sm-pay-five:calc(5 * var(--sm-pay-icon) + 4 * var(--sm-pay-gap));  /* 384.0px — the one-line threshold */
  --sm-pay-lead:calc((var(--sm-pay-icon) + var(--sm-pay-gap)) / 2);    /* 40.2px — half a slot */
}
@media (max-width:415px),
       (min-width:768px) and (max-width:949px),
       (min-width:1100px){
  .elementor-40 .elementor-element.elementor-element-a95141b .sm-ftr-pay__marks{
    width:var(--sm-pay-trio) !important;
    margin-inline:auto !important;
    justify-content:flex-start !important;
  }
  .elementor-40 .elementor-element.elementor-element-a95141b .sm-ftr-pay__marks > li:nth-child(1){
    margin-inline-start:var(--sm-pay-lead) !important;
  }
  .elementor-40 .elementor-element.elementor-element-a95141b .sm-ftr-pay__marks > li:nth-child(2){
    margin-inline-end:calc(var(--sm-pay-trio) - var(--sm-pay-pair) - var(--sm-pay-lead) - 2px) !important;
  }
}
/* >=1100 is the LEFT-aligned four-column state, so the trio track is flush to
   the column's content edge rather than centred in it — matching the heading
   and the caption, which are left-aligned there. The pair stays centred over
   the trio either way, because that offset lives on the marks themselves. */
@media (min-width:1100px){
  .elementor-40 .elementor-element.elementor-element-a95141b .sm-ftr-pay__marks{
    margin-inline:0 !important;
  }
}

/* ---------- PB1. BEFORE-FOOTER FORM PHOTO — MOBILE VERTICAL FRAMING ----------
   ITEM 7, added v1.0.56. The source `start-project-orch-arr-1200.webp` is
   1200x1800 PORTRAIT. In the stacked <=767px strip the container is far WIDER
   than the source aspect, so WIDTH binds `cover` and the overflow is entirely
   VERTICAL — which is why the harpist's face was cropped off the top.

   MEASURED, this pass:
     vw   strip box    scaled height   vertical overflow   hidden@50%   hidden@35%
     390  358 x 240        537.00            297.00          148.50       103.95
     430  398 x 240        597.00            357.00          178.50       124.95
     744  712 x 240       1068.00            828.00          414.00       289.80
     767  735 x 240       1102.50            862.50          431.25       301.88
   At the default 50% the 744 strip hid 414px of a 1068px image off the top and
   her face was inside that band. Lowering background-position-y moves the
   window UP the source, so `35%` reveals 124.2px more of the top at 744 and
   44.6px more at 390.

   *** ONE VALUE SERVES BOTH ENDS, AND THAT WAS NOT ASSUMED — IT WAS SWEPT. ***
   The crop severity is aspect-dependent (the 744 strip is 2.97:1 and crops
   hard; the 390 strip is 1.49:1 and crops far less), so a value tuned only at
   744 could over-correct at 390 and start cutting her hands or the harp base.
   30 / 35 / 40% were captured at 390 and 744 before committing: at 390 all
   three keep the whole seated figure, the hands on the strings and the music
   stand in frame; at 744, 35% brings the face clearly in with the harp crown
   still above it. 35% was chosen as the value that is correct at both ends, so
   the rule did NOT need splitting.

   *** THE <=767 SCOPE IS SAFE BY GEOMETRY, NOT BY LUCK. *** At 768 the photo
   becomes the 316.80 x 873.86 side column, where the container (0.36:1) is
   TALLER than the source aspect (0.67:1) — so HEIGHT binds cover, the vertical
   overflow is ZERO, and background-position-y is a NO-OP there. A <=767-scoped
   override is physically incapable of touching the side column; measured
   unchanged at 768 either side of this write.

   `!important` is REQUIRED: the base `body.page-id-7567 .enqsec-inner-photo`
   rule above carries it on every declaration, and the 7603 template's own
   page-local <style> sits in the document BODY. This block is appended AFTER
   that base rule so it also wins on source order at equal specificity. */
@media (max-width:767px){
  body.page-id-7567 .enqsec-inner-photo{
    background-position:center 35% !important;
  }
}

/* ==========================================================================
   WHO WE SERVE (7723) -- SECTION SUB-HEADLINES + INTRO HEADLINE, SENTENCE CASE
   (DESIGN.md v2.34.0)
   --------------------------------------------------------------------------
   The Soudify PARENT theme uppercases EVERY heading via a bare h1..h6 rule at
   (0,0,1) reading --e-global-typography-secondary-text-transform:uppercase,
   declared on :root in the parent's own style.css (token L480, rule L545).
   *** THAT DEFAULT IS CORRECT FOR THIS SITE AND MUST NOT BE FLIPPED. *** The
   page h1s, the FAQ category headings, the pricing card names and the footer
   h6s all depend on it; redefining the token -- including in a child :root --
   would invert ~50 intentional caps site-wide. Components that want sentence
   case OPT OUT INDIVIDUALLY, which is exactly what this block does.
   Mirrors .sm-page .smp-sec-head (L1146). *** NO !important: *** the origin
   carries none and (1,1,0) beats (0,0,1) by three orders, so specificity
   alone decides and source order never comes into it. Verified by
   CSS.getMatchedStylesForNode -- exactly ONE rule in the entire cascade sets
   text-transform on these seven elements, and it is that parent-theme rule.
   The wsmain1 inline <style> declares both classes (base + two @media steps)
   and sets text-transform in NONE of them. */
#ws-page .ws-sec-head,
#ws-page .ws-intro-h2{ text-transform:none; }

/* ==========================================================================
   ScoreMasters — nav dropdown width (DESIGN.md v2.38.0)
   --------------------------------------------------------------------------
   AUTHORING LOCATION. The PARENT theme sets `.main-navigation .sub-menu`
   `min-width:300px` at (0,2,0) in themes/soudify/style.css L2630, with NO
   !important. Post 38 carries NO width control of any kind and its generated
   post-38.css sets no sub-menu width, so this is a STYLESHEET override and is
   never a post-38 edit. (Post 38 has a JSON-corruption history: CHANGELOG
   v2.1.9 / v2.1.10, whose permanent process rule forbids raw string edits to
   `_elementor_data`. This pass does not open post 38 at all.)

   SPECIFICITY (0,2,0) EQUALS THE PARENT'S, SO SOURCE ORDER DECIDES, and the
   child stylesheet is enqueued AFTER the parent's -- re-measured this pass as
   <link> index 36 vs 23 in the rendered document. No !important is used and
   none is needed.

   *** THE SIZING MODE IS THE FIX; THE FLOOR NEVER WAS. *** The panel is
   position:absolute inside a ~95px trigger <li>, so shrink-to-fit resolves
   min(max(min-content, available), max-content) with available ~115px. That
   is BELOW min-content, so the panel was pinned to whichever floor applied.
   Pass D1 lowered the floor alone and the panel collapsed to MIN-CONTENT --
   200.59 Services / 180 About -- and every multi-word item wrapped to two
   lines. `width:max-content` ignores available width, so the panel reaches
   its widest ITEM instead of its longest WORD. Derivation: CHANGELOG v2.38.0.

   THE TWO GUARDS ARE BOTH INERT TODAY AND ARE RECORDED AS SUCH:
     min-width:180px  -- About resolves 190.05, so it never binds. It exists
                         so a future menu of only very short items cannot
                         render a stunted panel.
     max-width:360px  -- Services resolves 298.41, so it never binds. It
                         exists so a future long item wraps rather than
                         pushing the rightmost panel off-screen.

   MEASURED NATURALS, and the arithmetic that predicts them exactly: a panel's
   width is its widest item's TEXT plus an 84px inset, and that inset is
   `margin:0 42px` on the <a> -- NOT the panel's padding, which is
   `32px 0 38px` (zero horizontal) and is deliberately untouched.
     Services  214.41 ("Orchestration & Arranging") + 84 = 298.41  measured 298.41
     About     106.05 ("Who We Serve")              + 84 = 190.05  measured 190.05
   Verified at 1025/1100/1200/1280/1440/1680: every item ONE line, panel left
   edge exactly -20px from its trigger (left-pinned, grows rightward), no
   panel crossing the viewport edge, zero horizontal overflow.

   SCOPE, MEASURED BEFORE WRITING: `.main-navigation .sub-menu` matches
   EXACTLY TWO elements on the homepage and TWO on a service page -- Services
   and About, both depth 0. There is NO third-level sub-menu. The mobile
   off-canvas submenus are OUTSIDE `.main-navigation` and keep min-width:0 /
   width:auto / position:static; the desktop widget is display:none at <=1024.

   *** DELIBERATELY NOT ADDED: a ::before hover bridge. *** The 20px offset
   exists ONLY in the closed state (`top:calc(100% + 20px)`); the parent's own
   `.main-navigation ul li:hover > ul{top:100%}` collapses it to 0.00px the
   instant the panel opens, proved by a 12-sample pointer traverse in D1. A
   bridge here would be dead CSS on a component that renders on every page.
   ========================================================================== */
.main-navigation .sub-menu{
  min-width:180px;
  width:max-content;
  max-width:360px;
}

/* ==========================================================================
   PASS E1 (DESIGN.md v2.41.0) -- ADDITIVE ONLY. ONE APPEND, NOTHING EDITED.
   --------------------------------------------------------------------------
   Re-scope of the 6.1 VIDEO-CELL SUBGRID block (lines 1440-1448) so that the
   same component also reaches post 7723. 7723 roots on #ws-page and carries
   NO .sm-page -- measured 0 matches at all six widths (survey S4 3.4) -- so
   the 6.1 block cannot reach it, which is exactly what 6.1's own comment
   predicted when it was written.

   *** THE 6.1 BLOCK IS LEFT BYTE-IDENTICAL. *** This is a PARALLEL block
   carrying only the body.page-id-7723 leg, appended at the TAIL so every
   line number DESIGN.md and CHANGELOG.md cite stays valid. It is the same
   dual-scope shape used for the .ws-sw / .ws-ap families at lines 492-561,
   split across two sites instead of comma-joined for that reason alone.

   *** THE TWO LEGS ARE DISJOINT BY CONSTRUCTION, NOT BY LUCK: *** 7723 has
   no .sm-page and no service page is page-id-7723, so no element can ever
   match both. The specificity difference -- (0,4,1) here against (0,4,0)
   there -- therefore can never decide anything, and 7567's computed values
   cannot move. Verified byte-identical on 7567 at all six widths, E1.

   Declarations are copied VERBATIM from 6.1. *** IF 6.1 EVER CHANGES, CHANGE
   THIS TOO -- it is ONE component in TWO scopes, and nothing links them. ***

   *** CHILD-COUNT: EXACTLY TWO .ws-gallery__item--media CELLS over a 3-track
   template. *** Adding or removing a cell requires re-deriving BOTH the
   nth-child placements AND the track count together -- the same hard-wired
   contract #musical-theater carries (CHANGELOG v2.15.1), and it fails
   SILENTLY: the layout still renders, it is merely wrong.
   ========================================================================== */
@supports (grid-template-rows: subgrid){
  @media (min-width:768px){
    body.page-id-7723 .ws-gallery--video{grid-template-rows:repeat(3,auto);row-gap:0;}
    body.page-id-7723 .ws-gallery--video .ws-gallery__item--media{display:grid;grid-template-rows:subgrid;}
    body.page-id-7723 .ws-gallery--video .ws-gallery__item--media:nth-child(1){grid-row:1/span 3;grid-column:1;}
    body.page-id-7723 .ws-gallery--video .ws-gallery__item--media:nth-child(2){grid-row:1/span 3;grid-column:2;}
    body.page-id-7723 .ws-gallery--video .ws-gallery__item--media > *{align-self:start;min-width:0;}
  }
}

/* ==========================================================================
   T1. PHASE-1 SERVICE-PAGE SHELL — HERO, WHO IT'S FOR, RELATED SERVICES,
   PRICING.  LIFTED OUT OF POST 7567'S PAGE-LOCAL <style> WIDGETS (v2.41.16)
   --------------------------------------------------------------------------
   PROMOTE-ON-SECOND-USE, APPLIED BEFORE PAGE TWO EXISTS. Four sections of the
   pilot carried their styling inside the post: `smherow` (3,405 B), `smwhow`
   (1,393 B), `smrelw` (919 B) and `smpricew` (5,004 B in two blocks). Four more
   service pages are about to be built on the same shell, so left in place that
   CSS would be duplicated five times and every future change would be a
   five-page edit. It is moved ONCE, here.

   WHAT STAYED IN THE POST — and it is only this: the hero PHOTO and the two
   framing tokens `--smp-hero-posx` / `--smp-hero-posy`, which are per-service
   by definition (Service-Page Hero Framing contract, v2.33.0). A new page
   therefore supplies content plus one `background-image` and two custom
   properties, and inherits every rule below.

   *** CASCADE: THESE RULES MOVED EARLIER IN SOURCE ORDER. *** They previously
   sat in a page-local <style> in the document BODY, i.e. after this file. The
   hero, Who It's For and Related Services blocks were ALREADY authored at
   `.sm-page` (0,2,0) and have NO competitor anywhere in this file, so moving
   them cannot change a winner. The pricing block was authored UNSCOPED at
   (0,1,0) and gains `.sm-page` here — see T1.4 for why, and for the ONE
   collision that scoping created and how it is resolved WITHOUT `!important`.
   ========================================================================== */

/* ---------- T1.1 HERO (from `smherow`) ----------
   `background-image` is deliberately ABSENT: it is the per-page half and stays
   in the post. `background-size` / `background-position` / `background-repeat`
   are longhands, so declaring them here does not reset it. */
.sm-page .smp-hero{position:relative;display:flex;align-items:center;min-height:660px;padding:132px 30px 88px;background-size:cover;background-position:var(--smp-hero-posx,50%) var(--smp-hero-posy,42%);background-repeat:no-repeat;}
.sm-page .smp-hero__inner{max-width:1040px;margin:0 auto;text-align:center;width:100%;}
.sm-page .smp-hero__h1{font-family:"Playfair Display",serif;font-weight:700;font-size:64px;line-height:1.08;letter-spacing:-.02em;text-transform:uppercase;color:#ffffff;margin:0;text-shadow:0 2px 20px rgba(21,19,17,.38);}
.sm-page .smp-hero__sub{font-family:"Manrope",sans-serif;font-weight:400;font-size:18px;line-height:1.75;color:rgba(255,255,255,0.88);margin:20px auto 0;max-width:760px;}
.sm-page .smp-hero__amp{font-family:"Playfair Display",serif;font-style:italic;font-weight:500;font-size:40px;line-height:1.25;color:#c9a96e;margin:16px 0 0;}
.sm-page .smp-hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:36px 0 0;}
.sm-page .smp-btn{display:inline-flex;align-items:center;justify-content:center;font-family:"Manrope",sans-serif;font-weight:600;font-size:16px;letter-spacing:.08em;line-height:1.2;text-transform:uppercase;text-decoration:none;padding:15px 36px;border-radius:9999px;color:#ffffff;background:linear-gradient(100deg,#c9a96e 0%,#b07a4a 42%,#7c1f3a 100%);box-shadow:0 4px 18px rgba(124,31,58,.22);transition:transform .25s ease,box-shadow .25s ease,background .25s ease;}
.sm-page .smp-btn:hover,.sm-page .smp-btn:focus-visible{background:linear-gradient(100deg,#d4b87f 0%,#bb854f 42%,#8e2545 100%);transform:translateY(-2px);box-shadow:0 8px 26px rgba(124,31,58,.30);color:#ffffff;}
.sm-page .smp-btn--ghost{background:transparent;border:2px solid rgba(255,255,255,0.6);box-shadow:none;padding:13px 34px;}
.sm-page .smp-btn--ghost:hover,.sm-page .smp-btn--ghost:focus-visible{background:rgba(255,255,255,0.12);border-color:#ffffff;transform:translateY(-2px);box-shadow:none;}
.sm-page .smp-btn:focus-visible{outline:2px solid #7a5c2e;outline-offset:3px;}
.sm-page .smp-hero .smp-trust{margin-top:46px;}
.sm-page .smp-prose{max-width:900px;margin:0 auto;}
.sm-page .smp-prose a{color:#7c1f3a;text-decoration:underline;text-decoration-color:rgba(124,31,58,.45);text-underline-offset:3px;transition:color .2s ease;}
.sm-page .smp-prose a:hover,.sm-page .smp-prose a:focus-visible{color:#7a5c2e;text-decoration-color:#7a5c2e;}
@media(max-width:1024px){
  .sm-page .smp-hero{min-height:580px;padding:120px 30px 76px;}
  .sm-page .smp-hero__h1{font-size:50px;}
  .sm-page .smp-hero__amp{font-size:34px;}
}
@media(max-width:767px){
  .sm-page .smp-hero{min-height:0;padding:104px 15px 60px;}
  .sm-page .smp-hero__h1{font-size:36px;}
  .sm-page .smp-hero__sub{font-size:16.5px;}
  .sm-page .smp-hero__amp{font-size:28px;}
  .sm-page .smp-hero__cta{gap:12px;}
  .sm-page .smp-btn{font-size:14px;padding:14px 26px;}
  .sm-page .smp-btn--ghost{padding:12px 24px;}
  .sm-page .smp-hero .smp-trust{margin-top:34px;}
}
@media(max-width:430px){
  .sm-page .smp-hero__h1{font-size:31px;}
  .sm-page .smp-hero__amp{font-size:26px;}
  .sm-page .smp-btn{width:100%;}
}

/* ---------- T1.2 WHO IT'S FOR CARDS (from `smwhow`) ----------
   Moved VERBATIM: every selector was already `.sm-page`-scoped, so specificity
   is unchanged at (0,2,0) and this file carries no competing `.smp-card*` or
   `.smp-cards` rule (measured: zero occurrences before this block).
   `.sm-page .smp-card-title a` is (0,2,1) and therefore still outranks the
   theme's `.elementor a{box-shadow:none;text-decoration:none}` at (0,1,1)
   without depending on source order. */
.sm-page .smp-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:28px;margin:0;padding:0;list-style:none;}
.sm-page .smp-card{flex:0 1 100%;min-width:0;background:#ffffff;border:1px solid #d8c8ac;border-radius:4px;padding:30px;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;}
.sm-page .smp-card:hover{border-color:#7a5c2e;box-shadow:0 6px 22px rgba(166,130,79,.16);transform:translateY(-3px);}
.sm-page .smp-card-title{font-family:"Playfair Display",serif;font-weight:600;font-size:24px;line-height:1.25;color:#1a1712;margin:0 0 12px;text-transform:none;}
.sm-page .smp-card-title a{color:inherit;text-decoration:none;transition:color .25s ease;}
.sm-page .smp-card-title a:hover,.sm-page .smp-card-title a:focus-visible{color:#7a5c2e;text-decoration:underline;text-decoration-color:#7a5c2e;text-decoration-thickness:1px;text-underline-offset:3px;}
.sm-page .smp-card-body{font-family:"Manrope",sans-serif;font-size:16px;line-height:1.65;color:#4a4030;margin:0;}
@media(min-width:768px){.sm-page .smp-card{flex:0 1 calc((100% - 28px)/2);}}
@media(min-width:1024px){.sm-page .smp-card{flex:0 1 calc((100% - 56px)/3);padding:34px;}}
@media(prefers-reduced-motion:reduce){.sm-page .smp-card{transition:none;}.sm-page .smp-card:hover{transform:none;}}

/* ---------- T1.2b RAGGED FINAL ROW — A GUARANTEE, NOT A REPAIR ----------
   Who It's For is CONDITIONAL: card counts vary per service, so a page with
   four or five cards against the 3-across band leaves a short final row.
   *** THAT ROW ALREADY CENTRES, BY CONSTRUCTION. *** `.smp-cards` is
   `flex-wrap:wrap` + `justify-content:center`, and a wrapped flex container
   centres EVERY line independently -- 4 cards give 3+1 centred, 5 give 3+2
   centred, and the cards keep their uniform 1/3 width because nothing tells
   them to grow (`flex:0 1 <basis>`, never `1 1`). This is the self-correcting
   model DESIGN.md v2.37.0 contrasts with post 23's hard-wired grid, and it is
   why 7567 needed no CSS change when it went from five cards to six.
   The declaration below RESTATES that intent at each multi-column band so a
   future edit to the base rule cannot silently drop it and reintroduce a
   left-aligned orphan. It sets the value the base rule already computes, so
   it is a measured NO-OP on the pilot's six cards -- six fills 3+3 exactly.
   *** NEVER LET A SHORT ROW'S CARDS GROW TO FILL IT. *** Uniform card width is
   the design (DESIGN.md, post 23 Who We Serve grid); a widened orphan reads as
   a different component. */
@media(min-width:768px){
  .sm-page .smp-cards{justify-content:center;}
}

/* ---------- T1.3 RELATED SERVICES (from `smrelw`) ----------
   Moved VERBATIM; already `.sm-page`-scoped at (0,2,0), no competitor in this
   file. NOTE for the A6 icon block above: `.sm-page .smp-related__link` is
   `display:inline-block` and that is deliberate -- the icon gap is a
   `margin-inline-end` on the glyph, never a flex `gap` (DESIGN.md v2.29.0,
   where an inline-flex attempt measured a 0px gap). */
.sm-page .smp-related{list-style:none;margin:0;padding:0;border-top:1px solid #d8c8ac;}
.sm-page .smp-related__item{padding:26px 0;border-bottom:1px solid #d8c8ac;}
.sm-page .smp-related__link{display:inline-block;font-family:"Playfair Display",serif;font-weight:600;font-size:24px;line-height:1.25;color:#1a1712;text-decoration:none;transition:color .25s ease;}
.sm-page .smp-related__link:hover,.sm-page .smp-related__link:focus-visible{color:#7a5c2e;text-decoration:underline;text-decoration-color:#7a5c2e;text-decoration-thickness:1px;text-underline-offset:3px;}
.sm-page .smp-related__body{font-family:"Manrope",sans-serif;font-size:16px;line-height:1.65;color:#4a4030;margin:8px 0 0;max-width:820px;}
@media(max-width:767px){.sm-page .smp-related__link{font-size:21px;}.sm-page .smp-related__item{padding:22px 0;}}

/* ---------- T1.4 PRICING BLOCK (from `smpricew`, both <style> blocks) ----------
   *** EVERY SELECTOR GAINS `.sm-page`, AND THAT SCOPE IS THE POINT. *** The
   `pp-*` family lives on exactly TWO published pages -- 7567 and 7652 (Pricing)
   -- re-measured this pass across all live `_elementor_data` rows and all
   published `post_content`; everything else is revisions of those two. 7652
   carries its OWN page-local copy and has ZERO `.sm-page` elements, so a
   `.sm-page` scope can never reach it and 7652 is untouched by this move.
   Leaving the rules unscoped would have widened them onto a page this pass has
   no authority over.

   *** THE ONE COLLISION THAT SCOPING CREATED, AND HOW IT IS RESOLVED. ***
   Raising `.pp-tab` from (0,1,0) to (0,2,0) makes it TIE with the A3 currency-
   toggle block above, which is also (0,2,0) -- and this block sits LATER in the
   file, so a verbatim move would have won the tie and reverted A3's v2.29.0
   accessibility fix (white fill / `#7a5c2e` border) back to the measured
   FAILURE it replaced (transparent fill, `#d8c8ac` border at 1.04:1 against
   WCAG 1.4.11, label at 3.61:1 against 1.4.3).
   *** THE FIX IS OMISSION, NOT `!important`. *** The three declarations A3
   already owns -- the base `background`, the base border COLOUR, and both hover
   / active colour rules -- are simply NOT moved. A3 remains the sole authority
   on toggle colour, which is what it was written to be, and the computed result
   is byte-identical to before. `border-width` / `border-style` DO move, because
   A3 sets only `border-color`. */
.sm-page .pp-svc{background:#f7f1ea;}
.sm-page .pp-tabs{display:flex;justify-content:center;gap:10px;margin:26px auto 0;}
.sm-page .pp-tab{font-family:"Manrope",sans-serif;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;line-height:1;border-width:1px;border-style:solid;border-radius:9999px;padding:11px 26px;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease;-webkit-appearance:none;appearance:none;}
.sm-page .pp-tab:focus-visible{outline:2px solid #7a5c2e;outline-offset:3px;}
.sm-page .pp-svc-stack{display:flex;flex-direction:column;gap:28px;margin:44px 0 0;}
.sm-page .pp-card{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"ul ur" "ll lr";background:#ffffff;border:1px solid #d8c8ac;border-radius:4px;overflow:hidden;}
.sm-page .pp-q{padding:36px 38px;}
.sm-page .pp-q-ul{grid-area:ul;border-right:1px solid #ece2d0;border-bottom:1px solid #ece2d0;display:flex;flex-direction:column;}
.sm-page .pp-q-ll{grid-area:ll;border-right:1px solid #ece2d0;}
.sm-page .pp-q-ur{grid-area:ur;padding:0;border-bottom:1px solid #ece2d0;min-height:280px;}
.sm-page .pp-q-ur img{width:100%;height:100%;object-fit:cover;display:block;}
.sm-page .pp-q-lr{grid-area:lr;}
.sm-page .pp-card-top{display:flex;align-items:center;gap:16px;}
.sm-page .pp-card-top .pp-ic{font-size:42px;color:#7a5c2e;}
.sm-page .pp-card-titles{display:flex;flex-direction:column;gap:3px;}
.sm-page .pp-card-name{font-family:"Playfair Display",serif;font-weight:600;font-size:23px;line-height:1.22;color:#1a1712;margin:0;}
.sm-page .pp-card-name a{color:inherit;text-decoration:none;transition:color .25s ease;}
.sm-page .pp-card-name a:hover,.sm-page .pp-card-name a:focus-visible{color:#7a5c2e;text-decoration:underline;text-decoration-color:#7a5c2e;text-decoration-thickness:1px;text-underline-offset:3px;}
.sm-page .pp-since{font-family:"Manrope",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.04em;color:#7a5c2e;}
.sm-page .pp-card-intro{font-family:"Manrope",sans-serif;font-weight:400;font-size:15px;line-height:1.6;color:#4a4030;margin:16px 0 0;}
.sm-page .pp-cur{display:none;}
.sm-page .pp-svc[data-cur="usd"] .pp-usd,.sm-page .pp-svc[data-cur="eur"] .pp-eur,.sm-page .pp-svc[data-cur="gbp"] .pp-gbp{display:inline;}
.sm-page .pp-price{margin:20px 0 0;}
.sm-page .pp-price-head{font-family:"Manrope",sans-serif;font-size:14px;color:#4a4030;margin:0;line-height:1.5;}
.sm-page .pp-from{font-family:"Manrope",sans-serif;font-size:13px;font-weight:500;color:#4a4030;}
.sm-page .pp-fig{font-family:"Playfair Display",serif;font-weight:600;font-size:21px;color:#7a5c2e;font-variant-numeric:tabular-nums;}
.sm-page .pp-unit{font-family:"Manrope",sans-serif;font-size:13px;font-weight:500;color:#4a4030;}
.sm-page .pp-sep{color:#cdb78d;padding:0 2px;}
.sm-page .pp-turn{font-family:"Manrope",sans-serif;font-size:14px;font-weight:500;color:#4a4030;}
.sm-page .pp-tiers{list-style:none;margin:14px 0 0;padding:0;}
.sm-page .pp-tier{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 14px;padding:11px 0;border-bottom:1px solid #e8ddc9;}
.sm-page .pp-tier:first-child{border-top:1px solid #e8ddc9;}
.sm-page .pp-tier-name{font-family:"Manrope",sans-serif;font-weight:600;font-size:14px;color:#1a1712;}
.sm-page .pp-tier-price{font-family:"Manrope",sans-serif;font-size:13px;color:#4a4030;}
.sm-page .pp-tier-price .pp-fig{font-size:18px;}
.sm-page .pp-card-cta{margin:24px 0 0;}
.sm-page .pp-list-label{font-family:"Manrope",sans-serif;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#7a5c2e;margin:0 0 12px;}
.sm-page .pp-affects,.sm-page .pp-included{list-style:none;margin:0;padding:0;}
.sm-page .pp-affects li,.sm-page .pp-included li{position:relative;padding:0 0 0 24px;margin:0 0 10px;font-family:"Manrope",sans-serif;font-weight:400;font-size:15px;line-height:1.55;color:#4a4030;}
.sm-page .pp-affects li:last-child,.sm-page .pp-included li:last-child{margin-bottom:0;}
.sm-page .pp-affects li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:#7a5c2e;}
.sm-page .pp-included li::before{content:"\2713";position:absolute;left:0;top:0;font-size:13px;font-weight:700;color:#7a5c2e;line-height:1.55;}
@media(max-width:1024px){.sm-page .pp-q{padding:30px 28px;}.sm-page .pp-q-ur{min-height:240px;}.sm-page .pp-card-name{font-size:21px;}}
@media(max-width:880px){.sm-page .pp-card{grid-template-columns:1fr;grid-template-areas:"ul" "ll" "ur" "lr";}.sm-page .pp-q-ul,.sm-page .pp-q-ll{border-right:0;}.sm-page .pp-q-ll{border-bottom:1px solid #ece2d0;}.sm-page .pp-q-ur{min-height:220px;}}
@media(max-width:767px){.sm-page .pp-q{padding:26px 22px;}.sm-page .pp-tabs{gap:8px;margin-top:24px;}.sm-page .pp-tab{flex:1 1 0;padding:12px 0;font-size:12px;}.sm-page .pp-tier{justify-content:flex-start;}}
/* The donor-neutralising trio from `smpricew`'s SECOND <style> block. It must
   stay AFTER `.sm-page .pp-svc{background:#f7f1ea}` above, exactly as it did in
   the post: same (0,2,0) specificity, so source order decides and `transparent`
   is the value that must win -- the shared `.smp-band--sand` governs the band. */
.sm-page .pp-section{padding:0;}
.sm-page .pp-svc{background:transparent;}
.sm-page .pp-wrap{padding:0;max-width:100%;}

/* ==========================================================================
   Q6. EYEBROW PAINTED-INK OFFSET — two derived corrections (DESIGN.md v2.41.22)
   --------------------------------------------------------------------------
   The centred eyebrow lockup's BOX centre has always been 0.00px against its
   heading, but its PAINTED INK sat +4.55..+6.08px RIGHT of the heading's ink.
   Measured decomposition, closing to 0.000px on every row-mode row:

       DELTA = (L - R)/2 - H
       L = letterbox dead space left of the icon ink inside the 48px slot
       R = trailing dead space right of the last glyph inside the text rect
       H = the HEADING's own ink-centre offset  — NOT correctable, NOT in scope

   CORRECTION 1 removes L. Attachment 7378 is 142x320 with a FULL-FRAME alpha
   bbox (no transparent padding), so `background-size:contain` in a 48x48 slot
   renders 21.30x48 and leaves 13.35px of empty band on EACH side. The band on
   the icon's outer edge is what pushed the ink right. Giving the slot the
   ARTWORK'S OWN PROPORTIONS via `aspect-ratio` + an unchanged height collapses
   both bands to zero. *** THE RATIO IS THE INSTRUMENT, NOT A HARDCODED WIDTH:
   change --sm-eyebrow-ico-h and the slot stays correct; replace the artwork and
   only the two intrinsic-dimension tokens move. ***

   THE VISIBLE GAP IS THEN RESTORED, AND THIS IS NOT OPTIONAL. The eye saw
   13.35 (inner band) + 14 (flex gap) ~= 27.35px between artwork and text.
   Correction 1 deletes the band, so the gap must absorb it or the fix silently
   tightens the design. `gap` is therefore DERIVED from the same tokens
   (14px + half the collapsed band), never restated as a literal.

   CORRECTION 2 cancels R. With L gone the ink sits R/2 LEFT of centre. The
   eyebrow is `inline-flex`, so it SHRINK-WRAPS and is centred by the head
   block's `text-align:center`; adding `padding-left:R` widens the box by R
   while its centre stays put, which moves the content RIGHT by exactly R/2.
   *** THE ARITHMETIC IS R/2 EITHER WAY, BUT THE MECHANISM IS SHRINK-WRAP AND
   text-align, NOT a full-width justify-content:center container — v2.41.21
   already corrected that premise and it must not be re-introduced. ***
   R is expressed against the letter-spacing it derives from: .12em of tracking
   (2.88px at 24px) plus a measured ~0.87px right side bearing = 3.75px.

   SCOPE: `min-width:900px` only, mirroring the `max-width:899px` column block.
   Below 900 the icon stacks ABOVE the text, contributes zero horizontal
   asymmetry, and the ink delta was already -1.91..+0.06.
   *** `.sm-pr-eyebrow` (Process) IS EXCLUDED AND MUST STAY EXCLUDED: it is
   LEFT-aligned and separates its icon with `margin-right`, not a flex `gap`, so
   neither correction applies and narrowing its slot would MOVE its icon. ***
   *** `.smp-eyebrow--rule` IS EXCLUDED via :not(): its ::before is a 28x2px
   GOLD RULE, not the artwork, so a 142/320 ratio would deform it. It is dead
   CSS today; the guard is so that adopting it cannot silently break it. ***
   Derivation, full ink table and wrap sweep: CHANGELOG v2.41.22. */
@media (min-width:900px){
  .sm-page .smp-eyebrow:not(.smp-eyebrow--rule),
  body.page-id-7723 .ws-eyebrow,
  body .sm-page .ws-eyebrow{
    --sm-eyebrow-ico-h:48px;   /* slot height — unchanged by this pass */
    --sm-eyebrow-ico-nw:142;   /* attachment 7378 intrinsic width  */
    --sm-eyebrow-ico-nh:320;   /* attachment 7378 intrinsic height */
    /* half the letterbox band the square slot used to add on each side */
    --sm-eyebrow-band:calc((var(--sm-eyebrow-ico-h,48px) - var(--sm-eyebrow-ico-h,48px) * var(--sm-eyebrow-ico-nw,142) / var(--sm-eyebrow-ico-nh,320)) / 2);
    /* trailing dead space: .12em tracking + measured right side bearing */
    --sm-eyebrow-ls:.12em;
    --sm-eyebrow-trail:calc(var(--sm-eyebrow-ls,.12em) + .87px);
    gap:calc(14px + var(--sm-eyebrow-band));
    padding-left:var(--sm-eyebrow-trail);
  }
  .sm-page .smp-eyebrow:not(.smp-eyebrow--rule)::before,
  body.page-id-7723 .ws-eyebrow::before,
  body .sm-page .ws-eyebrow::before{
    width:auto;
    height:var(--sm-eyebrow-ico-h,48px);
    aspect-ratio:var(--sm-eyebrow-ico-nw,142) / var(--sm-eyebrow-ico-nh,320);
  }
}


/* === music-transcription (post 7569) - transcription side image (v1.0.67).
   Same mechanism as 7652/7702/7723/7567/7568: the before-footer template renders
   OUTSIDE .sm-page, so `body.page-id-N` is the ONLY selector that reaches the form
   photo. A .sm-page-scoped rule and a custom property inherited from the page root
   can BOTH never cross that boundary (measured, DESIGN.md v2.42.0/v2.43.0).
   Root-relative url() so the pre-launch domain search-replace has nothing to do here.
   Every declaration !important: the base rule lives in 7603's page-local <style>,
   which is printed in the document BODY and wins on source order otherwise. */
body.page-id-7569 .enqsec-inner-photo{
  background-image:url('/wp-content/uploads/2026/08/start-project-trans-1200.webp') !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}


/* === P6 LINK-TREATMENT PARITY (v1.0.68) -- THREE SYMPTOMS, TWO RULES, ONE NON-FINDING.
   Diagnosed with CSS.getMatchedStylesForNode on the RENDERED page at 1440, never by
   reading this file. Measured winners and their specificity:
     Why It Matters (THE REFERENCE)  `.sm-page .smp-prose a`      (0,2,1)  L2393
        rest  #7c1f3a / underline / decoration-color rgba(124,31,58,.45) / offset 3px
        hover #7a5c2e / decoration-color #7a5c2e   (CDP trusted-pointer confirmed)
     Selected Works caption link     `.elementor a`               (0,1,1)  DECORATION
                                     bare `a` -> --e-global-color-secondary  COLOUR
        computed #1a1712 with text-decoration:none -- not marked as a link at all.
        NO `.sm-page ... caption a` rule existed anywhere on the site. R1 fixes it.
     FAQ answer links   `.sm-page .faq-acc .e-n-accordion-item a` (0,3,1)  L1471
        colour and underline were ALREADY correct. The real gaps are the decoration
        alpha/offset, the hover colour, and the ALL-CAPS. R2 fixes them.
     Pricing & Deliverables intro    `.sm-page .pp-card-intro a`  (0,2,1)  L1703
        *** ALREADY CORRECT -- measured identical to the reference in every property,
        at rest AND on hover. It is NOT a defect. NOTHING is authored for it here. ***

   *** THE ALL-CAPS IS NEITHER A LINK PROBLEM NOR A FAQ PROBLEM. *** It is INHERITED
   from the `<strong>` the two anchors sit inside, through the parent theme's
   `.hentry strong,.hentry th,.hentry dt{text-transform:var(--e-global-typography-secondary-text-transform)}`
   resolving against the kit's Secondary typography, which is `uppercase`. Measured on
   the ancestor chain: the `<p>` computes `none`, the `<strong>` computes `uppercase`,
   the `<a>` inherits it. So every `<strong>` inside `.hentry` site-wide renders caps.
   *** DO NOT "FIX" THAT RULE. *** It is site furniture with many consumers, exactly the
   shape of the #a6824f caption-colour trap (DESIGN.md v2.43.1). The narrow, correct
   move is to declare `text-transform` ON THE ANCHOR: any declaration beats an inherited
   value regardless of specificity, so this needs no `!important` and no specificity
   fight. The copy is NOT rewritten and NOT lowercased -- Title Case is the authored,
   correct form there, because those two anchors NAME a service, whereas the Why It
   Matters anchors name the same services as options inside a sentence and are
   deliberately lowercase (DESIGN.md v2.46.2 -- casing is per-page and per-construction).
   Colour and underline match across all four cases; capitalisation deliberately does not.

   SCOPE, COUNTED IN THE DOM RATHER THAN ASSUMED (STOP-GATE D):
     `.sm-page .ws-gallery__caption a`             -> 1 element site-wide (7569 cell 2).
        7567 has 4 caption spans / 0 anchors, 7568 has 11 / 0, 7723 has 10 / 0 and has
        no `.sm-page` root at all. So this rule can reach nothing else today.
     `.sm-page .faq-acc .e-n-accordion-item a`     -> 2 elements (7569 answers 2 and 14).
        7567 and 7568 FAQ answers contain ZERO anchors, so the scope is unchanged from
        the rule already at L1471 and nothing outside the named case is touched.
   NO `!important` is used in either rule, because nothing narrower was needed:
   (0,2,1) already outranks `.elementor a` at (0,1,1). */

/* ---- R1. SELECTED WORKS CAPTION LINKS. Declarations mirror `.smp-prose a` exactly. ---- */
.sm-page .ws-gallery__caption a{color:#7c1f3a;text-decoration:underline;text-decoration-color:rgba(124,31,58,.45);text-underline-offset:3px;transition:color .2s ease;}
.sm-page .ws-gallery__caption a:hover,.sm-page .ws-gallery__caption a:focus-visible{color:#7a5c2e;text-decoration-color:#7a5c2e;}

/* ---- R2. FAQ ANSWER LINKS. Completes L1471-L1472 rather than replacing it (this file
        is append-only): same selector, same specificity, later source order. Colour and
        underline are already inherited from L1471 and are NOT restated.
        *** THE `text-transform:none` THIS RULE CARRIED AT v1.0.68 IS GONE AS OF v1.0.69 AND
        MUST NOT BE RESTORED. *** It existed only to undo capitals that were never a link
        problem: the two anchors sat inside `<strong>`, and `.hentry strong` applies the kit's
        Secondary `text-transform` to every `<strong>` in body copy site-wide. At v2.51.0 the
        `<strong>` wrappers were removed from the two answers instead, so the capitals went
        with them and the override became inert. Re-adding it would mask the real rule rather
        than fix anything. **BOLD IS NOT AVAILABLE AS EMPHASIS IN BODY COPY ON THIS SITE.**
        The hover alignment below is UNAFFECTED and is still doing work. ---- */
.sm-page .faq-acc .e-n-accordion-item a{text-decoration-color:rgba(124,31,58,.45);text-underline-offset:3px;transition:color .2s ease;}
.sm-page .faq-acc .e-n-accordion-item a:hover,.sm-page .faq-acc .e-n-accordion-item a:focus-visible{color:#7a5c2e;text-decoration-color:#7a5c2e;}


/* === AUDIO-PLAYER RESTING GLYPH (v1.0.70) -- ONE RULE, AND THE SCOPE IS NARROWER THAN THE
   DEFECT REPORT ASSUMED. MEASURED WITH CSS.getMatchedStylesForNode ON ALL THREE AFFECTED
   PAGES, IN ALL THREE STATES, BEFORE ANYTHING WAS WRITTEN.

   THE DEFECT: at rest every `.ws-ap` button painted the play triangle AND the pause bars.
   Measured 2 visible glyphs on every player: 7567 (8 players), 7723 (7), 7569 (2).

   THE CAUSE, CONFIRMED SELECTOR-FOR-SELECTOR: L515's `... .ws-ap-ico-pause{display:none}`
   is (0,2,1) and is outranked by L513's `... .ws-ap-play svg{display:block}` at (0,2,2).
   The bare `svg` TYPE selector contributes the one element point that decides it, and both
   rules live in this same stylesheet so source order never gets a say. This is the
   `.elementor img` / `.elementor a` (0,1,1) trap one step up -- a type selector appended to
   a class chain silently outranking the class-only rule written to control the property.

   *** WHAT THE DEFECT REPORT GOT WRONG, AND IT CHANGES THE FIX: THE `is-playing` AND
   `is-loading` RULES DO **NOT** LOSE. *** They are (0,4,1) and beat the (0,2,2) `svg` rule
   on the CLASS component, which is compared before types. Measured identically on all three
   pages: is-playing gives play:none / pause:block, is-loading gives play:none / pause:none /
   spinner:block, every winner at (0,4,1). **Only the resting rule ever lost.** Writing the
   other three "fixes" would have been dead CSS that also raised specificity on rules already
   winning -- a needless change inside a shared component. They are deliberately NOT touched.

   THE FIX: one rule, both scope arms, at (0,3,2) -- the class appended to the type selector
   rather than the reverse. It beats L513's (0,2,2) on the class component, and it LOSES to
   the (0,4,1) state rules, which is exactly what must happen or the toggle would invert.
   *** NO `!important`: this is a specificity problem, not a precedence one, and the
   surrounding block deliberately avoids it. ***
   The `.ws-ap-spinner` arm of L515 needs nothing -- the spinner is a `<span>`, so the `svg`
   rule never matched it and it was hidden correctly all along. */
body.page-id-7723 .ws-ap-play svg.ws-ap-ico-pause,
body .sm-page .ws-ap-play svg.ws-ap-ico-pause{display:none;}


/* === midi-to-sheet-music (post 7570) - MIDI to Score side image (v1.0.73).
   Same mechanism as 7652/7702/7723/7567/7568/7569: the before-footer template
   renders OUTSIDE .sm-page, so `body.page-id-N` is the ONLY selector that reaches
   the form photo. A .sm-page-scoped rule and a custom property inherited from the
   page root can BOTH never cross that boundary (measured, DESIGN.md v2.42.0 /
   v2.43.0); the retired custom-property mechanism occurs ZERO times in this file
   and in every live post, and it never rendered on any page in its entire life.
   Root-relative url() so the pre-launch domain search-replace has nothing to do here.
   Every declaration !important: the base rule lives in 7603's page-local <style>,
   which is printed in the document BODY and wins on source order otherwise.
   APPENDED AT THE TAIL, per the v2.32.0 convention, so every line number cited in
   DESIGN.md and CHANGELOG.md above this point stays valid. */
body.page-id-7570 .enqsec-inner-photo{
  background-image:url('/wp-content/uploads/2026/09/start-project-midi-1200.webp') !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

/* === v2.57.0 - THE .ws-sw PLAYER SITS FLUSH AGAINST ITS SLIDER (decided by Samy) ============================
   Promotes the page-local override 7570 shipped at v2.56.1 to the shared sheet so it reaches 7723's Film, TV &
   Game "Selected Work" as well, and removes the page-local copy per promote-on-second-use.
   DERIVED BEFORE WRITING, NOT ASSUMED. There are NINETEEN .ws-ap elements on the site -- 7723 x7, 7567 x8,
   7569 x2, 7570 x2 -- and only THREE sit inside a .ws-sw block: 7723's "When A Dream Comes True", and 7570's
   units 2 and 5. Each of those three is followed by a .ws-sw-compare-wrap, which is the seam this rule closes.
   *** THE OTHER SIXTEEN ARE ALL .ws-ap--cell INSIDE .ws-ex-audio, AND EVERY ONE OF THEM IS FOLLOWED DIRECTLY BY
   A figure.ws-gallery__figure SCORE PAGE, WHERE THE 24px AT L510 IS DOING REAL WORK. *** The zero is therefore
   scoped to the .ws-sw block and L510 IS NOT EDITED. Measured after the write: the two /music-transcription/
   cells, the eight on 7567 and the six on 7723 all still read 24.00px player-to-figure at 390/768/1024/1440.
   Dual-scope, matching the family at L504-563, so it reaches 7723 by page id and every .sm-page service page by
   class. (0,3,1) against L510's (0,2,1): it wins on the CLASS component, not on source order. */
body.page-id-7723 .ws-sw .ws-ap,body .sm-page .ws-sw .ws-ap{margin-bottom:0;}

/* === v2.58.0 - THE SELECTED-WORKS CORNER PAIRING, PROMOTED FROM PAGE-LOCAL TO SHARED ========================
   v2.57.0 paired the corners page-locally on 7570 and left 7723's Film, TV & Game unit flush but UNPAIRED, so
   that page inherited the notch defect 7570 had just shed. Promote-on-second-use: one rule block here, and the
   three page-local rules on 7570 are DELETED in the same pass.
   DERIVED BEFORE WRITING, NOT ASSUMED. On live pages `.ws-sw-compare` occurs SEVEN times -- 7723 x1, 7570 x6 --
   and *** ALL SEVEN ARE INSIDE A .ws-sw BLOCK; ZERO OCCUR OUTSIDE ONE. *** The seven media are 3 .ws-ap and
   4 .ws-gallery__video, matching the seven sliders exactly. 7723's OTHER six .ws-gallery__video and six .ws-ap
   are gallery cells with no .ws-sw ancestor and are deliberately out of reach.
   *** THE FRONT PAGE IS UNREACHABLE BY CONSTRUCTION AND THAT IS WHY THIS IS SAFE: post 23's three sliders use
   the .sw-compare / .sw-* FAMILY, NOT .ws-sw-*, and post 23 carries ZERO .ws-sw elements. *** Its own pairing
   lives in its page-local <style> and is untouched.
   The slider's four-corner 8px comes from the shared rule at L542, which also governs 7723 and IS NOT EDITED.
   Each leg below carries `body` plus the .ws-sw block class to reach (0,3,1) against L542's (0,2,1), winning on
   the CLASS component rather than on source order. The audio player keeps its 14px crown and the video facade
   takes 8px, exactly as recorded at v2.57.0; only the SEAM corners go to zero. */
body.page-id-7723 .ws-sw .ws-gallery__video,body .sm-page .ws-sw .ws-gallery__video{border-radius:8px 8px 0 0;}
body.page-id-7723 .ws-sw .ws-ap,body .sm-page .ws-sw .ws-ap{border-radius:14px 14px 0 0;}
body.page-id-7723 .ws-sw .ws-sw-compare,body .sm-page .ws-sw .ws-sw-compare{border-radius:0 0 8px 8px;}

/* ==========================================================================
   SINGLE POST -- ARTICLE PROSE + TEMPLATE CHROME        (added v2.64.0, Blog Pass C)
   Scope: body.single-post + the classes on Theme Builder document 8024
          ("Single Post - Blog", condition include/singular/post).
   WHY THIS SCOPE: blog templates render with NO Elementor page root, so a rule
   authored under .sm-page is dead CSS here (DESIGN.md v2.42.0 / v2.63.0). Every
   rule below carries at least TWO classes so it outranks .elementor a and
   .elementor img, both of which sit at (0,1,1) -- DESIGN.md v2.28.0 / v2.54.0.
   Tokens only: no new colours, no new families.
   ========================================================================== */

/* --- shell + measure ---------------------------------------------------- */
body.single-post .sm-post-shell{padding:0 32px 96px;}
/* THE ARTICLE COLUMN IS THE TEXT MEASURE ITSELF (v2.66.0, was 760px).
   v2.64.0 gave the column 760px and capped the PROSE children at 640px, so the
   h1, the category label, the byline, the author box and the closing CTA all ran
   120px wider than every paragraph and every figure -- left edges shared, right
   edges 120px apart. With in-body figures returned to the text measure at 6.1
   there is no element left that wants the extra width, so the column becomes the
   measure and EVERY element in the article shares both edges. The full-bleed
   banner is the one deliberate exception and breaks out with 100vw. */
body.single-post .sm-post-col{max-width:640px;width:100%;margin-inline:auto;}

/* THE READING MEASURE. DESIGN.md Layout & Spacing caps long-form text at ~70
   characters per line. Measured on the rendered face: the average Manrope glyph at
   18px is 9.16px, so 70 CPL = 640px.
   *** IT IS APPLIED TO THE CHILDREN, NOT TO .sm-post-body ITSELF, AND THAT IS
   FORCED. *** Elementor ships
     .e-con.e-con > .e-con-inner > .elementor-widget{max-width:100%}
   at (0,4,0) -- the class is DOUBLED deliberately to inflate specificity -- which
   outranks body.single-post .sm-post-body at (0,2,1). A cap on the widget box is
   silently overridden; a cap on its children is not contested at all. */
body.single-post .sm-post-body > p,
body.single-post .sm-post-body > h2,
body.single-post .sm-post-body > h3,
body.single-post .sm-post-body > h4,
body.single-post .sm-post-body > ul,
body.single-post .sm-post-body > ol,
body.single-post .sm-post-body > blockquote,
body.single-post .sm-post-body > figure,
body.single-post .sm-post-body > .sm-post-figure{max-width:640px;margin-left:auto;margin-right:auto;}

/* --- category label (label-lg / gold-deep) ------------------------------ */
body.single-post .sm-post-cat .elementor-post-info__item,
body.single-post .sm-post-cat .elementor-post-info__item a{
  font-family:'Manrope',sans-serif;font-size:13px;font-weight:700;line-height:1.2;
  letter-spacing:.14em;text-transform:uppercase;color:#7a5c2e;text-decoration:none;
}
body.single-post .sm-post-cat .elementor-post-info__item a:hover{color:#5e1429;}
body.single-post .sm-post-cat .elementor-icon-list-icon{display:none;}

/* --- H1 (display-md, Playfair) ------------------------------------------ */
body.single-post .sm-post-title .elementor-heading-title{
  font-family:'Playfair Display',serif;font-size:52px;font-weight:700;line-height:1.15;
  letter-spacing:-.01em;color:#1a1712;margin:0 0 24px;
}

/* --- byline (body-sm / on-surface-variant) ------------------------------ */
body.single-post .sm-post-byline .elementor-post-info__item{
  font-family:'Manrope',sans-serif;font-size:14px;font-weight:400;line-height:1.6;color:#4a4030;
}
body.single-post .sm-post-byline .elementor-icon-list-icon{display:none;}

/* --- featured image ------------------------------------------------------ */
/* v2.68.0: the base `body.single-post .sm-post-featured img` rule that stood here
   is DELETED. All four of its properties (width, height, border-radius, display)
   are re-declared by `body.single-post .sm-post-col .sm-post-featured img` at
   (0,3,2) against its (0,2,2), and the widget is always inside .sm-post-col, so
   it was shadowed in every state including both media-query variants. */

/* --- prose: paragraphs (body-lg) ---------------------------------------- */
body.single-post .sm-post-body p{
  font-family:'Manrope',sans-serif;font-size:18px;font-weight:400;line-height:1.75;
  color:#1a1712;margin:0 0 24px;
}
body.single-post .sm-post-body > p:last-child{margin-bottom:0;}

/* the deck -- the article's opening italic line. Playfair italic, in the
   pull-quote band (19-28px) rather than the amplifier's 40px. */
body.single-post .sm-post-body p.sm-post-deck{
  font-family:'Playfair Display',serif;font-size:23px;font-weight:400;font-style:italic;
  line-height:1.45;color:#4a4030;margin:0 0 40px;
}
body.single-post .sm-post-body p.sm-post-deck em{font-style:italic;}

/* --- prose: headings ---------------------------------------------------- */
body.single-post .sm-post-body h2{
  font-family:'Playfair Display',serif;font-size:32px;font-weight:600;line-height:1.3;
  color:#1a1712;margin:56px 0 20px;
}
body.single-post .sm-post-body h3{
  font-family:'Playfair Display',serif;font-size:24px;font-weight:600;line-height:1.25;
  color:#1a1712;margin:40px 0 16px;
}
body.single-post .sm-post-body h2:first-child,
body.single-post .sm-post-body h3:first-child{margin-top:0;}

/* --- prose: links. UNDERLINED, and that is deliberate ------------------- */
/* On the pages a link is a button. In long prose a link must be visible as a
   link, so it is burgundy and underlined. #7c1f3a is AAA on both white and the
   canvas surface (DESIGN.md Accessibility). */
body.single-post .sm-post-body a{
  color:#7c1f3a;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(124,31,58,.45);
  transition:color .2s ease,text-decoration-color .2s ease;
}
body.single-post .sm-post-body a:hover,
body.single-post .sm-post-body a:focus-visible{
  color:#5e1429;text-decoration-thickness:2px;text-decoration-color:#5e1429;
}
body.single-post .sm-post-body a:focus-visible{outline:2px solid #7a5c2e;outline-offset:2px;}

/* --- prose: blockquote -------------------------------------------------- */
body.single-post .sm-post-body blockquote{
  margin:48px 0;padding:0 0 0 24px;border-left:3px solid #c9a96e;
}
body.single-post .sm-post-body blockquote p{
  font-family:'Playfair Display',serif;font-size:24px;font-weight:400;font-style:italic;
  line-height:1.45;color:#4a4030;
}
body.single-post .sm-post-body blockquote p:last-child{margin-bottom:0;}

/* --- prose: figures ----------------------------------------------------- */
body.single-post .sm-post-body figure,
body.single-post .sm-post-body .sm-post-figure{margin:48px 0;}
body.single-post .sm-post-body figure img{
  width:100%;height:auto;display:block;border-radius:12px;
}
body.single-post .sm-post-body figcaption{
  font-family:'Manrope',sans-serif;font-size:14px;font-weight:400;line-height:1.6;
  color:#4a4030;margin-top:12px;text-align:left;
}
body.single-post .sm-post-body figcaption a{font-size:inherit;}

/* the oEmbed video keeps a 16:9 box so it reserves layout before it paints */
body.single-post .sm-post-body iframe{width:100%;border-radius:12px;}
body.single-post .sm-post-body figure iframe{aspect-ratio:16/9;height:auto;display:block;}

/* --- prose: lists (for later articles) ---------------------------------- */
body.single-post .sm-post-body ul,
body.single-post .sm-post-body ol{
  font-family:'Manrope',sans-serif;font-size:18px;line-height:1.75;color:#1a1712;
  margin:0 0 24px;padding-left:24px;
}
body.single-post .sm-post-body li{margin-bottom:12px;}
body.single-post .sm-post-body li:last-child{margin-bottom:0;}
body.single-post .sm-post-body ul li::marker{color:#7a5c2e;}
body.single-post .sm-post-body ol li::marker{color:#7a5c2e;font-weight:700;}

/* --- author box --------------------------------------------------------- */
body.single-post .sm-post-author{
  margin-top:64px;padding:32px;background:#ffffff;border:1px solid #d8c8ac;border-radius:4px;
}
body.single-post .sm-post-author .elementor-author-box__avatar img{border-radius:9999px;}
body.single-post .sm-post-author .elementor-author-box__name{
  font-family:'Playfair Display',serif;font-size:24px;font-weight:600;line-height:1.25;color:#1a1712;
}
body.single-post .sm-post-author .elementor-author-box__bio{
  font-family:'Manrope',sans-serif;font-size:16px;font-weight:400;line-height:1.7;color:#4a4030;
}

/* --- closing CTA (surface-taupe, the heaviest light section) ------------ */
body.single-post .sm-post-cta{
  margin-top:64px;padding:48px;background:#c9b99b;border-radius:4px;text-align:center;
}
body.single-post .sm-post-cta .sm-post-cta__h .elementor-heading-title{
  font-family:'Playfair Display',serif;font-size:32px;font-weight:600;line-height:1.3;
  color:#3d342a;margin:0 0 16px;
}
body.single-post .sm-post-cta .sm-post-cta__body p{
  font-family:'Manrope',sans-serif;font-size:18px;line-height:1.75;color:#3d342a;
  margin:0 auto 32px;max-width:52ch;
  /* v2.74.0: the CTA body is now a heading widget rendering <p>, so that it can carry a
     dynamic tag -- the Text Editor widget's WYSIWYG control has NO dynamic support in
     Elementor 4.2.4. Elementor's kit rule `.elementor-widget-heading .elementor-heading-title`
     (0,2,0) then set font-weight 700 on it, where the Text Editor rendered 400. THIS RULE
     NEVER DECLARED font-weight, so nothing of ours contested it. Restored explicitly at
     (0,3,2). Measured before and after: every other axis -- family, size, colour,
     line-height, alignment -- was already identical. */
  font-weight:400;
}
/* v2.68.0: THE TYPE AND PADDING ARE THE SERVICE-PAGE HERO BUTTON'S, NOT A NEW
   SIZE. Re-derived from `.sm-page .smp-btn`: Manrope 16px / 600 / .08em / pill /
   padding 15px 36px, and 14px / 14px 26px at <=767. The blog CTA previously ran
   13px / 700 / .14em / 18px 34px, which read as a caption beside the hero's
   buttons. The GHOST variant of the same hero component uses 13px 34px (and
   12px 24px on mobile) -- 2px less on each axis, exactly offsetting its 2px
   border so the two pills are the same height -- and the outline button below
   takes those values for the same reason. */
body.single-post .sm-post-cta .sm-post-cta__btn .elementor-button{
  background-image:linear-gradient(100deg,#c9a96e 0%,#b07a4a 42%,#7c1f3a 100%);
  background-color:transparent;color:#ffffff;border-radius:9999px;border:0;
  font-family:'Manrope',sans-serif;font-size:16px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:15px 36px;box-shadow:0 4px 18px rgba(124,31,58,.22);
  transition:background-image .25s ease,box-shadow .25s ease;
}
body.single-post .sm-post-cta .sm-post-cta__btn .elementor-button:hover{
  background-image:linear-gradient(100deg,#d4b87f 0%,#bb854f 42%,#8e2545 100%);
  box-shadow:0 6px 22px rgba(124,31,58,.28);
}
/* v2.68.0: the four `.sm-post-cta__link` rules that stood here are DELETED. That
   text-editor widget was removed from template 8024 at v2.66.0 when the second
   button replaced it; the class matches ZERO elements in the rendered page. */

/* --- tablet ------------------------------------------------------------- */
@media(max-width:1024px){
  body.single-post .sm-post-shell{padding:0 24px 72px;}
  body.single-post .sm-post-title .elementor-heading-title{font-size:42px;}
  body.single-post .sm-post-body h2{font-size:28px;margin-top:48px;}
  body.single-post .sm-post-cta{padding:40px 32px;}
}

/* --- mobile. A designed layout, not a shrunk desktop one (DESIGN.md
       Responsiveness Rule): 16px gutter, type re-chosen for the phone. --- */
@media(max-width:767px){
  body.single-post .sm-post-shell{padding:0 16px 48px;}
  body.single-post .sm-post-col{max-width:100%;}
  body.single-post .sm-post-body > p,
  body.single-post .sm-post-body > h2,
  body.single-post .sm-post-body > h3,
  body.single-post .sm-post-body > h4,
  body.single-post .sm-post-body > ul,
  body.single-post .sm-post-body > ol,
  body.single-post .sm-post-body > blockquote,
  body.single-post .sm-post-body > figure,
  body.single-post .sm-post-body > .sm-post-figure{max-width:100%;}
  body.single-post .sm-post-title .elementor-heading-title{font-size:34px;line-height:1.18;}
  body.single-post .sm-post-body p{font-size:17px;line-height:1.7;}
  body.single-post .sm-post-body p.sm-post-deck{font-size:20px;margin-bottom:32px;}
  body.single-post .sm-post-body h2{font-size:26px;margin:40px 0 16px;}
  body.single-post .sm-post-body h3{font-size:21px;margin:32px 0 12px;}
  body.single-post .sm-post-body ul,
  body.single-post .sm-post-body ol{font-size:17px;}
  body.single-post .sm-post-body figure,
  body.single-post .sm-post-body .sm-post-figure{margin:32px 0;}
  body.single-post .sm-post-body blockquote{margin:32px 0;padding-left:18px;}
  body.single-post .sm-post-body blockquote p{font-size:20px;}
  body.single-post .sm-post-author{margin-top:48px;padding:24px;}
  body.single-post .sm-post-cta{margin-top:48px;padding:32px 20px;}
  body.single-post .sm-post-cta .sm-post-cta__h .elementor-heading-title{font-size:26px;}
  body.single-post .sm-post-cta .sm-post-cta__body p{font-size:17px;margin-bottom:24px;}
}

/* --- HEADING CASING OPT-OUT ---------------------------------------------- */
/* DESIGN.md's site-wide Heading Casing Contract: headings inherit UPPERCASE from
   the parent theme's bare h1..h6 rule at (0,0,1), the page <h1> KEEPS the caps
   by design, and every BODY-LEVEL heading must opt out EXPLICITLY. The contract
   uses no !important anywhere and neither does this. Verified by computed value.
   *** The blockquote needs the same opt-out: a bare `blockquote` rule at (0,0,1)
   sets text-transform from the SAME parent token, so a pull quote renders in caps
   unless told otherwise. *** */
body.single-post .sm-post-body h2,
body.single-post .sm-post-body h3,
body.single-post .sm-post-body h4,
body.single-post .sm-post-body blockquote,
body.single-post .sm-post-body blockquote p,
body.single-post .sm-post-cta .sm-post-cta__h .elementor-heading-title,
/* v2.74.0: the CTA BODY joins this opt-out list because it is now a heading widget
   rendering <p> -- the only widget whose text control accepts a dynamic tag in
   Elementor 4.2.4. It therefore matches the kit's
   `.elementor-widget-heading .elementor-heading-title` at (0,2,0), which carries the
   Secondary typography's `text-transform:uppercase`. THE TEXT-EDITOR WIDGET IT REPLACED
   NEVER MATCHED THAT RULE, so this is the Heading Casing Contract's ordinary explicit
   opt-out, not a new exception. Verified against a control <p> injected into the same
   widget wrapper: text-transform was the ONLY one of seventeen typographic properties
   that differed. */
body.single-post .sm-post-cta .sm-post-cta__body p,
body.single-post .sm-post-author .elementor-author-box__name{text-transform:none;}

/* --- PAGE GROUND -------------------------------------------------------- */
/* The cool grey #F2F5F9 behind the article comes from `body` at (0,0,1) AND from
   `.elementor-kit-8` at (0,1,0) -- i.e. the ACTIVE ELEMENTOR KIT sets the page
   background, and the kit is the site's token layer and must not be edited. So the
   warm canvas is asserted here instead, at (0,1,1), which outranks both without
   touching the kit. Without this the article's cream panel floats on cool grey
   bands at every width above the 1280px container. */
body.single-post{background-color:#f7f1ea;}
/* ===================== end SINGLE POST block (v2.64.0) ==================== */

/* ==========================================================================
   SINGLE POST -- REFINEMENT                            (added v2.65.0, Blog Pass D)
   Scope unchanged from v2.64.0: body.single-post + the template's own classes.
   *** APPEND-ONLY PASS. Two v2.64.0 rules are NEUTRALISED by an equal-specificity
   override later in the file rather than deleted, because this pass may only
   append. A later pass with edit authority should delete the dead originals. ***
   ========================================================================== */

/* --- 8.1  BLOG H1 IS SENTENCE CASE -- A DELIBERATE EXCEPTION ------------- */
/* DESIGN.md's Heading Casing Contract puts the page <h1> in CAPS site-wide, via
   the parent theme's bare h1..h6 rule at (0,0,1). An article headline is not a
   page banner: it is a sentence, and it is three lines long in caps. The blog
   opts out EXPLICITLY, which is exactly the mechanism the contract prescribes
   for opting out. This is a recorded exception, not drift. */
body.single-post .sm-post-title .elementor-heading-title{text-transform:none;}

/* --- 8.3  ARTICLE H2: GOLD, WITH THE PIANO ICON ------------------------- */
/* Gold #7a5c2e on the article canvas #f7f1ea measures 5.51:1 -- above the 3:1
   large-text gate and above 4.5:1 as well.
   *** THE ICON TECHNIQUE IS THE MASK, NOT A BACKGROUND-IMAGE, AND THAT IS A
   DELIBERATE DEVIATION. *** The existing violin / music-stand icons are PNGs
   with the RETIRED camel gold #a6824f baked into the artwork and no CSS colour
   applied. This one uses the site's OTHER established icon technique -- the one
   already used for the careers checklist tick and the select caret -- where a
   shape is masked and the fill comes from CSS, so the icon takes the CURRENT
   gold token and matches the heading text beside it. Source artwork is a white
   silhouette on transparency, i.e. a clean alpha mask.
   H2 ONLY. The questions section's H3s get neither colour nor icon. */
body.single-post .sm-post-body > h2{
  color:#7a5c2e;
  display:flex;align-items:flex-start;gap:14px;
}
body.single-post .sm-post-body > h2::before{
  content:"";flex:0 0 auto;
  height:34px;aspect-ratio:514/561;   /* attachment 8030 intrinsic 514x561 */
  margin-top:.14em;
  background-color:#7a5c2e;
  -webkit-mask:url('/wp-content/uploads/2026/09/Piano__4x.png') no-repeat center/contain;
          mask:url('/wp-content/uploads/2026/09/Piano__4x.png') no-repeat center/contain;
}

/* --- 8.7  THE SITE'S RULE BEFORE THE QUESTIONS -------------------------- */
/* .ww-intro-divider's own treatment -- 1px #d8c8ac, 60px above (52px <=900px),
   and it belongs to the heading it introduces, per 7702's construction.
   Applied to the heading itself rather than a new <div>, because post_content
   is limited to the two edits Pass B made.
   *** THE `:has(+ h3)` HOOK IS WITHDRAWN AT v2.74.0. IT WAS SEMANTIC ONLY BY
   COINCIDENCE OF ONE ARTICLE'S SHAPE. *** "An H2 immediately followed by an H3"
   describes a questions block in 8023 and describes an ORDINARY SECTION OPENING in
   any article whose first subheading needs no preamble -- which is what 8038's
   `Phase Four` is. Measured at v2.73.0: the rule painted a divider across a phase
   title. *** THE HOOK IS NOW THE HEADING'S OWN IDENTITY. *** The id is derived from
   the heading TEXT by the v2.67.0 slug rule, so any future article whose H2 reads
   "Frequently asked questions" gets the divider with no further work, and NO
   structural arrangement of headings can ever reach it. Attribute form, not `#id`,
   so the rule stays inside the class specificity band the rest of this block uses. */
body.single-post .sm-post-body > h2[id="sm-frequently-asked-questions"]{
  border-top:1px solid #d8c8ac;
  margin-top:60px;padding-top:60px;
}

/* --- 8.4  DROP CAP ------------------------------------------------------ */
/* *** THE HOOK IS "FIRST BODY PARAGRAPH", NOT "PARAGRAPH AFTER THE DECK" (v2.74.0). ***
   The v2.65.0 adjacency `p.sm-post-deck + p` assumed every article opens deck-then-
   paragraph. Measured at v2.73.0 it is right on ONE of three articles: 8023 yes;
   8037 gets NOTHING because an <h2> follows its deck; 8038 puts the cap on a second
   EDITORIAL NOTE. An editorial note is not body copy and must never carry the cap.
   *** THE PAIR BELOW IS APPLY-THEN-REVERT, AND THAT IS FORCED: CSS HAS NO PRECEDING-
   SIBLING COMBINATOR, so "the first p that is not a note" cannot be selected directly.
   Rule 1 arms every non-note paragraph; rule 2 disarms any that FOLLOWS one, at
   (0,4,3) against (0,4,2). Exactly one survives, and it is the first. ***
   Notes opt out by class: `.sm-post-deck` (the opening deck, already styled) and
   `.sm-post-note` (any further editorial note). 8023 is untouched and needs no edit --
   its first non-note paragraph IS the paragraph after its deck. */
body.single-post .sm-post-body > p:not(.sm-post-deck):not(.sm-post-note)::first-letter{
  float:left;
  font-family:'Playfair Display',serif;font-weight:700;
  font-size:3.4em;line-height:.82;
  color:#7a5c2e;
  margin:6px 12px 0 0;
}
body.single-post .sm-post-body > p:not(.sm-post-deck):not(.sm-post-note) ~ p::first-letter{
  float:none;
  font-family:inherit;font-weight:inherit;
  font-size:inherit;line-height:inherit;
  color:inherit;
  margin:0;
}

/* --- 8.5 / 8.6  IN-BODY IMAGE SIZE ------------------------------------- */
/* 6.1 (v2.66.0): REVERTED to the 640px text measure. v2.65.0 ran figures to
   760px to match the featured image; the featured image is now a full-bleed
   banner and is no longer an in-body figure, so the only reason for the extra
   width has gone. Every in-body figure is now exactly as wide as the text. */

/* --- 7.3 / 7.4  VIDEO PANEL -------------------------------------------- */
/* Click-to-load facade. Vocabulary and values are CLONED from the existing
   .ws-gallery__video facade so the play control is the same object the rest of
   the site already uses; only the behaviour differs (replaces in place rather
   than opening the ws-lightbox). aspect-ratio reserves the box, so nothing on
   the page moves when the panel or the iframe paints. */
body.single-post .sm-post-body .sm-vp{
  position:relative;display:block;width:100%;
  aspect-ratio:16/9;background:#151311;overflow:hidden;border-radius:12px;
}
body.single-post .sm-post-body .sm-vp__btn{
  -webkit-appearance:none;appearance:none;
  display:block;position:absolute;inset:0;width:100%;height:100%;
  margin:0;padding:0;border:0;background:#151311;cursor:pointer;line-height:0;
}
body.single-post .sm-post-body .sm-vp__poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;border-radius:0;max-height:none;
}
body.single-post .sm-post-body .sm-vp__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  width:84px;height:84px;border-radius:50%;
  background:linear-gradient(100deg,#c9a96e 0%,#b07a4a 42%,#7c1f3a 100%);
  box-shadow:0 10px 30px rgba(124,31,58,.38);
  transition:transform .3s ease,box-shadow .3s ease;pointer-events:none;
}
body.single-post .sm-post-body .sm-vp__play::after{
  content:"";display:block;width:0;height:0;border-style:solid;
  border-width:13px 0 13px 22px;
  border-color:transparent transparent transparent #fff;margin-left:6px;
}
body.single-post .sm-post-body .sm-vp__btn:hover .sm-vp__play,
body.single-post .sm-post-body .sm-vp__btn:focus-visible .sm-vp__play{
  transform:translate(-50%,-50%) scale(1.06);
  box-shadow:0 14px 40px rgba(124,31,58,.48);
}
body.single-post .sm-post-body .sm-vp__btn:focus{outline:none;}
body.single-post .sm-post-body .sm-vp__btn:focus-visible{outline:3px solid #7a5c2e;outline-offset:3px;}
/* Overlay -- REAL TEXT in the empty band at the top of the poster, never baked
   into the image. pointer-events:none so the whole panel stays one click target. */
body.single-post .sm-post-body .sm-vp__overlay{
  position:absolute;top:0;left:0;right:0;
  display:flex;flex-direction:column;gap:10px;
  padding:24px 28px 0;text-align:left;pointer-events:none;
}
body.single-post .sm-post-body .sm-vp__label{
  font-family:'Manrope',sans-serif;font-size:13px;font-weight:700;line-height:1.2;
  letter-spacing:.14em;text-transform:uppercase;color:#c9a96e;
}
/* 6.2 (v2.66.0): 23px -> 20px, and the 32ch cap is REMOVED so the line length
   is set by the panel it sits in rather than by an arbitrary character count.
   At 23px in a 32ch box the title ran to THREE lines at 1440. */
body.single-post .sm-post-body .sm-vp__title{
  font-family:'Playfair Display',serif;font-size:20px;font-weight:600;line-height:1.32;
  color:#ffffff;text-transform:none;max-width:100%;
  text-shadow:0 1px 14px rgba(0,0,0,.6);
}
body.single-post .sm-post-body .sm-vp__title em{font-style:italic;}
body.single-post .sm-post-body .sm-vp__frame{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}

/* --- tablet ------------------------------------------------------------- */
@media(max-width:1024px){
  body.single-post .sm-post-body > h2::before{height:30px;}
}

/* --- mobile: an oversized letter breaks the line, so the cap comes down --- */
@media(max-width:767px){
  body.single-post .sm-post-body > h2{gap:10px;}
  body.single-post .sm-post-body > h2::before{height:26px;}
  body.single-post .sm-post-body > h2[id="sm-frequently-asked-questions"]{margin-top:52px;padding-top:52px;}
  body.single-post .sm-post-body > p:not(.sm-post-deck):not(.sm-post-note)::first-letter{
    font-size:2.6em;line-height:.86;margin:4px 9px 0 0;
  }
  body.single-post .sm-post-body .sm-vp{border-radius:8px;}
  body.single-post .sm-post-body .sm-vp__play{width:66px;height:66px;}
  body.single-post .sm-post-body .sm-vp__play::after{border-width:10px 0 10px 17px;margin-left:5px;}
  body.single-post .sm-post-body .sm-vp__overlay{padding:16px 18px 0;gap:6px;}
  body.single-post .sm-post-body .sm-vp__label{font-size:11px;letter-spacing:.12em;}
  body.single-post .sm-post-body .sm-vp__title{font-size:16px;line-height:1.28;max-width:100%;}
}

@media (prefers-reduced-motion:reduce){
  body.single-post .sm-post-body .sm-vp__play{transition:none;}
  body.single-post .sm-post-body .sm-vp__btn:hover .sm-vp__play,
  body.single-post .sm-post-body .sm-vp__btn:focus-visible .sm-vp__play{transform:translate(-50%,-50%);}
}
/* ================= end SINGLE POST REFINEMENT block (v2.65.0) ============= */

/* --- 5.2  AUTHOR PORTRAIT, SERVED FROM THIS SITE ------------------------ */
/* The widget's own avatar is switched OFF in the template (show_avatar:''), so
   Elementor emits NO <img> and no request to gravatar.com is made at all.
   *** HIDING THE IMG WITH CSS WOULD NOT HAVE ACHIEVED THAT -- the browser
   fetches a display:none image either way. *** The portrait is painted here
   from the Media Library instead (attachment 8019, medium 300x300).
   Name and bio stay DYNAMIC (source stays 'current'), so the 491-character bio
   keeps ONE storage site -- the user profile. Elementor's source:'custom' would
   have forced the name and the whole bio to be duplicated into the template. */
body.single-post .sm-post-author .elementor-author-box{
  display:flex;align-items:flex-start;gap:24px;
}
body.single-post .sm-post-author .elementor-author-box::before{
  content:"";flex:0 0 auto;
  width:96px;height:96px;border-radius:9999px;
  background:url('/wp-content/uploads/2026/09/samy_elgazzar_blog3-300x300.webp') center/cover no-repeat;
}
@media(max-width:767px){
  body.single-post .sm-post-author .elementor-author-box{gap:18px;}
  body.single-post .sm-post-author .elementor-author-box::before{width:72px;height:72px;}
}

/* ==========================================================================
   SINGLE POST -- ARTICLE LAYOUT REDESIGN               (added v2.66.0, Blog Pass E)
   Scope unchanged from v2.64.0: body.single-post + the classes on Theme Builder
   document 8024, plus the two classes this pass adds to the stored article
   markup (sm-post-split, sm-post-split__fig / __text).
   *** THIS PASS HAS EDIT AUTHORITY INSIDE THE BLOG BLOCK AND USED IT. *** The
   rules v2.65.0 could only NEUTRALISE by appending an override are now deleted
   at source, exactly as that entry asked a later pass to do. Nothing outside the
   blog block was touched.
   ========================================================================== */

/* --- 4.1 / 4.3  THE FULL-BLEED ARTICLE HEAD ----------------------------- */
/* *** THE GAP UNDER THE HEADER IS CLOSED THE WAY THE SITE ALREADY CLOSES IT. ***
   The parent theme ships
       #page .site-content            {margin-top:100px}   (1,1,0)  80px <=1024, 60px <=767
       body.elementor-page #page .site-content{margin-top:0} (1,2,0)
   and the SECOND rule is the entire reason a service-page hero sits flush under
   the fixed header -- measured on 7568: hero top == header bottom at 390, 768,
   820, 880, 1024 and 1440. A Theme Builder single-post view is NOT
   body.elementor-page, so it keeps the 100/80/60px margin, and that margin IS
   the gap. The blog joins the same treatment instead of inventing a negative
   offset. (1,3,0), so it wins on specificity rather than on load order.
   *** THE SIDE PADDING IS DELIBERATELY LEFT ALONE. *** body.elementor-page also
   zeroes padding-left/right on .site-content; copying that half would move every
   text column on the page. Only margin-top is touched.
   .site-content's padding-top is 66px / 78px, which is exactly the fixed
   header's height -- that padding is what the banner then rests on. */
body.single-post #page .site-content.site-content{margin-top:0;}

/* The banner breaks out of .sm-post-col (760px, centred) to the full viewport.
   *** IT MUST OUTRANK ELEMENTOR'S DOUBLED-CLASS RULE ***
       .e-con.e-con > .e-con-inner > .elementor-widget{max-width:100%}   (0,4,0)
   so this selector doubles two of its OWN classes to reach (0,5,1). A single
   .sm-post-featured matches, applies, and still renders 760px wide -- the same
   trap as the v2.64.0 measure cap and the v2.65.0 bottom margin.
   calc(50% - 50vw) is exact here because .sm-post-col is centred in the viewport
   at all eight widths (verified: column centre == viewport centre at 390, 768,
   820, 880, 1024, 1100, 1200, 1440). html and body both compute
   overflow-x:hidden on this site, so 100vw cannot become horizontal scroll even
   with a classic scrollbar. */
body.single-post .sm-post-col.sm-post-col .sm-post-featured.sm-post-featured{
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  margin-top:0;margin-block-start:0;
}

/* 4.2  BANNER HEIGHT. The service-page hero constrains itself with
   min-height:660px, 580px at <=1024 and content-driven at <=767, over a
   background-size:cover framed at background-position 50% 42%. The article head
   mirrors that MECHANISM -- one capped height per breakpoint band, cover-cropped,
   framed at the same 42% -- but takes its VALUES from the site's inner-page
   banner (Contact 7079 .elementor-element-smbanner, measured 440px at >=1025,
   540px at 768-1024, 360px at <=767), because 660px of photograph carrying no
   text on it is a wall rather than a banner. <=767 is left content-driven
   exactly as the service hero is: a 16:9 source in a 390px viewport is 219px
   tall, and forcing 360px would crop a landscape photograph into a 1.08:1 slot.
   *** NO SCRIM. *** The service hero's flat rgba(21,19,17,.72) exists solely so
   white hero text stays legible on the photograph. Nothing overlays the article
   banner -- the label, title and byline sit below it -- so a scrim here would
   darken a photograph for no reason. */
body.single-post .sm-post-col .sm-post-featured img{
  width:100%;height:440px;object-fit:cover;object-position:50% 42%;
  border-radius:0;display:block;
}

/* Vertical rhythm below the banner. *** EVERY VALUE HERE IS A margin-TOP, AND
   THAT IS FORCED, NOT STYLISTIC: .e-con .elementor-widget.elementor-widget
   {margin-block-end:0} sits at (0,3,0) and zeroes the bottom margin of every
   widget in this template. The v2.64.0 margin-bottom values on .sm-post-cat and
   .sm-post-byline computed 0px for two whole passes and are deleted above. ***
   Both the physical and the logical property are set, at (0,3,1). */
body.single-post .sm-post-col .sm-post-cat{margin-top:56px;margin-block-start:56px;}
body.single-post .sm-post-col .sm-post-title{margin-top:14px;margin-block-start:14px;}
body.single-post .sm-post-col .sm-post-body{margin-top:44px;margin-block-start:44px;}

/* --- 5  THE PORTRAIT AS A TWO-COLUMN BLOCK ------------------------------ */
/* Text left, portrait right, both outer edges flush with the 640px text measure
   so nothing protrudes past the prose.
   *** DOM ORDER IS FIGURE-THEN-TEXT, AND THE DESKTOP ORDER IS RESTORED BY GRID
   PLACEMENT RATHER THAN BY `order`. *** That yields the required <=767px stack --
   portrait, then caption, then the two paragraphs -- from source order alone,
   with no reversal that can silently drift, and it keeps the reading order
   identical for a screen reader at both widths.
   60/40 with a 32px gutter puts the narrow text column at 364.8px, which is
   about 46 characters on Manrope 18px -- above the 40-character floor. */
body.single-post .sm-post-body > .sm-post-split{
  display:grid;grid-template-columns:minmax(0,1fr);gap:32px;
  margin:48px auto;max-width:640px;
}
body.single-post .sm-post-body .sm-post-split__fig{margin:0;max-width:100%;}
body.single-post .sm-post-body .sm-post-split__fig img{
  width:100%;height:auto;max-height:none;border-radius:12px;display:block;
}
body.single-post .sm-post-body .sm-post-split__text > p:last-child{margin-bottom:0;}
@media(min-width:768px){
  body.single-post .sm-post-body > .sm-post-split{
    grid-template-columns:minmax(0,60fr) minmax(0,40fr);
    column-gap:32px;row-gap:0;align-items:start;
  }
  body.single-post .sm-post-body .sm-post-split__text{grid-column:1;grid-row:1;}
  body.single-post .sm-post-body .sm-post-split__fig{grid-column:2;grid-row:1;}
}

/* --- 6.3  THE CLOSING CTA -- TWO STACKED BUTTONS ------------------------ */
body.single-post .sm-post-cta .sm-post-cta__btn--primary{margin-top:16px;margin-block-start:16px;}
/* *** THE UPPER BUTTON IS FILLED, NOT OUTLINED, AS OF v2.67.0, AND THE MODIFIER
   WAS RENAMED BACK AT v2.68.0: --solid BECAME --outline AGAIN, ON THE TEMPLATE
   IN THE SAME PASS, SO THE CLASS NAME DESCRIBES WHAT IT PAINTS. *** v2.67.0
   filled this button because it read as too quiet beside the gradient pill.
   *** THE PROBLEM WAS SIZE, NOT COLOUR. *** The colour was never at fault --
   #3d342a on the block's taupe #c9b99b measures 6.32:1 against a 4.5:1
   requirement -- so the fill is reverted and the TYPE is enlarged instead, to
   the service-page hero button's 16px/600/.08em (14px at <=767).
   Treatment is the site's outline button (.sm-pricing-cta on post 23):
   transparent, 2px border, full pill, hover fills gold-pale #f0e3cc, with the
   one substitution this system already sanctions -- text and border in #3d342a,
   the on-surface-sand token defined for text on sand and taupe, because the gold
   measures only 3.21:1 there and must not be used for text on taupe.
   Padding 13px 34px matches the hero's GHOST variant, which is 2px less on each
   axis than its base pill, exactly offsetting the 2px border so both buttons
   stand the same height. Equal (0,4,1) with the gradient rule above, and later
   in source order. */
body.single-post .sm-post-cta .sm-post-cta__btn--outline .elementor-button{
  background-image:none;background-color:transparent;color:#3d342a;
  border:2px solid #3d342a;padding:13px 34px;box-shadow:none;
}
body.single-post .sm-post-cta .sm-post-cta__btn--outline .elementor-button:hover{
  background-image:none;background-color:#f0e3cc;color:#3d342a;
  border-color:#3d342a;box-shadow:none;
}
body.single-post .sm-post-cta .sm-post-cta__btn--outline .elementor-button:focus-visible{
  outline:2px solid #3d342a;outline-offset:3px;
}

/* --- tablet ------------------------------------------------------------- */
@media(max-width:1024px){
  body.single-post .sm-post-col .sm-post-featured img{height:380px;}
  body.single-post .sm-post-col .sm-post-cat{margin-top:44px;margin-block-start:44px;}
  body.single-post .sm-post-col .sm-post-body{margin-top:36px;margin-block-start:36px;}
}

/* --- mobile ------------------------------------------------------------- */
@media(max-width:767px){
  /* content-driven, exactly as the service hero is at <=767 */
  body.single-post .sm-post-col .sm-post-featured img{height:auto;}
  body.single-post .sm-post-col .sm-post-cat{margin-top:32px;margin-block-start:32px;}
  body.single-post .sm-post-col .sm-post-title{margin-top:12px;margin-block-start:12px;}
  body.single-post .sm-post-col .sm-post-body{margin-top:28px;margin-block-start:28px;}
  body.single-post .sm-post-body > .sm-post-split{margin:32px auto;gap:24px;}
}
/* ============ end SINGLE POST LAYOUT REDESIGN block (v2.66.0) ============= */

/* ==========================================================================
   SINGLE POST -- CONTENTS LIST + CATEGORY RULE          (added v2.67.0, Blog Pass F)
   Scope unchanged: body.single-post + the template's own classes, plus the
   classes the contents-list script creates (sm-toc-rail, sm-toc, sm-toc__*).
   ========================================================================== */

/* --- 6.1  THE RULE BEFORE THE CATEGORY LABEL ---------------------------- */
/* *** THE TREATMENT IS COPIED FROM .ws-gallery__label--mockup ("AUDIO MOCKUP"),
   NOT INVENTED: 28px x 2px, background:currentColor, inline to the LEFT of the
   label, margin-right:10px, position:relative top:-1px so it sits optically on
   the cap height, and content:"" so it adds NOTHING to the accessible name. ***
   The declarations are COPIED rather than the selector extended, because
   .ws-gallery__* cannot reach a blog template at all -- the two scopes are
   disjoint by construction (DESIGN.md v2.64.0). This is the same reason the
   --live variant copied them rather than comma-appending.
   THE LABEL'S OWN TYPE IS LEFT ALONE. The mockup label is 12px/.12em; the blog
   category label is 13px/.14em and stays that way -- only the rule is adopted.
   Hooked to :first-of-type so exactly one rule is drawn no matter how many
   categories a future article carries. */
body.single-post .sm-post-cat .elementor-post-info__item:first-of-type{
  display:inline-flex;align-items:center;
}
body.single-post .sm-post-cat .elementor-post-info__item:first-of-type::before{
  content:"";flex:0 0 auto;width:28px;height:2px;background:currentColor;
  margin-right:10px;position:relative;top:-1px;
}

/* --- 5  THE CONTENTS LIST ----------------------------------------------- */
/* The rail is an ABSOLUTELY POSITIONED column in the left margin, spanning the
   full height of the article body, and the nav inside it is STICKY. That pairing
   is what makes the list stop on its own: sticky is bounded by its containing
   block, so the list can never travel past the end of .sm-post-body and can
   never reach the author box, the CTA or the footer. No JS measures the footer.
   *** THE RAIL IS position:absolute, SO IT OCCUPIES NO SPACE IN FLOW AT ANY
   WIDTH. *** Below 1100px it is display:none as well, so there is nothing left
   behind at all -- no box, no reserved gutter, and the text column measures
   identically with the list present and absent. */
body.single-post .sm-post-body{position:relative;}

body.single-post .sm-post-body .sm-toc-rail{
  display:none;position:absolute;top:0;bottom:0;right:100%;
}
body.single-post .sm-post-body .sm-toc{
  position:sticky;
  /* --sm-toc-top is written by the script from the REAL header's rendered
     bottom edge, so it is correct with the admin bar and without it, and at the
     widths where the header measures 82px rather than 78px. The fallback is
     only ever used if the script has not run. */
  top:var(--sm-toc-top,110px);
}
body.single-post .sm-post-body .sm-toc__list{
  list-style:none;margin:0;padding:0;font-size:0;
}
body.single-post .sm-post-body .sm-toc__item{
  margin:0 0 14px;padding:0;
}
body.single-post .sm-post-body .sm-toc__item:last-child{margin-bottom:0;}
body.single-post .sm-post-body .sm-toc__item::marker{content:none;}

/* Quiet by design and subordinate to the article: Manrope 12px, medium weight,
   on-surface-variant #4a4030 -- 9.06:1 on the canvas #f7f1ea. The current item
   takes gold-deep #7a5c2e at 5.51:1 and 700 weight. Both clear 4.5:1. */
body.single-post .sm-post-body .sm-toc__link{
  display:block;
  font-family:'Manrope',sans-serif;font-size:12px;font-weight:500;line-height:1.45;
  letter-spacing:normal;text-transform:none;
  color:#4a4030;text-decoration:none;
  transition:color .2s ease;
}
body.single-post .sm-post-body .sm-toc__link:hover{color:#7a5c2e;}
body.single-post .sm-post-body .sm-toc__link:focus-visible{
  outline:2px solid #7a5c2e;outline-offset:3px;
}
body.single-post .sm-post-body .sm-toc__item.is-current .sm-toc__link{
  color:#7a5c2e;font-weight:700;
}

/* The thin progress line under each entry. Track in the line token #d8c8ac,
   fill in gold-deep, scaled from --sm-toc-p (0..1) which the script sets per
   section. Decorative only -- it is aria-hidden and carries no text. */
body.single-post .sm-post-body .sm-toc__bar{
  display:block;height:2px;margin-top:7px;background:#d8c8ac;overflow:hidden;
}
body.single-post .sm-post-body .sm-toc__fill{
  display:block;height:100%;background:#7a5c2e;
  transform:scaleX(var(--sm-toc-p,0));transform-origin:left center;
  transition:transform .15s linear;
}

/* Anchor landing must clear the fixed header. --sm-toc-anchor is written by the
   script alongside --sm-toc-top; the fallback covers a no-JS load. */
body.single-post .sm-post-body > h2{scroll-margin-top:var(--sm-toc-anchor,110px);}

/* THE LIST APPEARS AT 1100px AND NOT ONE PIXEL BELOW. Widths are stepped so the
   rail always clears the viewport's left edge: the article column's left edge is
   230px at 1100, 280px at 1200 and 400px at 1440, and the rail is
   (column left - gap - width) from the edge in each band. */
@media(min-width:1100px){
  body.single-post .sm-post-body .sm-toc-rail{display:block;width:150px;margin-right:24px;}
}
@media(min-width:1200px){
  body.single-post .sm-post-body .sm-toc-rail{width:176px;margin-right:28px;}
}
@media(min-width:1440px){
  body.single-post .sm-post-body .sm-toc-rail{width:200px;margin-right:32px;}
}

@media (prefers-reduced-motion:reduce){
  body.single-post .sm-post-body .sm-toc__fill{transition:none;}
  body.single-post .sm-post-body .sm-toc__link{transition:none;}
}

/* --- 5.6  WHY position:sticky DID NOT WORK, AND THE ONE-WORD FIX --------- */
/* *** MEASURED, NOT GUESSED, AND IT IS NOT AN ELEMENTOR CONTAINER. *** With the
   rail and nav in place the list scrolled straight off the top: the nav's
   viewport top ran 905.4 -> -594.6 -> -2094.6 -> -5094.6 at scrollY 0 / 1500 /
   3000 / 6000, i.e. `position:sticky` computed and did nothing.
   `CSS.getMatchedStylesForNode` named the cause -- THREE PARENT-THEME RULES in
   soudify/style.css, all in one sheet:
       html { overflow-x: hidden }
       body { overflow-x: hidden }
       .site { overflow-x: hidden }     <- this is #page
   *** `overflow-x:hidden` WITH `overflow-y:visible` FORCES THE Y AXIS TO `auto`.
   *** So `body` and `#page` each become a SCROLL CONTAINER. A sticky element
   sticks to its nearest scrolling ancestor, that ancestor is #page, and #page
   never scrolls -- the viewport does. The result is a sticky element that is
   silently inert. `html` is exempt: its overflow propagates to the viewport and
   its own used value becomes visible, so it is not a container.
   THE FIX IS `clip`, NOT A JS WORKAROUND. `overflow-x:clip` clips exactly as
   `hidden` does but establishes NO scroll container, so the y axis stays
   `visible` and sticky works again. Scoped to body.single-post so no other page
   on the site changes, and specific enough to win: (0,1,1) against body's
   (0,0,1), and (1,2,1) against .site's (0,1,0).
   The full-bleed banner still clips identically -- `clip` and `hidden` differ
   only in whether a scrollport is created. */
body.single-post{overflow-x:clip;}
body.single-post #page.site{overflow-x:clip;}
/* ============ end SINGLE POST CONTENTS LIST block (v2.67.0) ============== */

/* ==========================================================================
   SINGLE POST -- CONTENTS HEADING + CTA AT HERO SIZE   (added v2.68.0, Blog Pass G)
   Scope unchanged: body.single-post + the template's own classes, plus the
   classes the contents-list script creates.
   ========================================================================== */

/* --- 4.1  THE CONTENTS HEADING ------------------------------------------ */
/* *** THE TYPE IS THE CATEGORY LABEL'S, RE-DERIVED RATHER THAN GUESSED:
   Manrope 13px / 700 / letter-spacing .14em / uppercase / gold-deep #7a5c2e --
   the same eyebrow treatment the article's own category label carries. *** It
   is deliberately LARGER than the 12px entries beneath it, because a label that
   is the same size as its list does not read as a label.
   The element is a <p>, not a heading: the article's H2s are the document
   outline and .sm-post-body is inside it, so an <h2>Contents</h2> here would
   insert itself into that outline. The nav takes its accessible name from this
   element by aria-labelledby, so the announced name IS the rendered text. */
body.single-post .sm-post-body .sm-toc__heading{
  margin:0 0 14px;padding:0;
  font-family:'Manrope',sans-serif;font-size:13px;font-weight:700;line-height:1.2;
  letter-spacing:.14em;text-transform:uppercase;color:#7a5c2e;
}

/* --- 5.4  THE MOBILE CTA LABEL ------------------------------------------ */
/* *** ONE LINE IS ARITHMETICALLY UNAVAILABLE AT 390 FOR THE LONGER LABEL AND
   THAT IS REPORTED, NOT WORKED AROUND. *** "Music Engraving & Score Preparation"
   is 35 characters. At 390 the article column is 328px and the taupe block's
   20px padding leaves 288px; a pill with 24px of side padding and a 2px border
   leaves about 236px of text box. One line would need roughly 6.7px per
   character, i.e. a body size near 10px. The label therefore sets on TWO lines
   on a phone, as it did before this pass, and the requirement that IS met is
   that it does not overflow the block.
   The hero's own <=767 step is 14px with 12px/24px padding on the ghost variant,
   and that is what is used; line-height is tightened so two lines stay compact
   and the pill keeps its shape. Desktop is untouched at 16px. */
@media(max-width:767px){
  body.single-post .sm-post-cta .sm-post-cta__btn .elementor-button{
    font-size:14px;padding:14px 26px;line-height:1.35;
  }
  body.single-post .sm-post-cta .sm-post-cta__btn--outline .elementor-button{
    padding:12px 24px;
  }
}
/* ========== end SINGLE POST CONTENTS HEADING block (v2.68.0) ============== */

/* ==========================================================================
   BLOG PASS H -- PHONE TITLE, OUTLINE WEIGHT, INDEX + ARCHIVE TEMPLATES
                                                        (added v2.69.0)
   Scope: body.single-post (as before) PLUS the two new archive surfaces,
   body.blog and body.category, and the classes on Theme Builder documents
   8035 "Archive - Blog Index" and 8036 "Archive - Blog Category".
   ========================================================================== */

/* --- 4.1  THE VIDEO TITLE IS HIDDEN BELOW 768 --------------------------- */
/* *** IT IS HIDDEN VISUALLY ONLY, AND THAT IS THE CORRECT CHOICE HERE
   BECAUSE THE ACCESSIBLE NAME ALREADY CARRIES IT. *** The play control is a
   <button> whose aria-label reads "Play: Tatiana Papageorgiou performs
   Theodorakis's Helikon, world premiere at the Herodes Atticus Theatre".
   aria-label overrides element contents for the accessible name, so this span
   contributes nothing to what a screen reader announces either way -- and the
   figcaption directly beneath the panel repeats the same sentence as visible,
   selectable text. Nothing is lost by hiding it and nothing is announced twice.
   The gold WATCH label stays. From 768 up this rule does not apply and the
   overlay is unchanged.
   WHY IT HAS TO GO AT ALL: at 390 the panel is 184.5px tall, the poster's
   unbroken dark band is 68.4px, and the three-line title ran to 108.6px --
   straight through the 66px play circle and over the gold logo, at a
   worst-case white-on-image contrast of 1.90:1. */
@media(max-width:767px){
  body.single-post .sm-post-body .sm-vp__title{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
    white-space:nowrap;border:0;
  }
}

/* --- 4.2  THE OUTLINE BUTTON GAINS ONE WEIGHT STEP ---------------------- */
/* 600 -> 700. Dark text on a light ground reads lighter than white text on a
   dark one at the same nominal weight, so the outline button is optically
   thinner than the gradient pill beside it even though both are set at the
   hero's 600. The gradient button is NOT touched: it is white on dark, exactly
   like the hero buttons, and already matches them.
   (0,4,1), the same specificity as the shared button rule, and later in source
   order. */
body.single-post .sm-post-cta .sm-post-cta__btn--outline .elementor-button{
  font-weight:700;
}

/* ==========================================================================
   6.5  THE INDEX AND ARCHIVE SURFACES
   ========================================================================== */

/* The theme's own top margin is removed on these two surfaces exactly as it is
   on the single post, so the heading sits on .site-content's padding-top --
   which is the fixed header's own height -- and the shell then supplies the
   visual gap. (1,3,0) so it wins on specificity, not load order. */
body.blog #page .site-content.site-content,
body.category #page .site-content.site-content,
body.search #page .site-content.site-content{margin-top:0;}

body.blog .sm-arch-shell,
body.category .sm-arch-shell,
body.search .sm-arch-shell{padding:72px 32px 96px;}

/* *** THE CARD COLUMN IS 760px, DELIBERATELY NOT THE ARTICLE'S 640px MEASURE.
   *** 640px is a READING measure, chosen so a paragraph runs to a comfortable
   line. A listing is not prose: its job is to let the eye move down a column of
   images and titles. 760px lets the 2.369-aspect featured image read as a
   picture rather than a strip, and it is the width this project used for the
   article column before v2.66.0, so it is already in the site's vocabulary.
   The excerpt is capped separately below so the card can be wide without the
   excerpt running to a punishing line. */
body.blog .sm-arch-col,
body.category .sm-arch-col,
body.search .sm-arch-col{max-width:760px;width:100%;margin-inline:auto;}

/* --- page heading + intro ----------------------------------------------- */
body.blog .sm-arch-title .elementor-heading-title,
body.category .sm-arch-title .elementor-heading-title,
body.search .sm-arch-title .elementor-heading-title{
  font-family:'Playfair Display',serif;font-size:52px;font-weight:700;line-height:1.15;
  letter-spacing:-.01em;color:#1a1712;text-transform:none;margin:0;
}
body.blog .sm-arch-intro,
body.category .sm-arch-desc{margin-top:20px;margin-block-start:20px;}
body.blog .sm-arch-intro p,
body.category .sm-arch-desc p{
  font-family:'Manrope',sans-serif;font-size:18px;font-weight:400;line-height:1.75;
  color:#4a4030;margin:0;max-width:640px;
}
/* An empty archive description must leave NO trace -- no margin, no box. */
body.category .sm-arch-desc:empty,
body.category .sm-arch-desc .elementor-widget-container:empty{display:none;}

body.blog .sm-arch-list,
body.category .sm-arch-list,
body.search .sm-arch-list{margin-top:56px;margin-block-start:56px;}

/* --- the card ------------------------------------------------------------ */
/* DESIGN.md Elevation, Layer 1: white with a 1px #d8c8ac outline. The skin's
   own drop shadow is replaced by that outline so the cards sit in the same
   family as the site's service and pricing cards. */
body.blog .sm-arch-list .elementor-post__card,
body.category .sm-arch-list .elementor-post__card,
body.search .sm-arch-list .elementor-post__card{
  background:#ffffff;border:1px solid #d8c8ac;border-radius:4px;
  box-shadow:none;overflow:hidden;position:relative;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
body.blog .sm-arch-list .elementor-post__card:hover,
body.category .sm-arch-list .elementor-post__card:hover,
body.search .sm-arch-list .elementor-post__card:hover{
  border-color:#7a5c2e;box-shadow:0 8px 40px rgba(122,92,46,.10);transform:translateY(-2px);
}
body.blog .sm-arch-list .elementor-post__thumbnail,
body.category .sm-arch-list .elementor-post__thumbnail{border-radius:0;}

/* *** THE THUMBNAIL BOX IS RESERVED BY CSS BUT FILLED BY JAVASCRIPT, AND THE GAP
   BETWEEN THE TWO IS VISIBLE ON EVERY COLD LOAD (added v2.78.0). *** Elementor
   reserves the card's image box with padding-bottom on .elementor-post__thumbnail
   -- calc(42%) desktop, calc(50%) at the mobile breakpoint, generated into
   post-8035.css / post-8036.css from the widget's Image Ratio control. But the
   rule that lifts the <img> OUT of flow and into that reserved box,
   .elementor-posts-container.elementor-has-item-ratio .elementor-post__thumbnail img
   in Elementor Pro's widget-posts.min.css, is gated on .elementor-has-item-ratio
   -- a class Elementor Pro's frontend JS adds at runtime, not in the markup.
   Until that script runs the image is position:static and sits ABOVE the padding,
   so the thumbnail measures image height PLUS reserved height (320.2 + 318.36 =
   638.56px at 1440) and the empty lower half shows the white card through the
   skin's .elementor-post__thumbnail__link::after hover gradient. THAT is the grey
   block. Isolated with scripts disabled, where it never resolves at all.
   Declaring the same geometry here, ungated by any runtime class, puts the image
   in the reserved box from first paint. *** object-fit:cover IS LOAD-BEARING: the
   box is a fixed ratio and the image is not (0.42 box vs 0.4219 image at desktop,
   0.50 vs 0.4219 at mobile), so width/height 100% with any other object-fit would
   STRETCH it -- the exact regression v2.77.0 closed. *** */
body.blog .sm-arch-list .elementor-post__thumbnail img,
body.category .sm-arch-list .elementor-post__thumbnail img{
  position:absolute;inset:0;
  width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 50%;
  transform:none;
}

/* *** AND THE `elementor-fit-height` VARIANT MUST BE OUTRANKED, OR THE CROP GOES
   OFF-CENTRE (added v2.78.0). *** Where the reserved box is DEEPER than the image
   -- the mobile breakpoint, whose ratio is calc(50%) against an image of 0.4219 --
   Elementor's JS adds .elementor-fit-height and
   .elementor-posts-container.elementor-has-item-ratio .elementor-post__thumbnail.elementor-fit-height img
   sets `width:auto` at (0,4,1). That outranks the (0,3,2) rule above on `width`
   ALONE, so the element grew to 386.36px inside a 326px box while `inset:0` still
   pinned it to left:0 -- a left-aligned crop, measured, with 60.36px overhanging
   the right edge and nothing overhanging the left. Elementor's own centring
   (left:calc(50% + 1px) plus a translate) had been correctly overridden; only the
   width had not. Matching that rule's class count at (0,4,2) hands the whole box
   back to object-fit, which centres on object-position instead of on a transform. */
body.blog .sm-arch-list .elementor-post__thumbnail.elementor-fit-height img,
body.category .sm-arch-list .elementor-post__thumbnail.elementor-fit-height img{
  width:100%;height:100%;
}/* *** THE WHOLE CARD IS THE LINK, AND IT IS ONE LINK, NOT TWO. *** The title's
   anchor is stretched over the entire card with a pseudo-element. Elementor
   already gives the thumbnail anchor tabindex="-1", so the title link is the
   only tab stop and the card announces once. */
body.blog .sm-arch-list .elementor-post__title a::after,
body.category .sm-arch-list .elementor-post__title a::after,
body.search .sm-arch-list .elementor-post__title a::after{
  content:"";position:absolute;inset:0;z-index:2;
}
body.blog .sm-arch-list .elementor-post__title a:focus-visible,
body.category .sm-arch-list .elementor-post__title a:focus-visible,
body.search .sm-arch-list .elementor-post__title a:focus-visible{
  outline:2px solid #7a5c2e;outline-offset:3px;
}

/* --- the category badge: the article's category label, verbatim ---------- */
/* *** THE 28x2px RULE IS THE SAME TREATMENT AS .ws-gallery__label--mockup AND
   THE ARTICLE'S OWN CATEGORY LABEL: content:"", 28x2px, background:currentColor,
   margin-right:10px, position:relative, top:-1px. *** The skin positions this
   badge absolutely OVER the image by default; it is made static here so it
   falls into flow directly beneath the image, which is the order 6.1 asks for
   and the order the card's DOM already has. */
body.blog .sm-arch-list .elementor-post__badge,
body.category .sm-arch-list .elementor-post__badge{
  position:static;display:inline-flex;align-items:center;
  margin:22px 28px 0;padding:0;background:none;border-radius:0;
  font-family:'Manrope',sans-serif;font-size:13px;font-weight:700;line-height:1.2;
  letter-spacing:.14em;text-transform:uppercase;color:#7a5c2e;
}
body.blog .sm-arch-list .elementor-post__badge::before,
body.category .sm-arch-list .elementor-post__badge::before{
  content:"";flex:0 0 auto;width:28px;height:2px;background:currentColor;
  margin-right:10px;position:relative;top:-1px;
}

/* --- title / excerpt / date ---------------------------------------------- */
body.blog .sm-arch-list .elementor-post__text,
body.category .sm-arch-list .elementor-post__text,
body.search .sm-arch-list .elementor-post__text{padding:14px 28px 0;margin:0;}
body.blog .sm-arch-list .elementor-post__title,
body.category .sm-arch-list .elementor-post__title,
body.search .sm-arch-list .elementor-post__title{margin:0;}
body.blog .sm-arch-list .elementor-post__title a,
body.category .sm-arch-list .elementor-post__title a,
body.search .sm-arch-list .elementor-post__title a{
  font-family:'Playfair Display',serif;font-size:28px;font-weight:600;line-height:1.28;
  color:#1a1712;text-transform:none;text-decoration:none;transition:color .2s ease;
}
body.blog .sm-arch-list .elementor-post__card:hover .elementor-post__title a,
body.category .sm-arch-list .elementor-post__card:hover .elementor-post__title a,
body.search .sm-arch-list .elementor-post__card:hover .elementor-post__title a{color:#7a5c2e;}
body.blog .sm-arch-list .elementor-post__excerpt,
body.category .sm-arch-list .elementor-post__excerpt,
body.search .sm-arch-list .elementor-post__excerpt{margin:12px 0 0;}
body.blog .sm-arch-list .elementor-post__excerpt p,
body.category .sm-arch-list .elementor-post__excerpt p,
body.search .sm-arch-list .elementor-post__excerpt p{
  font-family:'Manrope',sans-serif;font-size:16px;font-weight:400;line-height:1.7;
  color:#4a4030;margin:0;max-width:600px;
}
body.blog .sm-arch-list .elementor-post__meta-data,
body.category .sm-arch-list .elementor-post__meta-data{
  padding:14px 28px 26px;margin:0;border:0;
  font-family:'Manrope',sans-serif;font-size:13px;font-weight:400;line-height:1.6;color:#4a4030;
}

/* --- the empty state ----------------------------------------------------- */
body.blog .sm-arch-list .elementor-posts-nothing-found,
body.category .sm-arch-list .elementor-posts-nothing-found{
  font-family:'Manrope',sans-serif;font-size:18px;font-weight:400;line-height:1.75;
  color:#4a4030;padding:0;text-align:left;
}

/* --- tablet --------------------------------------------------------------- */
@media(max-width:1024px){
  body.blog .sm-arch-shell,
  body.category .sm-arch-shell,
  body.search .sm-arch-shell{padding:56px 24px 72px;}
  body.blog .sm-arch-title .elementor-heading-title,
  body.category .sm-arch-title .elementor-heading-title,
  body.search .sm-arch-title .elementor-heading-title{font-size:42px;}
  body.blog .sm-arch-list,
  body.category .sm-arch-list,
  body.search .sm-arch-list{margin-top:44px;margin-block-start:44px;}
}

/* --- mobile --------------------------------------------------------------- */
@media(max-width:767px){
  body.blog .sm-arch-shell,
  body.category .sm-arch-shell,
  body.search .sm-arch-shell{padding:40px 16px 56px;}
  body.blog .sm-arch-title .elementor-heading-title,
  body.category .sm-arch-title .elementor-heading-title,
  body.search .sm-arch-title .elementor-heading-title{font-size:34px;line-height:1.18;}
  body.blog .sm-arch-intro p,
  body.category .sm-arch-desc p{font-size:17px;}
  body.blog .sm-arch-list,
  body.category .sm-arch-list,
  body.search .sm-arch-list{margin-top:32px;margin-block-start:32px;}
  body.blog .sm-arch-list .elementor-post__badge,
  body.category .sm-arch-list .elementor-post__badge{margin:18px 20px 0;font-size:12px;}
  body.blog .sm-arch-list .elementor-post__text,
  body.category .sm-arch-list .elementor-post__text,
  body.search .sm-arch-list .elementor-post__text{padding:12px 20px 0;}
  body.blog .sm-arch-list .elementor-post__title a,
  body.category .sm-arch-list .elementor-post__title a,
  body.search .sm-arch-list .elementor-post__title a{font-size:22px;}
  body.blog .sm-arch-list .elementor-post__excerpt p,
  body.category .sm-arch-list .elementor-post__excerpt p,
  body.search .sm-arch-list .elementor-post__excerpt p{font-size:15.5px;}
  body.blog .sm-arch-list .elementor-post__meta-data,
  body.category .sm-arch-list .elementor-post__meta-data{padding:12px 20px 22px;}
}

@media (prefers-reduced-motion:reduce){
  body.blog .sm-arch-list .elementor-post__card,
  body.category .sm-arch-list .elementor-post__card,
  body.search .sm-arch-list .elementor-post__card{transition:none;}
  body.blog .sm-arch-list .elementor-post__card:hover,
  body.category .sm-arch-list .elementor-post__card:hover,
  body.search .sm-arch-list .elementor-post__card:hover{transform:none;}
}

/* --- 6.5 (correction)  THE PAGE GROUND ON THE TWO ARCHIVE SURFACES ------ */
/* *** MEASURED, NOT ASSUMED: the shell is `content_width:full` but it still
   sits inside `.col-full`, which is capped at 1280px, so above that width the
   Elementor kit's cool grey #F2F5F9 showed as bands to the left and right of
   the canvas and again below the shell. *** This is the identical condition the
   article hit at v2.64.0, and it takes the identical remedy: assert the warm
   canvas on the body itself. `.elementor-kit-8` sets the page background at
   (0,1,0) and the kit is the site's token layer and must not be edited, so this
   is authored at (0,1,1) to outrank it without touching the kit. */
body.blog,
body.category,
body.search{background-color:#f7f1ea;}
/* ============== end BLOG PASS H block (v2.69.0) ========================== */

/* ==========================================================================
   BLOG PASS I -- THE CLOSING CTA'S HOVER TARGET            (added v2.70.0)
   Scope unchanged from v2.64.0: body.single-post + the template's own classes.
   ========================================================================== */

/* --- 5.1  THE ROLL FIRES ON THE PILL, NOT ON THE WIDGET BOX -------------- */
/* *** THE PARENT THEME'S ROLL IS A DESCENDANT SELECTOR, AND ITS TRIGGER CLASS
   IS ON TWO ELEMENTS HERE, NOT ONE. *** soudify/style.css:996 reads
   `.soudify-button-effect:hover .soudify-button-clip .hover-text{transform:..}`.
   The parent theme's own JS puts `soudify-button-effect` on the ANCHOR --
   assets/js/elementor-frontend.min.js, hook `frontend/element_ready/button.default`,
   `$('.elementor-button', $scope).initSoudifyBtn()` -- so the class is already
   where it belongs, and it also stamps `btn-inited` there. Document 8024 ALSO
   carries the class in both button widgets' `_css_classes`, which lands a second
   copy on the full-width `.elementor-widget` DIV. Hovering that DIV satisfies the
   descendant selector, so the text rolls while the pointer is outside the visible
   pill: measured 56.80 / 56.81px either side of the outline pill and 134.19 /
   134.20px either side of the gradient pill at 1440, and 28.92px either side of
   the gradient pill at 390. Vertically the DIV is already the pill's own height,
   which is why the fault reads as a purely horizontal one.
   *** MEASURED SITE-WIDE: THESE TWO WIDGETS ARE THE ONLY NON-PILL CARRIERS OF
   THAT CLASS ANYWHERE ON THE SITE. *** Every other carrier is the anchor itself
   and has a zero dead zone -- the header button, the four homepage pills,
   `.smp-btn`, `.smp-btn--ghost` and `.pp-btn` on the service pages. The blog
   index and category cards carry the class on nothing at all.
   THE ROOT CAUSE IS THE REDUNDANT CLASS ON THE WIDGET and deleting it from
   `_elementor_data` is the one-token fix; this pass's scope reserves template
   writes for what CSS cannot do, and CSS can do this completely, so the wrapper
   leg is cancelled at (0,6,1) and the roll is restored on the pill at (0,7,1) --
   both above the parent rule's (0,3,0). The restoring declaration is the parent
   rule's own, copied verbatim, so the hovered computed transform is unchanged.
   Nothing else `.soudify-button-effect` does is state-dependent (it only styles
   the clip box and the two text spans), so no other behaviour is touched. */
body.single-post .sm-post-cta .sm-post-cta__btn:hover .soudify-button-clip .hover-text{
  transform:none;
}
body.single-post .sm-post-cta .sm-post-cta__btn .elementor-button:hover .soudify-button-clip .hover-text{
  transform:translate3d(0px,-100%,0px) scale3d(1,1,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
  transform-style:preserve-3d;
}
/* ============== end BLOG PASS I block (v2.70.0) =========================== */
/* ==========================================================================
   SITE-WIDE KEYBOARD FOCUS RING                             (added v2.71.0)
   *** THE PARENT THEME SUPPRESSES THE RING FOR THE WHOLE SITE AT (0,1,0). ***
   `soudify/style.css:851` is a bare `:focus{outline:none}`. Components that
   look correct today only look correct because they each restore their own
   ring; the ones that never did -- the header CTA, all three form submit
   buttons, the homepage gradient CTAs and the article's gradient CTA --
   paint NOTHING on keyboard focus. The suppressor is DELIBERATELY LEFT IN
   PLACE: removing it would paint a ring on mouse clicks across components
   this pass has not examined. It is overridden instead.
   Base rule is (0,1,1), which clears the suppressor's (0,1,0) and still
   LOSES to every existing component rule at (0,2,0) or higher, so the
   eleven `2px solid #7a5c2e` rules already in this file are untouched.
   Values are the site's own, not invented: 2px solid #7a5c2e at 3px offset.
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid #7a5c2e;
  outline-offset:3px;
}
/* --- DARK GROUNDS ------------------------------------------------------- */
/* *** MEASURED, NOT ASSUMED: on the service hero's scrimmed photograph the
   sampled ring band runs #1f1814..#555251, where #7a5c2e reaches only 2.80:1
   against a 3:1 requirement. The header and footer are the same condition.
   #c9a96e measures 7.67:1 there and is already this file's dark-surface ring
   variant (`.ws-lightbox__close:focus-visible`). Header and footer are bare
   `<header>`/`<footer>` elements with NO class -- HFE renders them that way --
   so they are scoped by element type at (0,1,2). *** */
header a:focus-visible,
header button:focus-visible,
footer a:focus-visible,
footer button:focus-visible,
body .sm-page .smp-hero a:focus-visible{
  outline-color:#c9a96e;
}
/* --- INDETERMINATE GROUNDS: THE HERO VIDEO AND FOUR HERO PHOTOGRAPHS ---- */
/* *** MEASURED TWICE AND IT ANSWERED DIFFERENTLY BOTH TIMES: the homepage
   hero CTA's ring band sampled 6.75:1 on one run and 2.52:1 on the next,
   because the ground under it is a PLAYING VIDEO. No single ring colour can
   hold 3:1 against a moving image, and the four service heroes are four
   different photographs behind the same scrim. A TWO-TONE ring settles it by
   construction -- whichever way the ground goes, one of the two colours
   contrasts with it: white core (12.6:1 on the dark halo) inside a near-black
   halo. The halo is a box-shadow set ONLY in the focus state, so each
   button's resting drop shadow is untouched and returns on blur.
   Specificity is deliberately (0,4,2) so it clears the `.smp-hero a` rule
   above, which would otherwise repaint the pill's ring gold. *** */
body .elementor-23 .elementor-element.elementor-element-hctaprim .elementor-button:focus-visible,
body .sm-page .smp-hero a.smp-btn:focus-visible{
  outline:2px solid #ffffff;
  outline-offset:3px;
  box-shadow:0 0 0 5px rgba(21,19,17,.92);
}
/* --- THE ARTICLE'S CLOSING BLOCK IS TAUPE ------------------------------- */
/* #7a5c2e on taupe #c9b99b is 3.16:1 -- a pass, but the sibling outline
   button beside it already uses #3d342a, which measures 6.26:1 there. The
   block keeps one token. */
body.single-post .sm-post-cta .sm-post-cta__btn--primary .elementor-button:focus-visible{
  outline:2px solid #3d342a;
  outline-offset:3px;
}
/* ============== end SITE-WIDE KEYBOARD FOCUS RING (v2.71.0) ============== */

/* ==========================================================================
   SINGLE POST -- BOLD IS A RUN-IN LABEL (added v2.73.0, Blog Pass H)
   Scope: body.single-post plus the article-body class on Theme Builder
   document 8024. body.single-post exists on SINGLE POSTS ONLY, so this rule
   cannot reach the homepage, a service page, an archive or any other view.
   --------------------------------------------------------------------------
   *** THIS IS AN AMENDMENT TO THE v2.51.0 STANDARD, NOT AN EXCEPTION TO IT. ***
   "Bold is not available as emphasis in body copy" governs MARKETING body
   copy, where bold is decorative: the parent theme carries
   `.hentry strong{text-transform:var(--e-global-typography-secondary-text-transform)}`
   and the active kit resolves that to `uppercase`, so an author reaching for
   emphasis on a service page gets shouting. That standard is unchanged and
   still applies everywhere it applied before.
   *** LONG-FORM ARTICLES USE BOLD FOR A DIFFERENT DEVICE. *** In the two
   "From Mockup to Manuscript" guides bold opens a paragraph or a checklist
   line as a RUN-IN LABEL -- "Pass one: note starts.", "Audio format.",
   "Unmute every muted region." That is a sentence opener, not emphasis and
   not a heading, so the uppercase Playfair treatment is scoped away from
   single posts as of v2.73.0. Decided by Samy, 2026-09-09.
   *** `.hentry strong` ITSELF IS NOT TOUCHED. *** v2.51.0 is explicit that it
   must not be "fixed" -- it is site furniture with many consumers. This rule
   outranks it LOCALLY at (0,2,2) against its (0,1,1), and nowhere else.
   Colour and size are INHERITED so the label sits inside the line rather than
   reading as a heading above it.
   ========================================================================== */
body.single-post .sm-post-body strong{
  font-family:'Manrope',sans-serif;
  font-weight:600;
  text-transform:none;
  color:inherit;
  font-size:inherit;
}
/* ========== end SINGLE POST BOLD RUN-IN LABEL block (v2.73.0) ============ */


/* ===== BEGIN v2.74.0 ITALIC SUBHEADING TRIAL (Pass D) ======================
   *** OPEN TRIAL, PENDING SAMY'S DECISION. NOT ADOPTED. ***
   The article subheading level below the phase titles (H3) in Playfair ITALIC.
   ONE declaration: font-style. Size, weight, colour, line-height and margins are
   deliberately untouched, so the trial changes exactly one axis and nothing else.
   Scope is `body.single-post .sm-post-body`, i.e. article body copy only -- it
   cannot reach a service page, an archive or the closing CTA.
   (0,2,2), equal to the base H3 rule and later in source order, so it wins without
   raising specificity.
   *** TO REVERT: DELETE FROM THE BEGIN MARKER TO THE END MARKER. NOTHING ELSE
   REFERS TO IT. ***
   ========================================================================== */
body.single-post .sm-post-body h3{font-style:italic;}
/* ===== END v2.74.0 ITALIC SUBHEADING TRIAL ================================= */

/* ===== BEGIN v2.79.0 IN-BODY IMAGE PAIRS + LITERAL STRINGS ================
   Added by the Part 1 screenshot pass. Two rules, both scoped to article body copy
   (body.single-post .sm-post-body), so neither can reach a page, an archive or the
   closing CTA.
   ========================================================================== */

/* --- stacked figure pair ------------------------------------------------
   A two-image figure sharing ONE caption, first marker on top. The existing
   rule `body.single-post .sm-post-body figure img` already sets width:100%,
   height:auto and display:block, so the pair stacks by normal block flow at
   EVERY width -- there is no flex and no grid here, so nothing can place the
   two side by side at any viewport. This rule adds the gap and nothing else.
   (0,3,3), above `.elementor img` at (0,1,1). */
body.single-post .sm-post-body .sm-post-figure--stack img + img{margin-top:12px;}

/* --- literal strings the reader types -----------------------------------
   `_ORCH`, `NOT FOR ORCHESTRATION`, cue IDs. BACKGROUND ONLY. The pale gold
   #f0e3cc is MEASURED from the `/MK /BG [.941176 .890196 .8]` of the fillable
   fields in the Orchestration Delivery Checklist PDF (8042/8043), not chosen --
   it is the same value as the `gold-pale` token.
   *** BURGUNDY #7c1f3a IS DELIBERATELY NOT USED HERE. It is the prose link
   colour, and a literal string that borrowed it would read as a link. *** Colour
   is inherited and there is no underline, for the same reason.
   Font family, size and weight are inherited too: 8023 established that these
   tokens are plain text and carry no <code>. (0,3,1). */
body.single-post .sm-post-body .sm-lit{
  background:#f0e3cc;
  color:inherit;
  text-decoration:none;
  padding:0 .2em;
  border-radius:2px;
}
/* ===== END v2.79.0 ======================================================== */

/* ===== v2.85.0 -- THE ICON FONT IS CHILD-OWNED (DESIGN.md v2.85.0) ================
   `soudify-icon` was declared by the PARENT theme (soudify/style.css, relative to ITS
   directory) and AGAIN by page-local <style> blocks on posts 23, 7652 and 7702 that
   pointed INTO the parent theme directory by absolute URL. Both die with the parent
   theme or its directory. This is now the ONE declaration on the site: the page-local
   copies were removed at v2.85.0 and the three font files were copied into
   assets/fonts/icons/ (md5-verified against the parent's). URLs are RELATIVE TO THIS
   STYLESHEET, so a rename of the theme directory cannot break them and no host is
   baked in.
   THE FAMILY NAME `soudify-icon` IS KEPT DELIBERATELY. Every glyph class on the site
   references it (soudify-icon-*, .pp-ic, .ww-icf, .sm-card-ico, .smp-related__ico) and a
   rename would touch every one of them for no gain. It joins the project's intentional
   residuals (DESIGN.md v2.84.0, alongside the `soudify-child-style` handle).
   font-display:block matches the page-local declarations it replaces: an icon font
   must never flash fallback text. eot/svg were not carried: no browser in the support
   matrix needs them and the page-local declarations never shipped them either. */
@font-face{font-family:"soudify-icon";src:url("assets/fonts/icons/soudify-icon-1.0.4.woff2") format("woff2"),url("assets/fonts/icons/soudify-icon-1.0.4.woff") format("woff"),url("assets/fonts/icons/soudify-icon-1.0.4.ttf") format("truetype");font-display:block;}
/* ===== END v2.85.0 ======================================================== */


/* ==========================================================================
   G-4 (v2.88.0, 2026-09-13, skin v5) -- HEADER 38 NAVIGATION RE-SKIN FOR HFE'S
   NAVIGATION MENU WIDGET (MIGRATION-HELLO.md F-1 Option A, E-4/E-5/E-8)
   --------------------------------------------------------------------------
   Header 38 now carries TWO `navigation-menu` widgets in the slots the two
   Soudify widgets held: 092b54a (layout: horizontal, hidden <=1024) and
   59446a9 (layout: flyout, hidden >=1025). Every value below was RE-MEASURED
   from the live Soudify render on 2026-09-13 (scratchpad g4/recon-soudify.json)
   before the swap; where HFE's markup cannot reach today's geometry the
   difference is named in the v2.88.0 CHANGELOG entry as deliberate.

   *** SOUDIFY'S OWN style.css CARRIES SIX RULES THAT REACH HFE'S CLASSES ***
   (`.hfe-nav-menu li.menu-item a.hfe-menu-item{display:inline-block;...}`,
   `.elementor-widget-navigation-menu .hfe-nav-menu .hfe-nav-menu__layout-horizontal
   .menu-item ul.sub-menu{left:unset;right:0;min-width:100px}` at (0,5,1), and
   four more). They vanish at the switch. So every property they touch is set
   EXPLICITLY here, at a specificity that beats them TODAY, so the render is the
   same with and without them: the desktop panel rules sit at (0,7,2).

   SPECIFICITY: Elementor's generated post-38.css addresses the widgets as
   `.elementor-38 .elementor-element.elementor-element-<id> ...` (0,4,x).
   Every rule here carries `.sm-header .elementor-widget-navigation-menu`
   (0,2,0) plus its own selector so it lands at (0,4,x) or better, and wins
   without !important except where HFE's own stylesheet already uses it.

   THE OLD `.main-navigation .sub-menu` CONTRACT (v2.38.0) IS RE-POINTED HERE
   (width:max-content, the two inert guards) and the old rule above stays in
   place as dead CSS until G-8 / SS J.1.
   ========================================================================== */

/* ---------- desktop nav (092b54a, horizontal) ---------- */
/* today's ul is centred in its 60% column (measured: 391.3px first item at 1440) */
.sm-header .elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal ul.hfe-nav-menu{
  display:flex;flex-wrap:wrap;justify-content:center;
  column-gap:3.2px;            /* the inline-block whitespace between today's <li>s, measured 3.2px x4: the run is 657px and starts at 391.3px at 1440 */
  width:calc(100% + 48px);     /* today's ul overhangs its 60% column by 24px each side (margin:0 -24px, ul 672px in a 624px column at 1100):
                                  the 657px run FITS on one line there. At 100% it wrapped and the inner-page header grew 82 -> 130px at 1100. */
  margin:0 -24px;padding:0;
}
.sm-header .elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal ul.hfe-nav-menu > li.menu-item{
  margin:0;padding:0;
}
.sm-header .elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal ul.hfe-nav-menu > li.menu-item > a.hfe-menu-item,
.sm-header .elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal ul.hfe-nav-menu > li.menu-item > .hfe-has-submenu-container > a.hfe-menu-item{
  display:flex;align-items:center;
  padding-left:24.39px;padding-right:24.39px;   /* today's link margin, measured: li 134.36 - a 85.58 = 2 x 24.39 */
  background:transparent;
}
/* no caret on the desktop parents (today's desktop parents carry none) */
.sm-header .elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal ul.hfe-nav-menu > li.menu-item > .hfe-has-submenu-container > a .sub-arrow{
  display:none;
}
/* the dropdown panel: today's geometry and motion (parent theme rule, re-measured).
   (0,7,2): outranks Soudify's (0,5,1) `left:unset;right:0;min-width:100px` leak. */
.sm-header .elementor-widget-navigation-menu .hfe-nav-menu .hfe-nav-menu__layout-horizontal ul.hfe-nav-menu > li.menu-item > ul.sub-menu{
  position:absolute;
  left:-20px;right:auto;
  top:calc(100% + 20px);
  min-width:180px;          /* inert guard, carried from v2.38.0 */
  width:max-content;        /* THE MECHANISM: the panel sizes to its widest ITEM */
  max-width:360px;          /* inert guard, carried from v2.38.0 */
  margin:0;padding:32px 0 38px;
  background-color:#151311;
  box-shadow:0 3px 30px rgba(0,0,0,.08);
  border-radius:0;
  z-index:99999;
  opacity:0;visibility:hidden;
  transition:all .3s ease;
}
.sm-header .elementor-widget-navigation-menu .hfe-nav-menu .hfe-nav-menu__layout-horizontal ul.hfe-nav-menu > li.menu-item-has-children:hover > ul.sub-menu,
.sm-header .elementor-widget-navigation-menu .hfe-nav-menu .hfe-nav-menu__layout-horizontal ul.hfe-nav-menu > li.menu-item-has-children:focus-within > ul.sub-menu{
  top:100%;
  opacity:1;
  visibility:visible;
  transition:all .3s ease;
}
.sm-header .elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal ul.sub-menu > li.menu-item{
  margin:0;padding:0;border:0;
}
/* the 84px inset is the link's own margin today (42 each side); HFE pads instead */
.sm-header .elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal ul.sub-menu > li.menu-item > a.hfe-sub-menu-item{
  display:flex;align-items:center;
  padding:0;
  margin:0 42px;
  background:transparent;
}

/* ---------- mobile trigger (59446a9, flyout): today's three-bar glyph, 24x14 ---------- */
.sm-header .elementor-widget-navigation-menu .hfe-nav-menu__toggle.hfe-flyout-trigger{
  display:block;
  font-size:0;line-height:0;
  border:0;border-radius:0;
  color:#f3ece2;
  margin:0 0 0 auto;padding:0;
  width:24px;
}
.sm-header .elementor-widget-navigation-menu .hfe-nav-menu__toggle.hfe-flyout-trigger:focus-visible{
  outline:2px solid #c9a96e;outline-offset:6px;
}
.sm-header .elementor-widget-navigation-menu .hfe-flyout-trigger .hfe-nav-menu-icon{
  display:block;
  position:relative;
  width:24px;height:14px;
  margin:0;padding:0;border:0;border-radius:0;
  line-height:0;
  background:linear-gradient(#f3ece2,#f3ece2) 0 6px/12px 2px no-repeat;
  transition:background-size .3s ease;
  cursor:pointer;
}
.sm-header .elementor-widget-navigation-menu .hfe-flyout-trigger .hfe-nav-menu-icon svg,
.sm-header .elementor-widget-navigation-menu .hfe-flyout-trigger .hfe-nav-menu-icon i{
  display:none;
}
.sm-header .elementor-widget-navigation-menu .hfe-flyout-trigger .hfe-nav-menu-icon::before,
.sm-header .elementor-widget-navigation-menu .hfe-flyout-trigger .hfe-nav-menu-icon::after{
  content:"";position:absolute;left:0;width:24px;height:2px;border-radius:5px;background:#f3ece2;
}
.sm-header .elementor-widget-navigation-menu .hfe-flyout-trigger .hfe-nav-menu-icon::before{top:0;}
.sm-header .elementor-widget-navigation-menu .hfe-flyout-trigger .hfe-nav-menu-icon::after{bottom:0;}
.sm-header .elementor-widget-navigation-menu .hfe-flyout-trigger:hover .hfe-nav-menu-icon{
  background-size:24px 2px;
}

/* ---------- the drawer (59446a9): 330px, from the left, slides in over .25s ---------- */
.sm-header .elementor-widget-navigation-menu .hfe-flyout-overlay{
  background:rgba(0,0,0,.7);
}
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper .hfe-side.hfe-flyout-left{
  display:block;               /* HFE keeps it display:none until open, which cannot animate */
  left:-330px;                 /* closed rest position; the widget JS drives `left` inline */
  width:330px;max-width:100vw;
  visibility:hidden;
  transition:left .25s ease,visibility 0s linear .25s;
}
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper .hfe-side.hfe-flyout-left.hfe-flyout-show{
  visibility:visible;
  transition:left .25s ease,visibility 0s;
}
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper .hfe-side .hfe-flyout-content{
  padding:0 30px 30px;
  background-color:#151311;
  color:#ded3c3;
  line-height:1.4;
}
/* the "Main menu" band Soudify's single tab drew across the top of the drawer */
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper .hfe-side .hfe-flyout-content::before{
  content:"Main menu";
  display:block;
  margin:0 -30px 0;
  padding:20px 30px;
  background-color:#211d19;
  color:#ded3c3;
  font-family:"Manrope",sans-serif;font-weight:700;font-size:13px;line-height:13px;
  letter-spacing:.12em;text-transform:uppercase;
}
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper .hfe-flyout-close{
  position:absolute;margin:0;top:22px;right:24px;width:20px;height:20px;line-height:20px;font-size:20px;
  color:#ded3c3;z-index:99;
}
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper .hfe-flyout-close svg{
  position:absolute;margin:0;top:0;right:0;width:20px;height:20px;line-height:20px;font-size:20px;
  fill:currentColor;
}
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper .hfe-flyout-close:hover,
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper .hfe-flyout-close:focus-visible{
  color:#c9a96e;outline:0;
}

/* the list */
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper ul.hfe-nav-menu{margin:0;padding:0;}
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper ul.hfe-nav-menu > li.menu-item{
  margin:0;padding:0;border:0;position:relative;
}
/* today's row: a full-width block link, 15px/15px, 16px/16px, one gold hairline under it */
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper ul.hfe-nav-menu > li.menu-item > a.hfe-menu-item,
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper ul.hfe-nav-menu > li.menu-item > .hfe-has-submenu-container > a.hfe-menu-item{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  padding:15px 0;
  margin:0;
  border-bottom:1px solid #7a5c2e;
  background:transparent;
}
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper ul.hfe-nav-menu > li.menu-item > .hfe-has-submenu-container > a.hfe-menu-item{
  padding-right:52px;          /* today's .menu-item-has-children > a{padding-right:52px} */
}
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper ul.hfe-nav-menu > li.menu-item:last-child > a.hfe-menu-item,
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper ul.hfe-nav-menu > li.menu-item:last-child > .hfe-has-submenu-container > a.hfe-menu-item{
  border-bottom:0;
}
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper .hfe-has-submenu-container{
  display:block;
}
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper .hfe-has-submenu-container:focus-visible{
  outline:2px solid #c9a96e;outline-offset:-4px;border-radius:4px;
}
/* the submenu toggle: today's 52x47 tap target with the 9px gold chevron, right-closed / down-open.
   Absolutely positioned at the row's right edge exactly as Soudify's injected button was, so the
   row stays 47px and the label keeps its 52px right inset. */
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper .sub-arrow.hfe-menu-toggle{
  position:absolute;top:0;right:0;z-index:3;
  display:flex;align-items:center;justify-content:center;
  width:52px;height:47px;
  margin:0;padding:0;
  border:0!important;
  font-size:0;line-height:0;
  cursor:pointer;
}
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper .sub-arrow.hfe-menu-toggle i{display:none;}
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper .sub-arrow.hfe-menu-toggle::after{
  content:"";display:block;width:9px;height:9px;margin-top:0;
  border-right:2px solid #c9a96e;border-bottom:2px solid #c9a96e;
  transform:rotate(-45deg);transition:transform .3s ease;
}
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper .hfe-has-submenu-container.sub-menu-active .sub-arrow.hfe-menu-toggle::after{
  margin-top:-3px;transform:rotate(45deg);
}
/* the submenu: collapsed until opened (HFE only sets the inline styles on the first click) */
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper ul.sub-menu{
  position:relative;
  height:0;overflow:hidden;
  visibility:hidden;opacity:0;
  margin:0;padding:0;
  background:transparent;
  box-shadow:none;
  transition:opacity .3s ease;
}
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper ul.sub-menu.sub-menu-open{
  height:auto;overflow:visible;visibility:visible;opacity:1;
}
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper ul.sub-menu > li.menu-item{
  margin:0;padding:0;border:0;
}
/* today's sub-item is an inline-block link with 4px/4px margins that do not collapse */
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper ul.sub-menu > li.menu-item > a.hfe-sub-menu-item{
  display:inline-block;
  padding:0;
  margin:4px 0 4px 13px;
  border:0;
  background:transparent;
}
.sm-header .elementor-widget-navigation-menu .hfe-flyout-wrapper ul.sub-menu > li.menu-item:first-child > a.hfe-sub-menu-item{
  padding-top:8px;
}

/* ==========================================================================
   G-6c (DESIGN.md v2.93.0, 2026-09-15) -- TWO ADDITIONS, BOTH REVERSIBLE BY DELETING THIS BLOCK
   --------------------------------------------------------------------------
   1. THE HOVER-LIFT HIT-KEEPER for the lifting buttons of the three parity-governed forms (Continue on the
      two before-footer templates 7292/7603; Send Inquiry #enqSendBtn/#inqSendBtn; Send Message #smSendBtn on
      7079). Their designed hover is the templates' own translateY(-2px) over .25s. A transform moves the HIT
      BOX with the paint, so a cursor resting within 2px of the bottom edge is carried outside the box by the
      lift; the next resting-hand micro-movement re-hit-tests, :hover is lost, the button drops, the cursor is
      inside again, hover re-fires -- measured 23-38 hover flips in 1.5s with 1px pointer jitter on Continue,
      Send Inquiry AND Send Message (interactive_baseline_20260912/g6c/probe-g6c-edge-jitter@1440-*.json).
      A single CDP pointer move never shows it: Chrome does not re-hit-test after a transform without pointer
      movement, which is why the v2.92.0 form-step-hover check (centre, one move) reads clean.
      THE FIX RESERVES THE RESTING BOX AS A HIT TARGET: an invisible ::before covering the button
      counter-translates by the same 2px over the same .25s ease, so at every instant of the transition the
      union of hit boxes contains the resting box, and no cursor position can re-enter the loop. No layout, no
      paint, no visible stacking change. The Continue button's pseudo-elements are free: the v2.1.14 step
      arrows (::after on next, ::before on previous) were removed from both templates in this pass.
   2. THE LIGHTBOX FOCUS-RESTORE RING. assets/ws-lightbox.js marks the trigger it restores focus to with
      data-ws-lb-restored (cleared on blur or on the next key press). Chrome treats focus restored after an
      Escape close as keyboard-driven and paints the child's :focus-visible ring on the poster/figure; this
      rule holds the outline back ONLY on that programmatic restore. Reaching the same element by Tab shows
      the ring exactly as before (the sweep's lightbox-after-close asserts BOTH directions). !important because
      the ring rules sit at (0,2,0)-(0,3,0) across five gallery variants and a body.page-id scope; one rule
      must beat all of them. Samy may still decide to remove the ring everywhere -- that is a separate decision.
   ========================================================================== */
.e-form__buttons__wrapper__button-next,
#enqSendBtn.elementor-button,#inqSendBtn.elementor-button,#smSendBtn.elementor-button{position:relative;}
.e-form__buttons__wrapper__button-next::before,
#enqSendBtn.elementor-button::before,#inqSendBtn.elementor-button::before,#smSendBtn.elementor-button::before{
  content:'';position:absolute;left:0;right:0;top:0;bottom:0;transform:none;transition:transform .25s ease;
}
.e-form__buttons__wrapper__button-next:hover::before,
#enqSendBtn.elementor-button:hover::before,#inqSendBtn.elementor-button:hover::before,#smSendBtn.elementor-button:hover::before{
  transform:translateY(2px);
}
[data-ws-lb-restored]:focus-visible{outline:none!important;}


/* === PASS M1 (v2.99.0) - 7571 AI MUSIC TO SCORE ENQUIRY-FORM PHOTO =========================
   The ONLY mechanism that has ever worked for the before-footer side image: the form renders
   OUTSIDE the .sm-page root (measured v2.42.0), so a .sm-page descendant selector and
   custom-property inheritance both fail silently. Root-relative url() so the pre-launch domain
   search-replace has nothing to do here. Every declaration !important: the base rule lives in
   7603's page-local <style>, printed in the document BODY, and wins on source order otherwise.
   APPENDED AT THE TAIL, per the v2.32.0 convention, so every line number cited in DESIGN.md and
   CHANGELOG.md above this point stays valid. Cache-bust is this file's own filemtime (F-6). */
body.page-id-7571 .enqsec-inner-photo{
  background-image:url('/wp-content/uploads/2026/09/start-project-ai-1200.webp') !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}


/* === PASS M8 (v2.106.0) - I-2: A DESKTOP DROPDOWN CLOSED BY ESCAPE STAYS CLOSED =================
   `sm-dd-closed` is set on the top-level item by hello-elementor-child/assets/js/sm-mobile-submenu.js
   (PASS M8 block) when Escape, a second Enter or Space closes a panel. Escape returns focus to the
   parent container, which sits INSIDE the item, so the G-4 skin's :focus-within rule above would
   hold the panel open. This rule outranks it: the same chain as the skin's open rule, (0,8,3), plus
   `html body` = (0,8,5). The script clears the class when the pointer re-enters the item, when focus
   leaves it, or when Enter/Space re-opens it. It only ever applies to a panel someone just closed,
   so nothing renders differently otherwise. APPENDED AT THE TAIL (v2.32.0 convention); cache-bust is
   this file's own filemtime (F-6). */
html body .sm-header .elementor-widget-navigation-menu .hfe-nav-menu .hfe-nav-menu__layout-horizontal ul.hfe-nav-menu > li.menu-item-has-children.sm-dd-closed > ul.sub-menu{
  top:calc(100% + 20px);
  opacity:0;
  visibility:hidden;
}


/* === PASS M13 (v2.111.0) - 7571 AI MUSIC TO SCORE FORM PHOTO, PER-BAND FRAMING ==============
   Samy reported the side photo badly framed on two tablets in PORTRAIT, from his own screenshots.
   T1, iPad mini at 744 CSS px: the stacked band showed only the stage lights and her forearm, and
   the piano was not visible at all. T2, iPad 11-inch at 834 CSS px: the side column sliced her head
   just behind the nose, leaving a half-cut face at the right edge.
   The photo is start-project-ai-1200.webp, 1200x1800, painted with background-size:cover, so the
   visible slice is decided by the box aspect alone and only background-position can move it.
   SUBJECT MAP, measured off the master in image percent: stage lights y45 to y49; upper hand y54 to
   y61 at x1 to x17; lower hand y73 to y80.5 at x22 to x48; keyboard x0 to x42, y72.5 to y83.5;
   her face x68.6 to x84, y26 to y42.
   TWO BANDS, because the form has two layouts and the switch is at 768 exactly (measured, not read
   off a breakpoint table):
   (A) 767 and below, inqrow is a column and the box is the full row width by a fixed 240px, so the
       slice is a wide horizontal band, 21.8 to 55.6 percent of the image tall. center 76% holds the
       lower hand and the keys it plays inside the band at every width from 320 to 767, and keeps the
       upper hand whole to about 600. Above that the band is shorter than the 26.5 points the two
       hands span, so the top of the upper hand is cut, which no position can prevent.
   (B) 768 to 963, inqrow is a row and the box is 44 percent of the row by the card height, so the
       full image height always shows and the slice is horizontal, 51.2 to 67.0 percent of the image
       wide. 0% anchors it at the left edge, which brings the keyboard, both hands and the piano in
       and leaves her face, which starts at x68.6, entirely outside the frame.
   THE BAND STOPS AT 963 BY DERIVATION, NOT BY TASTE: the slice reaches 67.0 percent wide at 964 and
   71.3 at 1023, so from 964 up a left anchor would start showing the front of her face while still
   cutting the head. From 964 up the centred base rule already carries the face with the ear and the
   hair behind it, which is the desktop framing, so those widths are deliberately left untouched.
   The base rule above is center at every width; these two override it on source order, same
   selector, same specificity, both important. APPENDED AT THE TAIL per the v2.32.0 convention, so
   every line number cited in DESIGN.md and CHANGELOG.md above this point stays valid. Cache-bust is
   this file's own filemtime (F-6). */
@media (max-width:767px){
  body.page-id-7571 .enqsec-inner-photo{ background-position:center 76% !important; }
}
@media (min-width:768px) and (max-width:963px){
  body.page-id-7571 .enqsec-inner-photo{ background-position:0% 50% !important; }
}


/* === PASS P1 (v2.113.0) - 8070 PORTFOLIO ENQUIRY-FORM PHOTO ================================
   The ONLY mechanism that has ever worked for the before-footer side image: the form renders
   OUTSIDE the .sm-page root (measured v2.42.0), so a .sm-page descendant selector and
   custom-property inheritance both fail silently. Root-relative url() so the pre-launch domain
   search-replace has nothing to do here. Every declaration !important: the base rule lives in
   7603's page-local <style>, printed in the document BODY, and wins on source order otherwise.
   THE PHOTO IS start-project-portfolio-1200.webp, 1200x1800, attachment 8069, painted with
   background-size:cover, so the visible slice is decided by the box aspect alone and only
   background-position can move it.
   SUBJECT MAP, measured off the master in image percent: the LOWER F-HOLE, the shape that
   identifies the instrument, runs x14 to x96, y30 to y52; the BRIDGE, the sharpest and most
   detailed object, sits x10 to x52, y55 to y78; the four strings cross the whole frame below y58.
   There is no face and no horizon -- the frame is one object filling it edge to edge -- so the
   only question a band can ask is how much of that one object is in the slice.
   THE SLICE, MEASURED ON THE RENDERED PAGE AT EIGHT WIDTHS, NOT INFERRED FROM A BREAKPOINT TABLE.
   The image is 1200x1800, aspect 0.66667, painted `cover`, and the form has two layouts with the
   switch at 768 exactly, so the box flips from a wide band to a tall column there:
     <=767, box aspect > image aspect, so WIDTH binds and the slice is a horizontal band --
       390  358.0x240.0  box 1.4917  slice y[27.65, 72.35]  (44.69% of image height)
       744  712.0x240.0  box 2.9667  slice y[38.76, 61.24]  (22.47%) -- the WIDEST band on the page
     >=768, box aspect < image aspect, so HEIGHT binds and the slice is a vertical strip --
       768  316.8x927.9  box 0.3414  slice x[24.39, 75.61]  (51.21% of image width) -- the NARROWEST
       820  339.7x927.9  box 0.3661  slice x[22.55, 77.45]  (54.90%)
       834  345.8x927.9  box 0.3727  slice x[22.05, 77.95]  (55.90%)
       1024 429.4x902.3  box 0.4760  slice x[14.30, 85.70]  (71.40%)
       1100 462.9x902.3  box 0.5130  slice x[11.55, 88.45]  (76.90%)
       1440 519.2x882.3  box 0.5885  slice x[ 5.86, 94.14]  (88.27%)
   *** CENTRE HOLDS THE INSTRUMENT IN EVERY ONE OF THOSE EIGHT SLICES, SO THIS PAGE DELIBERATELY
   CARRIES NO MEDIA-QUERY BAND. *** The two extremes are the proof: at 744 the band is only 22.47%
   of the image tall and still contains the lower curve of the f-hole and the crown of the bridge,
   and at 768 the strip is only 51.21% of the image wide and still contains the middle of the
   f-hole and the treble half of the bridge. Both were confirmed by capture, not by arithmetic
   alone. *** THIS IS A MEASURED RESULT, NOT AN OMISSION *** -- the PER-BAND FRAMING rule
   (v2.111.0) requires the bands to be derived rather than assumed IN EITHER DIRECTION, and 7571
   needed two bands because its photo carries a face and two hands that fall out of the slice.
   This one cannot lose a subject, only show more or less of one instrument.
   APPENDED AT THE TAIL, per the v2.32.0 convention, so every line number cited in DESIGN.md and
   CHANGELOG.md above this point stays valid. Cache-bust is this file's own filemtime (F-6), and
   the retired `Version:` header is NOT bumped -- see the v2.84.0 rule. */
body.page-id-8070 .enqsec-inner-photo{
  background-image:url('/wp-content/uploads/2026/09/start-project-portfolio-1200.webp') !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

/* PASS P5 (v2.117.0) -- PORTFOLIO FORM PHOTO, PER-BAND FRAMING. *** THIS SUPERSEDES THE "NO
   MEDIA-QUERY BAND" CONCLUSION IN THE COMMENT ABOVE: CENTRE DID NOT HOLD THE INSTRUMENT. At 744
   it cut the top of the f-hole, and at every column width from 768 to 1440 it cut the bridge's
   left foot. *** Subject map, measured on the master (1200x1800), in image percent: f-hole x
   15.17-96.67, y 30.61-49.50 (flood fill of the dark opening); bridge x 3.5-49.8, y 54.3-89.5
   (gridded read). Samy's rule, from real iPads: a tall column frame holds the LEFT END of the
   f-hole AND the whole bridge; a short strip frame holds the WHOLE f-hole, because a strip cannot
   show both and the f-hole wins.
   STRIP, 420-767 (full row width x 240px): the visible slice is 16000/boxW % of the image tall.
   The f-hole needs posy in [35.45, 39.13] at 767 and a wider interval at every narrower width, so
   37.3% is the maximin. Below 420 centre already holds the whole f-hole with at least 1.28pp to
   spare (it first fails at 445), so 390 is left exactly as it was.
   COLUMN, >=768 (44% of the row x the card height): the visible slice is 150*boxW/boxH % of the
   image wide. The bridge needs posx <= 7.17% at 768, the narrowest slice (51.21% wide), and more
   room at every wider width, so 2% is the maximin: 2.52pp and 2.39pp of slack at 768.
   Appended after the base rule, which is left byte-identical; source order decides. */
@media(min-width:420px) and (max-width:767px){body.page-id-8070 .enqsec-inner-photo{background-position:50% 37.3% !important;}}
@media(min-width:768px){body.page-id-8070 .enqsec-inner-photo{background-position:2% 50% !important;}}

/* === PASS R1 (v2.125.0) -- HOMEPAGE (23) ICON+TITLE OPTICAL CENTRING.
   Reported by Samy on an iPhone: the gap LEFT of the music-stand icon is wider than the gap
   RIGHT of the last letter, so the icon+text lockup sits right of centre.
   *** THIS IS THE SAME DEFECT, THE SAME DECOMPOSITION AND THE SAME TWO DERIVED MOVES AS
   v2.41.22, WHICH CORRECTED `.ws-eyebrow` / `.smp-eyebrow`. THE HOMEPAGE WAS NEVER IN THAT
   PASS'S SCOPE: its eight icon+title pairs are page-local copies of the component (seven
   `<style>` blocks inside HTML widgets, plus the heading widget `poseybr`'s own custom CSS),
   so they kept the uncorrected geometry. *** Measured, painted ink, 8 pairs x 6 widths:

       DELTA = (L - R)/2 - H      (closes to <0.05px on every centred row)
       L = letterbox dead space left of the icon ink inside the square slot  = 10.20..13.95
       R = trailing dead space right of the last glyph (tracking + bearing)  =  2.20.. 3.95
       H = the heading's own ink-centre offset = -0.008..0.000 -- NIL on this page, unlike the
           service pages, because no homepage section heading ends in a full stop.

   Attachment 7378 is 142x320 with a full-frame alpha bbox, so `background-size:contain` in a
   48x48 slot paints 21.30x48 and leaves 13.35px of empty band on EACH side (10.57px in the
   38x38 mobile slot). The band on the icon's OUTER edge is what pushes the lockup right.
   CORRECTION 1 gives the slot the artwork's own proportions (`aspect-ratio` + unchanged
   height), collapsing both bands to zero. THE RATIO IS THE INSTRUMENT, NOT A HARDCODED WIDTH.
   CORRECTION 1b RESTORES THE VISIBLE GAP AND IS NOT OPTIONAL: the eye saw band + separation
   (13.35 + 14 = 27.35px), so `margin-right` absorbs the collapsed band, DERIVED from the same
   tokens. Measured artwork-to-text gap moved at most 1px. Without it the fix would silently
   tighten the design by 13.35px.
   CORRECTION 2 cancels R. Each lockup is `inline-flex`, so it SHRINK-WRAPS and is centred by
   its head block (`text-align:center`, or `justify-content:center` on the three wrapper
   divs); `padding-left:R` widens the box by R while its centre holds, moving the content
   RIGHT by exactly R/2.
   NET LINE WIDTH FALLS 7.4-9.6px, so wrap pressure DROPS: no line break changed at any width
   and page height is byte-identical at all six.

   *** TWO LEFT-ALIGNED LOCKUPS ARE DELIBERATELY EXCLUDED, FOR THE REASON THE v2.41.22 BLOCK
   ALREADY GIVES FOR `.sm-pr-eyebrow`: a left-aligned lockup has no centring to correct, and
   collapsing its band would MOVE ITS ICON. *** They are the homepage Process eyebrow
   (`.sm-pr-head{text-align:left}`, every width) and "Why It Matters" ABOVE 767px, which is
   left-aligned there and centred only by its own `align_mobile` at <=767. The `poseybr` rule
   below is therefore scoped to <=767 -- exactly the band in which that title is centred, and
   the band Samy was looking at.
   Selectors are prefixed `body.page-id-23` and match NOTHING on any other page (verified on
   7567 / 7702 / 7723 at all six widths, ink identical before and after). The specificity is
   deliberate: the page-local rules live in <style> blocks printed in the BODY and win on
   source order at equal weight, and `poseybr`'s Elementor custom CSS is (0,4,2).
   APPENDED AT THE TAIL per the v2.32.0 convention. Cache-bust is this file's own filemtime
   (F-6); the retired `Version:` header is NOT bumped. Full table: CHANGELOG v2.125.0. */
body.page-id-23 .sm-svc-eyebrow span,
body.page-id-23 .sw-eyebrow span,
body.page-id-23 .sm-serve-eyebrow span,
body.page-id-23 .sm-why-eyebrow,
body.page-id-23 .sm-sp-eyebrow,
body.page-id-23 .sm-pricing-eyebrow{
  --sm-eb-ico-h:48px;   /* slot height  -- unchanged by this pass */
  --sm-eb-ico-nw:142;   /* attachment 7378 intrinsic width  */
  --sm-eb-ico-nh:320;   /* attachment 7378 intrinsic height */
  --sm-eb-sep:14px;     /* the authored artwork-to-text separation */
  --sm-eb-ls:.12em;     /* this lockup's own tracking */
  /* half the letterbox band the square slot used to add on each side */
  --sm-eb-band:calc((var(--sm-eb-ico-h,48px) - var(--sm-eb-ico-h,48px) * var(--sm-eb-ico-nw,142) / var(--sm-eb-ico-nh,320)) / 2);
  /* trailing dead space: tracking + measured right side bearing */
  --sm-eb-trail:calc(var(--sm-eb-ls,.12em) + .87px);
  padding-left:var(--sm-eb-trail);
}
body.page-id-23 .sm-sp-eyebrow,
body.page-id-23 .sm-pricing-eyebrow{ --sm-eb-ls:.13em; }
body.page-id-23 .sm-svc-eyebrow span::before,
body.page-id-23 .sw-eyebrow span::before,
body.page-id-23 .sm-serve-eyebrow span::before,
body.page-id-23 .sm-why-eyebrow::before,
body.page-id-23 .sm-sp-eyebrow::before,
body.page-id-23 .sm-pricing-eyebrow::before{
  width:auto;
  height:var(--sm-eb-ico-h,48px);
  aspect-ratio:var(--sm-eb-ico-nw,142) / var(--sm-eb-ico-nh,320);
  margin-right:calc(var(--sm-eb-sep,14px) + var(--sm-eb-band));
}
@media (max-width:767px){
  body.page-id-23 .sm-svc-eyebrow span,
  body.page-id-23 .sw-eyebrow span,
  body.page-id-23 .sm-serve-eyebrow span,
  body.page-id-23 .sm-why-eyebrow,
  body.page-id-23 .sm-sp-eyebrow,
  body.page-id-23 .sm-pricing-eyebrow{ --sm-eb-ico-h:38px; --sm-eb-sep:12px; }
}
@media (max-width:767px){
  body.page-id-23 .elementor-element.elementor-element-poseybr .elementor-heading-title > span{
    --sm-eb-ico-h:48px;
    --sm-eb-ico-nw:142;
    --sm-eb-ico-nh:320;
    --sm-eb-sep:14px;
    --sm-eb-ls:.12em;
    --sm-eb-band:calc((var(--sm-eb-ico-h,48px) - var(--sm-eb-ico-h,48px) * var(--sm-eb-ico-nw,142) / var(--sm-eb-ico-nh,320)) / 2);
    --sm-eb-trail:calc(var(--sm-eb-ls,.12em) + .87px);
    padding-left:var(--sm-eb-trail);
  }
  body.page-id-23 .elementor-element.elementor-element-poseybr .elementor-heading-title > span::before{
    width:auto;
    height:var(--sm-eb-ico-h,48px);
    aspect-ratio:var(--sm-eb-ico-nw,142) / var(--sm-eb-ico-nh,320);
    margin-right:calc(var(--sm-eb-sep,14px) + var(--sm-eb-band));
  }
}
/* === PASS R2 (v2.126.0) -- LEFT-ALIGNED ICON+TITLE LOCKUPS, SITE-WIDE.
   Reported by Samy on desktop: in a left-aligned lockup the icon is INDENTED relative to the
   headline beneath it, because its box carries empty space the artwork does not fill.
   *** THIS IS THE SAME MECHANISM v2.125.0 CORRECTED FOR THE CENTRED TITLES, AND IT IS THE HALF
   THAT PASS DELIBERATELY LEFT ALONE. *** A left-aligned lockup was excluded then on the grounds
   that it has no centring to correct. That is true, and it was the wrong conclusion: the
   letterbox band still holds the ARTWORK off the text column. Samy's intent, recorded -- in a
   left-aligned lockup the icon's INKED left edge sits on the same vertical line as the inked
   left edge of the text it heads.

   CENSUS BY MEASUREMENT, 18 published surfaces x 6 widths, 1,290 icons found by TREATMENT (a
   ::before carrying a background-image, an alpha mask, or an icon-font glyph) and never by class
   name. The misaligned set is EXACTLY the music-stand PNG painted `center/contain` into a SQUARE
   slot on a LEFT-aligned lockup: 21 rendered lockups across 12 surfaces, every one reading +10
   to +15px. Everything else measured within +/-1px and is NOT touched -- the violin
   `.ws-sw-kicker` (its 42x40 slot is within 0.17px of the artwork's 250x240, so it never
   letterboxed), every alpha-mask icon (careers ticks, blog H2 piano), and the icon-font glyphs
   apart from three recorded in CHANGELOG v2.126.0 as a different mechanism.

   THE CORRECTION IS CORRECTIONS 1 AND 1b FROM v2.125.0, AND DELIBERATELY NOT CORRECTION 2.
   `padding-left` is a CENTRING move: on a centred lockup it buys R/2, but on a left-aligned one
   it would push the artwork straight back off the column it was just aligned to.
   *** THE VISIBLE GAP IS HELD, SO THE LOCKUP'S OWN TEXT MOVES LEFT WITH THE ICON. *** Holding
   the gap and freezing the eyebrow text are mutually exclusive once the ink moves left: the ink
   moves 13.35px left, so either the gap grows by 13.35px or the text follows. The gap is what
   the eye reads, so the gap is held and the lockup shifts as a unit. The HEADLINE does not move.

   *** THE PROCESS RULE IS SCOPED ON `.sm-pr-head`, THE ONE PARENT EVERY CARRIER SHARES, AND THAT
   IS NOT A STYLE CHOICE. *** Who We Are's copy of the Process block is NOT inside `.sm-page`, so
   a `.sm-page` scope -- the obvious one, and the one the shared rule at line ~1382 uses -- misses
   it silently. The dress rehearsal caught it, which is what a rehearsal is for. (0,2,2) beats
   both the shared `.sm-page .sm-pr-eyebrow::before` (0,2,1) and every page-local copy (0,1,1).
   Page-local rules print in the BODY and win on source order at equal weight, so every selector
   here is deliberately one step more specific than the rule it overrides.
   APPENDED AT THE TAIL per the v2.32.0 convention. Cache-bust is this file's own filemtime (F-6);
   the retired `Version:` header is NOT bumped. Full census and table: CHANGELOG v2.126.0. */

/* --- "Start Your Project" (`.sm-enqi-eyebrow`) -- before-footer 7292 + 7603, ELEVEN surfaces */
body .sm-enqi-eyebrow{
  --sm-eb-ico-h:48px;   /* slot height -- unchanged by this pass */
  --sm-eb-ico-nw:142;   /* attachment 7378 intrinsic width  */
  --sm-eb-ico-nh:320;   /* attachment 7378 intrinsic height */
  --sm-eb-sep:14px;     /* the authored artwork-to-text separation */
  --sm-eb-band:calc((var(--sm-eb-ico-h,48px) - var(--sm-eb-ico-h,48px) * var(--sm-eb-ico-nw,142) / var(--sm-eb-ico-nh,320)) / 2);
}
body .sm-enqi-eyebrow::before{
  width:auto;
  height:var(--sm-eb-ico-h,48px);
  aspect-ratio:var(--sm-eb-ico-nw,142) / var(--sm-eb-ico-nh,320);
  margin-right:calc(var(--sm-eb-sep,14px) + var(--sm-eb-band));
}

/* --- "The Process" (`.sm-pr-eyebrow`) -- home, five service pages, Who We Are (SEVEN) */
body .sm-pr-head .sm-pr-eyebrow{
  --sm-eb-ico-h:48px;
  --sm-eb-ico-nw:142;
  --sm-eb-ico-nh:320;
  --sm-eb-sep:14px;
  --sm-eb-band:calc((var(--sm-eb-ico-h,48px) - var(--sm-eb-ico-h,48px) * var(--sm-eb-ico-nw,142) / var(--sm-eb-ico-nh,320)) / 2);
}
body .sm-pr-head .sm-pr-eyebrow::before{
  width:auto;
  height:var(--sm-eb-ico-h,48px);
  aspect-ratio:var(--sm-eb-ico-nw,142) / var(--sm-eb-ico-nh,320);
  margin-right:calc(var(--sm-eb-sep,14px) + var(--sm-eb-band));
}

/* --- "The Studio" and "The Expert Behind the Score" (`.ww-eyebrow`) -- Who We Are.
       NOTE: this carrier's authored separation is 16px, not 14px. Read it, never assume it. */
body.page-id-7702 .ww-eyebrow{
  --sm-eb-ico-h:48px;
  --sm-eb-ico-nw:142;
  --sm-eb-ico-nh:320;
  --sm-eb-sep:16px;
  --sm-eb-band:calc((var(--sm-eb-ico-h,48px) - var(--sm-eb-ico-h,48px) * var(--sm-eb-ico-nw,142) / var(--sm-eb-ico-nh,320)) / 2);
}
body.page-id-7702 .ww-eyebrow::before{
  width:auto;
  height:var(--sm-eb-ico-h,48px);
  aspect-ratio:var(--sm-eb-ico-nw,142) / var(--sm-eb-ico-nh,320);
  margin-right:calc(var(--sm-eb-sep,16px) + var(--sm-eb-band));
}

/* All three carriers step down to a 38px slot and a 12px separation at the same breakpoint. */
@media (max-width:767px){
  body .sm-enqi-eyebrow,
  body .sm-pr-head .sm-pr-eyebrow,
  body.page-id-7702 .ww-eyebrow{ --sm-eb-ico-h:38px; --sm-eb-sep:12px; }
}

/* --- "Why It Matters" (heading widget `poseybr`, home) -- LEFT-aligned ABOVE 767 ONLY.
       At <=767 its own `align_mobile` centres it and v2.125.0 corrected it there, with the
       centring `padding-left`. That block is untouched; this one starts where it stops. */
@media (min-width:768px){
  body.page-id-23 .elementor-element.elementor-element-poseybr .elementor-heading-title > span{
    --sm-eb-ico-h:48px;
    --sm-eb-ico-nw:142;
    --sm-eb-ico-nh:320;
    --sm-eb-sep:14px;
    --sm-eb-band:calc((var(--sm-eb-ico-h,48px) - var(--sm-eb-ico-h,48px) * var(--sm-eb-ico-nw,142) / var(--sm-eb-ico-nh,320)) / 2);
  }
  body.page-id-23 .elementor-element.elementor-element-poseybr .elementor-heading-title > span::before{
    width:auto;
    height:var(--sm-eb-ico-h,48px);
    aspect-ratio:var(--sm-eb-ico-nw,142) / var(--sm-eb-ico-nh,320);
    margin-right:calc(var(--sm-eb-sep,14px) + var(--sm-eb-band));
  }
}

/* ---------- COUNTRY SEARCH BOX ON THE THREE ENQUIRY FORMS (PASS DC, v2.135.0) ----------
   Country is a Choices.js dropdown with search ON (Careers' list and config); every
   other enquiry dropdown keeps search OFF. The dropdown itself is styled by each form's
   page-local FIX 4 block; this styles only the search box it opens with. 16px, not
   Careers' 15px: the enquiry forms keep a 16px floor on textual fields (iOS no-zoom).
   (0,4,0) because choices.min.css is linked in the page BODY and its own
   `.choices[data-type*=select-one] .choices__input` (0,3,0) would win a tie. */
.elementor-element-enqform .elementor-field-type-select .choices .choices__input--cloned,
.elementor-element-inqform .elementor-field-type-select .choices .choices__input--cloned,
.elementor-element-smform .elementor-field-type-select .choices .choices__input--cloned{font-family:'Manrope',sans-serif;font-size:16px;line-height:1.5;color:#1a1712;padding:10px 16px;background:#faf6ef;border-bottom:1px solid #d8c8ac;}
.elementor-element-enqform .elementor-field-type-select .choices .choices__input--cloned::placeholder,
.elementor-element-inqform .elementor-field-type-select .choices .choices__input--cloned::placeholder,
.elementor-element-smform .elementor-field-type-select .choices .choices__input--cloned::placeholder{color:#7a6a52;opacity:1;}


/* ==========================================================================
   CAREERS PHONE NUMBER -- COUNTRY CODE SELECTOR (PASS EK, DESIGN.md v2.137.0)
   intl-tel-input 29.5.3, self-hosted in vendor/intl-tel-input/29.5.3/ and
   loaded on /careers/ ONLY, from the careerscss widget. The input keeps the
   `.careers-form` field rules (border, 52px, 16px Manrope); these rules fit the
   code button and its list to the Careers Choices dropdown. The list is page
   elements (never a native select); on phones it opens as the library's
   full-screen popup (`.sm-iti-pop`, outside the form), styled the same way.
   Search box and names at 16px: iOS does not zoom a 16px field. The search
   box's side padding is restated because a theme `input[type=search]` rule
   outranks the library's own (the text ran under the magnifier).
   ========================================================================== */
.careers-form .sm-iti,.sm-iti-pop{--iti-border-color:#d8c8ac;--iti-hover-color:#f0e3cc;--iti-icon-color:#7a5c2e;--iti-spacer-horizontal:12px;--iti-country-selector-bg:#fff;}
.careers-form .sm-iti{display:block;width:100%;}
.careers-form .sm-iti .iti__tel-input{width:100%;}
.careers-form .sm-iti .iti__selected-country{font-family:'Manrope',sans-serif;font-size:16px;line-height:1.5;color:#1a1712;border-radius:4px 0 0 4px;}
.careers-form .sm-iti .iti__selected-country-primary{padding:0 6px 0 16px;}
.careers-form .sm-iti .iti__selected-dial-code{font-family:'Manrope',sans-serif;font-size:16px;color:#1a1712;margin-left:6px;}
.careers-form .sm-iti .iti__selected-country:focus-visible{outline:2px solid #7a5c2e;outline-offset:-2px;}
.careers-form .sm-iti .iti__country-selector,.sm-iti-pop .iti__country-selector{font-family:'Manrope',sans-serif;border:1px solid #d8c8ac;border-radius:0 0 4px 4px;background:#fff;box-shadow:0 12px 32px rgba(122,92,46,.18);z-index:999;}
.careers-form .sm-iti .iti__search-input,.sm-iti-pop .iti__search-input{font-family:'Manrope',sans-serif;font-size:16px;line-height:1.5;color:#1a1712;background-color:#faf6ef;padding:10px 39px 10px 41px;border-radius:0;}
.careers-form .sm-iti .iti__search-input:focus-visible,.sm-iti-pop .iti__search-input:focus-visible{outline:2px solid #7a5c2e;outline-offset:-2px;}
.careers-form .sm-iti .iti__search-input::placeholder,.sm-iti-pop .iti__search-input::placeholder{color:#7a6a52;opacity:1;}
.careers-form .sm-iti .iti__country,.sm-iti-pop .iti__country{font-family:'Manrope',sans-serif;font-size:16px;color:#1a1712;padding-top:11px;padding-bottom:11px;}
.careers-form .sm-iti .iti__country.iti__highlight,.sm-iti-pop .iti__country.iti__highlight{background:#f0e3cc;}
.careers-form .sm-iti .iti__dial-code,.sm-iti-pop .iti__dial-code{color:#7a6a52;}


/* ==========================================================================
   FORM INLINE MESSAGES -- assets/js/sm-form-messages.js (PASS FV, DESIGN.md v2.138.0)
   The four governed forms: Contact smform 7079, enqform 7292, inqform 7603, Careers careersForm 7574.
   The script sets these classes only after a blocked Continue / Send; without it nothing here matches.
   Elementor's own server-side field error (.elementor-help-inline) is given the identical look.
   Tokens only: error #ba1a1a, Manrope body-sm 14px / 1.6 / 400; focus = the site's 2px gold #7a5c2e ring.
   ========================================================================== */
:is(.elementor-element-smform,.elementor-element-enqform,.elementor-element-inqform,.elementor-element-careersForm) .elementor-field-group > .sm-fv-msg,
:is(.elementor-element-smform,.elementor-element-enqform,.elementor-element-inqform,.elementor-element-careersForm) .elementor-field-group .elementor-message.elementor-help-inline{display:block;flex:0 0 100%;width:100%;max-width:100%;box-sizing:border-box;margin:6px 0 0;padding:0;font-family:'Manrope',sans-serif;font-size:14px;font-weight:400;line-height:1.6;letter-spacing:normal;text-transform:none;text-align:left;color:#ba1a1a;overflow-wrap:anywhere;}
:is(.elementor-element-smform,.elementor-element-enqform,.elementor-element-inqform,.elementor-element-careersForm) .elementor-field-group .elementor-message.elementor-help-inline::before{display:none;}
:is(.elementor-element-smform,.elementor-element-enqform,.elementor-element-inqform,.elementor-element-careersForm) .sm-fv-bad:not([type=radio]):not([type=checkbox]){border-color:#ba1a1a!important;box-shadow:inset 0 0 0 1px #ba1a1a!important;}
:is(.elementor-element-smform,.elementor-element-enqform,.elementor-element-inqform,.elementor-element-careersForm) input.sm-fv-bad:is([type=radio],[type=checkbox]){outline:2px solid #ba1a1a;outline-offset:2px;}
:is(.elementor-element-smform,.elementor-element-enqform,.elementor-element-inqform,.elementor-element-careersForm) .sm-fv-invalid :is(input,textarea,.choices):focus{outline:2px solid #7a5c2e!important;outline-offset:2px!important;}
:is(.elementor-element-smform,.elementor-element-enqform,.elementor-element-inqform,.elementor-element-careersForm) .sm-fv-live{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
/* No neighbour jump: a message that wraps to two lines (the half-width columns at 768-820) would make Elementor stretch the
   field beside it. While a message shows, Contact's and both enquiry forms' field groups pack to the top instead. Measured
   (PASS FV): none of their groups is stretched in the normal state at any width, so this changes nothing else. Careers is
   left out on purpose: two of its rows are stretched by design in the normal state. */
:is(.elementor-element-smform,.elementor-element-enqform,.elementor-element-inqform) form:has(.sm-fv-msg, .elementor-help-inline) .elementor-field-group{align-content:flex-start;}

/* ==========================================================================
   FORM FILE LIST -- assets/js/sm-form-messages.js 1.3.0 (PASS FX, DESIGN.md v2.154.0)
   The quote forms' Source Files field (Contact smform, enqform, inqform): each "Choose Files" adds to a list of the chosen
   files, one row per file with a Remove button. The script draws the list only once a file is chosen; without it nothing here
   matches. The "You can attach up to 3 files." note uses the inline-message rule above (.sm-fv-msg).
   Tokens only: text #1a1712, rule #e6d9c2, gold #7a5c2e (links and the 2px focus ring), Manrope body-sm 14px / 1.6.
   ========================================================================== */
:is(.elementor-element-smform,.elementor-element-enqform,.elementor-element-inqform) .elementor-field-group > .sm-files{display:block;flex:0 0 100%;width:100%;max-width:100%;box-sizing:border-box;list-style:none;margin:8px 0 0;padding:0;font-family:'Manrope',sans-serif;font-size:14px;font-weight:400;line-height:1.6;color:#1a1712;text-align:left;}
:is(.elementor-element-smform,.elementor-element-enqform,.elementor-element-inqform) .sm-files > .sm-files__item{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:6px 0;border-top:1px solid #e6d9c2;list-style:none;}
:is(.elementor-element-smform,.elementor-element-enqform,.elementor-element-inqform) .sm-files > .sm-files__item:last-child{border-bottom:1px solid #e6d9c2;}
:is(.elementor-element-smform,.elementor-element-enqform,.elementor-element-inqform) .sm-files .sm-files__name{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;}
:is(.elementor-element-smform,.elementor-element-enqform,.elementor-element-inqform) .sm-files button.sm-files__remove{flex:0 0 auto;display:inline-block;width:auto;min-width:0;min-height:24px;margin:0;padding:2px 0;background:none;border:0;border-radius:0;box-shadow:none;transform:none;font-family:'Manrope',sans-serif;font-size:14px;font-weight:600;line-height:1.6;letter-spacing:normal;text-transform:none;color:#7a5c2e;text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
:is(.elementor-element-smform,.elementor-element-enqform,.elementor-element-inqform) .sm-files button.sm-files__remove:is(:hover,:focus,:active){background:none;border:0;box-shadow:none;transform:none;color:#5a4322;}
:is(.elementor-element-smform,.elementor-element-enqform,.elementor-element-inqform) .sm-files button.sm-files__remove:focus-visible{outline:2px solid #7a5c2e;outline-offset:2px;}

/* ==========================================================================
   CAREERS FORM SECTION -- ALWAYS VISIBLE ON PHONES (PASS WU, DESIGN.md v2.140.0)
   careerscss's entrance reveal sets the whole form section (careersFormSec) to inline opacity 0 + translateY(28px) until an
   IntersectionObserver sees 15% of it. On a phone the section is ~4,200px tall, so a 664px screen shows at most ~15.7% of
   it: one growth step from never revealing. Below 768px it is simply shown, with no reveal; from 768px up nothing changes.
   ========================================================================== */
@media (max-width:767px){.elementor-element-careersFormSec.sm-reveal{opacity:1!important;transform:none!important;}}

/* ==========================================================================
   THE SPEAKER GLYPH, SITE-WIDE -- ITS BUILT-IN SIDE SPACE, CANCELLED WHERE IT SHOWS (PASS SP, DESIGN.md v2.148.0;
   replaces the homepage-only rule of v2.147.0, whose card value it keeps)
   The soudify-icon speaker glyph (U+E02D) is drawn CENTRED in its em box: ink 190..811 of a 1001 advance, where every sibling
   glyph runs ~edge to edge (ink from 18-29 units). Two contexts show it, and each gets one correction:
   (1) ICON ABOVE A HEADING, LEFT-ALIGNED (homepage Core Services card, Who We Are card): pull the icon left by the bearing
       plus the heading's own overhang (both headings start "AI", whose A inks ~0.33px LEFT of its box where the siblings'
       O and M ink ~1px right): 190/1001 em + ~0.33px/40px = .198em. Inked edge on inked edge, as on every sibling card.
   (2) ICON INLINE BEFORE TEXT IN A CENTRED LINE (Portfolio section headings and "More" links): give the glyph sibling-sized
       bearings, (190 - 21.75)/1001 = .168em trimmed from each side: the box is set to 1 - 2 x .168 = .664em and the glyph is
       pulled in by text-indent. The carrier's own margin is untouched, so its gap then equals the siblings' and the line
       centres on the ink, as theirs do. *** An explicit width, NOT negative margins on the ::before: WebKit subtracts only
       one of two negative inline margins from an inline-block's shrink-to-fit width, so that form half-corrects in Safari. ***
   (3) ICON IN A ROW WITH A SHARED TEXT COLUMN (homepage pricing table, Pricing and service-page pricing cards, Related
       Services): N02 OPTION 1 (Samy, 2026-09-29; reverses the "left centred in its slot" decision of 2026-09-27): the same
       .664em box and -.168em indent as (2), so the speaker's inked edge and ink-to-text gap equal its siblings'; that row's
       text moves ~.34em left of the shared column, by decision. See DESIGN.md v2.156.0 (PASS SI).
   ========================================================================== */
body.home .sm-services .sm-card-ico.soudify-icon-speaker,
.ww-card .ww-card-ic.ww-ic-spk{margin-left:-.198em;}
.smp-sec-ico.soudify-icon-speaker,
.smp-more-ico.soudify-icon-speaker{width:.664em;text-indent:-.168em;}
.sm-pricing-ic.soudify-icon-speaker,
.pp-ic.pp-ic-speaker,
.smp-related__ico.soudify-icon-speaker{width:.664em;text-indent:-.168em;white-space:nowrap;overflow:visible;}

/* ==========================================================================
   PASS DF (DESIGN.md v2.155.0, 2026-09-29) -- FOUR ADDITIONS, EACH REVERSIBLE BY DELETING ITS OWN PART OF THIS BLOCK
   --------------------------------------------------------------------------
   1. HOMEPAGE HERO HANDOFF. The hero section carries Elementor's background overlay twice: on the section's own ::before
      (BELOW the video container) and on the video container's ::before (z-index 1, ABOVE the video). The video and its
      poster therefore sit under ONE scrim, but whenever the <video> paints nothing the visitor sees the section's still
      under BOTH scrims -- darker. That happens before the poster has painted (Chrome and WebKit: the CSS background
      arrives first) and again in WebKit from the moment sm-bgvideo.js calls load() until the first frame (WebKit stops
      painting the poster while it loads): Samy's "poster darker than the video" and "the poster returns".
      THE FIX: the video container inherits the section's background, so it carries the still above the section scrim
      and below its own: the layer the visitor sees through a frameless <video> is the same picture under the same single
      scrim. The section's fallback still is now ScoreMasters_Header_poster.jpg (post 23, PASS DF), a graded copy of the
      old one (per-channel power 0.932 / 0.938 / 0.946 on the master), graded to the midpoint between VM Chrome's and VM
      WebKit's rendering of frame 0, so the poster-to-video step is about -2 luma in Chrome and +2 in WebKit instead of
      +0.7 and +4.5 (PASS HF's recorded tolerance: 3.7). One file serves the section, this container and the poster
      (sm-bgvideo.js takes the nearest ancestor background), so no byte is added to the page. The still-only states
      (reduced motion, Save-Data, a refused autoplay) hide the container (.sm-bgv-still): the still under the section
      scrim, as before.
   2. C11 (1): THE PRICING-CARD ICON MAP ON THE FIVE SERVICE PAGES. The cards' .pp-ic spans were empty (content none,
      0 x 0) because the glyph map lived only in Pricing (7652)'s page CSS. The same declarations, scoped to the card
      head, so the service pages' cards match Pricing's; identical values where Pricing already has them.
   3. C11 (2): THE HOVER-LIFT HIT-KEEPER, SITE-WIDE. The G-6c keeper of the three form buttons (above), applied to every
      other lifting pill and card whose box can carry it: an invisible ::before over the element counter-translates by
      the lift distance on hover, with the element's own transition (inherited), so the resting box stays a hit target
      and a cursor resting 1-2 px inside the bottom edge cannot re-enter the hover loop. On the one card with a link
      inside (.smp-card) the keeper sits under the content (z-index -1; the hover transform makes the card a stacking
      context), so the link stays clickable. The blog-index cards take the same effect from their wrapper: each card is
      the only child of an <article> of exactly its size, which does not move, so hovering the wrapper holds the lift.
      NOT CARRIED (their own overflow:hidden clips anything below their box, and none has a same-size wrapper): the
      homepage Core Services card (.sm-card), .ws-gallery__item and the .ws-ex-audio / .ws-ex-doc figures. See DESIGN.md.
   4. C22: THE HEADER IS 78 PX AT EVERY WIDTH. From 1025 px up the "Let's Collaborate" column (4e208ee) sets the header
      row's height when its pill wraps to two lines (62 px, about 1025-1205 px wide): the bar measured 82 px at 1100 and
      1200 over the 78 px the page reserves, and the first element sat 4 px under it. -2 px block margins take the column
      out of the row-height calculation by exactly the difference (62 - 4 = 58 = the logo); a one-line pill (42 px) and the
      logo are untouched, so nothing moves at any other width.
   ========================================================================== */
body.home .elementor-element-2ccd8f6 > .elementor-background-video-container{background:inherit;}

.sm-page .pp-card-top .pp-ic{font-family:"soudify-icon"!important;line-height:1;flex:0 0 auto;display:inline-block;}
.sm-page .pp-card-top .pp-ic::before{font-family:"soudify-icon"!important;}
.sm-page .pp-card-top .pp-ic-music::before{content:"\e01d";}
.sm-page .pp-card-top .pp-ic-songwriter::before{content:"\e02c";}
.sm-page .pp-card-top .pp-ic-micro2::before{content:"\e019";}
.sm-page .pp-card-top .pp-ic-electric::before{content:"\e00b";}
.sm-page .pp-card-top .pp-ic-speaker::before{content:"\e02d";}

.elementor-38 .elementor-global-7048 .elementor-button,
.elementor-23 .elementor-element-hctaprim .elementor-button,.elementor-23 .elementor-element-posctagw .elementor-button,
.sm-cband .cb-item,.sm-cband .cb-name,.sm-serve-card,.sm-pr-cta,.sm-ftr-sub__btn,.sm-ftr-social a,
.elementor .pp-btn,.sm-page .smp-btn,.sm-page .smp-card,.careers-form .elementor-button,.ww-card,.ws-lightbox__pdf{position:relative;}
.elementor-38 .elementor-global-7048 .elementor-button::before,
.elementor-23 .elementor-element-hctaprim .elementor-button::before,.elementor-23 .elementor-element-posctagw .elementor-button::before,
.sm-cband .cb-item::before,.sm-cband .cb-name::before,.sm-serve-card::before,.sm-pr-cta::before,.sm-ftr-sub__btn::before,.sm-ftr-social a::before,
.elementor .pp-btn::before,.sm-page .smp-btn::before,.sm-page .smp-card::before,.careers-form .elementor-button::before,.ww-card::before,.ws-lightbox__pdf::before{
  content:'';position:absolute;left:0;right:0;top:0;bottom:0;transform:none;transition:inherit;
}
.sm-page .smp-card::before{z-index:-1;}
/* bordered elements: the ::before's containing block is the PADDING box, so it is pulled out by the border width to cover the
   border box (measured: 1 px short, a cursor 1 px inside the bottom edge still oscillated). */
.sm-page .smp-card::before,.sm-serve-card::before,.ww-card::before{top:-1px;right:-1px;bottom:-1px;left:-1px;}
.sm-page .smp-btn--ghost::before{top:-2px;right:-2px;bottom:-2px;left:-2px;}
.sm-ftr-sub__btn:hover::before,.ws-lightbox__pdf:hover::before{transform:translateY(1px);}
.elementor-38 .elementor-global-7048 .elementor-button:hover::before,
.elementor-23 .elementor-element-hctaprim .elementor-button:hover::before,.elementor-23 .elementor-element-posctagw .elementor-button:hover::before,
.sm-cband .cb-item:hover::before,.sm-cband .cb-name:hover::before,.sm-pr-cta:hover::before,.sm-ftr-social a:hover::before,
.elementor .pp-btn:hover::before,.sm-page .smp-btn:hover::before,.careers-form .elementor-button:hover::before{transform:translateY(2px);}
.sm-serve-card:hover::before,.sm-page .smp-card:hover::before,.ww-card:hover::before{transform:translateY(3px);}
@media (prefers-reduced-motion:reduce){.sm-page .smp-card:hover::before{transform:none;}}
body.blog .sm-arch-list .elementor-post:hover > .elementor-post__card,
body.category .sm-arch-list .elementor-post:hover > .elementor-post__card,
body.search .sm-arch-list .elementor-post:hover > .elementor-post__card{
  border-color:#7a5c2e;box-shadow:0 8px 40px rgba(122,92,46,.10);transform:translateY(-2px);
}
body.blog .sm-arch-list .elementor-post:hover > .elementor-post__card .elementor-post__title a,
body.category .sm-arch-list .elementor-post:hover > .elementor-post__card .elementor-post__title a,
body.search .sm-arch-list .elementor-post:hover > .elementor-post__card .elementor-post__title a{color:#7a5c2e;}
@media (prefers-reduced-motion:reduce){
  body.blog .sm-arch-list .elementor-post:hover > .elementor-post__card,
  body.category .sm-arch-list .elementor-post:hover > .elementor-post__card,
  body.search .sm-arch-list .elementor-post:hover > .elementor-post__card{transform:none;}
}

@media (min-width:1025px){
  .sm-header .elementor-element-4e208ee{margin-top:-2px;margin-bottom:-2px;}
}

/* ==========================================================================
   404 AND SEARCH RESULTS -- THEME BUILDER DOCUMENTS (C17)   (added v2.157.0, PASS NP)
   Scope: body.error404 + the 404 document's own `.sm-nf-*` classes, and
   body.search + the search document's `.sm-srch-*` classes. The search page's
   heading, column and result cards are the BLOG INDEX's (`.sm-arch-*`), which
   body.search joins by selector in the BLOG PASS H block above; only what the
   index never needed is here: a card with no image, badge or date, the
   no-results block and the page numbers. Nothing here matches any other page.
   ========================================================================== */

/* --- the page ground: the kit's cool grey would show around the shell ---- */
body.error404{background-color:#f7f1ea;}

/* --- 404: one centred column --------------------------------------------- */
body.error404 #page .site-content.site-content{margin-top:0;}
body.error404 .sm-nf-shell{padding:96px 32px 120px;}
body.error404 .sm-nf-col{max-width:760px;width:100%;margin-inline:auto;text-align:center;align-items:center;}
body.error404 .sm-nf-col > .elementor-widget{width:100%;}

/* the eyebrow: DESIGN.md Section Label, centred, so the 28x2 gold rule sits
   on both sides */
body.error404 .sm-nf-eyebrow{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;margin:0;
  font-family:'Manrope',sans-serif;font-size:13px;font-weight:700;line-height:1.2;
  letter-spacing:.14em;text-transform:uppercase;color:#7a5c2e;
}
body.error404 .sm-nf-eyebrow::before,
body.error404 .sm-nf-eyebrow::after{content:"";flex:0 0 auto;width:28px;height:2px;background:currentColor;}

/* the h1: the blog index heading's type, sentence case, as the index's is */
body.error404 .sm-nf-title{margin-top:20px;margin-block-start:20px;}
body.error404 .sm-nf-title .elementor-heading-title{
  font-family:'Playfair Display',serif;font-size:52px;font-weight:700;line-height:1.15;
  letter-spacing:-.01em;color:#1a1712;text-transform:none;margin:0;
}
body.error404 .sm-nf-text{margin-top:20px;margin-block-start:20px;}
body.error404 .sm-nf-text p{
  font-family:'Manrope',sans-serif;font-size:18px;font-weight:400;line-height:1.75;
  color:#4a4030;margin:0 auto;max-width:560px;
}

/* --- the suggested pages: one white card (Elevation, Layer 1), two columns
   of links from 768, one below. Shared by the 404 and the no-results state. */
body.error404 .sm-nf-links-w,
body.search .sm-nf-links-w{margin-top:40px;margin-block-start:40px;}
body.error404 .sm-nf-links,
body.search .sm-nf-links{
  list-style:none;margin:0 auto;padding:6px 28px;max-width:720px;box-sizing:border-box;
  display:grid;grid-template-columns:1fr 1fr;column-gap:36px;text-align:left;
  background:#ffffff;border:1px solid #d8c8ac;border-radius:4px;
}
body.search .sm-nf-links{margin-inline:0;}
body.error404 .sm-nf-links li,
body.search .sm-nf-links li{margin:0;padding:0;border-bottom:1px solid #e8ddc9;}
body.error404 .sm-nf-links li:nth-last-child(-n+2),
body.search .sm-nf-links li:nth-last-child(-n+2){border-bottom:0;}
body.error404 .sm-nf-links a,
body.search .sm-nf-links a{
  display:block;padding:14px 0;
  font-family:'Manrope',sans-serif;font-size:16px;font-weight:600;line-height:1.45;
  color:#1a1712;text-decoration:none;transition:color .2s ease;
}
body.error404 .sm-nf-links a:hover,
body.search .sm-nf-links a:hover{color:#7c1f3a;text-decoration:underline;text-underline-offset:3px;}

/* --- the two buttons: the gradient pill is `.pp-btn` (its hover, ring and
   hit-keeper are already site-wide); the outline pill is DESIGN.md's
   Secondary / Ghost Button (light sections) at `.pp-btn`'s type, with the
   2px border taken out of the padding so both pills stand the same height,
   and it lifts as the pill beside it does, with the same hit-keeper. */
body.error404 .sm-nf-btns-w{margin-top:40px;margin-block-start:40px;}
body.error404 .sm-nf-btns{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;}
body.error404 .sm-nf-btn-outline{
  position:relative;display:inline-block;box-sizing:border-box;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;letter-spacing:.08em;line-height:1.2;
  text-transform:uppercase;text-decoration:none;color:#7a5c2e;background:transparent;
  border:2px solid #7a5c2e;border-radius:9999px;padding:13px 34px;
  transition:transform .25s ease,background-color .25s ease;
}
body.error404 .sm-nf-btn-outline:hover{background-color:#f0e3cc;color:#7a5c2e;transform:translateY(-2px);}
body.error404 .sm-nf-btn-outline:focus-visible{outline:2px solid #7a5c2e;outline-offset:3px;}
body.error404 .sm-nf-btn-outline::before{content:'';position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;transform:none;transition:inherit;}
body.error404 .sm-nf-btn-outline:hover::before{transform:translateY(2px);}
body.error404 .sm-nf-btn-outline .soudify-button-clip .hover-text{color:#7a5c2e;}

/* --- search: the page-local text fix carries a script only; no box ------- */
body.search .sm-srch-fix{display:none;}

/* --- search: the no-results block shows only when nothing matched -------- */
body.search .sm-srch-none{display:none;}
body.search.search-no-results .sm-srch-none{display:flex;}
body.search.search-no-results .sm-arch-list{display:none;}
body.search .sm-srch-none{margin-top:20px;margin-block-start:20px;}
body.search .sm-srch-msg,
body.search .sm-srch-msg p{
  font-family:'Manrope',sans-serif;font-size:18px;font-weight:400;line-height:1.75;
  color:#4a4030;margin:0;max-width:640px;
}

/* --- search: a result card is title + excerpt only (no image, badge or
   date), so the text block carries the card's whole padding */
body.search .sm-arch-list .elementor-post__text{padding:24px 28px 26px;}

/* --- search: a PAGE result shows its title only. Pages carry no hand-written
   excerpt, so WordPress would build one from the page's first words (hero
   title, sub, button labels run together); the three articles' excerpts are
   hand-written (post_excerpt) and are shown. */
body.search .sm-arch-list .elementor-post.type-page .elementor-post__excerpt{display:none;}

/* --- search: the page numbers (the index has never needed them) ---------- */
body.search .sm-arch-list .elementor-pagination{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:40px;margin-block-start:40px;
  font-family:'Manrope',sans-serif;font-size:15px;font-weight:600;line-height:1;
}
body.search .sm-arch-list .elementor-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  min-width:44px;height:44px;padding:0 12px;margin:0;border-radius:9999px;
  color:#1a1712;text-decoration:none;border:1px solid transparent;
}
body.search .sm-arch-list .elementor-pagination a.page-numbers:hover{border-color:#7a5c2e;color:#7a5c2e;}
body.search .sm-arch-list .elementor-pagination .page-numbers.current{background:#7a5c2e;color:#ffffff;}
body.search .sm-arch-list .elementor-pagination .page-numbers.dots{border-color:transparent;}

/* --- tablet --------------------------------------------------------------- */
@media(max-width:1024px){
  body.error404 .sm-nf-shell{padding:72px 24px 96px;}
  body.error404 .sm-nf-title .elementor-heading-title{font-size:42px;}
}

/* --- phone ---------------------------------------------------------------- */
@media(max-width:767px){
  body.error404 .sm-nf-shell{padding:48px 16px 64px;}
  body.error404 .sm-nf-title .elementor-heading-title{font-size:34px;line-height:1.18;}
  body.error404 .sm-nf-text p,
  body.search .sm-srch-msg,
  body.search .sm-srch-msg p{font-size:17px;}
  body.error404 .sm-nf-links,
  body.search .sm-nf-links{grid-template-columns:1fr;padding:4px 20px;}
  body.error404 .sm-nf-links li:nth-last-child(2),
  body.search .sm-nf-links li:nth-last-child(2){border-bottom:1px solid #e8ddc9;}
  body.error404 .sm-nf-btns{flex-direction:column;align-items:stretch;max-width:360px;margin-inline:auto;}
  body.error404 .sm-nf-btns .pp-btn,
  body.error404 .sm-nf-btns .sm-nf-btn-outline{text-align:center;}
  body.search .sm-arch-list .elementor-post__text{padding:20px 20px 22px;}
}

@media (prefers-reduced-motion:reduce){
  body.error404 .sm-nf-btn-outline,
  body.error404 .sm-nf-links a,
  body.search .sm-nf-links a{transition:none;}
  body.error404 .sm-nf-btn-outline .soudify-button-clip .hover-text{transition:none!important;}
  body.error404 .sm-nf-btn-outline:hover .soudify-button-clip .hover-text,
  body.error404 .sm-nf-btn-outline:focus-visible .soudify-button-clip .hover-text{transform:none!important;}
}
/* ============== end 404 AND SEARCH RESULTS block (v2.157.0) ============== */


/* ==========================================================================
   PASS PF (DESIGN.md v2.159.0, 2026-09-30) -- C01: THE HOMEPAGE HERO STILL IS SERVED AS WEBP
   --------------------------------------------------------------------------
   Same pixels as attachment 8093 (PASS DF's graded still, 232,664 B JPEG), re-encoded once to WebP q85
   (150,064 B, a NEW file: 2026/09/ScoreMasters_Header_still.webp; 8093 is untouched). Elementor's post-23.css
   still names the JPEG; this rule wins on specificity, and the video container (background:inherit) and the
   poster (sm-bgvideo.js reads the computed background) follow it, so the page makes ONE still request, as before.
   Measured before the write (PASS PF): the handoff step stays inside PASS DF's tolerance in both engines at six
   widths, and the rendered poster phase differs from the JPEG by a mean of 0.6/255. REVERSIBLE: delete this block.
   ========================================================================== */
body.home .elementor-23 .elementor-element.elementor-element-2ccd8f6:not(.elementor-motion-effects-element-type-background){background-image:url("/wp-content/uploads/2026/09/ScoreMasters_Header_still.webp")}


/* ==========================================================================
   PASS KG (DESIGN.md v2.160.0, decided by Samy 2026-09-30) -- THE WHO WE SERVE CARD ARROW IS MANROPE'S "›"
   The homepage's seven Who We Serve cards (post 23, widget `wwscrd1`) end their title row with
   <span class="sm-serve-arrow" aria-hidden="true">→</span>. Neither brand face maps U+2192, so "→" was drawn by a
   system fallback. Samy chose option (c) from passKG_20260930/compare: Manrope's "›" (U+203A, in the latin subset
   every page already loads). The stored "→" stays and is hidden (font-size 0); the span draws "›" at the span's own
   22px / line-height 1, so its colour, hover colour and hover shift are unchanged. The span is aria-hidden, so
   nothing changes for assistive technology. No other "→" renders on the site (PASS KG census).
   REVERSIBLE: delete this block.
   ========================================================================== */
body.home .sm-serve-card .sm-serve-arrow{font-size:0}
body.home .sm-serve-card .sm-serve-arrow::after{content:"\203A";font-size:22px;line-height:1}



/* ==========================================================================
   PASS AX (2026-10-02, DESIGN.md v2.164.0) -- QUALITY-GATE.md MUST FIX ITEMS 3, 5, 6 AND 7 (the CSS halves).
   REVERSIBLE: delete this block. Nothing above it changed.

   3. STEP INDICATOR, BOTH MULTI-STEP FORMS (enqform 7292, inqform 7603). The inactive step's label was #a99e8d on white,
      2.63:1 at 11px. It is now the lightest brand-token text colour that reaches 4.5:1 on white: gold #7a5c2e, 6.18:1
      (outline #8c7a62 is 4.14:1, on-espresso-muted #a99e8d 2.64:1). The inactive step's number (15px bold, the same
      #a99e8d, not large text) takes the same gold; its outlined circle is unchanged. The active step keeps its near-black
      #1a1712 label and its filled gold circle, so the two stay distinct. The forms' own rules sit at (0,2,0) in their setup
      widgets (enqcss / inqcss; the number's with !important); these are (0,3,0) and touch the inactive state only.
      Form Parity Spec v1.36.
   5. LINKS TOLD APART BY COLOUR ALONE (WCAG 1.4.1) get the site's existing underline: decoration at 45% of the link's own
      colour, offset 3px -- the `.sm-page .smp-prose a` reference (v2.50.0). The footer's copyright link, the consent
      banner's Cookie Policy link, and the body links of Privacy Policy, Terms and Cookie Policy. The pages' own hover
      rules (solid underline, darker colour) are unchanged; their `text-decoration:none` at (0,1,1) in each page's style
      widget is outranked at (0,2,1).
   6. The desktop menu's parent link has no href since PASS AX (functions.php), which would give it the text cursor: it
      keeps the pointer it had.
   7. PRIVACY POLICY'S TABLE WRAPPERS are keyboard-reachable scroll regions (tabindex="0", role="region", a name, set in the
      page): their focus ring is the site's own 2px gold ring.
   ========================================================================== */
.elementor-element-enqform .e-form__indicators__indicator--state-inactive .e-form__indicators__indicator__label,
.elementor-element-inqform .e-form__indicators__indicator--state-inactive .e-form__indicators__indicator__label{color:#7a5c2e}
.elementor-element-enqform .e-form__indicators__indicator--state-inactive .e-form__indicators__indicator__number,
.elementor-element-inqform .e-form__indicators__indicator--state-inactive .e-form__indicators__indicator__number{color:#7a5c2e!important}

.elementor-element-464b062 .sm-ftr-copy-link,
.cmplz-cookiebanner .cmplz-message a{text-decoration-line:underline;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:3px}
.elementor .sm-privacy a,
.elementor .sm-terms a,
.elementor .sm-cookie a,
.elementor .sm-cookie-table a{text-decoration-line:underline;text-decoration-color:rgba(124,31,58,.45);text-underline-offset:3px}

.sm-header .elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal ul.hfe-nav-menu > li.menu-item > .hfe-has-submenu-container > a.hfe-menu-item:not([href]){cursor:pointer}

.sm-privacy .sm-table-wrap:focus-visible{outline:2px solid #7a5c2e;outline-offset:3px}



/* ==========================================================================
   PASS QC (2026-10-03, DESIGN.md v2.166.0) -- QUALITY-GATE SHOULD FIX PATTERNS 2-6, as _sm-docs/SHOULD-FIX-PATTERNS.md
   proposes them (Samy: fix before launch). Written one pattern at a time. REVERSIBLE: delete this block. Nothing above it
   changed.

   2. THE PHONE MENU BUTTON (Header 38's flyout trigger, widget 59446a9) was a 24 x 14 px tap area. It is 44 x 44 now: 15 / 10 px
      of padding round the same three-bar glyph; the negative vertical margins and the 10 px relative offset keep the glyph exactly
      where it was and the header's height unchanged (measured at 390 / 768 / 1024 on the homepage and an inner page). The focus
      ring sits 6 px inside the new box. The header template is not written.
   ========================================================================== */
.sm-header .elementor-widget-navigation-menu .hfe-nav-menu__toggle.hfe-flyout-trigger{box-sizing:border-box;width:44px;padding:15px 10px;margin:-15px 0 -15px auto;position:relative;left:10px}
.sm-header .elementor-widget-navigation-menu .hfe-nav-menu__toggle.hfe-flyout-trigger:focus-visible{outline-offset:-6px}

/* 3. THE CURRENCY TABS (USD / EUR / GBP: the homepage's .sm-pricing-tab, Pricing's and the five service pages' .pp-tab) were 38 px
      tall at phone width. 44 px minimum at every width; a button centres its label, so only the height changes. */
.elementor .sm-pricing-tab,.elementor .pp-tab{min-height:44px}

/* 4. THE FAQ CATEGORY BUTTONS (.faq-nav__btn, post 7573) were 87 x 30 px with 10 px text at 390. At 767 px and narrower: 44 px
      minimum height, label centred, 12 px text; the four still sit in one row. The page's own script takes the anchor offset
      from the row's height, so a jump still lands clear of the sticky row. */
@media (max-width:767px){.faq-nav .faq-nav__btn{min-height:44px;display:flex;align-items:center;justify-content:center;font-size:12px}}

/* 5. THE FORMS' DETAILS, the same rules reaching every form (Form Parity Spec v1.37). (a) The step labels of the two multi-step
      forms (enqform 7292, inqform 7603) are 12 px at 767 px and narrower (were 11); the label box is 41 px wide, so each still
      breaks "STEP" / "N OF 3" (widest "N OF 3" 39.6 px, narrowest "STEP N" 42.7 px, both engines), with -1.5 px side margins, so
      the circles and the lines between them do not move. (b) The line between steps takes the line token #d8c8ac (was #e0d3ba).
      (c) Helper text (.sm-help) and a dropdown's placeholder in its closed control take on-surface-variant #4a4030, 10.16:1 on
      white (the help text was #7a6a52; the placeholder #7a6a52 on Careers and #1a1712 on the other three forms). */
@media (max-width:767px){.elementor-widget-form.elementor-element-enqform .e-form__indicators__indicator__label,.elementor-widget-form.elementor-element-inqform .e-form__indicators__indicator__label{font-size:12px;width:41px;margin-left:-1.5px;margin-right:-1.5px}}
.elementor-widget-form.elementor-element-enqform .e-form__indicators__indicator__separator,.elementor-widget-form.elementor-element-inqform .e-form__indicators__indicator__separator{background:#d8c8ac}
.elementor .elementor-widget-form .sm-help{color:#4a4030}
.elementor .elementor-widget-form .choices__inner .choices__placeholder{color:#4a4030}

/* 6. CONTACT'S MAP PLACEHOLDER (Complianz's blocked-content button over widget 4a98300, shown when marketing cookies are
      declined) was Complianz's 50% black with a black (Chrome) / silver (WebKit) outset border, its text 4.46:1 on the pixels at
      1440. Espresso at 82% with a 1 px gold-light border: 11.2:1. Complianz's settings are not written; its banner is untouched. */
.cmplz-blocked-content-container .cmplz-blocked-content-notice{background-color:rgba(21,19,17,.82);border:1px solid #c9a96e}

/* PASS EC (2026-10-03, Samy): the footer newsletter block (Footer 1, container 323b506, CSS ID "newsletter") is the target of
   in-page links ("Subscribe to our newsletter" on Music Engraving & Score Preparation). The header is fixed (78 px; 66 px at
   767 px and below), so an anchor landing keeps the block clear of it -- the same offsets as .sm-page .smp-sec. */
#newsletter{scroll-margin-top:90px}
@media (max-width:767px){#newsletter{scroll-margin-top:72px}}

/* PASS N27 (2026-10-06, Samy) -- the footer newsletter: the form's message (success and error) at 16 px, its colours unchanged; the
   consent line at 14 px in on-espresso-muted (#a99e8d), its links unchanged (#ded3c3, underlined). Line heights keep their ratios
   (1.55 / 1.6). Two classes, because the widget's own <style> (one class) prints later in the page. */
.sm-ftr-sub .sm-ftr-sub__msg{font-size:16px;line-height:1.55}
.sm-ftr-sub .sm-ftr-sub__consent{font-size:14px;line-height:1.6;color:#a99e8d}