/*
 * CyberLab v2: the company profile as a website (see DESIGN-V2.md).
 * Front cover (cyan) -> chapters (deep purple) -> closing slide (cyan) ->
 * back cover (purple). Sentence-case SF Pro, dash labels, rule columns.
 */

/* ---------- Fonts (SF Pro, client supplied; Geist Mono for clock digits) ---------- */
@font-face { font-family: "CL Display"; src: url(../fonts/sfd-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "CL Text"; src: url(../fonts/sft-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "CL Text"; src: url(../fonts/sft-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "CL Text"; src: url(../fonts/sft-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
	--cyan: #14bafd;
	--cyan-hi: #47c9fd;
	--cyan-ink: #0676a8;
	--purple: #2b0a3e;
	--purple-2: #36124b;
	--purple-3: #441a5c;
	--purple-hi: #3d1456;
	--white: #fff;
	--w-88: rgba(255, 255, 255, .88);
	--w-72: rgba(255, 255, 255, .72);
	--w-60: rgba(255, 255, 255, .6);
	--rule-w: rgba(255, 255, 255, .14);
	--ink-80: rgba(43, 10, 62, .82);
	--ink-64: rgba(43, 10, 62, .75);
	--rule-i: rgba(43, 10, 62, .2);
	--paper: #f6f3f8;
	--lilac: #f5f1f8;

	--f-display: "CL Display", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
	--f-text: "CL Text", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;

	--max: clamp(1560px, 81.25vw, 2080px);
	--pad: clamp(20px, 4.4vw, 4.5rem);
	--gut: clamp(16px, 1.8vw, 28px);
	--hdr: 5.25rem;
	--sec: clamp(72px, 10vw, 168px);
	/* Display type steps: one size per role, fluid between phone and desktop */
	--t-h1: clamp(2.3rem, 1rem + 3.9vw, 5.25rem);
	--t-h2: clamp(2rem, 1.05rem + 2.7vw, 3.9rem);
	--t-h3: clamp(1.8rem, 1rem + 2.05vw, 3.1rem);
	--t-row: clamp(1.5rem, 1rem + 1.4vw, 2.4rem);
	--t-sub: clamp(1.4rem, 1rem + .9vw, 1.9rem);
	--t-item: clamp(1.2rem, .95rem + .75vw, 1.65rem);
	--r: 14px;
	--r-s: 10px;
	--r-l: 20px;
	--ease: cubic-bezier(.22, 1, .36, 1);
	--ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* Grounds: every section declares its ground; text and rules follow it. */
[data-ground="cyan"] { --fg: var(--purple); --fg-2: var(--ink-80); --fg-3: var(--ink-64); --rl: var(--rule-i); --accent: var(--purple); --ink: var(--purple); --panel: rgba(43, 10, 62, .1); --ground: var(--cyan); --ring: var(--purple); --hover: rgba(43, 10, 62, .08); background-color: var(--cyan); color: var(--purple); }
[data-ground="purple"] { --fg: var(--white); --fg-2: var(--w-72); --fg-3: var(--w-60); --rl: var(--rule-w); --accent: var(--cyan); --ink: var(--cyan); --panel: var(--purple-2); --ground: var(--purple); --ring: var(--cyan); --hover: rgba(255, 255, 255, .1); background-color: var(--purple); color: var(--white); }
[data-ground="white"], [data-ground="lilac"] { --fg: var(--purple); --fg-2: #4a3d55; --fg-3: #6f6279; --rl: rgba(43, 10, 62, .13); --accent: var(--cyan); --ink: var(--cyan-ink); --panel: #ece6f1; --ground: var(--white); --ring: var(--purple); --hover: rgba(43, 10, 62, .06); background-color: var(--white); color: var(--purple); }
[data-ground="lilac"] { --ground: var(--lilac); --panel: #e6deed; background-color: var(--lilac); }
[data-ground] :focus-visible { outline-color: var(--ring, var(--cyan)); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-padding-top: calc(var(--hdr) + 16px); font-size: clamp(100%, calc(100% + (100vw - 1920px) * .00625), 125%); }
#main:focus { outline: none; }
body { margin: 0; background: var(--white); color: var(--purple); font: 400 1rem/1.6 var(--f-text); letter-spacing: -.003em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--cyan); color: var(--purple); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 3px; }
main:focus-visible, section[tabindex="-1"]:focus-visible, .form-done:focus-visible { outline: none; }
[data-ground="cyan"] :focus-visible { outline-color: var(--purple); }
.contact__form :focus-visible { outline-color: var(--purple); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 400; padding: 12px 18px; border-radius: 999px; background: var(--cyan); color: var(--purple); font-weight: 600; transition: top .2s; }
.skip-link:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
@view-transition { navigation: auto; }
.hdr { view-transition-name: cl-header; }
html.is-intro .hdr, html.menu-open .hdr { view-transition-name: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* ---------- Type ---------- */
.t-h2 { font: 400 var(--t-h2)/1.06 var(--f-display); letter-spacing: -.022em; color: var(--fg); }
.t-intro { font: 600 1.0625rem/1.5 var(--f-text); color: var(--fg); }
p { color: var(--fg-2); }
.ln { display: block; overflow: visible clip; padding-bottom: .1em; margin-bottom: -.1em; }
.ln > span { display: block; text-wrap: balance; }
.t-h2, .spread__title, .closing__h, .cover__h1, .nf__t, .svcx__h, .irow__t, .pn b, .dx__fh, .svc3__h, .ogrid__t, .steps__t { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Profile label: a short dash over one or two lines. */
.label { position: relative; padding-top: 16px; font: 500 .875rem/1.35 var(--f-text); color: var(--fg); letter-spacing: -.005em; }
.label::before { content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 2px; background: var(--accent); }

/* Rule columns: thin cyan verticals between columns, as on the profile. */
.rcols { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.rcols--1 { --n: 1; } .rcols--2 { --n: 2; } .rcols--3 { --n: 3; } .rcols--4 { --n: 4; }
.rcols > * { min-width: 0; padding: 2px clamp(20px, 2.4vw, 44px); border-left: 1px solid var(--accent); }
.rcols > :first-child { padding-left: 0; border-left: 0; }
.rcols > :last-child { padding-right: 0; }
.rcols h3, .rcol-h { font: 500 .8125rem/1.35 var(--f-text); color: var(--fg-3); margin-bottom: 14px; letter-spacing: 0; }
.rcols p + p { margin-top: 14px; }

/* Plain lists ("Key focus areas"). */
.plist li { padding: 9px 0; border-top: 1px solid var(--rl); color: var(--fg); font-size: .9375rem; line-height: 1.4; }
.plist li:last-child { border-bottom: 1px solid var(--rl); }
.plist--lg li { font: 400 1.25rem/1.25 var(--f-display); letter-spacing: -.01em; padding: 12px 0; }

/* ---------- Buttons and links ---------- */
.btn { --bh: 3.375rem; display: inline-flex; align-items: center; gap: 16px; height: var(--bh); padding: 0 8px 0 26px; border-radius: 999px; font: 500 .9375rem/1 var(--f-text); letter-spacing: -.005em; white-space: nowrap; }
.btn__arw { position: relative; display: grid; place-items: center; width: calc(var(--bh) - 16px); height: calc(var(--bh) - 16px); border-radius: 50%; overflow: hidden; flex: none; }
.btn__arw .arw { width: 14px; height: 14px; transition: transform .5s var(--ease); }
.btn__arw .arw + .arw { position: absolute; transform: translateX(-30px); }
@media (hover: hover) { .btn:hover .btn__arw .arw:first-child { transform: translateX(30px); } }
@media (hover: hover) { .btn:hover .btn__arw .arw + .arw { transform: none; } }
.btn--ink { background: var(--purple); color: var(--white); }
.btn--ink .btn__arw { background: var(--cyan); color: var(--purple); }
@media (hover: hover) { .btn--ink:hover { background: var(--purple-hi); } }
.btn--cyan { background: var(--cyan); color: var(--purple); }
.btn--cyan .btn__arw { background: var(--purple); color: var(--white); }
@media (hover: hover) { .btn--cyan:hover { background: var(--cyan-hi); } }
.btn--line { box-shadow: inset 0 0 0 1px currentColor; }
.btn--line .btn__arw { background: currentColor; }
.btn--line .btn__arw .arw { color: var(--purple); }
.tlink { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0 5px; font: 500 .9375rem/1.2 var(--f-text); color: var(--fg); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.tlink .arw { width: 12px; height: 12px; transition: transform .45s var(--ease); }
@media (hover: hover) { .tlink:hover .arw { transform: translateX(6px); } }
@media (hover: hover) { .tlink:hover { animation: clLine .6s var(--ease); } }
@keyframes clLine { 0% { background-size: 100% 1px; background-position: 100% 100%; } 42% { background-size: 0 1px; background-position: 100% 100%; } 43% { background-size: 0 1px; background-position: 0 100%; } 100% { background-size: 100% 1px; background-position: 0 100%; } }
.tlink--down .arw { transform: rotate(90deg); }
@media (hover: hover) { .tlink--down:hover .arw { transform: rotate(90deg) translateX(5px); } }

/* ---------- Logo, seal ---------- */
.logo { display: inline-flex; align-items: center; gap: 11px; color: currentColor; }
.logo__mark { width: 2rem; height: auto; flex: none; }
.logo__word { width: 6.75rem; height: auto; flex: none; }
.seal { display: block; color: var(--fg); }
.seal svg { width: 100%; height: auto; overflow: visible; }
.seal__mark { color: currentColor; }
.seal text { fill: currentColor; font-family: var(--f-display); }
.seal__top { font-size: 19.5px; letter-spacing: .01em; }
.seal__bot { font-size: 10.6px; letter-spacing: .01em; }

/* ---------- Header ---------- */
.hdr { --hfg: var(--purple); --hbtn: var(--purple); --hbtn-fg: var(--white); --hhover: rgba(43, 10, 62, .08); position: fixed; inset: 0 0 auto; z-index: 100; height: var(--hdr); color: var(--hfg); transition: background-color .35s, color .35s, transform .5s var(--ease), box-shadow .35s; }
html[data-hdr="purple"] .hdr:not(.is-solid) { --hfg: var(--white); --hbtn: var(--cyan); --hbtn-fg: var(--purple); --hhover: rgba(255, 255, 255, .1); }
.hdr.is-solid { background: rgba(255, 255, 255, .94); box-shadow: 0 1px 0 rgba(43, 10, 62, .1); }
@supports (backdrop-filter: blur(1px)) { .hdr.is-solid { background: rgba(255, 255, 255, .82); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); } }
.hdr.is-solid :focus-visible, html:not([data-hdr="purple"]) .hdr :focus-visible { outline-color: var(--purple); }
.hdr.is-hidden { transform: translateY(-100%); }
.hdr__in { display: flex; align-items: center; height: 100%; gap: 20px; }
.hdr__brand { display: flex; align-items: center; height: 44px; margin-right: auto; }
.hdr__list { display: flex; align-items: center; gap: 2px; }
.hdr__item { position: relative; display: flex; align-items: center; }
.hdr__link { position: relative; padding: 10px 14px; border-radius: 999px; font: 500 .9375rem/1 var(--f-text); letter-spacing: -.005em; transition: background-color .25s; }
.hdr__link:focus-visible { background: var(--hhover); }
@media (hover: hover) { .hdr__item:hover .hdr__link { background: var(--hhover); } }
.hdr__item.has-sub .hdr__link { padding-right: 26px; }
.hdr__item.is-current .hdr__link::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.hdr__item.has-sub.is-current .hdr__link::after { margin-left: -8px; }
.sub-toggle { position: absolute; right: 2px; top: 50%; width: 26px; height: 32px; margin-top: -16px; display: grid; place-items: center; border-radius: 999px; }
.sub-toggle::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
.has-sub.is-open .sub-toggle::before { transform: translateY(1px) rotate(225deg); }
.sub { position: absolute; top: calc(100% + 12px); left: -10px; z-index: 5; width: 340px; padding: 10px; border-radius: 18px; background: var(--white); color: var(--purple); box-shadow: 0 32px 70px -24px rgba(20, 3, 30, .5), 0 0 0 1px rgba(43, 10, 62, .06); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s; }
.sub::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.has-sub.is-open .sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) and (min-width: 1081px) { .has-sub:hover .sub { opacity: 1; visibility: visible; transform: none; transition-delay: .09s; } }
.sub { max-height: calc(100svh - var(--hdr) - 20px); overflow-y: auto; overscroll-behavior: contain; }
@media (pointer: coarse) { .sub-toggle::after { content: ""; position: absolute; inset: -8px -10px; } }
@media (hover: hover) { .hdr.no-hover .has-sub:not(.is-open):hover .sub { opacity: 0; visibility: hidden; } }
.sub__list a { display: flex; flex-direction: column; gap: 2px; padding: 11px 12px; border-radius: var(--r-s); transition: background-color .2s; }
.sub__list a:focus-visible, .sub__list a[aria-current] { background: #f1ecf5; }
@media (hover: hover) { .sub__list a:hover { background: #f1ecf5; } }
.sub :focus-visible { outline-color: var(--purple); }
.sub__n { font: 500 .75rem/1 var(--f-text); color: var(--cyan-ink); font-feature-settings: "tnum" 1; }
.sub__t { font: 500 .9375rem/1.3 var(--f-text); }
.sub__all { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding: 14px 12px 8px; border-top: 1px solid #ece6f0; font: 500 .875rem var(--f-text); }
.sub__all .arw { width: 12px; height: 12px; transition: transform .4s var(--ease); }
@media (hover: hover) { .sub__all:hover .arw { transform: translateX(4px); } }
.hdr__act { display: flex; align-items: center; gap: 12px; }
.hdr .btn { --bh: 2.875rem; padding-left: 20px; background: var(--hbtn); color: var(--hbtn-fg); }
.hdr .btn .btn__arw { background: var(--hbtn-fg); color: var(--hbtn); }
@media (hover: hover) { .hdr .btn:hover { background: color-mix(in srgb, var(--hbtn) 84%, var(--white)); } }
.hdr__menu { display: none; align-items: center; gap: 12px; height: 46px; padding: 0 6px 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor; font: 500 .9375rem/1 var(--f-text); }
.burger { display: grid; place-content: center; gap: 5px; width: 34px; height: 34px; border-radius: 50%; background: var(--hfg); }
.burger i { display: block; width: 14px; height: 1.6px; background: var(--hbtn-fg); transition: transform .35s var(--ease); }
html[data-hdr="purple"] .hdr:not(.is-solid) .burger i { background: var(--purple); }
.burger.is-x { background: var(--purple); }
.burger.is-x i { background: var(--white); }
.burger.is-x i:first-child { transform: translateY(3.3px) rotate(45deg); }
.burger.is-x i:last-child { transform: translateY(-3.3px) rotate(-45deg); }

/* Full-screen menu (tablets and phones) */
.menu { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background: var(--cyan); color: var(--purple); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; }
.menu.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.menu__top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; min-height: var(--hdr); background: var(--cyan); }
.menu__close { display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 6px 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(43, 10, 62, .5); font: 500 .9375rem/1 var(--f-text); }
.menu__nav { margin-top: clamp(16px, 4vh, 40px); }
.menu__list > li { position: relative; border-top: 1px solid var(--rule-i); }
.menu__list > li:last-child { border-bottom: 1px solid var(--rule-i); }
.menu__link { display: block; padding: 14px 60px 14px 0; font: 400 clamp(1.85rem, 1.2rem + 3vw, 2.6rem)/1.1 var(--f-display); letter-spacing: -.025em; }
.menu__link[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.menu__more { position: absolute; right: -6px; top: 8px; width: 52px; height: 52px; display: grid; place-items: center; }
.menu__more::before { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--purple); border-bottom: 2px solid var(--purple); transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease); }
.menu__item.is-open .menu__more::before { transform: translateY(2px) rotate(225deg); }
.menu__sub { display: none; padding: 0 0 18px; }
.menu__item.is-open .menu__sub { display: grid; }
.menu__sub a { display: block; padding: 10px 0; color: var(--ink-80); font-size: 1rem; }
@media (hover: hover) { .menu__sub a:hover { color: var(--purple); text-decoration: underline; } }
.menu__sub a[aria-current] { color: var(--purple); font-weight: 600; }
.menu__foot { margin-top: auto; padding-top: 36px; padding-bottom: max(28px, env(safe-area-inset-bottom)); display: grid; gap: 10px; }
.menu__foot .btn { justify-self: start; margin-bottom: 12px; }
.menu__mail { justify-self: start; font: 400 1.35rem/1.3 var(--f-display); color: var(--purple); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.menu__tag { color: var(--ink-64); font-size: .875rem; }
.menu :focus-visible { outline-color: var(--purple); }

/* ---------- Home preloader: the mark traced as progress, the tagline as loading stages ---------- */
@property --cl-n { syntax: "<integer>"; initial-value: 0; inherits: false; }
.intro { display: none; }
.is-intro, .is-intro body { overflow: hidden; }
.is-intro .intro { --t: 1.25s; display: block; position: fixed; inset: 0; z-index: 300; }
/* The panel (not the fixed wrapper) is what moves: a script moving a fixed element re-inserts it and restarts every animation inside. */
.intro__panel { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--purple); color: var(--white); animation: clLift .85s cubic-bezier(.76, 0, .24, 1) calc(var(--t) + .5s) forwards; }
.is-intro.intro-quick .intro { --t: .45s; }
.is-intro.intro-quick .intro__fill { animation-duration: .2s; }
.intro__c { display: grid; justify-items: center; align-content: center; row-gap: clamp(22px, 3.4vh, 36px); padding-top: clamp(22px, 4vh, 40px); }
.intro__mark { position: relative; width: clamp(104px, 11vw, 168px); aspect-ratio: 1315 / 1307; }
.intro__trace, .intro__fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro__trace path { fill: none; stroke: var(--cyan); stroke-width: 2px; stroke-dasharray: 1; stroke-dashoffset: 1; animation: clTrace var(--t) cubic-bezier(.65, 0, .35, 1) .1s forwards; }
.intro__fill { color: var(--cyan); opacity: 0; animation: clFade .28s ease calc(var(--t) + .05s) forwards; }
.intro__words { display: grid; justify-items: center; min-width: 12em; font: 400 clamp(1.3rem, 1rem + .9vw, 1.9rem)/1.3 var(--f-display); letter-spacing: -.01em; color: var(--white); }
.intro__words span { grid-area: 1 / 1; opacity: 0; animation: clWordStep calc(var(--t) / 4) ease calc(.1s + var(--i) * var(--t) / 4) both; }
.intro__words span:last-child { animation-name: clWordLast; }
.intro__foot { display: grid; grid-template-columns: 4.2em minmax(0, 1fr) auto; align-items: center; column-gap: 18px; padding: 0 var(--pad) clamp(22px, 4vh, 40px); font: 500 .8125rem/1 var(--f-text); color: var(--w-72); font-variant-numeric: tabular-nums; }
.intro__pct { counter-reset: cln var(--cl-n); animation: clCount var(--t) cubic-bezier(.65, 0, .35, 1) .1s forwards; }
.intro__pct::after { content: counter(cln) "%"; }
.intro__bar { height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .16); }
.intro__bar i { display: block; height: 100%; background: var(--cyan); transform: scaleX(0); transform-origin: 0 50%; animation: clBar var(--t) cubic-bezier(.65, 0, .35, 1) .1s forwards; }
.intro__brand svg { width: 84px; height: auto; color: var(--white); }
.intro-js .intro__panel { animation: none !important; }
/* Frozen in its finished state for the exit */
.intro-done .intro__trace path { animation: none; stroke-dashoffset: 0; }
.intro-done .intro__fill { animation: none; opacity: 1; }
.intro-done .intro__words span { animation: none; opacity: 0; }
.intro-done .intro__words span:last-child { opacity: 1; }
.intro-done .intro__bar i { animation: none; transform: scaleX(1); }
.intro-done .intro__pct { animation: none; --cl-n: 100; }
.hdr__nav, .hdr__act { transition: opacity .6s var(--ease); }
@keyframes clTrace { to { stroke-dashoffset: 0; } }
@keyframes clFade { to { opacity: 1; } }
@keyframes clBar { to { transform: scaleX(1); } }
@keyframes clCount { to { --cl-n: 100; } }
@keyframes clWordStep { 0% { opacity: 0; transform: translateY(10px); } 28%, 72% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes clWordLast { 0% { opacity: 0; transform: translateY(10px); } 30%, 100% { opacity: 1; transform: none; } }
@keyframes clLift { to { transform: translateY(-100%); visibility: hidden; } }

/* ---------- Home: front cover ---------- */
.cover { position: relative; overflow: clip; isolation: isolate; }
.cover__in { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr auto; column-gap: var(--gut); min-height: max(660px, 100svh); padding-top: calc(var(--hdr) + clamp(14px, 4.4svh, 76px)); padding-bottom: clamp(14px, 2.6svh, 30px); }
.cover__label { grid-column: 1 / span 5; grid-row: 1; align-self: start; z-index: 2; }
.cover__tag { grid-column: 10 / -1; grid-row: 1; justify-self: end; z-index: 2; font: 400 clamp(1rem, .55rem + .95vw, 1.55rem)/1.12 var(--f-display); letter-spacing: -.01em; color: var(--purple); }
.cover__tag span { display: block; }
.cover__h1 { grid-column: 1 / span 7; grid-row: 2; margin-top: clamp(12px, 3svh, 44px); z-index: 2; font: 400 clamp(2.7rem, min(1rem + 5vw, 10.6svh), 6.6rem)/.98 var(--f-display); letter-spacing: -.03em; color: var(--purple); overflow-wrap: anywhere; }
.cover__body { grid-column: 1 / span 5; grid-row: 3; align-self: start; margin-top: clamp(14px, 2.6svh, 34px); z-index: 2; }
.cover__lead { max-width: 31em; font: 400 clamp(1.05rem, .92rem + .3vw, 1.22rem)/1.5 var(--f-text); color: var(--ink-80); }
.cover__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: clamp(18px, 3.4svh, 36px); }
.cover__art { grid-column: 8 / -1; grid-row: 2 / 5; align-self: center; justify-self: end; position: relative; z-index: 1; width: min(100%, 56svh, 37.5rem); aspect-ratio: 1315 / 1307; margin-right: clamp(0px, 2.4vw, 48px); }
.cover__markbox { position: absolute; inset: 0; }
.cover__mark { width: 100%; height: 100%; color: var(--purple); transform-origin: 47.22% 64.27%; }
.cover__echo { position: absolute; inset: 0; pointer-events: none; }
.cover__ring { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--purple); -webkit-mask-image: linear-gradient(#000 52%, transparent 88%); mask-image: linear-gradient(#000 52%, transparent 88%); }
.cover__ring path { fill: none; stroke: currentColor; stroke-width: 1px; }
.cover__ring--1 { transform: scale(1.3); opacity: .3; }
.cover__ring--2 { transform: scale(1.64); opacity: .14; }
.hero-go .cover__ring path { animation: clRing 1.3s var(--ease-io) .25s backwards; }
.hero-go .cover__ring--2 path { animation-delay: .42s; }
@keyframes clRing { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }

/* ---------- Chapters ---------- */
.ch { position: relative; padding-block: var(--sec); }
.chead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; margin-bottom: clamp(40px, 5.5vw, 92px); }
.chead__label { grid-column: 1 / span 3; }
.chead__title { grid-column: 4 / -1; text-align: right; }

/* About (slide 2) */
.ch--intro .wrap { display: grid; justify-items: center; text-align: center; }
.intro__label { justify-self: start; text-align: left; }
.intro__h { max-width: 18em; margin-top: clamp(24px, 4vw, 56px); }
.intro__rule { display: block; width: clamp(160px, 18vw, 280px); height: 1px; margin-top: clamp(32px, 4vw, 56px); background: var(--accent); transform-origin: 50% 50%; }
.intro__sum { max-width: 34em; margin-top: clamp(32px, 4vw, 56px); font: 400 clamp(1.125rem, 1rem + .35vw, 1.3rem)/1.5 var(--f-text); color: var(--w-88); text-wrap: balance; }
.intro__more { margin-top: clamp(24px, 2.6vw, 36px); }
.intro__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(40px, 6vw, 104px); width: 100%; max-width: 1080px; margin-top: clamp(48px, 6vw, 88px); text-align: left; }
.intro__cols p { font-size: 1.0625rem; line-height: 1.55; color: color-mix(in srgb, var(--fg) 86%, transparent); }
.intro__cols p:last-child { font-weight: 600; color: var(--fg); }

/* Technology index (home): the row in focus drives the preview */
.dx { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(36px, 5.5vw, 112px); align-items: start; }
.dx__list { border-top: 1px solid var(--rl); }
.dx__row { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 32px; align-items: center; column-gap: 18px; padding: clamp(15px, 1.5vw, 21px) 0; border-bottom: 1px solid var(--rl); color: var(--fg-3); transition: color .35s, padding-left .5s var(--ease); }
.dx__thumb { display: none; }
.dx__n { font: 500 .8125rem/1 var(--f-text); color: var(--ink); font-feature-settings: "tnum" 1; }
.dx__t { font: 400 clamp(1.35rem, .85rem + 1.3vw, 2.3rem)/1.12 var(--f-display); letter-spacing: -.022em; }
.dx__p { font: 500 .8125rem/1.3 var(--f-text); color: var(--ink); text-align: right; opacity: 0; transform: translateX(10px); transition: opacity .35s, transform .45s var(--ease); }
.dx__go { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cyan); color: var(--purple); transform: scale(0); transition: transform .45s var(--ease); }
.dx__go .arw { width: 12px; height: 12px; }
.dx__row.is-on, .dx__row:focus-visible { color: var(--fg); }
@media (hover: hover) { .dx__row:hover { color: var(--fg); } }
.dx__t { transition: transform .5s var(--ease); text-wrap: balance; }
.dx__row.is-on .dx__t, .dx__row:focus-visible .dx__t { transform: translateX(12px); }
@media (hover: hover) { .dx__row:hover .dx__t { transform: translateX(12px); } }
.dx__view { cursor: pointer; }
.links-locked .dx__view { cursor: default; }
@media (min-width: 1081px) { .dx__row { grid-template-columns: 52px minmax(0, 1fr) 32px; } .dx__p { display: none; } }
.dx__row.is-on .dx__p, .dx__row:focus-visible .dx__p { opacity: 1; transform: none; }
@media (hover: hover) { .dx__row:hover .dx__p { opacity: 1; transform: none; } }
.dx__row.is-on .dx__go, .dx__row:focus-visible .dx__go { transform: none; }
@media (hover: hover) { .dx__row:hover .dx__go { transform: none; } }
.dx__view { position: sticky; top: calc(var(--hdr) + 28px); display: grid; }
.dx__fig { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; }
.dx__fig.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.dx__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--panel); }
.dx__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.4s var(--ease); }
.dx__fig.is-on .dx__img img { transform: none; }
.dx__fig figcaption { display: grid; gap: 12px; padding-top: 24px; opacity: 0; transition: opacity .12s linear; }
.dx__fig.is-on figcaption { opacity: 1; transition: opacity .3s var(--ease) .08s; }
.dx__fn { font: 400 1.25rem/1.2 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.dx__fh { font: 400 var(--t-item)/1.2 var(--f-display); letter-spacing: -.018em; color: var(--fg); }
.dx__ff { margin-top: 6px; }
.dx__ff li { font-size: .875rem; color: var(--fg-2); }
.sol__more { margin-top: clamp(28px, 3vw, 44px); }

/* Services and the lifecycle line: drawn once when it enters the view, never tied to the scroll position */
.life { margin-bottom: clamp(36px, 4.5vw, 64px); }
.life__l { font: 500 .8125rem/1 var(--f-text); color: var(--fg-3); margin-bottom: 26px; }
.life__track { position: relative; }
.life__line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rl); -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); }
.life__line i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.5s var(--ease-io); }
.life__stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gut); }
.life__stages li { position: relative; padding-top: 24px; font: 400 var(--t-item)/1.2 var(--f-display); letter-spacing: -.015em; color: var(--fg-3); transition: color .5s calc(.1s + var(--i, 0) * .3s); }
.life__dot { position: absolute; left: 0; top: -6px; width: 13px; height: 13px; border-radius: 50%; background: var(--ground); box-shadow: inset 0 0 0 1.5px var(--accent); transition: background-color .45s calc(.1s + var(--i, 0) * .3s); }
.life__stages a { transition: color .25s; }
@media (hover: hover) { .life__stages a:hover { color: var(--ink); } }
.life__s { display: block; margin-top: 6px; font: 400 .8125rem/1.35 var(--f-text); letter-spacing: 0; color: var(--fg-3); }
.life.is-in .life__line i, .no-js .life__line i { transform: scaleX(1); }
.life.is-in .life__stages li, .no-js .life__stages li { color: var(--fg); }
.life.is-in .life__dot, .no-js .life__dot { background: var(--accent); }
.life--sm { margin-bottom: clamp(22px, 2.4vw, 32px); }
.life--sm .life__stages li { padding-top: 20px; font: 500 .8125rem/1.3 var(--f-text); letter-spacing: 0; }
/* As the way between the three service pages: the stages this service covers are lit, the others lead to their service. */
.life--nav { margin-bottom: 0; }
.life--nav.is-in .life__stages li:not(.is-current), .no-js .life--nav .life__stages li:not(.is-current) { color: var(--fg-2); }
.life--nav.is-in li:not(.is-current) .life__dot, .no-js .life--nav li:not(.is-current) .life__dot { background: var(--ground); }
.life--nav .life__line i { width: var(--lw, 100%); }
.svc3 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 48px; }
.svc3__c { position: relative; min-width: 0; }
.svc3__t a::after { content: ""; position: absolute; inset: 0; }
.svc3__c:nth-child(3) { grid-column: span 2; }
.svc3__img { display: block; height: clamp(220px, 19vw, 330px); overflow: hidden; border-radius: var(--r); background: var(--panel); }
.svc3__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
@media (hover: hover) { .svc3__c:hover .svc3__img img { transform: scale(1.04); } }
.svc3__t { margin-top: 24px; font: 400 var(--t-sub)/1.15 var(--f-display); letter-spacing: -.02em; }
.svc3__t a { background: linear-gradient(var(--cyan), var(--cyan)) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); }
@media (hover: hover) { .svc3__c:hover .svc3__t a { background-size: 100% 1px; } }
.svc3__h { margin-top: 10px; max-width: 30em; }
.svc3__c .plist { margin-top: 20px; }
.svc3__c:nth-child(3) .plist { columns: 2; column-gap: var(--gut); }
.svc3__c:nth-child(3) .plist li { break-inside: avoid; }
.svc3__c:nth-child(3) .plist li:nth-child(4) { border-bottom: 1px solid var(--rl); }

