/* ==========================================================================
   Saudi Iwaa: homepage stylesheet (v2 direction)
   One token layer, imported once. Mobile-first: base = phone layout,
   wider screens layered with min-width. RTL via logical properties.
   Shape rule: images/panels 4px, controls 6px, the WhatsApp button is a circle.
   ========================================================================== */

/* ---------- Fonts (self-hosted, subset) ---------- */
@font-face { font-family: "Noto Kufi Arabic"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(../fonts/notokufi-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: "Noto Kufi Arabic"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(../fonts/notokufi-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; }
@font-face { font-family: "Almarai"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/almarai-400-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: "Almarai"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/almarai-400-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; }
@font-face { font-family: "Almarai"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/almarai-700-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: "Almarai"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/almarai-700-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 (semantic roles). One accent: brand red. Deep ink carries the cinematic blocks. */
	--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-deep: #0e141b;
	--c-deep-2: #17212b;
	--c-deep-3: #1e2a36;
	--c-deep-line: #2a3642;
	--c-on-deep: #e9ecef;
	--c-on-deep-muted: #a3adb8;
	--c-brand-on-deep: #ff6b73;
	--c-wa: #0f7a6d;
	--c-wa-hover: #0b6459;
	--c-wa-tint: #e6f2f0;
	--c-success: #1e7a4a;
	--c-success-tint: #e6f2ec;
	--c-error: #b3261e;
	--c-error-tint: #fbeaea;
	--c-focus: #111820;

	/* Type: controlled corporate scale (body 17px, section titles max ~38px, hero max 56px). */
	--f-display: "Noto Kufi Arabic", "Almarai", system-ui, "Segoe UI", Tahoma, sans-serif;
	--f-body: "Almarai", system-ui, "Segoe UI", Tahoma, sans-serif;
	--fs-xs: 0.8125rem;
	--fs-sm: 0.9375rem;
	--fs-base: 1.0625rem;
	--fs-md: 1.125rem;
	--fs-lg: 1.25rem;
	--fs-xl: clamp(1.375rem, 1.15rem + 0.7vw, 1.625rem);
	--fs-section: clamp(1.625rem, 1.2rem + 1.4vw, 2.375rem);
	--fs-hero: clamp(2rem, 1.35rem + 2.4vw, 3.5rem);
	--lh-body: 1.85;
	--lh-tight: 1.35;

	/* 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(3.5rem, 2.4rem + 4vw, 6rem);
	--gutter: clamp(1rem, 0.4rem + 3vw, 2.5rem);
	--container: 82.5rem;
	--header-h: 4.25rem;

	/* Shape, depth */
	--r-sm: 4px;
	--r-md: 6px;
	--sh-1: 0 1px 2px rgb(17 24 32 / 0.06), 0 8px 24px -12px rgb(17 24 32 / 0.18);
	--sh-2: 0 2px 4px rgb(17 24 32 / 0.05), 0 28px 56px -28px rgb(17 24 32 / 0.38);

	/* Motion */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--d-fast: 160ms;
	--d-base: 240ms;
	--d-slow: 600ms;
	--d-reveal: 900ms;
	--stagger: 80ms;
	--shape-house: polygon(50% 30%, 64% 58%, 64% 100%, 36% 100%, 36% 58%);
	--shape-rect: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%);

	--z-header: 50;
	--z-wa: 60;
	--z-menu: 70;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--s-4)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--c-paper); color: var(--c-ink); font-family: var(--f-body); font-size: var(--fs-base); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.num, [data-count], time { font-variant-numeric: tabular-nums lining-nums; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; border-radius: var(--r-sm); }
