/* ==========================================================================
   Saudi Iwaa, Concept 06. Homepage stylesheet.
   Every value comes from tokens.css (generated from design-system/tokens.json). Mobile-first: the base IS the
   phone layout; 48rem and 64rem layers add the tablet and desktop compositions. RTL through logical properties.

   System rules (see DESIGN_DIRECTION.md):
   - Type: IBM Plex Sans Arabic only. 400 body, 500 labels/UI, 600 headings/figures. Hierarchy by weight and
     measure; h1 max 56px; one leading figure (21,579) per page.
   - Radius: 0 full-bleed media; 12px media and panels; 8px controls; 6px nested.
   - Lines: 1px hairlines only. The 2px red mark is the active indicator (tabs/index), never a card edge.
   - Colour: one accent (red) for the primary action and active marks. Bands alternate page/band; deep ink only in
     the trust cell, the closing photograph and the footer.
   - Motion: reveal 560ms ease-out, image/mask 900ms ease-in-out, state 240ms, micro 120ms, intro 1400ms once.
   ========================================================================== */

/* ---------- Fonts (OFL, self-hosted): IBM Plex Sans Arabic 400/500/600 (Arabic) + 400/600 (Latin figures) ---------- */
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/plex-arabic-400.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/plex-arabic-500.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/plex-arabic-600.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/plex-latin-400.woff2) format("woff2"); 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: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500 600; font-display: swap; src: url(../fonts/plex-latin-600.woff2) format("woff2"); 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; }

