/* INTAG landing — every value resolves to a --intag-* token from intag-tokens.css.
   Components consume the semantic layer, never a primitive. */

/* ── Fonts: local woff2 only, no external CDN ───────────────────────────────
   Both families ship twice. The full delivered file is declared first and carries
   Arabic and Latin; the Latin subset is declared second and therefore wins for the
   ranges it covers. A character outside the subset (any Arabic, if a bilingual
   version is ever built) falls through to the full file automatically, so the
   optimisation cannot silently break the identity's Arabic support.
   Full: 341 KB. Latin subsets actually fetched for this English page: 97 KB. */

@font-face {
  font-family: 'Alexandria';
  src: url('../fonts/Alexandria-Variable.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/IBMPlexSansArabic-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/IBMPlexSansArabic-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/IBMPlexSansArabic-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/IBMPlexSansArabic-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Alexandria';
  src: url('../fonts/latin/Alexandria-Variable.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+2229, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/latin/IBMPlexSansArabic-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+2229, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/latin/IBMPlexSansArabic-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+2229, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/latin/IBMPlexSansArabic-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+2229, U+FEFF, U+FFFD;
}

/* ── Layout constants derived from the delivered grid ───────────────────── */
:root {
  --shell: 1276px;                            /* 1440 − 2 × 82px desktop margin */
  --gutter: var(--intag-space-lg);            /* 27px */
  --margin-desktop: var(--intag-space-3xl);   /* 82px */
  --margin-mobile: var(--intag-space-md);     /* 20px */
  --measure: 66ch;
  /* Header height, token-derived: the 41px control plus its block padding.
     The header is lifted out of flow so the key visual runs behind it unbroken,
     so the hero must reserve this space itself. */
  --head-h: calc(var(--intag-space-xl) + 2 * var(--intag-space-md));
  /* Minimum interactive target. WCAG 2.2 AA asks 24px, AAA asks 44px; take AAA. */
  --scrub: 1;
  --tap: calc(var(--intag-space-xl) + var(--intag-space-3xs) - 1px);
}

body { position: relative; }
html[data-theme="light"] { color-scheme: light; }

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

html { color-scheme: dark; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { color-scheme: dark; scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--intag-color-surface-page);
  color: var(--intag-color-text-primary);
  font-family: var(--intag-font-en-text);
  font-size: var(--intag-fs-en-body-lg);
  line-height: var(--intag-lh-en-body-lg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--intag-font-en-display);
  font-weight: 300;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }

/* ── Browser surfaces: theme what we did not draw ───────────────────────── */
::selection { background: var(--intag-color-border-accent); color: var(--intag-color-text-onAccent); }
:root { caret-color: var(--intag-color-border-accent); scrollbar-color: var(--intag-color-border-strong) var(--intag-color-surface-page); }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--intag-color-border-accent);
  outline-offset: 3px;
  border-radius: var(--intag-radius-sm);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: var(--intag-space-md); top: var(--intag-space-md);
  z-index: 10;
  transform: translateY(calc(-100% - var(--intag-space-2xl)));
  background: var(--intag-color-action-primary-bg);
  color: var(--intag-color-action-primary-text);
  padding: var(--intag-space-xs) var(--intag-space-md);
  border-radius: var(--intag-radius-sm);
  font-weight: 600;
  transition: transform var(--intag-motion-fast-ms) var(--intag-motion-ease-standard);
}
.skip:focus { transform: none; }

/* ── Shell ──────────────────────────────────────────────────────────────── */
.site-head, .hero__grid, .ledger {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--margin-mobile);
}
@media (min-width: 900px) {
  .site-head, .hero__grid, .ledger { padding-inline: var(--margin-desktop); }
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-head {
  display: flex;
  align-items: center;
  gap: var(--intag-space-lg);
  padding-block: var(--intag-space-md);
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 3;
}
.site-head__mark { display: inline-flex; align-items: center; flex: 0 0 auto;
  min-height: var(--tap); }
/* Wordmark minimum on screen is 112px wide; both sizes clear it with margin. */
.site-head__mark img { width: 132px; height: auto; display: block; }
@media (min-width: 620px) { .site-head__mark img { width: 180px; } }
[data-theme="dark"] .mark-light, [data-theme="light"] .mark-dark { display: none; }

.site-head__nav {
  display: none;
  gap: var(--intag-space-lg);
  margin-inline-start: auto;
  font-size: var(--intag-fs-en-body);
  line-height: var(--intag-lh-en-body);
}
@media (min-width: 1100px) { .site-head__nav { display: flex; } }
.site-head__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--intag-color-text-secondary);
  text-decoration: none;
  padding-block: var(--intag-space-3xs);
  border-bottom: 1px solid transparent;
  transition: color var(--intag-motion-fast-ms) var(--intag-motion-ease-standard),
              border-color var(--intag-motion-fast-ms) var(--intag-motion-ease-standard);
}
.site-head__nav a:hover { color: var(--intag-color-text-primary); border-bottom-color: var(--intag-color-border-strong); }

.site-head__end {
  display: flex;
  align-items: center;
  gap: var(--intag-space-sm);
  margin-inline-start: auto;
}
@media (min-width: 1100px) { .site-head__end { margin-inline-start: var(--intag-space-lg); } }

.theme-toggle {
  display: inline-grid; place-items: center;
  width: var(--tap); height: var(--tap);
  background: transparent;
  color: var(--intag-color-text-secondary);
  border: 1px solid var(--intag-color-border-subtle);
  border-radius: var(--intag-radius-sm);
  cursor: pointer;
  transition: color var(--intag-motion-fast-ms) var(--intag-motion-ease-standard),
              border-color var(--intag-motion-fast-ms) var(--intag-motion-ease-standard);
}
.theme-toggle:hover { color: var(--intag-color-text-primary); border-color: var(--intag-color-border-strong); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  font-family: var(--intag-font-en-text);
  font-size: var(--intag-fs-en-body-lg);
  line-height: var(--intag-lh-en-body-lg);
  font-weight: 600;
  padding: var(--intag-space-sm) var(--intag-space-lg);
  border: 1px solid transparent;
  border-radius: var(--intag-radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--intag-motion-fast-ms) var(--intag-motion-ease-standard),
              background-color var(--intag-motion-fast-ms) var(--intag-motion-ease-standard),
              border-color var(--intag-motion-fast-ms) var(--intag-motion-ease-standard),
              color var(--intag-motion-fast-ms) var(--intag-motion-ease-standard);
}
.btn--sm { font-size: var(--intag-fs-en-body); padding: var(--intag-space-xs) var(--intag-space-md);
  white-space: nowrap; min-height: var(--tap); }