/* Why CyberLab (slide 4) */
.why { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.why__l { grid-column: 1 / span 4; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.why__h { font-size: var(--t-h3); }
.why__r { grid-column: 6 / -1; padding-left: clamp(28px, 3.6vw, 64px); border-left: 1px solid var(--accent); }
.why__i { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--gut); align-items: baseline; padding: clamp(18px, 1.8vw, 26px) 0; border-top: 1px solid var(--rl); }
.why__i:first-child { padding-top: 2px; border-top: 0; }
.why__i:last-child { padding-bottom: 2px; }
.why__i h3 { font: 600 1.0625rem/1.35 var(--f-text); color: var(--fg); }
.why__i p { font-size: 1rem; }

/* Regional presence (slide 26) */
.pres { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(36px, 5vw, 104px); align-items: center; }
.pres__map { position: relative; }
.pres__stage { position: relative; }
.pres__img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(transparent, #000 7%), linear-gradient(90deg, #000 91%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(transparent, #000 7%), linear-gradient(90deg, #000 91%, transparent); mask-composite: intersect; }
.pres__cov { position: absolute; transform: translate(-50%, -50%); font: 500 .8125rem/1 var(--f-text); letter-spacing: .01em; color: var(--fg-2); white-space: nowrap; }
.pres__routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pres__routes path { fill: none; stroke: var(--cyan); stroke-width: 1.6px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.pres__routes path:nth-child(3) { stroke-opacity: .5; }
.pres__map.is-in .pres__routes path, .is-cap .pres__routes path, .is-rm .pres__routes path { animation: clRoute 1.8s var(--ease-io) .3s forwards; }
.pres__map.is-in .pres__routes path:nth-child(2) { animation-delay: .8s; }
.pres__map.is-in .pres__routes path:nth-child(3) { animation-delay: 1.3s; }
.no-js .pres__routes path { stroke-dashoffset: 0; }
@keyframes clRoute { to { stroke-dashoffset: 0; } }
.pin { position: absolute; display: flex; align-items: center; gap: 8px; transform: translate(-6px, -50%); }
.pin i { position: relative; width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--cyan); }
.pin i::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid var(--cyan); opacity: 0; animation: clPing 2.6s var(--ease) infinite; }
.pin--riyadh i::after { animation-delay: .8s; }
.pin--dubai i::after { animation-delay: 1.6s; }
.pin b { padding: 5px 10px; border-radius: 999px; background: rgba(43, 10, 62, .82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); font: 500 .8125rem/1 var(--f-text); color: var(--white); white-space: nowrap; }
.pin--cairo { flex-direction: row-reverse; transform: translate(calc(-100% + 6px), -50%); }
.pin--riyadh { flex-direction: column; align-items: flex-start; transform: translate(-6px, -6px); }
.pin--dubai { flex-direction: column-reverse; align-items: flex-start; transform: translate(-6px, calc(-100% + 6px)); }
@keyframes clPing { 0% { opacity: .9; transform: scale(.4); } 80%, 100% { opacity: 0; transform: scale(1.6); } }
.pres__info > p + p { margin-top: 14px; }
.pres__lists { display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px; margin-top: clamp(32px, 3.5vw, 48px); }
.pres__h { margin-bottom: 12px; font: 500 .8125rem/1 var(--f-text); color: var(--fg-3); }
.has-lt { display: flex; justify-content: space-between; gap: 12px; }
.offices li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 11px 0; border-top: 1px solid var(--rl); }
.offices li:last-child { border-bottom: 1px solid var(--rl); }
.offices__c { font: 400 1.25rem/1.2 var(--f-display); letter-spacing: -.01em; color: var(--fg); }
.offices__k { grid-column: 1; font-size: .8125rem; color: var(--fg-3); }
.clock { font: 500 .9375rem/1 var(--f-text); color: var(--ink); font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }
.offices .clock { grid-column: 2; grid-row: 1 / span 2; }

