/* ==========================================================================
   Saudi Iwaa, Concept 02: homepage stylesheet.
   Same brand as Concept 01 (logo, red, neutrals, photography); a different experience.
   One token layer at the top, imported once. Mobile-first: base = phone, wider screens via min-width.
   RTL via logical properties. The two geographic diagrams (map plan, service orbit) use physical
   left/top on purpose: geography and angles do not mirror.
   Shape rule: surfaces and images are sharp (0); interactive controls are pills; the WhatsApp button is a circle.
   ========================================================================== */

/* ---------- Fonts: IBM Plex Sans Arabic (OFL), self-hosted, Arabic + Latin subsets ---------- */
@font-face { font-family: "Plex 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: "Plex 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: "Plex 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: "Plex 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: "Plex Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/plex-latin-500.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: "Plex Arabic"; font-style: normal; font-weight: 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; }

/* ---------- Tokens ---------- */
:root {
	/* Colour: the Saudi Iwaa palette (unchanged from Concept 01). 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-3: #1e2a36;
	--c-deep-line: #2a3642;
	--c-deep-edge: #4a5866;
	--c-on-deep: #e9ecef;
	--c-on-deep-muted: #a3adb8;
	--c-brand-on-deep: #ff6b73;
	--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: #1e2a36;
	--c-on-deep-line: rgb(233 236 239 / 0.35);
	--c-focus-halo: rgb(17 24 32 / 0.12);

	/* Type: one family, hierarchy by weight and tone. Body 17px; h2 max 40px; h1 max 54px. */
	--f-sans: "Plex Arabic", 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.5vw, 1.5rem);
	--fs-h2: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
	--fs-h1: clamp(2.25rem, 1.45rem + 2.7vw, 3.625rem);
	--fs-figure: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
	--fs-ledger: clamp(1.3125rem, 0.95rem + 1.45vw, 2.125rem);
	--lh-body: 1.8;
	--lh-title: 1.35;
	--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.8rem + 4.5vw, 7.5rem);
	--gutter: clamp(1rem, 0.4rem + 3vw, 2.5rem);
	--container: 82.5rem;
	--bar-h: 4.25rem;
	--hit: 2.75rem;

	/* Shape, depth, layers */
	--r-pill: 999px;
	--hair: 1px;
	--sh-card: 0 1px 2px rgb(17 24 32 / 0.05), 0 32px 64px -32px rgb(17 24 32 / 0.35);
	--sh-float: 0 12px 32px -12px rgb(17 24 32 / 0.4);
	--z-bar: 50;
	--z-progress: 51;
	--z-wa: 60;
	--z-menu: 70;

	/* Motion */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-build: cubic-bezier(0.65, 0, 0.15, 1);
	--t-fast: 160ms;
	--t-base: 280ms;
	--t-slow: 700ms;
	--t-build: 1100ms;
	--fwd: 1; /* inline-forward sign for transforms; -1 in RTL */
	--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; }
.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; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; pointer-events: none; }

/* ---------- Type roles ---------- */
.h2 { font-size: var(--fs-h2); font-weight: var(--fw-medium); line-height: var(--lh-title); max-width: 22ch; text-wrap: balance; }
.h2--on-dark { color: var(--c-on-deep); }

/* ---------- Buttons ---------- */
.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, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn--sm { min-height: var(--hit); padding: 0 var(--s-5); }
.btn--block { width: 100%; }
.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--dark { background: var(--c-ink); color: var(--c-surface); }
.btn--dark:hover { background: var(--c-ink-2); }
.btn--outline { border-color: var(--c-ink); color: var(--c-ink); }
.btn--outline:hover { background: var(--c-ink); color: var(--c-surface); }
.btn--quiet { color: var(--c-ink); border-color: var(--c-line-strong); }
.btn--quiet:hover { border-color: var(--c-ink); }
.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.45em; transition: text-decoration-color var(--t-fast), color var(--t-fast); }
.link-arrow:hover { text-decoration-color: var(--c-brand); color: var(--c-brand-hover); }
.link-arrow .icon { transition: transform var(--t-base) var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(calc(var(--fwd) * 3px)); }
.link-arrow--on-dark { color: var(--c-on-deep); text-decoration-color: var(--c-on-deep-line); }
.link-arrow--on-dark:hover { color: var(--c-surface); text-decoration-color: var(--c-brand-on-deep); }
.link-arrow--on-dark:focus-visible { outline-color: var(--c-focus-on-deep); }

.round-btn { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: var(--hair) solid var(--c-on-deep-line); color: var(--c-on-deep); 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-on-deep); color: var(--c-deep); border-color: var(--c-on-deep); }
.round-btn:active:not(:disabled) { transform: scale(0.96); }
.round-btn:disabled { opacity: 0.3; cursor: default; }
.round-btn:focus-visible { outline-color: var(--c-focus-on-deep); }

.icon-btn { display: inline-grid; place-items: center; width: var(--hit); height: var(--hit); border-radius: 50%; color: inherit; 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); }

/* ==========================================================================
   Header: a floating bar. Transparent over the hero, a frosted plate once the page scrolls.
   ========================================================================== */
