/*
Theme Name: MelloD Designs
Theme URI: https://mellod.biz
Description: Twenty Twenty-Five child theme for mellod.biz — MelloD Designs, Inc., Southwest Florida's boutique podcast and production studio. Brand tokens, Raleway + Lora typography, 8pt spacing scale. Repo-backed: source of truth lives in mellod-infra/stacks/web-platform/themes/mellod-designs/.
Author: MelloD Designs
Author URI: https://mellod.biz
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.8
Tested up to: 6.9
Requires PHP: 8.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mellod-designs
Tags: full-site-editing, block-patterns, business
*/

/* ==========================================================================
   1. BRAND TOKENS — CSS custom properties mirror theme.json presets
   ========================================================================== */

:root {
  --md-teal:        #00897B;
  --md-teal-900:    #004E46;
  --md-teal-700:    #006B60;
  --md-teal-300:    #4DB3A7;
  --md-teal-100:    #D5ECE8;
  --md-teal-050:    #EAF5F3;
  --md-deep-blue:   #1B263B;   /* H2/type only. Do not use for surfaces. */
  --md-dark-blue:   #2A3E65;   /* H3/type only. Do not use for surfaces. */
  --md-cyan:        #2C7A7B;
  --md-body:        #333333;
  --md-slate:       #2B2F3A;   /* Dark surfaces: headers, footers, masks, scrims, shadows. */
  --md-slate-rgb:   43, 47, 58;
  --md-slate-900:   #1F2229;
  --md-slate-700:   #353945;
  --md-ink-500:     #4A5A78;
  --md-ink-400:     #6B7A94;
  --md-ink-200:     #D6DCE5;
  --md-ink-100:     #EEF1F5;
  --md-ink-050:     #F6F8FA;
  --md-paper:       #FFFFFF;

  --md-font-display: "Raleway", ui-sans-serif, system-ui, sans-serif;
  --md-font-body:    "Lora", Georgia, "Times New Roman", serif;

  --md-space-1:  4px;
  --md-space-2:  8px;
  --md-space-3:  12px;
  --md-space-4:  16px;
  --md-space-5:  24px;
  --md-space-6:  32px;
  --md-space-7:  48px;
  --md-space-8:  64px;
  --md-space-9:  96px;
  --md-space-10: 128px;

  --md-radius-sm:   4px;
  --md-radius-md:   8px;
  --md-radius-lg:   14px;
  --md-radius-xl:   20px;
  --md-radius-pill: 999px;

  --md-shadow-xs: 0 1px 2px rgba(var(--md-slate-rgb),0.06);
  --md-shadow-sm: 0 2px 6px rgba(var(--md-slate-rgb),0.08);
  --md-shadow-md: 0 6px 18px rgba(var(--md-slate-rgb),0.10);
  --md-shadow-lg: 0 16px 40px rgba(var(--md-slate-rgb),0.12);

  --md-ease-out:    cubic-bezier(0.16,0.84,0.44,1);
  --md-ease-in-out: cubic-bezier(0.65,0,0.35,1);
  --md-dur-fast:    140ms;
  --md-dur-med:     220ms;
  --md-dur-slow:    360ms;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

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

body {
  font-family: var(--md-font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--md-body);
  background: var(--md-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p { text-wrap: pretty; }

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--md-font-display);
  line-height: 1.1;
  text-wrap: balance;
}

h1, .wp-block-heading h1 {
  font-size: clamp(40px, 4.2vw, 60px);
  font-weight: 800;
  color: var(--md-teal);
  letter-spacing: -0.01em;
}

h2, .wp-block-heading h2 {
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 700;
  color: var(--md-deep-blue);
  letter-spacing: -0.01em;
}

h3, .wp-block-heading h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--md-dark-blue);
}

a {
  color: var(--md-teal);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--md-dur-fast) var(--md-ease-out);
}

a:hover { color: var(--md-teal-700); }

/* ==========================================================================
   3. GLOBAL LAYOUT
   ========================================================================== */

.wp-site-blocks {
  max-width: 100%;
  overflow-x: hidden;
}

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
}

