/** * MR21 — front-end styles. * * Palette custom properties (--mr-ink, --mr-gold …) are printed inline from the * customiser, so the values below are fallbacks only. * * Motion note: nothing is hidden by default. Entrance animations are opt-in via * the .anim class on , which is only added when the visitor has NOT asked * for reduced motion. Content therefore renders with JS off, with reduced motion * on, or if an animation fails. */ :root { --mr-ink: #07090a; --mr-teal: #0c242c; --mr-panel: #0e1214; --mr-gold: #f6e4d2; --mr-bronze: #9c6f45; --mr-off: #f5efe6; --mr-white: #fff; --mr-body: rgba(245, 239, 230, .64); --mr-line: rgba(255, 255, 255, .12); --mr-pad: clamp(20px, 4.4vw, 64px); --mr-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --mr-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --mr-ease: cubic-bezier(.16, .84, .3, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: 90px; } body { margin: 0; background: var(--mr-ink); color: var(--mr-off); font-family: var(--mr-sans); font-weight: 300; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } .mr21-skip { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 14px 22px; background: var(--mr-gold); color: #141414; font-weight: 600; } .mr21-skip:focus { left: 0; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; } /* ── type ─────────────────────────────────────────────────────────── */ .mr21-h, .mr21-main h1, .mr21-main h2, .mr21-main h3 { font-family: var(--mr-serif); font-weight: 400; color: var(--mr-white); line-height: 1.02; letter-spacing: -.018em; margin: 0; } .mr21-h--xl { font-size: clamp(2.6rem, 6.6vw, 5.6rem); } .mr21-h--lg { font-size: clamp(2.1rem, 4.8vw, 4.2rem); } .mr21-h--md { font-size: clamp(1.8rem, 3.4vw, 3rem); } .mr21-h--sm { font-size: clamp(1.35rem, 2.1vw, 1.85rem); line-height: 1.1; } .mr21-h--xs { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.14; } .mr21-tag { display: inline-block; font-family: var(--mr-sans); font-weight: 600; font-size: clamp(9.5px, .85vw, 11px); letter-spacing: .26em; text-transform: uppercase; color: var(--mr-gold); } .mr21-micro { font-family: var(--mr-sans); font-weight: 600; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .4); } .mr21-micro--flag { color: var(--mr-bronze); } .mr21-dim { color: var(--mr-body); font-size: clamp(.95rem, 1.05vw, 1.05rem); margin: 0 0 1em; } .mr21-dim:last-child { margin-bottom: 0; } /* ── buttons ──────────────────────────────────────────────────────── */ .mr21-btn { display: inline-block; font-family: var(--mr-sans); font-weight: 600; font-size: clamp(11px, 1.05vw, 12.5px); letter-spacing: .18em; text-transform: uppercase; padding: 18px 38px; background: var(--mr-gold); color: #141414; border: 0; cursor: pointer; transition: background .25s, transform .25s; } .mr21-btn:hover, .mr21-btn:focus-visible { background: var(--mr-white); transform: translateY(-2px); } .mr21-btn--out { background: transparent; color: var(--mr-white); border: 1.5px solid rgba(255, 255, 255, .3); } .mr21-btn--out:hover, .mr21-btn--out:focus-visible { background: var(--mr-white); color: #141414; border-color: var(--mr-white); } .mr21-btn--sm { padding: 13px 24px; font-size: 10.5px; letter-spacing: .16em; } .mr21-go { font-family: var(--mr-sans); font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--mr-gold); display: inline-flex; align-items: center; gap: 10px; transition: gap .3s; } .mr21-go i { display: block; width: 22px; height: 1.5px; background: currentColor; } .mr21-go:hover { gap: 20px; } .mr21-go--sm { font-size: 10px; } :focus-visible { outline: 2px solid var(--mr-gold); outline-offset: 3px; } /* ── preview bar ──────────────────────────────────────────────────── */ .mr21-staging { position: relative; z-index: 90; background: var(--mr-gold); color: #141414; font-family: var(--mr-sans); font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; padding: 8px var(--mr-pad); } /* ── header ───────────────────────────────────────────────────────── */ .mr21-nav { position: fixed; top: var(--mr-bar, 0); left: 0; right: 0; z-index: 80; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px var(--mr-pad); transition: top .3s, background .35s, padding .35s; } .mr21-nav.is-stuck { top: 0; padding: 10px var(--mr-pad); border-bottom: 1px solid var(--mr-line); } /* * The frosted bar is painted by a pseudo-element rather than by the header * itself, and that is load-bearing: backdrop-filter makes an element the * containing block for ANY position:fixed descendant. With the filter on the * header, the full-screen mobile menu nested inside it stopped resolving * inset:0 against the viewport and collapsed to the header's own ~68px strip — * so once the page was scrolled the menu opened as a bare list of links over * the content with no background behind it. On the pseudo-element the effect is * identical and the menu is a sibling, not a descendant, so it is unaffected. */ .mr21-nav.is-stuck::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(7, 9, 10, .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .mr21-lockup { display: flex; align-items: center; gap: 14px; } .mr21-mark { width: 64px; height: 64px; flex: none; transition: width .35s, height .35s; } /* When the mark is an uploaded image rather than the built-in SVG, the boxes above are fixed squares — contain keeps a non-square upload from stretching, and clears the width/height attributes WordPress prints on the img. */ img.mr21-mark--custom { object-fit: contain; max-width: 100%; } /* The stacked lockup is taller than it is wide. The square boxes above are for the compact mark; the lockup takes its height from its own proportions, or it gets letterboxed inside a square and renders smaller than asked for. */ img.mr21-mark--lockup { aspect-ratio: auto; height: auto; } .mr21-nav.is-stuck .mr21-mark { width: 48px; height: 48px; } .mr21-lockup__text { display: block; line-height: 1.15; } .mr21-lockup__word { font-family: var(--mr-serif); font-weight: 500; font-size: 23px; letter-spacing: .06em; color: var(--mr-white); display: block; transition: font-size .35s; } .mr21-nav.is-stuck .mr21-lockup__word { font-size: 19px; } .mr21-lockup__strap { font-family: var(--mr-sans); font-weight: 600; font-size: 8.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--mr-gold); opacity: .8; } .mr21-nav__list { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; } .mr21-nav__list a { font-family: var(--mr-sans); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .74); transition: color .25s; } .mr21-nav__list a:hover, .mr21-nav__list .current-menu-item > a { color: var(--mr-gold); } /* The last primary item renders as the gold button. */ .mr21-nav__list > li:last-child > a, .mr21-nav__list .mr21-cta-item > a { background: var(--mr-gold); color: #141414; padding: 12px 20px; transition: background .25s, transform .25s; } .mr21-nav__list > li:last-child > a:hover { background: var(--mr-white); transform: translateY(-1px); color: #141414; } .mr21-burger { display: none; background: none; border: 0; color: var(--mr-white); padding: 8px; cursor: pointer; } .mr21-burger span[aria-hidden] { display: block; width: 24px; height: 2px; background: currentColor; margin: 5px 0; transition: transform .3s, opacity .3s; } .mr21-burger[aria-expanded="true"] span[aria-hidden]:first-child { transform: translateY(3.5px) rotate(45deg); } .mr21-burger[aria-expanded="true"] span[aria-hidden]:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); } /* ── shared media placeholder ─────────────────────────────────────── */ .mr21-shot { position: relative; overflow: hidden; contain: paint; background: var(--mr-panel); } .mr21-shot > img { width: 100%; height: 100%; object-fit: cover; } .mr21-shot__bg { position: absolute; inset: 0; background: radial-gradient(75% 65% at 32% 28%, rgba(156, 111, 69, .30), transparent 62%), radial-gradient(60% 55% at 74% 78%, rgba(12, 36, 44, .85), transparent 66%), linear-gradient(200deg, #16323b 0%, #0b1417 60%, #07090a 100%); } .anim .mr21-shot__bg { animation: mr21-drift 30s ease-in-out infinite alternate; } @keyframes mr21-drift { from { transform: scale(1.06) translate(-1.5%, -1%); } to { transform: scale(1.15) translate(1.5%, 1.5%); } } .mr21-shot__grain { position: absolute; inset: 0; opacity: .16; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); } .mr21-shot__tag { position: absolute; top: 0; right: 0; z-index: 3; padding: 9px 12px; max-width: 74%; text-align: right; line-height: 1.7; background: rgba(7, 9, 10, .64); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-left: 2px solid var(--mr-bronze); font-family: var(--mr-sans); font-weight: 500; font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: rgba(255, 255, 255, .62); } .mr21-shot__brief { position: absolute; left: 0; bottom: 0; z-index: 3; padding: 16px 18px; max-width: min(420px, 86%); border-top: 2px solid var(--mr-gold); background: rgba(7, 9, 10, .74); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .mr21-shot__brief b { display: block; font-family: var(--mr-sans); font-weight: 600; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--mr-gold); margin-bottom: 5px; } .mr21-shot__brief span { font-size: 12px; line-height: 1.55; color: rgba(255, 255, 255, .62); } /* ── hero ─────────────────────────────────────────────────────────── */ /* Deliberately short of a full screen. At 100svh the fold landed exactly on the hero's bottom edge, so the page looked like it ended there. Leaving roughly a sixth of the viewport lets the top of the Positioning section — its rule and the 01 — POSITIONING label — sit above the fold and pull the reader down. */ .mr21-hero { position: relative; min-height: 82svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; /* Padding scales with viewport height, not just width. On a 768px-tall laptop the fixed 150/90 padding alone was taller than the gap we are trying to open up, so the next section stayed below the fold however short min-height was set. */ padding: clamp(96px, 13svh, 132px) var(--mr-pad) clamp(44px, 7svh, 64px); overflow: hidden; } .mr21-hero__media { position: absolute; inset: 0; z-index: 0; } .mr21-hero__media video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.18) brightness(.44); } .mr21-hero__veil { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(7, 9, 10, var(--mr-hero-veil, .74)) 0%, rgba(7, 9, 10, .28) 30%, rgba(7, 9, 10, .72) 76%, var(--mr-ink) 100%), radial-gradient(64% 56% at 50% 46%, transparent, rgba(7, 9, 10, .68)); } .mr21-hero__inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; } .mr21-hero__mark { /* The editor sets the mark size; these are ceilings, not the size itself. On a short window the requested 340px alone eats the room the next section needs, and on a narrow one it would run past the edges. */ width: min(var(--mr-hero-mark, 340px), 38svh, 68vw); height: auto; aspect-ratio: 1; filter: drop-shadow(0 12px 44px rgba(0, 0, 0, .6)); } .anim .mr21-hero__mark { opacity: 0; animation: mr21-pop 1.3s .12s var(--mr-ease) forwards; } @keyframes mr21-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } } @keyframes mr21-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } .mr21-hero__lockup { margin-top: 18px; } .anim .mr21-hero__lockup { opacity: 0; animation: mr21-up 1.1s .5s var(--mr-ease) forwards; } .mr21-hero__word { font-family: var(--mr-serif); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: .16em; color: var(--mr-gold); line-height: 1; } .mr21-hero__rule { width: min(280px, 60vw); height: 1px; margin: 16px auto; background: linear-gradient(90deg, transparent, var(--mr-bronze), transparent); } .mr21-hero__strap { font-family: var(--mr-sans); font-weight: 600; font-size: clamp(9.5px, 1.05vw, 11.5px); letter-spacing: .42em; text-transform: uppercase; color: rgba(255, 255, 255, .72); } .mr21-hero__headline { margin-top: 26px; max-width: 18ch; } .anim .mr21-hero__headline { opacity: 0; animation: mr21-up 1.1s .58s var(--mr-ease) forwards; } .mr21-hero__act { margin-top: 42px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .anim .mr21-hero__act { opacity: 0; animation: mr21-up 1.1s .68s var(--mr-ease) forwards; } .mr21-hero__note { position: absolute; left: var(--mr-pad); right: var(--mr-pad); bottom: 20px; z-index: 3; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* ── marquee ──────────────────────────────────────────────────────── */ .mr21-marq { overflow: hidden; contain: paint; padding: 15px 0; } .mr21-marq--teal { background: var(--mr-teal); border-block: 1px solid var(--mr-line); } .mr21-marq--gold { background: var(--mr-gold); } .mr21-marq__track { display: flex; width: max-content; } .anim .mr21-marq__track { animation: mr21-slide var(--mr-marq-speed, 36s) linear infinite; } @keyframes mr21-slide { to { transform: translateX(-50%); } } .mr21-marq__track span { font-family: var(--mr-serif); font-weight: 400; font-size: clamp(1rem, 1.9vw, 1.6rem); letter-spacing: .03em; padding: 0 24px; white-space: nowrap; display: flex; align-items: center; gap: 24px; color: rgba(255, 255, 255, .3); } .mr21-marq__track span::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--mr-gold); opacity: .8; display: block; } .mr21-marq--gold .mr21-marq__track span { color: rgba(20, 20, 20, .78); } .mr21-marq--gold .mr21-marq__track span::after { background: #141414; } /* ── about ────────────────────────────────────────────────────────── */ /* The portrait fills its column edge to edge and takes its height from the copy beside it. The min-height below is only a floor for unusually short copy — the portrait never drives the section taller than the text needs. */ .mr21-about { display: grid; grid-template-columns: 47% 53%; align-items: stretch; } /* Grid items default to min-width:auto, so a long unbroken line can push a percentage track wider than its share and overflow the page. */ .mr21-about > *, .mr21-packages .mr21-blocks > *, .mr21-posts > *, .mr21-form__grid > * { min-width: 0; } .mr21-about--flip .mr21-about__shot { order: 2; } .mr21-about__shot { position: relative; margin: 0; width: 100%; min-height: clamp(400px, 48vh, 560px); } /* Absolutely positioned so the image never contributes intrinsic height — the row height comes from the copy column, and the portrait crops to fit. */ .mr21-about__shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .mr21-about__caption { position: absolute; left: 0; bottom: 0; z-index: 3; padding: 18px 20px; max-width: min(440px, 92%); border-top: 2px solid var(--mr-gold); background: rgba(7, 9, 10, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .mr21-about__caption b { display: block; font-family: var(--mr-sans); font-weight: 600; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--mr-gold); margin-bottom: 6px; } .mr21-about__caption span { font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .68); } .mr21-about__copy { padding: clamp(56px, 9vh, 120px) var(--mr-pad); } .mr21-about__eyebrow { display: block; margin-bottom: 20px; } .mr21-about__copy h2 { margin-bottom: 30px; } .mr21-about__lead { font-size: clamp(1.12rem, 1.5vw, 1.35rem); line-height: 1.6; color: var(--mr-off); margin: 0 0 22px; max-width: 46ch; } .mr21-about__copy p.mr21-dim { max-width: 52ch; } .mr21-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; } .mr21-chips span { font-family: var(--mr-sans); font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .7); border: 1px solid var(--mr-line); padding: 10px 15px; } /* ── section head ─────────────────────────────────────────────────── */ /* Eyebrow across the top, then heading | supporting line | button on one row. A grid rather than a flex row: the eyebrow gets its own full-width row, so the heading and the intro beside it start on a genuinely shared line instead of the intro being pushed down by a CSS guess at the eyebrow's height. The button is the one thing pinned to the bottom of the row. */ /* The head runs on the SAME three columns as the cards underneath it, with the same gap — so the supporting paragraph starts exactly where the middle card starts and the button ends exactly where the third card ends. Sizing the head independently was the real problem: the paragraph landed between column edges, belonging to neither, which is what read as out of place. Each section sets --mr-headgap to its own row's gap. */ .mr21-sechead { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--mr-headgap, clamp(18px, 2vw, 32px)); row-gap: 0; align-items: start; padding: 0 var(--mr-pad); margin-bottom: clamp(34px, 5vh, 58px); } .mr21-sechead__eyebrow { display: block; grid-column: 1 / -1; margin-bottom: 16px; } .mr21-sechead h2 { grid-column: 1; margin: 0; } .mr21-sechead__intro { grid-column: 2; max-width: 52ch; margin: 0; /* Optical only: 3rem Playfair sets its cap height a couple of pixels below the 16px body line's, so the two first lines look level rather than merely being level box-to-box. */ padding-top: 2px; } .mr21-sechead > .mr21-btn { grid-column: 3; align-self: end; justify-self: end; } /* Below this the intro gets squeezed into a narrow, very tall column and the button trails off the bottom of it, so everything goes full width instead. */ @media (max-width: 1320px) { .mr21-sechead { grid-template-columns: minmax(0, 1fr); row-gap: 22px; } .mr21-sechead__eyebrow { margin-bottom: 0; } .mr21-sechead h2, .mr21-sechead__intro, .mr21-sechead > .mr21-btn { grid-column: 1; } .mr21-sechead__intro { max-width: 62ch; padding-top: 0; } .mr21-sechead > .mr21-btn { align-self: start; justify-self: start; } } /* ── packages ─────────────────────────────────────────────────────── */ .mr21-packages { padding: clamp(70px, 11vh, 140px) 0 0; } /* The package row butts its cards together with a 2px seam, so the head above it uses the same seam and the copy lines up with card two. */ .mr21-packages { --mr-headgap: 2px; padding-bottom: clamp(18px, 3vh, 44px); } .mr21-packages .mr21-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 0 var(--mr-pad); align-items: stretch; } .mr21-pkg { position: relative; display: flex; flex-direction: column; justify-content: flex-start; min-height: clamp(520px, 70vh, 680px); overflow: hidden; isolation: isolate; } /* A fixed-ratio image area. Every card shares a column width, so every media box is the same height, so the unit label and title below it start on the same line in all three — whatever length the copy underneath runs to. aspect-ratio is used rather than a percentage margin because percentage margins are ignored when the browser works out the card's intrinsic height, which lets the content overflow the card. */ .mr21-pkg__media { position: relative; flex: none; aspect-ratio: 16 / 11; overflow: hidden; } .mr21-pkg__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Fade the image into the card ground so the join is invisible — but ONLY at the bottom. This used to run the full height at 35–50% black, which sat the package shots a stop and a half darker than the Insights thumbnails (those carry no overlay at all) and made the whole row look murky by comparison. Nothing is set over these images, so the top half needs no darkening. */ .mr21-pkg__media::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(0deg, var(--mr-ink) 0%, rgba(7, 9, 10, .86) 7%, rgba(7, 9, 10, .3) 22%, rgba(7, 9, 10, 0) 44%); } .mr21-pkg .mr21-shot__bg { transition: transform .9s var(--mr-ease); } .mr21-pkg:nth-child(2) .mr21-shot__bg { background: radial-gradient(70% 60% at 66% 30%, rgba(156, 111, 69, .26), transparent 62%), linear-gradient(160deg, #123039 0%, #0a1114 62%, #07090a 100%); } .mr21-pkg:nth-child(3) .mr21-shot__bg { background: radial-gradient(72% 62% at 40% 74%, rgba(156, 111, 69, .24), transparent 62%), linear-gradient(220deg, #0f2831 0%, #0a1114 58%, #07090a 100%); } .mr21-pkg { background: var(--mr-panel); } .mr21-pkg:hover .mr21-shot__bg { transform: scale(1.1); } .mr21-pkg:hover .mr21-pkg__media::after { background: linear-gradient(0deg, var(--mr-ink) 0%, rgba(12, 36, 44, .84) 7%, rgba(12, 36, 44, .28) 22%, rgba(12, 36, 44, 0) 44%); } .mr21-pkg__body { position: relative; z-index: 2; padding: clamp(24px, 2.4vw, 34px); display: flex; flex-direction: column; gap: 14px; flex: 1; } /* Whatever the card holds, the Enquire link sits on the bottom edge. */ .mr21-pkg__body > .mr21-go { margin-top: auto; } .mr21-pkg__unit { font-family: var(--mr-sans); font-weight: 600; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--mr-bronze); } .mr21-pkg__desc { margin: 0; font-size: .93rem; } .mr21-pkg__list { list-style: none; margin: 0; padding: 0; } .mr21-pkg__list li, .mr21-tier__list li { font-family: var(--mr-sans); font-weight: 400; font-size: 12px; line-height: 1.65; color: rgba(255, 255, 255, .62); padding: 6px 0 6px 22px; position: relative; } .mr21-pkg__list li::before, .mr21-tier__list li::before { content: ''; position: absolute; left: 0; top: 14px; width: 12px; height: 1px; background: var(--mr-bronze); } /* disclosures */ .mr21-disc { border-top: 1px solid var(--mr-line); } .mr21-disc[open] { padding-bottom: 4px; } .mr21-disc__summary, .mr21-tier__summary { display: flex; align-items: center; gap: 10px; padding: 13px 0; cursor: pointer; list-style: none; font-family: var(--mr-sans); font-weight: 600; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .72); transition: color .25s; } .mr21-disc__summary::-webkit-details-marker, .mr21-tier__summary::-webkit-details-marker { display: none; } .mr21-disc__summary:hover, .mr21-tier__summary:hover { color: var(--mr-gold); } .mr21-disc__icon { margin-left: auto; position: relative; width: 11px; height: 11px; flex: none; } .mr21-disc__icon::before, .mr21-disc__icon::after { content: ''; position: absolute; background: currentColor; transition: transform .3s var(--mr-ease), opacity .3s; } .mr21-disc__icon::before { left: 0; top: 5px; width: 11px; height: 1px; } .mr21-disc__icon::after { left: 5px; top: 0; width: 1px; height: 11px; } details[open] > summary .mr21-disc__icon::after { transform: rotate(90deg); opacity: 0; } .mr21-disc__panel { padding-bottom: 8px; } /* Tiers stack inside the card's one disclosure. */ .mr21-pkg__tiers { display: flex; flex-direction: column; gap: 18px; } .mr21-pkg__list + .mr21-pkg__tiers { margin-top: 18px; } .mr21-tier__summary { gap: 12px; padding: 0 0 8px; cursor: auto; margin: 0; } .mr21-tier__summary:hover { color: inherit; } .mr21-tier__name { font-family: var(--mr-serif); font-weight: 500; font-size: clamp(1.05rem, 1.5vw, 1.28rem); letter-spacing: -.01em; text-transform: none; } .mr21-tier--gold { border-left: 2px solid var(--mr-bronze); padding-left: 14px; } .mr21-tier--platinum { border-left: 2px solid var(--mr-gold); padding-left: 14px; } .mr21-tier--bronze { border-left: 2px solid rgba(156, 111, 69, .5); padding-left: 14px; } .mr21-tier--gold .mr21-tier__name { color: #e2be96; } .mr21-tier--platinum .mr21-tier__name { color: var(--mr-gold); } .mr21-tier__badge { font-family: var(--mr-sans); font-weight: 600; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .42); white-space: nowrap; } .mr21-tier__panel { padding-bottom: 10px; } .mr21-tier__desc { font-size: .86rem; color: var(--mr-body); line-height: 1.55; margin: 0 0 8px; } .mr21-tier__list { list-style: none; margin: 0 0 10px; padding: 0; } .mr21-tier__note { font-size: 11px; color: rgba(255, 255, 255, .4); line-height: 1.6; margin: 0 0 10px; } .mr21-packages__note { padding: 18px var(--mr-pad) 0; font-size: 11.5px; color: rgba(255, 255, 255, .38); line-height: 1.8; margin: 0; } /* The closing line and its button. This used to be a bare flex row hard against the cards above it: the line sat tight under the card seam with the button floating level, and the whole thing read as a leftover rather than a closing note. It now has a rule and real room above it, the copy is set at a size that matches its weight in the page, and the two are centred to each other. */ .mr21-packages__foot { margin: clamp(46px, 7vh, 86px) var(--mr-pad) 0; padding-top: clamp(30px, 4.5vh, 46px); border-top: 1px solid var(--mr-line); display: flex; gap: clamp(24px, 4vw, 60px); align-items: center; justify-content: space-between; flex-wrap: wrap; } .mr21-packages__foot .mr21-dim { max-width: 42ch; margin: 0; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.6; color: rgba(255, 255, 255, .78); } .mr21-packages__foot .mr21-btn { flex: none; } @media (max-width: 820px) { .mr21-packages__foot { flex-direction: column; align-items: flex-start; gap: 26px; } .mr21-packages__foot .mr21-dim { max-width: 60ch; } } /* ── testimonials ─────────────────────────────────────────────────── */ /* Quiet, wide, and deliberately unlike the card rows either side of it: one quote at a time, set large in the serif, on a slightly warmer ground. The restraint is the luxury — no avatars, no star ratings, no card chrome. */ .mr21-quotes { position: relative; padding: clamp(76px, 12vh, 150px) 0 clamp(60px, 9vh, 110px); overflow: hidden; background: linear-gradient(180deg, var(--mr-ink) 0%, #0a1417 42%, var(--mr-ink) 100%); border-top: 1px solid var(--mr-line); border-bottom: 1px solid var(--mr-line); } .mr21-quotes__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(58% 52% at 50% 34%, rgba(156, 111, 69, .16), transparent 68%); } .mr21-quotes > *:not(.mr21-quotes__glow) { position: relative; z-index: 1; } /* The head is centred here rather than running the three-column grid — with one quote centred beneath it, a left-aligned head reads off-axis. */ .mr21-quotes .mr21-sechead { display: block; text-align: center; max-width: 760px; margin-inline: auto; } .mr21-quotes .mr21-sechead h2 { max-width: 22ch; margin-inline: auto; } .mr21-quotes .mr21-sechead__intro { max-width: 56ch; margin-inline: auto; padding-top: 14px; } .mr21-quotes__stage { padding: 0 var(--mr-pad); } .mr21-quotes__track { display: flex; gap: clamp(24px, 4vw, 64px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; /* Hide the native bar: the arrows and dots are the affordance. Scrolling, dragging and flicking all still work. */ scrollbar-width: none; -ms-overflow-style: none; } .mr21-quotes__track::-webkit-scrollbar { display: none; } .mr21-quotes__track:focus-visible { outline: 1px solid var(--mr-gold); outline-offset: 6px; } /* The slide is exactly one track wide — no max-width here. Capping the slide itself made it narrower than the track, which both pulled the quote off the section's centre line and let the next quote bleed in at the right edge. The measure is set on the text inside instead. */ .mr21-quote { flex: 0 0 100%; width: 100%; scroll-snap-align: center; margin: 0; padding: 0; text-align: center; display: flex; flex-direction: column; align-items: center; } /* The quote sits on its own panel. Set straight onto the section ground it ran into the heading above it — same colour, same centring, nothing to say where one ended and the other began. A raised panel with a hairline and a soft gold edge-light separates them without turning it into a boxy review card. */ .mr21-quote__panel { width: 100%; max-width: 1000px; margin: 0 auto; /* Fill the slide so every panel is the same height whatever the length of the quote — otherwise paging between a two-line and a four-line quote makes the panel jump. */ flex: 1; justify-content: center; padding: clamp(38px, 5.5vh, 74px) clamp(26px, 5vw, 84px) clamp(34px, 5vh, 62px); display: flex; flex-direction: column; align-items: center; position: relative; background: radial-gradient(120% 130% at 50% 0%, rgba(156, 111, 69, .13), transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, .022) 46%, rgba(255, 255, 255, .01) 100%); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 24px 60px rgba(0, 0, 0, .34); } /* A gold hairline along the top edge only — the panel catches the light from the same direction as everything else on the page. */ .mr21-quote__panel::before { content: ''; position: absolute; inset: -1px 14% auto; height: 1px; background: linear-gradient(90deg, transparent, var(--mr-bronze), transparent); } .mr21-quote__mark { display: block; font-family: var(--mr-serif); font-size: clamp(64px, 8vw, 108px); line-height: .7; color: var(--mr-bronze); opacity: .55; margin-bottom: clamp(10px, 2vh, 22px); } .mr21-quote__body { margin: 0; max-width: 820px; } .mr21-quote__body p { font-family: var(--mr-serif); font-weight: 400; font-style: italic; font-size: clamp(1.28rem, 2.5vw, 2.05rem); line-height: 1.42; letter-spacing: -.012em; color: var(--mr-white); margin: 0; text-wrap: balance; } .mr21-quote__by { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-top: clamp(26px, 4vh, 44px); } .mr21-quote__rule { display: block; width: 56px; height: 1px; background: var(--mr-bronze); margin-bottom: 8px; } .mr21-quote__name { font-family: var(--mr-sans); font-weight: 600; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--mr-gold); } .mr21-quote__role { font-family: var(--mr-sans); font-weight: 400; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .45); } /* Unmistakably dummy copy, so a placeholder can never be mistaken for a real endorsement while the site is in review. */ .mr21-quote__flag { margin-top: 22px; font-family: var(--mr-sans); font-weight: 600; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .34); border: 1px dashed var(--mr-line); padding: 7px 13px; } .mr21-quotes__nav { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: clamp(30px, 5vh, 52px); padding: 0 var(--mr-pad); } .mr21-quotes__arrow { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--mr-line); color: var(--mr-gold); font-size: 15px; cursor: pointer; transition: border-color .25s, color .25s, opacity .25s; } .mr21-quotes__arrow:hover:not(:disabled) { border-color: var(--mr-gold); } .mr21-quotes__arrow:disabled { opacity: .28; cursor: default; } .mr21-quotes__dots { display: flex; align-items: center; gap: 10px; } .mr21-quotes__dot { width: 7px; height: 7px; padding: 0; border: 0; background: rgba(255, 255, 255, .26); cursor: pointer; transition: background .3s, transform .3s; } .mr21-quotes__dot.is-on { background: var(--mr-gold); transform: scale(1.35); } .mr21-quotes__note { margin: 26px auto 0; padding: 0 var(--mr-pad); max-width: 70ch; text-align: center; font-family: var(--mr-sans); font-size: 11.5px; line-height: 1.7; color: rgba(255, 255, 255, .4); } /* ── insights ─────────────────────────────────────────────────────── */ .mr21-insights { padding: clamp(70px, 11vh, 140px) 0; } .mr21-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 32px); padding: 0 var(--mr-pad); } .mr21-post { display: block; } .mr21-post__thumb { display: block; aspect-ratio: 16 / 10; margin-bottom: 18px; } .mr21-post__thumb .mr21-shot__bg { transition: transform .8s var(--mr-ease); } .mr21-post:hover .mr21-post__thumb .mr21-shot__bg { transform: scale(1.09); } .mr21-post .mr21-tag { display: block; margin-bottom: 10px; } .mr21-post h3 { margin-bottom: 10px; transition: color .3s; } .mr21-post:hover h3 { color: var(--mr-gold); } .mr21-post__excerpt { display: block; color: var(--mr-body); font-size: .92rem; margin-bottom: 10px; } .mr21-insights__note, .mr21-insights__empty { padding: 0 var(--mr-pad); margin-top: 38px; max-width: 62ch; } .mr21-insights__note a { color: var(--mr-gold); border-bottom: 1px solid var(--mr-bronze); } /* ── cta ──────────────────────────────────────────────────────────── */ .mr21-cta { position: relative; overflow: hidden; padding: clamp(90px, 15vh, 180px) var(--mr-pad); text-align: center; } .mr21-cta .mr21-shot__bg { background: radial-gradient(70% 60% at 50% 40%, rgba(156, 111, 69, .26), transparent 64%), linear-gradient(180deg, var(--mr-teal) 0%, var(--mr-ink) 78%); } .mr21-cta::after { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(7, 9, 10, .5); } .mr21-cta__inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; } /* display:block matters. An is inline by default, so the mark and the "CONTACT" eyebrow after it shared one line box and were centred as a PAIR — which put the mark left of centre and the word to its right, reading as a logo that had slipped off centre. Each now owns its own line. */ .mr21-cta__mark { display: block; width: clamp(90px, 10vw, 132px); height: auto; aspect-ratio: 1; margin: 0 auto 22px; opacity: .9; } .mr21-cta .mr21-tag { display: block; } .mr21-cta h2 { margin: 14px auto 20px; max-width: 18ch; } .mr21-cta .mr21-dim { max-width: 56ch; margin: 0 auto 38px; } /* ── page header, prose, archive ──────────────────────────────────── */ .mr21-pagehead { padding: clamp(150px, 22vh, 240px) var(--mr-pad) clamp(40px, 6vh, 70px); } .mr21-pagehead__inner { max-width: 1100px; } .mr21-pagehead .mr21-tag { display: block; margin-bottom: 16px; } .mr21-pagehead__intro { max-width: 60ch; margin-top: 20px; } .mr21-archive { padding-bottom: clamp(70px, 11vh, 130px); } .mr21-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--mr-pad); margin-bottom: clamp(26px, 4vh, 44px); } .mr21-filters__link { font-family: var(--mr-sans); font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; padding: 10px 16px; border: 1px solid var(--mr-line); color: rgba(255, 255, 255, .7); transition: border-color .25s, color .25s; } .mr21-filters__link:hover, .mr21-filters__link.is-current { color: var(--mr-gold); border-color: var(--mr-bronze); } .mr21-pagination { display: flex; gap: 6px; justify-content: center; margin-top: clamp(36px, 6vh, 64px); flex-wrap: wrap; } .mr21-pagination .page-numbers { font-family: var(--mr-sans); font-weight: 600; font-size: 11px; letter-spacing: .12em; padding: 11px 16px; border: 1px solid var(--mr-line); color: rgba(255, 255, 255, .7); } .mr21-pagination .page-numbers.current, .mr21-pagination .page-numbers:hover { color: var(--mr-gold); border-color: var(--mr-bronze); } .mr21-prose { padding: 0 var(--mr-pad) clamp(70px, 11vh, 130px); max-width: calc(74ch + var(--mr-pad) * 2); font-size: 1.06rem; line-height: 1.75; color: rgba(245, 239, 230, .82); } .mr21-prose--intro { padding-bottom: clamp(30px, 5vh, 54px); } .mr21-prose > * + * { margin-top: 1.15em; } .mr21-prose h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-top: 1.8em; } .mr21-prose h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); margin-top: 1.6em; } .mr21-prose a { color: var(--mr-gold); border-bottom: 1px solid var(--mr-bronze); } .mr21-prose ul, .mr21-prose ol { padding-left: 1.3em; } .mr21-prose li + li { margin-top: .4em; } .mr21-prose blockquote { border-left: 2px solid var(--mr-bronze); padding-left: 1.2em; font-family: var(--mr-serif); font-size: 1.3em; line-height: 1.45; color: var(--mr-white); margin-left: 0; } .mr21-prose img { margin: 1.6em 0; } .mr21-prose code { background: var(--mr-panel); padding: .15em .45em; font-size: .9em; } /* ── single ───────────────────────────────────────────────────────── */ .mr21-single__head { padding: clamp(150px, 22vh, 240px) var(--mr-pad) clamp(30px, 5vh, 50px); } .mr21-single__head-inner { max-width: 940px; } .mr21-single__head .mr21-tag { display: block; margin-bottom: 16px; } .mr21-single__standfirst { font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.55; color: var(--mr-off); max-width: 56ch; margin: 22px 0 0; } .mr21-single__meta { display: flex; gap: 20px; margin-top: 24px; } .mr21-single__figure { margin: 0 0 clamp(36px, 6vh, 64px); aspect-ratio: 16 / 9; position: relative; overflow: hidden; } .mr21-single__figure img { width: 100%; height: 100%; object-fit: cover; } .mr21-single__foot { padding: 0 var(--mr-pad) clamp(70px, 11vh, 130px); } .mr21-single__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-top: 1px solid var(--mr-line); padding-top: 28px; } .mr21-single__navlink { display: block; padding: 18px 0; } .mr21-single__navlink--next { text-align: right; } .mr21-single__navlink .mr21-micro { display: block; margin-bottom: 8px; } .mr21-single__navlink:hover .mr21-h { color: var(--mr-gold); } .mr21-single__cta { margin-top: clamp(40px, 6vh, 70px); padding-top: 32px; border-top: 1px solid var(--mr-line); display: flex; gap: 26px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .mr21-single__cta .mr21-dim { max-width: 52ch; margin: 0; } .mr21-404 { min-height: 70svh; display: flex; align-items: center; } /* ── form ─────────────────────────────────────────────────────────── */ .mr21-form-wrap { padding: 0 var(--mr-pad) clamp(70px, 11vh, 130px); max-width: 1000px; } .mr21-form-intro { margin-bottom: clamp(28px, 4vh, 44px); } .mr21-form-intro h2 { margin-bottom: 16px; } .mr21-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; } .mr21-field { margin: 0; display: flex; flex-direction: column; gap: 8px; } .mr21-field--full { grid-column: 1 / -1; } .mr21-field label { font-family: var(--mr-sans); font-weight: 600; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--mr-gold); } .mr21-field input, .mr21-field select, .mr21-field textarea { width: 100%; background: var(--mr-panel); border: 1px solid var(--mr-line); color: var(--mr-off); font-family: var(--mr-sans); font-size: 1rem; font-weight: 300; padding: 15px 16px; border-radius: 0; transition: border-color .25s, background .25s; } .mr21-field textarea { resize: vertical; min-height: 150px; } .mr21-field input:focus, .mr21-field select:focus, .mr21-field textarea:focus { border-color: var(--mr-bronze); background: #12181b; outline: none; } .mr21-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mr-gold) 50%), linear-gradient(135deg, var(--mr-gold) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 44px; } .mr21-field select option { background: var(--mr-panel); color: var(--mr-off); } .mr21-field.has-error input, .mr21-field.has-error select { border-color: #d98b7a; } .mr21-field__error { font-size: 12px; color: #d98b7a; } .mr21-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .mr21-form__note { font-size: 12px; color: rgba(255, 255, 255, .42); margin: 20px 0 26px; max-width: 60ch; } .mr21-form button[type="submit"] { margin-top: 26px; } .mr21-form-success { border-left: 2px solid var(--mr-gold); background: var(--mr-panel); padding: 28px 30px; } .mr21-form-success .mr21-tag { display: block; margin-bottom: 10px; } .mr21-form-success p { margin: 0; font-size: 1.05rem; color: var(--mr-off); } .mr21-form-error { border-left: 2px solid #d98b7a; background: rgba(217, 139, 122, .08); padding: 16px 20px; margin-bottom: 26px; font-size: .95rem; } .mr21-searchform { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; } .mr21-searchform input { flex: 1 1 240px; background: var(--mr-panel); border: 1px solid var(--mr-line); color: var(--mr-off); padding: 14px 16px; font-family: var(--mr-sans); } /* ── footer ───────────────────────────────────────────────────────── */ .mr21-footer { border-top: 1px solid var(--mr-line); padding: 52px var(--mr-pad) 32px; } .mr21-footer__top { display: flex; justify-content: space-between; gap: 36px; flex-wrap: wrap; padding-bottom: 34px; border-bottom: 1px solid var(--mr-line); } .mr21-footer__brand .mr21-mark { width: 58px; height: 58px; } .mr21-footer__nav { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; } .mr21-footer__list { display: flex; gap: 28px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; justify-content: flex-end; } .mr21-footer__list a, /* Gold social glyphs, header and footer. Slightly held back at rest so they sit under the wordmark in the hierarchy, full gold on hover and focus. */ .mr21-social { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; } .mr21-social__link { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--mr-gold); opacity: .72; border: 1px solid transparent; transition: opacity .25s, border-color .25s, transform .25s; } .mr21-social__link svg { width: 18px; height: 18px; fill: currentColor; display: block; } .mr21-social__link:hover, .mr21-social__link:focus-visible { opacity: 1; border-color: var(--mr-line); transform: translateY(-1px); } .mr21-footer__list a:hover { color: var(--mr-gold); } /* In the header the icons sit to the right of the menu on a shared row. */ .mr21-nav__panel { display: flex; align-items: center; gap: clamp(18px, 2vw, 30px); } .mr21-social--nav { margin-left: 4px; } .mr21-social--nav .mr21-social__link { width: 30px; height: 30px; } .mr21-social--nav .mr21-social__link svg { width: 16px; height: 16px; } .mr21-footer__base { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-top: 22px; } /* ── responsive ───────────────────────────────────────────────────── */ @media (max-width: 1080px) { .mr21-packages .mr21-blocks { grid-template-columns: 1fr 1fr; } .mr21-pkg { min-height: clamp(440px, 58vh, 560px); } .mr21-pkg:last-child { grid-column: 1 / -1; } } @media (max-width: 900px) { .mr21-about { grid-template-columns: 1fr; } .mr21-about--flip .mr21-about__shot { order: 0; } /* Stacked: no copy column to take a height from, so the portrait gets its own crop. width:100% keeps aspect-ratio from shrinking the box. */ .mr21-about__shot { width: 100%; aspect-ratio: 4 / 5; max-height: 72svh; min-height: 0; } .mr21-posts { grid-template-columns: 1fr; gap: 38px; } .mr21-form__grid { grid-template-columns: 1fr; } .mr21-single__nav { grid-template-columns: 1fr; } .mr21-single__navlink--next { text-align: left; } .mr21-footer__nav { align-items: flex-start; } .mr21-footer__list, .mr21-social { justify-content: flex-start; } } @media (max-width: 760px) { .mr21-packages .mr21-blocks { grid-template-columns: 1fr; } .mr21-pkg { min-height: clamp(400px, 52vh, 480px); } .mr21-pkg:last-child { grid-column: auto; } /* Both sit above the open panel so the brand stays visible and the burger stays tappable to close. */ .mr21-burger { display: block; position: relative; z-index: 2; } .mr21-nav__brand { position: relative; z-index: 2; } .mr21-nav__panel { position: fixed; inset: 0; z-index: 1; height: 100vh; height: 100dvh; /* dvh so mobile browser chrome cannot leave a gap. */ background: var(--mr-ink); display: flex; /* Column, not the row the header uses: the menu stacks and the social icons sit as their own row beneath it. */ flex-direction: column; align-items: center; justify-content: center; gap: 40px; overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); /* visibility is transitioned too so it flips only once the panel has finished sliding out, rather than cutting the animation short. */ transition: transform .4s var(--mr-ease), visibility .4s; } /* Hidden from assistive tech and from tab order when closed, not just moved offscreen. */ .mr21-nav__panel:not(.is-open) { visibility: hidden; } .mr21-nav__panel.is-open { transform: none; visibility: visible; } .mr21-nav__list { flex-direction: column; gap: 26px; } .mr21-nav__list a { font-size: 16px; letter-spacing: .14em; } .mr21-hero { padding-top: 120px; } .mr21-hero__note { position: static; margin-top: 40px; justify-content: center; text-align: center; } .mr21-mark { width: 48px; height: 48px; } .mr21-lockup__word { font-size: 19px; } } /* ── motion ───────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .mr21-hero__mark, .mr21-hero__lockup, .mr21-hero__headline, .mr21-hero__act { opacity: 1 !important; transform: none !important; } }