/* ---------- Derived (component-level) values: built only from tokens ---------- */
:root {
	--header-h: var(--layout-header);
	--rail: max(var(--layout-gutter), calc((100vw - var(--layout-container)) / 2 + var(--layout-gutter)));
	--fwd: 1;
	--scrim-photo: linear-gradient(to top, rgb(14 20 27 / 0.86) 0%, rgb(14 20 27 / 0.5) 45%, rgb(14 20 27 / 0) 100%);
	--glass: rgb(14 20 27 / 0.42);
	--glass-hover: rgb(14 20 27 / 0.68);
	--glass-strong: rgb(14 20 27 / 0.74); /* small text on bright photo areas (sky): AA regardless of the photo */
	--glass-line: rgb(255 255 255 / 0.42);
	--shadow-panel: 0 1px 2px rgb(17 24 32 / 0.06), 0 24px 56px -32px rgb(17 24 32 / 0.32);
	--shadow-float: 0 18px 40px -18px rgb(14 20 27 / 0.55);
	--z-header: 50;
	--z-wa: 60;
	--z-sheet: 70;
}
[dir="rtl"] { --fwd: -1; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--space-4)); }
body { margin: 0; background: var(--color-bg-page); color: var(--color-text); font-family: var(--font-family); font-size: var(--type-body); font-weight: var(--font-regular); line-height: var(--type-lh-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3, h4 { font-weight: var(--font-semibold); line-height: var(--type-lh-display); text-wrap: balance; }
b, strong, legend, dt { font-weight: var(--font-medium); }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-inner); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; pointer-events: none; }
.skip-link { position: absolute; inset-inline-start: var(--space-4); top: -4rem; z-index: 100; padding: var(--space-3) var(--space-5); border-radius: var(--radius-control); background: var(--color-text); color: var(--color-bg-page); }
.skip-link:focus { top: var(--space-4); }
.site-main:focus { outline: none; }
.container { width: 100%; max-width: var(--layout-container); margin-inline: auto; padding-inline: var(--layout-gutter); }
.icon { flex: none; }
.fig { font-weight: var(--font-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Type roles ---------- */
.h2 { font-size: var(--type-h2); max-width: var(--type-measure-heading); }
.lede { margin-block-start: var(--space-4); max-width: var(--type-measure-text); font-size: var(--type-lead); line-height: 1.75; color: var(--color-text-2); text-wrap: pretty; }

/* ---------- Actions: primary (one per moment), secondary text link, glass on photographs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--button-height-md); padding: 0 var(--space-6); border-radius: var(--radius-control); border: 1px solid transparent; font-size: var(--type-small); font-weight: var(--font-medium); line-height: 1.2; white-space: nowrap; transition: background-color var(--motion-micro), border-color var(--motion-micro), color var(--motion-micro), transform var(--motion-micro); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--sm { min-height: 2.5rem; padding: 0 var(--space-4); }
.btn--lg { min-height: var(--button-height-lg); padding: 0 var(--space-8); font-size: var(--type-body); }
.btn--block { width: 100%; }
.btn--primary { background: var(--button-primary-bg); color: var(--button-primary-text); }
.btn--primary:hover { background: var(--button-primary-bg-hover); }
.btn--primary:active { background: var(--button-primary-bg-press); }
.btn--glass { background: var(--glass); border-color: var(--glass-line); color: var(--button-primary-text); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn--glass:hover { background: var(--glass-hover); }
.btn--wa { background: var(--color-bg-deep); color: var(--button-primary-text); }
.btn--wa:hover { background: var(--color-bg-deep-2); }
.btn__spinner { display: none; width: 1rem; height: 1rem; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
.btn.is-loading .btn__spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--layout-hit); font-size: var(--type-small); font-weight: var(--font-medium); color: var(--color-text); }
.link span { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; padding-block-end: 2px; transition: background-size var(--motion-state) var(--motion-ease-out); }
.link:hover { color: var(--color-accent-hover); }
.link .icon { transition: transform var(--motion-state) var(--motion-ease-out); }
.link:hover .icon { transform: translateX(calc(var(--fwd) * 4px)); }
.link--on-deep { color: var(--color-text-on-deep); }
.link--on-deep:hover { color: var(--button-primary-text); }
.inline-link { display: inline-flex; align-items: center; min-height: var(--layout-hit); font-weight: var(--font-medium); color: var(--color-text); text-decoration: underline; text-underline-offset: 0.4em; text-decoration-color: var(--color-line-strong); }
.inline-link:hover { color: var(--color-accent-hover); text-decoration-color: currentColor; }
.icon-btn { display: inline-grid; place-items: center; width: var(--layout-hit); height: var(--layout-hit); border-radius: var(--radius-control); transition: background-color var(--motion-micro); }
.icon-btn:hover { background: var(--color-bg-band); }

/* ==========================================================================
   Header
   ========================================================================== */
.hd-sentinel { position: absolute; top: 0; width: 1px; height: 8px; }
.hd { position: fixed; inset-inline: 0; top: 0; z-index: var(--z-header); background: var(--color-bg-page); box-shadow: 0 1px 0 var(--color-line); transition: box-shadow var(--motion-state); }
.hd.is-scrolled { box-shadow: 0 1px 0 var(--color-line), 0 10px 30px -24px rgb(17 24 32 / 0.45); }
.hd__inner { display: flex; align-items: center; gap: var(--space-4); height: 4rem; max-width: var(--layout-container-wide); margin-inline: auto; padding-inline: var(--layout-gutter); transition: height var(--motion-state) var(--motion-ease-out); }
.hd__brand { display: inline-flex; align-items: center; min-height: var(--layout-hit); margin-inline-end: auto; }
.hd__logo { width: auto; height: 2.125rem; transition: height var(--motion-state) var(--motion-ease-out); }
.hd__nav { display: none; }
.hd__actions { display: flex; align-items: center; gap: var(--space-2); }
.hd__actions .btn { min-height: 2.5rem; padding-inline: var(--space-4); font-size: var(--type-small); }
.hd__phone { display: none; }
.hd__menu { display: inline-grid; place-items: center; width: var(--layout-hit); height: var(--layout-hit); border-radius: var(--radius-control); transition: background-color var(--motion-micro); }
.hd__menu:hover { background: var(--color-bg-band); }
.hd__nav .nav__list { display: flex; gap: var(--space-1); }
.hd__nav .nav__list a { position: relative; display: inline-flex; align-items: center; min-height: var(--layout-hit); padding-inline: var(--space-3); font-size: var(--type-small); font-weight: var(--font-medium); color: var(--color-text-2); transition: color var(--motion-micro); }
.hd__nav .nav__list a::after { content: ""; position: absolute; inset-inline: var(--space-3); bottom: 0.5rem; height: 2px; border-radius: 1px; background: var(--color-accent); transform: scaleX(0); transition: transform var(--motion-state) var(--motion-ease-out); }
.hd__nav .nav__list a:hover { color: var(--color-text); }
.hd__nav .nav__list a:hover::after, .hd__nav .nav__list a.is-current::after { transform: scaleX(1); }
.hd__nav .nav__list a.is-current { color: var(--color-text); }
.sheet { position: fixed; inset: 0; z-index: var(--z-sheet); background: rgb(14 20 27 / 0.5); }
.sheet[hidden] { display: none; }
.sheet__panel { position: absolute; inset-block: 0; inset-inline-end: 0; display: flex; flex-direction: column; width: min(24rem, 100vw); padding: var(--space-3) var(--layout-gutter) var(--space-8); background: var(--color-bg-page); overflow-y: auto; animation: sheet-in var(--motion-reveal) var(--motion-ease-out); }
@keyframes sheet-in { from { opacity: 0; transform: translateX(calc(var(--fwd) * -2rem)); } }
.sheet__top { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; margin-block-end: var(--space-6); }
.sheet__logo { height: 2.125rem; width: auto; }
.sheet__list li + li { border-block-start: 1px solid var(--color-line); }
.sheet__list a { display: flex; align-items: center; min-height: 3.5rem; font-size: var(--type-h4); font-weight: var(--font-medium); }
.sheet__list a:hover { color: var(--color-accent-hover); }
.sheet__foot { display: grid; gap: var(--space-3); margin-block-start: auto; padding-block-start: var(--space-8); }
.sheet__phone { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--layout-hit); color: var(--color-text-2); }

/* ==========================================================================
   Hero: full-bleed photograph + carved paper plate
   ========================================================================== */
.hero { position: relative; margin-block-start: 4rem; background: var(--color-bg-page); }
.hero__media { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; background: var(--color-bg-sunken); }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(14 20 27 / 0.45), rgb(14 20 27 / 0) 40%); pointer-events: none; }
.hero__caption { position: absolute; z-index: 2; inset-inline-end: var(--layout-gutter); top: var(--space-4); display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-control); background: var(--glass-strong); color: var(--button-primary-text); font-size: var(--type-caption); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero__plate { position: relative; z-index: 3; margin-block-start: calc(var(--space-12) * -1); margin-inline-end: var(--space-6); border-start-end-radius: var(--radius-media); background: var(--color-bg-page); }
.hero__inner { padding: var(--space-8) var(--layout-gutter) var(--space-10); }
.hero__title { font-size: var(--type-h1); font-weight: var(--font-semibold); line-height: 1.28; letter-spacing: 0; max-width: 16ch; }
.hero__text { margin-block-start: var(--space-4); max-width: 32rem; font-size: var(--type-lead); line-height: 1.75; color: var(--color-text-2); text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-block-start: var(--space-6); }
.hero__actions .btn { flex: 1 1 100%; }
.hero__scale { margin-block-start: var(--space-6); padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-line); max-width: 34rem; font-size: var(--type-small); color: var(--color-text-muted); line-height: 1.8; }
.hero__scale .fig { color: var(--color-text); font-size: var(--type-body); }

/* ==========================================================================
   Profile: statement + scale ledger
   ========================================================================== */