.bar { position: fixed; inset-inline: 0; top: 0; z-index: var(--z-bar); transition: background-color var(--t-base), box-shadow var(--t-base); }
.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); }
.bar.is-scrolled { background: rgb(242 243 244 / 0.9); box-shadow: 0 var(--hair) 0 var(--c-line); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.bar__brand { display: inline-flex; align-items: center; min-height: var(--hit); margin-inline-end: auto; }
.bar__logo { width: auto; height: 2.125rem; }
.bar__nav { display: none; }
.bar__actions { display: flex; align-items: center; gap: var(--s-2); }
.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: var(--s-1); }
.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-ink); background: var(--c-surface); box-shadow: inset 0 0 0 var(--hair) var(--c-line); }
.bar-sentinel { position: absolute; top: 0; height: 8px; width: 1px; }

/* Reading progress: a 2px brand line on the document scroll timeline (no JS). */
.scroll-progress { display: none; }
@supports (animation-timeline: scroll()) {
	.scroll-progress { display: block; position: fixed; inset-inline: 0; top: 0; z-index: var(--z-progress); height: 2px; background: var(--c-brand); transform-origin: var(--origin-start); transform: scaleX(0); animation: grow-x linear both; animation-timeline: scroll(root block); }
}
@keyframes grow-x { to { transform: scaleX(1); } }

/* Mobile menu */
.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-block: 0; inset-inline-end: 0; display: flex; flex-direction: column; width: min(22rem, 88vw); padding: var(--s-4) var(--s-6) var(--s-8); background: var(--c-surface); overflow-y: auto; animation: panel-in var(--t-base) var(--ease-out); }
@keyframes panel-in { from { transform: translateX(calc(var(--fwd) * -100%)); } }
.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); font-weight: var(--fw-medium); }
.mobile-menu__foot { display: grid; gap: var(--s-3); margin-block-start: auto; padding-block-start: var(--s-8); }
.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: architectural split. Copy + capacity gauge / gable-roof aperture.
   ========================================================================== */
.hero { position: relative; padding-block: calc(var(--bar-h) + var(--s-5)) var(--s-12); overflow: clip; }
.hero__grid { display: grid; gap: var(--s-8); }
.hero__kicker { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-muted); }
.hero__title { margin-block-start: var(--s-3); font-size: var(--fs-h1); font-weight: var(--fw-medium); line-height: 1.28; }
.hero__line { display: block; }
.hero__text { margin-block-start: var(--s-4); max-width: 34rem; font-size: var(--fs-md); color: var(--c-ink-2); line-height: 1.75; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-6); }

/* Capacity gauge: six segments, widths = real capacity share. */
.gauge { margin-block-start: var(--s-8); padding-block-start: var(--s-5); border-block-start: var(--hair) solid var(--c-line); max-width: 34rem; }
.gauge__head { display: grid; gap: var(--s-1); }
.gauge__label { font-size: var(--fs-sm); color: var(--c-muted); }
.gauge__value { font-size: var(--fs-sm); color: var(--c-ink-2); }
.gauge__num { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); font-weight: var(--fw-semi); line-height: 1.2; color: var(--c-ink); font-variant-numeric: tabular-nums; margin-inline-end: var(--s-1); }
.gauge__bar { display: flex; gap: 3px; margin-block-start: var(--s-2); }
.gauge__seg { position: relative; flex: 0 1 var(--w); min-width: 0; height: 1.75rem; }
.gauge__seg::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 0.5rem; margin-top: -0.25rem; background: var(--c-ink-2); transform-origin: var(--origin-start); transition: background-color var(--t-base), height var(--t-base), margin var(--t-base); }
.gauge__seg:hover::before { background: var(--c-ink); height: 0.75rem; margin-top: -0.375rem; }
.gauge__seg[aria-pressed="true"]::before { background: var(--c-brand); height: 0.75rem; margin-top: -0.375rem; }
.gauge__seg:focus-visible { outline-offset: 1px; }
@media (max-width: 47.99rem) { .gauge__seg { pointer-events: none; } }
.gauge__legend { display: flex; justify-content: space-between; gap: var(--s-4); margin-block-start: var(--s-1); min-height: 1.6em; font-size: var(--fs-xs); color: var(--c-muted); }
.gauge__legend-num { font-variant-numeric: tabular-nums; color: var(--c-ink-2); }

/* Aperture: frame cut to the logo's gable roof; a red roof line floats above it. */
.hero__visual { position: relative; }
.aperture { position: relative; padding-block-start: 4%; }
.aperture__frame { position: relative; aspect-ratio: 1 / 0.92; overflow: hidden; background: var(--c-paper-2); clip-path: polygon(0 22%, 50% 0, 100% 22%, 100% 100%, 0 100%); }
.aperture__roof { position: absolute; inset-inline: 0; top: 0; width: 100%; height: 22%; overflow: visible; }
.aperture__roof polyline { fill: none; stroke: var(--c-brand); stroke-width: 0.55; stroke-linejoin: miter; stroke-dasharray: 100; stroke-dashoffset: 0; }
.aperture__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); }
.aperture__img:first-child, .aperture__img.is-active, .aperture__img.was-active { clip-path: inset(0); }
.aperture__img.is-active { z-index: 2; }
.aperture__img.was-active { z-index: 1; }
.js .aperture__img:first-child:not(.is-active):not(.was-active) { clip-path: inset(100% 0 0 0); }
.aperture__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-block-start: var(--s-2); min-height: var(--hit); }
.aperture__caption { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.5; }
.aperture__toggle { display: inline-grid; place-items: center; width: var(--hit); height: var(--hit); flex: none; border-radius: 50%; border: var(--hair) solid var(--c-line-strong); color: var(--c-ink); transition: border-color var(--t-fast), background-color var(--t-fast); }
.aperture__toggle:hover { border-color: var(--c-ink); background: var(--c-surface); }
.aperture__toggle-play { display: none; }
.aperture__toggle[aria-pressed="true"] .aperture__toggle-play { display: block; }
.aperture__toggle[aria-pressed="true"] .aperture__toggle-pause { display: none; }
html:not(.js) .aperture__toggle { display: none; }

