/*
Theme Name: Moat Osteopaths
Theme URI: https://moatosteopaths.com
Author: Moat Osteopaths
Description: Custom theme for Moat Osteopaths. The Moat web system (tokens, typography, buttons, forms, bands) lives in this file. Includes a "Block Page" template for editor-managed pages and a "Static Demo" template controlled by PHP.
Version: 1.0.6
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: moat
*/

/* ---------- 1. TOKENS (from the Moat web system) ---------- */
:root,.editor-styles-wrapper{
  --m-charcoal:#1F2427;
  --m-charcoal-raised:#2A3034;
  --m-soft-white:#F6F3EE;
  --m-paper:#EEE8DF;
  --m-raised:#FBF9F5;
  --m-warm:#DBD0C3;
  --m-stone:#C3B9AC;
  --m-light-blue:#94BDD9;
  --m-deep-blue:#3B6F95;
  --m-mist:#DDEAF3;
  --m-olive:#6E7356;
  --m-ink:#3A4044;
  --m-slate:#5E6468;

  --m-ground:var(--m-soft-white);
  --m-surface:var(--m-paper);
  --m-surface-raised:var(--m-raised);
  --m-text:var(--m-charcoal);
  --m-text-body:var(--m-ink);
  --m-text-2:var(--m-slate);
  --m-hairline:rgba(31,36,39,.12);
  --m-hairline-strong:rgba(31,36,39,.26);
  --m-accent:var(--m-light-blue);
  --m-on-accent:var(--m-charcoal);
  --m-link:var(--m-deep-blue);
  --m-focus:var(--m-deep-blue);
  --m-rule:var(--m-light-blue);
  --m-selected-bg:var(--m-mist);
  --m-selected-text:var(--m-deep-blue);
  --m-logo:var(--m-deep-blue);
  --m-field-bg:var(--m-raised);

  --m-serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --m-sans:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --m-mark:'Quicksand', 'DM Sans', sans-serif;
  --m-fs-display:clamp(3rem, 7.2vw, 6.75rem);
  --m-fs-h1:clamp(2.5rem, 5vw, 4.25rem);
  --m-fs-h2:clamp(2rem, 3.6vw, 3rem);
  --m-fs-h3:clamp(1.5rem, 2.2vw, 1.875rem);
  --m-fs-h4:1.3125rem;
  --m-fs-statement:clamp(1.375rem, 2.2vw, 1.875rem);
  --m-fs-lead:clamp(1.125rem, 1.5vw, 1.3125rem);
  --m-fs-body:1.0625rem;
  --m-fs-small:.9375rem;
  --m-fs-label:.8125rem;
  --m-fs-caption:.8125rem;
  --m-fs-kicker:.6875rem;
  --m-fs-button:.6875rem;

  --m-s-1:4px; --m-s-2:8px; --m-s-3:12px; --m-s-4:16px; --m-s-5:24px;
  --m-s-6:32px; --m-s-7:48px; --m-s-8:64px; --m-s-9:96px; --m-s-10:128px;
  --m-section:clamp(72px, 10vw, 140px);
  --m-gutter:clamp(16px, 4vw, 56px);
  --m-max:1360px;
  --m-measure:64ch;
  --m-measure-lead:42ch;

  --m-r-sm:4px; --m-r-md:12px; --m-r-lg:20px; --m-r-pill:999px;
  --m-shadow:0 1px 2px rgba(31,36,39,.05), 0 24px 48px -28px rgba(31,36,39,.35);
  --m-ease:cubic-bezier(.2,.7,.2,1); --m-dur:.25s;
}

/* Charcoal context: top bar and footer only */
.m-on-charcoal{
  --m-ground:var(--m-charcoal);
  --m-surface:var(--m-charcoal-raised);
  --m-surface-raised:var(--m-charcoal-raised);
  --m-text:var(--m-soft-white);
  --m-text-body:rgba(246,243,238,.82);
  --m-text-2:rgba(246,243,238,.6);
  --m-hairline:rgba(246,243,238,.14);
  --m-hairline-strong:rgba(246,243,238,.3);
  --m-link:var(--m-light-blue);
  --m-focus:var(--m-light-blue);
  --m-selected-bg:rgba(148,189,217,.16);
  --m-selected-text:var(--m-light-blue);
  --m-logo:var(--m-light-blue);
  --m-field-bg:rgba(246,243,238,.06);
  background:var(--m-ground); color:var(--m-text-body);
}
/* Accent context: one per page. On this homepage the accent moment is the blue panel under the hero. */
.m-band--accent,.m-showcase__panel{
  --m-ground:var(--m-light-blue);
  --m-surface-raised:var(--m-light-blue);
  --m-text:var(--m-charcoal);
  --m-text-body:rgba(31,36,39,.86);
  --m-text-2:rgba(31,36,39,.7);
  --m-hairline:rgba(31,36,39,.18);
  --m-hairline-strong:rgba(31,36,39,.45);
  --m-rule:var(--m-charcoal);
  --m-link:var(--m-charcoal);
  --m-focus:var(--m-charcoal);
  --m-logo:var(--m-charcoal);
}