/* Closing slide (slide 27) */
.closing { position: relative; isolation: isolate; overflow: clip; padding-block: var(--sec); }
.closing__wm { position: absolute; left: -15vw; bottom: -30%; z-index: -1; width: min(36vw, 560px); pointer-events: none; }
.closing__wm svg { width: 100%; height: auto; opacity: .18; }
.closing__wm path { fill: none; stroke: var(--accent); stroke-width: 1px; }
.closing__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: clamp(44px, 5vw, 80px); }
.closing__seal { grid-column: 1 / span 3; grid-row: 1; align-self: start; width: clamp(150px, 16vw, 240px); }
.closing__h { grid-column: 4 / -1; grid-row: 1; text-align: right; font: 400 var(--t-h1)/1.02 var(--f-display); letter-spacing: -.028em; color: var(--fg); }
.closing__cols { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; column-gap: clamp(24px, 3vw, 48px); align-items: start; }
.closing__cols p { font-size: 1rem; }
.closing__act { display: grid; justify-items: start; gap: 18px; padding-left: clamp(24px, 3vw, 48px); border-left: 1px solid var(--accent); }
.closing__mail { font: 500 .9375rem/1.3 var(--f-text); color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (hover: hover) { .closing__mail:hover { text-decoration-thickness: 2px; } }
.closing__mail, .bc__mail, .contact__mail { display: inline-block; padding: 10px 0; }

/* ---------- Footer: the back cover ---------- */
.bc { border-top: 1px solid var(--rule-w); }
.bc__in { padding-top: clamp(80px, 9vw, 140px); padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.bc__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.bc__mark { grid-column: 1 / span 3; align-self: start; width: clamp(62px, 6vw, 96px); color: var(--white); }
.bc__mark svg { width: 100%; height: auto; }
.bc__cols { grid-column: 4 / -1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.05fr); column-gap: var(--gut); row-gap: 36px; }
.bc__stack { display: grid; align-content: start; row-gap: 30px; }
.bc__col > summary { list-style: none; }
.bc__col > summary::-webkit-details-marker { display: none; }
@media (min-width: 721px) { .bc__col > summary { pointer-events: none; } }
.bc__h { margin-bottom: 14px; font: 500 .8125rem/1 var(--f-text); color: var(--w-60); }
.bc__links a { display: inline-block; padding: 5px 0; font-size: .9375rem; line-height: 1.35; color: var(--w-88); transition: color .2s; }
@media (hover: hover) { .bc__links a:hover { color: var(--cyan); } }
.bc__all { margin-top: 8px; }
.bc__all a { color: var(--w-60); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.bc__mail { display: inline-block; font: 400 1.2rem/1.3 var(--f-display); color: var(--cyan); }
@media (hover: hover) { .bc__mail:hover { text-decoration: underline; text-underline-offset: 4px; } }
.bc__offices { margin-top: 18px; }
.bc__offices li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rule-w); font-size: .9375rem; color: var(--w-88); }
.bc__cov { margin-top: 14px; font-size: .8125rem; color: var(--w-60); }
.bc__bottom { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 40px; row-gap: 28px; margin-top: clamp(72px, 9vw, 150px); }
.bc__word { width: clamp(190px, 24vw, 390px); color: var(--white); }
.bc__word svg { width: 100%; height: auto; }
.bc__line { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 32px; font-size: .8125rem; color: var(--w-60); }
.bc__util { display: inline-flex; align-items: center; gap: 22px; }
.bc__util a, .motion-toggle { display: inline-flex; align-items: center; min-height: 40px; color: var(--w-88); font-size: .8125rem; }
@media (hover: hover) { .bc__util a:hover, .motion-toggle:hover { color: var(--cyan); } }
.motion-toggle[aria-pressed="true"] { color: var(--cyan); }
.motion-toggle::before { content: ""; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; }
.motion-toggle[aria-pressed="true"]::before { background: currentColor; }

