/* ==========================================================================
   Saudi Iwaa, Concept 03: "Operations Network". Homepage stylesheet.
   Same brand as Concepts 01/02 (logo, red, neutrals, photography). New experience.
   One token layer, imported once. Mobile-first (base = phone, wider via min-width). RTL via logical
   properties; the network field and the closing figure use physical coordinates on purpose (geography/diagram).
   Shape rule: media and panels 20px (inner media 14px), controls pills, network nodes circles.
   Tone rule: one tonal family (paper neutrals) for the whole page; only the closing footer plate is deep.
   ========================================================================== */

/* ---------- Font: Readex Pro (OFL), variable weight, self-hosted Arabic + Latin ---------- */
@font-face { font-family: "Readex"; font-style: normal; font-weight: 160 700; font-display: swap; src: url(../fonts/readex-arabic.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: "Readex"; font-style: normal; font-weight: 160 700; font-display: swap; src: url(../fonts/readex-latin.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; }

/* ---------- Tokens ---------- */
:root {
	/* Colour: the Saudi Iwaa palette. One accent: brand red. */
	--c-paper: #f2f3f4;
	--c-paper-2: #e8eaec;
	--c-surface: #ffffff;
	--c-ink: #111820;
	--c-ink-2: #2a333d;
	--c-muted: #59636f;
	--c-line: #d8dce0;
	--c-line-strong: #b9c0c7;
	--c-brand: #d1162b;
	--c-brand-hover: #b0101f;
	--c-brand-press: #930c19;
	--c-brand-tint: #fbe9eb;
	--c-deep: #0e141b;
	--c-deep-2: #17212b;
	--c-deep-line: #2a3642;
	--c-on-deep: #e9ecef;
	--c-on-deep-muted: #a3adb8;
	--c-wa: #0f7a6d;
	--c-wa-hover: #0b6459;
	--c-success: #1e7a4a;
	--c-success-tint: #e6f2ec;
	--c-error: #b3261e;
	--c-error-tint: #fbeaea;
	--c-focus: #111820;
	--c-focus-on-deep: #ffffff;
	--c-placeholder: #6b7480;
	--c-scrim: rgb(14 20 27 / 0.55);
	--c-hover-wash: #e8eaec;
	--c-hover-wash-dark: #17212b;
	--c-on-deep-line: rgb(233 236 239 / 0.35);
	--c-focus-halo: rgb(17 24 32 / 0.12);
	--c-glass: rgb(255 255 255 / 0.92);

	/* Type: one variable family. Hierarchy by weight contrast (light display, medium labels), not size. */
	--f-sans: "Readex", system-ui, "Segoe UI", Tahoma, sans-serif;
	--fs-2xs: 0.75rem;
	--fs-xs: 0.8125rem;
	--fs-sm: 0.9375rem;
	--fs-base: 1.0625rem;
	--fs-md: 1.1875rem;
	--fs-lg: 1.375rem;
	--fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
	--fs-h2: clamp(1.75rem, 1.25rem + 1.7vw, 2.625rem);
	--fs-h1: clamp(2rem, 1.35rem + 2.1vw, 3rem);
	--fs-figure: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
	--fs-sentence: clamp(1.375rem, 0.95rem + 1.7vw, 2.25rem);
	--lh-body: 1.85;
	--lh-title: 1.3;
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semi: 600;

	/* Space (4px base) */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.25rem;
	--s-6: 1.5rem;
	--s-8: 2rem;
	--s-10: 2.5rem;
	--s-12: 3rem;
	--s-16: 4rem;
	--section-y: clamp(4rem, 2.6rem + 5vw, 8rem);
	--gutter: clamp(1rem, 0.4rem + 3vw, 2.5rem);
	--container: 82.5rem;
	--bar-h: 4.5rem;
	--hit: 2.75rem;

	/* Shape, depth, layers */
	--r-media: 1.25rem;
	--r-inner: 0.875rem;
	--r-pill: 999px;
	--hair: 1px;
	--sh-soft: 0 1px 2px rgb(17 24 32 / 0.05), 0 18px 40px -24px rgb(17 24 32 / 0.35);
	--sh-lift: 0 2px 4px rgb(17 24 32 / 0.05), 0 40px 80px -40px rgb(17 24 32 / 0.45);
	--z-bar: 50;
	--z-wa: 60;
	--z-menu: 70;

	/* Motion */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-io: cubic-bezier(0.65, 0, 0.35, 1);
	--t-fast: 160ms;
	--t-base: 280ms;
	--t-slow: 700ms;
	--fwd: 1;
	--origin-start: left;
}
[dir="rtl"] { --fwd: -1; --origin-start: right; }

/* ---------- 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(--bar-h) + var(--s-4)); }
body { margin: 0; background: var(--c-paper); color: var(--c-ink); font-family: var(--f-sans); font-size: var(--fs-base); font-weight: var(--fw-regular); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; 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, b, strong, th, legend { font-weight: var(--fw-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(--c-focus); outline-offset: 3px; }
.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(--s-4); top: -4rem; z-index: 100; padding: var(--s-3) var(--s-5); background: var(--c-ink); color: var(--c-surface); border-radius: var(--r-pill); }
.skip-link:focus { top: var(--s-4); }
.site-main:focus { outline: none; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.icon { flex: none; }

/* ---------- Type roles ---------- */
.h2 { font-size: var(--fs-h2); font-weight: var(--fw-light); line-height: var(--lh-title); max-width: 20ch; text-wrap: balance; }
.lede { margin-block-start: var(--s-4); max-width: 36rem; color: var(--c-ink-2); text-wrap: pretty; }
.meta { font-size: var(--fs-xs); color: var(--c-muted); }
.fig { font-weight: var(--fw-medium); color: var(--c-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 3rem; padding: 0 var(--s-6); border-radius: var(--r-pill); border: var(--hair) solid transparent; font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.2; white-space: nowrap; transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn--sm { min-height: var(--hit); padding: 0 var(--s-5); }
.btn--primary { background: var(--c-brand); color: var(--c-surface); }
.btn--primary:hover { background: var(--c-brand-hover); }
.btn--primary:active { background: var(--c-brand-press); }
.btn--quiet { color: var(--c-ink); border-color: var(--c-line-strong); }
.btn--quiet:hover { border-color: var(--c-ink); background: var(--c-surface); }
.btn--on-dark { color: var(--c-on-deep); border-color: var(--c-on-deep-line); }
.btn--on-dark:hover { border-color: var(--c-on-deep); background: var(--c-hover-wash-dark); }
.btn--on-dark:focus-visible { outline-color: var(--c-focus-on-deep); }
.btn--wa { background: var(--c-wa); color: var(--c-surface); }
.btn--wa:hover { background: var(--c-wa-hover); }
.btn__arrow { transition: transform var(--t-base) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(calc(var(--fwd) * 3px)); }
.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; }
.btn.is-loading .btn__arrow { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.link-arrow { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--hit); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: 0.5em; transition: text-decoration-color var(--t-fast), color var(--t-fast); }
.link-arrow:hover { color: var(--c-brand-hover); text-decoration-color: var(--c-brand); }
.link-arrow .icon { transition: transform var(--t-base) var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(calc(var(--fwd) * 3px)); }
.link-btn { min-height: var(--hit); font-weight: var(--fw-medium); color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-brand); text-underline-offset: 0.45em; }
.link-btn:hover { color: var(--c-brand-hover); }
.round-btn { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: var(--hair) solid var(--c-line-strong); color: var(--c-ink); transition: background-color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast), transform var(--t-fast); }
.round-btn:hover:not(:disabled) { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-surface); }
.round-btn:active:not(:disabled) { transform: scale(0.96); }
.round-btn:disabled { opacity: 0.35; cursor: default; }
.icon-btn { display: inline-grid; place-items: center; width: var(--hit); height: var(--hit); border-radius: 50%; transition: background-color var(--t-fast); }
.icon-btn:hover { background: var(--c-hover-wash); }
.icon-btn--light:hover { background: var(--c-hover-wash-dark); }
.icon-btn--light:focus-visible { outline-color: var(--c-focus-on-deep); }
.contact-line { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--hit); padding-inline: var(--s-4); border: var(--hair) solid var(--c-line-strong); border-radius: var(--r-pill); font-size: var(--fs-sm); transition: border-color var(--t-fast), background-color var(--t-fast); }
.contact-line:hover { border-color: var(--c-ink); background: var(--c-surface); }

