/* Inter, served from this site. See _tools/fonts.py and
   assets/fonts/LICENCE.txt (SIL Open Font License 1.1). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================================
   alt2 · Dala
   Dark stage on deep navy. One electric violet for action, amber for emphasis, weight-400 display type over weight-200 body copy, and a generated particle constellation as the only imagery.
   ========================================================================== */

:root {
  --f-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --ink: #FFFFFF;
  --ink-soft: #BDBDBD;
  --muted: #9A9A9A;
  --bg: #10151F;
  --bg-alt: #10151F;
  --surface: transparent;
  --line: rgba(255,255,255,.10);
  --line-soft: rgba(255,255,255,.06);
  --accent: #8052FF;
  --accent-ink: #FFB829;
  --accent-soft: rgba(255,255,255,.08);

  --maxw: 1280px;
  --gut: 24px;
  --r-card: 24px;
  --r-chip: 9999px;
  --r-btn: 24px;
  --bw: 1px;

  --fs-body: 18px;
  --lh: 1.5;
  --hw: 400;
  --hls: -0.04em;
  --sec-y: clamp(72px, 9vw, 120px);
  --nav-h: 68px;

  --shadow: none;
  --shadow-lift: none;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: var(--hw);
  letter-spacing: var(--hls);
  line-height: 1.14;
  text-wrap: balance;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; }
svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-btn);
  transition: top .18s ease;
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* ---------------------------------------------------------------- top nav -- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
}

.nav-in {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--nav-h);
}

.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img { height: 26px; width: auto; display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}

.nav-links a {
  position: relative;
  font-size: .95rem;
  color: var(--ink-soft);
  padding: 6px 0;
  letter-spacing: .025em;
  text-transform: uppercase;
  transition: color .18s ease;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }

.lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-btn);
  padding: 3px;
}
.lang a {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 4px 9px;
  border-radius: calc(var(--r-btn) - 2px);
  color: var(--muted);
}
.lang a[aria-current="true"] { background: var(--ink); color: var(--bg); }

.nav-toggle {
  display: none;
  flex: 0 0 auto;
  margin-left: auto;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: none;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-btn);
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  display: block;
  width: 17px; height: 1.5px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -5.5px; }
.nav-toggle span::after { position: absolute; top: 5.5px; }
.nav[data-open="true"] .nav-toggle span { background: transparent; }
.nav[data-open="true"] .nav-toggle span::before { transform: translateY(5.5px) rotate(45deg); }
.nav[data-open="true"] .nav-toggle span::after { transform: translateY(-5.5px) rotate(-45deg); }

/* ------------------------------------------------------- buttons and chips -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 26px;
  border-radius: var(--r-btn);
  font-family: var(--f-body);
  font-size: .97rem;
  font-weight: 600;
  letter-spacing: .005em;
  border: var(--bw) solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease,
              border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn .ar { transition: transform .2s ease; }
.btn:hover .ar { transform: translateX(3px); }

.btn--primary { background: #8052FF; color: #FFFFFF; border-color: #8052FF; }
.btn--primary:hover { background: #FFFFFF; border-color: #FFFFFF; }

.btn--ghost { background: transparent; color: var(--ink); border-color: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-ink); }

/* The classification line, not a capsule. The scope half is the ecosystem
   layer the company sits in, so it carries the emphasis; the domain half
   stays quiet. Each alternative brings its own marker, from a drawn rule to
   nothing at all, rather than every direction sharing one rounded box. */
.chip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--f-body);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .025em;
  text-transform: uppercase;
  color: #9A9A9A;
}
.chip::before {
  content: none;
  flex: none;
  width: 0;
  height: 0;
  margin-right: 0;
  border-radius: 0;
  background: transparent;
}
.chip-k { color: #FFB829; font-weight: 600; }
.chip-d { margin-left: .9em; }

/* A quiet control: it must be reachable and obvious once found, without
   competing with the diagram it governs. */
.eco-motion {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--f-body);
  font-size: .875rem;
  cursor: pointer;
}
.eco-motion:hover { color: var(--ink); border-bottom-color: var(--accent); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: #BDBDBD;
  background: transparent;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--r-chip);
  padding: 5px 11px;
}

.exlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: .95rem;
  color: var(--accent-ink);
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 2px;
  /* `gap` is a layout property: transitioning it reflows the line on every
     frame of the hover. The arrow inside moves on transform instead, which
     the compositor can do without touching layout. */
  transition: opacity .2s ease;
}
.exlink:hover { opacity: .82; }

/* -------------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 92vh;
  padding-block: clamp(56px, 8vw, 104px);
  overflow: hidden;
  background: #10151F;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero-bg .hb { position: absolute; display: block; }

.hero-wrap { position: relative; width: 100%; }


.hero h1 {
  font-size: clamp(2.35rem, 1.15rem + 3.6vw, 7.05rem);
  margin-bottom: 24px;
  max-width: 15ch;
}

.lead {
  font-size: clamp(1.02rem, .96rem + .3vw, 1.18rem);
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 62ch;
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

.trust {
  font-size: .87rem;
  letter-spacing: .02em;
  color: var(--muted);
}

/* hero composition variants --------------------------------------------------*/

.hero--center .hero-wrap { text-align: center; }
.hero--center .hero h1, .hero--center h1 { margin-inline: auto; }
.hero--center .lead { margin-inline: auto; }
.hero--center .hero-ctas { justify-content: center; margin-top: 34px; }
.hero--center .trust { margin-top: 30px; }

.hero--split .hero-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: end;
}
.hero--split .hero-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  padding-top: 8px;
  border-top: var(--bw) solid var(--line);
}
.hero--split .hero-ctas { flex-direction: column; align-items: stretch; width: 100%; }

.hero--rail .hero-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.hero--rail .hero-side {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-left: 22px;
  border-left: var(--bw) solid var(--line);
}
.hero--rail .hero-ctas { flex-direction: column; align-items: stretch; }

.hero--orb .hero-wrap { text-align: center; }
.hero--orb .lead { margin-inline: auto; max-width: 56ch; }
.hero--orb h1 { margin-inline: auto; }
.hero--orb .hero-ctas { justify-content: center; margin-top: 36px; }
.hero--orb .trust { margin-top: 32px; }