.head-cta-long { display: none; }
@media (min-width: 620px) { .head-cta-long { display: inline; } }

.btn--primary {
  background: var(--intag-color-action-primary-bg);
  color: var(--intag-color-action-primary-text);
}
.btn--primary:hover { transform: translateY(-2px); }

.btn--ghost {
  background: transparent;
  color: var(--intag-color-text-secondary);
  border-color: var(--intag-color-border-subtle);
}
.btn--ghost:hover { color: var(--intag-color-text-primary); border-color: var(--intag-color-border-strong); transform: translateY(-2px); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
/* ── The key visual, as a living field ───────────────────────────────────
   The artwork sits on its own layer so it can move without moving the copy.
   Two nested boxes because one element runs one transform at a time: the
   wrapper takes the scroll parallax, the inner surface takes a slow ambient
   drift. The scrims stay in the same background stack as the artwork, so the
   composite a reader sees is the composite a contrast checker measures. */
.masthead {
  position: relative;
  overflow: hidden;
  background-color: var(--intag-color-surface-page);
}
.masthead__art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* The pointer layer sits between the scroll parallax and the ambient drift, because
   each layer carries exactly one transform. The field leans away from the cursor,
   so the artwork reads as something behind the page rather than printed on it. */
.masthead { --hx: 0; --hy: 0; }
.masthead__pointer {
  position: absolute; inset: 0;
  transform: translate3d(calc(var(--hx) * -26px), calc(var(--hy) * -18px), 0);
  transition: transform calc(var(--intag-motion-expressive-ms) * 1.4) var(--intag-motion-ease-standard);
}
.masthead__pointer::before {
  content: "";
  position: absolute; inset: -9%;
  background-image:
    linear-gradient(to bottom, transparent 55%, var(--intag-color-surface-page) 100%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--intag-forest-950) 62%, transparent) 0%,
      color-mix(in srgb, var(--intag-forest-950) 62%, transparent) 72%,
      color-mix(in srgb, var(--intag-forest-950) 30%, transparent) 100%),
    linear-gradient(to right,
      color-mix(in srgb, var(--intag-forest-950) 55%, transparent) 0%,
      color-mix(in srgb, var(--intag-forest-950) 34%, transparent) 46%,
      transparent 80%),
    image-set(url('../img/kv-landscape.avif') type('image/avif'),
              url('../img/kv-landscape.webp') type('image/webp'));
  background-size: cover, cover, cover, cover;
  background-position: center, center, center, left center;
  background-repeat: no-repeat;
  will-change: transform;
}
@media (min-width: 1200px) {
  .masthead__pointer::before { background-position: center, center, center, center right; }
}
@media (max-width: 700px) {
  .masthead__pointer::before {
    background-image:
      linear-gradient(to bottom, transparent 92%, var(--intag-color-surface-page) 100%),
      linear-gradient(to bottom,
        color-mix(in srgb, var(--intag-forest-950) 46%, transparent) 0%,
        color-mix(in srgb, var(--intag-forest-950) 22%, transparent) 46%,
        transparent 72%),
      image-set(url('../img/kv-portrait.avif') type('image/avif'),
                url('../img/kv-portrait.webp') type('image/webp'));
    background-size: cover, cover, cover;
    background-position: center, center, center bottom;
  }
}
/* Light is the document mode; the key visual is a dark-mode artwork. */
[data-theme="light"] .masthead__art { display: none; }

/* Ambient life: a slow breathing drift, ~40s, so the field is never quite still.
   Duration is a multiple of the expressive token rather than a new number. */
@keyframes kv-drift {
  from { transform: scale(1.12) rotate(-1.7deg) translate3d(-2.4%,  1.6%, 0); }
  to   { transform: scale(1.28) rotate( 1.7deg) translate3d( 0.8%, -1.6%, 0); }
}
.masthead__pointer::before {
  animation: kv-drift calc(var(--intag-motion-expressive-ms) * 16)
             var(--intag-motion-ease-standard) infinite alternate;
}
/* Scroll parallax: the field falls behind the copy as the page moves. */
@keyframes kv-parallax { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 18%, 0); } }
@supports (animation-timeline: scroll()) {
  .masthead__art {
    animation: kv-parallax linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100vh;
  }
}

.hero__grid { position: relative; z-index: 1; }

.hero {
  position: relative;
  padding-block: calc(var(--head-h) + var(--intag-space-3xl)) var(--intag-space-2xl);
}
@media (min-width: 900px) {
  .hero { padding-block: calc(var(--head-h) + var(--intag-space-4xl)) var(--intag-space-3xl); }
}
/* Room for the artwork's light to read below the action on small screens. */
@media (max-width: 700px) {
  .hero { padding-block: calc(var(--head-h) + var(--intag-space-2xl)) var(--intag-space-4xl); }
}
.masthead::before, .masthead::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
}
/* Measured scrim over the reading column only — the artwork stays lit to its right. */
.masthead::before {
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--intag-forest-950) 62%, transparent) 0%,
      color-mix(in srgb, var(--intag-forest-950) 62%, transparent) 72%,
      color-mix(in srgb, var(--intag-forest-950) 30%, transparent) 100%),
    linear-gradient(to right,
      color-mix(in srgb, var(--intag-forest-950) 55%, transparent) 0%,
      color-mix(in srgb, var(--intag-forest-950) 34%, transparent) 46%,
      transparent 80%);
}
.masthead::after {
  background: linear-gradient(to bottom,
    transparent 55%,
    var(--intag-color-surface-page) 100%);
}
[data-theme="light"] .masthead::before, [data-theme="light"] .masthead::after { background: none; }
.hero__grid { position: relative; z-index: 1; }