/* ---------- 2. BASE ---------- */
body{margin:0;background:var(--m-ground);color:var(--m-text-body);font:400 var(--m-fs-body)/1.65 var(--m-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*,*::before,*::after{box-sizing:border-box}
.m-container{width:100%;max-width:var(--m-max);margin-inline:auto;padding-inline:var(--m-gutter)}
.m-flow > * + *{margin-top:var(--m-s-4)}
html{scroll-behavior:smooth}
body{overflow-x:hidden}

/* ---------- 3. TYPE ---------- */
.m-kicker{font:500 var(--m-fs-kicker)/1.4 var(--m-sans);letter-spacing:.32em;text-transform:uppercase;color:var(--m-text-2);margin:0}
.m-kicker--dash{display:inline-flex;align-items:center;gap:12px}
.m-kicker--dash::before{content:'';width:22px;height:2px;background:var(--m-rule)}
.m-display,.m-h1,.m-h2,.m-h3,.m-h4{font-family:var(--m-serif);font-weight:300;color:var(--m-text);margin:0;text-wrap:balance}
.m-display{font-size:var(--m-fs-display);line-height:.98;letter-spacing:-.022em}
.m-h1{font-size:var(--m-fs-h1);line-height:1.02;letter-spacing:-.018em}
.m-h2{font-size:var(--m-fs-h2);line-height:1.08;letter-spacing:-.012em}
.m-h3{font-size:var(--m-fs-h3);line-height:1.15;letter-spacing:-.006em}
.m-lead{font:400 var(--m-fs-lead)/1.6 var(--m-sans);color:var(--m-text-body);max-width:var(--m-measure-lead);margin:0}
.m-body{font-size:var(--m-fs-body);line-height:1.65;max-width:var(--m-measure);margin:0}
.m-small{font-size:var(--m-fs-small);line-height:1.6;color:var(--m-text-2);margin:0}
.m-label{display:block;font:500 var(--m-fs-label)/1.3 var(--m-sans);color:var(--m-text);letter-spacing:.01em}
.m-hint{font-size:var(--m-fs-caption);line-height:1.45;color:var(--m-text-2);margin:0}
.m-rule{display:block;width:44px;height:2px;background:var(--m-rule);border:0;margin:var(--m-s-5) 0}
.m-stack{list-style:none;margin:0;padding:0;font:500 var(--m-fs-kicker)/2.2 var(--m-sans);letter-spacing:.34em;text-transform:uppercase;color:var(--m-text-2)}
.m-stack--row{display:flex;flex-wrap:wrap;gap:0 24px}

/* ---------- 4. BUTTONS AND LINKS ---------- */
.m-btn,.wp-block-button .wp-block-button__link,input[type="submit"],.wp-block-search__button{--_bg:var(--m-accent);--_fg:var(--m-on-accent);--_bd:transparent;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 28px;border-radius:var(--m-r-pill);border:1px solid var(--_bd);background:var(--_bg);color:var(--_fg);font:500 var(--m-fs-button)/1 var(--m-sans);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--m-dur) var(--m-ease),border-color var(--m-dur) var(--m-ease),color var(--m-dur) var(--m-ease)}
.m-btn:hover,.wp-block-button .wp-block-button__link:hover,input[type="submit"]:hover,.wp-block-search__button:hover{--_bg:color-mix(in srgb,var(--m-accent) 86%,var(--m-charcoal));color:var(--_fg)}
.m-btn__arrow{display:inline-block;transition:transform var(--m-dur) var(--m-ease)}
.m-btn:hover .m-btn__arrow{transform:translateX(3px)}
.m-btn:focus-visible,.wp-block-button .wp-block-button__link:focus-visible{outline:2px solid var(--m-focus);outline-offset:3px}
.m-btn--secondary,.wp-block-buttons .wp-block-button.is-style-outline>.wp-block-button__link.wp-element-button{--_bg:transparent;--_fg:var(--m-text);--_bd:var(--m-hairline-strong);padding:0 28px;border:1px solid var(--_bd);background:var(--_bg);color:var(--_fg)}
.m-btn--secondary:hover,.wp-block-buttons .wp-block-button.is-style-outline>.wp-block-button__link.wp-element-button:hover{--_bg:transparent;--_bd:var(--m-text)}
.m-btn--tertiary,.wp-block-buttons .wp-block-button.is-style-tertiary>.wp-block-button__link.wp-element-button{--_bg:transparent;--_fg:var(--m-text);--_bd:var(--m-hairline-strong);min-height:0;padding:10px 0;border-radius:0;border-width:0 0 1px;border-style:solid;border-color:var(--_bd);background:var(--_bg);color:var(--_fg)}
.m-btn--tertiary:hover,.wp-block-buttons .wp-block-button.is-style-tertiary>.wp-block-button__link.wp-element-button:hover{--_bg:transparent;--_bd:var(--m-text)}
.m-btn--sm,.wp-block-button.m-btn--sm .wp-block-button__link{min-height:40px;padding:0 20px;font-size:.625rem}
.m-btn--block{width:100%}
/* Arrow for block-editor buttons (the static markup uses a .m-btn__arrow span instead) */
.m-btn--arrow .wp-block-button__link::after{content:"\2192" / "";display:inline-block;transition:transform var(--m-dur) var(--m-ease)}
.m-btn--arrow .wp-block-button__link:hover::after{transform:translateX(3px)}
.m-link{color:var(--m-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);transition:text-decoration-color var(--m-dur) var(--m-ease)}
.m-link:hover{text-decoration-color:currentColor}
.m-link:focus-visible{outline:2px solid var(--m-focus);outline-offset:3px;border-radius:2px}
.m-link--quiet{color:inherit;text-decoration-color:transparent}
.m-link--quiet:hover{text-decoration-color:currentColor}

/* ---------- 6. BRAND LOCKUP AND NAVIGATION ---------- */
.m-brand{display:inline-flex;align-items:center;gap:14px;color:var(--m-logo);text-decoration:none}
.m-brand__mark{width:46px;height:46px;flex:none}
.m-brand__name{display:block;font:400 1.6rem/1 var(--m-mark);letter-spacing:-.005em;white-space:nowrap}
.m-brand__desc{display:block;font:400 .7rem/1 var(--m-mark);margin-top:6px;white-space:nowrap}
.m-brand:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px;border-radius:4px}

