/*
  Genesys Corporation: corporate web system.
  Taken from the corporate identity (navy, white and electric cyan, the
  angled panel, the extended wordmark) and applied with restraint: one
  angle, flat colour, real photography and a strict type scale.
*/

:root {
  /* Neutrals carry the surfaces: a graphite scale for dark, a stone scale for light. */
  --char: #131518;
  --char-2: #1b1e22;
  --char-3: #272b30;
  --deep: #0b0c0e;
  --white: #f4f3f0;
  --paper: #fbfaf8;
  --mist: #e9e7e2;
  --stone: #dedbd4;
  /* Navy and cyan are accents. */
  --navy: #1c3d72;
  --navy-deep: #12284d;
  --navy-tint: rgba(28, 61, 114, 0.08);
  --cyan: #19b8f0;
  --cyan-ink: #1c3d72;
  --steel: #8e9196;
  --ink: #131518;
  --ink-2: #4b4e53;
  --ink-3: #5f6267;
  --rule-n: rgba(255, 255, 255, 0.11);
  --rule-w: #d8d5ce;
  --m: clamp(20px, 4vw, 56px);
  --wrap: 1280px;
  --angle: 18deg;
  --wordmark: "Michroma", "Eurostile", sans-serif;
  --head: "Archivo", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body.g { margin: 0; background: var(--white); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(body.g) img, :where(body.g) video { display: block; max-width: 100%; }
:where(body.g) a { color: inherit; text-decoration: none; }
:where(body.g) p { margin: 0; }
:where(body.g) :is(h1, h2, h3, h4) { margin: 0; font-family: var(--head); font-stretch: 112%; font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; }
.g-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--m); }
.g-dark { background: var(--char); color: var(--white); }

/* Section label: index number, rule, name. */
.g-label { display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan-ink); }
.g-label b { font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.g-label::after { content: ""; flex: 0 0 40px; height: 1px; background: currentColor; opacity: 0.5; order: 1; }
.g-label b + span { order: 2; }
.g-label:not(:has(b))::after { display: none; }
.g-dark .g-label { color: var(--cyan); }
.g-dark .g-label b { color: var(--steel); }
.g-h2 { font-size: clamp(30px, 3.3vw, 48px); margin-top: 22px; max-width: 18ch; }
.g-lede { font-size: 18px; line-height: 1.65; color: var(--ink-2); max-width: 54ch; }
.g-dark .g-lede { color: rgba(255, 255, 255, 0.72); }

/* Buttons: square, flat. */
.g-btn { display: inline-flex; align-items: center; gap: 14px; height: 50px; padding: 0 24px; font-weight: 600; font-size: 15px; background: var(--cyan); color: var(--char); border: 0; transition: background 0.2s; white-space: nowrap; }
.g-btn:hover { background: #4cc8f4; }
.g-btn svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.g-btn:hover svg { transform: translateX(3px); }
.g-btn-line { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); }
.g-btn-line:hover { background: rgba(255, 255, 255, 0.08); }
.g-btn-navy { background: var(--char); color: #fff; }
.g-btn-navy:hover { background: var(--char-3); }
.g-btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.g-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: var(--cyan-ink); border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.g-link:hover { border-color: currentColor; }
.g-link svg { width: 14px; height: 14px; }
.g-dark .g-link { color: var(--cyan); }

/* Utility bar and header. */
.g-top { position: fixed; inset: 0 0 auto; z-index: 60; }
.g-util { height: 34px; background: var(--deep); color: rgba(255, 255, 255, 0.6); font-size: 12.5px; }
.g-util .g-wrap { max-width: none; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.g-util nav { display: flex; gap: 26px; }
.g-util a:hover { color: #fff; }
.g-hdr { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--m); background: var(--char); border-bottom: 1px solid var(--rule-n); color: #fff; }
.g-logo { display: flex; align-items: center; gap: 12px; }
.g-logo img { width: 40px; height: 40px; }
.g-logo span { display: flex; flex-direction: column; line-height: 1; }
.g-logo b { font-family: var(--wordmark); font-weight: 400; font-size: 16px; letter-spacing: 0.14em; }
.g-logo small { font-family: var(--wordmark); font-size: 7px; letter-spacing: 0.5em; color: var(--steel); margin-top: 6px; }
.g-hdr nav { display: flex; align-self: stretch; font-size: 14.5px; font-weight: 500; }
.g-hdr nav a { display: flex; align-items: center; padding: 0 18px; color: rgba(255, 255, 255, 0.8); position: relative; transition: color 0.2s; }
.g-hdr nav a:hover, .g-hdr nav a[aria-current] { color: #fff; }
.g-hdr nav a::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; background: var(--cyan); transform: scaleX(0); transition: transform 0.25s var(--ease); }
.g-hdr nav a:hover::after, .g-hdr nav a[aria-current]::after { transform: none; }
.g-hdr .right { display: flex; align-items: center; gap: 12px; }
.g-hdr .menu { display: none; height: 40px; padding: 0 16px; background: none; border: 1px solid var(--rule-n); color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.g-hdr nav .m-only { display: none; }
@media (max-width: 1000px) {
  .g-util { display: none; }
  html { scroll-padding-top: 80px; }
  .g-hdr { height: 64px; }
  .g-hdr nav, .g-hdr .right .g-btn { display: none; }
  .g-hdr .menu { display: block; }
  .g-hdr.open nav { display: flex; flex-direction: column; position: fixed; top: 64px; left: 0; right: 0; height: calc(100dvh - 64px); background: var(--char); padding: 16px var(--m); overflow-y: auto; }
  .g-hdr.open nav a { font-family: var(--head); font-stretch: 112%; font-size: 24px; padding: 18px 0; border-bottom: 1px solid var(--rule-n); color: #fff; }
  .g-hdr.open nav .m-only { display: flex; }
  .g-hdr.open nav a::after { display: none; }
}

/* Hero: photography behind a navy panel cut at the identity angle. */
.g-hero { position: relative; min-height: min(100svh, 920px); padding-top: 106px; display: flex; flex-direction: column; background: var(--char); color: #fff; overflow: hidden; isolation: isolate; }
.g-hero-media { position: absolute; inset: 0 0 0 30%; z-index: -2; }
.g-hero-media video, .g-hero-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.55) contrast(1.05) brightness(0.8); }
.g-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--char) 0%, rgba(15, 17, 20, 0.55) 40%, rgba(15, 17, 20, 0.2) 100%), linear-gradient(0deg, rgba(15, 17, 20, 0.7), transparent 40%); }
.g-hero-panel { position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 62%; background: var(--char); clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant, 32vh)) 100%, 0 100%); }
.g-hero-edge { position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: calc(62% + 10px); background: var(--cyan); clip-path: polygon(calc(100% - 10px) 0, 100% 0, calc(100% - var(--slant, 32vh)) 100%, calc(100% - var(--slant, 32vh) - 10px) 100%); opacity: 0.95; }
.g-hero .g-wrap { width: 100%; }
.g-hero-body { flex: 1; display: flex; align-items: center; padding: 32px 0 52px; }
.g-hero-copy { max-width: 600px; }
.g-hero h1 { font-size: clamp(40px, 4vw, 60px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.03; margin: 24px 0 24px; }
.g-hero h1 span { color: var(--cyan); }
.g-hero .g-lede { color: rgba(255, 255, 255, 0.78); margin-bottom: 40px; max-width: 46ch; }
.g-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.g-hero-meta { position: absolute; right: var(--m); bottom: 132px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); text-align: right; }
.g-hero-meta b { font-weight: 600; color: #fff; }

/* Entry points along the base of the hero. */
.g-entry { position: relative; background: var(--white); color: var(--ink); }
.g-entry .g-wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.g-entry a { display: flex; flex-direction: column; gap: 6px; padding: 26px 28px 28px; border-left: 1px solid var(--rule-w); transition: background 0.2s; position: relative; }
.g-entry a:last-child { border-right: 1px solid var(--rule-w); }
.g-entry a::before { content: ""; position: absolute; left: -1px; right: 0; top: 0; height: 3px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.g-entry a:hover { background: var(--mist); }
.g-entry a:hover::before { transform: none; }
.g-entry small { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan-ink); }
.g-entry b { display: flex; justify-content: space-between; align-items: center; font-family: var(--head); font-stretch: 112%; font-size: 18px; font-weight: 600; }
.g-entry b svg { width: 16px; height: 16px; color: var(--cyan-ink); }
.g-entry span { font-size: 14px; color: var(--ink-3); }
@media (max-width: 1000px) {
  .g-hero { padding-top: 64px; min-height: 0; }
  .g-hero-media { inset: 0; }
  .g-hero-media::after { background: linear-gradient(180deg, rgba(15, 17, 20, 0.35) 0%, var(--char) 62%); }
  .g-hero-panel, .g-hero-edge, .g-hero-meta { display: none; }
  .g-hero-body { padding: 28vh 0 44px; }
  .g-hero-media video { object-position: 62% center; }
  .g-hero h1 { font-size: clamp(34px, 9vw, 52px); margin: 22px 0 20px; }
  .g-hero .g-lede { font-size: 16.5px; margin-bottom: 30px; }
  .g-entry .g-wrap { grid-template-columns: 1fr 1fr; padding: 0; }
  .g-entry a { padding: 20px var(--m); border-left: 0; border-bottom: 1px solid var(--rule-w); }
  .g-entry a:nth-child(odd) { border-right: 1px solid var(--rule-w); }
  .g-entry a:last-child { border-right: 0; }
  .g-entry span { display: none; }
  .g-entry b { font-size: 16px; }
}

/* Sections. */
.g-sec { position: relative; padding: clamp(80px, 9vw, 128px) 0; }
.g-sec + .g-sec:not(.g-dark):not(.g-mist) { border-top: 1px solid var(--rule-w); }
.g-mist { background: var(--mist); }
.g-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: end; margin-bottom: 56px; }
.g-head > .g-lede, .g-head > .g-link { justify-self: end; }
@media (max-width: 900px) { .g-head { grid-template-columns: 1fr; margin-bottom: 40px; } .g-head > .g-lede, .g-head > .g-link { justify-self: start; } }

/* About. */
.g-about { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.g-about .copy p { font-size: 18px; color: var(--ink-2); }
.g-about .copy p + p { margin-top: 18px; }
.g-about .copy p:first-child { font-family: var(--head); font-stretch: 105%; font-size: clamp(21px, 1.9vw, 26px); color: var(--char); font-weight: 500; letter-spacing: -0.01em; line-height: 1.42; }
.g-facts { margin: 64px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--char); }
.g-facts div { padding: 20px 24px 4px 0; }
.g-facts div + div { padding-left: 24px; border-left: 1px solid var(--rule-w); }
.g-facts dt { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.g-facts dd { margin: 0; font-size: 16px; font-weight: 500; color: var(--char); line-height: 1.45; }
.g-vm { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 72px; background: var(--char); color: #fff; position: relative; overflow: hidden; }
.g-vm > div { padding: 48px 48px 52px; position: relative; }
.g-vm > div + div { border-left: 1px solid var(--rule-n); }
.g-vm h3 { font-family: var(--sans); font-stretch: normal; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 18px; }
.g-vm p { font-family: var(--head); font-stretch: 104%; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; font-weight: 400; }
@media (max-width: 900px) {
  .g-about { grid-template-columns: 1fr; gap: 28px; }
  .g-facts { grid-template-columns: 1fr 1fr; }
  .g-facts div, .g-facts div + div { padding: 18px 16px 18px 0; border-left: 0; border-bottom: 1px solid var(--rule-w); }
  .g-facts div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--rule-w); }
  .g-vm { grid-template-columns: 1fr; margin-top: 48px; }
  .g-vm > div { padding: 32px 26px 36px; }
  .g-vm > div + div { border-left: 0; border-top: 1px solid var(--rule-n); }
}

