/*
 * MHK theme styles.
 *
 * Visual design is not final yet: colors, type and spacing are tokens below,
 * so the design pass changes values here instead of rewriting components.
 */

:root {
	--c-primary: #0f5c63;
	--c-primary-dark: #0a4247;
	--c-accent: #c8963e;
	--c-ink: #1d2327;
	--c-muted: #5b6770;
	--c-surface: #f4f7f7;
	--c-border: #dfe5e6;
	--c-white: #fff;
	--c-wa: #1fa855;

	/* New look (header first; the rest of the site follows in the design pass). */
	--c-navy: #0b1c3f;
	--c-navy-soft: #4a5875;
	--c-cyan: #2fd8ec;
	--c-cyan-soft: #e3f9fc;
	--c-glass: rgb(255 255 255 / .82);
	--shadow-float: 0 10px 34px rgb(11 28 63 / .09), 0 1px 2px rgb(11 28 63 / .05);

	--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-heading: var(--font-body);

	--fs-body: 1.0625rem;
	--fs-small: .875rem;
	--fs-h1: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
	--fs-h2: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	--fs-h3: clamp(1.2rem, 1.1rem + .5vw, 1.4rem);

	--radius: 12px;
	--gap: clamp(1rem, .75rem + 1vw, 1.75rem);
	--content: 760px;
	--wide: 1200px;
	--header-h: 72px;
	--header-gap: .75rem;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-padding-top: calc(var(--header-h) + var(--header-gap) + 1rem); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
	margin: 0;
	font: var(--fs-body)/1.7 var(--font-body);
	color: var(--c-ink);
	background: var(--c-white);
}

img, svg, video, iframe { max-width: 100%; height: auto; }
img { display: block; }

a { color: var(--c-primary); text-underline-offset: .15em; }
a:hover { color: var(--c-primary-dark); }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	line-height: 1.25;
	margin: 2em 0 .6em;
	color: var(--c-ink);
}
h1 { font-size: var(--fs-h1); margin-top: .25em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 1.125rem; }

p, ul, ol, figure { margin: 0 0 1.1em; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
	position: absolute; left: 1rem; top: -100px; z-index: 100;
	padding: .75rem 1rem; background: var(--c-white); border-radius: var(--radius);
}
.skip-link:focus { top: 1rem; }

.container { width: min(100% - 2rem, var(--wide)); margin-inline: auto; }
.container--narrow { width: min(100% - 2rem, var(--content)); }
.container--wide { width: min(100% - 2rem, var(--wide)); }

.mhk-icon { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

.btn {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .8rem 1.3rem; border-radius: 999px; border: 2px solid transparent;
	font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
}
.btn--primary { background: var(--c-primary); color: var(--c-white); }
.btn--primary:hover { background: var(--c-primary-dark); color: var(--c-white); }
.btn--ghost { border-color: var(--c-primary); color: var(--c-primary); background: transparent; }
.btn--ghost:hover { background: var(--c-primary); color: var(--c-white); }
.btn--navy { background: var(--c-navy); color: var(--c-white); box-shadow: 0 6px 18px rgb(11 28 63 / .22); }
.btn--navy:hover { background: #142a5c; color: var(--c-white); }
.btn--navy .mhk-icon { color: var(--c-cyan); }

/* ---------- header: floating glass pill ---------- */

.site-header {
	position: sticky; top: 0; z-index: 50;
	padding-top: var(--header-gap);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; } }

.site-header__inner {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	min-height: var(--header-h); padding: .375rem .75rem .375rem 1.25rem;
	background: var(--c-glass);
	border: 1px solid rgb(11 28 63 / .07);
	border-radius: 16px;
	box-shadow: 0 4px 20px rgb(11 28 63 / .06);
	backdrop-filter: saturate(1.6) blur(14px);
	-webkit-backdrop-filter: saturate(1.6) blur(14px);
}
.site-brand { display: flex; align-items: center; text-decoration: none; color: var(--c-navy); }
.site-brand img { height: 46px; width: auto; }

.nav-toggle {
	display: none; place-items: center; width: 48px; height: 48px; padding: 0;
	border: 0; border-radius: 10px; background: var(--c-navy); color: var(--c-white); cursor: pointer;
}
.nav-toggle .mhk-icon { width: 24px; height: 24px; }

.site-nav { display: flex; align-items: center; gap: 1.25rem; }
.mhk-menu, .mhk-menu ul { list-style: none; margin: 0; padding: 0; }
.mhk-menu { display: flex; gap: .25rem; }
.mhk-menu > li { position: relative; }
.mhk-menu a {
	display: flex; align-items: center; gap: .35rem;
	padding: .6rem .95rem; border-radius: 999px;
	color: var(--c-navy-soft); text-decoration: none; font-weight: 500; font-size: .9375rem; letter-spacing: .005em;
	transition: color .15s, background-color .15s;
}
.mhk-menu a:hover { color: var(--c-navy); }
.mhk-menu > li > a:hover { background: rgb(11 28 63 / .05); }
/* Current page: darker text and a short cyan bar under the label. */
.mhk-menu > li > a { position: relative; }
.mhk-menu > li > a::before {
	content: ""; position: absolute; left: 50%; bottom: .15rem; width: 1.25rem; height: 3px; margin-left: -.625rem;
	border-radius: 3px; background: var(--c-cyan); transform: scaleX(0); transition: transform .2s;
}
.mhk-menu > li > a[aria-current="page"],
.mhk-menu > .current-menu-ancestor > a { color: var(--c-navy); font-weight: 600; }
.mhk-menu > li > a[aria-current="page"]::before,
.mhk-menu > .current-menu-ancestor > a::before { transform: none; }
.mhk-menu > .menu-item-has-children > a::after {
	content: ""; width: .4em; height: .4em; margin-top: -.2em;
	border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.mhk-menu .sub-menu {
	position: absolute; top: calc(100% + .6rem); left: 0; min-width: 270px;
	padding: .5rem; background: var(--c-white);
	border: 1px solid rgb(11 28 63 / .07); border-radius: 12px;
	box-shadow: var(--shadow-float);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .15s, transform .15s, visibility .15s;
}
/* Bridges the gap so the dropdown stays open while the pointer moves down. */
.mhk-menu .sub-menu::before { content: ""; position: absolute; inset: -.7rem 0 auto; height: .7rem; }
.mhk-menu .sub-menu a { border-radius: 8px; }
.mhk-menu .sub-menu a:hover { background: var(--c-surface); }
.mhk-menu .sub-menu a[aria-current="page"] { color: var(--c-navy); font-weight: 600; }
.mhk-menu li:hover > .sub-menu, .mhk-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
/* Desktop: logo | menu centred on the bar | button, whatever their widths. */
@media (min-width: 961px) {
	.site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
	.site-nav { grid-column: 2 / 4; display: grid; grid-template-columns: subgrid; }
	.site-nav__cta { justify-self: end; white-space: nowrap; }
}
@media (min-width: 961px) and (max-width: 1180px) {
	.mhk-menu { gap: 0; }
	.mhk-menu a { padding-inline: .6rem; font-size: .9063rem; }
	.site-nav__cta { padding-inline: .9rem; }
}
.site-nav__cta { padding: .7rem 1.15rem; border-radius: 10px; font-size: .9375rem; box-shadow: none; }
.site-nav__cta .mhk-icon { color: currentColor; }

@media (max-width: 960px) {
	.site-header__inner { padding-left: 1rem; }
	.site-brand img { height: 40px; }
	.nav-toggle { display: grid; }
	.site-nav {
		position: fixed; z-index: 49;
		top: calc(var(--header-h) + var(--header-gap) * 2); left: 1rem; right: 1rem;
		max-height: calc(100dvh - var(--header-h) - var(--header-gap) * 3);
		flex-direction: column; align-items: stretch; gap: 1rem;
		padding: .75rem; overflow-y: auto;
		background: var(--c-white); border-radius: 14px; box-shadow: var(--shadow-float);
		visibility: hidden; opacity: 0; transform: translateY(-6px);
		transition: opacity .15s, transform .15s, visibility .15s;
	}
	.admin-bar .site-nav { top: calc(46px + var(--header-h) + var(--header-gap) * 2); }
	.site-nav.is-open { visibility: visible; opacity: 1; transform: none; }
	.mhk-menu { flex-direction: column; gap: .125rem; }
	.mhk-menu a { padding: .8rem 1rem; border-radius: 8px; font-size: 1rem; }
	.mhk-menu > li > a::before, .mhk-menu > .menu-item-has-children > a::after { display: none; }
	.mhk-menu a[aria-current="page"] { background: var(--c-surface); }
	.mhk-menu .sub-menu {
		/* inherit, not visible: an explicit "visible" would keep these links
		   tappable (invisibly) while the panel itself is hidden. */
		position: static; opacity: 1; visibility: inherit; transform: none;
		border: 0; box-shadow: none; padding: 0 0 0 1rem; min-width: 0;
	}
	.mhk-menu .sub-menu::before { display: none; }
	.site-nav__cta { justify-content: center; padding: .95rem; }
	body.nav-open { overflow: hidden; }
}

/* ---------- entry ---------- */

.entry-header { padding-top: 1.5rem; }
.entry-title { margin-bottom: .4em; }
.entry-lead { font-size: 1.2rem; color: var(--c-muted); }
.mhk-meta { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; color: var(--c-muted); font-size: var(--fs-small); }
.entry-media { margin-block: 1.5rem 2rem; }
.entry-media img { width: 100%; border-radius: var(--radius); }

.mhk-breadcrumbs { font-size: var(--fs-small); color: var(--c-muted); margin-bottom: .75rem; }
.mhk-breadcrumbs a { color: inherit; }
.mhk-breadcrumbs .separator { margin-inline: .35rem; }

.entry-content { padding-bottom: 2rem; }
.entry-content > :first-child { margin-top: 0; }
.entry-content img { border-radius: 8px; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li { margin-bottom: .35em; }

.wp-block-image figcaption, .wp-element-caption { font-size: var(--fs-small); color: var(--c-muted); text-align: center; margin-top: .5rem; }

.is-style-check { list-style: none; padding-left: 0 !important; }
.is-style-check li { position: relative; padding-left: 1.9em; }
.is-style-check li::before {
	content: ""; position: absolute; left: 0; top: .3em; width: 1.2em; height: 1.2em; border-radius: 50%;
	background: var(--c-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L20.1 8.4 18.7 7z'/%3E%3C/svg%3E") center/70% no-repeat;
}

/* Galleries: one horizontal row (swipe, drag or arrows; see main.js). Core sizes figures with an id-level selector, hence !important. */
.wp-block-gallery { display: flex !important; flex-wrap: nowrap !important; gap: .6rem !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; user-select: none; }
.wp-block-gallery::-webkit-scrollbar { display: none; }
.wp-block-gallery.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.wp-block-gallery > .wp-block-image { flex: 0 0 clamp(150px, 31%, 240px) !important; width: auto !important; margin: 0 !important; scroll-snap-align: start; }
.wp-block-gallery img { width: 100%; height: auto !important; aspect-ratio: 1; object-fit: cover; border-radius: 12px; pointer-events: none; }
.strip { position: relative; margin-block: 1.25rem 1.75rem; }
.strip__btn { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; border: 0; border-radius: 50%; background: var(--c-white); color: var(--c-navy); box-shadow: 0 6px 18px rgb(11 28 63 / .2); cursor: pointer; transition: opacity .2s, background-color .15s, color .15s; }
.strip__btn svg { fill: currentColor; }
.strip__btn--prev { left: .5rem; }
.strip__btn--prev svg { transform: scaleX(-1); }
.strip__btn--next { right: .5rem; }
.strip__btn:hover:not(:disabled) { background: var(--c-navy); color: var(--c-white); }
.strip__btn:disabled { opacity: 0; pointer-events: none; }
.strip__btn[hidden] { display: none; }

.wp-block-buttons { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.1em; }
.wp-block-button__link {
	display: inline-block; padding: .8rem 1.3rem; border-radius: 999px;
	background: var(--c-primary); color: var(--c-white); text-decoration: none; font-weight: 600;
}

.mhk-map { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }

/* Table of contents */
.mhk-toc {
	margin: 0 0 2rem; padding: 1rem 1.25rem;
	background: var(--c-surface); border-radius: var(--radius);
}
.mhk-toc summary { font-weight: 700; cursor: pointer; }
.mhk-toc ol { margin: .5rem 0 0; padding-left: 1.25em; }
.mhk-toc ol ol { margin-top: .25rem; }
.mhk-toc li { margin-bottom: .25rem; }
.mhk-toc a { text-decoration: none; }
.mhk-toc a:hover { text-decoration: underline; }

/* FAQ: migrated SSS groups and Rank Math FAQ block share one look */
.is-style-faq, .rank-math-list { margin-bottom: 2rem; }
.is-style-faq .wp-block-details, .rank-math-list-item {
	border: 1px solid var(--c-border); border-radius: var(--radius);
	margin-bottom: .75rem; background: var(--c-white);
}
.is-style-faq summary {
	padding: 1rem 1.25rem; font-weight: 600; cursor: pointer; list-style: none; position: relative; padding-right: 3rem;
}
.is-style-faq summary::-webkit-details-marker { display: none; }
.is-style-faq summary::after {
	content: "+"; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%);
	font-size: 1.4rem; line-height: 1; color: var(--c-primary);
}
.is-style-faq details[open] summary::after { content: "−"; }
.is-style-faq details > :not(summary) { margin: 0 1.25rem 1rem; }
.rank-math-list-item { padding: 1rem 1.25rem; }
.rank-math-question { font-size: 1.05rem; margin: 0 0 .5rem; }
.rank-math-answer > :last-child { margin-bottom: 0; }

/* YouTube facade */
.mhk-yt__link { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.mhk-yt__link img { width: 100%; height: 100%; object-fit: cover; opacity: .85; border-radius: 0; }
.mhk-yt__play {
	position: absolute; inset: 50% auto auto 50%; width: 68px; height: 48px; transform: translate(-50%, -50%);
	border-radius: 12px; background: #f00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/40% no-repeat;
}
.mhk-yt iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }

/* Author + CTA */
.mhk-author {
	display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem;
	border: 1px solid var(--c-border); border-radius: var(--radius); margin-bottom: 2rem;
}
.mhk-author img { border-radius: 50%; }
.mhk-author p { margin: 0; }
.mhk-author__name { font-weight: 700; }
.mhk-author__bio { color: var(--c-muted); font-size: var(--fs-small); margin-top: .25rem !important; }

.mhk-cta {
	padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); margin-bottom: 2rem;
	background: var(--c-primary); color: var(--c-white); border-radius: var(--radius);
}
.mhk-cta__title { font-size: var(--fs-h3); font-weight: 700; margin-bottom: .5rem; }
.mhk-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.mhk-cta .btn--primary { background: var(--c-white); color: var(--c-primary); }
.mhk-cta .btn--ghost { border-color: var(--c-white); color: var(--c-white); }
.mhk-cta .btn--ghost:hover { background: var(--c-white); color: var(--c-primary); }

/* ---------- lists of content ---------- */

.archive { padding-block: 1.5rem 3rem; }
.archive-header { margin-bottom: 2rem; }
.archive-description { color: var(--c-muted); max-width: var(--content); }
.section-title { margin-top: 0; }
.related, .home-section { padding-block: 2.5rem; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-bottom: 2rem; }
/* Whole card is clickable through the title link (stretched with ::after). */
.card {
	position: relative; display: flex; flex-direction: column; overflow: hidden;
	background: var(--c-white); border: 1px solid rgb(11 28 63 / .08); border-radius: 18px;
	box-shadow: 0 10px 30px rgb(11 28 63 / .05); transition: box-shadow .25s, transform .25s, border-color .25s;
}
.card:hover { transform: translateY(-3px); border-color: rgb(14 127 140 / .3); box-shadow: 0 22px 50px rgb(11 28 63 / .11); }
.card__media { position: relative; display: block; overflow: hidden; background: var(--c-surface); }
.card__media img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .5s; }
.card:hover .card__media img { transform: scale(1.05); }
/* Category chip on the photo's lower left, over a soft fade. */
.card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgb(11 28 63 / .18)); pointer-events: none; }
.card__cat {
	position: absolute; left: .85rem; bottom: .85rem; z-index: 1; display: inline-flex; align-items: center; gap: .35rem;
	padding: .3rem .7rem; border-radius: 999px;
	background: rgb(255 255 255 / .92); color: var(--c-navy); font-size: .7188rem; font-weight: 700; letter-spacing: .02em;
	backdrop-filter: blur(6px);
}
.card__cat .mhk-icon { width: 12px; height: 12px; fill: currentColor; }
.card__body { display: flex; flex-direction: column; flex: 1; padding: 1.15rem 1.35rem 1.35rem; }
.card__meta { display: flex; align-items: center; gap: .45rem; margin: 0 0 .55rem; font-size: .8125rem; color: var(--c-navy-soft); }
.card__meta .mhk-icon { width: 14px; height: 14px; fill: currentColor; opacity: .75; }
.card__title { margin: 0 0 .55rem; font-size: 1.125rem; line-height: 1.35; letter-spacing: -.01em; }
.card__title a { color: var(--c-navy); text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__excerpt { margin: 0 0 1rem; color: var(--c-navy-soft); font-size: .9375rem; line-height: 1.6; }
.card__more { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; font-size: .875rem; font-weight: 700; color: #0e7f8c; }
.card__more .mhk-icon { transition: transform .2s; }
.card:hover .card__more .mhk-icon { transform: translateX(4px); }

.services-grid { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--gap); }
.service-card a {
	display: flex; flex-direction: column; height: 100%;
	border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden;
	color: var(--c-ink); text-decoration: none; background: var(--c-white);
	transition: border-color .15s, box-shadow .15s;
}
.service-card a:hover { border-color: var(--c-primary); box-shadow: 0 10px 30px rgb(0 0 0 / .07); }
.service-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.service-card__title { font-size: 1.15rem; margin: 1rem 1.25rem .4rem; }
.service-card p { margin: 0 1.25rem .75rem; color: var(--c-muted); font-size: .95rem; }
.service-card__more { margin: auto 1.25rem 1.1rem; display: inline-flex; align-items: center; gap: .35rem; color: var(--c-primary); font-weight: 600; }

.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips a { display: inline-block; padding: .35rem .9rem; border: 1px solid var(--c-border); border-radius: 999px; text-decoration: none; color: var(--c-ink); font-size: var(--fs-small); }
.chips a:hover { border-color: var(--c-primary); color: var(--c-primary); }

.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.pagination .page-numbers {
	display: inline-flex; min-width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; padding: 0 .75rem;
	border: 1px solid var(--c-border); border-radius: 8px; text-decoration: none; color: var(--c-ink);
}
.pagination .page-numbers.current { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }

/* ---------- blog (as on estecapelli.com/blog) ---------- */

.blog-hero { padding-block: clamp(1.5rem, 1rem + 3vw, 3.5rem) clamp(1.25rem, 1rem + 2vw, 2.25rem); background: linear-gradient(180deg, var(--c-cyan-soft), rgb(227 249 252 / 0)); }
.blog-hero__inner { display: flex; flex-direction: column; align-items: center; gap: .9rem; max-width: 760px; text-align: center; }
.blog-hero .mhk-breadcrumbs { margin-bottom: 0; }
.blog-hero__eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #0e7f8c; }
.blog-hero__mark { width: 6px; height: 6px; border-radius: 50%; background: var(--c-cyan); box-shadow: 0 0 0 3px rgb(47 216 236 / .22); }
.blog-hero__title { margin: 0; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.1; letter-spacing: -.03em; color: var(--c-navy); text-wrap: balance; }
.blog-hero__lead { margin: 0; max-width: 62ch; font-size: 1.0625rem; line-height: 1.65; color: var(--c-navy-soft); }
.blog-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .75rem; }
.blog-filter {
	display: inline-flex; align-items: center; padding: .45rem 1rem; border: 1px solid rgb(11 28 63 / .1); border-radius: 999px;
	background: var(--c-white); color: var(--c-navy); font-size: .875rem; font-weight: 600; text-decoration: none;
	transition: border-color .2s, transform .2s, color .2s;
}
.blog-filter:hover { border-color: rgb(11 28 63 / .25); color: var(--c-navy); transform: translateY(-1px); }
.blog-filter.is-active { border-color: var(--c-navy); background: var(--c-navy); color: var(--c-white); }