.hero__title {
  font-size: clamp(var(--intag-fs-en-h3), 5.2vw, var(--intag-fs-en-display-lg));
  line-height: var(--intag-lh-en-display-lg);
  font-weight: 200;
  letter-spacing: -0.02em;
  max-width: 15ch;
}
@media (max-width: 620px) { .hero__title { line-height: var(--intag-lh-en-h2); } }

.hero__lead {
  margin-top: var(--intag-space-lg);
  max-width: var(--measure);
  color: var(--intag-color-text-secondary);
  font-size: var(--intag-fs-en-body-lg);
  line-height: var(--intag-lh-en-body-lg);
}

.hero__actions {
  margin-top: var(--intag-space-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--intag-space-sm);
}

/* ── The ledger ─────────────────────────────────────────────────────────── */
.ledger { padding-block: 0 var(--intag-space-3xl); }

.ledger__head {
  display: none;
  grid-template-columns: 1fr;
  gap: var(--intag-space-sm);
  position: relative;
  padding-bottom: var(--intag-space-sm);
  border-bottom: 1px solid var(--intag-color-border-subtle);
}
.ledger__col {
  font-size: var(--intag-fs-en-caption);
  line-height: var(--intag-lh-en-caption);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--intag-color-text-muted);
}
.ledger__col--b { color: var(--intag-color-text-primary); }

.ledger__rows { list-style: none; margin: 0; padding: 0; position: relative; }

/* The row number lives on the divide: on desktop it sits in the seam itself, so
   the eye reads the ledger as a single instrument rather than two lists. */
.ledger__n {
  display: block;
  font-family: var(--intag-font-en-display);
  font-size: var(--intag-fs-en-caption);
  font-weight: 600;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: var(--intag-color-text-muted);
  margin-bottom: var(--intag-space-2xs);
}

.ledger__tag {
  display: block;
  margin-bottom: var(--intag-space-3xs);
  font-size: var(--intag-fs-en-caption);
  line-height: var(--intag-lh-en-caption);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--intag-color-text-muted);
}
.ledger__cell--b .ledger__tag { color: var(--intag-color-text-secondary); }

/* One terracotta crossbar opens the ledger — the single accent in this view. */
.ledger__mark {
  width: var(--intag-space-xl);
  height: 5px;
  background: var(--intag-color-border-accent);
  margin-bottom: var(--intag-space-md);
}

.ledger__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--intag-space-xs);
  padding-block: var(--intag-space-lg);
  border-bottom: 1px solid var(--intag-color-border-subtle);
}
.ledger__cell p {
  font-size: var(--intag-fs-en-body-lg);
  line-height: var(--intag-lh-en-body-lg);
  max-width: var(--measure);
}
.ledger__cell--a p { color: var(--intag-color-text-muted); }
.ledger__cell--b p { color: var(--intag-color-text-primary); }

/* Mobile: the pair reads as a consequence, marked by a rule on the "after" side. */
.ledger__cell--b {
  border-inline-start: 1px solid var(--intag-color-border-strong);
  padding-inline-start: var(--intag-space-sm);
}

/* The seam: a terracotta rule the scroll draws downward. It is the one accent in
   this view, and it earns it — it shows the ledger being worked through. */
.ledger__seam { display: none; }
@media (min-width: 900px) {
  .ledger { position: relative; }
  .ledger__seam {
    display: block;
    position: absolute;
    left: 50%;
    top: 0; bottom: var(--intag-space-3xl);
    width: 2px;
    margin-left: -1px;
    background: var(--intag-color-border-accent);
    transform: scaleY(0);
    transform-origin: 50% 0;
    z-index: 1;
  }
  .ledger__mark { display: none; }
  .ledger__head { display: grid; }
  .ledger__head, .ledger__row {
    grid-template-columns: 1fr 1fr;
    gap: var(--intag-space-3xl);
  }
  /* The divide, carrying the identity's rule device: one terracotta crossbar on the seam. */
  .ledger__head::after {
    content: "";
    position: absolute;
    left: calc(50% - var(--intag-space-md));
    bottom: -3px;
    width: var(--intag-space-xl);
    height: 5px;
    background: var(--intag-color-border-accent);
  }
  .ledger__tag {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .ledger__cell--b { border-inline-start: 0; padding-inline-start: 0; }
  /* One unbroken hairline behind the drawn seam. */
  .ledger__rows::before {
    content: "";
    position: absolute;
    left: 50%; margin-left: -1px;
    top: 0; bottom: 0;
    width: 2px;
    background: var(--intag-color-border-subtle);
  }
  /* Numbers hang in the seam, on its left edge. */
  .ledger__n {
    position: absolute;
    left: 50%;
    transform: translateX(calc(-100% - var(--intag-space-sm)));
    margin-bottom: 0;
  }
  .ledger__row { position: relative; }
}

/* ── Shared section furniture ───────────────────────────────────────────── */
.wrap {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--margin-mobile);
}
@media (min-width: 900px) { .wrap { padding-inline: var(--margin-desktop); } }

section { padding-block: var(--intag-space-3xl); }
@media (min-width: 900px) { section { padding-block: var(--intag-space-4xl); } }

