/*
Theme Name: M Clean
Theme URI: https://mclean.sg
Description: Child theme of Kadence for M Clean SG (Option F: Option D's look and effects + new sections). Scroll effects are CSS scroll-driven animations inside @supports, with full static fallbacks and no motion for prefers-reduced-motion.
Author: Fahmy for M Clean SG
Template: kadence
Version: 3.2.12
Requires at least: 6.5
Text Domain: mclean
*/

/* ---------- Fonts (self-hosted, latin only; SIL Open Font License) ---------- */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/instrument-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/instrument-serif-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/instrument-serif-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/caveat-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Caveat subset (13 KB): only the characters in the founder line and signature. Declared last, so it wins for
   these characters; the full file above is only downloaded if the team adds other letters. */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/caveat-used-v2.woff2") format("woff2");
	unicode-range: U+0020, U+002C, U+002E, U+0049, U+004D, U+0052, U+0061, U+0063-0069, U+006C-006F, U+0072-0075, U+0077, U+0079-007A; }

:root {
	--mc-navy: #064259; --mc-deep: #043449; --mc-hero-bg: #053A4F; --mc-teal: #0E8C8C; --mc-teal-text: #0A7272;
	--mc-bg: #F5FAFA; --mc-pale: #E7F7FE; --mc-line: #DCEBEF; --mc-sky: #11B4F5; --mc-aqua: #4DDADA;
	--mc-body: #2D3748; --mc-ink: #2D3748; --mc-muted: #4A5568; --mc-wa: #0C7F48; --mc-wa-float: #0E9F55;
	--mc-serif: "Instrument Serif", Georgia, serif; --mc-hand: "Caveat", cursive;
	--mc-wa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/%3E%3C/svg%3E");
}
html { scroll-behavior: smooth; } /* hero badge and service links; off with reduced motion */
body { -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
/* Visible focus outline on keyboard navigation */
:where(html) :focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--mc-navy) !important;
	outline-offset: 3px !important;
}
:where(html:not(.no-js)) .hide-focus-outline :focus-visible {
	outline: 3px solid var(--mc-navy) !important;
	outline-offset: 3px !important;
}
body:not(.home) #inner-wrap { padding-top: 88px; } /* room for the floating header on inner pages */

/* ---------- Header: status chip + floating pill ---------- */
.mc-status { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 14px; border-radius: 999px;
	background: rgba(245, 250, 250, .92); color: var(--mc-navy); font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.mc-status::before { content: ""; flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--mc-teal); }
