/* ==========================================================================
   Expat en Malaisie — theme styles
   Mobile-first. Breakpoints:
     tablet   ≥ 37.5em  (600px)
     tablet+  ≥ 48em    (768px)
     desktop  ≥ 64em    (1024px)
     nav      ≥ 75em    (1200px)  full header menu
     wide     ≥ 90em    (1440px)
   ========================================================================== */

:root {
	/* Colour */
	--ink: #0a0a0a;
	--ink-2: #121212;
	--ink-3: #1b1b1b;
	--white: #f5f3ef;
	--paper: #f3f0ea;
	--paper-ink: #141414;
	--line: rgba(255, 255, 255, .10);
	--line-2: rgba(255, 255, 255, .18);
	--mute: rgba(245, 243, 239, .62);
	--mute-2: rgba(245, 243, 239, .40);
	--gold-rgb: 200, 169, 106;
	--gold: rgb(var(--gold-rgb));
	--gold-soft: rgba(var(--gold-rgb), .14);
	--gold-dark: #8a6a2e;

	/* Type families */
	--serif: "Cormorant Garamond", Georgia, serif;
	--sans: "Montserrat", system-ui, sans-serif;

	/* Fluid type scale */
	--fs-label-s: .625rem;                                   /* 10px */
	--fs-label: .6875rem;                                    /* 11px */
	--fs-small: clamp(.75rem, .72rem + .15vw, .8125rem);     /* 12–13px */
	--fs-body: clamp(.9375rem, .9rem + .15vw, 1rem);         /* 15–16px */
	--fs-lead: clamp(1rem, .95rem + .25vw, 1.0625rem);       /* 16–17px */
	--fs-h1: clamp(2.75rem, 1.55rem + 5.6vw, 7rem);          /* 44–112px */
	--fs-h2: clamp(2.25rem, 1.35rem + 4.2vw, 5.25rem);       /* 36–84px */
	--fs-h3: clamp(1.625rem, 1.25rem + 1.6vw, 2.25rem);      /* 26–36px */
	--fs-svc: clamp(1.875rem, 1.3rem + 2.4vw, 3.5rem);       /* 30–56px */
	--fs-quote: clamp(2.25rem, 1.25rem + 4.6vw, 5.75rem);    /* 36–92px */
	--fs-cta: clamp(2.5rem, 1.2rem + 6.4vw, 8.5rem);         /* 40–136px */
	--fs-step: clamp(4.5rem, 3.6rem + 3vw, 6.5rem);          /* 72–104px */

	/* Spacing scale */
	--space-3xs: .25rem;
	--space-2xs: .5rem;
	--space-xs: .75rem;
	--space-s: 1rem;
	--space-m: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	--space-l: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
	--space-xl: clamp(2.5rem, 1.75rem + 3vw, 4.5rem);
	--space-2xl: clamp(3.5rem, 2.25rem + 5vw, 6rem);
	--section: clamp(4.5rem, 2.75rem + 7.5vw, 8.75rem);
	--gap: clamp(1rem, .75rem + 1vw, 1.5rem);

	/* Layout */
	--wrap: 77.5rem;                                          /* 1240px */
	--gutter: clamp(1rem, .5rem + 2.5vw, 2rem);               /* 16–32px */
	--header-h: 4.25rem;
	--radius-s: .5rem;
	--radius-m: clamp(1rem, .85rem + .5vw, 1.375rem);
	--radius-l: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	--ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 64em) {
	:root { --header-h: 4.875rem; }
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { -webkit-font-smoothing: antialiased; overflow-x: clip; overflow-wrap: break-word; }
body::before {
	content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.editor-styles-wrapper::before { display: none; }
img, svg, video, iframe { max-width: 100%; height: auto; }
.ex-menu-open { overflow: hidden; }
:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(p) { text-wrap: pretty; }

.ex-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }

/* Grid and flex children may shrink below their content width (prevents overflow). */
:where(.ex-hero-grid, .ex-strip-grid, .ex-sec-head, .ex-svc, .ex-svc-name, .ex-entry, .ex-who, .ex-steps, .ex-manifesto,
	.ex-pr, .ex-team, .ex-reviews, .ex-faq, .ex-arts, .ex-lead-box, .ex-fgrid, .ex-nav-in, .ex-btns) > * { min-width: 0; }

/* Reset WordPress spacing inside the designed sections */
section:is(.ex-hero, .ex-sec, .ex-cta) { margin-block: 0; }
:is(.ex-hero, .ex-sec, .ex-cta) :is(p, h1, h2, h3, h4, figure) { margin: 0; }
:is(.ex-hero, .ex-sec, .ex-cta) :is(.is-layout-flow, .is-layout-constrained) > * { margin-block-start: 0; }
.ex-landing .wp-block-post-content > * { margin-block-start: 0; }
:is(.ex-hero, .ex-sec, .ex-cta, .ex-article-cta, .ex-guides) em,
:is(h1, h2, h3, h4) em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--gold); }