/* ==========================================================================
   Header: open at the top, a floating capsule once the page scrolls.
   ========================================================================== */
.bar { position: fixed; inset-inline: 0; top: 0; z-index: var(--z-bar); padding-inline: var(--s-2); }
.bar__inner { display: flex; align-items: center; gap: var(--s-3); height: var(--bar-h); max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); border-radius: var(--r-pill); transition: max-width var(--t-slow) var(--ease-out), height var(--t-slow) var(--ease-out), background-color var(--t-base), box-shadow var(--t-base), margin var(--t-slow) var(--ease-out); }
.bar.is-scrolled .bar__inner { max-width: 74rem; height: 3.75rem; margin-block-start: var(--s-2); background: var(--c-glass); box-shadow: 0 0 0 var(--hair) var(--c-line), var(--sh-soft); -webkit-backdrop-filter: saturate(1.3) blur(12px); backdrop-filter: saturate(1.3) blur(12px); }
.bar__brand { display: inline-flex; align-items: center; min-height: var(--hit); margin-inline-end: auto; }
.bar__logo { width: auto; height: 2rem; }
.bar__nav { display: none; }
.bar__actions { display: flex; align-items: center; gap: var(--s-2); }
.bar__actions > .btn { padding-inline: var(--s-4); } /* on phones the network leads the hero, so this is the CTA in the first viewport */
.bar__phone { display: none; }
.bar__menu { display: inline-grid; place-items: center; width: var(--hit); height: var(--hit); border-radius: 50%; transition: background-color var(--t-fast); }
.bar__menu:hover { background: var(--c-hover-wash); }
.bar__nav .nav__list { display: flex; gap: 2px; }
.bar__nav .nav__list a { display: inline-flex; align-items: center; min-height: var(--hit); padding-inline: var(--s-3); border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--c-ink-2); transition: color var(--t-fast), background-color var(--t-fast); }
.bar__nav .nav__list a:hover { color: var(--c-ink); background: var(--c-hover-wash); }
.bar__nav .nav__list a.is-current { color: var(--c-brand-hover); }
.bar-sentinel { position: absolute; top: 0; height: 8px; width: 1px; }
.mobile-menu { position: fixed; inset: 0; z-index: var(--z-menu); background: var(--c-scrim); }
.mobile-menu[hidden] { display: none; }
.mobile-menu__panel { position: absolute; inset: var(--s-2); inset-inline-start: auto; display: flex; flex-direction: column; width: min(22rem, calc(100vw - 1rem)); padding: var(--s-4) var(--s-6) var(--s-8); background: var(--c-surface); border-radius: var(--r-media); overflow-y: auto; animation: menu-in var(--t-base) var(--ease-out); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--s-6); }
.mobile-menu__logo { height: 2rem; width: auto; }
.mobile-menu__list a { display: flex; align-items: center; min-height: 3.25rem; border-block-end: var(--hair) solid var(--c-line); font-size: var(--fs-md); }
.mobile-menu__foot { display: grid; gap: var(--s-3); margin-block-start: auto; padding-block-start: var(--s-8); }
.mobile-menu__foot .btn { width: 100%; }
.mobile-menu__phone { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--hit); color: var(--c-ink-2); }

/* ==========================================================================
   Hero: the operations network.
   ========================================================================== */
