/* massamedia landing pages: fast, no preloader, same type and colours as the main site */
@font-face { font-family: avantt; src: url(/_next/static/media/570bdcfc936308af-s.p.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: avantt; src: url(/_next/static/media/68c5787607b6894a-s.p.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: avantt; src: url(/_next/static/media/ef63838ae561375a-s.p.woff2) format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --bg: #0a0a0a; --panel: #141414; --line: #2a2a2a;
  --red: #ef5143; --sand: #fee9ce; --cream: #fff3e2; --orange: #ffad5f; --grey: #a39a8f;
  --wrap: 1180px; --gutter: clamp(16px, 4vw, 40px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--sand); font: 500 17px/1.55 avantt, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--orange); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* header */
.top { position: sticky; top: 0; z-index: 10; background: rgba(10, 10, 10, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--sand); text-decoration: none; font-weight: 800; letter-spacing: .01em; }
.logo svg { transform: rotate(180deg); }
.nav { display: flex; align-items: center; gap: 22px; }
.nav a { color: var(--sand); text-decoration: none; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.nav a[aria-current="page"] { color: var(--orange); }
.nav .phone { color: var(--orange); }
@media (max-width: 760px) { .nav .hide-sm { display: none; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font: 700 15px/1 avantt, Arial, sans-serif; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; }
.btn-primary { background: var(--orange); color: #0a0a0a; }
.btn-primary:hover { background: #ffc285; }
.btn-ghost { border-color: var(--sand); color: var(--sand); background: transparent; }
.btn-ghost:hover { background: var(--sand); color: #0a0a0a; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* hero */
.hero { padding: clamp(48px, 9vw, 120px) 0 clamp(40px, 6vw, 80px); }
.eyebrow { color: var(--orange); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 22px; }
h1 { color: var(--red); font-weight: 800; text-transform: uppercase; font-size: clamp(40px, 6.6vw, 92px); line-height: .95; letter-spacing: -.01em; margin: 0 0 26px; max-width: 17ch; }
.lead { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.45; max-width: 52ch; margin: 0 0 30px; color: var(--cream); }
.price { display: inline-block; margin: 0 0 28px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; font-weight: 700; color: var(--sand); }
.price strong { color: var(--orange); }

/* sections */
section { padding: clamp(48px, 7vw, 96px) 0; border-top: 1px solid var(--line); }
h2 { color: var(--sand); font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 4vw, 52px); line-height: 1; margin: 0 0 18px; }
h3 { color: var(--sand); font-weight: 700; font-size: 21px; line-height: 1.25; margin: 0 0 8px; }
.intro { color: var(--grey); max-width: 60ch; margin: 0 0 36px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 26px; }
.card p { margin: 0; color: var(--grey); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ticks li { position: relative; padding-left: 34px; color: var(--cream); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .35em; width: 18px; height: 18px; border-radius: 50%; background: var(--red); box-shadow: inset 0 0 0 5px var(--bg); border: 2px solid var(--red); }
.steps { counter-reset: s; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); list-style: none; padding: 0; margin: 0; }
.steps li { counter-increment: s; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.steps li::before { content: "0" counter(s); display: block; color: var(--red); font-weight: 800; font-size: 28px; margin-bottom: 10px; }
.steps p { margin: 0; color: var(--grey); }
/* 18 logos: 3, 6 or 9 per row so every row is full */
.logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 600px) { .logos { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1100px) { .logos { grid-template-columns: repeat(9, 1fr); } }
.logos img { border-radius: 12px; aspect-ratio: 1; object-fit: cover; }
.quotes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 28px; }
.quote { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 26px; }
.quote p { margin: 0 0 16px; color: var(--cream); }
.quote footer { color: var(--orange); font-weight: 700; font-size: 15px; }

/* selected work */
.work { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .work { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .work { grid-template-columns: repeat(3, 1fr); } }
.work-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.work-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #efefef; }
.work-card h3 { margin: 18px 22px 6px; }
.work-card p { margin: 0 22px 22px; color: var(--grey); font-size: 15px; }

/* case study */
.case { display: grid; gap: clamp(20px, 4vw, 48px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .case { grid-template-columns: 6fr 5fr; } }
.case img { border-radius: 18px; border: 1px solid var(--line); }
.case p { color: var(--grey); margin: 0 0 24px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
.stats div { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.stats dt { color: var(--red); font-weight: 800; font-size: clamp(30px, 3.4vw, 44px); line-height: 1; }
.stats dd { margin: 6px 0 0; color: var(--sand); font-size: 15px; }

/* enquiry */
.enquire .wrap { display: grid; gap: clamp(28px, 5vw, 64px); grid-template-columns: 1fr; }
@media (min-width: 960px) { .enquire .wrap { grid-template-columns: 5fr 7fr; } }
.contact-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.contact-list a { color: var(--sand); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--orange); }
.contact-list span { display: block; color: var(--grey); font-size: 14px; text-transform: uppercase; letter-spacing: .05em; }
form.enquiry { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: clamp(20px, 3vw, 34px); display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
form.enquiry .full { grid-column: 1 / -1; }
@media (max-width: 620px) { form.enquiry { grid-template-columns: 1fr; } }
label { display: block; font-weight: 700; font-size: 14px; margin: 0 0 6px; color: var(--sand); }
label .opt { color: var(--grey); font-weight: 500; }
input, select, textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid #3a3a3a; background: #0d0d0d; color: var(--cream); font: 500 16px/1.4 avantt, Arial, sans-serif; }
textarea { min-height: 130px; resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--orange) 50%), linear-gradient(135deg, var(--orange) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
input:focus, select:focus, textarea:focus { border-color: var(--orange); outline: none; }
[aria-invalid="true"] { border-color: var(--red); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-note { color: var(--grey); font-size: 14px; margin: 0; }
.form-status { grid-column: 1 / -1; margin: 0; font-weight: 700; min-height: 1.4em; }
.form-status.error { color: #ff8a7f; }
.form-status.ok { color: var(--orange); }
button[disabled] { opacity: .6; cursor: progress; }

/* footer */
.foot { border-top: 1px solid var(--line); padding: 36px 0 48px; color: var(--grey); font-size: 14px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; }
.foot a { color: var(--sand); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- v2: service pages ---- */
.crumbs { font-size: 13px; color: var(--grey); margin: 0 0 18px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.crumbs a { color: var(--sand); text-decoration: underline; text-decoration-color: rgba(254, 233, 206, .4); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--orange); }
.crumbs [aria-current] { color: var(--grey); }

/* two cards: keep them side by side instead of leaving a gap */
@media (min-width: 640px) { .work.work-2 { grid-template-columns: 1fr 1fr; } }

.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-size: 15px; font-weight: 700; color: var(--cream); background: var(--panel); }

.faq { display: grid; gap: 12px; max-width: 860px; }
.faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 0 22px; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 32px 20px 0; position: relative; font-weight: 700; font-size: 18px; color: var(--sand); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--orange); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 8px; }
.faq details p { margin: 0 0 20px; color: var(--grey); }

.rels { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rel { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 64px; padding: 16px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--sand); font-weight: 700; text-decoration: none; transition: border-color .2s, color .2s; }
.rel:hover { border-color: var(--orange); color: var(--orange); }

.stats-4 { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
@media (min-width: 900px) { .stats-4 { grid-template-columns: repeat(4, 1fr); } }

/* guide */
.prose .wrap > p { max-width: 70ch; color: var(--cream); margin: 0 0 18px; }
.table-wrap { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 16px; }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--orange); font-size: 14px; text-transform: uppercase; letter-spacing: .05em; }
td { color: var(--cream); }
td:last-child { font-weight: 700; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }

/* footer service links */
.foot .wrap { flex-direction: column; }
.foot-links { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); width: 100%; padding-bottom: 24px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.foot-links p { margin: 0 0 10px; color: var(--orange); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 13px; }
.foot-links ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot-links a { color: var(--sand); text-decoration: none; }
.foot-links a:hover { color: var(--orange); }

/* card grids: 3 across on desktop so 6 cards make two full rows; 2 or 4 cards sit 2 across */
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .grid:has(> :last-child:nth-child(2)), .grid:has(> :last-child:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
}

/* phones: each table row becomes a small card (name, what's included, price) */
@media (max-width: 620px) {
  .table-wrap { overflow: visible; border: 0; }
  table { min-width: 0; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  table, tbody, tr, td { display: block; }
  tr { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin-bottom: 12px; }
  td { padding: 0; border: 0; }
  td:first-child { font-weight: 700; color: var(--sand); margin-bottom: 6px; }
  td:nth-child(2) { color: var(--grey); font-size: 15px; margin-bottom: 10px; }
  td:last-child { color: var(--orange); white-space: normal; }
}

/* header links: at least 44px tall so they're easy to tap */
.nav a, .logo { display: inline-flex; align-items: center; min-height: 44px; }

/* v3, 5 Nov 2026 (ceo3): enquiry form is the primary contact path; phone and email stay listed, secondary */
.nav .nav-cta { background: var(--orange); color: #0a0a0a; padding: 0 18px; border-radius: 999px; }
.nav .nav-cta:hover { background: #ffc285; }
.nav .phone { color: var(--sand); font-weight: 600; }
@media (max-width: 760px) { .nav { gap: 14px; } .nav .nav-cta { padding: 0 14px; } }
@media (max-width: 400px) { .logo span { display: none; } }

/* massamedia static-page motion (v1, 6 Nov 2026). Matches the React pages: GSAP default ease "woow"
   = cubic-bezier(.215,.61,.355,1), default duration 1.4/phi = .865s, line reveals translateY(111%) -> 0 in an
   overflow:hidden mask with a .0618s stagger, hover text roll / arrow swap .6s, underline .735s, black page cover.
   Progressive: nothing is hidden unless the inline <head> script added html.mm-m (no reduced motion, IO support);
   the hero comes back on its own after 2.5s if motion-v1.js never runs. Built into lp-v4.css by build_lp.py. */
:root { --mm-ease: cubic-bezier(.215, .61, .355, 1); --mm-d: .865s; }

/* hero: hidden only until motion-v1.js has split the lines (html.mm-on), with a no-JS failsafe */
@keyframes mm-fs { to { opacity: 1; } }
.mm-m:not(.mm-on) main > .hero:first-child > .wrap > :not(.lead),
.mm-m:not(.mm-on) main > .prose:first-child > .hero:first-child > .wrap > :not(.lead),
.mm-m:not(.mm-on) .wk-hero > .wrap > :not(.wk-hero-row),
.mm-m:not(.mm-on) .wk-hero-row > :not(.wk-lead) { opacity: 0; animation: mm-fs 0s linear 2.5s forwards; }
/* the hero lead is the mobile LCP element: a pure-CSS fade-rise that starts on the first paint keeps LCP at FCP */
@keyframes mm-lead { from { opacity: .2; transform: translateY(18px); } } /* not 0: an opacity-0 first paint is never counted as LCP */
.mm-m main > .hero:first-child .lead, .mm-m main > .prose:first-child > .hero:first-child .lead, .mm-m .wk-hero .wk-lead { animation: mm-lead var(--mm-d) var(--mm-ease) both; }
.mm-m.mm-pt-in main > .hero:first-child .lead, .mm-m.mm-pt-in main > .prose:first-child > .hero:first-child .lead, .mm-m.mm-pt-in .wk-hero .wk-lead { animation-delay: .38s; }

/* line reveal (React SplitText lineParent / lineChild) */
.mm-split { display: flow-root; } /* no parent/child margin collapse while split */
.mm-lp { display: block; overflow: hidden; padding: .07em 0; } /* room for accents/descenders; margins below cancel it exactly */
.mm-lp:first-child { margin-top: -.07em; }
.mm-lp:last-child { margin-bottom: -.07em; }
.mm-lp + .mm-lp { margin-top: -.14em; }
.mm-lc { display: block; transform: translateY(111%); }
.mm-go .mm-lc { transform: none; transition: transform var(--mm-d) var(--mm-ease); }

/* block reveals: fade (React autoAlpha) and rise (cards, list items) */
.mm-fade { opacity: 0; }
.mm-rise { opacity: 0; transform: translateY(28px); }
.mm-fade.mm-go, .mm-rise.mm-go { opacity: 1; transform: none; transition: opacity var(--mm-d) var(--mm-ease), transform var(--mm-d) var(--mm-ease); }

/* image reveal (React press-mention: clip from the bottom up, inner image settles from scale 1.1) */
.mm-clip { clip-path: inset(100% 0 0 0); }
.mm-clip.mm-go { clip-path: inset(0 0 0 0); transition: clip-path .8s var(--mm-ease); }
.mm-zoom { scale: 1.1; }
.mm-zoom.mm-go { scale: 1; transition: scale .8s var(--mm-ease); }

/* page cover (React .page-transition: almost-black, autoAlpha .865s) */
@keyframes mm-pt-in { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes mm-pt-out { from { opacity: 0; } to { opacity: 1; } }
html.mm-pt-in::after, html.mm-pt-out::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; background: #0a0a0a; pointer-events: none; }
html.mm-pt-in::after { animation: mm-pt-in var(--mm-d) var(--mm-ease) .12s both; }
html.mm-pt-out::after { animation: mm-pt-out .45s var(--mm-ease) both; pointer-events: auto; }
html.mm-pt-out { cursor: wait; }

/* hover: text roll + arrow swap (React header button / connect items), underline (React underlineAlt) */
.mm-roll { display: inline-grid; overflow: hidden; vertical-align: top; padding: .12em 0; margin: -.12em 0; }
.mm-roll > span { grid-area: 1 / 1; transition: transform .6s var(--mm-ease); }
.mm-roll > span + span { transform: translateY(110%); }
.mm-arr { display: inline-grid; overflow: hidden; vertical-align: top; padding: 0 .06em; margin: 0 -.06em; }
.mm-arr > span { grid-area: 1 / 1; transition: transform .6s var(--mm-ease); }
.mm-arr > span + span { transform: translate(-100%, 100%); }
.mm-arr.mm-arr-x > span + span { transform: translateX(-120%); }
.btn { transition: background-color .6s var(--mm-ease), color .6s var(--mm-ease), border-color .6s var(--mm-ease), transform .16s ease-out; }
.btn:active { transform: scale(.97); }
.nav a, .foot-links a { position: relative; }
.nav a:not(.nav-cta)::before, .foot-links a::before { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .735s var(--mm-ease); }
.work-card { isolation: isolate; }
.work-card img { transition: transform .6s var(--mm-ease); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .mm-roll > span:first-child, .nav-cta:hover .mm-roll > span:first-child, .rel:hover .mm-roll > span:first-child { transform: translateY(-110%); }
  .btn:hover .mm-roll > span + span, .nav-cta:hover .mm-roll > span + span, .rel:hover .mm-roll > span + span { transform: none; }
  a:hover .mm-arr > span:first-child { transform: translate(100%, -100%); }
  a:hover .mm-arr.mm-arr-x > span:first-child { transform: translateX(120%); }
  a:hover .mm-arr > span + span { transform: none; }
  .nav a:not(.nav-cta):hover::before, .foot-links a:hover::before { transform: scaleX(1); transform-origin: left; }
  .work-card:hover img { transform: scale(1.04); }
}

@media print {
  .mm-fade, .mm-rise, .mm-clip, .mm-zoom, .mm-lc, .mm-m main > .hero:first-child > .wrap > *, .mm-m main > .prose:first-child > .hero:first-child > .wrap > *, .mm-m .wk-hero > .wrap > *, .mm-m .wk-hero-row > * { opacity: 1 !important; transform: none !important; clip-path: none !important; scale: none !important; animation: none !important; }
  html.mm-pt-in::after, html.mm-pt-out::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-roll > span + span, .mm-arr > span + span { display: none; }
  .mm-roll > span, .mm-arr > span, .work-card img { transition: none; transform: none !important; }
  .nav a::before, .foot-links a::before { transition: none; }
  .btn:active { transform: none; }
  html.mm-pt-in::after, html.mm-pt-out::after { display: none; }
}

/* hero eyebrow, one style on every static page (= /websites/; the guides' prose colour no longer wins) (6 Nov 2026) */
main .hero .eyebrow { color: var(--orange); font-weight: 700; font-size: 14px; line-height: 1.55; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 22px; }
main .hero { padding-top: clamp(48px, 9vw, 120px); }

/* massamedia static header (job 3, 6 Nov 2026): React header / menu / LET'S CONNECT modal / fixed logo CSS, copied
   by _build/header_css.py from: 658bff1259063833.css, fd7fcadae4ca2756.css, 73eaff7cf7596401.css, 040145581965da98-v2612.css, a336f3e3102fdc74.css, 482d375a3b26a5fb.css, 3995f11eff2ddbea.css, e17ede8b177c8d76.css, 295c6221be9e6fca.css, a0ffcff5f2b5a706.css, 4a3582ca1849f0fc.css, mm-site-v2628.css. rem -> var(--mmr) (React fluid rem). Do not hand-edit. */
:root { --mmr: .5208333333vw; }
@media (max-width: 1199px) { :root { --mmr: .9765625vw; } }
@media (max-width: 767px) { :root { --mmr: 2.3255813953vw; } }
.mmh { --almost-black: rgb(10,10,10); --bg-nav: rgb(5,5,5); --border-social: rgba(234,219,200,0.2); --c-activeNav: rgb(254,233,206); --coral-red: rgb(239,81,67); --dark-grey: rgb(78,78,78); --header-width: calc(var(--mmr)*7.2); --layout-columns-count: 12; --layout-columns-gap: 1.0416666667vw; --layout-margin: 1.0416666667vw; --layout-width: calc(100vw - (2 * var(--layout-margin) + var(--header-width))); --line-c-almost-black: rgba(255,255,255,0.08); --paddingLeftWithHeader: calc(var(--header-width) + var(--layout-columns-gap)); --peach-cream: rgb(255,243,226); --primary-ease: cubic-bezier(0.215,0.61,0.355,1); --sunset-orange: rgb(255,178,97); --warm-sand: rgb(254,233,206); }
@media(max-width:1199px){.mmh{--layout-columns-count: 8; --layout-columns-gap: 1.953125vw; --layout-margin: 1.953125vw; --paddingLeftWithHeader: 0px; --layout-width: calc(100vw - (2 * var(--layout-margin)));}}
@media(max-width:767px){.mmh{--layout-columns-count: 4; --layout-columns-gap: 3.7209302326vw; --layout-margin: 3.7209302326vw;}}
.mmh :where(h2, h3, p, ul, li, a, article) { margin: 0; padding: 0; text-transform: none; letter-spacing: normal; max-width: none; color: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; text-decoration: none; border: 0; list-style: none; }
.mmh *, .mmh *::before, .mmh *::after { box-sizing: border-box; }
@keyframes mm-wipe-i { from { transform: translateX(101%); } }
@keyframes mm-wipe-o { from { transform: translateX(-101%); } }
.mmh .text-almost-black{color:var(--almost-black)}
.mmh .text-dark-grey{color:var(--dark-grey)}
.mmh .text-warm-sand{color:var(--warm-sand)}
.mmh .bg-coral-red{background-color:var(--coral-red)}
.mmh .layout-grid{max-width:calc(var(--layout-width));margin-left:auto;margin-right:var(--layout-margin);width:100%}
@media(max-width:1199px){.mmh .layout-grid{margin-right:auto}}
.mmh .layout-grid,.mmh .layout-grid-full{display:grid;grid-template-columns:repeat(var(--layout-columns-count),minmax(0,1fr));grid-column-gap:var(--layout-columns-gap);column-gap:var(--layout-columns-gap)}
.mmh .layout-grid-full{max-width:100%}
.mmh .prefix .lineParent{margin-top:-.06em;padding-bottom:.06em}
.mmh .lineParent{overflow:hidden}
.mmh .lineChild{transform:translateY(111%)}
.mmh .uppercase{text-transform:uppercase}
.mmh .styles_caption__FaQt1{font-weight:700;line-height:120%}
.mmh .styles_caption_20___Pb7y{font-size:calc(var(--mmr)*2)}
@media(max-width:1199px){.mmh .styles_caption_20___Pb7y{font-size:calc(var(--mmr)*1.8)}}
@media(max-width:767px){.mmh .styles_caption_20___Pb7y{font-size:calc(var(--mmr)*1.6)}}
.mmh .styles_caption_16__oX6ne{letter-spacing:-.02em;font-size:calc(var(--mmr)*1.6)}
@media(max-width:1199px){.mmh .styles_caption_16__oX6ne{font-size:calc(var(--mmr)*1.4)}}
@media(max-width:767px){.mmh .styles_caption_16__oX6ne{font-size:calc(var(--mmr)*1.2)}}
.mmh .styles_display_375___Eqw9{font-size:calc(var(--mmr)*37.5);line-height:1;letter-spacing:-.04em;text-transform:uppercase;font-weight:700}
@media(max-width:1199px){.mmh .styles_display_375___Eqw9{font-size:calc(var(--mmr)*20.2);line-height:80%}}
@media(max-width:767px){.mmh .styles_display_375___Eqw9{font-size:calc(var(--mmr)*8)}}
.mmh .styles_menu__9VCB2{position: fixed;
    z-index: 400;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    display: flex;
    opacity: 0;
    visibility: hidden;
    align-items: center}
.mmh .styles_menu__9VCB2 .styles_menuVideo__hgSQ4{position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1}
@media(min-width:1200px){.mmh .styles_menu__9VCB2 .styles_menuVideo__hgSQ4{inset: 0}}
@media(max-width:1199px){.mmh .styles_menu__9VCB2 .styles_menuVideo__hgSQ4{bottom: 0;
        height: calc(100% - calc(var(--mmr)*7.459))}}
@media(max-width:767px){.mmh .styles_menu__9VCB2 .styles_menuVideo__hgSQ4{height: calc(100% - calc(var(--mmr)*5.02))}}
.mmh .styles_menu__9VCB2 .styles_menuVideo__hgSQ4 .styles_videoP__cAyUF{background: #000;}
.mmh .styles_menu__9VCB2 .styles_menuVideo__hgSQ4 .styles_videoP__cAyUF video{opacity: 0.5;}
.mmh .styles_menu__9VCB2 .styles_menuContent__dUEtc{grid-column: 2/span 10;
    height: -moz-fit-content;
    height: fit-content;
    display: flex;
    justify-content: space-between}
@media(max-width:1199px){.mmh .styles_menu__9VCB2 .styles_menuContent__dUEtc{grid-column: 2/span 6}}
@media(max-width:767px){.mmh .styles_menu__9VCB2 .styles_menuContent__dUEtc{grid-column: 1/-1}}
.mmh .styles_menu__9VCB2 .styles_menuContent_link__SA0mv{display: flex;
    gap: calc(var(--mmr)*1.6);
    color: var(--warm-sand);
    position: relative;
    overflow: hidden}
@media(max-width:767px){.mmh .styles_menu__9VCB2 .styles_menuContent_link__SA0mv{flex-direction: column;
        align-items: center;
        gap: calc(var(--mmr)*.8)}}
.mmh .styles_animated__1Mab2{display: inline-block;
    transition: transform .6s var(--primary-ease);
    transform: translateY(110%) rotate(.01deg)}
.mmh .styles_videoP__cAyUF{width: 100%;
    height: 100%;
    position: relative;
    aspect-ratio: var(--ratio);
    background: #000;}
.mmh .styles_videoP__cAyUF video{width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;}
.mmh .styles_heading__Wcjpz{line-height: 100%;
    letter-spacing: -.04em;
    font-weight: 700}
.mmh .styles_heading_108__nfWJE{font-size: calc(var(--mmr)*10.8);
    line-height: 95%}
@media(max-width:1199px){.mmh .styles_heading_108__nfWJE{font-size: calc(var(--mmr)*7.6)}}
@media(max-width:767px){.mmh .styles_heading_108__nfWJE{font-size: calc(var(--mmr)*4.4)}}
.mmh .styles_heading_44__FVOom{font-size: calc(var(--mmr)*4.4);
    line-height: 120%;
    letter-spacing: -.03em}
@media(max-width:1199px){.mmh .styles_heading_44__FVOom{font-size: calc(var(--mmr)*3.2);
        line-height: 110%}}
@media(max-width:767px){.mmh .styles_heading_44__FVOom{font-size: calc(var(--mmr)*2.2);
        line-height: 120%}}
.mmh .styles_heading_32__Ry8L0{font-size: calc(var(--mmr)*3.2);
    line-height: 110%;
    letter-spacing: -.03em}
@media(max-width:1199px){.mmh .styles_heading_32__Ry8L0{font-size: calc(var(--mmr)*2.6)}}
@media(max-width:767px){.mmh .styles_heading_32__Ry8L0{font-size: calc(var(--mmr)*2)}}
.mmh .styles_underlineAlt__gWwv_{width: -moz-fit-content;
    width: fit-content;
    position: relative;
    display: inline-block}
.mmh .styles_underlineAlt__gWwv_:before{content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--bg);
    transition: transform .735s var(--primary-ease);
    transform-origin: right;
    transform: scaleX(0) rotate(.001deg)}
@media(hover:hover)and (pointer:fine){.mmh .styles_underlineAlt__gWwv_:hover:before{transform: scaleX(1) rotate(.001deg);
        transform-origin: left}}
.mmh .styles_header__I7JDT{width: var(--header-width);
    position: fixed;
    display: flex;
    z-index: 401;
    background-color: var(--bg-nav);
    transition: background-color .6s var(--primary-ease);
    overflow: hidden}
@media(min-width:1200px){.mmh .styles_header__I7JDT{transform: translateX(-110%);
        top: 0;
        left: 0;
        height: 100vh;
        align-items: center;
        flex-direction: column;
        transition: transform .6s var(--primary-ease), background-color .6s var(--primary-ease)}}
.mmh .styles_header__I7JDT.styles_reavel__YbsXB{transform: translateX(0)}
.mmh .styles_header__I7JDT.styles_hideScrollList__LduX8 .styles_header_scrollToList__Zb_0T{opacity: 0;
    pointer-events: none}
@media(max-width:1199px){.mmh .styles_header__I7JDT{position: fixed;
        top: 0;
        left: 0;
        width: 100%}}
.mmh .styles_header__I7JDT:after{right: 0;
    position: absolute;
    content: "";
    background-color: var(--line-c-almost-black);
    transition: background-color .6s var(--primary-ease)}
@media(min-width:1200px){.mmh .styles_header__I7JDT:after{width: 1px;
        height: 100%;
        top: 0}}
@media(max-width:1199px){.mmh .styles_header__I7JDT:after{width: 100%;
        height: 1px;
        bottom: 0}}
.mmh .styles_header_scrollToList__Zb_0T{display: flex;
    width: 100%;
    position: relative;
    transition: opacity .6s var(--primary-ease)}
@media(min-width:1200px){.mmh .styles_header_scrollToList__Zb_0T{flex-direction: column}}
@media(max-width:767px){.mmh .styles_header_scrollToList__Zb_0T{display: none}}
.mmh .styles_header_logo__x8DV4{width: calc(var(--mmr)*2.5);
    height: calc(var(--mmr)*2);
    margin-top: auto;
    margin-bottom: auto;
    margin-left: calc(var(--mmr)*1.6);
    color: var(--warm-sand);
    rotate: 180deg;}
.mmh .styles_header_logo__x8DV4 svg{width: 100%;
    height: 100%;
    object-fit: cover}
@media(min-width:768px){.mmh .styles_header_logo__x8DV4{display: none}}
.mmh .styles_header_btn___W5Kh{margin-top: auto;
    position: relative;
    cursor: pointer;
    background-color: var(--sunset-orange);
    display: flex;
    align-items: center;
    gap: calc(var(--mmr)*.6);
    padding-block: calc(var(--mmr)*2.65);
    padding-inline: calc(var(--mmr)*3.2)}
.mmh .styles_header_btn___W5Kh.styles_disableHover__FrbpT{pointer-events: none}
@media(min-width:1200px){.mmh .styles_header_btn___W5Kh{margin-bottom: calc(var(--mmr)*4.85);
        transform: rotate(90deg);
        overflow: hidden}}
@media(max-width:1199px){.mmh .styles_header_btn___W5Kh{gap: calc(var(--mmr)*.4)}}
@media(max-width:767px){.mmh .styles_header_btn___W5Kh{padding-block: calc(var(--mmr)*1.55);
        padding-inline: calc(var(--mmr)*2.4);
        margin-left: auto}}
@media(hover:hover)and (pointer:fine){.mmh .styles_header_btn___W5Kh:hover:after{opacity: 1}}
@media(hover:hover)and (pointer:fine){.mmh .styles_header_btn___W5Kh:hover .styles_buttonArrow__XCmCT{--translateXVal1: 100%;
        --translateYVal1: -50%;
        --translateXVal2: 0%;
        --translateYVal2: 0%}}
@media(hover:hover)and (pointer:fine){.mmh .styles_header_btn___W5Kh:hover .styles_buttonArrow_el__6dRhL{transition: transform .6s var(--primary-ease)}}
@media(hover:hover)and (pointer:fine){.mmh .styles_header_btn___W5Kh:hover.styles_isConnect__BrhS6 .styles_header_btn_content__CSmxw.styles_letConnect__8o3e4 .styles_header_btn_contentSpan__VTuyV.styles_one__5G4Ry{transition: transform .6s var(--primary-ease);
        transform: translateY(-110%) rotate(.001deg)}}
@media(hover:hover)and (pointer:fine){.mmh .styles_header_btn___W5Kh:hover.styles_isConnect__BrhS6 .styles_header_btn_content__CSmxw.styles_letConnect__8o3e4 .styles_header_btn_contentSpan__VTuyV.styles_two__HfiGQ{transition: transform .6s var(--primary-ease);
        transform: translateY(0) rotate(.001deg)}}
@media(hover:hover)and (pointer:fine){.mmh .styles_header_btn___W5Kh:hover.styles_isNeverMind__b05Oy .styles_header_btn_content__CSmxw.styles_neverMind__9Zax_ .styles_header_btn_contentSpan__VTuyV.styles_one__5G4Ry{transition: transform .6s var(--primary-ease);
        transform: translateY(-110%) rotate(.001deg)}}
@media(hover:hover)and (pointer:fine){.mmh .styles_header_btn___W5Kh:hover.styles_isNeverMind__b05Oy .styles_header_btn_content__CSmxw.styles_neverMind__9Zax_ .styles_header_btn_contentSpan__VTuyV.styles_two__HfiGQ{transition: transform .6s var(--primary-ease);
        transform: translateY(0) rotate(.001deg)}}
.mmh .styles_header_btn___W5Kh:after{content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .14);
    opacity: 0;
    transition: opacity .6s var(--primary-ease)}
.mmh .styles_header_btn_contentWrap__PTT3B{text-align: center;
    white-space: nowrap;
    overflow: hidden;
    position: relative}
.mmh .styles_header_btn_content__CSmxw{display: grid;
    text-align: center;
    white-space: nowrap;
    overflow: hidden}
.mmh .styles_header_btn_content__CSmxw.styles_neverMind__9Zax_{position: absolute;
    right: 0;
    bottom: 0;
    transform: translateY(110%) rotate(.001deg)}
.mmh .styles_header_btn_contentSpan__VTuyV{grid-area: 1/1/2/2;
    display: inline-block}
.mmh .styles_header_btn_contentSpan__VTuyV.styles_two__HfiGQ{transform: translateY(110%) rotate(.001deg)}
.mmh .styles_buttonArrow__XCmCT{--translateXVal1: 0%;
    --translateXVal2: -100%;
    --translateYVal1: 0%;
    --translateYVal2: 50%;
    display: grid;
    overflow: hidden;
    position: relative;
    padding-inline: .05em;
    margin-inline: -.025em}
.mmh .styles_buttonArrow_el__6dRhL{display: block;
    grid-area: 1/1/2/2;
    font-size: calc(var(--mmr)*1.4) !important}
.mmh .styles_buttonArrow_el__6dRhL.styles_one__5G4Ry{transform: translateX(var(--translateXVal1)) translateY(calc(var(--translateYVal1))) rotate(.001deg)}
.mmh .styles_buttonArrow_el__6dRhL.styles_two__HfiGQ{transform: translateX(var(--translateXVal2)) translateY(var(--translateYVal2)) rotate(.001deg)}
.mmh .styles_scrollToItem__cejn6{position: relative;
    cursor: pointer}
@media(min-width:1200px){.mmh .styles_scrollToItem__cejn6{will-change: height}}
@media(max-width:767px){.mmh .styles_scrollToItem__cejn6{display: none}}
.mmh .styles_scrollToItem__cejn6.styles_active__oVA_l{pointer-events: none}
.mmh .styles_scrollToItem__cejn6.styles_active__oVA_l .styles_scrollToItem_contentID__3eyBx,.mmh .styles_scrollToItem__cejn6.styles_active__oVA_l .styles_scrollToItem_contentText__13Fjw{color: var(--c-activeNav)}
.mmh .styles_scrollToItem__cejn6.styles_active__oVA_l:before{background-color: var(--coral-red)}
.mmh .styles_scrollToItem_content__qUTB6{display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
    padding-block: calc(var(--mmr)*3.2);
    min-width: calc(var(--mmr)*6.4)}
@media(min-width:1200px){.mmh .styles_scrollToItem_content__qUTB6{transform: rotate(90deg)}}
@media(max-width:1199px){.mmh .styles_scrollToItem_content__qUTB6{transform: none;
        padding-block: calc(var(--mmr)*1.6);
        padding-inline: calc(var(--mmr)*1.6)}}
@media(max-width:767px){.mmh .styles_scrollToItem_content__qUTB6{transform: none;
        padding-block: calc(var(--mmr)*1.2);
        padding-inline: calc(var(--mmr)*1.2)}}
@media(hover:hover)and (pointer:fine){.mmh .styles_scrollToItem__cejn6:hover .styles_scrollToItem_contentID__3eyBx,.mmh .styles_scrollToItem__cejn6:hover .styles_scrollToItem_contentText__13Fjw{color: var(--c-activeNav)}}
.mmh .styles_scrollToItem_contentID__3eyBx,.mmh .styles_scrollToItem_contentText__13Fjw{flex: 0 0 auto;
    transition: color .6s var(--primary-ease)}
.mmh .styles_scrollToItem_contentText__13Fjw{width: 0;
    overflow: hidden;
    will-change: width}
.mmh .styles_scrollToItem_contentText__13Fjw span{text-transform: uppercase;
    display: block;
    width: max-content;
    white-space: nowrap}
.mmh .styles_scrollToItem_progress__vljwO{position: absolute;
    left: 0;
    background-color: var(--c-p, rgb(239, 81, 67));
    transform-origin: top}
@media(min-width:1200px){.mmh .styles_scrollToItem_progress__vljwO{top: 0;
        width: 2px;
        height: var(--p, 0)}}
@media(max-width:1199px){.mmh .styles_scrollToItem_progress__vljwO{bottom: 0;
        width: var(--p, 0);
        height: 2px}}
.mmh .styles_scrollToItem__cejn6:after{content: "";
    position: absolute;
    background-color: var(--line-c-almost-black);
    transition: background-color .6s var(--primary-ease)}
@media(min-width:1200px){.mmh .styles_scrollToItem__cejn6:after{bottom: 0;
        left: 0;
        width: 100%;
        height: 1px}}
@media(max-width:1199px){.mmh .styles_scrollToItem__cejn6:after{height: 100%;
        width: 1px;
        top: 0;
        right: 0}}
.mmh .styles_burger__5IS8Z{display: flex;
    flex-direction: column;
    gap: calc(var(--mmr)*1);
    cursor: pointer;
    position: relative}
@media(min-width:1200px){.mmh .styles_burger__5IS8Z{padding-inline: calc(var(--mmr)*1.6);
        padding-block: calc(var(--mmr)*3.5)}}
@media(max-width:1199px)and (min-width:768px){.mmh .styles_burger__5IS8Z{padding-inline: calc(var(--mmr)*2.2);
        padding-block: calc(var(--mmr)*3);
        min-width: calc(var(--mmr)*7.2)}}
@media(max-width:767px){.mmh .styles_burger__5IS8Z{width: calc(var(--mmr)*4.8);
        height: calc(var(--mmr)*4.8);
        flex: 0 0 auto}}
.mmh .styles_burger__5IS8Z.styles_menuOpen__yZ1VI .styles_burger__line_top__o3Xi0{transform: rotate(-45deg)}
@media(max-width:1199px){.mmh .styles_burger__5IS8Z.styles_menuOpen__yZ1VI .styles_burger__line_top__o3Xi0{top: calc(var(--mmr)*3.5)}}
@media(max-width:767px){.mmh .styles_burger__5IS8Z.styles_menuOpen__yZ1VI .styles_burger__line_top__o3Xi0{top: calc(var(--mmr)*2.4)}}
.mmh .styles_burger__5IS8Z.styles_menuOpen__yZ1VI .styles_burger__line_bottom__5dD4i{top: calc(var(--mmr)*3.5);
    width: calc(var(--mmr)*2.8) !important;
    transform: rotate(45deg)}
@media(max-width:767px){.mmh .styles_burger__5IS8Z.styles_menuOpen__yZ1VI .styles_burger__line_bottom__5dD4i{width: calc(var(--mmr)*2.4) !important;
        top: calc(var(--mmr)*2.4)}}
@media(hover:hover)and (pointer:fine){.mmh .styles_burger__5IS8Z:hover .styles_burger__line_top__o3Xi0:before{transform: translateX(100%);
        transition: transform .6s var(--primary-ease)}}
@media(hover:hover)and (pointer:fine){.mmh .styles_burger__5IS8Z:hover .styles_burger__line_top__o3Xi0:after{transition: transform .6s var(--primary-ease);
        transform: translateX(0)}}
@media(hover:hover)and (pointer:fine){.mmh .styles_burger__5IS8Z:hover .styles_burger__line_bottom__5dD4i:before{transform: translateX(100%);
        transition: transform .6s var(--primary-ease)}}
@media(hover:hover)and (pointer:fine){.mmh .styles_burger__5IS8Z:hover .styles_burger__line_bottom__5dD4i:after{transition: transform .6s var(--primary-ease);
        transform: translateX(0)}}
.mmh .styles_burger__5IS8Z:after{content: "";
    position: absolute;
    background-color: var(--line-c-almost-black);
    transition: background-color .6s var(--primary-ease);
    pointer-events: none}
@media(min-width:1200px){.mmh .styles_burger__5IS8Z:after{bottom: 0;
        left: -50vw;
        width: 100vw;
        height: 1px}}
@media(max-width:1199px){.mmh .styles_burger__5IS8Z:after{height: 100%;
        width: 1px;
        top: 0;
        right: 0}}
.mmh .styles_burger__line__I2Z8_{display: block;
    height: .15em;
    position: absolute;
    left: 0;
    pointer-events: none;
    overflow: hidden}
@media(max-width:1199px){.mmh .styles_burger__line__I2Z8_{left: var(--layout-margin)}}
@media(max-width:767px){.mmh .styles_burger__line__I2Z8_{left: calc(var(--mmr)*1)}}
.mmh .styles_burger__line__I2Z8_:after,.mmh .styles_burger__line__I2Z8_:before{content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: var(--peach-cream);
    transition: background-color .6s var(--primary-ease)}
.mmh .styles_burger__line__I2Z8_:after{transform: translateX(-200%);
    transition-delay: .6s}
.mmh .styles_burger__line_top__o3Xi0{width: calc(var(--mmr)*2.8);
    transition: transform .6s var(--primary-ease), top .6s var(--primary-ease)}
@media(max-width:1199px){.mmh .styles_burger__line_top__o3Xi0{top: calc(var(--mmr)*3)}}
@media(max-width:767px){.mmh .styles_burger__line_top__o3Xi0{width: calc(var(--mmr)*2.4);
        top: calc(var(--mmr)*1.8)}}
.mmh .styles_burger__line_bottom__5dD4i{top: calc(var(--mmr)*4.5);
    width: calc(var(--mmr)*2);
    transition: width .6s var(--primary-ease), transform .6s var(--primary-ease), top .6s var(--primary-ease)}
@media(max-width:1199px){.mmh .styles_burger__line_bottom__5dD4i{top: calc(var(--mmr)*4)}}
@media(max-width:767px){.mmh .styles_burger__line_bottom__5dD4i{width: calc(var(--mmr)*1.6);
        top: calc(var(--mmr)*2.8)}}
.mmh .styles_textUnderline__V2vlH{overflow: hidden;
    position: relative;
    display: inline-block;
    width: -moz-fit-content;
    width: fit-content;
    padding-bottom: calc(var(--mmr)*.6)}
.mmh .styles_textUnderline_sm__YDJ6b .styles_textUnderline_line__CGk_L{height: 2px}
.mmh .styles_textUnderline_line__CGk_L{display: block;
    width: 100%;
    bottom: 0;
    left: 0;
    position: absolute;
    pointer-events: none;
    background: currentColor}
.mmh .styles_textUnderline_line__clone__hRfGn{position: absolute;
    left: -100%;
    bottom: 0}
.mmh .styles_portal__tTs8b{position: fixed;
    z-index: 100;
    inset: 0}
@media(max-width:1199px){.mmh .styles_portal__tTs8b{display: flex;
        flex-direction: column}}
.mmh .styles_contactModuleGrid__dD4ts{column-gap: 0 !important}
@media(max-width:1199px){.mmh .styles_contactModuleGrid__dD4ts{height: calc(100dvh - calc(var(--mmr)*7.459));
        display: flex;
        flex-direction: column;
        margin-top: auto}}
@media(max-width:767px){.mmh .styles_contactModuleGrid__dD4ts{height: calc(100dvh - calc(var(--mmr)*5.02))}}
.mmh .styles_contactModuleGrid__dD4ts.styles_isOpen__2Eyk8 .styles_contactModule__OO1UA{-webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0)}
.mmh .styles_contactModuleGrid__dD4ts.styles_isOpen__2Eyk8 .styles_contactModule_backdrop__20x0o{opacity: 1}
.mmh .styles_contactModule__OO1UA{grid-column: 3/-1;
    height: 100vh;
    padding: calc(var(--mmr)*2) 0;
    position: relative;
    -webkit-clip-path: inset(0 0 0 100%);
    clip-path: inset(0 0 0 100%);
    transition: -webkit-clip-path .8s var(--primary-ease);
    transition: clip-path .8s var(--primary-ease);
    transition: clip-path .8s var(--primary-ease), -webkit-clip-path .8s var(--primary-ease)}
@media(max-width:1199px){.mmh .styles_contactModule__OO1UA{grid-column: 1/-1;
        height: 85%;
        order: 1}}
@media(max-width:767px){.mmh .styles_contactModule__OO1UA{padding: calc(var(--mmr)*1.6) 0}}
.mmh .styles_contactModule_backdrop__20x0o{position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .71);
    opacity: 0;
    transition: opacity 1s var(--primary-ease)}
.mmh .styles_contactModule_title__gtj06{margin-top: .1em;
    font-size: calc(var(--mmr)*37.3) !important;
    line-height: 80% !important;
    font-weight: 800 !important}
@media(max-width:1199px){.mmh .styles_contactModule_title__gtj06{font-size: calc(var(--mmr)*22.5) !important;
        font-weight: 700;
        margin-left: var(--layout-margin)}}
@media(max-width:767px){.mmh .styles_contactModule_title__gtj06{font-size: calc(var(--mmr)*8.8) !important;
        margin-left: var(--layout-margin)}}
.mmh .styles_contactModule_desc__oSJzw{width: -moz-fit-content;
    width: fit-content}
@media(min-width:1200px){.mmh .styles_contactModule_desc__oSJzw{margin-left: calc(var(--mmr)*75)}}
@media(max-width:1199px){.mmh .styles_contactModule_desc__oSJzw{margin-left: var(--layout-margin)}}
@media(max-width:767px){.mmh .styles_contactModule_desc__oSJzw{margin-block: calc(var(--mmr)*2.4)}}
.mmh .styles_contactModule_contact__URBMS{display: flex;
    align-items: center;
    gap: calc(var(--mmr)*4.8);
    position: absolute;
    bottom: calc(var(--mmr)*2)}
@media(min-width:1200px){.mmh .styles_contactModule_contact__URBMS{right: var(--layout-margin)}}
@media(max-width:1199px){.mmh .styles_contactModule_contact__URBMS{left: var(--layout-margin);
        bottom: calc(var(--mmr)*4)}}
@media(max-width:767px){.mmh .styles_contactModule_contact__URBMS{flex-wrap: wrap;
        bottom: calc(var(--mmr)*3.5)}}
.mmh .styles_contactModule_contact__URBMS .styles_connectItem__cVmWM{display: flex;
    flex-direction: column;
    gap: calc(var(--mmr)*.4)}
@media(hover:hover)and (pointer:fine){.mmh .styles_contactModule_contact__URBMS .styles_connectItem__cVmWM:hover .styles_connectItem_title__text__cfk0c.styles_one__BitlC{transform: translateY(-110%) rotate(.001deg)}}
@media(hover:hover)and (pointer:fine){.mmh .styles_contactModule_contact__URBMS .styles_connectItem__cVmWM:hover .styles_connectItem_title__text__cfk0c.styles_two__7FHsJ{transform: translateY(0) rotate(.001deg)}}
.mmh .styles_contactModule_contact__URBMS .styles_connectItem_title__mXoKP{display: flex;
    gap: calc(var(--mmr)*1);
    align-items: center}
.mmh .styles_contactModule_contact__URBMS .styles_connectItem_title__wrap__5DcnT{position: relative;
    overflow: hidden;
    display: grid}
.mmh .styles_contactModule_contact__URBMS .styles_connectItem_title__icon__z5LhB{flex-shrink: 0;
    width: calc(var(--mmr)*.6);
    height: calc(var(--mmr)*.6);
    background-color: hsla(0, 0%, 100%, .5) !important}
.mmh .styles_contactModule_contact__URBMS .styles_connectItem_title__text__cfk0c{transition: transform .6s var(--primary-ease);
    grid-area: 1/1/2/2;
    text-transform: uppercase;
    color: hsla(0, 0%, 100%, .5) !important}
.mmh .styles_contactModule_contact__URBMS .styles_connectItem_title__text__cfk0c.styles_two__7FHsJ{transform: translateY(110%) rotate(.001deg)}
.mmh .styles_mmLogo__7GLmk{position: fixed;
    top: 0;
    left: 0;
    margin-left: var(--paddingLeftWithHeader);
    width: -moz-fit-content;
    width: fit-content;
    margin-top: calc(var(--mmr)*3);
    z-index: 10;
    color: var(--peach-cream);
    transition: color .6s var(--primary-ease), opacity .6s var(--primary-ease);
    opacity: 0}
.mmh .styles_mmLogo__7GLmk.styles_isReavel__PsBfz{opacity: 1}
@media(max-width:1199px){.mmh .styles_mmLogo__7GLmk{margin-top: calc(var(--mmr)*10.659);
        left: var(--layout-margin)}}
@media(max-width:767px){.mmh .styles_mmLogo__7GLmk{display: none}}
.mmh .styles_mmLogo_wrap__Y2dpP{display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--mmr)*3.1);
    height: calc(var(--mmr)*2.5);
    position: relative;
    rotate: 180deg;}
.mmh .styles_mmLogo__7GLmk svg{width: 100%;
    height: 100%;
    object-fit: cover}
.mmh .styles_closeContact__6mE1h{grid-column:1/span 2;height:100%;position:relative}
@media(max-width:1199px){.mmh .styles_closeContact__6mE1h{grid-column:1/-1;height:15%;order:2}}
.mmh .styles_closeContact__6mE1h.styles_isOpen__9DsL3 .styles_closeContact_close__oIeKg{opacity:1;pointer-events:auto}
.mmh .styles_closeContact_wrap__UVw02{position:absolute;top:0;left:0}
.mmh .styles_closeContact_close__oIeKg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(var(--mmr)*6.4);height:calc(var(--mmr)*6.4);cursor:pointer;z-index:3;background-color:var(--peach-cream);border-radius:100vmax;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s var(--primary-ease)}
@media(hover:hover)and (pointer:fine){.mmh .styles_closeContact_close__oIeKg:hover .styles_closeContact_closeLine___Vyei.styles_one__U9iju:before{transition:transform .6s var(--primary-ease);transform:translateX(120%) rotate(.001deg)}}
@media(hover:hover)and (pointer:fine){.mmh .styles_closeContact_close__oIeKg:hover .styles_closeContact_closeLine___Vyei.styles_one__U9iju:after{transition:transform .6s var(--primary-ease);transform:translateX(0) rotate(.001deg);transition-delay:.15s}}
@media(hover:hover)and (pointer:fine){.mmh .styles_closeContact_close__oIeKg:hover .styles_closeContact_closeLine___Vyei.styles_two__apbmj:before{transition:transform .6s var(--primary-ease);transform:translateX(120%) rotate(.001deg);transition-delay:.18s}}
@media(hover:hover)and (pointer:fine){.mmh .styles_closeContact_close__oIeKg:hover .styles_closeContact_closeLine___Vyei.styles_two__apbmj:after{transition:transform .6s var(--primary-ease);transform:translateX(0) rotate(.001deg);transition-delay:.24s}}
@media(max-width:1199px){.mmh .styles_closeContact_close__oIeKg{width:calc(var(--mmr)*7.2);height:calc(var(--mmr)*7.2)}}
@media(max-width:767px){.mmh .styles_closeContact_close__oIeKg{width:calc(var(--mmr)*4.8);height:calc(var(--mmr)*4.8)}}
.mmh .styles_closeContact_closeLine___Vyei{position:absolute;width:calc(var(--mmr)*2.5);height:1.5px;overflow:hidden}
@media(max-width:767px){.mmh .styles_closeContact_closeLine___Vyei{width:calc(var(--mmr)*2)}}
.mmh .styles_closeContact_closeLine___Vyei.styles_one__U9iju{transform:rotate(45deg) rotate(.001deg)}
.mmh .styles_closeContact_closeLine___Vyei.styles_one__U9iju:after,.mmh .styles_closeContact_closeLine___Vyei.styles_one__U9iju:before{content:"";position:absolute;width:100%;height:100%;background-color:var(--almost-black)}
.mmh .styles_closeContact_closeLine___Vyei.styles_one__U9iju:after{transform:translateX(-120%) rotate(.001deg)}
.mmh .styles_closeContact_closeLine___Vyei.styles_two__apbmj{transform:rotate(-45deg) rotate(.001deg)}
.mmh .styles_closeContact_closeLine___Vyei.styles_two__apbmj:after,.mmh .styles_closeContact_closeLine___Vyei.styles_two__apbmj:before{content:"";position:absolute;width:100%;height:100%;background-color:var(--almost-black)}
.mmh .styles_closeContact_closeLine___Vyei.styles_two__apbmj:after{transform:translateX(-120%) rotate(.001deg)}
.mmh .styles_socialModal__TMJA9{display:grid;grid-template-columns:repeat(2,1fr);width:calc(var(--mmr)*45.7);grid-column-gap:calc(var(--mmr)*2);column-gap:calc(var(--mmr)*2);position:absolute;right:var(--layout-margin);top:calc(var(--mmr)*2)}
@media(max-width:767px){.mmh .styles_socialModal__TMJA9{width:calc(100% - var(--layout-margin)*2);position:unset;margin-inline:auto}}
.mmh .styles_socialModalItem__5Fxtf{--translateXVal1:0%;--translateXVal2:-100%;--translateYVal1:0%;--translateYVal2:50%;display:flex;align-items:center;padding:calc(var(--mmr)*1.6) 0;border-bottom:1px solid var(--border-social);cursor:pointer}
.mmh .styles_socialModalItem__5Fxtf:first-child,.mmh .styles_socialModalItem__5Fxtf:nth-child(2){border-top:1px solid var(--border-social)}
.mmh .styles_socialModalItem__5Fxtf .styles_lottie__HLs8N{width:max(20px,calc(var(--mmr)*2));height:max(20px,calc(var(--mmr)*2));flex-shrink:0}
.mmh .styles_socialModalItem__5Fxtf .styles_title__gAD4r{margin-left:calc(var(--mmr)*.8)}
.mmh .styles_socialModalItem__5Fxtf .styles_arrow__ZypCA{margin-left:auto;display:grid;overflow:hidden;position:relative}
.mmh .styles_socialModalItem__5Fxtf .styles_arrow_el__otet4{display:block;grid-area:1/1/2/2}
.mmh .styles_socialModalItem__5Fxtf .styles_arrow_el__otet4.styles_one__rIMDJ{transform:translateX(var(--translateXVal1)) translateY(calc(var(--translateYVal1))) rotate(.001deg)}
.mmh .styles_socialModalItem__5Fxtf .styles_arrow_el__otet4.styles_two__pOP9I{transform:translateX(var(--translateXVal2)) translateY(var(--translateYVal2)) rotate(.001deg)}
.mmh .styles_menu__9VCB2 .styles_menuContent__dUEtc{flex-wrap: wrap; gap: calc(var(--mmr)*2.4) calc(var(--mmr)*4);}
@media (max-width: 1199px){.mmh .styles_menu__9VCB2 .styles_menuContent__dUEtc{display: grid; grid-template-columns: 1fr 1fr; row-gap: calc(var(--mmr)*3.2);}}
@media (max-width: 1199px){.mmh .styles_menu__9VCB2 .styles_menuContent__dUEtc > :nth-child(even){justify-self: end;}}
@media (max-width: 1199px){.mmh .styles_menu__9VCB2 .styles_menuContent__dUEtc > :nth-child(odd){justify-self: start;}}
@media (max-width: 767px){.mmh .styles_contactModule_contact__URBMS{display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: calc(var(--mmr)*2.4) calc(var(--mmr)*2.4); right: var(--layout-margin);}}
@media (max-width: 767px){.mmh .styles_contactModule_contact__URBMS .styles_connectItem__cVmWM{min-width: 0;}}
.mmh .mm-wm{display: block; width: 109.4px; height: 36px; flex: none; color: inherit; clip-path: path('M4.78 13.12C4.86 12.91 5.28 13.03 5.62 13.37C5.99 13.7 6.2 14.12 6.08 14.37L5.32 15.67C6.62 14.42 7.88 13.37 8.67 13.07C11.27 12.19 10.85 15.04 10.02 17.6C10.14 17.52 10.31 17.43 10.43 17.39C10.81 17.22 11.15 17.1 11.44 17.1C12.11 17.06 12.66 17.39 13.03 18.19C13.24 18.65 13.24 19.36 12.91 20.32C12.87 20.41 17.39 16.68 17.43 16.68C17.6 16.51 17.98 16.05 18.31 16.43C18.69 16.76 18.65 17.01 18.48 17.18C18.44 17.22 8.42 27.78 11.57 19.15C11.61 18.98 11.65 18.86 11.69 18.69L11.52 18.77C10.39 19.36 8.93 20.58 8.63 21.08V21.12C8.51 21.37 8.13 21.29 7.75 20.95C7.38 20.62 7.21 20.16 7.29 19.95C7.29 19.91 9.85 14.46 9.72 14.5C7.46 15.3 1.42 22.67 1.38 22.71C1.26 22.88 0.88 22.76 0.54 22.46C0.21 22.13 0 21.67 0.13 21.46L4.78 13.12ZM24.55 15.84C24.72 16.26 24.59 16.51 24.26 16.43C23.92 16.34 23.5 15.97 23.34 15.59C22.5 14.79 20.45 15.76 19.69 16.39C18.14 17.64 17.26 19.15 16.8 21.08C18.27 20.66 22.08 16.22 22.08 16.22C22.25 16.05 22.62 16.18 23 16.55C23.29 16.89 23.46 17.27 23.34 17.48C23.25 17.68 22.75 18.77 23 19.95C23.17 20.95 28.62 16.39 28.7 16.34C28.87 16.18 29.2 15.97 29.54 16.3C29.87 16.68 29.83 17.01 29.66 17.18C26.9 19.65 25.26 21.12 24.13 21.71C22.21 22.71 20.74 22.13 20.78 20.07C19.27 21.5 17.72 22.8 16.8 22.38C16.46 22.25 16.21 22 15.96 21.75C15.54 21.2 15.37 20.62 15.46 19.99C15.5 19.49 15.67 18.94 15.92 18.4C16.46 17.22 17.43 15.92 18.52 15.04C20.4 13.49 23.84 13.41 24.55 15.84ZM28.65 17.98C28.48 18.15 27.98 18.4 27.64 18.06C27.31 17.68 28.19 16.93 28.35 16.76L31.5 12.95C32.04 12.36 32.46 12.03 32.46 12.03C32.63 11.86 33.05 12.03 33.34 12.4C33.68 12.74 33.84 13.2 33.68 13.37L32.67 14.33C31.79 15.34 30.62 17.14 31.08 19.07C31.33 20.28 31.2 21.25 30.87 21.96C30.66 22.34 30.37 22.63 30.07 22.88C29.78 23.09 29.44 23.26 29.11 23.34C28.52 23.47 27.94 23.38 27.47 23.13C25.09 21.92 26.38 19.57 26.38 19.53C26.51 19.32 26.89 19.4 27.27 19.74C27.64 20.07 27.81 20.53 27.73 20.74C27.73 20.79 27.14 21.83 27.22 21.88C27.39 21.96 27.73 21.96 28.06 21.88C28.35 21.83 28.65 21.71 28.9 21.5C29.15 21.33 29.4 21.04 29.53 20.74C29.82 20.16 29.95 19.4 29.74 18.44C29.74 17.89 29.36 17.85 30.37 16.01L28.65 17.98ZM35.36 17.98C35.19 18.15 34.69 18.4 34.35 18.06C34.02 17.68 34.9 16.93 35.07 16.76L38.21 12.95C38.75 12.36 39.17 12.03 39.17 12.03C39.34 11.86 39.76 12.03 40.05 12.4C40.39 12.74 40.56 13.2 40.39 13.37L39.38 14.33C38.5 15.34 37.33 17.14 37.79 19.07C38.04 20.28 37.92 21.25 37.58 21.96C37.37 22.34 37.08 22.63 36.78 22.88C36.49 23.09 36.16 23.26 35.82 23.34C35.23 23.47 34.65 23.38 34.19 23.13C31.8 21.92 33.1 19.57 33.1 19.53C33.22 19.32 33.6 19.4 33.98 19.74C34.35 20.07 34.52 20.53 34.44 20.74C34.44 20.79 33.85 21.83 33.93 21.88C34.1 21.96 34.44 21.96 34.77 21.88C35.07 21.83 35.36 21.71 35.61 21.5C35.86 21.33 36.11 21.04 36.24 20.74C36.53 20.16 36.66 19.4 36.45 18.44C36.45 17.89 36.07 17.85 37.08 16.01L35.36 17.98ZM48.9 15.84C49.07 16.26 48.94 16.51 48.61 16.43C48.27 16.34 47.85 15.97 47.69 15.59C46.85 14.79 44.8 15.76 44.04 16.39C42.49 17.64 41.61 19.15 41.15 21.08C42.62 20.66 46.43 16.22 46.43 16.22C46.6 16.05 46.97 16.18 47.35 16.55C47.64 16.89 47.81 17.27 47.69 17.48C47.6 17.68 47.1 18.77 47.35 19.95C47.52 20.95 52.97 16.39 53.05 16.34C53.22 16.18 53.55 15.97 53.89 16.3C54.22 16.68 54.18 17.01 54.01 17.18C51.25 19.65 49.61 21.12 48.48 21.71C46.56 22.71 45.09 22.13 45.13 20.07C43.62 21.5 42.07 22.8 41.15 22.38C40.81 22.25 40.56 22 40.31 21.75C39.89 21.2 39.72 20.62 39.81 19.99C39.85 19.49 40.02 18.94 40.27 18.4C40.81 17.22 41.78 15.92 42.87 15.04C44.75 13.49 48.19 13.41 48.9 15.84ZM54.26 13.12C54.34 12.91 54.76 13.03 55.09 13.37C55.47 13.7 55.68 14.12 55.55 14.37L54.8 15.67C56.1 14.42 57.36 13.37 58.15 13.07C60.75 12.19 60.33 15.04 59.49 17.6C59.62 17.52 59.79 17.43 59.91 17.39C60.29 17.22 60.63 17.1 60.92 17.1C61.59 17.06 62.13 17.39 62.51 18.19C62.72 18.65 62.72 19.36 62.39 20.32C62.34 20.41 66.87 16.68 66.91 16.68C67.08 16.51 67.46 16.05 67.79 16.43C68.17 16.76 68.13 17.01 67.96 17.18C67.92 17.22 57.9 27.78 61.04 19.15C61.09 18.98 61.13 18.86 61.17 18.69L61 18.77C59.87 19.36 58.4 20.58 58.11 21.08V21.12C57.99 21.37 57.61 21.29 57.23 20.95C56.85 20.62 56.69 20.16 56.77 19.95C56.77 19.91 59.33 14.46 59.2 14.5C56.94 15.3 50.9 22.67 50.86 22.71C50.74 22.88 50.36 22.76 50.02 22.46C49.69 22.13 49.48 21.67 49.6 21.46L54.26 13.12ZM68.67 16.3C69.25 16.13 69.88 15.88 70.55 15.59C71.43 15.13 72.19 14.25 72.65 13.45C72.73 13.28 72.77 13.16 72.86 12.99C72.4 13.2 71.85 13.54 71.22 14C70.38 14.63 69.42 15.42 68.67 16.3ZM71.64 16.97C69.67 17.98 67.45 18.23 67.32 18.23C64.48 24.35 75.79 19.15 77.09 16.8C77.21 16.55 77.63 16.26 78.01 16.6C78.35 16.93 78.35 17.1 78.22 17.35C77.05 19.4 70.51 23.93 67.62 22.29C66.19 21.5 65.31 19.82 65.65 18.19C65.86 17.14 66.49 16.05 67.32 15.09C68.16 14.16 69.13 13.28 70.05 12.61C71.26 11.78 72.4 11.27 72.86 11.36C73.23 11.44 73.57 11.65 73.86 11.99C74.28 12.45 74.45 12.99 74.37 13.49C74.32 13.87 74.16 14.25 73.95 14.67C73.49 15.55 72.65 16.47 71.64 16.97ZM83.38 18.31C83.34 18.52 83.09 18.56 82.8 18.4L82.76 18.48C81.25 19.78 79.91 20.83 78.86 21.5C77.43 22.38 75.04 22.59 75.17 20.2C75.21 19.57 75.51 18.77 75.97 17.98C76.8 16.6 78.61 14.29 80.37 14.37C82 14.33 82.5 15.17 82.92 15.8C84.47 14.33 86.07 12.61 87.57 10.81C91.01 6.71 93.36 3.31 94.49 1.55L95.37 0.21C95.49 0 95.87 0.08 96.25 0.46C96.58 0.8 96.79 1.22 96.67 1.47C96.67 1.47 96.33 2.01 95.66 3.02C91.56 9.47 76.01 33.99 76.59 35.37C76.76 35.79 76.59 36 76.26 35.91C75.92 35.83 75.51 35.45 75.38 35.03C74.88 33.86 80.45 24.31 85.81 15.46C85.02 16.3 84.22 17.1 83.43 17.81C83.43 18.1 83.38 18.27 83.38 18.31ZM82 16.68C81.92 16.39 81.71 16.05 81.16 16.05C79.65 15.97 77.98 18.02 77.27 19.19C76.93 19.78 76.68 20.32 76.59 20.74C76.85 20.62 77.22 20.41 77.68 20.12C78.73 19.49 80.07 18.44 81.54 17.14L82 16.68ZM92.92 13.28C93.13 13.12 93.55 13.28 93.88 13.66C94.22 14.04 94.34 14.46 94.13 14.63C93.21 15.42 91.7 17.22 90.78 18.98C90.2 20.16 90.24 20.83 90.66 21.04C92.37 21.29 97.03 16.76 97.03 16.72C97.19 16.55 97.49 16.22 97.82 16.6C98.2 16.97 98.03 17.1 97.86 17.27C97.82 17.27 90.87 24.81 89.06 21.67C88.48 20.62 88.77 19.19 89.48 17.77C90.41 15.97 91.96 14.08 92.92 13.28ZM95.52 12.07C95.35 12.28 94.93 12.11 94.6 11.78C94.26 11.4 94.09 10.98 94.26 10.77L96.61 8.09C96.77 7.88 97.15 8.05 97.53 8.38C97.86 8.76 97.99 9.18 97.86 9.39L95.52 12.07ZM104.07 15.84C104.24 16.26 104.11 16.51 103.77 16.43C103.44 16.34 103.02 15.97 102.85 15.59C102.01 14.79 99.96 15.76 99.21 16.39C97.66 17.64 96.78 19.15 96.32 21.08C97.78 20.66 101.6 16.22 101.6 16.22C101.76 16.05 102.14 16.18 102.52 16.55C102.81 16.89 102.98 17.27 102.85 17.48C102.77 17.68 102.27 18.77 102.52 19.95C102.69 20.95 108.13 16.39 108.22 16.34C108.38 16.18 108.72 15.97 109.06 16.3C109.39 16.68 109.35 17.01 109.18 17.18C106.42 19.65 104.78 21.12 103.65 21.71C101.72 22.71 100.25 22.13 100.3 20.07C98.79 21.5 97.24 22.8 96.32 22.38C95.98 22.25 95.73 22 95.48 21.75C95.06 21.2 94.89 20.62 94.97 19.99C95.02 19.49 95.18 18.94 95.44 18.4C95.98 17.22 96.94 15.92 98.03 15.04C99.92 13.49 103.36 13.41 104.07 15.84Z');
  -webkit-backdrop-filter: grayscale(1) brightness(.625) contrast(40) invert(1) sepia(1) hue-rotate(-64.2deg) saturate(9.149); backdrop-filter: grayscale(1) brightness(.625) contrast(40) invert(1) sepia(1) hue-rotate(-64.2deg) saturate(9.149);}
.mmh .styles_header__I7JDT .mm-wm{-webkit-backdrop-filter: grayscale(1) brightness(.625) contrast(40) invert(1) sepia(1) hue-rotate(-65deg) saturate(17.24) brightness(.993); backdrop-filter: grayscale(1) brightness(.625) contrast(40) invert(1) sepia(1) hue-rotate(-65deg) saturate(17.24) brightness(.993);}
@supports not ((backdrop-filter: invert(1)) or (-webkit-backdrop-filter: invert(1))){.mmh .mm-wm{background-color: currentColor;}}
.mmh .styles_mmLogo__7GLmk .styles_mmLogo_wrap__Y2dpP{rotate: none; width: auto; height: auto;}
.mmh .styles_header__I7JDT .styles_header_logo__x8DV4{rotate: none; width: auto; height: auto;}
.mmh .mm-wipe{display: block; overflow: hidden;}
.mmh .mm-wipe-in{display: block;}
.mmh .styles_mmLogo__7GLmk.styles_isReavel__PsBfz .mm-wipe,.mmh .styles_header__I7JDT.styles_reavel__YbsXB .mm-wipe{animation: mm-wipe-o 1.2s cubic-bezier(.215, .61, .355, 1) both;}
.mmh .styles_mmLogo__7GLmk.styles_isReavel__PsBfz .mm-wipe-in,.mmh .styles_header__I7JDT.styles_reavel__YbsXB .mm-wipe-in{animation: mm-wipe-i 1.2s cubic-bezier(.215, .61, .355, 1) both;}
@media (prefers-reduced-motion: reduce){.mmh .mm-wipe,.mmh .mm-wipe-in{animation: none !important;}}
.mmh .styles_mmLogo__7GLmk{transition: color .6s var(--primary-ease);}
@media (min-width: 1200px){.mmh .styles_header__I7JDT .styles_header_scrollToList__Zb_0T{display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-bottom: calc(var(--mmr)*5.2);}}
@media (min-width: 1200px){.mmh .styles_header__I7JDT .styles_header_scrollToList__Zb_0T .styles_scrollToItem__cejn6{flex: 1 1 0; min-height: 0; overflow: hidden;}}
@media (min-width: 1200px){.mmh .styles_header__I7JDT .styles_header_scrollToList__Zb_0T .styles_scrollToItem__cejn6:not(.styles_active__oVA_l){height: auto !important;}}
@media (min-width: 1200px){.mmh .styles_header__I7JDT .styles_header_scrollToList__Zb_0T .styles_scrollToItem__cejn6.styles_active__oVA_l{flex: 1 0 auto;}}
@media (min-width: 1200px){.mmh .styles_header__I7JDT .styles_header_scrollToList__Zb_0T .styles_scrollToItem__cejn6:last-child::after{display: none;}}
.mmh .styles_scrollToItem__cejn6 .styles_scrollToItem_contentText__13Fjw{overflow: hidden; white-space: nowrap; opacity: 0; visibility: hidden; transition: none;}
.mmh .styles_scrollToItem__cejn6.styles_active__oVA_l .styles_scrollToItem_contentText__13Fjw,.mmh .styles_scrollToItem__cejn6:hover .styles_scrollToItem_contentText__13Fjw{opacity: 1; visibility: visible; transition: opacity .4s cubic-bezier(.25, .46, .45, .94) .1s, visibility 0s;}

/* massamedia static header, hand-written part (v1, 6 Nov 2026): what the static pages need around the copied React
   header CSS (header-v1.css): resets for <button>, page offsets for the sidebar / top bar, the sibling sub-nav, the
   menu's extra links, menu + modal initial states, Lenis. Built into lp-v4.css by build_lp.py. */
.mmh button { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: inherit; }
.mmh button:focus-visible, .mmh a:focus-visible { outline: 2px solid var(--sunset-orange); outline-offset: 3px; }

/* the page sits beside the desktop sidebar and below the tablet / phone top bar (React --paddingLeftWithHeader) */
@media (min-width: 1200px) { body { padding-left: calc(var(--mmr) * 7.2); } }
@media (max-width: 1199px) { body { padding-top: calc(var(--mmr) * 7.459); } }
@media (max-width: 767px) { body { padding-top: calc(var(--mmr) * 5.02); } }
html { scroll-padding-top: 0; }
@media (max-width: 1199px) { html { scroll-padding-top: calc(var(--mmr) * 7.459); } }
@media (max-width: 767px) { html { scroll-padding-top: calc(var(--mmr) * 5.02); } }

/* desktop rail (>=1200px): bounded between the burger and the LET'S CONNECT tab; equal-height items
   ((100vh - burger - tab) / n); the active item shows its rotated label; if any label would not fit -> numerals only (mm-rail-tight) */
@media (min-width: 1200px) {
  .mmh .styles_header__I7JDT { flex-direction: column; }
  .mmh .styles_header_scrollToList__Zb_0T { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .mmh .styles_header_scrollToList__Zb_0T .styles_scrollToItem__cejn6 { flex: 1 1 0; min-height: 44px; height: auto !important; overflow: hidden; }
  .mmh .styles_header_scrollToList__Zb_0T.mm-rail-tight .styles_scrollToItem_contentText__13Fjw { display: none; }
  .mmh .styles_header_btn___W5Kh { flex: none; }
  /* last item: no divider, and its progress line reaches the tab (overlaps the last pixel row) */
  .mmh .styles_header_scrollToList__Zb_0T .styles_scrollToItem__cejn6:last-child::after { display: none; }
  .mmh .styles_header_scrollToList__Zb_0T .styles_scrollToItem__cejn6:last-child .styles_scrollToItem_progress__vljwO { height: calc(var(--p, 0) + 1px); }
}

/* inactive labels fully hidden (no glyph fragments beside the numeral); shown on the active / hovered item */
.mmh .styles_scrollToItem__cejn6 .styles_scrollToItem_contentText__13Fjw { overflow: hidden; white-space: nowrap; opacity: 0; visibility: hidden; transition: none; }
.mmh .styles_scrollToItem__cejn6.styles_active__oVA_l .styles_scrollToItem_contentText__13Fjw { opacity: 1; visibility: visible; transition: opacity .4s cubic-bezier(.25, .46, .45, .94) .1s, visibility 0s; }
.mmh .styles_header_scrollToList__Zb_0T.mm-rail-tight .styles_scrollToItem_contentText__13Fjw { opacity: 0 !important; }

/* section list hides while the menu is open (React hideScrollList) */
.mmh .styles_header_scrollToList__Zb_0T { transition: opacity .6s var(--primary-ease); }
.mmh .styles_header_scrollToList__Zb_0T.mm-hide { opacity: 0; pointer-events: none; }

/* menu: hidden until opened; links start below their mask */
.mmh .styles_menu__9VCB2 { opacity: 0; visibility: hidden; }
.mmh .styles_menu__9VCB2 .styles_animated__1Mab2 { display: inline-block; transform: translateY(110%); }
.mmh .styles_menu__9VCB2 .styles_menuContent_link__SA0mv h2 { overflow: hidden; }
.mmh .styles_menu__9VCB2 video { width: 100%; height: 100%; object-fit: cover; }
/* modal: [hidden] until opened (React mounts it on open) */
.mmh .styles_portal__tTs8b[hidden] { display: none; }
.mmh .styles_lottie__HLs8N svg { width: 100%; height: 100%; display: block; color: var(--warm-sand); }
.mmh .styles_contactModule_title__gtj06 .lineChild, .mmh .styles_contactModule_desc__oSJzw .lineChild { transform: translateY(111%); }

/* scroll lock while menu / modal are open (Lenis is stopped too) */
html.mm-lock, html.mm-lock body { overflow: hidden; }

/* Lenis (same rules the React site loads) */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .mmh .styles_header_scrollToList__Zb_0T { transition: none; }
}

/* logo entrance after a page cover (static -> static): replays quicker */
html.mm-pt-in .mmh .mm-wipe, html.mm-pt-in .mmh .mm-wipe-in { animation-duration: .6s; animation-delay: .25s; }

/* same as the React fix: no opacity fade on the fixed logo (an opacity < 1 ancestor blanks the backdrop-filter wordmark) */
.mmh .styles_mmLogo__7GLmk { transition: color .6s var(--primary-ease); }

/* sticky "Start a project" (6 Nov 2026): LET'S CONNECT's sibling. Same sunset-orange block, square, caption type (700,
   uppercase), padding, dark hover overlay, label roll + arrow swap. Desktop: flush top-right, as tall as the burger cell
   (the burger block's mirror). Phones: the top-right of the bar is LET'S CONNECT itself, so it sits flush bottom-right.
   Shown after the hero CTAs leave, hidden at the form. */
.mmh .mm-sticky { position: fixed; z-index: 350; top: 0; right: 0; height: var(--header-width); display: flex; align-items: center; gap: calc(var(--mmr) * .6);
  padding-inline: calc(var(--mmr) * 3.2); background-color: var(--sunset-orange); color: var(--almost-black); text-decoration: none; overflow: hidden;
  font-weight: 700; font-size: max(11px, calc(var(--mmr) * 1.6)); line-height: 120%; text-transform: uppercase; letter-spacing: normal;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-100%);
  transition: opacity .4s var(--primary-ease), transform .4s var(--primary-ease), visibility 0s linear .4s; }
.mmh .mm-sticky.is-on { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .4s var(--primary-ease), transform .4s var(--primary-ease), visibility 0s; }
.mmh .mm-sticky::after { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, .14); opacity: 0; transition: opacity .6s var(--primary-ease); pointer-events: none; }
.mmh .mm-sticky-wrap { display: grid; overflow: hidden; white-space: nowrap; }
.mmh .mm-sticky-t { grid-area: 1 / 1; transition: transform .6s var(--primary-ease); }
.mmh .mm-sticky-t + .mm-sticky-t { transform: translateY(110%); }
.mmh .mm-sticky-arr { display: grid; overflow: hidden; font-size: max(13px, calc(var(--mmr) * 2)); padding-inline: .05em; }
.mmh .mm-sticky-arr > span { grid-area: 1 / 1; transition: transform .6s var(--primary-ease); }
.mmh .mm-sticky-arr > span + span { transform: translate(-100%, 50%); }
@media (hover: hover) and (pointer: fine) {
  .mmh .mm-sticky:hover::after { opacity: 1; }
  .mmh .mm-sticky:hover .mm-sticky-t:first-child { transform: translateY(-110%); }
  .mmh .mm-sticky:hover .mm-sticky-t + .mm-sticky-t { transform: none; }
  .mmh .mm-sticky:hover .mm-sticky-arr > span:first-child { transform: translate(100%, -50%); }
  .mmh .mm-sticky:hover .mm-sticky-arr > span + span { transform: none; }
}
.mmh .mm-sticky:focus-visible { outline: 2px solid var(--almost-black); outline-offset: -4px; }
html.mm-lock .mmh .mm-sticky.is-on { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 1199px) { .mmh .mm-sticky { height: calc(var(--mmr) * 7.459); top: auto; bottom: 0; transform: translateY(100%); } }
@media (max-width: 767px) { .mmh .mm-sticky { height: calc(var(--mmr) * 5.02); padding-inline: 18px; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .mmh .mm-sticky, .mmh .mm-sticky.is-on { transform: none; transition: none; } .mmh .mm-sticky-t, .mmh .mm-sticky-arr > span { transition: none; } }

/* /work/ logo wall (6 Nov 2026): quiet, on sand: near-black marks at 70% (100% on hover), 6 columns (3 on phones),
   hairline dividers, no boxes. Optical size per logo via --h (lp_work.logo_wall). */
.wk-logos { padding: clamp(56px, 7vw, 104px) 0; border-top: 1px solid rgba(10, 10, 10, .12); }
.wk-logos h2 { color: #0a0a0a; margin: 0 0 14px; }
.wk-logos-intro { color: rgba(10, 10, 10, .62); max-width: 60ch; margin: 0 0 clamp(28px, 4vw, 48px); }
.wk-logo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid rgba(10, 10, 10, .12); border-left: 1px solid rgba(10, 10, 10, .12); }
.wk-logo-grid li { display: flex; align-items: center; justify-content: center; min-height: clamp(96px, 9vw, 136px); padding: 18px 14px; border-right: 1px solid rgba(10, 10, 10, .12); border-bottom: 1px solid rgba(10, 10, 10, .12); }
.wk-logo-grid img { height: var(--h); width: auto; max-width: 100%; object-fit: contain; opacity: .7; transition: opacity .6s cubic-bezier(.215, .61, .355, 1); }
@media (hover: hover) and (pointer: fine) { .wk-logo-grid li:hover img { opacity: 1; } }
@media (max-width: 760px) { .wk-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wk-logo-grid li { min-height: 84px; padding: 14px 8px; } .wk-logo-grid img { height: calc(var(--h) * .72); } }

/* footer bar (6 Nov 2026): script logo + studio line + address | contact links | legal row */
.foot .foot-bar { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px 48px; padding-top: 8px; }
.foot .foot-logo { display: inline-block; margin-bottom: 12px; color: var(--sand); }
.foot .foot-wm { display: block; width: 109.4px; height: 36px; background-color: currentColor;
  -webkit-mask: url(/svg/massamedia.svg) center / contain no-repeat; mask: url(/svg/massamedia.svg) center / contain no-repeat; }
.foot .foot-brand p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(250, 235, 215, .5); }
.foot .foot-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 32px; align-items: center; }
.foot .foot-contact a { position: relative; display: inline-block; padding: 4px 0; color: var(--sand); font-weight: 700; font-size: 15px; text-decoration: none; }
.foot .foot-contact a::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .735s cubic-bezier(.215, .61, .355, 1); }
@media (hover: hover) and (pointer: fine) { .foot .foot-contact a:hover::before { transform: scaleX(1); transform-origin: left; } }
.foot .foot-legal { width: 100%; display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: rgba(250, 235, 215, .5); }
.foot .foot-legal a { color: rgba(250, 235, 215, .5); text-decoration: none; }
.foot .foot-legal a:hover { color: var(--sand); }
@media (max-width: 760px) { .foot .foot-bar { flex-direction: column; gap: 22px; } .foot .foot-contact { flex-direction: column; align-items: flex-start; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .foot .foot-contact a::before { transition: none; } }

/* enquiry form (6 Nov 2026): placeholders, focus / filled / valid / invalid states, select chevron, sending bar */
form.enquiry ::placeholder { color: rgba(250, 235, 215, .35); opacity: 1; transition: color .2s ease-out; }
form.enquiry :focus::placeholder { color: rgba(250, 235, 215, 0); }
form.enquiry .fx { position: relative; }
form.enquiry .fx input, form.enquiry .fx select, form.enquiry .fx textarea { transition: border-color .3s cubic-bezier(.215, .61, .355, 1), box-shadow .3s cubic-bezier(.215, .61, .355, 1); }
form.enquiry .fx label { transition: color .3s cubic-bezier(.215, .61, .355, 1); }
form.enquiry .fx.is-filled input, form.enquiry .fx.is-filled select, form.enquiry .fx.is-filled textarea { border-color: #5a5348; }
form.enquiry .fx.is-focus input, form.enquiry .fx.is-focus select, form.enquiry .fx.is-focus textarea { border-color: #f2b26b; box-shadow: inset 0 0 0 1px rgba(242, 178, 107, .18), 0 0 0 4px rgba(242, 178, 107, .08); outline: none; }
form.enquiry .fx.is-focus label { color: #f2b26b; }
form.enquiry .fx.is-invalid input, form.enquiry .fx.is-invalid select, form.enquiry .fx.is-invalid textarea { border-color: var(--red); }
form.enquiry .fx.fx-input::after { content: ""; position: absolute; right: 16px; top: 42px; width: 12px; height: 6px; border-left: 2px solid #f2b26b; border-bottom: 2px solid #f2b26b; transform: rotate(-45deg) scale(.6); opacity: 0; pointer-events: none; transition: opacity .3s cubic-bezier(.215, .61, .355, 1), transform .3s cubic-bezier(.215, .61, .355, 1); }
form.enquiry .fx.fx-input.is-valid:not(.is-invalid)::after { opacity: 1; transform: rotate(-45deg) scale(1); }
form.enquiry .fx.fx-input.is-valid input { padding-right: 42px; }
form.enquiry .fx-msg { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: #ff8a7f; }
form.enquiry .fx-msg:empty { display: none; }
form.enquiry .fx.fx-select select { background-image: none; }
form.enquiry .fx.fx-select::after { content: ""; position: absolute; right: 18px; top: 42px; width: 8px; height: 8px; border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: rotate(45deg); transition: transform .3s cubic-bezier(.215, .61, .355, 1); pointer-events: none; }
form.enquiry .fx.fx-select.is-open::after { transform: translateY(4px) rotate(225deg); }
form.enquiry button[type="submit"] { position: relative; overflow: hidden; }
form.enquiry button[type="submit"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #0a0a0a; transform: scaleX(0); transform-origin: left; }
form.enquiry.is-sending button[type="submit"]::after { animation: fx-send 1.6s cubic-bezier(.215, .61, .355, 1) infinite; }
form.enquiry.is-sending button[type="submit"] .mm-lbl { opacity: 0; }
form.enquiry.is-sending button[type="submit"]::before { content: attr(data-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
@keyframes fx-send { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 50.01% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
@media (prefers-reduced-motion: reduce) {
  form.enquiry .fx input, form.enquiry .fx select, form.enquiry .fx textarea, form.enquiry .fx::after { transition: none; }
  form.enquiry.is-sending button[type="submit"]::after { animation: none; transform: scaleX(1); opacity: .5; }
}

/* service-page work cards = the /work/ case design (6 Nov 2026): rounded desktop shot + overlapping phone, from lp_work */
.wcases { display: grid; gap: clamp(40px, 5vw, 64px) clamp(18px, 2.4vw, 32px); grid-template-columns: 1fr; }
@media (min-width: 640px) { .wcases { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .wcases:has(> :nth-child(3)) { grid-template-columns: repeat(3, 1fr); } }
.wcase a { display: block; color: inherit; text-decoration: none; }
.pj-pair { position: relative; margin: 0 0 clamp(40px, 4.5vw, 56px); }
.pj-pair .pj-shot { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border-radius: clamp(12px, 1.4vw, 20px); background: #141414; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.pj-pair .pj-phone { position: absolute; bottom: clamp(-40px, -4vw, -24px); right: 5%; width: clamp(72px, 24%, 140px); aspect-ratio: 1 / 2; object-fit: cover; object-position: top; border: clamp(3px, .4vw, 5px) solid #0a0a0a; border-radius: clamp(12px, 1.6vw, 20px); background: #0a0a0a; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.wcase h3 { margin: 0 0 6px; }
.wcase p { margin: 0; color: var(--grey); font-size: 15px; max-width: 46ch; }
@media (hover: hover) and (pointer: fine) { .wcase a:hover .pj-shot { transform: scale(1.02); } .wcase a:hover .pj-phone { transform: translateY(-8px); } .wcase a:hover h3 { color: var(--orange); } }
@media (prefers-reduced-motion: reduce) { .wcase .pj-shot, .pj-pair .pj-phone { transition: none; transform: none !important; } }

/* before -> after stat cards (6 Nov 2026, stacked so nothing can collide): the after value big + coral on one baseline,
   "from <before>" small soft grey underneath (an empty line of the same height when a stat has no before), then the label. */
.stats.stats-ba { max-width: none; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 999px) { .stats.stats-ba { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .stats.stats-ba { grid-template-columns: 1fr; } }
.stats-ba > div { display: flex; flex-direction: column; justify-content: flex-start; padding: 24px 22px; }
.stats-ba .st { display: flex; flex-direction: column; align-items: flex-start; margin: 0; }
.stats-ba .st-a { color: var(--red); font-weight: 800; font-size: clamp(34px, 3.2vw, 46px); line-height: 1; white-space: nowrap; }
.stats-ba .st-from { display: block; min-height: 1.45em; margin-top: 8px; color: var(--grey); font-weight: 600; font-size: 14px; line-height: 1.45; white-space: nowrap; }
.stats-ba dd { margin: 10px 0 0; color: var(--sand); font-size: 15px; line-height: 1.35; }

/* case-study blocks use the same pair (6 Nov 2026) */
.case .pj-pair { margin-bottom: clamp(32px, 4vw, 48px); }
.case .pj-pair .pj-shot { border: 0; border-radius: clamp(12px, 1.4vw, 20px); }
.case .pj-pair .pj-phone { border-radius: clamp(12px, 1.6vw, 20px); border: clamp(3px, .4vw, 5px) solid #0a0a0a; }
@media (hover: hover) and (pointer: fine) { .case .pj-pair:hover .pj-shot { transform: scale(1.02); } .case .pj-pair:hover .pj-phone { transform: translateY(-8px); } }

/* footer contact links: coral underline at rest; hover wipes it out to the right and back in from the left (underlineAlt) */
.foot .foot-contact a::before { background: var(--red); height: 2px; bottom: -2px; transform: scaleX(1); transform-origin: left; transition: none; }
.foot .foot-contact a { transition: color .6s cubic-bezier(.215, .61, .355, 1); }
@keyframes foot-ul { 0% { transform: scaleX(1); transform-origin: right; } 50% { transform: scaleX(0); transform-origin: right; } 50.01% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }
@media (hover: hover) and (pointer: fine) { .foot .foot-contact a:hover { color: #fff3e2; } .foot .foot-contact a:hover::before { transform: scaleX(1); animation: foot-ul .735s cubic-bezier(.215, .61, .355, 1); } }

/* FAQ accordion (6 Nov 2026): measured-height open / close (_lp/faq-v1.js), text fades + rises after the panel opens,
   + morphs to - (the vertical bar turns 90deg and fades), hover nudge. Reduced motion: instant. */
.faq details { transition: border-color .4s cubic-bezier(.215, .61, .355, 1); }
.faq summary::after { content: none; display: none; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-right: 0; }
.faq .faq-q { transition: transform .4s cubic-bezier(.215, .61, .355, 1); }
.faq .faq-ic { position: relative; flex: none; width: 16px; height: 16px; }
.faq .faq-ic::before, .faq .faq-ic::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: var(--orange); border-radius: 1px; transition: transform .4s cubic-bezier(.215, .61, .355, 1), opacity .4s cubic-bezier(.215, .61, .355, 1); }
.faq .faq-ic::after { transform: rotate(90deg); }
.faq details[open] .faq-ic::after, .faq details.is-opening .faq-ic::after { transform: rotate(180deg); opacity: 0; }
.faq details.is-closing .faq-ic::after { transform: rotate(90deg); opacity: 1; }
.faq .faq-a { overflow: hidden; }
.faq .faq-a > p { transition: opacity .35s cubic-bezier(.215, .61, .355, 1), transform .35s cubic-bezier(.215, .61, .355, 1); }
.faq details.is-closing .faq-a > p, .faq details.is-pre .faq-a > p { opacity: 0; transform: translateY(8px); }
@media (hover: hover) and (pointer: fine) { .faq details:hover { border-color: #3d3d3d; } .faq details:hover .faq-q { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .faq .faq-q, .faq .faq-ic::before, .faq .faq-ic::after, .faq .faq-a > p { transition: none; } }

/* LET'S CONNECT modal rows (6 Nov 2026): arrow swap (out up-right, in from bottom-left, .6s), label nudges 4px right,
   hairlines 20% -> 40% cream, icon: envelope lifts + tilts, globe turns (first / second row). Composite-only, (hover)+focus. */
.mmh .styles_socialModalItem__5Fxtf { position: relative; }
.mmh .styles_socialModalItem__5Fxtf .styles_title__gAD4r { transition: transform .5s cubic-bezier(.215, .61, .355, 1); }
.mmh .styles_socialModalItem__5Fxtf .styles_lottie__HLs8N { transition: transform .5s cubic-bezier(.215, .61, .355, 1); }
.mmh .styles_socialModalItem__5Fxtf .styles_arrow__ZypCA { display: grid; overflow: hidden; }
.mmh .styles_socialModalItem__5Fxtf .styles_arrow_el__otet4 { grid-area: 1 / 1; transition: transform .6s cubic-bezier(.215, .61, .355, 1); }
.mmh .styles_socialModalItem__5Fxtf .styles_arrow_el__otet4.styles_two__pOP9I { transform: translate(-100%, 100%); }
.mmh .styles_socialModalItem__5Fxtf::before, .mmh .styles_socialModalItem__5Fxtf::after { transition: background-color .5s cubic-bezier(.215, .61, .355, 1), border-color .5s cubic-bezier(.215, .61, .355, 1); }
@media (hover: hover) and (pointer: fine) {
  .mmh .styles_socialModalItem__5Fxtf:hover .styles_title__gAD4r { transform: translateX(4px); }
  .mmh .styles_socialModalItem__5Fxtf:hover .styles_arrow_el__otet4.styles_one__rIMDJ { transform: translate(100%, -100%); }
  .mmh .styles_socialModalItem__5Fxtf:hover .styles_arrow_el__otet4.styles_two__pOP9I { transform: none; }
  .mmh .styles_socialModalItem__5Fxtf:nth-child(1):hover .styles_lottie__HLs8N { transform: translateY(-2px) rotate(-8deg); }
  .mmh .styles_socialModalItem__5Fxtf:nth-child(2):hover .styles_lottie__HLs8N { transform: rotate(25deg); }
  .mmh .styles_socialModalItem__5Fxtf:hover { border-color: rgba(254, 233, 206, .4); }
}
.mmh .styles_socialModalItem__5Fxtf:focus-visible .styles_title__gAD4r { transform: translateX(4px); }
.mmh .styles_socialModalItem__5Fxtf:focus-visible .styles_arrow_el__otet4.styles_one__rIMDJ { transform: translate(100%, -100%); }
.mmh .styles_socialModalItem__5Fxtf:focus-visible .styles_arrow_el__otet4.styles_two__pOP9I { transform: none; }
@media (prefers-reduced-motion: reduce) { .mmh .styles_socialModalItem__5Fxtf * { transition: none !important; transform: none !important; } }

/* static footer = React footer (6 Nov 2026): no JS needed to see it; the quote's lines rise once in view (header-v1.js) */
.mmf { --font-avantt: avantt, "avantt Fallback", Arial, sans-serif; background: var(--almost-black, #0a0a0a); color: var(--warm-sand, #fee9ce); }
.mmf .lineChild { transform: none; }
.mm-m .mmf .mmf-q .lineChild { transform: translateY(111%); transition: transform .865s cubic-bezier(.215, .61, .355, 1); }
.mm-m .mmf .mmf-q .lineParent + .lineParent .lineChild { transition-delay: .062s; }
.mm-m .mmf .mmf-q.in .lineChild { transform: none; }
.mmf .lineParent { overflow: hidden; }
.mmf .style_footer_t__lottie__20ERi svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) { .mm-m .mmf .mmf-q .lineChild { transform: none; transition: none; } }

.mmh .styles_scrollToItem__cejn6:not(.styles_active__oVA_l) .styles_scrollToItem_contentText__13Fjw { width: 0 !important; } /* numeral always */
.mmh .styles_scrollToItem__cejn6 .styles_scrollToItem_contentID__3eyBx { opacity: 1 !important; visibility: visible !important; }

/* contact links sitewide (6 Nov 2026): phone / email / address links in the enquiry panel use the footer's option B
   underline: thin coral, 6px below, underlineAlt wipe on hover */
.contact-list a { position: relative; display: inline-block; border-bottom: 0 !important; padding-bottom: 6px; color: var(--sand); text-decoration: none; transition: color .3s; }
.contact-list a::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--red); transform-origin: left; }
@keyframes cl-ul { 0% { transform: scaleX(1); transform-origin: right; } 50% { transform: scaleX(0); transform-origin: right; } 50.01% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }
@media (hover: hover) and (pointer: fine) { .contact-list a:hover { color: #fff3e2; } .contact-list a:hover::before { animation: cl-ul .735s cubic-bezier(.215, .61, .355, 1); } }
@media (prefers-reduced-motion: reduce) { .contact-list a:hover::before { animation: none; } }
/* /work/ case images: the phone rises with its desktop shot (one choreography, motion-v1.js) */
.mm-on .pj-media .pj-phone.mm-follow, .mm-on .pj-media .pj-wide.mm-follow { opacity: 0; translate: 0 24px; }
.mm-on .pj-media .pj-phone.mm-follow.mm-go, .mm-on .pj-media .pj-wide.mm-follow.mm-go { opacity: 1; translate: 0 0; transition: opacity .865s cubic-bezier(.215, .61, .355, 1), translate .865s cubic-bezier(.215, .61, .355, 1); }
@media (prefers-reduced-motion: reduce) { .mm-on .pj-media .mm-follow { opacity: 1 !important; translate: none !important; } }

/* phone header (6 Nov 2026): the wordmark at ~58% of the bar height (zoom scales the clip path with it) */
@media (max-width: 767px) { .mmh .styles_header__I7JDT .mm-wm { zoom: .7; } }

/* /work/ filter pills on phones (6 Nov 2026): smaller, one scrollable row (snap, right-edge fade), counter on its own line */
@media (max-width: 600px) {
  .wk-js .wk-filter { flex-wrap: wrap; gap: 0; margin-right: calc(-1 * var(--gutter, 16px)); }
  .wk-js .wk-filter-row { display: flex; gap: 8px; width: 100%; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px var(--gutter, 16px) 2px 2px;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .wk-js .wk-filter-row::-webkit-scrollbar { display: none; }
  .wk-js .wk-filter button { flex: none; scroll-snap-align: start; min-height: 0; padding: 8px 14px; font-size: 14px; border-width: 1.5px; position: relative; }
  .wk-js .wk-filter button::after { content: ""; position: absolute; inset: -6px -2px; } /* 44px tap area */
  .wk-js .wk-filter .wk-count { flex-basis: 100%; margin: 10px 0 0; font-size: 13px; }
}

/* mobile H2 balance (6 Nov 2026): every static H2 balances its lines (no single-word orphans) on one mobile scale;
   intros 16px / 1.5 / 34ch; the /work/ logo block gap matches the other sections */
main h2, .wk h2 { text-wrap: balance; }
@media (max-width: 600px) {
  main h2:not(.styles_heading__Wcjpz), .wk-logos h2 { font-size: clamp(26px, 7.4vw, 32px); line-height: 1.02; }
  main .intro, .wk-logos-intro { font-size: 16px; line-height: 1.5; max-width: 34ch; }
  .wk-logos-intro { margin-bottom: 24px; }
}

/* sticky bar on phones (6 Nov 2026): full-width bottom bar, 56px + safe area, slides up (.4s woow); the page gets the
   same bottom padding while it shows so nothing hides behind it. Desktop keeps the top-right block. */
@media (max-width: 767px) {
  .mmh .mm-sticky { left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: auto; min-height: calc(56px + env(safe-area-inset-bottom, 0px)); padding: 0 16px env(safe-area-inset-bottom, 0px); justify-content: center; font-size: 14px; box-shadow: none; transform: translateY(100%); }
  .mmh .mm-sticky.is-on { transform: none; }
  html.mm-sticky-on body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* CTA pairs on phones (6 Nov 2026), one shared rule on the .btns group (dark and sand sections alike): stacked, full
   width, equal 54px height, 12px gap, centred 14px labels; radius / border / hover / focus unchanged */
@media (max-width: 600px) {
  .btns, .pt-mob { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .btns > .btn, .btns > a.btn, .pt-mob > .btn { width: 100%; min-height: 54px; justify-content: center; text-align: center; font-size: 14px; padding-left: 18px; padding-right: 18px; }
}

/* phone menu (6 Nov 2026): one left-aligned column (was React's justified 2x2), large type, even steps */
@media (max-width: 767px) {
  .mmh .styles_menu__9VCB2 .styles_menuContent__dUEtc { display: flex !important; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; }
  .mmh .styles_menu__9VCB2 .styles_menuContent__dUEtc .styles_heading_108__nfWJE { font-size: clamp(44px, 13vw, 56px) !important; line-height: 1.08 !important; }
}

/* LET'S CONNECT modal on sand-themed pages (7 Nov 2026): header-v1.js swaps the header palette on .mmh over sand sections
   (as React does on its <header>), but here the modal portal sits inside .mmh, so the close button inherited
   --peach-cream = black (black circle, black X). The modal keeps React's dark palette on every theme. */
.mmh #mm-connect { --peach-cream: rgb(255,243,226); --bg-nav: rgb(5,5,5); --line-c-almost-black: rgba(255,255,255,0.08); --dark-grey: rgb(78,78,78); --c-activeNav: rgb(254,233,206); }

/* /work/ filter pills above 600px (7 Nov 2026): the one-row wrapper (.wk-filter-row) had no gap, so the pills touched.
   display: contents puts the pills back in .wk-filter's own flex row (gap 10px, wrap), exactly the pre-wrapper layout. */
@media (min-width: 601px) { .wk-js .wk-filter-row { display: contents; } }

/* massamedia info footer (6 Nov 2026): every page ends with the React quote section, a hairline, then this.
   Self-contained (no lp-v3 dependency) so the React pages can load it too. Ease = React "woow". */
.mm-info-foot { --if-sand: #fee9ce; --if-soft: rgba(250, 235, 215, .5); --if-line: rgba(254, 233, 206, .12); --if-coral: #ef5143; --if-orange: #ffad5f;
  background: #0a0a0a; color: var(--if-soft); border-top: 1px solid var(--if-line); font: 500 15px/1.55 avantt, "avantt Fallback", system-ui, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.mm-info-foot * { box-sizing: border-box; }
.mm-info-foot .mif-wrap { max-width: 1180px; margin: 0 auto; padding: clamp(40px, 5vw, 64px) clamp(16px, 4vw, 40px) clamp(28px, 4vw, 44px); }
.mm-info-foot .mif-cols { display: grid; gap: 28px 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: clamp(28px, 4vw, 40px); border-bottom: 1px solid var(--if-line); }
.mm-info-foot .mif-cols p { margin: 0 0 12px; color: var(--if-orange); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.mm-info-foot .mif-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mm-info-foot .mif-cols a { position: relative; color: var(--if-sand); text-decoration: none; font-size: 15px; }
.mm-info-foot .mif-cols a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .735s cubic-bezier(.215, .61, .355, 1); }
.mm-info-foot .mif-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px 48px; padding-top: clamp(28px, 4vw, 40px); }
.mm-info-foot .mif-logo { display: inline-block; margin-bottom: 12px; color: var(--if-sand); }
.mm-info-foot .mif-wm { display: block; width: 109.4px; height: 36px; background-color: currentColor; -webkit-mask: url(/svg/massamedia.svg) center / contain no-repeat; mask: url(/svg/massamedia.svg) center / contain no-repeat; }
.mm-info-foot .mif-brand p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--if-soft); }
.mm-info-foot .mif-addr { color: var(--if-soft); text-decoration: none; transition: color .6s cubic-bezier(.215, .61, .355, 1); }
.mm-info-foot .mif-contact { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 10px 32px; align-self: flex-end; position: relative; top: 3px; } /* text baseline = the address line (measured) */
.mm-info-foot .mif-contact a { position: relative; display: inline-block; text-decoration: none; transition: color .3s; }
.mm-info-foot .mif-contact a::before { content: ""; position: absolute; left: 0; width: 100%; background: currentColor; transform-origin: left; }
@keyframes mif-ul { 0% { transform: scaleX(1); transform-origin: right; } 50% { transform: scaleX(0); transform-origin: right; } 50.01% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }
/* option B (default): cream, the React "Work / Contact / Privacy" type (600 16px), thin coral underline, wipe on hover */
.mm-info-foot .mif-opt-b a { color: var(--if-sand); font: 600 16px/1.2 avantt, "avantt Fallback", Arial, sans-serif; padding-bottom: 6px; }
.mm-info-foot .mif-opt-b a::before { bottom: 0; height: 1px; background: var(--if-coral); }
.mm-info-foot .mif-opt-b .mif-arr { display: none; }
/* option A: coral, the React address link type (700, 130%, 2px coral underline), arrow on "Send an enquiry" */
.mm-info-foot .mif-opt-a a { color: var(--if-coral); font: 700 18px/1.3 avantt, "avantt Fallback", Arial, sans-serif; padding-bottom: 6px; }
.mm-info-foot .mif-opt-a a::before { bottom: 0; height: 2px; }
@media (hover: hover) and (pointer: fine) {
  .mm-info-foot .mif-contact a:hover::before { animation: mif-ul .735s cubic-bezier(.215, .61, .355, 1); }
  .mm-info-foot .mif-opt-b a:hover { color: #fff3e2; }
}
/* dividers run full-bleed (the rail sits on top at the left), content stays in the wrap */
.mm-info-foot { overflow-x: clip; }
.mm-info-foot .mif-cols { border-bottom: 0; position: relative; }
.mm-info-foot .mif-bar, .mm-info-foot .mif-legal { position: relative; border-top: 0; }
.mm-info-foot .mif-bar::before, .mm-info-foot .mif-legal::before { content: ""; position: absolute; top: 0; left: 50%; width: 100vw; height: 1px; margin-left: -50vw; background: var(--if-line); }
.mm-info-foot .mif-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 28px; padding-top: 18px; font-size: 13px; color: var(--if-soft); }
.mm-info-foot .mif-legal a { color: var(--if-soft); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .mm-info-foot .mif-cols a:hover { color: var(--if-orange); } .mm-info-foot .mif-cols a:hover::after { transform: scaleX(1); transform-origin: left; }
  .mm-info-foot .mif-addr:hover, .mm-info-foot .mif-legal a:hover { color: var(--if-sand); }
}
.mm-info-foot a:focus-visible { outline: 2px solid var(--if-orange); outline-offset: 3px; }
@media (max-width: 900px) { .mm-info-foot .mif-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mm-info-foot .mif-cols { grid-template-columns: 1fr; } .mm-info-foot .mif-bar { flex-direction: column; align-items: flex-start; } .mm-info-foot .mif-contact { flex-direction: column; align-items: flex-start; justify-content: flex-start; margin-left: 0; gap: 14px; padding-top: 0; } }
@media (prefers-reduced-motion: reduce) { .mm-info-foot *, .mm-info-foot *::before, .mm-info-foot *::after { transition: none !important; animation: none !important; } }
/* React pages: beside the 7.2rem sidebar like the rest of the page */
@media (min-width: 1200px) { .mm-info-foot.mif-react { padding-left: var(--header-width, 0px); } }

/* footer on phones / small tablets (6 Nov 2026): one left-aligned column; the links stack under the address with the
   same gap as the other footer bands, each a full-width 44px tap target */
@media (max-width: 768px) {
  .mm-info-foot .mif-bar { flex-direction: column; align-items: flex-start; gap: 24px; }
  .mm-info-foot .mif-contact { margin: 0; align-self: auto; justify-content: flex-start; top: 0; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; }
  .mm-info-foot .mif-contact li { width: 100%; }
  .mm-info-foot .mif-contact a { display: flex; align-items: center; min-height: 44px; padding: 0; width: fit-content; }
  .mm-info-foot .mif-contact a::before { bottom: 8px; }
}

/* site fixes (6 Nov 2026, follow-ups to the motion batch). Concatenated into lp-v4.css by _build/build_lp.py. */

/* item 4 / 6.3: sticky "START A PROJECT" never clips. It is position: fixed, so its containing block is the viewport
   (100%, excluding a classic scrollbar), never 100vw: pin it with right: 0 / left: auto, size it to its content and never
   let the label or arrow shrink inside it (the label wrap is overflow: hidden, so a squeezed flex item would cut the text). */
@media (min-width: 768px) {
  .mmh .mm-sticky { left: auto; right: 0; width: max-content; max-width: 100%; box-sizing: border-box; }
}
.mmh .mm-sticky-wrap, .mmh .mm-sticky-arr { flex: none; }

/* item 6.1: /work/ case titles fit the text column at every desktop width. The text column is a size container; the
   title is capped at 10.6% of its width. The longest unbreakable run is "OF CHOREOGRAPHY" (joined by a no-break space,
   8.81 em), so it stays about 6% short of the column edge, plus the column gap, and never runs under the screenshot.
   One rule, so all 8 titles stay the same size. */
@media (min-width: 960px) {
  .pj .pj-text { container-type: inline-size; }
  .pj .pj-text h2 { font-size: min(clamp(38px, 5vw, 80px), 10.6cqi); }
}

/* logofix 7 Nov 2026: the script logo is a plain solid wordmark in the header colour by default (iOS/WebKit rendered the
   backdrop-filter tint magenta). The colour-flip effect (black over cream) runs only on Blink desktop, where it was verified. */
.mmh .mm-wm, .mmh .styles_header__I7JDT .mm-wm { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: currentColor; }
@supports (-webkit-app-region: drag) and (backdrop-filter: invert(1)) {
  @media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .mmh .mm-wm { background-color: transparent; -webkit-backdrop-filter: grayscale(1) brightness(.625) contrast(40) invert(1) sepia(1) hue-rotate(-64.2deg) saturate(9.149); backdrop-filter: grayscale(1) brightness(.625) contrast(40) invert(1) sepia(1) hue-rotate(-64.2deg) saturate(9.149); }
    .mmh .styles_header__I7JDT .mm-wm { background-color: transparent; -webkit-backdrop-filter: grayscale(1) brightness(.625) contrast(40) invert(1) sepia(1) hue-rotate(-65deg) saturate(17.24) brightness(.993); backdrop-filter: grayscale(1) brightness(.625) contrast(40) invert(1) sepia(1) hue-rotate(-65deg) saturate(17.24) brightness(.993); }
  }
}

/* nav 7 Nov 2026 (static copy of _build/nav_2026-11-07.css, generated by _build/nav_2026-11-07.py; do not hand-edit) */
.mmh .styles_menu__9VCB2 { background-color: var(--almost-black, #0a0a0a); }
.mmh .styles_menu__9VCB2 .styles_menuVideo__hgSQ4 { display: none; }
.mmh .styles_menu__9VCB2 > .layout-grid { display: block !important; width: 100%; margin: 0 !important; padding: 0 0 0 16.9vw !important; }
.mmh .styles_menu__9VCB2 .styles_menuContent__dUEtc { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: center !important; gap: 0 !important; width: auto; grid-column: auto !important; }
.mmh .styles_menu__9VCB2 .styles_menuContent__dUEtc > * { justify-self: auto !important; }
.mmh .styles_menu__9VCB2 .styles_menuContent_link__SA0mv { display: flex !important; flex-direction: row !important; align-items: baseline !important; gap: 0 !important; overflow: visible !important; }
.mmh .styles_menu__9VCB2 { --mm-mfs: min(calc(var(--mmr)*10.8), 11.2vh); }
.mmh .styles_menu__9VCB2 .styles_menuContent__dUEtc .styles_heading_108__nfWJE { font-size: var(--mm-mfs) !important; line-height: 1.1 !important; clip-path: inset(-.4em -.4em 0 -.4em); }
.mmh .styles_menu__9VCB2 .styles_underlineAlt__gWwv_::before { bottom: calc(var(--mm-mfs) * .128); }
.mmh .mm-menu-num { flex: 0 0 auto; display: inline-block; width: 4.1vw; margin-left: -4.1vw; font-size: calc(var(--mmr)*1.8); line-height: 1; font-weight: 700; letter-spacing: .02em; color: var(--warm-sand, #fee9ce); clip-path: inset(-.4em -.4em 0 -.4em); }
.mmh .styles_menu__9VCB2 > .layout-grid { padding-left: 16.9vw !important; }
@media (max-width: 1199px) {
.mmh .styles_menu__9VCB2 { --mm-mfs: min(calc(var(--mmr)*7.6), 9.4vh); }
.mmh .styles_menu__9VCB2 > .layout-grid { padding-left: calc(var(--layout-margin) + calc(var(--mmr)*6.4)) !important; }
.mmh .mm-menu-num { width: calc(var(--mmr)*6.4); margin-left: calc(var(--mmr)*-6.4); font-size: calc(var(--mmr)*1.6); }

}
@media (max-width: 767px) {
.mmh .styles_menu__9VCB2 { --mm-mfs: min(clamp(44px, 13vw, 56px), 8.6vh); }
.mmh .styles_menu__9VCB2 > .layout-grid { padding-left: calc(var(--layout-margin) + calc(var(--mmr)*4.4)) !important; }
.mmh .mm-menu-num { width: calc(var(--mmr)*4.4); margin-left: calc(var(--mmr)*-4.4); font-size: calc(var(--mmr)*1.4); }

}
.mmh .styles_burger__5IS8Z .styles_burger__line__I2Z8_ { height: 1px; }
.mmh .styles_burger__5IS8Z .styles_burger__line__I2Z8_.styles_burger__line_top__o3Xi0 { width: calc(var(--mmr)*3.55); top: calc(50% - calc(var(--mmr)*.6) - .5px); top: round(calc(50% - calc(var(--mmr)*.6) - .5px), 1px); }
.mmh .styles_burger__5IS8Z .styles_burger__line__I2Z8_.styles_burger__line_bottom__5dD4i { width: calc(var(--mmr)*2.55); top: calc(50% + calc(var(--mmr)*.6) - .5px); top: round(calc(50% + calc(var(--mmr)*.6) - .5px), 1px); }
.mmh .styles_burger__5IS8Z.styles_menuOpen__yZ1VI .styles_burger__line__I2Z8_.styles_burger__line_top__o3Xi0, .mmh .styles_burger__5IS8Z.styles_menuOpen__yZ1VI .styles_burger__line__I2Z8_.styles_burger__line_bottom__5dD4i { top: calc(50% - .5px); top: round(calc(50% - .5px), 1px); width: calc(var(--mmr)*3.55) !important; }
.mmh .styles_burger__5IS8Z { --mm-bl: calc(var(--mmr)*3.55); }
.mmh .styles_burger__5IS8Z.styles_menuOpen__yZ1VI .styles_burger__line__I2Z8_.styles_burger__line_top__o3Xi0 { transform: translateX(calc(var(--mm-bl) * -.146)) rotate(-45deg); }
.mmh .styles_burger__5IS8Z.styles_menuOpen__yZ1VI .styles_burger__line__I2Z8_.styles_burger__line_bottom__5dD4i { transform: translateX(calc(var(--mm-bl) * -.146)) rotate(45deg); }
@media (min-width: 1200px) {
.mmh .styles_burger__5IS8Z .styles_burger__line__I2Z8_ { left: calc(var(--mmr)*-.55); }
 }
@media (max-width: 1199px) {
.mmh .styles_burger__5IS8Z { --mm-bl: calc(var(--mmr)*3.4); }
.mmh .styles_burger__5IS8Z .styles_burger__line__I2Z8_.styles_burger__line_top__o3Xi0 { width: calc(var(--mmr)*3.4); top: calc(50% - calc(var(--mmr)*.575) - .5px); top: round(calc(50% - calc(var(--mmr)*.575) - .5px), 1px); }
.mmh .styles_burger__5IS8Z .styles_burger__line__I2Z8_.styles_burger__line_bottom__5dD4i { width: calc(var(--mmr)*2.45); top: calc(50% + calc(var(--mmr)*.575) - .5px); top: round(calc(50% + calc(var(--mmr)*.575) - .5px), 1px); }
.mmh .styles_burger__5IS8Z.styles_menuOpen__yZ1VI .styles_burger__line__I2Z8_.styles_burger__line_top__o3Xi0, .mmh .styles_burger__5IS8Z.styles_menuOpen__yZ1VI .styles_burger__line__I2Z8_.styles_burger__line_bottom__5dD4i { width: calc(var(--mmr)*3.4) !important; }

}
@media (max-width: 767px) {
.mmh .styles_burger__5IS8Z { --mm-bl: calc(var(--mmr)*2.3); }
.mmh .styles_burger__5IS8Z .styles_burger__line__I2Z8_.styles_burger__line_top__o3Xi0 { width: calc(var(--mmr)*2.3); top: calc(50% - calc(var(--mmr)*.425) - .5px); top: round(calc(50% - calc(var(--mmr)*.425) - .5px), 1px); }
.mmh .styles_burger__5IS8Z .styles_burger__line__I2Z8_.styles_burger__line_bottom__5dD4i { width: calc(var(--mmr)*1.65); top: calc(50% + calc(var(--mmr)*.425) - .5px); top: round(calc(50% + calc(var(--mmr)*.425) - .5px), 1px); }
.mmh .styles_burger__5IS8Z.styles_menuOpen__yZ1VI .styles_burger__line__I2Z8_.styles_burger__line_top__o3Xi0, .mmh .styles_burger__5IS8Z.styles_menuOpen__yZ1VI .styles_burger__line__I2Z8_.styles_burger__line_bottom__5dD4i { width: calc(var(--mmr)*2.3) !important; }

}
.mmh .styles_socialModalItem__5Fxtf span.styles_lottie__HLs8N { display: block; color: var(--warm-sand, #fee9ce); }
.mmh .styles_socialModalItem__5Fxtf .styles_lottie__HLs8N svg { display: block; width: 100%; height: 100%; }
@media (hover: hover) and (pointer: fine) {
.mmh .styles_socialModalItem__5Fxtf:nth-child(2):hover .styles_lottie__HLs8N { transform: translateY(-2px); }
.mmh .styles_socialModalItem__5Fxtf:nth-child(3):hover .styles_lottie__HLs8N { transform: rotate(-12deg); }
.mmh .styles_socialModalItem__5Fxtf:nth-child(4):hover .styles_lottie__HLs8N { transform: scale(1.08); }

}

.mmh .mm-pm-head { display: flex; flex-direction: column; gap: calc(var(--mmr)*1.6); }
.mmh .mm-pm-sub { margin: 0; font-size: max(12px, calc(var(--mmr)*1.6)); font-weight: 700; line-height: 1.35; text-transform: uppercase; letter-spacing: .02em; color: var(--almost-black, #0a0a0a); opacity: 0; transform: translateY(.8em); transition: opacity .5s var(--primary-ease), transform .6s var(--primary-ease); }
.mmh .styles_active__fUNi6 .mm-pm-sub { opacity: .78; transform: none; transition-delay: .25s; }
@media (prefers-reduced-motion: reduce) {
.mmh .mm-pm-sub { transition: none; }
 }
@media (max-width: 767px) {
.mmh .mm-pm-head { gap: 6px; }
.mmh .mm-pm-sub { font-size: 12px; letter-spacing: .03em; }
 }

.mmh .styles_socialModalItem__5Fxtf .styles_lottie__HLs8N { color: var(--warm-sand, #fee9ce); }

/* patterns v1 (7 Nov 2026, Danny's refs 06/07/12/13-16): sub-page process strip, "Three ways in", numbered help list,
   /guides/ index. Generated pages only (_build/lp_patterns.py). Part of lp-v6.css. */

/* A. process strip (ref 06) */
.mm-proc h2.mm-proc-k { font-size: 14px; color: var(--orange); letter-spacing: .08em; margin: 0 0 14px; }
.mm-proc-big { margin: 0 0 clamp(36px, 5vw, 72px); font-weight: 800; text-transform: uppercase; font-size: clamp(38px, 6.4vw, 104px); line-height: .95; letter-spacing: -.01em; color: var(--sand); }
.mm-proc-big .c { color: var(--red); }
.mm-proc ol.mm-proc-steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 20px; counter-reset: none; }
.mm-proc ol.mm-proc-steps > li { background: none; border: 0; border-radius: 0; padding: 0; counter-increment: none; }
.mm-proc ol.mm-proc-steps > li::before { content: none; }
.mm-proc-img { margin: 0 0 clamp(24px, 3vw, 48px); aspect-ratio: 4 / 3; overflow: hidden; background: var(--panel); }
.mm-proc-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(1) contrast(1.05); transition: filter .6s cubic-bezier(.215, .61, .355, 1), transform .6s cubic-bezier(.215, .61, .355, 1); }
.mm-proc-img a { display: block; width: 100%; height: 100%; }
.mm-proc-img.is-work img { object-position: left top; filter: grayscale(1) contrast(1.12) brightness(.9); }
/* greyscale -> colour: hover on fine pointers, scroll-in on touch (inline script adds .is-colour) */
@media (hover: hover) and (pointer: fine) { .mm-proc-img:hover img { filter: grayscale(0) contrast(1); transform: scale(1.02); } }
.mm-proc-img.is-colour img { filter: grayscale(0) contrast(1); }
.mm-proc-img a:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .mm-proc-img img { transition: none; } }
.mm-proc-t { border-top: 1px solid var(--line); padding-top: 22px; }
.mm-proc-n { margin: 0 0 12px; color: var(--orange); font-weight: 700; font-size: 15px; }
.mm-proc-t h3 { font-size: clamp(22px, 2vw, 32px); line-height: 1.1; margin: 0 0 10px; }
.mm-proc-t p:last-child { margin: 0; color: var(--grey); max-width: 34ch; }
@media (max-width: 1000px) { .mm-proc ol.mm-proc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } }
@media (max-width: 560px) { .mm-proc ol.mm-proc-steps { grid-template-columns: 1fr; row-gap: 32px; } .mm-proc-img { aspect-ratio: 16 / 10; } }

/* B. Three ways in (ref 07) */
.mm-ways-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card.mm-way { display: flex; flex-direction: column; border-radius: 0; border: 0; background: #1a1a1a; padding: clamp(24px, 2.6vw, 40px); min-height: 440px; }
.mm-way-k { margin: 0 0 22px !important; color: var(--orange) !important; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.mm-way h3 { font-size: clamp(24px, 2.2vw, 36px); line-height: 1.1; margin: 0 0 12px; }
.mm-way-p { margin: 0 0 24px !important; font-weight: 700; color: var(--sand) !important; }
.mm-way ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mm-way li { position: relative; padding-left: 20px; color: var(--grey); }
.mm-way li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.mm-way-go { margin-top: auto; padding-top: 32px; align-self: flex-start; color: var(--orange); font-weight: 700; font-size: clamp(17px, 1.4vw, 22px); text-decoration: none; }
.mm-way-go span { border-bottom: 2px solid currentColor; padding-bottom: 3px; }
.mm-way.cream { background: var(--sand); }
.mm-way.cream .mm-way-k, .mm-way.cream .mm-way-p { color: #0a0a0a !important; }
.mm-way.cream h3, .mm-way.cream .mm-way-go { color: var(--red); }
.mm-way.cream li { color: #3a3a3a; }
.mm-way.cream li::before { background: var(--red); }
@media (hover: hover) and (pointer: fine) { .mm-way-go:hover span { border-bottom-color: transparent; } }
.mm-way-go:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (max-width: 1000px) { .mm-ways-grid { grid-template-columns: 1fr; } .card.mm-way { min-height: 0; } }

/* G. numbered help list (ref 12) */
.mm-help.ticks { display: grid; grid-template-columns: 1fr; gap: 6px; }
.mm-help.ticks li { padding: 0; color: inherit; }
.mm-help.ticks li::before { content: none; }
.mm-help a { display: inline-flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); color: var(--orange); text-decoration: none; font-weight: 800; font-size: clamp(28px, 3.6vw, 58px); line-height: 1.12; letter-spacing: -.01em; }
.mm-help-n { flex: none; display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--orange); color: #0a0a0a; font-size: .38em; font-weight: 800; letter-spacing: 0; transform: translateY(.04em); }
.mm-help-a { font-size: .5em; opacity: 0; transform: translate(-6px, 4px); transition: opacity .35s, transform .5s cubic-bezier(.215, .61, .355, 1); }
@media (hover: hover) and (pointer: fine) { .mm-help a:hover { color: var(--sand); } .mm-help a:hover .mm-help-a { opacity: 1; transform: none; } .mm-help a:hover .mm-help-n { background: var(--sand); } }
.mm-help a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.mm-help a { transition: color .35s; }
.mm-help-n { transition: background-color .35s; }
@media (max-width: 560px) { .mm-help a { font-size: clamp(24px, 7.4vw, 30px); } .mm-help-a { display: none; } }

/* H. /guides/ index (refs 13-16) */
.mm-guides .card.mm-guide { background: none; border: 0; border-radius: 0; padding: 0; }
.mm-guide.feat { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; }
.mm-guides-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: clamp(56px, 6vw, 96px); }
.mm-guide-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--panel); }
.mm-guides-2 .mm-guide-img { margin-bottom: 20px; }
.mm-guide-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(1); transition: transform .6s cubic-bezier(.215, .61, .355, 1); }
@media (hover: hover) and (pointer: fine) { .mm-guide:hover .mm-guide-img img { transform: scale(1.03); } }
.mm-guide-meta { margin: 0 0 10px !important; color: var(--grey); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.mm-guides h2.mm-guide-h { text-transform: none; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.1; margin: 0 0 12px; }
.mm-guide.feat h2.mm-guide-h { font-size: clamp(28px, 3.2vw, 52px); }
.mm-guide-h a { color: var(--sand); text-decoration: none; }
.mm-guide-t > p:not(.mm-guide-meta) { color: var(--grey); margin: 0; max-width: 52ch; }
.mm-guide-go { display: inline-block; margin-top: 16px; color: var(--red); font-weight: 700; text-decoration: none; }
@media (max-width: 800px) { .mm-guide.feat, .mm-guides-2 { grid-template-columns: 1fr; } .mm-guide.feat .mm-guide-img { margin-bottom: 20px; } }

/* contact details block (every enquiry sidebar incl. /contact/): Home's "Let's have a chat" pattern - tan square + tan
   uppercase caption label, big cream value with the coral underline (header-site-v1.css); label->value 8px, blocks 32px */
.contact-list.cl-v2 { display: grid; gap: 28px; margin-top: 32px; }
.cl-v2 li { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.contact-list.cl-v2 .cl-k { display: flex; align-items: center; gap: calc(var(--mmr) * 1); margin: 0; color: #ffb261; font-size: max(13px, calc(var(--mmr) * 2)); font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: normal; }
.cl-v2 .cl-k i { flex: none; width: max(4px, calc(var(--mmr) * .6)); height: max(4px, calc(var(--mmr) * .6)); background: #ffb261; }
/* value size: the longest value (the studio address) stays on one line in the sidebar column at 1024-1920 */
.contact-list.cl-v2 a { font-size: clamp(18px, 1.55vw, 26px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
@media (min-width: 1024px) { .contact-list.cl-v2 a { white-space: nowrap; } }
@media (max-width: 767px) { .contact-list.cl-v2 a { font-size: min(22px, 6vw); } }

/* sub-page hero (ref 11): the page's own H1 split into a cream half and a coral half, very large; an angled phone with a
   real project screen bleeds off the right over a faint grid. Phones (<600px) hide the device. */
.mm-hero2 { position: relative; overflow: hidden; }
.mm-hero2 .wrap { position: relative; z-index: 1; }
.mm-hero2 h1 { color: var(--sand); font-size: clamp(40px, 6.3vw, 112px); line-height: .9; }
.mm-hero2 h1 .h1a { color: var(--sand); }
.mm-hero2 h1 .h1b { display: block; color: var(--red); }
.mm-hero2 h1 .mm-lp.h1a { color: var(--sand); }
.mm-hero2 h1 .mm-lp.h1b { color: var(--red); }
.mm-dev { position: relative; pointer-events: none; aspect-ratio: 1 / 1; }
.mm-dev-grid { position: absolute; inset: -10%; transform: perspective(1400px) rotateX(38deg) rotateZ(-30deg);
  background-image: linear-gradient(rgba(254, 233, 206, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(254, 233, 206, .09) 1px, transparent 1px);
  background-size: 26px 26px; -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent); mask-image: radial-gradient(closest-side, #000 35%, transparent); }
.mm-dev-phone { position: absolute; left: 28%; top: 2%; width: 44%; aspect-ratio: 1 / 2; overflow: hidden; border: 7px solid #1d1d1d; border-radius: 34px / 30px; background: #000;
  transform: perspective(1400px) rotateX(38deg) rotateZ(-30deg); box-shadow: 0 40px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(254, 233, 206, .12); }
.mm-dev-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* desktop: two columns - text (aligned with the page's content edge) and the phone, centred on the headline. The H1 is
   sized by width AND height so eyebrow + H1 fit the first screen (about 4 lines at 1280x720 ... 2000x1100). */
@media (min-width: 1000px) {
  .mm-hero2 .wrap { max-width: none; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) min(26vw, 480px); column-gap: clamp(24px, 2.4vw, 56px); justify-items: start; align-items: start;
    padding-left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); padding-right: max(var(--gutter), 2vw); }
  .mm-hero2 .wrap > * { grid-column: 1; }
  .mm-hero2 .wrap > h1 { max-width: none; font-size: clamp(44px, min(4.4vw, 7.4vh), 100px); line-height: .92; }
  .mm-hero2 .wrap > .lead { max-width: 44ch; }
  .mm-hero2 .wrap > .mm-dev { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 100%; }
}
@media (min-width: 600px) and (max-width: 999px) { .mm-dev { width: min(60vw, 380px); margin: 8px 0 -40px auto; } }
@media (max-width: 599px) { .mm-dev { display: none; } }

/* project screenshots (7 Nov 2026): no frame colour behind the rounded desktop/wide shots. The old dark (--ink) background
   showed through the antialiased rounded edge as a dark outline on the sand /work/ theme; transparent lets the edge blend
   into whatever is behind (sand or black). No border or shadow on them; the phone keeps its black bezel (intended). */
.pj-shot, .pj-wide { background: transparent !important; box-shadow: none !important; }
.pj-shot { border: 0 !important; display: block; }
.case img { background: transparent; }

/* case pairs (7 Nov 2026): the phone sits bottom-right and hangs ~12% of its own height below the shot (it used to hang
   up to 40px, ~15%, and looked unanchored); its box is reserved by width + aspect-ratio so nothing reflows on load */
.pj-pair .pj-phone { bottom: -9%; }

/* phones (7 Nov 2026, Danny: "fit better on mobile", 360-400 wide) */
@media (max-width: 600px) {
  /* Three ways in: ~30% shorter cards */
  .mm-ways-grid { gap: 12px; }
  .card.mm-way { padding: 24px; }
  .mm-way-k { margin-bottom: 14px !important; }
  .mm-way h3 { font-size: clamp(24px, 7.2vw, 28px); margin-bottom: 8px; }
  .mm-way-p { font-size: 18px; margin-bottom: 16px !important; }
  .mm-way ul { gap: 6px; }
  .mm-way li { font-size: 16px; line-height: 1.4; }
  .mm-way-go { padding-top: 20px; font-size: 18px; }
  /* Ways we can help: every item on one line at 360+ */
  .mm-help.ticks { gap: 6px; }
  .mm-help a { font-size: clamp(18px, 5.5vw, 26px); line-height: 1.15; text-wrap: balance; align-items: center; }
  /* sub-page hero: eyebrow on two clean lines, H1 sized so the longest word fits inside a 20px gutter */
  .mm-hero2 .eyebrow { font-size: 12px; letter-spacing: .03em; line-height: 1.5; text-wrap: balance; }
  .mm-hero2 h1 { font-size: min(10.4vw, 42px); line-height: .95; overflow-wrap: normal; }
}

/* short poster H1s (/websites/ family): bigger type, max ~2 lines per colour beside the phone; the phone column is kept
   clear of the viewport edge so the whole phone shows */
@media (min-width: 1000px) {
  .mm-hero2.mm-h1-short .wrap > h1 { font-size: clamp(56px, min(6.6vw, 11.5vh), 150px); line-height: .9; }
  .mm-hero2 .wrap { padding-right: max(var(--gutter), 3vw); }
  .mm-hero2 .wrap > .mm-dev { max-width: 480px; justify-self: center; }
  .mm-dev-phone { left: 30%; top: 4%; width: 40%; }
}
@media (max-width: 600px) { .mm-hero2.mm-h1-short h1 { font-size: min(12.4vw, 50px); } }

/* hero device pair (7 Nov 2026, Danny): an isometric desktop browser + phone of a real project over the faint grid floor.
   One 3D stage (perspective, rotateX 52deg, rotateZ -30deg); the phone stands 40px above the plane in front of the
   desktop's lower-right corner. Entrance once images decode: desktop rises in, phone 150ms later (.9s woow); slow
   scroll parallax (--py) and a +-2deg pointer tilt (--tx/--tz, fine pointers). Reduced motion: static. */
.mm-hero2 .mm-dev { position: relative; aspect-ratio: 1 / 1; translate: 0 var(--py, 0px); }
.mm-hero2 .mm-dev-stage { position: absolute; inset: 0; transform-style: preserve-3d;
  transform: perspective(1800px) rotateX(calc(52deg + var(--tx, 0deg))) rotateZ(calc(-30deg + var(--tz, 0deg)));
  transition: transform .8s cubic-bezier(.215, .61, .355, 1); }
.mm-hero2 .mm-dev-grid { position: absolute; inset: -18%; transform: none; }
.mm-hero2 .mm-dev-desk { position: absolute; left: 4%; top: 12%; width: 80%; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #111;
  border: 6px solid #1d1d1d; box-shadow: 0 0 0 1px rgba(254, 233, 206, .14), 30px 40px 60px rgba(0, 0, 0, .55); }
.mm-hero2 .mm-dev-desk img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.mm-hero2 .mm-dev-phone { position: absolute; left: 66%; top: 46%; width: 22%; aspect-ratio: 1 / 2; overflow: hidden; border: 5px solid #1d1d1d; border-radius: 22px; background: #000;
  transform: translateZ(40px); box-shadow: 0 0 0 1px rgba(254, 233, 206, .14), 24px 34px 50px rgba(0, 0, 0, .6); }
.mm-hero2 .mm-dev-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mm-hero2 .mm-dev.pre .mm-dev-desk { opacity: 0; translate: 0 34px; }
.mm-hero2 .mm-dev.pre .mm-dev-phone { opacity: 0; translate: 0 34px; }
.mm-hero2 .mm-dev.pre.is-in .mm-dev-desk, .mm-hero2 .mm-dev.pre.is-in .mm-dev-phone { opacity: 1; translate: 0 0;
  transition: opacity .9s cubic-bezier(.215, .61, .355, 1), translate .9s cubic-bezier(.215, .61, .355, 1); }
.mm-hero2 .mm-dev.pre.is-in .mm-dev-phone { transition-delay: .15s; }
@media (min-width: 1000px) { .mm-hero2 .wrap > .mm-dev { max-width: 520px; width: 100%; } .mm-hero2 .wrap { grid-template-columns: minmax(0, 1fr) min(32vw, 520px); } }
@media (prefers-reduced-motion: reduce) { .mm-hero2 .mm-dev-stage { transition: none; } .mm-hero2 .mm-dev { translate: none; } }

/* info footer v2 columns (static pages): Design + Guides share a column; phones keep a 2-column grid */
.mm-info-foot .mif-cols.mif-v2 p.mif-sub { margin-top: 28px; }
@media (max-width: 560px) { .mm-info-foot .mif-cols.mif-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; } .mm-info-foot .mif-cols.mif-v2 a { font-size: 14px; } }

/* pricing cards tidy-up (7 Nov 2026, Danny, phones): balanced headings, bullets centred on the first text line, one
   spacing scale inside the card, the arrow inside the underline, the page gutter outside */
.mm-way h3 { text-wrap: balance; }
.mm-way li::before { top: calc(.7em - 3.5px); }
@media (max-width: 600px) {
  .mm-ways .wrap { padding-left: max(16px, var(--gutter)); padding-right: max(16px, var(--gutter)); }
  .mm-ways-grid { gap: 20px; }
  .card.mm-way { padding: 24px; }
  .mm-way-k { margin: 0 0 12px !important; }
  .mm-way h3 { margin: 0 0 12px; }
  .mm-way-p { margin: 0 0 16px !important; }
  .mm-way ul { gap: 8px; }
  .mm-way-go { padding-top: 24px; }
  .mm-guide-t h2, .mm-proc-t h3 { text-wrap: balance; }
}

/* hero device, front-on (Danny, 7 Nov 2026: "face forward, not on an angle"): a flat browser frame with the project's
   full-res desktop screenshot, the phone overlapping its lower-right corner, soft shadows only, no 3D. Faint flat grid. */
.mm-hero2 .mm-dev { aspect-ratio: 5 / 4; }
.mm-hero2 .mm-dev-stage { transform: none !important; transition: none; }
.mm-hero2 .mm-dev-grid { inset: -6% -10%; -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent); mask-image: radial-gradient(closest-side, #000 25%, transparent); opacity: .6; }
.mm-hero2 .mm-dev-desk { left: 0; top: 8%; width: 88%; aspect-ratio: auto; border: 0; border-radius: 12px; background: #1b1b1b; padding: 0; box-shadow: 0 0 0 1px rgba(254, 233, 206, .12), 0 30px 60px rgba(0, 0, 0, .5); }
.mm-hero2 .mm-dev-bar { display: flex; gap: 6px; align-items: center; height: 26px; padding: 0 12px; background: #1b1b1b; border-bottom: 1px solid rgba(254, 233, 206, .08); }
.mm-hero2 .mm-dev-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(254, 233, 206, .22); }
.mm-hero2 .mm-dev-desk img { aspect-ratio: 16 / 10; height: auto; border-radius: 0 0 12px 12px; image-rendering: auto; }
.mm-hero2 .mm-dev-phone { left: auto; right: 0; top: auto; bottom: 0; width: 25%; transform: none; border: 5px solid #1b1b1b; border-radius: 20px; box-shadow: 0 0 0 1px rgba(254, 233, 206, .12), 0 24px 48px rgba(0, 0, 0, .6); }
.mm-hero2 .mm-dev.pre .mm-dev-desk, .mm-hero2 .mm-dev.pre .mm-dev-phone { translate: 0 20px; }
@media (min-width: 1000px) { .mm-hero2 .wrap > .mm-dev { max-width: 500px; } }

/* sub-page hero actions (7 Nov 2026): one spacing scale, matched buttons, the price as a quiet note under them */
.mm-hero2 h1 { margin-bottom: 28px; }
.mm-hero2 .lead { max-width: 42ch; margin: 0 0 32px; }
.mm-hero2 .btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.mm-hero2 .btns .btn { min-height: 54px; padding: 0 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.mm-hero2 .mm-hero-note { margin: 28px 0 0; max-width: 42ch; color: rgba(255, 243, 226, .62); font-size: 15px; line-height: 1.5; font-weight: 500; letter-spacing: .005em; }
.mm-hero2 .mm-hero-note::before { content: ""; display: inline-block; vertical-align: middle; width: 22px; height: 1px; margin: -2px 12px 0 0; background: currentColor; opacity: .5; }
.mm-hero2 .mm-hero-note strong { color: var(--orange); font-weight: 700; }
@media (max-width: 600px) { .mm-hero2 .mm-hero-note .mm-hn-sep { display: none; } .mm-hero2 .mm-hero-note .mm-hn2 { display: block; padding-left: 34px; } .mm-hero2 .mm-hero-note .mm-hn2::first-letter { text-transform: uppercase; } }
@media (min-width: 1000px) { .mm-hero2 .wrap > .lead { max-width: 42ch; } }
@media (max-width: 600px) { .mm-hero2 .btns .btn { flex: 1 1 100%; } }

/* poster H1 (ref 11, Danny 7 Nov 2026): heaviest weight, tight tracking, compact leading, deliberate balanced breaks.
   The H1 is an inline-size container; each line is sized from the longest line (--ch characters) so lines fill it. */
.mm-hero2.mm-h1-short h1 { container-type: inline-size; font-weight: 800; letter-spacing: -.035em; }
.mm-hero2.mm-h1-short h1 .h1a, .mm-hero2.mm-h1-short h1 .h1b { display: block; font-size: min(calc(100cqi / (var(--ch) * .58)), 13.5vh, 170px); line-height: .88; }
.mm-hero2.mm-h1-short h1 .mm-lp { font-size: min(calc(100cqi / (var(--ch) * .58)), 13.5vh, 170px); line-height: .88; display: block; }
.mm-hero2 .lead { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; max-width: 40ch; }
@media (min-width: 1000px) {
  .mm-hero2 .wrap { grid-template-columns: minmax(0, 1fr) min(28vw, 460px); }
  .mm-hero2 .eyebrow { font-size: 13px; margin-bottom: 26px; }
}
@media (max-width: 600px) { .mm-hero2.mm-h1-short h1 .h1a, .mm-hero2.mm-h1-short h1 .h1b, .mm-hero2.mm-h1-short h1 .mm-lp { font-size: min(calc(100cqi / (var(--ch) * .66)), 15vw); } }
.mm-hero2.mm-h1-short .wrap > h1 { justify-self: stretch; width: 100%; }

/* editorial card grids on sub-pages (Danny, 7 Nov 2026): no boxes; hairline rules between cells, small orange index,
   bigger titles, one short muted line; a short accent rule draws in on hover */
.grid.mm-ed { gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.grid.mm-ed .card { position: relative; background: none; border: 0; border-radius: 0; padding: clamp(24px, 2.6vw, 40px) clamp(20px, 2.2vw, 32px) clamp(28px, 3vw, 44px); border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.grid.mm-ed .card:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
.grid.mm-ed .mm-ed-n { margin: 0 0 18px; color: var(--orange); font-weight: 700; font-size: 13px; letter-spacing: .08em; transition: color .4s; }
.grid.mm-ed h3 { font-size: clamp(22px, 2vw, 30px); line-height: 1.1; letter-spacing: -.01em; margin: 0 0 10px; transition: color .4s; text-wrap: balance; }
.grid.mm-ed .card p:last-child { color: var(--grey); max-width: 32ch; }
.grid.mm-ed .card::before { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.215, .61, .355, 1); }
.grid.mm-ed .card:nth-child(3n + 2)::before, .grid.mm-ed .card:nth-child(3n)::before { left: clamp(20px, 2.2vw, 32px); }
@media (hover: hover) and (pointer: fine) { .grid.mm-ed .card:hover::before { transform: scaleX(1); } .grid.mm-ed .card:hover h3 { color: var(--orange); } }
@media (prefers-reduced-motion: reduce) { .grid.mm-ed .card::before, .grid.mm-ed h3 { transition: none; } }
section .wrap > .intro { text-wrap: balance; }
@media (max-width: 999px) and (min-width: 601px) {
  .grid.mm-ed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.mm-ed .card:nth-child(3n + 1) { border-left: 1px solid var(--line); padding-left: clamp(20px, 2.2vw, 32px); }
  .grid.mm-ed .card:nth-child(odd) { border-left: 0; padding-left: 0; }
  .grid.mm-ed .card::before { left: 0 !important; }
}
@media (max-width: 600px) {
  .grid.mm-ed { grid-template-columns: 1fr; }
  .grid.mm-ed .card { border-left: 0; padding: 22px 0 24px; }
  .grid.mm-ed .card::before { left: 0 !important; }
  .grid.mm-ed .mm-ed-n { margin-bottom: 10px; }
}
.grid.mm-ed .card p:last-child { text-wrap: pretty; max-width: 34ch; }

/* paragraph reveal (motion-v2 'up' kind, 7 Nov 2026): only added by JS when motion is on; opacity + transform only */
.mm-up { opacity: 0; transform: translateY(14px); }
.mm-up.mm-go { opacity: 1; transform: none; transition: opacity .6s var(--mm-ease, cubic-bezier(.215, .61, .355, 1)), transform .6s var(--mm-ease, cubic-bezier(.215, .61, .355, 1)); }
@media print { .mm-up { opacity: 1 !important; transform: none !important; } }
/* long (non-poster) sub-page H1s: one continuous size curve across the 1000px layout switch (was 60 -> 44px) */
.mm-hero2:not(.mm-h1-short) h1 { font-size: clamp(40px, calc(5vw + 10px), 112px); }
@media (min-width: 1000px) { .mm-hero2:not(.mm-h1-short) .wrap > h1 { font-size: clamp(44px, min(calc(4.4vw + 14px), 7.4vh), 100px); } }
@media (max-width: 600px) { .mm-hero2:not(.mm-h1-short) h1 { font-size: min(10.4vw, 42px); } }

/* Let's Connect lower links (7 Nov 2026; React mm-site-v2638 + static lp-v8): "Start a project" / "calendly.com" fade in
   after the four rows (same .865s ease, 80ms steps), then the underline draws left -> right (scaleX). Hover (fine pointers):
   the line leaves to the right while a second line draws in from the left. Transform/opacity only. The old GSAP xPercent
   spans are hidden (they showed a stub mid-slide). Reduced motion: static. */
.styles_contactModule_contact__URBMS .styles_textUnderline_line__CGk_L { display: none !important; }
.styles_contactModule_contact__URBMS .styles_textUnderline__V2vlH { position: relative; overflow: hidden; }
.styles_contactModule_contact__URBMS .styles_textUnderline__V2vlH::before,
.styles_contactModule_contact__URBMS .styles_textUnderline__V2vlH::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; pointer-events: none; }
.styles_contactModule_contact__URBMS .styles_textUnderline__V2vlH::after { transform-origin: right; transition: transform .25s cubic-bezier(.215, .61, .355, 1); }
.styles_contactModule_contact__URBMS .styles_textUnderline__V2vlH::before { transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.215, .61, .355, 1); }
@keyframes mm-ci-in { from { opacity: 0; } }
@keyframes mm-ul-in { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
.styles_contactModuleGrid__dD4ts.styles_isOpen__2Eyk8 .styles_contactModule_contact__URBMS .styles_connectItem__cVmWM { animation: mm-ci-in .865s cubic-bezier(.215, .61, .355, 1) 1.02s backwards; }
.styles_contactModuleGrid__dD4ts.styles_isOpen__2Eyk8 .styles_contactModule_contact__URBMS .styles_connectItem__cVmWM + .styles_connectItem__cVmWM { animation-delay: 1.1s; }
.styles_contactModuleGrid__dD4ts.styles_isOpen__2Eyk8 .styles_contactModule_contact__URBMS .styles_textUnderline__V2vlH::after { animation: mm-ul-in .4s cubic-bezier(.215, .61, .355, 1) 1.3s backwards; }
.styles_contactModuleGrid__dD4ts.styles_isOpen__2Eyk8 .styles_contactModule_contact__URBMS .styles_connectItem__cVmWM + .styles_connectItem__cVmWM .styles_textUnderline__V2vlH::after { animation-delay: 1.38s; }
@media (hover: hover) and (pointer: fine) {
  .styles_contactModule_contact__URBMS .styles_connectItem__cVmWM:hover .styles_textUnderline__V2vlH::after { transform: scaleX(0); }
  .styles_contactModule_contact__URBMS .styles_connectItem__cVmWM:hover .styles_textUnderline__V2vlH::before { transform: scaleX(1); transition-delay: .12s; }
}
.styles_contactModule_contact__URBMS .styles_connectItem__cVmWM:focus-visible .styles_textUnderline__V2vlH::after { transform: scaleX(0); }
.styles_contactModule_contact__URBMS .styles_connectItem__cVmWM:focus-visible .styles_textUnderline__V2vlH::before { transform: scaleX(1); transition-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
  .styles_contactModule_contact__URBMS .styles_connectItem__cVmWM,
  .styles_contactModule_contact__URBMS .styles_textUnderline__V2vlH::before,
  .styles_contactModule_contact__URBMS .styles_textUnderline__V2vlH::after { animation: none !important; transition: none !important; }
}

/* Menu rollover (7 Nov 2026, Danny's nav-about refs): nothing shows at rest; on hover / keyboard focus
   a line grows from the numeral to the end of the word (scaleX from the left, .3s ease-out) and shrinks back on leave. */
.mmh .styles_menu__9VCB2 { --mm-numw: 4.1vw; }
@media (max-width: 1199px) { .mmh .styles_menu__9VCB2 { --mm-numw: calc(var(--mmr) * 6.4); } }
@media (max-width: 767px) { .mmh .styles_menu__9VCB2 { --mm-numw: calc(var(--mmr) * 4.4); } }
.mmh .styles_menu__9VCB2 .styles_underlineAlt__gWwv_::before { left: calc(-1 * var(--mm-numw)); width: calc(100% + var(--mm-numw)); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.215, .61, .355, 1); }
.mmh .styles_menu__9VCB2 .styles_underlineAlt__gWwv_:hover::before { transform: scaleX(0); transform-origin: left; }
@media (hover: hover) and (pointer: fine) { .mmh .styles_menu__9VCB2 .styles_underlineAlt__gWwv_:hover::before { transform: scaleX(1); } }
.mmh .styles_menu__9VCB2 .styles_underlineAlt__gWwv_:focus-within::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .mmh .styles_menu__9VCB2 .styles_underlineAlt__gWwv_::before { transition: none; } }

/* "Three ways in" offer cards (7 Nov 2026, Danny's card refs): hover lifts the card 4px, a 1px solid frame in the CTA colour (tan; coral on cream; none at rest) and a
   soft shadow fade up, the CTA underline redraws (scaleX out right, back in from the left) and the arrow nudges up-right.
   Transform/opacity only, mouse only; reduced motion: static. */
.card.mm-way { position: relative; isolation: isolate; transition: transform .25s cubic-bezier(.215, .61, .355, 1); }
.card.mm-way::before, .card.mm-way::after { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity .25s cubic-bezier(.215, .61, .355, 1); }
.card.mm-way::before { border: 1px solid var(--orange); opacity: 0; }
.card.mm-way.cream::before { border-color: var(--red); }
.card.mm-way::after { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7); opacity: 0; z-index: -1; }
.mm-way-go span { position: relative; display: inline-block; border-bottom: 0 !important; }
.mm-way-go span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform-origin: left; }
/* whole card clickable (stretched link: the CTA's ::after covers the card; one link per card, no JS) */
.card.mm-way { cursor: pointer; }
.mm-way-go { position: static; }
.mm-way-go::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mm-way-ar { display: inline-block; font-style: normal; transition: transform .25s cubic-bezier(.215, .61, .355, 1); }
@keyframes mm-way-redraw { 0% { transform: scaleX(1); transform-origin: right; } 45% { transform: scaleX(0); transform-origin: right; } 45.01% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }
@media (hover: hover) and (pointer: fine) {
  .card.mm-way:hover { transform: translateY(-4px); }
  .card.mm-way:hover::before { opacity: 1; }
  .card.mm-way:hover::after { opacity: 1; }
  .card.mm-way:hover .mm-way-go span::after { animation: mm-way-redraw .45s cubic-bezier(.215, .61, .355, 1); }
  .card.mm-way:hover .mm-way-ar { transform: translate(2px, -2px); }
  .mm-way-go:hover span { border-bottom-color: transparent; }
}
.mm-way-go:focus-visible .mm-way-ar { transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) {
  .card.mm-way, .card.mm-way::before, .card.mm-way::after, .mm-way-ar { transition: none !important; }
  .card.mm-way:hover { transform: none !important; }
  .mm-way-go span::after { animation: none !important; }
  .mm-way-ar { transform: none !important; }
}

/* fix list 8 Nov 2026 (HQ FIX-LIST items 1 + 3)
   1: process step numbers 01-04 in coral. `.steps p { color: var(--grey) }` (0,1,1) was beating `.mm-proc-n` (0,1,0),
      so the numbers showed grey; this selector is (0,2,0).
   3: guide "What drives the price?" cards use the sub-page editorial grid (.grid.mm-ed, patterns-v1.css): square,
      hairline rules, orange 01-06 index, orange line + heading on hover only. lp_patterns.editorial now runs on /guides/<slug>/. */
.mm-proc-t .mm-proc-n { color: var(--red); }

/* 2 (Danny picked C, 8 Nov 2026): "Signs you need..." list marker = 8px coral square (like the "BEGIN HERE" marker),
   replacing the ringed target dot from lp-v3 (.ticks li::before). Centred on the first line of text:
   (1lh - 8px) / 2, with an em fallback (17px / 26.35px line-height = 1.55em). .mm-help.ticks keeps content: none. */
.ticks li { padding-left: 26px; }
.ticks li::before { width: 8px; height: 8px; border: 0; border-radius: 0; box-shadow: none; background: var(--red); top: calc(.775em - 4px); top: calc(.5lh - 4px); }

/* square buttons (8 Nov 2026, brand radius 0): the static .btn family was a 999px pill (START A PROJECT, BOOK A 20-MIN CALL,
   SEND ENQUIRY, /work/ wk-btn + wk-btn-ghost) and the old .nav-cta. React buttons were already square.
   Kept round on purpose: .chips li + /work/ filter pills (chips), media/screenshots, round icon buttons (modal close X). */
.btn, .nav .nav-cta { border-radius: 0; }

/* guidecards v1 (8 Nov 2026, Danny picked B + C from _build/_preview-2026-11-08-guidecards): the guide card grids
   (/guides/<slug>/ only) replace the faint editorial grid (.grid.mm-ed) with one of two treatments, set per section
   in lp_patterns.GUIDE_CARDS:
   C .gv-c editorial list (number | heading + text, full-width hairlines, larger type) for explanatory lists
     ("What drives the price?" on both cost guides);
   B .gv-b framed cards ("Three ways in" surface, 1px orange frame + 4px lift on hover) for short, punchy items
     ("Red flags").
   Square, no shadows. Hover = transform/opacity only, mouse only; reduced motion: static. Hover rules skip .mm-rise
   so they never fight motion-v2's scroll reveal. Part of lp-v11.css. */

:root { --gv-ease: cubic-bezier(.215, .61, .355, 1); --gv-rule: rgba(254, 233, 206, .22); }

/* shared reset: drop the base .card panel (lp-v3: grey box, 18px radius) */
.grid.gv { gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.gv .card { position: relative; background: none; border: 0; border-radius: 0; padding: 0; }
.grid.gv .card p { margin: 0; }
.grid.gv h3 { text-wrap: balance; }
.grid.gv .card p:last-child { text-wrap: pretty; }

/* ---------- B. framed cards ---------- */
.grid.gv-b { gap: 20px; margin-top: clamp(28px, 3vw, 44px); }
/* each card spans 3 subgrid rows (number / heading / text) so headings and text line up across a row */
.grid.gv-b .card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start;
  background: #1a1a1a; padding: clamp(28px, 2.8vw, 44px) clamp(24px, 2.6vw, 40px) clamp(32px, 3.2vw, 48px); isolation: isolate; }
.grid.gv-b .card::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--orange); opacity: 0; pointer-events: none; }
.grid.gv-b .card .mm-ed-n { color: var(--orange); font-weight: 800; font-size: clamp(36px, 3.2vw, 52px); line-height: .8; letter-spacing: -.03em; margin: 0 0 clamp(32px, 3.4vw, 52px); }
.grid.gv-b h3 { align-self: end; margin: 0 0 12px; color: var(--sand); font-weight: 800; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.05; letter-spacing: -.015em; }
.grid.gv-b .card p:last-child { color: var(--grey); font-size: 17px; line-height: 1.5; max-width: 34ch; }

/* ---------- C. editorial list ---------- */
.grid.gv-c { display: block; margin-top: clamp(28px, 3vw, 48px); border-bottom: 1px solid var(--gv-rule); }
.grid.gv-c .card { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); column-gap: var(--gutter); align-items: start; padding: clamp(28px, 3vw, 44px) 0; border-top: 1px solid var(--gv-rule); }
.grid.gv-c .card::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: left; }
.grid.gv-c .card .mm-ed-n { grid-row: 1 / span 2; color: var(--orange); font-weight: 800; font-size: clamp(40px, 4.4vw, 72px); line-height: .82; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.grid.gv-c h3 { grid-column: 2; color: var(--sand); font-weight: 800; font-size: clamp(28px, 3.2vw, 50px); line-height: 1; letter-spacing: -.02em; margin: 0 0 14px; }
.grid.gv-c .card p:last-child { grid-column: 2; color: var(--cream); opacity: .78; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; max-width: 56ch; }

/* ---------- hover (mouse only; transform + opacity only) ---------- */
.grid.gv-c .card:not(.mm-rise)::before { transition: transform .6s var(--gv-ease); }
.grid.gv-c .card:not(.mm-rise) .mm-ed-n { transition: transform .5s var(--gv-ease); }
.grid.gv-b .card:not(.mm-rise) { transition: transform .3s var(--gv-ease); }
.grid.gv-b .card::before { transition: opacity .3s var(--gv-ease); }
@media (hover: hover) and (pointer: fine) {
  .grid.gv-c .card:not(.mm-rise):hover::before { transform: scaleX(1); }
  .grid.gv-c .card:not(.mm-rise):hover .mm-ed-n { transform: translateX(8px); }
  .grid.gv-b .card:not(.mm-rise):hover { transform: translateY(-4px); }
  .grid.gv-b .card:not(.mm-rise):hover::before { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .grid.gv .card, .grid.gv .card::before, .grid.gv .mm-ed-n { transition: none !important; }
  .grid.gv .card:hover, .grid.gv .card:hover .mm-ed-n { transform: none !important; }
}

/* ---------- tablet ---------- */
@media (max-width: 999px) and (min-width: 601px) {
  .grid.gv-b { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- phones ---------- */
@media (max-width: 600px) {
  .grid.gv-b { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .grid.gv-b .card { padding: 24px 24px 28px; }
  .grid.gv-b .card .mm-ed-n { font-size: 36px; margin-bottom: 28px; }
  .grid.gv-b h3 { font-size: 24px; margin-bottom: 8px; }
  .grid.gv-b .card p:last-child { font-size: 16px; }

  .grid.gv-c { margin-top: 24px; }
  .grid.gv-c .card { grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; padding: 24px 0; }
  .grid.gv-c .card .mm-ed-n { font-size: 30px; line-height: .9; }
  .grid.gv-c h3 { font-size: 24px; line-height: 1.05; margin-bottom: 8px; }
  .grid.gv-c .card p:last-child { font-size: 16px; }
}

/* ---------- B + warning ("Red flags", 8 Nov 2026, Danny: should read as "watch out") ----------
   Same framed card, in coral: a solid 4px coral top band, a "RED FLAG 01" label and coral headings
   (4.6:1 on #1a1a1a, AA). Hover: the frame goes solid coral and the card lifts 4px. No orange here. */
.grid.gv-flag .card { border-top: 4px solid var(--red); }
.grid.gv-flag .card::before { inset: -4px 0 0; border-color: var(--red); }
.grid.gv-flag .card .mm-ed-n { color: var(--red); font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 clamp(40px, 4.2vw, 64px); }
.grid.gv-flag .card .mm-ed-n::before { content: "Red flag "; }
.grid.gv-flag h3 { color: var(--red); }
.grid.gv-flag .card p:last-child { color: var(--cream); opacity: .8; }
@media (max-width: 600px) {
  .grid.gv-flag .card .mm-ed-n { margin-bottom: 32px; }
}

/* Static footer (9 Nov 2026): Studio column lists the main pages minus the current one (build_lp.info_footer);
   Privacy is a small, quiet underlined link beside the copyright. 44px tap rows on phones, same look. */
.mm-info-foot .mif-legal { align-items: baseline; }
.mm-info-foot .mif-legal .mif-priv { color: var(--if-soft); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(250, 235, 215, .3); transition: color .3s, text-decoration-color .3s; }
.mm-info-foot .mif-legal .mif-priv:hover, .mm-info-foot .mif-legal .mif-priv:focus-visible { color: var(--if-sand); text-decoration-color: currentColor; }
@media (max-width: 767px) {
  /* each link sits in its own 44px row (no overlapping hit areas) */
  .mm-info-foot .mif-cols ul { gap: 0; }
  .mm-info-foot .mif-cols li { display: flex; align-items: center; min-height: 44px; }
  .mm-info-foot .mif-cols p { margin-bottom: 4px; }
  .mm-info-foot .mif-legal { align-items: center; }
  .mm-info-foot .mif-legal .mif-priv { display: inline-flex; align-items: center; min-height: 44px; }
}