/* ==========================================================================
   Shared type
   ========================================================================== */
.ex-eyebrow {
	font-size: var(--fs-label); font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--mute);
	display: inline-flex; align-items: center; gap: var(--space-xs); line-height: 1.5;
}
.ex-eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: var(--gold); flex: none; }
.ex-h2 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h2) !important; line-height: .98; letter-spacing: -.01em; margin-top: var(--space-m) !important; }
.ex-sec-intro { color: var(--mute); font-weight: 300; font-size: var(--fs-body); line-height: 1.8; max-width: 26.25rem; }
.ex-ph {
	display: inline-block; width: fit-content; max-width: 100%; font-family: var(--sans) !important; font-style: normal; font-size: var(--fs-label) !important;
	font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); line-height: 1.5 !important;
	border: 1px dashed rgba(var(--gold-rgb), .55); padding: .1875rem .5rem; border-radius: .25rem; background: var(--gold-soft);
}
.ex-note, .ex-small { font-size: var(--fs-small); color: var(--mute-2); }
.ex-note { margin-top: var(--space-m) !important; }
.ex-empty { color: var(--mute); font-size: var(--fs-body); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.ex-btns { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.ex-btns.ex-center { justify-content: center; }
.wp-block-button__link, .ex-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
	min-height: 3rem; text-align: center; text-decoration: none; line-height: 1.3;
	transition: transform .4s var(--ease), background .3s, color .3s, border-color .3s;
}
.ex-btn {
	background: var(--white); color: var(--ink) !important; border-radius: 999px; padding: .9375rem 1.75rem;
	font: 600 .71875rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase;
}
.ex-btn:hover { background: var(--gold); }
.wp-block-button__link::after, .ex-btn::after { content: "→"; letter-spacing: 0; transition: transform .4s var(--ease); }
.wp-block-button__link[href^="mailto"]::after { content: none; }
.wp-block-button__link:hover::after, .ex-btn:hover::after { transform: translateX(.25rem); }
.wp-block-button.is-style-ex-ghost .wp-block-button__link {
	background: transparent; color: var(--white); border: 1px solid var(--line-2);
}
.wp-block-button.is-style-ex-ghost .wp-block-button__link:hover { border-color: var(--white); background: transparent; color: var(--white); }

/* Phones: buttons fill the row, use tighter letter-spacing and may wrap their text. */
.ex-btns > .wp-block-button { flex: 1 1 100%; }
.ex-btns > .wp-block-button > .wp-block-button__link { width: 100%; white-space: normal; letter-spacing: .1em; padding-inline: 1.25rem; }
.ex-btn { letter-spacing: .1em; }
@media (min-width: 37.5em) {
	.ex-btns > .wp-block-button { flex: 0 1 auto; }
	.ex-btns > .wp-block-button > .wp-block-button__link { width: auto; white-space: nowrap; letter-spacing: .16em; padding-inline: 1.75rem; }
	.ex-btn { white-space: nowrap; letter-spacing: .16em; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.ex-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background .4s, border-color .4s; }
.admin-bar .ex-nav { top: 46px; }
@media (min-width: 48.9375em) { .admin-bar .ex-nav { top: 32px; } }
.ex-nav.scrolled, .ex-menu-open .ex-nav { background: rgba(10, 10, 10, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--line); }
.ex-nav-in { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: var(--space-s); }
.ex-logo { display: flex; align-items: center; gap: var(--space-xs); line-height: 1; text-decoration: none; color: var(--white); flex: none; }
.ex-logo img { width: clamp(2.125rem, 1.9rem + .6vw, 2.5rem); height: auto; aspect-ratio: 1; }
.ex-wm { display: flex; flex-direction: column; align-items: center; gap: .375rem; }
.ex-wm b { font-size: clamp(.9375rem, .88rem + .25vw, 1.0625rem); font-weight: 600; letter-spacing: .42em; margin-right: -.42em; }
.ex-wm small { display: flex; align-items: center; gap: .375rem; font-size: .47rem; font-weight: 500; letter-spacing: .42em; color: var(--mute); }
.ex-wm small::before, .ex-wm small::after { content: ""; width: .625rem; height: 1px; background: var(--mute-2); }
.ex-links { display: none; }
.ex-menu { display: flex; gap: clamp(1.25rem, .2rem + 2vw, 2.125rem); list-style: none; margin: 0; padding: 0; }
.ex-menu a { font-size: var(--fs-label); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); text-decoration: none; white-space: nowrap; transition: color .3s; }
.ex-menu a:hover, .ex-menu .current-menu-item a { color: var(--white); }
.ex-nav-right { display: flex; align-items: center; gap: var(--space-xs); flex: none; }
.ex-nav-cta { display: none; }
.ex-nav-cta { min-height: 2.5rem; padding: .625rem 1.125rem; font-size: .65625rem; }
.ex-lang { display: flex; border: 1px solid var(--line-2); border-radius: 999px; padding: .1875rem; position: relative; }
.ex-lang a { position: relative; z-index: 1; color: var(--mute); font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .12em; padding: .5rem .75rem; border-radius: 999px; text-decoration: none; transition: color .3s; }
.ex-lang a.on { color: var(--ink); }
.ex-pill { position: absolute; top: .1875rem; bottom: .1875rem; left: .1875rem; width: calc(50% - .1875rem); background: var(--white); border-radius: 999px; transition: transform .45s var(--ease); }
.ex-lang[data-lang="fr"] .ex-pill { transform: translateX(100%); }
.ex-burger { display: block; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line-2); background: none; cursor: pointer; position: relative; flex: none; }
.ex-burger span { position: absolute; left: 30%; right: 30%; height: 1px; background: var(--white); transition: transform .4s var(--ease), top .4s var(--ease); }
.ex-burger span:first-child { top: 42%; }
.ex-burger span:last-child { top: 58%; }
.ex-burger[aria-expanded="true"] span:first-child { top: 50%; transform: rotate(45deg); }
.ex-burger[aria-expanded="true"] span:last-child { top: 50%; transform: rotate(-45deg); }
.ex-mobile {
	position: fixed; inset: 0; z-index: 49; background: var(--ink); overflow-y: auto;
	padding: calc(var(--header-h) + var(--space-l)) var(--gutter) var(--space-l);
	display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-l);
}
.ex-mobile[hidden] { display: none; }
.ex-mmenu { list-style: none; margin: 0; padding: 0; }
.ex-mmenu li { border-bottom: 1px solid var(--line); }
.ex-mmenu a { display: block; padding: var(--space-s) 0; font-family: var(--serif); font-size: clamp(1.75rem, 1.3rem + 2.5vw, 2.5rem); line-height: 1.1; color: var(--white); text-decoration: none; }
.ex-mobile-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); flex-wrap: wrap; }