.hero { position: relative; padding-block: calc(var(--bar-h) + var(--s-6)) var(--s-10); overflow: clip; }
.hero__inner { display: grid; gap: var(--s-8); max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.hero__kicker { font-size: var(--fs-sm); color: var(--c-muted); }
.hero__title { margin-block-start: var(--s-3); font-size: var(--fs-h1); font-weight: var(--fw-light); line-height: 1.25; text-wrap: balance; }
.hero__title strong { display: block; font-weight: var(--fw-medium); }
.hero__text { margin-block-start: var(--s-4); max-width: 30rem; color: var(--c-ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); margin-block-start: var(--s-6); }
.hero__scale { margin-block-start: var(--s-8); padding-block-start: var(--s-5); max-width: 30rem; border-block-start: var(--hair) solid var(--c-line); font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.9; }
.hero__scale .fig { font-size: var(--fs-md); }

.net { position: relative; }
.net__field { position: relative; aspect-ratio: 100 / 80; }
.net__routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; translate: calc(var(--mx, 0px) * 0.4) calc(var(--my, 0px) * 0.4); }
.net__route { fill: none; stroke: var(--c-ink-2); stroke-opacity: 0.28; stroke-width: 0.22; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke var(--t-base), stroke-opacity var(--t-base), stroke-width var(--t-base); }
.net__route.is-hot { stroke: var(--c-brand); stroke-opacity: 1; stroke-width: 0.4; }
.node { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) / 80 * 100%); width: calc(var(--d) * 1%); aspect-ratio: 1; transform: translate(-50%, -50%); translate: calc(var(--mx, 0px) * var(--depth, 1)) calc(var(--my, 0px) * var(--depth, 1)); }
.node__link { position: absolute; inset: 0; display: block; border-radius: 50%; }
.node__disc { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--c-paper-2); box-shadow: 0 0 0 4px var(--c-paper), 0 0 0 5px var(--c-line-strong), var(--sh-soft); transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-base); }
.node__disc img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.node--hq .node__disc { box-shadow: 0 0 0 4px var(--c-paper), 0 0 0 6px var(--c-brand), var(--sh-soft); }
.node__link:hover .node__disc, .node__link:focus-visible .node__disc { transform: scale(1.05); box-shadow: 0 0 0 4px var(--c-paper), 0 0 0 6px var(--c-ink), var(--sh-lift); }
.node__link:hover .node__disc img { transform: scale(1.08); }
.node__link:focus-visible { outline-offset: 10px; }
.node__label { position: absolute; top: calc(100% + 0.6rem); left: 50%; transform: translateX(-50%); display: grid; justify-items: center; white-space: nowrap; line-height: 1.35; text-align: center; }
.node--top .node__label { top: auto; bottom: calc(100% + 0.6rem); }
.node__city { font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.node__cap { font-size: var(--fs-2xs); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.net__foot { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4) var(--s-8); margin-block-start: var(--s-10); }
.net__total { display: grid; justify-items: start; line-height: 1; }
.net__num { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.75rem); font-weight: 200; font-variant-numeric: tabular-nums; color: var(--c-ink); }
.net__unit { margin-block-start: var(--s-2); max-width: 14rem; font-size: var(--fs-xs); line-height: 1.4; color: var(--c-muted); }
.net { order: -1; }
.net__note { max-width: 18rem; font-size: var(--fs-xs); color: var(--c-muted); }

/* ==========================================================================
   Portfolio: location index + stage.
   ========================================================================== */
.folio { padding-block: var(--section-y); background: var(--c-surface); }
.folio__grid { display: grid; gap: var(--s-8); margin-block-start: var(--s-10); }
.locs { display: grid; gap: var(--s-2); align-content: start; }
.locs__region { display: flex; align-items: center; gap: var(--s-2); margin-block-start: var(--s-3); font-size: var(--fs-xs); color: var(--c-muted); }
.locs__region:first-child { margin-block-start: 0; }
.locs__region span { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding-inline: var(--s-1); border-radius: var(--r-pill); background: var(--c-paper); font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; color: var(--c-ink-2); }
.locs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.loc { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--s-3); align-items: center; width: 100%; min-height: 3.5rem; padding: var(--s-2) var(--s-3); border-radius: var(--r-inner); text-align: start; transition: background-color var(--t-base), box-shadow var(--t-base); }
.loc__disc { grid-row: 1 / span 2; width: 2.5rem; height: 2.5rem; border-radius: 50%; overflow: hidden; background: var(--c-paper-2); box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 3px var(--c-line); transition: box-shadow var(--t-base); }
.loc__disc img { width: 100%; height: 100%; object-fit: cover; }
.loc__name { font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.4; }
.loc__meta { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); font-size: var(--fs-2xs); color: var(--c-muted); font-variant-numeric: tabular-nums; line-height: 1.4; }
.loc:hover { background: var(--c-paper); }
.loc[aria-pressed="true"] { background: var(--c-paper); box-shadow: inset 0 0 0 var(--hair) var(--c-line); }
.loc[aria-pressed="true"] .loc__disc { box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 4px var(--c-brand); }
.loc[aria-pressed="true"] .loc__name { color: var(--c-brand-hover); }