/* ---------- Inner pages: profile spread ---------- */
.spread { position: relative; isolation: isolate; overflow: clip; padding-top: calc(var(--hdr) + clamp(28px, 4.5vw, 72px)); padding-bottom: clamp(64px, 8vw, 128px); }
.spread__wm { position: absolute; right: max(-8vw, calc((100vw - var(--max)) / 2 - 8rem)); top: calc(var(--hdr) - min(9vw, 8rem)); z-index: 0; width: min(46vw, 45rem); opacity: .11; pointer-events: none; }
@media (max-width: 1080px) { .spread__wm { width: 92vw; right: -42vw; top: 24px; opacity: .08; } }
.spread__wm svg { width: 100%; height: auto; }
.spread__wm path { fill: none; stroke: var(--accent); stroke-width: 1px; }
.spread__in { z-index: 1; position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.spread__top { grid-column: 1 / span 5; grid-row: 1; display: grid; gap: clamp(28px, 3.5vw, 48px); align-content: start; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 500 .8125rem/1.4 var(--f-text); color: var(--fg-3); }
.crumbs a { padding: 6px 0; }
@media (hover: hover) { .crumbs a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } }
.crumbs__sep { opacity: 1; }
.crumbs [aria-current] { color: var(--fg-2); }
.spread__title { grid-column: 3 / -1; grid-row: 2; margin-top: clamp(36px, 5vw, 88px); text-align: right; font: 400 var(--t-h1)/1.03 var(--f-display); letter-spacing: -.028em; color: var(--fg); }
.spread__cols { grid-column: 1 / -1; grid-row: 3; margin-top: clamp(56px, 7vw, 120px); }
.spread__cols .plist { margin-top: 2px; }
.spread__col > p { max-width: 62ch; }
/* The opener photograph is a contained plate that straddles the seam into the next (purple) section:
   the band paints its own foot in that purple, so nothing overflows and no strip of cyan is left under the image. */
.spread__media { position: relative; margin-top: clamp(48px, 5.5vw, 88px); }
.spread__media img { width: 100%; height: auto; aspect-ratio: var(--plate-r); object-fit: cover; border-radius: var(--r); background: var(--panel); outline: 1px solid rgba(255, 255, 255, .12); outline-offset: -1px; }
.spread--media { --plate-r: 2; --plate-h: calc((min(100vw, var(--max)) - 2 * var(--pad)) / var(--plate-r)); padding-bottom: 0; background-image: linear-gradient(to bottom, transparent calc(100% - var(--plate-h) * .42), var(--purple) 0); }
.spread--index { padding-bottom: clamp(48px, 5vw, 72px); }
.spread__cols.rcols--1 { max-width: 46rem; }
.spread--life .spread__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 1080px) { .spread--media { --plate-r: 1.7778; } }
@media (max-width: 720px) { .spread--media { --plate-r: 1.5; } }
/* Desktop: label and headline share one row (as the chapter heads and the profile slides do), so the columns start inside the first screen on laptops. */
@media (min-width: 1081px) {
	.spread__top { display: contents; }
	.spread__top > .crumbs { grid-column: 1 / -1; grid-row: 1; }
	.spread__label { grid-column: 1 / span 2; grid-row: 2; align-self: start; margin-top: clamp(28px, 3.5vw, 48px); }
	.spread__title { margin-top: clamp(28px, 3.5vw, 48px); }
	.spread__cols { margin-top: clamp(40px, min(7vw, 8svh), 120px); }
	.spread--tech .spread__label { grid-column: 1 / span 3; }
	.spread--tech .spread__title { grid-column: 4 / -1; }
}

/* Detail pages: the dash label on the left is the section's heading, content on the right (the profile slide's own pattern) */
.sec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; }
.sec__l { grid-column: 1 / span 3; display: grid; gap: clamp(24px, 2.6vw, 40px); align-content: start; }
.sec__c { grid-column: 4 / -1; min-width: 0; }
.secs > .sec + .sec { margin-top: clamp(64px, 7vw, 112px); }
@media (max-width: 1080px) {
	.sec { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
	.sec__l, .sec__c { grid-column: 1; }
}

/* Generic blocks inside inner pages */
.blk { padding-block: var(--sec); }
.blk--end { padding-bottom: 0; }
.blk--end .irows .irow:last-child { border-bottom: 0; }
.blk--index { padding-top: clamp(40px, 4.4vw, 64px); }
.blk__g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.blk__r { grid-column: 4 / -1; }
.media-band { position: relative; overflow: hidden; border-radius: var(--r); background: var(--panel); }
.media-band img { width: 100%; height: 100%; object-fit: cover; }
.prose { max-width: 36em; }
.prose p { color: var(--fg-2); }
.prose p + p { margin-top: 1.1em; }
.prose h2 { margin: 2em 0 .6em; font: 400 var(--t-sub)/1.2 var(--f-display); letter-spacing: -.02em; color: var(--fg); }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Index rows (archives): number, title, meta, arrow, image */
.irows { border-top: 1px solid var(--rl); }
.irows__h { margin-bottom: 18px; }
.irow { position: relative; display: grid; grid-template-columns: 64px minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); align-items: start; column-gap: var(--gut); padding: clamp(24px, 2.6vw, 38px) 0; border-bottom: 1px solid var(--rl); }
.irow__n { font: 500 .8125rem/1.6 var(--f-text); color: var(--ink); font-feature-settings: "tnum" 1; }
.irow__t { font: 400 var(--t-row)/1.1 var(--f-display); letter-spacing: -.025em; }
.irow__t a::after { content: ""; position: absolute; inset: 0; }
.irow__t a { transition: color .25s; }
@media (hover: hover) { .irow:hover .irow__t a { color: var(--ink); } }
.irow__d { display: grid; gap: 14px; }
.irow__img { position: relative; overflow: hidden; border-radius: var(--r); aspect-ratio: 3 / 2; background: var(--panel); }
/* The row is one link: the disc on its picture says so at rest and fills on hover. */
.irow__go { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--white); color: var(--purple); transition: background-color .3s, transform .45s var(--ease); }
.irow__go .arw { width: 12px; height: 12px; }
.irow:focus-within .irow__go { background: var(--cyan); transform: translateX(3px); }
@media (hover: hover) { .irow:hover .irow__go { background: var(--cyan); transform: translateX(3px); } }
/* Compact rows inside a label-left section ("Where it fits") */
.irows--fit .irow { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); align-items: center; padding: clamp(18px, 2vw, 28px) 0; }
.irow__b { display: grid; gap: 10px; }
.irow__b .irow__n { line-height: 1; margin-bottom: 4px; }
.irow__b p { max-width: 34em; color: var(--fg-2); }
.irows--fit .irow__t { font-size: var(--t-sub); }
.irow__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
@media (hover: hover) { .irow:hover .irow__img img { transform: scale(1.05); } }