/* Phones: compact EN/FR switch stays visible in the header, next to the menu button. */
.ex-nav-right > .ex-lang a { padding: .5rem .625rem; }
.ex-mobile-foot .ex-lang { display: none; }
@media (max-width: 22.49em) {
	/* Very small phones (under 360px): emblem only, so logo, switch and menu fit. */
	.ex-wm { display: none; }
}
@media (min-width: 37.5em) {
	.ex-nav-cta { display: inline-flex; }
	.ex-nav-right > .ex-lang a { padding: .5rem .75rem; }
}
@media (min-width: 75em) {
	.ex-links { display: block; }
	.ex-burger { display: none; }
	.ex-mobile { display: none !important; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.ex-hero { position: relative; padding-top: calc(var(--header-h) + var(--space-xl)); display: flex; flex-direction: column; overflow: hidden; }
.ex-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 45% at 70% 75%, rgba(var(--gold-rgb), .09), transparent 70%); pointer-events: none; }
.ex-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: end; flex: 1; position: relative; z-index: 1; }
.ex-h1 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h1) !important; line-height: .94 !important; letter-spacing: -.015em; margin: var(--space-m) 0 var(--space-l) !important; }
.ex-h1 em { display: block; }
.ex-lead { font-size: var(--fs-lead); color: var(--mute); max-width: 33.75rem; font-weight: 300; line-height: 1.8; }
.ex-hero .ex-btns { margin-top: var(--space-l) !important; }
.ex-meta { margin-top: var(--space-s) !important; font-size: var(--fs-small); color: var(--mute-2); letter-spacing: .04em; }
.ex-hero-art { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; max-width: 30rem; margin-inline: auto; min-height: clamp(13rem, 45vw, 24rem); }
.ex-sky { width: 100%; max-width: 35rem; position: relative; z-index: 1; }
.ex-sky img { width: 100%; opacity: .92; }
.ex-sun { position: absolute; width: clamp(2.75rem, 2rem + 2vw, 4rem); aspect-ratio: 1; border-radius: 50%; background: var(--gold); right: 10%; top: 10%; box-shadow: 0 0 5rem rgba(var(--gold-rgb), .45); }
.ex-coords { display: none; position: absolute; top: 10%; right: 0; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--mute-2); writing-mode: vertical-rl; }
body:not(.editor-styles-wrapper) .ex-sky img { clip-path: inset(100% 0 0 0); animation: ex-rise 2.2s var(--ease) .3s forwards; }
body:not(.editor-styles-wrapper) .ex-sun { opacity: 0; animation: ex-fade 1.6s var(--ease) 1.6s forwards; }
@keyframes ex-rise { to { clip-path: inset(0 0 0 0); } }
@keyframes ex-fade { to { opacity: 1; } }