.m-nav{position:relative;z-index:20;container-type:inline-size}
.m-nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--m-s-6);min-height:84px}
.m-nav__menu{display:flex;align-items:center;gap:clamp(20px,2.4vw,36px)}
.m-nav__links{display:flex;align-items:center;gap:clamp(16px,1.8vw,28px);list-style:none;margin:0;padding:0}
.m-nav__link{position:relative;display:block;padding:10px 0;white-space:nowrap;font:500 .6875rem/1 var(--m-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--m-text-2);text-decoration:none;transition:color var(--m-dur) var(--m-ease)}
.m-nav__link:hover,.m-nav__link[aria-current="page"]{color:var(--m-text)}
.m-nav__link[aria-current="page"]::after{content:'';position:absolute;left:0;bottom:1px;width:22px;height:2px;background:var(--m-rule)}
.m-nav__link:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px}
.m-nav__toggle{position:absolute;opacity:0;pointer-events:none}
.m-nav__burger{display:none;width:44px;height:44px;place-content:center;gap:5px;cursor:pointer;color:var(--m-text);border-radius:50%}
.m-nav__burger span{display:block;width:20px;height:1.5px;background:currentColor;transition:transform var(--m-dur) var(--m-ease),opacity var(--m-dur)}
.m-nav__toggle:focus-visible + .m-nav__burger{outline:2px solid var(--m-focus);outline-offset:2px}
@container (max-width:1180px){
  .m-nav__burger{display:grid}
  .m-nav__menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:var(--m-s-5);padding:var(--m-s-3) var(--m-gutter) var(--m-s-6);background:var(--m-ground);border-top:1px solid var(--m-hairline)}
  .m-nav__toggle:checked ~ .m-nav__menu{display:flex}
  .m-nav__toggle:checked + .m-nav__burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .m-nav__toggle:checked + .m-nav__burger span:nth-child(2){opacity:0}
  .m-nav__toggle:checked + .m-nav__burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .m-nav__links{flex-direction:column;align-items:stretch;gap:0}
  .m-nav__links li{border-bottom:1px solid var(--m-hairline)}
  .m-nav__link{padding:18px 0;font-size:.75rem}
  .m-nav__link[aria-current="page"]::after{bottom:12px}
}
@container (max-width:420px){
  .m-brand__name{font-size:1.25rem}.m-brand__desc{font-size:.58rem}.m-brand__mark{width:38px;height:38px}
}

/* ---------- 7. CARDS ---------- */
.m-grid{display:grid;gap:var(--m-s-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.m-card{position:relative;display:flex;flex-direction:column;background:var(--m-surface-raised);border-radius:var(--m-r-sm);overflow:hidden;box-shadow:inset 0 0 0 1px var(--m-hairline);color:var(--m-text-body);text-decoration:none;transition:box-shadow var(--m-dur) var(--m-ease)}
.m-card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--m-warm)}
.m-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--m-ease)}
a.m-card:hover{box-shadow:inset 0 0 0 1px var(--m-hairline-strong),var(--m-shadow)}
a.m-card:hover .m-card__media > *{transform:scale(1.03)}
a.m-card:focus-visible{outline:2px solid var(--m-focus);outline-offset:3px}
.m-card__body{display:flex;flex-direction:column;gap:var(--m-s-3);padding:var(--m-s-6);flex:1}
.m-card__title{font:300 1.625rem/1.15 var(--m-serif);color:var(--m-text);margin:0;letter-spacing:-.006em}
.m-card__text{font-size:var(--m-fs-small);line-height:1.6;margin:0}
.m-card__foot{margin-top:auto;padding-top:var(--m-s-4)}

/* ---------- 8. LISTS AND FEATURE ROWS ---------- */
.m-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));column-gap:var(--m-s-6);border-top:1px solid var(--m-hairline);list-style:none;margin:0;padding:0}
.m-feature{display:flex;gap:var(--m-s-4);align-items:flex-start;padding:var(--m-s-6) 0 var(--m-s-4)}
.m-feature__icon{width:36px;height:36px;flex:none;color:var(--m-link)}
.m-feature__title{font:500 .75rem/1.3 var(--m-sans);letter-spacing:.28em;text-transform:uppercase;color:var(--m-text);margin:6px 0 6px}
.m-feature__text{font-size:var(--m-fs-small);color:var(--m-text-2);margin:0;line-height:1.55}
.m-steps{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:var(--m-s-6)}
.m-steps > *{counter-increment:step;border-top:1px solid var(--m-hairline);padding-top:var(--m-s-5)}
.m-steps > *::before{content:counter(step,decimal-leading-zero);display:block;font:300 1.25rem/1 var(--m-serif);color:var(--m-link);margin-bottom:var(--m-s-4)}
.m-steps h3{font:300 1.375rem/1.2 var(--m-serif);letter-spacing:normal;color:var(--m-text);margin:0 0 6px}
.m-steps p{font-size:var(--m-fs-small);color:var(--m-text-2);margin:0;line-height:1.55}
.m-accordion{border-top:1px solid var(--m-hairline)}
.m-accordion details{border-bottom:1px solid var(--m-hairline)}
.m-accordion summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--m-s-5);padding:var(--m-s-5) 0;font:300 1.375rem/1.3 var(--m-serif);color:var(--m-text)}
.m-accordion summary::-webkit-details-marker{display:none}
.m-accordion summary::after{content:'';width:10px;height:10px;flex:none;margin-right:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform var(--m-dur) var(--m-ease)}
.m-accordion details[open] summary::after{transform:translateY(3px) rotate(-135deg)}
.m-accordion summary:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px}
.m-accordion__body{padding:0 0 var(--m-s-5);max-width:var(--m-measure);margin:0}