@media (max-width: 768px) {
  .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ==========================================================================
   4. HEADER — dark, sticky, blurred (per brand spec)
   ========================================================================== */

.site-header,
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(var(--md-slate-rgb), 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  height: 72px;
  display: flex;
  align-items: center;
  transition: box-shadow var(--md-dur-med) var(--md-ease-out);
}

/* Both <header> and .site-header are flex containers (for vertical-centering
   the 72px bar). Their direct children — .site-header and .md-site-header-in
   respectively — are flex items, which default to flex: 0 1 auto (shrink to
   content). Without these overrides they collapse to the natural width of
   "logo + nav", leaving the items clustered toward the left. Force full
   width so the actual layout (space-between in .md-site-header-in) spans
   edge-to-edge. */
header.wp-block-template-part > .site-header,
header.wp-block-template-part > .md-site-header,
.site-header > .md-site-header-in,
.md-site-header > .md-site-header-in {
  flex: 1 1 auto !important;
  width: 100% !important;
}

.site-header.scrolled,
header.wp-block-template-part.scrolled {
  box-shadow: var(--md-shadow-md);
}

.site-header .wp-block-site-title a,
header.wp-block-template-part .wp-block-site-title a,
.site-header .wp-block-site-logo,
header.wp-block-template-part .wp-block-site-logo {
  color: #fff;
}

/* Header logo: existing brand mark is dark-blue; on a slate header it's
   nearly invisible. Filter to white so it reads on the dark surface. */
.site-header .wp-block-site-logo img,
header.wp-block-template-part .wp-block-site-logo img,
.md-site-header .wp-block-site-logo img {
  filter: brightness(0) invert(1);
}

.site-header .wp-block-navigation,
header.wp-block-template-part .wp-block-navigation {
  font-family: var(--md-font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
}

.site-header .wp-block-navigation a,
header.wp-block-template-part .wp-block-navigation a,
.site-header .wp-block-navigation .wp-block-navigation-item__content,
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none;
  padding: 8px 12px !important;
  border-radius: var(--md-radius-md) !important;
  transition: color var(--md-dur-fast) var(--md-ease-out),
              background-color var(--md-dur-fast) var(--md-ease-out) !important;
}

/* The link text lives in a span inside the anchor — force its color too,
   since the parent theme sometimes paints the span explicitly. */
.site-header .wp-block-navigation .wp-block-navigation-item__label,
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__label {
  color: rgba(255, 255, 255, 0.85) !important;
}

.site-header .wp-block-navigation a:hover,
header.wp-block-template-part .wp-block-navigation a:hover,
.site-header .wp-block-navigation .wp-block-navigation-item__content:hover,
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content:hover .wp-block-navigation-item__label {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Active-page indicator — teal-300 on the link for the current URL.
   Covers WP's three possible markers (current-menu-item, aria-current,
   body.home for the front page) so it works regardless of which one
   WP renders for a given page. */
.site-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content,
.site-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__label,
.site-header .wp-block-navigation .current-page-ancestor .wp-block-navigation-item__content,
.site-header .wp-block-navigation .current-page-ancestor .wp-block-navigation-item__label,
.site-header .wp-block-navigation .wp-block-navigation-item__content[aria-current],
.site-header .wp-block-navigation .wp-block-navigation-item__content[aria-current] .wp-block-navigation-item__label,
body.home .site-header .wp-block-navigation a[href="/"],
body.home .site-header .wp-block-navigation a[href="/"] .wp-block-navigation-item__label,
body.home .site-header .wp-block-navigation a[href$="://localhost:8080/"],
body.home .site-header .wp-block-navigation a[href$="://localhost:8080/"] .wp-block-navigation-item__label,
body.home .site-header .wp-block-navigation a[href$="://mellod.biz/"],
body.home .site-header .wp-block-navigation a[href$="://mellod.biz/"] .wp-block-navigation-item__label {
  color: var(--md-teal-300) !important;
}
/* Don't recolor the Booking pill — it's white-on-teal regardless of state */
.site-header .wp-block-navigation .md-nav-cta .wp-block-navigation-item__content,
.site-header .wp-block-navigation .md-nav-cta .wp-block-navigation-item__label {
  color: #fff !important;
}

/* Nav flex-grows to fill space between logo and right edge so the BOOKING
   pill ends up flush against the right edge, but items inside the nav
   pack tightly to the right with minimal gap (just enough breathing room
   for the dot separators). Matches the reference: logo left, big empty
   space between logo and the items, items tight right, BOOKING at the
   far-right edge. */
.md-site-header-in > .wp-block-navigation,
.site-header .md-site-header-in > nav.wp-block-navigation {
  flex: 1 1 auto !important;
  margin-left: 32px;
}
.site-header .wp-block-navigation .wp-block-navigation__container,
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__container {
  justify-content: flex-end !important;
  flex: 1 1 auto !important;
  width: 100%;
  gap: 0 !important;
}

/* Dot separators between top-level nav items.
   Render as a small filled circle via box-shadow on a 0×0 ::before to avoid
   font-rendering inconsistencies with `·` and to sit cleanly inside the
   flex layout of the nav <ul>. */
.site-header .wp-block-navigation .wp-block-navigation-item + .wp-block-navigation-item,
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item + .wp-block-navigation-item {
  display: flex;
  align-items: center;
}
.site-header .wp-block-navigation .wp-block-navigation-item + .wp-block-navigation-item::before,
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item + .wp-block-navigation-item::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  margin: 0 2px;
  flex-shrink: 0;
  pointer-events: none;
}

/* "Booking" CTA button in nav — apply className md-nav-cta on the navigation link */
.site-header .wp-block-navigation .md-nav-cta a,
header.wp-block-template-part .wp-block-navigation .md-nav-cta a,
.site-header .wp-block-navigation a.md-nav-cta,
header.wp-block-template-part .wp-block-navigation a.md-nav-cta,
.site-header .wp-block-navigation .md-nav-cta .wp-block-navigation-item__content,
header.wp-block-template-part .wp-block-navigation .md-nav-cta .wp-block-navigation-item__content {
  background: var(--md-teal) !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 18px !important;
  margin-left: 10px;
  border-radius: var(--md-radius-md) !important;
}
.site-header .wp-block-navigation .md-nav-cta .wp-block-navigation-item__label,
header.wp-block-template-part .wp-block-navigation .md-nav-cta .wp-block-navigation-item__label {
  color: #fff !important;
}

.site-header .wp-block-navigation .md-nav-cta a:hover,
header.wp-block-template-part .wp-block-navigation .md-nav-cta a:hover,
.site-header .wp-block-navigation a.md-nav-cta:hover,
header.wp-block-template-part .wp-block-navigation a.md-nav-cta:hover,
.site-header .wp-block-navigation .md-nav-cta .wp-block-navigation-item__content:hover,
header.wp-block-template-part .wp-block-navigation .md-nav-cta .wp-block-navigation-item__content:hover {
  background: var(--md-teal-700) !important;
}

/* Suppress the dot separator inside the nav-CTA item AND for the first item
   after the CTA (so we don't get a dot floating right of the button). */
.site-header .wp-block-navigation .md-nav-cta::before,
header.wp-block-template-part .wp-block-navigation .md-nav-cta::before,
.site-header .wp-block-navigation .md-nav-cta + .wp-block-navigation-item::before,
header.wp-block-template-part .wp-block-navigation .md-nav-cta + .wp-block-navigation-item::before {
  display: none !important;
}

/* Override WP's overlayMenu="mobile" responsive container default behavior so
   inline nav items render on desktop. WP normally uses the responsive overlay
   only below ~782px; on the throwaway viewport the breakpoint detection isn't
   triggering, so we force-display the inline list at >= 769px and hide the
   hamburger trigger. */