.ex-strip { border-top: 1px solid var(--line); margin-top: var(--space-xl) !important; position: relative; z-index: 2; }
.ex-strip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ex-strip-item { padding: var(--space-m) var(--space-s); border-left: 1px solid var(--line); }
.ex-strip-item:nth-child(odd) { border-left: 0; padding-left: 0; }
.ex-strip-item:nth-child(n+3) { border-top: 1px solid var(--line); }
.ex-strip-big { font-family: var(--serif); font-weight: 400; font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); line-height: 1.1; margin-bottom: .375rem !important; }
.ex-strip-small { font-size: var(--fs-small); color: var(--mute); }

@media (min-width: 37.5em) {
	.ex-coords { display: block; }
}
@media (min-width: 64em) {
	.ex-hero { min-height: 100vh; min-height: 100svh; }
	.ex-hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--space-xl); }
	.ex-hero-art { align-self: stretch; max-width: none; min-height: 26rem; }
	.ex-sun { top: 16%; }
	.ex-strip-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ex-strip-item { padding: var(--space-m) var(--space-m); border-top: 0 !important; border-left: 1px solid var(--line); }
	.ex-strip-item:first-child { border-left: 0; padding-left: 0; }
}

/* ==========================================================================
   Sections
   ========================================================================== */
.ex-sec { padding-block: var(--section); position: relative; }
.ex-sec.ex-sec-tight { padding-top: 0; }
.ex-sec-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-m); align-items: end; margin-bottom: var(--space-xl) !important; }
@media (min-width: 64em) {
	.ex-sec-head { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
	.ex-sec-head .ex-sec-intro { justify-self: end; }
}

/* Three-card rows on tablets: 2 columns, a lone last card is centred at half width. */
@media (min-width: 37.5em) and (max-width: 63.99em) {
	:is(.ex-who, .ex-team, .ex-reviews, .ex-arts) > :last-child:nth-child(odd) {
		grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--gap)) / 2);
	}
}

/* Services */
.ex-svc-list { border-top: 1px solid var(--line); counter-reset: exsvc; }
.ex-svc { counter-increment: exsvc; }
/* Numbers follow the row order automatically (the typed number is hidden). */
.ex-svc-num { font-size: 0 !important; }
.ex-svc-num::before { content: counter(exsvc, decimal-leading-zero); font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem); }
.ex-svc {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num go" "name go" "desc desc";
	column-gap: var(--space-s); row-gap: var(--space-xs); align-items: center;
	padding: var(--space-l) 0; border-bottom: 1px solid var(--line); position: relative; transition: padding .5s var(--ease);
}
.ex-svc::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--gold-soft), transparent 70%); opacity: 0; transition: opacity .5s; pointer-events: none; }
.ex-svc:hover::before { opacity: 1; }
.ex-svc-num { grid-area: num; font-family: var(--serif); font-style: italic; font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem); color: var(--gold); }
.ex-svc-name { grid-area: name; }
.ex-svc-desc { grid-area: desc; color: var(--mute); font-size: var(--fs-body); font-weight: 300; line-height: 1.8; }
.ex-svc-go { grid-area: go; align-self: center; }
.ex-svc-title { font-family: var(--serif); font-weight: 400; font-size: var(--fs-svc) !important; line-height: 1.02 !important; }
.ex-svc-title a { color: inherit; text-decoration: none; }
.ex-svc-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ex-svc-sub { font-size: var(--fs-label-s); font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--mute-2); margin-top: var(--space-xs) !important; }
.ex-svc-go a { width: clamp(2.75rem, 2.4rem + 1vw, 3.25rem); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; text-decoration: none; color: var(--white); transition: background .4s, color .4s, transform .5s var(--ease); }
.ex-svc:hover .ex-svc-go a { background: var(--white); color: var(--ink); transform: rotate(-45deg); }
.ex-entry { margin-top: var(--space-l) !important; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-m); padding: var(--space-m); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--ink-2); }
.ex-entry .ex-btns { width: 100%; }
.ex-entry-text { color: var(--mute); font-size: var(--fs-body); }
.ex-entry-text strong { color: var(--white); font-weight: 500; }

@media (min-width: 48em) {
	.ex-svc { grid-template-columns: 3.5rem minmax(0, 1fr) auto; grid-template-areas: "num name go" ". desc ."; column-gap: var(--space-m); }
	.ex-entry { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--space-m) var(--space-l); }
	.ex-entry .ex-btns { width: auto; flex: none; }
}
@media (min-width: 64em) {
	.ex-svc { grid-template-columns: 5.5rem minmax(0, 1.1fr) minmax(0, 1fr) auto; grid-template-areas: "num name desc go"; column-gap: var(--space-l); padding: var(--space-xl) 0; }
	.ex-svc:hover { padding-left: 1.25rem; }
}