/* ==========================================================================
   Ledger: one sentence of real figures + certifications rail.
   ========================================================================== */
.ledger { padding-block: var(--section-y) var(--s-12); background: var(--c-surface); }
.ledger__sentence { max-width: 30em; font-size: var(--fs-ledger); line-height: 1.8; color: var(--c-ink-2); text-wrap: pretty; }
.fig { font-weight: var(--fw-semi); color: var(--c-ink); font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--c-brand); text-decoration-thickness: 2px; text-underline-offset: 0.4em; }
.creds { display: flex; flex-wrap: wrap; gap: var(--s-4) 0; margin-block-start: var(--s-10); }
.creds__item { display: grid; align-content: start; gap: 2px; padding-inline: 0 var(--s-6); margin-inline-end: var(--s-6); border-inline-end: var(--hair) solid var(--c-line); }
.creds__item:last-child { border-inline-end: 0; margin-inline-end: 0; padding-inline-end: 0; }
.creds__code { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--c-ink); line-height: 1.4; }
.creds__label { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.5; }

/* ==========================================================================
   Atlas: dark band. Line-drawn plan + map-linked compound filmstrip.
   ========================================================================== */
.atlas { padding-block: var(--section-y); background: var(--c-deep); color: var(--c-on-deep); }
.atlas :focus-visible { outline-color: var(--c-focus-on-deep); }
.atlas__head { display: grid; gap: var(--s-10); align-items: center; }
.atlas__text { margin-block-start: var(--s-4); max-width: 32rem; color: var(--c-on-deep-muted); }
.atlas__regions { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-block-start: var(--s-8); }
.atlas__regions dt { font-size: var(--fs-xs); color: var(--c-on-deep-muted); }
.atlas__regions dd { font-size: var(--fs-lg); font-weight: var(--fw-medium); }

.plan { width: 100%; max-width: 32rem; justify-self: center; }
.plan__canvas { position: relative; aspect-ratio: var(--ratio); }
.plan__svg { width: 100%; height: 100%; overflow: visible; }
.plan__land { fill: var(--c-deep-2); stroke: var(--c-deep-edge); stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.plan__route { fill: none; stroke: var(--c-on-deep-muted); stroke-opacity: 0.45; stroke-width: 2.2; stroke-dasharray: 0.015 0.012; }
.plan__route.is-on { stroke: var(--c-brand-on-deep); stroke-opacity: 1; stroke-width: 4.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.plan__route.is-drawing { animation: draw 900ms var(--ease-out) both; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.pin { position: absolute; width: 1.5rem; height: 1.5rem; margin: -0.75rem 0 0 -0.75rem; display: grid; place-items: center; color: var(--c-on-deep-muted); }
.pin__dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px var(--c-deep); transition: transform var(--t-base) var(--ease-out), background-color var(--t-base); }
.pin--hq .pin__dot { border-radius: 0; transform: rotate(45deg); }
.pin__label { position: absolute; top: 50%; transform: translateY(-50%); font-size: var(--fs-xs); white-space: nowrap; line-height: 1.2; transition: color var(--t-base); }
.pin--e .pin__label { left: calc(100% + 0.125rem); }
.pin--w .pin__label { right: calc(100% + 0.125rem); }
.pin:hover { color: var(--c-on-deep); }
.pin.is-current { color: var(--c-brand-on-deep); }
.pin.is-current .pin__label { color: var(--c-surface); font-weight: var(--fw-medium); }
.pin.is-current .pin__dot { transform: scale(1.5); }
.pin--hq.is-current .pin__dot { transform: rotate(45deg) scale(1.5); }
.pin.is-current::after { content: ""; position: absolute; inset: 0.1rem; border-radius: 50%; border: var(--hair) solid currentColor; animation: ping 1.2s var(--ease-out) 1 both; }
@keyframes ping { from { transform: scale(0.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.plan__legend { display: flex; align-items: center; gap: var(--s-2); margin-block-start: var(--s-4); font-size: var(--fs-xs); color: var(--c-on-deep-muted); }
.plan__hq-mark { width: 0.5rem; height: 0.5rem; background: var(--c-on-deep-muted); transform: rotate(45deg); }

/* Filmstrip: native horizontal scroll with snap; the first card lines up with the container edge. */
.atlas__rail { margin-block-start: var(--s-12); overflow: clip; overflow-clip-margin: var(--s-2); }
.atlas__track {
	position: relative;
	--edge: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
	display: grid; grid-auto-flow: column; grid-auto-columns: min(84vw, 22rem); gap: var(--s-4);
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge);
	padding-inline: var(--edge); padding-block-end: var(--s-2);
	scrollbar-width: none; scroll-timeline: --track inline;
}
.atlas__track::-webkit-scrollbar { display: none; }
.cc { position: relative; display: flex; flex-direction: column; scroll-snap-align: start; background: var(--c-deep-2); border: var(--hair) solid var(--c-deep-line); transition: border-color var(--t-slow); }
.cc__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-deep-3); }
.cc__media img { width: 100%; height: 100%; object-fit: cover; transition: filter var(--t-slow); }
.js .cc:not(.is-current) .cc__media img { filter: grayscale(0.7) brightness(0.72); }
.cc.is-current { border-color: var(--c-deep-edge); }
.cc__body { display: flex; flex-direction: column; flex: 1; padding: var(--s-6) var(--s-5); }
.cc__region { font-size: var(--fs-xs); color: var(--c-on-deep-muted); }
.cc__title { margin-block-start: var(--s-1); font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-title); }
.cc__district { margin-block-start: var(--s-1); font-size: var(--fs-sm); color: var(--c-on-deep-muted); line-height: 1.6; }
.cc__stats { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s-3); margin-block-start: var(--s-5); padding-block-start: var(--s-5); border-block-start: var(--hair) solid var(--c-deep-line); }
.cc__stat dt { font-size: var(--fs-2xs); color: var(--c-on-deep-muted); line-height: 1.4; }
.cc__stat dd { margin-block-start: var(--s-1); font-size: var(--fs-sm); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; line-height: 1.4; }
.cc__num { font-size: var(--fs-lg); font-weight: var(--fw-semi); color: var(--c-surface); }
.cc__meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-block-start: var(--s-4); font-size: var(--fs-xs); color: var(--c-on-deep-muted); }
.cc__facilities { margin-block-start: var(--s-3); }
.cc__facilities summary { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--hit); font-size: var(--fs-sm); cursor: pointer; list-style: none; transition: color var(--t-fast); }
.cc__facilities summary::-webkit-details-marker { display: none; }
.cc__facilities summary:hover { color: var(--c-surface); }
.cc__chev { transition: transform var(--t-base) var(--ease-out); }
.cc__facilities[open] .cc__chev { transform: rotate(180deg); }
.cc__facilities ul { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-block: var(--s-2); }
.cc__facilities li { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-3); border: var(--hair) solid var(--c-deep-line); border-radius: var(--r-pill); font-size: var(--fs-xs); color: var(--c-on-deep); }
.cc__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-block-start: auto; padding-block-start: var(--s-5); }