::selection { background: var(--c-brand); color: #fff; }
[hidden] { display: none !important; }
.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: -100px; z-index: 100; background: var(--c-ink); color: #fff; padding: var(--s-3) var(--s-5); border-radius: var(--r-md); font-weight: 700; }
.skip-link:focus { top: var(--s-4); }
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { max-width: 50rem; }
.meta { font-size: var(--fs-xs); color: var(--c-muted); }

.h-section { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-section); line-height: var(--lh-tight); color: var(--c-ink); max-width: 24ch; text-wrap: balance; }
.h-section--light { color: #fff; }

/* ---------- Buttons & links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: 3rem; padding: 0 var(--s-6); border: 1px solid transparent; border-radius: var(--r-md); font-family: var(--f-body); font-size: 1rem; font-weight: 700; line-height: 1; white-space: nowrap; transition: background-color var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out), transform var(--d-fast) var(--ease-out); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn--sm { min-height: 2.5rem; padding: 0 var(--s-4); font-size: var(--fs-sm); }
.btn--lg { min-height: 3.25rem; padding: 0 var(--s-6); }
.btn--block { width: 100%; }
.btn--primary { background: var(--c-brand); color: #fff; }
.btn--primary:hover { background: var(--c-brand-hover); }
.btn--primary:active { background: var(--c-brand-press); }
.btn--secondary { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn--secondary:hover { background: var(--c-ink); color: #fff; }
.btn--ghost-light { background: rgb(14 20 27 / 0.25); color: #fff; border-color: rgb(255 255 255 / 0.45); }
.btn--ghost-light:hover { background: var(--c-deep-2); border-color: #fff; }
.btn--wa { background: var(--c-wa); color: #fff; }
.btn--wa:hover { background: var(--c-wa-hover); }
.btn__arrow { transition: transform var(--d-base) var(--ease-out); }
.btn:hover .btn__arrow, .link-arrow:hover .icon { transform: translateX(-4px); }
.link-arrow { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: 0.45em; text-decoration-thickness: 1px; transition: color var(--d-base), text-decoration-color var(--d-base); }
.link-arrow .icon { transition: transform var(--d-base) var(--ease-out); }
.link-arrow:hover { color: var(--c-brand); text-decoration-color: currentColor; }
.icon-btn { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-ink); transition: border-color var(--d-base), background-color var(--d-base); }
.icon-btn:hover { border-color: var(--c-ink); }
.icon-btn--light { background: transparent; border-color: rgb(255 255 255 / 0.3); color: #fff; }
.icon-btn--light:hover { background: var(--c-wa-hover); border-color: #fff; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: rgb(242 243 244 / 0.94); border-bottom: 1px solid transparent; transition: border-color var(--d-base), box-shadow var(--d-base); }
@supports (backdrop-filter: blur(1px)) { .site-header { background: rgb(242 243 244 / 0.8); backdrop-filter: saturate(1.4) blur(14px); } }
.site-header.is-scrolled { border-bottom-color: var(--c-line); box-shadow: 0 10px 30px -24px rgb(17 24 32 / 0.5); }
.header-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }
.site-header__bar { display: flex; align-items: center; gap: var(--s-6); height: var(--header-h); }
.site-header__brand { flex: none; }
.site-header__logo { height: 2.25rem; width: auto; }
.site-nav { display: none; }
.site-header__actions { display: flex; align-items: center; gap: var(--s-3); margin-inline-start: auto; }
.site-header__actions .btn { display: none; }
.header-phone { display: none; align-items: center; gap: var(--s-2); font-weight: 700; font-size: var(--fs-sm); color: var(--c-ink-2); }
.header-phone:hover { color: var(--c-brand); }
.menu-toggle { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-ink); }
.menu-toggle:hover { border-color: var(--c-ink); }
.nav__list { display: flex; align-items: center; gap: clamp(var(--s-4), 1.5vw, var(--s-8)); }
.nav__list a { position: relative; display: inline-block; padding-block: var(--s-2); font-size: var(--fs-sm); color: var(--c-ink-2); white-space: nowrap; transition: color var(--d-base); }
.nav__list a::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--c-brand); transform: scaleX(0); transform-origin: right; transition: transform var(--d-base) var(--ease-out); }
.nav__list a:hover, .nav__list a.is-current { color: var(--c-ink); }
.nav__list a:hover::after, .nav__list a.is-current::after { transform: scaleX(1); }
.mobile-menu { position: fixed; inset: 0; z-index: var(--z-menu); background: rgb(14 20 27 / 0.55); }
.mobile-menu__panel { position: absolute; inset-block: 0; inset-inline-start: 0; width: min(22rem, 88vw); display: flex; flex-direction: column; gap: var(--s-6); padding: var(--s-5); background: var(--c-paper); overflow-y: auto; animation: drawer-in var(--d-slow) var(--ease-out); }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu__logo { height: 2.125rem; width: auto; }
.mobile-menu__list a { display: block; padding: var(--s-3) 0; border-bottom: 1px solid var(--c-line); font-family: var(--f-display); font-size: var(--fs-md); font-weight: 700; }
.mobile-menu__list a:hover { color: var(--c-brand); }
.mobile-menu__foot { margin-top: auto; display: grid; gap: var(--s-3); }
.mobile-menu__phone { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); font-weight: 700; padding: var(--s-3); }
@keyframes drawer-in { from { transform: translateX(100%); } }
@media (min-width: 40rem) { .site-header__actions .btn { display: inline-flex; } }
@media (min-width: 66rem) {
	.site-nav { display: block; margin-inline-start: var(--s-4); }
	.menu-toggle { display: none; }
	.site-header__logo { height: 2.5rem; }
}
@media (min-width: 82rem) { .header-phone { display: inline-flex; } }

/* ==========================================================================
   1. Hero: one cinematic composition
   ========================================================================== */
.hero { position: relative; isolation: isolate; display: flex; min-height: 40rem; overflow: hidden; background: var(--c-deep); color: #fff; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(10 14 19 / 0.96) 0%, rgb(10 14 19 / 0.86) 46%, rgb(10 14 19 / 0.25) 78%, rgb(10 14 19 / 0.1) 100%); }
/* Mobile bottom padding clears the floating WhatsApp button so it never covers the rail. */
.hero__inner { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-8); padding-block: 13rem 5rem; }
.hero__copy { max-width: 36rem; }
.hero__kicker { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); color: rgb(255 255 255 / 0.82); }
.hero__kicker-rule { width: 1.75rem; height: 2px; background: var(--c-brand-on-deep); flex: none; }
.hero__title { margin-top: var(--s-4); font-family: var(--f-display); font-weight: 700; font-size: var(--fs-hero); line-height: 1.3; color: #fff; text-wrap: balance; }
.hero__title .line { display: block; overflow: hidden; padding-block: 0.06em; margin-block: -0.06em; }
.hero__title .line > span { display: inline-block; }
.hero__title .line--accent { color: var(--c-brand-on-deep); }
.hero__text { margin-top: var(--s-4); font-size: var(--fs-md); line-height: 1.8; color: rgb(255 255 255 / 0.86); max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero__actions .btn { flex: 1 1 auto; }

.rail { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) 0; padding-top: var(--s-5); border-top: 1px solid rgb(255 255 255 / 0.2); }
.rail__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; padding-inline: var(--s-4); }
.rail__item:nth-child(odd) { padding-inline-start: 0; }
.rail__item:nth-child(even) { border-inline-start: 1px solid rgb(255 255 255 / 0.16); }
.rail dt { font-size: var(--fs-xs); color: rgb(255 255 255 / 0.74); line-height: 1.6; }
.rail dd { display: flex; align-items: baseline; gap: var(--s-2); }
.rail__num { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.25rem); line-height: 1.15; color: #fff; }
.rail__item--lead .rail__num { color: var(--c-brand-on-deep); }
.rail__unit { font-size: var(--fs-xs); font-weight: 700; color: rgb(255 255 255 / 0.74); }

@media (min-width: 56rem) {
	.hero { min-height: clamp(36rem, calc(100svh - var(--header-h)), 50rem); }
	.hero__img { object-position: 50% 45%; }
	.hero__scrim { background:
		linear-gradient(to left, rgb(10 14 19 / 0.9) 0%, rgb(10 14 19 / 0.72) 32%, rgb(10 14 19 / 0.2) 62%, rgb(10 14 19 / 0) 80%),
		linear-gradient(to top, rgb(10 14 19 / 0.9) 0%, rgb(10 14 19 / 0) 34%); }
	.hero__inner { justify-content: space-between; padding-block: clamp(4rem, 9vh, 7rem) var(--s-8); }
	.hero__copy { margin-block: auto; }
	.hero__actions .btn { flex: 0 0 auto; }
	.rail { grid-template-columns: 1.3fr repeat(3, 1fr); }
	.rail__item { padding-inline: var(--s-6); }
	.rail__item:nth-child(odd) { padding-inline-start: var(--s-6); }
	.rail__item:first-child { padding-inline-start: 0; }
	.rail__item + .rail__item { border-inline-start: 1px solid rgb(255 255 255 / 0.16); }
}