/* Capabilities: technical viewport beside the list. */
.cl-body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 72px); align-items: start; }
.cv-wrap { position: sticky; top: max(122px, calc(50vh - 280px)); }
.cv { position: relative; margin: 0; height: min(calc(100vh - 180px), 560px); background: var(--char-2); border: 1px solid var(--rule-n); overflow: hidden; }
.cv canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cv figcaption { position: absolute; inset: 0; pointer-events: none; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); }
.cv-tl { position: absolute; left: 22px; top: 18px; } .cv-tl b { color: var(--cyan); font-weight: 600; }
.cv-tr { position: absolute; right: 22px; top: 18px; }
.cv-name { position: absolute; left: 22px; bottom: 18px; font-size: 15px; letter-spacing: 0; text-transform: none; color: #fff; }
.cv-scale { position: absolute; right: 22px; bottom: 24px; display: flex; gap: 4px; }
.cv-scale i { width: 14px; height: 2px; background: rgba(255, 255, 255, 0.18); transition: background 0.4s; }
.cv-scale i.on { background: var(--cyan); }
.cv-c { display: none; }
.cl-item { position: relative; padding: 32px 0 36px 28px; border-top: 1px solid var(--rule-n); min-height: 40vh; display: flex; flex-direction: column; justify-content: center; }
.cl-item:last-child { border-bottom: 1px solid var(--rule-n); }
.cl-item::before { content: ""; position: absolute; left: 0; top: -1px; bottom: 0; width: 2px; background: var(--cyan); transform: scaleY(0); transform-origin: top; transition: transform 0.6s var(--ease); }
.cl-item.on::before { transform: scaleY(1); }
.cl-n { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--steel); font-variant-numeric: tabular-nums; }
.cl-item.on .cl-n { color: var(--cyan); }
.cl-item h3 { font-size: clamp(24px, 2.2vw, 34px); margin: 10px 0 14px; color: rgba(255, 255, 255, 0.55); transition: color 0.4s; }
.cl-item.on h3 { color: #fff; }
.cl-item p { font-size: 16.5px; color: rgba(255, 255, 255, 0.7); max-width: 46ch; }
.cl-item ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; max-width: 46ch; }
.cl-item li { font-size: 14px; padding: 9px 0; border-top: 1px solid var(--rule-n); color: rgba(255, 255, 255, 0.82); }
@media (max-width: 900px) {
  .cl-body { grid-template-columns: 1fr; gap: 0; }
  .cv-wrap { top: 64px; z-index: 2; margin: 0 calc(var(--m) * -1); padding: 0 0 10px; background: var(--char); }
  .cv { height: 30vh; border-left: 0; border-right: 0; }
  .cv-tr { display: none; }
  .cl-item { min-height: 0; padding: 28px 0 30px 18px; }
  .cl-item h3 { color: #fff; }
}

/* Brand family. */
.g-brands { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--rule-w); background: var(--white); }
.g-brand { display: flex; flex-direction: column; padding: 0 0 28px; transition: background 0.25s; }
.g-brand + .g-brand { border-left: 1px solid var(--rule-w); }
a.g-brand:hover { background: var(--mist); }
.g-brand-top { position: relative; height: 148px; background: var(--char); display: flex; align-items: center; padding: 0 28px; margin-bottom: 26px; overflow: hidden; }
.g-brand-top::after { content: ""; position: absolute; right: -30px; top: 0; bottom: 0; width: 120px; background: var(--char-3); transform: skewX(calc(var(--angle) * -1)); border-left: 3px solid var(--cyan); }
.g-brand-top img { position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 50%; }
.g-mono { position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--cyan); font-family: var(--wordmark); font-size: 20px; color: #fff; }
.g-brand h3 { font-family: var(--wordmark); font-stretch: normal; font-weight: 400; font-size: 17px; letter-spacing: 0.08em; color: var(--char); padding: 0 28px; }
.g-brand .sub { font-size: 13px; font-weight: 600; color: var(--cyan-ink); margin: 10px 0 14px; line-height: 1.45; }
.g-brand p { font-size: 15px; color: var(--ink-2); padding: 0 28px; }
.g-brand .tag { margin: 14px 0 0; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--ink-3); }
.g-brand .g-link { margin: auto 28px 0; padding-top: 22px; align-self: flex-start; }
@media (max-width: 1100px) { .g-brands { grid-template-columns: 1fr 1fr; } .g-brand:nth-child(3) { border-left: 0; } .g-brand:nth-child(n+3) { border-top: 1px solid var(--rule-w); } }
@media (max-width: 640px) { .g-brands { grid-template-columns: 1fr; } .g-brand + .g-brand { border-left: 0; border-top: 1px solid var(--rule-w); } .g-brand-top { height: 112px; } }

/* Flagship platforms. */
.g-plats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.g-plat { display: flex; flex-direction: column; background: var(--char-2); border: 1px solid var(--rule-n); transition: border-color 0.25s; }
.g-plat:hover { border-color: rgba(25, 184, 240, 0.5); }
.g-plat figure { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.g-plat img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); filter: saturate(0.85); }
.g-plat:hover img { transform: scale(1.04); }
.g-plat figure::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38%; height: 4px; background: var(--cyan); clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.g-plat > div { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.g-plat small { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); }
.g-plat h3 { font-size: 22px; margin: 10px 0 10px; }
.g-plat p { font-size: 15px; color: rgba(255, 255, 255, 0.72); }
.g-plat .g-link { margin-top: auto; padding-top: 22px; align-self: flex-start; }
@media (max-width: 900px) { .g-plats { grid-template-columns: 1fr; gap: 16px; } }

/* Leadership. */
.g-lead { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.g-portrait { margin: 0; position: relative; }
.g-portrait img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: center 22%; }
.g-portrait figcaption { display: flex; justify-content: space-between; padding: 14px 0 0; border-bottom: 1px solid var(--rule-w); padding-bottom: 14px; font-size: 13px; color: var(--ink-3); }
.g-portrait::before { content: ""; position: absolute; left: 0; top: 0; width: 90px; height: 4px; background: var(--cyan); z-index: 1; }
.g-lead h3 { font-size: clamp(32px, 3.2vw, 46px); margin-top: 22px; }
.g-role { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan-ink); margin: 12px 0 24px; }
.g-honours { list-style: none; margin: 36px 0 32px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; border-top: 2px solid var(--char); }
.g-honours li { padding: 16px 0; border-bottom: 1px solid var(--rule-w); font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.g-honours b { display: block; color: var(--char); font-weight: 600; margin-bottom: 2px; }
@media (max-width: 900px) { .g-lead, .g-honours { grid-template-columns: 1fr; } .g-portrait { max-width: 420px; } }

/* Partners. */
.g-logos { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--rule-w); border-left: 1px solid var(--rule-w); }
.g-logos > div { height: 116px; display: grid; place-items: center; padding: 24px; border-right: 1px solid var(--rule-w); border-bottom: 1px solid var(--rule-w); background: var(--white); }
.g-logos img { max-height: 54px; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.7; transition: filter 0.3s, opacity 0.3s; }
.g-logos > div:hover img { filter: none; opacity: 1; }
.g-logos .navy { background: var(--char); }
.g-logos .navy img { filter: none; opacity: 0.9; }
.g-partner-list { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 40px; }
.g-partner-list div { border-top: 1px solid var(--rule-w); padding-top: 18px; font-size: 15px; color: var(--ink-2); line-height: 1.7; }
.g-partner-list b { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--char); margin-bottom: 10px; }
@media (max-width: 1000px) { .g-logos { grid-template-columns: repeat(4, 1fr); } .g-partner-list { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .g-logos { grid-template-columns: repeat(2, 1fr); } .g-logos > div { height: 96px; } }

/* Contact band: navy with the identity angle in cyan. */
.g-cta { position: relative; overflow: hidden; background: var(--char); color: #fff; isolation: isolate; }
.g-cta::before { content: ""; position: absolute; z-index: -1; right: 0; top: 0; bottom: 0; width: 50%; background: var(--char-2); clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); }
.g-cta::after { content: ""; position: absolute; z-index: -1; right: 0; top: 0; bottom: 0; width: 50%; background: var(--cyan); clip-path: polygon(12% 0, calc(12% + 6px) 0, 6px 100%, 0 100%); }
.g-cta .g-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-top: 104px; padding-bottom: 104px; }
.g-cta h2 { font-size: clamp(30px, 3.4vw, 50px); margin: 22px 0 32px; }
.g-cta dl { margin: 0 0 0 auto; width: min(100%, 420px); }
.g-cta dl div { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule-n); }
.g-cta dl div:first-child { border-top: 1px solid var(--rule-n); }
.g-cta dt { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel); padding-top: 3px; }
.g-cta dd { margin: 0; font-size: 15.5px; }
.g-cta dd a:hover { color: var(--cyan); }
@media (max-width: 900px) { .g-cta::before, .g-cta::after { display: none; } .g-cta .g-wrap { grid-template-columns: 1fr; gap: 36px; padding-top: 72px; padding-bottom: 72px; } .g-cta dl { margin: 0; } .g-cta dl div { grid-template-columns: 92px 1fr; } }

/* Footer. */
.g-ftr { background: var(--deep); padding: 72px 0 28px; font-size: 14.5px; color: rgba(255, 255, 255, 0.62); }
.g-ftr-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.4fr; gap: 32px; padding-bottom: 48px; }
.g-ftr .g-logo { color: #fff; }
.g-ftr .g-logo img { width: 48px; height: 48px; }
.g-ftr .tagline { margin-top: 20px; max-width: 26ch; }
.g-ftr h4 { font-family: var(--sans); font-stretch: normal; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; margin-bottom: 18px; }
.g-ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.g-ftr a:hover { color: #fff; }
.g-ftr-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--rule-n); font-size: 13px; }
@media (max-width: 1000px) { .g-ftr-top { grid-template-columns: 1fr 1fr; } .g-ftr-top > div:first-child, .g-ftr-top > div:last-child { grid-column: 1 / -1; } }

/* Technical meta line in monospace. */
.g-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: -6px 0 34px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.g-meta span + span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 22px; background: var(--cyan); transform: skewX(-18deg); vertical-align: 1px; }
.cv figcaption { font-family: var(--mono); font-weight: 500; letter-spacing: 0.08em; }

/* Brand family: large names on rules with photography. */
.g-brows { border-bottom: 1px solid var(--rule-w); }
.g-brow { display: grid; grid-template-columns: 5fr 7fr; gap: 24px 56px; padding: 40px 0; border-top: 1px solid var(--rule-w); align-items: center; }
.g-brow .txt { display: flex; flex-direction: column; align-items: flex-start; }
.g-brow .mk { width: 44px; height: 44px; border-radius: 50%; margin-bottom: 22px; }
.g-brow .g-mono { font-size: 13px; border-width: 1.5px; color: var(--char); background: var(--white); }
.g-brow h3 { font-family: var(--wordmark); font-stretch: normal; font-weight: 400; font-size: clamp(28px, 3.4vw, 50px); letter-spacing: 0.02em; line-height: 1; color: var(--char); }
.g-brow .sub { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan-ink); margin: 16px 0 16px; }
.g-brow p { color: var(--ink-2); max-width: 44ch; }
.g-brow .tag { margin-top: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--ink-3); }
.g-brow .g-link { margin-top: 22px; }
.g-brow figure { margin: 0; aspect-ratio: 21 / 9; overflow: hidden; position: relative; background: var(--char); }
.g-brow figure img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8); transition: transform 1.1s var(--ease), filter 0.6s; }
.g-brow figure::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cyan); transform: scaleY(0); transform-origin: bottom; transition: transform 0.5s var(--ease); }
.g-brow:hover figure img { transform: scale(1.04); filter: saturate(1); }
.g-brow:hover figure::after { transform: none; }
.g-brow:hover .g-link { border-color: currentColor; }
@media (max-width: 900px) { .g-brow { grid-template-columns: 1fr; padding: 32px 0; } .g-brow figure { order: -1; aspect-ratio: 16 / 9; } }

