/* Theme Name: MOSTADON Theme URI: https://mostadon.com Author: Simon Moss Description: Custom theme for MOSTADON, fractional CMO and senior B2B marketing support. Pages are built from editable blocks, and every section is available as a pattern under "MOSTADON sections" in the block inserter. Appearance > Rebuild pages restores any page to the original design. Version: 3.2.1 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: mostadon */ /* Fonts, bundled with the theme (no Google Fonts dependency) */ @font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2");} @font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");} @font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");} @font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;src:url("assets/fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2");} @font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/inter-latin-400-normal.woff2") format("woff2");} @font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/inter-latin-500-normal.woff2") format("woff2");} @font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/inter-latin-600-normal.woff2") format("woff2");} @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/source-serif-4-latin-400-normal.woff2") format("woff2");} @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/source-serif-4-latin-500-normal.woff2") format("woff2");} @font-face{font-family:"Permanent Marker";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/permanent-marker-latin-400-normal.woff2") format("woff2");} /* ------------------------------------------------------------------ Tokens ------------------------------------------------------------------ */ :root { --ink: #0a0f1e; --ink-2: #111726; --line-dark: #283048; --paper: #f8f7f3; --paper-2: #efeee9; --white: #ffffff; --pink: #ff7cb9; --pink-btn: #ff8dc4; --pink-soft: #fdd0e4; --text: #0b1020; --text-2: #3d4254; --text-3: #6b7080; --on-dark-2: #c8ccd8; --line: #dedcd5; --font-head: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif; --font-body: "Inter", "Helvetica Neue", Arial, sans-serif; --font-serif: "Source Serif 4", Georgia, serif; --font-hand: "Permanent Marker", "Comic Sans MS", cursive; --radius: 6px; --container: 1200px; --gutter: 32px; --section: clamp(56px, 6.4vw, 84px); --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); --arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E"); --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); --wp--style--global--content-size: 760px; } /* ------------------------------------------------------------------ Base ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; } h1, h2, h3, h4 { font-family: var(--font-head); margin: 0; font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; } p { margin: 0 0 1em; } ul, ol { margin: 0; padding: 0; list-style: none; } figure { margin: 0; } .has-pink-color, .pink { color: var(--pink) !important; } mark.has-inline-color { background: transparent; } .icon { width: 1em; height: 1em; flex: none; } .screen-reader-text, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--pink); color: var(--ink); padding: 8px 14px; border-radius: 4px; } .skip-link:focus { left: 8px; } .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); } .section { padding-top: var(--section); padding-bottom: var(--section); position: relative; } .section--light { background: var(--paper); color: var(--text); } .section--dark { background: var(--ink); color: var(--white); } .mst-page .wp-block-image img { width: 100%; } /* Default spacing for text blocks (core layout CSS zeroes it; class rules below override) */ .mst-page :where(p, .wp-block-list) { margin-bottom: 1em; } .editor-styles-wrapper :where(p, .wp-block-list) { margin-bottom: 1em; } .is-style-mst-eyebrow { font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pink); margin: 0 0 14px; } .is-style-mst-eyebrow.eyebrow--dark { color: var(--text); } .h1-dark { font-size: clamp(40px, 5.2vw, 68px); } .h2 { font-size: clamp(34px, 4.2vw, 52px); } .h3 { font-size: clamp(26px, 2.8vw, 36px); } .lead { font-size: 18px; max-width: 560px; } /* Buttons (block styles, plus .btn for theme markup) */ .btn, .wp-block-button[class*="is-style-mst-"] .wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; padding: 14px 26px; border-radius: var(--radius); border: 1.5px solid transparent; line-height: 1.2; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .wp-block-button[class*="is-style-mst-"] .wp-block-button__link::after { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform .15s ease; } .wp-block-button.mst-arrow-down .wp-block-button__link::after { -webkit-mask-image: var(--arrow-down); mask-image: var(--arrow-down); } .wp-block-button.mst-arrow-none .wp-block-button__link::after { display: none; } .wp-block-button[class*="is-style-mst-"] .wp-block-button__link:hover::after { transform: translateX(3px); } .wp-block-button.mst-arrow-down .wp-block-button__link:hover::after { transform: translateY(2px); } .btn .icon { width: 16px; height: 16px; stroke-width: 2; } .btn--pink, .wp-block-button.is-style-mst-pink .wp-block-button__link { background: var(--pink-btn); color: var(--ink); } .btn--pink:hover, .wp-block-button.is-style-mst-pink .wp-block-button__link:hover { background: #ffa3d0; } .btn--outline, .wp-block-button.is-style-mst-outline .wp-block-button__link { border-color: rgba(255,255,255,.75); color: var(--white); background: transparent; } .btn--outline:hover, .wp-block-button.is-style-mst-outline .wp-block-button__link:hover { border-color: var(--pink); color: var(--pink); } .wp-block-button.is-style-mst-ghost .wp-block-button__link { color: var(--white); background: transparent; padding-left: 8px; padding-right: 8px; } .wp-block-button.is-style-mst-ghost .wp-block-button__link:hover { color: var(--pink); } .wp-block-button.is-style-mst-dark .wp-block-button__link { background: var(--ink); color: var(--white); } .wp-block-button.is-style-mst-dark .wp-block-button__link:hover { background: #1c2438; } .btn--sm { padding: 10px 18px; font-size: 13px; } .mst-page .wp-block-buttons { gap: 14px; } .mst-page .wp-block-buttons > .wp-block-button { margin: 0; } /* Arrow links: a paragraph holding one link */ .arrow-link { font-family: var(--font-head); font-weight: 700; font-size: 15px; margin: 0; } .arrow-link a { display: inline-flex; align-items: center; gap: 10px; } .arrow-link a::after { content: ""; width: 17px; height: 17px; background: var(--pink); flex: none; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform .15s ease; } .arrow-link a:hover::after { transform: translateX(4px); } .arrow-link--white a { color: var(--white); } .arrow-link--pink a { color: var(--pink); } .arrow-link--pink a::after { background: currentColor; } /* Lists with pink ticks */ .is-style-mst-ticks li { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 15px; } .is-style-mst-ticks li::before { content: ""; width: 18px; height: 18px; flex: none; background: var(--pink); -webkit-mask: var(--tick) center / contain no-repeat; mask: var(--tick) center / contain no-repeat; } .circle-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; border: 1.5px solid currentColor; background: transparent; color: inherit; cursor: pointer; transition: background-color .15s, color .15s; } .circle-btn .icon { width: 18px; height: 18px; } .circle-btn:disabled { cursor: default; } /* ------------------------------------------------------------------ Header ------------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--ink); color: var(--white); transition: box-shadow .2s; } .site-header.is-scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.35); } .admin-bar .site-header { top: 32px; } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; } .brand-text { font-family: var(--font-head); font-weight: 800; font-size: 24px; letter-spacing: -0.03em; color: var(--white); } .brand-logo { max-height: 36px; width: auto; } .brand { display: inline-flex; align-items: center; line-height: 0; } .brand-logo-svg { display: block; height: 27px; width: auto; } .brand-logo-svg .lg-a { fill: #FF7CB9; } .brand-logo-svg .lg-b { fill: #FAF9F5; } .footer-brand .brand-logo-svg { height: 25px; } .brand:hover .brand-logo-svg .lg-b { fill: #fff; } .site-nav { display: flex; align-items: center; gap: 44px; } .site-nav .menu { display: flex; gap: 38px; } .site-nav .menu a { font-size: 14.5px; font-weight: 500; color: var(--white); padding: 8px 0; position: relative; } .site-nav .menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--pink); transform: scaleX(0); transition: transform .2s; } .site-nav .menu a:hover::after, .site-nav .current-menu-item > a::after, .site-nav .current_page_item > a::after, .site-nav .current-menu-ancestor > a::after, .site-nav .current-page-ancestor > a::after { transform: scaleX(1); } /* Services dropdown */ .site-nav .menu > li { position: relative; } .site-nav .menu-item-has-children > a { padding-right: 18px; } .site-nav .menu-item-has-children > a::before { content: ""; position: absolute; right: 0; top: 50%; width: 11px; height: 11px; margin-top: -5px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s; } .site-nav .menu-item-has-children:hover > a::before, .site-nav .menu-item-has-children:focus-within > a::before { transform: rotate(180deg); } .site-nav .sub-menu { position: absolute; top: 100%; left: -18px; z-index: 60; min-width: 300px; margin: 0; padding: 18px 8px 8px; list-style: none; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .site-nav .sub-menu::before { content: ""; position: absolute; inset: 10px 0 0; background: var(--ink-2); border: 1px solid var(--line-dark); border-top: 2px solid var(--pink); border-radius: 6px; box-shadow: 0 18px 40px rgba(0,0,0,.45); z-index: -1; } .site-nav .menu > li:hover > .sub-menu, .site-nav .menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .site-nav .sub-menu a { display: block; padding: 10px 14px; font-size: 14px; font-weight: 500; border-radius: 4px; color: #e6e8ef; white-space: nowrap; } .site-nav .sub-menu a::after { display: none; } .site-nav .sub-menu a:hover, .site-nav .sub-menu .current-menu-item > a { color: var(--pink); background: rgba(255,255,255,.05); } .nav-toggle { display: none; background: none; border: 0; color: var(--white); padding: 8px; cursor: pointer; } .nav-toggle .icon { width: 26px; height: 26px; } .nav-toggle .nav-close { display: none; } /* ------------------------------------------------------------------ Heroes ------------------------------------------------------------------ */ .hero { position: relative; background: var(--ink); color: var(--white); overflow: hidden; isolation: isolate; } .hero-inner { position: relative; z-index: 2; padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); } .hero-title { font-size: clamp(44px, 6.6vw, 86px); line-height: 0.98; margin-bottom: 26px; max-width: 12ch; } .hero-text { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; max-width: 520px; margin-bottom: 30px; color: #eef0f5; } .hero-art { position: absolute !important; z-index: 1; top: 0; right: 0; bottom: 0; margin: 0 !important; } .hero-art img { width: 100%; height: 100%; object-fit: cover; } .hero-art--mammoth { width: auto; aspect-ratio: 1550 / 842; max-width: 70%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 14%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 14%, #000 34%); } .hero-art--mammoth img { object-position: right center; } .hero--home .hero-title { max-width: none; font-size: clamp(42px, 5.4vw, 72px); } .hero--home .hero-inner { padding-top: clamp(44px, 5vw, 64px); padding-bottom: 32px; } .trust-row { display: flex; flex-wrap: wrap; margin-top: 40px; font-size: 13px; color: #d9dce6; } .trust-row li { padding: 0 18px; border-left: 1px solid rgba(255,255,255,.35); line-height: 1.1; } .trust-row li:first-child { padding-left: 0; border-left: 0; } .hero--services .hero-title { max-width: 14ch; } /* Services artwork (mountain and flag): starts in line with the content and its brush strokes run to the screen edge */ .hero-art--mountain, .hero-art--flag { width: calc(min(48%, 640px) + max(0px, (100% - 1264px) / 2)); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 140px); mask-image: linear-gradient(90deg, transparent 0, #000 140px); } .hero .wp-block-image.hero-art--mountain img, .hero .wp-block-image.hero-art--flag img { width: auto; min-width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: left bottom; } .hero-title--service { font-size: clamp(40px, 5.4vw, 70px); max-width: 15ch; letter-spacing: -0.04em; } .is-style-mst-eyebrow.eyebrow--num { letter-spacing: 0.08em; font-size: 15px; } .hero--service .hero-inner, .hero--services .hero-inner { min-height: 520px; } .page-hero { background: var(--ink); color: var(--white); padding: 72px 0 56px; } .page-hero .hero-title { margin: 0; max-width: none; font-size: clamp(40px, 5vw, 64px); } /* Contact hero: photo fills the right of the hero, top to bottom */ .hero--contact .hero-inner--split { display: block; position: static; padding-top: 0; padding-bottom: 0; } .hero--contact .hero-copy { position: relative; z-index: 2; max-width: 560px; padding: 80px 0 96px; } .hero--contact .hero-title { max-width: 11ch; font-size: clamp(40px, 5vw, 68px); } .hero--contact .hero-text { max-width: 470px; } .hero-portrait { position: absolute; z-index: 1; top: 0; bottom: 0; height: 100%; right: max(0px, calc((100% - 1264px) / 2)); aspect-ratio: 1303 / 935; margin: 0; /* width follows the hero height, so the photo always sits on the bottom edge */ /* keep the photo clear of the headline, whatever the screen width */ max-width: calc(100% - 2 * max(0px, (100% - 1264px) / 2) - 32px - min(5vw, 68px) * 7.1 + 30px); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 110px); mask-image: linear-gradient(90deg, transparent 0, #000 110px); } .hero-portrait .hero-portrait-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; } /* margin set in the editor nudges the photo */ .hero-portrait .hero-portrait-img img { width: 100%; height: 100%; object-fit: cover; object-position: right top; display: block; } .hero-portrait-note { position: absolute; z-index: 2; right: 18px; top: 26%; display: flex; flex-direction: column; color: var(--pink); white-space: nowrap; } .scribble-name { order: 1; font-family: var(--font-hand); font-size: clamp(30px, 3vw, 42px); line-height: 1; transform: rotate(-9deg); transform-origin: left bottom; margin: 0 0 0 18px !important; color: var(--pink); letter-spacing: 0.04em; } .hero-portrait-note::before { order: 2; content: ""; display: block; width: 80px; height: 52px; margin: 2px 0 12px 0; background: var(--pink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 52' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M26 6c14-2 28-3 44-2'/%3E%3Cpath d='M58 16c4 18-12 28-40 27'/%3E%3Cpath d='M28 34l-11 9 12 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 52' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M26 6c14-2 28-3 44-2'/%3E%3Cpath d='M58 16c4 18-12 28-40 27'/%3E%3Cpath d='M28 34l-11 9 12 6'/%3E%3C/svg%3E") center / contain no-repeat; } .portrait-tags { order: 3; color: var(--white); font-family: var(--font-head); font-weight: 700; font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.95; margin: 0; } /* ------------------------------------------------------------------ Home sections ------------------------------------------------------------------ */ .stats-bar { background: var(--paper); padding: 30px 0; border-bottom: 1px solid var(--line); } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .stat { text-align: center; padding: 8px 20px; border-left: 1px solid #cfcdc6; } .stat:first-child { border-left: 0; } .stat-value { font-family: var(--font-head); font-weight: 800; font-size: clamp(34px, 3.6vw, 46px); letter-spacing: -0.04em; line-height: 1; margin: 0 0 6px; } .stat-label { font-size: 14.5px; color: var(--text-2); max-width: 190px; line-height: 1.35; margin: 0 auto; } .split-work { padding-top: 64px; padding-bottom: 64px; } .split-heads { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; } .split-head { font-size: clamp(40px, 5.4vw, 70px); } .split-heads .split-head:last-child { color: var(--pink); } .split-work svg.split-bar { display: block; width: 52px; height: 52px; padding: 15px; border-radius: 50%; background: var(--pink); color: var(--ink); stroke-width: 2; margin: 18px auto -26px; position: relative; z-index: 1; } .split-cols { display: flex; justify-content: space-between; gap: 40px; border-top: 5px solid; border-image: linear-gradient(90deg, var(--ink) 0 50%, var(--pink) 50% 100%) 1; padding-top: 50px; } .split-col { max-width: 330px; } .split-col > p { color: var(--text); } .section-head { margin-bottom: 44px; } .section-head .h2, .section-head .h1-dark { margin-bottom: 14px; } .section-head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; } .section-head--row .lead { margin-bottom: 0; color: #e6e8ef; } .section-head--split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: end; } .section-head--split > p { color: var(--text-2); font-size: 16.5px; margin: 0; } /* ------------------------------------------------------------------ Less hard sell / More hard sell (10 steps, mammoth finale) ------------------------------------------------------------------ */ .hard-sell { position: relative; background: var(--paper); color: var(--ink); padding-top: 64px; padding-bottom: 56px; overflow: hidden; transition: background-color .35s ease, color .35s ease; } .hard-sell > .container { position: relative; z-index: 2; } .hard-sell .is-style-mst-eyebrow { transition: color .35s; margin-bottom: 6px; } .hs-intro { font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.7; color: var(--ink); max-width: 760px; margin: 0; transition: color .35s; } .hs-levels { position: relative; margin-top: 30px; } .hs-level { max-width: 900px; } .hard-sell.is-ready .hs-level { display: none; } .hard-sell.is-ready .hs-level.is-active { display: block; animation: hs-in .25s ease; } @keyframes hs-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .hs-level p { margin: 0 0 12px; font-family: var(--font-head); font-weight: 500; letter-spacing: -0.01em; line-height: 1.45; } .hs-level .hs-lead { font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 14px; } .hs-level .wp-block-buttons { margin-top: 18px; } .hs-level strong { font-weight: 800; } .hs-level p.hs-small { font-size: 15px !important; } .hs-level p.hs-small a { color: var(--ink); border-bottom: 2px solid var(--pink); text-decoration: none; } .hs-level p.hs-services { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; } .hs-level p.hs-services a { display: inline-block; padding: 7px 13px; border-radius: 40px; background: var(--ink); color: var(--white); font-size: 14px; font-weight: 600; text-decoration: none; letter-spacing: 0; transition: background-color .15s, color .15s; } .hs-level p.hs-services a:hover { background: var(--pink); color: var(--ink); } /* each step a little louder than the last */ .hs-level--1 p { font-size: 16px; color: #8a8e9b; font-family: var(--font-body); font-weight: 400; } .hs-level--2 p { font-size: 17px; color: #5d6272; font-family: var(--font-body); font-weight: 400; } .hs-level--3 p { font-size: 18px; color: var(--text-2); } .hs-level--4 p { font-size: clamp(18px, 1.7vw, 21px); color: var(--ink); } .hs-level--5 p { font-size: clamp(17px, 1.6vw, 19px); } .hs-level--5 .hs-lead { font-size: clamp(26px, 3vw, 38px); } .hs-level--6 p { font-size: clamp(17px, 1.6vw, 19px); } .hs-level--6 .hs-lead { font-size: clamp(27px, 3.2vw, 40px); } .hs-level--7 p { font-size: clamp(17px, 1.7vw, 20px); } .hs-level--7 .hs-lead { font-size: clamp(29px, 3.6vw, 46px); } .hs-level--8 p { font-size: clamp(18px, 1.8vw, 21px); } .hs-level--8 .hs-lead { font-size: clamp(31px, 4vw, 52px); } .hs-level--9 p { font-size: clamp(16px, 1.6vw, 19px); text-transform: uppercase; } .hs-level--9 .hs-lead { font-size: clamp(32px, 4.4vw, 58px); } .hs-level--10 p { font-size: clamp(16px, 1.6vw, 19px); text-transform: uppercase; } .hs-level--10 .hs-lead { font-size: clamp(34px, 4.8vw, 64px); } /* the section itself gets louder */ .hard-sell[data-level="9"], .hard-sell[data-level="10"] { background: var(--pink); color: var(--ink); } .hard-sell[data-level="9"] .is-style-mst-eyebrow, .hard-sell[data-level="10"] .is-style-mst-eyebrow { color: var(--ink); } .hard-sell[data-level="9"] .hs-level p, .hard-sell[data-level="10"] .hs-level p { color: var(--ink); } .hard-sell[data-level="9"] mark.has-pink-color, .hard-sell[data-level="10"] mark.has-pink-color { color: #fff !important; } .hard-sell[data-level="10"] { animation: hs-shake .5s ease .25s 2; } @keyframes hs-shake { 0%, 100% { transform: none; } 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -2px); } 60% { transform: translate(-3px, -1px); } 80% { transform: translate(3px, 1px); } } /* the slider runs the full width of the page */ .hs-slider { position: relative; height: 76px; margin: 26px 44px 0; max-width: none; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; } .hs-track, .hs-fill { position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; } .hs-track { left: 0; right: 0; background: rgba(10,15,30,.14); } .hs-fill { left: 0; width: var(--p, 0%); background: var(--ink); } .hs-dot { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #cfd0d6; transition: background-color .15s; } .hs-dot.is-on { background: var(--ink); } .hs-slider:not(.is-dragging) .hs-fill { transition: width .2s ease; } .hard-sell[data-level="9"] .hs-track, .hard-sell[data-level="10"] .hs-track { background: rgba(10,15,30,.2); } .hard-sell[data-level="9"] .hs-dot, .hard-sell[data-level="10"] .hs-dot { background: rgba(10,15,30,.3); } .hard-sell[data-level="9"] .hs-dot.is-on, .hard-sell[data-level="10"] .hs-dot.is-on { background: var(--ink); } .hs-labels { display: flex; justify-content: space-between; margin: 2px 44px 0; max-width: none; } .hs-label { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 15px; opacity: .8; } .hard-sell:not(.is-ready) .hs-labels { display: none; } /* the finale: mammoths and a giant LET'S TALK */ .hs-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .hs-mammoth { position: absolute; bottom: -4%; height: 82%; width: auto; max-width: none; opacity: 0; filter: drop-shadow(0 18px 24px rgba(10,15,30,.35)); transition: transform .5s cubic-bezier(.2,1.4,.4,1), opacity .3s; } .hs-mammoth--right { right: -2%; transform: translate(70%, 30%) rotate(8deg); } .hs-mammoth--left { left: -2%; transform: translate(-80%, 20%) scaleX(-1) rotate(8deg); } .hard-sell[data-level="9"] .hs-mammoth--right { opacity: 1; transform: translate(55%, 22%) rotate(10deg); animation: hs-peek 1.6s ease-in-out infinite; } @keyframes hs-peek { 0%, 100% { margin-bottom: 0; } 50% { margin-bottom: 12px; } } .hard-sell[data-level="10"] .hs-mammoth--right { opacity: 1; transform: translate(8%, 0) rotate(-4deg); animation: hs-stomp .6s ease-in-out .5s infinite; } .hard-sell[data-level="10"] .hs-mammoth--left { opacity: 1; transform: translate(-6%, 4%) scaleX(-1) rotate(-4deg); animation: hs-stomp .6s ease-in-out .8s infinite; } @keyframes hs-stomp { 0%, 100% { margin-bottom: 0; } 50% { margin-bottom: 14px; } } .hs-giant { position: absolute; left: 50%; top: 4%; margin: 0; font-family: var(--font-hand); font-size: clamp(64px, 13vw, 210px); line-height: 1; color: #fff; text-shadow: 5px 5px 0 var(--ink); white-space: nowrap; opacity: 0; transform: translateX(-50%) rotate(-7deg) scale(2.4); } .hard-sell[data-level="10"] .hs-giant { animation: hs-slam .45s cubic-bezier(.2,1.5,.4,1) .2s forwards; } @keyframes hs-slam { to { opacity: 1; transform: translateX(-50%) rotate(-7deg) scale(1); } } .hard-sell[data-level="10"] .hs-levels { margin-top: clamp(90px, 12vw, 190px); } @media (prefers-reduced-motion: reduce) { .hard-sell[data-level="10"], .hs-mammoth, .hs-giant { animation: none !important; transition: none !important; } .hard-sell[data-level="10"] .hs-giant { opacity: 1; transform: translateX(-50%) rotate(-7deg); } } @media (max-width: 900px) { .hs-mammoth { height: 52%; } .hard-sell[data-level="10"] .hs-mammoth, .hard-sell[data-level="9"] .hs-mammoth { opacity: .55; } } @media (max-width: 640px) { .hs-slider, .hs-labels { margin-left: 34px; margin-right: 34px; } .hs-mammoth { height: 38%; } .hs-level p.hs-services a { font-size: 13px; padding: 6px 11px; } } /* ------------------------------------------------------------------ Strategy / Execution mix slider ------------------------------------------------------------------ */ .mix-work { padding-top: 64px; padding-bottom: 72px; } .mix-work .split-head { transition: opacity .2s; } .mix-hint { margin: 10px 0 0; font-size: 14px; color: var(--text-3); transition: opacity .4s; } .mix-hint.is-used { opacity: 0; } .mix-bar { position: relative; margin: 26px 0 8px; } .mix-bar input { height: 56px; } .mix-bar input::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--ink) 0 var(--pct, 50%), var(--pink) var(--pct, 50%) 100%); } .mix-bar input::-moz-range-track { height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--ink) 0 var(--pct, 50%), var(--pink) var(--pct, 50%) 100%); } .mix-bar input::-webkit-slider-thumb { -webkit-appearance: none; width: 56px; height: 56px; border-radius: 50%; margin-top: -25.5px; border: 0; cursor: grab; background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0f1e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18M7 8l-4 4 4 4M17 8l4 4-4 4'/%3E%3C/svg%3E") center / 24px no-repeat; box-shadow: 0 0 0 8px var(--paper), 0 6px 18px rgba(10,15,30,.25); transition: transform .15s; } .mix-bar input::-moz-range-thumb { width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: grab; background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0f1e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18M7 8l-4 4 4 4M17 8l4 4-4 4'/%3E%3C/svg%3E") center / 24px no-repeat; box-shadow: 0 0 0 8px var(--paper); } .mix-bar input:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.06); } .mix-bar input:focus-visible { outline: none; } .mix-bar input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 8px var(--paper), 0 0 0 11px var(--pink); } .mix-ticks-row { position: relative; height: 30px; margin: 4px 28px 0; } .mix-tick { position: absolute; top: 0; transform: translateX(-50%); background: none; border: 0; padding: 4px 6px; font: 600 12px/1.2 var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); cursor: pointer; white-space: nowrap; } .mix-tick:first-child { transform: none; left: -28px !important; } .mix-tick:last-child { transform: translateX(-100%); left: calc(100% + 28px) !important; } .mix-tick.is-active, .mix-tick:hover { color: var(--ink); } .mix-stops { margin-top: 30px; } .mix-stop { border-top: 1px solid var(--line); padding-top: 34px; margin-bottom: 30px; } .mix-work.is-ready .mix-stops { display: grid; } .mix-work.is-ready .mix-stop { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease, visibility .3s; } .mix-work.is-ready .mix-stop.is-active { opacity: 1; visibility: visible; transform: none; } .mix-work.is-ready .mix-kicker { display: none; } .mix-kicker { font: 700 12px/1 var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--pink); margin: 0 0 12px; } .mix-body { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: start; } .mix-title { font-size: clamp(28px, 3vw, 40px); margin-bottom: 14px; } .mix-text { font-size: 17.5px; color: var(--text-2); max-width: 560px; } .mix-ticks { padding-top: 8px; } .mix-ticks li { font-size: 16px; margin-bottom: 14px; } .mix-link { margin-top: 18px; } /* Service cards */ .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .service-card { background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: 4px; padding: 28px 26px 26px; display: flex; flex-direction: column; color: var(--white); transition: border-color .2s, transform .2s; } .service-card:hover { border-color: var(--pink); transform: translateY(-2px); } .service-card-top { display: flex; justify-content: space-between; align-items: flex-start; } .service-num { font-family: var(--font-head); font-weight: 700; color: var(--pink); font-size: 15px; margin: 0; } .service-icon { width: 44px; height: 44px; color: var(--pink); stroke-width: 1.4; margin-top: -6px; } .service-title { font-size: 22px; letter-spacing: -0.025em; line-height: 1.15; margin: 4px 0 12px; font-weight: 700; } .service-text { color: var(--on-dark-2); font-size: 15px; flex: 1; margin-bottom: 22px; } .service-link a { color: var(--white); } .services-list .service-card { background: var(--ink); border-color: var(--ink); padding: 34px 30px 32px; box-shadow: 0 10px 28px rgba(10,15,30,.12); } .services-list .service-card:hover { border-color: var(--pink); } .services-list .service-num { font-size: 22px; } .services-list .service-icon { width: 54px; height: 54px; } .services-list .service-title { font-size: 24px; margin: 22px 0 16px; } .services-list .service-link a { color: var(--pink); } .services-list .section-head .lead { color: var(--text); font-size: 19px; } /* Audiences */ .audiences { padding-bottom: 40px; } .audiences-top { display: grid; grid-template-columns: 1fr 1.25fr; gap: 40px; align-items: center; } .audiences-intro .h2 { margin-bottom: 14px; } .audiences-intro p:last-child { color: var(--text-2); max-width: 420px; } .audience-cols { display: grid; grid-template-columns: repeat(3, 1fr); } .audience { text-align: center; padding: 6px 20px; border-left: 1px solid var(--line); } .audience:first-child { border-left: 0; } .audience .icon { display: block; width: 36px; height: 36px; margin: 0 auto 12px; color: var(--text); stroke-width: 1.4; } .audience h3 { font-size: 16px; letter-spacing: -0.01em; font-weight: 700; margin-bottom: 6px; line-height: 1.25; } .audience p { font-size: 14px; color: var(--text-2); margin: 0; line-height: 1.4; } .pill-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; } .pill-row li { background: var(--paper-2); border-radius: 999px; padding: 9px 26px; font-size: 13.5px; font-weight: 500; } /* How I work */ .how-work { padding-top: 48px; border-top: 1px solid var(--line); } .how-work-inner { display: grid; grid-template-columns: 0.9fr 1.6fr; gap: 48px; align-items: start; } .how-work-intro .h2 { margin-bottom: 14px; } .how-work-intro p { color: var(--text-2); } .steps { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; } .steps::before { content: ""; position: absolute; top: 30px; left: 16.66%; right: 16.66%; height: 2px; background: #f6a9cf; } .step { text-align: center; padding: 0 12px; position: relative; } .step-num { width: 60px; height: 60px; border-radius: 50%; background: var(--pink); color: var(--ink); display: grid; place-items: center; margin: 0 auto 18px !important; font-family: var(--font-head); font-weight: 800; font-size: 19px; position: relative; box-shadow: 0 0 0 8px var(--paper); } .step h3 { font-size: 20px; letter-spacing: -0.02em; font-weight: 700; margin-bottom: 8px; } .step p { font-size: 15px; color: var(--text-2); margin: 0 auto; max-width: 230px; } .steps--detailed .step p { max-width: 300px; } .steps--detailed .step p.step-more { margin-top: 14px; line-height: 1.6; } .how-work--page { border-top: 0; padding-top: var(--section); } /* About on home */ .about-home { padding-top: 24px; padding-bottom: 0; overflow: hidden; } .about-home-inner { display: grid; grid-template-columns: 1.05fr 0.95fr 0.62fr; gap: 32px; align-items: end; } .about-home-copy { align-self: center; padding-bottom: 48px; } .about-home-copy .h2 { margin-bottom: 18px; } .about-home-copy p { color: var(--text-2); max-width: 470px; } .about-home-photo img { mix-blend-mode: multiply; } .stack-stats { border-left: 1px solid #cfcdc6; padding: 8px 0 40px 28px; align-self: center; } .stack-stat { margin-bottom: 18px; } .stack-value { font-family: var(--font-head); font-weight: 800; font-size: clamp(28px, 2.6vw, 36px); letter-spacing: -0.04em; line-height: 1.05; margin: 0; } .stack-label { font-size: 14.5px; color: var(--text-2); line-height: 1.35; max-width: 200px; margin: 0; } .stack-stats--lg { padding: 10px 0 10px 32px; } .stack-stats--lg .stack-stat { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--line); } .stack-stats--lg .stack-stat:last-child { border-bottom: 0; margin-bottom: 0; } .stack-stats--lg .stack-value { font-size: clamp(36px, 3.6vw, 50px); } .stack-stats--lg .stack-label { font-size: 15.5px; } /* Testimonials */ .testimonial { padding: 36px 0; } .testimonial-slides { display: flex; align-items: center; gap: 36px; } .testimonial-slide { flex: 1; display: flex; align-items: center; gap: 26px; } .testimonial-slide[hidden] { display: none; } .quote-mark { width: 52px; height: 52px; color: var(--pink); flex: none; align-self: flex-start; } .testimonial-quote { margin: 0; flex: 1; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.4; max-width: 640px; } .testimonial-cite { margin-left: auto; min-width: 170px; } .testimonial-cite p { margin: 0; font-size: 13px; } .testimonial-cite .cite-name { font-family: var(--font-head); font-size: 14px; } .testimonial-arrows { display: flex; gap: 12px; flex: none; } .testimonial--pink { background: var(--pink-soft); color: var(--text); } .testimonial--pink .quote-mark { color: #f45ea6; } .testimonial--dark { background: var(--ink); color: var(--white); padding: 56px 0; } .testimonial--dark .testimonial-slide { align-items: flex-start; flex-wrap: wrap; } .testimonial--dark .quote-mark { width: 44px; height: 44px; flex-basis: 100%; max-width: 44px; margin-bottom: -10px; } .testimonial--dark .testimonial-quote { font-family: var(--font-serif); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.3; max-width: 760px; } .testimonial--dark .testimonial-cite { align-self: center; border-left: 1px solid rgba(255,255,255,.3); padding-left: 40px; } .testimonial--dark .circle-btn { color: var(--pink); } .testimonial--dark .circle-btn:hover { background: var(--pink); color: var(--ink); } .testimonial--light { background: var(--paper); padding: 48px 0; border-top: 1px solid var(--line); } .testimonial--light .testimonial-quote { font-family: var(--font-head); font-weight: 600; font-size: clamp(20px, 2.1vw, 27px); letter-spacing: -0.02em; line-height: 1.25; } .testimonial--light .testimonial-cite { border-left: 1px solid var(--line); padding-left: 36px; } .testimonial--light .circle-btn { color: #e7559c; } .testimonial .is-style-mst-eyebrow { margin-bottom: 8px; } /* CTA mammoth band */ .cta-band { position: relative; background: var(--ink); color: var(--white); overflow: hidden; isolation: isolate; } .cta-band-art { position: absolute !important; z-index: 1; top: 0; bottom: 0; right: 0; width: min(60%, 960px); aspect-ratio: auto; max-width: none; margin: 0 !important; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 14%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 14%, #000 34%); } .cta-band-art img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 38%; } .cta-band-inner { position: relative; z-index: 2; padding-top: 56px; padding-bottom: 56px; display: flex; justify-content: space-between; align-items: center; gap: 40px; } .cta-band-title { font-size: clamp(30px, 3.3vw, 44px); line-height: 1.04; margin-bottom: 16px; max-width: 24ch; } .cta-band-text { max-width: 420px; color: #e6e8ef; margin-bottom: 26px; } /* Home banner: the three points sit under the buttons */ .cta-band--list .cta-band-inner { flex-direction: column; align-items: flex-start; justify-content: center; gap: 30px; } .cta-band-list { display: grid; gap: 12px; font-size: 14px; color: #e6e8ef; } .cta-band--list .cta-band-art { width: min(54%, 880px); } .cta-band-item { display: flex; align-items: center; gap: 14px; } .cta-band-item p { margin: 0; } .cta-band-item .icon { width: 20px; height: 20px; color: var(--pink); } /* "Not sure where to start?" */ .start-band { position: relative; overflow: hidden; isolation: isolate; } .start-band-art { position: absolute !important; z-index: 1; top: 0; bottom: 0; right: 0; width: min(46%, 620px); margin: 0 !important; } .start-band-art img { width: 100%; height: 100%; object-fit: cover; object-position: left center; } .start-band-inner { position: relative; z-index: 2; padding-top: 72px; padding-bottom: 80px; } .start-band-title { font-size: clamp(38px, 4.6vw, 58px); margin-bottom: 18px; max-width: 11ch; } .start-band-text { font-size: 18px; max-width: 400px; margin-bottom: 28px; } .start-band--pink { background: #fcc9de; color: var(--text); } .start-band--pink .is-style-mst-eyebrow { color: var(--text); } .start-band--dark { background: var(--ink); color: var(--white); } .start-band--dark .start-band-art { width: min(40%, 520px); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%); } .start-band--dark .start-band-title { font-size: clamp(32px, 3.4vw, 44px); max-width: none; } .start-band--dark .start-band-text { color: #e6e8ef; font-size: 17px; } .start-band--dark .start-band-inner { padding-top: 56px; padding-bottom: 56px; } /* ------------------------------------------------------------------ Service detail ------------------------------------------------------------------ */ .included .h2, .who-for .h2, .outcomes .h2 { margin-bottom: 30px; } .big-ticks li { gap: 30px; font-size: clamp(18px, 1.7vw, 21px); margin-bottom: 18px; } .big-ticks li::before { width: 34px; height: 34px; } .who-list { max-width: 740px; } .who-row { display: flex; align-items: center; gap: 50px; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.28); } .who-row:last-child { border-bottom: 0; } .who-row p { margin: 0; font-size: clamp(18px, 1.7vw, 21px); max-width: 380px; line-height: 1.4; } svg.ring { width: 86px; height: 86px; padding: 22px; border-radius: 50%; border: 2px solid var(--pink); color: var(--pink); stroke-width: 1.5; } .outcomes { padding-top: 64px; padding-bottom: 48px; } .outcomes .h2 { margin-bottom: 16px; } .outcome-grid { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 760px; } .outcome { padding: 4px 32px; border-left: 1px solid #cfcdc6; text-align: center; } .outcome:first-child { border-left: 0; padding-left: 0; text-align: left; } .outcome-value { font-family: var(--font-head); font-weight: 800; color: var(--pink); font-size: clamp(40px, 4.4vw, 56px); letter-spacing: -0.04em; line-height: 1.05; margin: 0; } .outcome-label { font-size: 17px; max-width: 200px; margin: 0 auto; } .outcome:first-child .outcome-label { margin: 0; } .more-services { padding-top: 16px; padding-bottom: 64px; } .more-services-list { display: flex; flex-wrap: wrap; gap: 12px 32px; font-family: var(--font-head); font-weight: 700; font-size: 15px; } .more-services-list a { display: inline-flex; align-items: center; gap: 10px; } .more-services-list a::after { content: ""; width: 16px; height: 16px; background: var(--pink); -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; } /* ------------------------------------------------------------------ About page ------------------------------------------------------------------ */ .about-hero { padding-top: 32px; padding-bottom: 48px; } .about-hero-inner { display: grid; grid-template-columns: 1.15fr 0.85fr 0.62fr; gap: 28px; align-items: stretch; } .about-hero-copy { padding-top: 12px; } .about-hero-copy .h1-dark { margin-bottom: 26px; font-size: clamp(36px, 4.1vw, 56px); } .about-hero-copy p { color: var(--text-2); font-size: 15.5px; max-width: 480px; } .about-hero-photo img { height: 100%; object-fit: cover; } .expertise { padding-top: 48px; } .icon-grid { display: grid; grid-template-columns: repeat(3, 1fr); } .icon-item { display: flex; gap: 22px; padding: 28px 24px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); } .icon-item:nth-child(3n+1) { border-left: 0; padding-left: 0; } .icon-item:nth-child(-n+3) { border-top: 0; } .icon-item > .icon { width: 50px; height: 50px; color: var(--pink); stroke-width: 1.4; } .icon-item h3 { font-size: 19px; letter-spacing: -0.02em; font-weight: 700; margin-bottom: 8px; line-height: 1.2; } .icon-item p { font-size: 14.5px; color: var(--text-2); margin: 0; } .credentials { padding-top: 32px; background: #fcfcfa; } .cred-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .cred { padding: 0 28px; border-left: 1px solid var(--line); } .cred:first-child { border-left: 0; padding-left: 0; } .cred .icon { display: block; width: 40px; height: 40px; color: var(--pink); stroke-width: 1.4; margin-bottom: 18px; } .cred h3 { font-size: 17px; letter-spacing: -0.015em; font-weight: 700; line-height: 1.25; margin-bottom: 10px; } .cred p { font-size: 14.5px; color: var(--text-2); margin: 0; } /* ------------------------------------------------------------------ Contact page ------------------------------------------------------------------ */ .contact-strip { background: #fbfbf9; padding: 36px 0; border-bottom: 1px solid var(--line); } .contact-strip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .contact-item { display: flex; gap: 24px; padding: 6px 32px; border-left: 1px solid var(--line); } .contact-item:first-child { border-left: 0; padding-left: 0; } .contact-item > .icon { width: 42px; height: 42px; color: var(--pink); stroke-width: 1.5; } .contact-item h3 { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; margin-bottom: 8px; } .contact-item p { font-size: 14px; color: var(--text-2); margin-bottom: 8px; line-height: 1.45; } .contact-item p.contact-link { font-weight: 600; font-size: 15.5px; color: var(--text); word-break: break-all; margin: 0; } .message-section { padding-top: 40px; padding-bottom: 40px; } .message-inner { display: grid; grid-template-columns: 0.95fr 1fr; gap: 48px; align-items: center; } .message-copy .h2 { margin-bottom: 20px; } .message-copy p { font-size: 17.5px; color: var(--text-2); max-width: 440px; } .form-card { background: #f1f0ec; padding: 24px 24px 22px; border-radius: 4px; } .contact-form { display: grid; gap: 18px; } .contact-form label { display: grid; gap: 7px; } .contact-form label > span { font-family: var(--font-head); font-weight: 700; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; } .contact-form label b { color: var(--pink); } .form-row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .contact-form input, .contact-form select, .contact-form textarea { width: 100%; font: inherit; font-size: 15px; color: var(--text); background: var(--white); border: 1px solid #d6d4cd; border-radius: 3px; padding: 11px 12px; } .contact-form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1020' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 40px; } .contact-form textarea { resize: vertical; min-height: 88px; } .contact-form ::placeholder { color: #9a9ca5; } .form-foot { display: flex; align-items: center; gap: 24px; } .form-foot p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.4; } .form-notice { padding: 12px 14px; border-radius: 4px; margin-bottom: 16px; font-size: 14.5px; } .form-notice--ok { background: #e3f6ea; color: #14532d; } .form-notice--err { background: #fde7ef; color: #8a1540; } .bit-about { padding-top: 40px; border-top: 1px solid var(--line); background: #fcfcfa; } .bit-about-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; } .bit-about-copy .h2 { margin-bottom: 18px; font-size: clamp(30px, 3.3vw, 44px); } .bit-about-copy p { color: var(--text-2); max-width: 540px; margin-bottom: 26px; } .feature-list { border-left: 1px solid var(--line); padding-left: 44px; display: grid; gap: 26px; align-content: center; } .feature { display: flex; gap: 26px; align-items: flex-start; } .feature > .icon { width: 44px; height: 44px; color: var(--pink); stroke-width: 1.4; } .feature h3 { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; margin-bottom: 8px; } .feature p { margin: 0; font-size: 14.5px; color: var(--text-2); } .speaking { background: var(--ink); color: var(--white); overflow: hidden; } .speaking-inner { display: grid; grid-template-columns: 0.75fr 1.15fr 0.95fr; gap: 36px; align-items: center; } .speaking-photo { align-self: end; margin-left: calc(var(--gutter) * -1) !important; } .speaking-photo img { max-width: 360px; } .speaking-copy { padding: 40px 0; } .speaking-copy .h3 { margin-bottom: 14px; } .speaking-copy p { color: #e0e3ea; font-size: 15px; } .speaking-list { border-left: 1px solid rgba(255,255,255,.28); padding-left: 36px; display: grid; gap: 24px; } .speaking-item { display: flex; gap: 20px; align-items: flex-start; } .speaking-item > .icon { width: 26px; height: 26px; color: var(--pink); } .speaking-item h4 { font-size: 15px; letter-spacing: -0.01em; font-weight: 700; line-height: 1.3; } .speaking-item p { font-size: 13.5px; color: #d5d8e1; margin: 0; } /* ------------------------------------------------------------------ Ordinary pages and posts ------------------------------------------------------------------ */ .entry-content { max-width: 760px; font-size: 17px; } .entry-content h2 { font-size: 30px; margin: 1.4em 0 .5em; } .entry-content h3 { font-size: 22px; margin: 1.2em 0 .4em; } .entry-content a { color: #d9468e; text-decoration: underline; } .entry-content ul { list-style: disc; padding-left: 1.3em; margin-bottom: 1em; } .entry-content p { margin-bottom: 1em; } .post-list { display: grid; gap: 40px; } .post-card h2 { font-size: 28px; margin-bottom: 10px; } .post-date { font-size: 13px; color: var(--text-3); margin-bottom: 6px; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } /* ------------------------------------------------------------------ Footer ------------------------------------------------------------------ */ .site-footer { background: var(--ink); color: var(--white); border-top: 1px solid rgba(255,255,255,.08); position: relative; z-index: 3; } .footer-inner { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 48px; padding-top: 30px; padding-bottom: 30px; } .footer-brand .brand-text { font-size: 24px; } .footer-nav { justify-self: center; } .footer-menu { display: flex; gap: 44px; flex-wrap: wrap; justify-content: center; } .footer-menu a { font-size: 15px; font-weight: 500; color: #e6e8ef; padding: 6px 0; border-bottom: 2px solid transparent; } .footer-menu a:hover { color: var(--white); border-color: rgba(255,124,185,.5); } .footer-menu .current-menu-item a, .footer-menu .current_page_item a { border-color: var(--pink); color: var(--white); } .footer-social { display: flex; gap: 20px; align-items: center; } .social-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; color: var(--white); transition: color .15s, transform .15s; } .social-btn svg { width: 30px; height: 30px; display: block; } .social-btn:hover { color: var(--pink); transform: translateY(-1px); } .footer-tagline { margin: 0; font-size: 13.5px; line-height: 1.55; color: #d5d8e1; } /* ------------------------------------------------------------------ Responsive ------------------------------------------------------------------ */ @media (max-width: 1100px) { .about-home-inner { grid-template-columns: 1fr 1fr; } .about-home-inner .stack-stats, .about-hero-inner .stack-stats { grid-column: 1 / -1; border-left: 0; padding-left: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-bottom: 40px; } .about-hero-inner { grid-template-columns: 1.2fr 1fr; } .stack-stats--lg .stack-stat { border-bottom: 0; margin: 0; padding: 0; } .speaking-inner { grid-template-columns: 0.8fr 1.2fr; } .speaking-list { grid-column: 1 / -1; border-left: 0; padding: 0 0 40px; grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { :root { --gutter: 22px; } .nav-toggle { display: inline-flex; } .site-nav { position: fixed; inset: 76px 0 auto 0; background: var(--ink); flex-direction: column; align-items: stretch; gap: 20px; padding: 24px var(--gutter) 32px; border-top: 1px solid var(--line-dark); transform: translateY(-120%); transition: transform .25s ease; visibility: hidden; } .admin-bar .site-nav { top: 122px; } .nav-is-open .site-nav { transform: none; visibility: visible; } .nav-is-open .nav-open { display: none; } .nav-is-open .nav-close { display: block; } .site-nav .menu { flex-direction: column; gap: 4px; } .site-nav .menu a { display: block; font-size: 20px; font-family: var(--font-head); font-weight: 700; padding: 10px 0; } .site-nav .menu a::after { right: auto; width: 40px; } .site-nav .btn { justify-content: center; } .site-nav { max-height: calc(100vh - 76px); overflow-y: auto; } .site-nav .menu-item-has-children > a::before { display: none; } .site-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; padding: 0 0 8px 14px; margin: 0 0 6px; border-left: 2px solid var(--pink); } .site-nav .sub-menu::before { display: none; } .site-nav .sub-menu a { font-family: var(--font-body); font-size: 15px; font-weight: 500; padding: 8px 0; white-space: normal; background: none; } .hero-art--mammoth, .hero-art--mountain, .hero-art--flag { width: 100%; max-width: none; aspect-ratio: auto; right: 0 !important; opacity: .35; -webkit-mask-image: none; mask-image: none; } .hero .wp-block-image.hero-art--mountain img, .hero .wp-block-image.hero-art--flag img { width: 100%; height: 100%; object-fit: cover; object-position: 20% bottom; } .hero-art--mammoth img, .cta-band-art img, .cta-band--list .cta-band-art img { object-position: 50% 35%; } .cta-band--list .cta-band-art { width: 100% !important; } .hero--service .hero-inner, .hero--services .hero-inner { min-height: 0; } .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 24px; } .stat:nth-child(3) { border-left: 0; } .split-cols { flex-direction: column; } .split-col--right { align-self: flex-end; } .service-grid { grid-template-columns: repeat(2, 1fr); } .section-head--row, .section-head--split { display: block; } .section-head--row .arrow-link { margin-top: 20px; } .section-head--split > p { margin-top: 16px; } .audiences-top { grid-template-columns: 1fr; } .how-work-inner { grid-template-columns: 1fr; } .icon-grid { grid-template-columns: repeat(2, 1fr); } .icon-item, .icon-item:nth-child(3n+1), .icon-item:nth-child(-n+3) { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; } .icon-item:nth-child(-n+2) { border-top: 0; } .icon-item:nth-child(2n) { border-left: 1px solid var(--line); padding-left: 24px; } .cred-grid { grid-template-columns: repeat(2, 1fr); row-gap: 36px; } .cred:nth-child(3) { border-left: 0; padding-left: 0; } .testimonial-slides { flex-direction: column; align-items: flex-start; gap: 20px; } .testimonial-slide { flex-wrap: wrap; gap: 16px; } .testimonial-cite, .testimonial--dark .testimonial-cite, .testimonial--light .testimonial-cite { margin-left: 0; border-left: 0; padding-left: 0; flex-basis: 100%; } .hero-inner--split { grid-template-columns: 1fr; } .hero--contact .hero-copy { max-width: none; padding: 44px 0 20px; } .hero-portrait { position: relative; right: auto; top: auto; bottom: auto; height: auto; width: 100%; max-width: none; margin: 0 auto; -webkit-mask-image: none; mask-image: none; } .hero-portrait .hero-portrait-img { position: relative; } .hero-portrait .hero-portrait-img img { height: auto; } .hero-portrait-note { right: 3%; } .contact-item { padding: 16px 0; border-left: 0; border-top: 1px solid var(--line); } .contact-item:first-child { border-top: 0; } .message-inner, .bit-about-inner { grid-template-columns: 1fr; } .feature-list { border-left: 0; padding-left: 0; } .speaking-inner { grid-template-columns: 1fr; } .speaking-photo { display: none; } .speaking-copy { padding-bottom: 0; } .start-band-art { width: 100% !important; opacity: .25; } .cta-band-art { width: 100% !important; max-width: none !important; aspect-ratio: auto !important; right: 0 !important; opacity: .3; -webkit-mask-image: none !important; mask-image: none !important; } .footer-inner { grid-template-columns: 1fr auto; gap: 22px 24px; padding-top: 28px; padding-bottom: 32px; } .footer-nav { grid-column: 1 / -1; grid-row: 2; justify-self: start; } .footer-menu { justify-content: flex-start; gap: 14px 28px; } .footer-tagline { grid-column: 1 / -1; } } @media (max-width: 640px) { .mix-body { grid-template-columns: 1fr; gap: 16px; } .mix-tick { font-size: 0; } .mix-tick.is-active { font-size: 11px; } .service-grid, .icon-grid, .cred-grid, .outcome-grid, .speaking-list { grid-template-columns: 1fr; } .icon-item:nth-child(2n) { border-left: 0; padding-left: 0; } .icon-item:nth-child(2) { border-top: 1px solid var(--line); } .cred { border-left: 0; padding-left: 0; } .audience-cols { grid-template-columns: 1fr; gap: 20px; } .audience { border-left: 0; } .steps { grid-template-columns: 1fr; gap: 28px; } .steps::before { display: none; } .about-home-inner, .about-hero-inner { grid-template-columns: 1fr; } .about-home-inner .stack-stats, .about-hero-inner .stack-stats { grid-template-columns: 1fr 1fr; } .outcome, .outcome:first-child { border-left: 0; padding: 12px 0; text-align: left; } .outcome-label { margin: 0; } .form-row--2 { grid-template-columns: 1fr; } .form-foot { flex-direction: column; align-items: flex-start; } .who-row { gap: 24px; } svg.ring { width: 64px; height: 64px; padding: 16px; } .trust-row li { padding: 4px 12px; } .big-ticks li { gap: 18px; } .split-heads { flex-direction: column; align-items: flex-start; gap: 0; } .hero-portrait-note { display: none; } .hero-portrait { width: 140%; margin-left: -8%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------------ Hard sell slider: mammoth handle, slider under the copy ------------------------------------------------------------------ */ .hs-knob { width: 88px; height: 68px; margin: -40px 0 0 -44px; border: 0; border-radius: 0; background: transparent url("data:image/webp;base64,UklGRh4tAABXRUJQVlA4WAoAAAAQAAAAnwAAegAAQUxQSFETAAAB/yckSPD/eGtEpO4TDAMgbQNo2lrS/w9u1gkR/Z8ADL/XJNt0VPHLNVYNHtdCVRXJyLtjGNGr6KB431/mAFWSg5b4IBMIDCRS5GM8gJAiB//qkoQsLur+BrUm/ihJ9MCiJJG2PaFNdvAgdG31ALxFAzzBUNC2DZPyh939EYgIhW3bNrKz20ewNBXAIAamg0BpSNFYE9TCDtYUmx+Pv6GB5CuSJNu2bdsym2NSmXMt/gwWsWUf+S61AYiICfDH//95ufH/3e7P5+t1zhkrM7FdBDWivptu1krW3lpr4722bbO2bb/rZJMqbDDK+OD1ej7+OGew7cz774iYAH7W52o0pbunuukV77ptczx7fvJg7YpZM6OolF79zMBglT+m/ZpdA7VH372bKA1MyGYLjj95Sm3V7p0bno2mTc4/2nJ07CTCrs58Ut2if+7et3Ot/1ucjQITsWIHU9976qonW7JVR4Xa2qSnuk4AlhSLuVj9Twz2ZaIfPaGqxHxkE082k1twaLZ66YkdUVSfIfaYEzIgGBKWmLPbfrRt6XEzW+tTJtxMUxQ30NzWNGlBmvhIziFDlBuVLS1279u+aWo9A0VNNK6+6dAjVp5wwvKWGmUQCDFSQ2AEc66g9sEsE6Tzzg9TS+3U9WvXHd6ciyNRLsYCzApVjbWNUeL8RDBSl86eO3vq9Jas804gTIwBYBCO23jaW1c0KIx/Yukfrn2/BDI10v18muKdwwS5HSjbNK0xSavNxjmRfdBsXwZByKTPtZiCOQB5GaCkONA7UGLcU/ZWs+/hIVen+W9bFctMonJ4aWouimr6C2bjG6LujPfkEIlvWLh6etY7jMpxGB4gXOFhP8REWWg8YqVPMUZwHh4QQvJsMmTjnJwiL6irqy/tHvTGf+Oi2dD+Y3oKbhxT5MAB+NbmZ3dkctKIDMIHZpZ2v3r1wTiMWw5oW4gDcsX+wcHBglFmlZCQ15MOaelgvBZTT7/6qIYvfdcHy+Tnzch4Z1K25WZuVd+9b6+NROOJ490HzEj91/43InuwvqUqG4s2Qp5HUe7gvpLKZOBiafyQ32KDBUfInPG7tpq9pWqPKkLDN4Wcnu1n09m/ihNlnMii8cIxrzctJcgsecNTy/qrGjIgQKa9i6nPPdfjqw94srKcS2qrGS9F0/ZQTARJ5qYzTyhUZ2NHZQWMDB/ghMHne7N771+U7l307q4/d57zwBG48YGI71khBUyFz0+blwEwEJkaIMu8sKypS6vtqL/XffDEj1zbXIy/dLSNF455PWlJAvM7OhodSLKQpSDvpWhGbmDw+Pmsu/nDjxaaN/3rOWycwPMry0dUDJIEAlqdBl4x4RsKhfhGf9fQQ0Q8b9VivIz0Risw7L8UUHkYXhARCj1+1a4LkrqY2ndsmPTAZ/LpOCFVbw6hTE4sxXsEHo0WrPo4lnQXLHvaWYRNfRfWDobxIeZMS8tAupDTcAVdMllDa0N/GDz+nJLwZ13Q4+3l5yIHvu7JOLGy/2bgxmVDrrpml1PnqTODxKSBTjKRl15G8g7IVsPagYwXYGd9xgwDiKeFF/ZvajFStjK/sB8yNe7l4jLAYZ+4/okdbxDrHjpQEGOoq9NwaAchCV817cVn1rYF8P844125wi8+cHRzHLuXhYsnL37HtQUzs7cS/ejUq42XYzMZ1kQU7YyXlazm/p4LCDPNXrzi9BbkXnqO1q88b1YatPuOJ5s5GDeV6RO5s68ywO97KBzGBf/yXz9z6WC+aJbe+M4MzuklFVVx5GvmUkpq4x9cRqYq31FXY5L42UAAJXK6/vdb/+92V/3Ib9+0qkoqJm7929cQgr2EQvOqty6nKMf+c5k21F2cl8l6hm8jfNCQQMKQABZl79t5S7GFJLfj63G3TN4SvXrD8tb4paNdDUdFqWQMnAGTwwGmR7UaAZCLeVeWQoiMArJc07Z93pklnivv3QXIhdS/a3V7opeGgDYSJ2jvoMnfRS40dgkNJ4ADzR4KIcQGSmd0PxPFvlhMidn9AsLkE+oD5j4RWNSKwyDfNelLr/W6/xP5GVlRMQSQ/fBCExabAjA35F2pp5SGNNC9A0OGS2uOqnM+UxbqXAkhauPDPgzUrBv4S3OWigLlXE7DcDEN0I2a6kk1T3ZZimEeDxgoYWYz/zyy0DZrBiYDqjLbI/JepcyR++s0jHIj6ARoD5CxTMq05Lv2DgZDgNVUIZAEU/+Xf96wvyQkkE2Zsv0bWH1qETesiTwqKxc8OQ5ADwRwhhTXu72dQy6kqWRRVA0IA/7vP28UhTQVkoqFU9AFoQDmDt9bXU8AxbRHEISTZnNnUK4tNu/iOIOT3JSbACujJjU3dnJRlxeYzD5LlqusgNIWtmarA5DvxlVBls5NbnE+k1ILzjFlEsNv71QYO1b1Y5TfUOUy/CbNy2nJwL5EOOg1j3bdkG3ROK9tfpN9ZNu3vJenZUYQIMTTJTdWovVBbwjZrB8+Vud4uw2R1swYyNQZj+WDyqF83p9/5BvN+qYjPHMaUyHMfLplKB0bOf93M5ArLbn92O9n5fy/LfJ1XTV14KLu5AcOA5Q0Tr5rkdnDVRKIVZE5GQT/+DXYlYj3WMEMjDc/ACD5Lx3YfPGzmRzDC6F7oeyHk3CrdkKJnF190c23dLySCCGrXo8wyu8fcDccs3alJZl8+urZijwg8cY/7e4pxCM4T+R4tR3oRiDI4lLni22H8paHmuTx6dojSw6ByW4L/5xJrddYMRXOWk8yIQBf11sa8jWSZo6Qq9e5uB3b7r6mmmjNb5sgdaa3ygRg8X9u/pcnZn0PAqRp0e7GU67I1SdJYdAbo5W1j567sHNu4wV77jyD3GzwLOhISyC50NqNH42qb9sRhbJSuh5W33MCEbm6tsRyOZNG82cq2nf+3LUP07jp3CXXz1SGz1sBA9ChU5xG0dtxqwDSol2EMpvtX0SKpi3sPDAoY9Qd9c5L+N6tPbu0/ssnUrTfkFHTniAApS0/wI3Mbbk8jwFJUlgh7++1e+Tk25Z37giOcdt8evG2Ra8/V0WR3OcU8VVLhAAdmC43sitvjlIw8vZPnGPuZw/HK9syZ3d7qwOzA2nl4KPuSVV9/tTWxDxpuEreaWW7E2AE+w4aiedLJWeIqJSeKE+5FOGmP/xIKoFq6+OxG84yyv3sWdlC5DHsfCJcw99qUiGh9MUVdSNx3BSlIILdISFc5KTcm09rfPjWVKj8wC/pzraQYFJIIgHRgVYcjuPmy0mIgv20RcN5jgoOUFS0M4kEXkjZbfa+B/5jjGGx7gN3UwIkcAAhvqQK4b07MhsEUAwvzETDOC50AcDivdNwxJA6Ofts9LqMFMYCqcmvhsxlZWr+hUe+gC6g3HDJnJVylRyHp6kvS/UbMkx98q63OMy/ecHPjm5SCTDDScihPweGQt0LeF8KC+seuaQ9MsoDrzQqe35oqcoc64n5ppl9bD3RJzuerZYAxCw2dNKPALkA3JLNcZLMPm9d8s0dtyqAJM+GulRlonl/8AAh+s/H/1Cnx9OhAsctIv3+k1NrwAECSAhnvx/OpLSlq5gtve88ihzNBZSbudK8V+LKIk61ogAL3PBDW6YtVkwoJc9SF9e7noT/Yj+UrC31TS9Q+08oZDiEh7ujQLnxVlmZ/INWpFxcFZ0YZZ+0Yir53u0+nu7bIsPG7I+0KN2aiX9PwecCS3O7nlIwAxyrmoLAc3xIEjMg7nwCnK62YgrmHjswdXquIQKNQRO/FIZ3fP7pmnAo+drUREMjj2OAUDJ5OQ4ifmz5RILAE+3OR3w9FFLAeDo3pzYXOTH6+MFALoZKT7XXPzopyQQw29fDPQjACHodhpLq1+ApNx7E43mXVQhx54VzOvOMMoHAX5CrGvz1lqHBjiUnKHGE+I9Dbm/iAQM4DMNx3PxUGCAexyPmd6UlMwz3yaSnOtjIxvgR3GhosI5b249ZPHTd4MZ6iK+6xtfZPm8AEpO9Aa9RAgLzyWYcOD5ieYFZ9JFtB7PG2OC9AG/shwAB5Hccc+aGBf964A+HrKz92S+dhh7egwnJxOxWlDb+D46Krn0HwvHWj1xrAhROPTCEYaMipt6JK4FbcwVsYNGJorHpdR/6c8c1aaaUhMFtGMKkpGEx4qilwYGB0dmH8FxkmzYTQvDtF70zJ6FKuRq7djshT0bN15iz6gWvzUz79oEL3fKZxgHKBSllJ2YTKhrtqcCx4HuLTppOLlZ3bqMHMQy4c2x3ckESeBbevENdt2Ry2q13ffvUlPYKFZdi0QlIIIA+fCQA7ws3Xv9oUhISI+zJ7Z0x8AipkEQW/zhkkz8z9xMdF4s8ZoAh5hEa5yMkyksuAYiixjj70Hsvnb3z8VRoBMvAz5BPAlAxUfV13185c0+Hps758VMxPYiKYrKnoRUxrA+LT51O5L659x2uedePfnXXkwUuxgfCW7LvYJGrffLLdvQp//pP16RlDyDEsKI+y7z6dASc8oA9UuUyF9u7esPAvdft7y94AehVyDzZDTkOUPWW77z+cz/J5aqObln/XFyiFmGGJOKYWQQqi7l/bBhMT6B+9saZTRns2R2DIbrxPFnhzm3Zc+3nf/Kk0/YtPXcNcEEtMSOsbWQmYBUg/yz9pUt9Q1vD6xc3xqsGnnbGxfDZl8Vc//UNK8P2Ty//0tQiCm/6cXYmaBgnZgBYpfice8yeaGqqmvaek2e8/RfnTyOAv5YbeQaoO33quX2X1X+ytuiRFT9wegsgYUAwhCFVmvz8mtf/+MTqlW84fs2eZ9zkw+ZGEqACF58PF4E3QmFox22/X/EeUoewaO+eeQgwgHzAIyqLphkB4NP2jWN7Lvt3f8AxyvgzmzF6Zppc1bXkfakJUHDbn5xTQWDk83iGV1K9VNlMdbzuos+s1OCzm3tKGhF+LB+EQ4HQOKt24aYQHBgYdW3NgXKZ0dHFiAOrLFNkUm9zW8gtaIt7zGloIvWpl7EOsIEtvcubcYAAGjZUpSoDY29K50gc6+JS9mPvuu+C3sz86tq2thwIiCLxR8ZSGQv92WpzDGvJcsqtwg7YDFgl2fKZXVeuht1/vjeXy1TnHEAgc1f9FOAEHAIgKgrT7mlgZoDEY9ABYJWS3Ftmn533IVv8eTyYqXKCIABBarEffign+4YhMAMw13vJQnOiog/b4IUkMqkCPnw5MgfBp+ujTCTGsJkb8X1PAGNYC/5HucZUSALze7fBnoOiogFkjHLz65Y1UOaWQpO/1ARYJQuZLTedZaJy4Lke59qfIFQY1sowVk8JAG2B/NEVzMz3fG/NnGQ4s/vxzu7HRgZGuY8FBu7hDb+SQL4A8fVHzzVsGOkBzLjN3NhsuocXPh54Yx7ihz/12o+VHKpgcfcOQuDuF6IwKgMH2Q25m0+ScIfuSGBmv9zyvRpkFSxEN+MSc/nbSCuEi23D2W2Tx3GwmTtT087rj1+ROIYVFyBDXIoHkuVOgDH3EvK8W+fGEzccvb7kNIxltu5UCoHbt/oAgTNamWBO/nrTwO1an0FUNnM34lMwP3RBfmCQ0RkNsvzjchLpvnR6ZGJ4l7+GAJDape3JkLZDIS6W4Z+02Z9vjIMMVUqzN0ZYWcO5yR+Kg/+GAGfUWfxtqeAjRmpR76+RgWPZ879bdv9zqQMDnG3nQv7inATIdvL8Z3EAAXfGWXWnP514wMYkcKBP5VFeCpzJtgV/3xS8Y3j/rVeUorF6nhcC+YycG6A0ehOOYZ3EpN9OTsX/H9P4BsHUFa4CIJZ9I2vupZSL8FHg99J410edO+WCW74eqxIuvPG0VBoDexXP6CC/YK74tUczeufVl11Wz/DSprcGNLrXMfpoM78SXPEX93pH/L2LP4uGA960McV9KBxsLzzLSTC8DByCS39/t08RC949eWRiznwruZcSErKfjLkRQ/Cusg0V+ovykcQYitxil+olc2qTnxYYWH4glY+FQE6jQFRNmU3Qy+KvNPldfVlUe3gbo5YAUVx7TIxNVIbP3707dY785GqNavjsokPm+OFyK8B8kE9yyAutjIjt90dJYrTvS2xU7vCW9goRS9Y5okrbMco0hCTcuZ7D/Ikc2x/NuBkLfVC+uhn5EYmp756VbJchq99Y1dvZWnu2H7MAPxW4SAIEaCju2p04NS959xumW5GqxjdszI4EbMMg9/aaUO7EqX3721p68gf3/7LV1dqMRQ/HR2+ckqev8MEPTkLDieYCvVMX7SjgrWYxzPNMrEkaRffvdtOPjIKCn3Uf7tGTT3aMtNrdkx04Iu7f9mLRZbNVy2qCJhQLSa7n0cGZh2HCXMYV3H4iRjp1w2FPcVg6EB0ytGt3EqYtC2JiobOv2NO8ABOAqz7oxMinnHSsj5uHDMTAtoPNy5hgKHUWQm6qIQBTri7q0MhoqElrSiYwc+nmwUNrrYJGFE4yDwJ81MwGNwI0GSoN5bP1DK+ImNE3MERFc3v3Nc1mwk09Iwl9fnTV09q7aqwMBvaosc0mmlEOkAiNIjrQE0+msg30JI0NYJqoBnoNa2wZxdiYqwSDfcpVYbEmpmJfMOdrMmOgOldm2FDJyfnYTUw2EJRNU8ZQ5jJlSSDgfJDTBGU4FIYDAFZQOCCmGQAAcE8AnQEqoAB7AD6BMpFIJSMhoTucCuigEAlsAMhaVVyexmbXht9xRw+MPKBf/9GX9t9QfnL+YDzcfQz/YvUA/YTrLP8V/4PYY8uv2OP7n/0/3D+Az9sPUA//HqAcIj/N/Od4sfhPAv8g+ff1n91883Dn1j6lPzP8Xf0PNvvt+VOoL7V88V7D1D+29AL3s/AeB/qX+EfYA/Wn07/7HhefjP+d7AX6R/9Ps0f43j3+rf2x+Af9cvTo9oXo0/tq8GJi6Vs6F9HS7La5eIHnDnT76stgLaacpOIEt6JVB+U3QQIZZGK1PwoFwBtuHH4eipa2dtJpvXYz7qxs+L+YCG36DkDqPOcvKHf7nHmdg3yOepeOt6SOt/PthO252jjBVKBQ9Yg27nqg831pPPHm7gPXCZdANQVqqxgJoV2WXieFafT2UqY5eP66STQA+j1XQ9+ea3EfUAKXF4cx8WO9NKoZHuXBni33aflvp0h1lFSRFXNKcqOD4v7lckp0f/EdIJMnIH/mcI7hEjIfXd3KnGRNPwvqGd4lsgFIG8boorYqM5HHZFt8Z34hTJRREWsIdGKakPfG4JRihM2OSCE4MRoMyxkI+/xYu3I9H0iwI71fCF/KZgn2gkobOPgFWmk3vu7O4qhQAZFwbhKc/uikLxTRmWrhCoI72JfV7t7Qd60cynflq9Ne8OK1EQGh3fWKWSSdl3gbdkkZHUQCLaosBg4g+nv4ueIyBPIPWu+fTPs+lkjnfk+Vz89uPt2x/4f+nnYmOrGAInBklOjP1UFhYElOsVVomjr0FspV8WIl/9SslLdOj8X9Zpvyv6XPz/vk2kj52kgxzAMcldiH0FN10EU1zAJ2BgAA/v206E+ZHIe1MuAz7PsdTysWK6ovueENfzFWd+GkxoWJAsYbQiYZFUIdOEaSdpid3hJKZbIGdjr1hGRGJl8PeS6rXlVW30xm6P2gkka3ChR+7g8pCaQ7UmGaQdhwIPcgKLJZFGlHqCAKJ8xam0i9YUJ6u2KKyNLbqWvzGPdOTPgkA9v//AW6D568reb/YBuN9hHlFB6agZzKf6azFiQclJUnYb98qfbhuv0REOgkjIUtdcBFZl58zeri9K3/NTjjxPGdcQZA99DhxGOflL50JwuhfHDzC3CyJ3L3+p+sKGNGD3pgPrU+yWWKz2hfUv48PNwb/z4Hgr9it/RdKRaANeKcbfSPIWmwurfdgdeBtQahChT5Bxbk9QkeeHRsoAld/NXXaaDQxhh7+HNl3f0OilmZpGBSf+01XCm9K8wTmj1R1JBXzryKliyjLofU1qGoPcF0i/wl1KnG4HArLKar9/wc6xgp/qMV3f9kn/+dJ+jsBIW/68jG/1lI53iOPtB7HYAAEP87Uvb9Wa97GNbRy8Rcjac7yOl5OEpMk2s0CEyccnwmMoqqtQGeBLSh77zun8mhubN+h5PV+Y9m3nUPJOb1oe1rjsjeADXqDEq/+idkatfklk8k1NBhKf9974qnWxZilPxBPqolYvg4l4dJn6X/uKedpOmbdPn2iW5qtpOjFG3vfPGs9hi1CoaGuXDA1Vh1ZQUh5LZjsiJF53RxJcMFPtPAI2kj9AZcws58k51SC9Rh9fvbci74n8x76/QMmrDRE7GVZGJ85HN2xaSimhz75ksfTS92nUkM5Wqi8N+M3FoNGwzAvaWIu5qniES8q+aLTJTld3DvBLM1jmynZWPzlkTGdvKSyNAu5a9tklIYZ8JONuSrHx6zNd5FTgub+BGCWLxYVkXJ7d8yxX0ogRIUNjyguzeXifQ22jCxCQRrVzZ78eNXceT2RmoTNnXg+CWN70o36MG/c7W8MyXlEGpaFUNC6U0jbLftuHMFu1UYQ4eDYmB2Pe3nbZ0qHBJrIVYXunSsWhM5cRPGnwdC/8iuonIuLyPfXmU/2lZ6nsChJ6pC6oyBPqoQqC7dpTQ/3ZqGlHWwewOla5DkpdG6n1AOm89IJDqqih9zikQx2a/4/caIEHkkxOitqyuPz0NBwQcvAzKAy/FtMEKs3vMzeDjLahkcDsf/Lxv2b8TXwbIzre5SzlHxcEJ/s1t670OGYNUwVfKIrhI+598yJA7md703T5tf+/+KQx2S/kyPfd00w3ErPgU3/ej/7q9PPzyZPklyzgwSp+9sFD8lOSbU/kum/e5o+VaFQFU6SuizeDezpj823Sl920sqSR6FwYy4tlsUNK327wgygWs16uTkmkeJiQPX/H/M+r4UcDxFgKajWwP9CVQZpIcXw/CPqF/Xd+sCj/94ENICbPIfjj9sYUMnLrC6jfbq151qQX7ls1bBPbx3N5j6pg3vwC5aIQdFGMeRAmyeqxCBrkw11Fzx/EVmV8SDmq3wXk0LDEVTxMrMEgeO6kyHavXFROPsRK777E3IembeCg+aL6bbVKQtCP3FEE94eEEsG5xs/f+n9xLkQT8tNsL1tZBBk3qWipLQF4vA9EE3UmAUgsInzrPgXnXUnaiKl+F6ZU91xsjIG22PtU0424lUqLwsybUQB3NZej046/OV4xmkWuFW0VmQayoNurRL9CYAJProg428nzMft9rSLeLs+spo8cuGl2U609vwZitX/G+ZTyuuWiqVtQGzN0xu2pv5YG2it5HJdVI+lwfOoBl3ItqW0lom2eZ1V60ziLD/5cYYHflf4DBgArdAvJq/dhlEw7bJ6rSuTGckrUUCwE0KI4whEnLJ2fDigsjp2O8s76m9ozt9QYxuxIPk+ymhgW5PFwG6Qve0R8EXCOJarWX1d0dCaxAgZmrYuNfGMXbSvEwdH0n0wOZ+xq/7sFDileEHLb7QzrrHn8JJY2kQpcDioumbi7tJesA2ci1DSuxkKghSvsZJVMvRQSkDismcH5hPDDpcpVWEjLCohPnyVv0+trjXCIKKNKC3eGvusBfIZEW3FN9EgiE2OfBwcDqzxRyv2HFBZUP51t7w6b+MsW8oGf2fEI7Or/XZbk0imP4c2kXshBmANVY9qX4nkP2BXl8QbAkPqVPBGWXTGwuwlPjxn2WV92RkYszWSFzgTngL0kW+dgRCbNeBuNn3jgfUEz7dGPcGPyk42LDrKCUraj6ogrBV1S0rcL/QXDE4V7S/7Y1IR9pk61pfFkncu5zWwZMO2+QFX/zj8Alhldu/HHivBjByI/Zyw+IsCXFTaX3JRUn63oy+se10BhuBgtiedHOT9Kroo3mupWRdtMrT7wVuoCjNIspvJ59bOHk/lsKPwQfXFwCFW/C1Xei1/g1V7uTA0OVgIdGljXlKLqfygymDz8Tgz0ZYP6Zr2p5ew56oat2UVW+DGmDM7vIgxU2UUgRQ951T8DeCXWQqilL8x8tOgIn+n3cY3lbGhaXyamrbKyT6clAPzGGCI8I7BvOfmTpMU86TmU/bXGzkhWso3ZIIVgr1tk8k8nmmnFA6xUOI/59X+Ez/BSJdeqY0llGQt7xnUqBW+tx4qPZCoPr04PrI9pGCFnRwXBN9WpCntEHWltk/h6budj26Crp0Lk5qDvKACAFsAv1eT7+kZsJ2YhAM7UBLJ22ZMZ9VFsONIB/kGedNtp0rwH0aRuEKPMA5HMGxSt/VnHZSQyFNrCBoBJm7Vg5U0WewzWGeJ8ZRiSbWwhC5UuTIwIaoIXtpVcIyxEotNOnof52B3aaPZqkFEaJbmmvhX0eFZRLexEq+kpjb2/Z8E5krmr+fOVTfxAlJgz/6LXqBrn2eFkpX+7/IeKG8hgncbu4ePRU34MQVY7Wq/9lT2toN+9OeXIpsEKAdNKd+i4yXUCFxbfett9Vr7mKwmg9rTAqrzxw4nu8Me8fWKFeXf9dWWv3MxSFjuvFvTxGGME6/s9W36uqX6SfHZAG2pUOSwQFfRyFQmojjs0IhBbIiJhfRXTE1+Vcr1g9pGA7wonzLS4hRl18V7vXWsoTClG5fgIGta3cdsXIYIJqzLNX/QWPxAb8Et8rLfsSEvqIUf2NhVY+yj9sK71Gdtku85e42O4mzc9tEEYpjvwI3CU6XqlazpCLuk1gV3m75qewYgYagJf2ejZtd3Ws4vKaO/ozbiq6INQYHwaoQyZftvho5zQLxgg+WkBOo9lZk14/6XmSEP4YwYbpahpM71fyl8GMxlG4WHzCl9oXJ2YnxWEhiV3UjBgIAw/Do1P0mD3f09oQJ5UXOlqTFDpgbYII26rffEgqSKaoL6nS/SXrEJLha6DfFf19eR8wRQExp1NZdfGSwC3NZ0a4yCzhIbtsg5jcUy2R/jW4cUAf1Idm31G746Rlpx65MEv+vaQlsKFASs9Et9zsdC5Z/JW6Vqy39vz/4q9lwHKcK6sy82CzL/VJeiZeTp4cMGWWNncyDyP8zULMKMtuFbJcOX3GRgG2XuB8QuNEA8w+d5pFuvxuOuuAfpZduf8IIov9YxZvy32EkXyBE7VsyuvNUe0m2wmTyg2sMZs1PrMkckdRQVEv0c0s/77HSwMBUyebJQpP3cFP58tDDGSTN88EaC8x6XWy5ylLCpX5715cANV/Tc0ACz92qRqoDDXUwptaGXUFFlGkX+alglyrB6goBZ+Gq6L5YnkTR0OCuLLxbCOeiE9A/Xdh4vw0lcMEY9U5t6PipU4ZhfRKOAQZ5PyZLmj01sP2+KIKatIV+M1Axl8+886DqZKw2YHMutS+GbZp030/6lkPu59hZZSDbNnsJJG3rkaavW/elc8v9+oeD1xBDZRptCoVZBPo5ATWOG2hBmhk8uPMpZ5/4wABeHMTfj59rqT2PgnJlvXOfgLjmnsgdxcYYaH37JqMt/y6664GEmiybn/D1rbYrTE7ZGOU5WAk7IubUcXdWOvcqpsURRUhSWFlrkw3p+AAshKBAD8jhCBAPOSXDQyoJc669OGERzCj7AaGrMP91qy9h9syBjMWE+r4j7zkgB7CuBswwyL0K8y6az3Nfsd/yAuGuIKR5fV7pelyvV4faFxEezBeg+D+tVroHl5O4JWwHsWxYrGSLd1ydVmBLC8FhLg+vsSPiD18c0vJW0wr1vry28QmMkyOdgB8m7mkPTru6H7AuQvjF111g24fTDT4uLkEd+VMnBk6p1fD/phe0gZLx9KSj+wf4gTGb+o2+JrrNU5Bl79SqD/jzUW4A0W87JEIgrb6lmLm8a8tYjJYEgfmQQU4yg0ssBNDnNcWMO9/KN+nkPC/5NDRFzl7aWmuqrzuSCUBpl4TiWhRwgE0TQ5hebps7i8RdS41mh+U3L8HyPXFew1LkApDyIQH7AmiGqMhb95oHB+jTKPdANqs9dxVhsvXrEiOZdMaf0avQaAmTAR8mfDc7P7zbDHoFRkzI10IeZ1AIrJQAJGjEL0JWwlC9ObjYuub1n9M2HQjEEgLASrvfia2bXtNokwubrli0O3xwD6pxl6EWY9e3K3/ng3wHGhf6RMq8gDImrMi/v68KBTJFmp4XNYD87iCrXqEwCwz5VI2qWjAZgwNUtOq/gdF5KmK0ogUVp1uA6sE93dMtEHNOcmyr9B3DHpkoov51Fjf0XdOR2Gj6Q3hbgtAt3q4tfYm4G27D1YLwlUuK1KsMHOkBNFb0ZlZ4fyr1eNTGz2xlQ74JLx8MIGVteaQHd8HLKo9IVRnRbPkLxXjPI/w3+Su+8aVPknRRC1VYkJg79anpTTmq6+o330l/qwMrT6k6agDGzp4jWcQVjeDmdH39rS/NCJmHZ/+g0OPu+MoqhFXAYgI3moWcJxGN+hb1MG2wi8TkC/YM2cu6NNZtbSpXhCGH69gw+5bXg6XMwx0JY+BDnfVauAaiEvBxRQPR8QzdMAy2f6FpLEt0AyLuxmd7sPCKxSl5H6cft+nYIai248Ds9Ggb6ZI3wFBpKQNuEprx2ag2Yfn161w/khup3J4pe2apiFTovRM9kNZGl1hXKEaz7AQ/eNyLUQ2kgdMPUAHycpJnit+LSLfe/d6LQKfFsq9++qirJyBj7wN3McxLgZaGdaLcEyl/Rc2cOV/rGX0O/mzAw/2QmgxYss6xqOIMXyX5GslgYnUJEkbcGIupON71KLiYn0sDf8Qo8q0NlvlxHhdIJ+9S0nbtSP3fenNM+rfpJiOrYWo05tLjdVH8T7zTYAmg4yLFhXUgdMeRdncERVg/wd/zjLVN1eePK2zyzF6BdAo8t3PwKor50BScX0uQua3BYY6BnUStQ6zH8H2H+RlaruQLrpUrbt6C/emXffjel8Fkq18onYvZr1MwBYLD7Sam8flbuuE2I1JmmY0Ufcw9KxgPZwQGXhXRnxaKeFCSKUvg3FEQcXINl+tqL7tMMQiyDtOsp429ZCeZ+ytX2DPcR4kxMhlHVaYwEp9eEGpiQYBScHiCm4cBzqf6Ch7mk9qE1S3KzMss/uEp6tmTLGIEg47IN9A9DLYGMPmq4B/wp+NSGqa7VG25qwYjRSMOVV6OLh6VgtP9c6ZUZEntcATjlRCiWTYfQQmxeTqDakExXCGmLrCJ2w9gzps/YpfpTKMopeRAIgXCrgILb/72oRwR1N42CYEPDsimKinn/goymGrdfwhj7eFdyM9bSQTHUg+aL9cJ5djGwH4tWMvLU2+AQZ3M1+SkGqPWWEXxHrAAkqh4symVyKdOmtD1Uud+D13FvajXXPCssLO+2stMykPrClrwoq4WC2f1WWUQfXDc/jL9EZgIobu5wAJM8SKHT1Ie2z2jU/tlPXnBXn4q0+6ammEucY/xwnRJtqZO9wQMZSROptcsdGyUS4DWxCr83wPl9RBo/uilwtUmpptjEFDxhpXe7E1zuGWQSCPEoh6trnW4GFLL3CdUtKV/5NunzJIcsGcUdhGwXClOMlaT0cGwLbLI25JrwWJcVz++q6S3X6R2vnDzHRE9TwSkciSO+TM9yShOXD54IeZ92A5vZc/19X/qpRmQmbBnsuNjwn/VrJ7EiU/q222lYLpH3gkAp1+rHV+ZVFEcHUaTxBR7wjcLsmAbDsRZdGFYHvMVWV1Wcw7ZL+Nhu7hhINEWuw5cCHPNzvkoHN+Nx0zTbJwkdJvxa2h+xdOOiiJyyDB6Y23bz+QWV4JVV1nhqGKh9NCSF5QvLQkHpq9cfTiob5MkYt5/OvDjLzfseD7PfRPpn9DquIOZI8J65EbEsnFZXs+RsnFcK1XOVnIArjnGBrvD3loIl+ZspdpJgRVbEpPik4oTL5Ttt/xenrCAu2EFN1dxBsrxdQRz6EeagXkfmLlye03HjL19HjusHSQjYt9PkRWtKqGLMWJyxW3vE45IJTkom+uUljqU+IaX2klfHMWAwMCI19CA0kcVQskOa2zgZFvZ7G1m/OvVRaWEjZZliBjDNo504XIuakKxbrB+/JCor44ItL0d1DLiCrkKcGWbkXZ/IS8UlgcZjGAwcYjdQ79UV/kDAge0zx9Iz9ie7fAVcpCmzSWc0D3cnhdshZ6T061R983zVxDipb7EvnprYYNPGOGr3j/2Q4iB9EiPSZQXF/fkM1yZD3aqIrDIOcfGNaw9yLGVxPJk5vd0/hnijCZDHwB2dtg/Cu9d24PbaUSIro1IYBupm6Hen8h/3eBpSJBfuaZfRwzabiULdJmyE+brjNu7XyDk+C1A648//foQ1Rjs9L9TbA4OyJA3X1eHfEOOevQFIcxrB1psrBTdORxBQ22BIT935AyCA46dw67ho5Ypavxh+qtRfDPH+yPqPFZ7NeMCG11SRlZSc2n/krMwjrXytUSY6xnRM9zGyjYOn4dNeAb0jxZjGVljo2q9mJmVqGchQbq9mFoY71Qqv+kmxI+W4E5GySaW98qNR1UyzGfYRl2/iDPJ/FLnjhJO7f6EeGjRKZj+WOeESiM63ACk+1df4eMVV5oDiN9mk/OWOtexwWIGp9+ChMsGtl5s+2DYL8PCLG6pr0/Djk18lXYl/thI/4QUdyCFTyPBGw4u3+tUyt0yJXJei7li2I8hU4oCADRhmk2A79S5kf4qfJJ3jUet7XlijKn4eq5k/e+rOPdambnzO44znREdZTyAlTsYo+Vbr6CrrnK4vNah/cEWzUQdeWHCLsyw+YXfnq7sJcWPnIxwWTeZPVTl3/8Qen3gist1EeTw/PHReJujlX8PPD6r4ey8ssoHCwxR/+E0Rounh+GkNgTiU9alf2aK9ev17D4pzXBeowO0KpjhLURLN35LqoFm6WjXaXzwUibAmTqACwzVpplpBiCzSoRogDHYLBa+pgDK4C23XVzZrMzoEOuzSctaz+WUZe2B4GWZDd5Mk8gPqb14t7WNG/vwCzUveo3rF7xTO8hl7X8daqbi7UlUWWtPJbmEHcRb9xJoJuMuUkMXy5/A9Dppb3+fSrA1nKZjZviC1zvkzanO/0F/i6fTp+irvNOXXCOMsanfi5TEZ4YOse3R1Bt91nBB6g1ETEvgJPKnJHwm1RaZ80Lck2YxGN+xhSPX5bm1DbFbPuWbjl551HE9ThvsjR1lxGaJ0xOkULvxHzJbxU4BXp2d3ReohrCtskhVDVqHrrJvoc1cqDbsyOr0z8QJv0j4qylfrIHiPQUT5czcaeSZKs4gpfSJGqKgIxYtyRO7VR/DGcoU06dREpkrtRMlr+CKahDMFHqsmaaMHeycNQWbyL2kmw9R++U3IGuVIJQOPoltiltdfl5f2NodPBpNSqfPtPfdY/SJWe+nOltFtYfaiWbtDsF8ARxrbfFNDymorVP2SvR84jvWhWHTiRbeYELk+vVc6+DlddS2do/IVHvwgX4LXP1ZU+KAsny0aGSKAF6c0R05/Yo3GfOc3p0UiVd1Fv8AAAA=") center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 6px 6px rgba(10,15,30,.3)); transform-origin: 50% 85%; } .hs-slider:hover .hs-knob { transform: scale(1.06) rotate(-3deg); } .hs-slider.is-dragging .hs-knob { transform: scale(1.14) rotate(-7deg); } .hs-slider:focus-visible .hs-knob { box-shadow: none; outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 14px; } @media (max-width: 640px) { .hs-knob { width: 74px; height: 57px; margin: -34px 0 0 -37px; } } /* ------------------------------------------------------------------ Sound familiar? (Home) ------------------------------------------------------------------ */ .pains { border-top: 1px solid var(--line-dark); } .pain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .pain-card { background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: 4px; padding: 28px 26px; display: flex; flex-direction: column; gap: 18px; transition: border-color .2s; } .pain-card:hover { border-color: var(--pink); } .pain-icon { display: block; width: 30px; height: 30px; color: var(--pink); stroke-width: 2; } .pain-card .pain-text { margin: 0; font-family: var(--font-head); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; color: var(--white); } .pain-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--line-dark); } .pain-cta > p { margin: 0; font-family: var(--font-head); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } .pain-cta .wp-block-buttons { margin: 0; flex: none; } /* ------------------------------------------------------------------ Me vs the alternatives (Fractional CMO) ------------------------------------------------------------------ */ .compare { background: var(--white); color: var(--text); } .compare .section-head--row .lead { color: var(--text-2); } .wp-block-table.compare-table { margin: 0; overflow-x: auto; } .wp-block-table.compare-table table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 15px; line-height: 1.4; border-top: 2px solid var(--ink); } .wp-block-table.compare-table thead { border: 0; } .wp-block-table.compare-table th, .wp-block-table.compare-table td { border: 0; border-bottom: 1px solid var(--line); padding: 18px 16px; text-align: left; vertical-align: top; color: var(--text-2); } .wp-block-table.compare-table th { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--text); } .wp-block-table.compare-table td:first-child, .wp-block-table.compare-table th:first-child { padding-left: 0; width: 17%; font-weight: 600; color: var(--text); } .wp-block-table.compare-table th:last-child, .wp-block-table.compare-table td:last-child { width: 23%; background: var(--ink); color: var(--white); border-bottom-color: var(--line-dark); padding-left: 20px; } .wp-block-table.compare-table th:last-child { font-weight: 800; letter-spacing: 0.04em; } .wp-block-table.compare-table td:last-child { position: relative; padding-left: 46px; } .wp-block-table.compare-table td:last-child::before { content: ""; position: absolute; left: 20px; top: 20px; width: 17px; height: 17px; background: var(--pink); -webkit-mask: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; } .wp-block-table.compare-table tbody tr:last-child td { border-bottom: 0; } .compare-foot { display: flex; align-items: center; gap: 24px; margin-top: 40px; } .compare-foot .wp-block-buttons { margin: 0; flex: none; } .compare-foot > p { margin: 0; color: var(--text-2); } /* ------------------------------------------------------------------ FAQ (Fractional CMO) ------------------------------------------------------------------ */ .faq-layout { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(40px, 7vw, 96px); align-items: start; } .faq-intro .h2 { margin-bottom: 14px; } .faq-intro .lead { color: var(--on-dark-2); margin-bottom: 26px; } .faq-list { border-top: 1px solid var(--line-dark); } .wp-block-details.faq-item { border-bottom: 1px solid var(--line-dark); margin: 0; padding: 0; } .faq-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 18px 0; font-family: var(--font-head); font-size: 19px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; } .faq-item > summary::-webkit-details-marker { display: none; } .faq-item > summary::after { content: ""; flex: none; width: 18px; height: 18px; background: var(--pink); -webkit-mask: 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.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat; mask: 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.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s; } .faq-item[open] > summary::after { transform: rotate(45deg); } .faq-item > summary:hover { color: var(--pink-soft); } .faq-item > summary:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; } .faq-item > p { margin: 0; padding: 0 64px 24px 0; font-size: 16px; line-height: 1.6; color: var(--on-dark-2); } /* ------------------------------------------------------------------ Modern marketing (How I work) ------------------------------------------------------------------ */ .modern { background: var(--white); color: var(--text); } .modern-layout { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: center; } .modern-intro .h2 { margin-bottom: 14px; } .modern-intro .lead { color: var(--text-2); } .modern-callout { margin-top: 26px; padding: 22px 24px; background: var(--ink); color: var(--white); border-radius: 4px; } .modern-callout > p { margin: 0; font-family: var(--font-head); font-size: 19px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.35; } .modern-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .modern-card { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 30px 28px; } .modern-icon { display: block; width: 40px; height: 40px; color: var(--pink); stroke-width: 1.4; margin-bottom: 16px; } .modern-card h3 { font-size: 21px; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 10px; } .modern-card > p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-2); } @media (max-width: 900px) { .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pain-cta, .compare-foot { flex-direction: column; align-items: flex-start; } .faq-layout, .modern-layout { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .pain-grid, .modern-grid { grid-template-columns: minmax(0, 1fr); } .pain-card .pain-text { font-size: 18px; } .pain-cta > p { font-size: 19px; } .faq-item > summary { font-size: 17px; } .faq-item > p { padding-right: 0; } } /* comparison table becomes one card per row on phones */ @media (max-width: 640px) { .wp-block-table.compare-table { overflow: visible; } .wp-block-table.compare-table table { min-width: 0; border-top: 0; } .wp-block-table.compare-table thead { display: none; } .wp-block-table.compare-table tbody, .wp-block-table.compare-table tr { display: block; } .wp-block-table.compare-table tr { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; margin-bottom: 14px; } .wp-block-table.compare-table td, .wp-block-table.compare-table td:first-child, .wp-block-table.compare-table td:last-child { display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: 12px; width: auto; padding: 11px 16px; font-size: 14px; } .wp-block-table.compare-table td::before { color: var(--text); font-weight: 600; } .wp-block-table.compare-table td:nth-child(2)::before { content: "An agency"; } .wp-block-table.compare-table td:nth-child(3)::before { content: "A full time CMO"; } .wp-block-table.compare-table td:nth-child(4)::before { content: "Doing it yourself"; } .wp-block-table.compare-table td:first-child { display: block; padding: 14px 16px; background: var(--paper); font-family: var(--font-head); font-size: 17px; font-weight: 700; } .wp-block-table.compare-table td:last-child::before { content: "MOSTADON"; position: static; width: auto; height: auto; background: none; -webkit-mask: none; mask: none; color: var(--pink); font-weight: 800; letter-spacing: 0.04em; } .wp-block-table.compare-table tbody tr:last-child td { border-bottom: 1px solid var(--line); } .wp-block-table.compare-table tbody tr td:last-child { border-bottom: 0; } } /* ------------------------------------------------------------------ Shared cards, steps and content blocks (routes, why me, get in touch, case studies, speaking, credentials, service pages) ------------------------------------------------------------------ */ .section--white { background: var(--white); color: var(--text); } .section--white .section-head--row .lead, .section--light .section-head--row .lead { color: var(--text-2); } .section-head--center { text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; } .section-head--center .lead { margin-left: auto; margin-right: auto; } .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mst-card { border-radius: 4px; padding: 28px 26px; display: flex; flex-direction: column; gap: 12px; background: var(--white); border: 1px solid var(--line); } .section--light .mst-card { background: var(--white); } .section--white .mst-card { background: var(--paper); } .section--dark .mst-card { background: var(--ink-2); border-color: var(--line-dark); color: var(--white); } .mst-card h3 { font-size: 21px; letter-spacing: -0.02em; line-height: 1.2; margin: 0; } .mst-card > p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); } .section--dark .mst-card > p { color: var(--on-dark-2); } .mst-card > p.card-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; font-style: italic; } .section--dark .mst-card > p.card-foot { border-top-color: var(--line-dark); } .mst-card > p.card-tag { font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pink); } .section--light .mst-card > p.card-tag, .section--white .mst-card > p.card-tag { color: #c2407e; } .mst-card > p.card-num { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--pink); color: var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 16px; font-weight: 800; } .card-icon { display: block; width: 36px; height: 36px; color: var(--pink); stroke-width: 1.6; } .card-grid--steps .mst-card { text-align: center; align-items: center; } .center-note { text-align: center; max-width: 720px; margin: 36px auto 0; } .center-note > p { margin: 0 0 14px; } .section--dark .center-note > p { color: var(--on-dark-2); } .center-note .wp-block-buttons { justify-content: center; margin: 18px 0 0; } .mst-card .wp-block-list { margin: 4px 0 0; padding-left: 0; list-style: none; font-size: 15px; } .mst-card .wp-block-list li { position: relative; padding-left: 22px; margin-bottom: 8px; color: var(--text-2); } .section--dark .mst-card .wp-block-list li { color: var(--on-dark-2); } .mst-card .wp-block-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); } /* routes inside How I work on Home */ .routes { margin-top: 64px; padding-top: 56px; border-top: 1px solid var(--line); } .routes > h3 { font-size: clamp(26px, 2.8vw, 34px); letter-spacing: -0.03em; margin: 0 0 28px; } /* intro copy blocks on service and landing pages */ .intro-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: start; } .intro-split .h2 { margin-bottom: 0; } .intro-copy > p { font-size: 17px; line-height: 1.65; color: var(--text-2); margin: 0 0 1em; } .section--dark .intro-copy > p { color: var(--on-dark-2); } /* case studies */ .case-card { gap: 10px; } .case-card > p.case-role { font-size: 14px; color: var(--text-3); margin-top: -4px; } .case-card > p.case-label { margin-top: 10px; font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); } .case-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 6px 0 4px; } .case-stat { background: var(--ink); color: var(--white); border-radius: 4px; padding: 14px 16px; } .case-stat > p { margin: 0; } .case-stat > p.case-stat-value { font-family: var(--font-head); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--pink); line-height: 1.1; } .case-stat > p.case-stat-label { font-size: 13px; color: var(--on-dark-2); margin-top: 4px; } /* simple two column lists (events, logos as names, tools) */ .name-list { columns: 2; column-gap: 40px; list-style: none; padding: 0; margin: 0; } .name-list li { break-inside: avoid; padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 600; } .section--dark .name-list li { border-bottom-color: var(--line-dark); } .name-list li a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--pink); } /* FAQ on light sections */ .section--light .faq-list, .section--white .faq-list { border-top-color: var(--line); } .section--light .wp-block-details.faq-item, .section--white .wp-block-details.faq-item { border-bottom-color: var(--line); } .section--light .faq-item > summary:hover, .section--white .faq-item > summary:hover { color: #c2407e; } .section--light .faq-item > p, .section--white .faq-item > p { color: var(--text-2); } .section--light .faq-intro .lead, .section--white .faq-intro .lead { color: var(--text-2); } @media (max-width: 1000px) { .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .intro-split { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .card-grid, .card-grid--4, .card-grid--2, .case-stats { grid-template-columns: minmax(0, 1fr); } .name-list { columns: 1; } .routes { margin-top: 44px; padding-top: 40px; } } /* routes continue straight on from How I work */ .how-work + .routes-section { padding-top: 0; } .why-me .section-head--row .lead { color: var(--on-dark-2); } /* footer menu fits eight links on one line */ .site-footer .footer-menu { column-gap: 24px; row-gap: 14px; } /* footer menu nine links */ .site-footer .footer-menu { column-gap: 20px; } .center-note > p.cred-note { font-size: 14px; line-height: 1.6; opacity: .85; } .center-note > p.cred-note a { color: var(--pink); } .why-me .center-note strong { color: var(--white); font-weight: 700; } .why-me .center-note mark strong { color: var(--pink); } /* hs-knob base position */ .hs-knob { position: absolute; top: 50%; left: var(--p, 0%); z-index: 2; cursor: grab; transition: left .2s ease, transform .15s; } .hs-slider.is-dragging .hs-knob { transition: transform .15s; cursor: grabbing; } /* mammoth herd on the right, text kept clear */ .hs-mammoth--left { left: auto; right: 30%; height: 56%; bottom: -8%; transform: translate(170%, 10%) rotate(8deg); } .hard-sell[data-level="10"] .hs-mammoth--left { transform: translate(0, 0) rotate(-3deg); } .hard-sell[data-level="9"] .hs-mammoth--right { transform: translate(38%, 16%) rotate(10deg); } .hard-sell[data-level="10"] .hs-intro, .hard-sell[data-level="10"] .is-style-mst-eyebrow { opacity: 0; } .hard-sell[data-level="10"] .hs-level { max-width: 600px; } @media (max-width: 900px) { .hs-mammoth--left { display: none; } } /* finale spacing on phones */ @media (max-width: 640px) { .hard-sell[data-level="10"] .hs-levels { margin-top: 56px; } .hs-giant { top: 6%; } } /* hs-shout above the herd: LET'S TALK and the phone number */ .hs-shout { position: absolute; z-index: 3; right: 3%; top: 4%; width: 48%; text-align: center; pointer-events: none; opacity: 0; transform: rotate(-7deg) scale(2.2); } .hs-shout .hs-giant { position: static; transform: none; opacity: 1; animation: none !important; font-size: clamp(56px, 7.6vw, 128px); } .hs-phone { display: inline-block; margin-top: 4px; font-family: var(--font-hand); font-size: clamp(30px, 3.6vw, 60px); line-height: 1; color: var(--ink); text-decoration: none; text-shadow: 3px 3px 0 #fff; pointer-events: auto; } .hs-phone:hover { color: #fff; text-shadow: 3px 3px 0 var(--ink); } .hard-sell[data-level="10"] .hs-shout { animation: hs-shout .45s cubic-bezier(.2,1.5,.4,1) .2s forwards; } @keyframes hs-shout { to { opacity: 1; transform: rotate(-7deg) scale(1); } } .hard-sell:not([data-level="10"]) .hs-phone { pointer-events: none; } .hard-sell[data-level="10"] .hs-mammoth--right { bottom: -10%; height: 72%; } .hard-sell[data-level="10"] .hs-levels { margin-top: 30px; } .hard-sell[data-level="10"] .hs-intro, .hard-sell[data-level="10"] .hard-sell .is-style-mst-eyebrow { opacity: 1; } @media (prefers-reduced-motion: reduce) { .hard-sell[data-level="10"] .hs-shout { animation: none; opacity: 1; transform: rotate(-7deg); } } @media (max-width: 900px) { .hs-shout { position: relative; right: auto; top: auto; width: auto; margin: 0 auto -10px; padding-top: 10px; display: none; } .hard-sell[data-level="10"] .hs-shout { display: block; } } /* finale layout v2 */ .hard-sell[data-level="10"] .hs-intro { opacity: 0; } .hard-sell[data-level="10"] .hs-levels { margin-top: clamp(70px, 9vw, 140px); } .hs-shout { top: 3%; right: 2%; } .hard-sell[data-level="10"] .hs-mammoth--right { height: 66%; bottom: -8%; } .hard-sell[data-level="10"] .hs-mammoth--left { height: 50%; } @media (max-width: 900px) { .hard-sell[data-level="10"] .hs-levels { margin-top: 20px; } } /* finale phones intro */ @media (max-width: 900px) { .hard-sell[data-level="10"] .hs-intro, .hard-sell[data-level="10"] .is-style-mst-eyebrow { opacity: 1; } } /* finale layout v3: text to the top, LET'S TALK over the herd */ @media (min-width: 901px) { .hard-sell[data-level="10"] .hs-levels { margin-top: -40px; } .hs-shout { top: 7%; right: 9%; width: 44%; } .hard-sell[data-level="10"] .hs-mammoth--right { height: 72%; bottom: -10%; } .hard-sell[data-level="10"] .hs-mammoth--left { height: 56%; right: 34%; } } /* intro two lines bigger */ .hs-intro { font-size: clamp(14px, 1.2vw, 17px); line-height: 1.6; max-width: none; } /* logo colours in the finale */ .hard-sell[data-level="10"] .hs-level mark[style*="faf9f5"] { color: #faf9f5 !important; } /* solid O like the logo */ .hs-level mark.logo-o { display: inline-block; width: 0.76em; height: 0.76em; line-height: 0.76em; margin: 0 0.02em; border-radius: 50%; background: var(--ink) !important; color: transparent !important; overflow: hidden; vertical-align: baseline; } .hs-level .logo-word { white-space: nowrap; } /* pill-row four columns on desktop */ @media (min-width: 901px) { .pill-row { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); } .pill-row li { text-align: center; } } /* pale pink section (Home services) */ .section--pink-soft { background: var(--pink-soft); color: var(--ink); } .section--pink-soft .h2, .section--pink-soft h2 { color: var(--ink); } .section--pink-soft .is-style-mst-eyebrow { color: var(--ink); } .section--pink-soft .section-head--row .lead { color: var(--text-2); } .arrow-link--dark a { color: var(--ink); } .arrow-link--dark a:hover { color: #c2407e; } /* mix slider: full width track and mammoth handle */ .mix-bar input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 80px; margin: 0; padding: 0; background: transparent; cursor: pointer; } .mix-bar input::-webkit-slider-thumb { -webkit-appearance: none; width: 92px; height: 72px; margin-top: -33px; border: 0; border-radius: 0; background: transparent url("/wp-content/uploads/2026/10/mostadon-mammoth-knob.webp") center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 6px 6px rgba(10,15,30,.3)); cursor: grab; transition: transform .15s; } .mix-bar input::-moz-range-thumb { width: 92px; height: 72px; border: 0; border-radius: 0; background: transparent url("/wp-content/uploads/2026/10/mostadon-mammoth-knob.webp") center / contain no-repeat; box-shadow: none; cursor: grab; } .mix-bar input:hover::-webkit-slider-thumb { transform: rotate(-3deg) scale(1.05); } .mix-bar input:active::-webkit-slider-thumb { cursor: grabbing; transform: rotate(-7deg) scale(1.12); } .mix-bar input:focus-visible::-webkit-slider-thumb { box-shadow: none; outline: 3px solid var(--ink); outline-offset: 4px; } /* contact portrait aka and quip */ .scribble-name .scribble-aka { display: inline-block; margin-top: 2px; padding-bottom: 3px; font-size: 0.6em; border-bottom: 3px solid var(--pink); } .portrait-quip { order: 4; position: relative; margin: 20px 0 0 !important; padding-top: 18px; font-family: var(--font-hand); font-size: 17px; line-height: 1.35; letter-spacing: 0.02em; color: var(--white); white-space: nowrap; transform: rotate(-4deg); transform-origin: left top; } .portrait-quip::before { content: ""; position: absolute; top: 0; left: 2px; width: 90px; height: 3px; border-radius: 2px; background: var(--pink); transform: rotate(3deg); } @media (max-width: 900px) { .portrait-quip { font-size: 15px; } } /* Contact hero v2: cut out from the mock, photo mid right, notes beside it */ @media (min-width: 901px) { .hero--contact { overflow: hidden; } .hero-portrait { top: auto; bottom: 0; height: auto; aspect-ratio: auto; width: min(560px, 40vw); max-width: none; right: calc(max(0px, (100% - 1264px) / 2) + 210px); -webkit-mask-image: none; mask-image: none; overflow: visible; } .hero-portrait .hero-portrait-img { position: relative; width: 100%; height: auto; margin: 0 !important; } .hero-portrait .hero-portrait-img img { width: 100%; height: auto; object-fit: contain; } .hero-portrait-note { right: -200px; left: auto; top: 22%; } } @media (min-width: 901px) and (max-width: 1220px) { .hero-portrait { right: max(0px, (100% - 1264px) / 2); width: min(480px, 44vw); } .hero-portrait-note { display: none; } } @media (max-width: 900px) { .hero-portrait { width: 100%; margin: 0 auto; max-width: 520px; } .hero-portrait .hero-portrait-img { margin: 0 !important; } } @media (max-width: 900px) { .hero-portrait { aspect-ratio: auto; height: auto; } .hero-portrait .hero-portrait-img, .hero-portrait .hero-portrait-img img { height: auto; } } /* Contact hero v3: photo about 25% bigger, hero tall enough to show it in full */ @media (min-width: 1221px) { .hero--contact { min-height: calc(min(690px, 47vw) * 533 / 586); } .hero--contact .hero-copy { min-height: calc(min(690px, 47vw) * 533 / 586); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: 56px 0 64px; } .hero-portrait { width: min(690px, 47vw); right: calc(max(0px, (100% - 1264px) / 2) + 165px); } .hero-portrait-note { right: -182px; top: 24%; } } @media (min-width: 1221px) { .hero-portrait-note { right: -196px; } } /* MST transformation slider (About page) */ .tf-section { position: relative; background: #09101e; color: #ffffff; padding: 64px 0 56px; overflow: hidden; } .tf-section .tf-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; padding: 0 5%; } .tf-section .tf-eyebrow { margin: 0 0 14px; font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--pink); } .tf-section .tf-h2 { position: relative; display: inline-block; margin: 0; font-family: var(--font-head); font-size: clamp(40px, 5.2vw, 80px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: #ffffff; white-space: nowrap; } .tf-section .tf-h2 span { color: var(--pink); } .tf-section .tf-h2 svg { position: absolute; right: -0.8em; top: -0.45em; width: 0.85em; height: auto; } .tf-section .tf-sub { margin: 14px 0 0; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.35; color: #e6e8ef; } .tf-section .tf-intro { flex: none; max-width: 330px; margin-top: 34px; padding-left: 30px; border-left: 2px solid var(--pink); } .tf-section .tf-intro p { margin: 0; font-size: 16px; line-height: 1.6; color: #c8ccd8; } .tf-section .tf-stage { position: relative; margin-top: 28px; overflow: hidden; } .tf-section .tf-strip { position: relative; width: 100%; will-change: transform; } .tf-section .tf-strip img { display: block; width: 100%; height: auto; max-width: none; } .tf-section .tf-dim { position: absolute; inset: 0; pointer-events: none; } .tf-section .tf-zones { position: absolute; inset: 0; display: flex; } .tf-section .tf-zones span { display: block; height: 100%; } .tf-section .tf-controls { position: relative; } .tf-section .tf-track { position: relative; height: 56px; margin-top: -6px; } .tf-section .tf-rail, .tf-section .tf-fill { position: absolute; top: 26px; height: 4px; border-radius: 2px; left: 6.5%; } .tf-section .tf-rail { width: 82.8%; background: #3a4158; } .tf-section .tf-fill { width: 0; background: var(--pink); box-shadow: 0 0 12px rgba(255,124,185,.6); } .tf-section .tf-dot { position: absolute; top: 19px; width: 18px; height: 18px; margin-left: -9px; box-sizing: border-box; border-radius: 50%; border: 3px solid #6a7290; background: #09101e; z-index: 1; transition: background .2s, border-color .2s; } .tf-section .tf-dot.is-on { border-color: var(--pink); background: var(--pink); } .tf-section .tf-range { position: absolute; top: 0; left: calc(6.5% - 26px); width: calc(82.8% + 52px); height: 56px; margin: 0; z-index: 2; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; } .tf-section .tf-range:focus { outline: none; } .tf-section .tf-range::-webkit-slider-runnable-track { height: 4px; background: transparent; } .tf-section .tf-range::-moz-range-track { height: 4px; background: transparent; } .tf-section .tf-range::-webkit-slider-thumb { -webkit-appearance: none; width: 52px; height: 52px; margin-top: -24px; border-radius: 50%; background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309101e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 22px no-repeat; box-shadow: 0 0 0 7px rgba(255,124,185,.22), 0 8px 22px rgba(0,0,0,.5); cursor: grab; } .tf-section .tf-range::-moz-range-thumb { width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309101e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 22px no-repeat; box-shadow: 0 0 0 7px rgba(255,124,185,.22); cursor: grab; } .tf-section .tf-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px #ffffff, 0 0 0 8px var(--pink); } .tf-section .tf-labels { position: relative; height: 128px; margin-top: 12px; } .tf-section .tf-label { position: absolute; top: 0; width: 200px; margin-left: -100px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 6px; background: none; border: 0; cursor: pointer; text-align: center; color: #ffffff; font-family: var(--font-body, Inter, sans-serif); opacity: 0.4; transition: opacity .2s, transform .2s; } .tf-section .tf-label.is-reached { opacity: 0.75; } .tf-section .tf-label.is-active { opacity: 1; transform: translateY(-3px); } .tf-section .tf-label svg { width: 26px; height: 26px; color: var(--pink); } .tf-section .tf-label b { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: #ffffff; } .tf-section .tf-label small { font-size: 14px; line-height: 1.5; color: #b9bdcb; } @media (max-width: 1180px) { .tf-section .tf-h2 { white-space: normal; } .tf-section .tf-label { width: 150px; margin-left: -75px; } .tf-section .tf-label b { font-size: 14px; } .tf-section .tf-label small { font-size: 12.5px; } } @media (max-width: 900px) { .tf-section { padding: 48px 0 40px; } .tf-section .tf-head { flex-direction: column; gap: 18px; padding: 0 16px; } .tf-section .tf-h2 svg { display: none; } .tf-section .tf-intro { margin-top: 0; max-width: none; padding-left: 18px; } .tf-section .tf-stage { margin-top: 20px; } .tf-section .tf-strip { width: 560%; } .tf-section .tf-labels { height: 96px; } .tf-section .tf-label { opacity: 0; pointer-events: none; left: 50% !important; width: 260px; margin-left: -130px; } .tf-section .tf-label.is-active { opacity: 1; pointer-events: auto; transform: none; } .tf-section .tf-label b { font-size: 17px; } .tf-section .tf-label small { font-size: 14px; } } /* tf head spacing fix */ .tf-section .tf-head { gap: 96px; } .tf-section .tf-h2 { margin-right: 0.9em; } @media (max-width: 1180px) { .tf-section .tf-h2 svg { display: none; } .tf-section .tf-h2 { margin-right: 0; } .tf-section .tf-head { gap: 40px; } } /* tf head fit fix */ .tf-section .tf-title { flex: 1 1 auto; min-width: 0; } .tf-section .tf-intro { flex: 0 1 320px; min-width: 220px; } .tf-section .tf-h2 { font-size: clamp(40px, 4.5vw, 72px); } .tf-section .tf-head { gap: 64px; } /* tf mobile intro fix */ @media (max-width: 900px) { .tf-section .tf-intro, .tf-section .tf-title { flex: none; min-width: 0; } .tf-section .tf-h2 { font-size: 40px; } } /* tf mobile zoom fix */ @media (max-width: 900px) { .tf-section .tf-strip { width: 400%; } .tf-section .tf-stage { margin-top: 8px; } } .tf-section .tf-rail, .tf-section .tf-fill { left: 6.25%; } .tf-section .tf-rail { width: 83%; } .tf-section .tf-range { left: calc(6.25% - 26px); width: calc(83% + 52px); } /* tf mobile labels fix */ @media (max-width: 900px) { .tf-section .tf-labels .tf-label.is-reached { opacity: 0; } .tf-section .tf-labels .tf-label.is-active { opacity: 1; } } /* tf logo headline */ .tf-section .tf-h2 .tf-logo { display: inline-block; height: 0.8em; width: auto; vertical-align: -0.04em; margin-left: 0.06em; overflow: visible; position: static; right: auto; top: auto; } .tf-section .tf-h2 .tf-logo .lg-a { fill: #FF7CB9; } .tf-section .tf-h2 .tf-logo .lg-b { fill: #faf9f5; } @media (max-width: 1180px) { .tf-section .tf-h2 svg.tf-logo { display: inline-block; } } /* tf word headline: MOSTADON as live text, styled like the logo */ .tf-section .tf-h2 .tf-word { white-space: nowrap; color: #FF7CB9; } .tf-section .tf-h2 .tf-o { display: inline-block; width: 0.74em; height: 0.74em; margin: 0 0.03em; border-radius: 50%; background: #FF7CB9; color: transparent; overflow: hidden; vertical-align: baseline; line-height: 0.74em; } .tf-section .tf-h2 .tf-tadon { color: #faf9f5; } /* tf sub2 */ .tf-section .tf-sub2 { margin: 10px 0 0; max-width: 640px; font-size: 17px; line-height: 1.6; color: #b9bdcb; } /* About hero v2 brush layout */ .about-hero { position: relative; overflow: hidden; padding-top: 24px; padding-bottom: 0; background-color: #f6f4ef; } .about-hero::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("https://mostadon.co.uk/wp-content/uploads/2026/10/mostadon-about-brush.webp") no-repeat -2% -40px / 112% auto; pointer-events: none; z-index: 0; } .about-hero > .about-hero-inner { position: relative; z-index: 1; } .about-hero-photo { margin: 0; background: none; box-shadow: none; border-radius: 0; padding: 0; } .about-hero-photo img { width: 100%; height: auto !important; object-fit: contain; display: block; border-radius: 0; background: none; } @media (min-width: 901px) { .about-hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important; grid-template-areas: "copy photo" "stats stats"; column-gap: 32px; row-gap: 0; align-items: end; } .about-hero-copy { grid-area: copy; align-self: center; padding: 56px 0 72px; } .about-hero-copy .h1-dark { font-size: clamp(44px, 4.6vw, 68px); line-height: 1.02; } .about-hero-copy p { font-size: 17px; max-width: 520px; } .about-hero-photo { grid-area: photo; align-self: end; justify-self: end; width: 100%; max-width: 640px; margin-right: -48px; } .about-hero-inner .stack-stats { grid-area: stats; position: relative; border-top: 1px solid #dedcd5; padding: 32px 0 52px; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #f6f4ef; } .about-hero-inner .stack-stats::before { content: ""; position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw; background: #f6f4ef; z-index: -1; } } @media (max-width: 900px) { .about-hero::before { background-size: 230% auto; background-position: 10% -20px; } .about-hero-photo { max-width: 420px; margin: 8px auto 0; } .about-hero-inner .stack-stats { border-top: 1px solid #dedcd5; padding-top: 28px; } } /* About hero v2 photo size */ .about-hero-inner .stack-stats { display: grid !important; } @media (min-width: 901px) { .about-hero-photo { max-width: 600px; margin-right: 0; } .about-hero-copy { padding: 48px 0 64px; } } /* About hero v2 stats tidy */ .about-hero-inner .stack-stats { border-left: 0 !important; padding-left: 0 !important; column-gap: 32px; } .about-hero-inner .stack-stats .stack-stat { border: 0 !important; margin: 0 !important; padding: 0 !important; } .about-hero-inner .stack-stats .stack-value { font-size: clamp(32px, 3vw, 44px); line-height: 1.05; margin-bottom: 6px; } .about-hero-inner .stack-stats .stack-label { font-size: 15px; max-width: 240px; } /* About hero v3 stats column */ .about-hero::before { background-image: url("https://mostadon.co.uk/wp-content/uploads/2026/10/mostadon-about-brush-v2.webp"); background-position: 0 0; background-size: 100% auto; } @media (min-width: 1101px) { .about-hero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr) minmax(0, 0.6fr) !important; grid-template-areas: "copy photo stats"; column-gap: 28px; align-items: end; } .about-hero-photo { grid-area: photo; max-width: none; width: 100%; margin: 0; justify-self: center; } .about-hero-inner .stack-stats { grid-area: stats; align-self: center; display: block !important; background: transparent; border-top: 0; border-left: 1px solid #cfcdc6 !important; padding: 10px 0 10px 32px !important; } .about-hero-inner .stack-stats::before { display: none; } .about-hero-inner .stack-stats .stack-stat { padding: 0 0 22px !important; margin: 0 0 22px !important; border-bottom: 1px solid var(--line) !important; } .about-hero-inner .stack-stats .stack-stat:last-child { border-bottom: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } .about-hero-inner .stack-stats .stack-value { font-size: clamp(36px, 3.4vw, 50px); } .about-hero-inner .stack-stats .stack-label { font-size: 15px; } .about-hero-copy { padding: 48px 0 64px; } .about-hero-copy .h1-dark { font-size: clamp(40px, 4.2vw, 60px); } .about-hero-copy p { font-size: 16px; } } /* About hero v4 example background */ .about-hero { position: relative; background: #f6f5f2 url("https://mostadon.co.uk/wp-content/uploads/2026/10/mostadon-about-hero-bg.webp") no-repeat right center / cover; } .about-hero::before { display: none !important; } @media (min-width: 901px) { .about-hero { min-height: min(66.67vw, 1080px); padding: 0; display: flex; align-items: center; } .about-hero > .about-hero-inner { position: static; width: 100%; display: block !important; } .about-hero-photo { display: none !important; } .about-hero-copy { max-width: min(46vw, 700px); padding: 72px 0 80px; } .about-hero-copy .h1-dark { font-size: clamp(44px, 5vw, 76px); line-height: 1.0; letter-spacing: -0.035em; } .about-hero-copy p { font-size: clamp(16px, 1.25vw, 19px); max-width: 640px; color: #3d4254; } .about-hero-inner .stack-stats { position: absolute; right: 3%; bottom: 4%; width: 230px; display: block !important; margin: 0; padding: 22px 24px !important; border: 0 !important; border-radius: 4px; background: rgba(246,245,242,0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(10,15,30,0.18); z-index: 2; } .about-hero-inner .stack-stats::before { display: none; } .about-hero-inner .stack-stats .stack-stat { padding: 0 0 12px !important; margin: 0 0 12px !important; border-bottom: 1px solid #dedcd5 !important; } .about-hero-inner .stack-stats .stack-stat:last-child { border-bottom: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } .about-hero-inner .stack-stats .stack-value { font-size: clamp(26px, 2.2vw, 34px); line-height: 1.05; margin-bottom: 2px; } .about-hero-inner .stack-stats .stack-label { font-size: 13px; line-height: 1.4; } } @media (max-width: 900px) { .about-hero { background-size: 200% auto; background-position: right bottom; padding-bottom: 104vw; } .about-hero-photo { display: none !important; } .about-hero-inner .stack-stats { position: relative; z-index: 1; } } /* About hero v5 tidy */ .about-hero { background-image: url("https://mostadon.co.uk/wp-content/uploads/2026/10/mostadon-about-hero-bg-v2.webp"); } @media (min-width: 901px) { .about-hero-inner .stack-stats { right: 1.6%; bottom: 3%; width: 205px; padding: 16px 18px !important; } .about-hero-inner .stack-stats .stack-stat { padding: 0 0 8px !important; margin: 0 0 8px !important; } .about-hero-inner .stack-stats .stack-value { font-size: clamp(22px, 1.8vw, 27px); } .about-hero-inner .stack-stats .stack-label { font-size: 12px; line-height: 1.35; } } @media (max-width: 900px) { .about-hero { padding-bottom: 128vw; } } /* About hero v6 smaller photo, no stats */ .about-hero { background-image: none !important; } .about-hero > .about-hero-inner { position: relative !important; z-index: 1; } .about-hero::after { content: ""; position: absolute; right: 0; bottom: 0; width: 76%; aspect-ratio: 1536 / 1024; background: url("https://mostadon.co.uk/wp-content/uploads/2026/10/mostadon-about-hero-bg-v2.webp") no-repeat right bottom / contain; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); pointer-events: none; z-index: 0; } @media (max-width: 900px) { .about-hero::after { width: 170%; } .about-hero { padding-bottom: 106vw; } } /* About hero v6 mask fix: fade only the brush end, never the photo */ .about-hero::after { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%), linear-gradient(90deg, transparent 50%, #000 58%); mask-image: linear-gradient(180deg, transparent 0, #000 22%), linear-gradient(90deg, transparent 50%, #000 58%); -webkit-mask-composite: source-over; mask-composite: add; } /* About hero v7: photo floats at the top, shirt fades out */ @media (min-width: 901px) { .about-hero::after { top: 16px; bottom: auto; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%), linear-gradient(180deg, transparent 0, #000 22%), linear-gradient(90deg, transparent 50%, #000 58%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%), linear-gradient(180deg, transparent 0, #000 22%), linear-gradient(90deg, transparent 50%, #000 58%); -webkit-mask-composite: source-in, source-over; mask-composite: intersect, add; } } /* About hero v8: photo fills the section height exactly, no fade, no extra padding */ @media (min-width: 901px) { .about-hero { min-height: 0 !important; padding: 0 !important; } .about-hero-copy { padding: 64px 0 56px !important; } .about-hero::after { top: 0; bottom: 0; height: 100%; width: auto; max-width: 80%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%), linear-gradient(90deg, transparent 50%, #000 58%); mask-image: linear-gradient(180deg, transparent 0, #000 22%), linear-gradient(90deg, transparent 50%, #000 58%); -webkit-mask-composite: source-over; mask-composite: add; } } /* About hero v9: example image as background, live copy left, credentials column right */ .about-creds { display: none; } @media (min-width: 901px) { .about-hero { background: #fcfcfb url("https://mostadon.co.uk/wp-content/uploads/2026/10/mostadon-about-hero-bg-v3.webp") no-repeat center top / 100% auto !important; min-height: 75vw !important; padding: 0 !important; display: block !important; overflow: hidden; } .about-hero::before, .about-hero::after { display: none !important; } .about-hero > .about-hero-inner { position: relative !important; max-width: none !important; width: 100% !important; min-height: 75vw; padding: 0 !important; margin: 0 !important; display: block !important; } .about-hero-copy { position: absolute; left: 3.7vw; top: 8.4vw; width: 42vw; max-width: none !important; padding: 0 !important; } .about-hero-copy .is-style-mst-eyebrow { font-size: 1.15vw; letter-spacing: 0.26em; color: #2f3a6b; margin: 0 0 1.6vw; } .about-hero-copy .h1-dark { font-size: 5.55vw !important; line-height: 0.98 !important; letter-spacing: -0.045em; color: #0b1020; margin: 0 0 2.3vw !important; } .about-hero-copy .h1-dark mark { color: #ff3d8b !important; } .about-hero-copy p:not(.is-style-mst-eyebrow) { font-size: 1.38vw !important; line-height: 1.5; color: #33418a !important; max-width: none !important; margin: 0 0 1.5vw; } .about-creds { display: block; position: absolute; left: 75.3vw; top: 4.7vw; width: 23.2vw; padding-left: 3.1vw; border-left: 1px solid #c9ccd8; } .about-cred { padding: 1.5vw 0 1.6vw; border-bottom: 1px solid #d9dbe4; } .about-cred:first-child { padding-top: 1.6vw; } .about-cred-title { margin: 0 0 0.6vw; font-family: var(--font-head); font-weight: 800; font-size: 3vw; line-height: 0.98; letter-spacing: -0.035em; color: #0b1020; } .about-cred:nth-child(3) .about-cred-title { font-size: 2.3vw; line-height: 1.05; } .about-cred-text { margin: 0; font-size: 1.45vw; line-height: 1.35; color: #34428a; } .about-cred-note { margin: 1.3vw 0 1.6vw; padding: 1.5vw 1.4vw; border-radius: 0.6vw; background: #fde4ef; } .about-cred-note p { margin: 0; font-size: 1.25vw; line-height: 1.5; color: #2a3360; } .about-cred-note strong { color: #0b1020; font-weight: 700; } .about-cred-note span { color: #ff3d8b; font-weight: 800; } .about-cred--last { border-bottom: 0; border-top: 1px solid #d9dbe4; margin-left: 3.6vw; padding-top: 2vw; } .about-cred--last .about-cred-text { font-size: 1.25vw; } } @media (max-width: 900px) { .about-hero { background: #fcfcfb url("https://mostadon.co.uk/wp-content/uploads/2026/10/mostadon-about-hero-bg-v3.webp") no-repeat 58% bottom / 170% auto !important; padding-bottom: 100vw !important; } .about-hero::before, .about-hero::after { display: none !important; } .about-creds { display: block; margin-top: 24px; border-top: 1px solid #d9dbe4; } .about-cred { padding: 16px 0; border-bottom: 1px solid #d9dbe4; } .about-cred-title { margin: 0 0 4px; font-family: var(--font-head); font-weight: 800; font-size: 26px; line-height: 1.05; letter-spacing: -0.03em; color: #0b1020; } .about-cred-text { margin: 0; font-size: 15px; color: #34428a; } .about-cred-note { margin: 16px 0; padding: 14px 16px; border-radius: 6px; background: #fde4ef; } .about-cred-note p { margin: 0; font-size: 15px; line-height: 1.5; } .about-cred-note span { color: #ff3d8b; font-weight: 800; } } /* About hero v9 type fit */ @media (min-width: 901px) { .about-hero-copy { width: 40vw; top: 8.8vw; } .about-hero-copy .h1-dark { font-size: 4.75vw !important; letter-spacing: -0.05em; } .about-hero-copy p:not(.is-style-mst-eyebrow) { font-size: 1.3vw !important; max-width: 38.5vw !important; } } /* About hero v9 line fit */ @media (min-width: 901px) { .about-hero-copy .h1-dark { width: 46vw; } .about-cred:nth-child(3) .about-cred-title { font-size: 2.05vw; letter-spacing: -0.04em; } } /* Home hero extra padding */ .hero.hero--home { padding-top: 16px; padding-bottom: 16px; } /* Home hero mammoth nudge right */ @media (min-width: 901px) { .hero.hero--home .hero-art { transform: translateX(16px); } } /* Home hero mammoth nudge right, 48px total */ @media (min-width: 901px) { .hero.hero--home .hero-art { transform: translateX(48px); } } /* About hero v10: photo raised so it ends with the text, column anchored right */ @media (min-width: 901px) { .about-hero { min-height: 64.5vw !important; background-position: center bottom !important; } .about-hero > .about-hero-inner { min-height: 64.5vw; } .about-hero-copy { top: 7vw; } .about-creds { left: auto; right: 1.6vw; top: 1.4vw; } .about-cred { padding: 1.15vw 0 1.25vw; } .about-cred:first-child { padding-top: 1.3vw; } .about-cred-note { margin: 1vw 0 1.2vw; padding: 1.3vw 1.3vw; } .about-cred--last { padding-top: 1.5vw; } } /* About hero v10 paragraph width */ @media (min-width: 901px) { .about-hero-copy p:not(.is-style-mst-eyebrow) { max-width: 34.5vw !important; font-size: 1.27vw !important; } } /* About hero v10 height breathing room */ @media (min-width: 901px) { .about-hero { min-height: 67.5vw !important; } .about-hero > .about-hero-inner { min-height: 67.5vw; } } /* Home hero mammoth nudge right, 96px total */ @media (min-width: 901px) { .hero.hero--home .hero-art { transform: translateX(96px); } } /* MST guide me widget (Home) */ .gm-section { background: #f8f7f3; color: #0a0f1e; padding: 88px 0; } .gm-section .gm-inner { width: min(1200px, 100% - 64px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); gap: 64px; align-items: center; } .gm-section .gm-eyebrow { margin: 0 0 14px; font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: #e0468e; } .gm-section .gm-h2 { margin: 0; font-family: var(--font-head); font-size: clamp(34px, 3.6vw, 52px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; color: #0a0f1e; } .gm-section .gm-lead { margin: 20px 0 0; font-size: 19px; line-height: 1.55; color: #33418a; } .gm-section .gm-small { margin: 14px 0 0; font-size: 15px; color: #5b6275; } .gm-section .gm-panel { background: #ffffff; border-radius: 22px; padding: 30px; box-shadow: 0 24px 60px rgba(10,15,30,.10); } .gm-section .gm-qs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .gm-section .gm-q { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 10px; margin: 0; cursor: pointer; } .gm-section .gm-num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #0a0f1e; color: #ffffff; font-family: var(--font-head); font-size: 13px; font-weight: 700; } .gm-section .gm-qtext { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: #0a0f1e; } .gm-section .gm-sel { grid-column: 1 / -1; width: 100%; min-height: 52px; padding: 12px 42px 12px 16px; border: 2px solid #ff7cb9; border-radius: 12px; background: #fff0f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0f1e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: #0a0f1e; -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis; } .gm-section .gm-sel:hover { background-color: #ffe3f0; } .gm-section .gm-sel:focus-visible { outline: 3px solid #0a0f1e; outline-offset: 2px; } .gm-section .gm-result { position: relative; margin-top: 22px; min-height: 190px; padding: 28px 230px 28px 30px; border-radius: 18px; background: #ff7cb9; overflow: hidden; } .gm-section .gm-result-label { margin: 0; font-size: 15px; font-weight: 600; color: #0a0f1e; } .gm-section .gm-result-title { margin: 6px 0 0; font-family: var(--font-head); font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; color: #0a0f1e; transition: opacity .2s; } .gm-section .gm-result-why { margin: 10px 0 0; max-width: 460px; font-size: 15.5px; line-height: 1.5; color: #1d2340; } .gm-section .gm-result.is-changing .gm-result-title, .gm-section .gm-result.is-changing .gm-result-why { opacity: 0.2; } .gm-section .gm-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 13px 22px; border-radius: 999px; background: #0a0f1e; color: #ffffff; font-family: var(--font-head); font-size: 15px; font-weight: 700; text-decoration: none; transition: transform .2s, background .2s; } .gm-section .gm-btn:hover, .gm-section .gm-btn:focus-visible { background: #1c2440; color: #ffffff; transform: translateX(3px); } .gm-section .gm-mammoth { position: absolute; right: 18px; bottom: -14px; width: 190px; height: auto; pointer-events: none; } @media (max-width: 1100px) { .gm-section .gm-inner { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 760px) { .gm-section { padding: 56px 0; } .gm-section .gm-inner { width: calc(100% - 32px); } .gm-section .gm-panel { padding: 20px; border-radius: 18px; } .gm-section .gm-qs { grid-template-columns: 1fr; } .gm-section .gm-result { padding: 24px 22px 150px; } .gm-section .gm-mammoth { width: 140px; right: 12px; bottom: -10px; } } /* MST services mega menu */ .site-nav .mega { display: none; } @media (min-width: 901px) { .site-header .header-inner { position: relative; } .site-nav .menu > li.has-mega { position: static; } .site-nav .has-mega > .sub-menu { display: none; } .site-nav .mega { display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: 60; padding-top: 10px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; } .site-nav .has-mega:hover > .mega, .site-nav .has-mega:focus-within > .mega, .site-nav .has-mega.is-open > .mega { opacity: 1; visibility: visible; transform: none; } .site-nav .mega-box { position: relative; overflow: hidden; border: 1px solid rgba(255,124,185,.55); border-radius: 18px; background: radial-gradient(120% 90% at 100% 100%, rgba(255,124,185,.18), transparent 55%), #0d1322; box-shadow: 0 0 0 1px rgba(255,124,185,.08), 0 0 40px rgba(255,124,185,.18), 0 30px 70px rgba(0,0,0,.55); } .site-nav .mega-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 30px 12px 26px; } .site-nav .mega-col { padding: 0 22px; border-left: 1px solid #283048; } .site-nav .mega-col:first-child { border-left: 0; } .site-nav .mega-head { margin: 0 0 18px; font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #ffffff; } .site-nav .menu .mega-link { display: grid; grid-template-columns: 36px 1fr; gap: 0 14px; align-items: start; margin: 0 -10px 6px; padding: 10px; border-radius: 12px; white-space: normal; color: #ffffff; transition: background .18s; } .site-nav .menu .mega-link::after, .site-nav .menu .mega-cta-btn::after { display: none; } .site-nav .menu .mega-link:hover, .site-nav .menu .mega-link:focus-visible { background: rgba(255,124,185,.09); } .site-nav .mega-ico { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,124,185,.12); color: var(--pink); } .site-nav .mega-ico svg { width: 19px; height: 19px; } .site-nav .mega-title { font-family: var(--font-head); font-size: 15px; font-weight: 700; line-height: 1.3; color: #ffffff; transition: color .18s; } .site-nav .mega-link:hover .mega-title { color: var(--pink); } .site-nav .mega-desc { margin-top: 4px; font-size: 13.5px; font-weight: 400; line-height: 1.45; color: #a9afc0; } .site-nav .mega-cta { position: relative; display: flex; align-items: center; gap: 26px; margin: 0 16px 16px; padding: 20px 260px 20px 22px; border: 1px solid rgba(255,124,185,.4); border-radius: 14px; background: rgba(255,124,185,.05); } .site-nav .mega-cta-ico { flex: none; width: 58px; height: 44px; color: var(--pink); } .site-nav .mega-cta-copy { flex: 1; } .site-nav .mega-cta-copy b { display: block; font-family: var(--font-head); font-size: 18px; font-weight: 700; color: #ffffff; } .site-nav .mega-cta-copy span { display: block; margin-top: 4px; font-size: 14px; color: #c8ccd8; } .site-nav .menu .mega-cta-btn { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 8px; background: var(--pink); color: #0a0f1e; font-family: var(--font-head); font-size: 15px; font-weight: 700; transition: transform .18s, background .18s; } .site-nav .menu .mega-cta-btn:hover { background: #ff97c7; transform: translateX(3px); } .site-nav .mega-mammoth { position: absolute; right: -6px; bottom: -18px; width: 210px; height: auto; pointer-events: none; } } @media (min-width: 901px) and (max-width: 1180px) { .site-nav .mega-col { padding: 0 14px; } .site-nav .mega-desc { font-size: 12.5px; } .site-nav .mega-cta { padding-right: 190px; } .site-nav .mega-mammoth { width: 160px; } } /* MST mega menu v2: joined to header, no gap */ @media (min-width: 901px) { .site-nav .mega { padding-top: 0; transform: translateY(-4px); } .site-nav .mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 26px; } .site-nav .mega-box { border-top: 0; border-radius: 0 0 18px 18px; background: radial-gradient(120% 90% at 100% 100%, rgba(255,124,185,.16), transparent 55%), #0a0f1e; box-shadow: 0 0 40px rgba(255,124,185,.14), 0 30px 70px rgba(0,0,0,.55); } .site-nav .mega-box::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,124,185,.35), transparent); } } /* MST mega menu v3: drop panel slightly so the full top stroke shows */ @media (min-width: 901px) { .site-nav .mega { padding-top: 10px; background: linear-gradient(#0a0f1e, #0a0f1e) top / 100% 22px no-repeat; } .site-nav .mega-box { border-top: 1px solid rgba(255,124,185,.55); border-radius: 18px; } .site-nav .mega-box::before { display: none; } } /* MST mega menu v4: climbing mammoth */ @media (min-width: 901px) { .site-nav .mega-cta { padding-right: 290px; } .site-nav .mega-mammoth { right: 12px; bottom: -6px; width: 250px; filter: drop-shadow(0 0 18px rgba(255,124,185,.25)); } } @media (min-width: 901px) and (max-width: 1180px) { .site-nav .mega-cta { padding-right: 210px; } .site-nav .mega-mammoth { width: 180px; } } /* MST pain cards no ticks */ .pain-card .pain-icon { display: none; } .pain-card .pain-text { margin-top: 0; } /* MST hard sell intro as heading */ .hard-sell .hs-intro { font-family: var(--font-head); font-size: clamp(34px, 4.2vw, 52px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; text-transform: none; color: var(--ink); max-width: 1000px; } .hard-sell .hs-intro br { display: none; } .hard-sell .hs-intro mark { display: block; margin-top: 18px; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; line-height: 1.6; text-transform: uppercase; } /* MST guide me v2: big mammoth, ink lead */ .gm-section .gm-lead { color: #3d4254; } .gm-section .gm-result { min-height: 270px; padding: 34px 41% 34px 32px; display: flex; align-items: center; } .gm-section .gm-result-why { color: #0a0f1e; } .gm-section .gm-mammoth { top: 0; right: 0; bottom: auto; height: 100%; width: auto; max-width: none; } @media (max-width: 760px) { .gm-section .gm-result { display: block; min-height: 0; padding: 24px 22px 250px; } .gm-section .gm-mammoth { top: auto; bottom: 0; right: 0; height: 250px; } } /* MST guide me v3: mock scene, rocks run under the copy */ .gm-section .gm-result-copy { position: relative; z-index: 1; } .gm-section .gm-result { min-height: 262px; padding-right: 38%; } .gm-section .gm-mammoth { top: 0; right: 0; bottom: auto; height: 100%; width: auto; max-width: none; z-index: 0; } @media (max-width: 760px) { .gm-section .gm-result { min-height: 0; padding: 24px 22px 52%; } .gm-section .gm-mammoth { top: auto; bottom: 0; right: 0; width: 100%; height: auto; } } /* MST home about v2: mock background */ @media (min-width: 901px) { .about-home { position: relative; padding: 0 !important; min-height: 35.95vw; background: #f9f5f2 url("/wp-content/uploads/2026/10/mostadon-home-about-art-v6.webp") center top / 100% auto no-repeat !important; overflow: hidden; } .about-home .about-home-inner { display: block !important; position: static; max-width: none; width: auto; padding: 0; margin: 0; min-height: 35.95vw; } .about-home .about-home-photo { display: none !important; } .about-home .about-home-copy { position: absolute; left: 3.9vw; top: 3.1vw; width: 36vw; padding: 0 !important; } .about-home .about-home-copy .is-style-mst-eyebrow { color: #ff3d8b; font-size: max(11px, 0.78vw); letter-spacing: 0.24em; margin: 0 0 1.5vw; } .about-home .about-home-copy .h2 { font-size: 4.1vw !important; line-height: 0.97; letter-spacing: -0.045em; margin: 0 0 1.6vw !important; max-width: 36vw; } .about-home .about-home-copy .h2 mark { color: #ff3d8b !important; } .about-home .about-home-copy p:not(.is-style-mst-eyebrow):not(.arrow-link) { font-size: max(14px, 1.28vw); line-height: 1.38; color: #0a0f1e; max-width: 30vw; margin: 0; } .about-home .about-home-copy .arrow-link { margin-top: 2.3vw; font-size: max(14px, 1.22vw); } .about-home .about-home-copy .arrow-link a { color: #ff3d8b; padding-bottom: 0.45vw; border-bottom: 2px solid #ff3d8b; } .about-home .stack-stats { position: absolute; left: 77.75vw; top: 3.5vw; bottom: 3.6vw; width: 19.5vw; padding: 0 0 0 1.85vw !important; border-left: 1px solid #d9d4cf !important; display: flex; flex-direction: column; justify-content: space-between; margin: 0; } .about-home .stack-stat { position: relative; padding: 0 0 0 4.7vw; margin: 0 !important; flex: 1; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid #e3ded9; } .about-home .stack-stat:last-child { border-bottom: 0; } .about-home .stack-value { font-size: 2.65vw !important; line-height: 1; letter-spacing: -0.04em; color: #0a0f1e; } .about-home .stack-label { font-size: max(12px, 1.05vw) !important; line-height: 1.4; color: #0a0f1e; max-width: 13.5vw; margin-top: 0.3vw; } .about-home .stack-stat::before { content: ""; position: absolute; left: 0; top: 50%; width: 2.35vw; height: 2.35vw; margin-top: -1.6vw; background: #ff3d8b; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; } } .about-home .stack-stat:nth-child(1) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17M8 13.5h.01M12 13.5h.01M16 13.5h.01M8 17h.01M12 17h.01'/%3E%3C/svg%3E"); } .about-home .stack-stat:nth-child(2) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='15' cy='5.5' rx='5.5' ry='2.5'/%3E%3Cpath d='M9.5 5.5v3c0 1.4 2.5 2.5 5.5 2.5s5.5-1.1 5.5-2.5v-3M9.5 8.5v3c0 1.4 2.5 2.5 5.5 2.5s5.5-1.1 5.5-2.5v-3'/%3E%3Cellipse cx='9' cy='13.5' rx='5.5' ry='2.5'/%3E%3Cpath d='M3.5 13.5v3c0 1.4 2.5 2.5 5.5 2.5s5.5-1.1 5.5-2.5v-3M3.5 16.5v3c0 1.4 2.5 2.5 5.5 2.5s5.5-1.1 5.5-2.5v-3'/%3E%3C/svg%3E"); } .about-home .stack-stat:nth-child(3) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='3.5' y='14' width='4' height='6.5'/%3E%3Crect x='10' y='10' width='4' height='10.5'/%3E%3Crect x='16.5' y='4.5' width='4' height='16'/%3E%3C/svg%3E"); } .about-home .stack-stat:nth-child(4) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2.5' width='6' height='11.5' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5v4M8.5 21.5h7M9 6h2M9 9h2'/%3E%3C/svg%3E"); } @media (max-width: 900px) { .about-home { padding-bottom: 0 !important; background: #f9f5f2; } .about-home .about-home-photo { display: none !important; } .about-home .about-home-inner::after { content: ""; display: block; grid-column: 1 / -1; margin: 8px -22px 0; height: 72vw; background: url("/wp-content/uploads/2026/10/mostadon-home-about-art-v6.webp") 73% bottom / auto 100% no-repeat; } .about-home .about-home-copy { padding-bottom: 8px; } .about-home .about-home-copy .is-style-mst-eyebrow, .about-home .about-home-copy .h2 mark, .about-home .about-home-copy .arrow-link a { color: #ff3d8b !important; } .about-home .stack-stats { border-left: 0 !important; padding: 8px 0 0 !important; } .about-home .stack-stat { position: relative; padding-left: 44px !important; } .about-home .stack-stat::before { content: ""; position: absolute; left: 0; top: 4px; width: 30px; height: 30px; background: #ff3d8b; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; } } /* MST home about v2b */ @media (min-width: 901px) { .about-home .about-home-copy p:not(.is-style-mst-eyebrow):not(.arrow-link) { max-width: 33vw; } } /* MST home about v2c: more space between stats */ @media (min-width: 901px) { .about-home .stack-stats { top: 2.6vw; bottom: auto; justify-content: flex-start; } .about-home .stack-stat { flex: none; padding-top: 1.15vw !important; padding-bottom: 1.15vw !important; } .about-home .stack-stat:first-child { padding-top: 0.4vw !important; } } /* MST home about v2d: keep stats inside on smaller desktops */ @media (min-width: 901px) { .about-home, .about-home .about-home-inner { min-height: max(35.95vw, 480px); } .about-home { background-size: cover !important; background-position: 58% bottom !important; } } /* MST home about v3: copy aligned to site container, picture shifted right */ @media (min-width: 901px) { .about-home { --F: min(100vw, 1500px); --O: calc((100vw - var(--F)) / 2); --cl: max(40px, calc((100vw - 1264px) / 2)); --s: max(0px, calc(var(--cl) - var(--O) - 0.039 * var(--F))); --ie: calc(var(--O) + var(--F) + var(--s)); min-height: max(calc(0.3595 * var(--F)), 480px) !important; background: linear-gradient(90deg, rgba(249,245,242,0) calc(var(--ie) - 160px), #f9f5f2 var(--ie)), url("/wp-content/uploads/2026/10/mostadon-home-about-art-v6.webp") calc(var(--O) + var(--s)) bottom / var(--F) auto no-repeat, #f9f5f2 !important; } .about-home .about-home-inner { min-height: max(calc(0.3595 * var(--F)), 480px) !important; } .about-home .about-home-copy { left: var(--cl); top: calc(0.031 * var(--F)); width: calc(0.36 * var(--F)); } .about-home .about-home-copy .is-style-mst-eyebrow { font-size: max(11px, calc(0.0078 * var(--F))); margin-bottom: calc(0.015 * var(--F)); } .about-home .about-home-copy .h2 { font-size: calc(0.041 * var(--F)) !important; max-width: calc(0.36 * var(--F)); margin-bottom: calc(0.016 * var(--F)) !important; } .about-home .about-home-copy p:not(.is-style-mst-eyebrow):not(.arrow-link) { font-size: max(14px, calc(0.0128 * var(--F))); max-width: calc(0.33 * var(--F)); } .about-home .about-home-copy .arrow-link { margin-top: calc(0.023 * var(--F)); font-size: max(14px, calc(0.0122 * var(--F))); } .about-home .stack-stats { left: calc(var(--O) + var(--s) + 0.7775 * var(--F)); top: calc(0.026 * var(--F)); width: calc(0.19 * var(--F)); padding-left: calc(0.0185 * var(--F)) !important; } .about-home .stack-stat { padding-left: calc(0.047 * var(--F)) !important; padding-top: calc(0.0115 * var(--F)) !important; padding-bottom: calc(0.0115 * var(--F)) !important; } .about-home .stack-stat:first-child { padding-top: calc(0.004 * var(--F)) !important; } .about-home .stack-value { font-size: calc(0.0265 * var(--F)) !important; } .about-home .stack-label { font-size: max(12px, calc(0.0105 * var(--F))) !important; max-width: calc(0.135 * var(--F)); } .about-home .stack-stat::before { width: calc(0.0235 * var(--F)); height: calc(0.0235 * var(--F)); margin-top: calc(-0.016 * var(--F)); } } /* MST home about v3b: keep stats off the screen edge */ @media (min-width: 901px) { .about-home .stack-stats { left: min(calc(var(--O) + var(--s) + 0.7775 * var(--F)), calc(100vw - 0.19 * var(--F) - 36px)); } } /* MST home about v3c: picture further right, stats further left */ @media (min-width: 901px) { .about-home { --p: 28px; --ie: calc(var(--O) + var(--F) + var(--s) + var(--p)); background: linear-gradient(90deg, rgba(249,245,242,0) calc(var(--ie) - 160px), #f9f5f2 var(--ie)), url("/wp-content/uploads/2026/10/mostadon-home-about-art-v6.webp") calc(var(--O) + var(--s) + var(--p)) bottom / var(--F) auto no-repeat, #f9f5f2 !important; } .about-home .stack-stats { left: calc(min(calc(var(--O) + var(--s) + 0.7775 * var(--F)), calc(100vw - 0.19 * var(--F) - 36px)) - 28px); } } /* MST home about v3d: picture slightly smaller so it can sit further right without hitting the stats */ @media (min-width: 901px) { .about-home { --p: 28px; --il: calc(var(--O) + var(--s) + var(--p) + 0.0576 * var(--F)); --ie: calc(var(--il) + 0.88 * var(--F)); background: linear-gradient(90deg, rgba(249,245,242,0) calc(var(--ie) - 160px), #f9f5f2 var(--ie)), url("/wp-content/uploads/2026/10/mostadon-home-about-art-v6.webp") var(--il) bottom / calc(0.88 * var(--F)) auto no-repeat, #f9f5f2 !important; } .about-home .stack-stats { left: calc(min(calc(var(--O) + var(--s) + 0.7775 * var(--F)), calc(100vw - 0.19 * var(--F) - 36px)) - 14px); } } /* MST home about v3e: copy starts exactly where other section text starts */ @media (min-width: 901px) { .about-home { --cl: calc(max(0px, (100vw - 1264px) / 2) + var(--gutter, 32px)); } .about-home .about-home-copy { left: calc(max(0px, (100% - 1264px) / 2) + var(--gutter, 32px)); } } /* MST home about v3f: keep tusks clear of the stats */ @media (min-width: 901px) { .about-home { --sl: calc(min(calc(var(--O) + var(--s) + 0.7775 * var(--F)), calc(100vw - 0.19 * var(--F) - 36px)) - 14px); --il: min(calc(var(--O) + var(--s) + var(--p) + 0.0576 * var(--F)), calc(var(--sl) - 22px - 0.6666 * var(--F))); --ie: calc(var(--il) + 0.88 * var(--F)); background: linear-gradient(90deg, rgba(249,245,242,0) calc(var(--ie) - 160px), #f9f5f2 var(--ie)), url("/wp-content/uploads/2026/10/mostadon-home-about-art-v6.webp") var(--il) bottom / calc(0.88 * var(--F)) auto no-repeat, #f9f5f2 !important; } .about-home .stack-stats { left: var(--sl); } } /* MST pain diagnostic (Sound familiar?) */ .pains.is-diag .pain-hint { margin: -6px 0 18px; font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pink); } .pains.is-diag .pain-card { position: relative; cursor: pointer; user-select: none; padding-right: 64px; transition: background-color .2s, border-color .2s, transform .15s; } .pains.is-diag .pain-card::after { content: "+"; position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #4a5270; color: #c8ccd8; font: 600 18px/1 var(--font-body); transition: all .2s; } .pains.is-diag .pain-card:hover { border-color: var(--pink); transform: translateY(-2px); } .pains.is-diag .pain-card:hover::after { border-color: var(--pink); color: var(--pink); } .pains.is-diag .pain-card:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; } .pains.is-diag .pain-card.is-picked { background: var(--pink); border-color: var(--pink); } .pains.is-diag .pain-card.is-picked .pain-text { color: #0a0f1e; } .pains.is-diag .pain-card.is-picked::after { content: ""; border-color: #0a0f1e; background: #0a0f1e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7cb9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat; } .pains.is-diag .pain-cta { align-items: center; gap: 32px; } .pains.is-diag .pain-result { flex: 1; min-width: 0; } .pains.is-diag .pain-dots { display: flex; gap: 6px; margin-bottom: 14px; } .pains.is-diag .pain-dots span { width: 34px; height: 6px; border-radius: 3px; background: #2a3150; transition: background-color .25s; } .pains.is-diag .pain-dots span.is-on { background: var(--pink); } .pains.is-diag .pain-count { margin: 0; font-family: var(--font-head); font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; color: #ffffff; } .pains.is-diag .pain-count strong { color: var(--pink); } .pains.is-diag .pain-count mark { background: none; color: var(--pink); } .pains.is-diag .pain-why { margin: 8px 0 0; max-width: 620px; font-size: 16px; line-height: 1.55; color: #b9bdcb; } .pains.is-diag .pain-cta .wp-block-buttons { flex: none; display: flex; flex-wrap: wrap; gap: 12px; } .pains.is-diag .pain-more .wp-block-button__link { background: transparent; border: 1.5px solid #ffffff; color: #ffffff; } .pains.is-diag .pain-more .wp-block-button__link:hover { border-color: var(--pink); color: var(--pink); } @media (max-width: 900px) { .pains.is-diag .pain-cta { align-items: flex-start; gap: 20px; } } /* MST guide me premium: poses, animation, why this */ .gm-section .gm-result.is-premium { min-height: 290px; padding: 34px 44% 32px 34px; display: flex; align-items: center; background: radial-gradient(120% 140% at 100% 100%, #ff5aa8 0%, rgba(255,90,168,0) 55%), linear-gradient(135deg, #ff94c8 0%, #ff7cb9 55%, #ff6db1 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 18px 40px rgba(255,92,166,.28); } .gm-section .gm-result.is-premium .gm-result-copy { position: relative; z-index: 2; width: 100%; } .gm-section .gm-art { position: absolute; top: 0; right: 0; bottom: 0; width: 44%; z-index: 1; pointer-events: none; } .gm-section .gm-glow { position: absolute; left: 6%; right: 2%; bottom: 4%; height: 70%; border-radius: 50%; background: radial-gradient(closest-side, rgba(10,15,30,.18), rgba(10,15,30,0)); filter: blur(4px); } .gm-section .gm-pose { position: absolute; right: 6%; bottom: 8%; width: 88%; height: 78%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 14px 18px rgba(10,15,30,.28)); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); } .gm-section .gm-pose.is-in { animation: gm-pose-in .6s cubic-bezier(.2,.9,.25,1.05) both; } .gm-section .gm-pose.is-out { opacity: 0; transform: translateX(28px) scale(.94); } @keyframes gm-pose-in { from { opacity: 0; transform: translateY(22px) scale(.92); } to { opacity: 1; transform: none; } } .gm-section .gm-result.is-swap .gm-result-label, .gm-section .gm-result.is-swap .gm-result-title, .gm-section .gm-result.is-swap .gm-result-why { animation: gm-copy-in .5s cubic-bezier(.2,.8,.2,1) both; } .gm-section .gm-result.is-swap .gm-result-title { animation-delay: .06s; } .gm-section .gm-result.is-swap .gm-result-why { animation-delay: .12s; } .gm-section .gm-result.is-swap { animation: gm-card-pulse .6s ease; } @keyframes gm-copy-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes gm-card-pulse { 0% { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 18px 40px rgba(255,92,166,.28); } 40% { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 6px rgba(255,124,185,.25), 0 22px 46px rgba(255,92,166,.4); } 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 18px 40px rgba(255,92,166,.28); } } .gm-section .gm-result.is-premium .gm-result-why { transition: none; } .gm-section .gm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; } .gm-section .gm-actions .gm-btn { margin-top: 0; } .gm-section .gm-whybtn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 2px; border: 0; background: none; cursor: pointer; font-family: var(--font-head); font-size: 15px; font-weight: 700; color: #0a0f1e; border-bottom: 2px solid rgba(10,15,30,.35); } .gm-section .gm-whybtn span { display: inline-block; transition: transform .25s; } .gm-section .gm-whybtn:hover { border-bottom-color: #0a0f1e; } .gm-section .gm-whybtn:focus-visible { outline: 3px solid #0a0f1e; outline-offset: 3px; } .gm-section .why-open .gm-whybtn span { transform: rotate(45deg); } .gm-section .gm-whythis { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease, margin .35s ease, opacity .3s ease; opacity: 0; margin-top: 0; } .gm-section .gm-whythis > div { overflow: hidden; } .gm-section .why-open .gm-whythis { grid-template-rows: 1fr; opacity: 1; margin-top: 14px; } .gm-section .gm-whythis p { margin: 0; padding-left: 14px; border-left: 3px solid #0a0f1e; font-size: 14.5px; line-height: 1.5; color: #0a0f1e; } .gm-section .gm-whythis p + p { margin-top: 6px; } .gm-section .gm-whythis .gm-why1 { font-weight: 600; } @media (max-width: 760px) { .gm-section .gm-result.is-premium { display: block; min-height: 0; padding: 24px 22px 230px; } .gm-section .gm-art { top: auto; height: 220px; width: 100%; } .gm-section .gm-pose { right: 50%; transform: translateX(50%); width: 80%; height: 88%; bottom: 6%; } .gm-section .gm-pose.is-in { animation-name: gm-pose-in-m; } .gm-section .gm-pose.is-out { transform: translateX(60%) scale(.94); } @keyframes gm-pose-in-m { from { opacity: 0; transform: translate(50%, 22px) scale(.92); } to { opacity: 1; transform: translateX(50%); } } } @media (prefers-reduced-motion: reduce) { .gm-section .gm-pose, .gm-section .gm-result, .gm-section .gm-result * { animation: none !important; transition: none !important; } } /* MST guide me premium b: bigger poses */ @media (min-width: 761px) { .gm-section .gm-pose { right: 4%; bottom: 0; width: 100%; height: min(94%, 280px); } .gm-section .gm-glow { bottom: -6%; height: 55%; } } /* MST interactive who, routes, versus */ .wf-section, .rt-section { background: #f8f7f3; color: #0a0f1e; } .wf-section { padding: 88px 0 72px; } .rt-section { padding: 24px 0 96px; } .wf-inner, .rt-inner, .vs-inner { width: 100%; max-width: 1264px; margin: 0 auto; padding: 0 var(--gutter, 32px); box-sizing: border-box; } .wf-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 0; } .wf-audience { padding-right: 56px; } .wf-process { padding-left: 56px; border-left: 1px solid #dedad3; } .wf-eyebrow { margin: 0 0 12px; font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #e0468e; } .wf-h2 { margin: 0; font-family: var(--font-head); font-size: clamp(30px, 3.2vw, 44px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; color: inherit; } .wf-sub { margin: 12px 0 0; font-size: 17px; line-height: 1.55; color: #3d4254; } .wf-tabs, .rt-switch, .vs-switch { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .wf-tab, .rt-opt, .vs-opt { appearance: none; -webkit-appearance: none; padding: 12px 22px; border-radius: 999px; border: 1.5px solid #dcd8d0; background: #ffffff; font-family: var(--font-head); font-size: 15px; font-weight: 700; color: #0a0f1e; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .15s, box-shadow .2s; } .wf-tab:hover, .rt-opt:hover { border-color: #ff7cb9; transform: translateY(-1px); } .wf-tab.is-on, .rt-opt.is-on { background: #ff7cb9; border-color: #ff7cb9; box-shadow: 0 8px 20px rgba(255,92,166,.28); } .wf-tab:focus-visible, .rt-opt:focus-visible, .vs-opt:focus-visible { outline: 3px solid #0a0f1e; outline-offset: 3px; } .wf-panel { position: relative; margin-top: 30px; min-height: 230px; padding-right: 40%; } .wf-panel.is-swap .wf-copy > * { animation: wf-in .45s cubic-bezier(.2,.8,.2,1) both; } .wf-panel.is-swap .wf-text { animation-delay: .05s; } .wf-panel.is-swap .wf-btn { animation-delay: .1s; } .wf-panel.is-swap .wf-pose { animation: wf-pose .55s cubic-bezier(.2,.9,.25,1.05) both; } @keyframes wf-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes wf-pose { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } } .wf-h3 { margin: 0; font-family: var(--font-head); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; } .wf-text { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: #3d4254; } .wf-btn, .rt-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 13px 22px; border-radius: 8px; background: #ff7cb9; color: #0a0f1e; font-family: var(--font-head); font-size: 15px; font-weight: 700; text-decoration: none; transition: transform .2s, background-color .2s; } .wf-btn::after, .rt-btn::after { content: "\2192"; } .wf-btn:hover, .rt-btn:hover { background: #ff97c7; color: #0a0f1e; transform: translateX(3px); } .wf-pose { position: absolute; right: 0; bottom: -10px; width: 38%; max-width: 260px; height: auto; filter: drop-shadow(0 12px 16px rgba(10,15,30,.18)); } .wf-link { margin: 14px 0 0; } .wf-link a { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: #e0468e; text-decoration: none; border-bottom: 2px solid #ff7cb9; padding-bottom: 2px; } .wf-link a::after { content: " \2192"; } .wf-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 34px 0 0; padding: 0; list-style: none; } .wf-steps::before { content: ""; position: absolute; left: 26px; right: 12%; top: 26px; border-top: 2px dashed #f3a9cc; } .wf-step { position: relative; padding: 0 14px 0 0; display: flex; flex-direction: column; gap: 4px; opacity: .45; transition: opacity .3s, transform .3s; } .wf-step + .wf-step { padding-left: 14px; border-left: 1px solid #e6e2db; } .wf-step.is-focus { opacity: 1; transform: translateY(-4px); } .wf-ico { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 10px; border-radius: 50%; background: #f8f7f3; border: 2px solid #f3a9cc; color: #e0468e; transition: background-color .3s, border-color .3s, color .3s, box-shadow .3s; } .wf-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .wf-step.is-focus .wf-ico { background: #ff7cb9; border-color: #ff7cb9; color: #0a0f1e; box-shadow: 0 0 0 6px rgba(255,124,185,.22); } .wf-num { font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #8a8e9b; } .wf-step strong { font-family: var(--font-head); font-size: 17px; font-weight: 800; letter-spacing: -0.02em; } .wf-desc { font-size: 14px; line-height: 1.5; color: #3d4254; } .wf-tag { align-self: flex-start; margin-top: 8px; padding: 3px 9px; border-radius: 999px; background: #0a0f1e; color: #ff7cb9; font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; visibility: hidden; } .wf-step.is-focus .wf-tag { visibility: visible; } .wf-focus { margin: 26px 0 0; padding: 14px 18px; border-radius: 10px; background: #fde4ef; font-size: 15px; line-height: 1.55; color: #0a0f1e; } .wf-focus.is-swap { animation: wf-in .45s cubic-bezier(.2,.8,.2,1) both; } .rt-inner { border-top: 1px solid #e3dfd8; padding-top: 72px; } .rt-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 40px; } .rt-head .wf-eyebrow, .rt-head .wf-h2, .rt-head .wf-sub { grid-column: 1; } .rt-switch { grid-column: 2; grid-row: 1 / span 3; margin: 0; align-self: end; } .rt-body { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 28px; align-items: end; margin-top: 34px; } .rt-table { display: grid; grid-template-columns: 1fr; border-radius: 16px; background: #ffffff; box-shadow: 0 18px 50px rgba(10,15,30,.08); overflow: hidden; } .rt-row { display: grid; grid-template-columns: 180px repeat(3, minmax(0, 1fr)); } .rt-row + .rt-row .rt-cell, .rt-row + .rt-row .rt-label { border-top: 1px solid #eeeae4; } .rt-label { padding: 15px 20px; background: #f3f1ec; font-family: var(--font-head); font-size: 14px; font-weight: 700; color: #3d4254; } .rt-cell { padding: 15px 20px; font-size: 15px; line-height: 1.45; color: #3d4254; transition: background-color .3s, color .3s, opacity .3s; } .rt-row--head .rt-cell { font-family: var(--font-head); font-size: 16px; font-weight: 800; color: #0a0f1e; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .rt-row--head .rt-cell em { font-style: normal; padding: 3px 8px; border-radius: 999px; background: #0a0f1e; color: #ff7cb9; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; } .rt-cell.is-on { background: #fff0f7; color: #0a0f1e; box-shadow: inset 2px 0 0 #ff7cb9, inset -2px 0 0 #ff7cb9; } .rt-row--head .rt-cell.is-on { background: #ff7cb9; box-shadow: none; } .rt-row--cta .rt-cell.is-on { box-shadow: inset 2px 0 0 #ff7cb9, inset -2px 0 0 #ff7cb9, inset 0 -2px 0 #ff7cb9; } .rt-table.has-pick .rt-cell:not(.is-on):not(.rt-label) { opacity: .55; } .rt-row--cta .rt-btn { margin-top: 0; background: #f3f1ec; } .rt-row--cta .rt-cell.is-on .rt-btn { background: #ff7cb9; } .rt-row--cta .rt-label { background: #f3f1ec; } .rt-help { position: relative; display: block; text-decoration: none; color: #0a0f1e; padding-top: 70px; } .rt-note { position: absolute; top: 0; left: 40px; font-family: var(--font-hand, "Caveat", cursive); font-size: 26px; line-height: 1.05; transform: rotate(-6deg); color: #0a0f1e; } .rt-arrow { position: absolute; top: 40px; left: -6px; width: 90px; fill: none; stroke: #ff7cb9; stroke-width: 3; stroke-linecap: round; } .rt-help img { display: block; width: 100%; height: auto; transition: transform .3s; } .rt-help:hover img { transform: translateY(-4px) rotate(-2deg); } .vs-section { position: relative; overflow: hidden; background: #0a0f1e; color: #ffffff; padding: 88px 0 80px; } .vs-section::after { content: ""; position: absolute; right: 0; bottom: 0; width: 440px; height: 440px; background: url("/wp-content/uploads/2026/10/mostadon-vs-ridge.webp") right bottom / cover no-repeat; opacity: .75; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 60%, #000 45%, transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 70% 60%, #000 45%, transparent 75%); } .vs-inner { position: relative; z-index: 1; } .vs-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; } .vs-section .wf-eyebrow { color: #ff7cb9; } .vs-switch { margin: 0; padding: 5px; border-radius: 999px; background: #151c30; border: 1px solid #283048; gap: 4px; } .vs-opt { border: 0; background: transparent; color: #c8ccd8; } .vs-opt:hover { color: #ffffff; } .vs-opt.is-on { background: #ff7cb9; color: #0a0f1e; box-shadow: 0 8px 20px rgba(255,92,166,.3); } .vs-compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 22px; margin-top: 40px; max-width: 980px; } .vs-card { padding: 28px 30px; border-radius: 16px; background: #121a2c; border: 1px solid #283048; } .vs-card--me { border-color: #ff7cb9; box-shadow: 0 0 0 1px rgba(255,124,185,.25), 0 20px 50px rgba(255,92,166,.12); } .vs-vs { align-self: center; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #ff7cb9; color: #0a0f1e; font-family: var(--font-head); font-weight: 800; font-size: 15px; } .vs-name { margin: 0 0 16px; font-family: var(--font-head); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; } .vs-logo { letter-spacing: .02em; color: #ff7cb9; } .vs-logo span:last-child { color: #faf9f5; } .vs-o { display: inline-block; width: .74em; height: .74em; margin: 0 .04em; border-radius: 50%; background: #ff7cb9; vertical-align: -.02em; } .vs-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; } .vs-list li { position: relative; padding-left: 32px; font-size: 16px; line-height: 1.45; color: #e6e8ef; } .vs-list li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; } .vs-list--yes li::before { background: #ff7cb9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0f1e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; } .vs-list--no li { color: #b9bdcb; } .vs-list--no li::before { border: 1.5px solid #4a5270; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a90a6' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center / 14px no-repeat; } .vs-card--other.is-swap .vs-name, .vs-card--other.is-swap li, .vs-verdict.is-swap { animation: wf-in .4s cubic-bezier(.2,.8,.2,1) both; } .vs-card--other.is-swap li:nth-child(2) { animation-delay: .04s; } .vs-card--other.is-swap li:nth-child(3) { animation-delay: .08s; } .vs-card--other.is-swap li:nth-child(4) { animation-delay: .12s; } .vs-verdict { margin: 26px 0 0; max-width: 980px; font-family: var(--font-head); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.4; color: #ffffff; } .vs-cred { margin: 30px 0 0; padding-top: 26px; border-top: 1px solid #283048; max-width: 980px; font-size: 15.5px; line-height: 1.6; color: #b9bdcb; } .vs-cred strong { color: #ffffff; } .vs-cred mark { background: none; color: #ff7cb9; font-weight: 700; } @media (max-width: 1100px) { .wf-inner { grid-template-columns: 1fr; } .wf-audience { padding-right: 0; } .wf-process { padding-left: 0; border-left: 0; margin-top: 56px; padding-top: 48px; border-top: 1px solid #dedad3; } .rt-head { grid-template-columns: 1fr; } .rt-switch { grid-column: 1; grid-row: auto; margin-top: 22px; } .rt-body { grid-template-columns: 1fr; } .rt-help { display: none; } } @media (max-width: 760px) { .wf-section { padding: 56px 0 48px; } .wf-panel { padding-right: 0; padding-bottom: 170px; min-height: 0; } .wf-pose { width: 210px; right: 50%; transform: translateX(50%); bottom: 0; } .wf-panel.is-swap .wf-pose { animation: none; } .wf-steps { grid-template-columns: 1fr 1fr; row-gap: 26px; } .wf-steps::before { display: none; } .wf-step:nth-child(3) { padding-left: 0; border-left: 0; } .rt-section { padding-bottom: 64px; } .rt-inner { padding-top: 48px; } .rt-row { grid-template-columns: 120px minmax(0, 1fr); } .rt-row .rt-cell:not(.is-on) { display: none; } .rt-table.has-pick .rt-cell { opacity: 1 !important; } .rt-label { padding: 13px 14px; font-size: 13px; } .rt-cell { padding: 13px 14px; } .vs-section { padding: 56px 0 64px; } .vs-switch { width: 100%; justify-content: space-between; } .vs-opt { flex: 1; padding: 11px 8px; font-size: 14px; } .vs-compare { grid-template-columns: 1fr; } .vs-vs { justify-self: center; } .vs-section::after { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .wf-section *, .rt-section *, .vs-section * { animation: none !important; transition: none !important; } } .wf-pose { width: 44%; max-width: 300px; } .rt-arrow { top: 64px; } .rt-help { padding-top: 92px; } /* MST get in touch journey */ .jy-section { position: relative; overflow: hidden; background: #fdeef5; color: #0a0f1e; padding: 88px 0 80px; } .jy-inner { max-width: 1264px; margin: 0 auto; padding: 0 var(--gutter, 32px); box-sizing: border-box; } .jy-section .wf-h2 mark { background: none; color: #e0468e; } .jy-track { position: relative; margin-top: 56px; padding-top: 0; } .jy-line { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 80px; overflow: visible; pointer-events: none; } .jy-line path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; } .jy-path-bg { stroke: rgba(255,124,185,.25); stroke-width: 2; stroke-dasharray: 2 8; } .jy-path { stroke: #ff5aa8; stroke-width: 3.5; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--p, 0)); filter: drop-shadow(0 2px 6px rgba(255,90,168,.35)); } .jy-walker { position: absolute; top: -34px; left: 0; width: 98px; height: auto; z-index: 2; pointer-events: none; transform: translateX(-50%); transition: left .25s linear; filter: drop-shadow(0 6px 8px rgba(10,15,30,.18)); } .jy-walker.is-walking { animation: jy-bob .5s ease-in-out infinite; } @keyframes jy-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -3px; } } .jy-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; } .jy-step { position: relative; padding-top: 68px; opacity: .28; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; } .jy-step.is-on { opacity: 1; transform: none; } .jy-dot { position: absolute; left: 14px; top: 24px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #ffffff; border: 2px solid #ff7cb9; color: #e0468e; font-family: var(--font-head); font-size: 14px; font-weight: 800; transition: background-color .35s, color .35s, box-shadow .35s; } .jy-step.is-on .jy-dot { background: #ff5aa8; border-color: #ff5aa8; color: #ffffff; box-shadow: 0 0 0 6px rgba(255,90,168,.2); } .jy-num { display: block; font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #8a8e9b; } .jy-step h3 { margin: 4px 0 8px; font-family: var(--font-head); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; } .jy-step p { margin: 0; font-size: 15px; line-height: 1.55; color: #3d4254; } .jy-note { display: inline-block; margin-top: 14px; font-family: var(--font-hand, "Caveat", cursive); font-size: 21px; line-height: 1.1; color: #e0468e; transform: rotate(-4deg) translateY(6px); transform-origin: left center; opacity: 0; transition: opacity .45s ease .25s, transform .45s ease .25s; } .jy-note::before { content: "\21AA"; display: inline-block; margin-right: 6px; font-family: var(--font-body); font-size: 16px; transform: rotate(-20deg); } .jy-step.is-on .jy-note { opacity: 1; transform: rotate(-4deg); } .jy-cta { margin: 44px 0 0; } .jy-cta .wf-btn { background: #0a0f1e; color: #ffffff; } .jy-cta .wf-btn:hover { background: #1c2440; color: #ffffff; } @media (max-width: 900px) { .jy-section { padding: 56px 0 56px; } .jy-line, .jy-walker { display: none; } .jy-track { margin-top: 32px; } .jy-steps { grid-template-columns: 1fr; gap: 26px; padding-left: 48px; } .jy-steps::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: rgba(255,124,185,.25); } .jy-steps::after { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: #ff5aa8; transform-origin: top; transform: scaleY(var(--p, 0)); } .jy-step { padding-top: 0; } .jy-dot { left: -48px; top: 0; } } @media (prefers-reduced-motion: reduce) { .jy-step, .jy-note, .jy-walker, .jy-dot { transition: none !important; animation: none !important; } } /* MST get in touch journey b: dots above the mobile line */ .jy-dot { z-index: 2; } @media (max-width: 900px) { .jy-steps::before, .jy-steps::after { z-index: 0; } .jy-step { z-index: 1; } } /* MST get in touch journey c: walker grows */ .jy-walker { transform-origin: 50% 100%; transition: left .25s linear, transform .25s linear; } /* MST gt journey v1 */ .gt-section { position: relative; overflow: hidden; color: #0a0f1e; padding: 92px 0 84px; background: radial-gradient(1200px 500px at 15% 0%, #fff6fa 0%, rgba(255,246,250,0) 60%), radial-gradient(900px 500px at 100% 100%, #fbe3ee 0%, rgba(251,227,238,0) 70%), #fdeff5; } .gt-inner { position: relative; max-width: 1264px; margin: 0 auto; padding: 0 var(--gutter, 32px); box-sizing: border-box; } .gt-section .wf-eyebrow { letter-spacing: .26em; } .gt-section .gt-h2 { font-size: clamp(34px, 4.1vw, 60px); letter-spacing: -0.045em; line-height: 1.02; } .gt-section .gt-h2 mark { background: none; color: #ff3d9a; } .gt-intro { max-width: 720px; margin: 14px 0 0; font-size: 18px; line-height: 1.55; color: #3d4254; } .gt-track { position: relative; height: 132px; margin: 6px calc(var(--gutter, 32px) * -1) 0; } .gt-track > svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; } .gt-hills { width: 34%; height: 110px; left: auto !important; right: -2%; top: 4px !important; } .gt-line path { fill: none; stroke-linecap: round; } .gt-path-bg { stroke: #f39cc4; stroke-width: 2; stroke-dasharray: 5 7; opacity: .75; } .gt-path { stroke: #ff3d9a; stroke-width: 3.5; filter: drop-shadow(0 3px 6px rgba(255,61,154,.25)); } .gt-dot { position: absolute; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; box-sizing: border-box; font-family: var(--font-head); font-size: 17px; font-weight: 800; background: #ffffff; border: 2px solid #f6b9d4; color: #f6a6ca; box-shadow: 0 0 0 7px rgba(255,255,255,.55); transition: background-color .4s, color .4s, border-color .4s, box-shadow .4s; } .gt-dot.is-on { background: #ff3d9a; border-color: #ff3d9a; color: #ffffff; box-shadow: 0 0 0 7px rgba(255,61,154,.16), 0 6px 14px rgba(255,61,154,.3); } .gt-spark { position: absolute; z-index: 2; width: 34px; height: 22px; margin: -50px 0 0 -17px; transition: opacity .4s; } .gt-spark.is-off { opacity: 0; } .gt-deco { position: absolute; z-index: 1; pointer-events: none; transform: translate(-50%, -100%); } .gt-walker { position: absolute; z-index: 3; left: 0; top: 0; width: 158px; height: 112px; margin: -104px 0 0 -96px; pointer-events: none; transform-origin: 60% 100%; will-change: transform, left, top; } .gt-walker img { position: relative; z-index: 2; display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 8px rgba(10,15,30,.18)); } .gt-streak { position: absolute; z-index: 1; left: -56px; top: 18px; width: 128px; height: 66px; border-radius: 50%; background: repeating-linear-gradient(176deg, rgba(255,61,154,.85) 0 2px, rgba(255,61,154,0) 2px 6px); -webkit-mask: linear-gradient(90deg, transparent 0%, #000 70%, transparent 100%); mask: linear-gradient(90deg, transparent 0%, #000 70%, transparent 100%); filter: blur(.4px); transform: skewX(-18deg) rotate(-8deg); opacity: .55; transition: opacity .3s; } .gt-walker.is-walking .gt-streak { opacity: .95; } .gt-dust { position: absolute; z-index: 1; left: 18px; bottom: 2px; width: 70px; height: 10px; border-radius: 50%; background: radial-gradient(closest-side, rgba(190,160,185,.55), rgba(190,160,185,0)); opacity: .6; } .gt-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin: 0; padding: 0; list-style: none; } .gt-step { position: relative; display: flex; flex-direction: column; min-height: 268px; padding: 30px 34px 34px; box-sizing: border-box; border-radius: 18px; border: 1.5px dashed #f2c3d8; background: rgba(255,255,255,.28); transition: background-color .5s, border-color .5s, box-shadow .5s, transform .5s; } .gt-step > * { transition: opacity .5s; opacity: .5; } .gt-step.is-on { border: 1.5px solid #ffffff; background: #ffffff; box-shadow: 0 22px 48px rgba(224,70,142,.08), 0 2px 6px rgba(10,15,30,.03); } .gt-step.is-on > * { opacity: 1; } .gt-num { font-family: var(--font-head); font-size: 15px; font-weight: 700; letter-spacing: .04em; color: #6b7080; } .gt-icon { position: absolute; right: 24px; top: 22px; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: #fdeaf3; color: #ff3d9a; } .gt-icon svg { width: 38px; height: 38px; } .gt-step h3 { margin: 30px 0 10px; padding-right: 64px; font-family: var(--font-head); font-size: 22px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; } .gt-step p { margin: 0; font-size: 16px; line-height: 1.6; color: #3d4254; } .gt-step:not(.is-on) h3 { color: #6b7080; } .gt-note { position: relative; display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; padding-bottom: 10px; font-family: var(--font-hand); font-size: 19px; line-height: 1.2; color: #ff3d9a; transform: rotate(-3deg); transform-origin: left center; } .gt-note > svg:first-child { flex: none; width: 24px; height: 16px; margin-top: 6px; } .gt-swash { position: absolute; right: 0; bottom: -2px; width: 58%; height: 12px; overflow: visible; } .gt-cta { margin: 26px 0 0; } .gt-btn { display: inline-flex; align-items: center; gap: 14px; padding: 19px 34px; border-radius: 8px; background: #0a0f1e; color: #ffffff !important; font-family: var(--font-head); font-size: 17px; font-weight: 700; text-decoration: none; transition: background-color .2s, transform .2s; } .gt-btn::after { content: "\2192"; font-size: 20px; } .gt-btn:hover { background: #1c2440; transform: translateY(-1px); } @media (max-width: 1100px) { .gt-step { padding: 26px 22px 28px; } .gt-icon { width: 56px; height: 56px; right: 16px; top: 18px; } .gt-icon svg { width: 28px; height: 28px; } .gt-step h3 { font-size: 19px; padding-right: 46px; } .gt-step p { font-size: 15px; } .gt-note { font-size: 17px; } } @media (max-width: 900px) { .gt-section { padding: 60px 0 56px; } .gt-track { display: none; } .gt-steps { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; } .gt-step, .gt-step:not(.is-on) { min-height: 0; border: 1.5px solid #ffffff; background: #ffffff; box-shadow: 0 14px 32px rgba(224,70,142,.07); } .gt-step > *, .gt-step:not(.is-on) > * { opacity: 1; } .gt-step:not(.is-on) h3 { color: inherit; } .gt-step h3 { margin-top: 18px; } .gt-btn { width: 100%; justify-content: center; box-sizing: border-box; } } @media (prefers-reduced-motion: reduce) { .gt-step, .gt-step > *, .gt-dot, .gt-streak { transition: none !important; } } /* MST gt journey v1b */ .gt-section .gt-h2 { font-size: clamp(34px, 3.6vw, 54px); } .gt-intro { font-size: 17px; max-width: 700px; } .gt-steps { gap: 24px; } .gt-step { min-height: 0; padding: 26px 28px 30px; } .gt-icon { width: 64px; height: 64px; right: 20px; top: 18px; } .gt-icon svg { width: 32px; height: 32px; } .gt-step h3 { margin-top: 26px; padding-right: 40px; font-size: 21px; } .gt-step p { font-size: 15.5px; } .gt-note { font-size: 18px; } .gt-streak { left: -62px; top: 14px; width: 140px; height: 70px; border-radius: 60% 40% 40% 60%; background: repeating-linear-gradient(174deg, rgba(255,61,154,.9) 0 1.5px, rgba(255,61,154,0) 1.5px 4px, rgba(255,120,185,.6) 4px 5px, rgba(255,61,154,0) 5px 9px); filter: blur(.6px); } /* MST gt journey v1c */ .gt-walker { width: 178px; height: 124px; margin: -116px 0 0 -106px; } /* MST gt journey v1d */ .gt-walker { width: 196px; height: 108px; margin: -104px 0 0 -98px; } .gt-walker img { filter: none; } .gt-streak, .gt-dust { display: none; } /* MST gt journey v1e */ @media (min-width: 901px) { .gt-num { display: none; } .gt-step h3 { margin-top: 12px; padding-right: 76px; min-height: 52px; display: flex; align-items: center; } .gt-step { padding-top: 22px; } } /* MST gt journey v1f */ @media (min-width: 901px) { .gt-icon { width: 52px; height: 52px; right: 18px; top: 18px; } .gt-icon svg { width: 27px; height: 27px; } .gt-step h3 { padding-right: 52px; min-height: 48px; margin-top: 8px; font-size: 20px; } } /* MST wf mobile v1 */ @media (max-width: 900px) { .wf-section .wf-inner { display: flex; flex-direction: column; } .wf-section .wf-audience, .wf-section .wf-process, .wf-section .wf-panel, .wf-section .wf-copy { display: contents; } .wf-section .wf-process { border: 0; } .wf-audience > .wf-eyebrow { order: 1; } .wf-audience > .wf-h2 { order: 2; } .wf-audience > .wf-sub { order: 3; } .wf-section .wf-tabs { order: 4; flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin: 22px calc(var(--gutter, 20px) * -1) 0; padding: 4px var(--gutter, 20px) 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .wf-section .wf-tabs::-webkit-scrollbar { display: none; } .wf-section .wf-tab { flex: none; padding: 10px 16px; font-size: 14px; } .wf-section .wf-h3 { order: 5; margin-top: 18px; font-size: 22px; } .wf-section .wf-text { order: 6; } .wf-section .wf-pose { display: none; } .wf-process > .wf-eyebrow { order: 7; margin: 26px 0 6px; } .wf-process > .wf-h2 { order: 8; font-size: 20px; letter-spacing: -0.02em; } .wf-process > .wf-sub { display: none; } .wf-section .wf-steps { order: 9; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 16px 0 0; padding: 16px 6px 14px; border-radius: 14px; background: #ffffff; box-shadow: 0 10px 28px rgba(10,15,30,.06); } .wf-section .wf-steps::before { left: 12.5%; right: 12.5%; top: 37px; } .wf-section .wf-step, .wf-section .wf-step + .wf-step { padding: 0 2px; border: 0; align-items: center; text-align: center; gap: 0; transform: none; } .wf-section .wf-ico { width: 44px; height: 44px; margin: 0 auto 8px; background: #ffffff; } .wf-section .wf-ico svg { width: 20px; height: 20px; } .wf-section .wf-num, .wf-section .wf-desc { display: none; } .wf-section .wf-step strong { font-size: 13px; } .wf-section .wf-tag { align-self: center; margin-top: 6px; padding: 2px 7px; font-size: 9px; } .wf-section .wf-focus { order: 10; margin-top: 12px; font-size: 14.5px; } .wf-section .wf-btn { order: 11; align-self: flex-start; margin-top: 18px; } .wf-process > .wf-link { order: 12; margin-top: 16px; } } /* MST wf mobile v1b */ @media (max-width: 900px) { .wf-section .wf-tabs { flex-wrap: wrap; overflow: visible; margin: 22px 0 0; padding: 0; } .wf-section .wf-steps::before { z-index: 0; border-top-color: #f3a9cc; } .wf-section .wf-ico { z-index: 1; } } /* MST gt journey v1g */ .gt-swash { display: none; } .gt-note { padding-bottom: 0; } /* MST hs2 slider v1 */ .hs2 { --t: 0; --mx: 640px; --mr: 0deg; --ms: .7; position: relative; overflow: hidden; color: #0a0f1e; background: #f8f7f3; transition: background-color .3s, color .3s; isolation: isolate; } .hs2.is-dark { color: #ffffff; } .hs2-glow { position: absolute; right: -260px; top: 80px; width: 1200px; height: 1000px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,45,143,calc(.1 + .55 * var(--t))), rgba(255,45,143,0)); pointer-events: none; z-index: 0; } .hs2-tape { position: absolute; z-index: 4; left: -80px; right: -80px; top: 22px; height: 44px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; font-family: var(--font-head); font-size: 16px; font-weight: 800; letter-spacing: .2em; color: #0a0f1e; background: repeating-linear-gradient(-45deg, #ff4fa3 0 20px, #ff7cb9 20px 40px); transform: rotate(-2deg); opacity: 0; transition: opacity .3s; animation: hs2-tape 1s linear infinite; pointer-events: none; } .hs2.is-loud .hs2-tape { opacity: 1; } @keyframes hs2-tape { from { background-position: 0 0; } to { background-position: 80px 0; } } .hs2-beast { position: absolute; z-index: 1; right: -40px; bottom: 210px; width: 640px; transform: translateX(var(--mx)) rotate(var(--mr)); transition: transform .4s cubic-bezier(.2,.9,.25,1.15); pointer-events: none; } .hs2.is-charge .hs2-beast-shake { animation: hs2-quake .25s linear infinite; } .hs2-beast img { display: block; width: 100%; height: auto; transform-origin: 80% 100%; transform: scale(var(--ms)); filter: drop-shadow(-30px 30px 40px rgba(0,0,0,calc(.2 + .4 * var(--t)))); transition: transform .3s; } @keyframes hs2-quake { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-6px,2px); } 50% { transform: translate(5px,-3px); } 75% { transform: translate(-3px,3px); } } .hs2-inner { position: relative; z-index: 2; max-width: 1264px; min-height: 880px; margin: 0 auto; padding: 104px var(--gutter, 32px) 40px; box-sizing: border-box; display: flex; flex-direction: column; } .hs2-intro { margin: 0; max-width: 620px; font-family: var(--font-head); font-size: 17px; font-weight: 700; line-height: 1.45; color: #c2407e; } .hs2-intro mark { background: none; color: inherit; font-weight: 800; } .hs2.is-dark .hs2-intro { color: #ff7cb9; } .hs2-readout { margin: 18px 0 0; display: flex; align-items: center; gap: 12px; font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #c2407e; } .hs2.is-dark .hs2-readout { color: #ff7cb9; } .hs2-num { padding: 5px 10px; border-radius: 999px; background: #0a0f1e; color: #ffffff; letter-spacing: .08em; } .hs2.is-dark .hs2-num { background: #ff4fa3; color: #0a0f1e; } .hs2-stage { position: relative; max-width: 700px; min-height: 380px; margin-top: 18px; } .hs2-level { display: none; flex-direction: column; gap: 18px; } .hs2-level.is-current { display: flex; animation: hs2-in .35s cubic-bezier(.2,.8,.2,1) both; } @keyframes hs2-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .hs2-lead { margin: 0; font-family: var(--font-head); font-size: 30px; font-weight: 500; letter-spacing: -0.04em; line-height: 1.02; transform-origin: left center; } .hs2-lead em { font-style: normal; color: #e0468e; } .hs2.is-dark .hs2-lead em { color: #ff7cb9; } .hs2-level[data-l="2"] .hs2-lead { font-size: 34px; } .hs2-level[data-l="3"] .hs2-lead { font-size: 38px; font-weight: 700; } .hs2-level[data-l="4"] .hs2-lead { font-size: 44px; font-weight: 700; } .hs2-level[data-l="5"] .hs2-lead { font-size: 50px; font-weight: 700; } .hs2-level[data-l="6"] .hs2-lead { font-size: 52px; font-weight: 800; } .hs2-level[data-l="7"] .hs2-lead { font-size: 58px; font-weight: 800; text-shadow: 2px 2px 0 #ff4fa3; } .hs2-level[data-l="8"] .hs2-lead { font-size: 62px; font-weight: 800; text-shadow: 4px 4px 0 #ff4fa3; } .hs2-level[data-l="9"] .hs2-lead { font-size: 60px; font-weight: 800; letter-spacing: -0.03em; text-shadow: 6px 6px 0 #ff4fa3; transform: rotate(-2deg); } .hs2-level[data-l="10"] .hs2-lead { font-size: 72px; font-weight: 800; letter-spacing: -0.03em; text-shadow: 8px 8px 0 #ff4fa3; transform: rotate(-3deg); } .hs2-level[data-l="7"] .hs2-lead em { text-shadow: 2px 2px 0 #ffffff; } .hs2-text { margin: 0; font-size: 18px; line-height: 1.55; color: #3d4254; } .hs2.is-dark .hs2-text { color: rgba(255,255,255,.78); } .hs2-text strong { font-weight: 800; color: #0a0f1e; } .hs2.is-dark .hs2-text strong { color: #ffffff; } .hs2-text em { font-style: normal; font-weight: 800; color: #e0468e; } .hs2.is-dark .hs2-text em { color: #ff7cb9; } .hs2-level[data-l="9"] .hs2-text, .hs2-level[data-l="10"] .hs2-text { font-weight: 700; } .hs2-link { align-self: flex-start; font-family: var(--font-head); font-size: 16px; font-weight: 600; color: inherit !important; text-decoration: none; border-bottom: 2px solid #ff7cb9; padding-bottom: 2px; } .hs2-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .hs2-pills a { display: inline-flex; padding: 9px 15px; border-radius: 999px; background: #0a0f1e; color: #ffffff !important; font-family: var(--font-head); font-size: 14px; font-weight: 700; text-decoration: none; transition: transform .15s, background-color .15s; } .hs2.is-dark .hs2-pills a { background: #ffffff; color: #0a0f1e !important; } .hs2-pills a:hover { transform: translateY(-2px); background: #ff4fa3 !important; color: #0a0f1e !important; } .hs2-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 10px; background: #ff4fa3; color: #0a0f1e !important; font-family: var(--font-head); font-size: 16px; font-weight: 800; text-decoration: none; box-shadow: 6px 6px 0 #0a0f1e; transition: transform .15s; } .hs2.is-dark .hs2-cta { box-shadow: 6px 6px 0 #ffffff; } .hs2-cta:hover { transform: translate(-2px,-2px); } .hs2-level[data-l="10"] .hs2-cta { padding: 20px 36px; font-size: 21px; } .hs2-logo { display: inline-flex; align-items: baseline; text-transform: uppercase; letter-spacing: -0.02em; } .hs2-logo b { color: #ff7cb9; text-shadow: 6px 6px 0 #ffffff; font-weight: inherit; } .hs2-logo i { display: inline-block; width: .74em; height: .74em; margin: 0 .03em; border-radius: 50%; background: #ff4fa3; box-shadow: 6px 6px 0 #ffffff; align-self: center; } .hs2-finale { position: absolute; z-index: 3; right: max(110px, calc((100vw - 1264px) / 2 + 32px)); top: 300px; display: none; flex-direction: column; align-items: flex-end; gap: 30px; } .hs2.is-charge .hs2-finale { display: flex; } .hs2-stamp { padding: 12px 28px; border: 6px solid #0a0f1e; border-radius: 14px; background: #ffffff; color: #0a0f1e; font-family: var(--font-head); font-size: 72px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; box-shadow: 10px 10px 0 #ff4fa3; animation: hs2-stamp .5s cubic-bezier(.2,.9,.25,1.2) both; } @keyframes hs2-stamp { 0% { transform: scale(2.6) rotate(-16deg); opacity: 0; } 60% { transform: scale(.9) rotate(-7deg); opacity: 1; } 100% { transform: scale(1) rotate(-7deg); opacity: 1; } } .hs2-phone { font-family: var(--font-head); font-size: 66px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: #ff4fa3 !important; text-shadow: 5px 5px 0 #ffffff; text-decoration: none; white-space: nowrap; animation: hs2-pop .5s .5s cubic-bezier(.2,.9,.25,1.3) both; } @keyframes hs2-pop { 0% { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .hs2-slider { position: relative; margin-top: auto; padding-top: 24px; height: 200px; } .hs2-ends { display: flex; justify-content: space-between; align-items: baseline; } .hs2-soft, .hs2-hard { font-family: var(--font-head); font-size: 22px; font-weight: 700; font-style: italic; opacity: .75; } .hs2-hard { font-weight: 800; opacity: 1; color: #ff4fa3; font-size: calc(22px + 14px * var(--t)); } .hs2.is-loud .hs2-hard { text-transform: uppercase; } .hs2-track { position: absolute; left: 0; right: 0; top: 108px; height: 22px; border-radius: 999px; background: rgba(10,15,30,.1); } .hs2.is-dark .hs2-track { background: rgba(255,255,255,.14); } .hs2-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--t) * 100%); border-radius: 999px; background: linear-gradient(90deg, #ffb3d4, #ff4fa3 70%, #e0207a); box-shadow: 0 0 calc(10px + 30px * var(--t)) rgba(255,79,163,calc(.2 + .5 * var(--t))); } .hs2-dots { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; } .hs2-dots li { position: absolute; top: 5px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: rgba(10,15,30,.22); } .hs2.is-dark .hs2-dots li { background: rgba(255,255,255,.3); } .hs2-dots li.is-on { background: #ffffff; } .hs2-ring { position: absolute; top: 11px; left: calc(var(--t) * 100%); width: 150px; height: 150px; border-radius: 50%; border: 3px solid #ff4fa3; pointer-events: none; animation: hs2-ring var(--rs, 1.7s) ease-out infinite; } .hs2-ring--2 { animation-delay: calc(var(--rs, 1.7s) / 2); } @keyframes hs2-ring { 0% { transform: translate(-50%,-50%) scale(.6); opacity: .75; } 100% { transform: translate(-50%,-50%) scale(1.9); opacity: 0; } } .hs2-knob { position: absolute; z-index: 2; top: 11px; left: calc(var(--t) * 100%); width: calc(110px + 30px * var(--t)); height: auto; transform: translate(-50%,-56%) rotate(calc(-8deg + 16deg * var(--t))); filter: drop-shadow(0 10px 14px rgba(10,15,30,.35)); pointer-events: none; } .hs2:not(.has-moved) .hs2-knob { animation: hs2-nudge 2.4s ease-in-out infinite; } @keyframes hs2-nudge { 0%,60%,100% { margin-left: 0; } 70% { margin-left: 14px; } 80% { margin-left: 0; } 88% { margin-left: 8px; } } .hs2-names { position: absolute; left: 0; right: 0; top: 152px; margin: 0; padding: 0; list-style: none; } .hs2-names li { position: absolute; width: 116px; margin-left: -58px; text-align: center; font-family: var(--font-head); font-size: 12px; font-weight: 800; letter-spacing: -0.01em; color: rgba(10,15,30,.3); transition: color .2s; } .hs2.is-dark .hs2-names li { color: rgba(255,255,255,.3); } .hs2-names li.is-on { color: #3d4254; } .hs2.is-dark .hs2-names li.is-on { color: rgba(255,255,255,.75); } .hs2-names li.is-current { color: #ff4fa3 !important; font-size: 14px; } .hs2-names li:nth-child(n+9) { text-transform: uppercase; } .hs2-range { position: absolute; left: -65px; top: 54px; width: calc(100% + 130px); height: 130px; margin: 0; opacity: 0; cursor: grab; z-index: 5; -webkit-appearance: none; appearance: none; background: transparent; } .hs2-range:active { cursor: grabbing; } .hs2-range::-webkit-slider-thumb { -webkit-appearance: none; width: 130px; height: 130px; } .hs2-range::-moz-range-thumb { width: 130px; height: 130px; border: 0; } .hs2-range:focus-visible + .hs2-focus { opacity: 1; } .hs2-focus { position: absolute; top: 108px; left: calc(var(--t) * 100%); width: 150px; height: 150px; margin: -64px 0 0 -75px; border-radius: 50%; outline: 3px solid #0a0f1e; outline-offset: 2px; opacity: 0; pointer-events: none; } .hs2.is-dark .hs2-focus { outline-color: #ffffff; } @media (max-width: 1100px) { .hs2-finale { right: 40px; } .hs2-stamp { font-size: 56px; } .hs2-phone { font-size: 52px; } } @media (max-width: 900px) { .hs2-inner { min-height: 0; padding: 92px 20px 28px; } .hs2-beast { width: 340px; right: -90px; bottom: 260px; opacity: .55; } .hs2.is-charge .hs2-beast { opacity: .9; } .hs2-stage { min-height: 300px; } .hs2-lead { font-size: 26px !important; } .hs2-level[data-l="5"] .hs2-lead, .hs2-level[data-l="6"] .hs2-lead { font-size: 30px !important; } .hs2-level[data-l="7"] .hs2-lead, .hs2-level[data-l="8"] .hs2-lead, .hs2-level[data-l="9"] .hs2-lead { font-size: 34px !important; } .hs2-level[data-l="10"] .hs2-lead { font-size: 38px !important; } .hs2-text { font-size: 16px; } .hs2-finale { position: relative; right: auto; top: auto; align-items: flex-start; gap: 18px; margin-top: 24px; } .hs2-stamp { font-size: 40px; padding: 8px 18px; border-width: 4px; box-shadow: 6px 6px 0 #ff4fa3; } .hs2-phone { font-size: 38px; } .hs2-soft, .hs2-hard { font-size: 17px; } .hs2-hard { font-size: calc(17px + 6px * var(--t)); } .hs2-names li { display: none; } .hs2-names li.is-current { display: block; width: 160px; margin-left: -80px; } .hs2-names li.is-current:first-child { margin-left: -20px; text-align: left; } .hs2-names li.is-current:last-child { margin-left: -140px; text-align: right; } .hs2-knob { width: calc(84px + 16px * var(--t)); } .hs2-ring { width: 110px; height: 110px; } .hs2-range { left: -40px; width: calc(100% + 80px); } } @media (prefers-reduced-motion: reduce) { .hs2-tape, .hs2-ring, .hs2.is-charge .hs2-beast-shake, .hs2-knob { animation: none !important; } .hs2-level.is-current, .hs2-stamp, .hs2-phone { animation: none; } } /* MST hs2 slider v1b */ .hs2-finale { right: 32px; top: 300px; } @media (max-width: 1100px) { .hs2-finale { right: 24px; } } @media (max-width: 900px) { .hs2-finale { right: auto; top: auto; } .hs2-beast { opacity: .4; } .hs2.is-charge .hs2-beast { opacity: .5; } .hs2-level[data-l="7"] .hs2-lead { text-shadow: 1px 1px 0 #ff4fa3; } .hs2-level[data-l="8"] .hs2-lead { text-shadow: 2px 2px 0 #ff4fa3; } .hs2-level[data-l="9"] .hs2-lead { text-shadow: 3px 3px 0 #ff4fa3; } .hs2-level[data-l="10"] .hs2-lead { text-shadow: 4px 4px 0 #ff4fa3; } .hs2-logo b { text-shadow: 3px 3px 0 #ffffff; } .hs2-logo i { box-shadow: 3px 3px 0 #ffffff; } .hs2-phone { text-shadow: 3px 3px 0 #ffffff; } .hs2-stage { min-height: 0; } } /* MST hs2 slider v2 */ @media (min-width: 901px) { .hs2-inner, .hs2-beast, .hs2-tape, .hs2-rocks { zoom: .9; } .hs2-inner { min-height: 880px; } } .hs2-rocks { position: absolute; z-index: 1; right: 0; top: 0; bottom: 0; width: 55%; pointer-events: none; overflow: hidden; } .hs2-rock { position: absolute; display: block; background: linear-gradient(135deg, #3a2f3c, #14111a 70%); box-shadow: inset 2px 2px 0 rgba(255,124,185,.55), 0 0 12px rgba(255,79,163,.35); clip-path: polygon(20% 0, 80% 8%, 100% 45%, 82% 92%, 30% 100%, 0 60%); opacity: 0; transition: opacity .4s; animation: hs2-fly var(--d, 3s) var(--dl, 0s) linear infinite; animation-play-state: paused; } .hs2-rock.is-on { opacity: 1; animation-play-state: running; } .hs2-rock.is-dust { background: #ff4fa3; box-shadow: 0 0 8px rgba(255,79,163,.8); clip-path: none; border-radius: 50%; } @keyframes hs2-fly { 0% { transform: translate(0,0) rotate(0); } 100% { transform: translate(var(--tx, -420px), var(--ty, -160px)) rotate(var(--rot, -320deg)); } } @media (max-width: 900px) { .hs2-level[data-l="10"] .hs2-cta { display: none; } .hs2-beast { width: 300px; right: -110px; bottom: 120px; opacity: .3 !important; } .hs2-rocks { width: 100%; opacity: .6; } .hs2-finale { margin-top: 8px; } .hs2-stamp { transform-origin: left center; } } @media (prefers-reduced-motion: reduce) { .hs2-rock { animation: none !important; } } /* MST hs2 slider v2b mobile finale */ @media (max-width: 900px) { .hs2 .hs2-finale { margin-top: 18px; gap: 14px; align-items: flex-start; } .hs2 .hs2-stamp { font-size: 34px; padding: 8px 18px; border-width: 4px; transform: rotate(-3deg); animation: none; box-shadow: 5px 5px 0 #ff4fa3; } .hs2 .hs2-phone { display: inline-flex; padding: 14px 22px; border-radius: 10px; background: #ff4fa3; color: #0a0f1e !important; font-size: 30px; letter-spacing: -0.02em; text-shadow: none; box-shadow: 5px 5px 0 #ffffff; animation: none; } } /* MST hs2 slider v3 */ .hs2 .hs2-intro { max-width: 1120px; font-size: 17px; } .hs2 .hs2-inner { padding-top: 94px; } .hs2 .hs2-rock:not(.is-dust) { clip-path: none; box-shadow: none; background: url("/wp-content/uploads/2026/10/mostadon-slider-rocks-v3.webp") 0 0 / 600% 100% no-repeat; height: auto !important; aspect-ratio: 1; filter: drop-shadow(0 0 6px rgba(255,79,163,.45)) drop-shadow(-6px 4px 6px rgba(0,0,0,.35)); animation-name: hs2-fly2; animation-timing-function: cubic-bezier(.25,.5,.5,1); } .hs2 .hs2-rock:not(.is-dust):nth-child(6n+2) { background-position: 20% 0; } .hs2 .hs2-rock:not(.is-dust):nth-child(6n+3) { background-position: 40% 0; } .hs2 .hs2-rock:not(.is-dust):nth-child(6n+4) { background-position: 60% 0; } .hs2 .hs2-rock:not(.is-dust):nth-child(6n+5) { background-position: 80% 0; } .hs2 .hs2-rock:not(.is-dust):nth-child(6n) { background-position: 100% 0; } .hs2 .hs2-rock.is-dust { background: radial-gradient(circle, rgba(255,150,200,.95) 0, rgba(255,79,163,.6) 45%, rgba(255,79,163,0) 72%); box-shadow: none; filter: blur(.6px); transform-origin: center; animation-name: hs2-dust2; animation-timing-function: ease-out; } @keyframes hs2-fly2 { 0% { transform: translate(0,0) rotate(0) scale(.5); opacity: 0; } 10% { opacity: 1; } 55% { transform: translate(calc(var(--tx, -420px) * .6), calc(var(--ty, -160px) - 70px)) rotate(calc(var(--rot, -320deg) * .55)) scale(1); } 90% { opacity: 1; } 100% { transform: translate(var(--tx, -420px), calc(var(--ty, -160px) + 90px)) rotate(var(--rot, -320deg)) scale(.9); opacity: 0; } } @keyframes hs2-dust2 { 0% { transform: translate(0,0) scale(.4); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(calc(var(--tx, -420px) * .5), calc(var(--ty, -160px) * .4 - 40px)) scale(2.2); opacity: 0; } } .hs2 .hs2-phone { display: inline-block; transform: rotate(-5deg); transform-origin: right center; } @keyframes hs2-pop { 0% { transform: rotate(-5deg) scale(.3); opacity: 0; } 70% { transform: rotate(-5deg) scale(1.12); opacity: 1; } 100% { transform: rotate(-5deg) scale(1); opacity: 1; } } @media (max-width: 900px) { .hs2 .hs2-phone { display: inline-flex; transform: rotate(-3deg); transform-origin: left center; } } /* MST hs2 slider v3b */ @media (min-width: 901px) { .hs2 .hs2-inner { max-width: 1404px; padding-left: calc(var(--gutter, 32px) / .9); padding-right: calc(var(--gutter, 32px) / .9); } } /* MST hs2 slider v3c */ .hs2 .hs2-rock:not(.is-on) { visibility: hidden; animation: none; } .hs2 .hs2-tape { top: -12px; height: 36px; transform: rotate(-1deg); font-size: 14px; } @media (min-width: 901px) { .hs2 .hs2-inner { padding-top: 56px; } } @media (max-width: 900px) { .hs2 .hs2-inner { padding-top: 48px; } } /* MST hs2 slider v3d */ .hs2:not(.is-dark) .hs2-intro { color: #0a0f1e; } /* MST hs2 slider v3e */ .hs2 .hs2-intro { font-weight: 400; } .hs2 .hs2-intro mark { font-weight: 800; } /* MST hs2 slider v3f */ @media (min-width: 901px) { .hs2:not(.is-loud) .hs2-inner { min-height: 0; } .hs2:not(.is-loud) .hs2-stage { min-height: 310px; } .hs2:not(.is-loud) .hs2-slider { margin-top: 36px; } } /* MST hs2 slider v3g */ @media (min-width: 901px) { .hs2-level[data-l="9"] .hs2-text { width: 1080px; max-width: calc(100vw / .9 - 120px); position: relative; z-index: 3; } } /* MST hs2 slider v3h */ .hs2 .hs2-readout { margin-top: 0; padding-top: 18px; border-top: 1px solid rgba(10,15,30,.1); } .hs2 .hs2-intro { padding-bottom: 18px; } .hs2.is-dark .hs2-readout { border-top-color: rgba(255,255,255,.14); } @media (min-width: 901px) { .hs2 .hs2-readout { max-width: 1120px; } } /* MST hs2 slider v3i */ @media (max-width: 900px) { .hs2-br { display: none; } } /* MST wf scenes v1 */ @media (min-width: 901px) { .wf-section .wf-panel { padding-right: 44%; } .wf-section .wf-pose { width: 48%; max-width: 330px; right: -16px; bottom: -24px; filter: none; } } /* MST routes help column v1 */ .rt-body { grid-template-columns: 1fr !important; } .rt-row { grid-template-columns: 180px repeat(4, minmax(0, 1fr)); } .rt-cell--help { background: #fdf3f8; color: #3d4254; border-left: 1px dashed #f3a9cc; } .rt-row--head .rt-cell--help { background: #0a0f1e; color: #ffffff; } .rt-table.has-pick .rt-cell--help { opacity: 1 !important; } .rt-btn--help { background: #0a0f1e !important; color: #ffffff !important; } .rt-btn--help:hover { background: #ff7cb9 !important; color: #0a0f1e !important; } .rt-help { display: none !important; } @media (max-width: 900px) { .rt-row { grid-template-columns: 120px minmax(0, 1fr); } .rt-row .rt-cell--help { display: none !important; } .rt-help { display: inline-flex !important; margin-top: 16px; padding: 0; font-family: var(--font-head); font-size: 15px; font-weight: 700; color: #e0468e; border-bottom: 2px solid #ff7cb9; padding-bottom: 2px; } .rt-help::after { content: " \2192"; } } /* MST gm anchor */ #gm-title { scroll-margin-top: 140px; } /* MST rt br */ @media (max-width: 900px) { .rt-br { display: none; } } /* MST tf head align */ .tf-section .tf-head { padding-left: max(var(--gutter, 32px), calc((100vw - 1264px) / 2 + 32px)); padding-right: max(var(--gutter, 32px), calc((100vw - 1264px) / 2 + 32px)); box-sizing: border-box; } @media (max-width: 900px) { .tf-section .tf-head { padding-left: 20px; padding-right: 20px; } } /* MST tf intro nudge */ @media (min-width: 901px) { .tf-section .tf-intro { padding-left: 24px; } } /* MST about hero v2 compact */ .ah2 { position: relative; overflow: hidden; background: #fcfcfb; color: #0a0f1e; } .ah2-art { position: absolute; inset: 0; background: url("/wp-content/uploads/2026/10/mostadon-about-hero-bg-v3.webp") no-repeat calc(50% - 379px) bottom / auto 112%; pointer-events: none; } .ah2-inner { position: relative; z-index: 1; max-width: 1264px; min-height: 660px; margin: 0 auto; padding: 64px var(--gutter, 32px) 150px; box-sizing: border-box; } .ah2-copy { max-width: 560px; display: flex; flex-direction: column; gap: 16px; } .ah2-eyebrow { margin: 0; font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #e0468e; } .ah2-h1 { margin: 0; font-family: var(--font-head); font-size: clamp(38px, 4vw, 56px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; color: #0a0f1e; } .ah2-h1 mark { background: none; color: #ff3d9a; white-space: nowrap; } .ah2-lead, .ah2-text { margin: 0; max-width: 520px; font-size: 17px; line-height: 1.6; color: #3d4254; } .ah2-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } .ah2-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 8px; background: #0a0f1e; color: #ffffff !important; font-family: var(--font-head); font-size: 15px; font-weight: 700; text-decoration: none; transition: transform .15s, background-color .15s; } .ah2-btn::after { content: "\2192"; } .ah2-btn--ghost { background: transparent; color: #0a0f1e !important; box-shadow: inset 0 0 0 1.5px #0a0f1e; } .ah2-btn--ghost::after { content: "\2193"; } .ah2-btn:hover { transform: translateY(-1px); background: #ff7cb9; color: #0a0f1e !important; box-shadow: none; } .ah2-creds { position: absolute; left: var(--gutter, 32px); right: var(--gutter, 32px); bottom: 34px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.35fr); border-radius: 16px; background: #ffffff; box-shadow: 0 18px 44px rgba(10,15,30,.08); overflow: hidden; } .ah2-cred { padding: 18px 22px; border-right: 1px solid #eeeae4; } .ah2-cred p { margin: 0; } .ah2-cred-t { font-family: var(--font-head); font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: #0a0f1e; } .ah2-cred-s { margin-top: 4px !important; font-size: 13px; line-height: 1.4; color: #6b7080; } .ah2-cred--stat { border-right: 0; background: #fde4ef; display: flex; align-items: center; } .ah2-cred--stat p { font-size: 14px; line-height: 1.5; color: #0a0f1e; } .ah2-cred--stat span { color: #e0468e; } .ah2-more { background: #f8f7f3; } .ah2-more-inner { max-width: 1264px; margin: 0 auto; padding: 56px var(--gutter, 32px); box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } .ah2-more-inner p { margin: 0; font-size: 17px; line-height: 1.65; color: #3d4254; } #ah2-more { scroll-margin-top: 100px; } @media (max-width: 1100px) { .ah2-art { background-position: calc(50% - 250px) bottom; } .ah2-creds { grid-template-columns: repeat(2, 1fr); } .ah2-cred:nth-child(2n) { border-right: 0; } .ah2-cred { border-bottom: 1px solid #eeeae4; } .ah2-cred--stat { grid-column: 1 / -1; } .ah2-inner { padding-bottom: 300px; } } @media (max-width: 900px) { .ah2-inner { min-height: 0; padding: 40px 20px 28px; } .ah2-art { position: relative; inset: auto; height: 92vw; background-size: auto 100%; background-position: 50% bottom; order: 2; } .ah2 { display: flex; flex-direction: column; } .ah2-inner { order: 1; } .ah2-creds { position: static; margin-top: 0; grid-template-columns: 1fr 1fr; } .ah2 > .ah2-inner + .ah2-art { order: 2; } .ah2-more-inner { grid-template-columns: 1fr; gap: 16px; padding: 36px 20px; } } /* MST about hero v2b */ .ah2 { background: #fefefe; } @media (min-width: 901px) { .ah2-art { inset: auto; bottom: 0; top: auto; height: 112%; aspect-ratio: 1448 / 1086; left: calc(50% + 200px); transform: translateX(-58.5%); background-size: 100% 100%; background-position: 0 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); } } @media (min-width: 901px) and (max-width: 1100px) { .ah2-art { left: calc(50% + 120px); } } /* MST about hero v2c */ @media (max-width: 900px) { .ah2 .ah2-creds { margin-top: 28px; } } /* MST about more v2 */ .ah2-more .ah2-more-inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; padding-top: 72px; padding-bottom: 72px; } .ah2-more-h2 { margin: 10px 0 0; font-family: var(--font-head); font-size: clamp(30px, 3.2vw, 44px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; color: #0a0f1e; } .ah2-more-body { display: flex; flex-direction: column; gap: 18px; } .ah2-more-body p { margin: 0; font-size: 17px; line-height: 1.7; color: #3d4254; } .ah2-more-body strong { color: #0a0f1e; } @media (max-width: 900px) { .ah2-more .ah2-more-inner { grid-template-columns: 1fr; gap: 20px; padding: 44px 20px; } } /* MST about hero v2d */ @media (min-width: 1101px) { .ah2 .ah2-art { left: min(calc(50% + 347px), calc(100% - 285px)); } } /* MST tf intro v2 */ @media (min-width: 901px) { .tf-section .tf-head { justify-content: space-between; } .tf-section .tf-intro { flex: 0 0 280px; max-width: 280px; margin-left: auto; padding-left: 22px; } .tf-section .tf-intro p { font-size: 14.5px; line-height: 1.6; } } /* MST tf intro v3 */ @media (min-width: 901px) { .tf-section .tf-head { gap: 56px; } .tf-section .tf-title { padding-right: 72px; } .tf-section .tf-intro { flex: 0 1 280px; min-width: 230px; } } /* MST gm scenes v1 */ .gm-section .gm-pose.is-scene{right:0;bottom:0;top:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%)} .gm-section .gm-art:has(.gm-pose.is-scene:not(.is-out)) .gm-glow{opacity:0} .gm-section .gm-glow{transition:opacity .35s} @media (max-width:760px){.gm-section .gm-pose.is-scene{right:0;left:0;transform:none;width:100%;height:100%;bottom:0;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 28%);mask-image:linear-gradient(180deg,transparent 0,#000 28%)}.gm-section .gm-pose.is-scene.is-out{transform:translateX(28px)}} @keyframes gm-scene-in{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}} .gm-section .gm-pose.is-scene.is-in{animation:gm-scene-in .6s cubic-bezier(.2,.8,.2,1) both} @media (min-width:761px){.gm-section .gm-pose.is-scene{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 18%,#000 42%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 18%,#000 42%)}} .gm-section .gm-pose.is-scene{object-position:right center} /* MST gm scenes v2: no fade, flat mock pink */ .gm-section .gm-pose.is-scene{-webkit-mask-image:none!important;mask-image:none!important} .gm-section .gm-result.is-premium:has(.gm-pose.is-scene:not(.is-out)){background:#fb79b2;box-shadow:0 18px 40px rgba(255,92,166,.28)} .gm-section .gm-result.is-premium{transition:background-color .35s} @media (min-width:761px){.gm-section .gm-art:has(.gm-pose.is-scene){width:56%;overflow:hidden;border-radius:0 18px 18px 0}.gm-section .gm-pose.is-scene{left:auto;right:0;width:auto;max-width:none;height:100%;object-fit:contain}} @media (min-width:761px){.gm-section .gm-result.is-premium:has(.gm-pose.is-scene:not(.is-out)){padding-right:50%}.gm-section .gm-art:has(.gm-pose.is-scene){width:50%}.gm-section .gm-pose.is-scene{left:0;right:0;width:100%;height:100%;object-fit:cover;object-position:right bottom}} @media (min-width:761px){.gm-section .gm-result.is-premium:has(.gm-pose.is-scene:not(.is-out)){padding-right:calc(46% + 8px)}.gm-section .gm-art:has(.gm-pose.is-scene){width:46%}} /* MST gm scenes v3: full image, wider panel */ @media (min-width:1101px){.gm-section .gm-inner{grid-template-columns:330px minmax(0,1fr)}} @media (min-width:761px){.gm-section .gm-result.is-premium:has(.gm-pose.is-scene:not(.is-out)){padding-right:calc(100% - 360px)}.gm-section .gm-art:has(.gm-pose.is-scene){width:calc(100% - 360px);border-radius:0}.gm-section .gm-pose.is-scene{object-fit:contain;object-position:right bottom}} @media (max-width:760px){.gm-section .gm-pose.is-scene{object-fit:contain;object-position:center bottom}} @media (max-width:760px){.gm-section .gm-result.is-premium:has(.gm-pose.is-scene:not(.is-out)){padding-bottom:0}.gm-section .gm-art:has(.gm-pose.is-scene){position:relative;top:auto;height:auto;width:auto;margin:18px -22px 0}.gm-section .gm-pose.is-scene{position:relative;display:block;width:100%;height:auto;top:auto}.gm-section .gm-pose.is-scene.is-out{position:absolute;left:0;bottom:0}} /* MST gm cards v4: the mock itself as the card background */ .gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm9"]:not(.is-out)){aspect-ratio:767/276;min-height:0} @media (min-width:761px){ .gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm9"]:not(.is-out)){padding:24px 49% 24px 4.6%} .gm-section .gm-art:has(.gm-pose[src*="mostadon-gm9"]:not(.is-out)){width:100%;border-radius:18px} .gm-section .gm-pose[src*="mostadon-gm9"]{left:0;right:0;top:0;bottom:0;width:100%;height:100%;object-fit:cover;object-position:right center} } @media (max-width:760px){ .gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm9"]:not(.is-out)){aspect-ratio:auto} .gm-section .gm-art:has(.gm-pose[src*="mostadon-gm9"]:not(.is-out)){aspect-ratio:400/276} .gm-section .gm-pose[src*="mostadon-gm9"]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center} } @media (min-width:761px){.gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm9-demand"]:not(.is-out)){aspect-ratio:767/276}} @media (min-width:761px){.gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm9-revenue"]:not(.is-out)){aspect-ratio:767/275}} @media (min-width:761px){.gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm9-strategy"]:not(.is-out)){aspect-ratio:757/276}} @media (min-width:761px){.gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm9b-support"]:not(.is-out)){aspect-ratio:758/275}} @media (min-width:761px){.gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm9-review"]:not(.is-out)){aspect-ratio:864/248}} @media (min-width:761px){.gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm9-review"]:not(.is-out)){padding-right:47%;padding-top:18px;padding-bottom:18px}} @media (min-width:761px){.gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm9-review"]:not(.is-out)){aspect-ratio:auto;min-height:250px;padding:26px 54% 26px 4.6%}.gm-section .gm-pose[src*="mostadon-gm9-review"]{object-fit:contain;object-position:right bottom}} @media (min-width:761px){.gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm9-review"]:not(.is-out)){padding-right:50%}.gm-section .gm-art:has(.gm-pose[src*="mostadon-gm9-review"]:not(.is-out)){left:7%;width:auto}} @media (min-width:761px){.gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm9-events"]:not(.is-out)){aspect-ratio:1100/432}.gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm9-interim"]:not(.is-out)){aspect-ratio:1100/488}} @media (min-width:761px){.gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm9-events"]:not(.is-out)){aspect-ratio:auto;min-height:290px;padding:26px 50% 26px 4.6%}.gm-section .gm-art:has(.gm-pose[src*="mostadon-gm9-events"]:not(.is-out)){left:7%;width:auto}.gm-section .gm-pose[src*="mostadon-gm9-events"]{object-fit:contain;object-position:right bottom}} /* MST gm cards v5: review + events fill the card */ @media (min-width:761px){ .gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm11-"]:not(.is-out)){min-height:0;padding:26px 50% 26px 4.6%} .gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm11-review"]:not(.is-out)){aspect-ratio:916/310} .gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm11-events"]:not(.is-out)){aspect-ratio:1177/458} .gm-section .gm-art:has(.gm-pose[src*="mostadon-gm11-"]:not(.is-out)){left:0;width:100%;border-radius:18px} .gm-section .gm-pose[src*="mostadon-gm11-"]{left:0;right:0;top:0;bottom:0;width:100%;height:100%;object-fit:cover;object-position:right bottom} } @media (max-width:760px){ .gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm11-"]:not(.is-out)){padding-bottom:0} .gm-section .gm-art:has(.gm-pose[src*="mostadon-gm11-"]:not(.is-out)){position:relative;top:auto;height:auto;width:auto;margin:18px -22px 0;aspect-ratio:400/276} .gm-section .gm-pose[src*="mostadon-gm11-"]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right bottom} } /* MST gm tiles v1 */ .gm-section.has-tiles .gm-q{cursor:pointer;position:relative;display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:12px;border:1.5px solid transparent;transition:background .2s,border-color .2s} .gm-section.has-tiles .gm-q:hover{background:#fff4f9} .gm-section.has-tiles .gm-q.is-active{background:#fde4ef;border-color:#ff7cb9} .gm-section.has-tiles .gm-q .gm-sel{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden} .gm-section.has-tiles .gm-ans{display:block;font-size:13.5px;line-height:1.35;color:#e0468e;font-weight:600;padding-left:34px} .gm-section .gm-tiles{margin-top:14px} .gm-section .gm-grid{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))} .gm-section .gm-grid--n,.gm-section .gm-grid--t{grid-template-columns:repeat(4,minmax(0,1fr))} .gm-section .gm-grid[hidden]{display:none} .gm-section .gm-tile{display:block;padding:0;border:0;background:#fde4ef;border-radius:12px;overflow:hidden;cursor:pointer;position:relative;box-shadow:0 0 0 0 rgba(255,61,154,0);transition:transform .2s,box-shadow .2s;outline:0} .gm-section .gm-tile img{display:block;width:100%;height:auto;aspect-ratio:495/163;object-fit:cover;object-position:left center} .gm-section .gm-grid--n .gm-tile img,.gm-section .gm-grid--t .gm-tile img{aspect-ratio:2.3/1} .gm-section .gm-tile:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(255,61,154,.22)} .gm-section .gm-tile:focus-visible{box-shadow:0 0 0 3px #0a0f1e} .gm-section .gm-tile.is-picked{box-shadow:0 0 0 3px #0a0f1e,0 10px 22px rgba(255,61,154,.25)} .gm-section .gm-tile.is-picked::after{content:"\2713";position:absolute;right:8px;top:8px;width:22px;height:22px;border-radius:50%;background:#0a0f1e;color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center} .gm-section.has-tiles .gm-result{margin-top:18px} @media (max-width:760px){.gm-section .gm-grid--p{grid-template-columns:minmax(0,1fr)}.gm-section .gm-grid--n,.gm-section .gm-grid--t{grid-template-columns:repeat(2,minmax(0,1fr))}.gm-section.has-tiles .gm-ans{padding-left:0}} .gm-section.has-tiles .gm-ans{padding-left:0;text-align:inherit} @media (max-width:760px){.gm-section.has-tiles .gm-qs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.gm-section.has-tiles .gm-q{padding:8px 6px;gap:4px;text-align:center;align-items:center;margin:0}.gm-section.has-tiles .gm-q .gm-qtext{font-size:12.5px;line-height:1.2}.gm-section.has-tiles .gm-ans{font-size:11px;line-height:1.25}.gm-section .gm-grid{gap:8px}} /* MST gm tiles v2: result waits for all three */ .gm-section.gm-pending .gm-result{display:none!important} .gm-section.has-tiles .gm-q:not(.is-done) .gm-ans{color:#8a8fa0;font-weight:500} /* MST gm cards v6: grow for long titles */ .gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm9"]:not(.is-out)),.gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm11-"]:not(.is-out)){min-height:auto!important} @media (min-width:761px){.gm-section .gm-result.is-premium .gm-result-title{font-size:clamp(22px,2vw,29px)}.gm-section .gm-pose[src*="mostadon-gm9"],.gm-section .gm-pose[src*="mostadon-gm11-"]{object-position:right bottom}} /* MST gm cards v7: grow with the text, keep the picture's shape as a minimum */ @media (min-width:761px){.gm-section .gm-panel{container-type:inline-size} .gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm9"]:not(.is-out)){aspect-ratio:auto!important;min-height:calc((100cqw - 60px) * 0.3598)!important} .gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm9-review"]:not(.is-out)){aspect-ratio:auto!important;min-height:calc((100cqw - 60px) * 0.2870)!important} .gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm11-review"]:not(.is-out)){aspect-ratio:auto!important;min-height:calc((100cqw - 60px) * 0.3384)!important} .gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm11-events"]:not(.is-out)){aspect-ratio:auto!important;min-height:calc((100cqw - 60px) * 0.3891)!important} .gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm9-interim"]:not(.is-out)){aspect-ratio:auto!important;min-height:calc((100cqw - 60px) * 0.4436)!important} .gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm9b-support"]:not(.is-out)){aspect-ratio:auto!important;min-height:calc((100cqw - 60px) * 0.3628)!important} .gm-section .gm-result.is-premium:has(.gm-pose[src*="mostadon-gm9-strategy"]:not(.is-out)){aspect-ratio:auto!important;min-height:calc((100cqw - 60px) * 0.3646)!important} } /* MST gm cards v8: picture keeps its size when the card grows (Why this?) */ @media (min-width:761px){.gm-section .gm-pose[src*="mostadon-gm9"],.gm-section .gm-pose[src*="mostadon-gm11-"]{top:auto!important;bottom:0!important;height:auto!important;width:100%!important;object-fit:fill!important;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%)!important;mask-image:linear-gradient(180deg,transparent 0,#000 14%)!important}} .gm-section.has-tiles .gm-q.is-locked{opacity:.4;cursor:not-allowed;filter:grayscale(1)}.gm-section.has-tiles .gm-q.is-locked:hover{background:transparent} /* MST service heroes v1: own scene and colour per page */ .hero-art--scene{width:calc(min(56%, 760px) + max(0px, (100% - 1264px) / 2));overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 160px);mask-image:linear-gradient(90deg,transparent 0,#000 160px)} .hero .wp-block-image.hero-art--scene img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:right center} .hero .wp-block-image.hero-art--m513 img{object-fit:cover;object-position:right center;padding:0;box-sizing:border-box} .hero .wp-block-image.hero-art--m582 img,.hero .wp-block-image.hero-art--m583 img{object-position:right bottom} .hero--tone-light{background:#faf8f4;color:var(--ink)} .hero--tone-pink{background:#fb79b3;color:var(--ink)} .hero--tone-pink2{background:#fc72b3;color:var(--ink)} .hero--tone-light .hero-title,.hero--tone-pink .hero-title,.hero--tone-pink2 .hero-title{color:var(--ink)} .hero--tone-light .hero-text{color:#3d4254} .hero--tone-pink .hero-text,.hero--tone-pink2 .hero-text{color:#1d2340} .hero--tone-light .eyebrow--num{color:#e0468e} .hero--tone-pink .eyebrow--num,.hero--tone-pink2 .eyebrow--num{color:var(--ink)} .hero--tone-pink .is-style-mst-pink .wp-block-button__link,.hero--tone-pink2 .is-style-mst-pink .wp-block-button__link{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important} .hero--tone-pink .hero-title [style*="color"],.hero--tone-pink2 .hero-title mark,.hero--tone-pink .hero-title mark{color:#fff!important} @media (max-width:900px){.hero-art--scene{width:100%;opacity:.35;-webkit-mask-image:none;mask-image:none}.hero--tone-light .hero-art--scene,.hero--tone-pink .hero-art--scene,.hero--tone-pink2 .hero-art--scene{opacity:.28}} /* MST services review v1 */ .hero--service .eyebrow--num a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px} .hero--service .eyebrow--num a:hover{opacity:.75} .hero--service .eyebrow--num .sep{opacity:.5;margin:0 6px} @media (min-width:901px){ .who-for > .container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);column-gap:72px;align-items:center} .who-for > .container > h2{grid-column:1;grid-row:1} .who-for > .container > .who-list{grid-column:1;grid-row:2;max-width:none} .who-for > .container > .who-art{grid-column:2;grid-row:1 / span 2} } .who-art{margin:0;position:relative} .who-art img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 24px 60px rgba(255,61,154,.22),0 0 0 1px rgba(255,255,255,.08)} .who-art figcaption{margin-top:14px;font-family:var(--font-head);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:#ff7cb9} @media (max-width:900px){.who-art{margin-top:28px;max-width:460px}} .outcomes > .container{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);align-items:center;column-gap:48px} .outcomes > .container > h2{margin:0} .outcomes .outcome-grid{max-width:none} .outcomes .outcome{text-align:left;padding:6px 36px} .outcomes .outcome:first-child{padding-left:36px;border-left:1px solid #cfcdc6} .outcomes .outcome-value{font-size:clamp(40px,4.6vw,66px);line-height:1} .outcomes .outcome-label{margin:10px 0 0;max-width:240px;font-size:16px;color:var(--text-2)} .outcomes .outcome:first-child .outcome-label{margin:10px 0 0} @media (max-width:900px){.outcomes > .container{display:block}.outcomes > .container > h2{margin-bottom:18px}.outcomes .outcome,.outcomes .outcome:first-child{padding:14px 0;border-left:0;border-top:1px solid #cfcdc6}} .svc-proof{background:#fff;padding:96px 0} .svc-proof-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:64px;align-items:center} .svc-proof-head .h2{margin:10px 0 18px} .svc-proof-link{font-family:var(--font-head);font-weight:700;color:var(--ink);text-decoration:none;border-bottom:2px solid #ff7cb9;padding-bottom:3px} .svc-proof-link:hover{color:#c2407e} .svc-proof-card{background:var(--ink);color:#fff;border-radius:20px;padding:36px 38px;box-shadow:0 24px 60px rgba(10,15,30,.18);position:relative;overflow:hidden} .svc-proof-card::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,61,154,.35),rgba(255,61,154,0))} .svc-proof-card .card-tag{margin:0;color:#ff7cb9;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase} .svc-proof-card h3{margin:8px 0 4px;color:#fff;font-size:28px} .svc-proof-card .case-role{margin:0 0 22px;color:#aeb3c2;font-size:14.5px} .svc-proof-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px} .svc-proof-stats > div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px 18px} .svc-proof-stats .v{margin:0;font-family:var(--font-head);font-weight:800;font-size:30px;letter-spacing:-.03em;color:#ff7cb9;line-height:1.05} .svc-proof-stats .l{margin:6px 0 0;font-size:14px;color:#d5d8e2} .svc-proof-story{margin:0;font-size:16.5px;line-height:1.6;color:#e6e8ef} @media (max-width:900px){.svc-proof{padding:64px 0}.svc-proof-inner{grid-template-columns:1fr;gap:28px}.svc-proof-card{padding:28px 24px}} .svc-steps{background:#fff} .svc-steps + .section.faq{background:var(--paper)} .svc-pair{background:var(--paper);padding:64px 0} .svc-pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px} .svc-pair-card{position:relative;display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line,#e8e5de);border-radius:16px;padding:24px 64px 24px 28px;text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s,border-color .2s} .svc-pair-card .t{font-family:var(--font-head);font-weight:800;font-size:21px;letter-spacing:-.02em} .svc-pair-card .d{font-size:15.5px;color:var(--text-2)} .svc-pair-card .a{position:absolute;right:26px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:#fde4ef;color:#e0468e;display:grid;place-items:center;font-weight:700;transition:background .2s,color .2s} .svc-pair-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(10,15,30,.08);border-color:#ff7cb9} .svc-pair-card:hover .a{background:#ff7cb9;color:#fff} @media (max-width:700px){.svc-pair-grid{grid-template-columns:1fr}} body.parent-pageid-7 .start-band--dark .start-band-inner{padding-top:96px;padding-bottom:104px} body.parent-pageid-7 .start-band--dark .start-band-title{font-size:clamp(40px,5vw,68px);max-width:12ch;line-height:1} body.parent-pageid-7 .start-band--dark .start-band-text{font-size:19px;max-width:440px} body.parent-pageid-7 .start-band--dark .start-band-art{width:min(52%,760px)} .svc-steps + .section.faq + .svc-pair{background:#fff} .svc-pair .svc-pair-card{background:#fff}.svc-steps + .section.faq + .svc-pair .svc-pair-card{background:var(--paper)} @media (min-width:901px){.who-for > .container{grid-template-columns:minmax(0,1fr) minmax(0,520px)}} @media (min-width:901px){.outcomes .outcome-value{font-size:clamp(32px,3.2vw,46px);white-space:nowrap}.outcomes .outcome{padding:6px 28px}.outcomes .outcome:first-child{padding-left:28px}} @media (min-width:901px){.who-for > .container{display:block}}.who-art{display:none!important} @media (max-width:760px){.gm-section .gm-grid--p{grid-template-columns:repeat(2,minmax(0,1fr))}} /* MST who-for v2: option B split, alternating colours */ .who-for .who-eyebrow{margin:0 0 14px;font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#ff7cb9} .who-for > .container > h2{margin:0} .who-for .who-side p{margin:20px 0 26px;font-size:17px;line-height:1.55;color:#c9cdd8;max-width:400px} .who-for .who-btn{display:inline-flex;align-items:center;gap:8px;padding:15px 26px;border-radius:8px;background:#ff7cb9;color:#0a0f1e;font-family:var(--font-head);font-size:15px;font-weight:700;text-decoration:none;transition:transform .2s,background .2s} .who-for .who-btn:hover{transform:translateY(-2px);background:#fff} .who-for .who-list{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;max-width:none} .who-for .who-row{gap:18px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.18)} .who-for .who-row:last-child,.who-for .who-row:nth-last-child(2):nth-child(odd){border-bottom:0} .who-for .who-row p{font-size:17px;max-width:none} .who-for svg.ring{width:48px;height:48px;padding:12px;flex:0 0 auto;border-width:1.5px} @media (min-width:901px){ .who-for > .container{display:grid!important;grid-template-columns:400px minmax(0,1fr);column-gap:88px;align-items:center} .who-for > .container > .who-eyebrow{grid-column:1;grid-row:1;align-self:end} .who-for > .container > h2{grid-column:1;grid-row:2} .who-for > .container > .who-side{grid-column:1;grid-row:3;align-self:start} .who-for > .container > .who-list{grid-column:2;grid-row:1 / span 3} } @media (max-width:900px){.who-for .who-list{grid-template-columns:1fr;margin-top:28px}.who-for .who-row:nth-last-child(2):nth-child(odd){border-bottom:1px solid rgba(255,255,255,.18)}} .who-for.who-tone-pink{background:#fb79b3;color:var(--ink)} .who-for.who-tone-soft{background:#fcc9de;color:var(--ink)} .who-for.who-tone-pink h2,.who-for.who-tone-soft h2{color:var(--ink)} .who-for.who-tone-pink .who-row,.who-for.who-tone-soft .who-row{border-color:rgba(10,15,30,.16)!important} .who-for.who-tone-pink .who-side p,.who-for.who-tone-soft .who-side p{color:#2a2f45} .who-for.who-tone-pink .who-eyebrow{color:var(--ink)} .who-for.who-tone-soft .who-eyebrow{color:#c2407e} .who-for.who-tone-pink svg.ring{border-color:var(--ink);color:var(--ink)} .who-for.who-tone-soft svg.ring{border-color:#e0468e;color:#e0468e} .who-for.who-tone-pink .who-btn,.who-for.who-tone-soft .who-btn{background:var(--ink);color:#fff} .who-for.who-tone-pink .who-btn:hover,.who-for.who-tone-soft .who-btn:hover{background:#fff;color:var(--ink)} .hero--tone-pink3{background:#ee8fbb;color:var(--ink)} .hero--tone-pink3 .hero-title{color:var(--ink)} .hero--tone-pink3 .hero-text{color:#1d2340} .hero--tone-pink3 .is-style-mst-pink .wp-block-button__link{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important} .hero--tone-pink3 .hero-title mark{color:#fff!important} .hero .wp-block-image.hero-art--m669 img{object-position:35% center} @media (max-width:900px){.hero--tone-pink3 .hero-art--scene{opacity:.28}} @media (min-width:901px){.hero .wp-block-image.hero-art--m669 img{object-fit:contain;object-position:right bottom;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%);mask-image:linear-gradient(180deg,transparent 0,#000 18%)}} @media (min-width:901px){.hero-art--scene.hero-art--m669{width:calc(min(50%, 680px) + max(0px, (100% - 1264px) / 2))}} /* MST how I work v2 */ .hero--tone-light2{background:#fcfaf6;color:var(--ink)} .hero--tone-light2 .hero-title{color:var(--ink)} .hero--tone-light2 .hero-text{color:#3d4254} .hero--tone-light2 .is-style-mst-eyebrow{color:#e0468e} .hero--hiw .hero-art--scene{width:calc(min(54%, 740px) + max(0px, (100% - 1264px) / 2))} .hero .wp-block-image.hero-art--m430 img{object-position:right center} .hiw-head{max-width:760px;margin-bottom:48px} .hiw-head .h2{margin:10px 0 14px} .hiw-head--center{margin-left:auto;margin-right:auto;text-align:center} .hiw-head--split{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:48px;align-items:end} .hiw-lead{margin:0;font-size:18px;line-height:1.55;color:var(--text-2)} .hiw-tl{background:#fff;padding:104px 0} .hiw-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;position:relative} .hiw-steps::before{content:"";position:absolute;left:28px;right:28px;top:27px;height:2px;background:repeating-linear-gradient(90deg,#ff7cb9 0 10px,transparent 10px 18px)} .hiw-step{position:relative;display:flex;flex-direction:column} .hiw-num{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;background:#0a0f1e;color:#fff;display:grid;place-items:center;font-family:var(--font-head);font-weight:800;font-size:17px;box-shadow:0 0 0 6px #fff} .hiw-step:first-child .hiw-num{background:#ff7cb9;color:#0a0f1e} .hiw-when{margin:22px 0 4px;font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#c2407e} .hiw-step h3{margin:0 0 10px;font-size:24px;letter-spacing:-.02em} .hiw-desc{margin:0 0 18px;font-size:16px;line-height:1.6;color:var(--text-2);flex:1} .hiw-get{margin:0;padding:16px 18px;border-radius:12px;background:#fde4ef;font-size:15px;line-height:1.5;color:var(--ink)} .hiw-get span{display:block;font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#c2407e;margin-bottom:4px} .hiw-rhythm{background:var(--ink);color:#fff;padding:104px 0} .hiw-rhythm .h2{color:#fff} .hiw-rhythm .is-style-mst-eyebrow{color:#ff7cb9} .hiw-rhythm .hiw-lead{color:#c9cdd8} .hiw-rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .hiw-rcard{padding:28px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)} .hiw-rcard h3{margin:18px 0 8px;color:#fff;font-size:20px} .hiw-rcard p{margin:0;font-size:16px;line-height:1.55;color:#c9cdd8} .hiw-ico{width:48px;height:48px;border-radius:50%;border:1.5px solid #ff7cb9;color:#ff7cb9;display:grid;place-items:center} .hiw-ico svg{width:22px;height:22px} .hiw-price{background:var(--paper);padding:104px 0} .hiw-pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch} .hiw-pcard{display:flex;flex-direction:column;padding:32px;border-radius:18px;background:#fff;border:1px solid var(--line,#e8e5de)} .hiw-pcard.is-feature{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-8px);box-shadow:0 24px 50px rgba(10,15,30,.18)} .hiw-ptype{margin:0;font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#c2407e} .hiw-pcard.is-feature .hiw-ptype{color:#ff7cb9} .hiw-pcard h3{margin:10px 0 12px;font-size:30px;letter-spacing:-.03em} .hiw-pcard.is-feature h3{color:#fff} .hiw-pdesc{margin:0 0 22px;font-size:16px;line-height:1.6;color:var(--text-2);flex:1} .hiw-pcard.is-feature .hiw-pdesc{color:#c9cdd8} .hiw-pterm{margin:0;padding-top:18px;border-top:1px solid var(--line,#e8e5de);font-size:15px} .hiw-pcard.is-feature .hiw-pterm{border-top-color:rgba(255,255,255,.15);color:#fff} .hiw-pterm span{display:block;font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8a8fa0;margin-bottom:4px} .hiw-pfoot{margin-top:40px;display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;text-align:center} .hiw-pfoot p{margin:0;font-size:17px} .hiw-btn{display:inline-flex;align-items:center;gap:8px;padding:15px 26px;border-radius:8px;background:var(--ink);color:#fff;font-family:var(--font-head);font-size:15px;font-weight:700;text-decoration:none;transition:transform .2s} .hiw-btn:hover{transform:translateY(-2px);color:#fff} @media (max-width:1000px){.hiw-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}.hiw-steps::before{display:none}.hiw-rgrid,.hiw-pgrid{grid-template-columns:1fr 1fr}.hiw-pcard.is-feature{transform:none}} @media (max-width:700px){.hiw-tl,.hiw-rhythm,.hiw-price{padding:72px 0}.hiw-head--split{grid-template-columns:1fr;gap:12px}.hiw-steps{grid-template-columns:1fr;row-gap:0}.hiw-step{padding:0 0 32px 76px;min-height:56px}.hiw-num{position:absolute;left:0;top:0}.hiw-step::before{content:"";position:absolute;left:27px;top:56px;bottom:0;width:2px;background:repeating-linear-gradient(180deg,#ff7cb9 0 8px,transparent 8px 14px)}.hiw-step:last-child::before{display:none}.hiw-when{margin-top:4px}.hiw-rgrid,.hiw-pgrid{grid-template-columns:1fr}.hiw-pfoot{flex-direction:column}} @media (min-width:901px){.hero--hiw .hero-art--scene{width:calc(min(44%, 600px) + max(0px, (100% - 1264px) / 2))}} .hero--hiw .hero-inner{position:relative;z-index:2}@media (min-width:901px){.hero--hiw .hero-art--scene{width:calc(min(40%, 560px) + max(0px, (100% - 1264px) / 2))}} .cta-band-art--sun img{object-position:left center!important} .cta-band-art--sun img{object-position:30% 28%!important} /* MST results v2 */ .hero .wp-block-image.hero-art--m431 img{object-position:right center} .page-id-229 .outcomes .outcome-value{font-variant-numeric:tabular-nums} .case-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px} .case-chip{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;border:1.5px solid var(--line,#e2ded6);background:#fff;color:var(--ink);font-family:var(--font-head);font-weight:700;font-size:14.5px;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .2s} .case-chip span{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#fde4ef;color:#c2407e;font-size:12px} .case-chip:hover{border-color:#ff7cb9;transform:translateY(-1px)} .case-chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff} .case-chip.is-on span{background:#ff7cb9;color:var(--ink)} .case-chip:focus-visible,.case-toggle:focus-visible,.rj-dot:focus-visible{outline:3px solid #ff7cb9;outline-offset:3px} .cases .case-card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s} .cases .case-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(10,15,30,.10)} .cases .case-card.is-hidden{display:none} .cases .case-card.is-pop{animation:mst-pop .45s cubic-bezier(.2,.8,.2,1) both} @keyframes mst-pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}} .case-more{display:none} .case-card.is-open .case-more{display:block;animation:mst-pop .4s ease both} .case-toggle{display:inline-flex;align-items:center;gap:10px;margin-top:6px;padding:10px 0;border:0;background:none;font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--ink);cursor:pointer;border-bottom:2px solid #ff7cb9} .case-toggle i{font-style:normal;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fde4ef;color:#c2407e;transition:transform .25s} .case-card.is-open .case-toggle i{transform:rotate(45deg)} .case-card.is-open .case-toggle{margin-bottom:14px} .res-journey{background:var(--ink);color:#fff;padding:104px 0 96px;overflow:hidden} .rj-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:40px;align-items:end;margin-bottom:40px} .rj-head .h2{color:#fff;margin:10px 0 0} .rj-head .is-style-mst-eyebrow{color:#ff7cb9} .rj-lead{margin:0;color:#c9cdd8;font-size:17px;line-height:1.55} .rj-track{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding-top:120px} .rj-line{position:absolute;left:0;right:0;top:139px;height:3px;background:rgba(255,255,255,.14);border-radius:3px} .rj-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff7cb9,#ff3d9a);border-radius:3px;transition:width .9s cubic-bezier(.4,.1,.2,1)} .rj-walker{position:absolute;left:0;top:14px;width:130px;height:auto;transition:transform .9s cubic-bezier(.4,.1,.2,1);pointer-events:none;filter:drop-shadow(0 10px 14px rgba(0,0,0,.4))} .rj-walker.is-back{scale:-1 1} .rj-walker.is-walking{animation:rj-bob .3s ease-in-out infinite alternate} @keyframes rj-bob{from{translate:0 0}to{translate:0 -5px}} .rj-dot{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 4px;border:0;background:none;color:#aeb3c2;cursor:pointer;text-align:center;font:inherit} .rj-pin{width:42px;height:42px;border-radius:50%;background:var(--ink);border:3px solid rgba(255,255,255,.3);display:block;transition:background .3s,border-color .3s,transform .3s;position:relative;z-index:1} .rj-dot.is-past .rj-pin{border-color:#ff7cb9;background:#2a1830} .rj-dot.is-on .rj-pin{background:#ff7cb9;border-color:#ff7cb9;transform:scale(1.15);box-shadow:0 0 0 8px rgba(255,124,185,.18)} .rj-dot:hover .rj-pin{border-color:#ff7cb9} .rj-year{margin-top:8px;font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#ff7cb9} .rj-name{font-family:var(--font-head);font-weight:700;font-size:15px;line-height:1.25;color:#fff;max-width:150px} .rj-dot:not(.is-on) .rj-name{opacity:.7} .rj-panels{margin-top:44px} .rj-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:40px;align-items:center;padding:34px 38px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)} .rj-panel[hidden]{display:none} .rj-panel.is-in{animation:mst-pop .45s cubic-bezier(.2,.8,.2,1) both} .rj-when{margin:0;font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#ff7cb9} .rj-copy h3{margin:8px 0 10px;color:#fff;font-size:32px;letter-spacing:-.03em} .rj-copy p:last-child{margin:0;font-size:17px;line-height:1.6;color:#d5d8e2} .rj-stat{padding:24px 26px;border-radius:16px;background:#ff7cb9;color:var(--ink)} .rj-stat .v{margin:0;font-family:var(--font-head);font-weight:800;font-size:44px;letter-spacing:-.04em;line-height:1} .rj-stat .l{margin:8px 0 0;font-size:15px;font-weight:600} .rj-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:18px} .rj-nav button{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);background:none;color:#fff;font-size:18px;cursor:pointer;transition:background .2s,border-color .2s} .rj-nav button:hover{background:#ff7cb9;border-color:#ff7cb9;color:var(--ink)} @media (max-width:900px){.res-journey{padding:72px 0}.rj-head{grid-template-columns:1fr;gap:12px}.rj-track{overflow-x:auto;grid-template-columns:repeat(7,120px);padding-top:110px;padding-bottom:6px;scrollbar-width:none}.rj-track::-webkit-scrollbar{display:none}.rj-line{right:auto;width:840px}.rj-walker{width:104px;top:20px}.rj-panel{grid-template-columns:1fr;padding:26px 22px;gap:20px}.rj-copy h3{font-size:26px}.rj-stat .v{font-size:36px}} @media (prefers-reduced-motion:reduce){.rj-walker,.rj-fill{transition:none}.rj-walker.is-walking{animation:none}} .case-toggle{width:auto!important;max-width:max-content} @media (min-width:901px){.page-id-229 .outcomes .outcome-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} .rj-walker.is-back{scale:none} /* MST services v3 shared */ .svc-bar{position:fixed;left:0;right:0;bottom:18px;z-index:90;pointer-events:none;transform:translateY(140%);transition:transform .45s cubic-bezier(.2,.8,.2,1)} .svc-bar.is-on{transform:none} .svc-bar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:880px;margin:0 auto;padding:10px 10px 10px 24px;border-radius:999px;background:rgba(10,15,30,.94);backdrop-filter:blur(8px);color:#fff;box-shadow:0 18px 40px rgba(10,15,30,.35);pointer-events:auto;box-sizing:border-box} .svc-bar-t{font-family:var(--font-head);font-weight:800;font-size:16px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .svc-bar-a{display:flex;align-items:center;gap:8px;flex:0 0 auto} .svc-bar-l{color:#fff;text-decoration:none;font-family:var(--font-head);font-weight:700;font-size:14px;padding:10px 14px;border-radius:999px} .svc-bar-l:hover{color:#ff7cb9} .svc-bar-b{display:inline-flex;gap:6px;align-items:center;background:#ff7cb9;color:#0a0f1e;text-decoration:none;font-family:var(--font-head);font-weight:700;font-size:14px;padding:11px 18px;border-radius:999px;transition:background .2s} .svc-bar-b:hover{background:#fff;color:#0a0f1e} @media (max-width:700px){.svc-bar{left:12px;right:12px;bottom:12px}.svc-bar-t{font-size:14px}.svc-bar-l{display:none}.svc-bar-in{padding-left:18px}} .parent-pageid-7 .icon-item{transition:transform .25s,background .25s} .parent-pageid-7 .icon-item:hover{transform:translateY(-3px)} .parent-pageid-7 .icon-item svg,.parent-pageid-7 .mst-card svg,.parent-pageid-7 svg.ring,.hiw-ico svg{transition:transform .35s cubic-bezier(.3,1.6,.5,1)} .parent-pageid-7 .icon-item:hover svg,.parent-pageid-7 .mst-card:hover svg,.parent-pageid-7 .who-row:hover svg.ring{transform:rotate(-8deg) scale(1.12)} .parent-pageid-7 .mst-card{transition:transform .25s,box-shadow .25s,border-color .25s} .parent-pageid-7 .mst-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(10,15,30,.1);border-color:#ff7cb9} .parent-pageid-7 .who-row{transition:padding-left .25s} .parent-pageid-7 .who-row:hover{padding-left:6px} .wyg{display:none} @media (min-width:901px){ .icon-grid.has-wyg{display:none!important} .wyg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px;align-items:stretch} .wyg-list{display:flex;flex-direction:column;gap:6px} .wyg-btn{display:flex;align-items:center;gap:16px;width:100%;padding:16px 18px;border:1.5px solid transparent;border-radius:14px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s} .wyg-btn:hover{background:#fff} .wyg-btn.is-on{background:#fff;border-color:#ff7cb9;box-shadow:0 10px 26px rgba(10,15,30,.06)} .wyg-btn:focus-visible{outline:3px solid #ff7cb9;outline-offset:2px} .wyg-bi{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:#fde4ef;color:#e0468e;display:grid;place-items:center} .wyg-bi svg{width:20px;height:20px} .wyg-btn.is-on .wyg-bi{background:#ff7cb9;color:#0a0f1e} .wyg-bt{flex:1;font-family:var(--font-head);font-weight:700;font-size:17px} .wyg-ba{opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s;color:#e0468e;font-weight:700} .wyg-btn.is-on .wyg-ba,.wyg-btn:hover .wyg-ba{opacity:1;transform:none} .wyg-panel{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:44px 48px;border-radius:22px;background:var(--ink);color:#fff;min-height:360px} .wyg-panel::after{content:"";position:absolute;right:-90px;bottom:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,61,154,.35),rgba(255,61,154,0));pointer-events:none} .wyg-panel.is-in > *{animation:mst-pop .45s cubic-bezier(.2,.8,.2,1) both} .wyg-panel.is-in > *:nth-child(2){animation-delay:.04s}.wyg-panel.is-in > *:nth-child(3){animation-delay:.08s}.wyg-panel.is-in > *:nth-child(4){animation-delay:.12s} .wyg-n{margin:0 0 22px;font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.16em;color:#ff7cb9} .wyg-ic{width:76px;height:76px;border-radius:50%;border:2px solid #ff7cb9;color:#ff7cb9;display:grid;place-items:center;margin-bottom:22px} .wyg-ic svg{width:34px;height:34px} .wyg-panel h3{margin:0 0 12px;color:#fff;font-size:32px;letter-spacing:-.03em;line-height:1.1} .wyg-d{margin:0;font-size:18px;line-height:1.6;color:#d5d8e2;max-width:460px} .wyg-prog{margin-top:30px;height:3px;border-radius:3px;background:rgba(255,255,255,.12);max-width:460px} .wyg-prog span{display:block;height:100%;border-radius:3px;background:#ff7cb9;transition:width .4s} } /* MST services index v2 */ .page-id-7 .service-card{position:relative;overflow:hidden;isolation:isolate;cursor:pointer;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,opacity .3s,outline-color .3s;outline:2px solid transparent;outline-offset:-2px} .page-id-7 .service-card > *:not(.service-art){position:relative;z-index:1} .page-id-7 .service-art{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.08);transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1)} .page-id-7 .service-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,15,30,.55) 0%,rgba(10,15,30,.86) 55%,rgba(10,15,30,.96) 100%)} .page-id-7 .service-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(10,15,30,.28)} .page-id-7 .service-card:hover .service-art{opacity:1;transform:none} .page-id-7 .service-card.is-hidden{display:none} .page-id-7 .service-card.is-pop{animation:mst-pop .45s cubic-bezier(.2,.8,.2,1) both} .page-id-7 .service-grid.is-picking .service-card:not(.is-match){opacity:.28;transform:scale(.97)} .page-id-7 .service-grid.is-picking .service-card.is-match{outline-color:#ff7cb9;box-shadow:0 0 0 6px rgba(255,124,185,.18),0 26px 50px rgba(10,15,30,.25)} .page-id-7 .service-grid.is-picking .service-card.is-match .service-art{opacity:1;transform:none} .svx{margin:8px 0 26px} .svx-pick{padding:26px 28px 22px;border-radius:20px;background:#fff;border:1px solid var(--line,#e8e5de);margin-bottom:22px} .svx-ph{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:16px} .svx-eb{margin:0;font-family:var(--font-head);font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--ink)} .svx-q{margin:0;color:var(--text-2);font-size:16px} .svx-tiles{display:grid;grid-template-columns:repeat(9,minmax(150px,1fr));gap:10px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin} .svx-tile{position:relative;padding:0;border:0;border-radius:12px;overflow:hidden;cursor:pointer;background:#fde4ef;transition:transform .2s,box-shadow .2s,opacity .2s} .svx-tile img{display:block;width:100%;height:auto;aspect-ratio:495/163;object-fit:cover} .svx-tile:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(255,61,154,.2)} .svx-tile.is-on{box-shadow:0 0 0 3px #0a0f1e} .svx-tiles:has(.is-on) .svx-tile:not(.is-on){opacity:.5} .svx-tile:focus-visible{outline:3px solid #0a0f1e;outline-offset:2px} .svx-tile .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .svx-msg{margin:12px 0 0;min-height:24px;font-size:16px;color:var(--ink)} .svx-msg strong{color:#c2407e} .svx-reset{margin-left:8px;padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--ink);text-decoration:underline;cursor:pointer} .svx-chips{display:flex;flex-wrap:wrap;gap:10px} @media (min-width:1101px){.svx-tiles{grid-template-columns:repeat(9,minmax(0,1fr))}} @media (max-width:700px){.svx-pick{padding:20px 16px}.svx-tiles{grid-template-columns:repeat(9,170px)}} .hero .wp-block-image.hero-art--m433 img{object-position:right center} .svx-tiles,.svx-tiles{grid-template-columns:repeat(9,250px)!important;scroll-snap-type:x mandatory;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);padding-right:60px} .svx-tile{scroll-snap-align:start} @media (max-width:700px){.svx-tiles{grid-template-columns:repeat(9,210px)!important}} @media (min-width:1201px){.page-id-7 .service-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} /* MST service interactives v1 */ .mx{background:#fff;padding:104px 0;position:relative} .mx-head{max-width:720px;margin:0 0 44px} .mx-head .h2{margin:10px 0 14px} .mx-lead{margin:0;font-size:18px;line-height:1.55;color:#4a5064} .mx-card{background:var(--paper,#f8f7f3);border:1px solid var(--line,#dedcd5);border-radius:24px;padding:40px;position:relative;overflow:hidden} .mx-card .is-in{animation:mx-in .45s cubic-bezier(.2,.8,.2,1)} @keyframes mx-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .mx-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:32px;padding-top:24px;border-top:1px solid var(--line,#dedcd5)} .mx-foot p{margin:0;font-size:15px;color:#4a5064} .mx-cta{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:8px;background:var(--ink,#0a0f1e);color:#fff!important;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:15px;text-decoration:none!important;transition:transform .2s,background .2s} .mx-cta:hover{background:#e0468e;transform:translateY(-2px)} .mx-cta span{transition:transform .2s}.mx-cta:hover span{transform:translateX(4px)} .mx-list{list-style:none;margin:0;padding:0;display:grid;gap:12px} .mx-list li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.45} .mx-list svg{flex:0 0 auto;width:24px;height:24px;padding:5px;box-sizing:border-box;border-radius:50%;background:#e0468e;color:#fff;margin-top:-1px} .mx-card h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0 0 10px} .mx-card [hidden]{display:none!important} .mx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px;padding-top:28px;border-top:1px solid var(--line,#dedcd5)} .mx-stats div{background:var(--ink,#0a0f1e);color:#fff;border-radius:16px;padding:22px 24px} .mx-stats .v{margin:0;font-family:'Plus Jakarta Sans',sans-serif;font-size:36px;font-weight:800;letter-spacing:-.03em;color:var(--pink,#ff7cb9);line-height:1} .mx-stats .l{margin:8px 0 0;font-size:14px;line-height:1.4;color:#c9cdd8} .mxs-top{max-width:680px;margin:0 auto 36px} .mxs-lab{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#e0468e;text-align:center;margin-bottom:40px} .mxs-range{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:99px;background:linear-gradient(90deg,var(--pink,#ff7cb9) 0 var(--p,50%),#e6e3dc var(--p,50%) 100%);outline:none;margin:0;cursor:pointer} .mxs-range::-webkit-slider-thumb{-webkit-appearance:none;width:78px;height:56px;border:0;background:url(/wp-content/uploads/2026/10/mostadon-pose-walk.webp) center/contain no-repeat;cursor:grab;margin-top:-6px;transform:translateY(-14px)} .mxs-range::-moz-range-thumb{width:78px;height:56px;border:0;background:url(/wp-content/uploads/2026/10/mostadon-pose-walk.webp) center/contain no-repeat;cursor:grab;transform:translateY(-14px)} .mxs-range:focus-visible{box-shadow:0 0 0 4px rgba(255,124,185,.35)} .mxs-ticks{display:flex;justify-content:space-between;margin-top:16px} .mxs-ticks span{font-weight:600;font-size:15px;color:#7a7f8e;cursor:pointer;transition:color .2s} .mxs-ticks span.is-on{color:var(--ink,#0a0f1e)} .mxs-panel{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:start} .mxs-big{background:var(--ink,#0a0f1e);color:#fff;border-radius:20px;padding:30px} .mxs-big .n{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:96px;font-weight:800;line-height:.9;letter-spacing:-.05em;color:var(--pink,#ff7cb9)} .mxs-big .u{display:block;margin-top:8px;font-size:16px;color:#c9cdd8} .mxs-big .t{margin:22px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);font-family:'Plus Jakarta Sans',sans-serif;font-size:20px;font-weight:700} .mxs-body .mx-list li{font-size:17px} .mxs-best{margin:24px 0 0;padding:16px 20px;border-radius:12px;background:var(--pink-soft,#fdd0e4);font-size:16px;line-height:1.45} .mxs-best span{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#b0306d;margin-bottom:4px} .mxt-bar{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;padding-bottom:16px;margin-bottom:32px} .mxt-bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;border-radius:4px;background:#e6e3dc} .mxt-ink{position:absolute;left:0;bottom:0;height:4px;border-radius:4px;background:var(--pink,#ff7cb9);z-index:1;transition:width .45s cubic-bezier(.2,.8,.2,1)} .mxt-btn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:14px;border:1px solid transparent;transition:background .2s,border-color .2s,transform .2s} .mxt-btn .k{font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7a7f8e} .mxt-btn .v{font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:700;line-height:1.25;color:#4a5064} .mxt-btn:hover{background:#fff;transform:translateY(-2px)} .mxt-btn.is-on{background:#fff;border-color:var(--line,#dedcd5);box-shadow:0 10px 30px rgba(10,15,30,.07)} .mxt-btn.is-on .k{color:#e0468e}.mxt-btn.is-on .v{color:var(--ink,#0a0f1e)} .mxt-btn.is-done .k{color:#e0468e} .mxt-btn:focus-visible{outline:3px solid rgba(255,124,185,.5)} .mxt-panel{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start} .mxt-when{margin:0 0 8px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#e0468e} .mxt-copy p:last-child{margin:0;font-size:17px;line-height:1.55;color:#4a5064} .mxt-panel .mx-list{background:#fff;border-radius:16px;padding:24px;border:1px solid var(--line,#dedcd5)} .mxw-top{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:32px} .mxw-l,.mxw-r{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:800;cursor:pointer;transition:color .3s;color:var(--ink,#0a0f1e)} .mxw-r{color:#9a9eab} .mx-card.is-after .mxw-l{color:#9a9eab}.mx-card.is-after .mxw-r{color:#e0468e} .mxw-tg{all:unset;cursor:pointer;width:72px;height:38px;border-radius:99px;background:#cfd2da;position:relative;transition:background .3s} .mxw-tg span{position:absolute;top:4px;left:4px;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2);transition:transform .35s cubic-bezier(.2,.8,.2,1)} .mx-card.is-after .mxw-tg{background:#e0468e} .mx-card.is-after .mxw-tg span{transform:translateX(34px)} .mxw-tg:focus-visible{outline:3px solid rgba(255,124,185,.5);outline-offset:3px} .mxw-rows{display:grid;gap:10px} .mxw-row{display:grid;grid-template-columns:200px 1fr;align-items:center;gap:20px;padding:18px 24px;border-radius:14px;background:#fff;border:1px solid var(--line,#dedcd5);transition:background .4s,border-color .4s} .mxw-k{margin:0;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7a7f8e} .mxw-v{display:grid} .mxw-v p{grid-area:1/1;margin:0;font-size:19px;font-weight:600;line-height:1.35;transition:opacity .35s,transform .35s} .mxw-v .a{color:#7a7f8e;text-decoration:line-through;text-decoration-color:rgba(122,127,142,.4)} .mxw-v .b{opacity:0;transform:translateY(8px);color:var(--ink,#0a0f1e)} .mx-card.is-after .mxw-v .a{opacity:0;transform:translateY(-8px)} .mx-card.is-after .mxw-v .b{opacity:1;transform:none} .mx-card.is-after .mxw-row{background:var(--pink-soft,#fdd0e4);border-color:transparent} .mx-card.is-after .mxw-row:nth-child(2){transition-delay:.06s}.mx-card.is-after .mxw-row:nth-child(3){transition-delay:.12s}.mx-card.is-after .mxw-row:nth-child(4){transition-delay:.18s}.mx-card.is-after .mxw-row:nth-child(5){transition-delay:.24s} .mxf-wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center} .mxf-stages{display:grid;gap:10px;justify-items:center} .mxf-st{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;justify-content:center} .mxf-bar{display:flex;flex-direction:column;align-items:center;gap:2px;width:30%;padding:18px 16px;border-radius:14px;background:#fff;border:1px solid var(--line,#dedcd5);text-align:center;transition:width .8s cubic-bezier(.2,.8,.2,1),background .25s,color .25s,transform .2s;overflow:hidden;white-space:nowrap} .mx-card.is-live .mxf-bar{width:var(--w)} .mx-card.is-live .mxf-st:nth-child(2) .mxf-bar{transition-delay:.1s}.mx-card.is-live .mxf-st:nth-child(3) .mxf-bar{transition-delay:.2s}.mx-card.is-live .mxf-st:nth-child(4) .mxf-bar{transition-delay:.3s} .mxf-bar .k{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:800} .mxf-bar .v{font-size:14px;color:#7a7f8e;white-space:normal} .mxf-st:hover .mxf-bar{transform:scale(1.02);border-color:var(--pink,#ff7cb9)} .mxf-st.is-on .mxf-bar{background:var(--ink,#0a0f1e);border-color:var(--ink,#0a0f1e);color:#fff} .mxf-st.is-on .mxf-bar .k{color:var(--pink,#ff7cb9)}.mxf-st.is-on .mxf-bar .v{color:#c9cdd8} .mxf-st:focus-visible .mxf-bar{outline:3px solid rgba(255,124,185,.5)} .mxf-n{margin:0 0 8px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#e0468e} .mxf-panel>p:not([class]){font-size:17px;line-height:1.55;color:#4a5064;margin:0} .mxf-stat{margin-top:22px;padding:20px 22px;border-radius:14px;background:var(--pink-soft,#fdd0e4)} .mxf-stat .v{margin:0;font-family:'Plus Jakarta Sans',sans-serif;font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1} .mxf-stat .l{margin:6px 0 0;font-size:15px;color:#4a5064} .mx-quiz .mx-card{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start} .mxq-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:q} .mxq-q{counter-increment:q;display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:14px;background:#fff;border:1px solid var(--line,#dedcd5);transition:border-color .2s} .mxq-q::before{content:counter(q);flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#eeece6;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:14px;transition:background .2s,color .2s} .mxq-q.is-answered::before{background:#e0468e;color:#fff} .mxq-q p{flex:1;margin:0;font-size:16px;line-height:1.4} .mxq-a{display:flex;gap:6px;flex:0 0 auto} .mxq-a button{all:unset;cursor:pointer;padding:9px 14px;border-radius:99px;border:1.5px solid var(--line,#dedcd5);font-size:14px;font-weight:600;white-space:nowrap;transition:background .2s,border-color .2s,color .2s} .mxq-a button:hover{border-color:var(--ink,#0a0f1e)} .mxq-a button.is-on[data-v="1"]{background:var(--ink,#0a0f1e);border-color:var(--ink,#0a0f1e);color:#fff} .mxq-a button.is-on[data-v="0"]{background:var(--pink-soft,#fdd0e4);border-color:#e0468e;color:#b0306d} .mxq-a button:focus-visible{outline:3px solid rgba(255,124,185,.5)} .mxq-res{position:sticky;top:110px;background:var(--ink,#0a0f1e);color:#fff;border-radius:20px;padding:32px;text-align:center} .mxq-meter{position:relative;width:160px;height:160px;margin:0 auto 22px} .mxq-meter svg{width:100%;height:100%;transform:rotate(-90deg)} .mxq-meter circle{fill:none;stroke-width:10} .mxq-meter .bg{stroke:rgba(255,255,255,.12)} .mxq-meter .fg{stroke:var(--pink,#ff7cb9);stroke-linecap:round;stroke-dasharray:314;stroke-dashoffset:314;transition:stroke-dashoffset .7s cubic-bezier(.2,.8,.2,1)} .mxq-score{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:2px;margin:0;font-family:'Plus Jakarta Sans',sans-serif;font-size:22px;font-weight:700;color:#c9cdd8} .mxq-score span{font-size:52px;font-weight:800;color:#fff;letter-spacing:-.04em;line-height:1} .mxq-t{margin:0 0 8px;font-family:'Plus Jakarta Sans',sans-serif;font-size:22px;font-weight:800;line-height:1.25} .mxq-d{margin:0;font-size:15px;line-height:1.5;color:#c9cdd8} .mxq-cta{margin-top:22px} .mxq-cta .mx-cta{background:var(--pink,#ff7cb9);color:var(--ink,#0a0f1e)!important} .mxq-cta .mx-cta:hover{background:#fff} .mx-card.is-done .mxq-res{animation:mx-in .5s} .mx-stack .mx-card{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center} .mx-stack .mx-foot{grid-column:1/-1} .mxk-map{position:relative;height:420px} .mxk-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .mxk-lines line{stroke:#d6d3cb;stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:6 6;transition:stroke .3s} .mxk-lines line.is-on{stroke:#e0468e;stroke-width:3;animation:mxk-dash 1s linear infinite} @keyframes mxk-dash{to{stroke-dashoffset:-24}} .mxk-node{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;transform:translate(-50%,-50%);max-width:150px;padding:12px 16px;border-radius:14px;background:#fff;border:1.5px solid var(--line,#dedcd5);font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:700;text-align:center;line-height:1.2;box-shadow:0 6px 18px rgba(10,15,30,.06);transition:background .25s,border-color .25s,color .25s,box-shadow .25s,transform .25s;z-index:1} .mxk-node:hover{border-color:#e0468e;transform:translate(-50%,-50%) scale(1.05)} .mxk-node:not(.is-hub){min-width:112px} .mxk-node.is-on{background:#e0468e;border-color:#e0468e;color:#fff;box-shadow:0 10px 26px rgba(224,70,142,.35)} .mxk-node.is-hub{width:110px;height:110px;max-width:none;border-radius:50%;display:grid;place-items:center;background:var(--ink,#0a0f1e);border-color:var(--ink,#0a0f1e);color:#fff;font-size:20px} .mxk-node.is-hub.is-on{background:var(--ink,#0a0f1e);border-color:var(--ink,#0a0f1e);box-shadow:0 0 0 10px rgba(255,124,185,.25)} .mxk-node:focus-visible{outline:3px solid rgba(255,124,185,.5)} .mxk-n{margin:0 0 8px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#e0468e} .mxk-p>p:not([class]){margin:0;font-size:17px;line-height:1.55;color:#4a5064} .mxj-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center} .mxj-mail{background:#fff;border-radius:20px;padding:26px;border:1px solid var(--line,#dedcd5);box-shadow:0 20px 50px rgba(10,15,30,.1);transition:box-shadow .3s} .mxj-row{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid #eeece6} .mxj-av{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--ink,#0a0f1e);color:var(--pink,#ff7cb9);display:grid;place-items:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800} .mxj-row>div{flex:1;min-width:0} .mxj-from{margin:0;font-weight:700;font-size:15px} .mxj-sub{margin:2px 0 0;font-size:14px;color:#4a5064;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mxj-badge{flex:0 0 auto;padding:6px 12px;border-radius:99px;background:#eeece6;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;transition:background .3s,color .3s} .mxj-lines{display:grid;gap:10px;margin:22px 0} .mxj-lines span{height:10px;border-radius:6px;background:#eeece6} .mxj-lines .s{width:60%} .mxj-btn{display:inline-block;padding:11px 18px;border-radius:8px;background:var(--pink,#ff7cb9);font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;transition:transform .3s,box-shadow .3s} .mxj-score{display:flex;align-items:center;gap:14px;margin-top:22px;padding-top:18px;border-top:1px solid #eeece6;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7a7f8e} .mxj-meter{flex:1;height:10px;border-radius:99px;background:#eeece6;overflow:hidden} .mxj-meter i{display:block;height:100%;width:8%;border-radius:99px;background:linear-gradient(90deg,var(--pink,#ff7cb9),#e0468e);transition:width .7s cubic-bezier(.2,.8,.2,1)} .mxj-mail[data-step="1"] .mxj-meter i{width:30%} .mxj-mail[data-step="2"] .mxj-meter i{width:58%} .mxj-mail[data-step="3"] .mxj-meter i{width:86%} .mxj-mail[data-step="4"] .mxj-meter i{width:100%} .mxj-mail[data-step="1"] .mxj-badge{background:var(--pink-soft,#fdd0e4);color:#b0306d} .mxj-mail[data-step="2"] .mxj-badge,.mxj-mail[data-step="3"] .mxj-badge{background:#e0468e;color:#fff} .mxj-mail[data-step="4"] .mxj-badge{background:var(--ink,#0a0f1e);color:var(--pink,#ff7cb9)} .mxj-mail[data-step="2"] .mxj-btn{transform:scale(1.08);box-shadow:0 0 0 6px rgba(255,124,185,.3)} .mxj-mail[data-step="3"],.mxj-mail[data-step="4"]{box-shadow:0 20px 50px rgba(224,70,142,.25)} .mxj-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px} .mxj-st{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:36px 1fr;column-gap:14px;align-items:center;padding:12px 16px;border-radius:14px;border:1px solid transparent;transition:background .25s,border-color .25s} .mxj-st .n{grid-row:1/3;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#eeece6;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:15px;transition:background .25s,color .25s} .mxj-st .k{font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:800} .mxj-st .d{display:none;font-size:15px;line-height:1.45;color:#4a5064;margin-top:2px} .mxj-st:hover{background:#fff} .mxj-st.is-on{background:#fff;border-color:var(--line,#dedcd5);box-shadow:0 10px 26px rgba(10,15,30,.06)} .mxj-st.is-on .d{display:block} .mxj-st.is-on .n{background:#e0468e;color:#fff} .mxj-st.is-done .n{background:var(--ink,#0a0f1e);color:var(--pink,#ff7cb9)} .mxj-st:focus-visible{outline:3px solid rgba(255,124,185,.5)} .mxj-play{all:unset;cursor:pointer;padding:12px 20px;border-radius:8px;border:1.5px solid var(--ink,#0a0f1e);font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;transition:background .2s,color .2s} .mxj-play:hover{background:var(--ink,#0a0f1e);color:#fff} .mx-board .mx-card{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start} .mx-board .mx-foot{grid-column:1/-1} .mxb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .mxb-job{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:18px;min-height:110px;padding:16px 18px;border-radius:14px;background:#fff;border:1.5px solid var(--line,#dedcd5);transition:background .2s,border-color .2s,transform .2s,box-shadow .2s} .mxb-job .n{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;color:#9a9eab} .mxb-job .k{margin-top:auto;font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:800;line-height:1.2} .mxb-job:hover{transform:translateY(-3px);border-color:#e0468e;box-shadow:0 10px 24px rgba(10,15,30,.07)} .mxb-job.is-on{background:var(--ink,#0a0f1e);border-color:var(--ink,#0a0f1e);color:#fff} .mxb-job.is-on .n{color:var(--pink,#ff7cb9)} .mxb-job:focus-visible{outline:3px solid rgba(255,124,185,.5)} .mxb-panel{position:sticky;top:110px;background:var(--pink-soft,#fdd0e4);border-radius:20px;padding:32px;min-height:230px} .mxb-n{margin:0 0 8px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#b0306d} .mxb-p>p:not([class]){margin:0;font-size:17px;line-height:1.55;color:#2b3042} @media (prefers-reduced-motion:reduce){.mx-card .is-in,.mxk-lines line.is-on{animation:none}} @media (max-width:900px){ .mx{padding:72px 0} .mx-card{padding:24px 18px;border-radius:20px} .mx-head{margin-bottom:28px} .mx-card h3{font-size:22px} .mxs-panel,.mxt-panel,.mxf-wrap,.mxj-wrap,.mx-quiz .mx-card,.mx-stack .mx-card,.mx-board .mx-card{grid-template-columns:1fr;gap:24px} .mxs-big{padding:22px;display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:end} .mxs-big .n{font-size:68px;grid-row:1/3} .mxs-big .t{grid-column:1/-1;margin-top:16px;padding-top:14px} .mxt-bar{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr 1fr;gap:6px} .mxt-btn{padding:12px} .mxt-btn .v{font-size:15px} .mxw-top{gap:12px} .mxw-l,.mxw-r{font-size:15px} .mxw-row{grid-template-columns:1fr;gap:6px;padding:14px 16px} .mxw-v p{font-size:17px} .mxf-bar{padding:14px 10px} .mxf-bar .v{display:none} .mxq-q{flex-wrap:wrap;gap:10px 12px;align-items:flex-start} .mxq-q p{flex-basis:calc(100% - 46px)} .mxq-a{margin-left:42px} .mxq-res{position:static} .mxk-map{height:360px} .mxk-node{font-size:13px;padding:9px 10px;max-width:108px} .mxk-node.is-hub{width:84px;height:84px;font-size:16px} .mxj-mail{padding:20px} .mxb-grid{grid-template-columns:1fr 1fr} .mxb-job{min-height:88px} .mxb-panel{position:static;min-height:0;padding:24px} .mx-stats{grid-template-columns:1fr} .mx-foot{flex-direction:column;align-items:stretch;text-align:center} .mx-cta{justify-content:center} .mxj-play{text-align:center} } /* end MST service interactives v1 */ /* MST mobile nav v1 */ @media (max-width: 900px) { .site-nav { gap: 0; padding: 8px var(--gutter) 28px; bottom: 0; max-height: none; overscroll-behavior: contain; } .site-nav .menu { gap: 0; } .site-nav .menu > li { border-bottom: 1px solid var(--line-dark); } .site-nav .menu > li > a { font-size: 22px; padding: 16px 0; } .site-nav .menu > li > a::after { display: none; } .site-nav .menu > li.current-menu-item > a, .site-nav .menu > li.current-menu-ancestor > a, .site-nav .menu > li.current-page-ancestor > a { color: var(--pink); } .site-nav .has-mega > .sub-menu { display: none !important; } .site-nav .has-mega > a { display: flex !important; align-items: center; justify-content: space-between; } .mnav-chev { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line-dark); transition: transform .3s ease, background .2s, border-color .2s; } .mnav-chev svg { width: 16px; height: 16px; } .has-mega.is-mopen .mnav-chev { transform: rotate(180deg); background: var(--pink); border-color: var(--pink); color: var(--ink); } .site-nav .has-mega > .mega { display: grid !important; grid-template-rows: 0fr; position: static; opacity: 1; visibility: visible; transform: none; padding: 0; transition: grid-template-rows .35s ease; } .site-nav .has-mega.is-mopen > .mega { grid-template-rows: 1fr; } .site-nav .mega-box { min-height: 0; overflow: hidden; border: 0; background: none; box-shadow: none; padding: 0; } .site-nav .mega-cols { display: grid; grid-template-columns: 1fr; gap: 18px; padding: 4px 0 18px; } .site-nav .mega-col { padding: 0; border: 0; } .site-nav .mega-head { margin: 0 0 6px; font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pink); } .site-nav .menu .mega-link { display: flex; align-items: center; gap: 12px; padding: 9px 0; margin: 0; font-family: var(--font-body); font-size: 16px; font-weight: 500; background: none; border: 0; } .site-nav .mega-ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,124,185,.12); color: var(--pink); } .site-nav .mega-ico svg { width: 16px; height: 16px; } .site-nav .mega-title { font-size: 16px; font-weight: 500; color: #fff; } .site-nav .mega-desc, .site-nav .mega-cta, .site-nav .mega-mammoth { display: none !important; } .site-nav .menu a.mega-all { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 10px 16px; border-radius: 8px; border: 1.5px solid var(--pink); color: var(--pink); font-family: var(--font-head); font-size: 15px; font-weight: 700; } .site-nav > .btn { margin-top: 24px; padding: 16px 24px; font-size: 16px; width: 100%; box-sizing: border-box; } .nav-is-open { overflow: hidden; } } @media (max-width: 900px) and (min-width: 560px) { .site-nav .mega-cols { grid-template-columns: 1fr 1fr; gap: 18px 28px; } } @media (min-width: 901px) { .mnav-chev, .site-nav a.mega-all { display: none !important; } } /* MST why mostadon v1 */ .why{background:var(--ink);color:#fff;padding:110px 0;position:relative;overflow:hidden} .why::before{content:"";position:absolute;inset:auto -10% -40% auto;width:60%;height:80%;background:radial-gradient(closest-side,rgba(255,124,185,.16),transparent);pointer-events:none} .why-top{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center;position:relative} .why-art{margin:0;border-radius:24px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45),0 0 0 1px rgba(255,124,185,.25)} .why-art img{display:block;width:100%;height:auto} .why-eyebrow{margin:0 0 14px;font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--pink)} .why-h2{margin:0 0 22px;font-family:var(--font-head);font-size:clamp(38px,4.4vw,58px);font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff} .why-h2 mark{background:none;color:var(--pink)} .why-copy p{margin:0 0 16px;font-size:17px;line-height:1.6;color:#c9cdd8} .why-copy .why-lead{font-size:19px;color:#fff} .why-copy .why-aside{padding:14px 18px;border-left:3px solid var(--pink);background:rgba(255,124,185,.08);border-radius:0 12px 12px 0;color:#fff;font-style:italic} .why-copy .why-pill{display:inline-block;margin:8px 0 0;padding:10px 18px;border-radius:99px;background:var(--pink);color:var(--ink);font-family:var(--font-head);font-weight:800;font-size:16px;transform:rotate(-2deg)} .why-traits{margin-top:72px;position:relative} .why-traits-h{margin:0 0 22px;font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;display:flex;align-items:center;gap:16px} .why-traits-h::after{content:"";flex:1;height:1px;background:var(--line-dark,#283048)} .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .why-card{padding:26px 24px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);transition:transform .25s,border-color .25s,background .25s} .why-card:hover{transform:translateY(-4px);border-color:rgba(255,124,185,.6);background:rgba(255,124,185,.07)} .why-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--pink);color:var(--pink);margin-bottom:18px} .why-ico svg{width:22px;height:22px} .why-card h3{margin:0 0 8px;font-family:var(--font-head);font-size:19px;font-weight:800;color:#fff;letter-spacing:-.01em} .why-card p{margin:0;font-size:15px;line-height:1.55;color:#c9cdd8} @media (max-width:1100px){.why-grid{grid-template-columns:1fr 1fr}} @media (max-width:900px){.why{padding:76px 0}.why-top{grid-template-columns:1fr;gap:32px}.why-traits{margin-top:48px}} @media (max-width:560px){.why-grid{grid-template-columns:1fr}.why-card{padding:22px 20px}} /* MST rolling stone v1 */ .hiw-stone{background:var(--pink-soft,#fdd0e4);padding:84px 0;overflow:hidden} .hiw-stone-in{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:center} .hiw-stone-eyebrow{margin:0 0 12px;font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#b0306d} .hiw-stone-h2{margin:0 0 18px;font-family:var(--font-head);font-size:clamp(36px,4.2vw,56px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink)} .hiw-stone-h2 mark{background:none;color:#e0468e} .hiw-stone-copy p:last-child{margin:0;max-width:640px;font-size:19px;line-height:1.55;color:#2b3042} .hiw-stone-art{width:100%;height:auto;mix-blend-mode:multiply} @media (max-width:900px){.hiw-stone{padding:64px 0}.hiw-stone-in{grid-template-columns:1fr;gap:24px}.hiw-stone-art{width:200px;justify-self:end;margin-top:-8px}} /* MST microcopy v1 */ .hero-404-ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .hero--404 .btn--outline{color:#fff;border-color:rgba(255,255,255,.6)} .hero--404 .btn--outline:hover{border-color:var(--pink);color:var(--pink)} .footer-legal{margin:0;padding:18px var(--gutter,24px) 26px;text-align:center;font-size:13px;color:#8a90a2;border-top:1px solid var(--line-dark,#283048)} /* MST why logo v1 */ .why-h2{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .28em} .why-h2 .why-logo{display:inline-block;height:.74em;width:auto;align-self:baseline;transform:translateY(.02em)} .why-h2 .why-logo .lg-a{fill:#FF7CB9} .why-h2 .why-logo .lg-b{fill:#fff} .why-h2 .why-q{margin-left:-.22em;color:var(--pink)} .why-copy .why-sign{margin:22px 0 0;padding-top:20px;border-top:1px solid var(--line-dark,#283048);font-family:var(--font-head);font-size:20px;font-weight:700;line-height:1.35;color:#fff} .why-copy .why-sign strong{display:block;margin-top:4px;font-size:clamp(24px,2.4vw,30px);font-weight:800;letter-spacing:-.02em;color:var(--pink)} .why-copy .why-sign .why-logo--sign{display:inline-block;height:.8em;width:auto;margin:0 .04em 0 .18em;vertical-align:baseline;transform:translateY(.02em)} .why-copy .why-sign .why-logo--sign .lg-a{fill:#FF7CB9} .why-copy .why-sign .why-logo--sign .lg-b{fill:#fff} /* MST brand guidelines v1 */ .brd{color:var(--ink)} .brd .brd-logo{display:block;width:100%;height:auto} .brd .brd-logo .lg-a{fill:#FF7CB9} .brd .brd-logo .lg-b{fill:#FAF9F5} .brd .brd-logo--light-bg .lg-b{fill:#0A0F1E} .brd .brd-logo--white .lg-a,.brd .brd-logo--white .lg-b{fill:#fff} .brd .brd-logo--navy .lg-a,.brd .brd-logo--navy .lg-b{fill:#0A0F1E} .brd .brd-logo--wrong .lg-a{fill:#3aa0ff}.brd .brd-logo--wrong .lg-b{fill:#f5a623} .brd-hero{background:var(--ink);color:#fff;padding:120px 0 56px;position:relative;overflow:hidden} .brd-hero::after{content:"";position:absolute;right:-10%;top:-30%;width:55%;height:120%;background:radial-gradient(closest-side,rgba(255,124,185,.16),transparent);pointer-events:none} .brd-hero-in{position:relative;z-index:1;max-width:860px} .brd-eyebrow{margin:0 0 16px;font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--pink)} .brd-h1{margin:0 0 22px;font-family:var(--font-head);font-size:clamp(44px,6vw,80px);font-weight:800;letter-spacing:-.045em;line-height:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .26em} .brd-h1-logo{display:inline-flex;align-items:baseline} .brd .brd-h1-logo .brd-logo{height:.74em;width:auto;transform:translateY(.02em)} .brd-lead{margin:0 0 22px;max-width:680px;font-size:19px;line-height:1.6;color:#c9cdd8} .brd-meta{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0;font-size:14px;color:#8a90a2} .brd-meta a{color:var(--pink)} .brd-toc{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin-top:48px;padding-top:28px;border-top:1px solid var(--line-dark)} .brd-toc a{padding:9px 16px;border-radius:99px;border:1.5px solid var(--line-dark);color:#fff;font-family:var(--font-head);font-weight:700;font-size:14px;text-decoration:none;transition:border-color .2s,color .2s,background .2s} .brd-toc a:hover{border-color:var(--pink);color:var(--pink)} .brd-sec{padding:96px 0;background:#fff;scroll-margin-top:80px} .brd-sec--paper{background:var(--paper)} .brd-sec--navy{background:var(--ink);color:#fff} .brd-head{display:grid;grid-template-columns:80px 1fr;gap:20px;align-items:start;margin-bottom:44px} .brd-num{margin:6px 0 0;font-family:var(--font-head);font-size:15px;font-weight:800;color:#e0468e;letter-spacing:.06em} .brd-sec--navy .brd-num{color:var(--pink)} .brd-h2{margin:0 0 10px;font-family:var(--font-head);font-size:clamp(36px,4.4vw,56px);font-weight:800;letter-spacing:-.04em;line-height:1} .brd-intro{margin:0;max-width:680px;font-size:18px;line-height:1.55;color:#4a5064} .brd-sec--navy .brd-intro{color:#c9cdd8} .brd-h3{margin:44px 0 16px;font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase} .brd-grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px} .brd-grid2--top{margin-top:20px} .brd-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px} .brd-sec--paper .brd-card{background:#fff} .brd-card h3{margin:0 0 10px;font-family:var(--font-head);font-size:21px;font-weight:800;letter-spacing:-.01em} .brd-card h3:not(:first-child){margin-top:24px} .brd-card p{margin:0;font-size:16px;line-height:1.6;color:#4a5064} .brd-card--dark{background:var(--ink)!important;border-color:var(--line-dark);color:#fff} .brd-sec--navy .brd-card--dark{background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.12)} .brd-card--dark p{color:#c9cdd8} .brd-lines{list-style:none;margin:0;padding:0;display:grid;gap:16px} .brd-lines li{font-family:var(--font-head);font-size:19px;font-weight:700;line-height:1.3;padding-bottom:16px;border-bottom:1px solid var(--line-dark)} .brd-lines li:last-child{border:0;padding:0} .brd-lines span{display:block;margin-bottom:4px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--pink)} .brd-values{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px} .brd-values div{padding:22px;border-radius:16px;background:var(--pink-soft)} .brd-values b{display:block;margin-bottom:6px;font-family:var(--font-head);font-size:18px;font-weight:800} .brd-values p{margin:0;font-size:15px;line-height:1.5;color:#2b3042} .brd-logos{display:grid;grid-template-columns:1fr 1fr;gap:20px} .brd-logo-tile{border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#fff} .brd-logo-stage{display:grid;place-items:center;height:220px;padding:0 60px} .brd-logo-stage .brd-logo{max-width:340px} .brd-logo-tile--dark-bg .brd-logo-stage{background:var(--ink)} .brd-logo-tile--light-bg .brd-logo-stage{background:#fff} .brd-logo-tile--white .brd-logo-stage{background:#FF7CB9} .brd-logo-tile--navy .brd-logo-stage{background:#FDD0E4} .brd-logo-meta{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;border-top:1px solid var(--line)} .brd-logo-meta p{margin:0;display:flex;flex-direction:column;gap:2px} .brd-logo-meta b{font-family:var(--font-head);font-size:16px} .brd-logo-meta span{font-size:14px;color:#6a7084} .brd-dl{display:flex;gap:8px} .brd-dl a,.brd-dl button{all:unset;cursor:pointer;padding:9px 14px;border-radius:8px;border:1.5px solid var(--ink);font-family:var(--font-head);font-weight:700;font-size:13px;transition:background .2s,color .2s} .brd-dl a:hover,.brd-dl button:hover{background:var(--ink);color:#fff} .brd-clear{margin-top:22px;display:grid;place-items:center;padding:30px;border-radius:14px;background:var(--ink)} .brd-clear-box{width:72%;padding:9%;outline:2px dashed rgba(255,124,185,.7);outline-offset:0;background:repeating-linear-gradient(45deg,rgba(255,124,185,.08) 0 8px,transparent 8px 16px)} .brd-clear-box .brd-logo{background:var(--ink)} .brd-min{margin-top:22px;display:flex;align-items:center;justify-content:center;height:140px;border-radius:14px;background:var(--paper)} .brd-min div{width:100px;display:flex;flex-direction:column;gap:10px;align-items:center} .brd-min span{font-size:12px;font-weight:600;color:#6a7084;border-top:1.5px solid #6a7084;width:100%;text-align:center;padding-top:4px} .brd-donts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .brd-dont{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff} .brd-dont-stage{display:grid;place-items:center;height:130px;padding:0 50px;background:#fff;overflow:hidden} .brd-dont-stage .brd-logo{max-width:220px} .brd-dont-stage > span{width:100%;max-width:160px} .brd-dont-stage--fx{background:var(--ink)} .brd-dont-stage--fx .brd-logo{filter:drop-shadow(0 0 10px #FF7CB9) drop-shadow(4px 4px 0 #3aa0ff)} .brd-dont-stage--pink{background:#FF7CB9} .brd-dont-type{font-family:Georgia,serif;font-style:italic;font-size:40px;color:#0A0F1E;text-align:center;display:block} .brd-dont p{margin:0;padding:14px 18px;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border-top:1px solid var(--line)} .brd-dont p svg,.brd-list--no svg,.brd-dont-col .brd-dd-h svg{width:22px;height:22px;padding:4px;box-sizing:border-box;border-radius:50%;background:#0A0F1E;color:#fff;flex:0 0 auto} .brd-sws{display:grid;gap:16px} .brd-sws--3{grid-template-columns:repeat(3,1fr)} .brd-sws--4{grid-template-columns:repeat(4,1fr)} .brd-sw{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#fff} .brd-sw-chip{height:150px;padding:18px 20px;box-sizing:border-box;display:flex;align-items:flex-end;font-family:var(--font-head);font-weight:800;font-size:20px} .brd-sws--4 .brd-sw-chip{height:110px;font-size:17px} .brd-sw--line .brd-sw-chip{border-bottom:1px solid var(--line)} .brd-sw-info{padding:16px 20px 18px} .brd-sw-role{margin:0 0 12px;font-size:14px;line-height:1.45;color:#4a5064;min-height:40px} .brd-sw dl{margin:0;display:grid;gap:6px} .brd-sw dl div{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:8px} .brd-sw dt{font-size:11px;font-weight:700;letter-spacing:.12em;color:#8a90a2} .brd-sw dd{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;font-weight:600} .brd-copy{all:unset;cursor:pointer;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:700;background:var(--paper);border:1px solid var(--line);transition:background .2s,color .2s} .brd-copy:hover{background:var(--ink);color:#fff} .brd-copy.is-copied{background:#FF7CB9;border-color:#FF7CB9;color:var(--ink)} .brd-ratio{display:flex;margin-top:18px;height:64px;border-radius:12px;overflow:hidden;border:1px solid var(--line)} .brd-ratio span{display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden} .brd-pairs{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px} .brd-pairs li{display:flex;align-items:center;gap:14px;font-size:15px;font-weight:500} .brd-pair{display:grid;place-items:center;width:52px;height:40px;border-radius:8px;font-family:var(--font-head);font-weight:800;font-size:18px;border:1px solid var(--line);flex:0 0 auto} .brd-type-name{margin:0;font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#e0468e} .brd-type-big{margin:8px 0 6px!important;font-family:var(--font-head);font-size:120px!important;font-weight:800;letter-spacing:-.05em;line-height:1!important;color:var(--ink)!important} .brd-type--body .brd-type-big{font-family:var(--font-body);font-weight:500} .brd-type-use{margin:0 0 20px!important} .brd-type-sample{margin:0 0 20px!important;font-family:var(--font-head);font-size:30px!important;font-weight:800;letter-spacing:-.035em;line-height:1.1!important;color:var(--ink)!important} .brd-type-sample mark,.brd-s1 mark,.brd-el-hl mark{background:none;color:#FF7CB9} .brd-type-sample2{margin:0 0 20px!important;font-size:19px!important;line-height:1.55!important;color:var(--ink)!important} .brd-link{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--ink);text-decoration:underline;text-decoration-color:#FF7CB9;text-decoration-thickness:2px;text-underline-offset:4px} .brd-scale{margin-top:20px;border-radius:20px;background:#fff;border:1px solid var(--line);overflow:hidden} .brd-scale-row{display:grid;grid-template-columns:140px 1fr 280px;gap:24px;align-items:center;padding:22px 28px;border-bottom:1px solid var(--line)} .brd-scale-row:last-child{border:0} .brd-scale-k{font-size:13px;font-weight:700;color:#8a90a2} .brd-scale-v{font-size:13px;color:#6a7084;text-align:right} .brd-s1{font-family:var(--font-head);font-size:52px;font-weight:800;letter-spacing:-.04em;line-height:1} .brd-s2{font-family:var(--font-head);font-size:36px;font-weight:800;letter-spacing:-.035em;line-height:1.05} .brd-s3{font-family:var(--font-head);font-size:22px;font-weight:800} .brd-s4{font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.2em;color:#e0468e} .brd-s5{font-size:17px;line-height:1.55} .brd-note{margin:20px 0 0;font-size:15px;color:#4a5064} .brd-note a{color:var(--ink);text-decoration-color:#FF7CB9} .brd-traits{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .brd-traits div{padding:24px;border-radius:18px;background:var(--ink);color:#fff} .brd-traits b{display:block;margin-bottom:8px;font-family:var(--font-head);font-size:19px;font-weight:800;color:#FF7CB9} .brd-traits p{margin:0;font-size:15px;line-height:1.5;color:#c9cdd8} .brd-dd{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px} .brd-do,.brd-dont-col{border-radius:20px;padding:28px} .brd-do{background:var(--pink-soft)} .brd-dont-col{background:var(--paper);border:1px solid var(--line)} .brd-dd-h{margin:0 0 14px;display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-size:18px;font-weight:800} .brd-do .brd-dd-h svg{width:24px;height:24px;padding:5px;box-sizing:border-box;border-radius:50%;background:#e0468e;color:#fff} .brd-do ul,.brd-dont-col ul{margin:0;padding:0 0 0 18px;display:grid;gap:10px;font-size:16px;line-height:1.45} .brd-dont-col ul{color:#6a7084} .brd-list{list-style:none;margin:0;padding:0;display:grid;gap:12px} .brd-list li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.45} .brd-list svg{flex:0 0 auto;width:24px;height:24px;padding:5px;box-sizing:border-box;border-radius:50%;background:#e0468e;color:#fff;margin-top:-1px} .brd-card--dark .brd-list li{color:#e3e5ec} .brd-sec--navy .brd-list--no svg{background:#fff;color:var(--ink)} .brd-words{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px!important} .brd-words span{padding:7px 14px;border-radius:99px;background:var(--pink-soft);font-weight:600;font-size:14px;color:var(--ink)} .brd-words--no span{background:var(--paper);color:#8a90a2;text-decoration:line-through} .brd-imgs{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:20px} .brd-imgs figure{margin:0;display:flex;flex-direction:column;gap:12px} .brd-imgs img{width:100%;height:280px;object-fit:cover;border-radius:18px;display:block} .brd-img-cut img{object-fit:contain;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);padding:24px;box-sizing:border-box} .brd-imgs figcaption{font-size:14px;color:#c9cdd8} .brd-els{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .brd-el{border:1px solid var(--line);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:12px;background:#fff} .brd-el-k{margin:0;font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#e0468e} .brd-el-stage{display:flex;flex-wrap:wrap;gap:10px;align-items:center;min-height:92px;padding:18px;border-radius:14px;background:var(--paper)} .brd-el-stage--navy{background:var(--ink)} .brd-el-v{margin:0;font-size:14px;line-height:1.5;color:#6a7084} .brd-btn{display:inline-flex;padding:13px 20px;border-radius:8px;background:#FF7CB9;color:var(--ink);font-family:var(--font-head);font-weight:700;font-size:15px} .brd-btn--ghost{background:none;border:1.5px solid rgba(255,255,255,.6);color:#fff} .brd-btn--navy{background:var(--ink);color:#fff} .brd-el-hl{margin:0;font-family:var(--font-head);font-size:26px;font-weight:800;letter-spacing:-.035em;line-height:1.1} .brd-el-eb{margin:0;font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase} .brd-el-card{padding:16px 18px;border-radius:14px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;gap:4px;box-shadow:0 10px 24px rgba(10,15,30,.06)} .brd-el-card b{font-family:var(--font-head);font-size:17px} .brd-el-card span{font-size:13px;color:#6a7084} .brd-el-tag{display:inline-block;padding:9px 16px;border-radius:99px;background:#FF7CB9;font-family:var(--font-head);font-weight:800;font-size:15px;transform:rotate(-2deg)} .brd-dls{display:grid;grid-template-columns:1fr 1fr;gap:12px} .brd-dlrow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;border-radius:14px;background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .2s,transform .2s} .brd-dlrow:hover{border-color:#FF7CB9;transform:translateY(-2px)} .brd-dlrow b{font-family:var(--font-head);font-size:17px} .brd-dlrow span{padding:6px 12px;border-radius:8px;background:var(--pink-soft);font-size:13px;font-weight:700} @media (max-width:1100px){.brd-sws--4,.brd-values,.brd-traits{grid-template-columns:1fr 1fr}.brd-els{grid-template-columns:1fr 1fr}.brd-scale-row{grid-template-columns:120px 1fr}.brd-scale-v{grid-column:2;text-align:left}} @media (max-width:900px){.brd-hero{padding:96px 0 40px}.brd-sec{padding:72px 0}.brd-head{grid-template-columns:1fr;gap:6px;margin-bottom:32px}.brd-grid2,.brd-logos,.brd-dd,.brd-dls,.brd-sws--3{grid-template-columns:1fr}.brd-donts{grid-template-columns:1fr 1fr}.brd-imgs{grid-template-columns:1fr 1fr}.brd-imgs figure:first-child{grid-column:1/-1}.brd-card{padding:24px}.brd-s1{font-size:36px}.brd-s2{font-size:28px}} @media (max-width:560px){.brd-sws--4,.brd-values,.brd-traits,.brd-els,.brd-donts,.brd-imgs{grid-template-columns:1fr}.brd-logo-stage{height:160px;padding:0 32px}.brd-logo-meta{flex-direction:column;align-items:flex-start}.brd-scale-row{grid-template-columns:1fr;gap:6px;padding:18px 20px}.brd-scale-v{grid-column:auto}.brd-ratio span{font-size:11px}.brd-type-big{font-size:88px!important}} .brd-fav{margin-top:20px;display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center} .brd-fav-icons{display:flex;align-items:flex-end;gap:18px} .brd-fav-icons span{display:block}.brd-fav-icons svg{display:block;width:100%;height:100%} .brd-fav-lg{width:120px;height:120px}.brd-fav-md{width:48px;height:48px}.brd-fav-sm{width:16px;height:16px} .brd-fav-dl{margin-top:14px!important} @media (max-width:700px){.brd-fav{grid-template-columns:1fr;gap:20px}} .hero-art--m705 img{object-position:center 18%!important} @media (max-width:900px){.hero-art--m705 img{object-position:center 20%!important}} /* MST slider beast v2 */ @media (min-width:901px){.hs2-beast{width:520px;bottom:150px}} .cta-band-art--m720 img{object-position:68% 12%!important} /* MST slider dust blend v1 */ .hs2-beast img{filter:none!important} .hs2-beast-shake{filter:drop-shadow(-24px 26px 34px rgba(0,0,0,calc(.15 + .3 * var(--t))))} .hs2-beast img{-webkit-mask-image:linear-gradient(to bottom,#000 70%,rgba(0,0,0,.6) 86%,transparent 99%);mask-image:linear-gradient(to bottom,#000 70%,rgba(0,0,0,.6) 86%,transparent 99%)} .hs2-beast-shake{position:relative} .hs2-beast-shake::before{content:"";position:absolute;z-index:-1;left:-22%;right:-22%;bottom:-10%;height:42%;background:radial-gradient(closest-side,rgba(255,124,185,.55),rgba(255,124,185,.22) 50%,rgba(255,124,185,0) 100%);opacity:calc(.25 + .75 * var(--t));transform:scale(calc(.7 + .5 * var(--t)));transform-origin:50% 100%;pointer-events:none} .hs2-beast-shake::after{content:"";position:absolute;z-index:-1;left:-8%;right:-8%;bottom:-2%;height:20%;background:radial-gradient(closest-side,rgba(253,208,228,.5),rgba(253,208,228,0));opacity:var(--t);pointer-events:none} /* MST gm chat v1 */ .gm-section.gm-chat-on .gm-qs,.gm-section.gm-chat-on .gm-grid,.gm-section.gm-chat-on.has-tiles .gm-qs{display:none!important} .gm-chat-on .gm-panel{background:var(--ink)!important;border:1px solid #283048!important;border-radius:24px!important;padding:0!important;overflow:hidden;box-shadow:0 30px 70px rgba(10,15,30,.18)!important} .gm-chat-on.gm-pending .gmc .gm-result,.gm-chat-on .gmc .gm-result{display:flex!important;margin:0!important} .gm-chat-on .gm-panel > .gm-result{display:none!important} .gmc{display:flex;flex-direction:column;min-height:500px;color:#fff;font-family:var(--font-body)} .gmc-head{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid #283048} .gmc-head img{width:58px;height:46px;object-fit:contain;flex:0 0 auto} .gmc-head b{display:block;font-family:var(--font-head);font-size:16px;font-weight:800} .gmc-head span{display:flex;align-items:center;gap:6px;font-size:13px;color:#8a90a2} .gmc-head span::before{content:"";width:8px;height:8px;border-radius:50%;background:#3ddc84} .gmc-restart{all:unset;cursor:pointer;margin-left:auto;font-size:13px;font-weight:600;color:#c9cdd8;padding:8px 12px;border-radius:8px;border:1px solid #283048} .gmc-restart:hover{color:#fff;border-color:var(--pink)} .gmc-log{flex:1;display:flex;flex-direction:column;gap:12px;padding:22px;max-height:520px;overflow-y:auto;scroll-behavior:smooth} .gmc-log > *{flex-shrink:0} .gmc-msg{margin:0;max-width:82%;padding:13px 17px;font-size:16px;line-height:1.45;animation:gmc-in .35s cubic-bezier(.2,.8,.2,1)} .gmc-bot{align-self:flex-start;background:#1d2740;border-radius:18px 18px 18px 6px} .gmc-me{align-self:flex-end;background:var(--pink);color:var(--ink);font-weight:600;border-radius:18px 18px 6px 18px} .gmc-card{align-self:stretch;max-width:none;padding:0;background:none;border-radius:20px;overflow:hidden} .gmc-card .gm-result{border-radius:20px} .gmc-typing{align-self:flex-start;display:flex;gap:5px;padding:16px 18px;background:#1d2740;border-radius:18px 18px 18px 6px} .gmc-typing i{width:7px;height:7px;border-radius:50%;background:#8a90a2;animation:gmc-dot 1s infinite} .gmc-typing i:nth-child(2){animation-delay:.15s}.gmc-typing i:nth-child(3){animation-delay:.3s} @keyframes gmc-dot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}} @keyframes gmc-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .gmc-replies{display:flex;flex-wrap:wrap;gap:10px;padding:18px 22px 22px;border-top:1px solid #283048;min-height:44px} .gmc-replies:empty{display:none} .gmc-reply{all:unset;box-sizing:border-box;cursor:pointer;padding:11px 18px;border-radius:99px;border:1.5px solid var(--pink);color:var(--pink);font-weight:600;font-size:15px;line-height:1.3;transition:background .2s,color .2s,transform .15s} .gmc-reply:hover,.gmc-reply:focus-visible{background:var(--pink);color:var(--ink)} .gmc-reply:active{transform:scale(.97)} .gmc-reply--ghost{border-color:#283048;color:#c9cdd8} .gmc-reply--ghost:hover{background:#1d2740;color:#fff} @media (max-width:700px){.gmc{min-height:0}.gmc-log{padding:16px;max-height:none}.gmc-msg{max-width:90%;font-size:15px}.gmc-replies{flex-direction:column;padding:14px 16px 16px;gap:8px}.gmc-reply{border-radius:12px;padding:13px 16px;width:100%}.gmc-head{padding:12px 16px}} @media (prefers-reduced-motion:reduce){.gmc-msg,.gmc-typing i{animation:none}} .gm-h2 mark{background:none;color:#e0468e} /* MST who art v2 */ @media (min-width:901px){ .wf-section .wf-audience{position:relative;min-height:580px;padding-bottom:0} .wf-section .wf-audience > *:not(.wf-panel),.wf-section .wf-copy{position:relative;z-index:2} .wf-section .wf-panel{display:block!important;position:static!important} .wf-section .wf-inner{grid-template-columns:minmax(0,1.32fr) minmax(0,1fr)!important} .wf-section .wf-panel{width:auto!important;max-width:none!important;padding-right:0!important;min-height:0!important} .wf-section .wf-copy{width:50%!important;max-width:none!important} .wf-section .wf-h3{max-width:none} .wf-section .wf-btn{white-space:nowrap} .wf-section .wf-pose{position:absolute!important;z-index:1;right:0;bottom:20px;left:auto;top:auto;width:100%!important;max-width:none!important;height:auto!important;margin:0!important;transform:none!important;filter:none!important;animation:none!important;pointer-events:none} } /* MST about copy narrow */ @media (min-width:901px){.about-home .about-home-copy p:not(.is-style-mst-eyebrow):not(.arrow-link){max-width:min(27vw,400px)!important}} /* MST svx sentence v1 */ .svx-pick--sentence{padding:clamp(24px,3vw,40px) clamp(20px,3.4vw,48px)} .svx-eb2{margin:0 0 14px;font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#e0468e} .svx-sent{margin:0;font-family:var(--font-head);font-weight:800;font-size:clamp(24px,2.7vw,38px);line-height:1.55;letter-spacing:-.03em;color:var(--ink,#0a0f1e)} .svx-blank{position:relative;display:inline-flex;align-items:center;gap:.35em;padding:.02em .55em .08em;margin:0 .05em;border-radius:.34em;background:#0a0f1e;color:#FF7CB9;white-space:nowrap;vertical-align:baseline;transition:background .2s,color .2s,box-shadow .2s} .svx-blank::after{content:"";width:.38em;height:.38em;border-right:.12em solid currentColor;border-bottom:.12em solid currentColor;transform:translateY(-.12em) rotate(45deg);flex:none} .svx-blank.is-empty{background:transparent;color:#8a90a2;box-shadow:inset 0 0 0 3px #d6d2c8;border-radius:.34em;background-image:none} .svx-blank.is-empty{outline:3px dashed #c9c6bd;outline-offset:-3px;box-shadow:none} .svx-blank:hover{box-shadow:0 0 0 4px rgba(255,124,185,.35)} .svx-blank:focus-within{box-shadow:0 0 0 4px rgba(255,124,185,.6)} .svx-sel{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;appearance:none;-webkit-appearance:none;border:0} .svx-pick--sentence .svx-msg{margin-top:18px;font-size:17px} .svx-pick--sentence .svx-msg:empty{display:none} @media (max-width:700px){ .svx-sent{font-size:23px;line-height:1.5} .svx-blank{white-space:normal;margin:.2em 0} } /* MST services hero v2 */ @media (min-width:901px){.hero-art--scene.hero-art--m758{width:100%;-webkit-mask-image:none;mask-image:none}} .hero .wp-block-image.hero-art--m758 img{object-position:right center} @media (max-width:900px){.hero-art--scene.hero-art--m758{opacity:.45}.hero .wp-block-image.hero-art--m758 img{object-position:72% center}} /* MST gt walker v2 */ .gt-walker { width: 196px; height: 134px; margin: -128px 0 0 -98px; } /* MST services hero v3 */ @media (min-width:901px){.hero-art--scene.hero-art--m758{width:calc(min(54%, 740px) + max(0px, (100% - 1264px) / 2));-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 180px);mask-image:linear-gradient(90deg,transparent 0,#000 180px)}.hero .wp-block-image.hero-art--m758 img{object-position:84% center}} /* MST speaking hero v1 */ .hero .wp-block-image.hero-art--m778 img{object-position:70% 20%} @media (min-width:901px){.hero-art--scene.hero-art--m778{width:calc(min(58%, 800px) + max(0px, (100% - 1264px) / 2));-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 200px);mask-image:linear-gradient(90deg,transparent 0,#000 200px)}} @media (max-width:900px){.hero-art--scene.hero-art--m778{opacity:.4}} .spk-feats{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:18px 34px} .spk-feats li{display:flex;align-items:center;gap:12px;margin:0;color:#c9cdd8;font-size:14px;line-height:1.35} .spk-feats svg{width:34px;height:34px;flex:none;fill:none;stroke:#FF7CB9;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .spk-feats b{display:block;color:#fff;font-family:var(--font-head);font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase} @media (max-width:600px){.spk-feats{flex-direction:column;gap:14px}} @media (min-width:901px){.hero-art--scene.hero-art--m778{width:calc(min(52%, 720px) + max(0px, (100% - 1264px) / 2))}} @media (max-width:900px){.hero .wp-block-image.hero-art--m778 img{object-position:32% 15%}} /* MST svx anchor v1 */ .svx,.service-grid{overflow-anchor:none} /* MST about hero scene v6 (navy, full scene) */ .ah2{background:#070c24;color:#fff} .ah2-h1{color:#fff} .ah2-h1 mark{color:#FF7CB9} .ah2-eyebrow{color:#FF7CB9} .ah2-lead,.ah2-text{color:#c9cdd8} .ah2-btn{background:#FF7CB9;color:#0a0f1e!important} .ah2-btn--ghost{background:transparent;color:#fff!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)} .ah2-btn:hover{background:#fff;color:#0a0f1e!important} .ah2-creds{box-shadow:0 18px 44px rgba(0,0,0,.35)} @media (min-width:1101px){.ah2-inner{min-height:800px}} .ah2 .ah2-art{background:url("/wp-content/uploads/2026/10/mostadon-about-hero-scene-v2.webp") no-repeat 62% 30% / cover;-webkit-mask-image:none;mask-image:none} @media (min-width:901px){.ah2 .ah2-art{inset:0;left:0;top:0;bottom:0;width:auto;height:auto;aspect-ratio:auto;transform:none;background-position:right center;background-size:cover}} @media (max-width:900px){.ah2 .ah2-art{height:80vw;background-size:auto 100%;background-position:88% center;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%);mask-image:linear-gradient(180deg,transparent 0,#000 12%)}} /* MST why pink v1 */ .why{background:#FF7CB9;color:#0a0f1e} .why::before{background:radial-gradient(closest-side,rgba(255,255,255,.35),transparent)} .why-art{box-shadow:0 30px 70px rgba(10,15,30,.35),0 0 0 1px rgba(10,15,30,.12)} .why-eyebrow{color:#0a0f1e} .why-h2{color:#0a0f1e} .why-h2 .why-logo .lg-a{fill:#fff} .why-h2 .why-logo .lg-b{fill:#0a0f1e} .why-h2 .why-q{color:#fff} .why-copy p{color:#2b2238} .why-copy .why-lead{color:#0a0f1e} .why-copy .why-aside{border-left-color:#0a0f1e;background:rgba(255,255,255,.35);color:#0a0f1e} .why-copy .why-sign{border-top-color:rgba(10,15,30,.2);color:#0a0f1e} .why-copy .why-sign strong{color:#0a0f1e} .why-copy .why-sign .why-logo--sign .lg-a{fill:#fff} .why-copy .why-sign .why-logo--sign .lg-b{fill:#0a0f1e} .why-traits-h{color:#0a0f1e} .why-traits-h::after{background:rgba(10,15,30,.2)} .why-card{background:#fff;border-color:transparent;box-shadow:0 12px 30px rgba(10,15,30,.08)} .why-card:hover{background:#fff;border-color:#0a0f1e} .why-ico{border-color:#e0468e;color:#e0468e} .why-card h3{color:#0a0f1e} .why-card p{color:#4a4f60} /* MST contact v2 */ .cm-copy{margin-left:10px;padding:4px 10px;border:1.5px solid #0a0f1e;border-radius:99px;background:transparent;font:700 12px var(--font-head);color:#0a0f1e;cursor:pointer;vertical-align:middle} .cm-copy.is-done{background:#0a0f1e;color:#FF7CB9} .cm-next{margin-top:30px;padding:24px 24px 8px;border-radius:18px;background:#0a0f1e;color:#fff;max-width:420px} .cm-next-h{margin:0 0 16px!important;font:700 12px var(--font-head);letter-spacing:.2em;text-transform:uppercase;color:#FF7CB9!important} .cm-next ol{list-style:none;margin:0;padding:0;position:relative} .cm-next ol::before{content:"";position:absolute;left:15px;top:8px;bottom:24px;border-left:2px dashed rgba(255,124,185,.45)} .cm-next li{position:relative;display:flex;gap:14px;margin:0 0 16px} .cm-num{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#0a0f1e;border:2px solid #FF7CB9;color:#FF7CB9;font:800 14px var(--font-head);position:relative;z-index:1} .cm-next li:first-child .cm-num{background:#FF7CB9;color:#0a0f1e} .cm-next b{display:block;font:800 16px var(--font-head);margin:4px 0 2px;color:#fff} .cm-next li p{margin:0;font-size:14px;line-height:1.5;color:#c9cdd8} html[data-cform] .message-section .contact-form{display:none} html[data-cform] .message-section .form-card{background:transparent!important;padding:0!important;box-shadow:none!important;border:0!important} .cm-mad{padding:clamp(24px,3vw,38px);border-radius:22px;background:#fff;box-shadow:0 22px 50px rgba(10,15,30,.08);border:1px solid #eeeae4} .cm-eb{margin:0 0 14px;font:700 12px var(--font-head);letter-spacing:.2em;text-transform:uppercase;color:#e0468e} .cm-sent{margin:0;font:800 clamp(22px,2.1vw,28px)/1.75 var(--font-head);letter-spacing:-.02em;color:#0a0f1e} .cm-in{font:inherit;color:#e0468e;background:transparent;border:0;border-bottom:3px dashed #c9c6bd;padding:0 4px;margin:0 2px;max-width:100%;outline:none;transition:border-color .2s} .cm-in::placeholder{color:#a3a7b5} .cm-in:focus{border-bottom-color:#FF7CB9;border-bottom-style:solid} .cm-in.is-filled{border-bottom:3px solid #0a0f1e} .cm-in.is-bad,.cm-blank.is-bad{outline:3px solid rgba(224,70,142,.5);outline-offset:2px;border-radius:6px} .cm-blank{position:relative;display:inline-flex;align-items:center;gap:.35em;padding:0 .5em .06em;margin:0 .05em;border-radius:.34em;background:#0a0f1e;color:#FF7CB9;white-space:nowrap} .cm-blank::after{content:"";width:.36em;height:.36em;border-right:.11em solid currentColor;border-bottom:.11em solid currentColor;transform:translateY(-.12em) rotate(45deg)} .cm-blank.is-empty{background:transparent;color:#8a90a2;outline:3px dashed #c9c6bd;outline-offset:-3px} .cm-blank select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px} .cm-more{display:block;margin-top:22px} .cm-more span{display:block;margin-bottom:8px;font:700 13px var(--font-head);color:#0a0f1e} .cm-more i{font-weight:500;color:#8a90a2} .cm-more textarea{width:100%;box-sizing:border-box;padding:12px 14px;border:1.5px solid #e1ded6;border-radius:12px;font:inherit;font-size:16px;resize:vertical;background:#fbfaf7} .cm-more textarea:focus{outline:none;border-color:#FF7CB9} .cm-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:18px} .cm-foot p{margin:0;font-size:13px;color:#6b7080} .cm-err{margin:10px 0 0;color:#e0468e;font-weight:600;font-size:14px;min-height:1px} .cm-tick{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#FF7CB9;color:#0a0f1e;font-size:28px;font-weight:800;animation:cmPop .5s cubic-bezier(.2,1.6,.4,1)} @keyframes cmPop{from{transform:scale(0)}to{transform:scale(1)}} .cm-done h3{margin:16px 0 6px;font:800 28px var(--font-head);letter-spacing:-.02em;color:#0a0f1e} .cm-done>p{margin:0 0 16px;color:#3d4254} .cm-done ul{list-style:none;margin:0 0 14px;padding:0;border-top:1px solid #eeeae4} .cm-done li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid #eeeae4;font-size:15px} .cm-done li span{color:#6b7080} .cm-again{display:inline-block;margin-top:4px;font:700 14px var(--font-head);text-decoration:underline;color:#0a0f1e} .cm-faq{background:#fff;padding:90px 0} .cm-faq-in{max-width:1264px;margin:0 auto;padding:0 var(--gutter,32px);box-sizing:border-box;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px} .cm-faq-head h2{margin:0 0 12px;font:800 clamp(30px,3.4vw,44px)/1.05 var(--font-head);letter-spacing:-.04em;color:#0a0f1e} .cm-faq-head mark{background:none;color:#e0468e} .cm-faq-head p:last-child{margin:0;color:#3d4254} .cm-faq-list details{border-bottom:1px solid #eeeae4} .cm-faq-list details:first-child{border-top:1px solid #eeeae4} .cm-faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font:800 19px var(--font-head);letter-spacing:-.01em;color:#0a0f1e} .cm-faq-list summary::-webkit-details-marker{display:none} .cm-faq-list summary:hover{color:#e0468e} .cm-pm{flex:none;position:relative;width:30px;height:30px;border-radius:50%;border:1.5px solid #FF7CB9} .cm-pm::before,.cm-pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:#e0468e;transform:translate(-50%,-50%);transition:transform .25s} .cm-pm::after{transform:translate(-50%,-50%) rotate(90deg)} details[open] .cm-pm{background:#FF7CB9} details[open] .cm-pm::after{transform:translate(-50%,-50%) rotate(0)} .cm-faq-list details p{margin:0 0 20px;max-width:620px;font-size:16px;line-height:1.6;color:#3d4254} @media (max-width:900px){ .cm-faq{padding:60px 0} .cm-faq-in{grid-template-columns:1fr;gap:24px;padding:0 20px} .cm-next{max-width:none} .cm-sent{font-size:21px;line-height:1.9} .cm-blank{white-space:normal} } /* MST hiw hero v1 (abstract + journey) */ .hero--hiw{position:relative;background:#0a0f1e url("/wp-content/uploads/2026/10/mostadon-how-i-work-hero.webp") no-repeat right center/cover!important;color:#fff} .hero--hiw .hero-art{display:none!important} .hero--hiw .hero-title{color:#fff!important} .hero--hiw .hero-text{color:#c9cdd8!important} .hero--hiw .is-style-mst-eyebrow{color:#FF7CB9!important} .hero--hiw mark{color:#FF7CB9!important} .hero--hiw .hero-inner{position:relative;z-index:2} .hero--hiw::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0a0f1e 0,rgba(10,15,30,.7) 40%,rgba(10,15,30,.1) 70%);z-index:1;pointer-events:none} .hwj{position:absolute;z-index:2;right:max(32px,calc((100% - 1264px)/2));top:50%;transform:translateY(-50%);width:330px;padding:22px 22px 8px;border-radius:20px;background:rgba(10,15,30,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,124,185,.3);box-shadow:0 20px 50px rgba(0,0,0,.4)} .hwj-h{margin:0 0 14px;font:700 12px var(--font-head);letter-spacing:.2em;text-transform:uppercase;color:#FF7CB9} .hwj ol{list-style:none;margin:0;padding:0;position:relative} .hwj ol::before{content:"";position:absolute;left:15px;top:10px;bottom:26px;border-left:2px dashed rgba(255,124,185,.5)} .hwj li{position:relative;display:grid;grid-template-columns:32px 1fr;column-gap:12px;margin:0 0 14px;opacity:0;transform:translateX(16px);animation:hwjIn .5s calc(.3s + var(--i)*.18s) forwards} @keyframes hwjIn{to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.hwj li{animation:none;opacity:1;transform:none}} .hwj-n{grid-row:span 2;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#0a0f1e;border:2px solid #FF7CB9;color:#FF7CB9;font:800 14px var(--font-head);position:relative;z-index:1} .hwj b{font:800 16px var(--font-head);color:#fff;line-height:1.2} .hwj i{font-style:normal;font-size:13px;color:#a3a7b5} .hwj-end .hwj-n{background:#FF7CB9;color:#0a0f1e} .hwj-end b{color:#FF7CB9} @media (min-width:901px){.hero--hiw .hero-title{max-width:11.5ch}} @media (max-width:900px){.hero--hiw{background-size:auto 55%!important;background-position:75% bottom!important}.hero--hiw::before{background:linear-gradient(180deg,#0a0f1e 45%,rgba(10,15,30,0) 75%)}.hwj{position:relative;right:auto;top:auto;transform:none;width:auto;margin:24px 20px 28px}} /* MST about hero v7 (halo + interactive) */ html .ah2{background:#0a1020!important;--px:0px;--bx:0px;--abs:0px} @media (min-width:1500px){html .ah2{--abs:70px}} html .ah2 .ah2-art{-webkit-mask-image:none!important;mask-image:none!important;background-color:transparent!important;background-repeat:no-repeat!important;background-image:url("/wp-content/uploads/2026/10/mostadon-simon-waist-up-v3.webp"),url("/wp-content/uploads/2026/10/mostadon-about-hero-halo.webp")!important} @media (min-width:901px){ html .ah2 .ah2-art{inset:0!important;left:0!important;width:auto!important;height:auto!important;transform:none!important;aspect-ratio:auto!important;background-size:auto 90%,cover!important;background-position:calc(82% - var(--abs) + var(--px)) bottom,calc(100% + var(--bx)) center!important} html .ah2 .ah2-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0a1020 0,rgba(10,16,32,.6) 32%,rgba(10,16,32,0) 48%)} html .ah2 .ah2-creds{left:calc(50% - 50vw)!important;right:calc(50% - 50vw)!important;bottom:0!important;border-radius:0!important;grid-template-columns:1fr!important;box-shadow:none!important;z-index:4} } @media (max-width:900px){ html .ah2 .ah2-art{height:100vw!important;background-size:auto 96%,auto 100%!important;background-position:50% bottom,80% center!important;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%)!important;mask-image:linear-gradient(180deg,transparent 0,#000 10%)!important} } html .ah2-cred:not(.ah2-cred--stat){display:none!important} html .ah2 .ah2-creds{background:#FF7CB9!important} html .ah2 .ah2-cred--stat{background:#FF7CB9!important;justify-content:center;padding:16px 22px!important;grid-column:1/-1} html .ah2 .ah2-cred--stat p{font:600 16px/1.4 var(--font-head)!important;color:#0a0f1e!important;text-align:center} html .ah2 .ah2-cred--stat span{color:#fff!important} .abe-chips{position:absolute;inset:0;z-index:3;pointer-events:none} .abe-chip{position:absolute;display:flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;border-radius:16px;background:rgba(10,16,32,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,124,185,.45);box-shadow:0 14px 30px rgba(0,0,0,.4);color:#fff;pointer-events:auto;opacity:0;animation:abeIn .6s calc(.4s + var(--i)*.18s) forwards,abeFloat 6s calc(1.2s + var(--i)*.6s) ease-in-out infinite;transform:translateX(var(--cx,0));transition:transform .3s ease-out,border-color .2s} .abe-chip:hover{border-color:#FF7CB9} .abe-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#FF7CB9;color:#0a0f1e;font:800 13px var(--font-head)} .abe-ic svg{width:20px;height:20px} .abe-chip strong{display:block;font:800 15px/1.2 var(--font-head);white-space:nowrap} .abe-chip small{display:block;margin-top:2px;font-size:12px;line-height:1.3;color:#b9bdca;white-space:nowrap} @keyframes abeIn{from{opacity:0;margin-top:14px}to{opacity:1;margin-top:0}} @keyframes abeFloat{50%{margin-top:-8px}} @media (prefers-reduced-motion:reduce){.abe-chip{animation:none;opacity:1}} @media (max-width:900px){ .abe-chips{position:relative;inset:auto;order:99;display:grid;grid-template-columns:1fr;gap:10px;padding:22px 20px 32px;margin:0} .abe-chip{position:static;animation:abeIn .6s calc(.2s + var(--i)*.12s) forwards} .abe-chip small{white-space:normal} } /* MST contact hero v3 (speed streaks + chips + quick pick) */ .hero--contact{position:relative;overflow:hidden;background-color:#0a1020!important;background-image:url("/wp-content/uploads/2026/10/mostadon-contact-portrait-cutout.webp"),url("/wp-content/uploads/2026/10/mostadon-how-i-work-hero.webp")!important;background-repeat:no-repeat!important;background-size:auto 95%,cover!important;background-position:58% bottom,right center!important} .hero--contact .hero-portrait-img{visibility:hidden} .hero--contact::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0a1020 0,rgba(10,16,32,.75) 35%,rgba(10,16,32,0) 55%);pointer-events:none} .hero--contact .hero-inner{position:relative;z-index:2} .hero--contact .hero-portrait-img img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 78%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 78%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%);mask-composite:intersect} .hero--contact .hero-portrait-note p{text-shadow:0 0 12px #0a1020,0 0 4px #0a1020,0 2px 2px #0a1020} .cth-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;border-radius:16px;background:rgba(10,16,32,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,124,185,.45);box-shadow:0 14px 30px rgba(0,0,0,.4);color:#fff;opacity:0;animation:cthIn .6s calc(.4s + var(--i)*.2s) forwards,cthFloat 6s calc(1.2s + var(--i)*.6s) ease-in-out infinite;transform:translateX(var(--cx,0));transition:transform .3s ease-out,border-color .2s} .cth-chip:hover{border-color:#FF7CB9} @keyframes cthIn{from{opacity:0;margin-top:14px}to{opacity:1;margin-top:0}} @keyframes cthFloat{50%{margin-top:-8px}} .cth-ic{flex:none;position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#FF7CB9;color:#0a0f1e;font:800 18px var(--font-head)} .cth-ic svg{width:20px;height:20px} .cth-chip strong{display:block;font:800 15px/1.2 var(--font-head);white-space:nowrap} .cth-chip small{display:block;margin-top:2px;font-size:12px;color:#b9bdca;white-space:nowrap} .cth-chip--name strong{font:400 19px/1.15 "Permanent Marker","Comic Sans MS",cursive;color:#FF7CB9;letter-spacing:.02em} .cth-chip--name small{font:400 12px/1.3 "Permanent Marker","Comic Sans MS",cursive;color:#fff;letter-spacing:.03em} .cth-live{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;background:#22c55e;border:2px solid #0a1020;animation:cthPulse 2s infinite} @keyframes cthPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.7)}70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}} @media (prefers-reduced-motion:reduce){.cth-chip{animation:none;opacity:1}} .cth-pick{margin:26px 0 22px} .cth-pick p{margin:0 0 10px;font:700 12px var(--font-head);letter-spacing:.2em;text-transform:uppercase;color:#FF7CB9} .cth-pick div{display:flex;flex-wrap:wrap;gap:8px;max-width:520px} .cth-pick button{padding:9px 15px;border-radius:99px;border:1.5px solid rgba(255,124,185,.55);background:rgba(10,16,32,.5);color:#fff;font:700 14px var(--font-head);cursor:pointer;transition:background .2s,color .2s,transform .2s} .cth-pick button:hover,.cth-pick button:focus-visible{background:#FF7CB9;color:#0a0f1e;transform:translateY(-2px);outline:none} @media (min-width:901px){.hero--contact .hero-portrait-note{display:none!important}} @media (max-width:900px){.cth-chip{display:none}.hero--contact{background-size:auto 380px,auto 520px!important;background-position:50% bottom,72% bottom!important}.hero--contact::before{background:linear-gradient(180deg,#0a1020 0,#0a1020 calc(100% - 560px),rgba(10,16,32,0) calc(100% - 380px))}} /* MST email better v1 (email marketing page) */ .emx{background:#f7f5f1;padding:96px 0} .emx-in{max-width:1264px;margin:0 auto;padding:0 var(--gutter,32px);box-sizing:border-box} .emx-eb{margin:0 0 12px;font:700 12px var(--font-head);letter-spacing:.2em;text-transform:uppercase;color:#e0468e} .emx h2{margin:0 0 10px;font:800 clamp(30px,3.4vw,46px)/1.05 var(--font-head);letter-spacing:-.04em;color:#0a0f1e} .emx-lead{margin:0 0 28px;font-size:17px;color:#3d4254} .emx-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:26px} .emx-tabs button{padding:16px 12px;border-radius:14px;border:1.5px solid #e6e2da;background:#fff;font:800 16px var(--font-head);color:#0a0f1e;cursor:pointer;transition:all .2s;position:relative} .emx-tabs button:hover{border-color:#FF7CB9} .emx-tabs button.on{background:#FF7CB9;border-color:#FF7CB9;box-shadow:0 12px 26px rgba(255,124,185,.35)} .emx-tabs button.on::after{content:"";position:absolute;left:50%;bottom:-8px;width:14px;height:14px;background:#FF7CB9;transform:translateX(-50%) rotate(45deg);border-radius:2px} .emx-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:stretch} .emx-mail{display:flex;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 22px 50px rgba(10,15,30,.08)} .emx-side{flex:none;width:58px;background:#0a0f1e;display:flex;flex-direction:column;align-items:center;gap:22px;padding-top:24px;color:#FF7CB9} .emx-side svg{width:22px;height:22px} .emx-body{flex:1;padding:28px 32px 28px;min-height:330px;transition:all .3s} .emx-to{margin:0 0 10px;font-size:14px;color:#6b7080} .emx-subj{margin:0 0 18px;font:800 20px/1.3 var(--font-head);color:#0a0f1e;transition:all .3s} .emx-txt{margin:0 0 22px;font-size:16px;line-height:1.6;color:#3d4254;transition:all .3s} .emx-txt b{color:#e0468e;font-weight:700} .emx-cta{display:inline-block;padding:14px 22px;border-radius:10px;background:#FF7CB9;color:#0a0f1e;font:800 15px var(--font-head);transition:all .3s} .emx-cta.lz{padding:0;background:none;color:#6b7080;font:500 14px var(--font-body,inherit);text-decoration:underline} .emx-subj.lz{font-weight:500;font-size:16px;color:#6b7080} .emx-txt.lz{font-size:12px;line-height:1.35;color:#8a90a2;letter-spacing:-.01em} .emx-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px} .emx-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;font:700 12px var(--font-head);background:#f1eee8;color:#8a90a2;transition:all .3s} .emx-pill.ok{background:#fde4ef;color:#c2306f} .emx-pop{animation:emxPop .4s ease-out} @keyframes emxPop{from{transform:scale(.97);opacity:.4}to{transform:none;opacity:1}} .emx-list{margin:0;padding:26px 28px;list-style:none;border-radius:20px;background:#fff;box-shadow:0 22px 50px rgba(10,15,30,.06)} .emx-list li{display:flex;align-items:center;gap:14px;padding:11px 0;font-size:16px;color:#0a0f1e;border-bottom:1px solid #f1eee8;opacity:.35;transition:opacity .3s} .emx-list li:last-child{border-bottom:0} .emx-list li.on{opacity:1} .emx-tick{flex:none;width:28px;height:28px;border-radius:50%;border:2px solid #FF7CB9;display:grid;place-items:center;color:#e0468e;transform:scale(.6);transition:transform .35s cubic-bezier(.2,1.6,.4,1),background .3s} .emx-tick svg{width:15px;height:15px;opacity:0;transition:opacity .2s} .emx-list li.on .emx-tick{transform:scale(1);background:#fde4ef} .emx-list li.on .emx-tick svg{opacity:1} .emx-rate{margin-top:40px} .emx-rate-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:16px} .emx-rate h3{margin:0;font:800 20px var(--font-head);color:#0a0f1e} .emx-verdict{font:800 18px var(--font-head);color:#e0468e} .emx-rate input{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:linear-gradient(90deg,#FF7CB9 var(--v,0%),#f3cfe0 var(--v,0%));outline:none;margin:0} .emx-rate input::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:44px;border-radius:50%;background:#FF7CB9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0f1e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center/20px;border:4px solid #fff;box-shadow:0 8px 20px rgba(224,70,142,.45);cursor:grab} .emx-rate input::-moz-range-thumb{width:36px;height:36px;border-radius:50%;background:#FF7CB9;border:4px solid #fff;cursor:grab} .emx-ends{display:flex;justify-content:space-between;margin-top:14px;font:700 14px var(--font-head);color:#0a0f1e} .emx-hint{margin:10px 0 0;font-size:14px;color:#6b7080} @media (max-width:900px){.emx{padding:64px 0}.emx-in{padding:0 20px}.emx-tabs{grid-template-columns:1fr 1fr}.emx-grid{grid-template-columns:1fr}.emx-body{padding:22px}} /* MST support picker v1 (marketing support page) */ .msx{background:#f7f5f1;padding:96px 0} .msx-in{max-width:1264px;margin:0 auto;padding:0 var(--gutter,32px);box-sizing:border-box;position:relative} .msx-eb{margin:0 0 12px;font:700 12px var(--font-head);letter-spacing:.2em;text-transform:uppercase;color:#e0468e} .msx h2{margin:0 0 10px;font:800 clamp(30px,3.4vw,46px)/1.05 var(--font-head);letter-spacing:-.04em;color:#0a0f1e} .msx-lead{margin:0 0 30px;font-size:17px;color:#3d4254} .msx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .msx-grid button{display:flex;align-items:center;gap:12px;padding:22px 20px;border-radius:16px;border:1.5px solid #e6e2da;background:#fff;font:800 17px var(--font-head);color:#0a0f1e;cursor:pointer;text-align:left;transition:all .2s;box-shadow:0 10px 24px rgba(10,15,30,.04)} .msx-grid button:hover{border-color:#FF7CB9;transform:translateY(-2px)} .msx-grid button.on{background:#FF7CB9;border-color:#FF7CB9;box-shadow:0 14px 30px rgba(255,124,185,.4)} .msx-ck{flex:none;width:26px;height:26px;border-radius:8px;border:2px solid #FF7CB9;display:grid;place-items:center;color:#0a0f1e;transition:all .2s} .msx-ck svg{width:15px;height:15px;opacity:0;transform:scale(.4);transition:all .25s cubic-bezier(.2,1.6,.4,1)} .msx-grid button.on .msx-ck{background:#fff;border-color:#fff} .msx-grid button.on .msx-ck svg{opacity:1;transform:none} .msx-note{position:absolute;right:calc(var(--gutter,32px) + 2%);margin-top:-86px;display:flex;align-items:flex-end;gap:10px;font:400 26px/1.15 "Permanent Marker","Comic Sans MS",cursive;color:#e0468e;transform:rotate(-5deg);pointer-events:none} .msx-note svg{width:70px;height:56px;color:#e0468e;margin-bottom:22px} .msx-res{margin-top:110px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:30px;padding:34px 40px;border-radius:22px;background:#fde4ef;overflow:hidden;transition:background .3s} .msx-res h3{margin:0 0 8px;font:800 clamp(22px,2.2vw,28px)/1.2 var(--font-head);letter-spacing:-.02em;color:#0a0f1e} .msx-res p{margin:0 0 18px;font-size:17px;color:#3d4254;max-width:620px} .msx-pick{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0;list-style:none} .msx-pick li{padding:5px 12px;border-radius:99px;background:#fff;font:700 13px var(--font-head);color:#0a0f1e} .msx-go{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:10px;background:#0a0f1e;color:#fff;font:800 15px var(--font-head);text-decoration:none} .msx-go[aria-disabled="true"]{opacity:.35;pointer-events:none} .msx-mm{width:200px;height:auto;display:block;transition:transform .5s cubic-bezier(.2,1.4,.4,1)} .msx-res.bump .msx-mm{animation:msxBump .5s} @keyframes msxBump{30%{transform:translateY(-10px) rotate(-3deg)}60%{transform:translateY(0) rotate(1deg)}} .msx-swap{animation:msxIn .35s ease-out} @keyframes msxIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media (max-width:900px){.msx{padding:64px 0}.msx-in{padding:0 20px}.msx-grid{grid-template-columns:1fr 1fr}.msx-grid button{padding:16px 14px;font-size:15px}.msx-note{position:static;margin:18px 0 0;font-size:21px;justify-content:flex-end}.msx-note svg{display:none}.msx-res{margin-top:30px;grid-template-columns:1fr;padding:26px 22px}.msx-mm{width:140px;justify-self:end}} #message{scroll-margin-top:90px} /* MST contact name arrow */ .cth-arrow{position:absolute;right:calc(100% + 4px);top:44%;width:120px;height:70px;overflow:visible;pointer-events:none;color:#FF7CB9} .cth-arrow path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:220;stroke-dashoffset:220;animation:cthDraw .9s 1.1s ease-out forwards} .cth-arrow path+path{stroke-dasharray:40;stroke-dashoffset:40;animation-delay:1.9s;animation-duration:.3s} @keyframes cthDraw{to{stroke-dashoffset:0}} @media (prefers-reduced-motion:reduce){.cth-arrow path{animation:none;stroke-dashoffset:0}} /* MST specialisms v1 (hub + 10 pages) */ .hero .hero-art.spx-art{position:absolute;top:0;right:0;bottom:0;height:auto;width:calc(min(56%,760px) + max(0px,(100% - 1264px) / 2));opacity:1;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 180px);mask-image:linear-gradient(90deg,transparent 0,#000 180px);margin:0;overflow:hidden} .hero .hero-art.spx-art img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:right center;opacity:1} @media (max-width:900px){.hero .hero-art.spx-art{position:relative;width:100%;height:56vw;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%)}} .spx-on .who-row{cursor:pointer;border-radius:14px;transition:background .2s,transform .2s;position:relative;padding-right:44px} .spx-on .who-row:hover{background:rgba(255,124,185,.08)} .spx-on .who-row::after{content:"";position:absolute;right:12px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:7px;border:2px solid rgba(255,124,185,.6);transition:all .2s} .spx-on .who-row.on{background:rgba(255,124,185,.14)} .spx-on .who-row.on::after{background:#FF7CB9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0f1e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") no-repeat center/14px;border-color:#FF7CB9} .spx-who{margin-top:28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 22px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,124,185,.3)} .spx-whohead .spx-who{margin-top:26px;max-width:420px} .spx-who .spx-meter{flex:1;min-width:160px;height:8px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden} .spx-who .spx-meter i{display:block;height:100%;width:0;background:#FF7CB9;border-radius:99px;transition:width .4s cubic-bezier(.2,1.2,.4,1)} .spx-who p{margin:0;font:700 16px var(--font-head);color:#fff} .spx-who a{padding:11px 18px;border-radius:10px;background:#FF7CB9;color:#0a0f1e;font:800 14px var(--font-head);text-decoration:none;opacity:.35;pointer-events:none;transition:opacity .3s} .spx-who a.ok{opacity:1;pointer-events:auto} .spx{background:#f7f5f1;padding:96px 0} .spx-in{max-width:1264px;margin:0 auto;padding:0 var(--gutter,32px);box-sizing:border-box} .spx-eb{margin:0 0 12px;font:700 12px var(--font-head);letter-spacing:.2em;text-transform:uppercase;color:#e0468e} .spx h2{margin:0 0 10px;font:800 clamp(30px,3.4vw,46px)/1.05 var(--font-head);letter-spacing:-.04em;color:#0a0f1e} .spx-lead{margin:0 0 30px;font-size:17px;color:#3d4254} .spx-card{background:#fff;border-radius:20px;box-shadow:0 22px 50px rgba(10,15,30,.07)} .spx-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:10px;background:#0a0f1e;color:#fff;font:800 15px var(--font-head);text-decoration:none;border:0;cursor:pointer} .spx-res{margin-top:24px;padding:28px 32px;border-radius:20px;background:#fde4ef} .spx-res h3{margin:0 0 8px;font:800 24px/1.2 var(--font-head);color:#0a0f1e} .spx-res p{margin:0 0 16px;font-size:16px;color:#3d4254;max-width:680px} .spx-swap{animation:spxIn .35s ease-out} @keyframes spxIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .spx-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-bottom:1px solid #f1eee8} .spx-q:last-child{border-bottom:0} .spx-q span{font:700 17px/1.4 var(--font-head);color:#0a0f1e} .spx-yn{display:flex;gap:6px;flex:none} .spx-yn button{padding:8px 16px;border-radius:99px;border:1.5px solid #e6e2da;background:#fff;font:800 14px var(--font-head);cursor:pointer;color:#0a0f1e} .spx-yn button.on{background:#FF7CB9;border-color:#FF7CB9} .spx-yn button.on.no{background:#0a0f1e;border-color:#0a0f1e;color:#fff} .spx-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .spx-tiles button{display:flex;align-items:center;gap:12px;padding:20px;border-radius:16px;border:1.5px solid #e6e2da;background:#fff;font:800 16px var(--font-head);color:#0a0f1e;cursor:pointer;text-align:left;transition:all .2s} .spx-tiles button:hover{border-color:#FF7CB9;transform:translateY(-2px)} .spx-tiles button.on{background:#FF7CB9;border-color:#FF7CB9;box-shadow:0 14px 30px rgba(255,124,185,.4)} .spx-ck{flex:none;width:24px;height:24px;border-radius:7px;border:2px solid #FF7CB9;display:grid;place-items:center} .spx-tiles button.on .spx-ck{background:#fff;border-color:#fff} .spx-ck svg{width:14px;height:14px;opacity:0} .spx-tiles button.on .spx-ck svg,.spx-chk.on .spx-ck svg{opacity:1} .spx-sw{display:inline-flex;padding:5px;border-radius:99px;background:#fff;box-shadow:0 10px 24px rgba(10,15,30,.06);margin-bottom:22px;position:relative} .spx-sw button{position:relative;z-index:1;padding:12px 22px;border:0;background:none;border-radius:99px;font:800 15px var(--font-head);color:#6b7080;cursor:pointer;transition:color .25s} .spx-sw button.on{color:#0a0f1e} .spx-sw i{position:absolute;top:5px;bottom:5px;left:5px;border-radius:99px;background:#FF7CB9;transition:all .35s cubic-bezier(.2,1.2,.4,1)} .spx-cmp .spx-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px;align-items:center;padding:18px 26px;border-bottom:1px solid #f1eee8} .spx-cmp .spx-row:last-child{border-bottom:0} .spx-cmp .spx-row b{font:800 15px var(--font-head);color:#6b7080;text-transform:uppercase;letter-spacing:.06em} .spx-cmp .spx-val{display:flex;align-items:center;gap:12px;font:700 18px/1.35 var(--font-head);color:#0a0f1e} .spx-cmp .spx-val i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;background:#f1eee8;color:#8a90a2} .spx-cmp.is-b .spx-val i{background:#FF7CB9;color:#0a0f1e} .spx-cmp.is-a .spx-val{color:#6b7080} .spx-tabpanel{padding:30px 34px} .spx-tabpanel ol{margin:0;padding:0;list-style:none;counter-reset:s} .spx-tabpanel li{counter-increment:s;display:flex;gap:16px;align-items:center;padding:14px 0;font:700 19px/1.35 var(--font-head);color:#0a0f1e;border-bottom:1px solid #f1eee8} .spx-tabpanel li:last-child{border-bottom:0} .spx-tabpanel li::before{content:counter(s);flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#0a0f1e;color:#FF7CB9;font-size:15px} .spx-flips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .spx-flip{display:block;width:100%;perspective:1000px;height:190px;border:0;background:none;padding:0;cursor:pointer;font:inherit} .spx-fi{display:block;position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.8,.3,1);transform-style:preserve-3d} .spx-flip.on .spx-fi{transform:rotateY(180deg)} .spx-fa,.spx-fb{position:absolute;inset:0;border-radius:18px;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:24px;text-align:left;box-sizing:border-box} .spx-fa{background:#fff;box-shadow:0 16px 36px rgba(10,15,30,.07);font:800 19px/1.3 var(--font-head);color:#0a0f1e} .spx-fb{background:#0a0f1e;color:#fff;transform:rotateY(180deg);font:800 21px/1.3 var(--font-head)} .spx-fb b{color:#FF7CB9} .spx-fa small,.spx-fb small{font:700 12px var(--font-head);letter-spacing:.14em;text-transform:uppercase;color:#e0468e} .spx-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;position:relative;margin-bottom:22px} .spx-steps::before{content:"";position:absolute;left:4%;right:4%;top:24px;height:3px;background:#f3cfe0} .spx-steps button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;border:0;background:none;cursor:pointer;font:800 14px/1.25 var(--font-head);color:#6b7080;text-align:center;padding:0} .spx-steps button span{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#fff;border:3px solid #f3cfe0;color:#e0468e;font-size:17px;transition:all .25s} .spx-steps button.done span{border-color:#FF7CB9} .spx-steps button.on{color:#0a0f1e} .spx-steps button.on span{background:#FF7CB9;border-color:#FF7CB9;color:#0a0f1e;transform:scale(1.12);box-shadow:0 10px 24px rgba(255,124,185,.45)} .spx-stepbody{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:30px 34px} .spx-stepbody h3{margin:0 0 8px;font:800 26px var(--font-head);color:#0a0f1e} .spx-stepbody p{margin:0;font-size:17px;line-height:1.55;color:#3d4254} .spx-metric{padding:14px 18px;border-radius:14px;background:#fde4ef;font:700 14px var(--font-head);color:#0a0f1e;max-width:240px} .spx-metric small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#c2306f;margin-bottom:4px} .spx-nav{display:flex;gap:10px;padding:0 34px 28px} .spx-nav button{padding:10px 16px;border-radius:10px;border:1.5px solid #e6e2da;background:#fff;font:800 14px var(--font-head);cursor:pointer} .spx-chk{display:flex;align-items:center;gap:14px;width:100%;padding:18px 24px;border:0;border-bottom:1px solid #f1eee8;background:none;text-align:left;cursor:pointer;font:700 18px var(--font-head);color:#0a0f1e} .spx-chk:last-child{border-bottom:0} .spx-chk.on .spx-ck{background:#FF7CB9;border-color:#FF7CB9} .spx-prog{display:flex;align-items:center;gap:14px;margin:22px 0 0} .spx-prog .spx-meter{flex:1;height:8px;border-radius:99px;background:#f3cfe0;overflow:hidden} .spx-prog .spx-meter i{display:block;height:100%;width:0;background:#FF7CB9;transition:width .4s} .spx-prog b{font:800 16px var(--font-head);color:#0a0f1e} .spx-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px} .spx-chips p{width:100%;margin:0 0 6px;font:700 13px var(--font-head);letter-spacing:.16em;text-transform:uppercase;color:#e0468e} .spx-chips button{padding:11px 18px;border-radius:99px;border:1.5px solid #e6e2da;background:#fff;font:800 15px var(--font-head);color:#0a0f1e;cursor:pointer;transition:all .2s} .spx-chips button:hover{border-color:#FF7CB9} .spx-chips button.on{background:#FF7CB9;border-color:#FF7CB9} .spx-on .card-grid .mst-card{transition:transform .25s,box-shadow .25s,opacity .3s,filter .3s} .spx-on .card-grid .mst-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(10,15,30,.1)} .spx-on .card-grid.spx-filter .mst-card{opacity:.3;filter:grayscale(1)} .spx-on .card-grid.spx-filter .mst-card.spx-hit{opacity:1;filter:none;transform:translateY(-6px) scale(1.02);box-shadow:0 0 0 3px #FF7CB9,0 24px 50px rgba(255,124,185,.3)} @media (max-width:900px){.spx{padding:64px 0}.spx-in{padding:0 20px}.spx-tiles,.spx-flips{grid-template-columns:1fr 1fr}.spx-q{flex-direction:column;align-items:flex-start}.spx-cmp .spx-row{grid-template-columns:1fr;gap:6px;padding:16px 18px}.spx-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px}.spx-steps::before{display:none}.spx-stepbody{grid-template-columns:1fr;padding:24px}.spx-nav{padding:0 24px 24px}.spx-tabpanel{padding:22px}.spx-flip{height:200px}} /* MST site search, FAQ search and answer chat v1 */ .sx-btn{display:inline-grid;place-items:center;width:40px;height:40px;margin-right:8px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);background:none;color:#fff;cursor:pointer;transition:all .2s;vertical-align:middle} .sx-btn:hover{border-color:#FF7CB9;color:#FF7CB9} .sx-btn--m{display:none;margin-left:auto} @media (max-width:900px){.sx-btn--m{display:inline-grid}.site-nav .sx-btn:not(.sx-btn--m){display:none}} .sx-btn svg{width:18px;height:18px} .sx-ov{position:fixed;inset:0;z-index:10000;background:rgba(10,15,30,.97);display:none;overflow-y:auto;padding:80px 20px 40px;box-sizing:border-box} .sx-ov.open{display:block;animation:sxFade .2s ease-out} @keyframes sxFade{from{opacity:0}to{opacity:1}} .sx-box{max-width:820px;margin:0 auto} .sx-x{position:fixed;top:24px;right:28px;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);background:none;color:#fff;font-size:22px;cursor:pointer} .sx-field{display:flex;align-items:center;gap:14px;border-bottom:3px solid #FF7CB9;padding-bottom:12px} .sx-field svg{width:30px;height:30px;color:#FF7CB9;flex:none} .sx-field input{flex:1;min-width:0;background:none;border:0;outline:none;color:#fff;font:800 clamp(26px,4vw,44px) var(--font-head);letter-spacing:-.03em} .sx-field input::placeholder{color:rgba(255,255,255,.35)} .sx-sugs{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 30px} .sx-sugs span{font:700 12px var(--font-head);letter-spacing:.16em;text-transform:uppercase;color:#FF7CB9;margin-right:6px;align-self:center} .sx-sugs button{padding:8px 14px;border-radius:99px;border:1.5px solid rgba(255,124,185,.5);background:none;color:#fff;font:700 14px var(--font-head);cursor:pointer} .sx-sugs button:hover{background:#FF7CB9;color:#0a0f1e} .sx-grp{margin:0 0 26px} .sx-grp h4{margin:0 0 10px;font:700 12px var(--font-head);letter-spacing:.18em;text-transform:uppercase;color:#8a90a2} .sx-res{display:block;padding:16px 18px;margin:0 0 8px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);text-decoration:none;transition:all .15s} .sx-res:hover{background:rgba(255,124,185,.12);border-color:rgba(255,124,185,.5)} .sx-res b{display:block;font:800 18px var(--font-head);color:#fff} .sx-res small{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:#b9bdca} .sx-res mark,.sxf mark,.faq mark.sxm,.sxc mark{background:none;color:#e0468e;font-weight:800} .sx-res mark{color:#FF7CB9} .sx-none{color:#b9bdca;font-size:17px} .sx-none a{color:#FF7CB9} .sxf{max-width:1264px;margin:0 auto;padding:0 var(--gutter,32px);box-sizing:border-box;position:relative;z-index:3;margin-top:-34px} .sxf::before{content:"";position:absolute;z-index:-1;left:50%;width:100vw;transform:translateX(-50%);top:34px;bottom:0;background:#fff} @media (max-width:900px){.sxf::before{top:24px}} .sxf-card{background:#fff;border-radius:20px;box-shadow:0 22px 50px rgba(10,15,30,.12);padding:22px 24px} .sxf-field{display:flex;align-items:center;gap:12px;padding:6px 6px 6px 18px;border-radius:14px;border:2px solid #f1eee8;transition:border-color .2s} .sxf-field:focus-within{border-color:#FF7CB9} .sxf-field svg{width:22px;height:22px;color:#e0468e;flex:none} .sxf-field input{flex:1;min-width:0;border:0;outline:none;font:700 19px var(--font-head);color:#0a0f1e;background:none;padding:12px 0} .sxf-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;align-items:center} .sxf-chips button{padding:8px 14px;border-radius:99px;border:1.5px solid #e6e2da;background:#fff;font:700 14px var(--font-head);color:#0a0f1e;cursor:pointer} .sxf-chips button.on{background:#FF7CB9;border-color:#FF7CB9} .sxf-count{margin-left:auto;font:700 14px var(--font-head);color:#6b7080} .sxf-empty{display:none;margin-top:16px;padding:18px 20px;border-radius:14px;background:#fde4ef;font-size:16px;color:#0a0f1e} .sxf-empty a{color:#c2306f;font-weight:700} .sx-hide{display:none!important} details.faq-item.sx-flash{animation:sxFlash 1.6s ease-out;border-radius:12px} @keyframes sxFlash{0%{box-shadow:0 0 0 0 rgba(255,124,185,0)}20%{box-shadow:0 0 0 4px rgba(255,124,185,.7)}100%{box-shadow:0 0 0 0 rgba(255,124,185,0)}} .sxc-fab{position:fixed;right:20px;bottom:20px;z-index:9997;display:flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;border-radius:99px;border:0;background:#0a0f1e;color:#fff;font:800 15px var(--font-head);cursor:pointer;box-shadow:0 14px 34px rgba(10,15,30,.35);transition:transform .2s} .sxc-fab:hover{transform:translateY(-2px)} .sxc-av{flex:none;width:38px;height:38px;border-radius:50%;background:#FF7CB9;color:#0a0f1e;display:grid;place-items:center;font:800 17px var(--font-head)} .sxc{position:fixed;right:20px;bottom:20px;z-index:9999;width:min(380px,calc(100vw - 24px));height:min(560px,calc(100vh - 110px));display:none;flex-direction:column;border-radius:22px;background:#fff;box-shadow:0 30px 70px rgba(10,15,30,.35);overflow:hidden} .sxc.open{display:flex;animation:sxUp .25s ease-out} @keyframes sxUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .sxc-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#0a0f1e;color:#fff} .sxc-head b{display:block;font:800 16px var(--font-head)} .sxc-head small{display:flex;align-items:center;gap:6px;font-size:12px;color:#b9bdca} .sxc-head small::before{content:"";width:8px;height:8px;border-radius:50%;background:#22c55e} .sxc-head button{margin-left:auto;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:18px;cursor:pointer} .sxc-log{flex:1;overflow-y:auto;padding:16px;background:#f7f5f1;display:flex;flex-direction:column;gap:10px} .sxc-m{max-width:85%;padding:11px 14px;border-radius:16px;font-size:15px;line-height:1.5;animation:sxUp .25s ease-out} .sxc-m.bot{align-self:flex-start;background:#fff;color:#0a0f1e;border-bottom-left-radius:4px;box-shadow:0 4px 12px rgba(10,15,30,.05)} .sxc-m.me{align-self:flex-end;background:#FF7CB9;color:#0a0f1e;border-bottom-right-radius:4px;font-weight:600} .sxc-m a{color:#c2306f;font-weight:700} .sxc-m .sxc-q{display:block;font:800 13px var(--font-head);color:#e0468e;margin-bottom:4px} .sxc-typing{display:inline-flex;gap:4px} .sxc-typing i{width:7px;height:7px;border-radius:50%;background:#c9c6bd;animation:sxDot 1s infinite} .sxc-typing i:nth-child(2){animation-delay:.15s}.sxc-typing i:nth-child(3){animation-delay:.3s} @keyframes sxDot{50%{transform:translateY(-4px);background:#FF7CB9}} .sxc-sug{display:flex;flex-wrap:wrap;gap:6px} .sxc-sug button{padding:7px 12px;border-radius:99px;border:1.5px solid #f3cfe0;background:#fff;font:700 13px var(--font-head);color:#0a0f1e;cursor:pointer;text-align:left} .sxc-sug button:hover{background:#FF7CB9;border-color:#FF7CB9} .sxc-form{display:flex;gap:8px;padding:12px;border-top:1px solid #eeeae4;background:#fff} .sxc-form input{flex:1;min-width:0;padding:12px 14px;border-radius:12px;border:1.5px solid #e6e2da;font-size:15px;outline:none} .sxc-form input:focus{border-color:#FF7CB9} .sxc-form button{width:46px;border-radius:12px;border:0;background:#FF7CB9;color:#0a0f1e;cursor:pointer;display:grid;place-items:center} .sxc-form button svg{width:18px;height:18px} .sxc-note{padding:0 14px 10px;background:#fff;font-size:11px;color:#8a90a2;text-align:center} @media (max-width:900px){.sx-btn{margin-right:4px}.sxf{padding:0 16px;margin-top:-24px}.sxc-fab span.t{display:none}.sxc-fab{padding:10px}.sxc{right:12px;bottom:12px}} /* MST spx hero mobile fill */ @media (max-width:900px){.hero .hero-art.spx-art{position:absolute!important;inset:0!important;width:100%!important;height:auto!important;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.7) 55%,rgba(0,0,0,.95) 100%)!important;mask-image:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.7) 55%,rgba(0,0,0,.95) 100%)!important}.hero .hero-art.spx-art img{height:100%!important;object-position:65% center!important}} /* MST speaking v1 */ .skx-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:44px} .skx-stat{padding:22px;border-radius:18px;background:#0a0f1e;color:#fff;position:relative;overflow:hidden} .skx-stat::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(255,124,185,.35),transparent 70%)} .skx-stat b{display:block;font:800 clamp(32px,3.4vw,46px)/1 var(--font-head);letter-spacing:-.03em;color:#FF7CB9} .skx-stat span{display:block;margin-top:8px;font-size:14px;line-height:1.4;color:#c9cdd8} .skx-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 20px;scrollbar-width:none;cursor:grab} .skx-track::-webkit-scrollbar{display:none} .skx-track.drag{cursor:grabbing;scroll-snap-type:none} .skx-ticket{flex:0 0 min(360px,82vw);scroll-snap-align:start;position:relative;display:flex;flex-direction:column;gap:12px;padding:26px 26px 22px;border-radius:18px;background:linear-gradient(160deg,#151b30,#0a0f1e);border:1px solid rgba(255,124,185,.25);color:#fff;transition:transform .25s,border-color .25s;user-select:none} .skx-ticket:hover{transform:translateY(-4px);border-color:#FF7CB9} .skx-ticket::before,.skx-ticket::after{content:"";position:absolute;left:-12px;top:96px;width:24px;height:24px;border-radius:50%;background:var(--skx-bg,#0a0f1e)} .skx-ticket::after{left:auto;right:-12px} .skx-tk-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:2px dashed rgba(255,124,185,.35);font:700 12px var(--font-head);letter-spacing:.18em;text-transform:uppercase;color:#FF7CB9} .skx-tk-top i{font-style:normal;color:#8a90a2} .skx-ticket h3{margin:4px 0 0;font:800 21px/1.25 var(--font-head);color:#fff} .skx-ticket p{margin:0;font-size:15px;line-height:1.55;color:#c9cdd8} .skx-nav{display:flex;gap:10px;justify-content:flex-end;margin:-8px 0 14px} .skx-nav button{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);background:none;color:#fff;font-size:18px;cursor:pointer;transition:all .2s} .skx-nav button:hover{background:#FF7CB9;border-color:#FF7CB9;color:#0a0f1e} .skx-build{background:#f7f5f1;padding:96px 0} .skx-in{max-width:1264px;margin:0 auto;padding:0 var(--gutter,32px);box-sizing:border-box} .skx-eb{margin:0 0 12px;font:700 12px var(--font-head);letter-spacing:.2em;text-transform:uppercase;color:#e0468e} .skx-build h2{margin:0 0 10px;font:800 clamp(30px,3.4vw,46px)/1.05 var(--font-head);letter-spacing:-.04em;color:#0a0f1e} .skx-build h2 mark{background:none;color:#e0468e} .skx-lead{margin:0 0 30px;font-size:17px;color:#3d4254;max-width:640px} .skx-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:26px;align-items:start} .skx-themes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px} .skx-themes button{padding:10px 16px;border-radius:99px;border:1.5px solid #e6e2da;background:#fff;font:800 14px var(--font-head);color:#0a0f1e;cursor:pointer;transition:all .2s} .skx-themes button.on{background:#0a0f1e;border-color:#0a0f1e;color:#fff} .skx-themes button b{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:6px;border-radius:99px;background:#FF7CB9;color:#0a0f1e;font-size:11px;padding:0 5px;box-sizing:border-box} .skx-topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-height:200px} .skx-topics button{display:flex;align-items:center;gap:12px;padding:20px;border-radius:16px;border:1.5px solid #e6e2da;background:#fff;font:800 16px/1.3 var(--font-head);color:#0a0f1e;cursor:pointer;text-align:left;transition:all .2s;animation:skxIn .3s ease-out both} .skx-topics button:hover{border-color:#FF7CB9;transform:translateY(-2px)} .skx-topics button.on{background:#FF7CB9;border-color:#FF7CB9;box-shadow:0 14px 30px rgba(255,124,185,.35)} .skx-plus{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:2px solid #FF7CB9;color:#e0468e;font-size:18px;line-height:1;transition:all .2s} .skx-topics button.on .skx-plus{background:#0a0f1e;border-color:#0a0f1e;color:#FF7CB9;transform:rotate(45deg)} @keyframes skxIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .skx-card{position:sticky;top:100px;padding:26px;border-radius:22px;background:#0a0f1e;color:#fff;box-shadow:0 26px 60px rgba(10,15,30,.25)} .skx-card h3{margin:0 0 14px;font:800 20px var(--font-head);display:flex;align-items:center;gap:10px} .skx-card h3 span{width:10px;height:10px;border-radius:50%;background:#FF7CB9;box-shadow:0 0 0 0 rgba(255,124,185,.6);animation:skxPulse 2s infinite} @keyframes skxPulse{70%{box-shadow:0 0 0 10px rgba(255,124,185,0)}100%{box-shadow:0 0 0 0 rgba(255,124,185,0)}} .skx-lbl{margin:18px 0 8px;font:700 11px var(--font-head);letter-spacing:.18em;text-transform:uppercase;color:#8a90a2} .skx-picked{display:flex;flex-wrap:wrap;gap:6px;min-height:34px} .skx-picked em{font-style:normal;color:#8a90a2;font-size:14px} .skx-picked span{padding:6px 10px;border-radius:99px;background:rgba(255,124,185,.16);color:#FF7CB9;font:700 13px var(--font-head);animation:skxIn .25s ease-out} .skx-fmt{display:grid;grid-template-columns:1fr 1fr;gap:8px} .skx-fmt button{padding:11px 10px;border-radius:12px;border:1.5px solid rgba(255,255,255,.18);background:none;color:#fff;font:700 13px var(--font-head);cursor:pointer;transition:all .2s} .skx-fmt button.on{background:#FF7CB9;border-color:#FF7CB9;color:#0a0f1e} .skx-aud input{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:99px;background:linear-gradient(90deg,#FF7CB9 var(--v,50%),rgba(255,255,255,.15) var(--v,50%));outline:none} .skx-aud input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#FF7CB9;border:3px solid #0a0f1e;cursor:pointer} .skx-aud input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#FF7CB9;border:3px solid #0a0f1e} .skx-aud div{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:#8a90a2} .skx-aud strong{display:block;margin-top:6px;font:800 15px var(--font-head);color:#FF7CB9} .skx-go{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:22px;padding:15px;border-radius:12px;background:#FF7CB9;color:#0a0f1e;font:800 16px var(--font-head);text-decoration:none;transition:opacity .2s} .skx-go[aria-disabled="true"]{opacity:.35;pointer-events:none} .skx-hide{display:none!important} .skx-marq{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);margin-top:10px} .skx-row{display:flex;gap:14px;width:max-content;animation:skxScroll 40s linear infinite;padding:8px 0} .skx-row.rev{animation-direction:reverse;animation-duration:46s} .skx-marq:hover .skx-row{animation-play-state:paused} @keyframes skxScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .skx-row a,.skx-row span{flex:none;display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:99px;border:1.5px solid rgba(255,124,185,.35);background:rgba(255,255,255,.04);color:#fff;font:800 17px var(--font-head);text-decoration:none;white-space:nowrap;transition:all .2s} .skx-row a:hover{background:#FF7CB9;color:#0a0f1e;border-color:#FF7CB9} .skx-row i{font-style:normal;font-weight:600;font-size:13px;color:#FF7CB9} .skx-row a:hover i{color:#0a0f1e} .skx-on .card-grid--4 .mst-card{text-align:center;transition:transform .3s,box-shadow .3s} .skx-on .card-grid--4 .mst-card:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 22px 44px rgba(10,15,30,.12)} .skx-mono{width:84px;height:84px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;background:#0a0f1e;color:#FF7CB9;font:800 28px var(--font-head);box-shadow:0 0 0 4px #fff,0 0 0 7px #FF7CB9;position:relative} .skx-mono::after{content:"Hosted";position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);padding:3px 9px;border-radius:99px;background:#FF7CB9;color:#0a0f1e;font:800 10px var(--font-head);letter-spacing:.1em;text-transform:uppercase} .skx-bar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:9999;display:flex;gap:6px;padding:6px;border-radius:99px;background:#0a0f1e;box-shadow:0 10px 30px rgba(0,0,0,.3);font-family:var(--font-head);white-space:nowrap} .skx-bar a{padding:8px 14px;border-radius:99px;color:#fff;font-size:13px;font-weight:700;text-decoration:none} .skx-bar a.on{background:#FF7CB9;color:#0a0f1e} @media (max-width:900px){.skx-stats{grid-template-columns:1fr 1fr}.skx-build{padding:64px 0}.skx-in{padding:0 20px}.skx-grid{grid-template-columns:1fr}.skx-topics{grid-template-columns:1fr}.skx-card{position:static}.skx-nav{display:none}} .skx-on .mst-card .skx-mono + .card-icon{display:none} @media (max-width:700px){.skx-on .skx-themes{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-20px;padding-right:20px;-webkit-overflow-scrolling:touch}.skx-on .skx-themes::-webkit-scrollbar{display:none}.skx-on .skx-themes>*{flex:0 0 auto;white-space:nowrap}} .skx-on .skx-grid>*{min-width:0}.skx-on .skx-build{max-width:100%;overflow-x:clip} /* MST footer legal links */ .footer-legal-links{display:inline-flex;gap:18px;margin-left:18px} .footer-legal-links a{color:inherit;text-decoration:underline;text-underline-offset:3px;opacity:.85} .footer-legal-links a:hover{color:var(--pink,#FF7CB9);opacity:1} .site-footer .footer-legal{padding-bottom:84px} @media (max-width:700px){.footer-legal-links{display:flex;justify-content:center;margin:10px 0 0}} /* MST form privacy note */ .cm-privacy{font-size:13px;opacity:.75;margin:14px 0 0} .cm-privacy a{color:inherit;text-decoration:underline;text-underline-offset:3px} .cm-privacy a:hover{color:var(--pink,#FF7CB9)} /* MST home hero typewriter v1 */ .htx .hero-title mark{position:relative;white-space:nowrap} .htx .hero-title a{color:inherit;text-decoration:none} .htx-cta.in{animation:htxCta .35s ease} @keyframes htxCta{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}} .htx-cur{display:inline-block;width:.07em;height:.9em;background:#FF7CB9;margin-left:.04em;vertical-align:-.08em;animation:htxBlink 1s steps(1) infinite} @keyframes htxBlink{50%{opacity:0}} .htx .htx-w{border-bottom:3px solid transparent} .htx .htx-w:hover{border-bottom-color:currentColor} @media (max-width:700px){.htx .hero-title mark{white-space:normal}} /* MST easter eggs v1 */ .egg-m{position:fixed;left:0;z-index:10000;pointer-events:none;height:auto;filter:drop-shadow(0 6px 6px rgba(0,0,0,.25))} .egg-front{left:50%;bottom:4vh;height:72vh;width:auto;transform-origin:50% 72%;z-index:10003;opacity:0;filter:none;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,transparent 100%)} .egg-veil{position:fixed;inset:0;z-index:10002;pointer-events:none;background:radial-gradient(ellipse at 50% 60%,rgba(8,12,29,.75),rgba(8,12,29,.97));opacity:0;transition:opacity .5s} .egg-veil.out{opacity:0!important} .egg-flash{position:fixed;inset:0;z-index:10004;pointer-events:none;background:radial-gradient(circle at 50% 60%,rgba(255,255,255,.9),rgba(255,124,185,.5) 45%,rgba(255,124,185,0) 75%);animation:eggFlash .55s ease-out forwards} @keyframes eggFlash{from{opacity:1}to{opacity:0}} .egg-dust{position:fixed;z-index:10003;border-radius:50%;background:radial-gradient(circle,rgba(255,124,185,.6),rgba(255,124,185,0) 70%);pointer-events:none;animation:eggDust 1s ease-out forwards;margin:-.5em 0 0 -.5em} .egg-dust.rock{border-radius:30% 45% 35% 50%;background:#2a2230;box-shadow:inset -2px -2px 0 rgba(255,124,185,.35);animation:eggRock 1s ease-out forwards} @keyframes eggDust{from{transform:scale(.4);opacity:1}to{transform:scale(2.2) translateY(-14px);opacity:0}} @keyframes eggRock{from{transform:scale(.3) rotate(0);opacity:1}to{transform:scale(1.4) translateY(-40px) rotate(160deg);opacity:0}} .egg-toast{position:fixed;left:50%;bottom:28px;max-width:calc(100% - 32px);white-space:normal!important;text-align:center;transform:translateX(-50%);z-index:10001;background:#0a0f1e;color:#fff;border:1px solid #FF7CB9;border-radius:999px;padding:12px 20px;font:600 15px/1.3 Inter,sans-serif;box-shadow:0 14px 34px rgba(0,0,0,.35);animation:eggIn .4s ease;white-space:nowrap} .egg-toast a{color:#FF7CB9;margin-left:8px} .egg-toast.out{opacity:0;transform:translate(-50%,10px);transition:.4s} @keyframes eggIn{from{opacity:0;transform:translate(-50%,10px)}} .egg-peek{position:absolute;right:10%;top:-130px;height:130px;width:220px;pointer-events:none;z-index:5;overflow:visible;clip-path:inset(-90px -400px 0 -400px)} .egg-peek img{position:absolute;bottom:-150px;left:0;width:200px;transition:bottom .6s cubic-bezier(.2,1.4,.4,1);transform-origin:50% 100%} .egg-peek.up img{bottom:-66px;animation:eggLook 1.8s ease-in-out .7s 2} @keyframes eggLook{0%,100%{transform:rotate(0)}30%{transform:rotate(-5deg)}70%{transform:rotate(5deg)}} .egg-say{position:absolute;right:auto;left:auto;right:150px;top:4px;background:#fff;color:#0a0f1e;font:700 12px/1.2 Inter,sans-serif;padding:7px 10px;border-radius:12px 12px 12px 2px;opacity:0;transform:scale(.8);transition:.25s;white-space:nowrap} .egg-peek.talk .egg-say{opacity:1;transform:none;top:-24px} .egg-sleep{transition:transform .35s} .egg-sleep.down{filter:drop-shadow(0 4px 4px rgba(0,0,0,.25)) saturate(.85)} .egg-z{position:fixed;z-index:10000;font:700 22px/1 "Permanent Marker",cursive;color:#FF7CB9;pointer-events:none;animation:eggZ 2.2s ease-out forwards} @keyframes eggZ{from{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:1}to{opacity:0;transform:translate(26px,-60px) scale(1.3)}} .egg-sleep.startle{animation:eggJump .45s ease} @keyframes eggJump{40%{margin-bottom:28px}} @media (max-width:700px){.egg-front{height:60vh}} .egg-mini{left:50%;bottom:6vh;height:34vh;width:auto;transform-origin:50% 90%;z-index:10002;opacity:0} .egg-mini.r{transform:scaleX(-1)} .egg-cracks{position:fixed;inset:0;width:100vw;height:100vh;z-index:10005;pointer-events:none} .egg-cracks path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4000;stroke-dashoffset:4000;animation:eggCrack .22s ease-out forwards} .egg-cracks path.g{stroke:rgba(255,124,185,.85);stroke-width:7;filter:blur(2px)} @keyframes eggCrack{to{stroke-dashoffset:0}} .egg-shard{position:fixed;z-index:10004;pointer-events:none;display:block} .egg-shard .egg-front{position:fixed} /* MST about easter eggs section */ .eg-section{background:#f7f5f2;color:#0a0f1e;padding:clamp(56px,7vw,96px) 0;position:relative;overflow:hidden} .eg-section::before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,124,185,.18),rgba(255,124,185,0) 70%);pointer-events:none} .eg-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center} .eg-eyebrow{color:#e0559a;font:700 12px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;margin:0 0 14px} .eg-h2{color:#0a0f1e;margin:0 0 18px;font-size:clamp(34px,4.2vw,56px);line-height:1.02;letter-spacing:-.02em} .eg-h2 mark{background:none;color:#FF7CB9} .eg-copy p{color:#3a4152;max-width:540px;font-size:17px;line-height:1.6} .eg-copy .eg-small{color:#e0559a;font-family:"Permanent Marker",cursive;font-size:20px;transform:rotate(-1.5deg);display:inline-block;margin-top:6px} .eg-tracker{background:#0a0f1e;border:1px solid rgba(255,124,185,.35);box-shadow:0 24px 50px rgba(10,15,30,.18);border-radius:20px;padding:26px 24px 22px} .eg-count{margin:0 0 18px;color:rgba(255,255,255,.7);font:600 14px/1 Inter,sans-serif;text-align:center} .eg-count b{color:#FF7CB9;font-size:22px;margin-right:2px} .eg-eggs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .eg-egg{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:0;margin:0} .eg-shell{width:58px;height:74px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;border:2px dashed rgba(255,255,255,.28);display:grid;place-items:center;position:relative;transition:.4s} .eg-shell::after{content:"?";color:rgba(255,255,255,.35);font:700 22px/1 Inter,sans-serif} .eg-lvl{font:700 11px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)} .eg-name{font:600 13px/1.2 Inter,sans-serif;color:#fff;opacity:0;height:0;transition:.3s} .eg-egg.is-found .eg-shell{border:2px solid #FF7CB9;background:radial-gradient(circle at 35% 30%,#ffc2df,#FF7CB9 60%,#e0559a);box-shadow:0 8px 22px rgba(255,124,185,.35);animation:egPop .5s cubic-bezier(.2,1.6,.4,1)} .eg-egg.is-found .eg-shell::after{content:"\2713";color:#0a0f1e} .eg-egg.is-found .eg-lvl{color:#FF7CB9} .eg-egg.is-found .eg-name{opacity:1;height:auto} .eg-tracker.is-all{border-color:#FF7CB9;box-shadow:0 0 0 4px rgba(255,124,185,.12)} @keyframes egPop{from{transform:scale(.6)}to{transform:scale(1)}} @media (max-width:860px){.eg-inner{grid-template-columns:1fr}.eg-eggs{gap:8px}.eg-shell{width:48px;height:62px}} /* MST easter eggs mobile */ .egg-toast{z-index:2147483000;cursor:default} .site-header .brand{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none} @media (max-width:700px){ .egg-toast{left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));transform:none;max-width:none;border-radius:16px;padding:14px 16px;font-size:14px;line-height:1.45;text-align:left;animation:eggInM .35s ease} .egg-toast a{display:inline-block;margin:6px 0 0;font-weight:700} .egg-toast.out{transform:translateY(10px)} @keyframes eggInM{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} } /* MST easter eggs replay */ .eg-replay{all:unset;cursor:pointer;margin-top:4px;padding:5px 10px;border-radius:999px;border:1px solid rgba(255,124,185,.5);color:#FF7CB9;font:600 12px/1 Inter,sans-serif;display:none;transition:background .2s,color .2s} .eg-replay:hover,.eg-replay:focus-visible{background:#FF7CB9;color:#0a0f1e} .eg-egg.is-found .eg-replay{display:inline-block} /* MST engine builder v1 */ .eng-section{background:#0a0f1e;color:#fff;padding:clamp(56px,7vw,100px) 0;overflow:hidden} .eng-inner{max-width:1240px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,4vw,64px);align-items:start} .eng-eyebrow{color:#FF7CB9;font:700 12px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;margin:0 0 14px} .eng-h2{color:#fff;margin:0 0 14px;font-size:clamp(34px,4.2vw,56px);line-height:1.02;letter-spacing:-.02em} .eng-h2 mark,.eng-result h3 mark{background:none;color:#FF7CB9} .eng-sub{color:rgba(255,255,255,.78);font-size:17px;line-height:1.6;max-width:520px;margin:0 0 26px} .eng-step{font:700 13px/1 Inter,sans-serif;letter-spacing:.06em;color:#fff;margin:0 0 12px;text-transform:uppercase} .eng-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px} .eng-chip{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1.5px dashed rgba(255,255,255,.3);color:rgba(255,255,255,.85);font:600 14px/1 Inter,sans-serif;transition:.2s} .eng-chip svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .eng-chip i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#0a0f1e;background:#FF7CB9;border-radius:999px;padding:3px 7px;display:none} .eng-chip:hover{border-color:#FF7CB9;color:#fff} .eng-chip.on{border-style:solid;border-color:#fff;background:#fff;color:#0a0f1e} .eng-chip.on i{display:inline-block} .eng-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .eng-go{all:unset;cursor:pointer;background:#FF7CB9;color:#0a0f1e;font:700 16px/1 Inter,sans-serif;padding:16px 24px;border-radius:12px;transition:.2s} .eng-go:hover{background:#ffa3d0}.eng-go:disabled{opacity:.5;cursor:default} .eng-reset{all:unset;cursor:pointer;color:rgba(255,255,255,.7);font:600 14px/1 Inter,sans-serif;text-decoration:underline;text-underline-offset:3px} .eng-reset[hidden]{display:none} .eng-result{margin-top:28px;background:rgba(255,255,255,.04);border:1px solid rgba(255,124,185,.35);border-radius:18px;padding:22px 22px 24px;animation:engIn .5s ease} .eng-result[hidden]{display:none} @keyframes engIn{from{opacity:0;transform:translateY(10px)}} .eng-result h3{color:#fff;font-size:22px;line-height:1.2;margin:0 0 14px} .eng-result ul{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px} .eng-result li a{color:#fff;font-weight:700;text-decoration:none;display:inline-flex;gap:6px} .eng-result li a:hover{color:#FF7CB9}.eng-result li a span{color:#FF7CB9} .eng-result li small{display:block;color:rgba(255,255,255,.55);font-size:13px;margin-top:2px} .eng-lead{color:rgba(255,255,255,.75);font-size:15px;margin:0 0 16px}.eng-lead a{color:#FF7CB9} .eng-cta{display:inline-block;background:#FF7CB9;color:#0a0f1e!important;font:700 15px/1 Inter,sans-serif;padding:14px 20px;border-radius:12px;text-decoration:none} .eng-cta:hover{background:#ffa3d0} .eng-stage-wrap{position:relative;background:radial-gradient(ellipse at 50% 55%,#151d38,#0a0f1e 70%);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:16px} .eng-lamp{position:absolute;top:16px;right:18px;z-index:3;display:flex;align-items:center;gap:8px;font:700 12px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)} .eng-lamp span{width:10px;height:10px;border-radius:50%;background:#444b5e} .eng-lamp.busy span{background:#ffcc66;animation:engBlink .5s steps(1) infinite} .eng-lamp.on span{background:#5fe08a;box-shadow:0 0 10px #5fe08a}.eng-lamp.on{color:#fff} @keyframes engBlink{50%{opacity:.2}} .eng-stage{position:relative;aspect-ratio:5/4;width:100%} .eng-svg{position:absolute;inset:0;width:100%;height:100%} .eng-body{fill:#111a33;stroke:rgba(255,124,185,.35);stroke-width:2} .eng-pipe{fill:none;stroke:rgba(255,255,255,.25);stroke-width:10;stroke-linecap:round} .eng-belt{stroke:rgba(255,255,255,.1);stroke-width:3;stroke-dasharray:6 7;fill:none;transition:stroke .4s} .eng-belt.on{stroke:rgba(255,124,185,.55)} .run .eng-belt.on{animation:engBelt .6s linear infinite} @keyframes engBelt{to{stroke-dashoffset:-26}} .eng-slot{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.22);stroke-width:2;stroke-dasharray:5 6} .eng-fly path{fill:#1d2747;stroke:rgba(255,124,185,.6);stroke-width:2} .eng-fly circle{fill:#FF7CB9} .run .eng-fly{animation:engSpinSvg 2.4s linear infinite} @keyframes engSpinSvg{from{transform:translate(250px,200px) rotate(0)}to{transform:translate(250px,200px) rotate(360deg)}} .eng-arc{fill:none;stroke:rgba(255,255,255,.25);stroke-width:5;stroke-linecap:round} .eng-needle{stroke:#FF7CB9;stroke-width:3;stroke-linecap:round;transform:rotate(-75deg);transition:transform 1.4s cubic-bezier(.3,1.6,.5,1)} .run .eng-needle{transform:rotate(62deg)} .eng-gauge text{fill:rgba(255,255,255,.55);font:700 8px Inter,sans-serif;letter-spacing:.12em;text-anchor:middle} .eng-part{position:absolute;width:15%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(var(--r));transition:left .7s cubic-bezier(.3,1.3,.5,1),top .7s cubic-bezier(.3,1.3,.5,1),transform .7s cubic-bezier(.3,1.3,.5,1);z-index:2} .eng-part.is-in{transform:translate(-50%,-50%) rotate(0)} .eng-gear{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .eng-gear path{fill:#1a2240;stroke:rgba(255,255,255,.35);stroke-width:2.5;stroke-dasharray:6 5;transition:.4s} .eng-part.is-in .eng-gear path{stroke-dasharray:none;fill:#fff;stroke:#fff} .eng-part.is-new .eng-gear path{fill:#FF7CB9;stroke:#FF7CB9} .eng-ico{position:absolute;left:50%;top:50%;width:40%;height:40%;transform:translate(-50%,-50%);fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .eng-part.is-in .eng-ico{stroke:#0a0f1e} .eng-part span{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:4px;font:700 11px/1 Inter,sans-serif;letter-spacing:.04em;color:rgba(255,255,255,.8);white-space:nowrap} .run .eng-part.is-in .eng-gear{animation:engSpin 2.4s linear infinite} .run .eng-part.is-in:nth-child(odd) .eng-gear{animation-direction:reverse} @keyframes engSpin{to{transform:rotate(360deg)}} .eng-mm{position:absolute;left:-30%;bottom:1%;width:24%;z-index:4;pointer-events:none;filter:drop-shadow(0 6px 6px rgba(0,0,0,.4));opacity:0;transition:opacity .25s} .eng-mm.walk{opacity:1} .eng-stage-wrap{overflow:hidden} .run .eng-svg::after{content:""} .run .eng-stage::after{content:"";position:absolute;left:90%;top:14%;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle,rgba(255,124,185,.7),rgba(255,124,185,0) 70%);animation:engPuff 1.1s ease-out infinite} @keyframes engPuff{from{transform:translate(0,0) scale(.4);opacity:1}to{transform:translate(10px,-40px) scale(2.2);opacity:0}} @media (max-width:900px){.eng-inner{grid-template-columns:1fr;gap:0}.eng-copy{display:contents}.eng-eyebrow{order:1}.eng-h2{order:2}.eng-sub{order:3}.eng-stage-wrap{order:4;margin:0 0 24px;padding:10px}.eng-step,.eng-chips,.eng-actions,.eng-result{order:5}} @media (max-width:560px){.eng-part span{font-size:9px}.eng-chip{padding:9px 12px;font-size:13px}} /* MST engine builder no idea */ .eng-chip--idk{border-color:rgba(255,124,185,.55);color:#FF7CB9} .eng-chip--idk.on{border-style:solid;border-color:#FF7CB9;background:#FF7CB9;color:#0a0f1e} .eng-part.crumbled{animation:engCrumble .8s cubic-bezier(.5,0,1,1) forwards} @keyframes engCrumble{0%{transform:translate(-50%,-50%) rotate(0)}25%{transform:translate(-50%,-50%) rotate(-10deg)}50%{transform:translate(-50%,-44%) rotate(14deg) scale(.95)}100%{transform:translate(-50%,10%) rotate(50deg) scale(.35);opacity:0}} .eng-stage.shake{animation:engShake .11s linear 12} @keyframes engShake{25%{transform:translate(2px,-1px)}50%{transform:translate(-2px,1px)}75%{transform:translate(1px,2px)}} .eng-frag{position:absolute;z-index:3;background:#FF7CB9;border-radius:2px;pointer-events:none} .eng-frag.w{background:#fff} /* MST chat avatar */ .sxc-av--img{object-fit:cover;padding:0;display:block;background:#FF7CB9;flex:none} /* MST chat fix picker v1 */ .sxc-fix button{border-style:dashed} /* MST mix slider v1 */ .mix-work.mx-on .split-heads,.mix-work.mx-on .mix-hint,.mix-work.mx-on .mix-bar,.mix-work.mx-on .mix-stops{display:none!important} .mix-work .mx{margin-top:10px} .mix-work .mx-hint{color:#5b6274;margin:4px 0 26px;font-size:16px} .mix-work .mx-card{display:grid;grid-template-columns:1.35fr 1fr;gap:28px;background:#fff;border:1px solid rgba(10,15,30,.08);border-radius:22px;padding:28px 30px;box-shadow:0 18px 40px rgba(10,15,30,.06);margin-top:30px} .mix-work .mx-card.swap .mx-copy,.mix-work .mx-card.swap .mx-side{animation:mxSwap .4s ease} @keyframes mxSwap{from{opacity:0;transform:translateY(6px)}} .mix-work .mx-kick{color:#e0559a;font:700 12px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px} .mix-work .mx-title{font-size:clamp(24px,2.4vw,32px);margin:0 0 10px;color:#0a0f1e} .mix-work .mx-text{color:#3a4152;font-size:16px;line-height:1.6;margin:0 0 18px} .mix-work .mx-links{display:flex;gap:18px;flex-wrap:wrap;align-items:center} .mix-work .mx-more{color:#e0559a;font-weight:700;text-decoration:none}.mix-work .mx-more:hover{text-decoration:underline} .mix-work .mx-talk{background:#0a0f1e;color:#fff!important;text-decoration:none;font:700 14px/1 Inter,sans-serif;padding:12px 16px;border-radius:10px}.mix-work .mx-talk:hover{background:#FF7CB9;color:#0a0f1e!important} .mix-work .mx-split{display:flex;height:12px;border-radius:999px;overflow:hidden;background:#eee} .mix-work .mx-split .s{background:#0a0f1e;transition:width .45s cubic-bezier(.3,1.2,.5,1)}.mix-work .mx-split .e{background:#FF7CB9;transition:width .45s cubic-bezier(.3,1.2,.5,1)} .mix-work .mx-splitlbl{font-size:13px;color:#5b6274;margin:8px 0 16px}.mix-work .mx-splitlbl b{color:#0a0f1e} .mix-work .mx-ticks{list-style:none;margin:0;padding:0;display:grid;gap:9px} .mix-work .mx-ticks li{position:relative;padding-left:26px;color:#0a0f1e;font-weight:600;font-size:15px} .mix-work .mx-ticks li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:#FF7CB9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230a0f1e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat} /* A: split dial */ .mix-work .mxA-heads{display:flex;justify-content:space-between;align-items:flex-end;min-height:clamp(70px,8vw,120px)} .mix-work .mxA-heads span{font-family:inherit;font-weight:800;letter-spacing:-.03em;line-height:.95;transition:font-size .15s,opacity .15s;font-size:clamp(28px,3.4vw,44px)} .mix-work .mxA-heads .s{color:#0a0f1e}.mix-work .mxA-heads .e{color:#FF7CB9} .mix-work .mxA-track{position:relative;height:112px;margin:110px 26px 0;cursor:pointer;touch-action:none;outline:none} .mix-work .mxA-rail{position:absolute;left:0;right:0;top:28px;height:14px;border-radius:999px;background:#FF7CB9;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.08)} .mix-work .mxA-s{position:absolute;left:0;top:0;bottom:0;background:#0a0f1e;border-radius:999px 0 0 999px} .mix-work .mxA-dot{all:unset;cursor:pointer;position:absolute;top:28px;width:14px;height:14px;transform:translateX(-50%);z-index:1} .mix-work .mxA-dot::before{content:"";position:absolute;inset:3px;border-radius:50%;background:rgba(255,255,255,.7)} .mix-work .mxA-dot span{position:absolute;top:56px;left:50%;transform:translateX(-50%);white-space:nowrap;font:700 11px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#8a90a0;transition:color .2s} .mix-work .mxA-dot:first-of-type span{transform:none;left:-8px}.mix-work .mxA-dot:nth-of-type(5) span{transform:none;left:auto;right:-8px} .mix-work .mxA-dot.on span{color:#0a0f1e} .mix-work .mxA-thumb{position:absolute;bottom:80px;width:128px;margin-left:-64px;z-index:2;transition:transform .2s;transform-origin:50% 100%;cursor:grab} .mix-work .mxA-thumb img{width:100%;height:auto;display:block;transition:transform .25s ease;filter:drop-shadow(0 10px 10px rgba(10,15,30,.22))} .mix-work .mxA-thumb.drag{transform:scale(1.07) rotate(-2deg)} .mix-work .mxA-track.snap .mxA-thumb,.mix-work .mxA-track.snap .mxA-s{transition:left .35s cubic-bezier(.3,1.4,.5,1),width .35s cubic-bezier(.3,1.4,.5,1)} .mix-work .mxA-track:focus-visible .mxA-rail{box-shadow:0 0 0 3px #fff,0 0 0 6px #0a0f1e} @media (max-width:860px){.mix-work .mx-card{grid-template-columns:1fr;padding:22px}.mix-work .mxA-dot span{display:none}.mix-work .mxA-dot.on span{display:block}.mix-work .mxA-dot:first-of-type.on span,.mix-work .mxA-dot:nth-of-type(5).on span{left:auto;right:auto}.mix-work .mxB-mm{width:96px}.mix-work .mxB-scene{height:160px}.mix-work .mxB-beam{top:88px}.mix-work .mxB-pivot{top:96px}.mix-work .mxB-labels button{font-size:9px;letter-spacing:.04em}.mix-work .mxC-tiles{grid-template-columns:repeat(5,minmax(120px,1fr));overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}.mix-work .mxC-tile{scroll-snap-align:center}.mix-work .mxC-wrap{overflow:hidden}.mix-work .mx-bar{font-size:11px}.mix-work .mx-bar a{padding:8px 9px}} /* MST mix slider mobile */ .mix-work .mxA-heads{overflow-x:clip;gap:12px;padding-bottom:8px} @media (max-width:860px){.mix-work .mxA-heads{min-height:64px}.mix-work .mxA-heads span{font-size:clamp(24px,7.5vw,36px)!important}.mix-work .mxA-track{margin:96px 14px 0}.mix-work .mxA-thumb{width:104px;margin-left:-52px}} /* MST mix slider cream */ .mix-work .mx{background:transparent!important;padding:0!important;margin:6px 0 0!important;border:0!important;box-shadow:none!important;border-radius:0!important} .mix-work .mxA-heads{min-height:0;align-items:baseline;margin:0} .mix-work .mx-hint{margin:6px 0 0} .mix-work .mxA-track{margin-top:104px;-webkit-user-select:none;user-select:none} .mix-work .mxA-thumb,.mix-work .mxA-thumb img{-webkit-user-drag:none;user-select:none;touch-action:none} .mix-work .mx-card{background:transparent;border:1px solid rgba(10,15,30,.12);box-shadow:none;margin-top:22px} .mix-work .mx-split{background:rgba(10,15,30,.08)} .mix-work.section{padding-top:clamp(48px,6vw,72px)} @media (max-width:860px){.mix-work .mxA-track{margin-top:92px}} /* MST mix slider stages */ .mix-work .mxA-track::before{content:"";position:absolute;left:-24px;right:-24px;top:-104px;height:104px;cursor:grab} .mix-work .mxA-dot{width:24px;height:24px;top:23px;z-index:1} .mix-work .mxA-dot::before{inset:0;background:#fff;border:3px solid #0a0f1e;box-sizing:border-box;box-shadow:0 3px 8px rgba(10,15,30,.18);transition:transform .2s,border-color .2s,background .2s} .mix-work .mxA-dot:nth-of-type(n+4)::before{border-color:#e0559a} .mix-work .mxA-dot:hover::before{transform:scale(1.15)} .mix-work .mxA-dot.on::before{background:#FF7CB9;border-color:#0a0f1e;transform:scale(1.25)} .mix-work .mxA-dot span{top:46px} /* MST moss banner v1 */ .mstone{background:#0a0f1e;color:#fff;padding:clamp(56px,7vw,96px) 0;overflow:hidden;position:relative} .mstone::before{content:"";position:absolute;right:-10%;top:-30%;width:60%;height:160%;background:radial-gradient(ellipse at center,rgba(255,124,185,.16),rgba(255,124,185,0) 65%);pointer-events:none} .mstone-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center;position:relative} .mstone-eb{color:#FF7CB9;font:700 12px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;margin:0 0 14px} .mstone h2{color:#fff;font-size:clamp(32px,4vw,54px);line-height:1.03;letter-spacing:-.02em;margin:0 0 18px} .mstone h2 mark{background:none;color:#FF7CB9;display:block} .mstone-copy p{color:rgba(255,255,255,.8);font-size:17px;line-height:1.6;max-width:540px;margin:0 0 12px} .mstone-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px} .mstone-tags span{border:1px solid rgba(255,124,185,.45);color:#FF7CB9;border-radius:999px;padding:8px 13px;font:700 13px/1 Inter,sans-serif} .mstone-stage{position:relative;height:320px;border-radius:24px;background:linear-gradient(180deg,#121a35,#0d1328);border:1px solid rgba(255,255,255,.07);overflow:hidden} .mstone-ground{position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(180deg,#1a2342,#141b33);border-top:2px dashed rgba(255,124,185,.25)} .mstone-rocks{position:absolute;inset:0;z-index:1} .mstone-rock{position:absolute;border-radius:46% 54% 50% 50%/55% 48% 52% 45%;background:radial-gradient(circle at 35% 30%,#6b6f7e,#3a3d4a 55%,#24262f);box-shadow:inset -8px -10px 0 rgba(0,0,0,.25),0 8px 14px rgba(0,0,0,.35)} .mstone-rock:nth-child(2n){border-radius:55% 45% 48% 52%/50% 56% 44% 50%;background:radial-gradient(circle at 35% 30%,#767a89,#40434f 55%,#272a33)} .mstone-rock:nth-child(3n){border-radius:50% 50% 42% 58%/46% 52% 48% 54%} .mstone-mm{position:absolute;bottom:44px;left:0;width:46%;max-width:240px;transform:translateX(-120%);z-index:2;filter:drop-shadow(0 8px 8px rgba(0,0,0,.4))} .mstone-wall{position:absolute;top:18px;left:14px;right:14px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;z-index:3;pointer-events:none} .mstone-wall b{position:relative;opacity:0;white-space:nowrap;background:#FF7CB9;color:#0a0f1e;font:800 12px/1 Inter,sans-serif;padding:7px 10px;border-radius:999px;box-shadow:0 6px 14px rgba(0,0,0,.3)} .mstone-wall b::after{content:"";position:absolute;left:9px;right:9px;top:50%;height:2px;margin-top:-1px;background:#0a0f1e;border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .35s ease} .mstone-wall b.hit::after{transform:scaleX(1)} .mstone-bits{position:absolute;inset:0;pointer-events:none;z-index:4} .mstone-bits i{position:absolute;border-radius:40% 60% 45% 55%;background:#4a4e5c;box-shadow:inset -3px -3px 0 rgba(0,0,0,.25)} .mstone-bits i:nth-child(3n){background:#FF7CB9} .mstone-again{all:unset;cursor:pointer;justify-self:end;grid-column:2;margin-top:-8px;color:rgba(255,255,255,.65);font:600 13px/1 Inter,sans-serif;opacity:0;transition:opacity .3s} .mstone-again.show{opacity:1}.mstone-again:hover{color:#FF7CB9} @media (max-width:860px){.mstone-in{grid-template-columns:1fr}.mstone-stage{height:290px}.mstone-again{grid-column:1}.mstone-wall{gap:6px;top:12px;left:10px;right:10px}.mstone-wall b{font-size:11px;padding:6px 9px}} /* MST why fantasy football links */ .why-ff a{color:inherit;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px} .why-ff a:hover{color:#0a0f1e;text-decoration-color:#fff} /* MST tailored start bands v1 */ .start-band .start-band-title mark{background:none;color:#FF7CB9} .start-band.sb-mm .start-band-art,.start-band.sb-cut .start-band-art{width:min(52%,760px)!important;opacity:1;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%);mask-image:linear-gradient(90deg,transparent 0%,#000 38%)} .start-band.sb-mm .start-band-art img{object-fit:cover;object-position:center} .start-band.sb-cut .start-band-art{width:min(40%,500px)!important;-webkit-mask-image:none;mask-image:none} .start-band.sb-cut .start-band-art img{object-fit:contain;object-position:right center;padding:36px 5% 36px 0;box-sizing:border-box} .start-band.sb-abs .start-band-art{width:100%!important;opacity:.95;-webkit-mask-image:none;mask-image:none} .start-band.sb-abs .start-band-art img{object-fit:cover;object-position:right center} @media (max-width:760px){.start-band.sb-mm .start-band-art,.start-band.sb-cut .start-band-art{width:100%!important;opacity:.28}.start-band.sb-cut .start-band-art img{padding:0;object-position:center bottom}.start-band.sb-abs .start-band-art{opacity:.45}} /* MST service hero eyebrow */ .hero h1.hero-kicker{line-height:1.55;margin-top:0} .hero p.hero-title{font-family:'Plus Jakarta Sans','Helvetica Neue',Arial,sans-serif;font-weight:800;margin-top:0} .hero--service .hero-inner > .is-style-mst-eyebrow{margin-bottom:14px} .hero[class*="hero--tone-pink"] .hero-inner > .is-style-mst-eyebrow{color:#0a0f1e} /* MST service banners v1 */ .hero.hero--banner .hero-art.spx-art.hero-art--strip img{object-fit:contain!important;object-position:right bottom!important} @media (min-width:861px){.hero.hero--banner .hero-art.spx-art.hero-art--strip{width:calc(min(64%,900px) + max(0px,(100% - 1264px) / 2))!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 120px)!important;mask-image:linear-gradient(90deg,transparent 0,#000 120px)!important}} .hero.hero--banner .hero-art.spx-art.hero-art--zoom img{transform:scale(1.6);transform-origin:70% 45%} @media (max-width:860px){.hero.hero--banner .hero-art.spx-art.hero-art--zoom img{transform:scale(1.4);transform-origin:75% 60%}} .hero.hero--banner .hero-art.spx-art.hero-art--contain img{object-fit:contain!important;object-position:right center!important;padding:24px 0} @media (min-width:861px){.hero.hero--banner .hero-art.spx-art.hero-art--contain{width:calc(min(58%,820px) + max(0px,(100% - 1264px) / 2))!important}} .hero--banner{background:#0a0f1e} @media (min-width:861px){.hero--banner .hero-title{max-width:735px}.hero--banner .hero-text{max-width:520px}.hero.hero--banner .hero-art.spx-art{width:calc(min(50%,700px) + max(0px,(100% - 1264px) / 2))!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 220px)!important;mask-image:linear-gradient(90deg,transparent 0,#000 220px)!important}.hero.hero--banner .hero-art.spx-art img{object-position:right center!important}} /* MST cmo days cards v1 */ .cm-on .cm-list{list-style:none;margin:0 0 18px;padding:0} .cm-on .cm-list li{position:relative;padding:0 0 0 30px;margin:0 0 10px;font-size:16px;line-height:1.45;color:#2b3142} .cm-on .cm-list li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:#e0468e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat} .cm-on .cm-best{margin:0 0 20px;padding:14px 16px;border-radius:12px;background:#fdd0e4;font-size:15px;line-height:1.45;color:#0a0f1e} .cm-on .cm-best b{display:block;font:700 11px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#b0306d;margin-bottom:6px} .cm-on .cm-cta{display:inline-flex;gap:8px;align-items:center;background:#0a0f1e;color:#fff!important;text-decoration:none;font:700 15px/1 'Plus Jakarta Sans',sans-serif;padding:14px 18px;border-radius:6px} .cm-on .cm-cta:hover{background:#FF7CB9;color:#0a0f1e!important} .cm-on .in{animation:cmIn .45s cubic-bezier(.2,.8,.2,1)} @keyframes cmIn{from{opacity:0;transform:translateY(8px)}} /* A */ .cmA{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px;align-items:stretch} .cmA-card{background:#fff;border:1px solid rgba(10,15,30,.1);border-radius:22px;padding:28px;display:flex;flex-direction:column;transition:background .3s,color .3s,transform .3s,box-shadow .3s;cursor:pointer;outline:none} .cmA-card .cm-cta{margin-top:auto;align-self:flex-start} .cmA-dots{display:flex;gap:6px;margin-bottom:22px}.cmA-dots i{width:22px;height:8px;border-radius:99px;background:#e6e3dc}.cmA-dots i.on{background:#FF7CB9} .cmA-n{font:800 72px/.9 'Plus Jakarta Sans',sans-serif;letter-spacing:-.05em;color:#e0468e;margin:0}.cmA-n span{display:block;font:500 15px/1.4 Inter,sans-serif;letter-spacing:0;color:#5b6274;margin-top:8px} .cmA-t{font:800 22px/1.2 'Plus Jakarta Sans',sans-serif;margin:16px 0 18px;color:#0a0f1e} .cmA-card.is-sel{background:#0a0f1e;transform:translateY(-6px);box-shadow:0 24px 50px rgba(10,15,30,.25);border-color:#0a0f1e} .cmA-card.is-sel .cmA-n{color:#FF7CB9}.cmA-card.is-sel .cmA-n span,.cmA-card.is-sel .cm-list li{color:#d6d9e2}.cmA-card.is-sel .cmA-t{color:#fff}.cmA-card.is-sel .cmA-dots i{background:rgba(255,255,255,.15)}.cmA-card.is-sel .cmA-dots i.on{background:#FF7CB9} .cmA-card.is-sel .cm-cta{background:#FF7CB9;color:#0a0f1e!important} @media (max-width:860px){.cmA{grid-template-columns:1fr}.cmA-card.is-sel{transform:none}} /* MST compare table v1 */ .cp{margin-top:34px} .cp-logo{font:800 18px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.02em;color:#fff}.cp-logo b{color:#FF7CB9;font-weight:800} .cp .in{animation:cpIn .4s cubic-bezier(.2,.8,.2,1)}@keyframes cpIn{from{opacity:.2;transform:translateY(6px)}} /* B */ .cpB-wrap{background:#fff;border:1px solid rgba(10,15,30,.08);border-radius:26px;padding:10px 24px 10px;box-shadow:0 18px 40px rgba(10,15,30,.06);position:relative} .cpB-row{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr 1.25fr;gap:0;align-items:stretch;border-top:1px solid rgba(10,15,30,.07)} .cpB-row:first-child{border-top:0} .cpB-row > span{padding:18px 16px;font-size:15px;line-height:1.45;color:#4a5061} .cpB-head > span{font:800 16px/1.2 'Plus Jakarta Sans',sans-serif;color:#0a0f1e;padding-top:26px;padding-bottom:18px;display:flex;align-items:flex-end} .cpB-l{font:700 15px/1.4 'Plus Jakarta Sans',sans-serif!important;color:#0a0f1e!important} .cpB-row:not(.cpB-head):hover > span:not(.cpB-me){background:#faf8f3} .cpB-me{background:#0a0f1e;color:#fff!important;position:relative;padding-left:46px!important} .cpB-head .cpB-me{border-radius:18px 18px 0 0;margin-top:-26px;padding:22px 18px 18px!important;flex-direction:column;align-items:flex-start!important;gap:10px} .cpB-head .cpB-me img{width:48px;height:48px;border-radius:50%} .cpB-row:last-child .cpB-me{border-radius:0 0 18px 18px;margin-bottom:-24px;padding-bottom:28px!important} .cpB-ok{position:absolute;left:16px;top:18px;width:20px;height:20px;border-radius:50%;background:#FF7CB9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0f1e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat} .cpB-wrap{margin-bottom:24px;margin-top:40px} @media (max-width:860px){.cpB-wrap{padding:6px 14px}.cpB-head{display:none!important}.cpB-row{grid-template-columns:1fr;padding:12px 0}.cpB-row > span{padding:4px 0}.cpB-row > span[data-h]::before{content:attr(data-h) ": ";font-weight:700;color:#0a0f1e}.cpB-me{border-radius:12px!important;margin:6px 0 0!important;padding:12px 12px 12px 42px!important}.cpB-ok{left:12px;top:12px}.cpB-row:last-child .cpB-me{padding-bottom:12px!important}} /* MST what you get more */ .icon-item-more{display:none} .wyg-more{margin:22px 0 28px!important;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);max-width:520px} .wyg-more .wyg-mh{font:700 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#FF7CB9;margin:0 0 14px} .wyg-more .icon-item-more{display:block;list-style:none;margin:0;padding:0} .wyg-more .icon-item-more li{position:relative;padding:0 0 0 32px;margin:0 0 12px;color:#e6e8ef;font-size:17px;line-height:1.45} .wyg-more .icon-item-more li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:#FF7CB9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0f1e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat} /* MST 90 days timeline v1 */ .d9-on .d9-list{list-style:none;margin:0;padding:0} .d9-on .d9-list li{position:relative;padding-left:30px;margin:0 0 10px;font-size:16px;line-height:1.45} .d9-on .d9-list li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:#FF7CB9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0f1e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat} .d9-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap} .d9-foot p{margin:0;font-size:15px;color:#c9cdd8} .d9-cta{display:inline-flex;gap:8px;align-items:center;background:#FF7CB9;color:#0a0f1e!important;text-decoration:none;font:700 15px/1 'Plus Jakarta Sans',sans-serif;padding:14px 18px;border-radius:6px}.d9-cta:hover{background:#fff} .d9B{margin-top:34px;background:#0a0f1e;border-radius:26px;padding:clamp(24px,3.5vw,48px);position:relative} .d9B-row{display:grid;grid-template-columns:56px 1fr;gap:22px;position:relative;padding-bottom:26px} .d9B-row::before{content:"";position:absolute;left:27px;top:48px;bottom:0;width:2px;background:linear-gradient(#FF7CB9,rgba(255,124,185,.15));transform-origin:top;transform:scaleY(0);transition:transform .8s ease .25s} .d9B-row.is-in::before{transform:scaleY(1)} .d9B-node span{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#FF7CB9;color:#0a0f1e;font:800 22px/1 'Plus Jakarta Sans',sans-serif;box-shadow:0 0 0 8px rgba(255,124,185,.15);transform:scale(.4);opacity:0;transition:transform .5s cubic-bezier(.2,1.4,.4,1),opacity .4s} .d9B-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:22px 26px;display:grid;grid-template-columns:1fr 1fr;gap:6px 30px;opacity:0;transform:translateY(34px);transition:opacity .6s ease .1s,transform .6s cubic-bezier(.2,.8,.2,1) .1s} .d9B-row.is-in .d9B-node span{transform:none;opacity:1} .d9B-row.is-in .d9B-card{opacity:1;transform:none} .d9B-k{grid-column:1/-1;font:700 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#FF7CB9;margin:0 0 4px} .d9B-card h3{color:#fff;font-size:24px;margin:0;grid-column:1}.d9B-d{color:#c9cdd8;margin:8px 0 0;font-size:16px;line-height:1.55;grid-column:1} .d9B-card .d9-list{grid-column:2;grid-row:2/4;align-self:center}.d9B .d9-list li{color:#e6e8ef} .d9B-end{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center;opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s}.d9B-end.is-in{opacity:1;transform:none}.d9B-end img{width:120px} @media (max-width:860px){.d9B-card{grid-template-columns:1fr}.d9B-card .d9-list{grid-column:1;grid-row:auto;margin-top:12px}.d9B-row{grid-template-columns:40px 1fr;gap:14px}.d9B-node span{width:40px;height:40px;font-size:17px}.d9B-row::before{left:19px;top:40px}.d9B-end{grid-template-columns:1fr}} /* MST route to market v1 */ .rtm{position:relative;padding:clamp(64px,8vw,110px) 0;background:#0a0f1e;color:#fff} .rtm .h2{color:#fff}.rtm .is-style-mst-eyebrow{color:#FF7CB9} .rtm-head{max-width:760px;margin-bottom:28px}.rtm-lead{font-size:18px;color:#c9cdd8;line-height:1.6;margin:10px 0 0} .rtm-frame{position:relative;border-radius:30px;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 80px rgba(0,0,0,.4);background:#0a0f1e} .rtm-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.rtm-scroll::-webkit-scrollbar{display:none} .rtm-stage{position:relative;width:100%;aspect-ratio:1200/430;min-width:820px} .rtm-stage svg{position:absolute;inset:0;width:100%;height:100%;display:block} .rtm-path{fill:none;stroke:#fff;stroke-opacity:.45;stroke-width:3;stroke-dasharray:2 9;stroke-linecap:round} .rtm-glow{fill:none;stroke:#FF7CB9;stroke-opacity:.0;stroke-width:8} .rtm-prog{fill:none;stroke:#FF7CB9;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,124,185,.8))} .rtm-node{all:unset;cursor:pointer;position:absolute;transform:translate(-50%,-50%);z-index:3} .rtm-dot{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;border:2.5px solid #FF7CB9;color:#e0468e;font:800 13px/1 'Plus Jakarta Sans',sans-serif;box-shadow:0 4px 14px rgba(10,15,30,.35);transition:all .3s} .rtm-node.is-done .rtm-dot{background:#FF7CB9;color:#0a0f1e} .rtm-node.is-on .rtm-dot{background:#FF7CB9;color:#0a0f1e;transform:scale(1.25);box-shadow:0 0 0 8px rgba(255,124,185,.25),0 4px 14px rgba(10,15,30,.35)} .rtm-lab{position:absolute;left:50%;bottom:calc(100% + 64px);transform:translateX(-50%);white-space:nowrap;font:800 14px/1 'Plus Jakarta Sans',sans-serif;color:#0a0f1e;background:#fff;padding:7px 11px;border-radius:999px;box-shadow:0 6px 16px rgba(10,15,30,.12);transition:all .3s} .rtm-lab::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:52px;background:linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,0))} .rtm-node.is-on .rtm-lab{background:#FF7CB9;color:#0a0f1e} .rtm-mm{position:absolute;width:88px;z-index:4;pointer-events:none;transform-origin:50% 92%;filter:drop-shadow(0 6px 6px rgba(10,15,30,.45))} .rtm-mm.walk{animation:rtmBob .32s ease-in-out infinite alternate} @keyframes rtmBob{to{margin-top:-4px}} .rtm-card{position:relative;z-index:5;display:block;padding:0 clamp(24px,3.5vw,44px) clamp(24px,3.5vw,40px);margin-top:-40px;align-items:center} .rtm-k{font:700 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#FF7CB9;margin:0 0 12px} .rtm-copy h3{font-size:clamp(26px,2.6vw,34px);margin:0 0 12px;color:#fff} .rtm-d{font-size:17px;line-height:1.6;color:#c9cdd8;margin:0 0 22px;max-width:540px} .rtm-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .rtm-nav > span{font:700 14px/1 'Plus Jakarta Sans',sans-serif;color:#9aa0b2;min-width:40px;text-align:center} .rtm-prev,.rtm-next{all:unset;cursor:pointer;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.25);font:700 24px/1 Inter,sans-serif;color:#fff;transition:all .2s} .rtm-prev:hover,.rtm-next:hover{background:#FF7CB9;color:#0a0f1e;border-color:#FF7CB9} .rtm-cta{margin-left:auto;display:inline-flex;gap:8px;align-items:center;background:#FF7CB9;color:#0a0f1e!important;text-decoration:none;font:700 15px/1 'Plus Jakarta Sans',sans-serif;padding:14px 18px;border-radius:6px}.rtm-cta:hover{background:#fff;color:#0a0f1e!important} .rtm-more{display:inline-block;margin-top:16px;color:#FF7CB9;font-weight:700;text-decoration:none;font-size:15px}.rtm-more:hover{text-decoration:underline} .rtm-art{position:relative;height:100%;min-height:230px;border-radius:20px;background:radial-gradient(circle at 70% 30%,rgba(255,124,185,.35),transparent 55%),linear-gradient(160deg,#1f2650,#121733);display:grid;place-items:center;overflow:hidden} .rtm-ic{color:#FF7CB9;width:42%;max-width:140px;filter:drop-shadow(0 0 24px rgba(255,124,185,.45))}.rtm-ic svg{width:100%;height:auto;display:block} .rtm .in{animation:rtmIn .45s cubic-bezier(.2,.8,.2,1)}@keyframes rtmIn{from{opacity:0;transform:translateY(8px)}} .rtm-copy{display:grid;grid-template-columns:.85fr 1.15fr;column-gap:56px;align-items:start} .rtm-copy .rtm-k{grid-column:1;grid-row:1} .rtm-copy h3{grid-column:1;grid-row:2;margin:0} .rtm-copy .rtm-d{grid-column:2;grid-row:1/3;margin:0 0 20px;max-width:none} .rtm-copy .rtm-nav{grid-column:2;grid-row:3} .rtm-copy .rtm-more{grid-column:2;grid-row:4} @media (max-width:860px){.rtm-copy{grid-template-columns:1fr}.rtm-copy > *{grid-column:1!important;grid-row:auto!important}.rtm-copy h3{margin:0 0 12px}.rtm-cta{margin-left:0}.rtm-lab{font-size:12px}.rtm-card{margin-top:-10px}} /* MST build the pipeline v1 */ .bp{padding:clamp(64px,8vw,110px) 0;background:#f8f7f3} .bp-head{max-width:720px;margin-bottom:38px}.bp-lead{font-size:18px;color:#4a5061;line-height:1.6;margin:10px 0 0} .bp-steps{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:30px} .bp-rail{position:absolute;left:8.33%;right:8.33%;top:44px;height:3px;background:#f0d6e3;border-radius:3px} .bp-rail i{position:absolute;left:0;top:0;bottom:0;width:0;background:#FF7CB9;border-radius:3px;transition:width .6s cubic-bezier(.4,0,.2,1)} .bp-step{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:12px;position:relative;z-index:1} .bp-ic{position:relative;width:88px;height:88px;border-radius:50%;background:#fff;display:grid;place-items:center;color:#e0468e;box-shadow:0 10px 26px rgba(10,15,30,.08);border:2px solid transparent;transition:all .3s} .bp-ic svg{width:38px;height:38px} .bp-step:hover .bp-ic{transform:translateY(-3px)} .bp-step.is-past .bp-ic{border-color:#FF7CB9} .bp-step.is-on .bp-ic{background:#0a0f1e;color:#FF7CB9;border-color:#FF7CB9;box-shadow:0 0 0 8px rgba(255,124,185,.18),0 16px 30px rgba(10,15,30,.25);transform:scale(1.08)} .bp-pips{position:absolute;right:-2px;top:-2px;min-width:24px;height:24px;border-radius:12px;background:#FF7CB9;color:#0a0f1e;font:800 12px/24px 'Plus Jakarta Sans',sans-serif;text-align:center;transform:scale(0);transition:transform .3s cubic-bezier(.2,1.4,.4,1)} .bp-step.is-cov .bp-pips{transform:scale(1)} .bp-lab{font:800 16px/1.2 'Plus Jakarta Sans',sans-serif;color:#0a0f1e;text-align:center} .bp-card{background:#0a0f1e;color:#fff;border-radius:24px;padding:clamp(24px,3.5vw,40px);display:grid;grid-template-columns:1.3fr 1fr;gap:36px;align-items:center;box-shadow:0 24px 50px rgba(10,15,30,.18)} .bp-c1{display:grid;grid-template-columns:76px 1fr;gap:22px;align-items:start} .bp-cic{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;color:#FF7CB9;background:radial-gradient(circle,rgba(255,124,185,.22),rgba(255,124,185,.04));border:1px solid rgba(255,124,185,.35)}.bp-cic svg{width:36px;height:36px} .bp-k{font:700 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#FF7CB9;margin:0 0 8px} .bp-card h3{color:#fff;font-size:28px;margin:0 0 10px} .bp-d{color:#c9cdd8;font-size:17px;line-height:1.6;margin:0} .bp-feeds{margin:14px 0 0;font-size:15px;color:#e6e8ef}.bp-feeds b{color:#FF7CB9} .bp-list{list-style:none;margin:0;padding:0 0 0 30px;border-left:1px solid rgba(255,255,255,.12)} .bp-list li{position:relative;padding-left:30px;margin:0 0 14px;font-size:16px;color:#e6e8ef} .bp-list li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:#FF7CB9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0f1e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat} .bp-ch{display:grid;grid-template-columns:.8fr 1.6fr;gap:30px;align-items:center;margin-top:40px} .bp-ch h3{font-size:24px;margin:0 0 6px;color:#0a0f1e}.bp-ch p{margin:0;color:#4a5061} .bp-chips{display:flex;flex-wrap:wrap;gap:10px} .bp-chip{all:unset;cursor:pointer;padding:14px 22px;border-radius:999px;background:#fff;border:1.5px solid rgba(10,15,30,.12);font:700 15px/1 'Plus Jakarta Sans',sans-serif;color:#0a0f1e;transition:all .2s} .bp-chip:hover{border-color:#FF7CB9}.bp-chip.on{background:#FF7CB9;border-color:#FF7CB9;color:#0a0f1e;box-shadow:0 8px 18px rgba(255,124,185,.35)} .bp-sum{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid rgba(10,15,30,.1)} .bp-sum-t{margin:0;color:#3a4152;font-size:16px}.bp-sum-t b{color:#e0468e} .bp-cta{display:inline-flex;gap:8px;align-items:center;background:#0a0f1e;color:#fff!important;text-decoration:none;font:700 15px/1 'Plus Jakarta Sans',sans-serif;padding:14px 18px;border-radius:6px}.bp-cta:hover{background:#FF7CB9;color:#0a0f1e!important} .bp .in{animation:bpIn .45s cubic-bezier(.2,.8,.2,1)}@keyframes bpIn{from{opacity:0;transform:translateY(8px)}} @media (max-width:860px){.bp-steps{grid-template-columns:repeat(3,1fr);row-gap:20px}.bp-rail{display:none}.bp-ic{width:68px;height:68px}.bp-ic svg{width:30px;height:30px}.bp-lab{font-size:14px}.bp-card{grid-template-columns:1fr}.bp-list{border-left:0;padding-left:0}.bp-c1{grid-template-columns:1fr}.bp-ch{grid-template-columns:1fr}} /* MST event lifecycle v1 */ .elc{padding:clamp(64px,8vw,110px) 0;background:#f8f7f3} .elc-head{max-width:720px;margin-bottom:34px}.elc-head h2{font-size:clamp(34px,3.6vw,52px);line-height:1.02;letter-spacing:-.035em;font-weight:800;margin:0;color:#0a0f1e}.elc-head h2 mark{background:none;color:#FF7CB9}.elc-lead{font-size:18px;color:#4a5061;line-height:1.6;margin:10px 0 0} .elc-track{background:#fff;border-radius:24px 24px 0 0;padding:26px clamp(18px,3vw,40px) 30px;border:1px solid rgba(10,15,30,.07);border-bottom:0} .elc-phases{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:18px} .elc-phases span{position:relative;text-align:center;font:700 11px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#e0468e;padding-bottom:12px} .elc-phases span::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:8px;border:2px solid #f3c6db;border-bottom:0;border-radius:8px 8px 0 0} .elc-steps{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:8px} .elc-rail{position:absolute;left:8.33%;right:8.33%;top:36px;height:3px;background:#f6dbe8;border-radius:3px} .elc-rail i{position:absolute;left:0;top:0;bottom:0;width:0;background:#FF7CB9;border-radius:3px;transition:width .6s cubic-bezier(.4,0,.2,1)} .elc-step{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:12px;position:relative;z-index:1} .elc-step:focus-visible .elc-ic{outline:3px solid #0a0f1e;outline-offset:3px} .elc-ic{width:72px;height:72px;border-radius:50%;background:#fdeaf3;display:grid;place-items:center;color:#e0468e;border:2px solid #fff;transition:all .3s} .elc-ic svg{width:32px;height:32px} .elc-step:hover .elc-ic{transform:translateY(-3px);background:#fbd9e9} .elc-step.is-past .elc-ic{background:#FF7CB9;color:#0a0f1e} .elc-step.is-on .elc-ic{background:#0a0f1e;color:#FF7CB9;box-shadow:0 0 0 7px rgba(255,124,185,.22),0 14px 28px rgba(10,15,30,.22);transform:scale(1.1)} .elc-lab{font:800 15px/1.2 'Plus Jakarta Sans',sans-serif;color:#0a0f1e;text-align:center} .elc-step.is-on .elc-lab{color:#e0468e} .elc-card{display:grid;grid-template-columns:1.45fr 1fr;background:#fff;border:1px solid rgba(10,15,30,.07);border-top:1px solid rgba(10,15,30,.08);border-radius:0 0 24px 24px;overflow:hidden;box-shadow:0 26px 50px rgba(10,15,30,.08)} .elc-body{padding:clamp(24px,3.5vw,44px)} .elc-k{margin:0 0 10px;font:700 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#6b7180} .elc-k span{display:inline-block;background:#0a0f1e;color:#FF7CB9;border-radius:999px;padding:6px 10px;margin-right:8px} .elc-body h3{font-size:clamp(26px,2.4vw,32px);margin:0 0 10px;color:#0a0f1e} .elc-d{color:#4a5061;font-size:17px;line-height:1.6;margin:0 0 20px;max-width:520px} .elc-list{list-style:none;margin:0 0 26px;padding:0} .elc-list li{position:relative;padding-left:32px;margin:0 0 12px;font-size:16px;color:#1d2333} .elc-list li::before{content:"";position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;background:#FF7CB9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0f1e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat} .elc-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:22px;border-top:1px solid rgba(10,15,30,.08)} .elc-arrow{all:unset;cursor:pointer;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(10,15,30,.15);display:grid;place-items:center;color:#0a0f1e;transition:all .2s} .elc-arrow svg{width:18px;height:18px}.elc-arrow:hover{background:#0a0f1e;color:#FF7CB9;border-color:#0a0f1e}.elc-arrow[disabled]{opacity:.3;cursor:default;background:none;color:#0a0f1e;border-color:rgba(10,15,30,.15)} .elc-count{font:600 15px/1 'Plus Jakarta Sans',sans-serif;color:#6b7180;min-width:44px;text-align:center}.elc-count b{color:#0a0f1e;font-weight:800} .elc-cta{margin-left:auto;display:inline-flex;gap:8px;align-items:center;background:#FF7CB9;color:#0a0f1e!important;text-decoration:none;font:700 15px/1 'Plus Jakarta Sans',sans-serif;padding:14px 18px;border-radius:6px}.elc-cta:hover{background:#0a0f1e;color:#fff!important} .elc-side{position:relative;background:#0a0f1e;color:#fff;padding:clamp(28px,3.5vw,48px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;min-height:340px} .elc-side::before{content:"";position:absolute;width:420px;height:420px;right:-150px;top:-160px;border-radius:50%;background:radial-gradient(circle,rgba(255,124,185,.32),rgba(255,124,185,0) 65%)} .elc-big{position:absolute;right:28px;top:26px;width:150px;height:150px;color:#FF7CB9;opacity:.9}.elc-big svg{width:100%;height:100%;stroke-width:1.1} .elc-ask{position:relative;margin:0 0 10px;font:700 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#FF7CB9} .elc-q{position:relative;margin:0;font:800 clamp(22px,2vw,28px)/1.25 'Plus Jakarta Sans',sans-serif;color:#fff} .elc-proof{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:center;margin-top:28px} .elc-pk{margin:0;font:700 12px/1.4 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#0a0f1e} .elc-stats{display:grid;grid-template-columns:repeat(3,1fr);background:#0a0f1e;border-radius:18px;overflow:hidden} .elc-stat{padding:24px 26px;border-left:1px solid rgba(255,255,255,.1)}.elc-stat:first-child{border-left:0} .elc-stat b{display:block;font:800 clamp(30px,3vw,40px)/1 'Plus Jakarta Sans',sans-serif;color:#FF7CB9;margin-bottom:8px} .elc-stat span{font-size:14px;color:#c9cdd8;line-height:1.45} .elc .in{animation:elcIn .45s cubic-bezier(.2,.8,.2,1)}@keyframes elcIn{from{opacity:0;transform:translateY(8px)}} @media (max-width:860px){.elc-phases{display:none}.elc-steps{grid-template-columns:repeat(3,1fr);row-gap:18px}.elc-rail{display:none}.elc-ic{width:60px;height:60px}.elc-ic svg{width:26px;height:26px}.elc-lab{font-size:13px}.elc-card{grid-template-columns:1fr}.elc-side{min-height:220px;order:-1}.elc-big{width:96px;height:96px}.elc-cta{margin-left:0;width:100%;justify-content:center}.elc-proof{grid-template-columns:1fr}.elc-stats{grid-template-columns:1fr}.elc-stat{border-left:0;border-top:1px solid rgba(255,255,255,.1)}.elc-stat:first-child{border-top:0}} /* MST crm see the difference v1 */ .cmf{padding:clamp(64px,8vw,110px) 0 clamp(64px,8vw,100px);background:#f8f7f3;overflow-x:clip} .cmf-head{max-width:720px;margin-bottom:30px}.cmf-head h2{font-size:clamp(34px,3.6vw,52px);line-height:1.02;letter-spacing:-.035em;font-weight:800;margin:0;color:#0a0f1e}.cmf-head h2 mark{background:none;color:#FF7CB9}.cmf-lead{font-size:18px;color:#4a5061;line-height:1.6;margin:10px 0 0} .cmf-stage{position:relative;height:clamp(440px,42vw,560px);border-radius:24px;overflow:hidden;background:#0a0f1e;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize;box-shadow:0 26px 50px rgba(10,15,30,.18)} .cmf-l{position:absolute;inset:0;z-index:1;isolation:isolate}.cmf-after{z-index:2} .cmf-before{background:radial-gradient(ellipse at 30% 30%,#1a2032,#0a0f1e 70%)} .cmf-after{background:radial-gradient(ellipse at 50% 46%,rgba(255,124,185,.22),rgba(10,15,30,0) 45%),#0d1325;clip-path:inset(0 0 0 var(--x));-webkit-clip-path:inset(0 0 0 var(--x))} .cmf-tag{position:absolute;top:22px;font:700 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;padding:8px 12px;border-radius:999px;z-index:2} .cmf-before .cmf-tag{left:22px;background:rgba(255,255,255,.08);color:#aab0be} .cmf-after .cmf-tag{right:22px;background:#FF7CB9;color:#0a0f1e} .cmf-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .cmf-lines path,.cmf-lines line{fill:none;vector-effect:non-scaling-stroke} .cmf-before .cmf-lines path{stroke:rgba(200,206,220,.28);stroke-width:1.5;stroke-dasharray:6 5} .cmf-before .cmf-lines path:nth-child(2n){stroke-dasharray:none;stroke:rgba(200,206,220,.18)} .cmf-base line{stroke:rgba(255,124,185,.45);stroke-width:2.5} .cmf-flow line{stroke:#FF7CB9;stroke-width:3;stroke-dasharray:3 14;stroke-linecap:round;animation:cmfFlow 1.4s linear infinite} @keyframes cmfFlow{to{stroke-dashoffset:-34}} .cmf-n{position:absolute;transform:translate(-50%,-50%);min-width:150px;padding:14px 16px;border-radius:14px;text-align:center;z-index:1} .cmf-n b{display:block;font:800 16px/1.2 'Plus Jakarta Sans',sans-serif;margin-bottom:4px} .cmf-n span{display:block;font-size:13px;line-height:1.3} .cmf-before .cmf-n{background:#151b2c;border:1.5px dashed rgba(200,206,220,.3);color:#aab0be}.cmf-before .cmf-n b{color:#d6dae4} .cmf-before .cmf-n:nth-child(odd){transform:translate(-50%,-50%) rotate(-2deg)} .cmf-before .cmf-n span::before{content:"! ";color:#FF7CB9;font-weight:800} .cmf-after .cmf-n{background:#121a30;border:1.5px solid rgba(255,124,185,.6);color:#c9cdd8;box-shadow:0 10px 24px rgba(0,0,0,.25)}.cmf-after .cmf-n b{color:#fff} .cmf-after .cmf-n span::before{content:"✓ ";color:#FF7CB9;font-weight:800} .cmf-n--hub{min-width:180px;padding:20px 22px} .cmf-after .cmf-n--hub{background:#FF7CB9;border-color:#FF7CB9;color:#0a0f1e;box-shadow:0 0 0 10px rgba(255,124,185,.15),0 0 60px rgba(255,124,185,.45)}.cmf-after .cmf-n--hub b{color:#0a0f1e;font-size:22px}.cmf-after .cmf-n--hub span::before{color:#0a0f1e} .cmf-stage.is-fixed .cmf-after .cmf-n--hub{animation:cmfPulse 1.6s ease-in-out infinite} @keyframes cmfPulse{50%{box-shadow:0 0 0 18px rgba(255,124,185,.08),0 0 80px rgba(255,124,185,.6)}} .cmf-bar{position:absolute;top:0;bottom:0;left:var(--x);width:3px;margin-left:-1.5px;background:#FF7CB9;z-index:3;box-shadow:0 0 18px rgba(255,124,185,.7)} .cmf-knob{all:unset;position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#FF7CB9;color:#0a0f1e;display:grid;place-items:center;cursor:grab;box-shadow:0 8px 24px rgba(0,0,0,.35)} .cmf-knob svg{width:24px;height:24px}.cmf-knob:focus-visible{outline:3px solid #fff;outline-offset:3px} .cmf-drag{position:relative;height:96px;margin-top:-34px;z-index:4;touch-action:pan-y;cursor:ew-resize} .cmf-rider{position:absolute;left:var(--x);bottom:0;transform:translateX(-50%);display:flex;align-items:flex-end;pointer-events:none} .cmf-rider img{width:150px;height:auto;display:block;transform:scaleX(-1);transition:transform .25s;filter:drop-shadow(0 10px 14px rgba(10,15,30,.25))} .cmf-drag.is-right .cmf-rider img{transform:scaleX(1)} .cmf-hint{position:absolute;left:100%;bottom:26px;white-space:nowrap;margin-left:6px;background:#fde3ef;color:#0a0f1e;font:700 14px/1 'Plus Jakarta Sans',sans-serif;padding:12px 16px;border-radius:999px;transition:opacity .3s} .cmf-hint::before{content:"← ";color:#e0468e} .cmf.is-moved .cmf-hint{opacity:0} .cmf:not(.is-moved) .cmf-rider{animation:cmfNudge 2.4s ease-in-out infinite} @keyframes cmfNudge{0%,60%,100%{margin-left:0}30%{margin-left:-14px}} .cmf-cols{display:grid;grid-template-columns:1fr 1fr auto;gap:28px;align-items:end;margin-top:26px} .cmf-k{margin:0 0 12px;font:700 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#6b7180} .cmf-col--after .cmf-k{color:#e0468e} .cmf-col ul{list-style:none;margin:0;padding:0} .cmf-col li{position:relative;padding-left:28px;margin:0 0 10px;font-size:16px;color:#4a5061} .cmf-col li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:#e6e7ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7180' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/10px no-repeat} .cmf-col--after li{color:#0a0f1e} .cmf-col--after li::before{background:#FF7CB9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0f1e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat} .cmf-cta{display:inline-flex;gap:8px;align-items:center;background:#0a0f1e;color:#fff!important;text-decoration:none;font:700 15px/1 'Plus Jakarta Sans',sans-serif;padding:15px 20px;border-radius:6px;white-space:nowrap;margin-bottom:10px}.cmf-cta:hover{background:#FF7CB9;color:#0a0f1e!important} @media (max-width:860px){.cmf-stage{height:520px}.cmf-n{min-width:0;width:116px;padding:10px 8px}.cmf-n b{font-size:13px}.cmf-n span{font-size:11px}.cmf-n--hub{width:132px}.cmf-after .cmf-n--hub b{font-size:17px}.cmf-tag{top:14px}.cmf-before .cmf-tag{left:14px}.cmf-after .cmf-tag{right:14px}.cmf-rider img{width:110px}.cmf-hint{display:none}.cmf-n--web,.cmf-n--ads{left:21%!important}.cmf-n--eml,.cmf-n--sal{left:79%!important}.cmf-cols{grid-template-columns:1fr}.cmf-cta{justify-content:center}} /* MST support sorter v1 */ .mso{padding:clamp(64px,8vw,110px) 0;background:#f8f7f3} .mso-in{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(24px,3vw,44px);align-items:start} .mso-main h2{font-size:clamp(34px,3.6vw,52px);line-height:1.02;letter-spacing:-.035em;font-weight:800;margin:0;color:#0a0f1e}.mso-main h2 mark{background:none;color:#FF7CB9} .mso-lead{font-size:18px;color:#4a5061;line-height:1.6;margin:10px 0 28px} .mso-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .mso-job{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:16px;background:#fff;border:1.5px solid rgba(10,15,30,.08);transition:all .2s;min-height:150px} .mso-job:hover{border-color:#FF7CB9;transform:translateY(-2px);box-shadow:0 12px 24px rgba(10,15,30,.07)} .mso-job:focus-visible{outline:3px solid #0a0f1e;outline-offset:2px} .mso-ic{width:44px;height:44px;border-radius:12px;background:#fdeaf3;color:#e0468e;display:grid;place-items:center}.mso-ic svg{width:24px;height:24px} .mso-t b{display:block;font:800 16px/1.2 'Plus Jakarta Sans',sans-serif;color:#0a0f1e;margin-bottom:4px} .mso-t small{display:block;font-size:13px;line-height:1.4;color:#6b7180} .mso-ck{position:absolute;top:16px;right:16px;width:24px;height:24px;border-radius:7px;border:1.5px solid rgba(10,15,30,.18);display:grid;place-items:center;color:transparent;transition:all .2s}.mso-ck svg{width:14px;height:14px} .mso-job.on{background:#0a0f1e;border-color:#0a0f1e;box-shadow:0 14px 28px rgba(10,15,30,.2)} .mso-job.on .mso-ic{background:rgba(255,124,185,.16);color:#FF7CB9} .mso-job.on .mso-t b{color:#fff}.mso-job.on .mso-t small{color:#aab0be} .mso-job.on .mso-ck{background:#FF7CB9;border-color:#FF7CB9;color:#0a0f1e} .mso-card{position:sticky;top:190px;background:#0a0f1e;color:#fff;border-radius:24px;padding:28px;margin-top:70px;box-shadow:0 26px 50px rgba(10,15,30,.18)} .mso-card.bump{animation:msoBump .4s cubic-bezier(.2,1.4,.4,1)}@keyframes msoBump{40%{transform:scale(1.015)}} .mso-mm{position:absolute;right:10px;top:-86px;width:190px;height:auto;filter:drop-shadow(0 12px 16px rgba(10,15,30,.3));transition:transform .5s cubic-bezier(.2,1.4,.4,1)} .mso-card.has .mso-mm{transform:translateX(-10px) rotate(-3deg)} .mso-top{display:flex;align-items:center;gap:10px;margin-bottom:14px} .mso-k{margin:0;font:700 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#FF7CB9} .mso-n{min-width:26px;height:26px;border-radius:13px;background:#FF7CB9;color:#0a0f1e;font:800 13px/26px 'Plus Jakarta Sans',sans-serif;text-align:center} .mso-list{list-style:none;margin:0 0 20px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.05);min-height:52px} .mso-list li{position:relative;padding-left:28px;margin:6px 0;font-size:15px;color:#e6e8ef;animation:msoIn .3s ease} .mso-list li::before{content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:#FF7CB9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0f1e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat} .mso-list li.mso-empty{padding-left:0;color:#7d8495;font-style:italic}.mso-list li.mso-empty::before{display:none} @keyframes msoIn{from{opacity:0;transform:translateX(-6px)}} .mso-rec h3{color:#fff;font-size:22px;margin:0 0 8px}.mso-rec p{color:#c9cdd8;font-size:15px;line-height:1.6;margin:0 0 18px} .mso-fmt{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:22px} .mso-f{padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,.12);transition:all .25s} .mso-f b{display:block;font:800 13px/1.2 'Plus Jakarta Sans',sans-serif;color:#aab0be}.mso-f small{display:block;font-size:11px;line-height:1.35;color:#7d8495;margin-top:3px} .mso-f.on{background:#FF7CB9;border-color:#FF7CB9}.mso-f.on b{color:#0a0f1e}.mso-f.on small{color:#3a1a2a} .mso-go{display:flex;justify-content:center;gap:8px;align-items:center;background:#FF7CB9;color:#0a0f1e!important;text-decoration:none;font:700 15px/1 'Plus Jakarta Sans',sans-serif;padding:15px 18px;border-radius:6px}.mso-go:hover{background:#fff} .mso-go[aria-disabled=true]{opacity:.4;pointer-events:none} @media (max-width:960px){.mso-in{grid-template-columns:1fr}.mso-card{position:relative;top:0;margin-top:90px}} @media (max-width:600px){.mso-grid{grid-template-columns:1fr 1fr}.mso-job{min-height:0;padding:14px}.mso-t small{display:none}.mso-ck{top:12px;right:12px}.mso-mm{width:150px;top:-74px}.mso-fmt{grid-template-columns:1fr}} /* MST speaking build lift v1 */ @media (min-width:901px){.skx-build .skx-in{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:26px;align-items:start}.skx-build .skx-in>.skx-eb,.skx-build .skx-in>h2,.skx-build .skx-in>.skx-lead{grid-column:1}.skx-build .skx-grid{display:contents}.skx-build .skx-grid>div:first-child{grid-column:1;grid-row:4}.skx-build .skx-card{grid-column:2;grid-row:1 / span 4}} /* MST form card anchor offset */ @media (max-width:899px){.message-section .form-card{scroll-margin-top:90px}} /* MST 404 rotate v1 */ .hero--404v2{background:#0a0f1e;min-height:clamp(520px,44vw,680px);display:flex;align-items:center} .hero--404v2 .hero-art--404{position:absolute;inset:0;background-size:cover;background-position:right center;background-repeat:no-repeat} .hero--404v2 .hero-art--404::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0a0f1e 0,rgba(10,15,30,.85) 30%,rgba(10,15,30,0) 58%)} .hero--404v2 .hero-inner{position:relative;z-index:1} .hero--404v2 .hero-title{max-width:780px}.hero--404v2 .hero-text{max-width:560px} @media (max-width:860px){.hero--404v2{flex-direction:column;align-items:stretch;min-height:0;padding-top:0}.hero.hero--404v2 .hero-art.hero-art--404{position:relative!important;inset:auto!important;top:auto!important;left:auto!important;right:auto!important;width:100%!important;height:62vw!important;min-height:240px;background-position:78% center!important;opacity:1!important;display:block!important}.hero--404v2 .hero-art--404::after{background:linear-gradient(0deg,#0a0f1e 0,rgba(10,15,30,0) 45%)}.hero--404v2 .hero-inner{padding-top:8px;padding-bottom:56px}} /* MST engine result full width v1 */ @media (min-width:901px){ .eng-inner>.eng-result{grid-column:1 / -1;margin-top:4px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);grid-template-areas:"h l" "p l" "c l";column-gap:clamp(24px,3vw,44px);row-gap:6px;align-items:center;padding:28px 32px} .eng-inner>.eng-result[hidden]{display:none} .eng-inner>.eng-result>h3{grid-area:h;margin:0;align-self:end} .eng-inner>.eng-result>p{grid-area:p;margin:0;align-self:start} .eng-inner>.eng-result>ul{grid-area:l;margin:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 32px;align-self:stretch;align-content:center;padding-left:clamp(20px,2.5vw,36px);border-left:1px solid rgba(255,255,255,.1)} .eng-inner>.eng-result>.eng-cta{grid-area:c;justify-self:start;margin-top:12px;white-space:nowrap} .eng-inner>.eng-result>*:not(h3):not(p):not(ul):not(.eng-cta){grid-column:1 / -1} } /* MST testimonial navy split v1 */ .testimonial.tq .testimonial-slides{position:relative;display:block;max-width:1060px;margin:0 auto} .testimonial.tq .testimonial-slide{display:grid;animation:tqIn .45s cubic-bezier(.2,.8,.2,1)} .testimonial.tq .testimonial-slide[hidden]{display:none} @keyframes tqIn{from{opacity:0;transform:translateY(8px)}} .testimonial.tq .testimonial-cite p{margin:0} .testimonial.tq .cite-name{font:800 17px/1.25 'Plus Jakarta Sans',sans-serif} .testimonial.tq .cite-role{font-size:14px;line-height:1.4} .testimonial.tq .cite-company{font:700 14px/1.4 'Plus Jakarta Sans',sans-serif} .testimonial.tq .tq-av{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font:800 17px/1 'Plus Jakarta Sans',sans-serif;overflow:hidden} .testimonial.tq .tq-av img{width:100%;height:100%;object-fit:cover;display:block} .testimonial.tq .tq-av.has-img{box-shadow:0 0 0 3px #FF7CB9} .testimonial.tq .testimonial-arrows{display:flex;align-items:center;gap:12px} .testimonial.tq .testimonial-arrows.tq-solo{display:none} .testimonial.tq .tq-count{font:600 14px/1 'Plus Jakarta Sans',sans-serif;min-width:62px;text-align:center} .testimonial.tq-b{background:#0a0f1e;color:#fff;padding:clamp(56px,7vw,100px) 0} .testimonial.tq .tq-all{max-width:1060px;margin:40px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font:700 15px/1 'Plus Jakarta Sans',sans-serif}.testimonial.tq .tq-all a{color:#FF7CB9;text-decoration:none}.testimonial.tq .tq-all a:hover{color:#fff} .testimonial.tq-b.tq-jt{border-top:1px solid rgba(255,124,185,.22)}.testimonial.tq-b.tq-jb{border-bottom:1px solid rgba(255,124,185,.22)} .tq-b .testimonial-slide{grid-template-columns:56px minmax(0,1fr) 270px;column-gap:clamp(24px,3vw,44px);align-items:start} .tq-b .quote-mark{width:56px;height:56px;color:#FF7CB9;margin:0} .tq-b .testimonial-quote{font:700 clamp(22px,2.3vw,31px)/1.32 'Plus Jakarta Sans',sans-serif;letter-spacing:-.02em;color:#fff;max-width:none} .tq-b .testimonial-cite{display:flex;flex-direction:column;gap:2px;margin:0;min-width:0;border-left:2px solid #FF7CB9;padding:2px 0 76px 28px;min-height:100%} .tq-b .testimonial-cite .tq-av{background:#FF7CB9;color:#0a0f1e;margin:3px 0 16px 3px} .tq-b .cite-name{color:#fff}.tq-b .cite-role{color:#aab0be}.tq-b .cite-company{color:#FF7CB9} .tq-b .testimonial-arrows{position:absolute;right:0;bottom:0;width:270px;padding-left:30px;box-sizing:border-box} .testimonial.tq-b .tq-count{color:#7d8495}.testimonial.tq-b .tq-count b{color:#fff;font-weight:800} .tq-b .circle-btn{color:#FF7CB9;border-color:rgba(255,124,185,.5)}.tq-b .circle-btn:hover{background:#FF7CB9;color:#0a0f1e} @media (max-width:860px){.tq-b .testimonial-slide{grid-template-columns:1fr;row-gap:18px}.tq-b .quote-mark{width:42px;height:42px}.tq-b .testimonial-cite{padding:6px 0 6px 20px;min-height:0}.tq-b .testimonial-arrows{position:static;width:auto;padding-left:0;margin-top:22px}} /* MST testimonials page v1 */ .tsm{background:#f8f7f3;padding:clamp(56px,7vw,100px) 0} .tsm-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:28px} .tsm-head .is-style-mst-eyebrow{margin:0} .tsm-count{margin:0;color:#4a5061;font-size:15px}.tsm-count b{color:#0a0f1e;font-family:'Plus Jakarta Sans',sans-serif} .tsm-grid{columns:2;column-gap:24px} .tsm-card{break-inside:avoid;margin:0 0 24px;background:#fff;border:1px solid rgba(10,15,30,.07);border-radius:22px;padding:clamp(24px,3vw,36px);box-shadow:0 18px 40px rgba(10,15,30,.06);display:flex;flex-direction:column;gap:18px} .tsm-mark{width:34px;height:34px;color:#FF7CB9} .tsm-q{margin:0;padding:0;border:0} .tsm-q p{margin:0;font:600 clamp(17px,1.5vw,19px)/1.55 'Plus Jakarta Sans',sans-serif;color:#0a0f1e;letter-spacing:-.005em} .tsm-cite{display:flex;align-items:center;gap:14px;padding-top:18px;border-top:1px solid rgba(10,15,30,.08)} .tsm-av{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 3px #FF7CB9} .tsm-who{display:flex;flex-direction:column;line-height:1.35} .tsm-who strong{font:800 16px/1.3 'Plus Jakarta Sans',sans-serif;color:#0a0f1e} .tsm-role{font-size:14px;color:#4a5061} .tsm-co{font:700 14px/1.4 'Plus Jakarta Sans',sans-serif;color:#e0468e} .tsm-card--feat{column-span:all;background:#0a0f1e;border-color:#0a0f1e;display:grid;grid-template-columns:56px minmax(0,1fr) 280px;column-gap:clamp(20px,3vw,40px);align-items:start;padding:clamp(28px,4vw,52px);margin-bottom:28px} .tsm-card--feat .tsm-mark{width:52px;height:52px} .tsm-card--feat .tsm-q p{color:#fff;font-weight:700;font-size:clamp(21px,2.2vw,29px);line-height:1.35;letter-spacing:-.02em} .tsm-card--feat .tsm-cite{flex-direction:column;align-items:flex-start;border-top:0;padding:2px 0 0 26px;border-left:2px solid #FF7CB9;gap:14px} .tsm-card--feat .tsm-who strong{color:#fff}.tsm-card--feat .tsm-role{color:#aab0be}.tsm-card--feat .tsm-co{color:#FF7CB9} @media (max-width:860px){.tsm-grid{columns:1}.tsm-card--feat{grid-template-columns:1fr;row-gap:16px}.tsm-card--feat .tsm-mark{width:40px;height:40px}.tsm-card--feat .tsm-cite{padding-left:18px}} /* MST chat page answers v1 */ .sxc-m .sxc-pg{display:block;margin:8px 0;padding:10px 12px;border-radius:12px;background:#fdeaf3;color:#0a0f1e!important;text-decoration:none!important} .sxc-m .sxc-pg b{display:block;font:700 14px/1.3 'Plus Jakarta Sans',sans-serif;color:#0a0f1e} .sxc-m .sxc-pg small{display:block;font-size:12.5px;line-height:1.4;color:#4a5061;margin-top:2px} .sxc-m .sxc-pg:hover{background:#FF7CB9} /* MST mega mammoth smaller */ @media (min-width:1101px){.site-nav .mega-mammoth{width:185px!important;right:10px!important;bottom:-2px!important}} /* MST gm data fill */ @media (min-width:761px){.gm-section .gm-art .gm-pose.is-scene.is-fill{object-fit:cover!important;object-position:86% center!important;width:100%!important;height:100%!important}} /* MST contact strip v2 */ .cs-new .contact-strip{background:#f8f7f3;padding:clamp(40px,5vw,64px) 0;border-top:0} .cs-new .contact-strip-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .cs-new .contact-item{position:relative;flex-direction:column;align-items:flex-start;gap:18px;padding:28px 28px 26px!important;border:1px solid rgba(10,15,30,.07)!important;border-radius:20px;background:#fff;box-shadow:0 14px 34px rgba(10,15,30,.06);transition:transform .25s,box-shadow .25s,border-color .25s} .cs-new .contact-item:hover{transform:translateY(-4px);border-color:#FF7CB9!important;box-shadow:0 20px 40px rgba(255,124,185,.18)} .cs-new .contact-item > .icon{width:26px;height:26px;padding:15px;border-radius:50%;background:#fdeaf3;color:#e0468e;box-sizing:content-box;transition:background .25s,color .25s} .cs-new .contact-item:hover > .icon{background:#0a0f1e;color:#FF7CB9} .cs-new .contact-item h3{color:#e0468e;margin-bottom:6px} .cs-new .contact-item p{font-size:15px} .cs-new .contact-item p.contact-link{margin-top:14px;padding-top:14px;border-top:1px solid rgba(10,15,30,.08);width:100%;display:flex;align-items:center;gap:10px;flex-wrap:wrap;word-break:normal} .cs-new .contact-item p.contact-link a{font:800 18px/1.2 'Plus Jakarta Sans',sans-serif;color:#0a0f1e;text-decoration:none} .cs-new .contact-item p.contact-link a::after{content:"";position:absolute;inset:0;border-radius:20px} .cs-new .contact-item p.contact-link button,.cs-new .contact-item p.contact-link .copy-btn{position:relative;z-index:2} @media (max-width:900px){.cs-new .contact-strip-grid{grid-template-columns:1fr}.cs-new .contact-item{border-top:1px solid rgba(10,15,30,.07)!important}} /* MST services art crop */ .page-id-7 .service-art{background-position:74% center!important} /* MST gm cutouts */ .gm-section .gm-art .gm-pose.is-scene.is-cut{object-fit:contain!important;object-position:center bottom!important;padding:22px 20px 14px 0;box-sizing:border-box;filter:drop-shadow(0 14px 18px rgba(10,15,30,.28))} @media (max-width:760px){.gm-section .gm-art .gm-pose.is-scene.is-cut{padding:0 18px 8px;max-height:240px;margin:0 auto}} /* MST why mostadon v2 */ .wy2-head{text-align:center;max-width:760px;margin:0 auto clamp(30px,4vw,48px)} .wy2-h2{font:800 clamp(38px,4.4vw,62px)/1.02 'Plus Jakarta Sans',sans-serif;letter-spacing:-.035em;color:#0a0f1e;margin:6px 0 0;display:flex;align-items:center;justify-content:center;gap:.25em;flex-wrap:wrap} .wy2-h2 .why-logo{height:.72em;width:auto} .wy2-why{display:inline-block;font:800 clamp(24px,2.4vw,32px)/1 'Plus Jakarta Sans',sans-serif;color:#FF7CB9;background:#0a0f1e;padding:12px 22px;border-radius:999px;transform:rotate(-2deg);margin:14px 0 0;letter-spacing:-.02em} .wy2-row{max-width:780px;margin:0 auto} .wy2-art{margin:0;position:sticky;top:110px}.wy2-art img{width:100%;height:auto;border-radius:22px;display:block;box-shadow:0 24px 50px rgba(10,15,30,.16)} .wy2-story p{font-size:17px;line-height:1.7;color:#1d1320;margin:0 0 16px} .wy2-story .wy2-lead{font:600 clamp(19px,1.6vw,22px)/1.55 'Plus Jakarta Sans',sans-serif;color:#0a0f1e} .wy2-story em{color:#0a0f1e;font-style:normal;font-weight:700;background:rgba(255,255,255,.45);padding:1px 6px;border-radius:6px} .wy2-k{font:700 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#c2266f;margin:0 0 12px} .wy2-names{background:#fff;border:1px solid rgba(10,15,30,.08);border-radius:18px;padding:20px 22px;margin:6px 0 22px;box-shadow:0 12px 28px rgba(10,15,30,.05)} .wy2-names ul{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:8px} .wy2-names li{padding:9px 14px;border-radius:999px;background:#f3f1ec;font:600 14px/1.2 'Plus Jakarta Sans',sans-serif;color:#7d8495} .wy2-names s{text-decoration-color:#FF7CB9;text-decoration-thickness:2px} .wy2-names .wy2-verdict{margin:0;font-size:15px;color:#4a5061}.wy2-names .wy2-verdict b{color:#0a0f1e} .wy2-eq{margin:clamp(36px,5vw,64px) 0 0;background:#0a0f1e;border-radius:24px;padding:clamp(26px,4vw,44px);text-align:center;color:#fff;position:relative;overflow:hidden} .wy2-eq::before{content:"";position:absolute;width:520px;height:520px;right:-200px;top:-260px;border-radius:50%;background:radial-gradient(circle,rgba(255,124,185,.28),rgba(255,124,185,0) 65%)} .wy2-eq .wy2-k{color:#FF7CB9;position:relative} .wy2-sum{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 14px;margin:6px 0 18px} .wy2-t{padding:12px 18px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font:700 clamp(15px,1.4vw,19px)/1.2 'Plus Jakarta Sans',sans-serif;color:#fff} .wy2-sum i{font:800 26px/1 'Plus Jakarta Sans',sans-serif;color:#FF7CB9;font-style:normal} .wy2-t--ans{background:#FF7CB9;border-color:#FF7CB9;padding:12px 20px;display:flex;align-items:center} .wy2-t--ans .why-logo{height:22px;width:auto}.wy2-t--ans .why-logo .lg-a,.wy2-t--ans .why-logo .lg-b{fill:#0a0f1e} .wy2-beard{position:relative;margin:0;color:#c9cdd8;font-size:15px;font-style:italic} .wy2-ff{margin-top:18px;display:grid;grid-template-columns:72px minmax(0,1fr);gap:22px;align-items:start;background:#fff;box-shadow:0 18px 40px rgba(10,15,30,.1);border-radius:24px;padding:clamp(24px,3.5vw,40px)} .wy2-ff-ic{width:72px;height:72px;border-radius:50%;background:#0a0f1e;color:#FF7CB9;display:grid;place-items:center}.wy2-ff-ic svg{width:34px;height:34px} .wy2-ff h3{font:800 clamp(19px,1.7vw,23px)/1.35 'Plus Jakarta Sans',sans-serif;color:#0a0f1e;margin:0 0 18px;letter-spacing:-.01em} .wy2-ff-btns{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px} .wy2-btn{display:inline-flex;gap:8px;align-items:center;padding:13px 18px;border-radius:6px;background:#0a0f1e;color:#fff!important;text-decoration:none;font:700 15px/1 'Plus Jakarta Sans',sans-serif}.wy2-btn:hover{background:#e0468e} .wy2-btn--ghost{background:transparent;color:#0a0f1e!important;border:1.5px solid #0a0f1e}.wy2-btn--ghost:hover{background:#0a0f1e;color:#fff!important} .wy2-small{margin:0;color:#3a4152;font-size:15px;line-height:1.6} .wy2-sign{text-align:center;margin:clamp(36px,5vw,56px) auto 0;font:600 clamp(19px,1.8vw,24px)/1.4 'Plus Jakarta Sans',sans-serif;color:#0a0f1e;max-width:760px} .wy2-sign strong{display:inline-flex;align-items:center;gap:.3em;font-weight:800;white-space:nowrap} .wy2-sign .why-logo{height:.78em;width:auto} .wy2-eq,.wy2-ff{max-width:980px;margin-left:auto;margin-right:auto} @media (max-width:860px){.wy2-row{grid-template-columns:1fr}.wy2-art{position:static}.wy2-ff{grid-template-columns:1fr}.wy2-ff-ic{width:56px;height:56px}.wy2-sum i{font-size:20px}} /* MST gm card navy art on pink */ @media (min-width:761px){ .gmc-a .gm-section .gm-art:has(.gm-pose.is-scene){top:16px!important;bottom:16px!important;right:16px!important;height:auto!important;width:calc(100% - 392px)!important;border-radius:16px!important;overflow:hidden!important;box-shadow:0 14px 30px rgba(10,15,30,.28)} .gmc-a .gm-section .gm-art .gm-pose.is-scene{object-fit:cover!important;object-position:80% center!important;padding:0!important;filter:none!important;width:100%!important;height:100%!important} } /* MST brand logo pink variants */ .brd .brd-logo--on-pink .lg-a{fill:#FFFFFF}.brd .brd-logo--on-pink .lg-b{fill:#0A0F1E} .brd .brd-logo--on-soft .lg-a{fill:#0A0F1E}.brd .brd-logo--on-soft .lg-b{fill:#FFFFFF} .brd-logo-tile--on-pink .brd-logo-stage{background:#FF7CB9} .brd-logo-tile--on-soft .brd-logo-stage{background:#FDD0E4} /* MST wordmark swap v1 */ .mst-wm{display:inline-block;vertical-align:baseline;line-height:0} .mst-wm svg{height:.74em;width:auto;display:block;transform:translateY(.02em)} .mst-wm .lg-a{fill:#FF7CB9} .mst-wm--light .lg-b{fill:#0A0F1E} .mst-wm--dark .lg-b{fill:#FAF9F5} .mst-wm--pink .lg-a{fill:#FFFFFF}.mst-wm--pink .lg-b{fill:#0A0F1E} .sxc-head .mst-wm svg,.gmc-head .mst-wm svg{height:.78em} .brd-logo-tile--on-pink{grid-column:1 / -1} /* MST wordmark swap fix v1 */ .gmc-head [data-wm],.sxc-head [data-wm]{white-space:nowrap} .mst-wm::before,.mst-wm::after{content:none!important;display:none!important} .gmc-head .mst-wm,.sxc-head .mst-wm,[data-wm] .mst-wm{display:inline-block!important;width:auto!important;margin:0!important;padding:0!important;background:none!important;border:0!important} /* MST why mostadon v3 */ .wy3{position:relative;background:#FC97CA;margin:-76px calc(50% - 50vw) clamp(48px,6vw,80px);padding:clamp(72px,7vw,104px) calc(50vw - 50%) clamp(64px,6vw,90px);overflow:hidden;color:#0a0f1e} .wy3-img{position:absolute;right:0;bottom:0;width:clamp(560px,calc((100vw - 700px) * 2),1520px);height:auto;max-height:100%;object-fit:cover;object-position:right bottom;max-width:none;display:block;pointer-events:none} .wy3-copy{position:relative;z-index:1;max-width:550px} .wy3-eyebrow{font:700 13px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#0a0f1e;margin:0 0 18px} .wy3-h2{font:800 clamp(52px,5.8vw,86px)/.98 'Plus Jakarta Sans',sans-serif;letter-spacing:-.04em;color:#0a0f1e;margin:0 0 26px} .wy3-h2>span{display:block} .wy3-lg{display:inline-flex!important;align-items:flex-end;gap:.04em;white-space:nowrap} .wy3-h2 .wy3-lg{margin-top:.08em} .wy3-lg .why-logo{height:.74em;width:auto;display:block;margin-bottom:.06em} .wy3-lg i{font-style:normal;line-height:.8} .wy3 .why-logo .lg-a{fill:#FFFFFF}.wy3 .why-logo .lg-b{fill:#0A0F1E} .wy3-not{font:800 clamp(26px,2.3vw,32px)/1.1 'Plus Jakarta Sans',sans-serif;letter-spacing:-.02em;color:#0a0f1e;margin:0 0 16px} .wy3-copy>p{font-size:17px;line-height:1.65;color:#1b1424;margin:0 0 14px} .wy3-ff{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;align-items:start;border-top:1px solid rgba(10,15,30,.18);margin-top:28px;padding-top:28px} .wy3-ic{color:#d81b77;display:block}.wy3-ic svg{width:48px;height:48px;display:block} .wy3-ff h3{font:800 clamp(22px,1.9vw,26px)/1.15 'Plus Jakarta Sans',sans-serif;color:#0a0f1e;margin:0 0 8px;letter-spacing:-.015em} .wy3-ff p{font-size:16px;line-height:1.55;color:#1b1424;margin:0 0 18px} .wy3-btns{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 16px} .wy3-btn{display:inline-flex;gap:8px;align-items:center;padding:14px 20px;border-radius:6px;background:#0a0f1e;color:#fff!important;text-decoration:none;font:700 15px/1 'Plus Jakarta Sans',sans-serif;border:1.5px solid #0a0f1e;transition:background .2s,color .2s} .wy3-btn:hover{background:#d81b77;border-color:#d81b77} .wy3-btn--ghost{background:transparent;color:#0a0f1e!important} .wy3-btn--ghost:hover{background:#0a0f1e;border-color:#0a0f1e;color:#fff!important} .wy3-ff .wy3-small{font-size:14px;color:#2a2235;margin:0} .wy3-sign{margin:30px 0 0;font:600 clamp(18px,1.6vw,21px)/1.45 'Plus Jakarta Sans',sans-serif;color:#0a0f1e} .wy3-sign strong{display:inline-flex;align-items:center;gap:.3em;font-weight:800;white-space:nowrap} .wy3-lg--s .why-logo{height:.74em;margin:0} .why--v3 .wy2{display:none} @media (max-width:1060px){.wy3-copy{max-width:470px}} @media (max-width:860px){ .wy3{display:flex;flex-direction:column;padding-bottom:0} .wy3-img{position:static;order:2;height:auto;width:calc(100% + 40px);max-width:none;margin:28px -20px 0 auto;opacity:1;aspect-ratio:1/1;object-fit:cover;object-position:88% 100%} .wy3-copy{max-width:none} .wy3-ff{grid-template-columns:1fr;gap:10px} .wy3-sign strong{white-space:normal;flex-wrap:wrap} } /* MST why mostadon v3 tune */ .wy3{padding-top:clamp(56px,5.5vw,84px);padding-bottom:clamp(52px,5vw,76px)} .wy3-img{height:100%;width:clamp(560px,calc((100vw - 720px) * 2),1700px);object-fit:contain;object-position:right bottom;max-height:none} .wy3-copy{max-width:560px} .wy3-h2{font-size:clamp(48px,5vw,76px);margin-bottom:22px} .wy3-not{margin-bottom:12px} .wy3-copy>p{font-size:16px;line-height:1.6;margin-bottom:12px} .wy3-ff{margin-top:22px;padding-top:22px} .wy3-ff p{font-size:15px;margin-bottom:16px} .wy3-btn{padding:13px 16px;font-size:14px} .wy3-btns{flex-wrap:nowrap;gap:10px} .wy3-sign{margin-top:24px} section.why.why--v3{padding-top:0!important} .wy3 .wy3-sign{margin-top:30px;font-size:clamp(18px,1.5vw,21px)} .wy3-sign strong{display:inline;white-space:nowrap} .wy3-lg.wy3-lg--s{display:inline-block!important;vertical-align:baseline} .wy3-lg--s .why-logo{height:.76em;display:inline-block;margin:0 .04em 0 .1em;vertical-align:-.02em} .why--v3 .wy3{margin-top:0} @media (max-width:1060px){.wy3-copy{max-width:470px}.wy3-btns{flex-wrap:wrap}} @media (max-width:860px){.wy3-img{height:auto!important;width:calc(100% + 44px)!important;margin:24px -22px 0!important;aspect-ratio:4/5;object-fit:cover;object-position:84% 100%;align-self:stretch}.wy3{padding-bottom:0!important}} /* MST why mostadon v3 ff section */ .wy3-names{background:rgba(255,255,255,.6);border:1px solid rgba(10,15,30,.08);border-radius:16px;padding:16px 18px;margin:4px 0 16px} .wy3-k{font:700 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#b0185f;margin:0 0 10px} .wy3-names ul{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:8px} .wy3-names li{padding:8px 13px;border-radius:999px;background:#fff;font:600 14px/1.2 'Plus Jakarta Sans',sans-serif;color:#6b7183} .wy3-names s{text-decoration-color:#d81b77;text-decoration-thickness:2px} .wy3-names .wy3-verdict{margin:0;font-size:15px;color:#3a3046}.wy3-names .wy3-verdict b{color:#0a0f1e} .why--v3 .wy3{margin-bottom:0} .wy3-ffs{background:#0a0f1e;margin:0 calc(50% - 50vw) clamp(48px,6vw,80px);padding:clamp(56px,6vw,84px) calc(50vw - 50%);color:#fff;text-align:center;position:relative;overflow:hidden} .wy3-ffs::before{content:"";position:absolute;width:560px;height:560px;left:50%;top:-330px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,124,185,.22),rgba(255,124,185,0) 65%);pointer-events:none} .wy3-ffs-in{position:relative;max-width:680px;margin:0 auto} .wy3-ffs .wy3-ic{color:#FF7CB9;display:inline-block;margin:0 0 14px}.wy3-ffs .wy3-ic svg{width:52px;height:52px} .wy3-ffs-k{font:700 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#FF7CB9;margin:0 0 12px} .wy3-ffs h2{font:800 clamp(34px,3.6vw,52px)/1.05 'Plus Jakarta Sans',sans-serif;letter-spacing:-.035em;color:#fff;margin:0 0 14px} .wy3-ffs-in>p{font-size:17px;line-height:1.6;color:#d6d9e2;margin:0 0 24px} .wy3-ffs .wy3-btns{justify-content:center;flex-wrap:wrap;margin:0 0 20px} .wy3-ffs .wy3-btn{background:#FF7CB9;border-color:#FF7CB9;color:#0a0f1e!important;padding:14px 20px;font-size:15px} .wy3-ffs .wy3-btn:hover{background:#fff;border-color:#fff} .wy3-ffs .wy3-btn--ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff!important} .wy3-ffs .wy3-btn--ghost:hover{background:#fff;border-color:#fff;color:#0a0f1e!important} .wy3-ffs .wy3-small{font-size:14px;line-height:1.6;color:#9aa0b0;margin:0 auto;max-width:560px} /* MST why mostadon v3 r3 */ .wy3-h2{font-size:clamp(34px,4.3vw,62px);white-space:nowrap;display:flex;align-items:flex-end;gap:.26em} .wy3-h2>span{display:inline-block} .wy3-h2 .wy3-lg{margin-top:0} .wy3-copy>p.wy3-lead strong{font-weight:800;color:#0a0f1e;font-size:1.2em;margin-right:.15em} .wy3-names li{position:relative} .wy3-names s{text-decoration:none;position:relative} .wy3-names s::after{content:"";position:absolute;left:-3px;right:-3px;top:52%;height:2px;background:#d81b77;border-radius:2px;transform:scaleX(1);transform-origin:left center} .wy3-names.wy3-anim s::after{transform:scaleX(0);transition:transform .45s cubic-bezier(.6,0,.3,1) var(--d,0s)} .wy3-names.wy3-anim li{transition:color .3s var(--d,0s)} .wy3-names.wy3-anim:not(.is-struck) li{color:#0a0f1e} .wy3-names.wy3-anim.is-struck s::after{transform:scaleX(1)} .wy3-names.wy3-anim .wy3-verdict{opacity:0;transform:translateY(6px);transition:opacity .4s var(--d,0s),transform .4s var(--d,0s)} .wy3-names.wy3-anim.is-struck .wy3-verdict{opacity:1;transform:none} /* MST why mostadon v3 r4 */ .wy3-copy>p.wy3-lead strong{font-weight:inherit;font-size:1em;margin-right:0;color:inherit} .wy3-names.wy3-scr li{color:#0a0f1e;transition:color .25s} .wy3-names.wy3-scr li.is-done{color:#6b7183} .wy3-names.wy3-scr s::after{transform:scaleX(var(--s,0));transition:none} .wy3-names.wy3-scr .wy3-verdict{opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s} .wy3-names.wy3-scr .wy3-verdict.is-on{opacity:1;transform:none} /* MST wordmark text version v1 */ .mst-tw{white-space:nowrap;color:#FF7CB9;font-weight:inherit;letter-spacing:inherit} .mst-tw-o{display:inline-block;width:.74em;height:.74em;margin:0 .03em;border-radius:50%;background:#FF7CB9;color:transparent;overflow:hidden;vertical-align:baseline;line-height:.74em} .mst-tw--light .mst-tw-t{color:#0a0f1e} .mst-tw--dark .mst-tw-t{color:#faf9f5} .mst-tw--pink{color:#fff}.mst-tw--pink .mst-tw-o{background:#fff}.mst-tw--pink .mst-tw-t{color:#0a0f1e} .wy3-h2 .mst-tw{margin-left:0} [data-wm] .mst-tw,[data-wm] .mst-tw .mst-tw-t{display:inline!important;margin:0!important;padding:0!important;background:none!important;border:0!important;gap:0!important} [data-wm] .mst-tw .mst-tw-o{display:inline-block!important;width:.74em!important;height:.74em!important;margin:0 .03em!important;padding:0!important;border-radius:50%!important;background:#FF7CB9!important} .mst-tw::before,.mst-tw::after,.mst-tw span::before,.mst-tw span::after{content:none!important;display:none!important} .mst-tw--pink .mst-tw-o,[data-wm] .mst-tw--pink .mst-tw-o{background:#fff!important} /* MST why sign bigger */ .wy3 .wy3-sign strong{display:inline-block;font-size:1.5em;line-height:1.2;margin-top:4px;letter-spacing:-.02em} @media (max-width:420px){.wy3 .wy3-sign strong{font-size:1.4em;white-space:nowrap}} /* MST ffs style preview v1 */ /* B: white split card */ .ffs-b .wy3-ffs-in{max-width:1000px;background:#fff;border-radius:28px;padding:clamp(32px,4vw,56px);display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:48px;text-align:left;box-shadow:0 30px 60px rgba(0,0,0,.35)} .ffs-b .wy3-ffs-in>*{grid-column:2} .ffs-b .wy3-ffs .wy3-ic{grid-column:1;grid-row:1 / span 5;align-self:center;width:200px;height:200px;border-radius:50%;background:#FF7CB9;color:#0a0f1e;display:grid;place-items:center;margin:0} .ffs-b .wy3-ffs .wy3-ic svg{width:96px;height:96px} .ffs-b .wy3-ffs-k{color:#d81b77} .ffs-b .wy3-ffs h2{color:#0a0f1e} .ffs-b .wy3-ffs-in>p{color:#3a4152} .ffs-b .wy3-ffs .wy3-btns{justify-content:flex-start} .ffs-b .wy3-ffs .wy3-btn{background:#0a0f1e;border-color:#0a0f1e;color:#fff!important} .ffs-b .wy3-ffs .wy3-btn:hover{background:#d81b77;border-color:#d81b77} .ffs-b .wy3-ffs .wy3-btn--ghost{background:transparent;border-color:#0a0f1e;color:#0a0f1e!important} .ffs-b .wy3-ffs .wy3-btn--ghost:hover{background:#0a0f1e;color:#fff!important} .ffs-b .wy3-ffs .wy3-small{color:#6b7183;margin:0} /* C: league ticket */ .ffs-c .wy3-ffs-in{max-width:980px;display:grid;grid-template-columns:230px minmax(0,1fr);text-align:left;background:#faf9f5;border-radius:22px;position:relative;box-shadow:0 30px 60px rgba(0,0,0,.35)} .ffs-c .wy3-ffs-in::before,.ffs-c .wy3-ffs-in::after{content:"";position:absolute;left:218px;width:24px;height:24px;border-radius:50%;background:#0a0f1e;z-index:2} .ffs-c .wy3-ffs-in::before{top:-12px}.ffs-c .wy3-ffs-in::after{bottom:-12px} .ffs-c .wy3-ffs-in>*{grid-column:2;margin-left:clamp(28px,4vw,52px);margin-right:clamp(28px,4vw,52px)} .ffs-c .wy3-ffs .wy3-ic{grid-column:1;grid-row:1 / span 5;margin:0;background:#FF7CB9;color:#0a0f1e;border-radius:22px 0 0 22px;border-right:3px dashed rgba(10,15,30,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:28px 18px} .ffs-c .wy3-ffs .wy3-ic svg{width:84px;height:84px} .ffs-c .wy3-ffs .wy3-ic::after{content:"THE MOSTADON LEAGUE";font:800 12px/1.3 'Plus Jakarta Sans',sans-serif;letter-spacing:.18em;text-align:center;color:#0a0f1e} .ffs-c .wy3-ffs-k{color:#d81b77;margin-top:clamp(32px,4vw,48px)} .ffs-c .wy3-ffs h2{color:#0a0f1e} .ffs-c .wy3-ffs-in>p{color:#3a4152} .ffs-c .wy3-ffs .wy3-btns{justify-content:flex-start} .ffs-c .wy3-ffs .wy3-btn{background:#0a0f1e;border-color:#0a0f1e;color:#fff!important} .ffs-c .wy3-ffs .wy3-btn:hover{background:#d81b77;border-color:#d81b77} .ffs-c .wy3-ffs .wy3-btn--ghost{background:transparent;border-color:#0a0f1e;color:#0a0f1e!important} .ffs-c .wy3-ffs .wy3-btn--ghost:hover{background:#0a0f1e;color:#fff!important} .ffs-c .wy3-ffs .wy3-small{color:#6b7183;margin-bottom:clamp(32px,4vw,48px)} .ffs-b .wy3-ffs-in>p.wy3-ffs-k,.ffs-c .wy3-ffs-in>p.wy3-ffs-k{color:#d81b77} .ffs-b .wy3-ffs-in>p.wy3-small,.ffs-c .wy3-ffs-in>p.wy3-small{color:#6b7183} .ffs-c .wy3-ffs h2{margin-top:clamp(32px,4vw,48px)} /* D: editorial split */ .ffs-d .wy3-ffs-in{max-width:1180px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:clamp(40px,6vw,88px);text-align:left;align-items:start} .ffs-d .wy3-ffs .wy3-ic{grid-column:1;grid-row:1;margin:0 0 10px} .ffs-d .wy3-ffs-k{grid-column:1;grid-row:2} .ffs-d .wy3-ffs h2{grid-column:1;grid-row:3;font-size:clamp(56px,7vw,104px);line-height:.92;letter-spacing:-.045em;margin:0;text-decoration:underline wavy #FF7CB9;text-decoration-thickness:.045em;text-underline-offset:.14em;text-decoration-skip-ink:none} .ffs-d .wy3-ffs-in>p:not(.wy3-ffs-k):not(.wy3-small){grid-column:2;grid-row:1 / span 2;align-self:end;font-size:clamp(18px,1.5vw,21px);color:#e4e6ee;margin:0 0 22px} .ffs-d .wy3-ffs .wy3-btns{grid-column:2;grid-row:3;justify-content:flex-start;align-self:start;margin:0} .ffs-d .wy3-ffs .wy3-small{grid-column:2;grid-row:3;align-self:end;margin:0 0 10px;text-align:left;max-width:none} .ffs-d .wy3-ffs::before{left:20%;top:-260px} @media (max-width:760px){ .ffs-b .wy3-ffs-in,.ffs-c .wy3-ffs-in,.ffs-d .wy3-ffs-in{grid-template-columns:1fr;grid-template-rows:none} .ffs-b .wy3-ffs-in>*,.ffs-c .wy3-ffs-in>*,.ffs-d .wy3-ffs-in>*{grid-column:1!important;grid-row:auto!important} .ffs-b .wy3-ffs .wy3-ic{width:110px;height:110px;margin:0 0 18px}.ffs-b .wy3-ffs .wy3-ic svg{width:54px;height:54px} .ffs-c .wy3-ffs .wy3-ic{border-radius:22px 22px 0 0;border-right:0;border-bottom:3px dashed rgba(10,15,30,.4);flex-direction:row;padding:20px;margin:0!important} .ffs-c .wy3-ffs .wy3-ic svg{width:48px;height:48px} .ffs-c .wy3-ffs-in::before,.ffs-c .wy3-ffs-in::after{display:none} .ffs-d .wy3-ffs-in>p:not(.wy3-ffs-k):not(.wy3-small){margin:20px 0} } /* MST martech marquee v1 */ .mtq{margin-top:clamp(20px,3vw,36px)} .mtq .skx-row{animation-duration:70s} .mtq .skx-row.rev{animation-duration:78s} .mtq .skx-row .mtq-more{background:#FF7CB9;border-color:#FF7CB9;color:#0a0f1e} @media (prefers-reduced-motion: reduce){.mtq .skx-row{animation:none;flex-wrap:wrap;width:auto}.mtq .mtq-dup{display:none!important}} /* MST who layout preview v1 */ /* A: audience row with picture card, process row below */ html.wfm-a .wf-section .wf-inner{grid-template-columns:1fr!important} html.wfm-a .wf-section .wf-audience{padding-right:0!important;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;column-gap:56px;align-items:start} html.wfm-a .wf-section .wf-audience>*{grid-column:1} html.wfm-a .wf-section .wf-panel{display:contents!important} html.wfm-a .wf-section .wf-copy{grid-column:1;grid-row:5;margin-top:28px} html.wfm-a .wf-section .wf-pose{position:static!important;grid-column:2!important;grid-row:1 / span 5;align-self:center;width:100%!important;aspect-ratio:16/11;object-fit:cover;object-position:70% 60%;border-radius:24px;box-shadow:0 24px 50px rgba(10,15,30,.14);background:#f8f7f3} html.wfm-a .wf-section .wf-process{margin-top:64px;padding-top:56px;border-top:1px solid rgba(10,15,30,.12);border-left:0!important;padding-left:0!important;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);column-gap:64px;align-items:start} html.wfm-a .wf-section .wf-process>*{grid-column:1} html.wfm-a .wf-section .wf-process .wf-steps{grid-column:2;grid-row:1 / span 4;margin-top:0} html.wfm-a .wf-section .wf-process .wf-focus{grid-column:2;grid-row:5} /* B: picture card on top of the copy, columns kept */ html.wfm-b .wf-section .wf-panel{padding-right:0!important;min-height:0!important;display:flex;flex-direction:column} html.wfm-b .wf-section .wf-pose{position:static!important;order:-1;width:100%!important;aspect-ratio:16/9;object-fit:cover;object-position:72% 58%;border-radius:22px;margin:0 0 24px!important;box-shadow:0 20px 44px rgba(10,15,30,.12);background:#f8f7f3} /* C: navy split card */ html.wfm-c .wf-section .wf-panel{background:#0a0f1e;border-radius:26px;padding:36px calc(46% + 28px) 36px 34px!important;min-height:340px!important;color:#fff;box-shadow:0 24px 50px rgba(10,15,30,.18);overflow:hidden!important;position:relative!important} html.wfm-c .wf-section .wf-panel::before,html.wfm-c .wf-section .wf-panel::after{content:none!important} html.wfm-c .wf-section .wf-h3{color:#fff!important} html.wfm-c .wf-section .wf-text{color:#c9cdd8!important} html.wfm-c .wf-section .wf-pose{top:0!important;bottom:0!important;right:0!important;left:auto!important;width:46%!important;height:100%!important;object-fit:cover;object-position:74% 56%;border-radius:0;transform:none!important;background:#f8f7f3;border-left:4px solid #FF7CB9} @media (max-width:900px){ html.wfm-a .wf-section .wf-audience,html.wfm-a .wf-section .wf-panel,html.wfm-a .wf-section .wf-process{grid-template-columns:1fr} html.wfm-a .wf-section .wf-audience>*,html.wfm-a .wf-section .wf-panel>*,html.wfm-a .wf-section .wf-process>*{grid-column:1!important;grid-row:auto!important} html.wfm-c .wf-section .wf-panel{padding:28px 24px 260px!important} html.wfm-c .wf-section .wf-pose{top:auto!important;bottom:24px!important;right:50%!important;transform:translateX(50%)!important;width:200px!important} } /* MST who layout preview v1, no image D and E */ html.wfm-d .wf-section .wf-pose,html.wfm-e .wf-section .wf-pose{display:none!important} html.wfm-d .wf-section .wf-panel{padding:34px 36px 34px 40px!important;min-height:260px!important;background:#fff;border-radius:22px;border:1px solid rgba(10,15,30,.08);box-shadow:0 18px 40px rgba(10,15,30,.07);position:relative;overflow:hidden} html.wfm-d .wf-section .wf-panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:#FF7CB9} html.wfm-d .wf-section .wf-h3{font-size:clamp(26px,2.4vw,34px)!important;letter-spacing:-.02em} html.wfm-d .wf-section .wf-text{font-size:17px;line-height:1.65;max-width:520px} html.wfm-e .wf-section .wf-panel{padding:40px 40px 40px!important;min-height:280px!important;background:#0a0f1e;border-radius:24px;color:#fff;position:relative;overflow:hidden;box-shadow:0 24px 50px rgba(10,15,30,.18)} html.wfm-e .wf-section .wf-panel::before{content:"";position:absolute;width:460px;height:460px;right:-170px;top:-220px;border-radius:50%;background:radial-gradient(circle,rgba(255,124,185,.3),rgba(255,124,185,0) 65%);pointer-events:none} html.wfm-e .wf-section .wf-panel::after{content:"M";position:absolute;right:28px;bottom:-40px;font:800 220px/1 'Plus Jakarta Sans',sans-serif;color:rgba(255,124,185,.08);pointer-events:none} html.wfm-e .wf-section .wf-copy{position:relative;z-index:1} html.wfm-e .wf-section .wf-h3{color:#fff!important;font-size:clamp(28px,2.6vw,36px)!important;letter-spacing:-.02em} html.wfm-e .wf-section .wf-text{color:#c9cdd8!important;font-size:17px;line-height:1.65;max-width:500px} html.wfm-d .wf-section .wf-panel,html.wfm-e .wf-section .wf-panel{position:relative!important;overflow:hidden!important} html.wfm-d .wf-section .wf-copy,html.wfm-e .wf-section .wf-copy{max-width:none!important;width:auto!important} html.wfm-d .wf-section .wf-text,html.wfm-e .wf-section .wf-text{max-width:none!important} @media (max-width:900px){ html.wfm-e .wf-section .wf-panel{display:block!important;order:5!important;padding:28px 24px!important;min-height:0!important;margin:18px 0 8px!important} html.wfm-e .wf-section .wf-copy>*{order:0!important;display:revert} html.wfm-e .wf-section .wf-btn{display:inline-flex!important} html.wfm-e .wf-section .wf-copy{display:block!important} html.wfm-e .wf-section .wf-panel::after{font-size:160px;right:12px;bottom:-30px} html.wfm-e .wf-section .wf-h3{font-size:26px!important} html.wfm-e .wf-section .wf-text{font-size:16px} } @media (min-width:901px){ html.wfm-e .wf-section .wf-inner{grid-template-columns:minmax(0,.82fr) minmax(0,1.23fr)!important} html.wfm-e .wf-section .wf-audience{padding-right:40px!important} html.wfm-e .wf-section .wf-inner{grid-template-columns:minmax(0,.94fr) minmax(0,1.11fr)!important} html.wfm-e .wf-section .wf-tabs{flex-wrap:wrap;gap:6px} html.wfm-e .wf-section .wf-tab{padding-left:clamp(8px,.8vw,13px)!important;padding-right:clamp(8px,.8vw,13px)!important;font-size:clamp(12.5px,1vw,14px)!important;white-space:nowrap} } /* MST whole card links v1 */ .service-card,.page-id-265 .card-grid .mst-card{position:relative} .service-card{cursor:pointer} .service-card:hover .service-link a,.page-id-265 .card-grid .mst-card:hover a{text-decoration:underline;text-underline-offset:3px} .service-card:focus-within,.page-id-265 .card-grid .mst-card:focus-within{outline:2px solid #FF7CB9;outline-offset:3px} .page-id-265 .card-grid .mst-card{cursor:pointer} /* MST lazy backgrounds v1 */ html.lzbg .vs-section:not(.bg-in)::after{background-image:none!important} html.lzbg .about-home:not(.bg-in){background-image:none!important} html.lzbg .about-home:not(.bg-in) .about-home-inner::after{background-image:none!important} /* MST mobile fab clear of sticky bar v1 */ .sxc-fab{transition:bottom .25s ease} @media (max-width:760px){body:has(.svc-bar.is-on) .sxc-fab{bottom:88px!important}} /* MST card stack layouts v1 */ @media (max-width:760px){ /* A: two side by side, slimmed */ .cg-grid.cg-a{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important} .cg-grid.cg-a > *{margin:0!important;padding:14px 12px!important;min-width:0;width:auto!important;max-width:none!important} .cg-grid.cg-a h2,.cg-grid.cg-a h3,.cg-grid.cg-a h4{font-size:15px!important;line-height:1.25!important;margin:6px 0 4px!important} .cg-grid.cg-a p,.cg-grid.cg-a li{font-size:13px!important;line-height:1.45!important} .cg-grid.cg-a > * > svg,.cg-grid.cg-a .hiw-ico,.cg-grid.cg-a .hiw-ico svg,.cg-grid.cg-a .service-icon,.cg-grid.cg-a .pain-icon{width:28px!important;height:28px!important;margin-bottom:6px!important} .cg-grid.cg-a .icon-item-text{margin:0!important} .cg-grid.cg-a.icon-grid > *,.cg-grid.cg-a.hiw-rgrid > *{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:4px!important} .cg-grid.cg-a.icon-grid > * > svg{flex:none!important} .cg-grid.cg-a.icon-grid > :nth-child(2){border-top-color:transparent!important} .cg-grid.cg-a.pain-grid p{font-size:13.5px!important} .cg-grid.cg-a.pain-grid > *{padding-top:42px!important} .cg-grid.cg-a.pain-grid > *::after{width:24px!important;height:24px!important;top:10px!important;right:10px!important;font-size:15px!important;line-height:22px!important} /* B: show a few, then all */ .cg-grid.cg-b:not(.cg-open) > .cg-more{display:none!important} .cg-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:14px 0 0;padding:14px 18px;border:1.5px solid currentColor;border-radius:999px;background:transparent;color:inherit;font:700 14px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.02em;cursor:pointer} .cg-btn i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#FF7CB9;color:#0a0f1e;font-size:16px} /* C: titles, tap to open */ .cg-grid.cg-c{gap:8px!important} .cg-grid.cg-c > .cg-acc{margin:0!important;padding:14px 46px 14px 16px!important;position:relative;cursor:pointer} .cg-grid.cg-c > .cg-acc::before{content:"+";position:absolute;right:14px;top:14px;width:24px;height:24px;border-radius:50%;background:#FF7CB9;color:#0a0f1e;font:700 17px/24px 'Plus Jakarta Sans',sans-serif;text-align:center;transition:transform .2s} .cg-grid.cg-c > .cg-acc.cg-o::before{content:"\2212"} .cg-grid.cg-c > .cg-acc:not(.cg-o) .cg-x,.cg-grid.cg-c > .cg-acc:not(.cg-o) .cg-pre{display:none!important} .cg-grid.cg-c > .cg-acc h2,.cg-grid.cg-c > .cg-acc h3,.cg-grid.cg-c > .cg-acc h4{font-size:16px!important;margin:0!important;line-height:1.3!important} .cg-grid.cg-c > .cg-acc > svg,.cg-grid.cg-c .hiw-ico,.cg-grid.cg-c .service-icon{width:26px!important;height:26px!important;margin:0 0 6px!important} .cg-grid.cg-c .service-card-top{margin:0 0 4px!important} .cg-grid.cg-c > .cg-acc.cg-o .cg-x{margin-top:8px!important} /* D: lighter cards */ .cg-grid.cg-d{gap:10px!important} .cg-grid.cg-d > *{margin:0!important;padding:16px!important} .cg-grid.cg-d p:not(.service-num):not(.card-tag):not(.case-stat-value),.cg-grid.cg-d blockquote p{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .cg-grid.cg-d.tsm-grid blockquote p{-webkit-line-clamp:4!important} .cg-grid.cg-d ul,.cg-grid.cg-d ol,.cg-grid.cg-d .case-stat-label{display:none!important} .cg-grid.cg-d h2,.cg-grid.cg-d h3,.cg-grid.cg-d h4{font-size:17px!important;margin:4px 0!important} .cg-grid.cg-d > * > svg,.cg-grid.cg-d .hiw-ico svg,.cg-grid.cg-d .service-icon{width:28px!important;height:28px!important} } @media (min-width:761px){.cg-btn{display:none}} /* MST long testimonial v1 */ .tsm-card .tsm-q p + p{font-family:Inter, 'Helvetica Neue', Arial, sans-serif!important;font-size:16px!important;font-weight:400!important;line-height:1.65!important;letter-spacing:0!important;opacity:.85;margin-top:14px!important} .tsm-card .tsm-q p:first-child:not(:last-child){margin-bottom:18px!important} @media (max-width:760px){.tsm-card .tsm-q p + p{font-size:15px!important}} /* MST testimonial full view v1 */ .tsm-full{display:none!important} .tsm-modal[hidden]{display:none!important} .tsm-more{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;padding:0;border:0;background:none;color:#e0569a;font:700 14px/1.2 'Plus Jakarta Sans',sans-serif;cursor:pointer} .tsm-card--feat .tsm-more{color:#FF7CB9} .tsm-more svg{width:16px;height:16px;padding:5px;box-sizing:content-box;border-radius:50%;background:rgba(255,124,185,.16);transition:transform .2s} .tsm-more:hover svg,.tsm-more:focus-visible svg{transform:scale(1.12)} .tsm-more:hover span{text-decoration:underline;text-underline-offset:3px} html.tsm-lock{overflow:hidden} .tsm-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .2s} .tsm-modal.is-open{opacity:1} .tsm-modal-bg{position:absolute;inset:0;background:rgba(10,15,30,.78);backdrop-filter:blur(3px)} .tsm-modal-box{position:relative;width:min(720px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#fff;border-radius:22px;padding:40px 44px 36px;box-shadow:0 30px 80px rgba(0,0,0,.4);transform:translateY(14px);transition:transform .25s ease;outline:none} .tsm-modal.is-open .tsm-modal-box{transform:none} .tsm-modal-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:0;background:#f3eef1;color:#0a0f1e;font:400 24px/38px sans-serif;cursor:pointer} .tsm-modal-x:hover{background:#FF7CB9} .tsm-modal .tsm-mark{width:40px;height:40px;color:#FF7CB9;display:block;margin-bottom:14px} .tsm-modal .tsm-q{margin:0 0 24px;padding:0;border:0} .tsm-modal .tsm-q p{color:#0a0f1e;margin:0} .tsm-modal .tsm-q p:first-child{font:600 20px/1.45 'Plus Jakarta Sans',sans-serif!important;margin-bottom:16px!important;opacity:1} .tsm-modal .tsm-q p + p{color:#3a3f4f;opacity:1;margin-top:14px!important} .tsm-modal .tsm-hl{background:linear-gradient(transparent 55%,rgba(255,124,185,.35) 55%);color:inherit;padding:0 2px} .tsm-modal .tsm-cite{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid #ece7ea} @media (max-width:760px){.tsm-modal{padding:10px}.tsm-modal-box{padding:30px 22px 26px;max-height:calc(100vh - 20px)}.tsm-modal .tsm-q p:first-child{font-size:18px!important}} /* MST results cool stuff v1 */ .rs-cool{display:block;background:#0a0f1e;color:#fff;padding:96px 0} .rs-cool-head{max-width:720px;margin:0 0 40px} .rs-cool-head .h2{color:#fff;margin:8px 0 14px} .rs-cool-lead{color:rgba(255,255,255,.75);font-size:18px;line-height:1.6;margin:0} .rs-cool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .rs-cool-card{position:relative;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:24px 22px;transition:transform .25s ease,border-color .25s ease,background .25s ease} .rs-cool-card:hover{transform:translateY(-4px);border-color:rgba(255,124,185,.55);background:rgba(255,124,185,.06)} .rs-cool-ico{display:inline-flex;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;background:rgba(255,124,185,.14);color:#FF7CB9;margin-bottom:16px} .rs-cool-ico svg{width:24px;height:24px} .rs-cool-tag{font:700 11px/1.2 'Plus Jakarta Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#FF7CB9;margin:0 0 8px} .rs-cool-card h3{font:700 19px/1.25 'Plus Jakarta Sans',sans-serif;color:#fff;margin:0 0 8px} .rs-cool-card > p:not(.rs-cool-tag){font-size:15px;line-height:1.6;color:rgba(255,255,255,.72);margin:0} @media (max-width:1000px){.rs-cool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:760px){.rs-cool{padding:64px 0}.rs-cool-grid{gap:10px}.rs-cool-card{padding:16px 14px}.rs-cool-ico{width:36px;height:36px;margin-bottom:10px}.rs-cool-ico svg{width:20px;height:20px}.rs-cool-card h3{font-size:15px}.rs-cool-card > p:not(.rs-cool-tag){font-size:13px;line-height:1.5}.rs-cool-tag{font-size:10px}.rs-cool-lead{font-size:16px}} /* MST cool stuff more v1 */ .rs-cool-full{display:none!important} .rs-cool-card.has-more{cursor:pointer} .rs-cool-open{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,124,185,.45);background:rgba(255,124,185,.12);color:#FF7CB9;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s,background .2s} .rs-cool-open svg{width:15px;height:15px} .rs-cool-card.has-more:hover .rs-cool-open,.rs-cool-open:focus-visible{background:#FF7CB9;color:#0a0f1e;transform:scale(1.08)} .rs-cool-modal .rs-cool-ico{display:inline-flex;width:48px;height:48px;border-radius:12px;align-items:center;justify-content:center;background:rgba(255,124,185,.16);color:#e0569a;margin-bottom:14px} .rs-cool-modal .rs-cool-ico svg{width:26px;height:26px} .rs-cool-modal .rs-cool-tag{font:700 11px/1.2 'Plus Jakarta Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#e0569a;margin:0 0 8px} .rs-cool-modal h3{font:700 26px/1.2 'Plus Jakarta Sans',sans-serif;color:#0a0f1e;margin:0 0 16px} .rs-cool-story p{font-size:16px;line-height:1.65;color:#3a3f4f;margin:0 0 14px} .rs-cool-story img{display:block;width:100%;height:auto;border-radius:14px;margin:6px 0 16px} .rs-cool-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px!important} .rs-cool-links a{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;background:#0a0f1e;color:#fff!important;font:700 14px/1 'Plus Jakarta Sans',sans-serif;text-decoration:none} .rs-cool-links a::after{content:"\2197";color:#FF7CB9} .rs-cool-links a:hover{background:#FF7CB9;color:#0a0f1e!important} @media (max-width:760px){.rs-cool-open{top:10px;right:10px;width:28px;height:28px}.rs-cool-open svg{width:13px;height:13px}.rs-cool-modal h3{font-size:22px}} /* MST cool stuff stats v1 */ .rs-cool-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:6px 0 18px} .rs-cool-stats div{background:#0a0f1e;border-radius:12px;padding:12px 14px} .rs-cool-stats b{display:block;font:800 22px/1.1 'Plus Jakarta Sans',sans-serif;color:#FF7CB9} .rs-cool-stats span{display:block;font-size:13px;color:rgba(255,255,255,.75);margin-top:3px} @media (max-width:760px){.rs-cool-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.rs-cool-stats b{font-size:19px}} /* MST cool stuff figure v1 */ .rs-cool-fig{margin:4px 0 18px} .rs-cool-fig img{display:block;width:100%;height:auto;border-radius:14px;background:#f3eef1} .rs-cool-fig figcaption{font-size:13px;color:#6b7080;margin-top:8px} /* MST cool stuff quote v1 */ .rs-cool-quote{margin:6px 0 4px;padding:18px 20px;border-left:4px solid #FF7CB9;background:#fbf3f7;border-radius:0 12px 12px 0;font:600 16px/1.55 'Plus Jakarta Sans',sans-serif;color:#0a0f1e} .rs-cool-quote cite{display:block;margin-top:10px;font:600 13px/1.3 Inter,sans-serif;font-style:normal;color:#e0569a} /* MST cool stuff weeks v1 */ .rs-cool-weeks{margin:0 0 16px;padding:0;list-style:none;counter-reset:wk;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px} .rs-cool-weeks li{counter-increment:wk;font-size:14.5px;line-height:1.4;color:#3a3f4f;display:flex;gap:8px} .rs-cool-weeks li::before{content:"Wk " counter(wk);flex:none;width:44px;font:700 12px/1.6 'Plus Jakarta Sans',sans-serif;color:#e0569a} .rs-cool-grid > .rs-cool-card:last-child:nth-child(3n+1){grid-column:1/-1} @media (max-width:1000px){.rs-cool-grid > .rs-cool-card:last-child:nth-child(3n+1){grid-column:auto}.rs-cool-grid > .rs-cool-card:last-child:nth-child(2n+1){grid-column:1/-1}} @media (max-width:760px){.rs-cool-weeks{grid-template-columns:1fr}} .rs-cool-weeks em{display:block;font-style:normal;font-size:12px;color:#8a8f9c;margin-top:1px} /* MST living room banner v1 */ .rs-lyr{display:flex;align-items:center;gap:16px;background:radial-gradient(120% 140% at 100% 0%,#1d2440 0%,#0a0f1e 60%);border-radius:16px;padding:22px 20px 18px 24px;margin:0 0 18px;overflow:hidden} .rs-lyr-copy{flex:1;min-width:0} .rs-lyr-eb{font:700 11px/1.2 'Plus Jakarta Sans',sans-serif!important;letter-spacing:.14em;text-transform:uppercase;color:#FF7CB9!important;margin:0 0 8px!important} .rs-lyr-t{font:800 26px/1.1 'Plus Jakarta Sans',sans-serif!important;color:#fff!important;margin:0 0 8px!important;letter-spacing:-.01em} .rs-lyr-t span{color:#FF7CB9} .rs-lyr-s{font-size:14px!important;line-height:1.5!important;color:rgba(255,255,255,.75)!important;margin:0!important} .rs-lyr-art{flex:none;width:200px;height:auto} @media (max-width:760px){.rs-lyr{flex-direction:column-reverse;align-items:flex-start;padding:18px}.rs-lyr-art{width:170px;align-self:center}.rs-lyr-t{font-size:22px!important}} /* MST pricing v2 */ .pr-mock{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:0 auto 36px;padding:6px;border:1.5px dashed #c2407e;border-radius:999px;width:max-content;max-width:100%;font-family:var(--font-head);font-size:13px} .pr-mock span{padding:0 8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:11px;color:#c2407e} .pr-mock button{border:0;background:transparent;padding:8px 14px;border-radius:999px;font:600 13px/1 var(--font-head);cursor:pointer;color:var(--text)} .pr-mock button.is-on{background:var(--ink);color:#fff} .pr2 .hiw-pcard h3{font-size:26px} .pr-shape{margin:0 0 16px;font-size:16px;font-weight:600;font-family:var(--font-head)} .pr-shape span,.pr-price span.pr-lbl{display:block;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8a8fa0;margin-bottom:4px} .pr-list{list-style:none;margin:0 0 22px;padding:0;flex:1} .pr-list li{position:relative;padding:0 0 0 26px;margin:0 0 10px;font-size:15.5px;line-height:1.5;color:var(--text-2)} .pr-list li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;background:#c2407e;-webkit-mask:var(--tick) center/contain no-repeat;mask:var(--tick) center/contain no-repeat} .hiw-pcard.is-feature .pr-list li{color:#c9cdd8} .hiw-pcard.is-feature .pr-list li::before{background:#ff7cb9} .pr-price{margin:0 0 18px;font-family:var(--font-head);font-weight:800;font-size:22px;letter-spacing:-.02em} .pr-x{display:inline-block;padding:0 8px;border:1.5px dashed #c2407e;border-radius:6px;color:#c2407e;font-weight:800} .hiw-pcard.is-feature .pr-x{color:#ff7cb9;border-color:#ff7cb9} .pr-no{display:none} .pr--noprice .pr-yes{display:none} .pr--noprice .pr-no{display:inline} .pr-in{margin-top:48px;padding:36px;border-radius:18px;background:#fff;border:1px solid var(--line,#e8e5de);display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:32px;align-items:start} .pr-in-head h3{margin:10px 0 0;font-size:26px;letter-spacing:-.03em;line-height:1.15} .pr-in-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .pr-in-card{display:flex;flex-direction:column;padding:20px;border-radius:12px;background:var(--paper);color:var(--text)!important;text-decoration:none!important;transition:transform .2s,box-shadow .2s} .pr-in-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(10,15,30,.1)} .pr-in-card h4{margin:0 0 8px;font-size:18px} .pr-in-card p{margin:0 0 14px;font-size:14.5px;line-height:1.5;color:var(--text-2);flex:1} .pr-in-card .pr-price{margin:0;font-size:18px;flex:0} @media (max-width:980px){.pr-in{grid-template-columns:1fr;gap:18px;padding:24px}.pr-in-grid{grid-template-columns:1fr}} @media (max-width:600px){.pr-mock{border-radius:14px}.pr2 .hiw-pcard{padding:24px}} /* MST pricing v2 four */ .pr2 .hiw-pgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .pr2 .hiw-pcard{padding:26px 24px} .pr2 .hiw-pcard h3{font-size:24px} .pr-note{max-width:820px;margin:28px auto 0;padding:16px 20px;border-radius:12px;background:#fff;border:1px solid var(--line,#e8e5de);font-size:15px;line-height:1.55;color:var(--text-2);text-align:center} .pr-note b{color:var(--text)} .pr2 .pr-x{border:0;padding:0;font-size:1.25em;letter-spacing:-.03em;color:var(--text)} .pr2 .hiw-pcard.is-feature .pr-x{color:#ff7cb9} .pr2 .pr-price sup.pr-ast{font-size:.6em;margin-left:2px;top:-.6em} .pr2 .pr-price .pr-yes{white-space:nowrap} .pr2 .hiw-pterm{min-height:86px;box-sizing:border-box} @media (max-width:640px){.pr2 .hiw-pterm{min-height:0}} .pr-note .pr-ast{color:#c2407e;font-weight:800} @media (max-width:1100px){.pr2 .hiw-pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.pr2 .hiw-pgrid{grid-template-columns:1fr}} .pr2 .pr-price.pr-price--plain{font:700 13px/1.3 var(--font-head);letter-spacing:.1em;text-transform:uppercase;color:#c2407e} .pr2 .hiw-pfoot{flex-direction:column;gap:14px} .hiw-pfoot .pr-wink{max-width:640px;margin:0 auto 6px;font-size:15px;line-height:1.55;color:var(--text-3);font-style:italic} /* MST health check v1 */ .hc{background:var(--paper);padding:88px 0 104px} .hc-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:40px;align-items:start} .hc-card{background:#fff;border:1px solid var(--line,#e8e5de);border-radius:20px;padding:44px;box-shadow:0 24px 60px rgba(10,15,30,.06);min-height:420px} .hc-stage:focus,.hc-stage h2:focus,.hc-stage h3:focus{outline:none} .hc-h{margin:10px 0 14px;font-size:clamp(28px,3vw,38px);letter-spacing:-.03em;line-height:1.1} .hc-intro p:not(.hiw-ptype){font-size:18px;line-height:1.6;color:var(--text-2);max-width:560px} .hc-go{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:16px 28px;border:0;border-radius:8px;background:var(--pink-btn,#ff8dc4);color:var(--ink);font:700 16px/1 var(--font-head);cursor:pointer;transition:transform .2s} .hc-go:hover{transform:translateY(-2px)} .hc-prog{display:flex;justify-content:space-between;gap:12px;font:700 12px/1.3 var(--font-head);letter-spacing:.12em;text-transform:uppercase;color:#8a8fa0} .hc-prog span:last-child{color:#c2407e;text-align:right} .hc-bar{height:6px;border-radius:6px;background:var(--paper-2);margin:12px 0 30px;overflow:hidden} .hc-bar i{display:block;height:100%;background:#ff7cb9;border-radius:6px;transition:width .4s} .hc-q{margin:0 0 24px;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em;line-height:1.25} .hc-opts{display:grid;gap:10px} .hc-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px 18px;border:1.5px solid var(--line,#e8e5de);border-radius:12px;background:#fff;font:500 16px/1.4 var(--font-body);color:var(--text);cursor:pointer;transition:border-color .15s,background .15s,transform .15s} .hc-opt b{flex:0 0 30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--paper);font:700 13px/1 var(--font-head);transition:background .15s} .hc-opt:hover{border-color:var(--ink);transform:translateX(3px)} .hc-opt.is-on{border-color:#ff7cb9;background:#fff3f9} .hc-opt.is-on b{background:#ff7cb9} .hc-back{margin-top:22px;border:0;background:none;padding:0;font:600 14px/1 var(--font-head);color:var(--text-3);cursor:pointer} .hc-back:hover{color:var(--ink)} .hc-res{display:grid;grid-template-columns:150px minmax(0,1fr);gap:30px;align-items:center} .hc-score{position:relative;width:150px;height:150px} .hc-score svg{width:100%;height:100%;transform:rotate(-90deg)} .hc-ring-bg{fill:none;stroke:var(--paper-2);stroke-width:10} .hc-ring{fill:none;stroke:#ff7cb9;stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1)} .hc-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} .hc-num b{font:800 46px/1 var(--font-head);letter-spacing:-.04em} .hc-num span{font-size:12px;color:var(--text-3);margin-top:4px} .hc-band p:not(.hiw-ptype){margin:0;font-size:17px;line-height:1.55;color:var(--text-2)} .hc-areas{margin:32px 0;display:grid;gap:12px} .hc-area{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) 48px;gap:14px;align-items:center;font-size:15px} .hc-area b{font-family:var(--font-head);text-align:right} .hc-abar{height:10px;border-radius:10px;background:var(--paper-2);overflow:hidden} .hc-abar i{display:block;height:100%;width:0;background:var(--ink);border-radius:10px;transition:width 1s cubic-bezier(.2,.8,.2,1)} .hc-form{padding:28px;border-radius:14px;background:var(--ink);color:#fff} .hc-form .hiw-ptype{color:#ff7cb9} .hc-form h3{margin:8px 0 8px;color:#fff;font-size:24px;letter-spacing:-.02em} .hc-form>p{color:#c9cdd8;margin:0 0 18px} .hc-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .hc-fields label span{display:block;font:700 12px/1 var(--font-head);letter-spacing:.08em;text-transform:uppercase;color:#c9cdd8;margin-bottom:6px} .hc-fields input{width:100%;box-sizing:border-box;padding:13px 14px;border-radius:8px;border:1px solid var(--line-dark);background:var(--ink-2);color:#fff;font:16px/1.3 var(--font-body)} .hc-fields input:focus{outline:2px solid #ff7cb9;outline-offset:1px} .hc-form .hc-go{margin-top:18px} .hc-form p.hc-small{margin:14px 0 0;font-size:13px;color:#8a8fa0} .hc-small a{color:#c9cdd8} .hc-err{margin:10px 0 0;color:#ff7cb9;font-weight:600} .hc-sent p:not(.hiw-ptype){font-size:17px;line-height:1.55;color:var(--text-2)} .hc-mocknote{padding:10px 14px;border:1.5px dashed #c2407e;border-radius:8px;font-size:14px!important;color:#c2407e!important} .hc-pri{display:grid;gap:12px;margin:24px 0} .hc-pcard{position:relative;padding:22px 22px 22px 74px;border-radius:14px;background:var(--paper)} .hc-pn{position:absolute;left:22px;top:20px;font:800 28px/1 var(--font-head);color:#ff7cb9} .hc-pa{margin:0;font:700 12px/1.3 var(--font-head);letter-spacing:.12em;text-transform:uppercase;color:#8a8fa0} .hc-pcard h3{margin:6px 0 6px;font-size:20px} .hc-pcard p:not(.hc-pa){margin:0 0 10px;color:var(--text-2);line-height:1.55} .hc-pcard a{font:700 14px/1 var(--font-head);color:#c2407e;text-decoration:none} .hc-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:22px;border-radius:14px;border:1.5px solid var(--ink)} .hc-cta p{margin:0;font-weight:600} .hc-side{position:sticky;top:110px} .hc-get{list-style:none;margin:14px 0 22px;padding:0} .hc-get li{position:relative;padding-left:30px;margin-bottom:16px;color:var(--text-2);line-height:1.5} .hc-get li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;background:#c2407e;-webkit-mask:var(--tick) center/contain no-repeat;mask:var(--tick) center/contain no-repeat} .hc-get b{display:block;color:var(--text);font-family:var(--font-head)} .hc-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0} .mega-cta-copy span a{color:inherit;text-decoration:underline;text-underline-offset:3px} .hc-note{font-size:14px;color:var(--text-3);line-height:1.55;padding-top:18px;border-top:1px solid var(--line,#e8e5de)} @media (max-width:980px){.hc-wrap{grid-template-columns:1fr}.hc-side{position:static}.hc-fields{grid-template-columns:1fr}} @media (max-width:600px){.hc{padding:56px 0 72px}.hc-card{padding:24px 18px;min-height:0}.hc-res{grid-template-columns:1fr;gap:16px;justify-items:start}.hc-score{width:124px;height:124px}.hc-num b{font-size:38px}.hc-area{grid-template-columns:1fr 44px;gap:6px 10px}.hc-area span{grid-column:1/-1}.hc-pcard{padding:20px 18px 20px 58px}.hc-pn{left:18px;font-size:24px}.hc-form{padding:22px 18px}} .hero--hc .wp-block-button__link::after{-webkit-mask-image:var(--arrow-down)!important;mask-image:var(--arrow-down)!important} .hero--hc .wp-block-button__link:hover::after{transform:translateY(2px)!important} /* MST health check promo v1 */ .hc-promo{background:var(--ink);color:#fff;padding:64px 0;overflow:hidden} .hc-promo-in{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:40px;align-items:center} .hc-promo-ring{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;color:#fff!important;text-decoration:none!important} .hc-promo-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)} .hc-pr-bg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:10} .hc-pr-fg{fill:none;stroke:#ff7cb9;stroke-width:10;stroke-linecap:round;stroke-dasharray:314;stroke-dashoffset:110;animation:hcpr 6s ease-in-out infinite} @keyframes hcpr{0%,100%{stroke-dashoffset:110}50%{stroke-dashoffset:40}} .hc-promo-ring b{position:relative;font:800 48px/1 var(--font-head);color:#ff7cb9} .hc-promo-ring span{position:relative;font-size:12px;color:#c9cdd8;margin-top:4px} .hc-promo .is-style-mst-eyebrow{color:#ff7cb9;margin:0} .hc-promo .h2{color:#fff;margin:10px 0 12px} .hc-promo-copy p:not(.is-style-mst-eyebrow){margin:0;color:#c9cdd8;font-size:17px;line-height:1.55;max-width:560px} .hc-promo-btn{display:inline-flex;align-items:center;gap:10px;padding:17px 28px;border-radius:8px;background:var(--pink-btn,#ff8dc4);color:var(--ink)!important;font:700 16px/1 var(--font-head);text-decoration:none!important;white-space:nowrap;transition:transform .2s} .hc-promo-btn:hover{transform:translateY(-2px)} @media (prefers-reduced-motion:reduce){.hc-pr-fg{animation:none}} @media (max-width:900px){.hc-promo-in{grid-template-columns:110px minmax(0,1fr);gap:24px}.hc-promo-ring{width:110px;height:110px}.hc-promo-ring b{font-size:36px}.hc-promo-btn{grid-column:1/-1;justify-self:start}} @media (max-width:560px){.hc-promo{padding:48px 0}.hc-promo-in{grid-template-columns:1fr}.hc-promo-ring{width:96px;height:96px}.hc-promo-ring b{font-size:30px}.hc-promo-ring span{font-size:10px}} /* MST how we work cards v1 */ .hww{background:var(--ink);color:#fff;padding:72px 0 88px} .hww-head{max-width:720px;margin-bottom:36px} .hww .is-style-mst-eyebrow{color:#ff7cb9;margin:0} .hww .h2{color:#fff;margin:10px 0 14px} .hww-lead{margin:0;font-size:18px;line-height:1.55;color:#c9cdd8} .hww-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} .hww-card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;padding:30px 30px 28px;border-radius:16px;background:var(--paper);color:var(--text)!important;text-decoration:none!important;transition:transform .2s,box-shadow .2s} .hww-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(0,0,0,.35)} .hww-ico{width:60px;height:60px;color:#e8559b} .hww-ico svg{width:100%;height:100%;display:block} .hww-card h3{margin:2px 0 6px;font-size:24px;letter-spacing:-.02em} .hww-sub{margin:0 0 10px;font:700 16px/1.35 var(--font-head);color:var(--text)} .hww-card p:not(.hww-sub){margin:0 0 14px;font-size:15.5px;line-height:1.55;color:var(--text-2)} .hww-link{font:700 14px/1 var(--font-head);color:#c2407e} @media (max-width:820px){.hww-grid{grid-template-columns:1fr}.hww-card{grid-template-columns:48px minmax(0,1fr);gap:16px;padding:24px 20px}.hww-ico{width:46px;height:46px}.hww-card h3{font-size:21px}.hww{padding:56px 0 64px}} /* MST process merged v1 */ .hiw-num.hiw-num--ico{font-size:0} .hiw-num--ico svg{width:26px;height:26px;display:block} .hiw-when b{font-weight:800;margin-right:6px;color:var(--text)} /* MST crm dashboard v1 */ .crd{background:var(--ink);color:#fff;padding:88px 0} .crd-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center} .crd .is-style-mst-eyebrow{color:#ff7cb9;margin:0} .crd .h2{color:#fff;margin:10px 0 16px} .crd-lead{margin:0 0 20px;font-size:18px;line-height:1.55;color:#c9cdd8} .crd-list{list-style:none;margin:0;padding:0} .crd-list li{position:relative;padding-left:28px;margin:0 0 10px;color:#e4e6ee;font-size:15.5px} .crd-list li::before{content:"";position:absolute;left:0;top:3px;width:17px;height:17px;background:#ff7cb9;-webkit-mask:var(--tick) center/contain no-repeat;mask:var(--tick) center/contain no-repeat} .crd-dash{position:relative;padding:22px;border-radius:18px;background:linear-gradient(160deg,#151b2e,#0d1222);border:1px solid #283048;box-shadow:0 30px 70px rgba(0,0,0,.45)} .crd-tag{position:absolute;top:-11px;right:18px;padding:4px 10px;border-radius:999px;background:#283048;color:#c9cdd8;font:700 10.5px/1.4 var(--font-head);letter-spacing:.1em;text-transform:uppercase} .crd-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px} .crd-kpi{padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)} .crd-kpi p{margin:0 0 6px;font-size:12.5px;color:#c9cdd8} .crd-kpi b{display:block;font:800 30px/1.05 var(--font-head);letter-spacing:-.02em;color:#fff} .crd-kpi span{display:block;margin-top:6px;font:700 13px/1 var(--font-head);color:#4ade80} .crd-chart{position:relative;height:210px;padding:10px 4px 26px;border-radius:12px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06)} .crd-chart svg{width:100%;height:100%;display:block} .crd-line{stroke-dasharray:1200;stroke-dashoffset:0} .crd-pin{position:absolute;left:83%;top:4%;transform:translateX(-50%);padding:5px 11px;border-radius:7px;background:#ff7cb9;color:var(--ink);font:800 14px/1 var(--font-head);box-shadow:0 0 0 6px rgba(255,124,185,.18)} .crd-pin::after{content:"";position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;border-bottom:0;border-top-color:#ff7cb9} .crd-months{position:absolute;left:4px;right:4px;bottom:6px;display:flex;justify-content:space-between;font-size:11.5px;color:#8a8fa0} .crd-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:40px} .crd-tile{padding:22px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid #283048;text-align:center} .crd-tile svg{width:38px;height:38px;color:#ff7cb9;display:block;margin:0 auto 12px} .crd-tile p{margin:0;font:700 15px/1.3 var(--font-head);color:#fff} @media (max-width:980px){.crd-top{grid-template-columns:1fr;gap:32px}.crd-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:600px){.crd{padding:60px 0}.crd-dash{padding:16px}.crd-kpis{gap:8px}.crd-kpi{padding:10px}.crd-kpi p{font-size:11px}.crd-kpi b{font-size:21px}.crd-chart{height:170px}.crd-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.crd-tile:last-child{grid-column:1/-1}} /* MST revenue enablement v1 */ .rse{background:var(--paper);padding:80px 0} .rse-card{background:#fff;border:1px solid var(--line,#e8e5de);border-radius:22px;padding:44px;box-shadow:0 24px 60px rgba(10,15,30,.06)} .rse-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:44px;align-items:center} .rse .h2{margin:10px 0 16px} .rse-lead{margin:0;font-size:18px;line-height:1.6;color:var(--text-2);max-width:560px} .rse-art{margin:0;border-radius:16px;overflow:hidden;background:#0a0f1e;aspect-ratio:900/626} .rse-art img{width:100%;height:100%;object-fit:cover;display:block} .rse-grid{list-style:none;margin:40px 0 0;padding:32px 0 0;border-top:1px solid var(--line,#e8e5de);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 40px} .rse-grid li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;align-items:start} .rse-ico{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:#fff0f7;color:#e8559b} .rse-ico svg{width:28px;height:28px} .rse-grid h3{margin:2px 0 4px;font-size:18px} .rse-grid p{margin:0;font-size:15.5px;line-height:1.5;color:var(--text-2)} @media (max-width:900px){.rse-top{grid-template-columns:1fr;gap:28px}.rse-art{max-width:520px}} @media (max-width:640px){.rse{padding:56px 0}.rse-card{padding:24px 18px;border-radius:18px}.rse-grid{grid-template-columns:1fr;gap:20px}.rse-grid li{grid-template-columns:44px minmax(0,1fr);gap:14px}.rse-ico{width:44px;height:44px}} /* MST fit check v1 */ .fitx{background:var(--paper);padding:80px 0} .fitx-head{max-width:none;margin-bottom:32px} .fitx .h2{margin:10px 0 0} .fitx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px} .fitx-card{padding:32px 34px;border-radius:18px} .fitx-yes{background:#fde4ef;border:1px solid #f9c6dc} .fitx-no{background:#eceef2;border:1px solid #dde0e6} .fitx-t{display:flex;align-items:center;gap:14px;margin-bottom:18px} .fitx-ic{flex:0 0 46px;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff} .fitx-yes .fitx-ic{background:#e8559b} .fitx-no .fitx-ic{background:#3d4254} .fitx-ic svg{width:24px;height:24px} .fitx-t h3{margin:0;font-size:22px;letter-spacing:-.02em} .fitx-card ul{list-style:none;margin:0;padding:0} .fitx-card li{position:relative;padding-left:22px;margin:0 0 11px;font-size:16px;line-height:1.5;color:var(--text-2)} .fitx-card li::before{content:"";position:absolute;left:2px;top:.6em;width:7px;height:7px;transform:rotate(45deg)} .fitx-yes li::before{background:#e8559b} .fitx-no li::before{background:#6b7080} @media (max-width:820px){.fitx-grid{grid-template-columns:1fr}.fitx-card{padding:24px 20px}.fitx{padding:56px 0}} /* MST about home options preview v1 */ .abx-tag{position:fixed;left:12px;bottom:12px;z-index:9999;background:#0a0f1e;color:#fff!important;font:600 12px/1 var(--font-head);padding:9px 13px;border-radius:20px;text-decoration:none!important;box-shadow:0 4px 14px rgba(0,0,0,.25)} .abx .h2{margin:10px 0 18px} .abx p{font-size:17px;line-height:1.6;color:var(--text-2)} .abx .is-style-mst-eyebrow{margin:0} .abx1{background:var(--paper);padding:88px 0 72px;overflow:hidden} .abx1-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:center} .abx1-copy{max-width:540px} .abx1-art{position:relative;margin:0} .abx1-art::before{content:"";position:absolute;inset:8% 4% 0 8%;background:radial-gradient(closest-side,rgba(255,124,185,.55),rgba(255,124,185,0));filter:blur(8px)} .abx1-art img{position:relative;width:100%;height:auto;display:block;-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent),linear-gradient(to left,transparent,#000 10%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,#000 78%,transparent),linear-gradient(to left,transparent,#000 10%);mask-composite:intersect} .abx1-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .abx1-stats div{padding:24px 20px;border-left:1px solid var(--line)} .abx1-stats div:first-child{border-left:0;padding-left:0} .abx1-stats b{display:block;font:800 40px/1 var(--font-head);letter-spacing:-.03em;color:var(--ink)} .abx1-stats span{display:block;margin-top:8px;font-size:14.5px;line-height:1.4;color:var(--text-2)} .abx2{background:var(--ink);padding:96px 0} .abx2-in{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:64px;align-items:center} .abx2 .h2{color:#fff} .abx2 p{color:#c9cdd8} .abx2 .is-style-mst-eyebrow{color:#ff7cb9} .abx2-photo{position:relative;margin:0;aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:radial-gradient(circle at 60% 35%,#ff7cb9 0,#c2407e 38%,#3a1530 70%,#141a2c 100%)} .abx2-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;transition:opacity .45s} .abx2-photo .b{opacity:0} .abx2-photo:hover .b{opacity:1} .abx2-photo:hover .a{opacity:0} .abx2-hint{position:absolute;left:16px;bottom:16px;padding:6px 12px;border-radius:999px;background:rgba(10,15,30,.75);color:#fff;font:700 12px/1 var(--font-head);letter-spacing:.06em} .abx2-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:26px 0 24px} .abx2-stats div{padding:18px 20px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid #283048} .abx2-stats b{display:block;font:800 32px/1 var(--font-head);color:#ff7cb9;letter-spacing:-.02em} .abx2-stats span{display:block;margin-top:6px;font-size:14px;color:#c9cdd8;line-height:1.4} .abx3{background:var(--paper-2);padding:88px 0} .abx3-note{position:relative;max-width:860px;margin:0 auto;padding:48px 56px;background:#fff;border-radius:6px;box-shadow:0 2px 0 #e5e2da,0 30px 60px rgba(10,15,30,.08);transform:rotate(-.6deg)} .abx3-note::before{content:"";position:absolute;top:-14px;left:50%;width:120px;height:28px;margin-left:-60px;background:rgba(255,124,185,.55);transform:rotate(2deg)} .abx3-head{display:flex;align-items:center;gap:22px;margin-bottom:10px} .abx3-head img{flex:0 0 104px;width:104px;height:104px;border-radius:50%;object-fit:cover;object-position:center 20%;background:#fdd0e4;border:4px solid #fff;box-shadow:0 0 0 2px #ff7cb9} .abx3-head .h2{margin:8px 0 0} .abx3-sig{margin:6px 0 26px!important;font:400 34px/1 var(--font-hand)!important;color:#c2407e!important;transform:rotate(-3deg);transform-origin:left} .abx3-stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px} .abx3-stats div{display:flex;align-items:baseline;gap:8px;padding:10px 16px;border-radius:999px;background:var(--paper);border:1px solid var(--line)} .abx3-stats b{font:800 18px/1 var(--font-head);color:var(--ink)} .abx3-stats span{font-size:13.5px;color:var(--text-2)} @media (max-width:900px){.abx1-top,.abx2-in{grid-template-columns:1fr;gap:32px}.abx1-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.abx1-stats div:nth-child(3){border-left:0;padding-left:0}.abx2-photo{max-width:420px}} @media (max-width:600px){.abx1,.abx2,.abx3{padding:60px 0}.abx1-stats b{font-size:30px}.abx2-stats{grid-template-columns:1fr 1fr}.abx2-stats b{font-size:24px}.abx3-note{padding:30px 22px;transform:none}.abx3-head{flex-direction:column;align-items:flex-start}.abx3-head img{width:84px;height:84px;flex-basis:84px}} /* MST about before after v1 */ @property --x{syntax:"";inherits:true;initial-value:50%} .abx2-photo.ba{cursor:ew-resize;touch-action:pan-y;user-select:none} .abx2-photo.ba img{opacity:1!important;object-position:center top} .ba .ba-before{clip-path:inset(0 calc(100% - var(--x)) 0 0)} .ba-line{position:absolute;top:0;bottom:0;left:var(--x);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 12px rgba(255,124,185,.8);pointer-events:none} .ba-knob{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#ff7cb9;color:#0a0f1e;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.35)} .ba-knob svg{width:22px;height:22px} .ba-tag{position:absolute;bottom:16px;padding:6px 12px;border-radius:999px;background:rgba(10,15,30,.78);color:#fff;font:700 12px/1 var(--font-head);letter-spacing:.06em;pointer-events:none} .ba-tag{transition:opacity .15s} .ba-tag--l{left:16px}.ba-tag--r{right:16px;background:#ff7cb9;color:#0a0f1e} .ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none} .ba-range:focus-visible + *{outline:none} .ba:focus-within .ba-knob{outline:3px solid #fff;outline-offset:3px} .ba.ba-hint{animation:bahint 1.8s ease-in-out} @keyframes bahint{0%{--x:50%}30%{--x:28%}65%{--x:72%}100%{--x:50%}} .abx2-kicker{margin:0 0 14px!important;font:800 21px/1.3 var(--font-head)!important;color:#fff!important} .abx2-sig{margin:2px 0 22px!important;font:400 32px/1 var(--font-hand)!important;color:#ff7cb9!important;transform:rotate(-3deg);transform-origin:left} @media (prefers-reduced-motion:reduce){.ba.ba-hint{animation:none}} /* MST about bg preview v1 */ .about-home-v2.abg-white{background:#fff} .about-home-v2.abg-pink{background:#fdd0e4} .about-home-v2[class*="abg-"] .h2{color:var(--ink)} .about-home-v2[class*="abg-"] p{color:var(--text-2)} .about-home-v2[class*="abg-"] .is-style-mst-eyebrow{color:#c2407e} .about-home-v2[class*="abg-"] .abx2-kicker{color:var(--ink)!important} .about-home-v2[class*="abg-"] .abx2-sig{color:#c2407e!important} .about-home-v2.abg-pink .h2 mark{color:#c2407e!important} .about-home-v2.abg-pink .arrow-link a{color:#a8336b!important} .about-home-v2[class*="abg-"] .abx2-photo{box-shadow:0 30px 60px rgba(10,15,30,.18)} /* MST pains head stacked v1 */ .pains .section-head--row{display:block!important} .pains .section-head--row .h2{font-size:clamp(30px,3.7vw,50px)} .pains .section-head--row .lead{max-width:none!important;margin:16px 0 0!important} /* MST tidy section heads v1 */ h1,h2,h3,.hero-title{text-wrap:balance} main p,main li{text-wrap:pretty} main .lead,main p[class*="-lead"],main p[class*="-sub"],main p[class*="-intro"],main .hero-text,main .start-band-text,main .cta-band-text,main .faq-intro p,main .section-head p,main .section-head--row p,main .section-head--split p,main .hiw-head p,main .intro-copy > p:first-child,main .who-for .section-head p,main .wy3-lead,main .vs-verdict,main .svc-proof-story,main .message-copy p,main .hc-promo-copy p,main .pr-note,main .pr-wink,main .who-for p,main .wf-sub{text-wrap:balance} .section-head--row,.section-head--split,.hiw-head--split{display:block!important;grid-template-columns:none!important} .section-head--row > *,.section-head--split > *,.hiw-head--split > *{max-width:none!important;margin-left:0!important} .section-head--row > :not(:first-child),.section-head--split > :not(:first-child),.hiw-head--split > :not(:first-child){max-width:880px!important;margin-top:14px!important} .section-head--row h2,.section-head--split h2,.hiw-head--split h2{max-width:none!important} .section-head--row p:not(.is-style-mst-eyebrow),.section-head--split p:not(.is-style-mst-eyebrow),.hiw-head--split p:not(.is-style-mst-eyebrow){max-width:880px!important;width:auto!important} .hiw-head:not(.hiw-head--center),.hww-head{max-width:920px} .hiw-head--center{max-width:920px} .section-head .lead,.hiw-head .hiw-lead,.hww-head .hww-lead,.mx-head .mx-lead,.rs-cool-head .rs-cool-lead,.cmf-head .cmf-lead,.elc-head .elc-lead,.bp-head .bp-lead,.rtm-head .rtm-lead{max-width:880px!important} /* MST new banners v1 */ .rse-art.rse-art--wide{aspect-ratio:4/3} .rse-art.rse-art--wide img{object-position:72% 50%} .hww--art{position:relative;padding-bottom:0;overflow:hidden} .hww-art{position:relative;height:clamp(280px,33vw,540px);margin-top:clamp(-400px,-24vw,-120px);z-index:0} .hww-art img{width:100%;height:100%;object-fit:cover;object-position:70% 15%;display:block} .hww-art::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--ink) 0%,rgba(10,15,30,.35) 30%,rgba(10,15,30,0) 55%)} .hww--art .container{position:relative;z-index:1} @media (max-width:820px){.hww-art{margin-top:-90px;height:280px}} /* MST moss options preview v1 */ .mstone-stage .mstone-again{position:absolute;right:16px;bottom:18px;z-index:5;margin:0;grid-column:auto;color:rgba(255,255,255,.75)} .ms4-plank{position:absolute;display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;padding:0 10px;border-radius:8px;background:#ff7cb9;color:#0a0f1e;font:800 13px/1 var(--font-head);box-shadow:0 6px 14px rgba(0,0,0,.3);white-space:nowrap} .ms4-plank svg{width:14px;height:14px;flex:0 0 14px} .ms4-st{transition:color .3s}.ms4-st.pk{color:#ff7cb9} .msx-layer{position:absolute;inset:0;z-index:1} .msx-mm{position:absolute;bottom:44px;left:0;width:46%;max-width:230px;transform:translateX(-120%);z-index:2;filter:drop-shadow(0 8px 8px rgba(0,0,0,.4))} .msx-bits{position:absolute;inset:0;pointer-events:none;z-index:4} .msx-bits i{position:absolute;border-radius:40% 60% 45% 55%;background:#5a5e6c;box-shadow:inset -3px -3px 0 rgba(0,0,0,.25)} .msx-bits i.p{background:#ff7cb9} .msx-fixes{position:absolute;display:flex;flex-wrap:wrap;gap:8px} .msx-fixes span,.ms2-crate .b,.ms3-pill .b{display:inline-flex;align-items:center;gap:6px;background:#ff7cb9;color:#0a0f1e;font:800 13px/1.1 var(--font-head);border-radius:999px;padding:8px 12px;box-shadow:0 6px 14px rgba(0,0,0,.3);white-space:nowrap} .msx-fixes svg,.ms2-crate svg,.ms3-pill svg{width:14px;height:14px;flex:0 0 14px} .ms1-fixes{top:18px;left:18px;right:18px;justify-content:flex-start} .ms1-brick{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 10px;box-sizing:border-box;border-radius:8px;background:linear-gradient(180deg,#5d6170,#3d404c);color:#fff;font:800 13px/1.15 var(--font-head);box-shadow:inset 0 -4px 0 rgba(0,0,0,.25),0 6px 12px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08)} .ms2-crate{position:absolute;perspective:600px} .ms2-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,1.4,.5,1)} .ms2-crate.flip .ms2-in{transform:rotateX(180deg)} .ms2-in .f,.ms2-in .b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex!important;align-items:center;justify-content:center;border-radius:8px;box-sizing:border-box} .ms2-in .f{background:linear-gradient(180deg,#5d6170,#3d404c);color:#fff;font:800 13px/1 var(--font-head);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)} .ms2-in .b{transform:rotateX(180deg);border-radius:8px!important;padding:0 10px!important} .ms2-head{position:absolute;top:16px;left:18px;margin:0;font:800 13px/1 var(--font-head);color:#c9cdd8;letter-spacing:.06em;text-transform:uppercase} .ms2-head span{margin:0 6px;color:#8a8fa0}.ms2-head .pk{color:#ff7cb9} .ms3 .msx-layer{z-index:3} .ms3-pill{position:absolute} .ms3-pill .f{display:inline-block;background:#3d404c;color:#fff;font:800 13px/1.1 var(--font-head);border-radius:999px;padding:8px 12px;border:1px solid rgba(255,255,255,.12);white-space:nowrap;box-shadow:0 6px 14px rgba(0,0,0,.3)} .ms3-pill .b{display:none} .ms3-pill.fixed .f{display:none} .ms3-pill.fixed .b{display:inline-flex} .ms3-ring{position:absolute;bottom:56px;width:40px;height:14px;border-radius:50%;border:3px solid #ff7cb9;opacity:0;transform:translate(-50%,50%)} @media (max-width:600px){.msx-fixes span,.ms2-crate .b,.ms3-pill .b,.ms3-pill .f,.ms1-brick,.ms2-in .f{font-size:11.5px}.ms1-fixes{gap:6px}} /* MST nav options preview v1 */ .nvx{position:relative} .nvx-chev svg{transition:transform .2s} .nvx:hover .nvx-chev svg,.nvx:focus-within .nvx-chev svg{transform:rotate(180deg)} .nvx-panel{position:absolute;top:100%;right:-140px;transform:translateY(8px);padding-top:14px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;z-index:50} .nvx:hover .nvx-panel,.nvx:focus-within .nvx-panel{opacity:1;visibility:visible;transform:translateY(0)} .nvx-grid{width:540px;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:14px;border-radius:18px;background:#111726;border:1px solid #283048;box-shadow:0 24px 60px rgba(0,0,0,.45)} .nvx-wide{grid-column:1/-1} .nvx-item{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:12px;color:#fff!important;text-decoration:none!important;transition:background .15s} .nvx-item:hover{background:rgba(255,255,255,.06)} .nvx-ic{flex:0 0 36px;width:36px;height:36px;border-radius:10px;background:rgba(255,124,185,.12);color:#ff7cb9;display:flex;align-items:center;justify-content:center} .nvx-ic svg{width:19px;height:19px} .nvx-item b{display:block;font:700 14.5px/1.3 var(--font-head);color:#fff} .nvx-item em{display:block;font-style:normal;font-size:13px;line-height:1.4;color:#c9cdd8;margin-top:2px} .nvx-hl{background:linear-gradient(135deg,rgba(255,124,185,.22),rgba(255,124,185,.08));border:1px solid rgba(255,124,185,.4)} .nvx-hl:hover{background:linear-gradient(135deg,rgba(255,124,185,.32),rgba(255,124,185,.12))} .nvx-hl .nvx-ic{background:#ff7cb9;color:#0a0f1e} .nvx-hcl > a{display:inline-flex!important;align-items:center;gap:8px;padding:8px 14px!important;border:1.5px solid rgba(255,124,185,.7);border-radius:999px;color:#ff7cb9!important} .nvx-hcl > a:hover{background:rgba(255,124,185,.12)} .nvx-hcl i{width:8px;height:8px;border-radius:50%;background:#ff7cb9;box-shadow:0 0 0 0 rgba(255,124,185,.7);animation:nvxp 1.8s infinite} @keyframes nvxp{0%{box-shadow:0 0 0 0 rgba(255,124,185,.6)}70%{box-shadow:0 0 0 8px rgba(255,124,185,0)}100%{box-shadow:0 0 0 0 rgba(255,124,185,0)}} @media (min-width:1025px){.site-nav .nvx > .sub-menu{display:none!important}} @media (max-width:1024px){.nvx-panel{display:none!important}} /* MST about dropdown designs v1 */ .abx-tag{position:fixed;left:12px;bottom:12px;z-index:9999;background:#0a0f1e;color:#fff!important;font:600 12px/1 var(--font-head);padding:9px 13px;border-radius:20px;text-decoration:none!important;box-shadow:0 4px 14px rgba(0,0,0,.25)} .nvx-open .nvx-panel{opacity:1;visibility:visible;transform:none} .nvd{position:relative;padding:22px;border-radius:18px;background:radial-gradient(120% 90% at 100% 100%,rgba(255,124,185,.16),rgba(0,0,0,0) 55%),#0a0f1e;border:1px solid rgba(255,124,185,.55);box-shadow:0 0 40px rgba(255,124,185,.14),0 30px 70px rgba(0,0,0,.55)} .nvd-head{margin:0 0 10px 12px!important;font:700 12px/1.4 var(--font-head)!important;letter-spacing:.14em;text-transform:uppercase;color:#fff!important} .nvd .nvx-item{padding:11px 12px} .nvd .nvx-ic{border-radius:50%;width:38px;height:38px;flex-basis:38px} .nvd .nvx-item b{font-size:15px} .nvd .nvx-item em{white-space:nowrap} .nvd .nvx-item:hover b{color:#ff7cb9} .nvd-btn{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;padding:11px 18px;border-radius:10px;background:#ff7cb9;color:#0a0f1e;font:800 14px/1 var(--font-head);white-space:nowrap;transition:transform .15s,background .15s} .nvd-btn span{transition:transform .15s} a:hover > .nvd-btn,a:hover .nvd-btn{background:#ff95c7} a:hover .nvd-btn span{transform:translateX(3px)} .nvd-kick{display:inline-flex;align-items:center;gap:6px;font:700 11.5px/1 var(--font-head);letter-spacing:.12em;text-transform:uppercase;color:#ff7cb9} .nvd-kick svg{width:15px;height:15px} .nvd-bar{display:flex;align-items:center;gap:16px;margin-top:14px;padding:16px 18px;border-radius:14px;background:rgba(255,124,185,.06);border:1px solid rgba(255,124,185,.4);color:#fff!important;text-decoration:none!important} .nvd-bar-ic{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:#ff7cb9;color:#0a0f1e;display:flex;align-items:center;justify-content:center} .nvd-bar-ic svg{width:22px;height:22px} .nvd-bar-copy{flex:1;min-width:0} .nvd-bar-copy b{display:block;font:800 16px/1.3 var(--font-head);color:#fff} .nvd-bar-copy span{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;color:#c9cdd8} /* 1 */ .nvx--d .nvx-panel{right:-180px} .nvd1{width:640px;box-sizing:border-box} .nvd1 .nvd-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px} /* 2 */ .nvd2{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:18px;width:720px;box-sizing:border-box} .nvd2 .nvd-list{display:flex;flex-direction:column;justify-content:center} .nvd-feat{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:#111726;border:1px solid rgba(255,124,185,.4);color:#fff!important;text-decoration:none!important;transition:border-color .15s,transform .15s} .nvd-feat:hover{border-color:#ff7cb9;transform:translateY(-2px)} .nvd-feat-img{display:block;height:120px;overflow:hidden} .nvd-feat-img img{width:100%;height:100%;object-fit:cover;object-position:70% 35%;display:block} .nvd-feat-copy{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 18px 18px} .nvd-feat-copy b{font:800 18px/1.2 var(--font-head);color:#fff} .nvd-feat-copy > span:not(.nvd-kick):not(.nvd-btn){font-size:13.5px;line-height:1.45;color:#c9cdd8} .nvd-feat .nvd-btn{margin-top:4px} /* 3 */ .nvd3{width:700px;box-sizing:border-box} .nvd-top{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px} .nvd-me{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:230px;padding:16px;border-radius:14px;overflow:hidden;color:#fff!important;text-decoration:none!important;background:#111726} .nvd-me img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 15%;transition:transform .4s} .nvd-me::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,15,30,.95) 0%,rgba(10,15,30,.55) 45%,rgba(10,15,30,0) 75%)} .nvd-me:hover img{transform:scale(1.04)} .nvd-me > span{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px} .nvd-me b{font:800 17px/1.25 var(--font-head);color:#fff} .nvd-more{font:700 13.5px/1 var(--font-head);color:#ff7cb9} .nvd3 .nvd-list{padding-top:4px} @media (max-width:1024px){.nvx-open .nvx-panel{display:none!important}} /* MST about dropdown option 1 polish v1 */ .nvd1{width:760px;padding:32px 36px 36px} .nvx--d .nvx-panel{padding-top:36px} @media (min-width:1025px){.site-nav .has-mega > .mega{background:none!important}} .nvd1 .nvd-head{margin:0 0 16px 10px!important;font-size:13px!important;letter-spacing:.16em} .nvd1 .nvd-grid{gap:6px 18px} .nvd1 .nvx-item{padding:10px;gap:14px;align-items:flex-start} .nvd1 .nvx-ic{width:36px;height:36px;flex-basis:36px} .nvd1 .nvx-ic svg{width:18px;height:18px} .nvd1 .nvx-item b{font:700 15.5px/1.35 var(--font-head)} .nvd1 .nvx-item em{font-size:12.5px;line-height:1.45;color:#a9afc0;margin-top:3px} .nvd1{box-sizing:border-box} .nvd1 .nvd-bar{box-sizing:border-box;width:auto;max-width:100%;margin:22px 0 0;padding:22px 30px;gap:22px;background:rgba(255,124,185,.05)} .nvd1 .nvd-bar-ic{flex:0 0 46px;width:46px;height:46px;background:none;color:#ff7cb9;border:1.8px solid #ff7cb9} .nvd1 .nvd-bar-ic svg{width:24px;height:24px} .nvd1 .nvd-bar-copy b{font:700 18px/1.5 var(--font-head)} .nvd1 .nvd-bar-copy span{font-size:14px;line-height:1.55;color:#c8ccd8;margin-top:4px} .nvd1 .nvd-btn{padding:13px 24px;border-radius:8px;font:700 15px/1.2 var(--font-head)} /* MST about dropdown footer v1 */ .nvd1{width:760px;padding:32px 26px 0!important;overflow:hidden} .nvd1 .nvd-bar{margin:22px -26px 0!important;padding:22px 36px 24px 26px!important;gap:16px;border:0;border-top:1px solid rgba(255,124,185,.3);border-radius:0;background:linear-gradient(90deg,rgba(255,124,185,.14),rgba(255,124,185,.04));max-width:none;transition:background .15s} .nvd1 .nvd-bar:hover{background:linear-gradient(90deg,rgba(255,124,185,.22),rgba(255,124,185,.08))} .nvd1 .nvd-bar-ic{flex:0 0 36px;width:36px;height:36px;border:0;background:#ff7cb9;color:#0a0f1e} .nvd1 .nvd-bar-ic svg{width:19px;height:19px;stroke-width:2.2} .nvd1 .nvd-bar-copy b{font:700 17px/1.3 var(--font-head)} .nvd1 .nvd-bar-copy span{font-size:13.5px;margin-top:3px} .nvd1 .nvd-btn{padding:13px 22px} .nvd-bar-kick{display:block;font:700 11.5px/1.2 var(--font-head);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:#ff7cb9;margin-bottom:4px} /* MST mega cta health check link v1 */ .mega-cta-copy a{white-space:nowrap;color:#fff!important;font-weight:700;text-decoration:none!important;padding:1px 5px;margin:0 -1px;border-radius:3px;background:linear-gradient(100deg,rgba(255,124,185,.35),rgba(255,124,185,.6) 8%,rgba(255,124,185,.5) 92%,rgba(255,124,185,.3));-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background .15s} .mega-cta-copy a:hover{background:#ff7cb9;color:#0a0f1e!important} /* MST about mobile accordion v1 */ .has-macc.is-mopen .mnav-chev{transform:rotate(180deg);background:var(--pink);border-color:var(--pink);color:var(--ink)} @media (max-width:900px){.site-nav .has-macc > a{display:flex!important;align-items:center;justify-content:space-between}.site-nav .has-macc > .sub-menu{display:none}.site-nav .has-macc.is-mopen > .sub-menu{display:block}} /* MST about mobile icons v1 */ .mnv-ic{display:none} @media (max-width:900px){.site-nav .has-macc > .sub-menu{border-left:0;padding:4px 0 18px;margin:0}.site-nav .has-macc > .sub-menu a{display:flex;align-items:center;gap:12px;padding:9px 0;font:500 16px/1.55 var(--font-body);color:#fff}.mnv-ic{display:flex;flex:0 0 30px;width:30px;height:30px;border-radius:8px;background:rgba(255,124,185,.12);color:#ff7cb9;align-items:center;justify-content:center}.mnv-ic svg{width:16px;height:16px}.mnv-ic--hl{background:#ff7cb9;color:#0a0f1e}} /* MST mega cta health pill v1 */ .mega-cta-copy a.mega-hc{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(255,124,185,.14);border:1px solid rgba(255,124,185,.45);color:#fff!important;font:700 13.5px/1.2 var(--font-head);text-decoration:none!important;white-space:nowrap;transition:background .15s,border-color .15s} .mega-cta-copy a.mega-hc:hover{background:rgba(255,124,185,.24);border-color:#ff7cb9} .mega-hc i{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#ff7cb9;color:#0a0f1e;display:flex;align-items:center;justify-content:center} .mega-hc i svg{width:13px;height:13px} .mega-cta-copy .mega-hc em{font:inherit;font-style:normal;color:#ff7cb9;white-space:nowrap} .mega-cta-copy .mega-hc em span{display:inline-block;margin:0;font:inherit;color:inherit;transition:transform .15s} .mega-hc:hover em span{transform:translateX(3px)}