/* ==========================================================================
   2. Positioning band
   ========================================================================== */
.positioning { background: var(--c-surface); padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem); border-bottom: 1px solid var(--c-line); }
.positioning__grid { display: grid; gap: var(--s-6); }
.positioning__title { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-xl); line-height: 1.45; max-width: 26ch; }
.positioning__text { margin-top: var(--s-2); color: var(--c-ink-2); font-size: var(--fs-sm); max-width: 60ch; }
.checks { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--c-ink-2); }
.checks li { display: inline-flex; align-items: center; gap: var(--s-2); }
.checks .icon { color: var(--c-brand); }
.certs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-6); }
.certs__item { display: grid; gap: 2px; padding-block: var(--s-4); border-top: 1px solid var(--c-line); }
.certs__item:nth-child(-n + 2) { border-top-color: var(--c-ink); }
.certs__code { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-lg); line-height: 1.5; }
.certs__name { font-size: var(--fs-xs); color: var(--c-muted); }
@media (min-width: 64rem) {
	.positioning__grid { grid-template-columns: 1fr 1.05fr; gap: var(--s-12); align-items: center; }
	.certs { grid-template-columns: repeat(4, 1fr); gap: 0 var(--s-4); }
	.certs__item, .certs__item:nth-child(-n + 2) { border-top-color: var(--c-ink); }
	.certs__code { font-size: var(--fs-md); }
}

/* ==========================================================================
   3. Network: compounds + coverage (deep)
   ========================================================================== */