/* Flagship projects: image-led tiles. */
.g-bento { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; height: min(80vh, 760px); min-height: 560px; }
.g-tile { position: relative; overflow: hidden; isolation: isolate; background: var(--char-2); }
.g-tile:first-child { grid-row: span 2; }
.g-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(0.85); transition: transform 1.2s var(--ease); }
.g-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15, 17, 20, 0) 40%, rgba(15, 17, 20, 0.92) 100%); }
.g-tile .cap { position: absolute; left: 28px; right: 80px; bottom: 26px; }
.g-tile small { font-size: 11.5px; text-transform: uppercase; color: var(--cyan); }
.g-tile h3 { font-size: clamp(22px, 2vw, 30px); margin-top: 10px; }
.g-tile p { font-size: 15px; color: rgba(255, 255, 255, 0.75); max-width: 44ch; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s var(--ease), opacity 0.4s, margin 0.5s var(--ease); }
.g-tile .go { position: absolute; right: 24px; bottom: 26px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; transition: background 0.25s, border-color 0.25s, color 0.25s; }
.g-tile .go svg { width: 16px; height: 16px; }
.g-tile:hover img { transform: scale(1.05); }
.g-tile:hover p { max-height: 6em; opacity: 1; margin-top: 10px; }
.g-tile:hover .go { background: var(--cyan); border-color: var(--cyan); color: var(--char); }
@media (hover: none) { .g-tile p { max-height: none; opacity: 1; margin-top: 10px; } }
@media (max-width: 900px) { .g-bento { grid-template-columns: 1fr; grid-template-rows: none; height: auto; min-height: 0; } .g-tile { aspect-ratio: 4 / 3.4; } .g-tile:first-child { grid-row: auto; } .g-tile .cap { left: 20px; right: 72px; bottom: 20px; } .g-tile .go { right: 18px; bottom: 20px; } }

/* ---------- Revision: full-bleed hero, compact capabilities ---------- */
.g-hero { min-height: max(680px, 100svh); }
.g-hero > .g-hero-media { inset: 0; }
.g-hero > .g-hero-media video { filter: saturate(0.6) contrast(1.05) brightness(0.85); }
.g-hero > .g-hero-media::after { background: linear-gradient(90deg, rgba(15, 17, 20, 0.88) 0%, rgba(15, 17, 20, 0.5) 50%, rgba(15, 17, 20, 0.2) 100%), linear-gradient(0deg, rgba(15, 17, 20, 0.9) 0%, rgba(15, 17, 20, 0) 55%); }
.g-hero > .g-hero-body { align-items: flex-end; padding: 48px 0 150px; }
.g-hero .g-hero-copy { max-width: none; }
.g-hero h1 { font-size: clamp(42px, 6vw, 92px); line-height: 0.98; letter-spacing: -0.03em; max-width: 13ch; margin: 22px 0 0; }
.g-hero-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 56px; align-items: end; margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.g-hero-foot .g-lede { margin: 0; max-width: 52ch; }
.g-hero-foot .g-ctas { align-items: center; gap: 28px; }
.g-link-w { color: #fff !important; }
.g-hero-cut { position: absolute; left: 0; right: 0; bottom: -1px; height: 96px; background: var(--cyan); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.g-hero-cut::after { content: ""; position: absolute; inset: 7px 0 0 0; background: var(--white); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
@media (max-width: 1000px) {
  .g-hero > .g-hero-body { padding: 30vh 0 96px; }
  .g-hero-foot { grid-template-columns: 1fr; }
  .g-hero h1 { font-size: clamp(36px, 10vw, 56px); }
  .g-hero-cut { height: 48px; }
}

.g-vm { background: none; color: var(--char); margin-top: 72px; border-top: 2px solid var(--char); overflow: visible; }
.g-vm > div { padding: 28px 40px 0 0; }
.g-vm > div + div { border-left: 1px solid var(--rule-w); padding-left: 40px; }
.g-vm h3 { color: var(--cyan-ink); }
.g-vm p { color: var(--char); }
@media (max-width: 900px) { .g-vm > div, .g-vm > div + div { padding: 24px 0 0; border-left: 0; } .g-vm > div + div { border-top: 1px solid var(--rule-w); margin-top: 24px; } }

.cx { display: grid; grid-template-columns: 7fr 5fr; border: 1px solid var(--rule-n); background: var(--char-2); }
.cx .cv { height: auto; min-height: 600px; border: 0; border-right: 1px solid var(--rule-n); }
.cx-list { display: flex; flex-direction: column; }
.cx-item { position: relative; border-bottom: 1px solid var(--rule-n); }
.cx-item:last-child { border-bottom: 0; }
.cx-item::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--cyan); }
.cx-item.on::before { animation: cxbar var(--cx-dur, 7s) linear forwards; }
.cx.paused .cx-item.on::before, .cx.manual .cx-item.on::before { animation: none; width: 100%; }
@keyframes cxbar { from { width: 0; } to { width: 100%; } }
.cx-head { width: 100%; display: flex; align-items: center; gap: 18px; padding: 17px 24px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cx-head .n { font-family: var(--mono); font-size: 12px; color: var(--steel); }
.cx-head h3 { flex: 1; font-size: 18px; font-weight: 600; color: rgba(255, 255, 255, 0.62); transition: color 0.3s; }
.cx-head i { width: 12px; height: 12px; position: relative; flex: none; }
.cx-head i::before, .cx-head i::after { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 1.5px; background: var(--steel); transition: transform 0.3s var(--ease); }
.cx-head i::after { transform: rotate(90deg); }
.cx-head:hover h3, .cx-item.on h3 { color: #fff; }
.cx-item.on .n { color: var(--cyan); }
.cx-item.on .cx-head i::after { transform: none; }
.cx-head:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.cx-item .more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.cx-item.on .more { grid-template-rows: 1fr; }
.cx-item .more > div { overflow: hidden; padding: 0 24px 0 54px; }
.cx-item.on .more > div { padding-bottom: 22px; }
.cx-item .more p { font-size: 15px; color: rgba(255, 255, 255, 0.72); }
.cx-item .more ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.cx-item .more li { font-size: 13.5px; color: var(--cyan); }
@media (max-width: 900px) {
  .cx { grid-template-columns: 1fr; }
  .cx .cv { min-height: 0; height: 40vh; border-right: 0; border-bottom: 1px solid var(--rule-n); }
  .cx-head { padding: 16px 18px; }
  .cx-item .more > div { padding: 0 18px 0 48px; }
}

/* ---------- Inner pages ---------- */

/* Page hero: the home hero at a shorter height. */
.g-phero { position: relative; padding-top: 106px; background: var(--char); color: #fff; overflow: hidden; isolation: isolate; --slant: 150px; }
.g-phero .g-hero-media { left: 42%; }
.g-phero .g-hero-media img { filter: saturate(0.7) contrast(1.05) brightness(0.85); }
.g-phero .g-hero-panel { width: 60%; }
.g-phero .g-hero-edge { width: calc(60% + 8px); }
.g-phero-body { min-height: 440px; display: flex; align-items: center; padding: 64px 0 80px; }
.g-phero-body > .g-wrap { width: 100%; }
.g-phero-copy { max-width: 600px; }
.g-crumb { display: flex; gap: 10px; font-size: 13px; color: rgba(255, 255, 255, 0.55); margin-bottom: 28px; }
.g-crumb a:hover { color: #fff; }
.g-crumb span::before { content: "/"; margin-right: 10px; opacity: 0.6; }
.g-phero h1 { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.04; margin: 20px 0 22px; letter-spacing: -0.02em; }
.g-phero h1.wm { font-family: var(--wordmark); font-stretch: normal; font-weight: 400; letter-spacing: 0.04em; }
.g-phero h1 sup { font-size: 0.4em; vertical-align: top; position: relative; top: 0.3em; }
.g-phero .g-lede { color: rgba(255, 255, 255, 0.78); }
.g-phero .g-ctas { margin-top: 34px; }
.g-pfacts { margin: 0; background: var(--white); color: var(--ink); }
.g-pfacts .g-wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.g-pfacts div { padding: 22px 28px 24px; border-left: 1px solid var(--rule-w); }
.g-pfacts div:last-child { border-right: 1px solid var(--rule-w); }
.g-pfacts dt { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.g-pfacts dd { margin: 6px 0 0; font-family: var(--head); font-stretch: 112%; font-size: 26px; font-weight: 600; color: var(--char); }
@media (max-width: 1000px) {
  .g-phero { padding-top: 64px; }
  .g-phero .g-hero-media { inset: 0; }
  .g-phero .g-hero-media::after { background: linear-gradient(180deg, rgba(15, 17, 20, 0.3) 0%, var(--char) 70%); }
  .g-phero-body { min-height: 0; padding: 24vh 0 48px; }
  .g-pfacts .g-wrap { grid-template-columns: 1fr 1fr; padding: 0; }
  .g-pfacts div { padding: 18px var(--m); border-left: 0; border-bottom: 1px solid var(--rule-w); }
  .g-pfacts div:nth-child(odd) { border-right: 1px solid var(--rule-w); }
  .g-pfacts div:last-child { border-right: 0; }
  .g-pfacts dd { font-size: 22px; }
}

/* In-page navigation under the header. */
html:has(.g-subnav) { scroll-padding-top: 170px; }
.g-subnav { position: sticky; top: 106px; z-index: 40; background: rgba(255, 255, 255, 0.97); border-bottom: 1px solid var(--rule-w); }
.g-subnav .g-wrap { display: flex; align-items: center; gap: 32px; height: 60px; }
.g-subnav b { font-family: var(--head); font-stretch: 112%; font-weight: 600; font-size: 16px; color: var(--char); white-space: nowrap; }
.g-subnav nav { display: flex; align-self: stretch; overflow-x: auto; scrollbar-width: none; flex: 1; }
.g-subnav nav::-webkit-scrollbar { display: none; }
.g-subnav nav a { display: flex; align-items: center; padding: 0 16px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; position: relative; }
.g-subnav nav a:hover, .g-subnav nav a.on { color: var(--char); }
.g-subnav nav a.on::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; background: var(--cyan); }
@media (max-width: 1000px) {
  html:has(.g-subnav) { scroll-padding-top: 124px; }
  .g-subnav { top: 64px; }
  .g-subnav .g-wrap { padding-right: 0; gap: 0; height: 52px; }
  .g-subnav b, .g-subnav .g-btn { display: none; }
  .g-subnav nav a { padding: 0 14px; }
  .g-subnav nav a:first-child { padding-left: 0; }
}

/* Two-column split: label on the left, content on the right. */
.g-split { display: grid; grid-template-columns: 4fr 8fr; gap: 24px 64px; align-items: start; }
.g-split > .g-label { padding-top: 10px; }
.g-statement { font-family: var(--head); font-stretch: 106%; font-size: clamp(24px, 2.5vw, 36px); font-weight: 500; line-height: 1.3; letter-spacing: -0.012em; color: var(--char); }
.g-dark .g-statement { color: #fff; }
.g-body p { font-size: 17.5px; color: var(--ink-2); max-width: 62ch; }
.g-body p + p { margin-top: 16px; }
.g-body .fine { font-size: 14.5px; color: var(--ink-3); }
@media (max-width: 900px) { .g-split { grid-template-columns: 1fr; } }

/* Alternating image and text rows. */
.g-rows { display: grid; gap: 24px; }
.g-row { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule-w); background: var(--white); }
.g-row figure { margin: 0; position: relative; min-height: 380px; overflow: hidden; }
.g-row figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g-row figure::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34%; height: 4px; background: var(--cyan); }
.g-row:nth-child(even) figure { order: 2; }
.g-row > div { padding: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.g-row small { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan-ink); }
.g-row h2 { font-size: clamp(26px, 2.4vw, 36px); margin: 14px 0 8px; }
.g-row .sub { font-weight: 600; color: var(--char); margin-bottom: 14px; }
.g-row p { color: var(--ink-2); max-width: 52ch; }
.g-row .g-link { margin-top: 24px; align-self: flex-start; }
@media (max-width: 900px) { .g-row { grid-template-columns: 1fr; } .g-row figure { min-height: 0; aspect-ratio: 16 / 9; } .g-row:nth-child(even) figure { order: 0; } }

/* Numbered sequence across a rule. */
.g-seq { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); border-top: 2px solid var(--char); }
.g-dark .g-seq { border-color: var(--cyan); }
.g-seq li { padding: 22px 24px 8px 0; }
.g-seq li + li { padding-left: 24px; border-left: 1px solid var(--rule-w); }
.g-dark .g-seq li + li { border-color: var(--rule-n); }
.g-seq span { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--cyan-ink); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.g-dark .g-seq span { color: var(--cyan); }
.g-seq b { display: block; font-family: var(--head); font-stretch: 108%; font-size: 19px; font-weight: 600; line-height: 1.3; }
.g-seq p { font-size: 15px; color: var(--ink-2); margin-top: 8px; }
.g-dark .g-seq p { color: rgba(255, 255, 255, 0.7); }
@media (max-width: 900px) {
  .g-seq { grid-template-columns: 1fr; }
  .g-seq li, .g-seq li + li { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--rule-w); }
  .g-dark .g-seq li { border-color: var(--rule-n); }
}

/* Columns divided by top rules. */
.g-cols { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 0 32px; }
.g-cols > div { border-top: 1px solid var(--rule-w); padding-top: 22px; }
.g-dark .g-cols > div { border-color: var(--rule-n); }
.g-cols small { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.g-dark .g-cols small { color: var(--steel); }
.g-cols h3 { font-size: 22px; margin-bottom: 10px; }
.g-cols p { font-size: 15.5px; color: var(--ink-2); }
.g-dark .g-cols p { color: rgba(255, 255, 255, 0.72); }
.g-cols .g-val { font-family: var(--head); font-stretch: 112%; font-size: clamp(28px, 2.6vw, 38px); font-weight: 600; color: var(--char); line-height: 1.1; margin-bottom: 10px; }
.g-dark .g-cols .g-val { color: #fff; }
@media (max-width: 900px) { .g-cols { grid-template-columns: 1fr; gap: 28px; } }

.g-tags { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--rule-w); border-left: 1px solid var(--rule-w); }
.g-tags span { flex: 1 1 auto; padding: 22px 26px; border-right: 1px solid var(--rule-w); border-bottom: 1px solid var(--rule-w); font-family: var(--head); font-stretch: 110%; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; color: var(--char); }

/* Services. */
.g-svc { display: grid; grid-template-columns: 4fr 8fr; gap: 24px 64px; padding: 72px 0; border-top: 1px solid var(--rule-w); }
.g-svc:first-child { border-top: 0; padding-top: 0; }
.g-svc h2 { font-size: clamp(26px, 2.4vw, 34px); margin: 16px 0 14px; }
.g-svc .lead-in { color: var(--ink-2); margin-bottom: 20px; }
.g-tier { display: grid; grid-template-columns: 180px 200px 1fr; gap: 6px 24px; padding: 20px 0; border-bottom: 1px solid var(--rule-w); align-items: baseline; }
.g-tier:first-child { border-top: 2px solid var(--char); }
.g-tier b { font-weight: 600; color: var(--char); }
.g-tier .p { font-family: var(--head); font-stretch: 108%; font-size: 19px; font-weight: 600; color: var(--cyan-ink); font-variant-numeric: tabular-nums; }
.g-tier .p small { font-family: var(--sans); font-size: 13px; color: var(--ink-3); font-weight: 500; }
.g-tier p { font-size: 15px; color: var(--ink-2); }
.g-note { margin-top: 16px; font-size: 14.5px; color: var(--ink-3); padding-left: 14px; border-left: 2px solid var(--cyan); }
@media (max-width: 1000px) { .g-tier { grid-template-columns: 1fr auto; } .g-tier p { grid-column: 1 / -1; } }
@media (max-width: 900px) { .g-svc { grid-template-columns: 1fr; padding: 56px 0; } }

/* People. */
.g-team { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px 24px; }
.g-person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; background: var(--mist); }
.g-person h3 { font-size: 18px; margin: 18px 0 6px; }
.g-person small { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan-ink); margin-bottom: 10px; }
.g-person p { font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 1100px) { .g-team { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .g-team { grid-template-columns: 1fr 1fr; gap: 28px 16px; } .g-person h3 { font-size: 16px; } .g-person p { display: none; } }

/* Partner directory. */
.g-plist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 40px; }
.g-plist > div { border-top: 2px solid var(--char); padding-top: 18px; }
.g-plist h3 { font-family: var(--sans); font-stretch: normal; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--char); margin-bottom: 8px; }
.g-plist ul { list-style: none; margin: 0; padding: 0; }
.g-plist li { padding: 12px 0; border-bottom: 1px solid var(--rule-w); font-weight: 500; color: var(--char); }
.g-plist li a { color: var(--cyan-ink); }
.g-plist li a:hover { text-decoration: underline; }
.g-plist li span { display: block; font-size: 14px; font-weight: 400; color: var(--ink-3); margin-top: 2px; }
@media (max-width: 1000px) { .g-plist { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .g-plist { grid-template-columns: 1fr; } }

/* Contact. */
.g-contact { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.g-cdetails > div { padding: 22px 0; border-bottom: 1px solid var(--rule-w); }
.g-cdetails > div:first-child { border-top: 2px solid var(--char); }
.g-cdetails dt { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.g-cdetails dd { margin: 0; font-size: 18px; font-weight: 500; color: var(--char); line-height: 1.5; }
.g-cdetails dd a:hover { color: var(--cyan-ink); }
.g-form { background: var(--mist); padding: clamp(28px, 4vw, 48px); border-top: 4px solid var(--cyan); }
.g-form h2 { font-size: 26px; margin-bottom: 26px; }
.g-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.g-form .f { margin-bottom: 20px; }
.g-form label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.g-form input, .g-form textarea { width: 100%; height: 52px; padding: 0 16px; font: inherit; font-size: 16px; color: var(--ink); background: var(--white); border: 1px solid #c9d2df; border-radius: 0; transition: border-color 0.2s, box-shadow 0.2s; }
.g-form textarea { height: 160px; padding: 14px 16px; resize: vertical; }
.g-form input:focus, .g-form textarea:focus { outline: none; border-color: var(--cyan-ink); box-shadow: 0 0 0 3px rgba(25, 184, 240, 0.18); }
.g-form .hp { position: absolute; left: -9999px; }
.g-form button { cursor: pointer; }
.g-form small { display: block; margin-top: 14px; font-size: 13.5px; color: var(--ink-3); }
.g-form .form-status { margin-top: 12px; font-weight: 500; color: var(--char); }
.g-map { height: 420px; background: var(--mist); border-top: 1px solid var(--rule-w); }
.g-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.6) contrast(1.05); display: block; }
@media (max-width: 900px) { .g-contact { grid-template-columns: 1fr; gap: 40px; } .g-form .two { grid-template-columns: 1fr; } .g-map { height: 300px; } }

.g-faq details { border-bottom: 1px solid var(--rule-w); }
.g-faq details:first-child { border-top: 2px solid var(--char); }
.g-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; font-family: var(--head); font-stretch: 106%; font-size: clamp(18px, 1.6vw, 21px); font-weight: 600; color: var(--char); }
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::after { content: "+"; font-family: var(--sans); font-weight: 400; font-size: 26px; line-height: 1; color: var(--cyan-ink); transition: transform 0.25s var(--ease); }
.g-faq details[open] summary::after { transform: rotate(45deg); }
.g-faq details p { padding: 0 0 26px; max-width: 70ch; color: var(--ink-2); }
.g-faq details p a { color: var(--cyan-ink); }

.g-wa { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 52px; height: 52px; display: grid; place-items: center; background: var(--char); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 8px 24px rgba(8, 9, 11, 0.3); transition: background 0.2s; }
.g-wa:hover { background: var(--char-3); }
.g-wa svg { width: 24px; height: 24px; }

/* Reveal. */
.rv { opacity: 0; transform: translateY(14px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } html { scroll-behavior: auto; } }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--cyan); color: var(--char); padding: 10px 14px; }
.skip:focus { top: 12px; }
.g-hero .g-label { color: rgba(255, 255, 255, 0.72); }