.blog-body { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.blog-feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 3vw, 2.75rem); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.blog-feature__media { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 22px; background: var(--c-surface); box-shadow: 0 24px 60px rgb(11 28 63 / .14); }
.blog-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.blog-feature:hover .blog-feature__media img { transform: scale(1.04); }
.blog-feature__body { display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; }
.blog-feature__badge { display: inline-flex; padding: .35rem .8rem; border-radius: 999px; background: var(--c-cyan); color: var(--c-navy); font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.blog-feature__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; font-size: .875rem; color: var(--c-navy-soft); }
.blog-feature__cat { font-weight: 700; color: #0e7f8c; text-decoration: none; }
.blog-feature__title { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
.blog-feature__title a { color: var(--c-navy); text-decoration: none; }
.blog-feature:hover .blog-feature__title a { color: #0e7f8c; }
.blog-feature__excerpt { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--c-navy-soft); }
.blog-feature__cta { margin-top: .35rem; border-radius: 10px; }

/* Four across on wide screens; the excerpt is held to two lines. */
.blog-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.blog-grid .card__excerpt { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-body .pagination { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.blog-body .pagination .nav-links { justify-content: center; }
.blog-body .pagination .page-numbers { border-color: rgb(11 28 63 / .1); border-radius: 10px; background: var(--c-white); color: var(--c-navy); font-weight: 600; }
.blog-body .pagination .page-numbers.current { border-color: var(--c-navy); background: var(--c-navy); color: var(--c-white); }
.blog-body .pagination .page-numbers.dots { border-color: transparent; background: none; }

@media (max-width: 820px) {
	.blog-feature { grid-template-columns: minmax(0, 1fr); }
}

.search-form { display: flex; gap: .5rem; max-width: 520px; }
.search-form label { flex: 1; }
.search-field { width: 100%; padding: .75rem 1rem; border: 1px solid var(--c-border); border-radius: 999px; font: inherit; }
.search-submit { padding: .75rem 1.25rem; border: 0; border-radius: 999px; background: var(--c-primary); color: var(--c-white); font: inherit; font-weight: 600; cursor: pointer; }

/* ---------- front page ---------- */

/* The hero runs up behind the floating header: clinic video under a navy
   overlay, white text and buttons, review badges along the bottom. */
/* How far the celebrity panel below rises over the hero's bottom edge. */
.hero, .celebs { --hero-overlap: clamp(2.5rem, 1.5rem + 3.5vw, 5rem); }
.hero {
	position: relative; isolation: isolate;
	display: flex; align-items: flex-end; min-height: min(88vh, 820px);
	margin-top: calc((var(--header-h) + var(--header-gap)) * -1);
	padding: calc(var(--header-h) + var(--header-gap) + clamp(2.5rem, 1rem + 5vw, 5.5rem)) 0 calc(var(--hero-overlap) + clamp(1.75rem, 1rem + 2vw, 2.75rem));
	background: var(--c-navy); color: var(--c-white);
	overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media img, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { opacity: 0; transition: opacity .8s ease; }
.hero__video.is-playing { opacity: 1; }
/* Darker on the left where the text sits, and at the bottom behind the badges. */
.hero__media::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgb(7 17 38 / .92) 0%, rgb(7 17 38 / .72) 45%, rgb(7 17 38 / .38) 100%),
		linear-gradient(180deg, rgb(7 17 38 / .5) 0%, transparent 30%, transparent 60%, rgb(7 17 38 / .75) 100%);
}

.hero__bottom {
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
	position: relative; z-index: 2; gap: 1.5rem 3rem;
}
.hero__text { flex: 1 1 520px; min-width: 0; }
.hero__title { margin: 0 0 1rem; color: var(--c-white); }
.hero__eyebrow {
	display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem;
	font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .8);
}
.hero__eyebrow::before { content: ""; width: 2rem; height: 1.5px; background: var(--c-cyan); flex: none; }
.hero__tagline {
	display: block;
	font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.25rem); font-weight: 800; line-height: 1.02; letter-spacing: -.02em;
	text-transform: uppercase; text-shadow: 0 2px 24px rgb(0 0 0 / .25);
}
.hero__lead { max-width: 52ch; margin: 0; font-size: 1.125rem; line-height: 1.6; color: rgb(255 255 255 / .82); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__actions .btn { padding: .95rem 1.4rem; border-radius: 10px; }
.hero .btn--navy { background: var(--c-cyan); color: var(--c-navy); box-shadow: 0 8px 24px rgb(47 216 236 / .3); }
.hero .btn--navy:hover { background: #5fe3f2; color: var(--c-navy); }
.hero .btn--navy .mhk-icon { color: var(--c-navy); }
.hero .btn--outline { border-color: rgb(255 255 255 / .35); background: rgb(255 255 255 / .08); color: var(--c-white); backdrop-filter: blur(6px); }
.hero .btn--outline:hover { border-color: var(--c-white); background: rgb(255 255 255 / .16); color: var(--c-white); }
.btn--outline { border: 1.5px solid rgb(11 28 63 / .18); background: var(--c-white); color: var(--c-navy); }
.btn--outline:hover { border-color: var(--c-navy); color: var(--c-navy); }

/* Review badges: frosted glass pills, linking to the review pages. */
.hero__reviews {
	position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .75rem;
	margin: clamp(1.75rem, 1rem + 2.5vw, 3rem) 0 0; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) 0 0; list-style: none;
	border-top: 1px solid rgb(255 255 255 / .14);
}
.review-badge {
	display: flex; align-items: center; gap: .8rem; padding: .7rem 1.1rem .7rem .8rem;
	border: 1px solid rgb(255 255 255 / .18); border-radius: 14px; background: rgb(255 255 255 / .1); backdrop-filter: blur(10px);
	color: var(--c-white); text-decoration: none; transition: background-color .2s, border-color .2s;
}
.review-badge:hover { border-color: rgb(255 255 255 / .4); background: rgb(255 255 255 / .16); color: var(--c-white); }
.review-badge__logo { flex: none; display: block; width: 34px; height: 34px; padding: 5px; border-radius: 9px; background: var(--c-white); }
.review-badge__body { display: flex; flex-direction: column; gap: .15rem; }
.review-badge__top { display: flex; align-items: center; gap: .5rem; }
.review-badge__top strong { font-size: 1.15rem; line-height: 1; }
.review-badge__stars { position: relative; display: inline-flex; }
.review-badge__stars > span { display: inline-flex; gap: 1px; white-space: nowrap; }
.review-badge__stars > span:last-child { position: absolute; inset: 0 auto 0 0; width: var(--fill); overflow: hidden; }
.review-badge__stars .mhk-icon { flex: none; width: 15px; height: 15px; fill: rgb(255 255 255 / .25); }
.review-badge__stars > span:last-child .mhk-icon { fill: #fbbc05; }
.review-badge--trustpilot .review-badge__stars > span:last-child .mhk-icon { fill: #00b67a; }
.review-badge__label { font-size: .8125rem; color: rgb(255 255 255 / .75); }

/* Phones: the text sits low so the top of the screen is the video; one row
   of compact buttons (call as an icon) and one row of small review badges. */
@media (max-width: 640px) {
	.hero { min-height: min(92svh, 780px); padding-top: calc(var(--header-h) + var(--header-gap) + 2rem); }
	.hero__media::after {
		background: linear-gradient(180deg, rgb(7 17 38 / .45) 0%, rgb(7 17 38 / .1) 22%, rgb(7 17 38 / .55) 48%, rgb(7 17 38 / .92) 72%, rgb(7 17 38 / .96) 100%);
	}
	.hero__bottom { gap: 1.25rem; }
	.hero__text { flex-basis: 100%; }
	.hero__title { margin-bottom: .75rem; }
	.hero__eyebrow { gap: .5rem; margin-bottom: .6rem; font-size: .6875rem; letter-spacing: .06em; }
	.hero__eyebrow::before { width: 1.25rem; }
	.hero__tagline { font-size: clamp(1.85rem, 1rem + 4.5vw, 2.2rem); line-height: 1.05; }
	.hero__lead { font-size: .9688rem; line-height: 1.55; }
	.hero__actions { flex-wrap: nowrap; width: 100%; gap: .5rem; }
	.hero__actions .btn { padding: .8rem 1rem; font-size: .9375rem; }
	.hero__actions .btn--navy { flex: 1; justify-content: center; }
	.hero__call { flex: none; width: 48px; padding-inline: 0 !important; justify-content: center; }
	.hero__call-num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.hero__reviews { flex-wrap: nowrap; gap: .5rem; margin-top: 1.1rem; padding-top: 1.1rem; }
	.hero__reviews li { flex: 1 1 0; min-width: 0; }
	.review-badge { gap: .55rem; height: 100%; padding: .5rem .65rem .5rem .5rem; border-radius: 12px; }
	.review-badge__logo { width: 28px; height: 28px; padding: 4px; border-radius: 7px; }
	.review-badge__top { gap: .35rem; }
	.review-badge__top strong { font-size: .9375rem; }
	.review-badge__stars .mhk-icon { width: 11px; height: 11px; }
	.review-badge__label { font-size: .6875rem; line-height: 1.3; }
}
@media (prefers-reduced-motion: reduce) {
	.hero__video { display: none; }
}

/* Celebrities: one white panel rising over the hero, the title on top and a
   row of people below, each a rounded card with name and role. The middle
   one is full size, the others smaller either side. --d (distance from the
   middle, set by home-celebs.php and main.js) gives each one its place and size. */
.celebs {
	--card-w: 220px; --card-h: 238px;
	/* One step sideways: the nearest (88%) cards just tuck behind the middle one. */
	--step: 200px;
	padding: 0 0 clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
	/* A faint cyan glow under the panel echoes the hero's cyan button. */
	background: radial-gradient(60% 50% at 50% 0%, rgb(47 216 236 / .1), transparent 70%), var(--c-white);
}
/* The panel rises over the hero's bottom edge and casts a deep navy shadow
   onto it, so the two sections read as one; a cyan-to-teal line tops it. */
.celebs__panel {
	position: relative; overflow: hidden;
	margin-top: calc(var(--hero-overlap) * -1);
	padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) 0 clamp(1rem, .75rem + 1vw, 1.25rem);
	border: 1px solid rgb(11 28 63 / .06); border-radius: 28px;
	/* Soft mesh: a cyan glow top left and behind the card, a navy tint bottom right. */
	background:
		radial-gradient(38% 70% at 0% 0%, rgb(47 216 236 / .18), transparent 70%),
		radial-gradient(30% 55% at 50% 60%, rgb(47 216 236 / .12), transparent 70%),
		radial-gradient(42% 75% at 100% 100%, rgb(19 48 106 / .14), transparent 70%),
		linear-gradient(135deg, #f2fafd 0%, var(--c-white) 45%, #eef3fb 100%);
	box-shadow: 0 -18px 50px rgb(7 17 38 / .28), 0 30px 70px rgb(11 28 63 / .12), 0 1px 2px rgb(11 28 63 / .05);
}
.celebs__panel::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
	background: linear-gradient(90deg, transparent, var(--c-cyan) 25%, #0e7f8c 75%, transparent);
}
.celebs .celebs__title { margin: 0 1rem clamp(.9rem, .6rem + 1vw, 1.25rem); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); text-align: center; }
/* Navy into teal, matching the panel's top line. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
	.celebs__title { background: linear-gradient(90deg, var(--c-navy) 20%, #0e7f8c 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
}

.celebs__ring { position: relative; height: calc(var(--card-h) + 1rem); margin: 0; padding: 0; list-style: none; touch-action: pan-y; }
/* Every person is the same card; the further from the middle, the smaller
   (100%, 88%, 76%), the nearest ones tucked behind the middle card's edges. */
.celeb {
	position: absolute; left: 50%; top: 50%; z-index: calc(10 - var(--ad));
	width: var(--card-w); height: var(--card-h);
	transform: translate(-50%, -50%) translateX(calc(var(--d) * var(--step))) scale(calc(1 - var(--ad) * .12));
	transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
/* White card in a cyan-to-navy gradient frame: photo on top, name and role below. */
.celeb__btn {
	display: flex; flex-direction: column; width: 100%; height: 100%; padding: 8px;
	border: 1.5px solid transparent; border-radius: 20px;
	background: linear-gradient(var(--c-white), var(--c-white)) padding-box, linear-gradient(140deg, var(--c-cyan), #0e7f8c 45%, var(--c-navy)) border-box;
	box-shadow: 0 14px 32px rgb(11 28 63 / .12);
	font: inherit; color: var(--c-navy); cursor: pointer; transition: box-shadow .3s;
}
.celeb__btn:hover { box-shadow: 0 18px 40px rgb(11 28 63 / .18), 0 0 0 4px rgb(47 216 236 / .25); }
.celeb.is-active .celeb__btn { cursor: default; box-shadow: 0 24px 50px rgb(11 28 63 / .18), 0 10px 40px rgb(47 216 236 / .18); }
.celeb__photo { flex: 1; min-height: 0; overflow: hidden; border-radius: 14px; }
.celeb__photo img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.celeb__caption { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .5rem .25rem .1rem; text-align: center; }
.celeb__name { font-size: 1rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.celeb__role { font-size: .8125rem; font-weight: 600; color: #0e7f8c; white-space: nowrap; }

/* Phones: smaller cards; the outer ones sit mostly outside the panel. */
@media (max-width: 640px) {
	.celebs { --card-w: 190px; --card-h: 205px; --step: 150px; }
	.celeb__photo { border-radius: 12px; }
	.celeb__name { font-size: .9375rem; }
	.celeb__role { font-size: .6875rem; }
}
@media (prefers-reduced-motion: reduce) {
	.celeb, .celeb__btn { transition: none; }
}
/* Shared section heading for the redesigned front page sections. */
.section-eyebrow {
	display: flex; align-items: center; gap: .6rem; margin: 0 0 .75rem;
	font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #0e7f8c;
}
.section-eyebrow::before { content: ""; width: 1.5rem; height: 1.5px; background: currentColor; }
.section-eyebrow--light { color: var(--c-cyan); }
.section-heading { margin: 0; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em; color: var(--c-navy); }

/* ---------- trust strip: one-row lead form + press logos ---------- */

.trust { padding-block: clamp(.5rem, 1vw, 1rem) clamp(1rem, 2vw, 1.5rem); }

.lead {
	display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6rem 2rem;
	padding: 1.25rem 1.25rem 1rem 1.75rem;
	background: var(--c-white); border: 1px solid rgb(11 28 63 / .08); border-radius: 16px;
	box-shadow: 0 16px 40px rgb(11 28 63 / .07);
}
.lead__title { margin: 0; font-size: 1.125rem; line-height: 1.3; color: var(--c-navy); }
.lead__title span { display: block; font-size: .875rem; font-weight: 400; color: var(--c-navy-soft); }
.lead__fields { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: .6rem; }
.lead__fields input, .lead__fields select {
	width: 100%; min-height: 50px; padding: .7rem .9rem;
	border: 1.5px solid rgb(11 28 63 / .12); border-radius: 10px; background: #fbfcfe;
	font: inherit; font-size: .9375rem; color: var(--c-navy);
	transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.lead__fields input::placeholder { color: #6b778f; }
.lead__fields input:focus, .lead__fields select:focus {
	outline: none; border-color: #0e7f8c; background: var(--c-white); box-shadow: 0 0 0 4px rgb(47 216 236 / .18);
}
.lead__fields .btn { min-height: 50px; padding-inline: 1.5rem; border: 0; border-radius: 10px; font: inherit; font-weight: 600; white-space: nowrap; box-shadow: none; }
.lead__consent { grid-column: 2; display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .8125rem; color: var(--c-navy-soft); }
.lead__consent input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--c-navy); flex: none; }
/* Country code picker + number, one field to the eye. */
.lead__phone { display: flex; min-width: 0; }
/* Compact flag + dial code (Windows shows no flag emoji); the real select is laid invisibly on top. */
.lead__cc {
	position: relative; display: flex; flex: none; align-items: center; gap: .35rem; padding-inline: .65rem .5rem;
	border: 1.5px solid rgb(11 28 63 / .12); border-right: 0; border-radius: 10px 0 0 10px; background: #fbfcfe;
	font-size: .9375rem; color: var(--c-navy); font-variant-numeric: tabular-nums;
}
.lead__cc::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 .1rem; border: solid #6b778f; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.lead__cc:focus-within { border-color: #0e7f8c; box-shadow: 0 0 0 4px rgb(47 216 236 / .18); }
.lead__flag { width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgb(11 28 63 / .12); object-fit: cover; }
.lead__fields .lead__cc select { position: absolute; inset: 0; width: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.lead__fields .lead__phone input { min-width: 0; border-radius: 0 10px 10px 0; }
.lead__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead__status { grid-column: 1 / -1; margin: .25rem 0 0; padding: .7rem 1rem; border-radius: 10px; font-size: .9375rem; font-weight: 500; }
.lead__status--ok { background: #e7f7ee; color: #14632f; }
.lead__status--error { background: #fdecec; color: #8a1c1c; }

@media (max-width: 1100px) {
	.lead { grid-template-columns: 1fr; padding: 1.25rem; }
	.lead__consent { grid-column: 1; }
}
@media (max-width: 720px) {
	.lead__fields { grid-template-columns: 1fr; }
}

/* ---------- about band ---------- */

.about { padding-block: clamp(1rem, 2vw, 2rem); }
.about__inner {
	display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 1rem + 4vw, 4.5rem);
	padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
	background: #f5f8fc; border-radius: 24px;
}
.about__photo { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 50px rgb(11 28 63 / .14); }
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transform: scale(1.35); transform-origin: 50% 18%; } /* Full-length photo: frame the upper body. */
.about__text .section-heading { margin-bottom: 1rem; }
.about__text > p:not(.section-eyebrow) { max-width: 60ch; margin: 0 0 .8rem; color: var(--c-navy-soft); }
/* "Basında biz": article cards in one row; scrolls sideways when they do not fit. */
.press { margin: 1.5rem 0; padding-top: 1.25rem; border-top: 1px solid rgb(11 28 63 / .08); }
.press__label { display: flex; align-items: center; gap: .75rem; margin: 0 0 .85rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-navy-soft); }
.press__label > span:first-child { margin-right: auto; }
.press__nav { display: inline-flex; gap: .35rem; }
.press__nav[hidden] { display: none; }
.press__btn {
	display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid rgb(11 28 63 / .15); border-radius: 50%;
	background: var(--c-white); color: var(--c-navy); cursor: pointer; transition: background-color .15s, color .15s, opacity .15s;
}
.press__btn:hover:not(:disabled) { background: var(--c-navy); color: var(--c-white); }
.press__btn:disabled { opacity: .35; cursor: default; }
.press__btn .mhk-icon { width: 15px; height: 15px; }
.press__btn--prev .mhk-icon { transform: scaleX(-1); }
.press__label a { display: inline-flex; align-items: center; gap: .3rem; color: var(--c-navy); text-decoration: none; letter-spacing: .04em; }
.press__label a:hover { color: #0e7f8c; }
.press__list {
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: .75rem;
	margin: 0 -.25rem; padding: .25rem .25rem .5rem; list-style: none; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: .25rem; scroll-behavior: smooth;
}
.press__list { cursor: grab; user-select: none; }
.press__list.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.press__list img { -webkit-user-drag: none; }
.press__list::-webkit-scrollbar { display: none; }
/* Soft fade on the side(s) where more cards are hidden (classes set by main.js). */
.press__list.has-more-end { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.press__list.has-more-start { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%); mask-image: linear-gradient(90deg, transparent, #000 15%); }
.press__list.has-more-start.has-more-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.press__list li { scroll-snap-align: start; }
.press-card { display: flex; flex-direction: column; gap: .5rem; height: 100%; color: var(--c-navy); text-decoration: none; }
.press-card__media { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--c-white); box-shadow: 0 8px 22px rgb(11 28 63 / .1); }
.press-card__media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.press-card:hover .press-card__media > img { transform: scale(1.05); }
/* Paper logo as a white chip; the source logos are framed 2:1 JPGs, so the frame is cropped off. */
.press-card__logo { position: absolute; left: .4rem; bottom: .4rem; width: 64px; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 6px; background: var(--c-white); box-shadow: 0 2px 8px rgb(0 0 0 / .18); }
.press-card__logo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }
.press-card__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: .8125rem; font-weight: 600; line-height: 1.35; }
.press-card:hover .press-card__title { color: #0e7f8c; }
.about__more { border-radius: 10px; }

@media (max-width: 760px) {
	/* minmax(0, …): the sideways-scrolling press row must not widen the box. */
	.about__inner { grid-template-columns: minmax(0, 1fr); }
	/* Portrait frame, no zoom: head to knees instead of a cropped face. */
	.about__photo { width: min(100%, 440px); margin-inline: auto; aspect-ratio: 4 / 5; }
	.about__photo img { object-position: 50% 30%; transform: none; }
}

/* ---------- services tabs ---------- */

.svc { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(1rem, 2vw, 2rem); }
.svc__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.svc__all { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--c-navy); text-decoration: none; }
.svc__all:hover { color: #0e7f8c; }

/* Tabs: one row of icon chips; on narrow screens the row scrolls sideways. */
.svc__tabs {
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(130px, 1fr); gap: .6rem;
	overflow-x: auto; scrollbar-width: none; padding: .25rem .25rem 1rem; margin: 0 -.25rem;
	scroll-snap-type: x proximity;
}
.svc__tabs::-webkit-scrollbar { display: none; }
/* Soft fade on the side(s) where more tabs are hidden (classes set by main.js). */
.svc__tabs.has-more-end { -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); }
.svc__tabs.has-more-start { -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%); mask-image: linear-gradient(90deg, transparent, #000 20%); }
.svc__tabs.has-more-start.has-more-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
.svc__tab {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: .6rem;
	padding: 1.1rem .75rem 1rem; border: 1px solid rgb(11 28 63 / .08); border-radius: 16px;
	background: var(--c-white); color: var(--c-navy-soft); font: inherit; font-size: .875rem; font-weight: 600; line-height: 1.25; text-align: center;
	cursor: pointer; scroll-snap-align: start;
	transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.svc__tab:hover { color: var(--c-navy); border-color: rgb(11 28 63 / .18); transform: translateY(-2px); }
.svc__icon {
	display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
	background: var(--c-cyan-soft); color: #0e7f8c; transition: background-color .2s, color .2s, box-shadow .2s;
}
/* Service icons: SVG files painted in the text colour through a mask (see mhk_service_icon()). */
.svc-icon { display: inline-block; flex: none; width: 26px; height: 26px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.svc__icon .svc-icon { width: 34px; height: 34px; }
.svc__tab[aria-selected="true"] { background: var(--c-navy); border-color: var(--c-navy); color: var(--c-white); box-shadow: 0 16px 36px rgb(11 28 63 / .25); }
.svc__tab[aria-selected="true"] .svc__icon { background: var(--c-cyan); color: var(--c-navy); box-shadow: 0 0 0 6px rgb(47 216 236 / .18); }
/* Little pointer joining the active tab to the panel. */
.svc__tab[aria-selected="true"]::after {
	content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; margin-left: -7px;
	background: var(--c-navy); transform: rotate(45deg); border-radius: 2px;
}

.svc__panel {
	display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: stretch;
	margin-top: .25rem; overflow: hidden;
	background: var(--c-white); border: 1px solid rgb(11 28 63 / .08); border-radius: 22px;
	box-shadow: 0 24px 60px rgb(11 28 63 / .08);
}
.svc__panel + .svc__panel { margin-top: 1rem; }
.svc.is-ready .svc__panel { margin-top: .25rem; }
.svc__panel[hidden] { display: none; }
.svc.is-ready .svc__panel:not([hidden]) { animation: svc-in .4s ease both; }
@keyframes svc-in { from { opacity: 0; transform: translateY(8px); } }
.svc__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 1rem + 3vw, 3.25rem); }
.svc__num { font-size: .8rem; font-weight: 700; letter-spacing: .12em; color: #0e7f8c; font-variant-numeric: tabular-nums; }
.svc__title { margin: .5rem 0 1rem; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); line-height: 1.15; letter-spacing: -.015em; color: var(--c-navy); }
.svc__text { max-width: 56ch; margin: 0 0 1.75rem; color: var(--c-navy-soft); }
.svc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.svc__actions .btn { border-radius: 10px; padding: .9rem 1.4rem; }
.svc__wa { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--c-navy-soft); text-decoration: none; }
.svc__wa .mhk-icon { color: var(--c-wa); }
.svc__wa:hover { color: var(--c-navy); }
/* The service photos are square: shown whole, at 1:1. */
.svc__media { position: relative; align-self: center; margin: 0; aspect-ratio: 1; }
.svc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The photo's left edge melts into the white panel. */
.svc__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--c-white), transparent 22%); pointer-events: none; }

@media (max-width: 860px) {
	.svc__panel { grid-template-columns: 1fr; }
	.svc__media { order: -1; }
	.svc__media::before { display: none; }
	/* Two and a half tabs per screen, so the cut-off one shows the row scrolls. */
	.svc__tabs { grid-auto-columns: calc((100% - 1.2rem) / 2.4); }
	/* Keep the panel short on phones; the full text is one tap away. */
	.svc__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .svc.is-ready .svc__panel:not([hidden]) { animation: none; } }

/* ---------- before/after carousel ---------- */

/* isolation: the slides' z-index (70–200) stays inside this section, below the sticky header and its menu. */
.results { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(3rem, 2rem + 4vw, 6rem); overflow: hidden; isolation: isolate; }
.results__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 3rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
/* Arrows: at the far left and right edges of the slider, aligned with the page container. */
.results__btn {
	/* Above every slide (main.js gives slides z-index 70–100). */
	position: absolute; top: 50%; z-index: 200; transform: translateY(-50%);
	display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%;
	background: var(--c-white); color: var(--c-navy); cursor: pointer;
	box-shadow: 0 8px 24px rgb(11 28 63 / .22);
	transition: background-color .15s, color .15s;
}
.results__btn--prev { left: max(1rem, calc((100% - var(--wide)) / 2)); }
.results__btn--next { right: max(1rem, calc((100% - var(--wide)) / 2)); }
.results__btn:hover { background: var(--c-navy); color: var(--c-white); }
.results__btn--prev .mhk-icon { transform: scaleX(-1); }
.results__btn .mhk-icon { width: 22px; height: 22px; }
.results:not(.is-ready) .results__btn { display: none; }

/* Slide size = the photo's own 1:1 shape; neighbours scale down from it. */
.results__stage { --slide: min(620px, 90vw, 60vh); position: relative; height: var(--slide); outline: none; touch-action: pan-y; user-select: none; cursor: grab; }
.results__stage.is-dragging { cursor: grabbing; }
.results__stage:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 8px; }
.results__list { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.result {
	position: absolute; top: 0; left: 50%; width: var(--slide); height: var(--slide); margin-left: calc(var(--slide) / -2);
	/* --d: signed distance from the active slide (set by main.js). */
	--abs: max(var(--d), calc(var(--d) * -1));
	--scale: calc(1 - var(--abs) * .2);
	--gap: calc(var(--slide) * .62);
	/* While dragging, --d is fractional, so size, offset and fade follow the finger. */
	transform: translateX(calc(var(--d) * var(--gap))) scale(var(--scale));
	opacity: calc(1 - var(--abs) * .22);
	transition: transform .55s cubic-bezier(.4, .1, .2, 1), opacity .55s;
}
.result[hidden] { display: none; }
.is-dragging .result { transition: none; }
.result__link { display: block; height: 100%; border-radius: 18px; overflow: hidden; background: var(--c-white); box-shadow: 0 18px 50px rgb(11 28 63 / .14); }
.result__link img { width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; filter: grayscale(1); transition: filter .55s; }
.result.is-active .result__link img { filter: none; }
.result.is-active .result__link { box-shadow: 0 0 0 1.5px rgb(47 216 236 / .8), 0 0 0 8px rgb(47 216 236 / .08), 0 30px 70px rgb(11 28 63 / .22); }
.result.is-active .result__link img { cursor: zoom-in; }

/* No JS: a plain scrolling row. */
.results:not(.is-ready) .results__stage { height: auto; }
.results:not(.is-ready) .results__list { position: static; display: flex; gap: 1rem; overflow-x: auto; padding: 0 1rem 1rem; }
.results:not(.is-ready) .result { position: static; width: min(80vw, 420px); height: auto; margin: 0; flex: none; transform: none; opacity: 1; }

.results__dialog {
	width: min(92vw, 960px); padding: 0; border: 0; border-radius: 18px; background: var(--c-white);
	box-shadow: 0 40px 100px rgb(0 0 0 / .4);
}
.results__dialog::backdrop { background: rgb(11 28 63 / .7); backdrop-filter: blur(6px); }
.results__dialog img { display: block; width: 100%; height: auto; }
.results__close {
	position: absolute; top: .6rem; right: .6rem; z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 50%;
	background: var(--c-navy); color: var(--c-white); font-size: 1.6rem; line-height: 1; cursor: pointer;
}

@media (max-width: 720px) {
	.results__stage { --slide: min(78vw, 400px); }
	.result { --gap: calc(var(--slide) * .5); }
}
@media (prefers-reduced-motion: reduce) { .result { transition: none; } }

/* ---------- clinic tour ---------- */

.clinic { padding-block: clamp(1rem, 2vw, 2rem) clamp(3rem, 2rem + 4vw, 6rem); }
.clinic__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 3rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.clinic__lead { max-width: 46ch; margin: 0; color: var(--c-navy-soft); }

/* Video takes the left half (two rows); the four rooms fill a 2×2 grid on the right. */
.clinic__grid {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 14vw, 230px);
	gap: .9rem; margin: 0; padding: 0; list-style: none;
}
.clinic__tile { position: relative; min-width: 0; }
.clinic__tile--video { grid-column: span 2; grid-row: span 2; }
.clinic__media {
	position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; overflow: hidden;
	border-radius: 18px; background: var(--c-navy); color: var(--c-white); cursor: pointer; text-align: left; font: inherit;
	box-shadow: 0 14px 36px rgb(11 28 63 / .12);
}
.clinic__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.clinic__media:hover img, .clinic__media:focus-visible img { transform: scale(1.05); }
/* Dark bottom gradient keeps the caption readable on any photo. */
.clinic__media::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(180deg, transparent, rgb(11 28 63 / .78)); pointer-events: none; }
.clinic__caption { position: absolute; left: 1rem; right: 1rem; bottom: .9rem; z-index: 1; font-weight: 700; font-size: 1rem; line-height: 1.25; text-shadow: 0 1px 3px rgb(0 0 0 / .3); }
.clinic__tile--video .clinic__caption { left: 1.5rem; bottom: 1.4rem; font-size: 1.35rem; }
.clinic__count {
	position: absolute; top: .75rem; right: .75rem; z-index: 1; padding: .25rem .6rem; border-radius: 999px;
	background: rgb(255 255 255 / .9); color: var(--c-navy); font-size: .75rem; font-weight: 700;
}
.clinic__play {
	position: absolute; top: 50%; left: 50%; z-index: 1; display: grid; place-items: center; width: 78px; height: 78px; margin: -39px 0 0 -39px;
	border-radius: 50%; background: var(--c-cyan); color: var(--c-navy);
	box-shadow: 0 0 0 10px rgb(47 216 236 / .25), 0 14px 34px rgb(0 0 0 / .3);
	transition: transform .2s;
}
.clinic__media:hover .clinic__play { transform: scale(1.08); }
.clinic__tile iframe { width: 100%; height: 100%; border: 0; border-radius: 18px; }

.clinic__viewer {
	width: min(94vw, 1100px); padding: 0; border: 0; border-radius: 18px; overflow: visible; background: transparent;
}
.clinic__viewer::backdrop { background: rgb(11 28 63 / .85); backdrop-filter: blur(6px); }
.clinic__viewer figure { margin: 0; }
.clinic__viewer img { display: block; width: 100%; max-height: 82vh; object-fit: contain; border-radius: 14px; background: #000; }
.clinic__viewer figcaption { margin-top: .75rem; color: var(--c-white); font-weight: 600; text-align: center; }
.clinic__vbtn, .clinic__close {
	position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
	background: var(--c-white); color: var(--c-navy); cursor: pointer; box-shadow: 0 8px 24px rgb(0 0 0 / .3);
}
.clinic__vbtn { top: calc(50% - 1.25rem); transform: translateY(-50%); }
.clinic__vbtn--prev { left: -.75rem; }
.clinic__vbtn--next { right: -.75rem; }
.clinic__vbtn--prev .mhk-icon { transform: scaleX(-1); }
.clinic__vbtn[hidden] { display: none; }
.clinic__close { top: -.75rem; right: -.75rem; font-size: 1.6rem; line-height: 1; background: var(--c-navy); color: var(--c-white); }

@media (max-width: 860px) {
	.clinic__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
	.clinic__tile--video { grid-column: 1 / -1; grid-row: span 2; }
	.clinic__play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
	.clinic__vbtn--prev { left: .5rem; }
	.clinic__vbtn--next { right: .5rem; }
	.clinic__close { top: .5rem; right: .5rem; }
}

/* ---------- Olette Paris ---------- */

/* Navy like the videos section; set photo beside the intro, white product cards below. */
.olette {
	padding-block: clamp(3rem, 2rem + 4vw, 6rem);
	background: radial-gradient(60% 70% at 15% 0%, rgb(47 216 236 / .12), transparent 60%), var(--c-navy);
	color: #c9d3e6;
}
.olette__intro {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(1.75rem, 1rem + 4vw, 4.5rem);
}
.olette__media { margin: 0; overflow: hidden; border-radius: 24px; box-shadow: 0 24px 60px rgb(0 0 0 / .35); }
.olette__media img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 1174; object-fit: cover; }
.olette .section-heading { margin-bottom: 1rem; color: var(--c-white); }
.olette__text > p:not(.section-eyebrow) { max-width: 52ch; margin: 0 0 1.75rem; line-height: 1.75; color: #c9d3e6; }
.olette__store { border-radius: 10px; padding: .9rem 1.4rem; background: var(--c-cyan); color: var(--c-navy); }
.olette__store:hover { background: var(--c-white); color: var(--c-navy); }

.olette__list {
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.75rem, .5rem + 1vw, 1.25rem);
	margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0 0; padding: 0; list-style: none;
}
.olette-card {
	display: flex; flex-direction: column; gap: .6rem; height: 100%; padding: .75rem .75rem 1rem;
	border: 1px solid rgb(11 28 63 / .07); border-radius: 18px; background: var(--c-white);
	color: var(--c-navy); text-decoration: none; transition: transform .25s, box-shadow .25s;
}
.olette-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgb(0 0 0 / .3); color: var(--c-navy); }
.olette-card__media { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: #f3f6f8; }
.olette-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.olette-card:hover .olette-card__media img { transform: scale(1.04); }
.olette-card__name { flex: 1; padding-inline: .25rem; font-size: .9375rem; font-weight: 700; line-height: 1.35; }
.olette-card__more { display: inline-flex; align-items: center; gap: .35rem; padding-inline: .25rem; font-size: .8125rem; font-weight: 600; color: #0e7f8c; }
.olette-card__more .mhk-icon { width: 14px; height: 14px; }

/* Product popup: photo beside the description and the buy link. */
.olette-dialog {
	width: min(92vw, 880px); max-height: 90vh; padding: 0; border: 0; border-radius: 22px; overflow: hidden;
	background: var(--c-white); color: var(--c-navy); box-shadow: 0 40px 100px rgb(0 0 0 / .4);
}
.olette-dialog[open] { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.olette-dialog::backdrop { background: rgb(11 28 63 / .7); backdrop-filter: blur(6px); }
.olette-dialog__media { background: #f3f6f8; }
.olette-dialog__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Only the text scrolls, so the close button stays put. */
.olette-dialog__body { overflow-y: auto; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); font-size: .9688rem; line-height: 1.65; color: var(--c-navy-soft); }
.olette-dialog__body p { margin: 0 0 1rem; }
.olette-dialog__brand { margin-bottom: .4rem !important; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #0e7f8c; }
.olette-dialog__title { margin: 0 2.5rem .5rem 0; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); line-height: 1.2; letter-spacing: -.015em; color: var(--c-navy); }
.olette-dialog__tagline { font-weight: 600; color: var(--c-navy); }
.olette-dialog__points { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.olette-dialog__points li { position: relative; margin-bottom: .45rem; padding-left: 1.4rem; }
.olette-dialog__points li::before { content: ""; position: absolute; left: 0; top: .55em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--c-cyan); }
.olette-dialog__buy { border-radius: 10px; padding: .9rem 1.6rem; }
.olette-dialog__note { margin: .6rem 0 0 !important; font-size: .8125rem; color: var(--c-muted); }
.olette-dialog__close {
	position: absolute; top: .75rem; right: .75rem; z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 50%;
	background: var(--c-navy); color: var(--c-white); font-size: 1.6rem; line-height: 1; cursor: pointer;
}

@media (max-width: 720px) {
	.olette-dialog[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
	.olette-dialog__media { aspect-ratio: 16 / 10; }
}

@media (max-width: 960px) {
	.olette__intro { grid-template-columns: minmax(0, 1fr); }
	/* A wide crop of the set photo, so the text is not pushed a screen down. */
	.olette__media img { aspect-ratio: 16 / 10; object-position: 50% 70%; }
	/* Products scroll sideways instead of shrinking to five narrow columns. */
	.olette__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .5rem; }
	.olette__list::-webkit-scrollbar { display: none; }
	.olette__list li { flex: none; width: min(46vw, 220px); scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
	.olette-card, .olette-card__media img { transition: none; }
}

/* ---------- FAQ ---------- */

.faq { padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2rem, 2vw + 1rem, 3.5rem); }
.faq__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.faq__side { position: sticky; top: calc(var(--header-h) + var(--header-gap) + 1.5rem); }
.faq__card { margin-top: 2rem; padding: 1.5rem; background: #f5f8fc; border-radius: 18px; }
.faq__card-title { margin: 0 0 .35rem; font-weight: 700; color: var(--c-navy); }
.faq__card p:not(.faq__card-title) { margin: 0 0 1.1rem; color: var(--c-navy-soft); font-size: .9375rem; }
.faq__card .btn { border-radius: 10px; }

.faq__list { display: grid; gap: .75rem; }
.faq__item { border: 1px solid rgb(11 28 63 / .08); border-radius: 16px; background: var(--c-white); transition: border-color .2s, box-shadow .2s; }
.faq__item[open] { border-color: rgb(14 127 140 / .35); box-shadow: 0 16px 40px rgb(11 28 63 / .08); }
.faq__item summary {
	display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.25rem; cursor: pointer; list-style: none;
	font-weight: 700; color: var(--c-navy); line-height: 1.35;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover .faq__q { color: #0e7f8c; }
.faq__num { flex: none; font-size: .8rem; font-weight: 700; color: #0e7f8c; font-variant-numeric: tabular-nums; }
.faq__q { flex: 1; }
/* Plus that turns into a minus when open. */
.faq__toggle { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--c-cyan-soft); transition: background-color .2s; }
.faq__toggle::before, .faq__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: #0e7f8c; transition: transform .25s; }
.faq__toggle::after { transform: rotate(90deg); }
.faq__item[open] .faq__toggle { background: var(--c-navy); }
.faq__item[open] .faq__toggle::before, .faq__item[open] .faq__toggle::after { background: var(--c-white); }
.faq__item[open] .faq__toggle::after { transform: rotate(0); }
.faq__a { padding: 0 1.25rem 1.25rem calc(1.25rem + 1.6rem + 1rem); color: var(--c-navy-soft); font-size: .9688rem; line-height: 1.7; }
.faq__a p { margin: 0 0 .8rem; }
.faq__a p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
	.faq__inner { grid-template-columns: minmax(0, 1fr); }
	.faq__side { position: static; }
	.faq__card { display: none; }
	.faq__a { padding-left: 1.25rem; }
}

/* ---------- blog ---------- */

.home-blog { padding-block: clamp(2rem, 2vw + 1rem, 3.5rem) 0; }
.home-blog__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.home-blog__all { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--c-navy); text-decoration: none; }
.home-blog__all:hover { color: #0e7f8c; }
.home-blog .card-grid { margin-bottom: 0; }
/* Phones: one swipeable row with the next post peeking in, not three tall cards. */
@media (max-width: 760px) {
	.home-blog .card-grid { display: flex; gap: 1rem; margin-inline: -.25rem; padding: .25rem .25rem 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
	.home-blog .card-grid::-webkit-scrollbar { display: none; }
	.home-blog .card-grid > * { flex: 0 0 82%; scroll-snap-align: start; }
}

/* ---------- videos ---------- */

.videos {
	padding-block: clamp(3rem, 2rem + 4vw, 6rem);
	background: radial-gradient(60% 80% at 85% 0%, rgb(47 216 236 / .14), transparent 60%), var(--c-navy);
	color: #c9d3e6;
}
.videos .section-heading { color: var(--c-white); }
.videos__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.btn--light { border: 1.5px solid rgb(255 255 255 / .25); border-radius: 10px; color: var(--c-white); background: transparent; }
.btn--light:hover { border-color: var(--c-white); color: var(--c-white); }
/* One horizontal row (swipe, drag or arrows; see main.js); the next video peeks in. */
.videos__grid { display: flex; gap: 1.25rem; padding-bottom: 2.5rem; margin-bottom: -2.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; user-select: none; }
.videos__grid::-webkit-scrollbar { display: none; }
.videos__grid.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.videos__grid .video-card { flex: 0 0 min(44%, 540px); scroll-snap-align: start; }
.videos .strip { margin: 0; }
.videos .strip__btn { top: calc(50% - 1.4rem); }
@media (max-width: 760px) { .videos__grid .video-card { flex-basis: 86%; } }
.video-card { margin: 0; }
.video-card .mhk-yt__link, .video-card iframe { border-radius: 14px; box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 20px 50px rgb(0 0 0 / .3); }
.video-card figcaption { margin-top: .9rem; color: var(--c-white); font-weight: 600; font-size: 1.0625rem; line-height: 1.4; }
/* Channel the video aired on: logo on a white chip so dark and light logos both read. */
.video-card__channel { display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-cyan); }
.video-card__channel img { width: auto; height: 28px; max-width: 110px; padding: 3px 6px; border-radius: 6px; background: var(--c-white); object-fit: contain; box-sizing: content-box; }


.home-content { padding-block: 2rem; }
.mhk-eyebrow { margin-bottom: .25rem; color: var(--c-accent); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-small); }
.mhk-eyebrow + .wp-block-heading { margin-top: 0; }

/* Contact Form 7 */
.wpcf7 input:not([type="submit"]):not([type="checkbox"]), .wpcf7 textarea, .wpcf7 select {
	width: 100%; padding: .75rem 1rem; border: 1px solid var(--c-border); border-radius: 8px; font: inherit;
}
.wpcf7 input[type="submit"] { padding: .8rem 1.5rem; border: 0; border-radius: 999px; background: var(--c-primary); color: var(--c-white); font: inherit; font-weight: 600; cursor: pointer; }

/* ---------- footer ---------- */

.site-footer {
	position: relative; margin-top: clamp(4rem, 3rem + 4vw, 7rem); padding-top: 0;
	background: radial-gradient(60% 50% at 90% 0%, rgb(47 216 236 / .12), transparent 60%), var(--c-navy);
	color: #b9c4da; font-size: .95rem;
}
.site-footer a { color: inherit; text-decoration: none; overflow-wrap: anywhere; transition: color .15s; } /* Long e-mail must not widen the page. */
.site-footer a:hover { color: var(--c-white); }

/* CTA card overlapping the top edge of the footer. */
.site-footer__cta {
	position: relative; top: calc(clamp(2.5rem, 2rem + 2vw, 3.5rem) * -1); margin-bottom: calc(clamp(2.5rem, 2rem + 2vw, 3.5rem) * -1 + 3rem);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem;
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1.5rem, 1rem + 3vw, 3rem);
	background: linear-gradient(120deg, #13306a, #0b1c3f 60%); border: 1px solid rgb(47 216 236 / .25); border-radius: 22px;
	box-shadow: 0 30px 70px rgb(11 28 63 / .35);
}
.site-footer__cta-title { margin: 0 0 .35rem; color: var(--c-white); font-size: clamp(1.3rem, 1rem + 1.2vw, 1.75rem); font-weight: 800; letter-spacing: -.015em; }
.site-footer__cta-text { margin: 0; color: #b9c4da; }
.site-footer__cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.site-footer__cta-actions .btn { border-radius: 10px; padding: .9rem 1.4rem; }
.btn--cyan { background: var(--c-cyan); color: var(--c-navy); box-shadow: 0 0 0 6px rgb(47 216 236 / .15); }
.btn--cyan:hover { background: #6be6f3; color: var(--c-navy); }
.site-footer .btn--cyan, .site-footer .btn--cyan:hover { color: var(--c-navy); }

.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.site-footer__logo img { height: 56px; width: auto; margin-bottom: 1rem; }
.site-footer__brand p { max-width: 34ch; margin: 0 0 1.25rem; line-height: 1.65; }
.site-footer__title { margin: 0 0 1rem; color: var(--c-white); font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li { margin-bottom: .6rem; }
.site-footer__contact li { display: flex; gap: .6rem; align-items: flex-start; }
.site-footer__contact .mhk-icon { margin-top: .2em; color: var(--c-cyan); }
.site-footer__bottom {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
	margin-top: 3rem; padding-block: 1.25rem; border-top: 1px solid rgb(255 255 255 / .1); font-size: .8125rem; color: #8d9bb6;
}
.site-footer__bottom p { margin: 0; }

.mhk-social { list-style: none; display: flex; gap: .5rem; margin: 0; padding: 0; }
.mhk-social a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgb(255 255 255 / .12); background: rgb(255 255 255 / .04); }
.mhk-social a:hover { background: var(--c-cyan); border-color: var(--c-cyan); color: var(--c-navy); }

@media (max-width: 960px) {
	.site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
	/* Services and company links side by side; brand and contact full width. */
	.site-footer__grid { gap: 2rem 1.25rem; }
	.site-footer__grid > section:last-child { grid-column: 1 / -1; }
	.site-footer__cta-actions { gap: .5rem; }
	.site-footer__cta-actions, .site-footer__cta-actions .btn { width: 100%; justify-content: center; }
	.site-footer__cta-actions .btn { padding: .75rem 1rem; }
}

/* ---------- floating buttons ----------
   WhatsApp bottom right, as on estecapelli.com: a green circle with a ring
   pulsing out from behind it, opening into a pill on hover; it first opens a
   hand-off card (.wa-notice). AI analysis bottom left, as on the Estecapelli
   landing pages: a round AI badge with a spinning gradient ring that opens
   the photo widget in a floating island (.ai-pop). Both step aside while the
   footer is on screen (.is-away, main.js). */
@keyframes waFloatBob {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	25%      { transform: translateY(-7px) rotate(-5deg); }
	50%      { transform: translateY(0) rotate(0deg); }
	75%      { transform: translateY(-4px) rotate(5deg); }
}
@keyframes waFloatPulse {
	0%   { transform: scale(1);    opacity: .55; }
	70%  { transform: scale(1.45); opacity: 0; }
	100% { transform: scale(1.45); opacity: 0; }
}
@keyframes aiFloatSpin { to { transform: rotate(360deg); } }

.float-wp {
	position: fixed; right: 28px; bottom: 28px; z-index: 60;
	display: inline-flex; align-items: center; height: 60px; padding: 0 16px;
	border-radius: 50px; background: #25d366; color: #fff; font-weight: 600; line-height: 1; text-decoration: none;
	box-shadow: 0 10px 28px rgb(37 211 102 / .42), 0 2px 8px rgb(0 0 0 / .18);
	animation: waFloatBob 2.6s ease-in-out infinite;
	transition: background .25s ease, box-shadow .25s ease, opacity .25s ease, transform .25s ease, visibility .25s;
}
.float-wp:hover, .float-wp:focus-visible { background: #1db954; color: #fff; box-shadow: 0 14px 34px rgb(37 211 102 / .55), 0 2px 10px rgb(0 0 0 / .22); }
.float-wp__mark { position: relative; z-index: 2; display: grid; place-items: center; }
.float-wp__mark .mhk-icon { width: 28px; height: 28px; fill: currentColor; }
.float-wp__ring { position: absolute; inset: 0; z-index: 1; border-radius: 50px; background: #25d366; opacity: .55; animation: waFloatPulse 2.2s cubic-bezier(.4, 0, .6, 1) infinite; pointer-events: none; }
/* The label is held at zero width until hover, so at rest it is a plain circle. */
.float-wp-text {
	position: relative; z-index: 2; display: flex; flex-direction: column; gap: 2px;
	max-width: 0; margin-left: 0; overflow: hidden; white-space: nowrap; line-height: 1.3; opacity: 0;
	transition: max-width .35s ease, opacity .25s ease, margin-left .35s ease;
}
.float-wp:hover .float-wp-text, .float-wp:focus-visible .float-wp-text { max-width: 190px; margin-left: 12px; opacity: 1; }
.float-wp-text strong { font-size: 13px; font-weight: 700; }
.float-wp-text span { font-size: 11px; opacity: .85; }

.wa-notice {
	position: fixed; right: 28px; bottom: 104px; z-index: 61; width: min(360px, calc(100vw - 32px));
	opacity: 0; transform: translateY(12px) scale(.97); transform-origin: bottom right;
	transition: opacity .24s ease, transform .24s cubic-bezier(.34, 1.56, .64, 1);
}
.wa-notice.is-open { opacity: 1; transform: none; }
.wa-notice__card {
	position: relative; padding: 1rem 1.1rem 1.15rem; border: 1px solid #dfe5f0; border-radius: 20px;
	background: radial-gradient(18rem 10rem at 110% -30%, rgb(37 211 102 / .16), transparent 62%), linear-gradient(170deg, #fff, #f7f9fd);
	box-shadow: 0 18px 44px rgb(11 28 63 / .18), 0 2px 6px rgb(11 28 63 / .06);
}
/* Pointer towards the button below. */
.wa-notice__card::after {
	content: ""; position: absolute; right: 34px; bottom: -7px; width: 14px; height: 14px;
	background: #f7f9fd; border-right: 1px solid #dfe5f0; border-bottom: 1px solid #dfe5f0; border-bottom-right-radius: 3px; transform: rotate(45deg);
}
.wa-notice__head { display: flex; align-items: center; gap: .6rem; }
.wa-notice__mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(140deg, #25d366, #12a250); color: #fff; box-shadow: 0 4px 12px rgb(37 211 102 / .35); }
.wa-notice__mark .mhk-icon { fill: currentColor; }
.wa-notice__heading { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.25; }
.wa-notice__heading strong { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; color: var(--c-navy); }
.wa-notice__heading span { font-size: .78rem; font-weight: 600; color: #12a250; }
.wa-notice__close {
	flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; margin-left: auto;
	border: 0; border-radius: 9px; background: #eef1f7; color: var(--c-navy-soft); cursor: pointer; transition: background .2s, color .2s;
}
.wa-notice__close:hover { background: #e3e8f3; color: var(--c-navy); }
.wa-notice__close .mhk-icon { width: 18px; height: 18px; fill: currentColor; }
.wa-notice__text { margin: .85rem 0 0; font-size: .86rem; line-height: 1.55; color: var(--c-navy-soft); }
/* The exact line WhatsApp will open with, as an outgoing bubble. */
.wa-notice__preview { display: flex; justify-content: flex-end; margin-top: .85rem; }
.wa-notice__bubble { max-width: 100%; padding: .6rem .75rem; border-radius: 14px 14px 4px 14px; background: #d9fdd3; font-size: .82rem; line-height: 1.5; color: #1f3a24; overflow-wrap: anywhere; }
.wa-notice__go {
	display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1rem; padding: .75rem 1rem;
	border-radius: 12px; background: linear-gradient(135deg, #25d366, #17ab52); color: #fff; font-size: .92rem; font-weight: 700; text-decoration: none;
	box-shadow: 0 6px 18px rgb(37 211 102 / .35); transition: transform .2s, box-shadow .2s;
}
.wa-notice__go:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px rgb(37 211 102 / .5); }
.wa-notice__go .mhk-icon { width: 18px; height: 18px; fill: currentColor; }

.ai-float {
	position: fixed; left: 24px; bottom: 24px; z-index: 59;
	display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
	padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.ai-float.is-active { z-index: 1001; }
.ai-float-label {
	position: relative; padding: 7px 12px; border-radius: 50px;
	background: linear-gradient(140deg, #8b7cf6, #4f7cf0); color: #fff;
	font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .02em; white-space: nowrap;
	box-shadow: 0 8px 22px rgb(99 102 241 / .4);
}
.ai-float-label::after { content: ""; position: absolute; left: 26px; bottom: -4px; width: 8px; height: 8px; background: #7f7cf3; transform: rotate(45deg); }
.ai-float-btn {
	position: relative; display: block; width: 60px; height: 60px; border-radius: 50%;
	box-shadow: 0 10px 28px rgb(99 102 241 / .5), 0 2px 8px rgb(0 0 0 / .3);
	animation: waFloatBob 2.6s ease-in-out infinite; transition: box-shadow .25s ease;
}
.ai-float-btn::before { content: ""; position: absolute; inset: -3px; z-index: 1; border-radius: 50%; background: conic-gradient(#8b7cf6, #3b82f6, #22d3ee, #c084fc, #8b7cf6); animation: aiFloatSpin 3.2s linear infinite; }
.ai-float-btn img { position: relative; z-index: 2; display: block; width: 100%; height: 100%; border: 2px solid #0a1424; border-radius: 50%; object-fit: cover; object-position: 51% 42%; }
.ai-float:hover .ai-float-btn, .ai-float:focus-visible .ai-float-btn { box-shadow: 0 14px 34px rgb(99 102 241 / .65), 0 2px 10px rgb(0 0 0 / .35); }
.ai-float:focus { outline: none; }
.ai-float:focus-visible .ai-float-label { outline: 2px solid #c4b5fd; outline-offset: 2px; }
.ai-float-ring { position: absolute; inset: 0; z-index: 0; border-radius: 50%; background: #7c6cf6; opacity: .6; animation: waFloatPulse 2.2s cubic-bezier(.4, 0, .6, 1) infinite; pointer-events: none; }

/* Out of the way while the footer is on screen. */
.float-wp.is-away, .ai-float.is-away:not(.is-active) { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(24px) scale(.9); animation: none; }

.ai-pop {
	position: fixed; left: 24px; bottom: 128px; z-index: 1000;
	width: 440px; max-width: calc(100vw - 48px); max-height: calc(100dvh - 150px);
	overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
	border-radius: 22px;
	background:
		radial-gradient(ellipse 80% 50% at 85% 0%, rgb(91 155 213 / .22), transparent 65%),
		radial-gradient(ellipse 70% 50% at 10% 100%, rgb(139 124 246 / .18), transparent 65%),
		linear-gradient(160deg, #0e2038 0%, #0a1424 60%, #060c18 100%);
	box-shadow: 0 30px 70px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .08);
	opacity: 0; transform: translateY(16px) scale(.96); transform-origin: bottom left; pointer-events: none;
	transition: opacity .26s ease, transform .3s cubic-bezier(.34, 1.3, .64, 1);
}
.ai-pop[hidden] { display: none; }
.ai-pop.is-open { opacity: 1; transform: none; pointer-events: auto; }
.ai-pop__body { padding: 10px; }
.ai-pop .hair-widget { max-width: none; }
/* The widget's headings take their colour from the page; the site's navy headings would vanish here. */
.ai-pop :is(h1, h2, h3, h4) { color: var(--hw-text, #f6efe6); }
.ai-pop__close {
	position: absolute; top: 20px; right: 20px; z-index: 5; display: grid; place-items: center; width: 32px; height: 32px;
	border: 1px solid rgb(255 255 255 / .14); border-radius: 50%; background: rgb(10 20 36 / .85); color: #e8f0f8; cursor: pointer; transition: background .2s;
}
.ai-pop__close:hover, .ai-pop__close:focus-visible { background: rgb(255 255 255 / .16); }
.ai-pop__close .mhk-icon { width: 16px; height: 16px; fill: currentColor; }
/* Chrome autofill would paint the dark fields light blue. */
.ai-pop .hw-field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #1b2537 inset; box-shadow: 0 0 0 1000px #1b2537 inset; -webkit-text-fill-color: #f6efe6; caret-color: #f6efe6; }

@media (max-width: 768px) {
	/* No hover on touch screens: the WhatsApp button stays a circle. */
	.float-wp { right: 16px; bottom: 20px; width: 54px; height: 54px; padding: 0; justify-content: center; border-radius: 50%; }
	.float-wp__ring { border-radius: 50%; }
	.float-wp-text { display: none; }
	.wa-notice { right: 16px; bottom: 88px; }
	.wa-notice__card::after { right: 22px; }
	.ai-float { left: 16px; bottom: 18px; }
	.ai-float-label { padding: 6px 10px; font-size: 11px; }
	.ai-float-label::after { left: 23px; }
	.ai-float-btn { width: 54px; height: 54px; }
	.ai-pop { left: 10px; right: 10px; bottom: 112px; width: auto; max-width: none; max-height: calc(100dvh - 128px); border-radius: 20px; }
	.ai-pop__body { padding: 6px; }
}
@media (prefers-reduced-motion: reduce) {
	.float-wp, .ai-float-btn, .ai-float-btn::before { animation: none; }
	.float-wp__ring, .ai-float-ring { animation: none; opacity: 0; }
	.wa-notice, .ai-pop { transition: opacity .24s ease; transform: none; }
}

/* ---------- blog article (as on estecapelli.com articles) ---------- */

.article-hero {
	padding-block: clamp(1rem, 2vw, 2rem) clamp(2rem, 4vw, 3.5rem);
	border-bottom: 1px solid rgb(11 28 63 / .06);
	background:
		radial-gradient(rgb(11 28 63 / .07) 1px, transparent 1px) 0 0 / 22px 22px,
		radial-gradient(60% 80% at 100% 0%, rgb(47 216 236 / .14), transparent 70%),
		linear-gradient(180deg, var(--c-cyan-soft), #fff);
}
.article-hero__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); }
.article-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; min-width: 0; }
.article-hero .mhk-breadcrumbs { margin: 0; }
.article-hero__back { display: inline-flex; align-items: center; gap: .35rem; font-size: .9375rem; font-weight: 600; color: #0e7f8c; text-decoration: none; }
.article-hero__back span { font-size: 1.25rem; line-height: 1; }
.article-hero__back:hover { color: var(--c-navy); }
.article-hero__cat {
	display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 999px;
	background: var(--c-cyan); color: var(--c-navy); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
	box-shadow: 0 6px 16px rgb(47 216 236 / .3);
}
.article-hero__cat .mhk-icon { width: 13px; height: 13px; fill: currentColor; }
.article-hero__title { margin: 0; font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.08; letter-spacing: -.03em; color: var(--c-navy); text-wrap: balance; }
.article-hero__lead { margin: 0; padding-left: 1rem; border-left: 3px solid var(--c-cyan); font-size: 1.0938rem; line-height: 1.7; color: var(--c-navy-soft); }
.article-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .65rem; margin: .25rem 0 0; font-size: .9063rem; font-weight: 600; color: var(--c-navy-soft); }
.article-hero__meta img { width: 40px; height: 40px; border: 2px solid var(--c-white); border-radius: 50%; object-fit: cover; object-position: top; box-shadow: 0 2px 8px rgb(11 28 63 / .15); }
.article-hero__meta a { color: var(--c-navy); font-weight: 700; text-decoration: none; }
.article-hero__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--c-cyan); }
.article-hero__media { margin: 0; justify-self: end; width: min(100%, 540px); }
.article-hero__media img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 24px; box-shadow: 0 30px 70px rgb(11 28 63 / .18); }

/* Article left, contents list and consultation card right. */
.article-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; justify-content: space-between; align-items: start; gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(2rem, 4vw, 3.5rem); }
.article-content { max-width: 780px; }
.article-aside { position: sticky; top: calc(var(--header-h) + var(--header-gap) * 2 + 1rem); display: grid; gap: 1rem; max-height: calc(100vh - var(--header-h) - 3rem); overflow: auto; scrollbar-width: thin; }
.svc-toc.article-toc { padding: 0; overflow: hidden; border: 1px solid rgb(11 28 63 / .08); background: #f5f8fc; }
.svc-toc.article-toc summary { padding: .95rem 1.1rem; background: var(--c-navy); color: var(--c-white); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.svc-toc.article-toc summary::after { content: "\25BE"; float: right; color: var(--c-cyan); }
.svc-toc.article-toc:not([open]) summary::after { content: "\25B8"; }
.article-toc nav { padding: .4rem .6rem .7rem; }
.article-toc ol { margin-top: .35rem; }
.article-card__eyebrow { margin-bottom: .5rem !important; font-size: .7188rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-cyan); }
.article-card .btn + .btn { margin-top: .5rem; }
.svc-aside__card.article-card .btn--navy { border: 1px solid rgb(255 255 255 / .25); background: transparent; color: var(--c-white); }
.svc-aside__card.article-card .btn--navy .mhk-icon { color: var(--c-white); }
.svc-aside__card .article-card__ai { width: 100%; justify-content: center; border: 0; background: linear-gradient(140deg, #8b7cf6, #4f7cf0); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }

/* Article text: a short gradient rule over every section heading, styled tables and FAQ. */
.article-content h2::before { content: ""; display: block; width: 46px; height: 3px; margin-bottom: .75rem; border-radius: 3px; background: linear-gradient(90deg, var(--c-cyan), #0e7f8c); }
.article-content h2.rank-math-question::before, .article-content .rank-math-question::before { display: none; }
.article-content figure { margin: 1.75rem 0; }
.article-content img { height: auto; }
.article-content table { width: 100%; margin: 1.75rem 0; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid rgb(11 28 63 / .1); border-radius: 16px; font-size: .9375rem; line-height: 1.55; }
.article-content th, .article-content td { padding: .8rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgb(11 28 63 / .07); }
.article-content thead th { background: var(--c-navy); color: var(--c-white); font-weight: 700; }
.article-content tbody tr:nth-child(even) td { background: #f5f8fc; }
.article-content tbody tr:last-child td { border-bottom: 0; }
.article-content tbody td:first-child { font-weight: 600; color: var(--c-navy); }
.article-content blockquote { margin: 1.75rem 0; padding: 1rem 1.25rem; border-left: 3px solid var(--c-cyan); border-radius: 0 12px 12px 0; background: var(--c-cyan-soft); color: var(--c-navy); }
.article-content .rank-math-list { display: grid; gap: .65rem; }
.article-content .rank-math-list-item { border: 1px solid rgb(11 28 63 / .08); border-radius: 16px; background: var(--c-white); }
.article-content .rank-math-question { margin: 0; padding: 1rem 1.25rem .35rem; font-size: 1.0625rem; }
.article-content .rank-math-answer { padding: 0 1.25rem .5rem; font-size: .9688rem; }

@media (max-width: 960px) {
	.article-hero__inner { grid-template-columns: minmax(0, 1fr); }
	.article-hero__media { justify-self: start; }
	.article-body { grid-template-columns: minmax(0, 1fr); }
	/* Contents list first and folded (main.js), the card after the article. */
	.article-aside { display: contents; }
	.article-toc { order: -1; }
	.article-card { display: none; }
}
@media (max-width: 640px) {
	.article-content table { display: block; overflow-x: auto; font-size: .875rem; }
	.article-content th, .article-content td { min-width: 9rem; }
}

/* ---------- service page ---------- */
.svc-hero { padding-block: clamp(1rem, 2vw, 2rem) clamp(1.5rem, 3vw, 2.5rem); background: linear-gradient(180deg, var(--c-cyan-soft) 0%, rgb(227 249 252 / 0) 100%); }
.svc-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.svc-hero .mhk-breadcrumbs { margin-bottom: 1rem; }
.svc-hero .mhk-breadcrumbs .last { color: var(--c-navy); }
.svc-hero__title { margin: 0 0 1rem; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); line-height: 1.08; letter-spacing: -.025em; color: var(--c-navy); }
.svc-hero__lead { margin: 0 0 1.5rem; max-width: 62ch; font-size: 1.0625rem; line-height: 1.7; color: var(--c-navy-soft); }
.svc-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.svc-hero__media { margin: 0; position: relative; }
.svc-hero__media::before { content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; border: 1.5px solid rgb(47 216 236 / .55); border-radius: 24px; }
.svc-hero__media img { position: relative; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 24px; box-shadow: 0 24px 60px rgb(11 28 63 / .18); }

.svc-byline { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.5rem; font-size: .875rem; color: var(--c-navy-soft); line-height: 1.45; }
.svc-byline img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--c-white); box-shadow: 0 2px 8px rgb(11 28 63 / .15); }
.svc-byline a { font-weight: 700; color: var(--c-navy); }
.svc-byline small { display: block; font-size: .8125rem; color: var(--c-muted); }

.svc-facts { margin-block: clamp(.5rem, 2vw, 1.5rem) clamp(2rem, 4vw, 3rem); padding: clamp(1.25rem, 2.5vw, 1.75rem); border: 1px solid rgb(11 28 63 / .08); border-radius: 20px; background: var(--c-white); box-shadow: var(--shadow-float); }
.svc-facts__title { margin: 0 0 1rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: #0e7f8c; }
.svc-facts__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 1rem; margin: 0; }
.svc-facts__list div { padding-left: .9rem; border-left: 2px solid var(--c-cyan); }
.svc-facts__list dt { font-size: .8125rem; color: var(--c-muted); }
.svc-facts__list dd { margin: .15rem 0 0; font-weight: 700; color: var(--c-navy); line-height: 1.35; }
/* Two columns on phones: an odd last fact takes the full row. */
@media (max-width: 480px) {
	.svc-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.svc-facts__list div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.svc-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; padding-bottom: clamp(2rem, 4vw, 3rem); }
.svc-aside { position: sticky; top: calc(var(--header-gap) + 96px); display: grid; gap: 1rem; max-height: calc(100vh - 120px); overflow: auto; scrollbar-width: thin; }
.svc-toc { padding: 1rem 1.1rem; border-radius: 16px; background: var(--c-surface); }
.svc-toc summary { font-weight: 700; color: var(--c-navy); cursor: pointer; list-style: none; }
.svc-toc summary::-webkit-details-marker { display: none; }
.svc-toc ol { margin: .75rem 0 0; padding: 0; list-style: none; counter-reset: toc; }
.svc-toc li { counter-increment: toc; }
.svc-toc a { display: flex; gap: .6rem; padding: .4rem .5rem; border-radius: 8px; font-size: .875rem; line-height: 1.4; color: var(--c-navy-soft); text-decoration: none; }
.svc-toc a::before { content: counter(toc, decimal-leading-zero); flex: none; font-size: .75rem; font-weight: 700; color: #0e7f8c; padding-top: .1rem; }
.svc-toc a:hover { background: var(--c-white); color: var(--c-navy); }
.svc-toc a[aria-current="true"] { background: var(--c-white); color: var(--c-navy); font-weight: 600; box-shadow: inset 2px 0 0 var(--c-cyan); }
.svc-aside__card { padding: 1.25rem; border-radius: 16px; background: var(--c-navy); color: rgb(255 255 255 / .8); font-size: .875rem; }
.svc-aside__card p { margin: 0 0 1rem; }
.svc-aside__card .svc-aside__title { margin-bottom: .35rem; font-size: 1rem; font-weight: 700; color: var(--c-white); }
.svc-aside__card .btn { width: 100%; justify-content: center; background: var(--c-cyan); color: var(--c-navy); box-shadow: none; }
.svc-aside__card .btn .mhk-icon { color: var(--c-navy); }

/* Article typography: readable measure, clear hierarchy for skimming. */
.svc-content { max-width: 760px; padding-bottom: 0; color: var(--c-navy-soft); font-size: 1.0313rem; line-height: 1.8; }
.svc-content h2 { margin: 2.5em 0 .6em; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem); line-height: 1.2; letter-spacing: -.015em; color: var(--c-navy); scroll-margin-top: 110px; }
.svc-content h3 { margin: 1.8em 0 .5em; font-size: 1.2rem; color: var(--c-navy); scroll-margin-top: 110px; }
.svc-content > :first-child { margin-top: 0; }
.svc-content strong { color: var(--c-navy); }
.svc-content a { color: #0e7f8c; }
.svc-content li::marker { color: #0e7f8c; }
.svc-content .wp-block-image img { border-radius: 16px; }

/* FAQ blocks in the content, same look as the home page accordion. */
.svc-content .is-style-faq { display: grid; gap: .65rem; }
.svc-content .is-style-faq > * { width: 100%; max-width: none; }
.svc-content .is-style-faq .wp-block-details { margin: 0; border: 1px solid rgb(11 28 63 / .08); border-radius: 16px; background: var(--c-white); transition: border-color .2s, box-shadow .2s; }
.svc-content .is-style-faq .wp-block-details[open] { border-color: rgb(14 127 140 / .35); box-shadow: 0 16px 40px rgb(11 28 63 / .08); }
.svc-content .is-style-faq summary { position: relative; padding: 1.05rem 3.75rem 1.05rem 1.25rem; font-weight: 700; color: var(--c-navy); line-height: 1.4; }
.svc-content .is-style-faq summary::after { content: "+"; position: absolute; right: 1rem; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; background: var(--c-cyan-soft); color: #0e7f8c; font-size: 1.25rem; line-height: 31px; text-align: center; }
.svc-content .is-style-faq details[open] summary::after { content: "\2212"; background: var(--c-navy); color: var(--c-white); }
.svc-content .is-style-faq details > :not(summary) { margin: 0 1.25rem 1rem; font-size: .9688rem; }

.svc-related { padding-bottom: clamp(2rem, 4vw, 3rem); }
.svc-others { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 5vw, 4.5rem); }
.svc-others__title { margin: 0 0 1rem; font-size: 1.25rem; color: var(--c-navy); }
.svc-others ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.svc-others a { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border: 1px solid rgb(11 28 63 / .08); border-radius: 14px; background: var(--c-white); font-weight: 600; color: var(--c-navy); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.svc-others a span { flex: 1; }
.svc-others a .svc-icon { flex: none; width: 22px; height: 22px; color: #0e7f8c; }
.svc-others a .mhk-icon { width: 16px; height: 16px; color: #0e7f8c; transition: transform .2s; }
.svc-others a:hover { border-color: rgb(14 127 140 / .35); box-shadow: 0 10px 26px rgb(11 28 63 / .08); }
.svc-others a:hover .mhk-icon { transform: translateX(3px); }

@media (max-width: 960px) {
	.svc-hero__inner { grid-template-columns: minmax(0, 1fr); }
	.svc-hero__media { order: -1; max-width: 420px; }
	.svc-hero__media::before { display: none; }
	/* Square photos stay square on phones too. */
	.svc-body { grid-template-columns: minmax(0, 1fr); }
	.svc-aside { position: static; max-height: none; overflow: visible; }
	.svc-aside__card { display: none; }
	.svc-toc summary::after { content: "\25BE"; float: right; color: #0e7f8c; }
}

/* ---------- contact page ---------- */
.contact-hero { padding-bottom: clamp(3.5rem, 6vw, 5rem); }
.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1rem; margin: clamp(-3rem, -4vw, -2rem) 0 0; padding: 0; list-style: none; position: relative; }
.contact-card { display: flex; flex-direction: column; gap: .35rem; padding: 1.4rem; border: 1px solid rgb(11 28 63 / .08); border-radius: 20px; background: var(--c-white); box-shadow: var(--shadow-float); }
.contact-card__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: .5rem; border-radius: 14px; background: var(--c-cyan-soft); color: #0e7f8c; }
.contact-card__icon .mhk-icon { width: 22px; height: 22px; fill: currentColor; }
.contact-card__label { margin: 0; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0e7f8c; }
.contact-card__value { margin: 0; font-style: normal; font-weight: 600; line-height: 1.5; color: var(--c-navy); overflow-wrap: anywhere; }
.contact-card__link { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: .75rem; font-size: .9rem; font-weight: 600; color: var(--c-navy); text-decoration: none; }
.contact-card__link .mhk-icon { width: 16px; height: 16px; color: #0e7f8c; transition: transform .2s; }
.contact-card__link:hover { color: #0e7f8c; }
.contact-card__link:hover .mhk-icon { transform: translateX(3px); }
.contact-page .trust { padding-block: clamp(1.5rem, 3vw, 2.5rem) 0; }

.contact-map { position: relative; margin-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 5vw, 4.5rem); }
.contact-map__frame { display: block; width: 100%; height: clamp(360px, 45vw, 520px); border: 0; border-radius: 24px; background: var(--c-surface); }
.contact-map__card { position: absolute; left: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); max-width: 340px; padding: 1.25rem 1.35rem; border-radius: 18px; background: var(--c-white); box-shadow: 0 18px 44px rgb(11 28 63 / .2); color: var(--c-navy-soft); font-size: .9rem; line-height: 1.5; }
.contact-map__card p { margin: 0 0 .9rem; }
.contact-map__card .contact-map__title { margin-bottom: .25rem; font-size: 1.05rem; font-weight: 800; color: var(--c-navy); }

@media (max-width: 640px) {
	.contact-map__card { position: static; max-width: none; margin-top: .75rem; box-shadow: var(--shadow-float); }
	.contact-cards { gap: .6rem; }
	.contact-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: .9rem; row-gap: .1rem; padding: 1rem 1.1rem; }
	.contact-card__icon { grid-row: span 3; width: 42px; height: 42px; margin: 0; }
	.contact-card__link { padding-top: .35rem; }
}

/* ---------- about page ---------- */
.about-hero .section-eyebrow { margin-bottom: .6rem; }
.about-hero .svc-hero__title { margin-bottom: .35rem; }
.about-hero__role { margin: 0 0 1.1rem; font-weight: 600; color: #0e7f8c; }
.about-hero .svc-hero__actions { align-items: center; }
.about-hero .mhk-social { margin: 0; }
.about-hero .svc-hero__media img { aspect-ratio: 4 / 5; object-position: 50% 20%; }

.about-bio { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 2vw, 1.5rem); }
.about-bio__text .section-heading { margin-bottom: 1.25rem; }
.about-bio__text > p:not(.section-eyebrow) { max-width: 68ch; margin: 0 0 1rem; font-size: 1.0313rem; line-height: 1.8; color: var(--c-navy-soft); }
.about-bio__text strong { color: var(--c-navy); }
.about-bio__sign { margin-top: 1.75rem !important; padding-left: 1rem; border-left: 3px solid var(--c-cyan); font-weight: 800; color: var(--c-navy) !important; }
.about-bio__sign span { display: block; font-size: .875rem; font-weight: 500; color: var(--c-muted); }
.about-press { padding-bottom: clamp(1rem, 3vw, 2rem); }
.about-press .press { margin-top: 0; }

/* ---------- press page ---------- */

.press-hero .section-eyebrow { margin-bottom: .6rem; color: #0e7f8c; }
.press-hero .svc-hero__lead { margin-bottom: 1.75rem; }
/* Paper logos as white chips; the source logos are framed 2:1 JPGs, so the frame is cropped off. */
.press-hero__logos { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.press-hero__logos li { width: 112px; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 10px; background: var(--c-white); box-shadow: 0 6px 18px rgb(11 28 63 / .08), 0 0 0 1px rgb(11 28 63 / .05); }
.press-hero__logos img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }

.press-feature {
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); overflow: hidden;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	border: 1px solid rgb(11 28 63 / .08); border-radius: 22px; background: var(--c-white);
	box-shadow: 0 24px 60px rgb(11 28 63 / .08); color: var(--c-navy); text-decoration: none;
	transition: box-shadow .25s, transform .25s;
}
.press-feature:hover { transform: translateY(-3px); box-shadow: 0 30px 70px rgb(11 28 63 / .13); }
.press-feature__media { position: relative; min-height: 300px; overflow: hidden; }
.press-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.press-feature:hover .press-feature__media img { transform: scale(1.04); }
.press-feature__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.1rem; padding: clamp(1.5rem, 1rem + 3vw, 3rem); }
.press-feature__outlet { width: 104px; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 8px; box-shadow: 0 0 0 1px rgb(11 28 63 / .08); }
.press-feature__outlet img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }
.press-feature__title { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 800; line-height: 1.2; letter-spacing: -.015em; }
.press-feature__more, .press-tile__more { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: #0e7f8c; }
.press-feature__more .mhk-icon, .press-tile__more .mhk-icon { width: 16px; height: 16px; transition: transform .2s; }
.press-feature:hover .press-feature__more .mhk-icon, .press-tile:hover .press-tile__more .mhk-icon { transform: translateX(3px); }

.press-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin: 0 0 clamp(3rem, 5vw, 4.5rem); padding: 0; list-style: none; }
.press-tile {
	display: flex; flex-direction: column; gap: .75rem; height: 100%; padding: .75rem .75rem 1.25rem;
	border: 1px solid rgb(11 28 63 / .08); border-radius: 18px; background: var(--c-white);
	color: var(--c-navy); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.press-tile:hover { transform: translateY(-3px); border-color: rgb(14 127 140 / .3); box-shadow: 0 18px 44px rgb(11 28 63 / .1); }
.press-tile__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; background: var(--c-surface); }
.press-tile__media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.press-tile:hover .press-tile__media > img { transform: scale(1.05); }
.press-tile__logo { position: absolute; left: .6rem; bottom: .6rem; width: 76px; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 7px; background: var(--c-white); box-shadow: 0 2px 10px rgb(0 0 0 / .2); }
.press-tile__logo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }
.press-tile__title { flex: 1; padding-inline: .35rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; }
.press-tile__more { padding-inline: .35rem; font-size: .875rem; }
/* Desktop: five tiles as two wide over three, never one left alone on a row. */
@media (min-width: 961px) {
	.press-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.press-grid > li { grid-column: span 2; }
	.press-grid > li:nth-child(5n + 1), .press-grid > li:nth-child(5n + 2) { grid-column: span 3; }
}
.press-page__cta { padding-block: clamp(2.5rem, 5vw, 4rem); }
.press-page__cta .mhk-cta { margin: 0; }

@media (max-width: 760px) {
	.press-feature { grid-template-columns: minmax(0, 1fr); }
	.press-feature__media { min-height: 0; aspect-ratio: 16 / 10; }
	.press-hero__logos li { width: 92px; }
}
@media (prefers-reduced-motion: reduce) {
	.press-feature, .press-feature__media img, .press-tile, .press-tile__media > img { transition: none; }
}