.network { --c-focus: #ffffff; background: var(--c-deep); color: var(--c-on-deep); padding-block: var(--section-y); }
.network__head { display: grid; gap: var(--s-6); margin-bottom: var(--s-8); }
.network__sub { margin-top: var(--s-3); color: var(--c-on-deep-muted); max-width: 52ch; }
.city-pills { display: flex; gap: var(--s-2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.city-pills::-webkit-scrollbar { display: none; }
.city-pill { flex: none; scroll-snap-align: start; display: inline-flex; align-items: baseline; gap: var(--s-2); min-height: 2.75rem; padding: var(--s-2) var(--s-4); border: 1px solid var(--c-deep-line); border-radius: var(--r-md); background: transparent; color: var(--c-on-deep); transition: background-color var(--d-base), color var(--d-base), border-color var(--d-base); }
.city-pill__name { font-weight: 700; font-size: var(--fs-sm); }
.city-pill__cap { font-size: var(--fs-xs); color: var(--c-on-deep-muted); }
.city-pill:hover { border-color: rgb(255 255 255 / 0.5); }
.city-pill[aria-selected="true"] { background: #fff; border-color: #fff; color: var(--c-ink); }
.city-pill[aria-selected="true"] .city-pill__cap { color: var(--c-muted); }

.network__body { display: grid; gap: var(--s-8); }
.net-panel { display: grid; gap: var(--s-4); }
.net-panel:focus-visible { outline-offset: 6px; }
.net-stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-sm); background: var(--c-deep-2); }
.net-stage__frame { position: absolute; inset: 0; opacity: 0; transition: opacity var(--d-slow) var(--ease-out); }
.net-stage__frame.is-active { opacity: 1; }
.net-stage__frame img { width: 100%; height: 100%; object-fit: cover; }
.net-stage__thumbs { position: absolute; inset-block-end: var(--s-3); inset-inline-end: var(--s-3); display: flex; gap: var(--s-2); }
.stage-thumb { color: #fff; width: 4rem; aspect-ratio: 3 / 2; padding: 0; border: 2px solid rgb(255 255 255 / 0.5); border-radius: var(--r-sm); overflow: hidden; background: var(--c-ink); opacity: 0.75; transition: opacity var(--d-base), border-color var(--d-base); }
.stage-thumb img { width: 100%; height: 100%; object-fit: cover; }
.stage-thumb:hover, .stage-thumb[aria-pressed="true"] { opacity: 1; border-color: #fff; }
.net-stage__tag { position: absolute; inset-block-start: var(--s-3); inset-inline-start: var(--s-3); display: inline-flex; align-items: center; gap: var(--s-1); max-width: calc(100% - 1.5rem); padding: var(--s-1) var(--s-3); border-radius: var(--r-md); background: rgb(14 20 27 / 0.78); font-size: var(--fs-xs); color: #fff; }
.net-stage__tag .icon { color: var(--c-brand-on-deep); flex: none; }

.net-info { padding: var(--s-5); background: var(--c-deep-2); border: 1px solid var(--c-deep-line); border-radius: var(--r-sm); }
.net-info__title { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-xl); line-height: 1.4; color: #fff; }
.net-info__since { margin-top: 2px; font-size: var(--fs-xs); color: var(--c-on-deep-muted); }
.net-figures { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); margin-top: var(--s-5); padding-block: var(--s-4); border-block: 1px solid var(--c-deep-line); }
.net-figures dt { font-size: var(--fs-xs); color: var(--c-on-deep-muted); }
.net-figures dd { font-weight: 700; font-size: var(--fs-sm); color: #fff; line-height: 1.6; }
.net-figures__lead { grid-column: 1 / -1; }
.net-figures__lead dd { display: flex; align-items: baseline; gap: var(--s-2); }
.net-figures__lead .num { font-family: var(--f-display); font-size: clamp(1.875rem, 1.5rem + 1vw, 2.375rem); line-height: 1.15; color: var(--c-brand-on-deep); }
.net-figures .unit { font-size: var(--fs-sm); color: var(--c-on-deep-muted); }
.net-facilities { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: var(--s-4); }
.net-facilities li { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.5rem; border-radius: var(--r-md); background: rgb(255 255 255 / 0.07); font-size: var(--fs-xs); color: var(--c-on-deep); }
.net-facilities .icon { color: #fff; opacity: 0.85; }
.net-details { margin-top: var(--s-3); }
.net-details summary { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; list-style: none; font-weight: 700; font-size: var(--fs-sm); color: #fff; cursor: pointer; }
.net-details summary::-webkit-details-marker { display: none; }
.net-details summary:hover { color: var(--c-brand-on-deep); }
.net-details__chev { transition: transform var(--d-base) var(--ease-out); }
.net-details[open] .net-details__chev { transform: rotate(180deg); }
.net-details__body { display: grid; gap: var(--s-2); padding-bottom: var(--s-2); font-size: var(--fs-sm); color: var(--c-on-deep-muted); line-height: 1.8; }
.net-details__body h4 { margin-top: var(--s-2); font-size: var(--fs-xs); color: #fff; }
.net-details__body li { position: relative; padding-inline-start: var(--s-4); }
.net-details__body li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.8em; width: 6px; height: 2px; background: var(--c-brand-on-deep); }
.net-info__cta { margin-top: var(--s-4); width: 100%; }

.net-map { display: grid; gap: var(--s-4); align-content: start; }
.net-map { grid-template-columns: 9.5rem 1fr; align-items: center; }
.net-map__canvas { position: relative; aspect-ratio: 1000 / 860; width: 100%; margin-inline: auto; }
@media (min-width: 64rem) { .net-map { grid-template-columns: 1fr; } }
.net-map__svg { width: 100%; height: 100%; }
.net-map__land { fill: var(--c-deep-2); }
.net-map__dot { fill: rgb(255 255 255 / 0.12); }
.net-map__outline { fill: none; stroke: rgb(255 255 255 / 0.32); stroke-width: 1.5; }
.net-map__legend { display: grid; gap: var(--s-3); font-size: var(--fs-xs); }
@media (min-width: 64rem) { .net-map__legend { grid-template-columns: 1fr 1fr; } }
.net-map__legend dt { font-weight: 700; color: #fff; }
.net-map__legend dd { color: var(--c-on-deep-muted); line-height: 1.7; }
.map-pin { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem; border: 0; background: transparent; direction: ltr; transform: translate(-0.675rem, -50%); }
.map-pin--west { flex-direction: row-reverse; transform: translate(calc(-100% + 0.675rem), -50%); }
.map-pin__dot { position: relative; flex: none; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--c-brand-on-deep); box-shadow: 0 0 0 3px rgb(255 107 115 / 0.22); transition: transform var(--d-base) var(--ease-out); }
.map-pin__label { display: none; font-size: var(--fs-xs); font-weight: 700; color: var(--c-on-deep-muted); white-space: nowrap; padding: 0.1rem 0.45rem; border-radius: var(--r-sm); transition: background-color var(--d-base), color var(--d-base); }
.map-pin.is-active .map-pin__label { display: inline-block; background: #fff; color: var(--c-ink); }
.map-pin.is-active .map-pin__dot { transform: scale(1.35); }
.map-pin:hover .map-pin__label { color: #fff; }
.map-pin.is-active:hover .map-pin__label { color: var(--c-ink); }

@media (min-width: 48rem) {
	.net-panel { grid-template-columns: minmax(17rem, 0.82fr) 1.18fr; grid-template-areas: "info stage"; gap: var(--s-5); align-items: stretch; }
	.net-stage { grid-area: stage; aspect-ratio: auto; min-height: 26rem; }
	.net-info { grid-area: info; display: flex; flex-direction: column; }
	.net-info__cta { margin-top: auto; }
	.net-details { margin-bottom: var(--s-4); }
}
.network .h-section { max-width: 30ch; }
@media (min-width: 64rem) {
	.network__head { grid-template-columns: 1fr auto; align-items: end; }
	.city-pills { flex-wrap: wrap; justify-content: flex-end; margin: 0; padding: 0; overflow: visible; max-width: 34rem; }
	.network__body { grid-template-columns: 1fr 19rem; gap: var(--s-8); align-items: start; }
	.net-stage { min-height: 30rem; }
	.net-details__body { max-height: 12rem; overflow-y: auto; padding-inline-end: var(--s-2); }
}

/* ==========================================================================
   4. Services: expanding image strips
   ========================================================================== */
.services { padding-block: var(--section-y); }
.services__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-8); }
.services__sub { color: var(--c-muted); max-width: 56ch; }
.strips { display: flex; flex-direction: column; gap: var(--s-2); }
.strip { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 5.5rem; padding: var(--s-4) var(--s-5); overflow: hidden; border-radius: var(--r-sm); background: var(--c-deep); color: #fff; transition: min-height var(--d-slow) var(--ease-out), flex-grow 800ms var(--ease-out); }
.strip.is-open { min-height: 21rem; }
.strip__media { position: absolute; inset: 0; z-index: -2; }
.strip__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.2s var(--ease-out); }
.strip.is-open .strip__media img { transform: scale(1); }
.strip::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(10 14 19 / 0.92) 0%, rgb(10 14 19 / 0.6) 45%, rgb(10 14 19 / 0.35) 100%); transition: background-color var(--d-slow); }
.strip:not(.is-open)::after { background: linear-gradient(to top, rgb(10 14 19 / 0.9) 0%, rgb(10 14 19 / 0.45) 50%, rgb(10 14 19 / 0.2) 100%); }
.strip__heading { margin: 0; }
.strip__toggle { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: 0; border: 0; background: none; color: #fff; text-align: start; font-family: var(--f-display); font-weight: 700; font-size: var(--fs-lg); line-height: 1.4; }
.strip__toggle::before { content: ""; position: absolute; inset: 0; }
.strip__toggle:focus-visible { outline: none; }
.strip:has(.strip__toggle:focus-visible) { outline: 3px solid var(--c-ink); outline-offset: 3px; }
.strip__icon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--r-md); background: rgb(255 255 255 / 0.14); transition: background-color var(--d-base); }
.strip.is-open .strip__icon { background: var(--c-brand); }
.strip__body { position: relative; margin-top: var(--s-3); max-width: 44ch; font-size: var(--fs-sm); line-height: 1.85; color: rgb(255 255 255 / 0.88); }
.services__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5); margin-top: var(--s-6); }
.eco { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.eco__title { font-weight: 700; font-size: var(--fs-sm); }
.eco__list { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.eco__list li { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--c-ink-2); }
.eco__list .icon { color: var(--c-brand); }
@media (min-width: 56rem) {
	.strips { flex-direction: row; height: clamp(26rem, 36vw, 31rem); gap: var(--s-3); }
	.strip { flex: 1 1 0; min-width: 0; min-height: 0; padding: var(--s-6); cursor: pointer; }
	.strip.is-open { flex-grow: 3.4; min-height: 0; }
	.strip__toggle { font-size: var(--fs-md); }
	.strip.is-open .strip__toggle { font-size: var(--fs-xl); }
}

/* ==========================================================================
   5. Operations: lifecycle + segmented panel
   ========================================================================== */
.operations { background: var(--c-surface); padding-block: var(--section-y); }
.operations__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-8); }
.operations__sub { color: var(--c-muted); max-width: 56ch; }
.lifecycle { position: relative; margin-bottom: var(--s-10); }
.lifecycle__steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2); }
.lifecycle__line { position: absolute; inset-inline-start: 6px; inset-inline-end: calc((100% - 4 * var(--s-2)) / 5 - 6px); top: 6px; height: 2px; background: var(--c-line); }
.lifecycle__line::after { content: ""; position: absolute; inset: 0; background: var(--c-brand); transform-origin: right; transition: transform 1.6s var(--ease-in-out); }
.lifecycle__step { position: relative; display: grid; gap: 2px; padding-top: var(--s-6); }
.lifecycle__dot { position: absolute; inset-inline-start: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--c-brand); background: var(--c-surface); }
.lifecycle__num { font-family: var(--f-display); font-size: var(--fs-xs); font-weight: 700; color: var(--c-brand); }
.lifecycle__label { font-family: var(--f-display); font-size: var(--fs-xs); font-weight: 700; line-height: 1.5; }
.ops-panel { display: grid; gap: var(--s-6); }
.ops-panel__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-sm); background: var(--c-paper-2); }
.ops-panel__media img { width: 100%; height: 100%; object-fit: cover; }
.ops-list { margin-top: var(--s-4); }
.ops-tabpanel:focus-visible { outline-offset: 6px; }
.ops-list__item { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--c-line); }
.ops-list__item:first-child { border-top: 1px solid var(--c-ink); }
.ops-list__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-md); background: var(--c-paper); color: var(--c-brand); }
.ops-list h3 { font-weight: 700; font-size: var(--fs-base); line-height: 1.6; }
.ops-list p { color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.8; }
.segmented { display: inline-flex; flex-wrap: wrap; padding: var(--s-1); background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.segmented__btn { min-height: 2.75rem; padding: 0 var(--s-4); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--c-muted); font-weight: 700; font-size: var(--fs-sm); transition: background-color var(--d-base), color var(--d-base); }
.segmented__btn:hover { color: var(--c-ink); }
.segmented__btn[aria-selected="true"] { background: var(--c-ink); color: #fff; }
@media (min-width: 48rem) {
	.lifecycle__steps { gap: var(--s-4); }
	.lifecycle__line { inset-inline-end: calc((100% - 4 * var(--s-4)) / 5 - 6px); }
	.lifecycle__label { font-size: var(--fs-base); }
}
@media (min-width: 56rem) {
	.ops-panel { grid-template-columns: 0.85fr 1.15fr; gap: var(--s-12); align-items: start; }
	.ops-panel__media { aspect-ratio: 5 / 4; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}

/* ==========================================================================
   6. Partners: bento wall
   ========================================================================== */
.partners { padding-block: var(--section-y); }
.bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(5.5rem, auto); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--r-sm); overflow: hidden; }
.bento__lead { grid-column: 1 / -1; display: grid; gap: var(--s-3); padding: var(--s-6); background: var(--c-deep); color: var(--c-on-deep); }
.bento__count { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.75rem, 2rem + 2.6vw, 4rem); line-height: 1; color: var(--c-brand-on-deep); }
.bento__title { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-lg); line-height: 1.4; color: #fff; }
.bento__copy p { font-size: var(--fs-sm); color: var(--c-on-deep-muted); }
.bento__links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); margin-top: var(--s-2); }
.bento__links .link-arrow { color: #fff; font-size: var(--fs-sm); text-decoration-color: rgb(255 255 255 / 0.4); }
.bento__links .link-arrow:hover { color: var(--c-brand-on-deep); }
.bento__lead { --c-focus: #ffffff; }
.bento__logo { display: grid; place-items: center; padding: var(--s-3); background: var(--c-surface); }
.bento__logo img { max-height: 2.75rem; max-width: 76%; width: auto; object-fit: contain; transition: transform var(--d-slow) var(--ease-out), filter var(--d-slow), opacity var(--d-slow); }
@media (hover: hover) {
	.bento__logo img { filter: grayscale(1); opacity: 0.72; }
	.bento__logo:hover img { filter: none; opacity: 1; transform: scale(1.06); }
}
@media (min-width: 56rem) {
	.bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(8rem, auto); }
	.bento__lead { grid-column: span 3; grid-template-columns: auto 1fr; align-items: center; gap: var(--s-6); padding: var(--s-6) var(--s-8); }
	.bento__logo img { max-height: 3.25rem; }
}

/* ==========================================================================
   7. Quote: split ink + form
   ========================================================================== */
.quote { background: var(--c-surface); padding-block: var(--section-y); }
.quote__grid { display: grid; border: 1px solid var(--c-line); border-radius: var(--r-sm); overflow: hidden; }
.quote__intro { --c-focus: #ffffff; padding: var(--s-8) var(--s-6); background: var(--c-deep); color: var(--c-on-deep); }
.quote__text { margin-top: var(--s-3); color: var(--c-on-deep-muted); font-size: var(--fs-sm); }
.quote__label { margin-top: var(--s-8); margin-bottom: var(--s-3); font-size: var(--fs-xs); font-weight: 700; color: var(--c-on-deep-muted); }
.quote-steps { display: grid; gap: var(--s-3); }
.quote-steps li { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--fs-sm); color: #fff; }
.quote-steps__num { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.35); font-family: var(--f-display); font-size: var(--fs-xs); font-weight: 700; line-height: 1; }
.quote__alt { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--c-deep-line); }
.quote__alt p { font-size: var(--fs-xs); color: var(--c-on-deep-muted); }
.quote__alt-links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-6); }
.quote__alt-links a, .quote__alt-links button { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; padding: 0; border: 0; background: none; font-weight: 700; color: #fff; }
.quote__alt-links a:hover, .quote__alt-links button:hover { color: var(--c-brand-on-deep); }
.quote__panel { padding: var(--s-6); background: var(--c-surface); }
.quote-form { display: grid; gap: var(--s-5); }
.form-group { display: grid; gap: var(--s-4); }
.form-group + .form-group { padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.form-group__title { display: flex; align-items: center; gap: var(--s-2); font-weight: 700; font-size: var(--fs-sm); }
.form-group__num { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--c-ink); color: #fff; font-family: var(--f-display); font-size: 0.75rem; line-height: 1; }
.quote-form__grid { display: grid; gap: var(--s-4); }
.field { display: grid; gap: var(--s-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.field__label { padding: 0; font-weight: 700; font-size: var(--fs-sm); color: var(--c-ink); }
.field__req { color: var(--c-brand); margin-inline-start: 2px; }
.field__opt { font-weight: 400; color: var(--c-muted); font-size: var(--fs-xs); margin-inline-start: var(--s-1); }
.field__input { width: 100%; min-height: 3rem; padding: 0 var(--s-4); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-ink); font-size: var(--fs-base); transition: border-color var(--d-base), box-shadow var(--d-base); }
.field__input[dir="ltr"] { text-align: right; }
.field__input::placeholder { color: #737c86; }
.field__input:hover { border-color: var(--c-ink-2); }
.field__input:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px rgb(17 24 32 / 0.16); }
.field__input[aria-invalid="true"] { border-color: var(--c-error); box-shadow: 0 0 0 3px rgb(179 38 30 / 0.12); }
.field__error { font-size: var(--fs-xs); font-weight: 700; color: var(--c-error); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { position: relative; }
.chip__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip__face { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 2.75rem; padding: 0 var(--s-4); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); background: var(--c-surface); font-size: var(--fs-sm); cursor: pointer; transition: background-color var(--d-base), color var(--d-base), border-color var(--d-base); }
.chip__check { width: 0; opacity: 0; transition: width var(--d-base) var(--ease-out), opacity var(--d-base); }
.chip:hover .chip__face { border-color: var(--c-ink-2); }
.chip__input:checked + .chip__face { background: var(--c-ink); border-color: var(--c-ink); color: #fff; font-weight: 700; }
.chip__input:checked + .chip__face .chip__check { width: 16px; opacity: 1; }
.chip__input:focus-visible + .chip__face { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.field--choices[aria-invalid="true"] .chip__face { border-color: var(--c-error); }
.quote-form__submit { display: grid; gap: var(--s-3); padding-top: var(--s-2); }
.quote-form__note { font-size: var(--fs-xs); color: var(--c-muted); }
.btn__spinner { display: none; width: 1.125rem; height: 1.125rem; border: 2px solid rgb(255 255 255 / 0.4); border-top-color: #fff; 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); } }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-alert { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border: 1px solid currentColor; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 700; color: var(--c-error); background: var(--c-error-tint); }
.quote-success { display: grid; justify-items: start; gap: var(--s-4); padding-block: var(--s-8); }
.quote-success:focus { outline: none; }
.quote-success__icon { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--c-success-tint); color: var(--c-success); }
.quote-success h3 { font-family: var(--f-display); font-size: var(--fs-xl); font-weight: 700; line-height: 1.4; }
.quote-success p { color: var(--c-ink-2); max-width: 44ch; }
@media (min-width: 40rem) {
	.quote-form__grid { grid-template-columns: 1fr 1fr; }
	.quote__panel { padding: var(--s-8); }
}
@media (min-width: 64rem) {
	.quote__grid { grid-template-columns: 0.72fr 1.28fr; }
	.quote__intro { padding: var(--s-10) var(--s-8); }
	.quote__panel { padding: var(--s-10); }
	.quote-form__grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   8. News: editorial
   ========================================================================== */
.news { padding-block: var(--section-y); }
.news__head { display: grid; gap: var(--s-5); margin-bottom: var(--s-8); }
.news__sub { margin-top: var(--s-2); color: var(--c-muted); }
.news__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); }
.editorial { display: grid; gap: var(--s-6); }
.editorial:focus-visible { outline-offset: 8px; }
.feature { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 22rem; overflow: hidden; border-radius: var(--r-sm); background: var(--c-deep); color: #fff; }
.feature__media { position: absolute; inset: 0; z-index: -2; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.feature:hover .feature__media img { transform: scale(1.04); }
.feature::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(10 14 19 / 0.94) 0%, rgb(10 14 19 / 0.55) 45%, rgb(10 14 19 / 0) 75%); }
.feature__body { display: grid; gap: var(--s-2); padding: var(--s-6); }
.feature .meta { color: rgb(255 255 255 / 0.78); }
.feature__title { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-xl); line-height: 1.45; }
.feature__title a::before { content: ""; position: absolute; inset: 0; }
.feature__title a:focus-visible { outline: none; }
.feature:has(a:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.feature__body p { color: rgb(255 255 255 / 0.85); font-size: var(--fs-sm); max-width: 56ch; }
.editorial__side { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); align-content: start; }
.story { display: grid; gap: var(--s-2); align-content: start; }
.story__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-sm); background: var(--c-paper-2); }
.story__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.story:hover .story__media img { transform: scale(1.05); }
.story__title { font-weight: 700; font-size: var(--fs-sm); line-height: 1.7; }
.story__title a:hover, .brief-list a:hover { color: var(--c-brand); }
.brief-list { grid-column: 1 / -1; border-top: 1px solid var(--c-ink); }
.brief-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--c-line); }
.brief-list a { font-weight: 700; font-size: var(--fs-sm); line-height: 1.7; transition: color var(--d-base); }
@media (min-width: 56rem) {
	.news__head { grid-template-columns: 1fr auto; align-items: end; }
	.editorial { grid-template-columns: 1.2fr 1fr; gap: var(--s-8); }
	.feature { min-height: 30rem; }
	.feature__body { padding: var(--s-8); }
}