/* Who we help */
.ex-who { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.ex-wcard { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-l); padding: var(--space-l) var(--space-m) var(--space-m); background: var(--ink-2); overflow: hidden; transition: border-color .5s, transform .6s var(--ease); }
.ex-wcard::after { content: ""; position: absolute; right: -30%; bottom: -60%; width: 20rem; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(var(--gold-rgb), .14), transparent 65%); opacity: 0; transition: opacity .6s; pointer-events: none; }
.ex-wcard:hover { border-color: rgba(var(--gold-rgb), .45); transform: translateY(-.375rem); }
.ex-wcard:hover::after { opacity: 1; }
.ex-ico { width: clamp(2.75rem, 2.4rem + 1vw, 3.25rem); aspect-ratio: 1; margin-bottom: var(--space-l) !important; color: var(--gold); }
.ex-ico img, .ex-ico svg { width: 100%; height: 100%; }
.ex-wlab { font-size: var(--fs-label-s); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--mute-2); }
.ex-wtitle { font-size: clamp(1.875rem, 1.5rem + 1.2vw, 2.25rem) !important; line-height: 1.02 !important; margin: var(--space-xs) 0 var(--space-s) !important; }
.ex-wtext { color: var(--mute); font-size: var(--fs-body); line-height: 1.8; flex: 1; }
.ex-wtags { margin: var(--space-m) 0 !important; font-size: var(--fs-label-s); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.ex-more { padding-top: var(--space-m); border-top: 1px solid var(--line); font-size: var(--fs-label); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.ex-more a { text-decoration: none; color: var(--white); }
.ex-more a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.ex-more a::after { content: " →"; display: inline-block; transition: transform .4s var(--ease); }
.ex-wcard:hover .ex-more a::after { transform: translateX(.3rem); }
@media (min-width: 37.5em) { .ex-who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .ex-who { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ex-wcard { padding: var(--space-xl) var(--space-l) var(--space-l); } }

/* Process */
.ex-band { background: var(--ink-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ex-steps { display: grid; grid-template-columns: minmax(0, 1fr); }
.ex-step { padding: var(--space-l) 0; border-top: 1px solid var(--line); }
.ex-step:first-child { border-top: 0; padding-top: 0; }
.ex-step-k { font-family: var(--serif); font-weight: 300; font-size: var(--fs-step); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(245, 243, 239, .28); margin-bottom: var(--space-m) !important; }
.ex-step-title { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.125rem) !important; font-weight: 500 !important; margin-bottom: var(--space-xs) !important; }
.ex-step-text { color: var(--mute); font-size: var(--fs-body); max-width: 22rem; }
.ex-chip { display: inline-block; width: fit-content; margin-top: var(--space-m) !important; font-size: var(--fs-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(var(--gold-rgb), .35); border-radius: 999px; padding: .375rem .75rem; }
@media (min-width: 48em) {
	.ex-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ex-step { padding: var(--space-l) var(--space-m) var(--space-xl); border-top: 0; border-left: 1px solid var(--line); }
	.ex-step:first-child { border-left: 0; padding-left: 0; padding-top: var(--space-l); }
}
@media (min-width: 64em) { .ex-step { padding-inline: var(--space-l); } }

/* Why us — paper */
.ex-paper { background: var(--paper); color: var(--paper-ink); }
.ex-paper .ex-eyebrow { color: rgba(20, 20, 20, .6); }
.ex-paper em { color: var(--gold-dark); }
.ex-manifesto { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.ex-quote { font-family: var(--serif); font-weight: 300; font-size: var(--fs-quote) !important; line-height: 1 !important; letter-spacing: -.02em; margin-top: var(--space-m) !important; color: var(--paper-ink); }
.ex-sig { margin-top: var(--space-l) !important; font-size: var(--fs-small); color: rgba(20, 20, 20, .6); }
.ex-principles { border-top: 1px solid rgba(20, 20, 20, .15); }
.ex-pr { padding: var(--space-m) 0; border-bottom: 1px solid rgba(20, 20, 20, .15); display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-s); }
.ex-pr-i { font-family: var(--serif); font-style: italic; color: var(--gold-dark); font-size: 1.375rem; line-height: 1; }
.ex-pr-title { font-family: var(--sans) !important; font-size: .75rem !important; font-weight: 600 !important; letter-spacing: .2em; text-transform: uppercase; margin-bottom: var(--space-2xs) !important; color: var(--paper-ink); }
.ex-pr-text { font-size: var(--fs-body); color: rgba(20, 20, 20, .72); font-weight: 400; }
@media (min-width: 64em) { .ex-manifesto { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-2xl); } }

/* Team */
.ex-team { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl) var(--gap); }
.ex-member { max-width: 26rem; width: 100%; margin-inline: auto; }
.ex-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-m); border: 1px solid var(--line); transition: transform .6s var(--ease); }
.ex-member:hover .ex-photo img { transform: translateY(-.375rem); }
.ex-member-name { font-size: clamp(1.875rem, 1.5rem + 1.2vw, 2.25rem) !important; font-weight: 500 !important; margin-top: var(--space-m) !important; }
.ex-role { font-size: var(--fs-label-s); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-top: var(--space-3xs) !important; }
.ex-bio { color: var(--mute); font-size: var(--fs-body); margin-top: var(--space-xs) !important; }
@media (min-width: 37.5em) {
	.ex-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ex-member { max-width: none; }
}
@media (min-width: 64em) { .ex-team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Reviews */
.ex-reviews { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.ex-rev { border: 1px dashed var(--line-2); border-radius: var(--radius-m); padding: var(--space-l) var(--space-m); min-height: 13rem; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-s); background: var(--ink-2); }
.ex-stars { color: var(--gold); letter-spacing: .25rem; font-size: .875rem; opacity: .6; }
.ex-rev-q { font-family: var(--serif); font-style: italic; font-size: clamp(1.375rem, 1.2rem + .8vw, 1.625rem); line-height: 1.25; color: var(--mute); }
@media (min-width: 37.5em) { .ex-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .ex-reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ex-rev { padding: var(--space-l); min-height: 15rem; } }

/* FAQ */
.ex-faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.ex-faq-head .ex-h2 { margin-bottom: var(--space-m) !important; }
.ex-faq-head .ex-btns { margin-top: var(--space-l) !important; }
.ex-qa { border-top: 1px solid var(--line); counter-reset: exq; }
.ex-qa .wp-block-details { border-bottom: 1px solid var(--line); margin: 0 !important; }
.ex-qa summary {
	counter-increment: exq; list-style: none; cursor: pointer; display: grid; grid-template-columns: 2rem minmax(0, 1fr) 2.25rem; align-items: center; gap: var(--space-xs);
	padding: var(--space-m) 0; font-family: var(--serif); font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem); line-height: 1.15; transition: color .3s;
}
.ex-qa summary::-webkit-details-marker { display: none; }
.ex-qa summary::before { content: counter(exq, decimal-leading-zero); font-style: italic; font-size: 1rem; color: var(--gold); }
.ex-qa summary::after { content: "+"; width: 2.25rem; aspect-ratio: 1; border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; font: 300 1.25rem/1 var(--sans); justify-self: end; transition: background .3s, color .3s; }
.ex-qa summary:hover { color: var(--gold); }
.ex-qa details[open] > summary::after { content: "−"; background: var(--white); color: var(--ink); }
.ex-qa details > p { padding: 0 0 var(--space-l) 2.75rem; color: var(--mute); font-size: var(--fs-body); line-height: 1.85; max-width: 42.5rem; margin: 0 !important; }
.ex-qa details > p strong { color: var(--white); font-weight: 500; }
@media (min-width: 37.5em) {
	.ex-qa summary { grid-template-columns: 2.75rem minmax(0, 1fr) 2.5rem; }
	.ex-qa summary::after { width: 2.5rem; }
	.ex-qa details > p { padding: 0 3.5rem var(--space-l) 3.5rem; }
}
@media (min-width: 64em) {
	.ex-faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-2xl); }
	.ex-faq-head { position: sticky; top: calc(var(--header-h) + var(--space-l)); }
}