.profile { padding-block: var(--layout-section); }
.profile__grid { display: grid; gap: var(--space-12); }
.creds { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3) var(--space-6); margin-block-start: var(--space-8); }
.creds li { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; gap: var(--space-2); font-size: var(--type-small); color: var(--color-text-muted); line-height: var(--type-lh-ui); }
.creds .icon { color: var(--color-text-muted); }
.creds__code { font-weight: var(--font-semibold); color: var(--color-text); white-space: nowrap; }
.ledger__lead { display: grid; gap: var(--space-1); padding-block-end: var(--space-6); border-block-end: 1px solid var(--color-line); }
.ledger__fig { font-size: var(--type-figure); font-weight: var(--font-semibold); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; justify-self: start; }
.ledger__label { font-size: var(--type-small); color: var(--color-text-muted); }
.ledger__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: var(--space-6); border-block-end: 1px solid var(--color-line); }
.ledger__row > div { display: grid; gap: var(--space-1); padding-inline: var(--space-4); }
.ledger__row > div:first-child { padding-inline-start: 0; }
.ledger__row > div + div { box-shadow: inset calc(var(--fwd) * -1px) 0 0 var(--color-line); }
.ledger__row dt { order: 2; font-size: var(--type-caption); font-weight: var(--font-regular); color: var(--color-text-muted); line-height: var(--type-lh-ui); }
.ledger__row dd { order: 1; font-size: var(--type-h3); font-weight: var(--font-semibold); line-height: 1.2; font-variant-numeric: tabular-nums; justify-self: start; }
.ledger__where li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-4); padding-block: var(--space-4); }
.ledger__where li + li { border-block-start: 1px solid var(--color-line); }
.ledger__region { font-size: var(--type-small); font-weight: var(--font-semibold); }
.ledger__cities { grid-column: 1; font-size: var(--type-small); color: var(--color-text-muted); }
.ledger__sum { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: var(--type-caption); color: var(--color-text-muted); }
.ledger__sum .fig { font-size: var(--type-body); color: var(--color-text); }

/* ==========================================================================
   Operation: joined photo mosaic + supporting operations
   ========================================================================== */
.ops { padding-block: var(--layout-section); background: var(--color-bg-band); }
.mosaic { display: grid; gap: 3px; margin-block-start: var(--space-10); border-radius: var(--radius-media); overflow: hidden; background: var(--color-bg-band); }
.tile { position: relative; display: flex; align-items: flex-end; min-height: 9.5rem; overflow: hidden; background: var(--color-bg-deep); isolation: isolate; }
.tile--lead { min-height: 24rem; }
.tile__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-image) var(--motion-ease-out); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim-photo); }
.tile:hover .tile__img { transform: scale(1.035); }
.tile__body { display: grid; gap: var(--space-2); padding: var(--space-5); color: var(--color-text-on-deep); }
.tile__icon { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-control); background: var(--glass); color: var(--button-primary-text); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tile--lead .tile__icon { background: var(--color-accent); }
.tile__title { font-size: var(--type-h4); color: var(--button-primary-text); }
.tile--lead .tile__title { font-size: var(--type-h3); }
.tile__text { max-width: 44ch; font-size: var(--type-small); line-height: 1.7; color: var(--color-text-on-deep); }
.support { display: grid; gap: var(--space-4); margin-block-start: var(--space-8); }
.support__label { font-size: var(--type-small); font-weight: var(--font-semibold); }
.support__list { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.support__list li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--type-small); color: var(--color-text-2); }
.support__list .icon { color: var(--color-text-muted); }

/* ==========================================================================
   Compounds: typographic index + one stage + operating standard
   ========================================================================== */