.hero--band .hero-wrap { text-align: center; }
.hero--band h1 { margin-inline: auto; max-width: 13ch; }
.hero--band .lead { margin-inline: auto; }
.hero--band .hero-ctas { justify-content: center; margin-top: 34px; }
.hero--band .trust {
  margin-top: 34px;
  padding-top: 22px;
  border-top: var(--bw) solid var(--line);
  display: inline-block;
}

/* ----------------------------------------------------------------- sections -- */

.sec { padding-block: var(--sec-y); scroll-margin-top: calc(var(--nav-h) + 8px); }
/* The mark links to #top, and the hero starts below the sticky bar, so without
   a margin "back to top" stops one bar-height short and the bar covers the
   first line of the headline. Anything taller than the bar lands on zero. */
#top { scroll-margin-top: calc(var(--nav-h) + 120px); }
.sec--alt { background: var(--bg-alt); }

.sec-head { max-width: 66ch; margin-bottom: clamp(38px, 5vw, 62px); }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .025em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 16px;
}
/* alt2 replaces this dot with the section number; see the counter there. */
.kicker::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}

.sec h2 {
  font-size: clamp(1.7rem, 1.1rem + 1.9vw, 4.25rem);
  margin-bottom: 18px;
}

.sec-intro {
  font-size: clamp(1rem, .95rem + .22vw, 1.1rem);
  line-height: 1.68;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- diagram -- */

.eco-figure { margin: 0; }

.eco-stage {
  background: #10151F;
  border: 0;
  border-radius: var(--r-card);
  padding: clamp(10px, 2.4vw, 30px);
  box-shadow: none;
}

.eco-svg { display: block; width: 100%; height: auto; }

.eco-node-box {
  fill: transparent;
  stroke: rgba(255,255,255,.26);
  stroke-width: 1;
  rx: 14px;
}
.eco-node-label {
  font-family: var(--f-display);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: .015em;
  fill: #FFFFFF;
}
.eco-lay-mobile .eco-node-label { font-size: 26px; }

/* Logos inside the diagram sit on the node chip, which is white or a very light
   neutral in every direction, so the light-background rule still holds. */
.eco-node-logo, .eco-outer-logo { overflow: visible; }

.eco-path {
  fill: none;
  stroke: #7B7B8A;
  stroke-width: 1.2;
  stroke-linecap: butt;
  stroke-linejoin: round;
}
.eco-ah { fill: #7B7B8A; }

.eco-path-thin {
  fill: none;
  stroke: #4A4A57;
  stroke-width: 1.15;
  stroke-dasharray: 5 4;
  stroke-linecap: butt;
}
.eco-ah-thin { fill: #4A4A57; }

.eco-label {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .015em;
  fill: #BDBDBD;
}
.eco-label-thin {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
  fill: #9A9A9A;
}
.eco-lay-mobile .eco-label { font-size: 20px; }
.eco-lay-mobile .eco-label-thin { font-size: 17px; }

.eco-flow { fill: var(--accent); }

.eco-hub { fill: transparent; stroke: rgba(255,255,255,.26); stroke-width: 1.2; }

/* the thesis layers named above the chain */
.eco-layer-label {
  font-family: var(--f-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  fill: #9A9A9A;
}
.eco-bracket {
  fill: none;
  stroke: #3C3C48;
  stroke-width: 1;
}

/* foundation band: the units that carry the platforms */
/* Full opacity: the group carries label text, and dimming it put the thin
   label colour under the 4.5:1 floor no matter how dark the token was. */
.eco-base { opacity: 1; }
.eco-base-label {
  font-family: var(--f-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  fill: #9A9A9A;
}
.eco-base-box {
  fill: transparent;
  stroke: #3C3C48;
  stroke-width: 1;
}
.eco-base-name {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  fill: #FFFFFF;
}
.eco-base-role {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  fill: #9A9A9A;
}

.eco-lay-mobile { display: none; }
.eco-svg[data-layout="mobile"] .eco-lay-desktop { display: none; }
.eco-svg[data-layout="mobile"] .eco-lay-mobile { display: block; }

.eco-note {
  margin-top: 26px;
  font-size: 1.02rem;
  font-style: italic;
  color: var(--ink-soft);
  text-align: left;
}

/* supporting-unit strip: only replaces the diagram outer ring on small screens */
.eco-strip { display: none; }

/* ------------------------------------------------------------------ cards -- */

.grid-platforms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 60px);
}
.grid-units {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 60px);
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover { border-color: transparent; }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.card-name { display: flex; align-items: center; min-height: 30px; }

/* Logos are optically sized, not mechanically sized. Every lockup carries a
   different amount of internal padding, so a single box height makes Gurulize
   read far larger than the AgenticObjects lockup. These land inside the 24 to
   34px band and match by cap height instead. */
.logo { display: block; width: auto; height: 30px; }
.logo--ao { height: 34px; }
.logo--gur { height: 24px; }
.logo--wowicom { height: 25px; }
.logo--wit { height: 28px; }
.logo--argecat { height: 28px; }
.logo--devix { height: 23px; }

.wordmark {
  display: inline-block;
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 30px;
  color: var(--ink);
}

.card-body {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.66;
}

.card-tags { margin-top: 22px; }

.prods { margin-top: 24px; display: grid; gap: 14px; }
.prod {
  display: grid;
  gap: 4px;
  padding: 0;
  background: transparent;
  border-left: 2px solid var(--accent);
  border-radius: 0;
}
.prod h4 { font-size: .96rem; font-weight: 700; letter-spacing: .005em; }
.prod p { font-size: 1rem; line-height: 1.58; color: var(--muted); }

.card-cta { margin-top: 26px; padding-top: 22px; }
.card-foot { margin-top: auto; }

.card--unit { padding: 0; }
.card--unit .card-body { font-size: 1rem; }
.card--unit .logo { height: 26px; }
.card--unit .logo--wowicom { height: 24px; }
.card--unit .logo--argecat { height: 30px; }
.card--unit .logo--devix { height: 20px; }
.card--unit .wordmark { font-size: 1.08rem; line-height: 26px; }
.card--unit .card-head { margin-bottom: 16px; flex-direction: column; align-items: flex-start; gap: 12px; }
.card--feat {  }

/* ----------------------------------------------------------------- thesis -- */

.tez-wrap { max-width: 58ch; }
.tez-body { display: grid; gap: 22px; margin-top: 8px; }
.tez-body p {
  font-size: clamp(1.02rem, .97rem + .28vw, 1.14rem);
  line-height: 1.75;
  color: var(--ink-soft);
}
.tez-body p.tez-close { color: var(--ink); }
.tez-body strong { font-weight: 700; color: var(--ink); }
.tez-cta { margin-top: 34px; }

/* ---------------------------------------------------------------- contact -- */

.con-mail {
  display: inline-block;
  margin-top: 28px;
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.05rem);
  font-weight: var(--hw);
  letter-spacing: var(--hls);
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 4px;
}
.con-meta { margin-top: 20px; color: var(--muted); font-size: .95rem; }

.foot { border-top: var(--bw) solid var(--line); background: #10151F; }
.foot-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, .8fr);
  gap: 40px;
  padding-block: 52px;
}
.foot-logo img { height: 30px; width: auto; }
.foot-col h3 {
  font-family: var(--f-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.foot-list { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .92rem; }
.foot-list a { color: var(--ink-soft); border-bottom: 1px solid transparent; padding-bottom: 1px; }
.foot-list a:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }
.foot-list span { color: var(--muted); }
.foot-units { margin-top: 16px; }
.foot-bottom {
  border-top: var(--bw) solid var(--line);
  padding-block: 22px;
  font-size: .85rem;
  color: var(--muted);
}

/* ------------------------------------------------------------- responsive -- */

@media (max-width: 1040px) {
  .grid-platforms { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  :root { --sec-y: 60px; }
  .hero--split .hero-wrap,
  .hero--rail .hero-wrap { grid-template-columns: minmax(0, 1fr); }
  .hero--split .hero-side,
  .hero--rail .hero-side {
    border: 0;
    padding: 0;
    flex-direction: column;
    align-items: flex-start;
  }
  .hero--split .hero-ctas,
  .hero--rail .hero-ctas { flex-direction: row; width: auto; }
  .grid-units { grid-template-columns: minmax(0, 1fr); }
  .foot-in { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 42px; }
}

/* Eight nav items need more room than the six this bar was drawn for. It
   tightens once before handing over to the toggle, so the hand-over happens at
   a width where a menu button is expected rather than mid-desktop. */
@media (max-width: 1180px) {
  .nav-links { gap: 20px; }
  .nav-links a { font-size: .84rem; }
  .brand img { height: 44px; }
}

@media (max-width: 1024px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 10px var(--gut) 18px;
    background: var(--surface);
    border-bottom: var(--bw) solid var(--line);
    box-shadow: var(--shadow-lift);
  }
  .nav[data-open="true"] .nav-links { display: flex; }
  .nav-links a { padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
  .nav-links a::after { display: none; }
  .nav-in { position: relative; }
  /* On desktop the link row carries the auto margin that pushes everything
     after it to the right edge. Here that row is lifted out of the flow, so
     the pill has to take the margin over or it and the toggle bunch up
     against the mark. */
  .lang { order: 3; margin-left: auto; }
  .nav-toggle { order: 4; margin-left: 12px; }
}

@media (max-width: 768px) {
  .eco-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(180px, 40%);
    gap: 12px;
    margin-top: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .eco-strip-card {
    scroll-snap-align: start;
    padding: 14px 16px;
    background: var(--surface);
    border: var(--bw) solid var(--line);
    border-radius: var(--r-card);
  }
  .eco-strip-card b {
    display: block;
    font-family: var(--f-display);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .01em;
  }
  .eco-strip-card span {
    display: block;
    margin-top: 4px;
    font-size: .76rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

@media (max-width: 560px) {
  :root { --gut: 18px; }
  .hero { min-height: 0; }
  .card-head { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* --------------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .eco-flow { display: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* ==========================================================================
   Decorative media and motion layer
   Images here carry no information: every one is alt="" and the copy stands
   without them. Section 6 rules are enforced in the markup (AVIF/WebP/JPEG,
   srcset + sizes, width/height, fetchpriority on the hero, lazy elsewhere).
   ========================================================================== */

.hero-media { position: relative; z-index: -1; }
.hero-media picture { display: block; height: 100%; }
.hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- alt6: text column beside a full-bleed image panel ------------------- */

.hero--frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 38vw);
  align-items: stretch;
  padding-block: 0;
  min-height: 92vh;
}
/* the media element sits before the text in the DOM so it can be skipped by
   assistive tech first; ordering is a purely visual concern */
.hero--frame .hero-wrap { order: 1; }
.hero--frame .hero-media { order: 2; }
.hero--frame h1 { max-width: 17ch; }
.hero--frame .hero-wrap {
  max-width: none;
  align-self: center;
  padding-block: clamp(56px, 8vw, 108px);
  padding-left: max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut)));
  padding-right: clamp(28px, 4vw, 72px);
}
.hero--frame .hero-ctas { margin-top: 34px; }
.hero--frame .trust { margin-top: 28px; }
.hero--frame .hero-media { z-index: 0; }
.hero--frame .hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(0,0,0,0) 22%);
}

/* ---- alt8: duotone graphic pieces drifting behind centred type ----------- */

.hero--collage .hero-wrap { text-align: center; }
.hero--collage h1, .hero--collage .lead { margin-inline: auto; }
.hero--collage .hero-ctas { justify-content: center; margin-top: 34px; }
.hero--collage .trust { margin-top: 30px; }
.hero--collage .hero-media { position: absolute; inset: 0; overflow: hidden; }
/* square container plus object-fit: cover, so the piece is cropped to a circle
   and never stretched out of its own aspect ratio */
.hero--collage .col {
  position: absolute;
  display: block;
  height: auto;            /* beats the height: 100% on .hero-media picture */
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}
.hero--collage .col img { width: 100%; height: 100%; object-fit: cover; }
.hero--collage .col-a {
  width: clamp(200px, 22vw, 330px);
  left: -4%; top: 9%;
  opacity: .34;
  animation: drift-col-a 34s ease-in-out infinite alternate;
}
.hero--collage .col-b {
  width: clamp(150px, 16vw, 245px);
  right: -2%; bottom: 7%;
  opacity: .28;
  animation: drift-col-b 40s ease-in-out infinite alternate;
}
@keyframes drift-col-a { to { transform: translate3d(34px, 26px, 0) rotate(7deg); } }
@keyframes drift-col-b { to { transform: translate3d(-30px, -22px, 0) rotate(-6deg); } }

/* ---- full-bleed decorative band between sections ------------------------- */

.band {
  position: relative;
  height: clamp(150px, 20vw, 250px);
  overflow: hidden;
  background: var(--ink);
}
.band img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- thumbnail on the supporting-unit cards ------------------------------ */

.unit-thumb {
  display: block;
  margin: calc(var(--pad-neg, 0px)) 0 20px;
  border-radius: calc(var(--r-card) - 1px);
  overflow: hidden;
  aspect-ratio: 420 / 236;
  background: var(--ink);
}
.unit-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- measure: one-column rows must not run the full width ---------------
   Measured at 1024px the platform copy ran 115 to 122 characters a line
   because the grid is a single column there and nothing capped the prose. */
.card-body, .cert-body { max-width: 68ch; }

/* ---- target size: WCAG 2.5.8 floor is 24px -------------------------------
   Measured at 390px: phone links 19px, footer links 20px. Padding gives the
   box the height without moving anything, since both sit in their own row. */
.off-tel a, .foot-list a { display: inline-block; padding-block: 4px; }

/* ---- scroll choreography, alt7 ------------------------------------------- */

/* 10px was below the threshold where an entrance registers at all, which is
   worse than none: it spends the frames and buys nothing. 16px over 520ms is
   felt without being watched. */
[data-motion="kinetic"] .reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}
/* Script applies .reveal to content the browser has already painted, so the
   transition cannot live on the rule above: adding the class would animate
   every element OUT before it could ever animate in. It is switched on one
   frame later, once the hidden state has been committed. */