/* Round 2: one bento for platforms and brands, tonal pacing. */
.g-deep { background: var(--deep); }
.g-tone { background: var(--char-2); }
.g-bento-7 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, minmax(260px, 30vh)); height: auto; min-height: 0; }
.g-bento-7 .g-tile:first-child { grid-row: span 2; grid-column: span 2; }
.g-bento-7 .g-tile.wide { grid-column: span 2; }
.g-tile small { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; }
.g-tile h3 { font-size: clamp(19px, 1.6vw, 24px); }
.g-tile h3.wm { font-family: var(--wordmark); font-stretch: normal; font-weight: 400; letter-spacing: 0.05em; font-size: clamp(18px, 1.5vw, 22px); }
.g-tile.lead h3.wm { font-size: clamp(34px, 4vw, 60px); }
.g-tile.lead .cap { left: 36px; bottom: 34px; right: 100px; }
.g-tile.lead p { font-size: 16.5px; max-height: none; opacity: 1; margin-top: 14px; max-width: 46ch; }
.g-tile.lead .go { right: 32px; bottom: 34px; }
.g-tile .cap { left: 24px; right: 76px; bottom: 22px; }
.g-tile .go { right: 20px; bottom: 22px; }
.g-dark .g-lead h3 { color: #fff; }
.g-dark .g-role { color: var(--cyan); }
.g-dark .g-honours { border-color: var(--cyan); }
.g-dark .g-honours li { border-color: var(--rule-n); color: rgba(255, 255, 255, 0.68); }
.g-dark .g-honours b { color: #fff; }
@media (max-width: 1100px) {
  .g-bento-7 { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 280px; }
  .g-bento-7 .g-tile:first-child { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 640px) {
  .g-bento-7 { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .g-bento-7 .g-tile, .g-bento-7 .g-tile:first-child, .g-bento-7 .g-tile.wide { grid-column: auto; aspect-ratio: 4 / 3.2; }
  .g-tile.lead .cap { left: 20px; right: 72px; bottom: 20px; }
  .g-tile.lead h3.wm { font-size: 34px; }
  .g-tile.lead .go { right: 18px; bottom: 20px; }
}
.g-tile { color: #fff; }
.g-tile::before { background: linear-gradient(180deg, rgba(15, 17, 20, 0) 30%, rgba(15, 17, 20, 0.94) 100%); }
.g-tile small { color: var(--cyan); white-space: nowrap; }

/* Round 3: sharp hero photograph, full-bleed tiles, quieter tile labels. */
.g-hero > .g-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; filter: none; }
.g-hero > .g-hero-media::after { background: linear-gradient(90deg, rgba(15, 17, 20, 0.92) 0%, rgba(15, 17, 20, 0.7) 32%, rgba(15, 17, 20, 0) 62%), linear-gradient(0deg, rgba(15, 17, 20, 0.75) 0%, rgba(15, 17, 20, 0) 35%); }
.g-hero h1 { font-size: clamp(44px, 6.4vw, 104px); max-width: 12ch; }
.g-hero-foot { border-top: 0; padding-top: 0; margin-top: 36px; grid-template-columns: minmax(0, 52ch) auto; justify-content: start; }
.g-bleed { padding: 0 16px; }
.g-bento-7 { gap: 16px; grid-template-rows: repeat(3, minmax(280px, 32vh)); }
.g-tile:not(.lead) small { display: none; }
.g-tile:not(.lead) p { font-size: 14.5px; }
@media (max-width: 1000px) {
  .g-hero > .g-hero-media img { object-position: 75% center; }
  .g-hero > .g-hero-media::after { background: linear-gradient(180deg, rgba(15, 17, 20, 0.15) 0%, rgba(15, 17, 20, 0.9) 60%); }
  .g-hero-foot { grid-template-columns: 1fr; }
  .g-bleed { padding: 0; }
  .g-bleed .g-bento-7 { padding: 0 var(--m); }
}
.g-hero > .g-hero-media img { transform: scaleX(-1); object-position: 30% 40%; }
@media (max-width: 1000px) { .g-hero > .g-hero-media img { object-position: 25% center; } }
.g-hero > .g-hero-media { left: 14%; right: -6%; }
.g-hero h1 { font-size: clamp(44px, 5.8vw, 92px); }
@media (max-width: 1000px) { .g-hero > .g-hero-media { left: 0; right: 0; } }
.g-hero-foot { display: block; margin-top: 40px; }
.g-hero > .g-hero-body { padding-bottom: 170px; }
.g-portrait::before { display: none; }
.g-tile .cap { right: 28px; }
.g-tile.lead .cap { right: 36px; }
.g-tile h3::after { content: " →"; color: var(--cyan); opacity: 0; transition: opacity 0.3s; }
.g-tile:hover h3::after { opacity: 1; }

/* ---------- Neutral surfaces, navy as accent ---------- */
.g-dark { background: var(--char); }
.g-deep { background: var(--deep); }
.g-tone { background: var(--char-2); }
.g-mist { background: var(--mist); }
#partners { background: var(--mist); }
.g-logos > div { background: var(--paper); }
.g-sec + .g-sec:not(.g-dark):not(.g-mist) { border-top-color: var(--rule-w); }

/* Navy accents on light surfaces. */
.g-label, .g-link, .g-role, .g-brand .sub, .g-row small, .g-person small, .g-plist li a, .g-faq summary::after, .g-faq details p a, .g-entry small, .g-tier .p, .g-vm h3 { color: var(--navy); }
.g-tier:first-child, .g-honours, .g-seq, .g-plist > div, .g-cdetails > div:first-child, .g-faq details:first-child, .g-vm, .g-facts { border-top-color: var(--navy); }
.g-note { border-left-color: var(--navy); }
.g-form { border-top-color: var(--navy); background: var(--mist); }
.g-form input:focus, .g-form textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-tint); }
.g-btn-navy { background: var(--navy); }
.g-btn-navy:hover { background: var(--navy-deep); }
.g-subnav { background: rgba(244, 243, 240, 0.96); }
.g-subnav nav a.on::after { background: var(--navy); }
.g-row figure::after { background: var(--navy); }

/* On dark surfaces navy works as a tint and a panel colour; cyan stays the bright accent. */
.g-dark .g-label, .g-dark .g-link, .g-dark .g-role { color: var(--cyan); }
.g-dark .g-honours, .g-dark .g-seq { border-top-color: var(--cyan); }
.g-hero > .g-hero-media::after { background: linear-gradient(90deg, rgba(15, 17, 20, 0.92) 0%, rgba(15, 17, 20, 0.66) 32%, rgba(18, 40, 77, 0.12) 62%, rgba(18, 40, 77, 0) 100%), linear-gradient(0deg, rgba(15, 17, 20, 0.75) 0%, rgba(15, 17, 20, 0) 35%); }
.g-phero .g-hero-panel { background: var(--char); }
.g-phero .g-hero-media::after { background: linear-gradient(90deg, rgba(15, 17, 20, 0.85), rgba(18, 40, 77, 0.25)); }
.g-tile::before { background: linear-gradient(180deg, rgba(18, 40, 77, 0) 35%, rgba(18, 40, 77, 0.35) 60%, rgba(12, 14, 17, 0.94) 100%); }
.g-tile small { color: var(--cyan); }
.g-cta { background: var(--char); }
.g-cta::before { background: var(--navy-deep); }
.g-hdr { background: var(--char); }
.g-util { background: var(--deep); }
.g-ftr { background: var(--deep); }
.cx { background: var(--char-2); }
.cx .cv { background: var(--char-2); }
.cx-item.on { background: linear-gradient(90deg, rgba(28, 61, 114, 0.35), rgba(28, 61, 114, 0)); }
.g-pfacts { background: var(--paper); }
.g-pfacts dd { color: var(--char); }
.g-tags span { background: var(--paper); }
.g-row { background: var(--paper); }

/* ---------- Ascent: scroll behaviours (see ascend.js) ---------- */
.g-field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 30; pointer-events: none; }
.g-hero-media, .g-hero-copy, .g-phero-copy { will-change: transform; }

/* Ascending steps: each section rises over the one below at the identity angle. */
main > section + section:not(.g-hero + section) {
  --s: clamp(28px, 4vw, 64px);
  position: relative;
  margin-top: calc(var(--s) * -1);
  padding-top: calc(clamp(80px, 9vw, 128px) + var(--s));
  clip-path: polygon(0 var(--s), 100% 0, 100% 100%, 0 100%);
}
main > section + section:not(.g-hero + section)::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--s) + 3px); z-index: 2; pointer-events: none;
  background: var(--cyan); clip-path: polygon(0 var(--s), 100% 0, 100% 3px, 0 calc(var(--s) + 3px)); opacity: 0.9;
}
main > section.g-cta + section, main > section + section.g-cta { padding-top: var(--s); }
main > .g-subnav + section { position: relative; }