/* The three services as text under the lifecycle line (1 / 1 / 2: Technical Support spans Operation and Optimization) */
.svcl__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gut); }
.svcl__c { position: relative; display: grid; grid-template-rows: auto 1fr auto; align-content: start; gap: 10px; }
.svcl__c:nth-child(3) { grid-column: span 2; }
.svcl__t { font: 400 var(--t-sub)/1.12 var(--f-display); letter-spacing: -.02em; color: var(--fg); transition: color .25s; }
.svcl__t a::after { content: ""; position: absolute; inset: 0; }
.svcl__c p { max-width: 24em; font-size: .9375rem; color: var(--fg-2); }
.svcl__c:nth-child(3) p { max-width: 36em; }
.svcl__go { display: grid; place-items: center; align-self: end; width: 34px; height: 34px; margin-top: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 45%, transparent); color: var(--ink); transition: background-color .3s, color .3s, box-shadow .3s, transform .45s var(--ease); }
.svcl__go .arw { width: 12px; height: 12px; }
.svcl__c:focus-within .svcl__t { color: var(--ink); }
@media (hover: hover) { .svcl__c:hover .svcl__t { color: var(--ink); } }
.svcl__c:focus-within .svcl__go { background: var(--cyan); color: var(--purple); box-shadow: none; transform: translateX(4px); }
@media (hover: hover) { .svcl__c:hover .svcl__go { background: var(--cyan); color: var(--purple); box-shadow: none; transform: translateX(4px); } }
/* As ruled rows (beside an image, and on tablets and phones) */
.svcl--rows .svcl__cols { grid-template-columns: minmax(0, 1fr); justify-self: stretch; }
.svcl--rows .svcl__c { grid-column: auto; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 20px; padding: 18px 0; border-top: 1px solid var(--rl); }
.svcl--rows .svcl__c:last-child { border-bottom: 1px solid var(--rl); }
.svcl--rows .svcl__t { font-size: var(--t-item); }
.svcl--rows .svcl__c p { grid-column: 1; max-width: none; }
.svcl--rows .svcl__go { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
.svcl--rows { justify-self: stretch; width: 100%; }

/* Prev / next: closes the last content section of a detail page, on that section's ground */
.pn { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(56px, 6vw, 96px); border-top: 1px solid var(--rl); }
.pn__a { display: grid; align-content: start; gap: 10px; padding: clamp(24px, 2.8vw, 40px) 0; }
.pn__a--next { justify-items: end; text-align: right; padding-left: var(--gut); border-left: 1px solid var(--rl); }
.pn__a--prev { padding-right: var(--gut); }
.pn small { display: inline-flex; align-items: center; gap: 10px; font: 500 .8125rem/1 var(--f-text); color: var(--fg-3); }
.pn small .arw { width: 11px; height: 11px; color: var(--ink); transition: transform .45s var(--ease); }
.pn .arw--back { transform: rotate(180deg); }
@media (hover: hover) { .pn__a--prev:hover .arw--back { transform: rotate(180deg) translateX(4px); } }
@media (hover: hover) { .pn__a--next:hover .arw { transform: translateX(4px); } }
.pn b { font: 400 var(--t-sub)/1.15 var(--f-display); letter-spacing: -.02em; color: var(--fg); transition: color .25s; }
.pn__n { margin-right: .7em; font: 500 .8125rem/1 var(--f-text); font-style: normal; letter-spacing: 0; color: var(--ink); font-feature-settings: "tnum" 1; vertical-align: .5em; }
@media (hover: hover) { .pn__a:hover b { color: var(--ink); } }

/* Hub diagram (Integration) */
.hubmap { position: relative; margin: 0 auto; max-width: 1180px; overflow: hidden; border-radius: var(--r-l); background: radial-gradient(120% 95% at 50% 35%, #3d1456 0%, #24082f 58%, #160420 100%); }
.hubmap img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent), linear-gradient(transparent, #000 13%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent), linear-gradient(transparent, #000 13%); mask-composite: intersect; }
.hubmap__labels { position: absolute; inset: 0 0 auto; aspect-ratio: 1536 / 1024; }
.hubmap__l { position: absolute; padding: 8px 14px; border-radius: 999px; background: var(--white); color: var(--purple); font: 500 .875rem/1 var(--f-text); white-space: nowrap; transform: translate(-50%, -50%); box-shadow: 0 10px 30px -10px rgba(10, 2, 16, .5); }
.hubmap__l--left { transform: translate(0, -50%); }
.hubmap__l--right { transform: translate(-100%, -50%); }
.hubmap__l--top { transform: translate(-50%, 0); }
.hubmap figcaption { max-width: 36em; padding: 4px 24px 26px; font-size: .875rem; color: var(--w-72); }

/* Lifecycle track used on service pages */

/* Contact */
.contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--gut); row-gap: clamp(32px, 3.4vw, 52px); }
.contact__form { grid-column: 1 / span 7; grid-row: 1; align-self: start; padding: clamp(24px, 3vw, 44px); border-radius: var(--r-l); background: var(--white); color: var(--purple); }
.contact__next { grid-column: 1 / span 7; grid-row: 2; align-self: start; }
.contact__side { grid-column: 8 / -1; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 40px; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-l); overflow: hidden; }
.form__h { font: 400 var(--t-row)/1.1 var(--f-display); letter-spacing: -.025em; color: var(--purple); }
.form__intro { max-width: 36em; margin-top: 10px; color: rgba(43, 10, 62, .72); font-size: .9375rem; }
.contact__form .form-msg:empty { display: none; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font: 500 .8125rem/1.2 var(--f-text); color: rgba(43, 10, 62, .8); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 14px 16px; border: 0; border-radius: 12px; background: #f3eff6; color: var(--purple); box-shadow: inset 0 0 0 1px rgba(43, 10, 62, .45); font-size: 1rem; transition: box-shadow .2s, background-color .2s; }
.field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.field ::placeholder { color: #6f6279; opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: var(--white); box-shadow: inset 0 0 0 2px var(--purple); }
.field [aria-invalid="true"], .field [aria-invalid="true"]:focus { box-shadow: inset 0 0 0 2px #c0264b; }
.field__err { font: 500 .8125rem/1.35 var(--f-text); color: #b0173d; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 46px; }
.field select:has(option[value=""]:checked) { color: #6f6279; }
.field select option { color: var(--purple); }
.field--select { position: relative; }
.field--select::after { content: ""; position: absolute; right: 20px; bottom: 22px; width: 9px; height: 9px; border-right: 1.5px solid var(--purple); border-bottom: 1.5px solid var(--purple); transform: rotate(45deg); pointer-events: none; }
.form__foot { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 16px; margin-top: 24px; }
.form__foot .btn { justify-self: start; }
.form__note { max-width: 30em; font-size: .8125rem; color: rgba(43, 10, 62, .7); }
.form__note a { text-decoration: underline; text-underline-offset: 3px; }
.form-msg { margin-top: 16px; font-size: .9375rem; color: var(--purple); }
.form__foot .form-msg { grid-column: 1 / -1; margin-top: 0; }
.form-alert { margin-top: 18px; padding: 12px 16px; border-radius: 12px; background: #fdecef; color: #b0173d; font-size: .9375rem; }
.form__foot .form-msg:empty { display: none; }
.form-msg a { text-decoration: underline; text-underline-offset: 3px; }
.btn:disabled { opacity: .6; cursor: progress; pointer-events: none; }
.form-done { display: grid; gap: 22px; align-content: center; min-height: clamp(220px, 26vw, 360px); }
.form-done .label { color: var(--purple); }
.form-done__t { max-width: 20em; font: 400 var(--t-sub)/1.2 var(--f-display); letter-spacing: -.02em; color: var(--purple); text-wrap: balance; }
.form-msg.is-ok { padding: 14px 16px; border-radius: 12px; background: #e3f6ff; }
.form-msg.is-err { color: #b0173d; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.next ol { display: grid; gap: 18px; counter-reset: nx; }
.next li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px; }
.next li::before { counter-increment: nx; content: counter(nx, decimal-leading-zero); grid-row: 1 / span 2; font: 500 .8125rem/1.6 var(--f-text); color: var(--ink); }
.next b { font: 600 1rem/1.4 var(--f-text); color: var(--fg); }
.next span { font-size: .9375rem; color: var(--fg-2); }
.next span a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.contact__next ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); }
.contact__next li { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; padding-top: 16px; border-top: 1px solid var(--rl); }
.contact__next li::before { grid-row: auto; line-height: 1; margin-bottom: 4px; }
.contact__next b { min-height: 2.8em; }

/* About page photo bands */

/* 404 */
.nf { min-height: 100svh; display: grid; align-items: center; }
.nf__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 32px; padding-top: calc(var(--hdr) + 40px); padding-bottom: 64px; }
.nf__mark { grid-column: 1 / span 3; width: clamp(90px, 12vw, 180px); color: var(--purple); }
.nf__t { grid-column: 4 / -1; text-align: right; font: 400 var(--t-h1)/1.03 var(--f-display); letter-spacing: -.028em; }
.nf__body { grid-column: 4 / -1; display: grid; justify-items: end; gap: 24px; text-align: right; }
/* The technologies as the profile's ruled list (two columns), not as pills. */
.nf__routes { grid-column: 7 / -1; margin-top: clamp(20px, 3vw, 44px); }
.nf__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gut); }
.nf__list li:nth-last-child(2) { border-bottom: 1px solid var(--rl); }

/* ---------- Inner page components ---------- */
.plist--links a { display: block; transition: color .2s; }
@media (hover: hover) { .plist--links a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } }
.rcol-h--gap { margin-top: 32px; }
.blk--prose { padding-top: clamp(56px, 6vw, 96px); }
.spread--plain { padding-bottom: clamp(48px, 5vw, 72px); }
.spread--plain .spread__cols { margin-top: clamp(28px, 3vw, 44px); }

/* Services page: one block per service */
.svcx__g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: center; }
.svcx__media { grid-column: 1 / span 6; }
.svcx__txt { grid-column: 8 / -1; }
.svcx--flip .svcx__media { grid-column: 7 / -1; grid-row: 1; }
.svcx--flip .svcx__txt { grid-column: 1 / span 5; grid-row: 1; }
.svcx__img { aspect-ratio: 1 / 1; }
.svcx__obj { padding: clamp(16px, 2vw, 32px); border-radius: var(--r-l); background: radial-gradient(120% 95% at 50% 35%, #3d1456 0%, #24082f 58%, #160420 100%); }
.svcx__obj img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent), linear-gradient(transparent, #000 13%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent), linear-gradient(transparent, #000 13%); mask-composite: intersect; }
.svcx__h { margin-top: 28px; font-size: var(--t-h3); }
.svcx__scope { margin-top: 36px; max-width: 30rem; }
.svcx__more { margin-top: 32px; }

/* The eleven technologies as a ruled, numbered list of links (service pages) */
.dlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gut); }
.dlist li { border-bottom: 1px solid var(--rl); }
.dlist li:nth-child(-n+2) { border-top: 1px solid var(--rl); }
.dlist a { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; align-items: baseline; padding: clamp(14px, 1.5vw, 20px) 0; font: 400 1.25rem/1.25 var(--f-display); letter-spacing: -.01em; color: var(--fg); transition: color .25s; }
.dlist__n { font: 500 .8125rem/1 var(--f-text); letter-spacing: 0; color: var(--ink); font-feature-settings: "tnum" 1; }
.dlist__all a { color: var(--ink); }
.dlist .arw { align-self: start; width: 12px; height: 12px; margin: .4em 0 0 16px; color: var(--ink); opacity: .5; transition: transform .45s var(--ease), opacity .25s; }
@media (hover: hover) { .dlist a:hover { color: var(--ink); } }
@media (hover: hover) { .dlist a:hover .arw { opacity: 1; transform: translateX(4px); } }