.cmp { padding-block: var(--layout-section); }
.index { display: grid; gap: var(--space-6); margin-block-start: var(--space-10); }
.index__region { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-block-end: var(--space-2); border-block-end: 1px solid var(--color-line); font-size: var(--type-caption); font-weight: var(--font-semibold); color: var(--color-text-muted); }
.index__sum { font-weight: var(--font-regular); }
.index__sum .fig { color: var(--color-text); }
.index__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.index__item { position: relative; display: grid; gap: 2px; min-height: 4.25rem; padding: var(--space-3) var(--space-1); align-content: center; transition: background-color var(--motion-micro); }
.index__item::after { content: ""; position: absolute; inset-inline: var(--space-1); bottom: -1px; height: 2px; border-radius: 1px; background: var(--color-accent); transform: scaleX(0); transition: transform var(--motion-state) var(--motion-ease-out); }
.index__item:hover .index__name { color: var(--color-text); }
.index__name { font-size: var(--type-h4); font-weight: var(--font-semibold); line-height: 1.35; color: var(--color-text-muted); transition: color var(--motion-state); }
.index__fig { font-size: var(--type-caption); color: var(--color-text-muted); }
.index__item[aria-pressed="true"] .index__name { color: var(--color-text); }
.index__item[aria-pressed="true"]::after { transform: scaleX(1); }
.index__item[aria-pressed="true"] .index__fig .fig { color: var(--color-accent-hover); }
.stages { margin-block-start: var(--space-8); }
.stage + .stage { margin-block-start: var(--space-16); }
.js .stage { display: none; }
.js .stage[data-active] { display: grid; }
.js .stage + .stage { margin-block-start: 0; }
.stage { gap: var(--space-6); }
.stage__media { order: -1; position: relative; aspect-ratio: var(--media-ratio-stage); border-radius: var(--radius-media); overflow: hidden; background: var(--color-bg-sunken); }
.stage__img { width: 100%; height: 100%; object-fit: cover; }
.stage__lead { display: grid; gap: var(--space-1); margin-block-start: var(--space-6); padding-block-end: var(--space-5); border-block-end: 1px solid var(--color-line); }
.stage__fig { font-size: var(--type-h1); font-weight: var(--font-semibold); line-height: 1; font-variant-numeric: tabular-nums; justify-self: start; }
.stage__fig-label { font-size: var(--type-small); color: var(--color-text-muted); }
.stage__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: var(--space-5); border-block-end: 1px solid var(--color-line); }
.stage__row > div { display: grid; align-content: start; gap: var(--space-1); padding-inline: var(--space-4); }
.stage__row > div:first-child { padding-inline-start: 0; }
.stage__row > div + div { box-shadow: inset calc(var(--fwd) * -1px) 0 0 var(--color-line); }
.stage__row dt { order: 2; font-size: var(--type-caption); font-weight: var(--font-regular); color: var(--color-text-muted); }
.stage__row dd { order: 1; font-size: var(--type-small); font-weight: var(--font-semibold); line-height: 1.5; font-variant-numeric: tabular-nums; }
.stage__runs > div { display: grid; gap: 2px; padding-block: var(--space-4); border-block-end: 1px solid var(--color-line); }
.stage__runs dt { font-size: var(--type-caption); font-weight: var(--font-semibold); color: var(--color-text-muted); }
.stage__runs dd { font-size: var(--type-small); line-height: 1.75; color: var(--color-text-2); }
.stage__where { display: flex; align-items: center; gap: var(--space-2); font-size: var(--type-caption); color: var(--color-text-muted); }
.stage__title { margin-block-start: var(--space-2); font-size: var(--type-h2); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); margin-block-start: var(--space-6); padding-block: var(--space-5); border-block: 1px solid var(--color-line); }
.facts dt { font-size: var(--type-caption); font-weight: var(--font-regular); color: var(--color-text-muted); }
.facts dd { margin-block-start: 2px; font-size: var(--type-small); font-weight: var(--font-medium); line-height: 1.5; font-variant-numeric: tabular-nums; }
.facts dd span { font-weight: var(--font-regular); color: var(--color-text-muted); }
.facts > div:first-child dd { font-size: var(--type-h3); font-weight: var(--font-semibold); line-height: 1.25; }
.amen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin-block-start: var(--space-6); }
.amen li:nth-child(n + 7) { display: none; }
.amen li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--type-small); color: var(--color-text-2); }
.amen .icon { color: var(--color-text-muted); }
.more { margin-block-start: var(--space-6); border: 1px solid var(--color-line); border-radius: var(--radius-control); }
.more summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 3rem; padding-inline: var(--space-4); font-size: var(--type-small); font-weight: var(--font-medium); cursor: pointer; list-style: none; border-radius: var(--radius-control); transition: background-color var(--motion-micro); }
.more summary::-webkit-details-marker { display: none; }
.more summary:hover { background: var(--color-bg-band); }
.more__icon, .faq__icon { position: relative; flex: none; width: 0.875rem; height: 0.875rem; }
.more__icon::before, .more__icon::after, .faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; margin-top: -0.75px; background: currentColor; transition: transform var(--motion-state) var(--motion-ease-out); }
.more__icon::after, .faq__icon::after { transform: rotate(90deg); }
.more[open] .more__icon::after, .faq__q [aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }
.more__grid { display: grid; gap: var(--space-5); padding: var(--space-2) var(--space-4) var(--space-5); }
.more__title { font-size: var(--type-caption); font-weight: var(--font-semibold); margin-block-end: var(--space-1); }
.more__grid li { font-size: var(--type-small); color: var(--color-text-2); line-height: 1.75; }
.stage__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-block-start: var(--space-6); }
.standard { margin-block-start: var(--space-12); padding-block-start: var(--space-8); border-block-start: 1px solid var(--color-line-strong); }
.standard__title { font-size: var(--type-h4); }
.standard__cols { display: grid; gap: var(--space-6); margin-block-start: var(--space-5); }
.standard__head { margin-block-end: var(--space-3); font-size: var(--type-caption); font-weight: var(--font-semibold); color: var(--color-text-muted); }
.standard__list { display: grid; border-block-start: 1px solid var(--color-line); }
.standard__list li { padding-block: var(--space-3); border-block-end: 1px solid var(--color-line); font-size: var(--type-small); color: var(--color-text-2); line-height: 1.6; }
.standard__list .icon { color: var(--color-text-muted); }

/* ==========================================================================
   Trust: one board (deep statement cell + logo field)
   ========================================================================== */
.trust { padding-block: var(--layout-section); background: var(--color-bg-band); }
.board { display: grid; border-radius: var(--radius-media); overflow: hidden; background: var(--color-bg-page); box-shadow: 0 0 0 1px var(--color-line); }
.board__lead { display: grid; align-content: space-between; gap: var(--space-8); padding: var(--space-8) var(--space-6); background: var(--color-bg-deep); color: var(--color-text-on-deep); }
.board__lead :focus-visible { outline-color: var(--color-focus-on-deep); }
.board__label { font-size: var(--type-small); font-weight: var(--font-medium); color: var(--color-text-on-deep-muted); }
.board__statement { margin-block-start: var(--space-3); max-width: 22ch; font-size: var(--type-h3); font-weight: var(--font-semibold); line-height: 1.5; color: var(--button-primary-text); text-wrap: balance; }
.board__statement .fig { color: var(--button-primary-text); font-weight: var(--font-semibold); }
.board__links { display: grid; justify-items: start; gap: var(--space-1); }
.board__owner { font-size: var(--type-small); color: var(--color-text-on-deep-muted); }
.board__owner a { display: inline-flex; align-items: center; min-height: var(--layout-hit); font-weight: var(--font-medium); color: var(--color-text-on-deep); text-decoration: underline; text-underline-offset: 0.4em; text-decoration-color: var(--color-line-on-deep); }
.board__owner a:hover { color: var(--button-primary-text); text-decoration-color: currentColor; }
.logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--color-line); }
.logos li { display: grid; place-items: center; min-height: 6.5rem; padding: var(--space-4) var(--space-3); background: var(--color-bg-page); }
.logos img { width: var(--mw, auto); max-width: 100%; height: auto; max-height: 3.5rem; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: 0.8; transition: filter var(--motion-state) var(--motion-ease-out), opacity var(--motion-state) var(--motion-ease-out); }
.logos li:hover img { filter: none; opacity: 1; }