/* ---------- 9. FORMS (inline capture) ---------- */
.m-field{display:grid;gap:var(--m-s-2);align-content:start}
.m-capture{display:flex;align-items:center;gap:6px;width:100%;max-width:540px;padding:6px;border-radius:var(--m-r-pill);background:var(--m-field-bg);box-shadow:inset 0 0 0 1px var(--m-hairline-strong);transition:box-shadow var(--m-dur) var(--m-ease)}
.m-capture:focus-within{box-shadow:inset 0 0 0 1px var(--m-focus),0 0 0 3px color-mix(in srgb,var(--m-focus) 24%,transparent)}
.m-capture__input{flex:1;min-width:0;border:0;background:transparent;font:400 1rem/1.4 var(--m-sans);color:var(--m-text);padding:10px 16px;outline:none}
.m-capture__input::placeholder{color:var(--m-text-2)}
.m-capture .m-btn{flex:none}
@media (max-width:520px){.m-capture{flex-direction:column;align-items:stretch;border-radius:var(--m-r-lg)}.m-capture .m-btn{width:100%}}

/* ---------- 10. QUOTES AND PROOF ---------- */
.m-testimonial{display:flex;flex-direction:column;gap:var(--m-s-5);margin:0;padding:var(--m-s-6);background:var(--m-surface-raised);border-radius:var(--m-r-sm);box-shadow:inset 0 0 0 1px var(--m-hairline)}
.m-testimonial blockquote{margin:0}
.m-testimonial__text{font:300 1.3125rem/1.45 var(--m-serif);color:var(--m-text);margin:0}
.m-testimonial__by{display:flex;align-items:center;gap:12px;margin-top:auto;font-size:var(--m-fs-small);line-height:1.35}
.m-testimonial__name{display:block;font-weight:500;color:var(--m-text)}
.m-testimonial__meta{display:block;color:var(--m-text-2);font-size:var(--m-fs-caption)}
.m-proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));column-gap:var(--m-s-6);border-top:1px solid var(--m-hairline);border-bottom:1px solid var(--m-hairline);list-style:none;margin:0;padding:0}
.m-proof__item{padding:var(--m-s-6) 0}
.m-proof__value{display:block;font:300 clamp(1.625rem,2.6vw,2.25rem)/1.08 var(--m-serif);color:var(--m-text);letter-spacing:-.01em}
.m-proof__label{display:block;margin-top:var(--m-s-2);font:500 var(--m-fs-kicker)/1.5 var(--m-sans);letter-spacing:.28em;text-transform:uppercase;color:var(--m-text-2)}

/* ---------- 10b. GOOGLE REVIEWS (layout, rating summary, stars) ---------- */
.m-reviews{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,96px);align-items:start}
@media (max-width:960px){.m-reviews{grid-template-columns:1fr}}
.m-reviews__list{display:grid;gap:var(--m-s-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.m-rating{display:flex;align-items:center;gap:var(--m-s-4);margin:0 0 var(--m-s-6)}
.m-rating__value{font:300 clamp(3rem,6vw,4.5rem)/1 var(--m-serif);color:var(--m-text);letter-spacing:-.02em}
.m-rating__count{display:block;margin-top:var(--m-s-2);font:500 var(--m-fs-kicker)/1.5 var(--m-sans);letter-spacing:.28em;text-transform:uppercase;color:var(--m-text-2)}
.m-stars{display:inline-flex;gap:3px;color:var(--m-link)}
.m-star{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.m-star.is-on{fill:currentColor}
.m-testimonial__text--clamp{display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.m-reviews__note{margin-top:var(--m-s-6)}

/* ---------- 11. SECTION BANDS AND HERO ---------- */
.m-band{padding-block:var(--m-section);background-color:var(--m-ground);color:var(--m-text-body)}
.m-band--paper{--m-ground:var(--m-paper)}
.m-band--accent{position:relative;overflow:hidden}
.m-band--tight{padding-block:var(--m-s-8)}
.m-band__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--m-s-5);margin-bottom:clamp(36px,5vw,64px)}
.m-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
@media (max-width:860px){.m-split{grid-template-columns:1fr}}
.m-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:min(58vh,540px);background:var(--m-ground)}
.m-hero__copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--m-s-4);padding:var(--m-s-8) var(--m-s-6) var(--m-s-8) max(var(--m-gutter),calc((100vw - var(--m-max))/2 + var(--m-gutter)))}
.m-hero__copy .m-btn{margin-top:var(--m-s-4)}
.m-hero__media{position:relative;overflow:hidden;background:var(--m-warm)}
.m-hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:35% center}
.m-hero__media::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,var(--m-ground) 0%,color-mix(in srgb,var(--m-ground) 90%,transparent) 10%,color-mix(in srgb,var(--m-ground) 55%,transparent) 24%,color-mix(in srgb,var(--m-ground) 20%,transparent) 40%,transparent 56%)}
@media (max-width:860px){
  .m-hero{grid-template-columns:1fr;min-height:0}
  .m-hero__media{order:-1;aspect-ratio:4/3}
  .m-hero__media::after{background:linear-gradient(0deg,var(--m-ground) 0%,color-mix(in srgb,var(--m-ground) 50%,transparent) 18%,transparent 42%)}
  .m-hero__copy{padding:var(--m-s-5) var(--m-gutter) var(--m-s-8)}
}