.stage { position: relative; min-width: 0; }
.sight + .sight { margin-block-start: var(--s-16); }
.js .sight { display: none; }
.js .sight[data-active] { display: block; }
.js .sight + .sight { margin-block-start: 0; }
.sight__media { position: relative; }
.sight__photo { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-media); overflow: hidden; background: var(--c-paper-2); }
.sight__photo img { width: 100%; height: 100%; object-fit: cover; }
.sight__inset { display: none; }
.sight__caption { position: absolute; inset-inline-start: var(--s-3); bottom: var(--s-3); z-index: 1; max-width: calc(100% - 1.5rem); padding: var(--s-3) var(--s-4); border-radius: var(--r-inner); background: var(--c-deep); color: var(--c-surface); }
.sight__region { font-size: var(--fs-xs); color: var(--c-on-deep); }
.sight__title { font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-title); }
.sight__district { font-size: var(--fs-sm); color: var(--c-on-deep); line-height: 1.6; }
.sight__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); margin-block-start: var(--s-6); }
.sight__stat dt { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.4; }
.sight__stat dd { margin-block-start: var(--s-1); font-size: var(--fs-md); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; line-height: 1.35; }
.sight__stat--lead dd { font-size: var(--fs-figure); font-weight: var(--fw-light); line-height: 1.1; }
.sight__stat dd small { font-size: var(--fs-sm); color: var(--c-muted); font-weight: var(--fw-regular); }
.sight__since { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-6); margin-block-start: var(--s-4); font-size: var(--fs-sm); color: var(--c-muted); }
.layers { margin-block-start: var(--s-6); }
.layers__tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: var(--s-1); padding: var(--s-1); border-radius: var(--r-pill); background: var(--c-paper); width: fit-content; max-width: 100%; }
.layers__tab { flex: none; min-height: 2.5rem; padding: 0 var(--s-4); border-radius: var(--r-pill); font-size: var(--fs-xs); color: var(--c-ink-2); transition: background-color var(--t-fast), color var(--t-fast); }
.layers__tab:hover { color: var(--c-ink); background: var(--c-paper-2); }
.layers__tab[aria-pressed="true"] { background: var(--c-ink); color: var(--c-surface); }
.layers__list { display: grid; gap: 0 var(--s-6); margin-block-start: var(--s-4); }
.layers__list li { padding-block: var(--s-2); border-block-end: var(--hair) solid var(--c-line); font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.65; }
.js .layers__list[data-off] { display: none; }
.sight__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); margin-block-start: var(--s-6); }

/* ==========================================================================
   Operations route.
   ========================================================================== */
.route { padding-block: var(--section-y); background: var(--c-paper-2); }
.route__eyebrow { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-brand-hover); margin-block-end: var(--s-2); }
.line { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin-block-start: var(--s-10); }
.line__track { position: absolute; top: 1.5rem; inset-inline: calc(50% / var(--n)); height: 2px; margin-top: -1px; background: var(--c-line-strong); }
.line__fill { position: absolute; inset: 0; background: var(--c-brand); transform-origin: var(--origin-start); transform: scaleX(var(--p, 0)); transition: transform 700ms var(--ease-io); }
.station { position: relative; display: grid; justify-items: center; gap: var(--s-2); padding-block-end: var(--s-1); text-align: center; color: var(--c-ink-2); }
.station__dot { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--c-surface); box-shadow: 0 0 0 var(--hair) var(--c-line-strong); transition: background-color var(--t-base), color var(--t-base), box-shadow var(--t-base), transform var(--t-base) var(--ease-out); }
.station__name { font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1.35; max-width: 9rem; }
.station:focus-visible { outline: none; }
.station:focus-visible .station__dot { outline: 2px solid var(--c-focus); outline-offset: 4px; }
.station:hover .station__dot { box-shadow: 0 0 0 var(--hair) var(--c-ink); }
.station.is-passed .station__dot { background: var(--c-ink); color: var(--c-surface); box-shadow: none; }
.station[aria-selected="true"] { color: var(--c-ink); }
.station[aria-selected="true"] .station__dot { background: var(--c-brand); color: var(--c-surface); box-shadow: 0 0 0 6px var(--c-brand-tint); transform: scale(1.08); }
.route__stage { position: relative; margin-block-start: var(--s-8); }
.stop { display: grid; gap: var(--s-6); }
.stop + .stop { margin-block-start: var(--s-12); }
.js .stop { display: none; }
.js .stop[data-active] { display: grid; }
.js .stop + .stop { margin-block-start: 0; }
.stop:focus-visible { outline-offset: 6px; }
.stop__media { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-media); overflow: hidden; background: var(--c-paper); }
.stop__media img { width: 100%; height: 100%; object-fit: cover; }
.stop__title { font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-title); }
.stop__text { margin-block-start: var(--s-3); color: var(--c-ink-2); max-width: 34rem; }
.stop__label { margin-block-start: var(--s-6); font-size: var(--fs-xs); color: var(--c-muted); }
.stop__ops { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-2); }
.stop__ops li { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.25rem; padding: 0 var(--s-4) 0 var(--s-3); border-radius: var(--r-pill); background: var(--c-surface); font-size: var(--fs-xs); color: var(--c-ink-2); }
.stop__ops .icon { color: var(--c-brand); }
.route__model { margin-block-start: var(--s-10); padding-block-start: var(--s-5); border-block-start: var(--hair) solid var(--c-line-strong); font-size: var(--fs-sm); color: var(--c-ink-2); max-width: 65ch; }
.route__model strong { color: var(--c-ink); }

/* ==========================================================================
   Trust: one sentence with the partner logos inline.
   ========================================================================== */
.trust { padding-block: var(--section-y); }
.trust__sentence { font-size: var(--fs-sentence); font-weight: var(--fw-light); line-height: 2.15; color: var(--c-ink-2); max-width: 70rem; }
.trust__sentence .fig { font-weight: var(--fw-medium); }
.mark { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; height: 2.75rem; margin: 0.25rem 0.2rem; padding: 0.4rem 1rem; border-radius: var(--r-pill); background: var(--c-surface); box-shadow: 0 0 0 var(--hair) var(--c-line); }
.mark__img { width: auto; height: 100%; max-height: 1.75rem; max-width: 6.5rem; object-fit: contain; }
.trust__foot { display: grid; gap: var(--s-6); margin-block-start: var(--s-10); padding-block-start: var(--s-6); border-block-start: var(--hair) solid var(--c-line); }
.certs { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-8); }
.certs li { display: grid; line-height: 1.45; }
.certs strong { font-size: var(--fs-sm); }
.certs span { font-size: var(--fs-xs); color: var(--c-muted); }
.trust__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-8); }
.trust__owner { font-size: var(--fs-sm); color: var(--c-ink-2); }
.trust__owner a { font-weight: var(--fw-medium); color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-brand); text-underline-offset: 0.45em; display: inline-flex; align-items: center; min-height: var(--hit); }
.trust__owner a:hover { color: var(--c-brand-hover); }

/* ==========================================================================
   Project brief.
   ========================================================================== */
.brief { padding-block: var(--section-y); background: var(--c-surface); }