/* ==========================================================================
   9. FAQ: compact two-column
   ========================================================================== */
.faq { background: var(--c-surface); padding-block: var(--section-y); }
.faq__head { display: grid; gap: var(--s-4); justify-items: start; margin-bottom: var(--s-6); }
.faq__sub { margin-top: var(--s-2); color: var(--c-muted); max-width: 52ch; }
.faq__cols { display: grid; }
.faq__col { border-top: 1px solid var(--c-ink); }
.faq__col + .faq__col { border-top: 0; }
.faq-item { border-bottom: 1px solid var(--c-line); }
.faq-item__q { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 3rem; padding-block: var(--s-4); list-style: none; font-weight: 700; font-size: var(--fs-base); line-height: 1.6; cursor: pointer; transition: color var(--d-base); }
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { color: var(--c-brand); }
.faq-item__icon { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--c-line); border-radius: var(--r-md); color: var(--c-ink); transition: background-color var(--d-base), color var(--d-base), border-color var(--d-base); }
.faq-item__icon .icon { transition: transform var(--d-base) var(--ease-out); }
.faq-item[open] .faq-item__icon { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.faq-item[open] .faq-item__icon .icon { transform: rotate(45deg); }
.faq-item__a { padding-bottom: var(--s-4); color: var(--c-ink-2); font-size: var(--fs-sm); max-width: 62ch; }
.faq-item[open] .faq-item__a { animation: fade-down var(--d-slow) var(--ease-out); }
@keyframes fade-down { from { opacity: 0; transform: translateY(-6px); } }
.faq__more { margin-top: var(--s-5); }
.faq__cols:not(.is-expanded) .faq-item--extra { display: none; }
@media (min-width: 56rem) {
	.faq__head { grid-template-columns: 1fr auto; align-items: end; }
	.faq__cols { grid-template-columns: 1fr 1fr; gap: 0 var(--s-12); }
	.faq__col + .faq__col { border-top: 1px solid var(--c-ink); }
	.faq__cols .faq-item--extra { display: block !important; }
	.faq__more { display: none; }
}

/* ---------- Footer ---------- */
.site-footer { --c-focus: #ffffff; background: var(--c-deep); color: var(--c-on-deep-muted); padding-top: clamp(var(--s-12), 5vw, var(--s-16)); scroll-margin-top: var(--header-h); }
.footer-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-6); padding-bottom: var(--s-10); border-bottom: 1px solid var(--c-deep-line); }
.footer-cta__title { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-xl); line-height: 1.45; color: #fff; max-width: 26ch; }
.footer-cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.footer-grid { display: grid; gap: var(--s-8); padding-block: var(--s-10); }
.footer-brand__logo { width: 11rem; height: auto; }
.footer-brand p { margin-top: var(--s-4); font-size: var(--fs-sm); max-width: 38ch; }
.footer-col__title { margin-bottom: var(--s-3); font-size: var(--fs-sm); font-weight: 700; color: #fff; }
.footer-links { display: grid; gap: 0; }
.footer-links a { display: inline-block; padding-block: var(--s-1); font-size: var(--fs-sm); transition: color var(--d-base); }
.footer-links a:hover { color: #fff; }
.footer-contact { display: grid; gap: var(--s-3); font-size: var(--fs-sm); }
.footer-contact li { display: flex; align-items: flex-start; gap: var(--s-3); }
.footer-contact .icon { flex: none; margin-top: 4px; color: var(--c-brand-on-deep); }
.footer-contact a:hover { color: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-6); padding-block: var(--s-5) calc(var(--s-5) + 4rem); border-top: 1px solid var(--c-deep-line); font-size: var(--fs-xs); }
.footer-bottom a:hover { color: #fff; }
@media (min-width: 40rem) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) {
	.footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: var(--s-12); }
	.footer-bottom { padding-bottom: var(--s-5); }
}