/* Guides (cards used on the homepage and the guides page) */
.ex-arts { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl) var(--gap); list-style: none; margin: 0; padding: 0; }
.ex-arts > li { margin: 0 !important; }
.ex-art { position: relative; display: flex; flex-direction: column; height: 100%; }
.ex-art-thumb { margin: 0 !important; border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--line); }
.ex-art-thumb img { width: 100%; transition: transform .8s var(--ease); }
.ex-art:hover .ex-art-thumb img { transform: scale(1.04); }
.ex-art:not(:has(.wp-block-post-featured-image))::before {
	content: ""; display: block; aspect-ratio: 16 / 11; border-radius: var(--radius-m); border: 1px solid var(--line);
	background: radial-gradient(circle at 80% 20%, rgba(var(--gold-rgb), .16), transparent 55%), repeating-linear-gradient(135deg, var(--ink-3) 0 14px, var(--ink-2) 14px 28px);
}
.ex-art-meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-s); align-items: center; margin: var(--space-m) 0 var(--space-xs) !important; }
.ex-art-cat, .ex-article-cat { font-size: var(--fs-label-s); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.ex-art-cat a, .ex-article-cat a { color: var(--white); text-decoration: none; }
.ex-checked { display: inline-flex; align-items: center; gap: .4375rem; font-size: var(--fs-label-s); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 0 !important; }
.ex-checked::before { content: "Checked"; }
html[lang^="fr"] .ex-checked::before { content: "Vérifié le"; }
.ex-checked:empty { display: none; }
.ex-art .wp-block-post-title { font-size: clamp(1.5rem, 1.3rem + .8vw, 1.8125rem); font-weight: 400; line-height: 1.1; margin: 0 !important; }
.ex-art .wp-block-post-title a { color: var(--white); text-decoration: none; transition: color .3s; }
.ex-art .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.ex-art:hover .wp-block-post-title a { color: var(--gold); }
.ex-art .wp-block-post-excerpt { margin: var(--space-xs) 0 0 !important; }
.ex-art .wp-block-post-excerpt__excerpt { color: var(--mute); font-size: .875rem; line-height: 1.75; margin: 0; }
.ex-arts-foot { justify-content: center; margin-top: var(--space-xl) !important; }
@media (min-width: 37.5em) { .ex-arts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .ex-arts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Free guide */
.ex-lead-box {
	display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); align-items: center;
	border: 1px solid var(--line); border-radius: var(--radius-l); padding: var(--space-l) var(--space-m);
	background: radial-gradient(circle at 100% 0%, rgba(var(--gold-rgb), .12), transparent 50%), var(--ink-2);
}
.ex-lead-title { font-family: var(--serif); font-weight: 300; font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.875rem) !important; line-height: 1.02 !important; margin: var(--space-m) 0 var(--space-s) !important; }
.ex-lead-text { color: var(--mute); font-size: var(--fs-body); }
.ex-lead-form .ex-small, .ex-lead-form .ex-ph { margin-top: var(--space-xs) !important; }
.ex-form { display: flex; flex-direction: column; gap: var(--space-2xs); border: 1px solid var(--line-2); border-radius: var(--radius-m); padding: .375rem; background: var(--ink); }
.ex-form input { flex: 1; min-width: 0; min-height: 3rem; background: none; border: 0; color: var(--white); font: 400 1rem var(--sans); padding: 0 var(--space-s); outline: none; }
.ex-form input::placeholder { color: var(--mute-2); }
.ex-form button { border: 0; cursor: pointer; min-height: 3rem; background: var(--white); color: var(--ink); border-radius: 999px; padding: .9375rem 1.5rem; font: 600 .71875rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; transition: background .3s; }
.ex-form button:hover { background: var(--gold); }
@media (min-width: 30em) {
	.ex-form { flex-direction: row; border-radius: 999px; }
	.ex-form button { white-space: nowrap; }
}
@media (min-width: 64em) {
	.ex-lead-box { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); padding: var(--space-2xl); }
}