@media (min-width: 769px) {
  .site-header .wp-block-navigation__responsive-container-open,
  header.wp-block-template-part .wp-block-navigation__responsive-container-open {
    display: none !important;
  }
  .site-header .wp-block-navigation__responsive-container,
  header.wp-block-template-part .wp-block-navigation__responsive-container {
    display: flex !important;
    background: transparent !important;
    position: static !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    inset: auto !important;
    flex: 1;
    align-items: center;
    justify-content: center;
  }
  .site-header .wp-block-navigation__responsive-close,
  header.wp-block-template-part .wp-block-navigation__responsive-close {
    display: contents !important;
  }
  .site-header .wp-block-navigation__responsive-dialog,
  header.wp-block-template-part .wp-block-navigation__responsive-dialog {
    display: contents !important;
  }
  .site-header .wp-block-navigation__responsive-container-close,
  header.wp-block-template-part .wp-block-navigation__responsive-container-close {
    display: none !important;
  }
  .site-header .wp-block-navigation__responsive-container-content,
  header.wp-block-template-part .wp-block-navigation__responsive-container-content {
    display: contents !important;
  }
  .site-header .wp-block-navigation__container,
  header.wp-block-template-part .wp-block-navigation__container {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .site-header .wp-block-navigation__container > li,
  header.wp-block-template-part .wp-block-navigation__container > li {
    display: list-item;
    list-style: none;
  }
}

/* ==========================================================================
   5. BUTTONS / CTAs
   ========================================================================== */

.wp-block-button__link,
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button.is-style-md-primary .wp-block-button__link {
  font-family: var(--md-font-display) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: var(--md-teal) !important;
  padding: 14px 24px !important;
  border-radius: var(--md-radius-md) !important;
  border: none !important;
  transition: background var(--md-dur-fast) var(--md-ease-out),
              transform var(--md-dur-fast) var(--md-ease-out) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

.wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button.is-style-md-primary .wp-block-button__link:hover {
  background: var(--md-teal-700) !important;
  color: #fff !important;
}

.wp-block-button__link:active {
  background: var(--md-teal-900) !important;
  transform: translateY(1px) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-md-ghost .wp-block-button__link {
  background: transparent !important;
  color: var(--md-teal) !important;
  border: 2px solid var(--md-teal) !important;
  padding: 12px 22px !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-md-ghost .wp-block-button__link:hover {
  background: var(--md-teal-050) !important;
  color: var(--md-teal-700) !important;
}

.wp-block-button.is-style-md-secondary .wp-block-button__link {
  background: transparent !important;
  color: var(--md-deep-blue) !important;
  border: 2px solid var(--md-deep-blue) !important;
  padding: 12px 22px !important;
}

.wp-block-button.is-style-md-secondary .wp-block-button__link:hover {
  background: var(--md-slate) !important;
  color: #fff !important;
}

.editor-styles-wrapper .wp-block-button__link {
  min-width: max-content;
}

/* ==========================================================================
   6. CARDS
   ========================================================================== */

.wp-block-group.md-card,
.md-card,
.wp-block-group.is-style-md-card {
  background: var(--md-paper);
  border: 1px solid var(--md-ink-200);
  border-radius: var(--md-radius-lg);
  box-shadow: var(--md-shadow-sm);
  padding: var(--md-space-5);
  transition: box-shadow var(--md-dur-med) var(--md-ease-out),
              transform var(--md-dur-med) var(--md-ease-out);
}

.wp-block-group.md-card:hover,
.md-card:hover,
.wp-block-group.is-style-md-card:hover {
  box-shadow: var(--md-shadow-md);
  transform: translateY(-2px);
}

.wp-block-group.md-card-feature,
.md-card-feature,
.wp-block-group.is-style-md-card-feature {
  background: var(--md-slate);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--md-shadow-lg);
}

.md-card-feature h3,
.is-style-md-card-feature h3 { color: #fff; }

/* Founder photos inside the team-grid feature card: enforce a uniform 1:1
   crop so Lloyd and Melannie's images render at matching dimensions
   regardless of the source aspect ratio. */
.md-card-feature .wp-block-image,
.md-card-feature .wp-block-image figure {
  margin: 0;
  width: 100%;
}
.md-card-feature .wp-block-image img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block;
}

/* ==========================================================================
   7. SURFACES
   ========================================================================== */

.wp-block-group.md-surface-wash,
.md-surface-wash,
.wp-block-group.is-style-md-surface-wash {
  background: var(--md-ink-050);
}

.wp-block-group.md-surface-tint,
.md-surface-tint {
  background: var(--md-teal-050);
}

.wp-block-group.md-surface-dark,
.md-surface-dark,
.wp-block-group.is-style-md-surface-dark {
  background: var(--md-slate);
  color: #fff;
}

.md-surface-dark h1,
.md-surface-dark h2,
.md-surface-dark h3,
.md-surface-dark .wp-block-heading,
.is-style-md-surface-dark h1,
.is-style-md-surface-dark h2,
.is-style-md-surface-dark h3 { color: #fff; }

/* ==========================================================================
   8. EYEBROW
   ========================================================================== */

.md-eyebrow,
p.md-eyebrow {
  font-family: var(--md-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--md-teal);
  display: block;
  margin-bottom: 12px;
  line-height: 1;
}

.md-surface-dark .md-eyebrow,
.is-style-md-surface-dark .md-eyebrow { color: var(--md-teal-300); }

/* ==========================================================================
   9. PULLQUOTE
   ========================================================================== */

.wp-block-pullquote {
  border-top: none;
  border-bottom: none;
  text-align: center;
  padding: 64px 0;
}

.wp-block-pullquote blockquote {
  font-family: var(--md-font-body);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.45;
  color: var(--md-cyan);
  border: none;
  padding: 0;
  margin: 0;
}

.wp-block-pullquote.is-style-md-brand-promise blockquote::before {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--md-teal);
  margin: 0 auto 32px;
  border-radius: 2px;
}

/* Inline quote (not pullquote) — left teal border */
.wp-block-quote blockquote,
blockquote {
  font-family: var(--md-font-body);
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  color: var(--md-cyan);
  border-left: 3px solid var(--md-teal);
  padding: 8px 0 8px 24px;
  margin: 32px 0;
}

/* ==========================================================================
   10. HERO COVER VIDEO
   ========================================================================== */

.wp-block-cover.is-hero-video .wp-block-cover__video-background {
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 768px) {
  .wp-block-cover.is-hero-video .wp-block-cover__video-background {
    display: none;
  }
}

/* ==========================================================================
   11. FOOTER — dark, four-column
   ========================================================================== */

.site-footer,
footer.wp-block-template-part {
  background: var(--md-slate);
  color: #fff;
}

.site-footer a,
footer.wp-block-template-part a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color var(--md-dur-fast) var(--md-ease-out);
}

.site-footer a:hover,
footer.wp-block-template-part a:hover { color: #fff; }

.site-footer h2,
.site-footer h3,
.site-footer .wp-block-heading,
footer.wp-block-template-part h2,
footer.wp-block-template-part h3 { color: #fff; }

/* Footer column titles — Raleway eyebrow */
.site-footer .md-footer-col-title,
footer.wp-block-template-part .md-footer-col-title {
  font-family: var(--md-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--md-teal-300);
  margin-bottom: 16px;
}

/* ==========================================================================
   12. FORMS — global resets + WPForms branding
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select,
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select {
  font-family: var(--md-font-body);
  font-size: 16px;
  color: var(--md-body);
  background: #fff;
  border: 1px solid var(--md-ink-200);
  border-radius: var(--md-radius-md);
  padding: 12px 16px;
  width: 100%;
  transition: border-color var(--md-dur-fast) var(--md-ease-out),
              box-shadow var(--md-dur-fast) var(--md-ease-out);
  outline: none;
}

input:focus,
textarea:focus,
select:focus,
.wpforms-field input:focus,
.wpforms-field textarea:focus,
.wpforms-field select:focus {
  border-color: var(--md-teal);
  box-shadow: 0 0 0 3px rgba(0, 137, 123, 0.2);
}

label,
.wpforms-field-label {
  font-family: var(--md-font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--md-deep-blue);
  display: block;
  margin-bottom: 6px;
}

.wpforms-submit,
button.wpforms-submit {
  font-family: var(--md-font-display) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: var(--md-teal) !important;
  padding: 14px 24px !important;
  border-radius: var(--md-radius-md) !important;
  border: none !important;
  cursor: pointer;
  transition: background var(--md-dur-fast) var(--md-ease-out);
}

.wpforms-submit:hover,
button.wpforms-submit:hover { background: var(--md-teal-700) !important; }

/* ==========================================================================
   12.4 WORD REPEAT — decorative oversized type
   Inline rgba colors get stripped by WP's block validator on paragraph blocks,
   so these styles must live in CSS, not inline.
   ========================================================================== */

.md-word-repeat-item,
.md-word-repeat-item.has-text-color {
  font-family: var(--md-font-display);
  font-weight: 900;
  font-size: clamp(48px, 8vw, 128px);
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.05);
}

.md-word-repeat-item.md-word-repeat-item--accent {
  color: rgba(77, 179, 167, 0.18);
}

/* ==========================================================================
   12.5 CLIENT LOGOS — film-strip cells normalize logos for dark surface
   ========================================================================== */

.md-film-strip .md-client-logo img {
  /* Most client logos are dark-on-transparent or color-on-white; on a slate
     surface, normalize them to a uniform light-monochrome treatment so the
     strip reads as a cohesive set rather than a clash of brand systems. */
  filter: brightness(0) invert(1) opacity(0.78);
  transition: opacity var(--md-dur-med) var(--md-ease-out);
}

.md-film-strip .md-client-logo:hover img {
  filter: brightness(0) invert(1) opacity(1);
}

/* ==========================================================================
   13. AMELIA BOOKING — wrap in branded surface
   ========================================================================== */

.amelia-step-booking-container,
.amelia-app-booking,
[class^="ameliacontainer"],
[class*=" ameliacontainer"] {
  font-family: var(--md-font-body);
}

/* Booking-page wrapper around the Amelia widget. Amelia's step-booking
   widget renders ~600px wide internally, so the default alignwide card
   (1280px) leaves a vast empty rectangle to its right. Cap the card to
   880px so the chrome hugs the widget. */
.md-amelia-wrap.wp-block-group,
.md-amelia-wrap {
  max-width: 880px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================================================
   13.5 PATTERN STYLES — homepage mockup
   Class names mirror the reference mockup (Redesign Mockup.html) so each
   pattern can apply them via wp:group/wp:cover className. Only translation
   from mockup is var name normalization (--teal → --md-teal etc.).
   ========================================================================== */

/* --- Type helpers used across sections --- */
.md-section-h2 {
  font-family: var(--md-font-display);
  font-weight: 800;
  font-size: clamp(28px, 2.8vw, 40px);
  color: var(--md-deep-blue);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.md-section-sub {
  font-family: var(--md-font-body);
  font-size: 18px;
  color: var(--md-ink-500);
  line-height: 1.65;
  margin: 0 0 40px;
}
.md-on-dark .md-section-h2 { color: #fff; }
.md-on-dark .md-section-sub { color: rgba(255, 255, 255, 0.65); }
.md-eyebrow--light { color: var(--md-teal-300) !important; }

/* --- Anchor-as-button helper (for pure-anchor CTAs in patterns) --- */
.md-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--md-font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 13px 22px;
  border-radius: var(--md-radius-md);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--md-dur-fast) var(--md-ease-out),
              transform var(--md-dur-fast) var(--md-ease-out),
              border-color var(--md-dur-fast) var(--md-ease-out);
}
.md-btn--primary { color: #fff; background: var(--md-teal); }
.md-btn--primary:hover { background: var(--md-teal-700); color: #fff; }
.md-btn--ghost {
  color: var(--md-teal);
  border: 2px solid var(--md-teal);
  background: transparent;
  padding: 11px 20px;
}
.md-btn--ghost:hover { background: var(--md-teal-050); }
.md-btn--outline-white {
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  padding: 11px 20px;
}
.md-btn--outline-white:hover { border-color: #fff; color: #fff; }
.md-btn--lg { font-size: 16px; padding: 16px 28px; }

/* On a dark hero, force WP outline-style buttons to white-border treatment */
.wp-block-cover.is-hero-video .wp-block-button.is-style-outline .wp-block-button__link {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  background: transparent !important;
}
.wp-block-cover.is-hero-video .wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: #fff !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #fff !important;
}

/* ════════════════
   FULL-WIDTH SECTION SPACING — zero inter-section margins so the
   homepage flows edge-to-edge per the mockup. WP's default block-gap
   (theme.json sets var(--wp--preset--spacing--5) = 24px) adds visible
   white slivers between alignfull blocks AND between the top-level
   <header><main><footer> elements at the body layout level. Suppress
   both: zero all margins on patterns we ship, and zero block-gap at
   the wp-site-blocks scope so header→main→footer sit tight. */
.alignfull.hero,
.alignfull.brand-statement,
.alignfull.intro-section,
.alignfull.services-section,
.alignfull.specs-section,
.alignfull.testimonial-section,
.alignfull.clients-section,
.alignfull.faq-section,
.alignfull.booking-section,
.alignfull.livestream-section,
.alignfull.page-banner {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Zero block-gap at the body / site-blocks layer so the sticky header
   sits flush against the hero with no inherited margin between them. */
.wp-site-blocks {
  --wp--style--block-gap: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
main.wp-block-group,
main.wp-block-group > .entry-content,
main.wp-block-group .wp-block-post-content {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
main.wp-block-group .wp-block-post-content > :first-child {
  margin-top: 0 !important;
}

/* ════════════════
   HERO
   ════════════════ */
.wp-block-cover.hero,
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--md-slate);
}
.wp-block-cover.hero .wp-block-cover__inner-container,
.hero > .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.hero-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 48px 60px;
}
.hero-eyebrow {
  font-family: var(--md-font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--md-teal-300) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 22px;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--md-teal-300);
  border-radius: 2px;
}
.hero h1.hero-h1,
.hero h1 {
  font-family: var(--md-font-display);
  font-weight: 900;
  font-size: clamp(52px, 5.5vw, 80px);
  color: #fff;
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
  text-wrap: balance;
}
.hero-sub {
  font-family: var(--md-font-body);
  font-size: 19px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78) !important;
  max-width: 640px;
  margin: 0 auto 36px !important;
}
.hero-ctas {
  display: flex !important;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 52px !important;
}
/* Play badge (bottom-right). Override WP's auto-generated layout gap and
   has-global-padding so the empty .hero-play-btn group renders as a tight
   36×36 teal circle instead of being inflated by root-padding. */
.hero-play,
.wp-block-group.hero-play {
  position: absolute !important;
  bottom: 32px;
  right: 48px;
  z-index: 4;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--md-radius-pill);
  padding: 10px 18px 10px 14px !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
}
.hero-play .hero-play-btn,
.wp-block-group.hero-play-btn {
  width: 36px !important;
  height: 36px !important;
  background: var(--md-teal) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
  padding: 0 !important;
  margin: 0 !important;
}
.hero-play-btn::before {
  content: '▶';
  font-size: 12px;
  color: #fff;
  margin-left: 2px;
  line-height: 1;
}
.hero-play .hero-play-text-stack,
.wp-block-group.hero-play-text-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.hero-play-text,
p.hero-play-text {
  font-family: var(--md-font-display);
  font-weight: 700;
  font-size: 12px;
  color: #fff !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 !important;
  line-height: 1.2;
}
.hero-play-sub,
p.hero-play-sub {
  font-family: var(--md-font-display);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55) !important;
  letter-spacing: 0.04em;
  margin: 2px 0 0 !important;
  line-height: 1.2;
}

/* Dashed video-frame decoration: faint 16:9 box centered behind the hero
   text, with a soft inner radial glow (the "white gradient" the user
   wants to see backing the hero content). Sits BETWEEN the cover video
   and the hero-content (z-index 1 → frame, 2 → content). */
.hero-video-frame,
.wp-block-group.hero-video-frame {
  position: absolute !important;
  inset: 0;
  z-index: 1;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none;
  margin: 0 !important;
  padding: 0 !important;
}
.hero-video-frame-inner,
.wp-block-group.hero-video-frame-inner {
  width: 70%;
  max-width: 1080px;
  aspect-ratio: 16 / 9;
  max-height: 70vh;
  border: 2px dashed rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  margin: 0 !important;
  padding: 0 !important;
  /* Soft inner glow: explicit ellipse sized 55% × 75% so the gradient is
     focused around the hero text rather than sprawling across the full
     16:9 box. Brightness bumped up so the glow reads against the video
     + 70% dim overlay underneath. */
  background: radial-gradient(
    ellipse 55% 75% at center,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.08) 35%,
    rgba(255, 255, 255, 0.02) 70%,
    transparent 100%
  );
}
/* Scroll indicator (bottom-center) */
.hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--md-font-display);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.hero-scroll-line,
.wp-block-group.hero-scroll-line {
  width: 1px !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 1px !important;
  flex: 0 0 auto !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent) !important;
}