.h-display {
  font-size: clamp(var(--intag-fs-en-h3), 3.6vw, var(--intag-fs-en-display));
  line-height: var(--intag-lh-en-display);
  font-weight: 200;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.lead {
  margin-top: var(--intag-space-md);
  max-width: var(--measure);
  color: var(--intag-color-text-secondary);
  font-size: var(--intag-fs-en-body-lg);
  line-height: var(--intag-lh-en-body-lg);
}
h3 {
  font-size: var(--intag-fs-en-h4);
  line-height: var(--intag-lh-en-h4);
  font-weight: 400;
  color: var(--intag-color-text-primary);
}
.ico-accent { fill: var(--intag-color-border-accent); }

/* ── Scroll progress: the only chrome-level use of the accent ───────────── */
.progress {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  height: 3px; z-index: 20;
  background: var(--intag-color-border-accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .progress { animation: grow linear both; animation-timeline: scroll(root); }
}
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── What we build ──────────────────────────────────────────────────────── */
.build { background: var(--intag-color-surface-sunken); }
.build__grid {
  margin-top: var(--intag-space-2xl);
  display: grid;
  gap: var(--intag-space-xl);
}
@media (min-width: 820px) { .build__grid { grid-template-columns: repeat(3, 1fr); gap: var(--intag-space-2xl); } }
.build__item { border-top: 1px solid var(--intag-color-border-subtle); padding-top: var(--intag-space-md); }
.build__item p { margin-top: var(--intag-space-xs); color: var(--intag-color-text-secondary); max-width: 46ch; }

/* ── Built to fit ───────────────────────────────────────────────────────── */
.fit__list {
  margin-top: var(--intag-space-2xl);
  display: grid; gap: var(--intag-space-xl);
}
@media (min-width: 820px) { .fit__list { grid-template-columns: repeat(3, 1fr); gap: var(--intag-space-2xl); } }
.fit__item { border-top: 1px solid var(--intag-color-border-subtle); padding-top: var(--intag-space-md); }
.fit__item--accent { border-top-color: transparent; border-top-width: 2px; }
.fit__item p { margin-top: var(--intag-space-xs); color: var(--intag-color-text-secondary); max-width: 46ch; }
.fit__cta { margin-top: var(--intag-space-2xl); }

/* ── How we work ────────────────────────────────────────────────────────── */
.process { background: var(--intag-color-surface-sunken); }
.steps {
  list-style: none; margin: var(--intag-space-2xl) 0 0; padding: 0;
  display: grid; gap: var(--intag-space-xl);
  counter-reset: none;
}
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--intag-space-2xl); } }
.step { position: relative; padding-top: var(--intag-space-md); border-top: 1px solid var(--intag-color-border-subtle); }
.step__icon { display: block; color: var(--intag-color-text-secondary); margin-bottom: var(--intag-space-sm); }
.step h3 { display: flex; align-items: baseline; gap: var(--intag-space-xs); }
.step__n {
  font-size: var(--intag-fs-en-caption);
  font-weight: 600; letter-spacing: 0.16em;
  color: var(--intag-color-text-muted);
  font-variant-numeric: tabular-nums;
}
.step p { margin-top: var(--intag-space-xs); color: var(--intag-color-text-secondary); max-width: 40ch; }

/* ── Set piece: the intersection ────────────────────────────────────────── */
.pinwrap {
  padding: 0;
  height: auto;
  background: var(--intag-color-surface-sunken);
}
.pin {
  position: relative;
  min-height: 620px;
  height: auto;
  padding-block: var(--intag-space-3xl);
  display: grid; place-items: center;
  overflow: hidden;
}

/* A passive field behind the arcs: the identity's own lattice device drifting
   diagonally, over two slow forest blooms moving at different rates. Nothing here
   waits for interaction, and nothing here is a blur — the depth is gradient and
   pattern, which is the same language the key visual is built from. */
/* Two layers, both moved by transform rather than background-position: animating
   a background offset repaints the whole surface every frame, and this element is
   viewport-sized. The blooms and the lattice drift at different rates, which is
   what produces the depth. */
.pin__field {
  position: absolute; inset: -22%;
  z-index: 0;
  overflow: hidden;
  background-image:
    radial-gradient(58% 46% at 26% 32%, var(--intag-forest-850) 0%, transparent 62%),
    radial-gradient(52% 44% at 74% 70%, var(--intag-forest-800) 0%, transparent 60%);
  background-repeat: no-repeat;
  opacity: .6;
  animation: bloom-drift calc(var(--intag-motion-expressive-ms) * 46)
             var(--intag-motion-ease-standard) infinite alternate;
}
.pin__field::before {
  content: "";
  position: absolute; inset: -18%;
  background-image: url('../patterns/INTAG_Pattern_Lattice_Overlay.svg');
  background-size: 96px 96px;
  background-repeat: repeat;
  opacity: .8;
  animation: lattice-drift calc(var(--intag-motion-expressive-ms) * 78) linear infinite alternate;
}
[data-theme="light"] .pin__field { opacity: .28; }

@keyframes bloom-drift {
  from { transform: translate3d(-3.5%, -2.5%, 0) scale(1.02); }
  to   { transform: translate3d( 3.5%,  2.5%, 0) scale(1.12); }
}
@keyframes lattice-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(96px, 96px, 0); }
}

.pin__art {
  position: absolute; inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  min-height: 420px;
}
.pin__cap { fill: var(--intag-forest-900); }
.pin__cup { fill: var(--intag-forest-850); }
.pin__x   { fill: var(--intag-forest-700); }
[data-theme="light"] .pin__cap { fill: var(--intag-sand-200); }
[data-theme="light"] .pin__cup { fill: var(--intag-sand-300); }
[data-theme="light"] .pin__x   { fill: var(--intag-apricot-300); }

/* ── The set piece, scrubbed ─────────────────────────────────────────────
   Named view timelines (view(--pin)) do not resolve in this engine: they freeze
   silently at the animation's end value, which looks like "no motion" rather than
   like an error. Verified against an anonymous view() side by side. So one
   anonymous timeline on the tall wrapper drives a single inherited number, and
   every part of the choreography is a pure function of it. One clock, so nothing
   can drift out of sync — and it scrubs continuously from the section's first
   pixel to its last.
     --scrub 0    the two sets are apart, with NO overlap at all
     --scrub 0.76 they meet: the intersection exists
     --scrub 1    they settle past each other, overlap at its widest
   The initial value is 1, so with no scroll support the resting state is the
   converged one and nothing is ever lost. */