.atlas__foot { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-4) var(--s-6); margin-block-start: var(--s-6); }
.atlas__hint { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--c-on-deep-muted); }
.atlas__progress { position: relative; height: 2px; background: var(--c-deep-line); overflow: hidden; }
.atlas__progress span { position: absolute; inset: 0; background: var(--c-on-deep); transform-origin: var(--origin-start); transform: scaleX(var(--p, 0.17)); transition: transform var(--t-base) var(--ease-out); }
.atlas__nav { display: flex; gap: var(--s-2); }

/* ==========================================================================
   System: services orbit + detail panel + delivery chain.
   ========================================================================== */
.system { padding-block: var(--section-y); }
.system__lede { margin-block-start: var(--s-4); max-width: 38rem; color: var(--c-ink-2); }
.system__grid { display: grid; gap: var(--s-10); margin-block-start: var(--s-10); align-items: center; }

.orbit { position: relative; width: 100%; max-width: 30rem; margin-inline: auto; }
.orbit::before { content: ""; display: block; aspect-ratio: 1; }
.orbit__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit__ring { fill: none; stroke: var(--c-line-strong); stroke-width: 0.6; stroke-dasharray: 1; stroke-dashoffset: 0; }
.orbit__ring--outer { stroke-dasharray: 0.004 0.008; }
.orbit__sector { fill: var(--c-surface); stroke: var(--c-line); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill var(--t-base), stroke var(--t-base); }
.orbit__sector.is-active { fill: var(--c-brand-tint); stroke: var(--c-brand); }
.orbit:has(.orbit__tab[data-tab="0"]:hover) [data-sector="0"]:not(.is-active),
.orbit:has(.orbit__tab[data-tab="1"]:hover) [data-sector="1"]:not(.is-active),
.orbit:has(.orbit__tab[data-tab="2"]:hover) [data-sector="2"]:not(.is-active),
.orbit:has(.orbit__tab[data-tab="3"]:hover) [data-sector="3"]:not(.is-active) { fill: var(--c-paper-2); }
.orbit__node { fill: var(--c-brand); }
.orbit__center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-content: center; justify-items: center; gap: 2px; width: 24%; aspect-ratio: 1; border-radius: 50%; background: var(--c-ink); text-align: center; font-size: var(--fs-2xs); font-weight: var(--fw-medium); line-height: 1.35; color: var(--c-surface); pointer-events: none; }
.orbit__tabs { position: absolute; inset: 0; }
.orbit__tab { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; justify-items: center; gap: var(--s-1); width: 30%; min-height: var(--hit); padding: var(--s-2); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1.35; text-align: center; color: var(--c-ink-2); transition: color var(--t-fast); }
.orbit__tab:hover { color: var(--c-ink); }
.orbit__tab[aria-selected="true"] { color: var(--c-brand-hover); }
.orbit__tab .icon { transition: transform var(--t-base) var(--ease-out); }
.orbit__tab[aria-selected="true"] .icon { transform: scale(1.12); }
/* Operations: chips under the diagram on phones, labels on the outer ring from tablet up. */
.orbit__ops { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-block-start: var(--s-6); }
.orbit__op { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-3); border: var(--hair) solid var(--c-line-strong); border-radius: var(--r-pill); font-size: var(--fs-xs); color: var(--c-ink-2); line-height: 1.5; }
.orbit__op .icon { color: var(--c-brand); }