[data-motion="kinetic"].motion-ready .reveal {
  transition: opacity .52s cubic-bezier(.2,.7,.2,1),
              transform .52s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0ms);
}

/* The rule under every section head draws itself across the page. On a page
   this wide it is the one movement that cannot be missed, and it says the
   same thing the mark in the hero says: something here was measured. */
[data-motion="kinetic"] .sec-head { border-bottom-color: transparent; }
[data-motion="kinetic"] .sec-head { position: relative; }
[data-motion="kinetic"] .sec-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: rgba(255,255,255,.13);
  transform: scaleX(0); transform-origin: left center;
}
[data-motion="kinetic"] .sec-head.is-in::after {
  transform: scaleX(1);
  transition: transform .9s cubic-bezier(.2,.7,.2,1) .1s;
}
/* the hairline over each company card draws with the card */
[data-motion="kinetic"] .card--platform::after { transform: scaleX(0); }
[data-motion="kinetic"] .card--platform.is-in::after {
  transform: scaleX(1);
  transition: transform .7s cubic-bezier(.2,.7,.2,1) .12s;
}
/* the gold rule over the closing claim draws too */
[data-motion="kinetic"] .tez-close { border-top-color: transparent; }
[data-motion="kinetic"] .tez-close { position: relative; }
[data-motion="kinetic"] .tez-close::before {
  content: ""; position: absolute; left: 0; top: -2px; width: 100%; height: 2px;
  background: var(--accent-ink);
  transform: scaleX(0); transform-origin: left center;
}
[data-motion="kinetic"] .tez-close.is-in::before {
  transform: scaleX(1);
  transition: transform .8s cubic-bezier(.2,.7,.2,1) .15s;
}
[data-motion="kinetic"] .reveal.is-in { opacity: 1; transform: none; }