/* ==========================================================================
   Inquiry
   ========================================================================== */
.inq { padding-block: var(--layout-section); }
.inq__subhead:first-of-type { margin-block-start: var(--space-6); }
.inq__grid { display: grid; gap: var(--space-10); }
.inq__subhead { margin-block-start: var(--space-8); font-size: var(--type-small); font-weight: var(--font-semibold); }
.process { margin-block-start: var(--space-3); border-block-start: 1px solid var(--color-line); }
.process li { padding-block: var(--space-3); border-block-end: 1px solid var(--color-line); font-size: var(--type-small); line-height: 1.7; color: var(--color-text-2); }
.direct { display: grid; justify-items: start; gap: var(--space-1); margin-block-start: var(--space-6); }
.direct__label { margin-block-end: var(--space-1); font-size: var(--type-caption); color: var(--color-text-muted); }
.direct__line { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--layout-hit); font-size: var(--type-small); font-weight: var(--font-medium); transition: color var(--motion-micro); }
.direct__line .icon { color: var(--color-text-muted); }
.direct__line:hover { color: var(--color-accent-hover); }
.inq__panel { padding: var(--space-6) var(--space-5) var(--space-8); border-radius: var(--radius-media); background: var(--color-bg-band); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); padding-block-end: var(--space-5); margin-block-end: var(--space-6); border-block-end: 1px solid var(--color-line-strong); }
.steps li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--type-caption); font-weight: var(--font-medium); color: var(--color-text-muted); line-height: 1.35; }
.steps__mark { position: relative; display: inline-grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-inner); border: 1px solid var(--color-line-strong); background: var(--color-bg-page); color: var(--color-text); font-size: var(--type-caption); font-weight: var(--font-semibold); transition: background-color var(--motion-state), border-color var(--motion-state), color var(--motion-state); }
.steps__check { display: none; }
.steps li.is-done { color: var(--color-text); }
.steps li.is-done .steps__mark { background: var(--color-text); border-color: var(--color-text); color: var(--button-primary-text); }
.steps li.is-done .steps__num { display: none; }
.steps li.is-done .steps__check { display: block; }
.form { display: grid; gap: var(--space-8); }
.form[hidden], .steps[hidden] { display: none; }
.group { margin: 0; padding: 0; border: 0; min-width: 0; }
.group__title { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 0; margin-block-end: var(--space-5); font-size: var(--type-h4); font-weight: var(--font-semibold); }
.group__num { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-inner); background: var(--color-text); color: var(--button-primary-text); font-size: var(--type-caption); }
.group__body { display: grid; gap: var(--space-5); }
.field { display: grid; align-content: start; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.field__label { padding: 0; font-size: var(--type-small); font-weight: var(--font-medium); }
.field__req { color: var(--color-accent); margin-inline-start: 2px; }
.field__opt { font-size: var(--type-caption); font-weight: var(--font-regular); color: var(--color-text-muted); margin-inline-start: var(--space-1); }
.field__input { width: 100%; min-height: var(--field-height); padding: 0 var(--space-4); border: 1px solid var(--field-border); border-radius: var(--radius-control); background: var(--color-bg-page); font-size: var(--type-body); transition: border-color var(--motion-micro), box-shadow var(--motion-micro); }
.field__input::placeholder { color: var(--color-placeholder); }
.field__input:hover { border-color: var(--field-border-hover); }
.field__input:focus { outline: none; border-color: var(--field-border-focus); box-shadow: 0 0 0 1px var(--field-border-focus); }
.field__input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.field__input[aria-invalid="true"] { border-color: var(--field-border-error); box-shadow: 0 0 0 1px var(--field-border-error); }
.field__input[dir="ltr"] { text-align: right; }
.field__help { font-size: var(--type-caption); color: var(--color-text-muted); line-height: 1.5; }
.field__error { font-size: var(--type-caption); font-weight: var(--font-medium); color: var(--color-error); line-height: 1.5; }
.field__error[hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { position: relative; }
.chip__input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip__face { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--layout-hit); padding: 0 var(--space-4); border: 1px solid var(--field-border); border-radius: var(--radius-control); font-size: var(--type-small); background: var(--color-bg-page); transition: background-color var(--motion-micro), color var(--motion-micro), border-color var(--motion-micro); }
.chip__check { display: none; }
.chip__input:hover + .chip__face { border-color: var(--color-text); }
.chip__input:checked + .chip__face { background: var(--color-text); border-color: var(--color-text); color: var(--button-primary-text); }
.chip__input:checked + .chip__face .chip__check { display: block; }
.chip__input:focus-visible + .chip__face { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.field--choices[aria-invalid="true"] .chip__face { border-color: var(--field-border-error); }
.form__end { display: grid; justify-items: start; gap: var(--space-3); padding-block-start: var(--space-2); }
.form__note { font-size: var(--type-caption); color: var(--color-text-muted); }
.form-alert { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--color-error-tint); box-shadow: inset 0 0 0 1px var(--color-error); color: var(--color-error); font-size: var(--type-small); }
.form-alert[hidden] { display: none; }
.done { display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-8) var(--space-6); border-radius: var(--radius-media); background: var(--color-bg-page); box-shadow: inset 0 0 0 1px var(--color-line); }
.done[hidden] { display: none; }
.done:focus { outline: none; }
.done__icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius-control); background: var(--color-success); color: var(--button-primary-text); }
.done__kicker { font-size: var(--type-small); font-weight: var(--font-semibold); color: var(--color-success); }
.done__title { max-width: 30ch; font-size: var(--type-h3); }
.done__summary { padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--color-bg-band); font-size: var(--type-small); color: var(--color-text-2); }
.done__summary[hidden] { display: none; }