@property --scrub { syntax: '<number>'; initial-value: 1; inherits: true; }
@keyframes pin-drive { from { --scrub: 0; } to { --scrub: 1; } }
@supports (animation-timeline: view()) {
  .pinwrap {
    height: 260vh;
    animation: pin-drive linear both;
    animation-timeline: view();
    animation-range: contain 0% contain 100%;
  }
  .pin { position: sticky; top: 0; min-height: 620px; height: 100svh; padding-block: 0; }
}

.pin__scrub--cap {
  transform:
    translate(calc(-266px + var(--scrub) * 350px), calc(-63px + var(--scrub) * 88px))
    scale(calc(1.10 - var(--scrub) * 0.14));
}
.pin__scrub--cup {
  transform:
    translate(calc(266px - var(--scrub) * 350px), calc(63px - var(--scrub) * 88px))
    scale(calc(1.10 - var(--scrub) * 0.14));
}

/* Pointer layer. The two sets drift in opposite directions, so the overlap the
   clip-path computes actually changes as the cursor moves. The cap's clip moves
   with the cap, or the bright region would stop being a true intersection. */
.pinwrap { --px: 0; --py: 0; }
.pin__track, .pin__clipmove {
  transition: transform var(--intag-motion-fast-ms) var(--intag-motion-ease-standard);
}
/* The arcs breathe even when nobody touches them, so the section is never dead.
   A fourth nesting level, because each layer can only carry one transform:
   scroll convergence > pointer offset > ambient sway. */
@keyframes arc-sway-a {
  from { transform: translate3d(0, 0, 0) rotate(-0.9deg); }
  to   { transform: translate3d(1.4%, -1.1%, 0) rotate(0.9deg); }
}
@keyframes arc-sway-b {
  from { transform: translate3d(0, 0, 0) rotate(0.9deg); }
  to   { transform: translate3d(-1.4%, 1.1%, 0) rotate(-0.9deg); }
}
.pin__sway--a, .pin__clipsway {
  animation: arc-sway-a calc(var(--intag-motion-expressive-ms) * 22)
             var(--intag-motion-ease-standard) infinite alternate;
}
.pin__sway--b {
  animation: arc-sway-b calc(var(--intag-motion-expressive-ms) * 22)
             var(--intag-motion-ease-standard) infinite alternate;
}
.pin__track--cap, .pin__clipmove {
  transform: translate(calc(var(--px) * -104px), calc(var(--py) * -62px));
}
.pin__track--cup {
  transform: translate(calc(var(--px) * 104px), calc(var(--py) * 62px));
}

.pin__copy {
  position: relative; z-index: 2;
  width: 100%;
  text-align: start;
  /* A hard-edged opaque band crossing the arcs, not a soft plate. It guarantees the
     copy's contrast wherever the artwork lands behind it, and hard edges are the
     identity's own law. */
  background: var(--intag-color-surface-sunken);
  padding: var(--intag-space-2xl) var(--margin-mobile);
}
.pin__copy > * { max-width: 54ch; margin-inline: auto; }
.pin__title {
  font-size: clamp(var(--intag-fs-en-h4), 3.2vw, var(--intag-fs-en-h1));
  line-height: var(--intag-lh-en-h1);
  font-weight: 200;
  letter-spacing: -0.02em;
  color: var(--intag-color-text-primary);
  text-wrap: balance;
}
.pin__body {
  margin-top: var(--intag-space-md);
  text-wrap: pretty;
  color: var(--intag-color-text-secondary);
  font-size: var(--intag-fs-en-body-lg);
  line-height: var(--intag-lh-en-body-lg);
}
.pin__body b { font-weight: 600; color: var(--intag-color-text-primary); }
.pin__kicker {
  margin-top: var(--intag-space-md);
  font-size: var(--intag-fs-en-body-lg);
  line-height: var(--intag-lh-en-body-lg);
  color: var(--intag-color-text-accent);
  font-weight: 600;
}

@media (min-width: 760px) {
  .pin__copy { text-align: center; padding: var(--intag-space-3xl) var(--margin-desktop); }
}

/* ── The name is the map ────────────────────────────────────────────────── */
.map__list { margin-top: var(--intag-space-2xl); display: grid; gap: var(--intag-space-xl); }
@media (min-width: 820px) { .map__list { grid-template-columns: repeat(3, 1fr); gap: var(--intag-space-2xl); } }
.map__item { border-top: 1px solid var(--intag-color-border-subtle); padding-top: var(--intag-space-md); }
.map__icon { display: block; color: var(--intag-color-text-secondary); margin-bottom: var(--intag-space-sm); }
.map__item h3 { display: flex; align-items: baseline; gap: var(--intag-space-xs); }
.map__letter {
  font-family: var(--intag-font-en-display);
  font-weight: 600;
  color: var(--intag-color-text-muted);
  font-size: var(--intag-fs-en-caption);
  letter-spacing: 0.08em;
}
.map__item p { margin-top: var(--intag-space-xs); color: var(--intag-color-text-secondary); max-width: 46ch; }

/* ── Security ───────────────────────────────────────────────────────────── */
.security { background: var(--intag-color-surface-sunken); }
.security__icon { display: block; color: var(--intag-color-text-secondary); margin-bottom: var(--intag-space-md); }
.security__list { margin-top: var(--intag-space-2xl); display: grid; gap: var(--intag-space-xl); }

/* ── Founder ────────────────────────────────────────────────────────────── */
.founder__grid { display: grid; gap: var(--intag-space-2xl); }
@media (min-width: 900px) {
  .founder__grid { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: var(--intag-space-2xl); align-items: start; }
}
.portrait { margin: 0; width: 100%; max-width: 420px; }
.portrait__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--intag-radius-md);
  background-color: var(--intag-color-surface-raised);
}
.founder__role {
  margin-top: var(--intag-space-2xs);
  font-size: var(--intag-fs-en-body-lg);
  font-weight: 500;
  color: var(--intag-color-text-muted);
}
.path {
  margin: var(--intag-space-xl) 0 0; padding: 0; list-style: none;
  display: grid; gap: var(--intag-space-xs);
  counter-reset: p;
}
.path li {
  counter-increment: p;
  display: flex; align-items: baseline; gap: var(--intag-space-sm);
  font-size: var(--intag-fs-en-body);
  line-height: var(--intag-lh-en-body);
  color: var(--intag-color-text-secondary);
  padding-inline-start: var(--intag-space-sm);
  padding-block: var(--intag-space-3xs);
}
.path li::before {
  content: counter(p);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--intag-color-text-muted);
  font-size: var(--intag-fs-en-caption);
}