.field { display: grid; gap: var(--s-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.field__label { padding: 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.field__req { color: var(--c-brand); margin-inline-start: 2px; }
.field__opt { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--c-muted); margin-inline-start: var(--s-1); }
.field__input { width: 100%; min-height: 3.25rem; padding: 0 var(--s-5); border: var(--hair) solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-surface); font-size: var(--fs-base); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.field__input::placeholder { color: var(--c-placeholder); }
.field__input:hover { border-color: var(--c-muted); }
.field__input:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px var(--c-focus-halo); }
.field__input[aria-invalid="true"] { border-color: var(--c-error); background: var(--c-error-tint); }
.field__input:disabled { background: var(--c-paper); cursor: not-allowed; }
.field__input[dir="ltr"] { text-align: right; }
.field__error { font-size: var(--fs-xs); color: var(--c-error); line-height: 1.5; }
.field__error[hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-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(--s-1); min-height: var(--hit); padding: 0 var(--s-4); border: var(--hair) solid var(--c-line-strong); border-radius: var(--r-pill); font-size: var(--fs-sm); background: var(--c-surface); transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.chip__check { display: none; }
.chip__input:hover + .chip__face { border-color: var(--c-ink); }
.chip__input:checked + .chip__face { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-surface); }
.chip__input:checked + .chip__face .chip__check { display: block; }
.chip__input:focus-visible + .chip__face { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.chip__input:disabled + .chip__face { opacity: 0.5; }
.field--choices[aria-invalid="true"] .chip__face { border-color: var(--c-error); }
.form-alert { display: flex; align-items: center; gap: var(--s-2); margin-block-end: var(--s-5); padding: var(--s-3) var(--s-4); border-radius: var(--r-inner); background: var(--c-error-tint); box-shadow: inset 0 0 0 var(--hair) var(--c-error); color: var(--c-error); font-size: var(--fs-sm); }
.form-alert[hidden] { display: none; }
.quote-success { display: grid; justify-items: start; gap: var(--s-3); padding-block: var(--s-6); }
.quote-success[hidden] { display: none; }
.quote-success:focus { outline: none; }
.quote-success__icon { display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--c-success-tint); color: var(--c-success); }
.quote-success h3 { font-size: var(--fs-h3); font-weight: var(--fw-light); }
.quote-success p { color: var(--c-ink-2); }

.brief__head { margin-block-end: var(--s-8); }
.compose { display: grid; gap: var(--s-8); }
.compose__doc { padding: var(--s-6); border-radius: var(--r-media); background: var(--c-paper); box-shadow: inset 0 0 0 var(--hair) var(--c-line); }
.compose__title { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-muted); }
.compose__sentence { margin-block-start: var(--s-3); font-size: var(--fs-sentence); font-weight: var(--fw-light); line-height: 1.9; color: var(--c-ink-2); }
html:not(.js) .compose__sentence { display: none; }
.slot { display: inline-flex; align-items: center; min-height: var(--hit); padding-inline: var(--s-2); margin-inline: 0.1em; border-radius: var(--r-inner); font-weight: var(--fw-medium); color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-brand); text-decoration-thickness: 2px; text-underline-offset: 0.35em; transition: background-color var(--t-fast), color var(--t-fast); }
.slot.is-filled { padding-inline: 0.15em; }
.slot:hover { background: var(--c-surface); }
.slot[aria-expanded="true"] { background: var(--c-surface); box-shadow: 0 0 0 var(--hair) var(--c-line-strong); }
.slot--blank { min-width: 4.5em; justify-content: center; text-decoration: none; background: var(--c-paper-2); }
.slot--blank::after { content: ""; width: 70%; border-block-end: 2px dotted var(--c-muted); transform: translateY(0.4em); }
.slot.is-new { animation: slot-new 700ms var(--ease-out); }
.slot:disabled { cursor: default; background: none; box-shadow: none; }
@keyframes slot-new { from { color: var(--c-brand); background: var(--c-brand-tint); } }
.compose__drawers { margin-block-start: var(--s-5); }
.drawer + .drawer { margin-block-start: var(--s-6); }
.js .compose.is-composing .drawer { display: none; }
.js .compose.is-composing .drawer.is-open { display: block; padding: var(--s-5); border-radius: var(--r-inner); background: var(--c-surface); box-shadow: var(--sh-soft); }
.js .compose.is-composing .drawer + .drawer { margin-block-start: 0; }
.js .compose.is-sent .compose__drawers { display: none; }
.compose__stamp { display: inline-flex; align-items: center; gap: var(--s-2); margin-block-start: var(--s-4); padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); background: var(--c-success-tint); color: var(--c-success); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.compose__stamp[hidden] { display: none; }
.compose__side { display: grid; gap: var(--s-5); align-content: start; }
.compose__side[hidden] { display: none; }
.compose__contact { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--s-4); }
.compose__legend { padding: 0; margin-block-end: var(--s-2); font-size: var(--fs-h3); font-weight: var(--fw-light); }
.compose__send { width: 100%; }
.compose__note { font-size: var(--fs-xs); color: var(--c-muted); }
.compose__next { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-muted); }
.compose__steps { display: grid; gap: var(--s-2); counter-reset: step; }
.compose__steps li { display: flex; gap: var(--s-3); font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.6; counter-increment: step; }
.compose__steps li::before { content: counter(step); display: inline-grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--c-paper); font-size: var(--fs-2xs); font-weight: var(--fw-medium); }
.compose__alt { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.brief .quote-success { margin-block-start: var(--s-6); }

/* ==========================================================================
   Knowledge hub.
   ========================================================================== */
.hub { padding-block: var(--section-y); }
.hub__grid { display: grid; gap: var(--s-12); margin-block-start: var(--s-8); }
.switch { display: inline-flex; gap: var(--s-1); padding: var(--s-1); border-radius: var(--r-pill); background: var(--c-paper-2); margin-block-end: var(--s-5); }
.switch__btn { min-height: 2.5rem; padding: 0 var(--s-4); border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--c-ink-2); transition: background-color var(--t-fast), color var(--t-fast); }
.switch__btn:hover { color: var(--c-ink); background: var(--c-surface); }
.switch__btn[aria-selected="true"] { background: var(--c-ink); color: var(--c-surface); }
.feed + .feed { margin-block-start: var(--s-10); }
.js .feed { display: none; }
.js .feed[data-active] { display: block; }
.js .feed + .feed { margin-block-start: 0; }
.lead__media { aspect-ratio: 1; border-radius: var(--r-inner); overflow: hidden; background: var(--c-paper-2); }
.lead__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.lead__title { margin-block-start: var(--s-1); font-size: var(--fs-md); font-weight: var(--fw-medium); line-height: 1.5; }
.lead__title a::after { content: ""; position: absolute; inset: 0; }
.lead__title a:focus-visible { outline: none; }
.timeline { position: relative; margin-block-start: var(--s-2); }
.timeline::before { content: ""; position: absolute; inset-block: 1.2rem; inset-inline-start: 0.45rem; width: 1px; background: var(--c-line-strong); }
.tl { position: relative; display: grid; grid-template-columns: 1.4rem 1fr auto; gap: var(--s-4); align-items: center; padding-block: var(--s-3); }
.tl__node { position: relative; z-index: 1; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--c-paper); box-shadow: inset 0 0 0 2px var(--c-ink-2); transition: box-shadow var(--t-base); }
.tl:first-child .tl__node { background: var(--c-brand); box-shadow: inset 0 0 0 2px var(--c-brand); }
.tl__title { font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.55; transition: color var(--t-fast); }
.tl__title a::after { content: ""; position: absolute; inset: 0; }
.tl__title a:focus-visible { outline: none; }
.tl:has(a:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: var(--r-inner); }
.tl__thumb { width: 3.5rem; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--c-paper-2); }
.tl__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.tl:hover .tl__title { color: var(--c-brand-hover); }
.tl:hover .tl__node { box-shadow: inset 0 0 0 2px var(--c-brand); }
.tl:hover .tl__thumb img { transform: scale(1.1); }
.qa__title { font-size: var(--fs-h3); font-weight: var(--fw-light); margin-block-end: var(--s-3); }
.qa__list { border-block-start: var(--hair) solid var(--c-line); }
.qa__item { border-block-end: var(--hair) solid var(--c-line); }
.qa__q button { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); width: 100%; min-height: 3.5rem; padding-block: var(--s-3); text-align: start; font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.6; transition: color var(--t-fast); }
.qa__q button:hover { color: var(--c-brand-hover); }
.qa__icon { position: relative; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; box-shadow: inset 0 0 0 var(--hair) var(--c-line-strong); transition: background-color var(--t-base), box-shadow var(--t-base); }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.7rem; height: 1.5px; margin: -0.75px 0 0 -0.35rem; background: currentColor; transition: transform var(--t-base) var(--ease-out); }
.qa__icon::after { transform: rotate(90deg); }
.qa__q [aria-expanded="true"] .qa__icon { background: var(--c-ink); color: var(--c-surface); box-shadow: none; }
.qa__q [aria-expanded="true"] .qa__icon::after { transform: rotate(0deg); }
.qa__a { display: grid; grid-template-rows: 1fr; }
.js .qa__a { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 450ms var(--ease-out), visibility 0s linear 450ms; }
.js .qa__item.is-open .qa__a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 450ms var(--ease-out), visibility 0s; }
.qa__inner { overflow: hidden; }
.qa__inner p { padding-block-end: var(--s-4); font-size: var(--fs-sm); color: var(--c-ink-2); max-width: 40rem; }
.js .hub.qa-collapsed [data-extra] { display: none; }
.qa__more { margin-block-start: var(--s-3); }
.qa__help { margin-block-start: var(--s-5); font-size: var(--fs-sm); color: var(--c-ink-2); }