/* Final call to action */
.ex-cta { position: relative; text-align: center; padding-block: calc(var(--section) * 1.15) var(--section); border-top: 1px solid var(--line); overflow: hidden; }
.ex-cta .ex-mark { position: absolute; left: 50%; top: 50%; width: min(45rem, 140vw); transform: translate(-50%, -50%); opacity: .045; pointer-events: none; }
.ex-cta .ex-mark img { width: 100%; }
.ex-cta .ex-wrap { position: relative; }
.ex-cta-title { font-family: var(--serif); font-weight: 300; font-size: var(--fs-cta) !important; line-height: .95 !important; letter-spacing: -.02em; margin: var(--space-m) auto var(--space-xl) !important; max-width: 62.5rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.ex-footer { border-top: 1px solid var(--line); padding: var(--space-2xl) 0 var(--space-l); font-size: var(--fs-small); color: var(--mute); }
.ex-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l) var(--gap); }
.ex-fgrid > :first-child, .ex-fgrid > :last-child { grid-column: 1 / -1; }
.ex-flogo img { width: clamp(9rem, 8rem + 4vw, 11.875rem); height: auto; }
.ex-ftag { margin: var(--space-m) 0 0; max-width: 20rem; }
.ex-fh { font-family: var(--sans); font-size: var(--fs-label-s); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--mute-2); margin: 0 0 var(--space-s); }
.ex-flist, .ex-legal-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.ex-flist a { display: inline-block; padding-block: .125rem; }
.ex-footer a { color: var(--mute); text-decoration: none; }
.ex-footer a:hover { color: var(--white); }
.ex-legal { margin-top: var(--space-xl); padding-top: var(--space-m); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-s); font-size: .75rem; color: var(--mute-2); }
.ex-legal p { max-width: 45rem; margin: 0; }
.ex-legal-right { display: flex; gap: var(--space-s) var(--space-m); align-items: flex-start; flex-wrap: wrap; }
.ex-legal-links { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); }
@media (min-width: 48em) {
	/* Tablet: logo on its own row, then three link columns. */
	.ex-fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ex-fgrid > :last-child { grid-column: auto; }
	.ex-legal { flex-direction: row; justify-content: space-between; gap: var(--space-l); }
	.ex-legal-right { flex: none; white-space: nowrap; }
}
@media (min-width: 64em) {
	.ex-fgrid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
	.ex-fgrid > :first-child { grid-column: auto; }
}

/* ==========================================================================
   Articles, guides page, simple pages
   ========================================================================== */