/* ── Book ───────────────────────────────────────────────────────────────── */
.book { background: var(--intag-color-surface-sunken); text-align: center; }
.book .wrap { display: grid; justify-items: center; }
.book .h-display { max-width: 22ch; }
.book .lead { max-width: 58ch; }
.book__actions {
  margin-top: var(--intag-space-2xl);
  display: flex; flex-wrap: wrap; gap: var(--intag-space-sm); justify-content: center;
}
.btn--lg { font-size: var(--intag-fs-en-body-lg); padding: var(--intag-space-md) var(--intag-space-xl); }
.book__fine {
  margin-top: var(--intag-space-md);
  font-size: var(--intag-fs-en-body);
  line-height: var(--intag-lh-en-body);
  color: var(--intag-color-text-muted);
  letter-spacing: 0.04em;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-foot { padding-block: var(--intag-space-2xl); border-top: 1px solid var(--intag-color-border-subtle); }
.site-foot__grid { display: grid; gap: var(--intag-space-lg); }
@media (min-width: 700px) { .site-foot__grid { grid-template-columns: 1fr auto; align-items: end; } }
.site-foot img { width: 150px; height: auto; display: block; }
.site-foot__tag {
  margin-top: var(--intag-space-xs);
  font-size: var(--intag-fs-en-body);
  line-height: var(--intag-lh-en-body);
  color: var(--intag-color-text-muted);
}
.site-foot__contact { display: grid; gap: var(--intag-space-3xs); font-size: var(--intag-fs-en-body); }
.site-foot__contact a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  color: var(--intag-color-text-secondary); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.site-foot__contact a:hover { color: var(--intag-color-text-primary); border-bottom-color: var(--intag-color-border-strong); }
@media (min-width: 700px) { .site-foot__contact { justify-items: end; } }

/* ── Motion ─────────────────────────────────────────────────────────────── */
/* Body copy never fades: text is fully opaque at rest and the scroll only moves it.
   A reveal that hides text is load-bearing motion, and motion is an enhancement. */
@keyframes settle { from { transform: translateY(26px); } to { transform: none; } }
/* The copy rides the same clock, staggered, and never fades — only moves. */
.pin__copy {
  --p1: clamp(0, (var(--scrub) - 0.20) * 2.8, 1);
  --p2: clamp(0, (var(--scrub) - 0.30) * 2.8, 1);
  --p3: clamp(0, (var(--scrub) - 0.40) * 2.8, 1);
}
.pin__title  { transform: translateY(calc((1 - var(--p1)) * 30px)); }
.pin__body   { transform: translateY(calc((1 - var(--p2)) * 30px)); }
.pin__kicker { transform: translateY(calc((1 - var(--p3)) * 30px)); }
@keyframes converge-l { from { transform: translate3d(-26px, 20px, 0); } to { transform: none; } }
@keyframes converge-r { from { transform: translate3d( 26px, 20px, 0); } to { transform: none; } }
@keyframes draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@supports (animation-timeline: view()) {
  /* Transform only. Fading hero text in makes contrast a function of timing, and a
     reader who arrives mid-animation gets unreadable copy. Motion moves it; it
     never decides whether it is legible. */
  .hero__title, .hero__lead, .hero__actions {
    animation: settle var(--intag-motion-expressive-ms) var(--intag-motion-ease-entrance) both;
  }
  .hero__lead { animation-delay: calc(var(--intag-motion-fast-ms) / 2); }
  .hero__actions { animation-delay: var(--intag-motion-fast-ms); }

  /* Below 900px the ledger is a single stacked column, so there is nothing to
     converge and a horizontal offset would only push content off-screen. */
  .ledger__cell--a { animation: settle linear both; animation-timeline: view(); animation-range: entry 8% cover 32%; }
  .ledger__cell--b { animation: settle linear both; animation-timeline: view(); animation-range: entry 20% cover 46%; }
  .ledger__seam {
    animation: draw linear both; animation-timeline: view(); animation-range: entry 0% cover 62%;
  }
  .ledger__n {
    animation: settle linear both; animation-timeline: view(); animation-range: entry 12% cover 34%;
  }

  .build__item, .fit__item, .step, .map__item, .security__list > div {
    animation: settle linear both; animation-timeline: view(); animation-range: entry 8% cover 34%;
  }


}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero__title, .hero__lead, .hero__actions,
  .ledger__cell--a, .ledger__cell--b, .ledger__n,
  .build__item, .fit__item, .step, .map__item, .security__list > div,
  .pinwrap { --scrub: 1; }
  .pin__scrub, .pin__title, .pin__body, .pin__kicker,
  .pin__track, .pin__clipmove, .pin__sway--a, .pin__sway--b, .pin__clipsway,
  .masthead__pointer, .pin__field {
    opacity: 1 !important; transform: none !important;
  }
  /* Without the scroll timeline these have no progress to show, so complete them. */
  .progress { transform: scaleX(1); }
  .ledger__seam { transform: scaleY(1) !important; }
  /* A pinned section with no scrub is just a tall empty box. */
  .pinwrap { height: auto; }
  .pin { position: relative; min-height: 620px; height: auto; padding-block: var(--intag-space-4xl); }
}

/* ── Harden ─────────────────────────────────────────────────────────────── */

/* Without JavaScript the toggle cannot work, so it must not be offered.
   The inline script sets .js on <html>; until then the control stays hidden. */
.theme-toggle { display: none; }
.js .theme-toggle { display: inline-grid; }