/* ---------- 11b. APPROACH STRIP AND IMAGE SHOWCASE (homepage, under the hero) ---------- */
.m-band--strip{padding-block:var(--m-s-5)}
.m-approach{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:0}
.m-approach > *{display:flex;gap:var(--m-s-4);align-items:center;padding:var(--m-s-4) var(--m-s-5);border-left:1px solid var(--m-hairline)}
.m-approach > :first-child{border-left:0;padding-left:0}
.m-approach .m-feature__title{margin:0 0 4px}
@media (max-width:900px){
  .m-approach{grid-template-columns:1fr 1fr}
  .m-approach > :nth-child(odd){border-left:0;padding-left:0}
}
@media (max-width:520px){
  .m-approach{grid-template-columns:1fr}
  .m-approach > *{border-left:0;padding-left:0;border-top:1px solid var(--m-hairline)}
  .m-approach > :first-child{border-top:0}
}
.m-showcase{display:grid;grid-template-columns:minmax(0,30fr) repeat(4,minmax(0,17.5fr));gap:2px;background:var(--m-paper)}
.m-showcase__panel{display:flex;flex-direction:column;justify-content:center;padding:var(--m-s-8) var(--m-s-6) var(--m-s-8) max(var(--m-gutter),calc((100vw - var(--m-max))/2 + var(--m-gutter)));background:var(--m-ground);color:var(--m-text-body)}
.m-showcase__panel .m-h2{margin-top:var(--m-s-4);font-size:clamp(1.75rem,2.6vw,2.5rem)}
.m-showcase__tile{display:flex;flex-direction:column;background:var(--m-soft-white);color:var(--m-text);text-decoration:none}
.m-showcase__media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--m-warm)}
.m-showcase__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--m-ease)}
.m-showcase__tile:hover .m-showcase__media img{transform:scale(1.03)}
.m-showcase__tile:focus-visible{outline:2px solid var(--m-focus);outline-offset:-2px}
.m-showcase__label{font:300 1.25rem/1.25 var(--m-serif);letter-spacing:normal;color:var(--m-text);margin:0;padding:var(--m-s-4) var(--m-s-4) 0}
.m-showcase__text{font-size:var(--m-fs-small);line-height:1.55;color:var(--m-text-2);margin:0;padding:var(--m-s-3) var(--m-s-4) var(--m-s-6)}
.m-showcase__label::after{content:'';display:block;width:22px;height:2px;background:var(--m-light-blue);margin-top:var(--m-s-3)}
@media (max-width:1100px){
  .m-showcase{grid-template-columns:repeat(4,minmax(0,1fr))}
  .m-showcase__panel{grid-column:1 / -1;padding:var(--m-s-8) var(--m-gutter)}
}
@media (max-width:700px){
  .m-showcase{grid-template-columns:1fr 1fr}
}

/* ---------- 13. FOOTER ---------- */
.m-footer{padding-block:var(--m-s-9) var(--m-s-6)}
.m-footer__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--m-s-6);padding-bottom:var(--m-s-7);border-bottom:1px solid var(--m-hairline)}
.m-footer__top .m-brand__mark{width:60px;height:60px}
.m-footer__top .m-brand__name{font-size:2rem}
.m-footer__top .m-brand__desc{font-size:.85rem}
.m-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:var(--m-s-7) var(--m-s-6);padding-block:var(--m-s-7)}
.m-footer__grid > .m-footer__wide{grid-column:span 2}
@media (max-width:700px){.m-footer__grid > .m-footer__wide{grid-column:auto}}
.m-footer__head{margin-bottom:var(--m-s-4)}
.m-footer__list{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:var(--m-fs-small)}
.m-footer__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--m-s-4);padding-top:var(--m-s-5);border-top:1px solid var(--m-hairline);font-size:var(--m-fs-caption);color:var(--m-text-2)}
.m-footer__base ul{display:flex;flex-wrap:wrap;gap:var(--m-s-5);list-style:none;margin:0;padding:0}

/* ---------- 14. WORDPRESS LAYER: global elements, so a plain page already belongs ---------- */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background:var(--m-raised);clip:auto!important;clip-path:none;color:var(--m-text);display:block;height:auto;left:var(--m-s-3);padding:var(--m-s-3) var(--m-s-5);top:var(--m-s-3);width:auto;z-index:100000}
.m-skip{position:absolute;left:-9999px;top:var(--m-s-3);z-index:100000;padding:var(--m-s-3) var(--m-s-5);background:var(--m-raised);color:var(--m-text);border-radius:var(--m-r-sm)}
.m-skip:focus{left:var(--m-s-3)}

img{max-width:100%;height:auto}
:where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,figure,blockquote,pre,table,fieldset){margin:0}
:where(h1,h2,h3,h4){font-family:var(--m-serif);font-weight:300;color:var(--m-text);text-wrap:balance}
:where(h1){font-size:var(--m-fs-h1);line-height:1.02;letter-spacing:-.018em}
:where(h2){font-size:var(--m-fs-h2);line-height:1.08;letter-spacing:-.012em}
:where(h3){font-size:var(--m-fs-h3);line-height:1.15;letter-spacing:-.006em}
:where(h4){font-size:var(--m-fs-h4);line-height:1.2}
:where(h5,h6){font:500 var(--m-fs-label)/1.3 var(--m-sans);letter-spacing:.01em;color:var(--m-text)}
:where(a){color:var(--m-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);transition:text-decoration-color var(--m-dur) var(--m-ease)}
:where(a:hover){text-decoration-color:currentColor}
:where(a,summary,input,textarea,select):focus-visible{outline:2px solid var(--m-focus);outline-offset:3px;border-radius:2px}
::selection{background:var(--m-selected-bg);color:var(--m-selected-text)}
:where(hr){border:0;border-top:1px solid var(--m-hairline)}
:where(small){font-size:var(--m-fs-small)}
:where(strong,b){font-weight:600}
:where(code,kbd,pre){font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em}
:where(pre){padding:var(--m-s-5);background:var(--m-surface);border-radius:var(--m-r-sm);overflow:auto}
:where(table){width:100%;border-collapse:collapse;font-size:var(--m-fs-small)}
:where(th,td){padding:var(--m-s-3) var(--m-s-4);border-bottom:1px solid var(--m-hairline);text-align:left}
:where(th){font:500 var(--m-fs-kicker)/1.4 var(--m-sans);letter-spacing:.28em;text-transform:uppercase;color:var(--m-text-2)}
:where(figcaption){margin-top:var(--m-s-2);font-size:var(--m-fs-caption);line-height:1.45;color:var(--m-text-2)}