/* ════════════════
   BRAND STATEMENT — RTL marquee + overlay quote card
   The section is a relative container; the marquee runs absolutely positioned
   behind a centered overlay group containing the Our Promise quote + CTA.
   ════════════════ */
.brand-statement {
  position: relative;
  background: var(--md-slate);
  padding: 96px 48px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.brand-statement::before {
  content: 'Create. \2022  Empower. \2022  Elevate. \2022  Create. \2022  Empower. \2022  Elevate. \2022  Create. \2022  Empower. \2022  Elevate. \2022  Create. \2022  Empower. \2022  Elevate. \2022';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: flex !important;
  align-items: center;
  white-space: nowrap;
  width: max-content;
  font-family: var(--md-font-display);
  font-weight: 900;
  font-size: clamp(80px, 11vw, 180px);
  color: rgba(255, 255, 255, 0.06) !important;
  letter-spacing: -0.04em;
  line-height: 1;
  animation: bs-marquee-rtl 30s linear infinite;
  will-change: transform;
}
@keyframes bs-marquee-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-statement::before { animation: none; transform: translateX(-25%); }
}

/* Overlay card: centered Our Promise quote with subtle radial backdrop
   so the moving marquee text fades behind the card without obscuring it. */
.bs-overlay {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto !important;
  padding: 48px 40px !important;
  text-align: center;
  background: radial-gradient(
    ellipse 80% 110% at 50% 50%,
    rgba(var(--md-slate-rgb), 0.92) 0%,
    rgba(var(--md-slate-rgb), 0.78) 40%,
    rgba(var(--md-slate-rgb), 0.4) 75%,
    transparent 100%
  );
  border-radius: var(--md-radius-xl);
}
.bs-eyebrow {
  font-family: var(--md-font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--md-teal-300) !important;
  margin: 0 0 16px !important;
  text-align: center;
}
.bs-tagline {
  font-family: var(--md-font-body);
  font-style: italic;
  font-size: clamp(18px, 1.7vw, 22px);
  color: rgba(255, 255, 255, 0.88) !important;
  line-height: 1.5;
  margin: 0 auto 14px !important;
  text-align: center;
  text-wrap: balance;
}
.bs-attribution {
  font-family: var(--md-font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--md-teal-300) !important;
  margin: 0 0 24px !important;
  text-align: center;
}
.bs-cta { margin: 0 !important; }
.bs-cta .wp-block-button { margin: 0; }