/* Image beside text (About, Technologies) */
.hands { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: center; }
.hands__img { grid-column: 1 / span 6; aspect-ratio: 1 / 1; }
.hands__txt { grid-column: 8 / -1; display: grid; gap: 26px; justify-items: start; }
.hands__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 8px; }
.hands--nat .hands__img { aspect-ratio: auto; }
.hands--nat .hands__img img { height: auto; }

/* Contact: the cards straddle the seam under the opener */
.spread--contact { padding-bottom: clamp(104px, 12vw, 176px); }
.blk--contact { position: relative; display: flow-root; padding-top: 0; }
.blk--contact .contact { position: relative; z-index: 2; margin-top: calc(-1 * clamp(44px, 5.5vw, 80px)); }
.contact__mail { font: 400 var(--t-item)/1.25 var(--f-display); letter-spacing: -.015em; color: var(--ink); word-break: break-word; }
@media (hover: hover) { .contact__mail:hover { text-decoration: underline; text-underline-offset: 4px; } }
/* Foot of the details card: the tagline, then a support engineer at work (a contained plate, desktop only) */
.contact__foot { display: grid; row-gap: clamp(20px, 2.4vw, 32px); margin-top: auto; padding-top: 8px; }
.contact__tag { font: 400 var(--t-item)/1.14 var(--f-display); letter-spacing: -.02em; color: var(--white); }
.contact__pic { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--purple-2); }
.contact__pic img { width: 100%; height: 100%; object-fit: cover; }
.nf__lead { max-width: 30em; color: var(--ink-80); }
.nf__secs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 26px; font: 500 .9375rem/1.2 var(--f-text); }
.nf__secs a { padding: 8px 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (hover: hover) { .nf__secs a:hover { text-decoration-thickness: 2px; } }
.pager { margin-top: 40px; }

/* Numbered statements in two columns (a technology's challenge) */
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gut); counter-reset: fg; }
.fgrid li { counter-increment: fg; display: grid; grid-template-columns: 2.6em minmax(0, 1fr); align-items: baseline; padding: clamp(18px, 2vw, 28px) 0; border-bottom: 1px solid var(--rl); font: 400 var(--t-item)/1.2 var(--f-display); letter-spacing: -.015em; color: var(--fg); text-wrap: balance; }
.fgrid li:nth-child(-n+2) { border-top: 1px solid var(--rl); }
.fgrid li::before { content: counter(fg, decimal-leading-zero); font: 500 .8125rem/1 var(--f-text); letter-spacing: 0; color: var(--ink); font-feature-settings: "tnum" 1; }

/* Delivery steps on a line (service pages). The line draws once when the section enters the view. */
/* Wide content (the step line, the hub) keeps the label rail only where its columns stay comfortable */
@media (max-width: 1319px) {
	.sec--wide { grid-template-columns: minmax(0, 1fr); row-gap: clamp(32px, 4vw, 56px); }
	.sec--wide .sec__l, .sec--wide .sec__c { grid-column: 1; }
}
.steps { --n: 5; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: var(--gut); }
.steps::before { content: ""; position: absolute; left: 6px; right: calc((100% - (var(--n) - 1) * var(--gut)) / var(--n) - 6px); top: 6px; height: 1px; background: var(--accent); transform-origin: 0 50%; }
.steps li { position: relative; display: grid; align-content: start; row-gap: 10px; padding-top: 38px; }
.steps li::before { content: ""; position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); }
.steps__n { font: 500 .8125rem/1 var(--f-text); color: var(--ink); font-feature-settings: "tnum" 1; }
.steps__t { font: 400 var(--t-item)/1.2 var(--f-display); letter-spacing: -.015em; color: var(--fg); }
.steps__d { max-width: 17em; font-size: .9375rem; line-height: 1.5; color: var(--fg-2); }
.js .steps[data-rv]:not(.is-in) { opacity: 1; transform: none; }
.js .steps[data-rv]::before { transition: transform 1.3s var(--ease-io); }
.js .steps[data-rv]:not(.is-in)::before { transform: scaleX(0); }
.js .steps[data-rv] li { transition: opacity .6s var(--ease) calc(.15s + var(--i, 0) * .16s), transform .8s var(--ease) calc(.15s + var(--i, 0) * .16s); }
.js .steps[data-rv]:not(.is-in) li { opacity: 0; transform: translateY(14px); }

@media (max-width: 1080px) {
	.contact { grid-template-rows: none; }
	.contact__form, .contact__next, .contact__side { grid-column: 1 / -1; grid-row: auto; }
	.contact__foot { display: none; }
	.svcx__media, .svcx__txt, .svcx--flip .svcx__media, .svcx--flip .svcx__txt { grid-column: 1 / -1; grid-row: auto; }
	.svcx__txt { margin-top: 40px; }
	.svcx__scope { max-width: none; }
	.svcx__img { aspect-ratio: 16 / 9; }
	.hands__img, .hands__txt { grid-column: 1 / -1; }
	.hands__img { aspect-ratio: 16 / 9; }
	.hands--nat .hands__img { aspect-ratio: auto; }
	.hands__txt { margin-top: 40px; }
}
@media (max-width: 900px) {
	/* Steps as rows: number, step and its line side by side; one short line between dots */
	.steps { grid-template-columns: minmax(0, 1fr); }
	.steps::before { display: none; }
	.steps li { grid-template-columns: 2.4em minmax(0, 13rem) minmax(0, 1fr); column-gap: var(--gut); align-items: baseline; row-gap: 6px; padding: 0 0 24px 34px; }
	.steps li::before { top: 5px; }
	.steps li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 18px; bottom: -5px; width: 1px; background: var(--accent); }
	.steps li:last-child { padding-bottom: 0; }
	.steps__d { max-width: none; }
}
@media (max-width: 720px) {
	.fgrid, .dlist { grid-template-columns: minmax(0, 1fr); }
	.fgrid li:nth-child(2), .dlist li:nth-child(2) { border-top: 0; }
	.dlist a { font-size: 1.125rem; }
	.steps li { grid-template-columns: 2.4em minmax(0, 1fr); }
	.steps__d { grid-column: 2; }
	.contact__next ol { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.contact__next li { grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px; padding-top: 0; border-top: 0; }
	.contact__next li::before { grid-row: 1 / span 2; line-height: 1.6; margin-bottom: 0; }
	.contact__next b { min-height: 0; }
}

/* On purple grounds the glowing renders need no plate */
[data-ground="purple"] .svcx__obj { padding: 0; border-radius: 0; background: none; }
[data-ground="purple"] .hubmap { overflow: visible; border-radius: 0; background: none; }
[data-ground="purple"] .hubmap figcaption { padding-bottom: 0; color: var(--fg-3); }

/* ---------- Technologies (October 2026 copy deck) ---------- */
/* Header: the Technologies panel sets the four groups side by side; group headings are labels, not links */
.sub--groups { left: 50%; width: min(61.25rem, calc(100vw - 2 * var(--pad))); transform: translate(-50%, 8px); }
.has-sub.is-open .sub--groups { transform: translate(-50%, 0); }
@media (hover: hover) and (min-width: 1081px) { .has-sub:hover .sub--groups { transform: translate(-50%, 0); } }
.sub__groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 4px; }
.sub--services .sub__groups { display: block; }
.sub__gh { padding: 12px 12px 4px; font: 500 .75rem/1.3 var(--f-text); color: var(--cyan-ink); }
.menu__gh { padding: 12px 0 0; font: 500 .8125rem/1.3 var(--f-text); color: var(--ink-64); }
.menu__sub ul + .menu__gh { margin-top: 8px; border-top: 1px solid var(--rule-i); padding-top: 16px; }

/* Openers: the eyebrow's group line is quieter than the name under it; the opener's own actions */
.label__g { color: var(--fg-3); }
.spread__act { display: grid; justify-items: start; gap: 18px; }
.chead__intro { grid-column: 7 / -1; justify-self: end; max-width: 34rem; margin-top: clamp(24px, 2.4vw, 36px); font-size: 1.0625rem; line-height: 1.55; color: var(--fg-2); }

/* What we offer, key focus areas: a name and its line, ruled, two columns */
.ogrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gut); }
.ogrid li { display: grid; align-content: start; row-gap: 8px; padding: clamp(20px, 2vw, 28px) 0; border-bottom: 1px solid var(--rl); }
.ogrid li:nth-child(-n+2) { border-top: 1px solid var(--rl); }
.ogrid__t { font: 400 var(--t-item)/1.2 var(--f-display); letter-spacing: -.015em; color: var(--fg); }
.ogrid:not(.ogrid--env) li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ogrid p { max-width: 34em; font-size: 1rem; line-height: 1.5; color: var(--fg-2); }
/* Integration: the five environments under the hub diagram */
.ogrid--env { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: clamp(36px, 3.6vw, 56px); }
.ogrid--env li:nth-child(-n+5) { border-top: 1px solid var(--rl); }
.ogrid--env .ogrid__t { font-size: var(--t-sub); min-height: 2.3em; }
.ogrid--env p { font-size: .9375rem; }

/* How we deliver: three steps, each leading to the service that does the work */
.steps__t a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease), color .25s; }
@media (hover: hover) { .steps__t a:hover { color: var(--ink); background-size: 100% 1px; } }
.steps--tech .steps__d { max-width: 24em; }

/* Business value beside "Ideal for" */
.vi { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; }
.vi__list { grid-column: 1 / span 7; }
.vi__ideal { grid-column: 9 / -1; display: grid; row-gap: 14px; padding: clamp(24px, 2.6vw, 40px); border-radius: var(--r-l); background: var(--panel); }
.vi__ih { font: 400 var(--t-sub)/1.15 var(--f-display); letter-spacing: -.02em; color: var(--fg); }
.vi__ideal p { font-size: 1.0625rem; line-height: 1.55; color: var(--fg-2); }

/* Technology rows: "Learn more" under the line; home preview: the same words under its list */
.irow__more, .dx__more { display: inline-flex; align-items: center; gap: 8px; font: 500 .8125rem/1 var(--f-text); color: var(--ink); }
.irow__more { margin-top: 4px; }
.dx__more { margin-top: 4px; font-size: .875rem; }
.irow__more .arw, .dx__more .arw { width: 11px; height: 11px; transition: transform .4s var(--ease); }
@media (hover: hover) { .irow:hover .irow__more .arw { transform: translateX(4px); } }
.tgroup__line { max-width: 20em; font-size: .9375rem; line-height: 1.5; color: var(--fg-2); }

/* About: the four statements of the approach, each led by its name */
.intro__cols--st p:last-child { font-weight: 400; color: color-mix(in srgb, var(--fg) 86%, transparent); }
.intro__cols--st b { font-weight: 600; color: var(--fg); }

/* Official partners (home): the four logos in ruled cells, the client's text under them */
.plogo { display: block; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pwall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rl); border-left: 1px solid var(--rl); }
.pwall li { display: grid; place-items: center; min-height: clamp(120px, 10vw, 168px); padding: 24px clamp(16px, 2vw, 32px); border-right: 1px solid var(--rl); border-bottom: 1px solid var(--rl); color: var(--fg); }
.pwall .plogo { width: 100%; max-width: calc(clamp(132px, 11vw, 176px) * var(--s, 1)); height: calc(clamp(26px, 2.2vw, 34px) * var(--s, 1)); }
.pwall__text { margin-top: clamp(32px, 3.4vw, 52px); }
.pwall__text p { max-width: 36em; }
@media (forced-colors: active) { .plogo { forced-color-adjust: none; background: CanvasText; } }