/* ==========================================================================
   Knowledge
   ========================================================================== */
.know { padding-block: var(--layout-section); background: var(--color-bg-band); }
.know__grid { display: grid; gap: var(--space-12); margin-block-start: var(--space-8); }
.know__subhead { margin-block-end: var(--space-4); font-size: var(--type-h4); }
.know__subhead--sm { margin-block-start: var(--space-8); font-size: var(--type-small); color: var(--color-text-muted); }
.faq__list { border-radius: var(--radius-media); background: var(--color-bg-page); box-shadow: inset 0 0 0 1px var(--color-line); }
.faq__item + .faq__item { border-block-start: 1px solid var(--color-line); }
.faq__q button { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; min-height: 3.75rem; padding: var(--space-3) var(--space-5); text-align: start; font-size: var(--type-small); font-weight: var(--font-medium); line-height: 1.6; border-radius: var(--radius-media); transition: color var(--motion-micro); }
.faq__q button:hover { color: var(--color-accent-hover); }
.faq__a { display: grid; grid-template-rows: 1fr; }
.js .faq__a { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--motion-reveal) var(--motion-ease-out), visibility 0s linear var(--motion-reveal); }
.js .faq__item.is-open .faq__a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--motion-reveal) var(--motion-ease-out), visibility 0s; }
.faq__inner { overflow: hidden; }
.faq__inner p { padding: 0 var(--space-5) var(--space-5); max-width: var(--type-measure-text); font-size: var(--type-small); color: var(--color-text-2); }
.js .know.qa-collapsed [data-extra] { display: none; }
.faq__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); margin-block-start: var(--space-4); }
.faq__help { font-size: var(--type-small); color: var(--color-text-muted); }
.rows { border-block-start: 1px solid var(--color-line-strong); }
.rows li { border-block-end: 1px solid var(--color-line); }
.row { display: grid; gap: 2px; padding-block: var(--space-4); }
.row__date { font-size: var(--type-caption); color: var(--color-text-muted); }
.row__title { font-weight: var(--font-medium); line-height: 1.6; transition: color var(--motion-micro); }
.row:hover .row__title { color: var(--color-accent-hover); }
.latest__more { margin-block-start: var(--space-4); }

/* ==========================================================================
   Closing photograph
   ========================================================================== */
.closing { position: relative; display: grid; align-items: end; color: var(--color-text-on-deep); background: var(--color-bg-deep); isolation: isolate; overflow: hidden; }
.closing :focus-visible { outline-color: var(--color-focus-on-deep); }
.closing__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.closing__img { width: 100%; height: 100%; object-fit: cover; }
.closing::before { content: none; }
.closing__inner { padding-block: var(--space-10) var(--space-12); }
.closing__title { max-width: 20ch; font-size: var(--type-h2); color: var(--button-primary-text); }
.closing__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-8); }

/* ==========================================================================
   Footer
   ========================================================================== */
.ft { padding-block: var(--space-16) var(--space-6); background: var(--color-bg-deep); color: var(--color-text-on-deep); border-block-start: 1px solid var(--color-line-on-deep); }
.ft :focus-visible { outline-color: var(--color-focus-on-deep); }
.ft__grid { display: grid; gap: var(--space-10); padding-block-end: var(--space-12); }
.ft__plate { display: inline-flex; padding: var(--space-2) var(--space-4); border-radius: var(--radius-control); background: var(--color-bg-page); margin-block-end: var(--space-5); }
.ft__logo { width: 8.5rem; height: auto; }
.ft__brand p { max-width: 26rem; font-size: var(--type-small); color: var(--color-text-on-deep-muted); line-height: 1.85; }
.ft__head { margin-block-end: var(--space-4); font-size: var(--type-small); font-weight: var(--font-semibold); color: var(--button-primary-text); }
.ft__links a, .ft .nav__list a { display: inline-flex; align-items: center; min-height: 2.5rem; font-size: var(--type-small); color: var(--color-text-on-deep-muted); transition: color var(--motion-micro); }
.ft__links a:hover, .ft .nav__list a:hover { color: var(--button-primary-text); }
.ft .nav__list { display: grid; }
.ft__contact li { display: flex; align-items: flex-start; gap: var(--space-3); padding-block: var(--space-2); font-size: var(--type-small); color: var(--color-text-on-deep-muted); line-height: 1.6; }
.ft__contact .icon { margin-block-start: 0.2rem; }
.ft__contact a { display: inline-flex; align-items: center; min-height: 1.5rem; }
.ft__contact a:hover { color: var(--button-primary-text); }
.ft__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); padding-block-start: var(--space-5); border-block-start: 1px solid var(--color-line-on-deep); font-size: var(--type-caption); color: var(--color-text-on-deep-muted); }
.ft__bottom a { display: inline-flex; align-items: center; min-height: 1.5rem; }
.ft__bottom a:hover { color: var(--button-primary-text); }

/* ==========================================================================
   WhatsApp pre-chat (same system: 8px controls, 12px panel, ink fab)
   ========================================================================== */