/* ==========================================================================
   Footer: deep closing plate (routes converge on the company), then contact.
   ========================================================================== */
.foot__plate { position: relative; padding-block: var(--s-12) var(--s-12); background: var(--c-deep); color: var(--c-on-deep); overflow: hidden; }
.foot__plate :focus-visible { outline-color: var(--c-focus-on-deep); }
.converge { position: relative; width: 100%; max-width: 34rem; aspect-ratio: 100 / 80; margin-inline: auto; }
.converge__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.converge__line { fill: none; stroke: var(--c-on-deep-muted); stroke-opacity: 0.5; stroke-width: 0.35; stroke-dasharray: 1; stroke-dashoffset: 0; }
.converge__node { fill: var(--c-deep-2); stroke: var(--c-on-deep-muted); stroke-opacity: 0.6; stroke-width: 0.3; }
.converge__city { fill: var(--c-on-deep); font-family: var(--f-sans); font-size: 3.4px; }
.foot__hub { position: absolute; width: calc(var(--d) * 1%); aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; background: var(--c-surface); box-shadow: 0 0 0 6px rgb(233 236 239 / 0.08); }
.foot__hub-logo { width: 72%; height: auto; }
.foot__plate > .container { display: grid; gap: var(--s-10); align-items: center; }
.foot__cta { display: grid; justify-items: start; gap: var(--s-6); }
.foot__cta-title { max-width: 26ch; font-size: var(--fs-h2); font-weight: var(--fw-light); line-height: var(--lh-title); text-wrap: balance; }
.foot__cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.foot__grid { display: grid; gap: var(--s-8); padding-block: var(--s-12) var(--s-8); }
.foot__brand p { max-width: 26rem; font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.8; }
.foot__title { font-size: var(--fs-sm); font-weight: var(--fw-medium); margin-block-end: var(--s-3); }
.foot__links a, .foot .nav__list a { display: inline-flex; align-items: center; min-height: 2.25rem; font-size: var(--fs-sm); color: var(--c-ink-2); transition: color var(--t-fast); }
.foot__links a:hover, .foot .nav__list a:hover { color: var(--c-brand-hover); }
.foot .nav__list { display: grid; }
.foot__contact li { display: flex; align-items: flex-start; gap: var(--s-2); padding-block: var(--s-2); font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.6; }
.foot__contact .icon { margin-block-start: 0.2rem; color: var(--c-muted); }
.foot__contact a:hover { color: var(--c-brand-hover); }
.foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-6); padding-block: var(--s-5) var(--s-6); border-block-start: var(--hair) solid var(--c-line); font-size: var(--fs-xs); color: var(--c-muted); }
.foot__bottom a:hover { color: var(--c-ink); }