/* ════════════════
   INTRO / MISSION
   ════════════════ */
.intro-section {
  padding: 96px 48px !important;
  background: var(--md-paper);
}
.intro-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.intro-media {
  position: relative;
  border-radius: var(--md-radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--md-slate-700), var(--md-slate));
  box-shadow: 0 24px 60px rgba(var(--md-slate-rgb), 0.18);
  margin: 0 !important;
}
.intro-media .wp-block-image,
.intro-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0 !important;
  display: block;
}
.intro-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(var(--md-slate-rgb), 0.6) 100%);
  pointer-events: none;
}
.intro-media-label {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: rgba(var(--md-slate-rgb), 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--md-radius-md);
  padding: 12px 16px;
  font-family: var(--md-font-display);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
  margin: 0 !important;
}
.intro-body h2,
.intro-body .wp-block-heading {
  font-family: var(--md-font-display);
  font-weight: 800;
  font-size: clamp(26px, 2.6vw, 38px);
  color: var(--md-deep-blue);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 18px !important;
}
.intro-body p {
  font-family: var(--md-font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--md-body);
  margin: 0 0 16px;
}
.intro-body p:last-of-type { margin-bottom: 28px; }

@media (max-width: 900px) {
  .intro-inner { grid-template-columns: 1fr; gap: 40px; }
}

/* ════════════════
   SERVICES GRID
   ════════════════ */
