/* MassAffinity theme
   Adapted from the client's v3 stylesheet (04/11/2026) for WordPress core blocks.
   Layout is fluid: sizes use clamp() and theme.json's fluid presets, and columns wrap by available space
   (flex-wrap and auto-fit grids) instead of switching at breakpoints. The only width conditions left are
   the client's "dark mode on larger screens only" rule and WordPress's own mobile menu toggle. */

/* metric-matched fallback so text doesn't jump when DM Sans arrives (DM Sans itself is registered in theme.json) */
@font-face{font-family:"DM Sans fallback";src:local("Arial");ascent-override:97%;descent-override:24%;line-gap-override:0%;size-adjust:103%}

/* ---------- document ---------- */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:light}
@media (prefers-color-scheme:dark) and (min-width:821px){:root:not([data-theme="light"]){color-scheme:dark}}
:root[data-theme="dark"]{color-scheme:dark}
html{scroll-padding-top:calc(108px + env(safe-area-inset-top,0px));scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#FFFFFF}
@media (prefers-color-scheme:dark) and (min-width:821px){:root:not([data-theme="light"]) body{background:#0F1E1F}}
:root[data-theme="dark"] body{background:#0F1E1F}

/* block theme plumbing: sections sit flush, one after another */
:root .wp-site-blocks > *,:root .ma-main > *,:root .ma-main .wp-block-post-content > *{margin-block:0}
.wp-site-blocks > header.wp-block-template-part{position:sticky;top:env(safe-area-inset-top,0px);z-index:20}
.admin-bar .wp-site-blocks > header.wp-block-template-part{top:calc(var(--wp-admin--admin-bar--height,32px) + env(safe-area-inset-top,0px))}
html:has(> body.admin-bar){scroll-padding-top:calc(108px + var(--wp-admin--admin-bar--height,32px) + env(safe-area-inset-top,0px))}

/* ---------- tokens ---------- */
.ma{--ma-ink:#013639;--ma-text:#232323;--ma-muted:#4F5E5E;--ma-teal:#2FBEBC;--ma-teal-ink:#157677;--ma-bg:#FFFFFF;--ma-soft:#F1FBFE;--ma-line:#E3E8E8;--ma-btn-text:#FFFFFF;
  --ma-gutter:var(--wp--preset--spacing--gutter,clamp(1.25rem,4vw,2.5rem));--ma-gap:var(--wp--preset--spacing--gap,clamp(1.5rem,5vw,4.5rem));
  font-family:"DM Sans","DM Sans fallback",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ma-text);background:var(--ma-bg);line-height:1.5;-webkit-font-smoothing:antialiased}
@media (prefers-color-scheme:dark) and (min-width:821px){:root:not([data-theme="light"]) .ma{--ma-ink:#E6F7F6;--ma-text:#E1E8E8;--ma-muted:#A9BCBB;--ma-teal-ink:#5FD3D1;--ma-bg:#0F1E1F;--ma-soft:#152B2C;--ma-line:#26403F;--ma-btn-text:#0F1E1F}
  :root:not([data-theme="light"]) .ma .ma-on-dark{display:block}:root:not([data-theme="light"]) .ma .ma-on-light{display:none}}
:root[data-theme="dark"] .ma{--ma-ink:#E6F7F6;--ma-text:#E1E8E8;--ma-muted:#A9BCBB;--ma-teal-ink:#5FD3D1;--ma-bg:#0F1E1F;--ma-soft:#152B2C;--ma-line:#26403F;--ma-btn-text:#0F1E1F}
:root[data-theme="dark"] .ma .ma-on-dark{display:block}:root[data-theme="dark"] .ma .ma-on-light{display:none}
.ma .ma-on-dark{display:none}
@media (max-width:820px){:root{color-scheme:only light}}   /* the client's rule: phones and portrait tablets stay light */

/* ---------- base ---------- */
.ma *,.ma *::before,.ma *::after{box-sizing:border-box}
.ma a{color:var(--ma-teal-ink)}
.ma .ma-wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--ma-gutter)}
.ma h1,.ma h2,.ma h3{color:var(--ma-ink);margin:0;font-weight:400;letter-spacing:-0.01em}
.ma h1{font-size:var(--wp--preset--font-size--hero);line-height:1.06;font-weight:300}
.ma h2{font-size:var(--wp--preset--font-size--heading);line-height:1.12;font-weight:300}
.ma h3{font-size:var(--wp--preset--font-size--case-title);line-height:1.2}
.ma h1,.ma h2{text-wrap:balance}
.ma p{margin:0}
.ma .ma-kicker{font-size:var(--wp--preset--font-size--kicker);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ma-teal-ink);margin:0 0 14px}
.ma .ma-kicker + *{margin-block-start:0}
.ma .ma-lead{font-size:var(--wp--preset--font-size--lead);color:var(--ma-text);max-width:620px}
.ma .ma-intro{margin-block-start:16px;color:var(--ma-text);max-width:470px}
section.ma{padding-block:var(--wp--preset--spacing--section,clamp(4rem,1rem + 11vw,11.875rem));margin:0}
.ma :focus-visible{outline:2px solid var(--ma-teal);outline-offset:3px}

/* buttons: core Button block. Default = filled pill, "Outline" style = ghost pill */
.ma .wp-block-buttons.ma-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:24px}
.ma .wp-block-button__link{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;background:var(--ma-ink);color:var(--ma-btn-text);
  text-decoration:none;font-weight:600;font-size:16px;line-height:1.2;border:1px solid var(--ma-ink);transition:background-color .2s ease,border-color .2s ease}
.ma .wp-block-button__link:hover{background:var(--ma-teal-ink);border-color:var(--ma-teal-ink);color:var(--ma-btn-text)}
/* the outline edge is strong enough to read at the same size as the filled button (both are 48px tall) */
.ma .wp-block-button.is-style-outline > .wp-block-button__link{background:transparent;color:var(--ma-ink);border:1px solid color-mix(in srgb,var(--ma-ink) 35%,transparent);padding:0 22px}
.ma .wp-block-button.is-style-outline > .wp-block-button__link:hover{border-color:var(--ma-ink);color:var(--ma-ink)}

/* ---------- header ---------- */
.ma-nav{background:color-mix(in srgb,var(--ma-bg) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
.ma-nav > .ma-wrap{display:flex;align-items:center;justify-content:space-between;gap:clamp(12px,2.4vw,30px);min-height:clamp(76px,6vw + 50px,104px);padding-block:10px}
.ma-nav > .ma-wrap > *{margin:0}
.ma .ma-logo{display:block;width:clamp(96px,6vw + 60px,118px);line-height:0;flex:0 0 auto}
.ma .ma-logo svg{width:100%;height:auto}
.ma-nav .wp-block-navigation{flex:1 1 auto;justify-content:flex-end;gap:clamp(14px,2.4vw,30px);font-size:15px}
.ma-nav .wp-block-navigation .wp-block-navigation__container{gap:clamp(14px,2.4vw,30px);justify-content:flex-end}
.ma .wp-block-navigation a.wp-block-navigation-item__content{color:var(--ma-ink);text-decoration:none}
.ma .wp-block-navigation a.wp-block-navigation-item__content:hover{color:var(--ma-teal-ink)}
.ma-nav .wp-block-navigation__responsive-container-open{color:var(--ma-ink)}
.ma-nav .wp-block-navigation__responsive-container.is-menu-open{background:var(--ma-bg);color:var(--ma-ink);padding:clamp(20px,4vw,40px)}
.ma-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{font-size:var(--wp--preset--font-size--lead)}
.ma-nav .ma-nav-cta{flex:0 0 auto;margin:0}
.ma-nav .ma-nav-cta .wp-block-button__link{min-height:42px;padding:0 18px;font-size:15px}

/* ---------- hero ---------- */
.ma-hero{padding:clamp(28px,min(7vw,7vh),96px) 0 0 !important;overflow:hidden}
.ma-hero .ma-ctas{margin-block-start:clamp(18px,3.6vh,32px) !important}
.ma-hero .ma-lead{margin-block-start:clamp(12px,2.4vh,22px)}
.ma-hero .ma-art{margin-top:clamp(8px,min(3vw,2.6vh),32px);width:100%;max-width:1440px;margin-left:auto;margin-right:auto;line-height:0;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 93%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 93%,transparent 100%)}
.ma-hero .ma-art svg{width:100%;height:auto;display:block}
.ma .ma-anim-line{stroke-dasharray:1;stroke-dashoffset:1;animation:ma-draw 2.6s cubic-bezier(.55,.1,.25,1) .2s forwards}
.ma .ma-anim-dots{clip-path:inset(0 100% 0 0);animation:ma-reveal 2.6s cubic-bezier(.55,.1,.25,1) .2s forwards}
.ma .ma-anim-end{opacity:0;animation:ma-pop .5s ease-out 2.7s forwards}
@keyframes ma-draw{to{stroke-dashoffset:0}}
@keyframes ma-reveal{to{clip-path:inset(0 0 0 0)}}
@keyframes ma-pop{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.ma .ma-anim-line{animation:none;stroke-dashoffset:0}.ma .ma-anim-dots{animation:none;clip-path:none}.ma .ma-anim-end{animation:none;opacity:1}}
.ma .ma-hero-anim:not(.ma-ready) > div{visibility:hidden}
.ma .ma-hero-anim svg{width:100%;height:auto;display:block}
.ma .ma-h-dot{transform-box:fill-box;transform-origin:center;transition:opacity .5s ease,transform .45s ease,fill .45s ease}

/* ---------- two-column sections (who we help, pipeline): 5 : 7, wrapping when space runs out ----------
   Column bases are in the same ratio as their grow factors, so side by side the columns sit exactly where the
   client's grid put them, and they add up so the columns stack at the same screen width as the client's design. The page line plans its route through the gaps, so this keeps it on the same path. */
.ma-partner .ma-wrap{display:flex;flex-wrap:wrap;gap:var(--ma-gap)}
.ma-partner .ma-wrap > *{margin:0}
.ma-partner .ma-wrap > :first-child{flex:5 1 18.6rem;min-width:0}
.ma-partner .ma-wrap > :last-child{flex:7 1 26rem;min-width:0}
:root .ma.ma-pipe.ma-pipe .ma-wrap > :first-child{flex-basis:16.66rem}   /* the card's padding leaves less room, so smaller bases keep the same switch point */
:root .ma.ma-pipe.ma-pipe .ma-wrap > :last-child{flex-basis:23.3rem}
.ma .ma-items{list-style:none;margin:0;padding:0}
.ma .ma-items li{display:flex;flex-wrap:wrap;gap:4px 20px;padding:22px 0;margin:0;border-top:1px solid var(--ma-line)}
.ma .ma-items li:last-child{border-bottom:1px solid var(--ma-line)}
.ma .ma-items li strong{flex:0 0 12.5rem;color:var(--ma-ink);font-weight:600}
.ma .ma-items li span{flex:1 1 15rem;color:var(--ma-muted)}
.ma .ma-also{margin-block-start:28px;color:var(--ma-muted)}
.ma .ma-also b,.ma .ma-also strong{color:var(--ma-ink);font-weight:600}

/* ---------- discovery engine: animation then text; on narrow screens the text goes first ---------- */
.ma-engine .ma-eng-grid{display:flex;flex-wrap:wrap-reverse;align-items:center;gap:var(--ma-gap)}
.ma-engine .ma-eng-grid > *{margin:0}
.ma-eng-anim{flex:1 1 22.3rem;display:flex;justify-content:center;align-items:center;min-width:0}
.ma-eng-anim canvas{display:block;width:100%;max-width:480px;height:auto;aspect-ratio:1/1}
.ma-eng-text{flex:1 1 22.3rem;min-width:0}
.ma-eng-text .ma-lead{margin-block-start:14px}
.ma .ma-eng-steps{list-style:none;margin:22px 0 0;padding:0}
.ma .ma-eng-steps li{padding:12px 0;margin:0;border-top:1px solid var(--ma-line);font-size:16px;line-height:1.5;color:var(--ma-text);transition:color .6s ease}
.ma .ma-eng-steps li:last-child{border-bottom:1px solid var(--ma-line)}
.ma .ma-eng-steps b,.ma .ma-eng-steps strong{color:var(--ma-ink);font-weight:600;transition:color .6s ease}
.ma-eng-live .ma-eng-steps li,.ma-eng-live .ma-eng-steps li b,.ma-eng-live .ma-eng-steps li strong{color:var(--ma-muted)}
.ma-eng-live .ma-eng-steps li.is-on{color:var(--ma-text)}
.ma-eng-live .ma-eng-steps li.is-on b,.ma-eng-live .ma-eng-steps li.is-on strong{color:var(--ma-ink)}

/* ---------- proof points: rotating case studies on one fixed-height stage ---------- */
.ma-car{margin-top:clamp(28px,4vw,44px);overflow:hidden;overflow:clip}
.ma-car-stage{display:grid}
.ma-case{grid-area:1/1;display:flex;flex-wrap:wrap;gap:clamp(18px,5vw,72px);align-items:flex-start;opacity:0;visibility:hidden;
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1),visibility 0s linear .6s}
.ma-case.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1),visibility 0s}
.ma-case-text{flex:5 1 18.6rem;min-width:0;padding-top:clamp(0px,6vw - 2rem,4rem)}
.ma-case-text > *{margin:0}
.ma-case-num{margin:0 0 10px !important;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ma-teal-ink,#157677)}
.ma-case-num span{color:var(--ma-muted);font-weight:400}
.ma .ma-case h3{margin:0 0 12px;font-weight:400;line-height:1.2;color:var(--ma-ink)}
.ma-case-text h3 + p,.ma-case-text p:last-child{margin:0;color:var(--ma-text);max-width:30em}
.ma-case-text p.ma-case-src{margin:14px 0 0;font-size:13px;color:var(--ma-muted)}
.ma-case-text p.ma-case-src a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ma-case-text p.ma-case-src a:hover{color:var(--ma-ink)}
.ma-case-graph{flex:7 1 26rem;min-width:0;background:var(--ma-soft);border-radius:var(--ma-line-r,24px);padding:clamp(12px,2vw,24px);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.ma-graph{width:100%;height:100%;display:block;font-family:inherit}
.ma-graph .g-axis{stroke:var(--ma-line);stroke-width:1.5}
.ma-graph .g-lab{fill:var(--ma-muted);font-size:13px}
.ma-graph .g-note{fill:var(--ma-ink);font-size:12px;font-weight:600}
.ma-graph .g-tag{fill:var(--ma-muted);font-size:10px;letter-spacing:.12em;opacity:.8}
.ma-graph .g-line{fill:none;stroke:#2FBEBC;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ma-graph .g-pt{fill:#A7DFDD}
.ma-graph .g-pt-faint{fill:#A7DFDD;opacity:.7}
.ma-graph .g-hit{fill:var(--ma-ink)}
.ma-graph .g-stick{stroke:#A7DFDD;stroke-width:2;stroke-linecap:round}
.ma-graph .g-stick-hit{stroke:var(--ma-ink);stroke-width:2.6;stroke-linecap:round}
.ma-graph .g-stick-mid{stroke:#2FBEBC;stroke-width:3;stroke-linecap:round}
.ma-graph .g-bar{fill:#A7DFDD}
.ma-graph .g-bar-hit{fill:var(--ma-ink)}
.ma-graph .g-trace{fill:none;stroke:#2FBEBC;stroke-width:1.4;stroke-linejoin:round}
.ma-graph .g-trace-low{fill:none;stroke:#A7DFDD;stroke-width:1.4;stroke-linejoin:round}
.ma-graph .g-trace-hit{fill:none;stroke:var(--ma-ink);stroke-width:2.2;stroke-linejoin:round}
.ma-graph .g-small{font-size:11px}
.ma-graph .g-grid{stroke:var(--ma-line);stroke-width:1;stroke-dasharray:2 4}
.ma-graph .g-line-hit{fill:none;stroke:var(--ma-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ma-graph .g-line-pale{fill:none;stroke:#A7DFDD;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ma-graph .g-peak-hit{stroke:var(--ma-ink);stroke-width:1.2;stroke-linecap:butt}
.ma-graph .g-peak{stroke:#A7DFDD;stroke-width:1.2;stroke-linecap:butt}
.ma-car-controls{display:flex;align-items:center;gap:6px;margin-top:clamp(18px,2.5vw,28px)}
.ma-car-controls button{appearance:none;border:0;background:none;padding:0;cursor:pointer;color:var(--ma-ink);-webkit-tap-highlight-color:transparent}
.ma-car-prev,.ma-car-next,.ma-car-pause{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ma-line) !important;transition:border-color .2s ease}
.ma-car-prev:hover,.ma-car-next:hover,.ma-car-pause:hover{border-color:var(--ma-ink) !important}
.ma-car-controls svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ma-car-pause{margin-left:auto}
.ma-car-pause .i-play{display:none;fill:currentColor;stroke:none}
/* countdown to the next slide: a ring drawn round the pause button over the slide's 7 seconds; it freezes while paused
   (hover, keyboard focus, off-screen or the pause button) and carries on from there */
.ma-car-pause{position:relative}
.ma-car-controls .ma-car-ring{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);transform:rotate(-90deg);pointer-events:none;overflow:visible}
.ma-car-ring circle{fill:none;stroke:var(--ma-ink);stroke-width:2;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;opacity:0}
.ma-car-pause.is-counting .ma-car-ring circle{opacity:1;animation:ma-car-count var(--ma-car-t,7000ms) linear forwards}
.ma-car-pause.is-held .ma-car-ring circle{animation-play-state:paused}   /* paused: the ring freezes where it is */
@keyframes ma-car-count{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.ma-car.is-paused .ma-car-pause .i-play{display:block}.ma-car.is-paused .ma-car-pause .i-pause{display:none}
.ma-car-dots{display:flex;align-items:center;gap:2px;margin:0 6px}
.ma-car-dot{width:28px;height:44px;display:inline-flex;align-items:center;justify-content:center;position:relative}
.ma-car-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:#A7DFDD;transition:background .3s ease,transform .3s ease}
.ma-car-dot.is-on::before{background:var(--ma-ink);transform:scale(1.3)}
.ma-car-dot:focus-visible,.ma-car-controls button:focus-visible{outline:2px solid #2FBEBC;outline-offset:2px}
.ma-car-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.ma-case,.ma-case.is-on{transition:none}}

/* ---------- pipeline: a flat dark teal card within the page margins ---------- */
:root .ma.ma-pipe.ma-pipe{background:transparent}
:root .ma.ma-pipe.ma-pipe .ma-wrap{--ma-bg:#013639;--ma-ink:#F1FBFE;--ma-text:#D3E6E5;--ma-muted:#A7C4C2;--ma-line:rgba(241,251,254,.16);--ma-teal-ink:#5FD3D1;--ma-btn-text:#013639;
  background:#013639;color-scheme:dark;border-radius:var(--ma-line-r,24px);padding:clamp(32px,5vw,64px) clamp(24px,4.5vw,64px);max-width:min(1100px,calc(100% - 2 * var(--ma-gutter)));margin:0 auto}
:root .ma.ma-pipe .ma-kicker{color:#C9B4FB}
:root .ma.ma-pipe .ma-kicker::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#8854F6;margin-right:10px;vertical-align:1px}
:root .ma.ma-pipe .wp-block-button.is-style-outline > .wp-block-button__link{color:#F1FBFE;border-color:rgba(241,251,254,.35)}
:root .ma.ma-pipe .wp-block-button.is-style-outline > .wp-block-button__link:hover{border-color:#C9B4FB;color:#FFFFFF}
:root .ma.ma-pipe li strong{color:#F1FBFE}
:root .ma.ma-pipe h2,:root .ma.ma-pipe p{color:var(--ma-text)}
:root .ma.ma-pipe h2{color:var(--ma-ink)}

/* ---------- contact: text and artwork side by side, then the closing line and the form across the full width ---------- */
.ma-contact .ma-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:clamp(28px,4vw,56px) var(--ma-gap)}
.ma-contact .ma-wrap > *{margin:0}
.ma-contact .ma-wrap > :first-child{flex:7 1 26rem;min-width:0}
.ma-contact .ma-lead{margin-block-start:20px}
.ma-contact .ma-ctas{margin-block-start:32px !important}
/* 300px on phones rising to 440px on wide screens, as in the client's design; the page line's final field is laid
   out on this artwork, so its size decides where the line comes in */
.ma-contact .ma-art{flex:5 1 18.6rem;max-width:clamp(300px,300px + (100vw - 820px) * .35,440px);line-height:0}
.ma-contact .ma-art svg{width:100%;height:auto;aspect-ratio:1/1}
.ma-live-contact .ma-line-end .ma-art{visibility:hidden}   /* the live field drawn by the page line replaces the still graph */
.ma .ma-close-hero{position:relative;flex:1 1 100%;padding-top:clamp(34px,5vw,58px);margin:0 auto !important;font-weight:300;font-size:var(--wp--preset--font-size--close);
  line-height:1.12;color:var(--ma-ink);max-width:16em;text-align:center;text-wrap:balance}
.ma .ma-close-hero::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(100%,360px);height:1px;
  background:linear-gradient(to right,transparent,#2FBEBC 28%,#2FBEBC 72%,transparent);opacity:.55}

/* ---------- the enquiry form: the Gravity Forms block inside the #discuss group, under the closing line ----------
   Works with both Gravity Forms themes. Orbital (the default) is styled through its CSS API variables, set with
   !important because Gravity Forms prints its own per-form values inline; the 2.5 theme is styled through the
   standard field classes. Rules are scoped to #discuss so they outrank Gravity Forms' own selectors. */
.ma .ma-form{flex:1 1 100%;width:100%;max-width:720px;margin-inline:auto !important;scroll-margin-top:calc(124px + env(safe-area-inset-top,0px))}
#discuss .gform_wrapper{
  --gf-color-primary:var(--ma-ink) !important;--gf-color-primary-darker:var(--ma-teal-ink) !important;
  --gf-ctrl-bg-color:var(--ma-bg) !important;--gf-ctrl-bg-color-hover:var(--ma-bg) !important;--gf-ctrl-border-color:var(--ma-line) !important;
  --gf-ctrl-radius:12px !important;--gf-ctrl-label-color-primary:var(--ma-ink) !important;--gf-ctrl-desc-color:var(--ma-muted) !important;
  --gf-form-gap-x:clamp(16px,2.4vw,24px) !important;--gf-form-gap-y:24px !important;
  --gf-ctrl-btn-bg-color-primary:var(--ma-ink) !important;--gf-ctrl-btn-bg-color-hover-primary:var(--ma-teal-ink) !important;
  --gf-ctrl-btn-color-primary:var(--ma-btn-text) !important;--gf-ctrl-btn-radius:999px !important;
  margin:0;font:inherit;color:var(--ma-text)}
#discuss .gform_heading{display:none}
#discuss .gform_fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:24px clamp(16px,2.4vw,24px);margin:0;padding:0;list-style:none}
#discuss .gfield{grid-column:1/-1;margin:0;padding:0;min-width:0;border:0}
#discuss .gfield--width-half,#discuss .gf_left_half,#discuss .gf_right_half{grid-column:auto}
#discuss fieldset{border:0;margin:0;padding:0;min-width:0}

/* labels sit above the field, always visible (placeholders are hints, never the only label) */
#discuss .gfield_label,#discuss .gform-field-label:not(.gform-field-label--type-sub),#discuss legend.gfield_label{
  display:flex;align-items:baseline;gap:6px;margin:0 0 8px;padding:0;font-size:15px;font-weight:600;line-height:1.3;color:var(--ma-ink)}
#discuss .gfield_required,#discuss .gfield_required_text{margin:0;font-size:13px;font-weight:400;color:var(--ma-muted)}
#discuss .gform-field-label--type-sub,#discuss .ginput_complex label{display:block;margin-top:6px;font-size:13px;font-weight:400;color:var(--ma-muted)}
#discuss .gfield_description,#discuss .gform-field-description{margin-top:8px;padding:0;font-size:14px;color:var(--ma-muted)}

/* fields: one height, calm border, a clear teal focus halo; 16px text so phones don't zoom in */
#discuss input[type=text],#discuss input[type=email],#discuss input[type=tel],#discuss input[type=url],#discuss input[type=number],#discuss select,#discuss textarea{
  width:100%;min-height:52px;margin:0;padding:14px 18px;border:1px solid var(--ma-line);border-radius:12px;background:var(--ma-bg);color:var(--ma-text);
  font:inherit;font-size:16px;line-height:1.4;box-shadow:none;outline:2px solid transparent;outline-offset:1px;
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
#discuss textarea{min-height:10rem;resize:vertical}
#discuss input:hover,#discuss select:hover,#discuss textarea:hover{border-color:color-mix(in srgb,var(--ma-ink) 35%,transparent)}
#discuss input:focus,#discuss select:focus,#discuss textarea:focus{border-color:var(--ma-teal-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--ma-teal) 22%,transparent)}
#discuss ::placeholder{color:var(--ma-muted);opacity:.7;transition:opacity .2s ease}
#discuss :focus::placeholder{opacity:.4}
/* browser autofill keeps the page colours instead of a yellow or blue fill */
#discuss input:-webkit-autofill,#discuss input:-webkit-autofill:hover,#discuss input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ma-text);
  -webkit-box-shadow:0 0 0 1000px var(--ma-soft) inset;transition:background-color 9999s ease-out 0s}
#discuss .ginput_complex{display:flex;flex-wrap:wrap;gap:12px clamp(16px,2.4vw,24px)}
#discuss .ginput_complex > span{flex:1 1 12rem;margin:0;padding:0}
#discuss .gfield_checkbox,#discuss .gfield_radio{display:grid;gap:8px}
#discuss .gchoice{display:flex;gap:10px;align-items:flex-start}
#discuss .gchoice input{margin-top:4px;accent-color:var(--ma-ink)}

/* errors: shown next to the field, and the field itself turns red */
#discuss .gform_validation_errors,#discuss .validation_error{margin:0 0 24px;padding:14px 18px;border:1px solid #B42318;border-radius:12px;background:transparent;box-shadow:none;color:var(--ma-text);font-size:15px}
#discuss .gform_validation_errors > h2,#discuss .gform_submission_error{margin:0;font-size:15px;font-weight:600;line-height:1.4;color:#B42318}
#discuss .gfield_error input,#discuss .gfield_error textarea,#discuss .gfield_error select,#discuss [aria-invalid=true]{border-color:#B42318}
#discuss .gfield_error input:focus,#discuss .gfield_error textarea:focus,#discuss [aria-invalid=true]:focus{box-shadow:0 0 0 4px rgba(180,35,24,.15)}
#discuss .validation_message,#discuss .gfield_validation_message{margin-top:8px;padding:0;border:0;background:none;font-size:14px;color:#B42318}
#discuss .gfield_error .gfield_label{color:var(--ma-ink)}

/* submit: the page's own pill button */
#discuss .gform_footer,#discuss .gform_page_footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin:32px 0 0;padding:0}
#discuss .gform_footer .gform_button,#discuss .gform_footer input[type=submit],#discuss .gform_footer button[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:min(100%,12rem);margin:0;padding:0 28px;
  border:1px solid var(--ma-ink);border-radius:999px;background:var(--ma-ink);color:var(--ma-btn-text);box-shadow:none;
  font:inherit;font-size:16px;font-weight:600;line-height:1.2;letter-spacing:0;text-transform:none;cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease}
#discuss .gform_footer .gform_button:hover,#discuss .gform_footer input[type=submit]:hover,#discuss .gform_footer button[type=submit]:hover{background:var(--ma-teal-ink);border-color:var(--ma-teal-ink);color:var(--ma-btn-text)}
#discuss .gform_footer .gform_button:focus-visible,#discuss .gform_footer input[type=submit]:focus-visible{outline:2px solid var(--ma-teal);outline-offset:3px}
#discuss .gform_footer [disabled],#discuss .gform_footer .gform_button[aria-disabled=true]{opacity:.6;cursor:progress}
#discuss .gform_ajax_spinner,#discuss .gform-loader{margin:0}

/* after sending */
#discuss .gform_confirmation_message{padding:24px;border-radius:var(--ma-line-r,24px);background:var(--ma-soft);text-align:center;font-size:var(--wp--preset--font-size--lead);color:var(--ma-ink)}
@media (prefers-color-scheme:dark) and (min-width:821px){:root:not([data-theme="light"]) #discuss .validation_message,:root:not([data-theme="light"]) #discuss .gfield_validation_message,
  :root:not([data-theme="light"]) #discuss .gform_validation_errors > h2{color:#FDA29B}}

/* ---------- footer ---------- */
.ma-footer{padding:36px 0 48px;border-top:1px solid var(--ma-line);font-size:14px;color:var(--ma-muted)}
.ma-footer > .ma-wrap{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center}
.ma-footer > .ma-wrap > *{margin:0}
.ma .ma-copyright{margin:0}
.ma-footer .wp-block-navigation{font-size:14px;gap:8px 24px}
.ma-footer .wp-block-navigation .wp-block-navigation__container{gap:8px 24px;flex-wrap:wrap}
.ma-footer .wp-block-navigation a.wp-block-navigation-item__content{color:var(--ma-muted);text-decoration:underline;text-underline-offset:3px}
.ma-footer .wp-block-navigation a.wp-block-navigation-item__content:hover{color:var(--ma-ink)}

/* ---------- legal and other pages (the legal pages hold a Termly iframe added in the editor) ---------- */
.ma.ma-page{padding-block:clamp(3rem,1rem + 6vw,7rem)}
.ma-page > .ma-wrap > *{margin:0}
.ma-page .wp-block-post-title{font-size:var(--wp--preset--font-size--heading);font-weight:300;line-height:1.12;color:var(--ma-ink)}
.ma-page .wp-block-post-content{margin-block-start:clamp(24px,3vw,40px) !important;max-width:820px}
.ma-page .wp-block-post-content > * + *{margin-block-start:1.1em}
.ma-page .wp-block-post-content iframe{display:block;width:100%;max-width:100%;border:0}
.ma .ma-notfound .ma-lead{margin-block-start:16px}

/* ---------- page line (drawn by site.js) ---------- */
.ma-thread{position:absolute;top:0;left:0;pointer-events:none;z-index:15;overflow:visible}
.ma-thread-ghost{z-index:14}
.ma-wait{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.ma-wait.ma-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ma-wait{opacity:1;transform:none;transition:none}}