/* Mea Dent — ported from the Claude Design project (Home/About/Services/Service/Work/Certifications/Blog/Post/Contact). Values are the design's own px sizes; tokens come from theme.json as --wp--preset-- variables. */ :root { --md-navy: var(--wp--preset--color--navy); --md-sky: var(--wp--preset--color--sky); --md-sky-light: var(--wp--preset--color--sky-light); --md-cream: var(--wp--preset--color--cream); --md-ink: var(--wp--preset--color--ink); --md-border: var(--wp--preset--color--border); --md-gutter: var(--wp--preset--spacing--gutter); --md-max: 1200px; --md-ease: cubic-bezier(.22, 1, .36, 1); --md-header-h: 119px; --md-bar-h: 69px; --md-ann-h: 34px; } html { scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; background: var(--md-cream); color: var(--md-ink); -webkit-font-smoothing: antialiased; } img, video { max-width: 100%; } :focus-visible { outline: 2px solid var(--md-sky); outline-offset: 3px; border-radius: 4px; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } input::placeholder, textarea::placeholder { color: rgba(4, 40, 54, .4); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---------- Motion ---------- */ .js-motion .md-reveal, .js-motion .md-stagger > *, .js-motion .md-scale-in { opacity: 0; } @media (prefers-reduced-motion: reduce) { .js-motion .md-reveal, .js-motion .md-stagger > *, .js-motion .md-scale-in { opacity: 1; } } .md-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; } /* Sections own their vertical rhythm, so the editor's block gap is not wanted between them — it would also break the hero's tuck under the header. */ .wp-site-blocks > * + *, .md-main > * + *, .md-main .wp-block-post-content > * + * { margin-block-start: 0; } .md-main > *, .md-main .wp-block-post-content > * { margin-block-end: 0; } /* ---------- Shared primitives ---------- */ .md-shell { max-width: var(--md-max); margin-inline: auto; } .md-section { padding: var(--wp--preset--spacing--70) var(--md-gutter); } .md-section--lg { padding: var(--wp--preset--spacing--80) var(--md-gutter); } .md-section--cream { background: var(--md-cream); } .md-section--white { background: #fff; } .md-section--navy { background: var(--md-navy); color: var(--md-cream); } .md-kicker { margin: 0; font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--md-sky); } .md-kicker--sm { font-size: 11px; letter-spacing: 3px; } .md-kicker--ink { color: var(--md-navy); } .md-h2 { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: var(--wp--preset--font-size--head); line-height: 1.2; color: var(--md-ink); } .md-section--navy .md-h2, .md-section--navy h2, .md-section--navy h3 { color: var(--md-cream); } .md-head { display: flex; flex-direction: column; gap: 16px; } .md-head--center { align-items: center; text-align: center; } .md-head--split { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; } .md-lede { margin: 0; font-size: 17px; line-height: 1.8; color: rgba(28, 28, 28, .72); } .md-arrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 14px; letter-spacing: .5px; color: var(--wp--preset--color--link); } .md-arrow svg { transition: transform .25s var(--md-ease); } .md-arrow:hover { color: var(--md-sky); } .md-arrow:hover svg { transform: translateX(4px); } .md-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 100px; padding: 16px 40px; font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 16px; line-height: 1.35; border: 0; cursor: pointer; text-decoration: none; transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; } .md-btn--navy { background: var(--md-navy); color: #fff; } .md-btn--navy:hover { background: var(--md-sky); color: #fff; } .md-btn--sky { background: var(--md-sky); color: #fff; } .md-btn--sky:hover { background: var(--md-sky-light); color: #fff; } .md-btn--ghost { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8); } .md-btn--ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; } .md-btn--outline { color: var(--md-navy); box-shadow: inset 0 0 0 1px rgba(4, 40, 54, .35); } .md-btn--outline:hover { background: var(--md-navy); color: #fff; } .md-btn--sm { padding: 14px 28px; font-size: 14px; } .wp-block-button__link { transition: background-color .25s ease, color .25s ease; } /* ---------- Header ---------- */ /* The sticky wrapper must stay free of transform, filter and backdrop-filter: any of those would make it the containing block for the fixed mobile sheet and trap the menu inside the 119px header box. The glass lives on .md-header__bar, and the scroll transform on .md-header__inner. */ .md-header { position: sticky; top: 0; z-index: 100; height: var(--md-header-h); pointer-events: none; } .md-header.is-menu-open { z-index: 200; } .md-header__inner { transition: transform .5s var(--md-ease); } .md-header.is-scrolled .md-header__inner { transform: translateY(calc(-1 * var(--md-ann-h))); } .md-header.is-hidden .md-header__inner { transform: translateY(-130px); } .md-ann { pointer-events: auto; height: var(--md-ann-h); background: var(--md-navy); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 10px; box-sizing: border-box; } .md-ann a, .md-ann span { font-family: var(--wp--preset--font-family--display); font-size: 12px; line-height: 18px; letter-spacing: .1px; color: #fff; text-align: center; } .md-ann a:hover { color: var(--md-sky-light); } .md-ann span { color: rgba(255, 255, 255, .55); } .md-header__bar-wrap { padding: 8px 30px; position: relative; } .md-header__bar { pointer-events: auto; height: var(--md-bar-h); max-width: 1504px; margin: 0 auto; border-radius: 10px; /* Enough opacity to keep navy type legible over a bright hero frame, with an inner highlight so it still reads as glass rather than a solid bar. */ background: rgba(238, 236, 231, .72); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 32px; box-sizing: border-box; transition: background .35s ease, box-shadow .35s ease, border-radius .2s; } .md-header.is-scrolled .md-header__bar { background: rgba(247, 243, 237, .95); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 8px 30px rgba(4, 40, 54, .12); } .md-header.is-mega .md-header__bar { background: rgba(247, 243, 237, .96); box-shadow: none; border-radius: 10px 10px 0 0; } /* Brand: the logo file is a wide lockup, so it is cropped to its mark inside a 44px rounded window rather than squashed with object-fit. */ .md-brand { display: flex; align-items: center; gap: 12px; color: var(--md-navy); pointer-events: auto; flex: none; } .md-brand__mark { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: #0E2A38; display: block; flex: none; } .md-brand__mark img { width: 100px; height: 100px; max-width: none; margin: -16px 0 0 -28px; display: block; } .md-brand__text { display: flex; flex-direction: column; gap: 3px; } .md-brand__name { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 21px; line-height: 1; letter-spacing: -.2px; color: var(--md-navy); white-space: nowrap; } .md-brand__sub { font-family: var(--wp--preset--font-family--ui); font-weight: 500; font-size: 10.5px; line-height: 1; letter-spacing: 1.6px; text-transform: uppercase; color: var(--md-sky); white-space: nowrap; } .md-nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 32px); min-width: 0; justify-content: center; } .md-nav__link { pointer-events: auto; font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 13px; letter-spacing: 1px; line-height: 1; color: var(--md-navy); white-space: nowrap; padding-bottom: 5px; background: none; border: 0; cursor: pointer; background-image: linear-gradient(var(--md-sky), var(--md-sky)); background-repeat: no-repeat; background-position: left bottom; background-size: 0% 1.5px; transition: background-size .35s var(--md-ease), color .25s; } .md-nav__link:hover, .md-nav__link.is-open { color: var(--md-sky); background-size: 100% 1.5px; } .md-nav__link[aria-current] { color: var(--md-sky); background-size: 100% 1.5px; } .md-header__actions { display: flex; align-items: center; gap: 20px; flex: none; pointer-events: auto; } .md-lang { display: flex; align-items: center; gap: 12px; } .md-lang__item { background: none; border: 0; cursor: pointer; padding: 4px 0; font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 12px; letter-spacing: 1px; color: rgba(4, 40, 54, .42); text-decoration: none; } .md-lang__item.is-active { color: var(--md-navy); text-decoration: underline; text-underline-offset: 4px; } .md-header__cta { background: var(--md-navy); color: #fff; border-radius: 100px; padding: 10px 18px; font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 14px; line-height: 20px; white-space: nowrap; } .md-header__cta:hover { background: var(--md-sky); color: #fff; } .md-burger { display: none; pointer-events: auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--md-navy); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; } .md-burger i { display: block; width: 18px; height: 2px; border-radius: 1px; background: #fff; transition: transform .4s var(--md-ease); } .md-header.is-menu-open .md-burger i:first-child { transform: translateY(3.5px) rotate(45deg); } .md-header.is-menu-open .md-burger i:last-child { transform: translateY(-3.5px) rotate(-45deg); } /* ---------- Mega menu ---------- */ .md-mega { pointer-events: none; position: absolute; left: 30px; right: 30px; top: 77px; max-width: 1504px; margin: 0 auto; background: rgba(247, 243, 237, .97); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-radius: 0 0 14px 14px; box-shadow: 0 30px 70px rgba(4, 40, 54, .22); border-top: 1px solid rgba(4, 40, 54, .08); opacity: 0; transform: translateY(-8px); overflow: hidden; transition: opacity .25s ease, transform .3s var(--md-ease), visibility .25s; visibility: hidden; } .md-mega.is-open { pointer-events: auto; opacity: 1; transform: translateY(0); visibility: visible; } .md-mega__panel { display: none; } .md-mega__panel.is-open { display: block; } .md-mega__services { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; padding: 32px; } .md-mega__head { display: flex; justify-content: space-between; align-items: center; } .md-mega__head a { font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 12px; color: var(--wp--preset--color--link); } .md-mega__head a:hover { color: var(--md-sky); } .md-mega__col { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .md-mega__list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; } .md-mega__item { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: 12px; color: var(--md-ink); transition: background .2s ease; } .md-mega__item:hover { background: rgba(4, 40, 54, .06); color: var(--md-ink); } .md-mega__item img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; } .md-mega__item span { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .md-mega__item b { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 17px; line-height: 1.2; color: var(--md-navy); } .md-mega__item i { font-style: normal; font-size: 12.5px; line-height: 1.45; color: rgba(28, 28, 28, .6); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .md-mega__promo { position: relative; border-radius: 14px; overflow: hidden; min-height: 260px; display: flex; align-items: flex-end; color: #fff; } .md-mega__promo:hover { color: #fff; } .md-mega__promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--md-ease); } .md-mega__promo:hover img { transform: scale(1.05); } .md-mega__promo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 40, 54, .1), rgba(4, 40, 54, .85)); } .md-mega__promo > span { position: relative; z-index: 1; padding: 24px; display: flex; flex-direction: column; gap: 10px; } .md-mega__promo b { font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: 26px; line-height: 1.15; } .md-mega__promo em { align-self: flex-start; font-style: normal; background: var(--md-sky); color: #fff; border-radius: 100px; padding: 10px 18px; font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 13px; } .md-mega__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 32px; } .md-mega__tile { position: relative; border-radius: 14px; overflow: hidden; height: 210px; display: flex; align-items: flex-end; color: #fff; } .md-mega__tile:hover { color: #fff; } .md-mega__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .md-mega__tile:hover img { transform: scale(1.06); } .md-mega__tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 40, 54, .05), rgba(4, 40, 54, .8)); } .md-mega__tile > span { position: relative; z-index: 1; padding: 20px; display: flex; flex-direction: column; gap: 6px; } .md-mega__tile b { font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--md-sky-light); } .md-mega__tile i { font-style: normal; font-family: var(--wp--preset--font-family--display); font-size: 22px; line-height: 1.15; } /* ---------- Mobile menu sheet ---------- */ /* Sibling of .md-header__inner on purpose: __inner is transformed on scroll and would otherwise become the containing block for these fixed layers. */ .md-scrim { position: fixed; inset: 0; z-index: 150; background: rgba(4, 40, 54, .5); opacity: 0; pointer-events: none; transition: opacity .35s ease; } .md-header.is-menu-open .md-scrim { opacity: 1; pointer-events: auto; } .md-sheet { pointer-events: none; position: fixed; left: 0; right: 0; bottom: 0; top: 56px; z-index: 160; background: var(--md-navy); color: var(--md-cream); border-radius: 24px 24px 0 0; display: flex; flex-direction: column; box-shadow: 0 -20px 60px rgba(4, 40, 54, .4); transform: translateY(104%); transition: transform .55s var(--md-ease); } .md-header.is-menu-open .md-sheet { pointer-events: auto; transform: translateY(0); } .md-sheet__top { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px 12px; } .md-sheet__top .md-kicker { margin: 0; } .md-sheet__tools { display: flex; align-items: center; gap: 16px; } .md-sheet .md-lang { display: flex; } .md-sheet .md-lang__item { color: rgba(247, 243, 237, .4); } .md-sheet .md-lang__item.is-active { color: var(--md-cream); } .md-sheet__close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(247, 243, 237, .25); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--md-cream); flex: none; } .md-sheet__body { flex: 1; overflow: auto; padding: 8px 22px 24px; display: flex; flex-direction: column; -webkit-overflow-scrolling: touch; } .md-sheet__nav { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; } .md-sheet__nav a { display: flex; justify-content: space-between; align-items: baseline; padding: 13px 0; border-bottom: 1px solid rgba(247, 243, 237, .1); font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: 32px; line-height: 1.1; letter-spacing: -.5px; color: var(--md-cream); opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s var(--md-ease); } .md-sheet__nav a[aria-current] { color: var(--md-sky-light); } .md-sheet__nav em { font-style: normal; font-family: var(--wp--preset--font-family--ui); font-size: 11px; letter-spacing: 1px; color: rgba(247, 243, 237, .35); } .md-header.is-menu-open .md-sheet__nav a { opacity: 1; transform: translateY(0); } .md-sheet__services { margin-top: 22px; display: flex; flex-direction: column; gap: 2px; list-style: none; padding: 0; } .md-sheet__services a { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 14.5px; color: rgba(247, 243, 237, .75); opacity: 0; transition: opacity .5s ease; } .md-header.is-menu-open .md-sheet__services a { opacity: 1; } .md-sheet__services img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: none; } .md-sheet__foot { padding: 16px 22px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(247, 243, 237, .12); display: flex; gap: 10px; } .md-sheet__foot a { flex: 1; border-radius: 100px; padding: 14px; text-align: center; font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 14px; } .md-sheet__foot a:first-child { background: var(--md-sky); color: #fff; } .md-sheet__foot a:last-child { color: var(--md-cream); box-shadow: inset 0 0 0 1px rgba(247, 243, 237, .4); } body.md-menu-open { overflow: hidden; } @media (max-width: 1080px) { .md-nav, .md-lang, .md-header__cta { display: none; } .md-burger { display: flex; } .md-mega { display: none; } .md-header__bar { padding: 0 18px; } .md-header__actions { gap: 12px; } } @media (max-width: 760px) { :root { --md-header-h: 106px; } .md-header__bar-wrap { padding: 8px 12px; } .md-header__bar { padding: 0 14px; height: 64px; } .md-brand__mark { width: 38px; height: 38px; } .md-brand__mark img { width: 86px; height: 86px; margin: -14px 0 0 -24px; } .md-brand__name { font-size: 18px; } .md-brand__sub { font-size: 9px; letter-spacing: 1.4px; } .md-ann { font-size: 11px; } .md-ann__sep, .md-ann__wa { display: none; } .md-sheet__nav a { font-size: 27px; } } .admin-bar .md-header { top: 32px; } @media (max-width: 782px) { .admin-bar .md-header { top: 46px; } } /* ---------- Hero (home) ---------- */ .md-hero { position: relative; height: 100vh; min-height: 720px; max-height: 900px; overflow: hidden; background: var(--md-navy); } /* Core prints `:root :where(.is-layout-flow) > :first-child { margin-block-start: 0 }` inline, after this file, and it outranks a single class. Three classes to win it back, or the header stops overlaying the hero. */ .md-main .wp-block-post-content > .md-hero, .md-main > .md-hero, .wp-site-blocks .md-main .md-hero { margin-block-start: calc(-1 * var(--md-header-h)); } .md-hero__media, .md-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .md-hero__video { opacity: 0; transition: opacity 1.6s ease; } .md-hero__video.is-on { opacity: 1; } .md-hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 40, 54, .45) 0%, rgba(4, 40, 54, .10) 34%, rgba(4, 40, 54, .82) 100%); } .md-hero__veil::after { content: ""; position: absolute; left: 0; right: 40%; bottom: 0; height: 62%; background: linear-gradient(90deg, rgba(4, 40, 54, .55), rgba(4, 40, 54, 0)); } .md-hero__body { position: absolute; left: 0; right: 0; bottom: 76px; padding: 0 30px; } .md-hero__inner { max-width: 1380px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; } .md-hero__title { margin: 0; max-width: 15ch; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(40px, 5.6vw, 82px); line-height: .98; letter-spacing: -0.025em; color: #fff; text-wrap: balance; /* The hero sits over moving video; a low, wide shadow keeps the type legible on a bright frame without looking like a drop shadow. */ text-shadow: 0 2px 30px rgba(4, 40, 54, .45); } .md-hero__sub { margin: 0; max-width: 46ch; font-family: var(--wp--preset--font-family--ui); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.65; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 16px rgba(4, 40, 54, .5); } .md-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; } @media (max-width: 760px) { .md-hero { min-height: 600px; height: 88svh; } .md-hero__body { bottom: 44px; padding: 0 24px; } .md-hero__title { max-width: 13ch; letter-spacing: -0.02em; line-height: 1.02; } .md-hero__sub { max-width: 34ch; } .md-hero__actions .md-btn { padding: 14px 26px; font-size: 15px; } } /* ---------- Intro statement ---------- */ .md-statement__inner { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; } .md-statement__lead { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: var(--wp--preset--font-size--statement); line-height: 1.4; color: var(--md-ink); text-wrap: pretty; } .md-statement__body { margin: 0; max-width: 760px; font-size: 17px; line-height: 1.8; color: rgba(28, 28, 28, .72); } /* ---------- Photo strip ---------- */ .md-strip { height: 460px; display: flex; overflow: hidden; } .md-strip img { flex: 1; min-width: 0; height: 100%; object-fit: cover; display: block; } @media (max-width: 1080px) { .md-strip { height: 300px; } .md-strip img:nth-child(n+4) { display: none; } } @media (max-width: 760px) { .md-strip { height: 220px; } .md-strip img:nth-child(n+3) { display: none; } } /* ---------- Founder ---------- */ .md-founder { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; max-width: var(--md-max); margin: 0 auto; } .md-founder__photo { position: relative; margin: 0; } .md-founder__photo img { width: 100%; height: 640px; object-fit: cover; object-position: 50% 18%; border-radius: 16px; display: block; } .md-founder__tag { position: absolute; left: 20px; bottom: 20px; background: rgba(4, 40, 54, .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 12px; padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; } .md-founder__tag b { font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--md-sky-light); } .md-founder__tag span { font-family: var(--wp--preset--font-family--ui); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .65); } .md-founder__body { display: flex; flex-direction: column; gap: 26px; min-width: 0; } .md-founder__name { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: clamp(38px, 4.6vw, 66px); line-height: 1.02; letter-spacing: -1px; color: var(--md-ink); } .md-founder__role { font-family: var(--wp--preset--font-family--ui); font-weight: 500; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--md-sky); } .md-founder__id { display: flex; flex-direction: column; gap: 10px; } .md-creds { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .md-creds li { border-radius: 100px; padding: 8px 14px; box-shadow: inset 0 0 0 1px rgba(4, 40, 54, .22); font-family: var(--wp--preset--font-family--ui); font-weight: 500; font-size: 12.5px; color: var(--md-navy); } .md-founder__text { margin: 0; font-size: 16.5px; line-height: 1.85; color: rgba(28, 28, 28, .75); } .md-founder__foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid rgba(81, 166, 190, .3); } .md-sig { font-family: var(--wp--preset--font-family--display); font-weight: 300; font-style: italic; font-size: 34px; line-height: 1; letter-spacing: 1px; color: var(--md-sky); } @media (max-width: 1080px) { .md-founder { grid-template-columns: 1fr; gap: 36px; } .md-founder__photo img { height: 460px; } } @media (max-width: 760px) { .md-founder__photo img { height: 340px; } .md-founder__name { font-size: clamp(32px, 8.6vw, 44px); } } /* ---------- Welcome (editorial intro) ---------- */ .md-welcome { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; max-width: var(--md-max); margin: 0 auto; } .md-welcome__col { display: flex; flex-direction: column; gap: 28px; min-width: 0; } .md-welcome__col--body { gap: 20px; padding-top: 6px; } .md-welcome h2 { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.15; color: var(--md-ink); text-wrap: balance; } .md-welcome p { margin: 0; font-size: 17px; line-height: 1.8; color: rgba(28, 28, 28, .8); } .md-facts { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(4, 40, 54, .14); } .md-facts li { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid rgba(4, 40, 54, .14); font-family: var(--wp--preset--font-family--ui); font-weight: 500; font-size: 14.5px; color: var(--md-navy); } .md-facts svg { flex: none; color: var(--md-sky); } @media (max-width: 1080px) { .md-welcome { grid-template-columns: 1fr; gap: 32px; } } /* ---------- Clinic marquee ---------- */ .md-marquee { overflow: hidden; padding: 0 0 96px; background: var(--md-cream); } .md-marquee__track { display: flex; gap: 16px; width: max-content; animation: md-marquee 60s linear infinite; } .md-marquee:hover .md-marquee__track { animation-play-state: paused; } .md-marquee__cell { flex: none; height: 340px; border-radius: 14px; overflow: hidden; } .md-marquee__cell:nth-child(3n+1) { width: 440px; } .md-marquee__cell:nth-child(3n+2) { width: 300px; } .md-marquee__cell:nth-child(3n) { width: 360px; } .md-marquee__cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; } .md-marquee__cell:hover img { transform: scale(1.04); } @keyframes md-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .md-marquee__track { animation: none; } } @media (max-width: 760px) { .md-marquee { padding-bottom: 56px; } .md-marquee__cell { height: 220px; width: 260px; } .md-marquee__cell:nth-child(3n+1) { width: 300px; } } /* ---------- Services: sticky panel ---------- */ .md-services { background: var(--md-navy); position: relative; height: calc(100vh + var(--steps, 4) * var(--md-services-step, 80vh)); } .md-services__sticky { position: sticky; top: 0; height: 100vh; box-sizing: border-box; padding: clamp(56px, 9vh, 88px) clamp(24px, 5.5vw, 80px) clamp(20px, 5vh, 48px); display: flex; flex-direction: column; gap: clamp(16px, 3vh, 32px); overflow: hidden; } .md-services__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; } .md-services__head > div { display: flex; flex-direction: column; gap: 10px; } .md-services__head h2 { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: clamp(26px, min(3.4vw, 5vh), 48px); line-height: 1.05; color: var(--md-cream); } .md-services__all { display: flex; align-items: center; gap: 10px; color: var(--md-cream); border-radius: 100px; padding: 11px 20px; box-shadow: inset 0 0 0 1px rgba(247, 243, 237, .4); font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 13px; white-space: nowrap; } .md-services__all:hover { background: rgba(255, 255, 255, .1); color: #fff; } .md-services__grid { display: grid; grid-template-columns: minmax(200px, 420px) minmax(280px, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; flex: 1; min-height: 0; } .md-services__media { position: relative; height: min(520px, calc(100vh - 260px)); border-radius: 14px; overflow: hidden; background: #000; } .md-services__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; } .md-services__media img.is-active { opacity: 1; } .md-services__count { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 24px; background: linear-gradient(180deg, rgba(4, 40, 54, 0), rgba(4, 40, 54, .85)); display: flex; justify-content: space-between; align-items: baseline; } .md-services__num { font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: clamp(34px, 5vh, 64px); line-height: 1; color: #fff; } .md-services__of { font-family: var(--wp--preset--font-family--ui); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .6); } .md-services__list { display: flex; flex-direction: column; min-width: 0; max-height: calc(100vh - 220px); overflow: auto; scrollbar-width: none; } .md-services__list::-webkit-scrollbar { display: none; } .md-services__rule { height: 1px; background: rgba(255, 255, 255, .15); flex: none; } .md-srow { display: flex; flex-direction: column; padding: clamp(8px, 1.6vh, 14px) 0; color: #fff; transition: padding .35s ease; } .md-srow.is-active { padding: clamp(10px, 2vh, 18px) 0 clamp(12px, 2.2vh, 22px); } .md-srow__btn { border: 0; background: none; padding: 0; cursor: pointer; display: flex; align-items: center; gap: 18px; width: 100%; text-align: left; } .md-srow__num { width: 36px; flex: none; font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 11px; letter-spacing: 2px; color: rgba(255, 255, 255, .4); transition: color .3s; } .md-srow.is-active .md-srow__num { color: var(--md-sky); } .md-srow__name { flex: 1; font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: clamp(18px, min(2.2vw, 3.6vh), 32px); line-height: 1.1; letter-spacing: -.5px; color: #fff; opacity: .5; transition: opacity .35s ease, font-weight .35s ease; } .md-srow.is-active .md-srow__name { font-weight: 400; opacity: 1; } .md-srow__chev { flex: none; color: #fff; opacity: .35; display: flex; transform: rotate(0); transition: transform .4s ease, opacity .3s; } .md-srow.is-active .md-srow__chev { opacity: 1; transform: rotate(180deg); } .md-srow__panel { max-height: 0; opacity: 0; overflow: hidden; padding-top: 0; transition: max-height .5s var(--md-ease), opacity .4s ease, padding .4s ease; } .md-srow.is-active .md-srow__panel { max-height: min(280px, 30vh); opacity: 1; padding-top: 14px; } .md-srow__panel p { margin: 0; max-width: 600px; padding-left: 54px; font-size: clamp(13px, 1.7vh, 16px); line-height: 1.7; color: rgba(255, 255, 255, .82); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } .md-srow__more { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0 54px; background: var(--md-sky); color: #fff; border-radius: 100px; padding: 10px 18px; font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 13px; } .md-srow__more:hover { background: var(--md-sky-light); color: #fff; } .md-services__progress { margin-top: 20px; height: 2px; background: rgba(255, 255, 255, .12); border-radius: 1px; overflow: hidden; flex: none; } .md-services__progress span { display: block; height: 100%; width: 0; background: var(--md-sky); transition: width .2s linear; } @media (max-width: 1080px) { .md-services__grid { grid-template-columns: 1fr; gap: 18px; align-items: stretch; grid-template-rows: auto minmax(0, 1fr); } .md-services__media { height: 26svh; min-height: 150px; } .md-services__num { font-size: 38px; } .md-services__list { max-height: none; min-height: 0; } .md-services__all { padding: 9px 16px; font-size: 12px; } } @media (max-width: 760px) { .md-services { --md-services-step: 62vh; } .md-services__sticky { height: 100svh; padding: calc(var(--md-header-h) + 12px) 20px 20px; gap: 14px; } .md-srow__panel p, .md-srow__more { padding-left: 0; margin-left: 0; } .md-srow.is-active .md-srow__panel { max-height: 150px; } .md-srow__panel p { -webkit-line-clamp: 3; } .md-srow__num { width: 28px; } .md-srow__btn { gap: 12px; } } /* ---------- Travel / globe ---------- */ .md-travel { overflow: hidden; } .md-travel__grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .md-travel__col { display: flex; flex-direction: column; gap: 24px; min-width: 0; } .md-travel__title { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.12; color: var(--md-ink); text-wrap: balance; } .md-travel__badge { margin: 0; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; background: rgba(4, 40, 54, .05); box-shadow: inset 0 0 0 1px rgba(4, 40, 54, .12); color: var(--md-navy); border-radius: 100px; padding: 9px 18px; font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; } .md-travel__groups { display: flex; flex-direction: column; gap: 26px; margin-top: 4px; } .md-travel__group { display: flex; flex-direction: column; gap: 6px; } .md-travel__grouphead { margin: 0 0 4px; display: flex; align-items: center; gap: 10px; font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 10.5px; letter-spacing: 2.4px; text-transform: uppercase; color: rgba(4, 40, 54, .5); } .md-travel__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--md-navy); flex: none; } .md-travel__group[data-mode="flight"] .md-travel__dot { background: var(--md-sky); } .md-travel__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 0; padding: 0; list-style: none; } .md-travel__item { width: 100%; border: 0; background: none; cursor: pointer; text-align: left; display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(4, 40, 54, .09); transition: padding-left .3s var(--md-ease); } .md-travel__name { font-family: var(--wp--preset--font-family--ui); font-weight: 500; font-size: 13.5px; letter-spacing: .3px; color: rgba(28, 28, 28, .78); white-space: nowrap; transition: color .3s; } /* A hairline leader ties the city to its time, the way a menu does. */ .md-travel__line { height: 1px; background: rgba(4, 40, 54, .16); transform: translateY(-3px); } .md-travel__time { font-family: var(--wp--preset--font-family--ui); font-size: 12.5px; font-variant-numeric: tabular-nums; color: rgba(28, 28, 28, .45); white-space: nowrap; transition: color .3s; } .md-travel__item:hover .md-travel__name, .md-travel__item.is-active .md-travel__name { color: var(--md-navy); font-weight: 700; } .md-travel__item:hover .md-travel__time, .md-travel__item.is-active .md-travel__time { color: var(--md-sky-ink); } .md-travel__item.is-active { padding-left: 10px; } .md-travel__item.is-active .md-travel__line { background: rgba(81, 166, 190, .55); } .md-travel__note { margin: 4px 0 0; max-width: 460px; font-size: 13px; line-height: 1.7; color: rgba(28, 28, 28, .5); } .md-travel__globe { position: relative; aspect-ratio: 1 / 1; max-height: 720px; min-width: 0; } /* A soft ground behind the sphere so it sits in the page rather than on it. */ .md-travel__globe::before { content: ""; position: absolute; left: 50%; top: 50%; width: 88%; height: 88%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(81, 166, 190, .16) 0%, rgba(81, 166, 190, 0) 68%); pointer-events: none; } .md-travel__pin { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 100px; padding: 9px 18px; font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--md-navy); white-space: nowrap; box-shadow: 0 10px 30px rgba(4, 40, 54, .16); } @media (max-width: 1080px) { .md-travel__grid { grid-template-columns: 1fr; } .md-travel__globe { order: -1; max-height: 420px; } } @media (max-width: 760px) { .md-travel__list { grid-template-columns: 1fr; gap: 0; } .md-travel__globe { max-height: 330px; } .md-travel__groups { gap: 20px; } } /* ---------- Why / reasons ---------- */ .md-reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 32px; list-style: none; margin: 0; padding: 0; } .md-reasons li { border-top: 1px solid rgba(4, 40, 54, .18); padding-top: 24px; display: flex; flex-direction: column; gap: 14px; } .md-reasons b { font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: 40px; line-height: 1; color: var(--md-sky); } .md-reasons strong { font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--md-ink); } .md-reasons p { margin: 0; font-size: 14.5px; line-height: 1.7; color: rgba(28, 28, 28, .68); } .md-reasons--rows { display: flex; flex-direction: column; gap: 0; } .md-reasons--rows li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 24px; padding: 26px 0; border-top: 1px solid rgba(4, 40, 54, .14); } .md-reasons--rows li:last-child { border-bottom: 1px solid rgba(4, 40, 54, .14); } .md-reasons--rows b { font-size: 34px; } .md-reasons--rows > li > div { display: flex; flex-direction: column; gap: 8px; } .md-reasons--rows strong { font-size: 17px; } .md-reasons--rows p { font-size: 15px; } /* ---------- Testimonials ---------- */ .md-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; list-style: none; margin: 0; padding: 0; } .md-quotes li { display: flex; flex-direction: column; gap: 24px; } .md-quotes .md-mark { font-family: var(--wp--preset--font-family--display); font-size: 80px; line-height: 1; color: var(--md-navy); } .md-quotes blockquote { margin: 0; font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: 22px; line-height: 1.5; color: var(--md-ink); } .md-quotes cite { display: flex; align-items: center; gap: 12px; font-style: normal; font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 14px; color: var(--md-ink); } .md-quotes cite::before { content: ""; width: 24px; height: 1px; background: var(--md-navy); } @media (max-width: 1080px) { .md-quotes { grid-template-columns: 1fr; gap: 40px; } } /* ---------- Before / after compare ---------- */ .md-compare { position: relative; width: 100%; border-radius: 12px; overflow: hidden; background: #F5F5F5; user-select: none; touch-action: pan-y; } .md-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .md-compare__before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); } .md-compare__tag { position: absolute; top: 20px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px #D1D1D1; padding: 6px 14px; font-family: var(--wp--preset--font-family--ui); font-weight: 500; font-size: 13px; color: #1A1A1A; z-index: 2; } .md-compare__tag--before { left: 20px; } .md-compare__tag--after { right: 20px; } .md-compare__divider { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 1px; background: rgba(255, 255, 255, .9); box-shadow: 0 0 8px rgba(0, 0, 0, .25); pointer-events: none; z-index: 2; } .md-compare__handle { position: absolute; top: 50%; left: var(--pos, 50%); transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 18px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); display: flex; gap: 3px; align-items: center; justify-content: center; pointer-events: none; z-index: 3; } .md-compare__handle i { width: 2px; height: 12px; border-radius: 1px; background: #9CA3AF; display: block; } .md-compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 4; } .md-transform { display: flex; flex-direction: column; gap: 48px; align-items: center; max-width: var(--md-max); margin: 0 auto; } .md-transform .md-compare { height: 630px; } .md-transform h2 { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(30px, 4vw, 44px); line-height: 1.2; color: #1A1A1A; text-align: center; } .md-transform__sub { margin: 0; max-width: 580px; font-size: 14px; line-height: 1.7; color: #6B7280; text-align: center; } @media (max-width: 1080px) { .md-transform .md-compare { height: 380px; } } /* ---------- Blog cards ---------- */ .md-posts { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 32px; } .md-post { display: flex; flex-direction: column; gap: 20px; color: var(--md-ink); } .md-post img, .md-post .wp-block-post-featured-image img { height: 260px; width: 100%; object-fit: cover; border-radius: 12px 12px 20px 20px; display: block; } .md-post .wp-block-post-featured-image { margin: 0; } .md-post__meta { font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--md-sky); } .md-post__title, .md-post .wp-block-post-title { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 24px; line-height: 1.25; color: var(--md-ink); text-wrap: pretty; margin: 0; } .md-post .wp-block-post-title a { color: var(--md-ink); } .md-post .wp-block-post-title a:hover { color: var(--md-sky); } .md-post p, .md-post .wp-block-post-excerpt__excerpt { margin: 0; font-size: 14px; line-height: 1.7; color: #6B7280; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .md-post .wp-block-post-excerpt { margin: 0; } .md-post__read, .md-post .wp-block-post-excerpt__more-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 14px; color: var(--wp--preset--color--link); } .md-posts .wp-block-post-template { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } @media (max-width: 1080px) { .md-posts, .md-posts .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .md-posts, .md-posts .wp-block-post-template { grid-template-columns: minmax(0, 1fr); } } /* ---------- Inner hero ---------- */ .md-inner-hero { background: var(--md-navy); padding: calc(var(--md-header-h) + 90px) var(--md-gutter) var(--wp--preset--spacing--80); position: relative; overflow: hidden; } .md-main .wp-block-post-content > .md-inner-hero, .md-main > .md-inner-hero, .wp-site-blocks .md-main .md-inner-hero { margin-block-start: calc(-1 * var(--md-header-h)); } .md-inner-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .16; } .md-inner-hero__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 40, 54, .95) 30%, rgba(4, 40, 54, .55) 100%); } .md-inner-hero__ring { position: absolute; border-radius: 50%; border: 1px solid rgba(81, 166, 190, .18); pointer-events: none; } .md-inner-hero__ring--a { right: -120px; top: -160px; width: 620px; height: 620px; } .md-inner-hero__ring--b { right: 40px; top: -40px; width: 620px; height: 620px; border-color: rgba(81, 166, 190, .1); } .md-inner-hero__inner { max-width: var(--md-max); margin: 0 auto; display: flex; flex-direction: column; gap: 32px; position: relative; } .md-inner-hero h1 { margin: 0; max-width: 980px; font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: var(--wp--preset--font-size--title-inner); line-height: 1.1; color: var(--md-cream); text-wrap: balance; } .md-inner-hero p { margin: 0; max-width: 760px; font-family: var(--wp--preset--font-family--ui); font-size: 18px; line-height: 1.6; color: rgba(247, 243, 237, .62); } .md-inner-hero--tall { height: 620px; padding: 0; display: flex; align-items: flex-end; } .md-inner-hero--tall .md-inner-hero__inner { width: 100%; padding: 0 var(--md-gutter) 64px; } .md-inner-hero--tall .md-inner-hero__bg { opacity: .55; } .md-inner-hero--tall .md-inner-hero__veil { background: linear-gradient(180deg, rgba(4, 40, 54, .6) 0%, rgba(4, 40, 54, .35) 40%, rgba(4, 40, 54, .92) 100%); } .md-inner-hero--tall h1 { color: #fff; letter-spacing: -1px; line-height: 1.05; } .md-crumb { display: flex; align-items: center; gap: 14px; font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .6); } .md-crumb a { color: var(--md-sky-light); } .md-crumb a:hover { color: #fff; } .md-crumb b { color: #fff; font-weight: 600; } @media (max-width: 760px) { .md-inner-hero--tall { height: 480px; } } /* ---------- Cards / grids ---------- */ .md-cards { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 32px; list-style: none; margin: 0; padding: 0; } /* Inline --cols cannot be beaten from a stylesheet, so the breakpoints below override grid-template-columns directly. Keep it that way. */ .md-card { background: #fff; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; color: var(--md-ink); box-shadow: var(--wp--preset--shadow--card); transition: transform .25s ease, box-shadow .25s ease; } .md-card:hover { transform: translateY(-6px); box-shadow: var(--wp--preset--shadow--lift); color: var(--md-ink); } .md-card__media { position: relative; height: 220px; overflow: hidden; } .md-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .md-card__num { position: absolute; left: 20px; top: 20px; width: 40px; height: 40px; border-radius: 50%; background: rgba(4, 40, 54, .85); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--display); font-size: 16px; } .md-card__body { padding: 28px 28px 30px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .md-card__title { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--md-ink); text-wrap: pretty; } .md-card__text { margin: 0; flex: 1; font-size: 14.5px; line-height: 1.65; color: var(--wp--preset--color--muted); } .md-card__more { display: flex; align-items: center; gap: 8px; font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 13px; letter-spacing: .5px; color: var(--wp--preset--color--link); } .md-card--wide { grid-column: span 2; flex-direction: row; } .md-card--wide .md-card__media { width: 52%; height: auto; min-height: 320px; flex: none; } .md-card--cta { background: var(--md-navy); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 300px; } .md-card--cta p { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: 30px; line-height: 1.2; color: var(--md-cream); text-wrap: pretty; } .md-card--cta .md-btn { padding: 13px 22px; font-size: 14px; } .md-card--cta .md-btn--ghost { box-shadow: inset 0 0 0 1px rgba(247, 243, 237, .4); color: var(--md-cream); } .md-card--cta .md-cta-stack { display: flex; flex-direction: column; gap: 10px; } @media (max-width: 1080px) { .md-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md-card--wide { grid-column: span 2; } } @media (max-width: 760px) { .md-cards { grid-template-columns: minmax(0, 1fr); } .md-card--wide { grid-column: auto; flex-direction: column; } .md-card--wide .md-card__media { width: auto; height: 220px; min-height: 0; } } /* ---------- Service page ---------- */ .md-service-tabs { background: #fff; border-bottom: 1px solid rgba(4, 40, 54, .1); } .md-service-tabs__inner { max-width: var(--md-max); margin: 0 auto; padding: 0 24px; display: flex; gap: 8px; overflow-x: auto; flex-wrap: wrap; } .md-service-tabs a { padding: 22px 18px; font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 13px; letter-spacing: .5px; white-space: nowrap; color: rgba(4, 40, 54, .55); border-bottom: 2px solid transparent; } .md-service-tabs a:hover { color: var(--md-sky); } .md-service-tabs a.is-active { color: var(--md-navy); border-bottom-color: var(--md-sky); } .md-split { max-width: var(--md-max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 43%); gap: clamp(32px, 5.5vw, 80px); align-items: center; } .md-split--rev { grid-template-columns: minmax(0, 43%) minmax(0, 1fr); } .md-split img { width: 100%; height: 400px; object-fit: cover; border-radius: 12px; display: block; } .md-split__lead { font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: var(--wp--preset--font-size--head-sm); line-height: 1.35; color: var(--md-ink); text-wrap: pretty; } .md-split__col { display: flex; flex-direction: column; gap: 28px; } .md-split__col p { margin: 0; font-size: 17px; line-height: 1.8; color: rgba(28, 28, 28, .75); } .md-section--navy .md-split__col p { color: rgba(247, 243, 237, .75); font-size: 16px; line-height: 1.85; } @media (max-width: 1080px) { .md-split, .md-split--rev { grid-template-columns: 1fr; } .md-split img { height: 300px; } .md-split--rev img { order: -1; } } .md-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; } .md-tile { background: #fff; border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 12px; box-shadow: inset 0 0 0 1px var(--md-border); } .md-tile__head { display: flex; gap: 12px; align-items: flex-start; } .md-tile__head svg { flex: none; margin-top: 3px; } .md-tile__title { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 22px; line-height: 1.25; color: var(--md-ink); } .md-tile p { margin: 0; padding-left: 32px; font-size: 14.5px; line-height: 1.7; color: var(--wp--preset--color--muted); } .md-steps { display: flex; flex-direction: column; width: 100%; list-style: none; margin: 0; padding: 0; } .md-steps li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 32px; align-items: center; padding: 28px 0; border-top: 1px solid rgba(4, 40, 54, .12); } .md-steps li:last-child { border-bottom: 1px solid rgba(4, 40, 54, .12); } .md-steps b { width: 56px; height: 56px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--md-sky); display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 20px; color: var(--md-navy); } .md-steps span { font-size: 18px; line-height: 1.6; color: var(--md-ink); } @media (max-width: 760px) { .md-steps li { grid-template-columns: 56px minmax(0, 1fr); gap: 18px; } .md-steps b { width: 44px; height: 44px; font-size: 16px; } .md-steps span { font-size: 16px; } } .md-cta-card { max-width: var(--md-max); margin: 0 auto; background: var(--md-navy); border-radius: 24px; padding: clamp(40px, 6vw, 80px) clamp(24px, 7vw, 96px); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: center; position: relative; overflow: hidden; } .md-cta-card::after { content: ""; position: absolute; right: -140px; bottom: -200px; width: 520px; height: 520px; border-radius: 50%; border: 1px solid rgba(81, 166, 190, .2); } .md-cta-card h2, .md-cta-card .md-cta-card__title { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: clamp(26px, 3.4vw, 46px); line-height: 1.25; color: var(--md-cream); text-wrap: pretty; position: relative; } .md-cta-card__actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; position: relative; } .md-cta-card__actions .md-btn { font-size: 15px; padding: 16px 32px; } .md-cta-card__actions .md-btn--ghost { box-shadow: inset 0 0 0 1px rgba(247, 243, 237, .5); color: var(--md-cream); } @media (max-width: 1080px) { .md-cta-card { grid-template-columns: 1fr; gap: 28px; } } .md-others { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; } .md-others a { display: flex; flex-direction: column; gap: 16px; color: var(--md-ink); } .md-others img { width: 100%; height: 180px; object-fit: cover; border-radius: 12px; display: block; } .md-others b { font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 11px; letter-spacing: 2px; color: var(--md-sky); } .md-others span { font-family: var(--wp--preset--font-family--display); font-size: 22px; line-height: 1.2; color: var(--md-ink); } /* ---------- Work / cases ---------- */ .md-filters { background: #fff; border-bottom: 1px solid rgba(4, 40, 54, .1); position: sticky; top: var(--md-bar-h); z-index: 20; } .md-filters__inner { max-width: var(--md-max); margin: 0 auto; padding: 16px 24px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .md-pill { border: 1px solid rgba(4, 40, 54, .2); background: transparent; color: rgba(4, 40, 54, .75); border-radius: 100px; padding: 9px 18px; font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 12.5px; letter-spacing: .5px; cursor: pointer; transition: all .2s; } .md-pill:hover { border-color: var(--md-sky); color: var(--md-navy); } .md-pill.is-active { border-color: var(--md-navy); background: var(--md-navy); color: #fff; } .md-case-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 28px; list-style: none; margin: 0; padding: 0; } .md-case { background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--md-border), 0 4px 12px rgba(0, 0, 0, .04); padding: 16px; display: flex; flex-direction: column; gap: 16px; } .md-case.is-active { box-shadow: inset 0 0 0 2px var(--md-sky), 0 4px 12px rgba(0, 0, 0, .04); } .md-case__pair { border: 0; padding: 0; background: none; cursor: pointer; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; height: 220px; border-radius: 8px; overflow: hidden; text-align: left; } .md-case__pair > div { position: relative; min-width: 0; } .md-case__pair img { width: 100%; height: 100%; object-fit: cover; display: block; } .md-case__tag { position: absolute; left: 8px; bottom: 8px; background: rgba(4, 40, 54, .85); color: #fff; font-family: var(--wp--preset--font-family--ui); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 8px; border-radius: 12px; } .md-case__tag--after { background: var(--md-sky); } .md-case__body { display: flex; flex-direction: column; gap: 12px; padding: 4px 4px 0; } .md-case__badge { align-self: flex-start; border-radius: 4px; background: var(--wp--preset--color--sky-wash); color: var(--wp--preset--color--sky-ink); padding: 5px 10px; font-family: var(--wp--preset--font-family--ui); font-weight: 700; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; } .md-case__title { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 22px; line-height: 1.2; color: #0B2C33; } .md-case__desc { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--wp--preset--color--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .md-case__view { border: 0; background: none; padding: 0 4px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 14px; color: var(--wp--preset--color--link); } .md-case__view:hover { color: var(--md-sky); } .md-case__slot { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; height: 220px; } .md-case__slot div { border-radius: 8px; background: repeating-linear-gradient(45deg, #F3F0EA, #F3F0EA 10px, #EDE9E1 10px, #EDE9E1 20px); display: grid; place-items: center; font-family: var(--wp--preset--font-family--ui); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: rgba(4, 40, 54, .4); text-align: center; padding: 8px; } @media (max-width: 1080px) { .md-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md-case-stage .md-compare { height: 400px; } } @media (max-width: 760px) { .md-case-grid { grid-template-columns: minmax(0, 1fr); } .md-case-stage .md-compare { height: 300px; } } .md-reels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; } .md-reels video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; background: var(--wp--preset--color--navy-soft); display: block; } .md-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; gap: 16px; } .md-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; } .md-gallery img:nth-child(1) { grid-column: span 2; grid-row: span 2; } .md-gallery img:nth-child(6) { grid-column: span 2; } @media (max-width: 1080px) { .md-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; } .md-gallery img:nth-child(1) { grid-row: span 1; } } .md-quad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .md-quad img { width: 100%; height: 240px; object-fit: cover; border-radius: 12px; display: block; } @media (max-width: 1080px) { .md-quad { grid-template-columns: 1fr 1fr; } .md-quad img { height: 180px; } } .md-video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; background: var(--md-navy); display: block; } /* ---------- Certifications ---------- */ .md-standards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; list-style: none; margin: 0; padding: 0; } .md-standard { background: #fff; border-radius: 16px; padding: 36px; display: flex; flex-direction: column; gap: 16px; box-shadow: inset 0 0 0 1px var(--md-border); } .md-standard b { font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: 44px; line-height: 1; color: var(--md-sky); } .md-standard strong { font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 17px; color: var(--md-ink); } .md-standard p { margin: 0; font-size: 14.5px; line-height: 1.7; color: rgba(28, 28, 28, .7); } @media (max-width: 1080px) { .md-standards { grid-template-columns: 1fr; } } .md-certs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; } .md-cert { background: #fff; border-radius: 12px; padding: 26px; display: flex; flex-direction: column; gap: 12px; box-shadow: inset 0 0 0 1px var(--md-border); } .md-cert__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--wp--preset--color--sky-wash); color: var(--md-sky); display: grid; place-items: center; } .md-cert__title { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 20px; line-height: 1.25; color: var(--md-ink); margin: 0; } .md-cert__meta { margin: 0; font-family: var(--wp--preset--font-family--ui); font-size: 12px; letter-spacing: .5px; color: var(--wp--preset--color--muted); } /* ---------- Contact ---------- */ .md-contact-grid { max-width: var(--md-max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 64px; align-items: start; } .md-contact-cards { display: flex; flex-direction: column; gap: 20px; } .md-ccard { background: #fff; border-radius: 16px; padding: 28px 32px; display: flex; gap: 20px; align-items: center; box-shadow: inset 0 0 0 1px var(--md-border); color: var(--md-ink); } .md-ccard:hover { box-shadow: inset 0 0 0 1px var(--md-sky); color: var(--md-ink); } .md-ccard--top { align-items: flex-start; } .md-ccard__icon { width: 52px; height: 52px; border-radius: 50%; background: var(--md-navy); display: flex; align-items: center; justify-content: center; flex: none; } .md-ccard__body { display: flex; flex-direction: column; gap: 4px; } .md-ccard__label { font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--md-sky); } .md-ccard__value { font-family: var(--wp--preset--font-family--display); font-size: 28px; color: var(--md-ink); } .md-ccard__value--sm { font-size: 22px; line-height: 1.3; } .md-ccard p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(28, 28, 28, .7); } .md-ccard--row { justify-content: space-between; flex-wrap: wrap; } .md-social-pill { height: 40px; border-radius: 20px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; box-shadow: inset 0 0 0 1px rgba(4, 40, 54, .2); font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 13px; color: var(--md-navy); } .md-social-pill:hover { background: var(--md-navy); color: #fff; } .md-appt { background: #fff; border-radius: 20px; padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; gap: 18px; box-shadow: var(--wp--preset--shadow--form); } .md-appt__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; } .md-appt__title { font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: 34px; line-height: 1.15; color: var(--md-ink); } .md-appt__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .md-appt input, .md-appt select, .md-appt textarea { height: 54px; border-radius: 12px; border: 1px solid var(--md-border); background: var(--wp--preset--color--field); padding: 0 18px; font-family: var(--wp--preset--font-family--body); font-size: 14.5px; color: var(--md-navy); outline: none; box-sizing: border-box; width: 100%; } .md-appt textarea { height: auto; padding: 16px 18px; resize: vertical; } .md-appt input:focus, .md-appt select:focus, .md-appt textarea:focus { border-color: var(--md-sky); } .md-appt button[type="submit"] { height: 56px; border-radius: 100px; border: 0; background: var(--md-navy); color: #fff; font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 15px; cursor: pointer; transition: background .2s; } .md-appt button[type="submit"]:hover { background: var(--md-sky); } .md-appt .md-form__status:not(:empty) { border-radius: 12px; background: var(--wp--preset--color--sky-wash); padding: 16px 18px; font-size: 14px; line-height: 1.6; color: var(--wp--preset--color--sky-ink); } .md-form__hp { position: absolute; left: -9999px; } .md-form__status { margin: 0; font-size: 14px; } .md-form__status.is-error { color: #A33A2A; } .md-map { position: relative; border-radius: 16px; overflow: hidden; height: 480px; background: var(--md-navy); } .md-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.7); } .md-map__btn { position: absolute; left: 24px; bottom: 24px; box-shadow: 0 10px 26px rgba(4, 40, 54, .3); } @media (max-width: 1080px) { .md-contact-grid { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 480px) { .md-appt__row { grid-template-columns: 1fr; } } /* ---------- Footer ---------- */ .md-footer { background: var(--md-navy); color: var(--md-cream); } .md-footer a { color: rgba(247, 243, 237, .7); } .md-footer a:hover { color: #fff; } .md-footer__top { max-width: var(--md-max); margin: 0 auto; padding: 80px 24px 72px; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 60px; align-items: start; } .md-footer__brand { display: flex; flex-direction: column; gap: 28px; } .md-flogo { display: flex; align-items: center; gap: 14px; color: var(--md-cream); } .md-flogo img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; display: block; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); } .md-flogo b { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 26px; line-height: 1; color: var(--md-cream); display: block; } .md-flogo span { font-family: var(--wp--preset--font-family--ui); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--md-sky); display: block; margin-top: 5px; } .md-footer__blurb { margin: 0; font-size: 15px; line-height: 1.8; color: rgba(247, 243, 237, .6); max-width: 300px; } .md-fsocial { display: flex; gap: 12px; } .md-fsocial a { width: 44px; height: 44px; border-radius: 22px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); display: flex; align-items: center; justify-content: center; color: var(--md-cream); } .md-fsocial a:hover { background: var(--md-sky); color: #fff; } .md-footer__cta { display: flex; flex-direction: column; gap: 48px; max-width: 840px; } .md-footer__ready { display: flex; flex-direction: column; } .md-footer__ready b { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: clamp(32px, 4.5vw, 52px); line-height: 1.1; color: var(--md-cream); text-wrap: pretty; } .md-footer__ready i { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-style: italic; font-size: clamp(32px, 4.5vw, 52px); line-height: 1.1; color: var(--md-cream); } .md-callform { display: flex; flex-direction: column; gap: 12px; } .md-callform__row { display: flex; gap: 12px; } .md-callform input { flex: 1; min-width: 0; height: 55px; border-radius: 100px; border: 0; background: #fff; padding: 0 24px; font-family: var(--wp--preset--font-family--body); font-weight: 500; font-size: 14px; color: var(--md-navy); outline: none; box-sizing: border-box; } .md-callform__row--send { align-items: center; } .md-callform__row--send input { border-radius: 24px; font-weight: 400; } .md-callform__send { width: 72px; height: 72px; border-radius: 36px; border: 0; background: var(--md-sky); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; transition: background .2s; } .md-callform__send:hover { background: var(--md-sky-light); } .md-callform .md-form__status { padding-left: 24px; color: var(--md-sky-light); } .md-footer__rule { height: 1px; background: rgba(255, 255, 255, .07); } .md-footer__cols { max-width: var(--md-max); margin: 0 auto; padding: 64px 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); gap: 60px; } .md-fcol { display: flex; flex-direction: column; gap: 16px; } .md-fcol > span { font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--md-sky); } .md-fcol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .md-fcol a { font-size: 14px; line-height: 1.3; } .md-fbox { border-radius: 12px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); padding: 24px; display: flex; gap: 16px; } .md-fbox > i { width: 3px; border-radius: 2px; background: var(--md-sky); flex: none; } .md-fbox div { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; color: rgba(247, 243, 237, .8); } .md-fbox b { font-weight: 600; color: var(--md-cream); } .md-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .07); } .md-footer__bottom > div { max-width: var(--md-max); margin: 0 auto; padding: 24px 24px 40px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .md-footer__bottom span, .md-footer__bottom a { font-family: var(--wp--preset--font-family--ui); font-size: 13px; color: rgba(247, 243, 237, .4); } .md-footer__legal { display: flex; gap: 24px; } @media (max-width: 1080px) { .md-footer__top, .md-footer__cols { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 480px) { .md-callform__row { flex-direction: column; } .md-callform__row--send { flex-direction: row; } } /* ---------- Floating WhatsApp + mobile bar ---------- */ .md-wa-float { position: fixed; right: 28px; bottom: 28px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; background: var(--md-sky); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(4, 40, 54, .3); transition: background .25s ease, transform .25s var(--md-ease); } .md-wa-float:hover { background: var(--md-navy); transform: translateY(-3px); } .md-mobile-bar { display: none; } @media (max-width: 1080px) { /* Inset and rounded, so it reads as a pair with the header pill rather than a system tab bar glued to the edge. */ .md-mobile-bar { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 120; background: rgba(4, 40, 54, .93); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 12px 34px -12px rgba(4, 40, 54, .7); display: flex; align-items: stretch; overflow: hidden; } .md-mobile-bar__item { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; padding: 9px 4px 8px; border: 0; background: none; cursor: pointer; font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 10px; letter-spacing: .4px; color: rgba(247, 243, 237, .78); text-decoration: none; min-width: 0; } .md-mobile-bar__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .md-mobile-bar__item--primary { color: var(--md-sky-light); } .md-mobile-bar__item:active { opacity: .7; } .md-wa-float { bottom: 96px; right: 16px; } body { padding-bottom: 92px; } } /* ---------- Article body ---------- */ .md-article { max-width: 760px; margin: 0 auto; } /* post-content wraps the paragraphs in its own element, so the rhythm has to be set inside it as well as on the article's own children. */ .md-article p { font-size: 17.5px; line-height: 1.85; color: rgba(28, 28, 28, .82); } .md-article h2 { margin-top: 48px; } .md-article h3 { margin-top: 36px; } .md-article > * + *, .md-article .entry-content > * + * { margin-top: 26px; } /* The opening paragraph carries the article, so it is set as a standfirst. */ .md-article .entry-content > p:first-child { font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.5; color: var(--md-ink); } .md-article img, .md-article .wp-block-image img { border-radius: 12px; } /* ---------- Editor helpers ---------- */ .editor-styles-wrapper .md-hero, .editor-styles-wrapper .md-inner-hero { margin-top: 0; } .editor-styles-wrapper .md-services__sticky { position: relative; height: auto; } .editor-styles-wrapper .md-hero { height: 520px; min-height: 0; } .md-editor-note { font-family: var(--wp--preset--font-family--ui); font-size: 12px; color: var(--wp--preset--color--muted); padding: 8px 0; } /* ---------- Why Mea Dent: bento ---------- */ .md-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(120px, auto); gap: 16px; align-items: stretch; } .md-bento__cell { border-radius: 18px; display: flex; flex-direction: column; position: relative; overflow: hidden; } .md-bento__num { font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 11px; letter-spacing: 3px; color: var(--md-sky-light); } .md-bento__title { font-family: var(--wp--preset--font-family--display); font-weight: 400; line-height: 1.15; } .md-bento__cell p { margin: 0; line-height: 1.65; } /* 01 — photo */ .md-bento__cell--photo { grid-column: span 7; grid-row: span 2; min-height: 380px; justify-content: flex-end; } .md-bento__cell--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .md-bento__cell--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 40, 54, .05) 30%, rgba(4, 40, 54, .88) 100%); } .md-bento__cell--photo > div { position: relative; z-index: 1; padding: 32px; display: flex; flex-direction: column; gap: 12px; max-width: 520px; } .md-bento__cell--photo .md-bento__title { font-size: 30px; color: #fff; } .md-bento__cell--photo p { font-size: 15px; color: rgba(255, 255, 255, .8); } /* 02 — navy standards */ .md-bento__cell--navy { grid-column: span 5; grid-row: span 2; background: var(--md-navy); padding: 32px; justify-content: space-between; gap: 24px; min-height: 380px; } .md-bento__cell--navy::before { content: ""; position: absolute; right: -70px; top: -70px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(81, 166, 190, .25); } .md-bento__lockup { display: flex; gap: 14px; align-items: baseline; position: relative; } .md-bento__lockup b { font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: clamp(38px, 4.6vw, 68px); line-height: 1; color: var(--md-sky); } .md-bento__lockup span { font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: 28px; color: rgba(247, 243, 237, .4); } .md-bento__cell--navy > div:last-child { display: flex; flex-direction: column; gap: 12px; position: relative; } .md-bento__cell--navy .md-bento__title { font-size: 28px; color: var(--md-cream); } .md-bento__cell--navy p { font-size: 15px; color: rgba(247, 243, 237, .72); } /* 03-05 - small cards. They carry the least copy, so they earn their place through material: a hairline that lights up, a lift on hover, and a number set as a quiet monogram rather than a label. */ .md-bento__cell--sm { grid-column: span 4; padding: 28px; gap: 14px; justify-content: center; transition: transform .4s var(--md-ease), box-shadow .4s ease; } .md-bento__cell--sm::after { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 2px; background: var(--md-sky); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--md-ease); } .md-bento__cell--sm:hover { transform: translateY(-4px); } .md-bento__cell--sm:hover::after { transform: scaleX(1); } .md-bento__cell--cream { background: var(--md-cream); box-shadow: inset 0 0 0 1px rgba(4, 40, 54, .07), 0 1px 2px rgba(4, 40, 54, .04); } .md-bento__cell--cream:hover { box-shadow: inset 0 0 0 1px rgba(4, 40, 54, .07), 0 18px 40px -18px rgba(4, 40, 54, .35); } .md-bento__cell--white { background: #fff; box-shadow: inset 0 0 0 1px rgba(4, 40, 54, .09), 0 1px 2px rgba(4, 40, 54, .04); } .md-bento__cell--white:hover { box-shadow: inset 0 0 0 1px rgba(4, 40, 54, .09), 0 18px 40px -18px rgba(4, 40, 54, .35); } .md-bento__cell--sky { background: var(--md-sky); color: var(--md-navy); } .md-bento__cell--sky::after { background: rgba(255, 255, 255, .7); } .md-bento__cell--sky:hover { box-shadow: 0 18px 40px -18px rgba(29, 100, 112, .6); } .md-bento__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; } .md-bento__icon { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--md-navy); flex: none; transition: transform .4s var(--md-ease); } .md-bento__cell--sm:hover .md-bento__icon { transform: rotate(-6deg) scale(1.06); } .md-bento__cell--cream .md-bento__icon { background: #fff; box-shadow: inset 0 0 0 1px rgba(4, 40, 54, .1); } .md-bento__cell--white .md-bento__icon { background: var(--md-cream); box-shadow: inset 0 0 0 1px rgba(4, 40, 54, .06); } .md-bento__cell--sky .md-bento__icon { background: rgba(255, 255, 255, .4); } .md-bento__cell--sm .md-bento__num { font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: 26px; line-height: 1; letter-spacing: 0; color: rgba(4, 40, 54, .18); } .md-bento__cell--sky .md-bento__num { color: rgba(4, 40, 54, .35); } .md-bento__cell--sm .md-bento__title { font-size: 23px; line-height: 1.2; color: var(--md-ink); letter-spacing: -.2px; } .md-bento__cell--sky .md-bento__title { color: var(--md-navy); } .md-bento__cell--sm p { font-size: 14.5px; line-height: 1.7; color: rgba(28, 28, 28, .66); } .md-bento__near { display: flex; flex-direction: column; margin-top: 2px; } .md-bento__near span { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid rgba(4, 40, 54, .16); } .md-bento__near b { font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 13.5px; color: var(--md-navy); } .md-bento__near em { font-style: normal; font-family: var(--wp--preset--font-family--ui); font-size: 13px; font-variant-numeric: tabular-nums; color: rgba(4, 40, 54, .72); } .md-bento__caption { font-family: var(--wp--preset--font-family--ui); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(4, 40, 54, .55); margin-top: 2px; } @media (max-width: 1080px) { .md-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; } .md-bento__cell { grid-column: auto !important; grid-row: auto !important; } .md-bento__cell--photo, .md-bento__cell--navy { min-height: 320px; } } @media (max-width: 760px) { .md-bento { grid-template-columns: minmax(0, 1fr); } .md-bento__cell--photo { min-height: 320px; } .md-bento__cell--navy { min-height: 0; } } /* ---------- Reviews ---------- */ .md-reviews { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: center; position: relative; max-width: var(--md-max); margin: 0 auto; } .md-reviews__ring { position: absolute; left: -160px; bottom: -260px; width: 620px; height: 620px; border-radius: 50%; border: 1px solid rgba(81, 166, 190, .16); pointer-events: none; } .md-reviews__col { display: flex; flex-direction: column; gap: 22px; } .md-reviews__col h2 { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: clamp(32px, 4.2vw, 60px); line-height: 1.05; color: var(--md-cream); } .md-stars { display: flex; gap: 4px; color: var(--md-sky); } .md-reviews__link { display: flex; align-items: center; gap: 10px; font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 14px; color: var(--md-sky-light); } .md-reviews__link:hover { color: #fff; } .md-reviews__stage { display: flex; flex-direction: column; gap: 32px; min-width: 0; } .md-reviews__deck { position: relative; min-height: 220px; } .md-quote { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 22px; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .7s ease, transform .7s var(--md-ease); } .md-quote:first-child { position: relative; } .md-quote.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; } .md-quote__mark { font-family: var(--wp--preset--font-family--display); font-size: 96px; line-height: .6; color: var(--md-sky); opacity: .7; } .md-quote p { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 300; font-style: italic; font-size: clamp(20px, 2.4vw, 34px); line-height: 1.4; color: var(--md-cream); text-wrap: pretty; } .md-quote cite { display: flex; align-items: center; gap: 14px; font-style: normal; font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 14px; color: var(--md-cream); } .md-quote cite::before { content: ""; width: 28px; height: 1px; background: var(--md-sky); } .md-reviews__dots { display: flex; gap: 10px; align-items: center; } .md-reviews__dots button { width: 10px; height: 10px; border-radius: 5px; border: 0; cursor: pointer; padding: 0; background: rgba(247, 243, 237, .3); transition: all .4s var(--md-ease); } .md-reviews__dots button.is-active { width: 34px; background: var(--md-sky); } @media (max-width: 1080px) { .md-reviews { grid-template-columns: 1fr; } .md-reviews__deck { min-height: 260px; } } @media (max-width: 760px) { .md-reviews__deck { min-height: 300px; } } /* ---------- Showcase: compare + case picker ---------- */ .md-showcase { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; max-width: var(--md-max); margin: 0 auto; } .md-showcase__stage { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #EDE7DC; user-select: none; touch-action: pan-y; } .md-showcase__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .md-showcase__stage .md-compare__before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); } .md-showcase__tag { position: absolute; top: 20px; border-radius: 20px; padding: 7px 14px; font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; z-index: 2; } .md-showcase__tag--before { left: 20px; background: rgba(4, 40, 54, .85); } .md-showcase__tag--after { right: 20px; background: var(--md-sky); } .md-showcase__divider { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .3); pointer-events: none; z-index: 2; } .md-showcase__handle { position: absolute; top: 50%; left: var(--pos, 50%); transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 23px; background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .22); display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 3; color: var(--md-navy); } .md-showcase__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 4; } .md-showcase__col { display: flex; flex-direction: column; gap: 24px; min-width: 0; } .md-showcase__col h2 { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.08; color: var(--md-ink); text-wrap: balance; } .md-showcase__sub { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(28, 28, 28, .65); } .md-cases { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; } .md-cases button { border: 0; background: none; padding: 14px 0; cursor: pointer; display: flex; gap: 16px; align-items: center; text-align: left; width: 100%; border-top: 1px solid rgba(4, 40, 54, .12); } .md-cases li:last-child button { border-bottom: 1px solid rgba(4, 40, 54, .12); } .md-cases i { width: 3px; align-self: stretch; border-radius: 2px; background: rgba(4, 40, 54, .1); flex: none; transition: background .3s; } .md-cases button.is-active i { background: var(--md-sky); } .md-cases span { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; } .md-cases b { font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--md-sky); } .md-cases em { font-style: normal; font-family: var(--wp--preset--font-family--display); font-size: 19px; line-height: 1.25; color: rgba(28, 28, 28, .6); transition: color .3s; } .md-cases button.is-active em { color: var(--md-navy); } .md-showcase__desc { margin: 0; font-size: 14.5px; line-height: 1.7; color: rgba(28, 28, 28, .75); } @media (max-width: 1080px) { .md-showcase { grid-template-columns: 1fr; } } /* ---------- Certificate strip ---------- */ /* The photo anchors the row; the cards sit in a track that pages a screenful at a time, so the wall can hold more than three without getting crowded. */ .md-certstrip { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px; align-items: stretch; } .md-certstrip__photo { position: relative; border-radius: 18px; overflow: hidden; min-height: 0; } .md-certstrip__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .md-certstrip__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 40, 54, 0) 55%, rgba(4, 40, 54, .7) 100%); } .md-certstrip__count { position: absolute; left: 22px; bottom: 20px; z-index: 1; font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #fff; } .md-certstrip__deck { position: relative; display: flex; flex-direction: column; gap: 20px; min-width: 0; } .md-certstrip__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--show) - 1) * 20px) / var(--show)); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; } .md-certstrip__track::-webkit-scrollbar { display: none; } .md-certcard { scroll-snap-align: start; position: relative; background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--md-border), 0 1px 2px rgba(4, 40, 54, .04); padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; transition: transform .4s var(--md-ease), box-shadow .4s ease; } .md-certcard:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(81, 166, 190, .5), 0 20px 44px -20px rgba(4, 40, 54, .4); } .md-certcard__frame { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--wp--preset--color--field); box-shadow: inset 0 0 0 1px rgba(81, 166, 190, .35); display: grid; place-items: center; } /* An empty frame is not a blank box: a faint engraved rule and a guilloche wash read as certificate stock while the scans are still being collected. */ .md-certcard__frame::before { content: ""; position: absolute; inset: 10px; border-radius: 6px; border: 1px solid rgba(81, 166, 190, .28); background-image: repeating-linear-gradient(45deg, rgba(81, 166, 190, .05) 0 1px, transparent 1px 9px), repeating-linear-gradient(-45deg, rgba(81, 166, 190, .05) 0 1px, transparent 1px 9px); pointer-events: none; } .md-certcard__frame:has(img)::before { display: none; } .md-certcard__frame img { width: 100%; height: 100%; object-fit: cover; } .md-certcard__seal { width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(81, 166, 190, .45); display: grid; place-items: center; color: var(--md-sky); } .md-certcard__body { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; } .md-certcard__title { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 16.5px; line-height: 1.25; color: var(--md-navy); text-wrap: pretty; } .md-certcard__meta { margin: 0; font-family: var(--wp--preset--font-family--ui); font-size: 11.5px; letter-spacing: .4px; color: var(--wp--preset--color--muted); } .md-certcard__num { position: absolute; right: 16px; top: 16px; z-index: 1; font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 10.5px; letter-spacing: 2px; color: rgba(4, 40, 54, .35); } .md-certstrip__nav { display: flex; align-items: center; justify-content: flex-end; gap: 12px; } .md-certstrip__progress { margin-right: auto; font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 11.5px; letter-spacing: 2px; font-variant-numeric: tabular-nums; color: rgba(4, 40, 54, .45); } .md-certstrip__arrow { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; flex: none; background: transparent; box-shadow: inset 0 0 0 1px rgba(4, 40, 54, .25); color: var(--md-navy); display: grid; place-items: center; transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease; } .md-certstrip__arrow:hover:not(:disabled) { background: var(--md-navy); color: #fff; box-shadow: none; transform: translateY(-2px); } .md-certstrip__arrow:disabled { opacity: .3; cursor: default; } @media (max-width: 1080px) { .md-certstrip { grid-template-columns: 1fr; } .md-certstrip__photo { min-height: 240px; } .md-certstrip__track { grid-auto-columns: calc((100% - 20px) / 2); } } @media (max-width: 760px) { .md-certstrip__track { grid-auto-columns: 74%; } .md-certstrip__nav { justify-content: space-between; } } /* ---------- Values (numbered columns) ---------- */ .md-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px; list-style: none; margin: 0; padding: 0; } .md-values li { display: flex; flex-direction: column; gap: 24px; } .md-values__rule { width: 40px; height: 2px; background: var(--md-sky); } .md-values__num { font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--md-navy); } .md-values__title { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 32px; line-height: 1.15; color: var(--md-ink); } .md-values p { margin: 0; font-size: 15.5px; line-height: 1.75; color: rgba(28, 28, 28, .72); } @media (max-width: 1080px) { .md-values { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } } @media (max-width: 760px) { .md-values { grid-template-columns: 1fr; gap: 32px; } .md-values__title { font-size: 26px; } } /* ---------- Split: optional inset photo ---------- */ .md-split__media { position: relative; } .md-split__inset { position: absolute; left: -40px; bottom: -40px; width: 220px; display: block; border-radius: 12px; border: 6px solid #fff; box-shadow: 0 18px 40px rgba(4, 40, 54, .18); overflow: hidden; line-height: 0; } .md-split__inset img { width: 100%; height: 160px; object-fit: cover; border-radius: 0; display: block; } @media (max-width: 1080px) { .md-split__inset { left: auto; right: 16px; bottom: -28px; width: 160px; } .md-split__inset img { height: 120px; } } @media (max-width: 760px) { .md-split__inset { display: none; } } /* ---------- Founder: framed variant (About) ---------- */ .md-founder--framed { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); } .md-founder--framed .md-founder__photo::before { content: ""; position: absolute; inset: -14px; border: 1px solid rgba(81, 166, 190, .35); border-radius: 20px; pointer-events: none; } .md-founder--framed .md-founder__photo img { height: 600px; object-position: 50% 30%; } .md-founder--framed .md-founder__name { font-size: clamp(34px, 4vw, 56px); } .md-founder--framed .md-creds { flex-direction: column; gap: 12px; padding-left: 24px; border-left: 2px solid var(--md-sky); } .md-founder--framed .md-creds li { box-shadow: none; border-radius: 0; padding: 0; font-size: 13px; letter-spacing: .5px; } .md-founder__buttons { display: flex; gap: 14px; flex-wrap: wrap; } @media (max-width: 1080px) { .md-founder--framed { grid-template-columns: 1fr; } .md-founder--framed .md-founder__photo img { height: 460px; } } @media (max-width: 760px) { .md-founder--framed .md-founder__photo img { height: 340px; } } /* ---------- Photo band ---------- */ .md-band { position: relative; border-radius: 16px; overflow: hidden; margin: 0; } .md-band img { width: 100%; height: 100%; object-fit: cover; display: block; } .md-band figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 32px; background: linear-gradient(180deg, rgba(4, 40, 54, 0), rgba(4, 40, 54, .75)); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; } .md-band__title { font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: 26px; color: #fff; } .md-band__meta { font-family: var(--wp--preset--font-family--ui); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .7); } @media (max-width: 760px) { .md-band { height: 300px !important; } .md-band figcaption { padding: 20px; } .md-band__title { font-size: 20px; } } /* ---------- Editorial blog row: one lead, two stacked ---------- */ .md-editorial { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; } .md-editorial__side { display: grid; grid-template-rows: 1fr 1fr; gap: 24px; min-width: 0; } .md-lead { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--md-border); color: var(--md-ink); transition: transform .45s var(--md-ease), box-shadow .45s ease; } .md-lead:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(81, 166, 190, .45), 0 26px 56px -26px rgba(4, 40, 54, .45); color: var(--md-ink); } .md-lead__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; } .md-lead__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--md-ease); } .md-lead:hover .md-lead__media img { transform: scale(1.04); } .md-lead__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 26px 26px; } .md-lead__meta { font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--md-sky); } .md-lead__title { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; color: var(--md-ink); text-wrap: pretty; } .md-lead__text { font-size: 14.5px; line-height: 1.7; color: var(--wp--preset--color--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .md-pill { position: absolute; left: 18px; top: 18px; z-index: 1; display: inline-flex; align-items: center; border-radius: 100px; padding: 8px 15px; background: rgba(4, 40, 54, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: #fff; } .md-pill--static { position: static; align-self: flex-start; background: var(--wp--preset--color--sky-wash); color: var(--wp--preset--color--sky-ink); -webkit-backdrop-filter: none; backdrop-filter: none; } .md-side { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--md-border); color: var(--md-ink); transition: transform .45s var(--md-ease), box-shadow .45s ease; } .md-side:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(81, 166, 190, .45), 0 26px 56px -26px rgba(4, 40, 54, .45); color: var(--md-ink); } .md-side__media { position: relative; overflow: hidden; min-height: 150px; } .md-side__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--md-ease); } .md-side:hover .md-side__media img { transform: scale(1.05); } .md-side__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; min-width: 0; } .md-side__title { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 20px; line-height: 1.22; color: var(--md-ink); text-wrap: pretty; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .md-side__text { font-size: 13.5px; line-height: 1.65; color: var(--wp--preset--color--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .md-side__foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .md-side__meta { font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(4, 40, 54, .45); } .md-side__go { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--md-navy); box-shadow: inset 0 0 0 1px rgba(4, 40, 54, .2); transition: background .25s ease, color .25s ease, box-shadow .25s ease; } .md-side:hover .md-side__go { background: var(--md-sky); color: #fff; box-shadow: none; } @media (max-width: 1080px) { .md-editorial { grid-template-columns: 1fr; } .md-editorial__side { grid-template-rows: auto auto; } .md-lead__media { aspect-ratio: 16 / 9; } } @media (max-width: 760px) { .md-side { grid-template-columns: 1fr; } .md-side__media { min-height: 200px; aspect-ratio: 16 / 9; } .md-lead__body { padding: 22px; } } /* ---------- Closing statement ---------- */ .md-closer { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; } .md-closer--rule { max-width: var(--md-max); padding-top: clamp(64px, 8vw, 120px); border-top: 1px solid rgba(4, 40, 54, .12); } .md-closer h2 { margin: 0; max-width: 20ch; font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: clamp(30px, 3.8vw, 52px); line-height: 1.15; color: var(--md-ink); text-wrap: balance; } .md-closer p { margin: 0; max-width: 60ch; font-size: 16px; line-height: 1.75; color: rgba(28, 28, 28, .7); } .md-closer__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .md-section--navy .md-closer h2 { color: var(--md-cream); } .md-section--navy .md-closer p { color: rgba(247, 243, 237, .7); } /* ---------- Map section ---------- */ .md-mapintro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: end; } .md-mapintro .md-lede { margin: 0; } @media (max-width: 1080px) { .md-mapintro { grid-template-columns: 1fr; gap: 20px; } } /* ---------- Featured post ---------- */ .md-feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; color: var(--md-ink); } .md-feature:hover { color: var(--md-ink); } .md-feature__media { display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 5 / 4; } .md-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--md-ease); } .md-feature:hover .md-feature__media img { transform: scale(1.03); } .md-feature__body { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .md-feature__meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .md-feature__badge { border-radius: 4px; background: var(--md-navy); color: #fff; padding: 5px 10px; font-family: var(--wp--preset--font-family--ui); font-weight: 700; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; } .md-feature__cat { font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--md-sky); } .md-feature__date { font-family: var(--wp--preset--font-family--ui); font-size: 12px; color: rgba(28, 28, 28, .5); } .md-feature__title { font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.15; color: var(--md-ink); text-wrap: pretty; } .md-feature__text { font-size: 16px; line-height: 1.75; color: var(--wp--preset--color--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } @media (max-width: 1080px) { .md-feature { grid-template-columns: 1fr; } .md-feature__media { aspect-ratio: 16 / 9; } } /* ---------- Filter pills ---------- */ .md-filters { background: #fff; border-bottom: 1px solid rgba(4, 40, 54, .1); position: sticky; top: var(--md-bar-h); z-index: 20; margin-inline: calc(-1 * var(--md-gutter)); padding-inline: var(--md-gutter); } .md-filters__inner { max-width: var(--md-max); margin: 0 auto; padding: 16px 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .md-pill-btn { border: 1px solid rgba(4, 40, 54, .2); background: transparent; color: rgba(4, 40, 54, .75); border-radius: 100px; padding: 9px 18px; font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 12.5px; letter-spacing: .5px; cursor: pointer; transition: all .2s; } .md-pill-btn:hover { border-color: var(--md-sky); color: var(--md-navy); } .md-pill-btn.is-active { border-color: var(--md-navy); background: var(--md-navy); color: #fff; } /* ---------- Our Work ---------- */ .md-work { display: flex; flex-direction: column; gap: 48px; } .md-case-stage { display: flex; flex-direction: column; gap: 24px; width: 100%; } .md-case-stage .md-compare { height: 600px; background: #EDE7DC; } .md-case-stage__hint { font-family: var(--wp--preset--font-family--ui); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: rgba(28, 28, 28, .5); } .md-work__head { padding-top: 48px; border-top: 1px solid rgba(4, 40, 54, .12); } .md-work__count { font-family: var(--wp--preset--font-family--ui); font-size: 14px; font-variant-numeric: tabular-nums; color: rgba(28, 28, 28, .55); } .md-case-grid { --cols: 3; } .md-post__meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .md-post__meta b { font-weight: 600; color: var(--md-sky); } .md-post__meta i { font-style: normal; font-family: var(--wp--preset--font-family--ui); font-size: 12px; letter-spacing: .4px; text-transform: none; color: rgba(28, 28, 28, .5); } /* ---------- Certificates grid ---------- */ .md-certgrid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 28px; } .md-certcard--lg { padding: 24px; gap: 20px; } .md-certcard--lg .md-certcard__frame { aspect-ratio: 4 / 3; } .md-certcard--lg .md-certcard__title { font-size: 21px; } .md-certcard--lg .md-certcard__num { position: static; } .md-certcard--lg .md-certcard__body { gap: 6px; padding: 0; } @media (max-width: 1080px) { .md-certgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .md-certgrid { grid-template-columns: 1fr; } } /* ---------- Standards, rule variant ---------- */ .md-standards--rule { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .md-standards--rule .md-standard { background: none; box-shadow: none; border-radius: 0; border-top: 1px solid rgba(247, 243, 237, .18); padding: 28px 0 0; gap: 16px; } .md-standards--rule .md-standard b { font-size: clamp(44px, 5vw, 64px); } .md-standards--rule .md-standard strong { font-size: 18px; color: var(--md-cream); } .md-standards--rule .md-standard p { font-size: 15px; line-height: 1.75; color: rgba(247, 243, 237, .65); } @media (max-width: 1080px) { .md-standards--rule { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .md-standards--rule { grid-template-columns: 1fr; } } /* ---------- Reasons with a sticky media column ---------- */ .md-reasons-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 38%); gap: clamp(32px, 5.5vw, 80px); align-items: start; } .md-reasons-split > .md-head { grid-column: 1; } .md-reasons-split .md-reasons { grid-column: 1; } .md-reasons__media { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--md-header-h) + 24px); display: flex; flex-direction: column; gap: 16px; } .md-reasons__media img { width: 100%; height: 320px; object-fit: cover; border-radius: 16px; display: block; } @media (max-width: 1080px) { .md-reasons-split { grid-template-columns: 1fr; } .md-reasons-split > *, .md-reasons__media { grid-column: 1 !important; grid-row: auto !important; } .md-reasons__media { position: static; flex-direction: row; } .md-reasons__media img { height: 240px; } } @media (max-width: 760px) { .md-reasons__media { flex-direction: column; } } /* ---------- Article ---------- */ .md-arthero { padding: calc(var(--md-header-h) + 70px) var(--md-gutter) 0; } .md-arthero__inner { display: flex; flex-direction: column; gap: 26px; } .md-arthero h1 { margin: 0; max-width: 20ch; font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: clamp(34px, 4.8vw, 64px); line-height: 1.1; letter-spacing: -.5px; color: var(--md-ink); text-wrap: balance; } .md-crumb--light { color: rgba(28, 28, 28, .5); } .md-crumb--light a { color: var(--wp--preset--color--link); } .md-crumb--light b { color: var(--md-sky); } .md-byline { margin: 0; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-family: var(--wp--preset--font-family--ui); font-size: 13px; color: rgba(28, 28, 28, .6); } .md-byline__who { display: flex; align-items: center; gap: 10px; } .md-byline img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .md-arthero__media { margin-top: 44px; border-radius: 16px; overflow: hidden; } .md-arthero__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .md-artgrid { max-width: var(--md-max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 28%); gap: clamp(32px, 6.6vw, 96px); align-items: start; } .md-artgrid .md-article { max-width: 760px; margin: 0; } .md-article__foot { margin-top: 32px; padding-top: 32px; border-top: 1px solid rgba(4, 40, 54, .14); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .md-arrow--back svg { transform: none; } .md-arrow--back:hover svg { transform: translateX(-4px); } .md-aside { position: sticky; top: calc(var(--md-header-h) + 20px); display: flex; flex-direction: column; gap: 24px; } .md-aside__cta { background: var(--md-navy); border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 14px; } .md-aside__cta .md-kicker { margin: 0; } .md-aside__line { font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: 26px; line-height: 1.2; color: var(--md-cream); text-wrap: pretty; margin-bottom: 4px; } .md-aside__list { background: #fff; border-radius: 16px; padding: 26px 30px; display: flex; flex-direction: column; gap: 4px; box-shadow: inset 0 0 0 1px var(--md-border); } .md-aside__list .md-kicker { margin: 0 0 8px; } .md-aside__list a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(4, 40, 54, .08); font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 14px; color: var(--md-ink); } .md-aside__list a:hover { color: var(--md-sky); } .md-aside__list svg { flex: none; } @media (max-width: 1080px) { .md-artgrid { grid-template-columns: 1fr; } .md-aside { position: static; } .md-arthero { padding-top: calc(var(--md-header-h) + 40px); } }