[data-motion="kinetic"] .eco-svg.eco-draw .eco-path,
[data-motion="kinetic"] .eco-svg.eco-draw .eco-path-thin {
  transition: stroke-dashoffset 1.7s cubic-bezier(.32,.72,.3,1);
  transition-delay: var(--pd, 0ms);
}
[data-motion="kinetic"] .eco-svg.eco-draw .eco-node,
[data-motion="kinetic"] .eco-svg.eco-draw .eco-label,
[data-motion="kinetic"] .eco-svg.eco-draw .eco-label-thin,
[data-motion="kinetic"] .eco-svg.eco-draw .eco-hub-g,
[data-motion="kinetic"] .eco-svg.eco-draw .eco-base {
  opacity: 0;
  transition: opacity .8s ease;
  transition-delay: var(--pd, 0ms);
}
[data-motion="kinetic"] .eco-svg.eco-drawn .eco-node,
[data-motion="kinetic"] .eco-svg.eco-drawn .eco-label,
[data-motion="kinetic"] .eco-svg.eco-drawn .eco-label-thin,
[data-motion="kinetic"] .eco-svg.eco-drawn .eco-hub-g { opacity: 1; }
[data-motion="kinetic"] .eco-svg.eco-drawn .eco-base { opacity: .8; }

/* ---- the hero mark draws itself, once, on load --------------------------
   It is above the fold by definition, so it belongs to load rather than to
   scroll. The same motion-ready flip that commits the hidden reveal state
   starts it, which keeps the whole choreography on one trigger. */