.ex-article, .ex-guides, .ex-simple { padding-top: calc(var(--header-h) + var(--space-xl)); padding-bottom: var(--section); }
.ex-article-head { padding-inline: var(--gutter); }
.ex-article-head > * { margin-block: 0; }
.ex-article-title { font-weight: 300; font-size: clamp(2.5rem, 1.6rem + 3.8vw, 4.75rem); line-height: 1.02; letter-spacing: -.01em; margin-top: var(--space-m) !important; margin-bottom: var(--space-m) !important; }
.ex-article-head .ex-checked { margin-bottom: var(--space-m) !important; }
.ex-article-intro p { font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem); line-height: 1.7; color: var(--mute); margin: 0; }
.ex-article-cover { margin: var(--space-xl) 0 !important; padding-inline: var(--gutter); }
.ex-article-cover img { border-radius: var(--radius-l); border: 1px solid var(--line); }
.ex-prose { padding-inline: var(--gutter); font-size: clamp(1rem, .96rem + .2vw, 1.0625rem); line-height: 1.85; color: rgba(245, 243, 239, .84); }
.ex-prose em { color: inherit; font-family: inherit; font-weight: inherit; }
.ex-prose h2 { font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem); margin-top: 2.2em; }
.ex-prose h3 { font-size: clamp(1.5rem, 1.35rem + .6vw, 1.75rem); margin-top: 1.8em; }
.ex-prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.ex-prose strong { color: var(--white); font-weight: 600; }
.ex-prose blockquote { border-left: 1px solid var(--gold); padding-left: var(--space-m); font-family: var(--serif); font-style: italic; font-size: clamp(1.375rem, 1.2rem + .8vw, 1.625rem); line-height: 1.35; color: var(--white); }
.ex-prose .wp-block-table { overflow-x: auto; }
.ex-prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.ex-prose th, .ex-prose td { border-bottom: 1px solid var(--line); padding: var(--space-xs) .625rem; text-align: left; }
.ex-prose th { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); font-weight: 600; }
.ex-prose img { border-radius: var(--radius-m); }
.ex-prose pre { overflow-x: auto; }
.ex-prose ul, .ex-prose ol { padding-left: 1.2em; }
.ex-prose li { margin-bottom: .4em; }
.ex-article-cta {
	position: relative; overflow: hidden; text-align: center; max-width: 68.75rem; margin: var(--space-2xl) var(--gutter) 0; padding: var(--space-xl) var(--space-m);
	border: 1px solid var(--line); border-radius: var(--radius-l); background: radial-gradient(circle at 50% 0%, rgba(var(--gold-rgb), .12), transparent 60%), var(--ink-2);
}
@media (min-width: 72.75em) { .ex-article-cta { margin-inline: auto; padding: var(--space-2xl) var(--space-l); } }
.ex-article-cta .ex-mark { position: absolute; left: 50%; top: 50%; width: min(32.5rem, 120vw); transform: translate(-50%, -50%); opacity: .04; pointer-events: none; }
.ex-article-cta > :not(.ex-mark) { position: relative; }
.ex-article-cta h2 { font-size: clamp(2.125rem, 1.5rem + 2.8vw, 4rem); margin: var(--space-s) 0 var(--space-xs); }
.ex-article-cta-text { color: var(--mute); max-width: 32.5rem; margin: 0 auto var(--space-l); font-size: var(--fs-body); }
.ex-guides .ex-sec-head { margin-top: 0; }
.ex-pagination { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-s); justify-content: center; font-size: .8125rem; letter-spacing: .1em; }
.ex-pagination a { color: var(--mute); text-decoration: none; }
.ex-pagination .current { color: var(--gold); }
.ex-simple { padding-inline: var(--gutter); }
.ex-simple-title { font-weight: 300; font-size: clamp(2.5rem, 1.6rem + 3.8vw, 4.5rem); margin-bottom: var(--space-l); }
.ex-404 { padding-block: var(--space-l); }
.ex-404 .ex-sec-intro { margin: var(--space-m) 0 var(--space-l); }

/* Theme blocks shown in the editor */
.ex-editor-ph { display: grid; gap: .25rem; padding: 1.125rem 1.25rem; border: 1px dashed rgba(var(--gold-rgb), .6); border-radius: .625rem; font: 400 .8125rem/1.5 var(--sans); color: var(--mute); background: var(--ink-2); }
.ex-editor-ph strong { color: var(--gold); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: var(--fs-label); }

/* ==========================================================================
   Reveal on scroll (added by theme.js, front end only)
   ========================================================================== */
.ex-js .ex-rv { opacity: 0; transform: translateY(1.75rem); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.ex-js .ex-rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	body:not(.editor-styles-wrapper) .ex-sky img { animation: none; clip-path: none; }
	body:not(.editor-styles-wrapper) .ex-sun { animation: none; opacity: 1; }
}