.system__panels { position: relative; }
.svc__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-paper-2); }
.svc__media img { width: 100%; height: 100%; object-fit: cover; }
.svc__body { padding-block-start: var(--s-6); }
.svc__title { font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-title); }
.svc__text { margin-block-start: var(--s-3); color: var(--c-ink-2); max-width: 36rem; }
.svc:focus-visible { outline-offset: 6px; }
.svc + .svc { margin-block-start: var(--s-12); }
.js .svc { display: none; }
.js .svc[data-active] { display: block; }
.js .svc + .svc { margin-block-start: 0; }

.model { margin-block-start: var(--s-16); padding-block-start: var(--s-8); border-block-start: var(--hair) solid var(--c-line); }
.model__title { font-size: var(--fs-md); font-weight: var(--fw-medium); }
.model__rail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) 0; margin-block-start: var(--s-5); }
.model__rail li { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--c-ink-2); }
.model__rail li:not(:last-child)::after { content: ""; width: var(--s-8); height: var(--hair); margin-inline: var(--s-3); background: var(--c-line-strong); }
.model__rail li:last-child { padding: var(--s-1) var(--s-4) var(--s-1) var(--s-2); border-radius: var(--r-pill); background: var(--c-ink); color: var(--c-surface); font-weight: var(--fw-medium); }
.model__num { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--c-paper-2); color: var(--c-ink); font-size: var(--fs-2xs); font-weight: var(--fw-semi); }
.model__rail li:last-child .model__num { background: var(--c-brand); color: var(--c-surface); }
.model__note { margin-block-start: var(--s-4); font-size: var(--fs-sm); color: var(--c-muted); }

/* ==========================================================================
   Partners: hairline grid of real logos.
   ========================================================================== */
.partners { padding-block: var(--s-12) var(--section-y); background: var(--c-surface); border-block-start: var(--hair) solid var(--c-line); }
.partners > .container { padding-block-start: var(--s-4); }
.partners__grid { display: grid; gap: var(--s-10); }
.partners__count { display: flex; align-items: baseline; gap: var(--s-2); margin-block-start: var(--s-5); font-size: var(--fs-figure); font-weight: var(--fw-medium); line-height: 1.1; font-variant-numeric: tabular-nums; }
.partners__count .fig { text-decoration: none; font-weight: var(--fw-medium); }
.partners__plus { color: var(--c-brand); }
.partners__unit { font-size: var(--fs-lg); color: var(--c-ink-2); }
.partners__text { margin-block-start: var(--s-4); max-width: 30rem; color: var(--c-ink-2); }
.partners__intro .link-arrow { margin-block-start: var(--s-3); }
.owner { align-self: start; padding: var(--s-6); border: var(--hair) solid var(--c-line); background: var(--c-paper); }
.owner__title { font-weight: var(--fw-medium); }
.owner__text { margin-block-start: var(--s-1); font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.7; }
.owner .btn { margin-block-start: var(--s-4); }
.logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--hair); background: var(--c-line); border: var(--hair) solid var(--c-line); align-self: start; }
.logos__cell { display: grid; place-items: center; min-height: 6rem; padding: var(--s-4); background: var(--c-surface); }
.logos__img { width: auto; max-width: 82%; max-height: 3.25rem; object-fit: contain; filter: grayscale(1); opacity: 0.86; transition: filter var(--t-base), opacity var(--t-base), transform var(--t-base) var(--ease-out); }
.logos__cell:hover .logos__img { filter: none; opacity: 1; transform: scale(1.04); }

/* ==========================================================================
   Quote: intro / framed photo / overlapping wizard card.
   ========================================================================== */
.quote { padding-block: var(--section-y); }
.quote__grid { display: grid; gap: var(--s-8); }
.quote__text { margin-block-start: var(--s-4); max-width: 30rem; color: var(--c-ink-2); }
.quote__label { margin-block-start: var(--s-8); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.after { display: grid; gap: var(--s-3); margin-block-start: var(--s-3); }
.after li { display: flex; gap: var(--s-3); font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.6; }
.after__num { display: inline-grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border: var(--hair) solid var(--c-line-strong); border-radius: 50%; font-size: var(--fs-2xs); font-weight: var(--fw-semi); }
.quote__alt { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-8); }
.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); }
.quote__photo { display: none; }
.quote__card { position: relative; padding: var(--s-6) var(--s-5); background: var(--c-surface); border: var(--hair) solid var(--c-line); box-shadow: var(--sh-card); }

.wiz__progress { display: grid; grid-template-columns: repeat(3, 1fr); margin-block-end: var(--s-6); }
.wiz__progress li { position: relative; display: grid; justify-items: center; gap: var(--s-1); font-size: var(--fs-xs); color: var(--c-muted); text-align: center; }
.wiz__progress li + li::before { content: ""; position: absolute; top: 0.875rem; inset-inline-end: 50%; width: 100%; height: var(--hair); background: var(--c-line-strong); }
.wiz__dot { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: var(--hair) solid var(--c-line-strong); background: var(--c-surface); font-weight: var(--fw-semi); font-size: var(--fs-2xs); transition: background-color var(--t-base), color var(--t-base), border-color var(--t-base); }
.wiz__progress li[aria-current="step"] { color: var(--c-ink); font-weight: var(--fw-medium); }
.wiz__progress li[aria-current="step"] .wiz__dot { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-surface); }
.wiz__progress li.is-done .wiz__dot { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-surface); }
.wiz__progress li.is-done + li::before { background: var(--c-ink); }
html:not(.js) .wiz__progress { display: none; }
.wiz__step { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--s-5); }
.wiz__step + .wiz__step { margin-block-start: var(--s-8); }
.wiz__legend { padding: 0; margin-block-end: var(--s-1); font-size: var(--fs-md); font-weight: var(--fw-medium); }
.js .wiz__step { display: none; }
.js .wiz__step.is-current { display: grid; }
.js .wiz__step + .wiz__step { margin-block-start: 0; }
.wiz__nav { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-8); }
.wiz__nav [data-submit], .wiz__nav [data-wiz-next] { margin-inline-start: auto; }
.wiz__nav [hidden] { display: none; }
html:not(.js) [data-wiz-next], html:not(.js) [data-wiz-back] { display: none; }
.wiz__note { margin-block-start: var(--s-4); font-size: var(--fs-xs); color: var(--c-muted); }