[data-motion="kinetic"] .hero-geo { opacity: 0; transform: translateY(-50%) rotate(-6deg); }
[data-motion="kinetic"] .geo-draw { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
[data-motion="kinetic"] .geo-mark,
[data-motion="kinetic"] .geo-cross,
[data-motion="kinetic"] .geo-fan,
[data-motion="kinetic"] .geo-tick { opacity: 0; }
[data-motion="kinetic"].motion-ready .hero-geo {
  opacity: 1;
  transform: translateY(-50%) rotate(0deg);
  transition: opacity .8s ease .1s, transform .9s cubic-bezier(.2,.7,.2,1) .1s;
}
[data-motion="kinetic"].motion-ready .geo-draw {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.5s cubic-bezier(.2,.7,.2,1) .25s;
}
/* It builds in the order you would draw it: arcs, then the fan stepping out
   from the centre, then the ticks, then the register mark that reads them. */
[data-motion="kinetic"].motion-ready .geo-fan {
  opacity: 1;
  transition: opacity .45s ease calc(.75s + var(--fi) * 45ms);
}
[data-motion="kinetic"].motion-ready .geo-tick {
  opacity: 1;
  transition: opacity .4s ease calc(1.25s + var(--ti) * 55ms);
}
[data-motion="kinetic"].motion-ready .geo-cross {
  opacity: 1; transition: opacity .5s ease 1.6s;
}
[data-motion="kinetic"].motion-ready .geo-mark {
  opacity: 1; transition: opacity .45s ease 1.85s;
}

/* The headline is the page's first impression, so it arrives rather than
   simply being there: masked to nothing, then opened downward as it rises.
   clip-path and transform both stay on the compositor. */
[data-motion="kinetic"] .hero h1 {
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 22px, 0);
  opacity: .001;
}
[data-motion="kinetic"].motion-ready .hero h1 {
  clip-path: inset(0 0 -10% 0);
  transform: none;
  opacity: 1;
  transition: clip-path .95s cubic-bezier(.2,.7,.2,1) .05s,
              transform .95s cubic-bezier(.2,.7,.2,1) .05s,
              opacity .5s ease .05s;
}

/* a rule that draws is a rule that means something was measured */
[data-motion="kinetic"] .mv-rule { transform: scaleX(0); }
[data-motion="kinetic"] .reveal.is-in .mv-rule {
  transform: scaleX(1); transition: transform .45s cubic-bezier(.2,.7,.2,1) .18s;
}

/* the arrow leads the eye before the click, on hover and on focus alike */
.exlink .ar, .con-mail, .off-tel a { transition: transform .16s ease, color .18s ease; }
.exlink:hover .ar, .exlink:focus-visible .ar { transform: translateX(3px); }
.btn:focus-visible .ar { transform: translateX(3px); }
/* The unit thumbnails had a hover lift here. The unit cards carry no link,
   so it was offering an interaction that does not exist. Removed rather than
   kept as decoration: a false affordance costs more than the motion adds. */

/* the nav tightens once the page has moved */
[data-motion="kinetic"] .nav { transition: box-shadow .25s ease, background-color .25s ease; }
[data-motion="kinetic"] .nav[data-scrolled="true"] { box-shadow: var(--shadow-lift); }

@media (max-width: 900px) {
  .hero--frame {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 0 0;
  }
  .hero--frame .hero-wrap {
    padding-inline: var(--gut);
    padding-block: clamp(48px, 9vw, 80px);
  }
  .hero--frame .hero-media { order: 2; aspect-ratio: 16 / 9; }
  .hero--frame .hero-media::after {
    background: linear-gradient(180deg, var(--bg) 0%, rgba(0,0,0,0) 26%);
  }
}

/* Motion is opt-in visual polish, never a gate on content: when the viewer
   asks for less motion every revealed element is simply already in place. */
@media (prefers-reduced-motion: reduce) {
  [data-motion="kinetic"] .reveal { opacity: 1; transform: none; transition: none; }
  .hero--collage .col-a, .hero--collage .col-b { animation: none; }
  /* the mark is drawn, not animated in: it arrives complete */
  [data-motion="kinetic"] .hero-geo {
    opacity: 1; transform: translateY(-50%); transition: none;
  }
  [data-motion="kinetic"] .geo-draw { stroke-dashoffset: 0; transition: none; }
  [data-motion="kinetic"] .geo-mark,
  [data-motion="kinetic"] .geo-cross,
  [data-motion="kinetic"] .geo-fan,
  [data-motion="kinetic"] .geo-tick { opacity: 1; transition: none; }
  [data-motion="kinetic"] .hero h1 { clip-path: none; transition: none;
                                     opacity: 1; transform: none; }
  [data-motion="kinetic"] .mv-rule { transform: scaleX(1); transition: none; }
  [data-motion="kinetic"] .sec-head::after,
  [data-motion="kinetic"] .card--platform::after,
  [data-motion="kinetic"] .tez-close::before { transform: scaleX(1); transition: none; }
  .exlink .ar { transition: none; }
}


/* ---------------------------------------------------------- certifications -- */

.grid-certs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 60px);
}

.cert {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-top: 3px solid var(--accent);
  border-radius: var(--r-card);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cert:hover { box-shadow: var(--shadow-lift); }

.cert-name {
  font-size: 1.05rem;
  line-height: 1.25;
  margin-bottom: 6px;
}
.cert-sub {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--accent-ink);
  margin-bottom: 14px;
}
.cert-body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.cert-foot { margin-top: auto; padding-top: 20px; }

/* Group-level presentation, with the one fact a tender reader needs: the
   documents are issued to individual companies, not to the group entity. */
.cert-note {
  margin-top: 26px;
  max-width: 78ch;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--muted);
}
.cert-pending {
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted);
}

@media (max-width: 1040px) {
  .grid-certs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid-certs { grid-template-columns: minmax(0, 1fr); }
}

/* ====================================================================== alt2
   Dala. Everything below is what the shared token system cannot express on its
   own: the ultra-light body weight, the removal of every container, the white
   plates the logo rule requires, and the void hero.
   ====================================================================== */

/* ---- weight is never the hierarchy ------------------------------------- */
/* 200 for reading, 400 for display. The reference is explicit that body copy
   must not be 400 and headings must not be bold; that inversion of the usual
   habit is the whole character of the type. */
