.mailerlite-form {
}
.mailerlite-form .mailerlite-form-description {
margin-bottom: 10px;
}
.mailerlite-form .mailerlite-form-field {
margin-bottom: 10px;
}
.mailerlite-form .mailerlite-form-field label {
display: block;
}
.mailerlite-form .mailerlite-subscribe-button-container {
text-align: center;
}
.mailerlite-form input.error {
color: #ff0000;
border-color: #ff0000;
}
.mailerlite-form label.error {
color: #ff0000;
}
.mailerlite-form-response {
margin-top: 20px;
display: none;
text-align: center;
color: #00a154;
}
.mailerlite-form-loader {
display: none;
text-align: center;
font-weight: bold;
margin: 0 20px;
}
.mailerlite-form-error {
display: block;
color: #ff0000;
}
.mailerlite-subscribe-submit{
max-width: 100%;
}html {
scroll-behavior: smooth;
}
body.met-about-standalone {
margin: 0;
padding: 0;
overflow-x: hidden;
background: #f5efe7;
}
.met-about-page {
--met-ink: #22312e;
--met-ink-2: #314540;
--met-ink-soft: #596a64;
--met-paper: #f5efe7;
--met-paper-2: #fbf7f1;
--met-white: #ffffff;
--met-card: #fffaf4;
--met-sage: #6d837b;
--met-sage-dark: #4b655c;
--met-sage-soft: #dfe9e4;
--met-gold: #b68b52;
--met-gold-dark: #8c6735;
--met-gold-soft: #efe1cc;
--met-line: #e5dbcf;
--met-shadow: 0 20px 54px rgba(34, 49, 46, 0.11);
--met-shadow-soft: 0 12px 30px rgba(34, 49, 46, 0.075);
--met-radius: 28px;
--met-max: 1180px;
width: 100%;
min-height: 100vh;
overflow: clip;
color: var(--met-ink);
background: var(--met-paper);
font-family: "Open Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 16px;
line-height: 1.65;
text-align: left;
-webkit-font-smoothing: antialiased;
}
.met-about-page,
.met-about-page * {
box-sizing: border-box;
}
.met-about-page img {
display: block;
max-width: 100%;
height: auto;
}
.met-about-page a {
color: inherit;
}
.met-about-page .met-about-wrap {
width: min(var(--met-max), calc(100% - 40px));
margin-inline: auto;
}
.met-about-page .met-about-center {
text-align: center;
}
.met-about-page h1,
.met-about-page h2,
.met-about-page h3 {
padding: 0;
margin: 0 0 18px;
color: inherit;
font-family: inherit;
font-weight: 850;
line-height: 1.08;
letter-spacing: -0.036em;
}
.met-about-page h1 {
max-width: 840px;
font-size: clamp(2.7rem, 5vw, 5rem);
}
.met-about-page h2 {
font-size: clamp(2rem, 4vw, 3.5rem);
}
.met-about-page h3 {
font-size: 1.3rem;
letter-spacing: -0.022em;
}
.met-about-page p {
padding: 0;
margin: 0 0 18px;
}
.met-about-page ul {
padding: 0;
margin: 0;
list-style: none;
}
.met-about-page .met-about-lead {
color: var(--met-ink-soft);
font-size: clamp(1.06rem, 1.7vw, 1.24rem);
line-height: 1.72;
}
.met-about-page .met-about-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
color: var(--met-sage-dark);
font-size: 0.76rem;
font-weight: 850;
letter-spacing: 0.09em;
line-height: 1.4;
text-transform: uppercase;
}
.met-about-page .met-about-eyebrow::before {
width: 30px;
height: 2px;
flex: 0 0 auto;
background: var(--met-gold);
content: "";
}
.met-about-page .met-about-gold {
color: #efd19e;
}
.met-about-page .met-about-heading {
max-width: 900px;
margin-inline: auto;
margin-bottom: 46px;
}
.met-about-page .met-about-heading > p {
max-width: 750px;
margin-inline: auto;
color: var(--met-ink-soft);
font-size: 1.08rem;
}
.met-about-page .met-about-section {
padding: 94px 0;
}
.met-about-page .met-about-white {
background: var(--met-white);
}
.met-about-page .met-about-soft {
background: var(--met-paper-2);
}
.met-about-page .met-about-sage {
background: linear-gradient(180deg, #edf4f0 0%, #e2ebe6 100%);
}
.met-about-page .met-about-dark {
background: var(--met-ink);
color: var(--met-white);
}
.met-about-page .met-about-dark .met-about-heading > p {
color: #cbd7d3;
}
.met-about-page .met-about-btn {
min-height: 58px;
max-width: 100%;
padding: 13px 27px;
border: 1px solid transparent;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
text-decoration: none;
font-size: 0.94rem;
font-weight: 850;
line-height: 1.35;
text-align: center;
white-space: normal;
transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.met-about-page .met-about-btn:hover {
transform: translateY(-2px);
}
.met-about-page .met-about-btn:focus-visible,
.met-about-page a:focus-visible,
.met-about-page summary:focus-visible {
outline: 3px solid #d7a969;
outline-offset: 4px;
}
.met-about-page .met-about-btn--primary {
background: var(--met-gold);
box-shadow: 0 14px 30px rgba(182, 139, 82, 0.24);
color: #21170c;
}
.met-about-page .met-about-btn--primary:hover {
background: #c39961;
color: #21170c;
}
.met-about-page .met-about-btn--light {
border-color: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.1);
color: var(--met-white);
}
.met-about-page .met-about-btn--light:hover {
background: rgba(255, 255, 255, 0.17);
}
.met-about-page .met-about-btn--outline {
border-color: rgba(255, 255, 255, 0.32);
background: transparent;
color: var(--met-white);
}
.met-about-page .met-about-btn--outline:hover {
background: rgba(255, 255, 255, 0.08);
}
.met-about-page .met-about-btn--full {
width: 100%;
}
.met-about-page .met-about-text-link {
color: var(--met-sage-dark);
font-weight: 800;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 5px;
}
.met-about-page .met-about-skip {
position: fixed;
top: 10px;
left: 10px;
z-index: 99999;
padding: 11px 16px;
border-radius: 8px;
background: var(--met-white);
box-shadow: var(--met-shadow);
color: var(--met-ink);
font-weight: 800;
text-decoration: none;
transform: translateY(-160%);
}
.met-about-page .met-about-skip:focus {
transform: translateY(0);
} .met-about-page .met-about-topbar {
position: relative;
z-index: 20;
border-bottom: 1px solid rgba(34, 49, 46, 0.08);
background: rgba(251, 247, 241, 0.92);
backdrop-filter: blur(12px);
}
.met-about-page .met-about-topbar__inner {
min-height: 78px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
}
.met-about-page .met-about-brand {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--met-ink);
text-decoration: none;
}
.met-about-page .met-about-brand__logo,
.met-about-page .met-about-brand__mark {
width: 44px;
height: 44px;
flex: 0 0 44px;
border-radius: 13px;
}
.met-about-page .met-about-brand__logo {
object-fit: contain;
}
.met-about-page .met-about-brand__mark {
display: grid;
place-items: center;
background: var(--met-ink);
color: #efd19e;
font-size: 0.62rem;
font-weight: 900;
letter-spacing: 0.08em;
}
.met-about-page .met-about-brand strong,
.met-about-page .met-about-brand small {
display: block;
}
.met-about-page .met-about-brand strong {
font-size: 0.92rem;
}
.met-about-page .met-about-brand small {
color: var(--met-ink-soft);
font-size: 0.68rem;
}
.met-about-page .met-about-topbar__link {
color: var(--met-sage-dark);
font-size: 0.84rem;
font-weight: 800;
text-decoration: none;
} .met-about-page .met-about-hero {
position: relative;
padding: 88px 0 92px;
background:
radial-gradient(circle at 82% 14%, rgba(182, 139, 82, 0.18), transparent 25%),
radial-gradient(circle at 12% 86%, rgba(109, 131, 123, 0.13), transparent 25%),
linear-gradient(150deg, #fbf7f1 0%, #f2ebe2 100%);
}
.met-about-page .met-about-hero::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 6px;
background: linear-gradient(90deg, var(--met-sage-dark), var(--met-gold), var(--met-sage-dark));
content: "";
}
.met-about-page .met-about-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(380px, 0.88fr);
align-items: center;
gap: 70px;
}
.met-about-page .met-about-hero h1 {
max-width: 780px;
}
.met-about-page .met-about-hero__copy .met-about-lead {
max-width: 720px;
}
.met-about-page .met-about-hero__detail {
max-width: 720px;
color: var(--met-ink-2);
font-size: 0.98rem;
}
.met-about-page .met-about-hero__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 18px 22px;
margin-top: 30px;
}
.met-about-page .met-about-trust-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 13px 20px;
margin-top: 28px;
color: var(--met-ink-soft);
font-size: 0.86rem;
font-weight: 750;
}
.met-about-page .met-about-trust-row span {
display: inline-flex;
align-items: center;
gap: 7px;
}
.met-about-page .met-about-trust-row i {
width: 21px;
height: 21px;
border-radius: 999px;
display: inline-grid;
place-items: center;
background: var(--met-sage-dark);
color: var(--met-white);
font-size: 0.7rem;
font-style: normal;
}
.met-about-page .met-about-hero__visual {
position: relative;
min-height: 620px;
}
.met-about-page .met-about-photo-frame,
.met-about-page .met-about-route-visual {
width: min(100%, 475px);
min-height: 548px;
margin-left: auto;
border: 1px solid rgba(34, 49, 46, 0.1);
border-radius: 36px;
box-shadow: var(--met-shadow);
overflow: hidden;
}
.met-about-page .met-about-photo-frame {
background: var(--met-sage-soft);
}
.met-about-page .met-about-hero__image {
width: 100%;
height: 548px;
object-fit: cover;
}
.met-about-page .met-about-route-visual {
position: relative;
padding: 38px 33px;
background: linear-gradient(150deg, #fffaf4 0%, #f6ede1 100%);
transform: rotate(1.2deg);
}
.met-about-page .met-about-route-visual::after {
position: absolute;
right: -65px;
bottom: -65px;
width: 210px;
height: 210px;
border: 36px solid rgba(182, 139, 82, 0.15);
border-radius: 50%;
content: "";
}
.met-about-page .met-about-route-visual__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
padding-bottom: 20px;
border-bottom: 1px solid var(--met-line);
font-size: 0.62rem;
font-weight: 850;
letter-spacing: 0.1em;
}
.met-about-page .met-about-route-visual__top b {
color: var(--met-gold-dark);
}
.met-about-page .met-about-route-visual__title {
display: block;
max-width: 360px;
margin: 31px 0 28px;
font-size: clamp(2rem, 3.5vw, 3rem);
letter-spacing: -0.05em;
line-height: 1.02;
}
.met-about-page .met-about-route-visual__items {
position: relative;
z-index: 1;
display: grid;
gap: 11px;
}
.met-about-page .met-about-route-visual__items span {
min-width: 0;
padding: 14px 15px;
border: 1px solid var(--met-line);
border-radius: 16px;
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.76);
font-size: 0.77rem;
font-weight: 750;
line-height: 1.45;
}
.met-about-page .met-about-route-visual__items i {
width: 28px;
height: 28px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--met-ink);
color: var(--met-white);
font-size: 0.62rem;
font-style: normal;
}
.met-about-page .met-about-truth-card {
position: absolute;
border-radius: 20px;
box-shadow: var(--met-shadow);
}
.met-about-page .met-about-truth-card {
right: -22px;
bottom: 1px;
max-width: 320px;
padding: 21px 23px;
border: 1px solid rgba(229, 219, 207, 0.9);
background: rgba(255, 250, 244, 0.96);
backdrop-filter: blur(12px);
}
.met-about-page .met-about-truth-card strong {
display: block;
margin-bottom: 7px;
font-size: 0.94rem;
}
.met-about-page .met-about-truth-card p {
margin: 0;
color: var(--met-ink-soft);
font-size: 0.79rem;
line-height: 1.55;
} .met-about-page .met-about-situation-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.met-about-page .met-about-card {
min-width: 0;
padding: 27px 24px;
border: 1px solid var(--met-line);
border-radius: var(--met-radius);
background: var(--met-card);
box-shadow: var(--met-shadow-soft);
}
.met-about-page .met-about-card__icon {
width: 46px;
height: 46px;
margin-bottom: 21px;
border-radius: 14px;
display: grid;
place-items: center;
background: var(--met-sage-soft);
color: var(--met-sage-dark);
font-size: 1.1rem;
font-weight: 850;
}
.met-about-page .met-about-card p {
color: var(--met-ink-soft);
font-size: 0.91rem;
}
.met-about-page .met-about-card a {
color: var(--met-sage-dark);
font-size: 0.82rem;
font-weight: 850;
text-decoration: none;
}
.met-about-page .met-about-reframe {
max-width: 950px;
margin: 42px auto 0;
padding: 25px 30px;
border-left: 5px solid var(--met-gold);
border-radius: 0 18px 18px 0;
background: var(--met-paper);
}
.met-about-page .met-about-reframe strong,
.met-about-page .met-about-reframe span {
display: block;
}
.met-about-page .met-about-reframe strong {
font-size: 1.12rem;
}
.met-about-page .met-about-reframe span {
margin-top: 4px;
color: var(--met-ink-soft);
} .met-about-page .met-about-service-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.met-about-page .met-about-service-card {
min-width: 0;
padding: 34px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 30px;
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.075);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
}
.met-about-page .met-about-service-card--featured {
border-color: rgba(239, 209, 158, 0.58);
background: linear-gradient(145deg, rgba(109, 131, 123, 0.46), rgba(255, 255, 255, 0.08));
}
.met-about-page .met-about-service-card__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 23px;
}
.met-about-page .met-about-service-card__number {
color: rgba(255, 255, 255, 0.24);
font-size: 2.3rem;
font-weight: 900;
letter-spacing: -0.07em;
line-height: 1;
}
.met-about-page .met-about-service-card__badge {
padding: 7px 11px;
border: 1px solid rgba(239, 209, 158, 0.24);
border-radius: 999px;
background: rgba(239, 209, 158, 0.1);
color: #efd19e;
font-size: 0.67rem;
font-weight: 850;
letter-spacing: 0.03em;
text-align: center;
}
.met-about-page .met-about-service-card h3 {
margin-bottom: 13px;
font-size: clamp(1.65rem, 3vw, 2.25rem);
}
.met-about-page .met-about-service-card__price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px 14px;
margin-bottom: 20px;
}
.met-about-page .met-about-service-card__price strong {
color: #efd19e;
font-size: 1.9rem;
letter-spacing: -0.04em;
}
.met-about-page .met-about-service-card__price span {
color: #cbd7d3;
font-size: 0.82rem;
font-weight: 750;
}
.met-about-page .met-about-service-card__description {
color: #d9e2df;
}
.met-about-page .met-about-service-card ul {
display: grid;
gap: 9px;
margin: 7px 0 25px;
}
.met-about-page .met-about-service-card li {
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
align-items: start;
gap: 10px;
color: #e5ede9;
font-size: 0.88rem;
}
.met-about-page .met-about-service-card li i {
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--met-gold);
color: var(--met-ink);
font-size: 0.65rem;
font-style: normal;
font-weight: 900;
}
.met-about-page .met-about-service-card__fit {
margin-top: auto;
margin-bottom: 23px;
padding: 18px 19px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 18px;
background: rgba(255, 255, 255, 0.06);
}
.met-about-page .met-about-service-card__fit strong,
.met-about-page .met-about-service-card__fit span {
display: block;
}
.met-about-page .met-about-service-card__fit strong {
margin-bottom: 4px;
color: #efd19e;
font-size: 0.78rem;
}
.met-about-page .met-about-service-card__fit span {
color: #cbd7d3;
font-size: 0.82rem;
} .met-about-page .met-about-value-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.met-about-page .met-about-value-card {
min-width: 0;
padding: 29px 25px;
border: 1px solid var(--met-line);
border-radius: var(--met-radius);
background: var(--met-white);
box-shadow: var(--met-shadow-soft);
}
.met-about-page .met-about-value-card > span {
display: block;
margin-bottom: 27px;
color: var(--met-gold-dark);
font-size: 2.2rem;
font-weight: 900;
letter-spacing: -0.06em;
line-height: 1;
}
.met-about-page .met-about-value-card p {
margin: 0;
color: var(--met-ink-soft);
font-size: 0.9rem;
} .met-about-page .met-about-steps {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.met-about-page .met-about-step {
min-width: 0;
padding: 31px 25px 26px;
border: 1px solid var(--met-line);
border-radius: var(--met-radius);
background: var(--met-card);
box-shadow: var(--met-shadow-soft);
}
.met-about-page .met-about-step > span {
display: block;
margin-bottom: 28px;
color: var(--met-gold-dark);
font-size: 2.35rem;
font-weight: 850;
letter-spacing: -0.06em;
line-height: 1;
}
.met-about-page .met-about-step p {
margin: 0;
color: var(--met-ink-soft);
font-size: 0.9rem;
} .met-about-page .met-about-about-grid {
display: grid;
grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.15fr);
align-items: center;
gap: 72px;
}
.met-about-page .met-about-about-photo {
position: relative;
}
.met-about-page .met-about-about-photo__image,
.met-about-page .met-about-portrait-placeholder {
width: 100%;
height: 530px;
border-radius: 30px;
box-shadow: var(--met-shadow);
}
.met-about-page .met-about-about-photo__image {
object-fit: cover;
}
.met-about-page .met-about-portrait-placeholder {
display: grid;
place-content: center;
gap: 13px;
background:
radial-gradient(circle at 75% 25%, rgba(239, 209, 158, 0.35), transparent 24%),
linear-gradient(145deg, var(--met-sage-soft), #cbdad3);
color: var(--met-sage-dark);
text-align: center;
}
.met-about-page .met-about-portrait-placeholder > span {
width: 108px;
height: 108px;
margin: 0 auto;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--met-sage-dark);
color: var(--met-white);
font-size: 1.9rem;
font-weight: 850;
letter-spacing: 0.04em;
}
.met-about-page .met-about-portrait-placeholder small {
font-weight: 800;
line-height: 1.4;
}
.met-about-page .met-about-about-photo > div:last-child {
position: relative;
width: calc(100% - 38px);
margin: -55px auto 0;
padding: 18px 20px;
border: 1px solid var(--met-line);
border-radius: 18px;
background: rgba(255, 255, 255, 0.96);
box-shadow: var(--met-shadow-soft);
}
.met-about-page .met-about-about-photo > div:last-child strong,
.met-about-page .met-about-about-photo > div:last-child span {
display: block;
}
.met-about-page .met-about-about-photo > div:last-child span {
margin-top: 3px;
color: var(--met-ink-soft);
font-size: 0.78rem;
}
.met-about-page .met-about-human-note {
margin-top: 27px;
padding: 22px 24px;
border-left: 4px solid var(--met-gold);
border-radius: 0 17px 17px 0;
background: var(--met-paper);
}
.met-about-page .met-about-human-note strong,
.met-about-page .met-about-human-note span {
display: block;
}
.met-about-page .met-about-human-note span {
margin-top: 4px;
color: var(--met-ink-soft);
font-size: 0.88rem;
}
.met-about-page .met-about-proof-heading {
margin-top: 90px;
margin-bottom: 38px;
}
.met-about-page .met-about-testimonials {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.met-about-page .met-about-quote {
min-width: 0;
padding: 28px;
margin: 0;
border: 1px solid var(--met-line);
border-radius: var(--met-radius);
background: var(--met-card);
box-shadow: var(--met-shadow-soft);
}
.met-about-page .met-about-quote__head {
display: flex;
align-items: center;
gap: 13px;
margin-bottom: 20px;
}
.met-about-page .met-about-quote__photo,
.met-about-page .met-about-quote__initial {
width: 52px;
height: 52px;
flex: 0 0 52px;
border-radius: 50%;
}
.met-about-page .met-about-quote__photo {
object-fit: cover;
}
.met-about-page .met-about-quote__initial {
display: grid;
place-items: center;
background: var(--met-sage-soft);
color: var(--met-sage-dark);
font-weight: 850;
}
.met-about-page .met-about-quote__head strong,
.met-about-page .met-about-quote__head small {
display: block;
}
.met-about-page .met-about-quote__head small {
margin-top: 2px;
color: var(--met-ink-soft);
}
.met-about-page .met-about-quote p {
margin: 0;
color: var(--met-ink-2);
font-size: 1rem;
font-style: italic;
} .met-about-page .met-about-faq {
max-width: 920px;
margin: 0 auto;
display: grid;
gap: 12px;
}
.met-about-page .met-about-faq details {
padding: 20px 23px;
border: 1px solid var(--met-line);
border-radius: 20px;
background: var(--met-card);
box-shadow: var(--met-shadow-soft);
}
.met-about-page .met-about-faq summary {
display: flex;
justify-content: space-between;
gap: 20px;
cursor: pointer;
color: var(--met-ink);
font-weight: 800;
list-style: none;
}
.met-about-page .met-about-faq summary::-webkit-details-marker {
display: none;
}
.met-about-page .met-about-faq summary::after {
flex: 0 0 auto;
color: var(--met-gold-dark);
content: "+";
font-size: 1.35rem;
line-height: 1;
}
.met-about-page .met-about-faq details[open] summary::after {
content: "–";
}
.met-about-page .met-about-faq details p {
margin: 14px 0 0;
color: var(--met-ink-soft);
} .met-about-page .met-about-final {
padding: 100px 0 112px;
background: var(--met-ink);
color: var(--met-white);
}
.met-about-page .met-about-final__inner {
max-width: 930px;
text-align: center;
}
.met-about-page .met-about-final__inner .met-about-eyebrow {
justify-content: center;
}
.met-about-page .met-about-final__inner h2 {
max-width: 820px;
margin-inline: auto;
}
.met-about-page .met-about-final__inner > p {
max-width: 700px;
margin: 0 auto 29px;
color: #cad7d2;
font-size: 1.08rem;
}
.met-about-page .met-about-final__actions {
display: flex;
align-items: stretch;
justify-content: center;
flex-wrap: wrap;
gap: 13px;
}
.met-about-page .met-about-final__facts {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 28px;
}
.met-about-page .met-about-final__facts span {
padding: 7px 11px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
color: #d3dfdb;
font-size: 0.76rem;
font-weight: 700;
}
.met-about-page .met-about-legal-links {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 30px;
color: #aebdb8;
font-size: 0.75rem;
}
.met-about-page .met-about-legal-links a {
text-underline-offset: 4px;
}
.met-about-page .met-about-sticky-mobile {
display: none;
} .met-about-page.met-about-js [data-reveal] {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.52s ease, transform 0.52s ease;
}
.met-about-page.met-about-js [data-reveal].met-is-visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 1050px) {
.met-about-page .met-about-hero__grid,
.met-about-page .met-about-about-grid {
gap: 46px;
}
.met-about-page .met-about-situation-grid,
.met-about-page .met-about-value-grid,
.met-about-page .met-about-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.met-about-page .met-about-hero__grid,
.met-about-page .met-about-about-grid {
grid-template-columns: 1fr;
}
.met-about-page .met-about-hero__visual,
.met-about-page .met-about-about-photo {
width: min(100%, 620px);
margin-inline: auto;
}
.met-about-page .met-about-photo-frame,
.met-about-page .met-about-route-visual {
width: min(100%, 540px);
margin-inline: auto;
}
.met-about-page .met-about-truth-card {
right: 0;
}
}
@media (max-width: 760px) {
.met-about-page {
padding-bottom: 78px;
font-size: 15.5px;
}
.met-about-page .met-about-wrap {
width: min(100% - 28px, var(--met-max));
}
.met-about-page .met-about-topbar__inner {
min-height: 70px;
}
.met-about-page .met-about-section {
padding: 72px 0;
}
.met-about-page .met-about-hero {
padding: 64px 0 70px;
}
.met-about-page h1 {
font-size: clamp(2.25rem, 11.6vw, 4rem);
}
.met-about-page h2 {
font-size: clamp(1.9rem, 8.7vw, 3rem);
}
.met-about-page .met-about-hero__grid {
gap: 38px;
}
.met-about-page .met-about-hero__actions {
align-items: stretch;
flex-direction: column;
}
.met-about-page .met-about-hero__actions .met-about-btn {
width: 100%;
}
.met-about-page .met-about-hero__actions .met-about-text-link {
text-align: center;
}
.met-about-page .met-about-trust-row {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
.met-about-page .met-about-hero__visual {
min-height: auto;
padding-bottom: 86px;
}
.met-about-page .met-about-photo-frame,
.met-about-page .met-about-route-visual,
.met-about-page .met-about-hero__image {
min-height: 485px;
height: 485px;
}
.met-about-page .met-about-route-visual {
height: auto;
padding: 31px 27px;
transform: none;
}
.met-about-page .met-about-truth-card {
right: 5px;
bottom: 0;
max-width: 88%;
}
.met-about-page .met-about-service-grid,
.met-about-page .met-about-testimonials {
grid-template-columns: 1fr;
}
.met-about-page .met-about-service-card {
padding: 29px 25px;
}
.met-about-page .met-about-sticky-mobile {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 9990;
padding: 10px 13px calc(10px + env(safe-area-inset-bottom));
border-top: 1px solid var(--met-line);
display: block;
background: rgba(255, 250, 244, 0.94);
box-shadow: 0 -12px 35px rgba(34, 49, 46, 0.12);
backdrop-filter: blur(12px);
}
.met-about-page .met-about-sticky-mobile .met-about-btn {
width: 100%;
min-height: 52px;
padding: 10px 18px;
}
}
@media (max-width: 560px) {
.met-about-page .met-about-topbar__link {
display: none;
}
.met-about-page .met-about-brand small {
display: none;
}
.met-about-page .met-about-situation-grid,
.met-about-page .met-about-value-grid,
.met-about-page .met-about-steps {
grid-template-columns: 1fr;
}
.met-about-page .met-about-heading {
margin-bottom: 34px;
}
.met-about-page .met-about-card,
.met-about-page .met-about-value-card,
.met-about-page .met-about-step,
.met-about-page .met-about-quote {
padding: 24px 21px;
border-radius: 22px;
}
.met-about-page .met-about-service-card {
padding: 25px 21px;
border-radius: 24px;
}
.met-about-page .met-about-service-card__top {
align-items: flex-start;
}
.met-about-page .met-about-service-card__badge {
max-width: 72%;
}
.met-about-page .met-about-hero__visual {
padding-bottom: 108px;
}
.met-about-page .met-about-truth-card {
right: 0;
bottom: 0;
max-width: calc(100% - 18px);
}
.met-about-page .met-about-photo-frame,
.met-about-page .met-about-route-visual,
.met-about-page .met-about-hero__image {
min-height: 440px;
height: 440px;
}
.met-about-page .met-about-route-visual {
height: auto;
min-height: 505px;
padding: 27px 22px;
}
.met-about-page .met-about-route-visual__title {
margin: 25px 0;
font-size: 2.05rem;
}
.met-about-page .met-about-route-visual__items span {
padding: 12px;
font-size: 0.72rem;
}
.met-about-page .met-about-about-photo__image,
.met-about-page .met-about-portrait-placeholder {
height: 440px;
}
.met-about-page .met-about-final {
padding: 80px 0 95px;
}
.met-about-page .met-about-final__actions {
flex-direction: column;
}
.met-about-page .met-about-final__actions .met-about-btn {
width: 100%;
}
}
@media (max-width: 360px) {
.met-about-page .met-about-wrap {
width: calc(100% - 22px);
}
.met-about-page h1 {
font-size: 2.15rem;
}
.met-about-page h2 {
font-size: 1.82rem;
}
.met-about-page .met-about-brand strong {
font-size: 0.82rem;
}
.met-about-page .met-about-service-card,
.met-about-page .met-about-card,
.met-about-page .met-about-value-card,
.met-about-page .met-about-step {
padding-right: 18px;
padding-left: 18px;
}
.met-about-page .met-about-btn {
padding-right: 18px;
padding-left: 18px;
font-size: 0.87rem;
}
} .met-about-page .met-about-hero h1 {
max-width: 770px;
font-size: clamp(2.65rem, 4.55vw, 4.65rem);
}
.met-about-page .met-about-hero__grid {
grid-template-columns: minmax(0, 1.08fr) minmax(370px, 0.92fr);
gap: 68px;
}
.met-about-page .met-about-photo-frame,
.met-about-page .met-about-portrait-placeholder,
.met-about-page .met-about-hero__image {
min-height: 590px;
height: 590px;
}
.met-about-page .met-about-hero__image {
object-position: center top;
}
.met-about-page .met-about-hero__statement {
width: min(calc(100% - 34px), 445px);
align-items: start;
}
.met-about-page .met-about-hero__statement p {
margin: 0;
color: var(--met-ink-2);
font-size: 0.83rem;
font-weight: 750;
line-height: 1.58;
}
.met-about-page .met-about-story-grid {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
align-items: start;
gap: 86px;
}
.met-about-page .met-about-story-grid .met-about-heading {
position: sticky;
top: 126px;
max-width: 520px;
margin: 0;
}
body.admin-bar .met-about-page .met-about-story-grid .met-about-heading {
top: 158px;
}
.met-about-page .met-about-story-copy {
padding-top: 8px;
}
.met-about-page .met-about-story-copy p {
margin-bottom: 24px;
color: var(--met-ink-2);
font-size: clamp(1rem, 1.4vw, 1.11rem);
line-height: 1.82;
}
.met-about-page .met-about-story-copy p:first-child::first-letter {
float: left;
margin: 8px 10px 0 0;
color: var(--met-gold-dark);
font-size: 3.8rem;
font-weight: 900;
line-height: 0.72;
}
.met-about-page .met-about-philosophy {
position: relative;
margin: 72px 0 0;
padding: 42px 50px;
border: 1px solid rgba(182, 139, 82, 0.24);
border-radius: 30px;
display: grid;
grid-template-columns: 74px minmax(0, 1fr);
align-items: start;
gap: 25px;
background: linear-gradient(135deg, #edf4f0, #fff8ef);
box-shadow: var(--met-shadow-soft);
}
.met-about-page .met-about-philosophy > span {
height: 64px;
color: var(--met-gold);
font-family: Georgia, serif;
font-size: 6.6rem;
line-height: 0.9;
}
.met-about-page .met-about-philosophy strong {
display: block;
margin-bottom: 10px;
color: var(--met-ink);
font-size: clamp(1.55rem, 3vw, 2.45rem);
font-weight: 900;
letter-spacing: -0.035em;
line-height: 1.15;
}
.met-about-page .met-about-philosophy p {
max-width: 820px;
margin: 0;
color: var(--met-ink-soft);
font-size: 1rem;
}
.met-about-page .met-about-heading--dark h2 {
color: var(--met-white);
}
.met-about-page .met-about-lens-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.met-about-page .met-about-lens-card {
min-width: 0;
padding: 32px 29px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 25px;
background: rgba(255, 255, 255, 0.055);
}
.met-about-page .met-about-lens-card > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 52px;
}
.met-about-page .met-about-lens-card > div span {
color: #efd19e;
font-size: 0.74rem;
font-weight: 900;
letter-spacing: 0.12em;
}
.met-about-page .met-about-lens-card > div small {
padding: 6px 10px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
color: #dce7e3;
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.met-about-page .met-about-lens-card h3 {
color: var(--met-white);
font-size: 1.42rem;
}
.met-about-page .met-about-lens-card p {
margin: 0;
color: #c7d4d0;
font-size: 0.92rem;
}
.met-about-page .met-about-principle-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.met-about-page .met-about-principle-card {
position: relative;
min-width: 0;
padding: 32px 33px 32px 94px;
border: 1px solid var(--met-line);
border-radius: 24px;
background: var(--met-white);
box-shadow: var(--met-shadow-soft);
}
.met-about-page .met-about-principle-card > span {
position: absolute;
top: 32px;
left: 30px;
width: 45px;
height: 45px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--met-sage-dark);
color: var(--met-white);
font-size: 0.7rem;
font-weight: 900;
}
.met-about-page .met-about-principle-card h3 {
margin-bottom: 10px;
}
.met-about-page .met-about-principle-card p {
margin: 0;
color: var(--met-ink-soft);
font-size: 0.92rem;
}
.met-about-page .met-about-fit-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.met-about-page .met-about-fit-card {
position: relative;
min-width: 0;
padding: 42px 40px;
border: 1px solid var(--met-line);
border-radius: 30px;
overflow: hidden;
}
.met-about-page .met-about-fit-card--yes {
background: linear-gradient(145deg, #e9f1ed, #f8fbf9);
}
.met-about-page .met-about-fit-card--no {
background: linear-gradient(145deg, #f7f1e9, #fffbf5);
}
.met-about-page .met-about-fit-card__icon {
position: absolute;
top: 27px;
right: 30px;
color: rgba(75, 101, 92, 0.16);
font-size: 4.7rem;
font-weight: 900;
line-height: 1;
}
.met-about-page .met-about-fit-card--no .met-about-fit-card__icon {
color: rgba(182, 139, 82, 0.18);
}
.met-about-page .met-about-fit-card h2 {
max-width: 430px;
margin-bottom: 28px;
font-size: clamp(1.55rem, 2.6vw, 2.25rem);
}
.met-about-page .met-about-fit-card ul {
display: grid;
gap: 14px;
}
.met-about-page .met-about-fit-card li {
display: grid;
grid-template-columns: 25px minmax(0, 1fr);
gap: 11px;
color: var(--met-ink-2);
font-size: 0.94rem;
}
.met-about-page .met-about-fit-card li i {
width: 24px;
height: 24px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--met-sage-dark);
color: var(--met-white);
font-size: 0.72rem;
font-style: normal;
font-weight: 900;
}
.met-about-page .met-about-fit-card--no li i {
background: var(--met-gold-dark);
}
.met-about-page .met-about-personal {
background:
radial-gradient(circle at 12% 20%, rgba(182, 139, 82, 0.16), transparent 25%),
linear-gradient(145deg, #f5efe7, #e8f0ec);
}
.met-about-page .met-about-personal__grid {
display: grid;
grid-template-columns: minmax(330px, 0.9fr) minmax(0, 1.1fr);
align-items: center;
gap: 82px;
}
.met-about-page .met-about-personal__visual {
position: relative;
}
.met-about-page .met-about-personal__image,
.met-about-page .met-about-personal__placeholder {
width: 100%;
height: 530px;
border-radius: 32px;
box-shadow: var(--met-shadow);
}
.met-about-page .met-about-personal__image {
object-fit: cover;
}
.met-about-page .met-about-personal__placeholder {
padding: 45px;
display: flex;
justify-content: flex-end;
flex-direction: column;
background:
linear-gradient(180deg, transparent, rgba(19, 37, 32, 0.62)),
radial-gradient(circle at 74% 18%, rgba(239, 209, 158, 0.32), transparent 25%),
linear-gradient(145deg, #6d837b, #29423a);
color: var(--met-white);
}
.met-about-page .met-about-personal__placeholder > span {
font-size: clamp(2.5rem, 5vw, 4.6rem);
font-weight: 900;
letter-spacing: -0.05em;
line-height: 0.98;
}
.met-about-page .met-about-personal__placeholder small {
margin-top: 18px;
color: #dbe5e1;
font-size: 0.9rem;
font-weight: 700;
}
.met-about-page .met-about-hobby-row {
position: relative;
z-index: 2;
width: calc(100% - 34px);
margin: -26px auto 0;
padding: 14px;
border: 1px solid var(--met-line);
border-radius: 18px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
background: rgba(255, 250, 244, 0.97);
box-shadow: var(--met-shadow-soft);
}
.met-about-page .met-about-hobby-row span {
padding: 6px 10px;
border-radius: 999px;
background: var(--met-sage-soft);
color: var(--met-sage-dark);
font-size: 0.7rem;
font-weight: 850;
}
.met-about-page .met-about-personal__copy h2 {
max-width: 680px;
}
.met-about-page .met-about-personal__copy > p {
max-width: 720px;
color: var(--met-ink-2);
font-size: 1.02rem;
}
.met-about-page .met-about-signature {
margin-top: 30px;
padding-top: 22px;
border-top: 1px solid rgba(34, 49, 46, 0.15);
}
.met-about-page .met-about-signature span,
.met-about-page .met-about-signature small {
display: block;
}
.met-about-page .met-about-signature span {
color: var(--met-gold-dark);
font-family: Georgia, serif;
font-size: 2.1rem;
font-style: italic;
}
.met-about-page .met-about-signature small {
color: var(--met-ink-soft);
font-size: 0.72rem;
font-weight: 750;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.met-about-page .met-about-proof {
background: var(--met-white);
}
.met-about-page .met-about-quote footer {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--met-line);
display: flex;
align-items: center;
gap: 13px;
}
.met-about-page .met-about-quote__avatar {
width: 54px;
height: 54px;
flex: 0 0 54px;
border-radius: 50%;
object-fit: cover;
}
.met-about-page .met-about-quote__avatar--empty {
display: grid;
place-items: center;
background: var(--met-sage-soft);
color: var(--met-sage-dark);
font-weight: 900;
}
.met-about-page .met-about-quote footer strong,
.met-about-page .met-about-quote footer small {
display: block;
}
.met-about-page .met-about-quote footer small {
margin-top: 2px;
color: var(--met-ink-soft);
}
.met-about-page .met-about-final__inner {
max-width: var(--met-max);
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 65px;
text-align: left;
}
.met-about-page .met-about-final__inner .met-about-eyebrow {
justify-content: flex-start;
}
.met-about-page .met-about-final__inner h2 {
max-width: 820px;
margin-inline: 0;
}
.met-about-page .met-about-final__inner > div:first-child > p {
max-width: 760px;
margin: 0;
color: #cbd7d3;
font-size: 1.04rem;
}
.met-about-page .met-about-final__actions {
min-width: 290px;
align-items: center;
flex-direction: column;
}
.met-about-page .met-about-final__actions .met-about-btn {
width: 100%;
}
.met-about-page .met-about-btn--gold {
background: var(--met-gold);
box-shadow: 0 14px 30px rgba(182, 139, 82, 0.24);
color: #21170c;
}
.met-about-page .met-about-btn--gold:hover {
background: #c39961;
color: #21170c;
}
.met-about-page .met-about-text-link--light {
color: #dce7e3;
}
.met-about-page .met-about-footer__inner > div:first-child strong,
.met-about-page .met-about-footer__inner > div:first-child small {
display: block;
}
.met-about-page .met-about-footer__inner > div:first-child small {
margin-top: 3px;
color: #9fb0ab;
font-size: 0.72rem;
}
.met-about-page .met-about-social {
display: flex;
gap: 7px;
}
.met-about-page .met-about-social a {
width: 31px;
height: 31px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 50%;
display: grid;
place-items: center;
text-decoration: none;
font-size: 0.66rem;
font-weight: 900;
}
.met-about-page .met-about-mobile-cta {
display: none;
}
@media (max-width: 1050px) {
.met-about-page .met-about-hero__grid {
gap: 44px;
}
.met-about-page .met-about-story-grid {
gap: 55px;
}
.met-about-page .met-about-personal__grid {
gap: 50px;
}
}
@media (max-width: 900px) {
.met-about-page .met-about-hero__grid,
.met-about-page .met-about-story-grid,
.met-about-page .met-about-personal__grid,
.met-about-page .met-about-final__inner {
grid-template-columns: 1fr;
}
.met-about-page .met-about-story-grid .met-about-heading {
position: static;
max-width: 760px;
}
.met-about-page .met-about-story-copy {
padding: 0;
}
.met-about-page .met-about-lens-grid {
grid-template-columns: 1fr;
}
.met-about-page .met-about-lens-card > div {
margin-bottom: 30px;
}
.met-about-page .met-about-personal__visual {
width: min(100%, 620px);
margin-inline: auto;
}
.met-about-page .met-about-final__inner {
gap: 38px;
text-align: center;
}
.met-about-page .met-about-final__inner .met-about-eyebrow {
justify-content: center;
}
.met-about-page .met-about-final__inner h2,
.met-about-page .met-about-final__inner > div:first-child > p {
margin-inline: auto;
}
.met-about-page .met-about-final__actions {
width: min(100%, 430px);
margin-inline: auto;
}
}
@media (max-width: 760px) {
.met-about-page .met-about-hero h1 {
font-size: clamp(2.22rem, 11.2vw, 3.7rem);
}
.met-about-page .met-about-photo-frame,
.met-about-page .met-about-portrait-placeholder,
.met-about-page .met-about-hero__image {
min-height: 480px;
height: 480px;
}
.met-about-page .met-about-hero__visual {
padding-bottom: 28px;
}
.met-about-page .met-about-philosophy {
margin-top: 50px;
padding: 30px 25px;
grid-template-columns: 48px minmax(0, 1fr);
gap: 16px;
}
.met-about-page .met-about-philosophy > span {
font-size: 4.8rem;
}
.met-about-page .met-about-principle-grid,
.met-about-page .met-about-fit-grid,
.met-about-page .met-about-testimonials {
grid-template-columns: 1fr;
}
.met-about-page .met-about-personal__image,
.met-about-page .met-about-personal__placeholder {
height: 470px;
}
.met-about-page .met-about-quote p {
min-height: 0;
}
.met-about-page .met-about-footer__inner {
align-items: flex-start;
flex-direction: column;
}
.met-about-page .met-about-footer nav {
justify-content: flex-start;
}
.met-about-page .met-about-mobile-cta {
position: fixed;
right: 12px;
bottom: calc(10px + env(safe-area-inset-bottom));
left: 12px;
z-index: 9990;
min-height: 54px;
padding: 12px 18px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: rgba(75, 101, 92, 0.96);
box-shadow: 0 16px 40px rgba(34, 49, 46, 0.3);
color: var(--met-white);
font-size: 0.84rem;
font-weight: 850;
text-align: center;
text-decoration: none;
backdrop-filter: blur(12px);
}
.met-about-page .met-about-footer {
padding-bottom: calc(108px + env(safe-area-inset-bottom));
}
}
@media (max-width: 560px) {
.met-about-page .met-about-principle-card {
padding: 82px 23px 25px;
}
.met-about-page .met-about-principle-card > span {
top: 24px;
left: 23px;
}
.met-about-page .met-about-fit-card {
padding: 34px 24px;
}
.met-about-page .met-about-fit-card__icon {
top: 20px;
right: 20px;
font-size: 3.7rem;
}
.met-about-page .met-about-personal__placeholder {
padding: 31px 25px;
}
.met-about-page .met-about-quote {
padding: 27px 23px;
}
}
@media (max-width: 360px) {
.met-about-page .met-about-photo-frame,
.met-about-page .met-about-portrait-placeholder,
.met-about-page .met-about-hero__image {
min-height: 405px;
height: 405px;
}
.met-about-page .met-about-personal__image,
.met-about-page .met-about-personal__placeholder {
height: 420px;
}
.met-about-page .met-about-hobby-row {
width: calc(100% - 18px);
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.met-about-page .met-about-btn,
.met-about-page.met-about-js [data-reveal] {
transition: none;
}
.met-about-page.met-about-js [data-reveal] {
opacity: 1;
transform: none;
}
} .met-about-page .met-about-topbar {
position: sticky;
top: 0;
z-index: 100;
}
body.admin-bar .met-about-page .met-about-topbar {
top: 32px;
}
@media (max-width: 782px) {
body.admin-bar .met-about-page .met-about-topbar {
top: 46px;
}
}
.met-about-page .met-about-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
}
.met-about-page .met-about-nav a {
position: relative;
color: var(--met-ink-2);
font-size: 0.78rem;
font-weight: 800;
text-decoration: none;
}
.met-about-page .met-about-nav a::after {
position: absolute;
right: 0;
bottom: -6px;
left: 0;
height: 2px;
background: var(--met-gold);
content: "";
transform: scaleX(0);
transform-origin: left;
transition: transform 0.2s ease;
}
.met-about-page .met-about-nav a:hover::after {
transform: scaleX(1);
}
.met-about-page .met-about-btn--small {
min-height: 44px;
padding: 9px 18px;
font-size: 0.78rem;
}
.met-about-page .met-about-hero__visual {
min-height: auto;
padding-bottom: 28px;
}
.met-about-page .met-about-photo-frame,
.met-about-page .met-about-portrait-placeholder {
width: min(100%, 475px);
min-height: 548px;
margin-left: auto;
border: 1px solid rgba(34, 49, 46, 0.1);
border-radius: 36px;
box-shadow: var(--met-shadow);
overflow: hidden;
}
.met-about-page .met-about-photo-frame {
background: var(--met-sage-soft);
}
.met-about-page .met-about-portrait-placeholder {
display: grid;
place-content: center;
gap: 15px;
background:
radial-gradient(circle at 74% 24%, rgba(239, 209, 158, 0.42), transparent 25%),
linear-gradient(145deg, var(--met-sage-soft), #c8d8d0);
color: var(--met-sage-dark);
text-align: center;
}
.met-about-page .met-about-portrait-placeholder > span {
width: 112px;
height: 112px;
margin-inline: auto;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--met-sage-dark);
color: var(--met-white);
font-size: 1.9rem;
font-weight: 900;
letter-spacing: 0.04em;
}
.met-about-page .met-about-portrait-placeholder small {
font-weight: 800;
line-height: 1.45;
}
.met-about-page .met-about-hero__statement {
position: relative;
z-index: 2;
width: min(calc(100% - 35px), 430px);
margin: -34px 0 0 auto;
padding: 18px 20px;
border: 1px solid var(--met-line);
border-radius: 19px;
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: 12px;
background: rgba(255, 250, 244, 0.97);
box-shadow: var(--met-shadow-soft);
}
.met-about-page .met-about-hero__statement > span {
width: 38px;
height: 38px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--met-sage-dark);
color: var(--met-white);
font-weight: 900;
}
.met-about-page .met-about-hero__statement strong,
.met-about-page .met-about-hero__statement small {
display: block;
}
.met-about-page .met-about-hero__statement strong {
font-size: 0.84rem;
line-height: 1.4;
}
.met-about-page .met-about-hero__statement small {
margin-top: 2px;
color: var(--met-ink-soft);
font-size: 0.73rem;
line-height: 1.45;
}
.met-about-page .met-about-situation-card {
min-width: 0;
padding: 28px 24px;
border: 1px solid var(--met-line);
border-radius: var(--met-radius);
background: var(--met-card);
box-shadow: var(--met-shadow-soft);
}
.met-about-page .met-about-situation-card > span {
display: block;
margin-bottom: 25px;
color: var(--met-gold-dark);
font-size: 2.15rem;
font-weight: 900;
letter-spacing: -0.06em;
line-height: 1;
}
.met-about-page .met-about-situation-card p {
margin: 0;
color: var(--met-ink-soft);
font-size: 0.89rem;
}
.met-about-page .met-about-method-grid {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
align-items: center;
gap: 76px;
}
.met-about-page .met-about-method-grid .met-about-lead {
color: #cbd7d3;
}
.met-about-page .met-about-pillar-list {
display: grid;
gap: 13px;
}
.met-about-page .met-about-pillar-list article {
padding: 23px;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 22px;
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
gap: 17px;
background: rgba(255, 255, 255, 0.065);
}
.met-about-page .met-about-pillar-list article > span {
color: #efd19e;
font-size: 1.55rem;
font-weight: 900;
letter-spacing: -0.06em;
}
.met-about-page .met-about-pillar-list h3 {
margin-bottom: 6px;
}
.met-about-page .met-about-pillar-list p {
margin: 0;
color: #cbd7d3;
font-size: 0.88rem;
}
.met-about-page .met-about-service-card {
padding: 32px;
border: 1px solid var(--met-line);
background: var(--met-white);
box-shadow: var(--met-shadow-soft);
}
.met-about-page .met-about-service-card--featured {
border-color: rgba(182, 139, 82, 0.58);
background: linear-gradient(145deg, #f4f8f6, #fffaf4);
}
.met-about-page .met-about-service-card__top > span {
color: rgba(75, 101, 92, 0.28);
font-size: 2.15rem;
font-weight: 900;
letter-spacing: -0.07em;
line-height: 1;
}
.met-about-page .met-about-service-card__top > small {
max-width: 65%;
padding: 7px 11px;
border: 1px solid var(--met-gold-soft);
border-radius: 999px;
background: #fbf3e8;
color: var(--met-gold-dark);
font-size: 0.66rem;
font-weight: 850;
line-height: 1.3;
text-align: center;
}
.met-about-page .met-about-service-card h3 {
color: var(--met-ink);
font-size: clamp(1.55rem, 2.7vw, 2.05rem);
}
.met-about-page .met-about-service-card__price strong {
color: var(--met-gold-dark);
}
.met-about-page .met-about-service-card__price span,
.met-about-page .met-about-service-card > p,
.met-about-page .met-about-service-card li {
color: var(--met-ink-soft);
}
.met-about-page .met-about-service-card > p {
font-size: 0.95rem;
}
.met-about-page .met-about-service-card li i {
background: var(--met-sage-dark);
color: var(--met-white);
}
.met-about-page .met-about-card-link {
margin-top: auto;
padding-top: 5px;
color: var(--met-sage-dark);
font-size: 0.84rem;
font-weight: 850;
text-decoration: none;
}
.met-about-page .met-about-card-link:hover {
color: var(--met-gold-dark);
}
.met-about-page .met-about-section-cta {
margin-top: 38px;
text-align: center;
}
.met-about-page .met-about-about {
background: linear-gradient(180deg, #edf4f0 0%, #e1eae5 100%);
}
.met-about-page .met-about-about__visual {
position: relative;
}
.met-about-page .met-about-about__image,
.met-about-page .met-about-about__placeholder {
width: 100%;
height: 520px;
border-radius: 30px;
box-shadow: var(--met-shadow);
}
.met-about-page .met-about-about__image {
object-fit: cover;
object-position: center top;
}
.met-about-page .met-about-about__placeholder {
display: grid;
place-content: center;
gap: 13px;
background:
radial-gradient(circle at 72% 22%, rgba(239, 209, 158, 0.42), transparent 24%),
linear-gradient(145deg, #d8e5df, #c2d4cc);
color: var(--met-sage-dark);
text-align: center;
}
.met-about-page .met-about-about__placeholder > span {
width: 108px;
height: 108px;
margin-inline: auto;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--met-sage-dark);
color: var(--met-white);
font-size: 1.8rem;
font-weight: 900;
}
.met-about-page .met-about-about__placeholder small {
font-weight: 800;
line-height: 1.45;
}
.met-about-page .met-about-about__caption {
position: relative;
width: calc(100% - 38px);
margin: -52px auto 0;
padding: 18px 20px;
border: 1px solid var(--met-line);
border-radius: 18px;
background: rgba(255, 255, 255, 0.96);
box-shadow: var(--met-shadow-soft);
}
.met-about-page .met-about-about__caption strong,
.met-about-page .met-about-about__caption span {
display: block;
}
.met-about-page .met-about-about__caption span {
margin-top: 3px;
color: var(--met-ink-soft);
font-size: 0.78rem;
}
.met-about-page .met-about-human-note {
margin: 27px 0 22px;
color: var(--met-ink-2);
font-weight: 800;
}
.met-about-page .met-about-testimonials {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.met-about-page .met-about-quote {
position: relative;
padding: 34px;
}
.met-about-page .met-about-quote__mark {
display: block;
height: 42px;
color: var(--met-gold);
font-family: Georgia, serif;
font-size: 4.3rem;
line-height: 0.8;
}
.met-about-page .met-about-quote p {
min-height: 170px;
margin-top: 12px;
font-size: 0.96rem;
line-height: 1.68;
}
.met-about-page .met-about-quote__person {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--met-line);
display: flex;
align-items: center;
gap: 13px;
}
.met-about-page .met-about-quote__photo,
.met-about-page .met-about-quote__initial {
width: 54px;
height: 54px;
flex: 0 0 54px;
border-radius: 50%;
}
.met-about-page .met-about-quote__photo {
object-fit: cover;
}
.met-about-page .met-about-quote__initial {
display: grid;
place-items: center;
background: var(--met-sage-soft);
color: var(--met-sage-dark);
font-weight: 900;
}
.met-about-page .met-about-quote__person strong,
.met-about-page .met-about-quote__person small {
display: block;
}
.met-about-page .met-about-quote__person small {
margin-top: 2px;
color: var(--met-ink-soft);
}
.met-about-page .met-about-newsletter {
padding: 64px 0;
background: var(--met-paper);
}
.met-about-page .met-about-newsletter__inner {
padding: 35px 38px;
border: 1px solid var(--met-line);
border-radius: 30px;
display: grid;
grid-template-columns: 98px minmax(0, 1fr) auto;
align-items: center;
gap: 28px;
background: linear-gradient(135deg, #fffaf4, #e8f0ec);
box-shadow: var(--met-shadow-soft);
}
.met-about-page .met-about-newsletter__mark {
width: 90px;
height: 90px;
border: 12px solid var(--met-gold-soft);
border-radius: 50%;
display: grid;
place-items: center;
background: var(--met-sage-dark);
color: var(--met-white);
font-size: 1rem;
font-weight: 900;
letter-spacing: 0.08em;
}
.met-about-page .met-about-newsletter h2 {
margin-bottom: 8px;
font-size: clamp(1.7rem, 3vw, 2.7rem);
}
.met-about-page .met-about-newsletter p {
max-width: 700px;
margin: 0;
color: var(--met-ink-soft);
}
.met-about-page .met-about-footer {
padding: 31px 0 calc(31px + env(safe-area-inset-bottom));
border-top: 1px solid rgba(255, 255, 255, 0.1);
background: #172522;
color: #d8e2df;
}
.met-about-page .met-about-footer__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
}
.met-about-page .met-about-footer__inner strong,
.met-about-page .met-about-footer__inner span {
display: block;
}
.met-about-page .met-about-footer__inner span {
margin-top: 3px;
color: #9fb0ab;
font-size: 0.72rem;
}
.met-about-page .met-about-footer nav {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 9px 16px;
}
.met-about-page .met-about-footer a {
color: #cbd7d3;
font-size: 0.74rem;
text-underline-offset: 4px;
}
@media (max-width: 1120px) {
.met-about-page .met-about-nav {
gap: 16px;
}
.met-about-page .met-about-nav a {
font-size: 0.72rem;
}
.met-about-page .met-about-topbar__cta {
display: none;
}
}
@media (max-width: 900px) {
.met-about-page .met-about-nav {
display: none;
}
.met-about-page .met-about-method-grid,
.met-about-page .met-about-newsletter__inner {
grid-template-columns: 1fr;
}
.met-about-page .met-about-method-grid {
gap: 42px;
}
.met-about-page .met-about-newsletter__mark {
width: 74px;
height: 74px;
}
.met-about-page .met-about-newsletter__inner .met-about-btn {
width: fit-content;
}
}
@media (max-width: 760px) {
.met-about-page .met-about-photo-frame,
.met-about-page .met-about-portrait-placeholder,
.met-about-page .met-about-hero__image {
min-height: 470px;
height: 470px;
}
.met-about-page .met-about-hero__statement {
width: calc(100% - 18px);
}
.met-about-page .met-about-testimonials {
grid-template-columns: 1fr;
}
.met-about-page .met-about-quote p {
min-height: 0;
}
.met-about-page .met-about-newsletter {
padding: 50px 0;
}
.met-about-page .met-about-newsletter__inner {
padding: 27px 24px;
gap: 20px;
}
.met-about-page .met-about-newsletter__inner .met-about-btn {
width: 100%;
}
.met-about-page .met-about-about__image,
.met-about-page .met-about-about__placeholder {
height: 450px;
}
.met-about-page .met-about-footer {
padding-bottom: calc(98px + env(safe-area-inset-bottom));
}
.met-about-page .met-about-footer__inner {
align-items: flex-start;
flex-direction: column;
}
.met-about-page .met-about-footer nav {
justify-content: flex-start;
}
}
@media (max-width: 560px) {
.met-about-page .met-about-hero__statement {
margin-top: -24px;
padding: 16px;
}
.met-about-page .met-about-photo-frame,
.met-about-page .met-about-portrait-placeholder,
.met-about-page .met-about-hero__image {
min-height: 430px;
height: 430px;
}
.met-about-page .met-about-pillar-list article {
grid-template-columns: 42px minmax(0, 1fr);
padding: 20px;
}
.met-about-page .met-about-service-card {
padding: 25px 21px;
}
.met-about-page .met-about-service-card__top > small {
max-width: 72%;
}
.met-about-page .met-about-about__image,
.met-about-page .met-about-about__placeholder {
height: 420px;
}
}
@media (max-width: 360px) {
.met-about-page .met-about-photo-frame,
.met-about-page .met-about-portrait-placeholder,
.met-about-page .met-about-hero__image {
min-height: 390px;
height: 390px;
}
.met-about-page .met-about-hero__statement {
grid-template-columns: 32px minmax(0, 1fr);
}
.met-about-page .met-about-hero__statement > span {
width: 32px;
height: 32px;
}
}