/* ---------- WhatsApp pre-chat ---------- */
.wa { position: fixed; z-index: var(--z-wa); inset-block-end: var(--s-4); inset-inline-end: var(--s-4); }
.wa__fab { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--c-wa); color: #fff; box-shadow: 0 12px 28px -10px rgb(15 122 109 / 0.7), 0 2px 6px rgb(17 24 32 / 0.2); transition: transform var(--d-base) var(--ease-out), background-color var(--d-base); }
.wa__fab:hover { background: var(--c-wa-hover); transform: scale(1.06); }
.wa__fab:active { transform: scale(0.96); }
.wa__fab[aria-expanded="true"] { background: var(--c-wa-hover); }
.wa__panel { position: fixed; inset-inline: var(--s-3); inset-block-end: calc(var(--s-4) + 4rem); max-height: calc(100dvh - 6.5rem); overflow-y: auto; background: var(--c-surface); border-radius: var(--r-md); box-shadow: 0 30px 70px -20px rgb(17 24 32 / 0.45), 0 0 0 1px rgb(17 24 32 / 0.06); transform-origin: bottom left; animation: pop-in 360ms var(--ease-out); }
@keyframes pop-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } }
.wa__head { --c-focus: #ffffff; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); background: var(--c-wa); color: #fff; }
.wa__head > div { flex: 1; }
.wa__avatar { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgb(255 255 255 / 0.16); }
.wa__title { font-weight: 700; line-height: 1.4; }
.wa__sub { font-size: var(--fs-xs); opacity: 0.9; }
.wa__body { display: grid; gap: var(--s-3); padding: var(--s-5); }
.wa__intro { font-size: var(--fs-sm); color: var(--c-ink-2); }
.wa__choices { display: grid; gap: var(--s-2); margin: 0; padding: 0; border: 0; }
.wa-choice { position: relative; }
.wa-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wa-choice__face { display: flex; align-items: center; min-height: 2.75rem; padding: var(--s-2) var(--s-4); border: 1px solid var(--c-line); border-radius: var(--r-md); font-size: var(--fs-sm); cursor: pointer; transition: border-color var(--d-base), background-color var(--d-base); }
.wa-choice:hover .wa-choice__face { border-color: var(--c-ink-2); }
.wa-choice input:checked + .wa-choice__face { border-color: var(--c-wa); background: var(--c-wa-tint); font-weight: 700; }
.wa-choice input:focus-visible + .wa-choice__face { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.wa__label { margin-top: var(--s-2); font-size: var(--fs-sm); font-weight: 700; }
.wa__message { width: 100%; min-height: 5rem; padding: var(--s-3); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); font-size: var(--fs-sm); resize: vertical; }
.wa__message:hover { border-color: var(--c-ink-2); }
.wa__message:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px rgb(17 24 32 / 0.16); }
.wa__body .btn { margin-top: var(--s-2); }
.wa__note { font-size: var(--fs-xs); color: var(--c-muted); text-align: center; }
@media (min-width: 40rem) {
	.wa { inset-block-end: var(--s-6); inset-inline-end: var(--s-6); }
	.wa__fab { width: 3.5rem; height: 3.5rem; }
	.wa__panel { inset-inline: auto var(--s-6); inset-block-end: calc(var(--s-6) + 4.5rem); width: 23rem; }
}