/* Content rises into place. */
.rv { transform: translateY(34px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }

/* Summit: the footer sits beneath the page, which lifts off it at the end. */
main { position: relative; z-index: 1; background: var(--white); }
@media (min-width: 1001px) and (min-height: 760px) {
  .g-ftr { position: sticky; bottom: 0; z-index: 0; }
}
.g-summit { position: relative; height: clamp(130px, 15vw, 230px); margin: -24px 0 48px; border-bottom: 1px solid var(--rule-n); }
.g-summit canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) { .g-summit { display: none; } .rv { transform: none; } }
main > section:last-child:not(.g-hero + section):nth-child(n) { --s: clamp(28px, 4vw, 64px); clip-path: polygon(0 var(--s), 100% 0, 100% calc(100% - var(--s)), 0 100%); padding-bottom: var(--s); }
main > section:last-child { position: relative; }
main { background: transparent; }
main > section.g-sec:last-child:not(.g-hero + section):nth-child(n) { padding-bottom: calc(clamp(80px, 9vw, 128px) + var(--s)); }
body.g { background: var(--deep); }
.g-sec:not(.g-dark):not(.g-mist):not(#partners) { background: var(--white); }
.g-ftr h2 { font-family: var(--sans); font-stretch: normal; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; margin: 0 0 18px; line-height: 1.6; }
.g-vm h2 { font-family: var(--sans); font-stretch: normal; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); margin: 0 0 18px; line-height: 1.6; }
.g-pfacts dl.g-wrap { margin-top: 0; margin-bottom: 0; }
/* Contrast: text on photographs. */
.g-tile::before { background: linear-gradient(180deg, rgba(12, 14, 17, 0.05) 0%, rgba(12, 14, 17, 0.45) 38%, rgba(12, 14, 17, 0.88) 68%, rgba(12, 14, 17, 0.96) 100%); }
.g-tile .cap { text-shadow: 0 1px 14px rgba(8, 9, 11, 0.55); }
.g-tile small { color: #8ee0ff; }
.g-tile p { color: rgba(255, 255, 255, 0.86); }
.g-crumb { color: rgba(255, 255, 255, 0.72); }
@media (max-width: 1000px) {
  .g-phero .g-hero-media { inset: 0 0 auto 0; height: calc(64px + 34vh); }
  .g-phero .g-hero-media::after { background: linear-gradient(180deg, rgba(15, 17, 20, 0.15) 0%, rgba(15, 17, 20, 0.35) 55%, var(--char) 100%); }
  .g-phero-body { padding: 36vh 0 48px; }
}
@media (max-width: 1000px) {
  .g-hero { background: var(--char); }
  .g-hero > .g-hero-media { inset: 0 0 auto 0; height: calc(64px + 44vh); left: 0; right: 0; }
  .g-hero > .g-hero-media::after { background: linear-gradient(180deg, rgba(15, 17, 20, 0.1) 0%, rgba(15, 17, 20, 0.3) 60%, var(--char) 100%); }
  .g-hero > .g-hero-body { padding: calc(44vh + 8px) 0 96px; }
}
.g-phero .g-label { color: var(--cyan); }
/* Calmer ascent: finer steps, quieter stripe, slower reveals. */
main > section + section:not(.g-hero + section) { --s: clamp(20px, 3vw, 46px); }
main > section:last-child:not(.g-hero + section):nth-child(n) { --s: clamp(20px, 3vw, 46px); }
main > section + section:not(.g-hero + section)::before { height: calc(var(--s) + 2px); clip-path: polygon(0 var(--s), 100% 0, 100% 1.5px, 0 calc(var(--s) + 1.5px)); opacity: 0.55; }
.rv { transform: translateY(22px); transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.6s cubic-bezier(0.16, 1, 0.3, 1); }
.g-hero-cut { height: 72px; }
.g-hero-cut::after { inset: 3px 0 0 0; }
@media (max-width: 1000px) { .g-hero-cut { height: 40px; } }
/* Climb indicator and floor transitions. */
.g-field { display: none; }
.g-rail { position: fixed; right: 22px; top: 50%; z-index: 55; width: 1px; height: 140px; margin-top: -70px; background: rgba(142, 145, 150, 0.32); pointer-events: none; }
.g-rail i { position: absolute; inset: 0; background: var(--cyan); transform-origin: top; transform: scaleY(0); }
.g-rail::before, .g-rail::after { content: ""; position: absolute; left: -2px; width: 5px; height: 1px; background: rgba(142, 145, 150, 0.6); }
.g-rail::before { top: 0; } .g-rail::after { bottom: 0; }
@media (max-width: 1000px) { .g-rail { display: none; } }
main > section > .g-wrap { will-change: transform, opacity; }

/* ---------- Capabilities: pinned stacked scroll ---------- */
.cs { position: relative; height: calc(var(--n, 8) * 62vh + 70vh); }
.cs-pin { position: sticky; top: 106px; height: calc(100vh - 106px); display: grid; grid-template-columns: 7fr 5fr; gap: 24px; align-items: center; padding: 24px 0; }
.cs .cv { height: min(100%, 620px); min-height: 0; border: 1px solid var(--rule-n); background: var(--char-2); }
.cs-stack { position: relative; height: min(100%, 620px); }
.cs-card { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 34px 36px; background: var(--char-2); border: 1px solid var(--rule-n); transform-origin: 50% 0; will-change: transform, opacity; box-shadow: 0 -18px 40px rgba(8, 9, 11, 0.45); }
.cs-card::before { content: ""; position: absolute; left: -1px; top: -1px; width: 72px; height: 2px; background: var(--cyan); }
.cs-card .n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--cyan); }
.cs-card .n i { font-style: normal; color: var(--steel); }
.cs-card h3 { font-size: clamp(24px, 2.2vw, 32px); margin: 14px 0 14px; color: #fff; }
.cs-card p { font-size: 16px; color: rgba(255, 255, 255, 0.74); max-width: 44ch; }
.cs-card ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.cs-card li { font-size: 14px; padding: 10px 0; border-top: 1px solid var(--rule-n); color: rgba(255, 255, 255, 0.86); }
@media (max-width: 1000px) {
  .cs { height: calc(var(--n, 8) * 55vh + 60vh); }
  .cs-pin { top: 64px; height: calc(100vh - 64px); grid-template-columns: 1fr; grid-template-rows: 38% 1fr; gap: 14px; padding: 12px 0 18px; align-items: stretch; }
  .cs .cv { height: 100%; }
  .cs-stack { height: 100%; }
  .cs-card { padding: 22px 20px 24px; }
  .cs-card h3 { font-size: 22px; margin: 10px 0; }
  .cs-card p { font-size: 15px; }
  .cs-card ul { margin-top: 14px; }
  .cs-card li { padding: 7px 0; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .cs-card { transition: opacity 0.3s; } }
.cs-card { top: 60px; bottom: auto; }
.cs-card::after { content: ""; position: absolute; inset: -1px; background: var(--char); opacity: var(--dim, 0); pointer-events: none; }
@media (max-width: 1000px) { .cs-card { top: 40px; } }

/* ===== Home hero: emblem in place of the photo (2026-10-16) =====
   Same copy and layout as the photo hero; the robot-arm photo is replaced by
   the Genesys mark inside dotted instrument rings (drawn by hero.js). */
.g-hero-em { background: radial-gradient(46% 62% at 72% 44%, rgba(28, 61, 114, 0.34), rgba(28, 61, 114, 0) 72%), linear-gradient(180deg, var(--char) 0%, var(--deep) 100%); }
.g-hero-em > .g-hero-media { inset: 106px 0 0 0; left: 0; right: 0; }
.g-hero-em > .g-hero-media::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1.3px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(48% 62% at 72% 40%, #000 0%, transparent 85%); mask-image: radial-gradient(48% 62% at 72% 40%, #000 0%, transparent 85%); }
.g-hero-em > .g-hero-media::after { display: none; }
.g-emblem { position: absolute; top: 46%; right: max(var(--m), calc((100% - var(--wrap)) / 2 + var(--m))); width: min(42vw, 600px, 74vh); aspect-ratio: 1; transform: translateY(-50%); }
.g-hero-em .g-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.g-hero-em > .g-hero-media::before { display: none; }
.g-hero > .g-hero-media .g-emblem img { position: absolute; left: 50%; top: 50%; width: 50%; height: 50%; margin: -25% 0 0 -25%; border-radius: 50%; object-fit: cover; object-position: center; filter: none; opacity: 0; will-change: transform, opacity; box-shadow: 0 0 0 1px rgba(25, 184, 240, 0.25), 0 30px 60px rgba(0, 0, 0, 0.45); }
@media (prefers-reduced-motion: reduce) { .g-hero > .g-hero-media .g-emblem img { opacity: 1; } }
@media (max-width: 1000px) {
  .g-hero-em > .g-hero-media { inset: 64px 0 auto 0; height: 44vh; }
  .g-hero-em > .g-hero-media::before { -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 85%); mask-image: radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 85%); }
  .g-emblem { top: 50%; right: auto; left: 50%; width: min(74vw, 38vh, 360px); transform: translate(-50%, -50%); }
  .g-hero-em { background: radial-gradient(80% 32% at 50% 24%, rgba(28, 61, 114, 0.38), rgba(28, 61, 114, 0) 72%), linear-gradient(180deg, var(--char) 0%, var(--deep) 100%); }
}

/* ===== Capabilities stack, refined (2026-10-16) =====
   One sheet at a time: each field's sheet rises from below the frame and
   covers the last, which settles back. The figure stands unboxed on the
   section; a single caption row carries the count and overall progress. */
.cs-pin { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(32px, 4vw, 72px); align-items: stretch; padding: 40px 0 48px; }
.cs .cv { height: auto; min-height: 0; background: transparent; border: 0; border-bottom: 1px solid var(--rule-n); overflow: visible; }
.cs .cv figcaption { inset: auto 0 -1px 0; height: 56px; display: flex; align-items: center; gap: 18px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: none; color: var(--steel); }
.cs .cv-tl, .cs .cv-tr, .cs .cv-scale { display: none; }
.cs .cv-name { position: static; font-size: 13px; color: #fff; letter-spacing: 0.02em; }
.cs .cv-count { color: var(--cyan); font-variant-numeric: tabular-nums; }
.cs .cv-count i { font-style: normal; color: var(--steel); }
.cs .cv-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--cyan); transform-origin: 0 50%; transform: scaleX(0); }
.cs-stack { height: auto; overflow: hidden; clip-path: inset(0); }
.cs-card { top: 0; bottom: 0; display: flex; flex-direction: column; padding: clamp(28px, 3vw, 44px); background: var(--char); border: 1px solid var(--rule-n); box-shadow: none; transform-origin: 50% 0; }
.cs-card::before { display: none; }
.cs-card .n { font-size: 12px; letter-spacing: 0.08em; }
.cs-card h3 { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.08; letter-spacing: -0.015em; margin: 18px 0 18px; max-width: 16ch; }
.cs-card p { font-size: 16.5px; line-height: 1.6; max-width: 42ch; }
.cs-card ul { margin-top: auto; padding-top: 28px; grid-template-columns: 1fr; }
.cs-card li { display: flex; gap: 16px; padding: 12px 0; font-size: 15px; }
.cs-card li::before { content: counter(f, decimal-leading-zero); counter-increment: f; font-family: var(--mono); font-size: 11px; color: var(--steel); padding-top: 3px; }
.cs-card ul { counter-reset: f; }
.cs-card li:last-child { border-bottom: 1px solid var(--rule-n); }
.cs-next { margin-top: 22px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--steel); }
.cs-next b { font-weight: 500; color: rgba(255, 255, 255, 0.8); }
.cs-next a { color: var(--cyan); }
#capabilities > .g-wrap > .g-head, #fields > .g-wrap > .g-head { margin-bottom: 8px; }
@media (max-width: 1000px) {
  .cs-pin { grid-template-columns: 1fr; grid-template-rows: 36% 1fr; gap: 12px; padding: 8px 0 16px; }
  .cs .cv figcaption { height: 40px; font-size: 11px; }
  .cs-card { top: 0; padding: 22px 20px; }
  .cs-card h3 { font-size: 24px; margin: 10px 0 10px; }
  .cs-card p { font-size: 15px; }
  .cs-card ul { padding-top: 14px; }
  .cs-card li { padding: 8px 0; font-size: 14px; }
  .cs-next { margin-top: 12px; font-size: 11px; }
}
@media (max-width: 1000px) and (max-height: 760px) { .cs-card ul, .cs-card .n { display: none; } }
.cs-card .n { display: none; }
.cs-card h3 { margin-top: 0; }

