/* ==========================================================================
   Faraz Design: design layer (v3)
   Loaded last. Two switches, both set in Appearance → Customize → Faraz Design:
     body.fd-type-studio | fd-type-classic   font pairing
     body.fd-mode-dark   | fd-mode-light     colour mode
   Everything below reads tokens, so colours and type can be changed in one place.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL Open Font License; see fonts/LICENSE-*)
   Bricolage Grotesque is shipped with its optical-size axis fixed at 72 (display
   sizes) to save ~50 KB; width and weight stay variable. */
@font-face {
	font-family: "Bricolage Grotesque";
	src: url("../fonts/bricolage-grotesque-latin-opsz72.woff2") format("woff2-variations"), url("../fonts/bricolage-grotesque-latin-opsz72.woff2") format("woff2");
	font-weight: 200 800;
	font-stretch: 75% 100%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Bricolage Grotesque";
	src: url("../fonts/bricolage-grotesque-latin-ext-opsz72.woff2") format("woff2-variations"), url("../fonts/bricolage-grotesque-latin-ext-opsz72.woff2") format("woff2");
	font-weight: 200 800;
	font-stretch: 75% 100%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Schibsted Grotesk";
	src: url("../fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Schibsted Grotesk";
	src: url("../fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Schibsted Grotesk";
	src: url("../fonts/schibsted-grotesk-latin-wght-italic.woff2") format("woff2-variations"), url("../fonts/schibsted-grotesk-latin-wght-italic.woff2") format("woff2");
	font-weight: 400 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Martian Mono";
	src: url("../fonts/martian-mono-latin-standard-normal.woff2") format("woff2-variations"), url("../fonts/martian-mono-latin-standard-normal.woff2") format("woff2");
	font-weight: 100 800;
	font-stretch: 75% 112.5%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Martian Mono";
	src: url("../fonts/martian-mono-latin-ext-standard-normal.woff2") format("woff2-variations"), url("../fonts/martian-mono-latin-ext-standard-normal.woff2") format("woff2");
	font-weight: 100 800;
	font-stretch: 75% 112.5%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Instrument Serif";
	src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Instrument Serif";
	src: url("../fonts/instrument-serif-latin-ext-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Instrument Serif";
	src: url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ---------- Studio type: Bricolage Grotesque / Instrument Serif / Schibsted / Martian Mono */
body.fd-type-studio {
	--fd-font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
	--fd-font-text: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--fd-font-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	--fd-font-accent: "Instrument Serif", Georgia, "Times New Roman", serif;
	/* Bricolage's width axis runs 75–100 %: the display sizes sit condensed */
	--fd-wdth-xxl: 75%;
	--fd-wdth-xl: 78%;
	--fd-wdth-l: 84%;
	--fd-wdth-m: 90%;
	--fd-wdth-s: 96%;
	--fd-display-case: none;
	--fd-fs-display: clamp(3rem, 1rem + 8.4vw, 10rem);
	--fd-fs-h1: clamp(2.5rem, 1.2rem + 4.4vw, 6rem);
	--fd-fs-h2: clamp(2rem, 1.2rem + 2.6vw, 3.75rem);
	font-feature-settings: normal;
}
body.fd-type-studio .fd-display,
body.fd-type-studio .fd-h1,
body.fd-type-studio .fd-h2,
body.fd-type-studio .fd-cs__title,
body.fd-type-studio .fd-hero__title { letter-spacing: -0.025em; line-height: 0.92; }
body.fd-type-studio .fd-h2 { line-height: 0.98; }
body.fd-type-studio .fd-h3 { letter-spacing: -0.012em; }
/* *Accent* words: an editorial italic serif against the condensed grotesque. */
body.fd-type-studio .fd-accent {
	font-family: var(--fd-font-accent);
	font-style: italic;
	font-weight: 400;
	font-stretch: 100%;
	letter-spacing: -0.01em;
	text-transform: none;
	font-size: 1.08em;
	line-height: 0;
	padding-inline: 0.02em 0.06em;
}
body.fd-type-studio .fd-theme-accent .fd-accent { color: var(--_ink); -webkit-text-stroke: 0; }
/* Labels: Martian Mono, narrow, slightly smaller */
body.fd-type-studio .fd-label,
body.fd-type-studio .fd-eyebrow { font-stretch: 87.5%; font-weight: 450; letter-spacing: 0.05em; font-size: 0.71875rem; }
body.fd-type-studio .fd-lead { letter-spacing: -0.005em; }
body.fd-type-studio { font-size: 1.0625rem; }
.fd-num, .fd-stats__value { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Dark mode ------------------------------------------------------------
   The site keeps two tones: "deep" for statement bands (hero, case headers, ranges,
   footer) and "raised" for reading sections. Light sections are inverted locally,
   so every component that was tested on both tones keeps working. */
body.fd-mode-dark {
	--fdm-bg: #0d0c0b;
	--fdm-raised: #151412;
	--fdm-card: #1e1c19;
	--fdm-text: #ece6dc;
	--fdm-muted: #a39c90;
	--fdm-line: rgba(236, 230, 220, 0.14);
	--fd-paper-2: var(--fdm-card);
	--fd-ink-2: #1a1816;
	--fd-muted: var(--fdm-muted);
	--fd-muted-on-card: var(--fdm-muted);
	--fd-muted-dark: var(--fdm-muted);
	--fd-line: var(--fdm-line);
	--fd-line-dark: var(--fdm-line);
	background: var(--fdm-bg);
	color: var(--fdm-text);
	color-scheme: dark;
}
/* Reading sections: what was paper becomes the raised dark tone */
body.fd-mode-dark .fd-theme-light,
body.fd-mode-dark .fd-cs__story,
body.fd-mode-dark .fd-form-wrap {
	--_paper: var(--fdm-raised);
	--_ink: var(--fdm-text);
	--_muted: var(--fdm-muted);
	--_line: var(--fdm-line);
	--fd-wipe: var(--fdm-raised);
}
/* Statement bands stay deep (and stay deep when nested in a reading section) */
body.fd-mode-dark .fd-theme-dark,
body.fd-mode-dark [data-fd-theme="dark"]:not(.fd-header) {
	--_ink: var(--fdm-bg);
	--_paper: var(--fdm-text);
	--_muted: var(--fdm-muted);
	--_line: var(--fdm-line);
	--fd-wipe: var(--fdm-bg);
}
body.fd-mode-dark .fd-cs__story { border-top: 1px solid var(--fdm-line); }
body.fd-mode-dark .fd-footer { background: var(--fdm-bg); border-top: 1px solid var(--fdm-line); }
body.fd-mode-dark .fd-404, body.fd-mode-dark .fd-menu { background: var(--fdm-bg); }

/* Header: always the dark treatment */
body.fd-mode-dark .fd-header,
body.fd-mode-dark .fd-header[data-theme="light"] { color: var(--fdm-text); }
body.fd-mode-dark .fd-header::before { background: color-mix(in srgb, var(--fdm-bg) 92%, transparent); border-color: var(--fdm-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.fd-mode-dark .fd-header__cta:hover { background: var(--fdm-text); color: var(--fdm-bg) !important; }

/* Buttons: light on dark everywhere except the accent button */
body.fd-mode-dark .fd-btn:not(.fd-btn--accent) { background: var(--fdm-text); color: var(--fdm-bg) !important; border-color: var(--fdm-text); }
body.fd-mode-dark .fd-btn:not(.fd-btn--accent):hover { background: var(--fd-accent); border-color: var(--fd-accent); color: var(--fdm-bg) !important; }

/* Image mats and cards */
body.fd-mode-dark .fd-cs__fig .fd-cs__zoom,
body.fd-mode-dark .fd-gallery__zoom,
body.fd-mode-dark .fd-compare__frame,
body.fd-mode-dark .fd-showcase--grid .fd-card__media { background: var(--fdm-card); }
body.fd-mode-dark .fd-lightbox__fig img { background: var(--fdm-card); }
body.fd-mode-dark .fd-cs__tag, body.fd-mode-dark .fd-cs__note { background: var(--fdm-card); color: var(--fdm-text); }

/* Forms */
body.fd-mode-dark .fd-field input,
body.fd-mode-dark .fd-field select,
body.fd-mode-dark .fd-field textarea { background: var(--fdm-card); color: var(--fdm-text); border-color: var(--fdm-line); }

/* Homepage specifics */
body.fd-mode-dark.home .fd-cta.fd-theme-accent { background: var(--fdm-bg); }
body.fd-mode-dark.home .fd-principle:nth-child(4n + 1) { background: var(--fdm-card); }
body.fd-mode-dark.home .fd-principle__media img { background: var(--fdm-raised); }

/* Selection + focus */
body.fd-mode-dark ::selection { background: var(--fd-accent); color: var(--fdm-bg); }
body.fd-mode-dark :focus-visible { outline-color: var(--fd-accent); }

/* ---------- Case study: numbers, specs, timeline, before/after, results ------------ */
.fd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--_line); border-bottom: 1px solid var(--_line); }
.fd-stats > div { padding: clamp(18px, 2.4vw, 32px) clamp(14px, 2vw, 28px) clamp(18px, 2.4vw, 28px) 0; border-right: 1px solid var(--_line); min-width: 0; }
.fd-stats > div + div { padding-left: clamp(14px, 2vw, 28px); }
.fd-stats > div:last-child { border-right: 0; }
.fd-stats__value { display: block; font-family: var(--fd-font-display); font-weight: 800; font-stretch: var(--fd-wdth-xl, 112%); font-size: clamp(2.6rem, 1.4rem + 3.6vw, 5.25rem); line-height: 0.9; letter-spacing: -0.03em; color: var(--_ink); }
.fd-stats__value em { font-family: var(--fd-font-accent, inherit); font-style: italic; font-weight: 400; font-size: 0.62em; color: var(--cs-accent, var(--fd-accent)); margin-left: 0.04em; }
.fd-stats__label { display: block; margin-top: 12px; font-family: var(--fd-font-text); font-size: 0.9375rem; line-height: 1.35; color: var(--_muted); max-width: 22ch; }
.fd-cs__numbers { padding-bottom: clamp(56px, 7vw, 112px); }
.fd-cs__numbers .fd-cs__section-head { margin-bottom: 0; padding-bottom: clamp(20px, 2.4vw, 32px); }

.fd-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 clamp(24px, 4vw, 64px); margin: 0; }
.fd-specs > div { display: grid; grid-template-columns: minmax(7.5em, 0.8fr) minmax(0, 1.4fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--_line); align-items: baseline; }
.fd-specs dt { margin: 0; color: var(--_muted); }
.fd-specs dd { margin: 0; font-size: 1rem; line-height: 1.45; }

.fd-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 0; overflow-x: auto; scrollbar-width: thin; }
.fd-timeline li { position: relative; padding: 28px clamp(16px, 2vw, 28px) 8px 0; border-top: 2px solid var(--_line); }
.fd-timeline li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--cs-accent, var(--fd-accent)); }
.fd-timeline__date { display: block; color: var(--cs-accent, var(--fd-accent)); margin-bottom: 8px; }
.fd-site .fd-timeline__text { margin: 0; font-size: 0.9688rem; line-height: 1.45; max-width: 30ch; }

.fd-changes { list-style: none; counter-reset: chg; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 32px; }
.fd-changes li { counter-increment: chg; display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 8px; padding: 12px 0; border-top: 1px solid var(--_line); font-size: 0.9688rem; line-height: 1.45; }
.fd-changes li::before { content: counter(chg, decimal-leading-zero); font-family: var(--fd-font-mono); font-size: 0.75rem; color: var(--cs-accent, var(--fd-accent)); padding-top: 3px; }

.fd-cs__results { padding-bottom: clamp(56px, 7vw, 112px); }
.fd-results .fd-stats__value { color: var(--cs-accent, var(--fd-accent)); }
.fd-results__source { display: block; margin-top: 8px; color: var(--_muted); }

@media (max-width: 600px) {
	.fd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fd-stats > div { border-right: 0; padding-left: 0 !important; border-bottom: 1px solid var(--_line); }
	.fd-stats > div:nth-child(odd) { border-right: 1px solid var(--_line); padding-right: 14px; }
	.fd-stats > div:nth-child(even) { padding-left: 14px !important; }
	.fd-stats > div:nth-last-child(-n + 2) { border-bottom: 0; }
	.fd-specs > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Homepage proof band ----------------------------------------------- */
.fd-proofband { padding-block: clamp(40px, 5vw, 72px); border-top: 1px solid var(--_line); border-bottom: 1px solid var(--_line); }
.fd-proofband .fd-stats { border: 0; }
.fd-cs__production { padding-bottom: clamp(56px, 7vw, 112px); }
.fd-site .fd-cs__timeline-h, .fd-site .fd-cs__changes-h { margin: clamp(32px, 4vw, 56px) 0 18px; color: var(--_muted); }
.fd-site .fd-cs__changes-h { margin-top: 28px; }
/* The studio display face is condensed: titles can sit larger before wrapping. */
body.fd-type-studio .fd-cs__top { --fd-title-fit: 1.6; }
body.fd-type-studio.home .fd-hero .fd-hero__title { font-size: clamp(3.1rem, 0.8rem + 5.4vw, 6.75rem); }
body.fd-type-studio .fd-cs__top { --fd-title-max: 8.5rem; }

/* ---------- Numbers band (FD Numbers band widget) ----------------------------- */
.fd-statsband .fd-statsband__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(32px, 5vw, 96px); align-items: end; margin-bottom: clamp(28px, 3.5vw, 48px); }
.fd-statsband .fd-statsband__head .fd-eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.fd-statsband .fd-section__intro { margin: 0; max-width: 46ch; color: var(--_muted); font-size: 1.0625rem; }
.fd-statsband .fd-stats__label a { color: inherit; text-decoration: underline; text-decoration-color: var(--fd-accent); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.fd-statsband .fd-stats__label a:hover { color: var(--_ink); }
.fd-site .fd-statsband__note { margin: 16px 0 0; color: var(--_muted); }
@media (max-width: 800px) { .fd-statsband .fd-statsband__head { grid-template-columns: 1fr; } }

/* Small text in a project colour: lifted towards the text colour so it keeps AA
   contrast on dark whatever the project accent is (large figures keep the pure colour). */
body.fd-mode-dark .fd-cs { --cs-accent-text: color-mix(in srgb, var(--cs-accent) 45%, var(--fdm-text)); }
body.fd-mode-dark .fd-timeline__date,
body.fd-mode-dark .fd-changes li::before { color: var(--cs-accent-text, var(--fdm-text)); }
/* Links that would otherwise take the parent theme's default colour */
body.fd-mode-dark .fd-gallery__title,
body.fd-mode-dark .fd-site a:not([class]),
body.fd-mode-dark .fd-card__title,
body.fd-mode-dark .fd-index__title { color: inherit; }
body.fd-mode-dark .fd-gallery__title { color: var(--fdm-text); }
body.fd-mode-dark figcaption:not([class]) { color: var(--fdm-muted); }

/* ---------- v1.3: brief, showcase, artwork grid, all-dark -------------------------- */
/* Brief under the case title: Problem / Solution / Result, a line or two each */
.fd-brief { margin: clamp(22px, 3vw, 36px) 0 0; max-width: 40rem; border-top: 1px solid var(--_line, var(--fdm-line)); }
.fd-brief__row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 4px 18px; padding: 14px 0 15px; border-bottom: 1px solid var(--_line, var(--fdm-line)); }
.fd-site .fd-brief dt { margin: 0; padding-top: 0.32em; color: var(--cs-accent-text, var(--fd-accent)); }
.fd-site .fd-brief dd { margin: 0; font-size: clamp(1rem, 0.94rem + 0.28vw, 1.15rem); line-height: 1.42; text-wrap: pretty; }
.fd-site .fd-cs__role { margin: 16px 0 0; color: var(--_muted); }
.fd-cs__role span { color: inherit; opacity: 0.85; margin-left: 10px; text-transform: none; letter-spacing: 0; font-family: var(--fd-font-text); font-size: 0.875rem; }
@media (max-width: 480px) { .fd-brief__row { grid-template-columns: 1fr; } }

/* Showcase: renders large, edge to edge with thin gutters */
.fd-cs__story:has(> .fd-show:first-child) { padding-top: clamp(8px, 1.2vw, 16px); }
.fd-show { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(8px, 1.1vw, 16px); padding: 0 clamp(8px, 1.1vw, 16px); margin: 0 auto clamp(56px, 7vw, 112px); max-width: 2200px; }
@media (min-width: 760px) { .fd-show { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fd-show__item--full, .fd-show__item--side { grid-column: 1 / -1; } }
.fd-show .fd-cs__fig { position: relative; grid-column: auto; }
.fd-show .fd-show__item--full { grid-column: 1 / -1; }
.fd-site .fd-show .fd-cs__fig .fd-cs__zoom { display: block; padding: 0; background: var(--fdm-bg, #0d0c0b); }
.fd-show img { display: block; width: 100%; height: auto; }
.fd-show .fd-cs__fig figcaption { position: absolute; left: clamp(10px, 1.4vw, 20px); bottom: clamp(10px, 1.4vw, 20px); right: auto; max-width: calc(100% - 40px); padding: 7px 10px 8px; background: rgba(13, 12, 11, 0.74); color: #ece6dc; font-size: 0.8125rem; line-height: 1.3; gap: 2px 10px; pointer-events: none; }
.fd-show .fd-cs__fig figcaption .fd-cs__kind { color: #b9b1a4; }
@media (max-width: 600px) { .fd-show .fd-cs__fig figcaption { position: static; background: none; color: var(--_muted); padding: 8px 2px 4px; } }

/* The artwork: flat designs on dark tiles, captioned in a few words */
.fd-cs__artwork { margin-bottom: clamp(56px, 7vw, 112px); }
.fd-art { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 1.6vw, 20px); }
@media (min-width: 700px) { .fd-art { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fd-art__item--wide { grid-column: 1 / -1; } }
.fd-art .fd-cs__fig { grid-column: auto; }
.fd-art .fd-art__item--wide { grid-column: 1 / -1; }
.fd-site .fd-art .fd-cs__fig .fd-cs__zoom { position: relative; aspect-ratio: 4 / 3; display: block; padding: 0; overflow: hidden; background: var(--fdm-card, #1e1c19); }
.fd-site .fd-art .fd-art__item--wide .fd-cs__zoom { aspect-ratio: 16 / 7; }
.fd-art .fd-cs__zoom img { position: absolute; inset: clamp(14px, 2.6vw, 36px); width: calc(100% - 2 * clamp(14px, 2.6vw, 36px)); height: calc(100% - 2 * clamp(14px, 2.6vw, 36px)); object-fit: contain; }
.fd-art .fd-cs__fig figcaption { font-size: 0.875rem; padding-top: 10px; }
.fd-art--files { margin-top: 8px; }

/* Brand sheet and social sheet (v1.5): one full-width plate each */
.fd-sheet { margin-bottom: clamp(56px, 7vw, 112px); }
.fd-sheet__list { display: grid; gap: clamp(12px, 1.6vw, 20px); }
.fd-site .fd-sheet .fd-cs__fig .fd-cs__zoom { display: block; padding: 0; overflow: hidden; background: #0f0e0d; outline: 1px solid var(--_line); outline-offset: -1px; }
.fd-sheet .fd-cs__zoom img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
.fd-sheet .fd-cs__fig figcaption { font-size: 0.875rem; padding-top: 10px; }

/* Before / after beside the list of changes */
.fd-cs__compare-wrap { margin-bottom: clamp(56px, 7vw, 112px); }
.fd-cs__compare-grid { display: grid; gap: 28px clamp(32px, 4vw, 64px); }
@media (min-width: 960px) { .fd-cs__compare-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; } }
.fd-site .fd-cs__changes .fd-cs__changes-h { margin-top: 0; }

/* Process & production: one closed drawer at the end */
.fd-cs__details { margin-bottom: clamp(56px, 7vw, 112px); }
.fd-cs__details .fd-more > summary { min-height: 72px; flex-wrap: wrap; }
.fd-cs__details-hint { flex: 1 1 auto; text-align: right; color: var(--_muted); margin-right: 18px; text-transform: none; letter-spacing: 0; font-family: var(--fd-font-text); font-size: 0.875rem; }
.fd-cs__details-body { display: grid; gap: clamp(28px, 3.5vw, 44px); padding: 8px 0 40px; }
.fd-cs__details-body .fd-specs { margin-top: 8px; }
@media (max-width: 600px) { .fd-cs__details-hint { display: none; } }

/* Nothing light in dark mode */
body.fd-mode-dark .fd-service__media { background: var(--fdm-card); }
body.fd-mode-dark .fd-card__media, body.fd-mode-dark .fd-cs__cover { background: var(--fdm-card); }

/* Type refinements: a little wider display, steadier labels */
body.fd-type-studio {
	--fd-wdth-xxl: 80%;
	--fd-wdth-xl: 82%;
	--fd-wdth-l: 88%;
	--fd-wdth-m: 94%;
	--fd-wdth-s: 100%;
}
body.fd-type-studio .fd-label,
body.fd-type-studio .fd-eyebrow { font-stretch: 100%; font-weight: 500; letter-spacing: 0.06em; font-size: 0.75rem; }
body.fd-type-studio .fd-accent { font-size: 1.04em; }
body.fd-type-studio .fd-cs__headline { font-family: var(--fd-font-display); font-weight: 600; font-stretch: var(--fd-wdth-s); letter-spacing: -0.015em; }
.fd-viewer__go { display: inline-flex; margin: 14px auto 0; font-size: 0.875rem; }
.fd-viewer--hero .fd-viewer__bar { text-align: center; }
/* Less text on the homepage: cards are image + title + discipline; services keep one line */
.home .fd-card__summary, .home .fd-service__proof { display: none; }
.home .fd-card__media { aspect-ratio: 4 / 3; }
.home .fd-card__media img { width: 100%; height: 100%; object-fit: cover; }
.fd-cs__crumb { white-space: nowrap; }
/* v1.4: project type (self-initiated concepts) */
.fd-site .fd-cs__type { display: inline-block; margin: 0 0 14px; padding: 5px 10px 6px; border: 1px solid currentColor; color: var(--cs-accent-text, var(--fd-accent)); }
.fd-card__type { display: inline-block; margin: 6px 0 0; padding: 3px 8px 4px; border: 1px solid var(--fdm-line, rgba(236, 230, 220, .3)); color: var(--fdm-muted, #a39c90); }

/* ==========================================================================
   v2.0 Editorial type (default): Instrument Sans throughout.
   Regular-weight headlines at normal width, sentence-case labels, no italic
   serif accents, no uppercase monospace. One orange word, on the homepage hero.
   Self-hosted, SIL Open Font License 1.1 (fonts/LICENSE-instrument-sans.txt).
   ========================================================================== */
@font-face {
	font-family: "Instrument Sans";
	src: url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Instrument Sans";
	src: url("../fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
body.fd-type-editorial {
	--fd-font-display: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
	--fd-font-text: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
	--fd-font-mono: var(--fd-font-text);
	--fd-font-accent: var(--fd-font-text);
	--_mono: var(--fd-font-text);
	--fd-wdth-xxl: 100%;
	--fd-wdth-xl: 100%;
	--fd-wdth-l: 100%;
	--fd-wdth-m: 100%;
	--fd-wdth-s: 100%;
	--fd-display-case: none;
	--fd-fs-display: clamp(2.75rem, 1.15rem + 5.2vw, 6.75rem);
	--fd-fs-display-xl: clamp(2.75rem, 1.1rem + 5.6vw, 7rem);
	--fd-fs-display-lg: clamp(2.5rem, 1.2rem + 4.2vw, 5.5rem);
	--fd-fs-h1: clamp(2.4rem, 1.3rem + 3.6vw, 5.25rem);
	--fd-fs-h2: clamp(1.75rem, 1.2rem + 1.7vw, 3rem);
	--fd-fs-h3: clamp(1.2rem, 1.05rem + 0.45vw, 1.5rem);
	--fd-fs-label: 0.8125rem;
	font-size: 1.0625rem;
	letter-spacing: -0.003em;
	font-feature-settings: "kern" 1;
}
/* Headlines: light hand, tight but not crushed */
body.fd-type-editorial :is(.fd-display, .fd-h1, .fd-cs .fd-cs__title, .fd-cs__title, .fd-hero__title, .fd-footer__statement, .fd-site .page-header .entry-title, .fd-index__title, .home .fd-hero .fd-hero__title) {
	font-weight: 450; font-stretch: 100%; letter-spacing: -0.032em; line-height: 1.02; text-transform: none;
}
body.fd-type-editorial :is(.fd-h2, .home .fd-h2, .fd-site .page-content h2) { font-weight: 450; font-stretch: 100%; letter-spacing: -0.022em; line-height: 1.08; text-transform: none; }
body.fd-type-editorial :is(.fd-h3, .fd-card__title, .fd-viewer__name, .fd-text .fd-rich h3, .fd-gallery__title, .fd-card__pair a strong, .fd-contact__address, .fd-menu__list a, .fd-cs__headline, .fd-cs__line) {
	font-weight: 500; font-stretch: 100%; letter-spacing: -0.012em; text-transform: none;
}
body.fd-type-editorial .fd-cs__headline { font-weight: 400; letter-spacing: -0.015em; }
body.fd-type-editorial .fd-logo__text { font-weight: 600; font-stretch: 100%; letter-spacing: -0.01em; }
body.fd-type-editorial .fd-gong__mark { font-weight: 600; font-stretch: 100%; letter-spacing: -0.03em; }
body.fd-type-editorial :is(.fd-stats__value, .fd-num) { font-weight: 400; font-stretch: 100%; letter-spacing: -0.035em; }
/* Interface text: the text face, sentence case, no tracking */
body.fd-type-editorial :is(.fd-eyebrow, .fd-label, .fd-btn, .fd-link-arrow, .fd-nav__link, .fd-header__cta, .fd-header .fd-menu-toggle, .fd-menu__meta, .fd-footer__label, .home .fd-hero__proof, .fd-viewer .fd-viewer__chip, .fd-viewer .fd-viewer__chip:hover, .fd-viewer .fd-viewer__tool, .fd-viewer .fd-viewer__tool:hover, .fd-capabilities, .fd-cs__toc ol, .fd-filters a, .fd-field label, .fd-cs__tag, .fd-lightbox .fd-lightbox__close, .fd-lightbox .fd-lightbox__close:hover, .fd-cs__more-link, .fd-more > summary, .fd-site button.fd-btn, .fd-editor-note) {
	font-family: var(--fd-font-text); text-transform: none; letter-spacing: 0; font-stretch: 100%;
}
body.fd-type-editorial .fd-changes li::before { font-family: var(--fd-font-text); letter-spacing: 0; }
body.fd-type-editorial :is(.fd-eyebrow, .fd-label, .fd-footer__label) { font-size: 0.8125rem; font-weight: 500; }
body.fd-type-editorial .fd-eyebrow { gap: 0; margin-bottom: 1rem; color: var(--fdm-muted, var(--fd-muted)); }
body.fd-type-editorial .fd-eyebrow::before { content: none; }
body.fd-type-editorial :is(.fd-btn, .fd-site button.fd-btn, .fd-header__cta) { font-size: 0.9375rem; font-weight: 500; }
body.fd-type-editorial .fd-nav__link { font-size: 0.9375rem; font-weight: 450; }
body.fd-type-editorial .fd-link-arrow { font-size: 0.9375rem; font-weight: 500; }
body.fd-type-editorial .home .fd-hero__proof { font-size: 0.875rem; color: var(--fdm-muted, var(--fd-muted-dark)); }
body.fd-type-editorial :is(.fd-viewer .fd-viewer__chip, .fd-viewer .fd-viewer__tool, .fd-capabilities, .fd-cs__toc ol, .fd-filters a, .fd-cs__tag) { font-size: 0.8125rem; }
/* Accent words keep the face: no italics, no colour, except one word on the homepage hero */
body.fd-type-editorial .fd-accent { font: inherit; font-style: normal; color: inherit; letter-spacing: inherit; line-height: inherit; padding: 0; -webkit-text-stroke: 0; }
body.fd-type-editorial.home .fd-hero__title .fd-accent { color: var(--fd-accent); }
/* Reading rhythm */
body.fd-type-editorial :is(.fd-lead, .fd-section__intro) { font-weight: 400; letter-spacing: -0.008em; line-height: 1.5; }
body.fd-type-editorial :is(.fd-rich p, .fd-cs__brief dd, .fd-brief dd) { line-height: 1.6; }
/* v2.0: fewer markers. No coloured squares before captions and proof points; tidy breadcrumb */
body.fd-type-editorial .home .fd-hero__proof li::before { content: none; }
body.fd-type-editorial .home .fd-hero__proof { gap: 4px 20px; }
body.fd-type-editorial .fd-cs__kind::before { content: none; }
body.fd-type-editorial .fd-cs__kind { color: var(--fdm-text, var(--_ink)); font-weight: 500; }
body.fd-type-editorial .fd-cs__crumb { padding-right: 4px; }
body.fd-type-editorial .fd-eyebrow > span[aria-hidden="true"] { margin: 0 6px 0 2px; opacity: 0.6; }

/* ==========================================================================
   v3.0 Product type (default): Mona Sans, variable width and weight.
   Expanded heavy headlines (width 125, weight 760), normal width for text,
   condensed for big numbers. One family, so the page reads as one voice.
   Presets "Gallery" (Syne + Host Grotesk) and "Funnel" (Funnel Display +
   Funnel Sans) share the same rules. All SIL OFL 1.1, self-hosted, unmodified
   Google Fonts files (fonts/LICENSE-*.txt). They build on the v2.0 editorial
   rules (sentence-case labels, no mono, one accent): the body carries both
   classes, fd-type-editorial and fd-type-<preset>.
   ========================================================================== */
@font-face {
	font-family: "Mona Sans";
	src: url("../fonts/mona-sans-latin-ext-wdth-wght-normal.woff2") format("woff2-variations"), url("../fonts/mona-sans-latin-ext-wdth-wght-normal.woff2") format("woff2");
	font-weight: 200 900;
	font-stretch: 75% 125%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Mona Sans";
	src: url("../fonts/mona-sans-latin-wdth-wght-normal.woff2") format("woff2-variations"), url("../fonts/mona-sans-latin-wdth-wght-normal.woff2") format("woff2");
	font-weight: 200 900;
	font-stretch: 75% 125%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Syne";
	src: url("../fonts/syne-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/syne-latin-ext-wght-normal.woff2") format("woff2");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Syne";
	src: url("../fonts/syne-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/syne-latin-wght-normal.woff2") format("woff2");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Host Grotesk";
	src: url("../fonts/host-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/host-grotesk-latin-ext-wght-normal.woff2") format("woff2");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Host Grotesk";
	src: url("../fonts/host-grotesk-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/host-grotesk-latin-wght-normal.woff2") format("woff2");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Funnel Display";
	src: url("../fonts/funnel-display-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/funnel-display-latin-ext-wght-normal.woff2") format("woff2");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Funnel Display";
	src: url("../fonts/funnel-display-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/funnel-display-latin-wght-normal.woff2") format("woff2");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Funnel Sans";
	src: url("../fonts/funnel-sans-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/funnel-sans-latin-ext-wght-normal.woff2") format("woff2");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Funnel Sans";
	src: url("../fonts/funnel-sans-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/funnel-sans-latin-wght-normal.woff2") format("woff2");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body.fd-type-product {
	--fd-font-display: "Mona Sans", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
	--fd-font-text: "Mona Sans", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
	--fd-display-wdth: 125%; --fd-display-wght: 760; --fd-display-track: -0.042em; --fd-display-lh: 0.95;
	--fd-h2-wdth: 112%; --fd-h2-wght: 700; --fd-h2-track: -0.03em;
	--fd-h3-wdth: 100%; --fd-h3-wght: 620;
	--fd-num-wdth: 75%; --fd-num-wght: 700;
	--fd-text-wght: 400; --fd-ui-wght: 560;
}
body.fd-type-gallery {
	--fd-font-display: "Syne", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
	--fd-font-text: "Host Grotesk", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
	--fd-display-wdth: 100%; --fd-display-wght: 760; --fd-display-track: -0.04em; --fd-display-lh: 0.98;
	--fd-h2-wdth: 100%; --fd-h2-wght: 700; --fd-h2-track: -0.03em;
	--fd-h3-wdth: 100%; --fd-h3-wght: 600;
	--fd-num-wdth: 100%; --fd-num-wght: 700;
	--fd-text-wght: 400; --fd-ui-wght: 550;
}
body.fd-type-funnel {
	--fd-font-display: "Funnel Display", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
	--fd-font-text: "Funnel Sans", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
	--fd-display-wdth: 100%; --fd-display-wght: 640; --fd-display-track: -0.038em; --fd-display-lh: 0.98;
	--fd-h2-wdth: 100%; --fd-h2-wght: 620; --fd-h2-track: -0.03em;
	--fd-h3-wdth: 100%; --fd-h3-wght: 560;
	--fd-num-wdth: 100%; --fd-num-wght: 600;
	--fd-text-wght: 400; --fd-ui-wght: 520;
}
body:is(.fd-type-product, .fd-type-gallery, .fd-type-funnel) {
	--fd-fs-display: clamp(2.35rem, 0.95rem + 5.1vw, 6.4rem);
	--fd-fs-display-xl: clamp(2.4rem, 0.9rem + 5.5vw, 6.9rem);
	--fd-fs-display-lg: clamp(2.2rem, 1rem + 4.1vw, 5.4rem);
	--fd-fs-h1: clamp(2.2rem, 1.05rem + 3.6vw, 5.1rem);
	--fd-fs-h2: clamp(1.6rem, 1.1rem + 1.7vw, 2.85rem);
	font-weight: var(--fd-text-wght);
}
body:is(.fd-type-product, .fd-type-gallery, .fd-type-funnel) :is(.fd-display, .fd-h1, .fd-cs .fd-cs__title, .fd-cs__title, .fd-hero__title, .fd-footer__statement, .fd-site .page-header .entry-title, .fd-index__title, .home .fd-hero .fd-hero__title) {
	font-family: var(--fd-font-display); font-weight: var(--fd-display-wght); font-stretch: var(--fd-display-wdth);
	letter-spacing: var(--fd-display-track); line-height: var(--fd-display-lh); text-wrap: balance;
}
body:is(.fd-type-product, .fd-type-gallery, .fd-type-funnel) :is(.fd-h2, .home .fd-h2, .fd-site .page-content h2) {
	font-family: var(--fd-font-display); font-weight: var(--fd-h2-wght); font-stretch: var(--fd-h2-wdth); letter-spacing: var(--fd-h2-track); line-height: 1.02; text-wrap: balance;
}
body:is(.fd-type-product, .fd-type-gallery, .fd-type-funnel) :is(.fd-h3, .fd-card__title, .fd-viewer__name, .fd-text .fd-rich h3, .fd-gallery__title, .fd-card__pair a strong, .fd-contact__address, .fd-menu__list a, .fd-cs__line) {
	font-weight: var(--fd-h3-wght); font-stretch: var(--fd-h3-wdth); letter-spacing: -0.014em;
}
body:is(.fd-type-product, .fd-type-gallery, .fd-type-funnel) .fd-cs__headline { font-weight: var(--fd-text-wght); letter-spacing: -0.016em; }
body:is(.fd-type-product, .fd-type-gallery, .fd-type-funnel) :is(.fd-stats__value, .fd-num) { font-family: var(--fd-font-display); font-weight: var(--fd-num-wght); font-stretch: var(--fd-num-wdth); letter-spacing: -0.03em; }
body:is(.fd-type-product, .fd-type-gallery, .fd-type-funnel) .fd-logo__text { font-family: var(--fd-font-display); font-weight: 680; font-stretch: 110%; letter-spacing: -0.02em; }
body:is(.fd-type-product, .fd-type-gallery, .fd-type-funnel) .fd-gong__mark { font-family: var(--fd-font-display); font-weight: 800; font-stretch: var(--fd-display-wdth); letter-spacing: -0.04em; }
body:is(.fd-type-product, .fd-type-gallery, .fd-type-funnel) :is(.fd-btn, .fd-site button.fd-btn, .fd-header__cta, .fd-link-arrow) { font-weight: var(--fd-ui-wght); }
body:is(.fd-type-product, .fd-type-gallery, .fd-type-funnel) :is(.fd-eyebrow, .fd-label, .fd-footer__label) { font-weight: var(--fd-ui-wght); }

/* ============================================================== v2.0 story components
   Nine steps (see single-fd_project.php). Square edges, thin rules, no shadows. */
.fd-cs__lede-wrap { margin-bottom: clamp(56px, 7vw, 112px); }
.fd-cs__lede { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); line-height: 1.35; letter-spacing: -0.012em; max-width: 46ch; margin-top: clamp(40px, 5vw, 80px); margin-bottom: clamp(24px, 3vw, 44px); color: var(--_ink); }
.fd-show--key { margin-bottom: 0; }

/* Identity: palette, type, mark and system as text */
.fd-id { margin-bottom: clamp(56px, 7vw, 112px); }
.fd-id__grid { display: grid; gap: clamp(20px, 2.4vw, 36px); }
@media (min-width: 900px) { .fd-id__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.fd-id__mark { margin: 0; background: var(--mark-bg, #151412); display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: clamp(20px, 4vw, 56px); outline: 1px solid var(--_line); outline-offset: -1px; }
.fd-id__mark img { width: 100%; height: 100%; object-fit: contain; }
.fd-id__h { font-size: 0.8125rem; font-weight: 500; color: var(--_muted); margin: 0 0 10px; letter-spacing: 0; text-transform: none; }
.fd-id__note { color: var(--_muted); font-size: 0.875rem; margin: 0 0 16px; }
.fd-id__chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 18px 12px; }
.fd-id__chip { font-size: 0.875rem; line-height: 1.35; }
.fd-id__swatch { display: block; aspect-ratio: 1; background: var(--c); outline: 1px solid rgba(255, 255, 255, 0.1); outline-offset: -1px; margin-bottom: 9px; }
.fd-id__name { display: block; font-weight: 500; }
.fd-id__hex { display: block; font-variant-numeric: tabular-nums; }
.fd-id__rgb { display: block; color: var(--_muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.fd-id__type, .fd-id__system { margin-top: clamp(28px, 3.5vw, 52px); }
.fd-id__type-img { margin: 0; background: #151412; padding: clamp(12px, 2vw, 28px); outline: 1px solid var(--_line); outline-offset: -1px; }
.fd-id__type-img img { display: block; width: 100%; height: auto; max-height: 380px; object-fit: contain; }
.fd-id__type-img figcaption { margin: 12px 0 0; }
.fd-id__faces { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--_line); }
.fd-id__faces li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 12px 0; border-bottom: 1px solid var(--_line); }
.fd-id__face { font-weight: 500; }
.fd-id__sample { color: var(--_muted); }
.fd-id__sample[lang="fa"] { font-family: "Vazirmatn", var(--fd-font-text); font-size: 1.125rem; }
.fd-id__sys { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(min(var(--n, 6), 6), minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px) { .fd-id__sys { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fd-id__sys li { background: #151412; outline: 1px solid var(--_line); outline-offset: -1px; padding: 8px; }
.fd-id__sys img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.fd-id__source { margin: 18px 0 0; color: var(--_muted); font-size: 0.8125rem; }

/* Design decisions: numbered, one image and one line each, alternating sides */
.fd-dec { margin-bottom: clamp(56px, 7vw, 112px); }
.fd-dec__list { list-style: none; margin-top: 0; margin-bottom: 0; display: grid; gap: clamp(40px, 6vw, 96px); }
.fd-dec__item { display: grid; gap: clamp(16px, 2.4vw, 32px); align-items: center; }
@media (min-width: 900px) {
	.fd-dec__item { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
	.fd-dec__item:nth-child(even) { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
	.fd-dec__item:nth-child(even) .fd-dec__media { order: 2; }
}
.fd-dec__n { display: block; font-size: 0.8125rem; color: var(--_muted); font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.fd-dec__title { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 8px; }
.fd-dec__text p { margin: 0; color: var(--_muted); max-width: 40ch; }
.fd-site .fd-dec .fd-cs__fig .fd-cs__zoom { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--fdm-card, #1e1c19); padding: 0; }
.fd-dec .fd-cs__zoom img { position: absolute; inset: clamp(14px, 2.6vw, 36px); width: calc(100% - 2 * clamp(14px, 2.6vw, 36px)); height: calc(100% - 2 * clamp(14px, 2.6vw, 36px)); object-fit: contain; }
.fd-dec .fd-cs__fig figcaption { font-size: 0.8125rem; padding-top: 8px; }

/* In context, textiles, campaign */
.fd-env .fd-cs__section-head { margin-bottom: clamp(14px, 1.8vw, 22px); }
.fd-tex { margin-bottom: clamp(24px, 3vw, 40px); }
.fd-tex .fd-cs__gallery img { display: block; width: 100%; height: auto; }

/* Conclusion */
.fd-cs__conclusion { margin-top: clamp(56px, 7vw, 112px); margin-bottom: clamp(56px, 7vw, 112px); }
.fd-cs__conclusion-text { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: 450; max-width: 30ch; margin: 10px 0 0; color: var(--_ink); }

/* In context: a tall image beside two stacked 16:10 halves (heights match), or a centred portrait */
.fd-show { grid-auto-flow: row dense; }
@media (min-width: 760px) {
	.fd-show .fd-show__item--tall { grid-row: span 2; }
	.fd-site .fd-show .fd-show__item--tall .fd-cs__zoom { height: 100%; }
	.fd-show .fd-show__item--tall img { height: 100%; object-fit: cover; }
	.fd-show .fd-show__item--side { justify-self: center; width: min(100%, 760px); }
}

/* Artwork: wide strips hug the artwork; a tile alone in its row spans it */
.fd-site .fd-art .fd-art__item--wide .fd-cs__zoom { aspect-ratio: auto; }
.fd-art .fd-art__item--wide .fd-cs__zoom img { position: static; inset: auto; width: 100%; height: auto; padding: clamp(14px, 2.6vw, 36px); box-sizing: border-box; }
.fd-art .fd-art__item--solo { grid-column: 1 / -1; }
.fd-site .fd-art .fd-art__item--solo .fd-cs__zoom { aspect-ratio: 16 / 8; }
/* Numbers: the unit sits beside the figure, upright and quiet */
body.fd-type-editorial .fd-stats__value em { font-style: normal; font-family: inherit; color: var(--_muted); font-size: 0.42em; letter-spacing: 0; margin-left: 0.25em; }
/* Text on the accent band is always ink (4.6:1 on vermilion); the global muted grey fails there */
body.fd-type-editorial .fd-theme-accent .fd-eyebrow { color: var(--_ink); }

/* Video in a gallery (motion studies): controls stay clear, the caption sits below */
.fd-cs__motion { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; background: #0d0c0b; }
.fd-show .fd-cs__fig--video figcaption { position: static; background: none; color: var(--_muted); padding: 10px 2px 4px; max-width: none; }

/* ==========================================================================
   v3.0 motion (assets/js/fd-motion.js). Only under .fd-motion, which the script sets when
   motion is allowed: without JavaScript or with reduced motion, nothing below applies.
   ========================================================================== */
.fd-motion .fd-words .fd-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0 0.12em; margin: -0.06em 0 -0.12em; }
.fd-motion .fd-words .fd-w__i { display: inline-block; transform: translate3d(0, 108%, 0); transition: transform 0.95s cubic-bezier(0.2, 0.75, 0.1, 1); transition-delay: calc(var(--i, 0) * 42ms); }
.fd-motion .fd-words.is-in .fd-w__i { transform: none; }
.fd-motion .fd-clip { position: relative; }
.fd-motion .fd-clip::after { content: ""; position: absolute; inset: -1px; background: var(--fd-wipe-bg, #0d0c0b); transform-origin: 50% 0; transition: transform 1.15s cubic-bezier(0.65, 0, 0.2, 1); pointer-events: none; z-index: 2; }
.fd-motion .fd-clip.is-in::after { transform: scaleY(0); }
.fd-motion .fd-clip .fd-cs__zoom { overflow: hidden; }
.fd-motion .fd-clip img { transform: scale(1.07); transition: transform 1.7s cubic-bezier(0.2, 0.75, 0.1, 1); }
.fd-motion .fd-clip.is-in img { transform: none; }
.fd-motion .fd-drift { overflow: hidden; display: block; }
.fd-motion .fd-drift img { will-change: transform; }

/* Cross-document view transitions: the page crossfades and the clicked project's title
   travels into the case study's heading. Browsers without support navigate as usual. */
@view-transition { navigation: auto; }
.fd-header { view-transition-name: fd-header; }
::view-transition-old(root) { animation: fd-vt-out 0.28s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: fd-vt-in 0.55s cubic-bezier(0.2, 0.75, 0.1, 1) both; }
::view-transition-group(*) { animation-duration: 0.55s; animation-timing-function: cubic-bezier(0.2, 0.75, 0.1, 1); }
@keyframes fd-vt-out { to { opacity: 0; transform: translate3d(0, -12px, 0); } }
@keyframes fd-vt-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}