/* ==========================================================================
   WhatsApp: circle on phones, labelled pill from tablet up; panel with soft corners.
   ========================================================================== */
.wa { position: fixed; inset-inline-end: var(--s-4); bottom: var(--s-4); z-index: var(--z-wa); }
.wa__fab { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); width: 3rem; height: 3rem; border-radius: var(--r-pill); background: var(--c-wa); color: var(--c-surface); box-shadow: var(--sh-lift); transition: background-color var(--t-fast), transform var(--t-base) var(--ease-out); }
.wa__fab .icon { width: 24px; height: 24px; }
.wa__fab-label { display: none; font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.wa__fab:hover { background: var(--c-wa-hover); transform: translateY(-2px); }
.wa__fab[aria-expanded="true"] { background: var(--c-ink); }
.wa__panel { position: absolute; inset-inline-end: 0; bottom: calc(100% + var(--s-3)); width: min(22rem, calc(100vw - 2rem)); max-height: calc(100dvh - 7rem); overflow-y: auto; border-radius: var(--r-media); background: var(--c-surface); box-shadow: 0 0 0 var(--hair) var(--c-line), var(--sh-lift); animation: pop var(--t-base) var(--ease-out); }
.wa__panel[hidden] { display: none; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.wa__head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); background: var(--c-wa); color: var(--c-surface); }
.wa__head > div { flex: 1; }
.wa__head :focus-visible { outline-color: var(--c-focus-on-deep); }
.wa__avatar { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c-surface); color: var(--c-wa); }
.wa__title { font-weight: var(--fw-medium); line-height: 1.4; }
.wa__sub { font-size: var(--fs-xs); color: var(--c-surface); }
.wa__body { display: grid; gap: var(--s-3); padding: var(--s-4); }
.wa__intro { font-size: var(--fs-sm); color: var(--c-ink-2); }
.wa__choices { display: flex; flex-wrap: wrap; gap: var(--s-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(--s-3); border: var(--hair) solid var(--c-line-strong); border-radius: var(--r-pill); font-size: var(--fs-xs); transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.wa-choice input:hover + .wa-choice__face { border-color: var(--c-ink); }
.wa-choice input:checked + .wa-choice__face { background: var(--c-wa); border-color: var(--c-wa); color: var(--c-surface); }
.wa-choice input:focus-visible + .wa-choice__face { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.wa__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.wa__message { width: 100%; padding: var(--s-3) var(--s-4); border: var(--hair) solid var(--c-line-strong); border-radius: var(--r-inner); resize: vertical; font-size: var(--fs-sm); line-height: 1.6; }
.wa__message:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px var(--c-focus-halo); }
.wa__note { font-size: var(--fs-2xs); color: var(--c-muted); }
.wa .btn { width: 100%; }

/* ==========================================================================
   Motion (enhancement only: .js present and motion allowed). Nothing loops.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	/* Hero: routes draw from the head office, nodes open as circles, copy rises. */
	/* Copy rises on wide screens only: on phones it is the LCP element and shows at once. */
	@media (min-width: 64rem) {
		.js [data-rise] { opacity: 0; transform: translateY(14px); }
		.js.is-loaded [data-rise] { opacity: 1; transform: none; transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(300ms + var(--i, 0) * 90ms); }
	}
	.js .net__route { stroke-dashoffset: 1; }
	.js.is-loaded .net__route { stroke-dashoffset: 0; transition: stroke-dashoffset 1400ms var(--ease-io) calc(500ms + var(--i, 0) * 110ms), stroke var(--t-base), stroke-opacity var(--t-base), stroke-width var(--t-base); }
	.js .node__disc { clip-path: circle(0% at 50% 50%); }
	.js.is-loaded .node__disc { clip-path: circle(50% at 50% 50%); transition: clip-path 1000ms var(--ease-out) calc(var(--i, 0) * 120ms), transform var(--t-slow) var(--ease-out), box-shadow var(--t-base); }
	.js .node--hq .node__disc { transition-delay: 0ms; }
	.js .node__label { opacity: 0; }
	.js.is-loaded .node__label { opacity: 1; transition: opacity 600ms ease calc(900ms + var(--i, 0) * 110ms); }
	.net__routes, .node { transition: translate 600ms var(--ease-out); }

	/* Section intros. */
	.js [data-reveal] { opacity: 0; transform: translateY(18px); }
	.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }

	/* Portfolio: stats and layer items arrive after the photo settles (the photo itself grows via FLIP in JS). */
	.js .sight[data-active] .sight__caption, .js .sight[data-active] .sight__stats > div, .js .sight[data-active] .layers, .js .sight[data-active] .sight__actions { animation: lift 650ms var(--ease-out) both; }
	.js .sight[data-active] .sight__caption { animation-delay: 220ms; }
	.js .sight[data-active] .sight__stats > div:nth-child(1) { animation-delay: 260ms; }
	.js .sight[data-active] .sight__stats > div:nth-child(2) { animation-delay: 320ms; }
	.js .sight[data-active] .sight__stats > div:nth-child(3) { animation-delay: 380ms; }
	.js .sight[data-active] .sight__stats > div:nth-child(4) { animation-delay: 440ms; }
	.js .sight[data-active] .layers { animation-delay: 480ms; }
	.js .sight[data-active] .sight__actions { animation-delay: 540ms; }
	.js .layers__list:not([data-off]) li { animation: lift 500ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }
	.js .sight[data-active] .sight__inset { animation: inset-in 900ms var(--ease-out) 350ms both; }

	/* Route: the stage travels in the direction of the route. */
	.js .stop[data-active] .stop__media { animation: travel 750ms var(--ease-io) both; }
	.js .stop[data-active].is-back .stop__media { animation-name: travel-back; }
	.js .stop[data-active] .stop__body > * { animation: lift 600ms var(--ease-out) both; }
	.js .stop[data-active] .stop__body > :nth-child(2) { animation-delay: 80ms; }
	.js .stop[data-active] .stop__ops li { animation: lift 500ms var(--ease-out) both; animation-delay: calc(250ms + var(--i, 0) * 90ms); }

	/* Trust: logos join the sentence one by one. */
	.js .trust__sentence .mark { opacity: 0; transform: translateY(8px); }
	.js .trust__sentence.is-in .mark { opacity: 1; transform: none; transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(400ms + var(--i, 0) * 70ms); }

	/* Brief steps. */
	.js .feed[data-active] .tl { animation: lift 500ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
	.js .compose.is-composing .drawer.is-open { animation: drawer-in 450ms var(--ease-out) both; }
	.compose__stamp:not([hidden]) { animation: stamp 700ms var(--ease-out) both; }

	/* Footer: city routes draw in and close on the company. */
	.js [data-converge] .converge__line { stroke-dashoffset: 1; }
	.js [data-converge].is-in .converge__line { stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms var(--ease-io) calc(var(--i, 0) * 120ms); }
	.js [data-converge] .converge__city, .js [data-converge] .converge__node { opacity: 0; }
	.js [data-converge].is-in .converge__city, .js [data-converge].is-in .converge__node { opacity: 1; transition: opacity 600ms ease calc(var(--i, 0) * 120ms); }
	.js [data-converge] .foot__hub { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
	.js [data-converge].is-in .foot__hub { transform: translate(-50%, -50%); opacity: 1; transition: transform 900ms var(--ease-out) 1300ms, opacity 500ms ease 1300ms; }
}
@keyframes lift { from { opacity: 0; transform: translateY(10px); } }
@keyframes travel { from { opacity: 0.2; clip-path: inset(0 0 0 100% round var(--r-media)); transform: translateX(calc(var(--fwd) * -30px)); } to { opacity: 1; clip-path: inset(0 round var(--r-media)); transform: none; } }
@keyframes travel-back { from { opacity: 0.2; clip-path: inset(0 100% 0 0 round var(--r-media)); transform: translateX(calc(var(--fwd) * 30px)); } to { opacity: 1; clip-path: inset(0 round var(--r-media)); transform: none; } }
@keyframes step-in { from { opacity: 0; transform: translateX(calc(var(--fwd) * -24px)); } }
@keyframes step-back { from { opacity: 0; transform: translateX(calc(var(--fwd) * 24px)); } }
@keyframes inset-in { from { opacity: 0; transform: translateY(24px) rotate(-2deg); } }
@keyframes drawer-in { from { opacity: 0; transform: translateY(-6px) scale(0.99); } }
@keyframes stamp { from { opacity: 0; transform: scale(1.3) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ==========================================================================
   Tablet (>= 48rem)
   ========================================================================== */
@media (min-width: 48rem) {
	.wa__fab { width: auto; height: 3.25rem; padding-inline: var(--s-5) var(--s-6); }
	.wa__fab-label { display: inline; }
	.bar__actions > .btn { padding-inline: var(--s-5); }
	.compose__contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.compose__legend { grid-column: 1 / -1; }
	.compose__doc { padding: var(--s-8); }
	.sight__stats { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
	.layers__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stop { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--s-10); }
	.station__name { font-size: var(--fs-sm); }
	.lead__media { aspect-ratio: 4 / 3; }
	.foot__grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; }
	.foot__plate { padding-block: var(--s-16); }
}

/* ==========================================================================
   Desktop (>= 64rem)
   ========================================================================== */
@media (min-width: 64rem) {
	.bar__nav { display: block; margin-inline: auto; }
	.bar__brand { margin-inline-end: 0; }
	.bar__menu { display: none; }
	.bar__phone { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--hit); padding-inline: var(--s-2); font-size: var(--fs-sm); color: var(--c-ink-2); transition: color var(--t-fast); }
	.bar__phone:hover { color: var(--c-ink); }

	.hero { min-height: min(100dvh, 62rem); display: grid; align-items: center; padding-block: calc(var(--bar-h) + var(--s-8)) var(--s-10); }
	.net { order: 0; }
	.hero__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); width: 100%; }
	.hero__copy { padding-block-end: var(--s-6); }
	.node__city { font-size: var(--fs-sm); }
	.node__cap { font-size: var(--fs-xs); }

	.folio__grid { grid-template-columns: minmax(0, 3.6fr) minmax(0, 8fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
	.locs { position: sticky; top: calc(var(--bar-h) + var(--s-8)); }
	.locs__list { grid-template-columns: 1fr; gap: 2px; }
	.loc { min-height: 4.25rem; }
	.loc__disc { width: 3rem; height: 3rem; }
	.sight__inset { display: block; position: absolute; inset-inline-end: -1.25rem; bottom: -2.5rem; z-index: 2; width: 26%; aspect-ratio: 4 / 3; border-radius: var(--r-inner); overflow: hidden; box-shadow: 0 0 0 5px var(--c-surface), var(--sh-lift); }
	.sight__inset img { width: 100%; height: 100%; object-fit: cover; }
	.sight__caption { inset-inline-start: var(--s-6); bottom: var(--s-6); padding: var(--s-4) var(--s-6); max-width: 62%; }
	.sight__stats { margin-block-start: var(--s-10); }

	.route__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-12); align-items: end; }
	.route__head .route__eyebrow { grid-column: 1; }
	.route__head .h2 { grid-column: 1; }
	.route__head .lede { grid-column: 2; grid-row: 2; margin: 0; }


	.compose { grid-template-columns: minmax(0, 7fr) minmax(0, 4.6fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
	.compose__contact { grid-template-columns: 1fr; }
	.foot__plate > .container { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
	.hub__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
}