/* ---------- Motion: reveals (main.js adds .is-in) ---------- */
/* Entrances, each once and on the same curve, by kind of content: headlines rise line by line behind a mask,
   rules draw, list rows fade in place, photographs are uncovered from the top, everything else rises 14px. */
.js [data-rv]:not(.is-in) { opacity: 0; transform: translateY(14px); }
.js [data-rv] { transition: opacity .7s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 60ms); }
.js [data-rv="fade"]:not(.is-in) { transform: none; }
.js [data-rv="rule"]:not(.is-in) { opacity: 1; transform: scaleX(0); }
.js .irow[data-rv]:not(.is-in), .js .fgrid li[data-rv]:not(.is-in), .js .dlist li[data-rv]:not(.is-in), .js .why__i[data-rv]:not(.is-in) { transform: none; }
.js .irow[data-rv], .js .fgrid li[data-rv], .js .dlist li[data-rv], .js .why__i[data-rv] { transition: opacity .6s linear; transition-delay: calc(var(--d, 0) * 60ms); }
/* The clip sits on the picture, never on the observed element: a fully clipped target reports no intersection and would stay hidden. */
.js [data-rv="wipe"]:not(.is-in) { opacity: 1; transform: none; }
.js .media-band[data-rv="wipe"]:not(.is-in), .js [data-rv="wipe"]:not(.is-in) .media-band { background-color: transparent; }
.js [data-rv="wipe"] img { clip-path: inset(0 0 0 0); transition: clip-path 1s var(--ease-io), transform 1.5s var(--ease); }
.js [data-rv="wipe"]:not(.is-in) img { clip-path: inset(0 0 100% 0); transform: scale(1.1); }
.js [data-rv] .ln > span { transition: transform 1.1s var(--ease); }
.js [data-rv]:not(.is-in) .ln > span { transform: translateY(105%); }
.js [data-rv]:has(.ln):not(.is-in) { opacity: 1; transform: none; }
.js [data-rv] .ln:nth-child(2) > span { transition-delay: .07s; }
.js [data-rv] .ln:nth-child(3) > span { transition-delay: .14s; }
[data-rv-d="1"] { --d: 1; } [data-rv-d="2"] { --d: 2; } [data-rv-d="3"] { --d: 3; }

/* Home hero entrance (after the preloader hands over) */
.js .cover__h1 .ln > span { transition: transform 1.15s var(--ease); }
.js .cover__h1 .ln:nth-child(2) > span { transition-delay: .08s; }
.js .cover__label, .js .cover__body, .js .cover__tag { transition: opacity .9s var(--ease) .25s, transform 1s var(--ease) .25s; }
.js .cover__art { transition: opacity 1s var(--ease), transform 1.4s var(--ease); }
html.js:not(.hero-go) .cover__label { opacity: 0; transform: translateY(18px); }
html.js:not(.hero-go) .cover__art { opacity: 0; transform: scale(.94); }