/* Long unbroken strings (emails, URLs, system names) must not push a column open. */
p, li, dd, dt, h1, h2, h3, h4, .btn { overflow-wrap: break-word; }
/* Grid and flex children default to min-content width, which overflows on long words. */
.build__grid > *, .fit__list > *, .steps > *, .map__list > *,
.security__list > *, .founder__grid > *,
.ledger__row > *, .site-foot__grid > * { min-width: 0; }

/* Focus fallback for engines without :focus-visible. */
:where(a, button):focus { outline: 2px solid var(--intag-color-border-accent); outline-offset: 3px; }
:where(a, button):focus:not(:focus-visible) { outline: none; }

/* Windows high contrast: the system palette replaces ours, so keep structure legible. */
@media (forced-colors: active) {
  .btn { border: 1px solid currentColor; }
  .ledger__rows::before, .ledger__row, .build__item, .fit__item,
  .step, .map__item, .security__list > div { border-color: currentColor; }
  .progress { background: Highlight; }
  :where(a, button):focus-visible { outline: 2px solid Highlight; }
}

/* Users who ask for more contrast get stronger separators, not a different design. */
@media (prefers-contrast: more) {
  .ledger__row, .build__item, .fit__item, .step, .map__item,
  .security__list article, .site-foot { border-color: var(--intag-color-border-strong); }
  .lead, .build__item p, .fit__item p, .step p, .map__item p,
  .security__list p, .ledger__cell--a p { color: var(--intag-color-text-primary); }
}

/* A buyer forwarding this to a colleague often prints it. */
@media print {
  .progress, .theme-toggle, .site-head__nav, .masthead::before, .masthead::after { display: none; }
  .masthead { background-image: none; }
  .pinwrap { height: auto; }
  .pin { position: static; height: auto; min-height: 0; }
  .pin__art { display: none; }
  .pin__copy { background: none; text-align: start; padding: 0; }
  section { padding-block: var(--intag-space-lg); break-inside: avoid; }
  .btn { border: 1px solid currentColor; }
  a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* Neither approved typeface carries U+2229, so the brand's own symbol was falling
   back to a system font. The delivered Symbol_XS cut is the sanctioned artwork for
   this size (below 24px, crossbar omitted by design), so it is drawn, not typeset. */
.cap-glyph {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  vertical-align: -0.02em;
  margin-inline: 0.04em;
}
.cap-glyph svg { width: 100%; height: 100%; display: block; fill: currentColor; }

/* ── Cross-column row alignment ──────────────────────────────────────────
   A heading that wraps to two lines pushed its paragraph below the others in
   the same row. Subgrid ties the rows together so headings share a band and
   body copy starts on one line across all three columns. */
@media (min-width: 820px) {
  .build__grid, .fit__list { grid-template-rows: auto auto; }
  .build__item, .fit__item {
    display: grid; grid-template-rows: subgrid; grid-row: span 2; gap: var(--intag-space-xs);
  }
  .build__item p, .fit__item p { margin-top: 0; }

  .steps, .map__list { grid-template-rows: auto auto auto; }
  .step, .map__item {
    display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: var(--intag-space-xs);
  }
  .map__glyph, .step__ord { margin-bottom: 0; align-self: end; }
  .step__icon, .map__icon { margin-bottom: 0; }
  .step p, .map__item p { margin-top: 0; }
}

/* ── Motion that belongs to its own section ──────────────────────────────
   Not one reveal repeated ten times. Each of these says something the section
   is already saying, and each animates a decorative element — never text. */

/* Process: the sequence draws itself, left to right, across the three steps.
   It lives inside the grid so it shares the grid's own left and right edges. */
.steps { position: relative; }
@media (min-width: 820px) {
  .steps { padding-top: var(--intag-space-lg); }
  .steps::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background: var(--intag-color-border-strong);
    transform: scaleX(0);
    transform-origin: 0 50%;
  }
}

/* "No API? No problem." — the path that did not exist, being engineered. */
.fit__item--accent { position: relative; }
.fit__item--accent::before {
  content: "";
  position: absolute; inset-inline: 0; top: -2px;
  height: 2px;
  background: var(--intag-color-border-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* The founder's path: a spine drawn down the five stages. */
.path { position: relative; }
.path::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--intag-color-border-accent);
  transform: scaleY(0);
  transform-origin: 50% 0;
}

@supports (animation-timeline: view()) {
  .steps::before { animation: draw-x linear both; animation-timeline: view(); animation-range: entry 20% cover 52%; }
  .fit__item--accent::before { animation: draw-x linear both; animation-timeline: view(); animation-range: entry 26% cover 56%; }
  .path::before { animation: draw linear both; animation-timeline: view(); animation-range: entry 20% cover 60%; }
}
@keyframes draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Only where the two columns actually exist do they converge on the seam —
   the page's own idea, performed. "After" still arrives a beat behind "today". */