.wa { position: fixed; inset-inline-end: var(--space-4); bottom: var(--space-4); z-index: var(--z-wa); transition: opacity var(--motion-state), transform var(--motion-state) var(--motion-ease-out), visibility 0s; }
.wa.is-aside { opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none; transition: opacity var(--motion-state), transform var(--motion-state) var(--motion-ease-out), visibility 0s linear var(--motion-state); }
.wa__fab { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); width: 3rem; height: 3rem; border-radius: var(--radius-control); background: var(--color-bg-deep); color: var(--button-primary-text); box-shadow: var(--shadow-float); transition: background-color var(--motion-micro); }
.wa__fab .icon { width: 22px; height: 22px; }
.wa__fab-label { display: none; font-size: var(--type-small); font-weight: var(--font-medium); }
.wa__fab:hover { background: var(--color-bg-deep-2); }
.wa__fab[aria-expanded="true"] { background: var(--color-text-2); }
.wa__panel { position: absolute; inset-inline-end: 0; bottom: calc(100% + var(--space-3)); width: min(23rem, calc(100vw - 2rem)); max-height: calc(100dvh - 7rem); overflow-y: auto; border-radius: var(--radius-media); background: var(--color-bg-page); box-shadow: 0 0 0 1px var(--color-line), var(--shadow-float); animation: pop var(--motion-state) var(--motion-ease-out); }
.wa__panel[hidden] { display: none; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }
.wa__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-block-end: 1px solid var(--color-line); }
.wa__head > div { flex: 1; }
.wa__avatar { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-control); background: var(--color-bg-deep); color: var(--button-primary-text); }
.wa__title { font-weight: var(--font-semibold); line-height: 1.5; }
.wa__sub { font-size: var(--type-caption); color: var(--color-text-muted); }
.wa .icon-btn--light:hover { background: var(--color-bg-band); }
.wa__body { display: grid; gap: var(--space-3); padding: var(--space-4); }
.wa__intro { font-size: var(--type-small); color: var(--color-text-2); }
.wa__choices { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.wa-choice { position: relative; }
.wa-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wa-choice__face { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 var(--space-3); border: 1px solid var(--field-border); border-radius: var(--radius-control); font-size: var(--type-caption); transition: background-color var(--motion-micro), color var(--motion-micro), border-color var(--motion-micro); }
.wa-choice input:hover + .wa-choice__face { border-color: var(--color-text); }
.wa-choice input:checked + .wa-choice__face { background: var(--color-text); border-color: var(--color-text); color: var(--button-primary-text); }
.wa-choice input:focus-visible + .wa-choice__face { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.wa__label { font-size: var(--type-small); font-weight: var(--font-medium); }
.wa__message { width: 100%; padding: var(--space-3); border: 1px solid var(--field-border); border-radius: var(--radius-control); resize: vertical; font-size: var(--type-small); line-height: 1.6; }
.wa__message:focus { outline: none; border-color: var(--field-border-focus); box-shadow: 0 0 0 1px var(--field-border-focus); }
.wa__note { font-size: var(--type-caption); color: var(--color-text-muted); }
.wa .btn { width: 100%; }
.wa .btn--wa { background: var(--color-bg-deep); }

/* ==========================================================================
   Motion. One language, enhancement only (.js + no reduced-motion). Nothing loops; no counters; no scroll listeners.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	/* The opening: on wide screens a paper veil wipes off the photograph from the plate's side, so the image opens
	   out of the plate (a pseudo-element: no layout shift, LCP image painted beneath). Then the words. */
	@media (min-width: 64rem) {
		.js .hero__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--color-bg-page); clip-path: inset(0); }
		.js.is-loaded .hero__media::before { clip-path: inset(0 100% 0 0); transition: clip-path var(--motion-intro) var(--motion-ease-in-out) 80ms; }
		[dir="ltr"].js.is-loaded .hero__media::before { clip-path: inset(0 0 0 100%); }
	}
	.js [data-intro] { opacity: 0; transform: translateY(var(--motion-rise)); }
	.js.is-loaded [data-intro] { opacity: 1; transform: none; transition: opacity var(--motion-reveal) var(--motion-ease-out), transform var(--motion-reveal) var(--motion-ease-out); transition-delay: calc(240ms + var(--i, 0) * var(--motion-stagger)); }
	@supports (animation-timeline: view()) {
		.hero__img { animation: drift linear both; animation-timeline: view(); animation-range: exit; }
		.closing__img { animation: drift-in linear both; animation-timeline: view(); animation-range: cover; }
	}

	/* Section entrances: content rises; image blocks open under a mask. */
	.js [data-reveal] { opacity: 0; transform: translateY(var(--motion-rise)); }
	.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity var(--motion-reveal) var(--motion-ease-out), transform var(--motion-reveal) var(--motion-ease-out); }
	/* The wrapper is observed (a fully clipped element never intersects); its children open under the mask. */
	.js [data-mask] > * { clip-path: inset(100% 0 0 0); }
	.js [data-mask].is-in > * { clip-path: inset(0); transition: clip-path var(--motion-image) var(--motion-ease-in-out); }
	.js [data-mask].is-in > :nth-child(2) { transition-delay: 90ms; }
	.js [data-mask].is-in > :nth-child(3) { transition-delay: 180ms; }
	.js [data-mask].is-in > :nth-child(4) { transition-delay: 270ms; }
	.js .board.is-in .logos li { animation: settle var(--motion-reveal) var(--motion-ease-out) both; animation-delay: calc(160ms + var(--i, 0) * 30ms); }

	/* Compound swap: the photograph wipes in from the reading start; the panel content follows in sequence. */
	.js .stage.is-entering .stage__media { animation: wipe var(--motion-image) var(--motion-ease-in-out) both; }
	.js .stage.is-entering .stage__img { animation: settle-img 1600ms var(--motion-ease-out) both; }
	.js .stage.is-entering .stage__panel > * { animation: settle var(--motion-reveal) var(--motion-ease-out) both; animation-delay: calc(120ms + var(--k, 0) * var(--motion-stagger)); }
}
@keyframes wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
[dir="ltr"] .stage.is-entering .stage__media { animation-name: wipe-ltr; }
@keyframes wipe-ltr { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes settle-img { from { transform: scale(1.06); } to { transform: none; } }
@keyframes settle { from { opacity: 0; transform: translateY(10px); } }
@keyframes drift { to { transform: translateY(8%) scale(1.02); } }
@keyframes drift-in { from { transform: translateY(-6%) scale(1.08); } to { transform: translateY(6%) scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media (min-width: 30rem) {
	.creds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Tablet (>= 48rem)
   ========================================================================== */
@media (min-width: 48rem) {
	.hero__media { aspect-ratio: 4 / 3; }
	.hero__plate { margin-inline-end: 30%; margin-block-start: calc(var(--space-20) * -1); }
	.hero__inner { padding: var(--space-10) var(--rail) var(--space-12) var(--space-10); }
	.hero__actions .btn { flex: 0 0 auto; }
	.creds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tile--lead { grid-column: 1 / -1; min-height: 26rem; }
	.index__list { grid-template-columns: repeat(var(--count), minmax(0, 1fr)); }
	.standard__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10); }
	.amen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.amen li:nth-child(n + 7) { display: flex; }
	.tile { min-height: 13rem; }
	.more__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
	.logos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.board__lead { padding: var(--space-10); }
	.inq__panel { padding: var(--space-8) var(--space-8) var(--space-10); }
	.group__body--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
	.closing { min-height: 34rem; }
	.closing__media { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; }
	.closing__img { object-position: 22% 50%; }
	.closing::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to left, rgb(14 20 27 / 0.9) 0%, rgb(14 20 27 / 0.72) 34%, rgb(14 20 27 / 0.12) 64%, rgb(14 20 27 / 0) 100%); }
	[dir="ltr"] .closing::before { background: linear-gradient(to right, rgb(14 20 27 / 0.9) 0%, rgb(14 20 27 / 0.72) 34%, rgb(14 20 27 / 0.12) 64%, rgb(14 20 27 / 0) 100%); }
	.closing__inner { padding-block: var(--space-16); }
	.closing__title { max-width: 16ch; }
	.wa__fab { width: auto; padding-inline: var(--space-4) var(--space-5); height: 2.75rem; }
	.wa__fab-label { display: inline; }
	.ft__grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; }
}