/* Fields */
.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); color: var(--c-ink); }
.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: 3rem; 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: var(--hair) solid var(--c-error); background: var(--c-error-tint); 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-medium); }
.quote-success p { color: var(--c-ink-2); }

/* ==========================================================================
   Knowledge: segmented tabs; article index with preview; FAQ accordion.
   ========================================================================== */
.knowledge { padding-block: var(--section-y); background: var(--c-surface); }
.knowledge__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-6); }
.segmented { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); padding: var(--s-1); border: var(--hair) solid var(--c-line); border-radius: var(--r-pill); background: var(--c-paper); }
.segmented__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); }
.segmented__btn:hover { color: var(--c-ink); background: var(--c-hover-wash); }
.segmented__btn[aria-selected="true"] { background: var(--c-ink); color: var(--c-surface); }
.knowledge__panel { margin-block-start: var(--s-8); }
.knowledge__panel + .knowledge__panel { margin-block-start: var(--s-16); }
.js .knowledge__panel { display: none; }
.js .knowledge__panel[data-active] { display: block; }
.js .knowledge__panel + .knowledge__panel { margin-block-start: var(--s-8); }
.knowledge__more { margin-block-start: var(--s-4); }

.index { display: grid; gap: var(--s-8); }
.index__preview { display: none; }
.index__list { border-block-start: var(--hair) solid var(--c-line); }
.index__row { position: relative; display: grid; grid-template-columns: 4.5rem 1fr auto; align-items: center; gap: var(--s-4); padding-block: var(--s-4); border-block-end: var(--hair) solid var(--c-line); }
.index__thumb { aspect-ratio: 3 / 2; overflow: hidden; background: var(--c-paper-2); }
.index__thumb img { width: 100%; height: 100%; object-fit: cover; }
.index__date { display: block; font-size: var(--fs-xs); color: var(--c-muted); }
.index__title { font-size: var(--fs-base); font-weight: var(--fw-medium); line-height: 1.55; transition: color var(--t-fast); }
.index__title a::after { content: ""; position: absolute; inset: 0; }
.index__title a:focus-visible { outline: none; }
.index__row:has(a:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.index__arrow { color: var(--c-muted); transition: transform var(--t-base) var(--ease-out), color var(--t-base); }
.index__row:hover .index__title, .index__row.is-hot .index__title { color: var(--c-brand-hover); }
.index__row:hover .index__arrow, .index__row.is-hot .index__arrow { color: var(--c-brand); transform: translate(calc(var(--fwd) * 3px), -3px); }

.faq { display: grid; gap: var(--s-8); }
.faq__list { border-block-start: var(--hair) solid var(--c-line); }
.faq__item { border-block-end: var(--hair) solid var(--c-line); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 3.5rem; padding-block: var(--s-3); font-weight: var(--fw-medium); line-height: 1.6; cursor: pointer; list-style: none; transition: color var(--t-fast); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--c-brand-hover); }
.faq__icon { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border: var(--hair) solid var(--c-line-strong); border-radius: 50%; transition: transform var(--t-base) var(--ease-out), background-color var(--t-base), color var(--t-base), border-color var(--t-base); }
.faq__item[open] .faq__icon { transform: rotate(45deg); background: var(--c-ink); color: var(--c-surface); border-color: var(--c-ink); }
.faq__a { padding-block-end: var(--s-5); max-width: 46rem; color: var(--c-ink-2); }
.faq__a p + p { margin-block-start: var(--s-3); }
.faq__help { align-self: start; padding: var(--s-6); background: var(--c-paper); border: var(--hair) solid var(--c-line); }
.faq__help p { color: var(--c-ink-2); }
.faq__help-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-5); }

/* ==========================================================================
   Footer: deep CTA plate with the roof line, then a light footer (the logo in its true colours).
   ========================================================================== */
.foot { padding-block: var(--s-12) var(--s-6); }
.foot__cta { --peak: clamp(1.5rem, 0.8rem + 2.4vw, 3.25rem); display: grid; gap: var(--s-6); padding-block: var(--s-4) var(--s-10); }
.foot__chevron { display: block; height: var(--peak); margin-block-end: var(--s-4); background: linear-gradient(to top left, transparent calc(50% - 1.6px), var(--c-brand) calc(50% - 1px), var(--c-brand) calc(50% + 1px), transparent calc(50% + 1.6px)) left / 50% 100% no-repeat, linear-gradient(to top right, transparent calc(50% - 1.6px), var(--c-brand) calc(50% - 1px), var(--c-brand) calc(50% + 1px), transparent calc(50% + 1.6px)) right / 50% 100% no-repeat; }
.foot__cta-title { max-width: 26ch; color: var(--c-ink); font-size: var(--fs-h2); font-weight: var(--fw-medium); 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-10) var(--s-8); border-block-start: var(--hair) solid var(--c-line); }
.foot__logo { width: 11rem; height: auto; }
.foot__brand p { margin-block-start: var(--s-4); 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 { 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 { color: var(--c-brand-hover); }
.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-start: var(--s-5); 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); }
.foot .nav__list { display: grid; }
.foot .nav__list a { display: inline-flex; align-items: center; min-height: 2.25rem; font-size: var(--fs-sm); color: var(--c-ink-2); }