@supports (animation-timeline: view()) {
  @media (min-width: 900px) {
    .ledger__cell--a { animation-name: converge-l; }
    .ledger__cell--b { animation-name: converge-r; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .steps::before, .fit__item--accent::before { transform: scaleX(1) !important; }
  .path::before { transform: scaleY(1) !important; }
}

/* ── Section shape follows section meaning ───────────────────────────────
   Five sections had shared one three-column grid, which made the middle of the
   page read as a single repeated block. Each of these now takes the shape its
   own content argues for. */

/* THE NAME IS THE MAP — the letters are the company's thesis, so they are set at
   display scale rather than as 11px labels beside the words they explain. */
.map__glyph {
  font-family: var(--intag-font-en-display);
  font-size: clamp(var(--intag-fs-en-h1), 4.4vw, var(--intag-fs-en-display-lg));
  line-height: var(--intag-lh-en-display-lg);
  font-weight: 200;
  letter-spacing: -0.02em;
  color: var(--intag-color-text-primary);
  margin-bottom: var(--intag-space-xs);
}
.map__glyph--wide { font-size: clamp(var(--intag-fs-en-h3), 2.6vw, var(--intag-fs-en-h1)); }
.map__glyph--wide span { color: var(--intag-color-text-muted); margin-inline: 0.06em; }
.map__item h3 { color: var(--intag-color-text-accent); }
.map__item:not(:first-child) h3 { color: var(--intag-color-text-primary); }
.map__icon { display: none; }

/* HOW WE WORK — a sequence, so the ordinal leads and the connector runs behind it. */
.step__ord {
  font-family: var(--intag-font-en-display);
  font-size: clamp(var(--intag-fs-en-h2), 3.4vw, var(--intag-fs-en-display));
  line-height: 1;
  font-weight: 200;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--intag-color-border-strong);
  margin-bottom: var(--intag-space-sm);
}
.step { border-top: 0; padding-top: 0; }
.step__icon { display: none; }

/* DATA SECURITY — trust reads as restraint, not as another grid. One column,
   a narrow measure, and the term set against its explanation. */
.security__list { display: grid; gap: 0; margin-top: var(--intag-space-2xl); max-width: 82ch; }
.security__list > div {
  display: grid;
  gap: var(--intag-space-2xs);
  padding-block: var(--intag-space-lg);
  border-top: 1px solid var(--intag-color-border-subtle);
}
.security__list > div:last-child { border-bottom: 1px solid var(--intag-color-border-subtle); }
.security__list dt {
  font-family: var(--intag-font-en-display);
  font-size: var(--intag-fs-en-h4);
  line-height: var(--intag-lh-en-h4);
  font-weight: 400;
  color: var(--intag-color-text-primary);
}
.security__list dd {
  margin: 0;
  color: var(--intag-color-text-secondary);
  font-size: var(--intag-fs-en-body-lg);
  line-height: var(--intag-lh-en-body-lg);
  max-width: 62ch;
}
@media (min-width: 900px) {
  .security__list > div { grid-template-columns: 22ch 1fr; gap: var(--intag-space-2xl); align-items: baseline; }
}

/* ── Light mode is the document mode, not dark mode with things removed ──
   The delivered key visual is a dark artwork, so light cannot borrow it. It gets
   the identity's own light devices instead: the light lattice, a sand field, and
   hairline rules doing the work that tonal steps do in dark. */

[data-theme="light"] .masthead__art { display: block; }
[data-theme="light"] .masthead__pointer::before {
  background-image:
    linear-gradient(to bottom, transparent 62%, var(--intag-color-surface-page) 100%),
    linear-gradient(115deg,
      color-mix(in srgb, var(--intag-apricot-200) 52%, transparent) 0%,
      color-mix(in srgb, var(--intag-sand-50) 70%, transparent) 42%,
      transparent 78%),
    url('../patterns/INTAG_Pattern_Lattice_Light_Overlay.svg');
  background-size: cover, cover, 96px 96px;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, repeat;
}
@media (max-width: 700px) {
  [data-theme="light"] .masthead__pointer::before {
    background-size: cover, cover, 96px 96px;
    background-position: center, center, center;
  }
}

/* In dark, sections separate by tone. Sand-100 against sand-200 is nearly the same
   value, so in light they separate by rule instead — which is what a document does. */
[data-theme="light"] .build,
[data-theme="light"] .process,
[data-theme="light"] .security,
[data-theme="light"] .book { background: var(--intag-color-surface-raised); }
[data-theme="light"] main > section + section,
[data-theme="light"] .site-foot { border-top: 1px solid var(--intag-color-border-subtle); }

/* The set piece has to carry in light too: warmer, stronger tones so the two sets
   and their overlap stay legible against paper. */
[data-theme="light"] .pin__cap { fill: var(--intag-sand-200); }
[data-theme="light"] .pin__cup { fill: var(--intag-sand-300); }
[data-theme="light"] .pin__x   { fill: var(--intag-apricot-400); }
[data-theme="light"] .pinwrap  { background: var(--intag-color-surface-raised); }
[data-theme="light"] .pin__copy { background: var(--intag-color-surface-raised); }
[data-theme="light"] .pin__field {
  opacity: .5;
  background-image:
    radial-gradient(58% 46% at 26% 32%, var(--intag-apricot-200) 0%, transparent 62%),
    radial-gradient(52% 44% at 74% 70%, var(--intag-sand-200) 0%, transparent 60%);
}
[data-theme="light"] .pin__field::before {
  background-image: url('../patterns/INTAG_Pattern_Lattice_Light_Overlay.svg');
  opacity: .55;
}

/* A short or narrow viewport must be able to scroll past all of the set-piece copy. */
@media (max-width: 759px), (max-height: 700px) {
  .pinwrap { height: auto; animation: none; --scrub: 1; }
  .pin { position: relative; min-height: 0; height: auto; padding-block: var(--intag-space-2xl); }
}
@media (max-width: 380px) {
  .site-head { gap: var(--intag-space-xs); }
  .site-head__end { gap: var(--intag-space-2xs); }
  .hero__actions, .book__actions { width: 100%; }
  .hero__actions .btn, .book__actions .btn { width: 100%; text-align: center; padding-inline: var(--intag-space-sm); }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
  .masthead__pointer::before { will-change: auto; }
}
/* Pausing off-screen decorative loops avoids continuous work below the fold. */
.motion-paused, .motion-paused *, .motion-paused::before,
.motion-paused *::before { animation-play-state: paused !important; }
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .masthead__art, .pin__field, .pin__art, .site-head__end { display: none !important; }
  .site-head { position: relative; }
  .hero { padding-block: var(--intag-space-lg); }
  .pinwrap { height: auto !important; --scrub: 1; }
  .pin { position: static !important; height: auto !important; min-height: 0; padding: 0; }
  .pin__copy > * { transform: none; }
  body, section, .pin__copy { background: white !important; color: black !important; }
  h1, h2, h3, p, li, dt, dd, a { color: black !important; }
  .mark-dark { display: none !important; }
  .mark-light { display: block !important; }
  .btn { background: transparent !important; }
  a[href^="mailto:"]::after { content: none; }
}