/* ==========================================================================
   Desktop (>= 64rem)
   ========================================================================== */
@media (min-width: 64rem) {
	.hd__inner { height: var(--header-h); }
	.hd.is-scrolled .hd__inner { height: 4rem; }
	.hd__logo { height: 2.5rem; }
	.hd.is-scrolled .hd__logo { height: 2.125rem; }
	.hd__nav { display: block; margin-inline: auto; }
	.hd__brand { margin-inline-end: 0; }
	.hd__menu { display: none; }
	.hd__phone { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--layout-hit); padding-inline: var(--space-3); font-size: var(--type-small); font-weight: var(--font-medium); color: var(--color-text-2); transition: color var(--motion-micro); }
	.hd__phone:hover { color: var(--color-text); }

	/* Hero: the plate is carved out of the photograph's lower reading-start corner. */
	.hero { margin-block-start: var(--header-h); height: clamp(36rem, calc(100svh - var(--header-h)), 54rem); }
	.hero__media { position: absolute; inset: 0; aspect-ratio: auto; }
	.hero__img { object-position: 50% 82%; scale: 1.22; transform-origin: 50% 92%; } /* art-directed crop: architecture forward, sky reduced */
	.hero__plate { position: absolute; inset-inline-start: 0; bottom: 0; width: clamp(34rem, 46vw, 46rem); margin: 0; }
	.hero__plate::before { content: ""; position: absolute; width: var(--radius-media); height: var(--radius-media); pointer-events: none; }
	.hero__plate::before { bottom: 0; inset-inline-end: calc(var(--radius-media) * -1); background: radial-gradient(circle at 100% 0, transparent var(--radius-media), var(--color-bg-page) calc(var(--radius-media) + 0.5px)); }
	[dir="rtl"] .hero__plate::before { background: radial-gradient(circle at 0 0, transparent var(--radius-media), var(--color-bg-page) calc(var(--radius-media) + 0.5px)); }
	.hero__inner { padding: var(--space-12) var(--rail) var(--space-12) var(--space-12); }
	.hero__caption { top: auto; bottom: var(--space-6); inset-inline-end: var(--rail); }
	.js .hero__media { clip-path: inset(0); }

	.profile__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(3rem, 7vw, 7.5rem); align-items: start; }

	.mosaic { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: repeat(3, minmax(11rem, 1fr)); height: clamp(34rem, 44vw, 40rem); }
	.tile { min-height: 0; }
	.tile--lead { grid-column: 1; grid-row: 1 / -1; min-height: 0; }
	.tile:not(.tile--lead) .tile__body { padding: var(--space-4) var(--space-5); }
	.support { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-8); }

	.index { grid-template-columns: minmax(0, 4fr) minmax(0, 2fr); gap: var(--space-8); }
	.stage { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 4.5vw, 4.5rem); align-items: start; }
	.stage__media { order: 0; position: sticky; top: calc(var(--header-h) + var(--space-8)); }
	.amen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.more__grid { grid-template-columns: 1fr; gap: var(--space-4); }

	.board { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
	.logos li { min-height: 7.5rem; }

	.inq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: start; }
	.inq__side { position: sticky; top: calc(var(--header-h) + var(--space-8)); }
	.group__body { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
	.group__body [data-field="x_studio_location"] { grid-column: 1 / -1; } /* only the 7-city choice spans; contract, workers and services pair up */

	.know__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: start; }
	.closing { min-height: clamp(32rem, 62svh, 40rem); align-items: center; }
	.closing__inner { padding-block: var(--space-16); }
}