/* ==========================================================================
   WhatsApp pre-chat (circle button + sharp panel).
   ========================================================================== */
.wa { position: fixed; inset-inline-end: var(--s-4); bottom: var(--s-4); z-index: var(--z-wa); }
.wa__fab { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--c-wa); color: var(--c-surface); box-shadow: var(--sh-float); transition: background-color var(--t-fast), transform var(--t-base) var(--ease-out); }
.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; background: var(--c-surface); border: var(--hair) solid var(--c-line); box-shadow: var(--sh-card); 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-deep); color: var(--c-on-deep); }
.wa__head > div { flex: 1; }
.wa__avatar { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c-wa); color: var(--c-surface); }
.wa__title { font-weight: var(--fw-medium); line-height: 1.4; }
.wa__sub { font-size: var(--fs-xs); color: var(--c-on-deep-muted); }
.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: 1.25rem; 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); }

/* ==========================================================================
   Entrance choreography (enhancement only: .js present and motion allowed).
   Each section has its own move; nothing loops.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	/* Hero: copy rises line by line, the frame builds up from the ground, then the roof line draws. */
	.js [data-rise] { opacity: 0; transform: translateY(14px); }
	.js.is-loaded [data-rise] { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
	.js .aperture__frame { clip-path: polygon(0 100%, 50% 100%, 100% 100%, 100% 100%, 0 100%); }
	.js.is-loaded .aperture__frame { clip-path: polygon(0 22%, 50% 0, 100% 22%, 100% 100%, 0 100%); transition: clip-path var(--t-build) var(--ease-build) 150ms; }
	.js .aperture__img:first-child { transform: scale(1.08); }
	.js.is-loaded .aperture__img:first-child { transform: none; transition: transform 1800ms var(--ease-out) 150ms; }
	.js .aperture__roof polyline { stroke-dashoffset: 100; }
	.js.is-loaded .aperture__roof polyline { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--ease-out) 1000ms; }
	.js .gauge__seg::before { transform: scaleX(0); }
	.js.is-loaded .gauge__seg::before { transform: scaleX(1); transition: transform 700ms var(--ease-out) calc(700ms + var(--d, 0) * 90ms), background-color var(--t-base), height var(--t-base), margin var(--t-base); }
	/* Slide change: the incoming photo rises over the outgoing one. */
	.js .aperture__img.is-active { transition: clip-path 1000ms var(--ease-build); }

	/* Generic reveal for 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); }

	/* Ledger rail: items arrive in sequence. */
	.js .creds .creds__item { opacity: 0; }
	.js .creds.is-in .creds__item { opacity: 1; transition: opacity 600ms var(--ease-out) calc(200ms + var(--i) * 110ms); }

	/* Atlas: the coastline draws, then pins appear; cards slide in from the reading direction. */
	.js .plan .plan__land { stroke-dashoffset: 1; fill-opacity: 0; }
	.js .plan.is-in .plan__land { stroke-dashoffset: 0; fill-opacity: 1; transition: stroke-dashoffset 2200ms var(--ease-out), fill-opacity 900ms ease 1300ms; }
	.js .plan .pin { opacity: 0; }
	.js .plan.is-in .pin { opacity: 1; transition: opacity 500ms ease 1400ms, color var(--t-base); }
	.js .atlas__track .cc { opacity: 0; transform: translateX(calc(var(--fwd) * -40px)); }
	.js .atlas__track.is-in .cc { opacity: 1; transform: none; transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out), border-color var(--t-slow); }
	.js .atlas__track.is-in .cc:nth-child(2) { transition-delay: 90ms; }
	.js .atlas__track.is-in .cc:nth-child(3) { transition-delay: 180ms; }
	.js .atlas__track.is-in .cc:nth-child(n+4) { transition-delay: 270ms; }

	/* System: rings draw, then quadrants and ring nodes settle; panel changes wipe in. */
	.js .orbit .orbit__ring { stroke-dashoffset: 1; }
	.js .orbit.is-in .orbit__ring { stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms var(--ease-out); }
	.js .orbit .orbit__sector, .js .orbit .orbit__tab { opacity: 0; }
	.js .orbit.is-in .orbit__sector, .js .orbit.is-in .orbit__tab { opacity: 1; transition: opacity 600ms var(--ease-out) calc(500ms + var(--i, 0) * 120ms), fill var(--t-base), stroke var(--t-base), color var(--t-fast); }
	.js .orbit.is-in .orbit__tab:nth-child(2) { --i: 1; }
	.js .orbit.is-in .orbit__tab:nth-child(3) { --i: 2; }
	.js .orbit.is-in .orbit__tab:nth-child(4) { --i: 3; }
	.js .orbit .orbit__node, .js .orbit .orbit__op { opacity: 0; }
	.js .orbit.is-in .orbit__node, .js .orbit.is-in .orbit__op { opacity: 1; transition: opacity 500ms ease calc(1100ms + var(--i, 0) * 100ms); }
	.js .svc[data-active] .svc__media img { animation: wipe 900ms var(--ease-build) both; }
	.js .svc[data-active] .svc__body { animation: lift var(--t-slow) var(--ease-out) 120ms both; }

	/* Partners: diagonal stagger across the grid. */
	.js .logos .logos__cell { opacity: 0; }
	.js .logos.is-in .logos__cell { opacity: 1; transition: opacity 700ms var(--ease-out) calc(var(--d) * 70ms); }

	/* Quote: the card rises over the photograph; steps slide along the reading direction. */
	.js .quote__card[data-reveal] { transform: translateY(40px); }
	.js .quote__card[data-reveal].is-in { transform: none; transition: opacity 900ms var(--ease-out), transform 1000ms var(--ease-out); }
	.js .wiz__step.is-current { animation: step-in 420ms var(--ease-out) both; }
	.js .wiz__step.is-current.is-back { animation-name: step-back; }

	/* Footer: the roof chevron assembles from the ridge outward. */
	.js .foot__cta .foot__chevron { clip-path: inset(0 50% 0 50%); }
	.js .foot__cta.is-in .foot__chevron { clip-path: inset(0); transition: clip-path 1100ms var(--ease-build) 200ms; }

	/* Knowledge: panel switch and FAQ answers ease in. */
	.js .knowledge__panel[data-active] { animation: lift var(--t-slow) var(--ease-out) both; }
	.faq__item[open] .faq__a { animation: lift var(--t-base) var(--ease-out) both; }

	/* Footer roof line draws when the plate enters. */
}
@keyframes wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes lift { from { opacity: 0; transform: translateY(10px); } }
@keyframes step-in { from { opacity: 0; transform: translateX(calc(var(--fwd) * -24px)); } }
@keyframes step-back { from { opacity: 0; transform: translateX(calc(var(--fwd) * 24px)); } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.scroll-progress { display: none; }
}