.mc-status[data-open="false"]::before { background: #8FA3AB; }
.mc-head__chip { position: fixed; top: 20px; left: 24px; z-index: 30; margin: 0; }
.mc-pill { position: fixed; top: 16px; right: 24px; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px;
	border-radius: 14px; background: #fff; box-shadow: 0 4px 18px rgba(6, 66, 89, .12); }
.mc-brand { display: flex; align-items: center; gap: 8px; color: var(--mc-navy); font-size: 19px; font-weight: 700; letter-spacing: -.3px; text-decoration: none; }
.mc-brand:hover { color: var(--mc-navy); }
.mc-brand img { width: 30px; height: 30px; }
.mc-quote { display: inline-flex; align-items: center; min-height: 44px; margin-left: 8px; padding: 0 16px; border-radius: 10px;
	background: var(--mc-navy); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
.mc-quote:hover { background: var(--mc-deep); color: #fff; }
.mc-menu-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--mc-pale); color: var(--mc-navy); }
.mc-menu-btn:hover { color: var(--mc-navy); background: var(--mc-line); }

/* ---------- Full-screen menu overlay ---------- */
.mc-menu { position: fixed; inset: 0; z-index: 60; display: none; padding: 28px 32px; overflow: auto; background: var(--mc-navy); color: #fff; }
.mc-menu:target { display: block; }                /* no-JS fallback */
.mc-js .mc-menu:not([hidden]) { display: block; }  /* JS dialog */
.mc-menu-open { overflow: hidden; }
.mc-menu__close { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; background: #fff; color: var(--mc-navy); font-weight: 600; text-decoration: none; }
.mc-menu__close:hover { color: var(--mc-navy); background: var(--mc-pale); }
.mc-menu__list { margin: 56px 0 0; padding: 0; list-style: none; }
.mc-menu__list a { display: inline-block; font-family: var(--mc-serif); font-size: clamp(46px, 7vw, 72px); line-height: 1.1; color: #fff; text-decoration: none; }
.mc-menu__list a:hover, .mc-menu__list a:focus-visible { color: var(--mc-aqua); }
.mc-menu__contact { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 48px 0 0; }
.mc-menu__contact a { color: #D6EEF7; font-weight: 600; }
.mc-menu a:focus-visible { outline-color: #fff; }
.mc-menu__status { display: none; margin: 0 0 16px; } /* phones only: the "Open now" chip moves into the menu */

/* ---------- Logo intro (homepage, once per visit) ---------- */
.mc-intro { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: var(--mc-bg); pointer-events: none;
	animation: mcIntroOut .35s ease-out .65s forwards; }
.mc-intro img { width: 96px; height: 96px; animation: mcIntroLogo .5s ease-out both; }
.mc-intro-seen .mc-intro { display: none; }
@keyframes mcIntroOut { to { opacity: 0; } }
@keyframes mcIntroLogo { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }

/* ---------- Sections: shared ---------- */
/* Kadence has no theme.json, so WordPress wraps group contents in an extra div: let layouts see the real children. */
.mc-sec .wp-block-group__inner-container { display: contents; }
.entry-content > .mc-sec, .mc-sec { margin-top: 0 !important; margin-bottom: 0 !important; }
.entry-content .mc-sec :is(p, h1, h2, h3, figure), .mc-sec.mc-sec :is(p, h1, h2, h3, figure) { margin-top: 0; margin-bottom: 0; }
.mc-wrap { max-width: 1240px; margin-left: auto !important; margin-right: auto !important; padding: 0 24px; }
.mc-wrap--wide { max-width: 1424px; padding: 0 24px; }
.mc-narrow { max-width: 1040px; }
.mc-sec h1, .mc-sec h2, .mc-sec h3 { color: var(--mc-navy); }
.mc-sec h2 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -.03em; font-weight: 600; }
.mc-sec :is(h1, h2) em { font-family: var(--mc-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.mc-eyebrow { display: block; margin-bottom: 14px !important; font-size: 14px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--mc-teal-text); }
.mc-lede { max-width: 620px; margin-top: 16px !important; color: var(--mc-muted); font-size: 19px; }
.mc-sec .wp-block-image figcaption.wp-element-caption { margin: 0; text-align: left; }

/* Buttons */
.mc-sec .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; margin-bottom: 0; }
.mc-sec .wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px;
	font-size: 17px; font-weight: 600; line-height: 1.2; text-decoration: none; transition: transform .15s ease-out, background-color .15s ease-out; }
.mc-sec .wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button.is-style-whatsapp .wp-block-button__link { background: var(--mc-wa); color: #fff; }
.wp-block-button.is-style-whatsapp .wp-block-button__link:hover { background: #096A3C; color: #fff; }
.wp-block-button.is-style-whatsapp .wp-block-button__link::before { content: ""; flex: 0 0 20px; width: 20px; height: 20px; background: currentColor;
	-webkit-mask: var(--mc-wa-icon) center / contain no-repeat; mask: var(--mc-wa-icon) center / contain no-repeat; }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--mc-navy); border: 1.5px solid var(--mc-navy); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--mc-navy); color: #fff; }
.wp-block-button.is-style-light .wp-block-button__link { min-height: 64px; padding: 0 40px; background: #fff; color: var(--mc-navy); font-size: 20px; font-weight: 700; }

/* ---------- 1 Hero ---------- */
.mc-hero { position: relative; }
.mc-hero__stage { position: relative; height: 100vh; height: 100svh; min-height: 560px; max-height: 1000px; overflow: hidden; }
.mc-hero .mc-hero__img { position: absolute; inset: 0; margin: 0; background: var(--mc-hero-bg); overflow: hidden; }
.mc-hero__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.mc-hero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 66, 89, 0) 35%, rgba(6, 66, 89, .82) 100%); }
.mc-hero__copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 40px 64px; color: #fff; }
.mc-sec .mc-hero__copy h1 { max-width: 1000px; color: #fff; font-size: clamp(40px, 5.2vw, 72px); line-height: 1.02; letter-spacing: -.035em; font-weight: 600; text-wrap: balance; }
.mc-hero__copy h1 em { letter-spacing: -.02em; }
.mc-hero__sub { max-width: 640px; margin-top: 22px !important; font-size: 20px; line-height: 1.5; color: #E3F1F6; }
.mc-hero__sub--short { display: none; } /* the phone version */
/* Review badge (glassy pill above the H1); stars and arrow are decorative, so screen readers skip them. */
.mc-hero__badge { margin: 0 0 22px !important; }
.mc-hero__badge a { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
	background: rgba(4, 52, 73, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none;
	transition: background-color .15s ease-out; }
.mc-hero__badge a::before { content: "★★★★★"; content: "★★★★★" / ""; color: #FFC24B; letter-spacing: 2px; }
.mc-hero__badge a::after { content: "→"; content: "→" / ""; transition: transform .15s ease-out; }
.mc-hero__badge a:hover { background: rgba(4, 52, 73, .7); }
.mc-hero__badge a:hover::after { transform: translateX(3px); }
.mc-sec .mc-hero__cta { margin-top: 30px; }
.mc-hero__cta .wp-block-button.is-style-light .wp-block-button__link { min-height: 54px; padding: 0 26px; font-size: 17px; font-weight: 600; }
.mc-hero a:focus-visible { outline-color: #fff; }

/* ---------- 2 Badges: navy strip. Desktop: ticker (mclean.js adds .is-ticker + a track with aria-hidden copies,
   pauses on hover/focus). Phones: 2x4 tiles that pop in one by one. Static without JS or with reduced motion. ---------- */
.mc-badges { overflow: hidden; background: var(--mc-navy); color: #fff; }
.mc-badges__list { display: flex; flex-wrap: wrap; justify-content: center; padding: 20px 24px; }
.mc-badge { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 44px; margin: 0 !important; padding: 4px 34px 4px 68px;
	font-size: 14px; line-height: 1.35; color: #C9E3EC; white-space: nowrap; }
.mc-badge + .mc-badge { box-shadow: inset 1px 0 rgba(255, 255, 255, .16); }
.mc-badge strong { font-size: 16px; font-weight: 600; color: #fff; }
.mc-badge a { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.mc-badge a:hover strong { text-decoration: underline; }
.mc-badge a:focus-visible { outline-color: #fff; }
.mc-badge::before { content: ""; position: absolute; left: 28px; top: 50%; width: 26px; height: 26px; margin-top: -13px; background: var(--mc-aqua);
	-webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.mc-badge.is-clone { display: none; }
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
	.mc-badges.is-ticker .mc-badges__list { display: block; padding: 20px 0; }
	.mc-badges__track { display: flex; width: max-content; animation: mc-ticker 50s linear infinite; }
	.mc-badges.is-ticker .mc-badge.is-clone { display: flex; }
	.mc-badges.is-ticker:hover .mc-badges__track, .mc-badges.is-ticker:focus-within .mc-badges__track { animation-play-state: paused; }
}
@keyframes mc-ticker { to { transform: translateX(-50%); } }
.mc-ico-star { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 2l2.9 6.3 6.9.6-5.2 4.6 1.6 6.8L12 16.8 5.8 20.3l1.6-6.8L2.2 8.9l6.9-.6z'/%3E%3C/svg%3E"); }
.mc-ico-shield { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.mc-ico-clock { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.mc-ico-paper { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 4h13v16H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M17 8h3v10a2 2 0 0 1-2 2'/%3E%3Cpath d='M8 8h5M8 12h5M8 16h3'/%3E%3C/svg%3E"); }
.mc-ico-gear { --ico: url("data:image/svg+xml,%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='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.8-3.8a6 6 0 0 1-7.9 7.9l-6.9 6.9a2.1 2.1 0 0 1-3-3l6.9-6.9a6 6 0 0 1 7.9-7.9z'/%3E%3C/svg%3E"); }
.mc-ico-pin { --ico: url("data:image/svg+xml,%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='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Cpath d='M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/%3E%3C/svg%3E"); }
.mc-ico-calendar { --ico: url("data:image/svg+xml,%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='M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
.mc-ico-tag { --ico: url("data:image/svg+xml,%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.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8z'/%3E%3Cpath d='M7 7h.01'/%3E%3C/svg%3E"); }
.mc-verify { outline: 2px dashed #B45309; outline-offset: 4px; } /* only ever rendered for logged-in editors */

/* ---------- 3 About M Clean: sticky heading beside ink-fill text and 4 points; founder quote at the end ---------- */
.mc-about { padding: 120px 0 130px; }
.mc-about__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.mc-about__head { position: sticky; top: 120px; }
.mc-sec .mc-about__head h2 { font-size: clamp(40px, 5vw, 64px); line-height: 1.02; letter-spacing: -.04em; }
.mc-sec .mc-about__p { margin: 0 0 24px !important; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.55; color: var(--mc-body); }
.mc-sec .mc-points { margin-top: 48px; counter-reset: pt; }
.mc-point { position: relative; padding: 26px 0 26px 72px; border-top: 1px solid var(--mc-line); counter-increment: pt; }
.mc-point::before { content: counter(pt, decimal-leading-zero); position: absolute; left: 0; top: 24px; font-family: var(--mc-serif); font-style: italic; font-size: 34px; line-height: 1; color: var(--mc-teal-text); }
.mc-sec .mc-point h3 { margin: 0 0 8px !important; font-size: 21px; line-height: 1.3; color: var(--mc-navy); }
.mc-sec .mc-point p { margin: 0 !important; font-size: 16px; line-height: 1.55; color: var(--mc-muted); }
.mc-sec .mc-about__founder { margin-top: 120px; text-align: center; }
.mc-hand { font-family: var(--mc-hand); font-weight: 600; font-size: clamp(48px, 7vw, 96px); line-height: 1.05; color: var(--mc-navy); }
.mc-sig { margin-top: 26px !important; font-family: var(--mc-hand); font-weight: 600; font-size: 40px; color: var(--mc-navy); }
.mc-role { font-size: 15px; color: var(--mc-muted); }
.mc-about__founder .wp-block-buttons { justify-content: center; }

/* ---------- 5 Navy statement with parallax photos ---------- */
.mc-statement { padding: 160px 0; overflow: hidden; background: var(--mc-deep); color: #fff; }
.mc-statement__grid { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.mc-para { display: flex; flex-direction: column; gap: 32px; flex: 1 1 280px; min-width: 0; }
.mc-para--slow { padding-top: 160px; }
.mc-sec .mc-para__img img { display: block; width: 100%; border-radius: 14px; object-fit: cover; }
.mc-para__img--tall img { height: 420px; } .mc-para__img--short img { height: 240px; }
.mc-para__img--mid img { height: 300px; } .mc-para__img--tall2 img { height: 380px; }
/* Rotating photos: the gallery wrapper drops out of the layout so its two columns sit either side of the text. */
.mc-rot { display: contents; }
.mc-sec .mc-para__img { margin: 0; }
.mc-para--fast { order: 0; } .mc-para--slow { order: 2; }
@media (prefers-reduced-motion: no-preference) { .mc-rot img { transition: opacity .3s ease; } }
.mc-rot img.is-out { opacity: 0; }
.mc-statement__text { flex: 1 1 380px; min-width: 0; align-self: center; padding: 120px 0; text-align: center; order: 1; }
.mc-sec .mc-statement__text h2 { color: #fff; font-family: var(--mc-serif); font-weight: 400; font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -.01em; }
.mc-statement__text p { margin-top: 18px !important; font-size: 22px; color: #9FE3FB; }

/* ---------- 6 Services: sticky stacking cards ---------- */
.mc-svc { padding: 140px 0 60px; }
.mc-svc h2 { margin-bottom: 48px !important; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -.04em; }
.mc-scard { position: sticky; top: 96px; display: flex; flex-wrap: wrap; gap: 32px; min-height: 520px; margin: 0 0 340px !important; padding: 32px;
	border-radius: 28px; background: #fff; color: var(--mc-navy); box-shadow: 0 -8px 30px rgba(6, 66, 89, .12); }
.mc-scard:nth-child(2) { top: 114px; } .mc-scard:nth-child(3) { top: 132px; } .mc-scard:nth-child(4) { top: 150px; }
.mc-scard:nth-child(5) { top: 168px; } .mc-scard:nth-child(6) { top: 186px; } .mc-scard:nth-child(7) { top: 204px; } .mc-scard:nth-child(8) { top: 222px; }
.mc-scard:last-child { margin-bottom: 0 !important; }
.mc-scard--pale { background: var(--mc-pale); } .mc-scard--line { background: var(--mc-line); }
.mc-scard--navy { background: var(--mc-navy); color: #fff; } .mc-scard--deep { background: var(--mc-deep); color: #fff; }
.mc-scard__text { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; flex: 1 1 380px; min-width: 0; }
.mc-scard__num { font-size: 15px; font-weight: 600; }
.mc-scard__title { font-family: var(--mc-serif); font-size: clamp(40px, 5vw, 64px); line-height: 1; }
.mc-scard__desc { max-width: 460px; margin-top: -8px !important; font-size: 19px; }
.mc-scard__more a { display: inline-block; padding: 12px 20px; border: 1.5px solid currentColor; border-radius: 999px; color: inherit; font-weight: 600; text-decoration: none; }
.mc-scard__more a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 28px; }
.mc-scard__more a:focus-visible { outline: none; }
.mc-scard__more a:focus-visible::after { outline: 3px solid currentColor; outline-offset: -8px; }
.mc-sec .mc-scard__img { flex: 1 1 460px; min-width: 0; height: 456px; margin: 0; }
.mc-scard__img img { width: 100%; height: 100%; border-radius: 18px; object-fit: cover; }
.mc-also { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 56px !important; }
.mc-also strong { margin-right: 6px; color: var(--mc-navy); }
.mc-also a { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 999px; background: #fff; color: var(--mc-navy);
	font-weight: 600; text-decoration: none; box-shadow: 0 2px 10px rgba(6, 66, 89, .08); }
.mc-also a:hover { background: var(--mc-pale); color: var(--mc-navy); }

/* ---------- 7 How it works ---------- */
.mc-steps { padding: 110px 0; background: #fff; }
.mc-steps__list { display: grid; grid-template-columns: repeat(3, 1fr); counter-reset: mcstep; }
.mc-sec .mc-steps__list { margin-top: 48px; }
.mc-step { counter-increment: mcstep; margin: 0 !important; padding-right: 32px; }
.mc-step + .mc-step { padding-left: 32px; border-left: 1px solid var(--mc-line); }
.mc-step::before { content: counter(mcstep); display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 20px; border-radius: 50%;
	background: var(--mc-pale); color: var(--mc-navy); font-weight: 700; font-size: 24px; }
.mc-step h3 { margin-bottom: 8px !important; font-size: 24px; letter-spacing: -.01em; }
.mc-step p { color: var(--mc-muted); }
.mc-steps .wp-block-buttons { margin-top: 44px; }

/* ---------- 8 Before / after drag slider ---------- */
.mc-results { padding: 100px 0 140px; }
.mc-results__grid { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.mc-results__text { flex: 1 1 360px; min-width: 0; }
.mc-results__text h2 { margin-bottom: 18px !important; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -.04em; }
.mc-results__text .mc-lede { margin: 0 0 28px !important; max-width: 420px; }
.mc-ba { flex: 1 1 520px; min-width: 0; max-width: 640px; margin: 0 !important; }
.mc-ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 24px !important; }
.mc-ba__pair .mc-ba__label { grid-column: 1 / -1; font-weight: 600; }
.mc-ba__pair .wp-block-image { margin: 0; }
.mc-ba__pair img { border-radius: 16px; }
.mc-ba.is-ready .mc-ba__pair { display: none; }
.mc-ba__tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.mc-ba__tabs button { min-height: 48px; padding: 0 20px; border: 1.5px solid var(--mc-navy); border-radius: 999px; background: transparent; color: var(--mc-navy);
	font: inherit; font-weight: 600; cursor: pointer; }
.mc-ba__tabs button[aria-pressed="true"] { background: var(--mc-navy); color: #fff; }
.mc-ba__stage { position: relative; height: 760px; overflow: hidden; border-radius: 28px; background: #fff; }
.mc-ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mc-ba__bar { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.mc-ba__knob { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: -36px 0 0 -36px;
	border-radius: 50%; background: #fff; color: var(--mc-navy); box-shadow: 0 6px 20px rgba(6, 66, 89, .2); font-family: var(--mc-serif); font-style: italic; font-size: 20px; pointer-events: none; }
.mc-ba__lbl { position: absolute; top: 18px; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; pointer-events: none; }
.mc-ba__lbl--b { left: 18px; background: var(--mc-navy); color: #fff; } .mc-ba__lbl--a { right: 18px; background: #fff; color: var(--mc-navy); }
.mc-ba__stage input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; }
.mc-ba__stage:has(input:focus-visible) { outline: 3px solid var(--mc-navy); outline-offset: 3px; }

/* ---------- 9 Our crew at work ---------- */
.mc-work, .mc-press, .mc-reviews { padding: 110px 0; }
.mc-reels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.mc-reel { position: relative; margin: 0 !important; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 22px; background: var(--mc-navy); }
.mc-reel video { display: block; width: 100%; height: 100%; object-fit: cover; }
.mc-reel::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(180deg, rgba(6, 66, 89, 0), rgba(6, 66, 89, .8)); pointer-events: none; }
.mc-reel figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; margin: 0; color: #fff; font-weight: 600; font-size: 16px; text-align: left; }
.mc-reel__btn { position: absolute; inset: 0; z-index: 2; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.mc-reel__btn::after { content: ""; position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(6, 66, 89, .7)
	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 5v14l12-7z'/%3E%3C/svg%3E") center / 16px no-repeat; }
.mc-reel__btn[data-state="playing"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6 5h4v14H6zM14 5h4v14h-4z'/%3E%3C/svg%3E"); }
.mc-reel__btn:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

/* ---------- 10 Trusted by ---------- */
.mc-clients { padding: 72px 0; }
.mc-clients .mc-eyebrow, .mc-clients h2 { text-align: center; }
.mc-clients h2 { font-size: clamp(26px, 3vw, 36px); }
.mc-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 1240px; margin: 36px auto 0 !important; padding: 0 24px; }
.mc-logo { flex: 0 0 auto; display: grid !important; place-items: center; min-width: 200px; height: 92px; margin: 0 !important; padding: 0 28px; border-radius: 18px; background: #fff;
	color: var(--mc-body); font-weight: 600; font-size: 17px; line-height: 1.2; text-align: center; }
.mc-logo img { width: auto; max-width: 180px; max-height: 48px; }
.mc-marquee.is-running { display: block; max-width: none; padding: 0; overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mc-track { display: flex; gap: 16px; width: max-content; animation: mc-marquee 70s linear infinite; }
.mc-marquee:hover .mc-track, .mc-marquee:focus-within .mc-track, .mc-marquee:focus .mc-track { animation-play-state: paused; }
@keyframes mc-marquee { to { transform: translateX(calc(-50% - 8px)); } }
.mc-marquee.is-static { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; }

/* ---------- 11 Berita Harian ---------- */
.mc-press__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.mc-paper { margin: 0 !important; padding: 32px; border-radius: 24px; background: #fff; box-shadow: 0 20px 50px rgba(6, 66, 89, .10); transform: rotate(-1.2deg); }
.mc-paper__mast { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 3px solid var(--mc-navy); font-size: 14px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--mc-navy); }
.mc-paper__mast span:last-child { font-weight: 500; color: var(--mc-muted); text-transform: none; }
.mc-paper__title { margin: 22px 0 10px !important; font-family: Georgia, "Times New Roman", serif; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; color: var(--mc-navy); }
.mc-paper__by { font-size: 15px; font-style: italic; color: var(--mc-muted); }
.mc-pull { margin: 28px 0 0 !important; padding-left: 22px; border-left: 4px solid var(--mc-sky); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; font-weight: 500; color: var(--mc-navy); }

/* ---------- 12 Reviews ---------- */
.mc-reviews { background: #fff; }
.mc-rv-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.mc-rv-sum { font-size: 15px; color: var(--mc-muted); }
.mc-rv-sum strong { font-size: 40px; color: var(--mc-navy); letter-spacing: -.02em; }
/* Trustindex slider in our colours and font (its CSS loads later, so these need !important). Space is reserved so
   nothing jumps when it appears. */
.mc-ti { min-height: 252px; margin-top: 40px; }
@media (max-width: 767px) { .mc-ti { min-height: 510px; } }
.mc-ti .ti-widget.ti-goog, .mc-ti .ti-widget.ti-goog *:not(img) { font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif !important; }
.mc-ti .ti-widget.ti-goog .ti-review-item > .ti-inner { background: var(--mc-bg) !important; border-color: var(--mc-line) !important; border-width: 1px !important; border-radius: 18px !important; }
.mc-ti .ti-widget.ti-goog .ti-widget-container .ti-name { color: var(--mc-navy) !important; }
.mc-ti .ti-widget.ti-goog .ti-review-content, .mc-ti .ti-widget.ti-goog .ti-review-content * { color: var(--mc-body) !important; }
.mc-ti .ti-widget.ti-goog .ti-date { color: var(--mc-muted) !important; }
.mc-ti .ti-widget.ti-goog .ti-read-more, .mc-ti .ti-widget.ti-goog .ti-read-more * { color: var(--mc-teal-text) !important; }
.mc-ti .ti-widget.ti-goog .ti-read-more span { opacity: 1 !important; } /* Trustindex dims it to 50%, which fails contrast */
.mc-ti .ti-widget.ti-goog .ti-rating-text, .mc-ti .ti-widget.ti-goog .ti-rating-text * { color: var(--mc-navy) !important; }
.mc-ti .ti-widget.ti-goog .ti-controls .ti-next, .mc-ti .ti-widget.ti-goog .ti-controls .ti-prev { outline-color: var(--mc-line) !important; }
.mc-placeholder { margin-top: 40px !important; padding: 24px; border: 2px dashed #B45309; border-radius: 16px; background: #FFF3E0; color: #6B3A00; font-size: 15px; font-weight: 600; }

/* ---------- 13 Big promise ---------- */
.mc-promise { padding: 60px 0 160px; text-align: center; }
.mc-promise__a, .mc-promise__b { max-width: 1200px; margin-left: auto !important; margin-right: auto !important; font-size: clamp(44px, 7.5vw, 88px); line-height: 1; color: var(--mc-navy); }
.mc-promise__a { font-weight: 600; letter-spacing: -.04em; }
.mc-promise__b { margin-top: 10px !important; font-family: var(--mc-serif); font-style: italic; letter-spacing: -.015em; }

/* ---------- 14 Contact ---------- */
.mc-contact { padding: 0 0 32px; }
.mc-cta { padding: 120px 40px; border-radius: 32px; background: var(--mc-navy); color: #fff; text-align: center; }
.mc-sec .mc-cta h2 { margin-bottom: 16px !important; color: #fff; font-family: var(--mc-serif); font-weight: 400; font-size: clamp(56px, 8vw, 96px); line-height: 1; letter-spacing: -.01em; }
.mc-cta p { font-size: 21px; color: #D6EEF7; }
.mc-cta .wp-block-buttons { justify-content: center; margin-top: 40px; }

/* ---------- Areas we serve: navy map, aqua highlights; postal check, region tabs, town chips ---------- */
.mc-coverage { padding: 110px 0; background: var(--mc-bg); }
.mc-sec .mc-areas { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "map side" "list list"; gap: 28px 48px; align-items: start; margin-top: 40px; }
.mc-areas__map { grid-area: map; }
.mc-areas__side { grid-area: side; display: flex; flex-direction: column; gap: 18px; }
.mc-areas__list { grid-area: list; }
.mc-areas__canvas { aspect-ratio: 1000 / 647; } /* space kept for the map so nothing jumps when it loads */
.mc-map { display: block; width: 100%; height: auto; overflow: visible; }
.mc-map__region { fill: var(--mc-navy); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; cursor: pointer; transition: fill .25s ease-out; }
.mc-map__region.is-hover, .mc-map__region[aria-pressed="true"] { fill: var(--mc-aqua); }
.mc-map__region:focus { outline: none; }
.mc-map__region:focus-visible { stroke: var(--mc-sky); stroke-width: 5; }
.mc-map__outline { fill: none; stroke: var(--mc-teal); stroke-width: 2; stroke-linejoin: round; pointer-events: none; }
.mc-map__labels text { font: 600 22px/1 "Instrument Sans", system-ui, sans-serif; fill: #fff; text-anchor: middle; pointer-events: none; transition: fill .25s ease-out; }
.mc-map__labels text.is-on { fill: var(--mc-navy); }
.mc-map__town { fill: var(--mc-navy); stroke: #fff; stroke-width: 4; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity .2s, transform .25s ease-out; pointer-events: none; }
.mc-map__town.is-on { opacity: 1; transform: none; }
.mc-check { margin: 0; padding: 22px; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(6, 66, 89, .08); }
.mc-check__label { display: block; margin-bottom: 12px; font-size: 20px; font-weight: 600; color: var(--mc-navy); }
.mc-check__row { display: flex; gap: 10px; }
.mc-check__input { flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 0 16px; border: 1.5px solid var(--mc-line); border-radius: 12px; background: var(--mc-bg); color: var(--mc-navy); font-family: inherit; font-size: 18px; font-weight: 600; letter-spacing: .08em; }
.mc-check__input:focus { border-color: var(--mc-teal-text); outline: 3px solid rgba(10, 114, 114, .25); outline-offset: 0; }
.mc-check__btn, .mc-check__wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--mc-navy); color: #fff; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; }
.mc-check__btn { flex: 0 0 auto; }
.mc-check__btn:hover { background: var(--mc-deep); }
.mc-sec .mc-check__wa { background: var(--mc-wa); color: #fff; white-space: normal; text-align: center; }
.mc-sec .mc-check__wa:hover { background: #096A3C; color: #fff; }
.mc-check__wa::before { content: ""; flex: 0 0 20px; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--mc-wa-icon) center / contain no-repeat; mask: var(--mc-wa-icon) center / contain no-repeat; }
.mc-check.is-ok .mc-check__wa { flex: 1 1 100%; }
.mc-check.is-ok .mc-check__row { flex-wrap: wrap; }
.mc-check__msg { min-height: 1.5em; margin: 12px 0 0 !important; font-size: 16px; font-weight: 600; color: var(--mc-muted); }
.mc-check__msg.is-ok { color: var(--mc-wa); }
.mc-check__msg.is-err { color: #B82105; }
.mc-areas__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-areas__tab, .mc-chip { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--mc-line); border-radius: 999px; background: #fff; color: var(--mc-navy); font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer;
	transition: background-color .2s, border-color .2s, color .2s; }
.mc-areas__tab[aria-pressed="true"], .mc-areas__tab.is-hover { border-color: var(--mc-navy); background: var(--mc-navy); color: #fff; }
.mc-areas__now { margin: 0 !important; font-size: 15px; color: var(--mc-muted); }
.mc-areas__now strong { color: var(--mc-navy); }
.mc-areas__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-chip { min-height: 40px; padding: 0 14px; font-size: 14px; font-weight: 500; }
.mc-chip.is-in { border-color: var(--mc-aqua); background: var(--mc-pale); }
.mc-chip[aria-pressed="true"], .mc-chip:hover { border-color: var(--mc-navy); background: var(--mc-navy); color: #fff; }
.mc-areas__tab:focus-visible, .mc-chip:focus-visible, .mc-check__btn:focus-visible, .mc-check__wa:focus-visible { outline: 3px solid var(--mc-navy); outline-offset: 2px; }
.mc-areas__list { padding: 16px 20px; border: 1px solid var(--mc-line); border-radius: 14px; background: #fff; }
.mc-areas__list summary { font-weight: 600; color: var(--mc-navy); cursor: pointer; }
.mc-areas__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin-top: 14px; }
.mc-sec .mc-areas__cols h3 { margin: 0 0 6px !important; font-size: 15px; color: var(--mc-navy); }
.mc-areas__cols ul { margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.7; color: var(--mc-body); }
.mc-sec .mc-ptypes__title { margin: 56px 0 18px !important; font-size: 22px; }
.mc-ptypes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.mc-ptype { position: relative; display: flex; flex-direction: column; gap: 12px; margin: 0 !important; padding: 18px 16px; border-radius: 16px; background: #fff; box-shadow: 0 1px 0 var(--mc-line);
	font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--mc-navy); }
.mc-ptype::before { content: ""; width: 30px; height: 30px; background: var(--mc-teal); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.mc-ico-hdb { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5l8-3v19M12 21V8l8 3v10M2 21h20M7 8h2M7 12h2M7 16h2M15 13h2M15 17h2'/%3E%3C/svg%3E"); }
.mc-ico-condo { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21V3h12v18M2 21h20M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2M10 21v-3h4v3'/%3E%3C/svg%3E"); }
.mc-ico-landed { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7M5 9.5V21h14V9.5M10 21v-6h4v6'/%3E%3C/svg%3E"); }
.mc-ico-office { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h18v12H3zM8 8V5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v3M3 13h18'/%3E%3C/svg%3E"); }
.mc-ico-retail { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l1.5-5h15L21 9M3 9a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0M5 12v9h14v-9M10 21v-5h4v5'/%3E%3C/svg%3E"); }
.mc-ico-mosque { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4c-3 2-6 3.5-6 6h12c0-2.5-3-4-6-6zM5 10h14v11H5zM10 21v-4a2 2 0 0 1 4 0v4M3 21h18M12 1.5V4'/%3E%3C/svg%3E"); }
.mc-sec .mc-credit { margin-top: 28px !important; font-size: 12.5px; line-height: 1.5; color: var(--mc-muted); }
.mc-credit a { color: var(--mc-teal-text); }
/* Draw-in: mclean.js adds .is-pending when the map loads, .is-drawn when it scrolls into view (never with reduced motion) */
.mc-areas.is-pending .mc-map__outline { stroke-dasharray: 1; stroke-dashoffset: 1; }
.mc-areas.is-pending .mc-map__region, .mc-areas.is-pending .mc-map__labels { opacity: 0; }
.mc-areas.is-drawn .mc-map__outline { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s ease-in-out; }
.mc-areas.is-drawn .mc-map__region, .mc-areas.is-drawn .mc-map__labels { opacity: 1; transition: opacity .5s ease-out, fill .25s ease-out; }
.mc-areas.is-drawn .mc-map__region:nth-child(1) { transition-delay: 1.1s, 0s; } .mc-areas.is-drawn .mc-map__region:nth-child(2) { transition-delay: 1.3s, 0s; }
.mc-areas.is-drawn .mc-map__region:nth-child(3) { transition-delay: 1.5s, 0s; } .mc-areas.is-drawn .mc-map__region:nth-child(4) { transition-delay: 1.7s, 0s; }
.mc-areas.is-drawn .mc-map__region:nth-child(5) { transition-delay: 1.9s, 0s; } .mc-areas.is-drawn .mc-map__labels { transition-delay: 2.2s; }

/* ---------- Stage 3 pages: page hero, what's included, FAQ, services hub rows, other services ---------- */
/* Page hero: full-width collage (own photos per page, homepage duotone) with the text on top. The page starts
   under the floating header, so the inner-page top padding is dropped on these pages. */
body:not(.home) #inner-wrap:has(.mc-phero) { padding-top: 0; }
.mc-phero { position: relative; background: var(--mc-hero-bg); }
.mc-phero__stage { position: relative; display: flex; align-items: flex-end; min-height: min(80vh, 760px); min-height: min(80svh, 760px); overflow: hidden; }
.mc-sec .mc-phero__img { position: absolute; inset: 0; margin: 0; }
.mc-phero__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mc-phero__img::after { content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(2, 20, 30, .86) 0%, rgba(2, 20, 30, .62) 48%, rgba(2, 20, 30, .18) 100%), linear-gradient(180deg, rgba(2, 20, 30, .35) 0%, rgba(2, 20, 30, 0) 30%); }
.mc-phero__copy { position: relative; z-index: 2; width: 100%; padding-top: 150px !important; padding-bottom: 72px !important; color: #fff; }
.mc-sec .mc-crumbs { margin: 0 0 18px !important; font-size: 14px; color: #CFE6EE; }
.mc-crumbs a { color: #fff; }
.mc-sec .mc-phero h1, .mc-phero .mc-phero__copy .wp-block-heading { max-width: 820px; color: #fff !important; font-size: clamp(40px, 5vw, 66px); line-height: 1.03; letter-spacing: -.035em; text-wrap: balance; }
.mc-sec .mc-phero__lede { max-width: 620px; margin-top: 18px !important; font-size: 19px; line-height: 1.55; color: #E3F1F6; }
.mc-sec .mc-phero__cta { margin-top: 28px; }
.mc-phero__cta .wp-block-button.is-style-light .wp-block-button__link { min-height: 54px; padding: 0 26px; font-size: 17px; font-weight: 600; }
.mc-sec .mc-trustline { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px !important; font-size: 14px; font-weight: 600; color: #fff; }
.mc-trustline span, .mc-trustline a { display: inline-flex; align-items: center; gap: 8px; }
.mc-trustline span::before, .mc-trustline a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mc-aqua); }
.mc-trustline a { color: #fff; }
.mc-phero a:focus-visible { outline-color: #fff; }
.mc-included { padding: 96px 0; background: #fff; }
.mc-included__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.mc-sec .mc-included__head h2 { font-size: clamp(34px, 4vw, 52px); }
.mc-sec .mc-included__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin: 0; padding: 0; list-style: none; }
.mc-included__list li { position: relative; padding-left: 36px; font-size: 17px; line-height: 1.5; color: var(--mc-body); }
.mc-included__list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--mc-pale); }
.mc-included__list li::after { content: ""; position: absolute; left: 7px; top: 7px; width: 8px; height: 5px; border: 2px solid var(--mc-teal-text); border-top: 0; border-right: 0; transform: rotate(-45deg); }
.mc-faq { padding: 96px 0; background: var(--mc-bg); }
.mc-sec .mc-faq__list { margin-top: 28px; }
.mc-faq__list .wp-block-details { margin: 0 !important; border-bottom: 1px solid var(--mc-line); }
.mc-faq__list summary { position: relative; padding: 20px 44px 20px 0; font-size: 19px; font-weight: 600; color: var(--mc-navy); cursor: pointer; list-style: none; }
.mc-faq__list summary::-webkit-details-marker { display: none; }
.mc-faq__list summary::after { content: "+"; position: absolute; right: 6px; top: 50%; margin-top: -14px; font-size: 26px; line-height: 1; color: var(--mc-teal-text); }
.mc-faq__list details[open] summary::after { content: "–"; }
.mc-faq__list details p { margin: 0 0 20px !important; font-size: 17px; line-height: 1.6; color: var(--mc-body); }
.mc-faq__list summary:focus-visible { outline: 3px solid var(--mc-navy); outline-offset: 2px; }
.mc-svc-more { padding: 0 0 96px; background: var(--mc-bg); }
.mc-svc-more .mc-also { margin-top: 0 !important; }

/* Services hub: taller stacking cards (number, name, 40-60 words, 3 points, link) with a 3D pile-up as they stack.
   Each card stays fully visible, then scales back a little, tilts away and darkens while the next card slides over
   it and casts a deeper shadow. Static stacked cards without scroll-driven animations; a plain list with reduced motion. */
.mc-hubstack { --n: 8; --tilt: 5deg; --shrink: .94; }
/* room after the last card (homepage and hub), so the card before it stays put until it is fully covered (a sticky card lets go
   once its own bottom spacing no longer fits in the stack) */
.mc-stack::after { content: ""; display: block; height: 340px; }  /* homepage and hub stacks */
.mc-hubstack .mc-scard { min-height: 640px; align-items: center; transform-origin: 50% 0; }
.mc-hubstack .mc-scard::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: #021E2A; opacity: 0; pointer-events: none; }
.mc-hubstack .mc-scard__text { justify-content: center; gap: 18px; }
.mc-sec .mc-hubstack .mc-scard__num { margin: 0 !important; font-family: var(--mc-serif); font-style: italic; font-weight: 400; font-size: 46px; line-height: 1; opacity: .85; }
.mc-sec .mc-hubstack .mc-scard__title { margin: 0 !important; color: inherit !important; font-family: var(--mc-serif); font-weight: 400; font-size: clamp(38px, 4.2vw, 58px); line-height: 1; letter-spacing: -.01em; }
.mc-sec .mc-hubstack .mc-scard__desc { max-width: 540px; margin: 0 !important; font-size: 18px; line-height: 1.55; }
.mc-sec .mc-hubstack .mc-scard__points { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 16px; font-weight: 600; }
.mc-hubstack .mc-scard__points li { position: relative; padding-left: 28px; }
.mc-hubstack .mc-scard__points li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 10px; height: 6px; border: 2px solid currentColor; border-top: 0; border-right: 0; transform: rotate(-45deg); }
.mc-sec .mc-hubstack .mc-scard__more { margin-top: 6px !important; }
.mc-sec .mc-hubstack .mc-scard__img { height: 560px; }
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/* Each card's tilt is driven by the card that covers it: it starts when that card's top edge reaches this
		   card's bottom (top + --h) and ends when it settles at its own sticky top, so a card is flat and fully
		   visible until it is actually being covered. (animation shorthand first, then timeline and range: the
		   shorthand resets the range.) Each category is its own stack. */
		.mc-hubstack { timeline-scope: --c2, --c3, --c4, --c5, --c6, --c7, --c8; --h: 640px; }
		.mc-hubstack .mc-scard:nth-child(1) { --st: 96px; --stn: 114px; }
		.mc-hubstack .mc-scard:nth-child(2) { --st: 114px; --stn: 132px; --stp: 96px; }
		.mc-hubstack .mc-scard:nth-child(3) { --st: 132px; --stn: 150px; --stp: 114px; }
		.mc-hubstack .mc-scard:nth-child(4) { --st: 150px; --stn: 168px; --stp: 132px; }
		.mc-hubstack .mc-scard:nth-child(5) { --st: 168px; --stn: 186px; --stp: 150px; }
		.mc-hubstack .mc-scard:nth-child(6) { --st: 186px; --stn: 204px; --stp: 168px; }
		.mc-hubstack .mc-scard:nth-child(7) { --st: 204px; --stn: 222px; --stp: 186px; }
		.mc-hubstack .mc-scard:nth-child(8) { --st: 222px; --stp: 204px; }
		@media (max-width: 767px) {
			.mc-hubstack { --h: 500px; }
			.mc-hubstack .mc-scard:nth-child(1) { --st: 70px; --stn: 76px; }
			.mc-hubstack .mc-scard:nth-child(2) { --st: 76px; --stn: 82px; --stp: 70px; }
			.mc-hubstack .mc-scard:nth-child(3) { --st: 82px; --stn: 88px; --stp: 76px; }
			.mc-hubstack .mc-scard:nth-child(4) { --st: 88px; --stn: 94px; --stp: 82px; }
			.mc-hubstack .mc-scard:nth-child(5) { --st: 94px; --stn: 100px; --stp: 88px; }
			.mc-hubstack .mc-scard:nth-child(6) { --st: 100px; --stn: 106px; --stp: 94px; }
			.mc-hubstack .mc-scard:nth-child(7) { --st: 106px; --stn: 112px; --stp: 100px; }
			.mc-hubstack .mc-scard:nth-child(8) { --st: 112px; --stp: 106px; }
		}
		@media (max-width: 767px) and (max-height: 720px) { .mc-hubstack { --h: 430px; } }
		.mc-hubstack .mc-scard:nth-child(2) { view-timeline: --c2 block; }
		.mc-hubstack .mc-scard:nth-child(3) { view-timeline: --c3 block; }
		.mc-hubstack .mc-scard:nth-child(4) { view-timeline: --c4 block; }
		.mc-hubstack .mc-scard:nth-child(5) { view-timeline: --c5 block; }
		.mc-hubstack .mc-scard:nth-child(6) { view-timeline: --c6 block; }
		.mc-hubstack .mc-scard:nth-child(7) { view-timeline: --c7 block; }
		.mc-hubstack .mc-scard:nth-child(8) { view-timeline: --c8 block; }
		.mc-hubstack .mc-scard:nth-child(1):not(:last-child) { animation: mcCardBack linear both; animation-timeline: --c2; animation-range: cover calc(100dvh - var(--st) - var(--h)) cover calc(100dvh - var(--stn)); }
		.mc-hubstack .mc-scard:nth-child(1):not(:last-child)::before { animation: mcCardDim linear both; animation-timeline: --c2; animation-range: cover calc(100dvh - var(--st) - var(--h)) cover calc(100dvh - var(--stn)); }
		.mc-hubstack .mc-scard:nth-child(2):not(:last-child) { animation: mcCardBack linear both; animation-timeline: --c3; animation-range: cover calc(100dvh - var(--st) - var(--h)) cover calc(100dvh - var(--stn)); }
		.mc-hubstack .mc-scard:nth-child(2):not(:last-child)::before { animation: mcCardDim linear both; animation-timeline: --c3; animation-range: cover calc(100dvh - var(--st) - var(--h)) cover calc(100dvh - var(--stn)); }
		.mc-hubstack .mc-scard:nth-child(3):not(:last-child) { animation: mcCardBack linear both; animation-timeline: --c4; animation-range: cover calc(100dvh - var(--st) - var(--h)) cover calc(100dvh - var(--stn)); }
		.mc-hubstack .mc-scard:nth-child(3):not(:last-child)::before { animation: mcCardDim linear both; animation-timeline: --c4; animation-range: cover calc(100dvh - var(--st) - var(--h)) cover calc(100dvh - var(--stn)); }
		.mc-hubstack .mc-scard:nth-child(4):not(:last-child) { animation: mcCardBack linear both; animation-timeline: --c5; animation-range: cover calc(100dvh - var(--st) - var(--h)) cover calc(100dvh - var(--stn)); }
		.mc-hubstack .mc-scard:nth-child(4):not(:last-child)::before { animation: mcCardDim linear both; animation-timeline: --c5; animation-range: cover calc(100dvh - var(--st) - var(--h)) cover calc(100dvh - var(--stn)); }
		.mc-hubstack .mc-scard:nth-child(5):not(:last-child) { animation: mcCardBack linear both; animation-timeline: --c6; animation-range: cover calc(100dvh - var(--st) - var(--h)) cover calc(100dvh - var(--stn)); }
		.mc-hubstack .mc-scard:nth-child(5):not(:last-child)::before { animation: mcCardDim linear both; animation-timeline: --c6; animation-range: cover calc(100dvh - var(--st) - var(--h)) cover calc(100dvh - var(--stn)); }
		.mc-hubstack .mc-scard:nth-child(6):not(:last-child) { animation: mcCardBack linear both; animation-timeline: --c7; animation-range: cover calc(100dvh - var(--st) - var(--h)) cover calc(100dvh - var(--stn)); }
		.mc-hubstack .mc-scard:nth-child(6):not(:last-child)::before { animation: mcCardDim linear both; animation-timeline: --c7; animation-range: cover calc(100dvh - var(--st) - var(--h)) cover calc(100dvh - var(--stn)); }
		.mc-hubstack .mc-scard:nth-child(7):not(:last-child) { animation: mcCardBack linear both; animation-timeline: --c8; animation-range: cover calc(100dvh - var(--st) - var(--h)) cover calc(100dvh - var(--stn)); }
		.mc-hubstack .mc-scard:nth-child(7):not(:last-child)::before { animation: mcCardDim linear both; animation-timeline: --c8; animation-range: cover calc(100dvh - var(--st) - var(--h)) cover calc(100dvh - var(--stn)); }
		/* the incoming card's deeper shadow fades in as it slides over (its own movement) */
		.mc-hubstack .mc-scard:not(:first-child)::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
			box-shadow: 0 -26px 60px rgba(2, 20, 30, .42); opacity: 0; }
		.mc-hubstack .mc-scard:nth-child(2)::after { animation: mcCardCast linear both; animation-timeline: --c2; animation-range: cover calc(100dvh - var(--stp) - var(--h)) cover calc(100dvh - var(--st)); }
		.mc-hubstack .mc-scard:nth-child(3)::after { animation: mcCardCast linear both; animation-timeline: --c3; animation-range: cover calc(100dvh - var(--stp) - var(--h)) cover calc(100dvh - var(--st)); }
		.mc-hubstack .mc-scard:nth-child(4)::after { animation: mcCardCast linear both; animation-timeline: --c4; animation-range: cover calc(100dvh - var(--stp) - var(--h)) cover calc(100dvh - var(--st)); }
		.mc-hubstack .mc-scard:nth-child(5)::after { animation: mcCardCast linear both; animation-timeline: --c5; animation-range: cover calc(100dvh - var(--stp) - var(--h)) cover calc(100dvh - var(--st)); }
		.mc-hubstack .mc-scard:nth-child(6)::after { animation: mcCardCast linear both; animation-timeline: --c6; animation-range: cover calc(100dvh - var(--stp) - var(--h)) cover calc(100dvh - var(--st)); }
		.mc-hubstack .mc-scard:nth-child(7)::after { animation: mcCardCast linear both; animation-timeline: --c7; animation-range: cover calc(100dvh - var(--stp) - var(--h)) cover calc(100dvh - var(--st)); }
		.mc-hubstack .mc-scard:nth-child(8)::after { animation: mcCardCast linear both; animation-timeline: --c8; animation-range: cover calc(100dvh - var(--stp) - var(--h)) cover calc(100dvh - var(--st)); }
	}
}
@keyframes mcCardBack { to { transform: perspective(1400px) rotateX(var(--tilt)) scale(var(--shrink)); } }
@keyframes mcCardDim { to { opacity: .24; } }
@keyframes mcCardCast { to { opacity: 1; } }
/* Not sure which service? */
.mc-notsure { padding: 0 0 110px; text-align: center; }
.mc-sec .mc-notsure h2 { font-size: clamp(32px, 4vw, 48px); }
.mc-sec .mc-notsure__line { margin: 14px auto 0 !important; max-width: 520px; font-size: 19px; color: var(--mc-body); }
.mc-sec .mc-notsure__cta { justify-content: center; margin-top: 28px; }
.mc-notsure__cta .wp-block-button__link { min-height: 64px; padding: 0 38px; font-size: 19px; }

/* Service pages: "What we clean" as photo tiles */
.mc-whatwe { padding: 110px 0; background: #fff; }
.mc-sec .mc-whatwe .mc-lede { max-width: 640px; }
.mc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px !important; }
.mc-tile { position: relative; overflow: hidden; margin: 0 !important; border-radius: 20px; background: var(--mc-hero-bg); aspect-ratio: 4 / 3; }
.mc-sec .mc-tile__img { position: absolute; inset: 0; margin: 0; }
.mc-tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease-out; }
.mc-tile:hover .mc-tile__img img { transform: scale(1.04); }
.mc-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 20, 30, 0) 45%, rgba(2, 20, 30, .82) 100%); pointer-events: none; }
.mc-sec .mc-tile__name { position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 2; margin: 0 !important; color: #fff; font-family: var(--mc-serif); font-size: 30px; line-height: 1.1; }
.mc-tile--text { display: grid; place-items: end start; background: var(--mc-pale); }
.mc-tile--text::after { display: none; }
.mc-sec .mc-tile--text .mc-tile__name { color: var(--mc-navy); }

/* Deep cleaning: packages, a la carte and add-ons (no prices) */
.mc-pkg { padding: 110px 0; background: var(--mc-bg); }
.mc-sec.mc-pkg .mc-lede { max-width: 640px; }
.mc-pkg__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 40px !important; }
.mc-pkg__col { margin: 0 !important; padding: 30px; border: 1px solid var(--mc-line); border-radius: 20px; background: #fff; }
.mc-sec .mc-pkg__col h3 { margin: 0 0 16px !important; font-family: var(--mc-serif); font-weight: 400; font-size: 32px; line-height: 1.1; }
.mc-sec .mc-pkg__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 17px; }
.mc-pkg__list li { position: relative; padding-left: 28px; }
.mc-pkg__list li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 10px; height: 6px; border: 2px solid var(--mc-navy); border-top: 0; border-right: 0; transform: rotate(-45deg); }
.mc-sec.mc-pkg .mc-pkg__note { margin-top: 28px !important; font-size: 18px; }
.mc-sec .mc-pkg__cta { margin-top: 20px; }
.mc-sec .mc-hubstack + * { margin-top: 0; }
.mc-svc .mc-eyebrow { margin-bottom: 10px !important; }

/* Text page header (blog index, legal pages), legal text, contact ways, enquiry form, blog grid */
.mc-phead { padding: 150px 0 40px; background: var(--mc-bg); }
.mc-sec.mc-phead h1 { margin: 10px 0 0 !important; font-size: clamp(40px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -.03em; font-weight: 600; }
.mc-sec.mc-phead .mc-lede { max-width: 640px; margin-top: 16px !important; font-size: 19px; color: var(--mc-body); }
.mc-sec.mc-phead .mc-crumbs { font-size: 14px; color: var(--mc-muted); }
.mc-sec.mc-phead .mc-crumbs a { color: var(--mc-teal-text); }
.mc-legal { padding: 24px 0 110px; background: var(--mc-bg); }
.mc-legal .mc-narrow, .mc-phead--legal .mc-narrow { max-width: 760px; }
.mc-sec.mc-legal h2 { margin: 48px 0 12px !important; font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -.01em; }
.mc-sec.mc-legal p, .mc-sec.mc-legal li { font-size: 17px; line-height: 1.65; color: var(--mc-body); }
.mc-sec.mc-legal a { color: var(--mc-teal-text); }
.mc-sec.mc-legal .mc-legal__list { padding-left: 22px; }
.mc-ways { padding: 96px 0 40px; background: #fff; }
.mc-ways__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.mc-way { margin: 0 !important; padding: 30px; border-radius: 20px; background: var(--mc-pale); }
.mc-sec .mc-way h2 { margin: 0 0 10px !important; font-family: var(--mc-serif); font-weight: 400; font-size: 36px; letter-spacing: 0; }
.mc-sec .mc-way p { font-size: 17px; color: var(--mc-body); }
.mc-sec .mc-way__link a { color: var(--mc-navy); font-weight: 600; }
.mc-formsec { padding: 72px 0 110px; background: #fff; }
.mc-formsec .mc-narrow { max-width: 760px; }
.mc-formsec .wpforms-container { margin-top: 28px !important; }
.mc-formsec .wpforms-container .wpforms-field-label { color: var(--mc-navy); font-size: 16px; font-weight: 600; }
.mc-formsec .wpforms-container input:not([type=checkbox]), .mc-formsec .wpforms-container select, .mc-formsec .wpforms-container textarea {
	min-height: 52px; border: 1.5px solid var(--mc-line) !important; border-radius: 12px !important; font-size: 17px !important; }
.mc-formsec .wpforms-container .wpforms-field-description { color: var(--mc-muted); font-size: 14px; }
.mc-formsec .wpforms-container .wpforms-field-checkbox label { font-size: 15px; color: var(--mc-body); }
.mc-formsec .wpforms-container .wpforms-field-checkbox a { color: var(--mc-teal-text); }
.mc-formsec .wpforms-container button[type=submit] { min-height: 56px; padding: 0 32px; border: 0; border-radius: 999px; background: var(--mc-navy); color: #fff; font-size: 17px; font-weight: 600; cursor: pointer; }
.mc-posts { padding: 32px 0 110px; background: var(--mc-bg); }
.mc-sec.mc-posts .mc-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; padding: 0; list-style: none; }
.mc-cats li a { display: inline-block; padding: 8px 16px; border: 1.5px solid var(--mc-line); border-radius: 999px; background: #fff; color: var(--mc-navy); font-weight: 600; text-decoration: none; }
.mc-posts .wp-block-post-template { gap: 24px; }
.mc-posts .wp-block-post { margin: 0; padding: 0 0 20px; overflow: hidden; border-radius: 20px; background: #fff; }
.mc-posts .wp-block-post-featured-image { margin: 0 0 16px; }
.mc-posts .wp-block-post > :not(.wp-block-post-featured-image) { margin-left: 20px; margin-right: 20px; }
.mc-sec.mc-posts .mc-posts__title { font-size: 22px; line-height: 1.2; letter-spacing: -.01em; }
.mc-posts__title a { color: var(--mc-navy); text-decoration: none; }
.mc-posts .wp-block-post-excerpt { color: var(--mc-body); font-size: 16px; }
.mc-posts__date { color: var(--mc-muted); font-size: 14px; }
.mc-posts__pages { margin-top: 40px; justify-content: center; font-weight: 600; }

/* Hub stacking cards: card without a photo yet (curtain) */
.mc-sec .mc-scard__noimg { flex: 1 1 360px; display: grid; place-items: center; min-height: 300px; margin: 0 !important; border-radius: 18px; background: var(--mc-pale); color: var(--mc-navy); font-weight: 600; }

/* ---------- Floating WhatsApp: pulse ring, badge, speech bubble ---------- */
.mc-wa { position: fixed; right: 24px; bottom: 24px; z-index: 45; display: flex; align-items: center; gap: 12px; }
.mc-wa__btn { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--mc-wa-float); color: #fff;
	box-shadow: 0 10px 28px rgba(6, 66, 89, .35); transition: transform .2s ease-out; }
.mc-wa__btn:hover { transform: scale(1.08) rotate(-6deg); color: #fff; }
.mc-wa__btn:focus-visible { outline: 3px solid var(--mc-navy); outline-offset: 4px; }
.mc-wa__btn::before, .mc-wa__btn::after { content: ""; position: absolute; inset: 0; border: 3px solid #25D366; border-radius: 50%; opacity: 0; animation: mcPulse 2.4s ease-out infinite; pointer-events: none; }
.mc-wa__btn::after { animation-delay: 1.2s; }
@keyframes mcPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
.mc-wa__dot { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%;
	background: #C8303C; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; box-sizing: content-box; }
.mc-wa__bubble { position: relative; max-width: 230px; padding: 12px 38px 12px 16px; border-radius: 16px 16px 4px 16px; background: #fff; color: var(--mc-navy);
	box-shadow: 0 10px 28px rgba(6, 66, 89, .18); font-size: 15px; line-height: 1.35; opacity: 0; transform: translateY(8px) scale(.95); transform-origin: right bottom;
	transition: opacity .3s ease-out, transform .3s ease-out; }
.mc-wa__bubble.show { opacity: 1; transform: none; }
.mc-wa__bubble p { margin: 0; }
.mc-wa__bubble strong { display: block; font-size: 16px; }
.mc-wa__x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--mc-pale); color: var(--mc-navy);
	font-size: 16px; line-height: 1; cursor: pointer; }

/* ---------- Scroll effects: only where supported, never with reduced motion ---------- */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.mc-hero { height: calc(100svh + 640px); }
		.mc-hero__stage { position: sticky; top: 0; }
		.mc-hero .mc-hero__img { animation: mcHeroShrink linear both; animation-timeline: scroll(root); animation-range: 0px 640px; }
		.mc-hero__copy { animation: mcHeroCopy linear both; animation-timeline: scroll(root); animation-range: 0px 420px; }
		.mc-wipe { animation: mcWipe linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
		.mc-wipe-x { animation: mcWipeX linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
		.mc-rise { animation: mcRise linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
		.mc-para--fast { animation: mcParaFast linear both; animation-timeline: view(); }
		.mc-para--slow { animation: mcParaSlow linear both; animation-timeline: view(); }
		.mc-ink .mc-ink__t { background: linear-gradient(90deg, var(--mc-navy) 50%, #B7CDD6 50%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
			-webkit-box-decoration-break: clone; box-decoration-break: clone; animation: mcInk linear both; animation-timeline: view(); animation-range: entry 30% cover 65%; }
		.mc-ink--soft .mc-ink__t { background-image: linear-gradient(90deg, var(--mc-body) 50%, #B7CDD6 50%); animation-range: entry 20% cover 55%; }
		.mc-glow .mc-ink__t { animation: mcInk linear both, mcGlow linear both; animation-timeline: view(), view(); animation-range: entry 30% cover 65%, cover 40% cover 60%; }
	}
	@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
		.mc-point { animation: mcSlide linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
	}
	@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
		.mc-points { view-timeline: --mc-points block; }
		.mc-points::after { animation: mcDraw linear both; animation-timeline: --mc-points; animation-range: entry 40% cover 85%; }
	}
	@media (prefers-reduced-motion: no-preference) and (max-width: 767px), (prefers-reduced-motion: no-preference) and (max-height: 500px) and (orientation: landscape) {
		/* Phones: no shrink-on-scroll for the hero */
		.mc-hero { height: auto; }
		.mc-hero__stage { position: relative; }
		.mc-hero .mc-hero__img, .mc-hero__copy { animation: none; }
	}
}
@keyframes mcHeroShrink { from { clip-path: inset(0% 0% 0% 0% round 0px); } to { clip-path: inset(7% 5% 7% 5% round 36px); } }
@keyframes mcHeroCopy { to { opacity: 0; transform: translateY(-60px); } }
@keyframes mcSlide { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: none; } }
@keyframes mcDraw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mcWipe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mcWipeX { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mcRise { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes mcParaFast { from { transform: translateY(200px); } to { transform: translateY(-200px); } }
@keyframes mcParaSlow { from { transform: translateY(80px); } to { transform: translateY(-80px); } }
@keyframes mcInk { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes mcGlow { from { text-shadow: 0 0 0 rgba(77, 218, 218, 0); } 50% { text-shadow: 0 0 28px rgba(77, 218, 218, .55); } to { text-shadow: 0 0 0 rgba(77, 218, 218, 0); } }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.mc-press__grid { grid-template-columns: 1fr; gap: 36px; }
	.mc-paper { transform: none; }
	/* How it works: number on the left, text beside it, a thin line joining 1 > 2 > 3 */
	.mc-steps { padding: 72px 0; }
	.mc-steps__list { grid-template-columns: 1fr; gap: 0; }
	.mc-sec .mc-steps__list { margin-top: 28px; }
	.mc-step, .mc-step + .mc-step { position: relative; min-height: 44px; padding: 0 0 22px 60px; border: 0; }
	.mc-step:last-child { padding-bottom: 0; }
	.mc-step::before { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: 0; font-size: 18px; }
	.mc-step:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 50px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--mc-line); }
	.mc-sec .mc-step h3 { margin: 9px 0 4px !important; font-size: 19px; line-height: 1.3; }
	.mc-step p { margin: 0 !important; font-size: 16px; line-height: 1.5; }
	.mc-steps .wp-block-buttons { margin-top: 28px; }
	.mc-reels { grid-template-columns: repeat(2, 1fr); }
	.mc-ptypes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mc-areas__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Phones, portrait and landscape (short screens): top-down hero, "Open now" chip in the menu,
   floating WhatsApp only after the hero. Desktop and tablets are unchanged. */
@media (max-width: 767px), (max-height: 500px) and (orientation: landscape) {
	.mc-head__chip { display: none; } /* shown inside the menu instead */
	.mc-menu__status { display: block; }
	/* Hero: full screen (at least 600px), content top-down from just below the header pill (12px + 56px + 16px),
	   growing with its content so nothing is ever cut off or tucked behind the pill. */
	.mc-hero__stage { height: auto; min-height: max(600px, 100vh); min-height: max(600px, 100svh); max-height: none; }
	.mc-hero__copy { position: relative; padding: 84px 20px 32px; }
	.mc-hero__img::after { background: linear-gradient(180deg, rgba(6, 66, 89, .62) 0%, rgba(6, 66, 89, .74) 55%, rgba(6, 66, 89, .9) 100%); }
	.mc-sec .mc-hero__copy h1 { font-size: clamp(34px, 9vw, 44px); line-height: 1.05; letter-spacing: -.03em; }
	.mc-hero__sub--long { display: none; }
	.mc-hero__sub--short { display: -webkit-box; margin-top: 14px !important; font-size: 16px; line-height: 1.5; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
	.mc-hero__badge { margin-bottom: 16px !important; }
	.mc-hero__badge a { padding: 8px 14px; font-size: 14px; }
	.mc-sec .mc-hero__cta { gap: 10px; margin-top: 22px; }
	.mc-hero__cta .wp-block-button__link, .mc-hero__cta .wp-block-button.is-style-light .wp-block-button__link { min-height: 52px; justify-content: center; font-size: 16px; }
	/* Floating WhatsApp: hidden while the hero is on screen (mclean.js adds .is-shown); always there without JS */
	html:not(.no-js) .home .mc-wa, html:not(.no-js) body:has(.mc-phero) .mc-wa { opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .3s ease-out, transform .3s ease-out, visibility 0s .3s; }
	html:not(.no-js) .home .mc-wa.is-shown, html:not(.no-js) body:has(.mc-phero) .mc-wa.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease-out, transform .3s ease-out; }
}
@media (max-width: 767px) {
	.mc-pill { top: 12px; right: 12px; }
	.mc-hero__cta .wp-block-button { flex: 1 1 100%; }
	.mc-hero__cta .wp-block-button__link { width: 100%; }
	/* Stage 3 pages */
	.mc-whatwe { padding: 72px 0; }
	.mc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px !important; }
	.mc-tile { border-radius: 14px; }
	.mc-sec .mc-tile__name { left: 12px; right: 12px; bottom: 10px; font-size: 20px; }
	.mc-hubstack { --tilt: 2.5deg; --shrink: .96; }
	.mc-hubstack .mc-scard { min-height: 0; gap: 12px; padding: 18px; margin-bottom: 200px !important; }
	.mc-hubstack .mc-scard:nth-child(1) { top: 70px; } .mc-hubstack .mc-scard:nth-child(2) { top: 76px; } .mc-hubstack .mc-scard:nth-child(3) { top: 82px; } .mc-hubstack .mc-scard:nth-child(4) { top: 88px; }
	.mc-hubstack .mc-scard:nth-child(5) { top: 94px; } .mc-hubstack .mc-scard:nth-child(6) { top: 100px; } .mc-hubstack .mc-scard:nth-child(7) { top: 106px; } .mc-hubstack .mc-scard:nth-child(8) { top: 112px; }
	.mc-hubstack .mc-scard:last-child { margin-bottom: 0 !important; }
	.mc-hubstack::after { height: 200px; }
	.mc-hubstack .mc-scard__text { gap: 8px; }
	.mc-sec .mc-hubstack .mc-scard__num { font-size: 26px; }
	.mc-sec .mc-hubstack .mc-scard__title { font-size: 28px; }
	.mc-sec .mc-hubstack .mc-scard__desc { font-size: 15px; line-height: 1.45; }
	.mc-sec .mc-hubstack .mc-scard__points { gap: 2px; font-size: 14px; }
	.mc-sec .mc-hubstack .mc-scard__more { margin-top: 2px !important; }
	.mc-hubstack .mc-scard__more a { padding: 8px 14px; font-size: 15px; }
	.mc-sec .mc-hubstack .mc-scard__img { height: clamp(90px, 14svh, 130px); }
	.mc-notsure { padding-bottom: 80px; }
	.mc-pkg { padding: 72px 0; }
	.mc-phead { padding: 120px 0 28px; }
	.mc-ways { padding: 64px 0 24px; }
	.mc-ways__list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.mc-way { padding: 22px; border-radius: 14px; }
	.mc-formsec { padding: 48px 0 80px; }
	.mc-posts .wp-block-post-template { grid-template-columns: minmax(0, 1fr) !important; }
	.mc-pkg__cols { gap: 10px; margin-top: 24px !important; }
	.mc-pkg__col { padding: 22px; border-radius: 14px; }
	.mc-sec .mc-pkg__col h3 { font-size: 26px; }
	.mc-pkg__cta .wp-block-button { flex: 1 1 100%; }
	.mc-pkg__cta .wp-block-button__link { width: 100%; justify-content: center; }
	.mc-notsure__cta .wp-block-button { flex: 1 1 100%; }
	.mc-notsure__cta .wp-block-button__link { width: 100%; justify-content: center; }
	.mc-included__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.mc-phero__stage { align-items: flex-start; min-height: max(600px, 100vh); min-height: max(600px, 100svh); }
	.mc-phero__copy { padding: 84px 20px 40px !important; }
	.mc-phero__img::after { background: linear-gradient(180deg, rgba(2, 20, 30, .84) 0%, rgba(2, 20, 30, .7) 55%, rgba(2, 20, 30, .55) 100%); }
	.mc-sec .mc-phero h1 { font-size: clamp(34px, 9vw, 44px); line-height: 1.05; }
	.mc-sec .mc-phero__lede { font-size: 17px; }
	.mc-phero__cta .wp-block-button { flex: 1 1 100%; }
	.mc-phero__cta .wp-block-button__link, .mc-phero__cta .wp-block-button.is-style-light .wp-block-button__link { width: 100%; min-height: 52px; justify-content: center; font-size: 16px; }
	.mc-included, .mc-faq { padding: 72px 0; }
	.mc-sec .mc-included__list { grid-template-columns: minmax(0, 1fr); }
	.mc-faq__list summary { font-size: 17px; }
	.mc-svc-more { padding-bottom: 72px; }
	/* Areas we serve: map, postal box, tabs, chips, then tiles in 2 columns */
	.mc-coverage { padding: 72px 0; }
	.mc-sec .mc-areas { grid-template-columns: minmax(0, 1fr); grid-template-areas: "map" "side" "list"; gap: 20px; margin-top: 28px; }
	.mc-map__labels { display: none; } /* the region tabs right under the map name them */
	.mc-check { padding: 18px; }
	.mc-check__label { font-size: 18px; }
	.mc-areas__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mc-sec .mc-ptypes__title { margin-top: 40px !important; }
	.mc-ptypes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.mc-ptype { padding: 14px; font-size: 14px; }
	/* Badges: 2x4 tiles */
	.mc-badges__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 28px 16px; }
	.mc-badges__track { display: contents; }
	.mc-badge, .mc-badge + .mc-badge { min-height: 0; padding: 14px 12px; border-radius: 14px; background: rgba(255, 255, 255, .07); box-shadow: none; font-size: 13px; white-space: normal; }
	.mc-badge::before { position: static; flex: 0 0 auto; width: 24px; height: 24px; margin: 0 0 8px; }
	.mc-badge strong { font-size: 15px; line-height: 1.25; }
	/* About: one column; the 4 points hang on a vertical line that draws as you scroll */
	.mc-about { padding: 80px 0 88px; }
	.mc-about__grid { grid-template-columns: 1fr; gap: 20px; }
	.mc-about__head { position: static; }
	.mc-sec .mc-points { position: relative; margin-top: 32px; padding-left: 32px; }
	.mc-points::before, .mc-points::after { content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--mc-line); }
	.mc-points::after { background: var(--mc-teal); transform-origin: top; }
	.mc-point { padding: 0 0 28px; border-top: 0; }
	.mc-point:last-child { padding-bottom: 0; }
	.mc-point::before { content: ""; left: -32px; top: 3px; z-index: 1; width: 14px; height: 14px; border: 2px solid var(--mc-teal); border-radius: 50%; background: #fff; }
	.mc-sec .mc-point h3 { font-size: 19px; }
	.mc-sec .mc-about__founder { margin-top: 72px; }
	/* Badges pop in one by one (mclean.js adds .is-pop, then .is-in) */
	.mc-badges.is-pop .mc-badge { opacity: 0; transform: scale(.88); transition: opacity .45s ease-out, transform .45s cubic-bezier(.2, .8, .3, 1.25); }
	.mc-badges.is-pop .mc-badge.is-in { opacity: 1; transform: none; }
	.mc-badges.is-pop .mc-badge:nth-child(2) { transition-delay: 90ms; } .mc-badges.is-pop .mc-badge:nth-child(3) { transition-delay: 180ms; }
	.mc-badges.is-pop .mc-badge:nth-child(4) { transition-delay: 270ms; } .mc-badges.is-pop .mc-badge:nth-child(5) { transition-delay: 360ms; }
	.mc-badges.is-pop .mc-badge:nth-child(6) { transition-delay: 450ms; } .mc-badges.is-pop .mc-badge:nth-child(7) { transition-delay: 540ms; }
	.mc-badges.is-pop .mc-badge:nth-child(8) { transition-delay: 630ms; }
	.mc-statement { padding: 96px 0; }
	.mc-statement__text { padding: 48px 0; order: -1; }
	.mc-para { flex-basis: calc(50% - 16px); gap: 16px; }
	.mc-para--slow { padding-top: 80px; }
	.mc-para__img--tall img { height: 260px; } .mc-para__img--short img { height: 160px; }
	.mc-para__img--mid img { height: 190px; } .mc-para__img--tall2 img { height: 240px; }
	.mc-svc { padding: 96px 0 40px; }
	.mc-scard { top: 76px; gap: 16px; min-height: 0; margin-bottom: 240px !important; padding: 22px; }
	.mc-stack:not(.mc-hubstack)::after { height: 240px; }
	.mc-scard:nth-child(2) { top: 86px; } .mc-scard:nth-child(3) { top: 96px; } .mc-scard:nth-child(4) { top: 106px; }
	.mc-scard:nth-child(5) { top: 116px; } .mc-scard:nth-child(6) { top: 126px; }
	.mc-scard:nth-child(7) { top: 136px; } .mc-scard:nth-child(8) { top: 146px; }
	.mc-scard__text { gap: 12px; flex-basis: 100%; }
	.mc-scard__title { font-size: 36px; }
	.mc-scard__desc { margin-top: 0 !important; font-size: 16px; }
	.mc-scard__more a { padding: 10px 16px; }
	.mc-sec .mc-scard__img { flex-basis: 100%; height: clamp(140px, 24svh, 210px); }
	.mc-results { padding: 72px 0 96px; }
	.mc-ba__stage { height: min(125vw, 560px); }
	.mc-ba__knob { width: 60px; height: 60px; margin: -30px 0 0 -30px; font-size: 18px; }
	.mc-work, .mc-press, .mc-reviews { padding: 80px 0; }
	.mc-promise { padding: 40px 0 96px; }
	.mc-cta { padding: 80px 24px; }
	.mc-wa { right: 16px; bottom: 16px; }
	.mc-wa__btn { width: 64px; height: 64px; }
	.mc-wa__btn svg { width: 34px; height: 34px; }
	.mc-wa__bubble { max-width: 190px; font-size: 14px; }
}
@media (max-width: 767px) and (max-height: 720px) {
	/* short phone screens: the text alone, so a stuck hub card always fits on the screen */
	.mc-sec .mc-hubstack .mc-scard__img { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.mc-tile__img img { transition: none; }
	.mc-intro { display: none; }
	.mc-scard { position: relative; top: auto !important; margin-bottom: 24px !important; }
	.mc-track { animation: none; }
	.mc-wa__btn::before, .mc-wa__btn::after { display: none; }
	.mc-wa, .mc-wa__btn, .mc-wa__bubble, .mc-sec .wp-block-button__link, .mc-map__region, .mc-map__town, .mc-map__labels text, .mc-chip, .mc-areas__tab { transition: none !important; }
	.mc-wa__btn:hover, .mc-sec .wp-block-button__link:hover { transform: none; }
}

/* ==========================================================================
   Single Blog Post Layout (design-reference/blog-post-sample.html)
   ========================================================================== */
.mc-progress { position: fixed; top: 0; left: 0; height: 4px; width: 100%; background: var(--mc-sky); transform-origin: 0 50%; transform: scaleX(0); z-index: 99999; }
@supports (animation-timeline: scroll()) {
	.mc-progress { animation: mc-prog linear both; animation-timeline: scroll(root); }
}
@keyframes mc-prog { to { transform: scaleX(1); } }

.mc-blog-post { background: var(--mc-bg); color: #2D3748; font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif; font-size: 19px; line-height: 1.7; padding-bottom: 80px; }
.mc-post-hero { max-width: 1240px; margin: 0 auto; padding: 64px 24px 24px; }
.mc-post-hero .mc-crumbs { font-size: 15px; color: var(--mc-muted); margin-bottom: 24px; }
.mc-post-hero .mc-crumbs a { color: var(--mc-muted); text-decoration: none; }
.mc-post-hero .mc-crumbs a:hover { color: var(--mc-navy); text-decoration: underline; }
.mc-post-hero .mc-tag { display: inline-block; margin-bottom: 20px; padding: 6px 14px; border-radius: 999px; background: #E6F4FA; color: var(--mc-navy); font-size: 14px; font-weight: 600; letter-spacing: .3px; }
.mc-post-title { margin: 0; max-width: 1050px; font-size: clamp(34px, 5vw, 68px); line-height: 1.05; letter-spacing: -.03em; font-weight: 600; color: #064259; }
.mc-post-title .serif { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; }
.mc-stand { max-width: 760px; margin: 24px 0 0; font-size: clamp(18px, 2vw, 22px); line-height: 1.55; color: #22404C; }
.mc-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--mc-line); font-size: 15px; color: var(--mc-muted); }
.mc-meta b { color: #064259; font-weight: 600; }

.mc-post-cover { max-width: 1240px; margin: 0 auto; padding: 0 24px 20px; }
.mc-post-cover__inner { position: relative; overflow: hidden; border-radius: 24px; max-height: 520px; background: #EFE8E0; }
.mc-post-cover__inner img { width: 100%; height: auto; max-height: 520px; object-fit: cover; display: block; }

.mc-post-wrap { max-width: 1240px; margin: 0 auto; padding: 48px 24px 40px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 72px; }
.mc-toc { position: sticky; top: 96px; align-self: start; font-size: 15px; }
.mc-toc b { display: block; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mc-muted); margin-bottom: 12px; }
.mc-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: mc-t; }
.mc-toc li { counter-increment: mc-t; border-top: 1px solid var(--mc-line); }
.mc-toc a { display: flex; gap: 12px; padding: 12px 0; color: #2D3748; text-decoration: none; line-height: 1.35; font-size: 15px; }
.mc-toc a::before { content: counter(mc-t, decimal-leading-zero); color: var(--mc-teal); font-weight: 600; font-variant-numeric: tabular-nums; }
.mc-toc a:hover { color: var(--mc-navy); text-decoration: underline; }

.mc-article { max-width: 720px; font-size: 19px; line-height: 1.75; color: #2D3748; }
.mc-article > p:first-of-type::first-letter { float: left; font-family: 'Instrument Serif', Georgia, serif; font-size: 88px; line-height: .82; padding: 8px 12px 0 0; color: var(--mc-navy); }
.mc-article h2 { margin: 56px 0 16px; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; letter-spacing: -.02em; font-weight: 600; color: #064259; scroll-margin-top: 110px; }
.mc-article h3 { margin: 32px 0 12px; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; font-size: 26px; color: #064259; }
.mc-article p { margin: 0 0 22px; color: #2D3748; }
.mc-article ul, .mc-article ol { margin: 12px 0 28px; padding-left: 24px; color: #2D3748; }
.mc-article li { margin-bottom: 8px; }
.mc-article img { max-width: 100%; height: auto; border-radius: 16px; margin: 24px 0; }
.mc-article blockquote { margin: 36px 0; padding: 0 0 0 24px; border-left: 4px solid var(--mc-sky); font-size: clamp(20px, 2.4vw, 26px); line-height: 1.35; font-weight: 500; color: var(--mc-navy); }

.mc-article-cta { margin: 64px 0 0; padding: 40px 36px; border-radius: 24px; background: var(--mc-navy); color: #fff; }
.mc-article-cta h2 { margin: 0 0 12px; color: #fff; font-size: clamp(26px, 3vw, 36px); }
.mc-article-cta h2 .serif { color: #9FDDF6; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; }
.mc-article-cta p { color: #D6EEF7; margin: 0 0 24px; font-size: 17px; }
.mc-article-cta a { display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; border-radius: 999px; background: #fff; color: var(--mc-navy); font-weight: 700; text-decoration: none; font-size: 16px; transition: transform .18s ease; }
.mc-article-cta a:hover { transform: translateY(-2px); }

.mc-related { max-width: 1240px; margin: 0 auto; padding: 32px 24px 64px; }
.mc-related h2 { font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mc-muted); font-weight: 600; margin: 0 0 16px; }
.mc-rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 2px solid var(--mc-line); padding-top: 24px; }
.mc-rel-grid a { display: block; color: #2D3748; text-decoration: none; padding-right: 16px; }
.mc-rel-grid a span { display: block; font-size: 13px; color: var(--mc-teal); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.mc-rel-grid a strong { font-size: 20px; line-height: 1.3; font-weight: 600; display: block; color: #064259; }
.mc-rel-grid a:hover strong { text-decoration: underline; color: var(--mc-navy); }

@media (max-width: 900px) {
	.mc-post-wrap { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; }
	.mc-toc { position: static; background: #fff; border-radius: 18px; padding: 18px 20px; }
	.mc-rel-grid { grid-template-columns: 1fr; gap: 20px; }
	.mc-rel-grid a { padding-right: 0; padding-bottom: 16px; border-bottom: 1px solid var(--mc-line); }
	.mc-rel-grid a:last-child { border-bottom: none; }
	.mc-article-cta { padding: 32px 20px; }
}

/* ==========================================================================
   Main Menu Sub-items & Categories (Step 6)
   ========================================================================== */
.mc-menu__list .sub-menu {
	list-style: none;
	padding: 0 0 0 16px;
	margin: 8px 0 16px;
}
.mc-menu__list > .menu-item-has-children > .sub-menu {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin: 16px 0 24px;
	padding: 16px 0 16px 20px;
	border-left: 2px solid rgba(255, 255, 255, 0.2);
}
.mc-menu__list .sub-menu > .menu-item-has-children > a {
	font-family: var(--mc-sans) !important;
	font-size: 14px !important;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--mc-aqua) !important;
	font-weight: 700;
	display: block;
	margin-bottom: 8px;
}
.mc-menu__list .sub-menu .sub-menu {
	padding-left: 0;
	margin: 0;
}
.mc-menu__list .sub-menu .sub-menu a {
	font-family: var(--mc-sans) !important;
	font-size: clamp(16px, 1.8vw, 19px) !important;
	color: #fff !important;
	line-height: 1.4 !important;
	padding: 6px 0;
	display: block;
	text-decoration: none;
	transition: color 0.15s ease;
}
.mc-menu__list .sub-menu .sub-menu a:hover,
.mc-menu__list .sub-menu .sub-menu a:focus-visible {
	color: var(--mc-aqua) !important;
	text-decoration: underline;
}

@media (max-width: 600px) {
	.mc-menu__list > .menu-item-has-children > .sub-menu {
		grid-template-columns: 1fr;
		gap: 16px;
		padding-left: 14px;
	}
}

/* ==========================================================================
   Full Site Footer (Option F style - Step 6)
   ========================================================================== */
.mc-site-footer {
	background: #fff;  /* white, as decided; text colours from the brand palette (contrast >= 4.5:1 on white) */
	color: var(--mc-muted);
	font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	padding: 72px 24px 32px;
	border-top: 1px solid var(--mc-line);
}
.mc-site-footer a {
	color: var(--mc-navy);
	text-decoration: none;
	transition: color 0.15s ease;
}
.mc-site-footer a:hover, .mc-site-footer a:focus-visible {
	color: var(--mc-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mc-site-footer a:focus-visible { outline: 2px solid var(--mc-navy); outline-offset: 2px; border-radius: 2px; }
.mc-footer__wrap {
	max-width: 1240px;
	margin: 0 auto;
}
.mc-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 48px 32px;
	padding-bottom: 56px;
	border-bottom: 1px solid var(--mc-line);
}
.mc-footer__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 20px;
	font-weight: 700;
	color: var(--mc-navy);
	margin-bottom: 16px;
}
.mc-footer__brand img {
	width: 34px;
	height: 34px;
	border-radius: 8px;
}
.mc-footer__desc {
	color: var(--mc-muted);
	font-size: 15px;
	margin: 0 0 20px;
	line-height: 1.5;
}
.mc-footer__status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--mc-pale);
	font-size: 13px;
	color: var(--mc-navy);
	margin: 0 0 20px;
}
.mc-footer__status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #10B981;
}
.mc-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 20px;
}
.mc-footer__contact a {
	font-weight: 600;
	color: var(--mc-navy);
}
.mc-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 14px;
	font-weight: 600;
}
.mc-footer__social a {
	color: var(--mc-navy);
}
.mc-footer__col h4,
.mc-footer__col .mc-footer__title {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--mc-teal-text);
	font-weight: 700;
	margin: 0 0 18px;
}
.mc-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.mc-footer__list a {
	display: inline-block;
}
.mc-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding-top: 28px;
	font-size: 14px;
	color: var(--mc-muted);
}
.mc-footer__bottom p {
	margin: 0;
}
.mc-confirm {
	display: none;
}
body.logged-in .mc-confirm {
	display: inline-block;
	background: #FFF3E0;
	color: #B45309;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 12px;
	margin-left: 8px;
}
@media (max-width: 900px) {
	.mc-footer__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px 24px;
	}
}
@media (max-width: 600px) {
	.mc-site-footer {
		padding: 56px 20px 28px;
	}
	.mc-footer__grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.mc-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}