body { font-weight: 200; font-feature-settings: "ss01" on; }
h1, h2, h3, h4, .wordmark, .btn, .chip, .kicker, .nav-links a, .lang a {
  font-weight: 400;
}
.lead, .sec-intro, .card-body, .prod p, .cert-body, .tez-body p, .trust,
.eco-note, .con-intro { font-weight: 200; }
h1 { letter-spacing: -0.04em; }
/* A heading that is only a little larger than its own intro reads as a label,
   not as a heading. The step up is what gives a block a top. */
h2 { letter-spacing: -0.045em; font-size: clamp(2rem, 1.35rem + 2.1vw, 3.4rem);
     line-height: 1.04; }
.chip, .kicker, .nav-links a { font-weight: 600; }

/* ---- the void: no panel ever differs from the page --------------------- */
.sec--alt { background: #10151F; border-block: 0; }
.hero-bg .hb { display: none; }
.card, .card--unit, .cert, .prod { background: none; border: 0; box-shadow: none; }
.card:hover, .cert:hover { box-shadow: none; transform: none; }

/* ---- logos are reversed, not plated ------------------------------------ */
/* Every mark now has a dark-ground variant, so none of them needs a white
   plate to satisfy the colour rule. Nothing is CSS-inverted: the reversed
   variant is a real file. See _tools/logodark.py. */
.wordmark { color: #FFFFFF; }

/* ---- the mark carries the bar ------------------------------------------ */
/* 26px in a 68px bar left the logo reading as a footnote next to type set at
   113px. The bar grows with it so the mark still sits in its own space rather
   than filling the rail edge to edge. --nav-h also drives scroll-margin-top,
   so anchored sections keep clearing the bar. */
:root { --nav-h: 90px; }
.brand img { height: 48px; }

/* ---- navigation: transparent, uppercase, nothing behind it ------------- */
/* Transparent over the hero, as the reference asks. Grounded the moment the
   page moves, because a sticky transparent bar swallows the copy under it. */
.nav { background: transparent; border-bottom: 0; backdrop-filter: none;
       transition: background-color .25s ease, border-color .25s ease; }
.nav[data-scrolled="true"] {
  background: rgba(16,21,31,.92);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: saturate(140%) blur(10px);
}
.nav-links a { font-size: .875rem; color: #9A9A9A; }
.nav-links a:hover { color: #FFFFFF; }
.lang { border-color: rgba(255,255,255,.22); }
.lang a { color: #9A9A9A; font-size: .8125rem; }
.lang a[aria-current] { background: #FFFFFF; color: #10151F000; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  background: #FFFFFF;
}

/* ---- hero: type alone on the void -------------------------------------- */
/* One column. The reference calls for one or two elements per viewport, so
   with no imagery the headline carries the screen by itself and the height
   comes down: 92vh of mostly empty ground read as something missing. */
.hero--void {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 82vh;
  padding-block: clamp(40px, 6vw, 88px);
  overflow: hidden;
  isolation: isolate;
}
.hero--void .hero-media { position: absolute; inset: 0; z-index: -2; }
.hero--void .hero-media img,
.hero--void .hero-media picture { width: 100%; height: 100%; object-fit: cover;
  display: block; }
/* The ground is carried back across the picture from the left. Without it the
   copy would depend on whatever happens to be behind any given line of it. */
.hero--void::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #10151F 0%, rgba(16,21,31,.94) 34%,
              rgba(16,21,31,.62) 64%, rgba(16,21,31,.30) 100%);
}
.hero--void .hero-wrap { max-width: var(--maxw); margin-inline: auto; }
.hero--void h1 { max-width: 13ch; margin-bottom: 20px; }
/* The lead carries a long paragraph now. Wider measure and a slightly tighter
   rhythm keep the primary call above the fold, which is the one thing the hero
   cannot afford to lose. The veil still covers this width comfortably. */
.hero--void .lead { max-width: 46rem; color: #FFFFFF; line-height: 1.45; }
.hero--void .hero-ctas { margin-top: 30px; gap: 24px; align-items: center; }
.hero--void .trust { margin-top: 22px; color: #9A9A9A; }


/* ---- the single filled pill, and bare text beside it ------------------- */
.btn { text-transform: uppercase; letter-spacing: .025em; font-size: .875rem; }
.btn--ghost { border: 0; padding-inline: 2px; color: #FFFFFF; }
.btn--ghost:hover { color: #FFB829; border-color: transparent; }

/* ---- sections: type on void, nothing else ------------------------------ */
.kicker { color: #FFB829; font-size: .875rem; }

/* The head was capped at 30ch, which stacked every heading and its intro in a
   narrow left column and left the right half of the page empty. It is the
   single biggest reason Tez, Belgeler and Degerler read as unfinished: the
   copy was never thin, the container was. Heading left, intro right, aligned
   on their last line, with a hairline under the pair. */
.sec-head {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: clamp(32px, 6vw, 110px);
  align-items: end;
  padding-bottom: clamp(24px, 3vw, 38px);
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.sec-head > .kicker, .sec-head > h2 { grid-column: 1; }
.sec-head > .sec-intro { grid-column: 2; grid-row: 1 / -1; align-self: end; }
.sec-intro { color: #BDBDBD; max-width: 42ch; }

/* The page numbers itself. A counter rather than markup, so moving or adding
   a block cannot leave the numbering behind. */
main { counter-reset: sec; }
.sec { counter-increment: sec; }
.sec-head > .kicker::before,
.sec-head::before {
  content: counter(sec, decimal-leading-zero);
  color: #FFB829;
  font-variant-numeric: tabular-nums;
  /* the base rule draws this as a 7px round dot with a background; the digits
     need the box back before they can be read */
  width: auto; height: auto; border-radius: 0; background: none;
  letter-spacing: .08em;
}
/* the two heads with no kicker of their own get the number directly */
.sec-head::before {
  grid-column: 1;
  justify-self: start;      /* a grid item stretches by default */
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: 14px;
}
.sec-head:has(> .kicker)::before { content: none; }
.exlink { color: #FFB829; border-bottom-color: rgba(255,184,41,.45); }
.exlink:hover { opacity: 1; color: #FFFFFF; border-bottom-color: #FFFFFF; }
.tags li { color: #BDBDBD; }
.card-body { color: #BDBDBD; }
.card-head { align-items: center; }
.prods { display: grid; gap: 24px; }
.prod h4 { color: #FFFFFF; font-weight: 400; }
.prod p { color: #9A9A9A; }

/* ---- certifications: rows, not tiles ----------------------------------- */
.certs { gap: clamp(36px, 4vw, 56px); }
.cert { padding: 0; }
.cert-name { color: #FFFFFF; }
.cert-sub { color: #FFB829; }
.cert-body { color: #BDBDBD; }
.cert-note { color: #9A9A9A; }
.cert-pending, .cert-link { color: #FFB829; }

/* ---- ecosystem diagram sits in the void -------------------------------- */
.eco-stage { background: #10151F; border: 0; box-shadow: none; padding: 0; }
.eco-strip-card { background: none; border: 0; color: #BDBDBD; }
.eco-strip-card b { color: #FFFFFF; }
.eco-motion { color: #9A9A9A; border-bottom-color: rgba(255,255,255,.22); }
.eco-motion:hover { color: #FFB829; border-bottom-color: #FFB829; }

/* ---- thesis: the argument gets the room an argument needs -------------
   It was set in a column half the page wide with the other half empty. The
   two paragraphs are separate claims, so they sit side by side; the closing
   line names a person and takes responsibility for the architecture, so it
   is set apart and larger, under a gold rule. */
.tez-wrap { max-width: none; }
.tez-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 96px);
  row-gap: 0;
  margin-top: clamp(8px, 2vw, 26px);
}
.tez-body p { color: #BDBDBD; max-width: 46ch; }
.tez-body strong { color: #FFFFFF; font-weight: 600; }
.tez-body p.tez-close {
  grid-column: 1 / -1;
  max-width: 62ch;
  margin-top: clamp(38px, 5vw, 66px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 2px solid #FFB829;
  color: #FFFFFF;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem);
  line-height: 1.45;
}
.tez-cta { margin-top: clamp(26px, 3vw, 40px); }
.con-mail { color: #FFFFFF; }
.con-mail:hover { color: #FFB829; }

/* ---- the companies read as a numbered series --------------------------
   The markup already carried data-idx and nothing ever showed it. Four
   paragraphs on a void become four entries with a place in an order. */
.card--platform { position: relative; padding-top: 30px; }
.card--platform::before {
  content: attr(data-idx);
  position: absolute; top: 0; left: 0;
  color: #FFB829;
  font-size: .8125rem; font-weight: 700; letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
.card--platform::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: rgba(255,255,255,.14);
  transform-origin: left center;
}
.grid-platforms { row-gap: clamp(44px, 5vw, 76px); }

/* ---- the hero's one geometric mark -------------------------------------
   Concentric arcs crossed by an alignment line, with a gold register mark
   where they meet: a technical drawing, not an ornament. It sits over the
   photograph on the side that carries no type and runs off the right edge,
   so it reads as part of something larger than the frame. */
.hero-geo {
  position: absolute;
  z-index: -1;                 /* over the picture, under the veil and the type */
  right: -8%;
  /* Centred vertically the figure fell across the lit city, where a hairline
     has nothing to hold against. It sits in the sky instead: the darkest,
     emptiest part of the frame, and the only place a drawn line reads. */
  top: 33%;
  width: clamp(330px, 46vw, 720px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
}
.hero-geo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.geo-line { stroke: #FFFFFF; stroke-opacity: .42; stroke-width: 1;
            vector-effect: non-scaling-stroke; fill: none; }
.geo-arc-mid { stroke-opacity: .30; }
.geo-arc-in { stroke-opacity: .20; }
.geo-tick, .geo-fan, .geo-cross {
  stroke: #FFFFFF; stroke-width: 1; vector-effect: non-scaling-stroke; fill: none;
}
.geo-tick { stroke-opacity: .30; }
.geo-fan { stroke-opacity: .26; }
.geo-fan--long { stroke-opacity: .46; }
.geo-cross { stroke: #FFB829; stroke-opacity: .55; }
.geo-mark { fill: #FFB829; }

/* Measured: the drawn lines clear the hero type down to 1152px, and cross it
   at 1024 and below. Narrower than that the hero has no empty frame left, so
   the figure goes rather than sitting behind the paragraph. */
@media (max-width: 1100px) {
  .hero-geo { display: none; }
}

/* ---- the short rule over mission and vision ---------------------------- */
.mv-rule { display: block; width: 34px; height: 2px; background: #FFB829;
           margin-bottom: 16px; transform-origin: left center; }

/* ---- about: the founding paragraph, beside the structure it claims ----- */
/* The photo stretches to the height of the paragraph beside it rather than
   floating in the middle of it, so the block has no dead corner. */
.about-grid { display: grid; align-items: stretch;
              gap: clamp(28px, 4vw, 64px);
              grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
.about-media { display: flex; flex-direction: column; min-height: 300px; }
.about-media picture { flex: 1 1 auto; min-height: 0; display: block; }
.about-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the brand bar under the frame, carried over from the block this replaces */
.about-media::after { content: ""; flex: none; height: 6px;
                      background: linear-gradient(90deg, #FFB829 0 38%,
                                                  rgba(255,255,255,.10) 38%); }
.about-body { align-self: center; }
.about-body h2 { max-width: 18ch; margin-top: 10px; }
.about-body > p { color: #BDBDBD; margin-top: 16px; max-width: 46ch; }
/* mission and vision are a claim of their own, so they get the full measure
   under the block rather than a narrow third column of it */
.about-mv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(24px, 3vw, 56px);
            margin-top: clamp(40px, 5vw, 72px);
            padding-top: clamp(28px, 3vw, 40px);
            border-top: 1px solid rgba(255,255,255,.14); }
.about-mv h3 { color: #FFFFFF; font-size: 1rem; font-weight: 600;
               letter-spacing: -.01em; margin-bottom: 10px; }
.about-mv p { color: #BDBDBD; max-width: 52ch; }

/* ---- values: a numbered list, not seven tiles -------------------------- */
.grid-values { list-style: none; counter-reset: val;
               margin-top: clamp(32px, 4vw, 56px);
               display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
               gap: clamp(28px, 3vw, 44px) clamp(32px, 5vw, 80px); }
.val { counter-increment: val; }
.val h3 { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px;
          color: #FFFFFF; font-size: 1.0625rem; font-weight: 600;
          letter-spacing: -.015em; }
.val h3::before { content: counter(val, decimal-leading-zero); flex: none;
                  color: #FFB829; font-size: .8125rem; font-weight: 600;
                  font-variant-numeric: tabular-nums; }
.val p { color: #BDBDBD; max-width: 42ch; }

/* ---- offices ----------------------------------------------------------- */
.off-label { margin-top: clamp(40px, 5vw, 64px); padding-top: 24px;
             border-top: 1px solid rgba(255,255,255,.14);
             color: #9A9A9A; font-size: .875rem; font-weight: 600;
             text-transform: uppercase; letter-spacing: .08em; }
.grid-offices { list-style: none; margin-top: 24px;
                display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: clamp(24px, 3vw, 44px); }
.off h4 { margin-bottom: 10px; color: #FFFFFF; font-size: 1rem; font-weight: 600; }
.off h4 span { color: #FFB829; font-weight: 400; }
.off h4 span::before { content: " · "; color: #9A9A9A; }
.off-addr { color: #BDBDBD; font-size: .9375rem; }
.off-tel { margin-top: 8px; }
.off-tel a { color: #9A9A9A; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.off-tel a:hover { color: #FFB829; }

/* ---- the privacy notice ------------------------------------------------ */
/* A reading page, so the measure is short and the rhythm is calmer than the
   site's. It borrows everything else from the same stylesheet. */
.legal { padding-block: clamp(48px, 7vw, 96px) clamp(64px, 9vw, 120px); }
.legal h1 { max-width: 20ch; margin-bottom: 20px; }
.legal .lead { max-width: 60ch; color: #BDBDBD; }
.legal-date { color: #9A9A9A; font-size: .875rem; margin-top: 18px; }
.legal-back { margin-left: auto; }
/* this bar has no link row, so the back link already carries the auto margin;
   a second one on the pill would split the free space and strand the link
   in the middle of the bar */
.legal-back ~ .lang { margin-left: 0; }
.legal-back a { color: #FFB829; font-size: .875rem; text-transform: uppercase;
                letter-spacing: .025em; font-weight: 600; }
.legal-back a:hover { color: #FFFFFF; }
/* the error page borrows this layout; its two calls need air the prose does not */
.nf-go { margin-top: 28px; }
.legal-sec { margin-top: clamp(32px, 4vw, 52px); max-width: 72ch; }
.legal-sec h2 { font-size: clamp(1.25rem, 1rem + .7vw, 1.6rem); letter-spacing: -.02em;
                margin-bottom: 14px; }
.legal-sec p { color: #BDBDBD; margin-bottom: 14px; }
.legal-sec p:last-child { margin-bottom: 0; }
/* the fields only the company can supply, impossible to read past */
.gap { color: #FFB829; font-weight: 400; }
.draft { max-width: 72ch; margin-top: 36px; padding: 20px 22px;
         border: 1px solid #FFB829; border-radius: 4px; }
.draft b { color: #FFB829; font-weight: 600; display: block; margin-bottom: 8px; }
.draft p { color: #BDBDBD; margin: 0; }

/* ---- footer: the void continues ---------------------------------------- */
.foot { background: #10151F; border-top: 0; }
.foot a { color: #9A9A9A; }
.foot a:hover { color: #FFFFFF; }
.foot h3, .foot-bottom { color: #9A9A9A; }

@media (max-width: 1024px) {
  /* The drop-down panel takes its ground from --surface, which this direction
     sets to transparent so cards sit straight on the void. For the panel that
     leaves the links printed over the hero copy. It gets the same ground the
     scrolled bar uses, and the bar takes it too while the panel is open, so
     the two read as one sheet even at the top of the page. */
  .nav-links {
    background: #10151F;
    border-bottom: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 24px 48px rgba(0,0,0,.45);
  }
  .nav-links a { border-bottom-color: rgba(255,255,255,.08); }
  .nav[data-open="true"] {
    background: #10151F;
    backdrop-filter: none;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
}

@media (max-width: 900px) {
  /* the bar has a toggle and a language pill beside the mark, so it gives
     back some of the height rather than crowding them */
  :root { --nav-h: 74px; }
  .brand img { height: 38px; }
  /* heading over intro: side by side, the intro is squeezed into a column a
     few words wide and runs to twenty lines on a phone */
  .sec-head { grid-template-columns: minmax(0, 1fr); row-gap: 18px; align-items: start; }
  .sec-head > .sec-intro { grid-column: 1; grid-row: auto; align-self: start; max-width: 60ch; }
  .hero--void { min-height: 0; padding-block: 56px clamp(64px, 10vw, 96px); }
  /* one column throughout: the photo leads, then the paragraph that claims it */
  .about-grid { grid-template-columns: 1fr; }
  .about-media { min-height: 0; }
  .about-media img { height: auto; }
  .about-mv { grid-template-columns: 1fr; gap: 22px; }
  .grid-values { grid-template-columns: 1fr; }
  .grid-offices { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  /* The privacy notice's bar holds the mark, a text link home and the language
     pill. "Back to the site" breaks onto three lines on a phone, so below this
     width the link is drawn as an arrow in the same box as the menu toggle.
     The words stay in the markup and remain the link's accessible name. */
  .legal-back a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    font-size: 0; letter-spacing: 0;
    border: var(--bw) solid rgba(255,255,255,.22);
    border-radius: var(--r-btn);
  }
  .legal-back a::before { content: "\2190"; font-size: 1.125rem; line-height: 1; }
}

@media (max-width: 360px) {
  /* 320px phones: the mark, the language pill and the toggle add up to more
     than the bar is wide, and the page picks up a sideways scroll. The mark
     gives way first, since it is the only one of the three that can shrink
     without falling under a comfortable touch size. */
  .nav-in { gap: 12px; }
  .brand img { height: 30px; }
  .nav-toggle { margin-left: 2px; }
}