/* ===== Ascent, amplified (2026-10-16) ===== */
/* Altitude index: replaces the hairline rail. One stop per section, ending
   at the summit; the current stop shows its name. Desktop only. */
.g-rail { display: none; }
.g-alt { position: fixed; right: 18px; top: 50%; z-index: 55; transform: translateY(-50%); --c: rgba(255, 255, 255, 0.86); --m: rgba(255, 255, 255, 0.34); }
.g-alt.light { --c: var(--ink); --m: rgba(19, 21, 24, 0.32); }
.g-alt::before { content: ""; position: absolute; right: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--m); }
.g-alt-fill { position: absolute; right: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--cyan); transform-origin: top; transform: scaleY(0); }
.g-alt ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.g-alt a { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 12px; padding-right: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--c); text-decoration: none; }
.g-alt a::after { content: ""; position: absolute; right: 2px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--m); transition: background 0.4s, transform 0.4s var(--ease); }
.g-alt a.past::after { background: var(--cyan); }
.g-alt a.on::after { background: var(--cyan); transform: scale(1.6); }
.g-alt b, .g-alt span { opacity: 0; translate: 6px 0; transition: opacity 0.35s, translate 0.45s var(--ease); font-weight: 500; white-space: nowrap; }
.g-alt b { color: var(--cyan); }
.g-alt a.on b, .g-alt:hover b, .g-alt:hover span { opacity: 1; translate: 0 0; }
.g-alt:hover a:not(.on) span, .g-alt:hover a:not(.on) b { opacity: 0.75; }
.g-alt:hover::after { content: ""; position: absolute; z-index: -1; top: -14px; bottom: -14px; right: -18px; width: 170px; background: linear-gradient(90deg, transparent, var(--bg, rgba(11, 12, 14, 0.92)) 30%); pointer-events: none; }
.g-alt.light { --bg: rgba(244, 243, 240, 0.94); }
.g-alt a:focus-visible { outline: 1px solid var(--cyan); outline-offset: 3px; }
@media (max-width: 1000px) { .g-alt { display: none; } }

/* Headings rise word by word out of a mask. */
.ah .aw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.ah .aw > span { display: inline-block; transform: translate3d(0, 105%, 0); transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.ah.up .aw > span { transform: none; }

/* Tile photographs drift against the scroll for depth. */
@property --zs { syntax: "<number>"; inherits: false; initial-value: 1.14; }
.g-tile img { --zs: 1.14; transform: translate3d(0, var(--py, 0%), 0) scale(var(--zs)); transition: --zs 1.2s var(--ease); will-change: transform; }
.g-tile:hover img { --zs: 1.19; transform: translate3d(0, var(--py, 0%), 0) scale(var(--zs)); }
.g-alt span { position: absolute; right: calc(100% + 8px); top: 50%; margin-top: -0.6em; line-height: 1.2; }
.g-alt a { gap: 0; }

/* Hero headline forming from dots (hero.js). The text is transparent only
   while the dots hold it, then fades in beneath them. */
.g-hero-em .g-hero-copy { position: relative; }
.g-hero-em h1.h1-dots { color: transparent; transition: color 0.6s var(--ease); }
.g-hero-em h1.h1-dots.h1-in { color: #fff; }
.g-hero-em .h1-field { position: absolute; pointer-events: none; z-index: 1; }

/* ===== UX pass (2026-10-16) ===== */
/* Slimmer header once the page leaves the top: the utility bar tucks away and
   everything that sticks below the header follows it. Desktop only. */
:root { --top: 106px; }
.g-top { transition: transform 0.45s var(--ease); will-change: transform; }
@media (min-width: 901px) {
  html.is-compact { --top: 72px; }
  html.is-compact .g-top { transform: translate3d(0, -34px, 0); }
  .g-subnav { top: var(--top); transition: top 0.45s var(--ease); }
  .cs-pin { top: var(--top); height: calc(100vh - var(--top)); transition: top 0.45s var(--ease); }
}

/* Page-to-page (vt.js): the new page rises over the old one behind a panel
   at the identity angle, with the cyan edge riding its top, while the old
   page sinks and dims. Going back, the panel comes down from above instead.
   The header stays put. Browsers without cross-document view transitions simply
   navigate as normal. */
@view-transition { navigation: auto; }
.g-top { view-transition-name: g-top; }
.g-vt-edge { position: fixed; left: 0; top: calc(-1 * var(--vt-a) - 10px); width: 100%; height: calc(var(--vt-a) + 6px); z-index: 59; pointer-events: none; background: var(--cyan); clip-path: polygon(0 var(--vt-a), 100% 0, 100% 6px, 0 calc(var(--vt-a) + 6px)); view-transition-name: g-vt-edge; }
:root { --vt-a: 130px; --vt-d: 0.82s; --vt-e: cubic-bezier(0.72, 0, 0.18, 1); }
::view-transition-old(root) { animation: g-vt-sink var(--vt-d) var(--vt-e) both; }
::view-transition-new(root) { animation: g-vt-rise var(--vt-d) var(--vt-e) both; }
::view-transition-new(g-vt-edge) { animation: g-vt-edge-up var(--vt-d) var(--vt-e) both; }
/* Layering inside the transition: the travelling dots, the edge, then the header. */
::view-transition-group(g-vt-dots) { z-index: 2; }
::view-transition-group(g-vt-edge) { z-index: 3; }
::view-transition-group(g-top) { z-index: 4; }
::view-transition-new(g-vt-dots) { animation: none; }
.g-vt-dots { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 58; pointer-events: none; }
@keyframes g-vt-sink { to { transform: translate3d(0, -9vh, 0); opacity: 0.3; } }
@keyframes g-vt-rise {
  from { clip-path: polygon(0 calc(100% + var(--vt-a)), 100% 100%, 100% 100%, 0 100%); }
  to { clip-path: polygon(0 0, 100% calc(-1 * var(--vt-a)), 100% 100%, 0 100%); }
}
@keyframes g-vt-edge-up { from { transform: translate3d(0, calc(100vh + var(--vt-a) + 10px), 0); } to { transform: translate3d(0, 10px, 0); } }
html:active-view-transition-type(back)::view-transition-old(root) { animation-name: g-vt-sink-back; }
html:active-view-transition-type(back)::view-transition-new(root) { animation-name: g-vt-fall; }
html:active-view-transition-type(back)::view-transition-new(g-vt-edge) { animation-name: g-vt-edge-down; }
@keyframes g-vt-sink-back { to { transform: translate3d(0, 9vh, 0); opacity: 0.3; } }
@keyframes g-vt-fall {
  from { clip-path: polygon(0 0, 100% 0, 100% calc(-1 * var(--vt-a)), 0 0); }
  to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% + var(--vt-a))); }
}
@keyframes g-vt-edge-down { from { transform: translate3d(0, 10px, 0); } to { transform: translate3d(0, calc(100vh + var(--vt-a) + 10px), 0); } }
@media (max-width: 900px) { :root { --vt-a: 60px; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Platform tiles: a lens of cyan dots follows the cursor over the photograph,
   in the same dot language as the hero and figures. */
.g-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle, rgba(25, 184, 240, 0.8) 1.05px, transparent 1.5px); background-size: 8px 8px; -webkit-mask-image: radial-gradient(170px circle at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, 0.35) 50%, transparent 100%); mask-image: radial-gradient(170px circle at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, 0.35) 50%, transparent 100%); opacity: 0; transition: opacity 0.5s var(--ease); }
.g-tile:hover::after { opacity: 1; }
@media (hover: none) { .g-tile::after { display: none; } }
/* Dark disc behind the dotted mark (hero.js tilts it with the assembly). */
.g-hero-em .g-field { z-index: 1; }
.g-emblem { z-index: 0; }
.g-emblem-disc { position: absolute; left: 50%; top: 50%; width: 51%; height: 51%; margin: -25.5% 0 0 -25.5%; border-radius: 50%; background: rgba(8, 11, 17, 0.82); opacity: 0; will-change: transform, opacity; }
.g-subnav { background: var(--white); }