.services-section {
  padding: 96px 48px !important;
  background: var(--md-ink-050);
}
.services-section > .wp-block-group__inner-container,
.services-section .services-wrap {
  max-width: 1280px;
  margin: 0 auto;
}
.services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px !important;
  background: var(--md-ink-200);
  border-radius: var(--md-radius-lg);
  overflow: hidden;
  margin-top: 56px !important;
}
.svc-card {
  background: var(--md-paper) !important;
  padding: 32px 28px !important;
  margin: 0 !important;
  transition: background 200ms var(--md-ease-out);
  display: flex;
  flex-direction: column;
}
.svc-card:hover { background: var(--md-teal-050) !important; }
.svc-icon {
  width: 44px;
  height: 44px;
  background: var(--md-teal-050);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-teal);
  margin-bottom: 18px;
  transition: background 200ms var(--md-ease-out);
  flex-shrink: 0;
}
.svc-card:hover .svc-icon { background: var(--md-teal-100); }
.svc-icon svg { width: 22px; height: 22px; }
.svc-card h3,
.svc-card .wp-block-heading {
  font-family: var(--md-font-display) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  color: var(--md-deep-blue) !important;
  margin: 0 0 8px !important;
  line-height: 1.25;
}
.svc-card p {
  font-family: var(--md-font-body);
  font-size: 14px;
  color: var(--md-ink-500);
  line-height: 1.6;
  margin: 0 0 16px;
}
.svc-link {
  font-family: var(--md-font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-teal) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  text-decoration: none;
  transition: gap var(--md-dur-fast) var(--md-ease-out);
}
.svc-link::after {
  content: '→';
  font-size: 14px;
  line-height: 1;
  display: inline-block;
}
.svc-card:hover .svc-link { gap: 9px; }
.svc-link-paragraph,
p.svc-link-paragraph {
  margin: 16px 0 0 !important;
  line-height: 1;
}
.svc-card--wide { grid-column: span 2; }
.svc-card--wide .svc-card-wide-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 32px !important;
  align-items: start;
}
.svc-card-callout {
  background: var(--md-teal-050) !important;
  border-radius: 10px;
  padding: 22px 20px !important;
  border: 1px solid var(--md-teal-100);
  margin: 0 !important;
}
.svc-card-callout-eyebrow {
  font-family: var(--md-font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--md-teal) !important;
  margin: 0 0 10px !important;
}
.svc-card-callout p {
  font-family: var(--md-font-body);
  font-size: 14px;
  color: var(--md-ink-500);
  margin: 0 0 14px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .services-grid { grid-template-columns: 1fr; }
  .svc-card--wide { grid-column: auto; }
  .svc-card--wide .svc-card-wide-grid { grid-template-columns: 1fr; gap: 20px !important; }
}

/* ════════════════
   STUDIO SPECS
   ════════════════ */
.specs-section {
  padding: 80px 48px !important;
  background: var(--md-slate);
}
.specs-section > .wp-block-group__inner-container,
.specs-section .specs-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.specs-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px !important;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--md-radius-lg);
  overflow: hidden;
  margin-top: 52px !important;
}
.spec-item {
  background: rgba(255, 255, 255, 0.03) !important;
  padding: 32px 24px !important;
  text-align: center;
  margin: 0 !important;
  transition: background 200ms var(--md-ease-out);
}
.spec-item:hover { background: rgba(255, 255, 255, 0.07) !important; }
.spec-icon-wrap {
  width: 52px;
  height: 52px;
  background: rgba(0, 137, 123, 0.2);
  border-radius: var(--md-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-teal-300);
  margin: 0 auto 16px;
}
.spec-icon-wrap svg { width: 26px; height: 26px; }
.spec-val {
  font-family: var(--md-font-display);
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  letter-spacing: -0.01em;
  margin: 0 !important;
}
.spec-lbl {
  font-family: var(--md-font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin: 6px 0 0 !important;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .specs-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .specs-row { grid-template-columns: 1fr; }
}

/* ════════════════
   TESTIMONIAL
   ════════════════ */
.testimonial-section {
  padding: 96px 48px !important;
  background: var(--md-paper);
}
.testimonial-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.testimonial-rule {
  width: 48px;
  height: 3px;
  background: var(--md-teal);
  margin: 0 auto 32px !important;
  border-radius: 2px;
}
.testimonial-quote,
.testimonial-section blockquote {
  font-family: var(--md-font-body) !important;
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.5;
  color: var(--md-deep-blue) !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  border: none !important;
  text-wrap: balance;
}
.testimonial-attr {
  font-family: var(--md-font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--md-teal) !important;
  margin: 0 !important;
}

/* ════════════════
   CLIENT LOGOS — FILM STRIP
   ════════════════ */
.clients-section {
  padding: 64px 0 !important;
  background: var(--md-slate);
  overflow: hidden;
}
.clients-label {
  font-family: var(--md-font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35) !important;
  text-align: center;
  margin: 0 0 28px !important;
}
/* RTL film-strip marquee. The PNGs already have sprocket-hole frames baked
   in, so no manual hole rows are needed — just scroll the images
   continuously and fade the edges. Doubled in markup (18 → 36 images) so
   translateX(-50%) produces a seamless loop. */
.film-marquee {
  position: relative;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}
.film-marquee::before,
.film-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
.film-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--md-slate), transparent);
}
.film-marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--md-slate), transparent);
}
.film-marquee-track {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0 !important;
  width: max-content;
  margin: 0 !important;
  padding: 0 !important;
  animation: film-marquee-rtl 60s linear infinite;
  will-change: transform;
}
.film-marquee-track .wp-block-image,
.film-marquee-track figure {
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0;
}
.film-marquee-track .wp-block-image img,
.film-marquee-track figure img {
  display: block;
  height: 140px;
  width: auto;
  margin: 0 !important;
  padding: 0;
}
@keyframes film-marquee-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .film-marquee-track { animation: none; transform: translateX(-25%); }
}

.clients-cta-wrap {
  text-align: center;
  margin-top: 36px !important;
}
.clients-cta-wrap .wp-block-buttons {
  justify-content: center;
}
.clients-cta-wrap .wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--md-teal-300) !important;
  border-color: var(--md-teal-300) !important;
}
.clients-cta-wrap .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(77, 179, 167, 0.1) !important;
}

/* ════════════════
   FAQ
   ════════════════ */
.faq-section {
  padding: 96px 48px !important;
  background: var(--md-ink-050);
}
.faq-wrap {
  max-width: 800px;
  margin: 0 auto;
}
.faq-wrap .md-eyebrow,
.faq-wrap > .wp-block-paragraph.md-eyebrow {
  text-align: center;
}
.faq-wrap .md-section-h2 { text-align: center; }
.faq-list {
  display: flex !important;
  flex-direction: column;
  gap: 4px !important;
  margin-top: 48px !important;
}
.faq-item,
details.faq-item {
  background: var(--md-paper);
  border: 1px solid var(--md-ink-200);
  border-radius: var(--md-radius-md);
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
}
details.faq-item summary,
.faq-item > summary {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px !important;
  cursor: pointer;
  font-family: var(--md-font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--md-deep-blue);
  transition: background var(--md-dur-fast) var(--md-ease-out);
  list-style: none;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: '+';
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--md-teal);
  flex-shrink: 0;
  transition: transform var(--md-dur-med) var(--md-ease-out);
  line-height: 1;
}
details.faq-item[open] summary {
  background: var(--md-teal-050);
  color: var(--md-teal-700);
}
details.faq-item[open] summary::after { transform: rotate(45deg); }
details.faq-item summary:hover { background: var(--md-teal-050); }
details.faq-item .faq-a,
details.faq-item > p,
details.faq-item > .wp-block-paragraph {
  font-family: var(--md-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--md-ink-500);
  padding: 0 24px 20px !important;
  margin: 0 !important;
}