/* ==========================================================================
   Tablet (>= 48rem)
   ========================================================================== */
@media (min-width: 48rem) {
	.wa__fab { width: 3.5rem; height: 3.5rem; }
	.aperture__frame { aspect-ratio: 4 / 3; }
	.atlas__track { grid-auto-columns: 26rem; gap: var(--s-6); }
	.atlas__foot { grid-template-columns: auto 1fr auto; }
	.atlas__hint { grid-column: auto; max-width: 22rem; }
	.logos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.quote__card { padding: var(--s-10) var(--s-8); }
	.index__row { grid-template-columns: 6rem 1fr auto; gap: var(--s-5); }
	.index__title { font-size: var(--fs-md); }
	.foot__cta { grid-template-columns: 1fr auto; align-items: end; }
	.foot__chevron { grid-column: 1 / -1; }
	.foot__grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; }
	/* The orbit gets room for the outer-ring labels. */
	.orbit { max-width: 24rem; margin-block: var(--s-8); }
	.orbit__ops { position: absolute; inset: 0; display: block; margin: 0; pointer-events: none; }
	.orbit__op { position: absolute; left: var(--x); top: var(--y); padding: 0; border: 0; border-radius: 0; width: max-content; max-width: 9rem; background: none; }
	.orbit__op--e { transform: translate(0.875rem, -50%); }
	.orbit__op--w { transform: translate(calc(-100% - 0.875rem), -50%); }
	.orbit__op--c { transform: translate(-50%, calc(-100% - 0.75rem)); }
	.orbit__tab { font-size: var(--fs-sm); }
	.orbit__center { font-size: var(--fs-xs); }
}

/* ==========================================================================
   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, 60rem); display: grid; align-items: center; padding-block: calc(var(--bar-h) + var(--s-6)) var(--s-10); }
	.hero__grid { grid-template-columns: minmax(0, 4.6fr) minmax(0, 7fr); align-items: center; gap: clamp(2.5rem, 5vw, 6rem); }
	.aperture__frame { aspect-ratio: auto; height: min(76dvh, 44rem); }

	.atlas__head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
	.plan { justify-self: end; }
	.atlas__track { grid-auto-columns: 30rem; }

	.system__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); }
	.orbit { max-width: 25rem; }

	.partners__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-8) clamp(3rem, 6vw, 6rem); align-items: start; }
	.partners__intro { grid-column: 1; grid-row: 1; }
	.logos { grid-column: 2; grid-row: 1 / span 2; }
	.owner { grid-column: 1; grid-row: 2; }
	.logos__cell { min-height: 7.5rem; }

	.quote__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--s-6); align-items: center; }
	.quote__intro { grid-column: 1 / 5; grid-row: 1; padding-inline-end: var(--s-4); }
	.quote__photo { display: block; grid-column: 8 / 13; grid-row: 1; align-self: stretch; overflow: hidden; min-height: 40rem; background: var(--c-paper-2); }
	.quote__photo img { width: 100%; height: 100%; object-fit: cover; }
	.quote__card { grid-column: 5 / 11; grid-row: 1; z-index: 1; margin-block: var(--s-12); }

	.index { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
	.index__list { grid-column: 1; grid-row: 1; }
	.index__preview { display: block; position: sticky; top: calc(var(--bar-h) + var(--s-6)); grid-column: 2; grid-row: 1; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-paper-2); }
	.index__preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 500ms var(--ease-out), transform 900ms var(--ease-out); }
	.index__preview img.is-active { opacity: 1; transform: none; }
	.index__row { grid-template-columns: 1fr auto; }
	.index__thumb { display: none; }
	.faq { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 5rem); }
	.faq__help { position: sticky; top: calc(var(--bar-h) + var(--s-6)); }
}

@media (min-width: 80rem) {
	.orbit { max-width: 27rem; }
	.atlas__track { grid-auto-columns: 32rem; }
}