/* ===== Scroll-linked motion on the compositor (2026-10-16) =====
   Section rise and settle, the hero lift-off, tile depth and the index fill
   are CSS scroll-driven animations, so they move in lockstep with native
   scrolling instead of a frame behind it. Driving them from script made the
   content inside each section shimmy against its section's edge, most
   visibly where dark and light sections meet. ascend.js keeps a script
   fallback for browsers without scroll-driven animations. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main > section:not(.g-hero):not(.g-phero) { view-timeline-name: --floor; }
    /* Content rises into place as its section climbs into view. */
    main > section:not(.g-hero):not(.g-phero) > :is(.g-wrap, .g-bleed) {
      animation: g-floor-in linear both, g-floor-out linear both;
      animation-timeline: --floor, --floor;
      animation-range: cover 0px cover 75vh, cover calc(100% - 100vh) cover 100%;
    }
    /* The last section hands over to the footer instead of settling. */
    main > section:last-child:not(.g-hero):not(.g-phero) > :is(.g-wrap, .g-bleed) {
      animation: g-floor-in linear both;
      animation-timeline: --floor;
      animation-range: cover 0px cover 75vh;
    }
    @keyframes g-floor-in {
      from { transform: translate3d(0, 90px, 0); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
      to { transform: translate3d(0, 0, 0); }
    }
    @keyframes g-floor-out {
      from { translate: 0 0; opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
      to { translate: 0 64px; opacity: 0.55; }
    }

    /* Hero lift-off: the image settles away below while the copy rises. */
    .g-hero, .g-phero { view-timeline-name: --hero; }
    :is(.g-hero, .g-phero) > .g-hero-media { animation: g-crane-media linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    :is(.g-hero .g-hero-copy, .g-phero .g-phero-copy) { animation: g-crane-copy linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    @keyframes g-crane-media { to { transform: translate3d(0, 20%, 0) scale(1.035); } }
    @keyframes g-crane-copy {
      from { transform: translate3d(0, 0, 0); opacity: 1; }
      to { transform: translate3d(0, -6vh, 0); opacity: 0.4; }
    }

    /* Tile photographs drift against the scroll. */
    .g-tile img { animation: g-tile-depth linear both; animation-timeline: view(); animation-range: cover; }
    @keyframes g-tile-depth { from { translate: 0 4.5%; } to { translate: 0 -4.5%; } }

    /* Index fill follows the whole page. */
    .g-alt-fill { animation: g-rail linear both; animation-timeline: scroll(root); }
    @keyframes g-rail { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
}

/* Anchor jumps land below the header (and the sub-navigation, if any). */
@media (max-width: 900px) { :root { --top: 64px; } }
html { scroll-padding-top: calc(var(--top) + 16px); }
html:has(.g-subnav) { scroll-padding-top: calc(var(--top) + 77px); }

/* With reduced motion the footer stays in normal flow, so nothing can show
   through the angled section edges. */
@media (prefers-reduced-motion: reduce) { .g-ftr { position: static !important; visibility: visible !important; } }

/* ===== Capabilities, instrument pass (2026-10-16) =====
   The figure stands on a faint blueprint grid with crop marks and a ruler,
   and the caption row carries a live bearing readout (written by capfig.js).
   Each sheet carries its field number as a large halftone numeral, drawn in
   the same dots as the figures, filling in as the sheet arrives. */
.cs .cv::before { content: ""; position: absolute; inset: 0 0 56px 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(214, 239, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214, 239, 255, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(214, 239, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214, 239, 255, 0.025) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(58% 58% at 50% 50%, #000 15%, transparent 100%);
  mask-image: radial-gradient(58% 58% at 50% 50%, #000 15%, transparent 100%); }
.cs .cv::after { content: ""; position: absolute; inset: 0 0 56px 0; pointer-events: none;
  background:
    linear-gradient(rgba(214, 239, 255, 0.4), rgba(214, 239, 255, 0.4)) 0 0 / 18px 1px no-repeat,
    linear-gradient(rgba(214, 239, 255, 0.4), rgba(214, 239, 255, 0.4)) 0 0 / 1px 18px no-repeat,
    linear-gradient(rgba(214, 239, 255, 0.4), rgba(214, 239, 255, 0.4)) 100% 0 / 18px 1px no-repeat,
    linear-gradient(rgba(214, 239, 255, 0.4), rgba(214, 239, 255, 0.4)) 100% 0 / 1px 18px no-repeat,
    repeating-linear-gradient(180deg, rgba(214, 239, 255, 0.3) 0 1px, transparent 1px 120px) 0 60px / 12px calc(100% - 120px) no-repeat,
    repeating-linear-gradient(180deg, rgba(214, 239, 255, 0.16) 0 1px, transparent 1px 24px) 0 60px / 6px calc(100% - 120px) no-repeat; }
.cs .cv canvas { z-index: 1; }
.cs .cv figcaption { z-index: 2; }
.cs .cv-read { margin-left: auto; color: var(--steel); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; white-space: nowrap; }

.cs-card { background: linear-gradient(var(--cyan), var(--cyan)) -1px -1px / 56px 2px no-repeat, var(--char); }
.cs-card::before { display: block; content: ""; position: absolute; inset: 12px; width: auto; height: auto; pointer-events: none;
  background:
    linear-gradient(rgba(214, 239, 255, 0.3), rgba(214, 239, 255, 0.3)) 100% 0 / 12px 1px no-repeat,
    linear-gradient(rgba(214, 239, 255, 0.3), rgba(214, 239, 255, 0.3)) 100% 0 / 1px 12px no-repeat,
    linear-gradient(rgba(214, 239, 255, 0.3), rgba(214, 239, 255, 0.3)) 100% 100% / 12px 1px no-repeat,
    linear-gradient(rgba(214, 239, 255, 0.3), rgba(214, 239, 255, 0.3)) 100% 100% / 1px 12px no-repeat,
    linear-gradient(rgba(214, 239, 255, 0.3), rgba(214, 239, 255, 0.3)) 0 100% / 12px 1px no-repeat,
    linear-gradient(rgba(214, 239, 255, 0.3), rgba(214, 239, 255, 0.3)) 0 100% / 1px 12px no-repeat; }
.cs-card h3 { order: 1; }
.cs-card p { order: 2; }
.cs-card .n { display: block; order: 3; margin: auto 0 0; align-self: flex-end; padding-top: 12px; font-family: var(--head); font-stretch: 112%; font-weight: 700; font-size: clamp(96px, 16vh, 200px); line-height: 0.76; letter-spacing: -0.05em; color: transparent;
  background: radial-gradient(circle, rgba(25, 184, 240, 0.85) 1.2px, transparent 1.7px) 0 0 / 7px 7px;
  -webkit-background-clip: text; background-clip: text;
  opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), background-size 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); background-size: 11px 11px; }
.cs-card.on .n { opacity: 1; transform: none; background-size: 7px 7px; }
.cs-card .n i { display: none; }
.cs-card ul { order: 4; margin-top: 0; }
.cs-card .cs-next { order: 5; }
@media (max-width: 1000px) {
  .cs-card .n { font-size: 64px; padding-top: 8px; background-size: 5px 5px; }
  .cs-card.on .n { background-size: 4px 4px; }
  .cs .cv::after, .cs .cv-read { display: none; }
  .cs .cv::before { inset: 0 0 40px 0; }
}
@media (prefers-reduced-motion: reduce) { .cs-card .n { transition: none; } }
.cs .cv canvas { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 110px), transparent calc(100% - 50px)); mask-image: linear-gradient(180deg, #000 calc(100% - 110px), transparent calc(100% - 50px)); }
@media (max-width: 1000px) { .cs .cv canvas { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 70px), transparent calc(100% - 34px)); mask-image: linear-gradient(180deg, #000 calc(100% - 70px), transparent calc(100% - 34px)); } }
@media (max-width: 1000px) and (max-height: 760px) { .cs-card .n { display: none; } }

/* ===== Phone pass (2026-10-17) =====
   Structure and flow on phones. The capabilities stack becomes a swipe
   carousel under its figure instead of eight screens of pinned scrolling
   (g.js drives the figure from the sheet in view); the platform tiles become
   a swipe rail; the sub-navigation fades at its edges to show it scrolls; and
   the footer drops its contact column where the contact block sits just
   above it. */
@media (max-width: 1000px) {
  .cs { height: auto; }
  .cs-pin { position: static; display: block; height: auto; padding: 4px 0 0; }
  .cs .cv { height: min(44vh, 360px); }
  .cs-stack { display: flex; gap: 12px; height: auto; overflow-x: auto; overflow-y: hidden; clip-path: none; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin: 18px calc(var(--m) * -1) 0; padding: 0 var(--m) 2px; scroll-padding: 0 var(--m); }
  .cs-stack::-webkit-scrollbar { display: none; }
  .cs-card { position: relative; top: auto; bottom: auto; left: auto; right: auto; flex: 0 0 86%; scroll-snap-align: start; transform: none !important; opacity: 1 !important; padding: 24px 22px; }
  .cs-card::after { display: none; }
  .cs-card .n { display: none; }
  .cs-card ul { display: grid; margin-top: auto; padding-top: 18px; }
  .cs-card .cs-next { cursor: pointer; }
  .cs-card .cs-next::after { content: " \2192"; color: var(--cyan); }
  .cs-card:last-child .cs-next::after { content: none; }
}
@media (max-width: 1000px) and (max-height: 760px) { .cs-card ul { display: grid; } }
@media (max-width: 900px) {
  .g-bento-7 { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 calc(var(--m) * -1); padding: 0 var(--m) 2px; scroll-padding: 0 var(--m); }
  .g-bento-7::-webkit-scrollbar { display: none; }
  .g-bento-7 .g-tile, .g-bento-7 .g-tile:first-child, .g-bento-7 .g-tile.wide { flex: 0 0 82%; aspect-ratio: 3 / 4; scroll-snap-align: start; }
  .g-bleed .g-bento-7 { margin: 0; }
  .g-subnav nav { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%); }
}
@media (max-width: 1000px) {
  body:has(.g-cta) .g-ftr-top > div:last-child { display: none; }
  .g-ftr { padding-top: 48px; }
  .g-ftr-top { gap: 28px 20px; padding-bottom: 32px; }
}
@media (max-width: 900px) {
  main > section + section.g-cta { padding-top: 0; }
  .g-cta .g-wrap { padding-top: 64px; padding-bottom: 64px; }
}
/* The CEO portrait no longer fills a whole phone screen on its own. */
@media (max-width: 900px) { .g-portrait { aspect-ratio: 4 / 3.6; max-height: 52vh; overflow: hidden; } .g-portrait img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 22%; } }
/* Phone menu: numbered entries that arrive in sequence, and the quick
   contact links (cloned from the utility bar by g.js) at the foot. */
.g-hdr nav .m-extra { display: none; }
@media (max-width: 1000px) {
  .g-hdr.open nav { counter-reset: m; }
  .g-hdr.open nav > a { align-items: baseline; animation: g-menu-in 0.5s var(--ease) both; }
  .g-hdr.open nav > a::before { content: counter(m, decimal-leading-zero); counter-increment: m; font-family: var(--mono); font-size: 12px; font-stretch: normal; letter-spacing: 0.08em; color: var(--cyan); margin-right: 18px; }
  .g-hdr.open nav > a:nth-child(2) { animation-delay: 40ms; }
  .g-hdr.open nav > a:nth-child(3) { animation-delay: 80ms; }
  .g-hdr.open nav > a:nth-child(4) { animation-delay: 120ms; }
  .g-hdr.open nav > a:nth-child(5) { animation-delay: 160ms; }
  .g-hdr.open nav .m-extra { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding: 28px 0 12px; animation: g-menu-in 0.5s var(--ease) 220ms both; }
  .g-hdr.open nav .m-extra a { font-family: var(--sans); font-stretch: normal; font-size: 15px; padding: 8px 0; border: 0; color: rgba(255, 255, 255, 0.7); }
  .g-hdr.open nav .m-extra a::before { content: none; }
  @keyframes g-menu-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
}
@media (max-width: 1000px) and (prefers-reduced-motion: reduce) { .g-hdr.open nav > a, .g-hdr.open nav .m-extra { animation: none; } }

/* ===== Phone pass 2 (2026-10-17) =====
   Tighter vertical rhythm, calmer scroll motion and tidier grids on phones.
   Sections lose a third of their padding. Content still rises into place,
   but it no longer sinks and dims on the way out: on a phone a section is
   rarely taller than the screen, so the dimming started while it was still
   being read. */
@media (max-width: 900px) {
  .g-sec { padding: 56px 0; }
  main > section + section:not(.g-hero + section) { padding-top: calc(56px + var(--s)); }
  main > section.g-sec:last-child:not(.g-hero + section):nth-child(n) { padding-bottom: calc(56px + var(--s)); }
  main > section.g-cta + section, main > section + section.g-cta { padding-top: var(--s); }
  .g-cta .g-wrap { padding-top: 48px; padding-bottom: 48px; }
  .g-svc { padding: 40px 0; }
  .g-svc:first-child { padding-top: 0; }
  /* The sub-navigation fades on the left only once it has been scrolled. */
  .g-subnav nav.at-start { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%); }
  /* Subject areas and partner logos sit in an even two-column grid; an odd
     last item spans the row instead of leaving an empty cell. */
  .g-tags { display: grid; grid-template-columns: 1fr 1fr; }
  .g-tags span { padding: 18px 20px; font-size: 17px; }
  .g-tags span:last-child:nth-child(odd), .g-logos > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@supports (animation-timeline: view()) {
  @media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
    main > section:not(.g-hero):not(.g-phero) > :is(.g-wrap, .g-bleed),
    main > section:last-child:not(.g-hero):not(.g-phero) > :is(.g-wrap, .g-bleed) {
      animation: g-floor-in-phone linear both;
      animation-timeline: --floor;
      animation-range: cover 0px cover 45vh;
    }
    @keyframes g-floor-in-phone {
      from { transform: translate3d(0, 32px, 0); }
      to { transform: translate3d(0, 0, 0); }
    }
  }
}
/* Phones: the dotted emblem is larger and sits lower, filling the space
   above the headline instead of leaving a dark band beneath it. */
@media (max-width: 1000px) {
  .g-hero-em > .g-hero-media { height: 50svh; }
  .g-emblem { top: 54%; width: min(90vw, 44svh, 420px); }
}
/* Short phones (iPhone SE and similar): keep the rings clear of the headline. */
@media (max-width: 1000px) and (max-height: 720px) {
  .g-hero-em > .g-hero-media { height: 44svh; }
  .g-emblem { top: 50%; width: min(90vw, 34svh, 420px); }
}

/* ===== De-templating pass (2026-10-17) =====
   Removes the patterns that read as a template: the same "Get in touch"
   block on every page, the second logo in the footer, breadcrumbs and
   eyebrow labels stacked above every phone hero, HUD crop marks on the
   capability cards and the boxed grey logo grid. */

/* Closing block: a page-specific line and the ways to reach the team,
   each one a full-width row that can be tapped on a phone. */
.g-reach::before, .g-reach::after { display: none; }
.g-reach .g-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 28px 64px; }
.g-reach h2 { margin: 0; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.05; letter-spacing: -0.015em; }
.g-reach-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-n); }
.g-reach-list a { display: grid; grid-template-columns: 96px minmax(0, 1fr) 16px; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule-n); color: #fff; }
.g-reach-list small { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel); }
.g-reach-list span { font-family: var(--head); font-stretch: 106%; font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; overflow-wrap: anywhere; transition: color 0.25s; }
.g-reach-list svg { width: 16px; height: 16px; color: var(--cyan); transition: transform 0.3s var(--ease); }
.g-reach-list a:hover span { color: var(--cyan); }
.g-reach-list a:hover svg { transform: translateX(4px); }
.g-reach-addr { grid-column: 2; margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.6); }
@media (max-width: 900px) {
  .g-reach .g-wrap { grid-template-columns: 1fr; gap: 24px; }
  .g-reach h2 { font-size: 30px; }
  .g-reach-addr { grid-column: 1; }
  .g-reach-list a { grid-template-columns: 82px minmax(0, 1fr) 16px; gap: 12px; min-height: 58px; padding: 14px 0; }
  .g-reach-list span { font-size: 17px; }
}