/* Forms: standalone fields reuse the capture field treatment (field background, hairline, focus ring) */
:where(label){display:block;font:500 var(--m-fs-label)/1.3 var(--m-sans);letter-spacing:.01em;color:var(--m-text)}
input:is([type="text"],[type="email"],[type="tel"],[type="url"],[type="search"],[type="password"],[type="number"],[type="date"]):not(.m-capture__input),textarea,select{width:100%;min-height:48px;padding:10px 16px;border:0;border-radius:var(--m-r-md);background:var(--m-field-bg);box-shadow:inset 0 0 0 1px var(--m-hairline-strong);color:var(--m-text);font:400 1rem/1.4 var(--m-sans);transition:box-shadow var(--m-dur) var(--m-ease)}
textarea{min-height:8rem;resize:vertical}
input:is([type="text"],[type="email"],[type="tel"],[type="url"],[type="search"],[type="password"],[type="number"],[type="date"]):not(.m-capture__input):focus,textarea:focus,select:focus{outline:none;box-shadow:inset 0 0 0 1px var(--m-focus),0 0 0 3px color-mix(in srgb,var(--m-focus) 24%,transparent)}
::placeholder{color:var(--m-text-2);opacity:1}
:where(input[type="checkbox"],input[type="radio"]){accent-color:var(--m-link)}
.m-check{display:flex;gap:var(--m-s-3);align-items:flex-start;font-weight:400}
.m-check input{margin-top:.2em;flex:none}
.m-form{display:grid;gap:var(--m-s-5);max-width:540px}

/* Page structure: standard pages and the block page share one set of rules */
.m-page{padding-block:var(--m-section)}
.m-page__header{margin-bottom:var(--m-s-7)}
.m-page__meta{margin-top:var(--m-s-3)}
.entry-content{--m-edge:max(var(--m-gutter),calc((100% - var(--m-max))/2 + var(--m-gutter)))}
.entry-content > :not(.alignfull){max-width:var(--m-measure);margin-left:var(--m-edge);margin-right:var(--m-gutter)}
.entry-content > .alignwide{max-width:calc(var(--m-max) - 2 * var(--m-gutter))}
.entry-content > .alignfull{max-width:none;margin-inline:0}
.entry-content > :not(.alignfull) + :not(.alignfull){margin-top:var(--m-s-4)}
.entry-content > h2{margin-top:var(--m-s-7)}
.entry-content > h3,.entry-content > h4{margin-top:var(--m-s-6)}
.entry-content > .alignfull + :not(.alignfull),.entry-content > :not(.alignfull) + .alignfull{margin-top:var(--m-section)}
.entry-content > .wp-block-image img{border-radius:var(--m-r-sm)}
.entry-content :where(ul,ol){padding-inline-start:1.25em}
.entry-content :where(ul:not([class]),ol:not([class]),.wp-block-list:not(.m-tags)) > li + li{margin-top:var(--m-s-2)}
.entry-content :where(li)::marker{color:var(--m-text-2)}
.entry-content :where(blockquote){padding-left:var(--m-s-5);border-left:2px solid var(--m-rule);font:300 1.3125rem/1.45 var(--m-serif);color:var(--m-text)}
.entry-content :where(.wp-block-image){margin:0}
.entry-content .wp-block-separator:not(.m-rule){border:0;border-top:1px solid var(--m-hairline);background:none;opacity:1;width:auto}
.wp-block-buttons{gap:var(--m-s-3)}

/* Block editor mappings for the supplied components */
.wp-block-separator.m-rule.m-rule.m-rule{display:block;width:44px;height:2px;background:var(--m-rule);border:0;opacity:1;margin:var(--m-s-5) 0}
.m-hero__copy .wp-block-buttons{margin-top:var(--m-s-4)}
.m-hero__media,.m-showcase__media{margin:0}
.m-hero__media img,.m-showcase__media img{border-radius:0}
.m-split--end{align-items:end}
.m-split--end > :last-child{justify-self:start}
.m-steps--2{grid-template-columns:1fr 1fr}
.m-steps + .m-accordion{margin-top:var(--m-s-7)}
.m-kicker--dash + .m-h2{margin-top:18px}
.m-split .m-kicker:not(.m-kicker--dash) + .m-h1{margin-top:20px}
.m-showcase__tile{position:relative}
.m-showcase__label a{color:inherit;text-decoration:none}
.m-showcase__label a::after{content:"";position:absolute;inset:0;z-index:1}
.m-showcase__label a:focus-visible{outline:0}
.m-showcase__label a:focus-visible::after{outline:2px solid var(--m-focus);outline-offset:-2px}
.m-proof__value{margin:0}
.m-proof__label{margin-bottom:0}
.m-testimonial blockquote{margin:0;padding:0;border:0;font:inherit}
.m-testimonial__by{flex-direction:column;align-items:flex-start;gap:0}
.m-testimonial__name,.m-testimonial__meta{margin:0}
.m-accordion .wp-block-details{margin:0}