/* States that show everything at once */
.is-cap [data-rv="wipe"] img, .is-rm [data-rv="wipe"] img, .is-failsafe [data-rv="wipe"] img { clip-path: none !important; transform: none !important; }
.is-cap .steps li, .is-rm .steps li, .is-failsafe .steps li, .is-cap .steps::before, .is-rm .steps::before, .is-failsafe .steps::before, .is-cap [data-rv], .is-rm [data-rv], .is-failsafe [data-rv], .is-cap [data-rv] .ln > span, .is-rm [data-rv] .ln > span, .is-failsafe [data-rv] .ln > span { opacity: 1 !important; transform: none !important; transition: none !important; }
.is-failsafe .cover__h1 .ln > span, .is-failsafe .cover__label, .is-failsafe .cover__body, .is-failsafe .cover__art, .is-failsafe .cover__tag { opacity: 1 !important; transform: none !important; }
.is-cap *, .is-cap *::before, .is-cap *::after, .is-rm *, .is-rm *::before, .is-rm *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
html.is-rm::view-transition-group(*), html.is-rm::view-transition-old(*), html.is-rm::view-transition-new(*) { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1320px) {
	.hdr__link { padding-inline: 11px; }
	.hdr__item.has-sub .hdr__link { padding-right: 24px; }
}
@media (max-width: 1180px) {
	.hdr .btn .btn__label { font-size: .875rem; }
}
@media (max-width: 1080px) {
	:root { --hdr: 72px; }
	.hdr__nav, .hdr__act .btn { display: none; }
	.hdr__menu { display: inline-flex; }
	.logo__mark { width: 28px; }
	.logo__word { width: 96px; }


	.chead { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
	.chead__label, .chead__title { grid-column: 1; text-align: left; }
	.dx { grid-template-columns: minmax(0, 1fr); }
	.dx__view { display: none; }
	.dx__row { grid-template-columns: 64px 40px minmax(0, 1fr) 32px; grid-template-areas: "th n t go" "th n p go"; row-gap: 6px; padding-block: 14px; color: var(--fg); }
	.dx__row.is-on .dx__t { transform: none; }
	@media (hover: hover) { .dx__row:hover .dx__t { transform: none; } }
	.dx__thumb { grid-area: th; display: block; width: 64px; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-s); background: var(--panel); }
	.dx__thumb img { width: 100%; height: 100%; object-fit: cover; }
	.dx__n { grid-area: n; padding-left: 16px; }
	.dx__t { grid-area: t; font-size: clamp(1.15rem, .9rem + 1vw, 1.5rem); }
	.dx__p { grid-area: p; text-align: left; opacity: 1; transform: none; }
	.dx__go { grid-area: go; transform: none; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rl); }
	.svc3 { grid-template-columns: 1fr 1fr; }
	.svc3__c:nth-child(3) { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gut); align-content: start; }
	.svc3__c:nth-child(3) .svc3__img { grid-column: 1; grid-row: 1 / span 4; height: 100%; min-height: 240px; }
	.svc3__c:nth-child(3) > :not(.svc3__img) { grid-column: 2; }
	.svc3__c:nth-child(3) .svc3__t { margin-top: 0; }
	.svc3__c:nth-child(3) .plist { columns: 1; }
	.svc3__c:nth-child(3) .plist li:nth-child(4) { border-bottom: 0; }
	.why__l { grid-column: 1 / -1; flex-direction: column; gap: 24px; margin-bottom: 40px; }
	.why__r { grid-column: 1 / -1; padding-left: 0; border-left: 0; padding-top: 36px; border-top: 1px solid var(--cyan); }
	.pres { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
	.closing__seal { grid-column: 1 / -1; }
	.closing__h, .closing__cols { grid-column: 1 / -1; text-align: left; }
	.closing__h { grid-row: 2; }
	.closing__cols { grid-template-columns: 1fr 1fr; row-gap: 32px; }
	.closing__act { grid-column: 1 / -1; padding-left: 0; border-left: 0; padding-top: 28px; border-top: 1px solid var(--accent); }
	.closing__wm { display: none; }

	.spread__top { grid-column: 1 / -1; }
	.spread__title { grid-column: 1 / -1; text-align: left; }
	.blk__r { grid-column: 1 / -1; }
	.irow { grid-template-columns: 48px minmax(0, 1fr) minmax(0, 300px); grid-template-rows: auto 1fr; row-gap: 12px; }
	.irow__d { grid-column: 2; grid-row: 2; align-self: start; }
	.irow__img { grid-column: 3; grid-row: 1 / span 2; }
	.irows--fit .irow { grid-template-rows: none; }
	/* Compact rows keep their two columns: the picture stays beside the text, never pushed into a third column */
	.irows--fit .irow__img { grid-column: 2; grid-row: auto; }
	.spread--life .spread__cols { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
	.spread--life .spread__cols > * { padding: 0; border: 0; }
	.bc__mark { grid-column: 1 / -1; margin-bottom: 44px; }
	.bc__cols { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nf__mark, .nf__t, .nf__body, .nf__routes { grid-column: 1 / -1; text-align: left; justify-items: start; }
	.nf__secs { justify-content: flex-start; }
}
@media (max-width: 900px), (max-width: 1080px) and (orientation: portrait) {
	.cover__in { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; min-height: 0; padding-top: calc(var(--hdr) + 30px); padding-bottom: 24px; }
	.cover__label, .cover__h1, .cover__body { grid-column: 1; grid-row: auto; }
	.cover__tag { grid-column: 1; grid-row: 4; align-self: end; justify-self: start; margin-bottom: 8px; font-size: clamp(1rem, 2.6vw, 1.3rem); }
	.cover__art { grid-column: 1; grid-row: 4; justify-self: end; width: min(62vw, 440px); margin: 40px 0 0; }
	.cover__h1 { margin-top: 28px; font-size: clamp(2.6rem, 1.2rem + 6.2vw, 5rem); }
}
@media (max-width: 1080px) {
	.pres__info, .svcx__h, .hands__txt > p { max-width: 40rem; }
	.hdr__act .btn { display: inline-flex; --bh: 44px; padding: 0 6px 0 16px; gap: 10px; }
	.hdr__menu { height: 44px; }
	.hdr__act .btn .btn__label { font-size: .8125rem; }
}
@media (max-width: 900px) {
	.closing__cols > p { max-width: 40rem; }
}
@media (max-width: 720px) {
	.spread__cols > * { max-width: 40rem; }
}
@media (max-width: 720px) {
	.ln, .ln > span { display: inline; }
	.js [data-rv]:has(.ln):not(.is-in) { opacity: 0; transform: translateY(18px); }
	.bc__links a { display: block; padding: 10px 0; }
	.pin--dubai { align-items: flex-end; transform: translate(calc(-100% + 6px), calc(-100% + 6px)); }
}
@media (max-width: 420px) {
	.hdr__act .btn .btn__arw { display: none; }
	.hdr__act .btn { padding: 0 14px; }
}
@media (max-width: 380px) {
	.hdr__act .btn { display: none; }
	.cover__tag { grid-row: auto; margin-top: 28px; }
	.cover__art { grid-row: auto; }
}
@media (min-width: 721px) and (max-width: 900px) {
	.rcols--2, .rcols--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rcols--3 > :first-child { grid-column: 1 / -1; max-width: 40rem; margin: 0 0 28px; padding: 0 0 28px; border: 0; border-bottom: 1px solid var(--accent); }
	.rcols--3 > :nth-child(2) { padding-left: 0; border-left: 0; }
}
@media (max-width: 900px) {
	.closing__cols { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	.rcols, .rcols--2, .rcols--3, .rcols--4 { grid-template-columns: minmax(0, 1fr); }
	.rcols > * { padding: 24px 0 0; margin-top: 24px; border-left: 0; border-top: 1px solid var(--accent); }
	.rcols > :first-child { padding-top: 0; margin-top: 0; border-top: 0; }
}
@media (max-width: 720px) {
	:root { --hdr: 64px; --r: 12px; --r-l: 16px; }
	.hdr__menu-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.hdr__menu { padding: 0; box-shadow: none; }
	.burger { width: 44px; height: 44px; }
	.cover__h1 { font-size: clamp(2.35rem, 1rem + 8.4vw, 3.6rem); letter-spacing: -.04em; }
	.cover__cta { flex-direction: column; align-items: flex-start; }
	.cover__art { width: 64vw; }
	.intro__cols { grid-template-columns: 1fr; }
	.svc3 { grid-template-columns: 1fr; }
	.svc3__c:nth-child(3) { display: block; }
	.svc3__c:nth-child(3) .svc3__img { height: clamp(220px, 19vw, 330px); min-height: 0; }
	.svc3__c:nth-child(3) .svc3__t { margin-top: 24px; }
	.svc3__c .plist { display: none; }
	.life__stages { display: flex; justify-content: space-between; column-gap: 6px; }
	.life__stages li { padding-top: 20px; font: 500 .8125rem/1.3 var(--f-text); letter-spacing: 0; }
	.life__dot { top: -5px; width: 11px; height: 11px; }
	.life__line { -webkit-mask-image: none; mask-image: none; }
	.life__s { display: none; }
	.svcl__cols { grid-template-columns: minmax(0, 1fr); }
	.svcl__c, .svcl__c:nth-child(3) { grid-column: auto; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 20px; padding: 18px 0; border-top: 1px solid var(--rl); }
	.svcl__c:last-child { border-bottom: 1px solid var(--rl); }
	.svcl__c p { grid-column: 1; max-width: none; }
	.svcl__go { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
	.crumbs [aria-current], .crumbs__sep--cur { display: none; }
	.ch--intro .wrap { justify-items: start; text-align: left; }
	.intro__rule { width: 100%; transform-origin: 0 50%; }
	.why__i { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
	.pres__lists { grid-template-columns: 1fr; }
	.pin b { font-size: .75rem; padding: 4px 8px; }
	.bc__cols { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
	.bc__col { border-top: 1px solid var(--rule-w); }
	.bc__col > summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; cursor: pointer; }
	.bc__col > summary::after { content: ""; width: 9px; height: 9px; margin-right: 4px; border-right: 1.5px solid var(--cyan); border-bottom: 1.5px solid var(--cyan); transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease); }
	.bc__col[open] > summary::after { transform: translateY(2px) rotate(225deg); }
	.bc__col .bc__h { margin: 0; font-size: 1rem; color: var(--w-88); }
	.bc__stack { row-gap: 0; }
	.bc__col .bc__links { padding-bottom: 16px; }
	.bc__contact { padding-top: 28px; }
	.bc__bottom { grid-template-columns: minmax(0, 1fr); }
	.bc__line { justify-content: flex-start; }
	/* Index rows as compact media rows: thumbnail left, number, title and platforms right, the line below */
	.irow, .irows--fit .irow { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 6px; align-items: start; padding: 18px 0; }
	.irow__img, .irows--fit .irow__img { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 1; border-radius: var(--r-s); }
	/* Placed only when they are the row's own children: inside .irow__b they would open a second, empty column */
	.irow > .irow__n { grid-column: 2; grid-row: 1; padding-top: 2px; }
	.irow__n { line-height: 1; }
	.irow > .irow__t { grid-column: 2; grid-row: 2; }
	.irow__t, .irows--fit .irow__t { font-size: 1.25rem; line-height: 1.2; }
	.irow__d { grid-column: 1 / -1; grid-row: 3; gap: 6px; margin-top: 8px; }
	.irow__b { grid-column: 2; grid-row: 1 / span 2; gap: 6px; }
	.irows--fit .irow__b p { display: none; }
	.irow__go { right: 6px; bottom: 6px; width: 26px; height: 26px; }
	.irow__go .arw { width: 9px; height: 9px; }
	.pn { grid-template-columns: minmax(0, 1fr); }
	.pn__a--next { justify-items: start; text-align: left; padding-left: 0; border-left: 0; border-top: 1px solid var(--rl); }
	.form__grid { grid-template-columns: minmax(0, 1fr); }
	.hubmap__l { padding: 5px 10px; font-size: .75rem; }
}
/* Very narrow phones: the four stage names do not fit one row */
@media (max-width: 350px) {
	.life__stages { display: grid; grid-template-columns: 1fr 1fr; row-gap: 22px; }
	.life__line { display: none; }
	.life__stages li { padding: 0 0 0 20px; }
	.life__dot { top: .2em; }
}

/* Portrait tablets: the map sits beside the two paragraphs, offices and coverage run full width below */
@media (min-width: 721px) and (max-width: 1080px) {
	.pres { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--gut); row-gap: 0; align-items: center; }
	.pres__info { display: contents; }
	.pres__map { grid-column: 1; grid-row: 1 / span 2; overflow: hidden; aspect-ratio: 5 / 4; border-radius: var(--r); }
	.pres__stage { position: absolute; right: -4%; top: -3%; width: 196%; }
	.pres__cov { display: none; }
	.pres__info > p { grid-column: 2; max-width: none; }
	.pres__info > p:first-child { align-self: end; }
	.pres__info > p + p { align-self: start; }
	.pres__lists { grid-column: 1 / -1; grid-template-columns: 1.25fr 1fr; margin-top: 40px; }
	.pin b { font-size: .75rem; padding: 4px 8px; }
	.pin--dubai { align-items: flex-end; transform: translate(calc(-100% + 6px), calc(-100% + 6px)); }
}
@media (max-width: 720px) {
	/* The map zooms in on the three offices; the rest of the coverage is in the list under it */
	.pres__map { overflow: hidden; aspect-ratio: 5 / 4; border-radius: var(--r); }
	.pres__stage { position: absolute; right: -4%; top: -3%; width: 196%; }
	.pres__cov { display: none; }
	/* Closing: the action follows the headline, the seal is smaller */
	.closing__in { row-gap: 28px; }
	.closing__seal { display: none; }
	/* The hero already carries the same button: the header's copy waits until the page has scrolled */
	.home .hdr:not(.is-solid) .hdr__act .btn { display: none; }
	.closing__h { grid-row: 1; }
	.closing__cols { grid-row: 2; display: flex; flex-direction: column; row-gap: 22px; }
	.closing__act { order: -1; padding-top: 0; border-top: 0; margin-bottom: 8px; }
}

/* Short laptop screens: the stacked tagline clears the mark and the cover fits the screen */
@media (min-width: 1081px) and (max-height: 820px) {
	.cover__tag { grid-row: 1 / span 2; align-self: start; }
	.cover__art { align-self: center; width: min(100%, 52svh, 37.5rem); margin-right: 0; }
}
/* Tall screens: the text block sits on the mark's axis instead of hanging from the top */
@media (min-width: 1081px) and (min-height: 1000px) {
	.cover__in { grid-template-rows: auto minmax(0, .55fr) auto auto minmax(0, 1fr) auto; }
	.cover__h1 { grid-row: 3; }
	.cover__body { grid-row: 4; }
	.cover__art { grid-row: 2 / 6; }
}

@media (max-height: 520px) and (orientation: landscape) {
	.menu__link { padding-block: 9px; font-size: clamp(1.4rem, 6.4svh, 2rem); }
	.menu__more { top: 0; height: 44px; }
}

/* Landscape phones: the cover fits one screen */
@media (max-width: 1080px) and (orientation: landscape) and (max-height: 520px) {
	.cover__in { grid-template-columns: minmax(0, 1fr) 34%; column-gap: 24px; padding-top: calc(var(--hdr) + 16px); }
	.cover__label, .cover__h1, .cover__body { grid-column: 1; }
	.cover__art { grid-column: 2; grid-row: 1 / span 3; width: 100%; margin: 0; align-self: center; }
	.cover__tag { display: none; }
	.cover__label { display: none; }
	.cover__h1 { font-size: clamp(1.9rem, 1rem + 3.4vw, 2.5rem); margin-top: 4px; }
	.cover__lead { font-size: .95rem; }
	.cover__cta { margin-top: 14px; }
	.cover__cta { flex-direction: row; }
}

/* ---------- Press states (touch has no hover) ---------- */
.btn:active { transform: scale(.97); }
.btn { transition: background-color .3s, color .3s, transform .2s var(--ease); }
.dx__row:active, .irow:active, .dlist a:active, .svcl__c:active, .pn__a:active, .menu__link:active, .bc__links a:active, .plist--links a:active, .tlink:active { opacity: .62; }

/* ---------- Touch: 44px hit areas without moving anything ---------- */
@media (pointer: coarse) {
	.tlink, .crumbs a, .life__stages a, .steps__t a, .form__note a, .offices a { position: relative; }
	.tlink::after, .crumbs a::after, .life__stages a::after, .steps__t a::after, .form__note a::after { content: ""; position: absolute; inset: -9px -4px; }
	.crumbs a::after { inset: -8px -3px; }
	.life__stages a::after { inset: -12px -6px; }
	.bc__util a, .motion-toggle { min-height: 44px; }
	.closing__mail, .bc__mail, .contact__mail { padding-block: 12px; }
}

/* ---------- Technologies: tablets and phones ---------- */
@media (max-width: 1319px) {
	.sub__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 4px; }
	.sub--groups { width: min(36rem, calc(100vw - 2 * var(--pad))); }
	.ogrid--env { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ogrid--env li:nth-child(-n+5) { border-top: 0; }
	.ogrid--env li:nth-child(-n+3) { border-top: 1px solid var(--rl); }
}
@media (max-width: 1080px) {
	.chead__intro { grid-column: 1; justify-self: start; margin-top: 0; }
	.vi__list, .vi__ideal { grid-column: 1 / -1; }
	.vi__ideal { margin-top: 40px; }
}
@media (max-width: 900px) {
	.ogrid--env { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ogrid--env li:nth-child(-n+3) { border-top: 0; }
	.ogrid--env li:nth-child(-n+2) { border-top: 1px solid var(--rl); }
}
@media (max-width: 720px) {
	.ogrid, .ogrid--env { grid-template-columns: minmax(0, 1fr); }
	.ogrid--env .ogrid__t { min-height: 0; }
	.ogrid li:nth-child(2), .ogrid--env li:nth-child(2) { border-top: 0; }
	.irow__more { display: none; }
	.tgroup__line { max-width: 36em; }
}

/* ---------- Phones: contact foot, technology index rows, one sentence per line (pre-launch review) ---------- */
@media (max-width: 720px) {
	.form__foot { grid-template-columns: minmax(0, 1fr); }
	.form__note { max-width: none; }
	.dx__row { grid-template-columns: 64px minmax(0, 1fr) 32px; grid-template-areas: "th n go" "th t go" "th p go"; row-gap: 4px; }
	.dx__n { padding-left: 0; }
	.ln.ln--s { display: block; }
}
/* Landscape phones: the opener shows its text and action, not only the headline */
@media (max-width: 1080px) and (orientation: landscape) and (max-height: 520px) {
	.spread { padding-top: calc(var(--hdr) + 12px); }
	.spread__top { gap: 14px; }
	.spread__top > .crumbs { display: none; }
	.spread__title { margin-top: 12px; }
	.spread__cols { margin-top: 24px; }
}

@media (max-width: 720px) {
	.pwall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pwall li { min-height: 104px; padding: 18px 12px; }
	.pwall .plogo { max-width: calc(120px * var(--s, 1)); height: calc(22px * var(--s, 1)); }
}

/* ---------- Print ---------- */
@media print {
	@page { size: A4; margin: 14mm; }
	.hdr, .menu, .intro, .cover__art, .closing__seal, .bc, .dx__view, .skip-link { display: none !important; }
	body, [data-ground] { background: #fff !important; color: #000 !important; }
	p, .plist li, .t-intro { color: #000 !important; }
	[data-rv], .ln > span, [data-rv] img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
	.ch, .spread, .closing, .blk { padding-block: 16px !important; }
	a { color: inherit; text-decoration: none; }
}