/* Footer: the contact column repeats the block above it, and the small
   logo and slogan repeat the dotted wordmark just above them. Whatever
   columns remain share the width evenly. */
body:has(.g-reach) .g-ftr-top > div:last-child { display: none; }
@media (prefers-reduced-motion: no-preference) { .g-ftr-top > div:first-child { display: none; } }
@media (min-width: 1001px) { .g-ftr-top { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }

/* Capability cards: no crop marks or accent tab. */
.cs-card { background: var(--char); }
.cs-card::before { display: none; }

/* Phones: inner-page heroes lose the breadcrumb (the header and the back
   gesture cover it) and keep a shorter photograph, so the headline sits
   in the first half of the screen. */
@media (max-width: 1000px) {
  .g-crumb { display: none; }
  .g-phero .g-hero-media { height: calc(64px + 24vh); }
  .g-phero-body { padding: 22vh 0 40px; }
  .g-phero h1 { margin: 12px 0 14px; }
  .g-phero .g-ctas { margin-top: 24px; }
}

/* Partner logos on phones: no boxes, just the marks on the page. */
@media (max-width: 560px) {
  .g-logos { border: 0; gap: 8px 24px; }
  .g-logos > div { height: 76px; padding: 12px 8px; border: 0; background: transparent; }
  .g-logos img { max-height: 44px; opacity: 0.85; }
}

/* Executive team as a name-and-role list. The available photographs are a
   cartoon avatar, a company logo and casual snapshots; side by side they
   read as placeholders, so the team is set in type instead. */
.g-team { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.g-person { padding: 26px 0 28px; border-top: 1px solid var(--rule-w); }
.g-person img { display: none; }
.g-person h3 { margin: 0 0 6px; font-size: 20px; }
@media (max-width: 640px) {
  .g-team { grid-template-columns: 1fr; gap: 0; }
  .g-person { padding: 20px 0 22px; }
  .g-person p { display: block; font-size: 14.5px; }
}
@media (max-width: 1000px) {
  /* Swiping is the way through the capability cards on phones; the
     printed "Next" line only repeated it. */
  .cs-next { display: none; }
  /* Home: the three leading honours; the company page lists them all. */
  body:not(:has(.g-subnav)) .g-honours li:nth-child(n+4) { display: none; }
  /* Company: the full partner list follows, so the logo grid goes. */
  body:has(.g-subnav) #partners .g-logos { display: none; }
}
@media (max-width: 560px) { .g-logos > div:last-child:nth-child(odd) img { max-width: 46%; } }

/* Phones: platform entries, subject areas and service blocks lose their
   boxes and sit on the page, separated by single rules. */
@media (max-width: 900px) {
  .g-rows { gap: 0; }
  .g-row { grid-template-columns: 1fr; border: 0; border-top: 1px solid var(--rule-w); background: transparent; padding: 32px 0; }
  .g-row:first-child { border-top: 0; padding-top: 0; }
  .g-row:nth-child(even) figure { order: 0; }
  .g-row figure { min-height: 0; aspect-ratio: 16 / 9; }
  .g-row > div { padding: 20px 0 0; }
  .g-tags { gap: 0 20px; border: 0; }
  .g-tags span { padding: 14px 0; border: 0; border-bottom: 1px solid var(--rule-w); background: transparent; }
  .g-svc + .g-svc { border-top: 0; }
  .g-svc { padding: 28px 0; }
}

/* Phones: the home hero's dot layer drifts down and fades as the page
   climbs, entirely on the compositor (hero.js no longer animates the dots
   with the scroll there). */
@supports (animation-timeline: view()) {
  @media (max-width: 1000px) and (prefers-reduced-motion: no-preference) {
    .g-hero-em > .g-hero-media { animation: g-hero-out-phone linear both; animation-timeline: --hero; animation-range: exit 0% exit 70%; }
    @keyframes g-hero-out-phone { to { transform: translate3d(0, 14vh, 0) scale(0.94); opacity: 0; } }
  }
}
/* Phones: tiles in the swipe rail are always shown. Revealing them as they
   entered the screen left the next photograph blank mid-swipe. */
@media (max-width: 900px) {
  .g-bento-7 .g-tile.rv { opacity: 1; transform: none; transition: none; }
  .g-bento-7 { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
  .g-bento-7 .g-tile img { animation: none; translate: none; }
}

/* ===== Phone type and header (2026-10-17) =====
   The 112% heading width crowds a narrow screen into heavy stacks of short
   lines, so phone headings (other than the hero's, which the dot assembly
   samples) are set at 104%, a size smaller. The hero headline's second
   sentence steps back in tone so the four lines read as two statements. The
   boxed "Menu" text button becomes a two-line icon that turns into a cross. */
.g-hero h1 .h1b { color: rgba(255, 255, 255, 0.5); transition: color 0.6s var(--ease); }
.g-hero-em h1.h1-dots:not(.h1-in) .h1b { color: transparent; }
@media (max-width: 900px) {
  :where(body.g) :is(h2, h3, h4) { font-stretch: 104%; }
  .g-h2 { font-size: 28px; line-height: 1.12; letter-spacing: -0.02em; }
  .g-reach h2 { font-size: 28px; }
  .g-hero h1 { font-size: 38px; line-height: 1.04; }
}
@media (max-width: 1000px) {
  .g-hdr .menu { position: relative; width: 44px; height: 44px; padding: 0; margin-right: -10px; border: 0; font-size: 0; color: transparent; }
  .g-hdr .menu::before, .g-hdr .menu::after { content: ""; position: absolute; left: 11px; right: 11px; height: 1.5px; background: #fff; transition: transform 0.35s var(--ease), top 0.35s var(--ease); }
  .g-hdr .menu::before { top: 17px; }
  .g-hdr .menu::after { top: 25px; left: 17px; }
  .g-hdr .menu[aria-expanded="true"]::before { top: 21px; transform: rotate(45deg); }
  .g-hdr .menu[aria-expanded="true"]::after { top: 21px; left: 11px; transform: rotate(-45deg); }
}