/* Posts list and pagination (index, archive, search) */
.m-pagination{margin-top:var(--m-s-7)}
.m-pagination .nav-links{display:flex;flex-wrap:wrap;gap:var(--m-s-4);align-items:center}
.m-pagination .page-numbers{font:500 var(--m-fs-kicker)/1 var(--m-sans);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--m-text-2);padding:10px 0}
.m-pagination .page-numbers.current{color:var(--m-text);border-bottom:2px solid var(--m-rule)}

/* Static Demo only: small layout helpers (everything else is the shared system) */
.m-demo-actions{display:flex;flex-wrap:wrap;gap:var(--m-s-4);align-items:center;margin-top:var(--m-s-5)}

/* ---------- 15. INNER PAGE COMPONENTS (shared by About, Our team and other inner pages) ---------- */
.m-crumbs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;font-size:var(--m-fs-caption);color:var(--m-text-2)}
.m-crumbs li + li::before{content:'/';margin-right:8px;opacity:.5}
.m-crumbs a{color:inherit;text-decoration:none}
.m-crumbs a:hover{color:var(--m-text)}
.m-crumbs [aria-current]{color:var(--m-text)}
.m-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.m-pill,.m-tags > li{display:inline-flex;align-items:center;gap:8px;min-height:36px;margin:0;padding:0 16px;border-radius:var(--m-r-pill);border:1px solid var(--m-hairline-strong);background:transparent;color:var(--m-text-body);font:400 .875rem/1 var(--m-sans);cursor:default}

/* ---------- 16. MORE INNER PAGE COMPONENTS (lists, rows, panels, cards, forms) ---------- */
[id]{scroll-margin-top:24px}
.m-crumbs-wrap{padding-block:var(--m-s-5)}
.m-hint--img{margin-block:var(--m-s-3)}
.m-hero__copy > .m-kicker:first-child{margin-top:0}
.m-flow--start{justify-self:start}
.m-kicker--sub{margin-bottom:var(--m-s-4)}
.m-kicker--spaced{margin-top:var(--m-s-6)}
.m-small--note{margin-top:var(--m-s-6);max-width:var(--m-measure)}
.m-steps--1{grid-template-columns:1fr}
.m-grid--wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:var(--m-s-8)}
.m-stack-gap--rows{display:grid;gap:var(--m-s-8)}
.m-pagehead__actions{display:flex;flex-wrap:wrap;gap:var(--m-s-4);align-items:center;margin-top:var(--m-s-6)}
.m-pagehead__actions .wp-block-buttons{margin:0}

/* Ticked list with a short rule marker */
.m-list,.wp-block-list.m-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--m-s-3)}
.entry-content .wp-block-list.m-list > li{margin:0}
.m-list li{position:relative;padding-left:30px}
.m-list li::before{content:'';position:absolute;left:0;top:.82em;width:16px;height:2px;background:var(--m-rule)}

/* Ruled term and definition rows (block version: two paragraphs per row) */
.m-rows{margin:0;border-top:1px solid var(--m-hairline)}
.m-row{display:grid;grid-template-columns:minmax(120px,1fr) 2.2fr;gap:var(--m-s-5);padding:var(--m-s-5) 0;border-bottom:1px solid var(--m-hairline);align-items:baseline}
.m-row > *{margin:0;min-width:0}
.m-row__term{font:300 1.25rem/1.25 var(--m-serif);color:var(--m-text)}
.m-row__def{color:var(--m-text-body)}
@media (max-width:640px){.m-row{grid-template-columns:1fr;gap:var(--m-s-2)}}

/* Panel (holds a form) */
.m-panel{padding:clamp(24px,3vw,40px);background:var(--m-surface-raised);border-radius:var(--m-r-sm);box-shadow:inset 0 0 0 1px var(--m-hairline)}

/* Flat ruled link card (block version: the heading link stretches over the whole card) */
.m-card--plain{background:transparent;box-shadow:none;border-top:1px solid var(--m-hairline);border-radius:0;overflow:visible}
.m-card--plain .m-card__body{padding:var(--m-s-6) 0 0}
.m-card--link .m-card__title a{color:inherit;text-decoration:none}
.m-card--link .m-card__title a::after{content:"";position:absolute;inset:0;z-index:1}
.m-card--link:hover{border-top-color:var(--m-hairline-strong)}
.m-card--link:focus-within{outline:2px solid var(--m-focus);outline-offset:3px}
.m-card__body > *{margin:0}
.m-card__foot{margin-top:auto;padding-top:var(--m-s-4)}
.m-split > *,.m-grid > *{min-width:0}
.m-btn--tertiary{white-space:normal;text-align:left}