/* ════════════════
   BOOKING — TWO PATHS
   ════════════════ */
.booking-section {
  padding: 96px 48px !important;
  background: var(--md-paper);
}
.booking-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.booking-section > .wp-block-group__inner-container > .md-eyebrow,
.booking-section .md-eyebrow.is-centered {
  text-align: center;
  display: block;
}
.booking-section .md-section-h2.is-centered {
  text-align: center;
  margin: 0 auto 14px !important;
  max-width: 640px;
}
.booking-section .md-section-sub.is-centered {
  text-align: center;
  margin: 0 auto !important;
  max-width: 580px;
}
.booking-cards {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 24px !important;
  margin-top: 52px !important;
}
.booking-card {
  border-radius: var(--md-radius-lg);
  overflow: hidden;
  border: 1px solid var(--md-ink-200);
  box-shadow: 0 2px 8px rgba(var(--md-slate-rgb), 0.07);
  display: flex !important;
  flex-direction: column;
  margin: 0 !important;
  background: #fff;
}
.booking-card-head {
  background: var(--md-slate) !important;
  padding: 36px 36px 28px !important;
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  margin: 0 !important;
}
.booking-card-icon {
  width: 52px;
  height: 52px;
  background: rgba(0, 137, 123, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-teal-300);
}
.booking-card-icon svg { width: 26px; height: 26px; }
.booking-card-head h3,
.booking-card-head .wp-block-heading {
  font-family: var(--md-font-display) !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  color: #fff !important;
  line-height: 1.1;
  margin: 0 !important;
}
.booking-card-head p {
  font-family: var(--md-font-body);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72) !important;
  line-height: 1.6;
  margin: 0 !important;
}
.booking-card-body {
  padding: 28px 36px 36px !important;
  background: #fff;
  flex: 1;
  display: flex !important;
  flex-direction: column;
  gap: 20px;
  margin: 0 !important;
}
.booking-features {
  display: flex !important;
  flex-direction: column;
  gap: 10px !important;
  margin: 0 !important;
}
.booking-feat {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--md-font-body);
  font-size: 15px;
  color: var(--md-body);
  line-height: 1.5;
  margin: 0 !important;
}
.booking-feat::before {
  content: '✓';
  flex-shrink: 0;
  color: var(--md-teal);
  font-weight: 700;
  margin-top: 1px;
}
.booking-card-cta { margin-top: auto; }
.booking-card-cta .wp-block-button .wp-block-button__link {
  width: 100%;
  justify-content: center;
  text-align: center;
}
/* Featured (Discovery Call) variant */
.booking-card--featured .booking-card-head {
  background: var(--md-teal) !important;
}
.booking-card--featured .booking-card-icon {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.booking-card--featured .booking-card-head p {
  color: rgba(255, 255, 255, 0.88) !important;
}
.booking-card--featured .booking-card-body {
  background: var(--md-teal-050) !important;
}
.booking-card--featured .booking-card-cta .wp-block-button .wp-block-button__link {
  background: var(--md-slate) !important;
}
.booking-card--featured .booking-card-cta .wp-block-button .wp-block-button__link:hover {
  background: var(--md-slate-900) !important;
}

@media (max-width: 900px) {
  .booking-cards { grid-template-columns: 1fr; }
}

/* ════════════════
   LIVESTREAM CALLOUT
   ════════════════ */
.livestream-section {
  padding: 0 48px 96px !important;
  background: var(--md-paper);
}
.livestream-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.livestream-callout {
  margin-top: 52px !important;
  background: var(--md-slate);
  border-radius: var(--md-radius-lg);
  padding: 52px 56px !important;
  display: grid !important;
  grid-template-columns: 1fr auto;
  gap: 40px !important;
  align-items: center;
}
.livestream-body h3,
.livestream-body .wp-block-heading {
  font-family: var(--md-font-display) !important;
  font-weight: 800 !important;
  font-size: 28px !important;
  color: #fff !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.livestream-body p {
  font-family: var(--md-font-body);
  font-size: 17px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
  margin: 0;
}
.livestream-stats {
  display: flex !important;
  gap: 32px !important;
  margin: 20px 0 0 !important;
  flex-wrap: wrap;
}
.ls-stat {
  font-family: var(--md-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-teal-300) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  margin: 0 !important;
}
.ls-stat::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--md-teal-300);
  border-radius: 50%;
  flex-shrink: 0;
}
.livestream-ctas {
  display: flex !important;
  flex-direction: column;
  gap: 10px !important;
  flex-shrink: 0;
}
.livestream-ctas .wp-block-button {
  margin: 0 !important;
}

@media (max-width: 900px) {
  .livestream-callout {
    grid-template-columns: 1fr;
    padding: 36px 28px !important;
  }
  .livestream-ctas { width: 100%; }
}

/* ════════════════
   FOOTER GRID (mockup-aligned)
   ════════════════ */
.site-footer .footer-grid,
footer.wp-block-template-part .footer-grid {
  max-width: 1280px;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px !important;
  padding-bottom: 48px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-brand .wp-block-image,
.footer-brand img {
  height: 40px;
  width: auto;
  filter: brightness(0) invert(1);
  margin: 0 0 12px !important;
}
.footer-brand-name {
  font-family: var(--md-font-display);
  font-weight: 800;
  font-size: 17px;
  color: #fff;
  margin: 0 0 12px !important;
}
.footer-tagline {
  font-family: var(--md-font-body);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55) !important;
  max-width: 280px;
  margin: 0 0 20px !important;
}
.footer-social,
.wp-block-social-links.footer-social {
  display: flex !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}