/* ---------- Fallback pages ---------- */
.page-fallback { padding-block: var(--section-y); }
.fallback-entry__title { font-family: var(--f-display); font-size: var(--fs-section); font-weight: 700; line-height: 1.4; margin-bottom: var(--s-6); }
.fallback-entry__media { margin-bottom: var(--s-6); border-radius: var(--r-sm); overflow: hidden; }
.fallback-entry__body { margin-bottom: var(--s-8); color: var(--c-ink-2); }
.fallback-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }

/* ==========================================================================
   Motion: one behavior per section. Enhancement only: content is visible
   without JS, and prefers-reduced-motion removes all of it.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.js [data-reveal] { opacity: 0; transform: translateY(1.25rem); transition: opacity 700ms var(--ease-out), transform var(--d-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
	.js [data-reveal].is-in { opacity: 1; transform: none; }

	/* Hero: slow settle of the photograph, headline lines rise, copy and rail follow. */
	.js .hero__img { scale: 1.08; transition: scale 2.6s var(--ease-out); }
	.js.is-loaded .hero__img { scale: 1; }
	.js .hero__title .line > span { transform: translateY(108%); transition: transform 1s var(--ease-out); }
	.js .hero__title .line:nth-child(2) > span { transition-delay: 100ms; }
	.js.is-loaded .hero__title .line > span { transform: none; }
	.js .hero__kicker, .js .hero__text, .js .hero__actions { opacity: 0; transform: translateY(0.75rem); transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out); }
	.js .hero__text { transition-delay: 320ms; }
	.js .hero__actions { transition-delay: 440ms; }
	.js.is-loaded .hero__kicker, .js.is-loaded .hero__text, .js.is-loaded .hero__actions { opacity: 1; transform: none; }
	.js .rail__item { opacity: 0; transform: translateY(0.75rem); transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(600ms + var(--i, 0) * 110ms); }
	.js.is-loaded .rail__item { opacity: 1; transform: none; }

	/* Network: pins drop in, active pin pulses, compound switch opens the image through the roof. */
	.js .map-pin { opacity: 0; translate: 0 -0.5rem; transition: opacity 500ms var(--ease-out), translate 600ms var(--ease-out); transition-delay: calc(200ms + var(--i, 0) * 110ms); }
	.js .network.is-in .map-pin { opacity: 1; translate: 0 0; }
	.map-pin.is-active .map-pin__dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--c-brand-on-deep); animation: pulse 2.2s var(--ease-out) infinite; }
	@keyframes pulse { from { opacity: 0.9; transform: scale(0.6); } to { opacity: 0; transform: scale(2.2); } }
	.net-panel.is-entering .net-stage__frame.is-active { animation: house-open 1s var(--ease-out) both; }
	.net-panel.is-entering .net-info { animation: rise-in 650ms var(--ease-out) both; }
	@keyframes house-open { from { clip-path: var(--shape-house); } to { clip-path: var(--shape-rect); } }
	@keyframes rise-in { from { opacity: 0; transform: translateY(0.75rem); } }

	/* Services: strips cascade in. */
	.js .strip { opacity: 0; transform: translateY(1.25rem); transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out), min-height var(--d-slow) var(--ease-out), flex-grow 800ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0ms, 0ms; }
	.js .strips.is-in .strip { opacity: 1; transform: none; }
	.strip.is-open .strip__body { animation: rise-in 600ms var(--ease-out) 150ms both; }

	/* Operations: the lifecycle line draws, image opens through the roof, tab content staggers. */
	.js .lifecycle__line::after { transform: scaleX(0); }
	.js .lifecycle.is-in .lifecycle__line::after { transform: none; }
	.js .lifecycle__step { opacity: 0; transition: opacity 600ms var(--ease-out); transition-delay: calc(200ms + var(--i, 0) * 200ms); }
	.js .lifecycle.is-in .lifecycle__step { opacity: 1; }
	.js [data-house-reveal] { clip-path: var(--shape-house); transition: clip-path 1.3s var(--ease-out); }
	.js [data-house-reveal].is-revealed { clip-path: var(--shape-rect); }
	.ops-tabpanel:not([hidden]) .ops-list__item { animation: rise-in 500ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }

	/* Partners: logos fade in sequence. */
	.js .bento__logo { opacity: 0; transition: opacity 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 40ms); }
	.js .bento.is-in .bento__logo { opacity: 1; }

	/* Controlled parallax with CSS scroll timelines (no scroll listeners). */
	@supports (animation-timeline: view()) {
		.ops-panel__media img { scale: 1.12; animation: drift linear both; animation-timeline: view(); animation-range: cover; }
		@keyframes drift { from { translate: 0 -4%; } to { translate: 0 4%; } }
	}
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
}