/* Page head and in-page navigation */
.m-pagehead{padding-block:clamp(40px,6vw,88px) clamp(40px,5vw,72px)}
.m-pagehead .m-crumbs{margin-bottom:var(--m-s-7)}
.m-pagehead .m-h1{margin-top:18px}
.m-subnav{min-width:0;background:var(--m-ground);border-top:1px solid var(--m-hairline);border-bottom:1px solid var(--m-hairline)}
.m-subnav__list{display:flex;gap:var(--m-s-6);list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.m-subnav__list::-webkit-scrollbar{display:none}
.m-subnav__list > li{margin:0}
.m-subnav__link{display:block;padding:18px 0 16px;font:500 .6875rem/1 var(--m-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--m-text-2);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;transition:color var(--m-dur),border-color var(--m-dur)}
.m-subnav__link:hover{color:var(--m-text);border-color:var(--m-text)}
.m-subnav__link:focus-visible{outline:2px solid var(--m-focus);outline-offset:-2px}
.m-stack-gap > * + *{margin-top:var(--m-s-4)}
.m-stack-gap--rows > * + *{margin-top:0}

/* Fluent Forms, styled with the same tokens as the supplied form fields */
.fluentform .ff-el-group{margin-bottom:var(--m-s-5)}
.fluentform .ff-el-input--label label{display:block;font:500 var(--m-fs-label)/1.3 var(--m-sans);color:var(--m-text);letter-spacing:.01em;margin-bottom:var(--m-s-2)}
.fluentform .ff-el-input--label.ff-el-is-required label::after{color:var(--m-text-2)}
.fluentform .ff-el-form-control{width:100%;min-height:52px;padding:14px 18px;font:400 1rem/1.4 var(--m-sans);color:var(--m-text);background:var(--m-field-bg);border:1px solid var(--m-hairline-strong);border-radius:var(--m-r-md);box-shadow:none;transition:border-color var(--m-dur) var(--m-ease),box-shadow var(--m-dur) var(--m-ease)}
.fluentform .ff-el-form-control:hover{border-color:var(--m-text-2)}
.fluentform .ff-el-form-control:focus{outline:none;border-color:var(--m-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--m-focus) 24%,transparent);background:var(--m-field-bg);color:var(--m-text)}
.fluentform textarea.ff-el-form-control{min-height:132px;resize:vertical}
.fluentform select.ff-el-form-control{padding-right:52px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--m-text) 50%),linear-gradient(135deg,var(--m-text) 50%,transparent 50%);background-position:calc(100% - 24px) 55%,calc(100% - 18px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.fluentform .ff-el-form-check{margin-bottom:var(--m-s-2)}
.fluentform .ff-el-form-check-label{display:flex;gap:12px;align-items:flex-start;font:400 var(--m-fs-small)/1.5 var(--m-sans);color:var(--m-text-body);cursor:pointer}
.fluentform .ff-el-form-check-input{width:20px;height:20px;margin:1px 0 0;flex:none}
.fluentform .ff-el-help-message{font-size:var(--m-fs-caption);line-height:1.45;color:var(--m-text-2);margin-top:var(--m-s-2)}
.fluentform .text-danger,.fluentform .error{font-size:var(--m-fs-caption);color:#9a3b2f;margin-top:var(--m-s-2)}
.fluentform .ff-el-is-error .ff-el-form-control{border-color:#9a3b2f}
.fluentform .ff-message-success{margin-top:var(--m-s-4);padding:var(--m-s-4) var(--m-s-5);border:1px solid var(--m-hairline-strong);border-radius:var(--m-r-md);background:var(--m-surface-raised);color:var(--m-text);box-shadow:none}
.fluentform .ff_submit_btn_wrapper{margin:0}
.fluentform .ff-btn-submit,.fluentform .ff-btn-submit:hover,.fluentform .ff-btn-submit:focus{background:transparent;color:var(--m-text);border:1px solid var(--m-hairline-strong);border-radius:var(--m-r-pill);padding:16px 32px;font:500 .8125rem/1 var(--m-sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;opacity:1}
.fluentform .ff-btn-submit:hover{border-color:var(--m-text)}
.fluentform .ff-btn-submit:focus-visible{outline:2px solid var(--m-focus);outline-offset:3px}
.fluentform .ff-t-container{gap:var(--m-s-5)}

/* Footer call-back form (Fluent Forms) on the charcoal footer */
.m-footer__wide .fluentform .ff-el-group{margin:0}
.m-footer__wide .fluentform fieldset,.m-footer__wide .fluentform .ff-el-input--label label{margin:0}
.m-footer__wide .fluentform form{display:grid;gap:var(--m-s-3);max-width:540px}
.m-footer__wide .fluentform .ff-el-form-control{background:var(--m-field-bg);color:var(--m-text);border-color:var(--m-hairline-strong)}
.m-footer__wide .fluentform .ff-btn-submit{background:var(--m-btn-bg,var(--m-link));color:var(--m-ground);border-color:transparent}
/* Fluent Forms help messages: show as plain hint text instead of an info icon */
.fluentform .ff-el-input--label{display:block}
.fluentform .ff-el-tooltip{display:block;margin:0 0 var(--m-s-2);cursor:default;pointer-events:none}
.fluentform .ff-el-tooltip svg{display:none}
.fluentform .ff-el-tooltip::after{content:attr(data-content);font:400 var(--m-fs-caption)/1.45 var(--m-sans);color:var(--m-text-2)}
.fluentform .ff-el-input--label label{margin-bottom:var(--m-s-1,4px)}
/* Paragraph rhythm: .m-body{margin:0} otherwise cancels the .m-flow gap between stacked paragraphs */
.m-flow > .m-body + .m-body,.m-flow > .m-body + .m-small{margin-top:var(--m-s-4)}
.m-flow > .m-rows + .m-body,.m-flow > .m-body + .m-rows,.m-flow > .m-body + .wp-block-buttons{margin-top:var(--m-s-5)}
/* Page-builder pages: container groups sit flush with the full-width sections around them (no loose-content gap, aligned to the grid) */
.entry-content > .m-container{max-width:var(--m-max);margin-left:auto;margin-right:auto}
.entry-content > .m-container + .alignfull,.entry-content > .alignfull + .m-container{margin-top:0}

/* Sticky header: stays at the top while scrolling (sits below the admin bar when logged in) */
body{overflow-x:clip}
.m-nav{position:sticky;top:0}
.admin-bar .m-nav{top:32px}
@media (max-width:782px){.admin-bar .m-nav{top:46px}}
@media (max-width:600px){.admin-bar .m-nav{top:0}}
html{scroll-padding-top:100px}
@media (prefers-reduced-motion:no-preference){.m-nav{transition:box-shadow .2s}}