.footer-social .wp-social-link,
.wp-block-social-links.footer-social .wp-social-link {
  width: 36px !important;
  height: 36px !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--md-radius-md) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  transition: background-color var(--md-dur-fast), color var(--md-dur-fast);
}
.footer-social .wp-social-link a,
.wp-block-social-links.footer-social .wp-social-link a {
  width: 100%;
  height: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7) !important;
  padding: 0 !important;
}
.footer-social .wp-social-link svg,
.wp-block-social-links.footer-social .wp-social-link svg {
  width: 17px !important;
  height: 17px !important;
  fill: currentColor !important;
}
.footer-social .wp-social-link:hover,
.wp-block-social-links.footer-social .wp-social-link:hover {
  background-color: var(--md-teal) !important;
  transform: none;
}
.footer-social .wp-social-link:hover a,
.wp-block-social-links.footer-social .wp-social-link:hover a {
  color: #fff !important;
}
.footer-col-title {
  font-family: var(--md-font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--md-teal-300) !important;
  margin: 0 0 16px !important;
}
ul.footer-links,
.footer-links {
  display: flex !important;
  flex-direction: column;
  gap: 9px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
ul.footer-links li,
.footer-links li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--md-font-body);
  font-size: 14px;
  line-height: 1.4;
}
.footer-links a,
ul.footer-links li a {
  font-family: var(--md-font-body);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
}
.footer-links a:hover,
ul.footer-links li a:hover { color: #fff !important; }
/* Hide list bullets from native ul markers when footer-links uses wp:list */
.site-footer ul.footer-links,
footer.wp-block-template-part ul.footer-links { list-style: none !important; }
.footer-address,
.footer-address p {
  font-family: var(--md-font-body);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  margin: 0 0 0 !important;
}
.footer-address p + p { margin-top: 14px !important; }
.footer-bottom {
  max-width: 1280px;
  margin: 28px auto 0 !important;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  font-family: var(--md-font-display);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.04em;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-badges {
  display: flex !important;
  gap: 10px !important;
  margin: 0 !important;
}
.footer-badge {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--md-radius-sm);
  padding: 4px 9px !important;
  font-family: var(--md-font-display);
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 !important;
}

@media (max-width: 900px) {
  .site-footer .footer-grid,
  footer.wp-block-template-part .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .site-footer .footer-grid,
  footer.wp-block-template-part .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ════════════════
   PAGE BANNER (inner pages: about, services, contact, booking, etc.)
   ════════════════ */
.page-banner {
  background: var(--md-slate);
  padding: 80px 48px 72px !important;
  position: relative;
  overflow: hidden;
}
.page-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 110% 50%, rgba(0, 137, 123, 0.14) 0%, transparent 65%);
  pointer-events: none;
}
.page-banner-inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}
.page-banner h1,
.page-banner .wp-block-heading {
  font-family: var(--md-font-display) !important;
  font-weight: 900 !important;
  font-size: clamp(40px, 4vw, 60px) !important;
  color: #fff !important;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 16px !important;
}
.page-banner-sub {
  font-family: var(--md-font-body);
  font-size: 19px;
  color: rgba(255, 255, 255, 0.72) !important;
  max-width: 580px;
  line-height: 1.6;
  margin: 0 !important;
}

/* ==========================================================================
   13b. ICON SYSTEM
   ==========================================================================
   Empty .md-icon container renders a Lucide-style icon via ::before mask-image.
   Replaces inline-SVG wp:html blocks (which expose raw markup in the editor).

   Usage: combine an existing icon-container class (.svc-icon, .spec-icon-wrap,
   .booking-card-icon) with .md-icon and a .md-icon--{name} modifier on an
   empty wp:group block. The modifier sets --md-icon to a data-URI SVG; the
   ::before pseudo-element draws it in `currentColor`.
   ========================================================================== */

.md-icon { position: relative; }
.md-icon::before {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask-image: var(--md-icon);
  mask-image: var(--md-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.spec-icon-wrap.md-icon::before,
.booking-card-icon.md-icon::before {
  width: 26px;
  height: 26px;
}
.md-icon-sentinel {
  display: none !important;
}

/* Editor: icon wrappers are intentionally empty groups. Hide Gutenberg's
   inner-block appender chrome so editors see the icon instead of arrange/add
   controls inside every service/spec/booking card. */
.editor-styles-wrapper .md-icon > .block-editor-inner-blocks,
.editor-styles-wrapper .md-icon > .block-list-appender,
.editor-styles-wrapper .md-icon .block-list-appender,
.editor-styles-wrapper .md-icon .block-editor-button-block-appender {
  display: none !important;
}
.editor-styles-wrapper .svc-icon.md-icon,
.editor-styles-wrapper .spec-icon-wrap.md-icon,
.editor-styles-wrapper .booking-card-icon.md-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.md-icon--broadcast    { --md-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.9 19.1C1 15.2 1 8.8 4.9 4.9'/%3E%3Cpath d='M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5'/%3E%3Cpath d='M19.1 4.9C23 8.8 23 15.1 19.1 19'/%3E%3C/svg%3E"); }
.md-icon--video        { --md-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 8-6 4 6 4V8Z'/%3E%3Crect width='14' height='12' x='2' y='6' rx='2' ry='2'/%3E%3C/svg%3E"); }
.md-icon--globe        { --md-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m14.31 8 5.74 9.94'/%3E%3Cpath d='M9.69 8h11.48'/%3E%3Cpath d='m7.38 12 5.74-9.94'/%3E%3Cpath d='M9.69 16 3.95 6.06'/%3E%3Cpath d='M14.31 16H2.83'/%3E%3Cpath d='m16.62 12-5.74 9.94'/%3E%3C/svg%3E"); }
.md-icon--mic          { --md-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' x2='12' y1='19' y2='22'/%3E%3C/svg%3E"); }
.md-icon--headphones   { --md-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H4a1 1 0 0 1-1-1v-6a9 9 0 0 1 18 0v6a1 1 0 0 1-1 1h-2a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E"); }
.md-icon--grid         { --md-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3C/svg%3E"); }
.md-icon--trending     { --md-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpolyline points='16 7 22 7 22 13'/%3E%3C/svg%3E"); }
.md-icon--tv           { --md-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='3' rx='2'/%3E%3Cline x1='8' x2='16' y1='21' y2='21'/%3E%3Cline x1='12' x2='12' y1='17' y2='21'/%3E%3C/svg%3E"); }
.md-icon--layers       { --md-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E"); }
.md-icon--pin          { --md-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.md-icon--phone        { --md-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }

/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  .md-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .md-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .md-grid-2-hero { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  .md-grid-4,
  .md-grid-3,
  .md-grid-2 { grid-template-columns: 1fr !important; }

  h1 { font-size: clamp(36px, 8vw, 48px); }
  h2 { font-size: clamp(24px, 6vw, 32px); }

  .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ==========================================================================
   15. ACCESSIBILITY
   ========================================================================== */

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 137, 123, 0.35);
  border-radius: var(--md-radius-sm);
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 999;
  background: var(--md-teal);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--md-radius-md) var(--md-radius-md);
  font-family: var(--md-font-display);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: top var(--md-dur-fast) var(--md-ease-out);
}

.skip-link:focus { top: 0; }