/* INTAG — a living field, a converging ledger, and an expansive desktop rhythm.
   Responsive foundations stay in app.css; the full-screen mark is in intersection.css. */
:root { --field-read: var(--intag-color-surface-sunken); }
[data-theme="light"] { --field-read: var(--intag-color-surface-page); }

/* The actual delivered artwork breathes beneath a stationary reading scrim. */
.masthead__pointer { inset: -6%; transition-duration: calc(var(--intag-motion-expressive-ms) * 1.5); transform: translate3d(calc(var(--hx) * -27px), calc(var(--hy) * -18px), 0); }
.masthead__pointer::before { background-image: image-set(url('../img/kv-landscape.avif') type('image/avif'), url('../img/kv-landscape.webp') type('image/webp')); background-position: center right; }
.masthead::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--field-read) 95%, transparent) 0%, color-mix(in srgb, var(--field-read) 88%, transparent) 62%, color-mix(in srgb, var(--field-read) 65%, transparent) 78%, transparent 100%), linear-gradient(0deg, var(--field-read), transparent 22%);
}
.hero { z-index: 1; }
.hero__explore { display: flex; align-items: center; gap: var(--intag-space-sm); width: fit-content; min-height: var(--tap); margin-top: var(--intag-space-xl); color: var(--intag-color-text-secondary); font-size: var(--intag-fs-en-body); text-decoration: none; }
.hero__explore svg { transition: transform var(--intag-motion-standard-ms) var(--intag-motion-ease-standard); }
.hero__explore:hover { color: var(--intag-color-text-primary); }
.hero__explore:hover svg { transform: translateY(4px); }
.btn__arrow { flex: 0 0 20px; transition: transform var(--intag-motion-standard-ms) var(--intag-motion-ease-standard); }
.btn { transition: background var(--intag-motion-fast-ms), color var(--intag-motion-fast-ms), transform var(--intag-motion-standard-ms) var(--intag-motion-ease-standard); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.site-head__nav a { position: relative; }
.site-head__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform var(--intag-motion-standard-ms) var(--intag-motion-ease-standard); }
.site-head__nav a:hover { text-decoration: none; }
.site-head__nav a:hover::after, .site-head__nav a:focus-visible::after { transform: scaleX(1); }

@keyframes field-breathe { from { transform: scale(1.04) translate3d(-2%, 1%, 0) rotate(-.5deg); } to { transform: scale(1.14) translate3d(2%, -1%, 0) rotate(.5deg); } }
@keyframes field-depth { from { transform: translateY(0); } to { transform: translateY(14%); } }
@keyframes headline-arrive { from { transform: translateY(18px); letter-spacing: -.035em; } to { transform: none; letter-spacing: -.025em; } }
@keyframes navigation-ground { from { background-color: transparent; border-color: transparent; } to { background-color: var(--intag-color-surface-sunken); border-color: var(--intag-color-border-subtle); } }

/* The desktop gets a full opening scene, with the light free to move on its right. */
@media (min-width: 1100px) {
  .hero { min-height: max(840px, 100svh); display: grid; align-items: center; padding-top: calc(var(--head-h) + var(--intag-space-2xl)); padding-bottom: var(--intag-space-2xl); }
  .hero__grid { width: 100%; }
  .hero__title { width: 66%; max-width: 19ch; font-size: clamp(var(--intag-fs-en-display), 5.1vw, calc(var(--intag-fs-en-display-lg) + var(--intag-space-sm))); line-height: 1.06; }
  .hero__title span + span { max-width: 17ch; margin-top: var(--intag-space-sm); font-weight: 200; }
  .hero__details { display: flex; flex-direction: column; align-items: flex-start; width: 57%; max-width: 68ch; margin-top: var(--intag-space-xl); gap: var(--intag-space-lg); }
  .hero__lead { font-size: var(--intag-fs-en-body-lg); }
  .hero__support { font-size: var(--intag-fs-en-body); line-height: 1.65; max-width: 65ch; }
  .hero__conversion { justify-self: start; }
  .hero__actions { flex-direction: row; align-items: center; gap: var(--intag-space-lg); }
  .hero__fine { text-align: start; margin-top: var(--intag-space-sm); }
  .hero__explore { margin-top: var(--intag-space-lg); }
  .site-head__mark img { width: 180px; }
  .site-head__inner { gap: var(--intag-space-md); }
  .site-head__nav { gap: var(--intag-space-md); }
  .h-display { font-size: clamp(var(--intag-fs-en-display), 4.4vw, var(--intag-fs-en-display-lg)); line-height: 1.1; }
  .build, .fit, .process, .map, .security, .founder, .book { padding-block: calc(var(--section-space) + var(--intag-space-lg)); }

  /* The comparison converges on one seam. Position and motion use different layers. */
  .ledger { padding-top: var(--intag-space-3xl); }
  .ledger__title { font-size: var(--intag-fs-en-h2); margin-bottom: var(--intag-space-2xl); }
  .ledger__rows { position: relative; }
  .ledger__rows::before, .ledger__rows::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--intag-color-border-subtle); transform-origin: top center; }
  .ledger__rows::after { background: var(--intag-color-border-accent); }
  .ledger__cell--b { border: 0; padding-left: 0; }
  .ledger__col--b { padding-left: 0; }
  .ledger__row { padding-block: var(--intag-space-xl); }
  .ledger__cell--a { padding-right: var(--intag-space-lg); }
  .ledger__cell--b { padding-left: var(--intag-space-lg); }
  .ledger__head { position: relative; }
  .ledger__head::after { content: ""; position: absolute; width: var(--intag-space-xl); height: 4px; background: var(--intag-color-border-accent); bottom: -2px; left: calc(50% - var(--intag-space-xl) / 2); }

  /* The core capability earns width; each discipline gets an open, interactive panel. */
  .build .wrap { display: block; }
  .build .section-intro { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: var(--column-gap); }
  .build .lead { margin: 0; }
  .build__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--column-gap); margin-top: var(--intag-space-3xl); }
  .build__item { position: relative; padding-top: var(--intag-space-xl); padding-bottom: 0; }
  .build__item::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--intag-color-border-accent); transform-origin: left center; transform: scaleX(0); transition: transform var(--intag-motion-expressive-ms) var(--intag-motion-ease-standard); }
  .build__item:first-child { border-color: var(--intag-color-border-subtle); }
  .build__item h3 { max-width: 18ch; transition: color var(--intag-motion-standard-ms), transform var(--intag-motion-standard-ms) var(--intag-motion-ease-standard); }
  .build__item:hover::before { transform: scaleX(1); }
  .build__item:hover h3 { color: var(--intag-color-text-accent); transform: translateX(5px); }
  @supports (grid-template-rows: subgrid) {
    .build__grid { grid-template-rows: auto auto; }
    .build__item { display: grid; grid-template-rows: subgrid; grid-row: span 2; gap: var(--intag-space-md); }
    .build__item p { margin: 0; }
  }

  /* Integration is a progression of arguments, leading to the no-API answer. */
  .fit .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--intag-space-xl) var(--column-gap); align-items: start; }
  .fit .section-intro { display: block; grid-column: 1; }
  .fit .lead { margin-top: var(--intag-space-lg); }
  .fit__list { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: 1fr; grid-template-rows: none; margin: 0; gap: var(--intag-space-xl); }
  .fit__item { display: block; grid-row: auto; padding-top: var(--intag-space-lg); }
  .fit__item p { margin-top: var(--intag-space-sm); }
  .fit__item--accent h3 { font-size: var(--intag-fs-en-h2); font-weight: 300; }
  .fit__cta { grid-column: 1; margin: 0; }

  .process .section-intro { display: block; }
  .process .h-display { max-width: 24ch; }
  .process .lead { margin-top: var(--intag-space-lg); max-width: 65ch; }
  .steps { position: relative; margin-top: var(--intag-space-3xl); }
  .steps::before { content: ""; position: absolute; left: 0; right: 0; height: 1px; top: 0; background: var(--intag-color-border-accent); transform-origin: left center; }
  .step { padding-top: var(--intag-space-xl); border-top-color: var(--intag-color-border-subtle); }
  .step__ord { font-size: var(--intag-fs-en-display-lg); margin-bottom: var(--intag-space-xl); color: var(--intag-color-text-secondary); }

  /* The name opens across the full grid; the letters have their own scale. */
  .map .wrap { display: block; }
  .map .h-display { max-width: 23ch; }
  .map__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--column-gap); margin-top: var(--intag-space-3xl); }
  .map__item { display: block; padding-top: var(--intag-space-xl); }
  .map__glyph { font-size: calc(var(--intag-fs-en-display-lg) + var(--intag-space-lg)); line-height: 1; color: var(--intag-color-text-primary); margin-bottom: var(--intag-space-xl); }
  .map__glyph--wide { font-size: var(--intag-fs-en-display); min-height: calc(var(--intag-fs-en-display-lg) + var(--intag-space-lg)); padding-top: 0; display: flex; align-items: flex-end; }
  .map__item h3 { transition: color var(--intag-motion-standard-ms); }
  .map__item:hover h3 { color: var(--intag-color-text-accent); }
  .portrait { position: sticky; top: calc(var(--head-h) + var(--intag-space-xl)); }
  .founder .h-display { font-size: var(--intag-fs-en-display); }
  .book .h-display { font-size: var(--intag-fs-en-display-lg); max-width: 23ch; }
}

/* Scroll expresses the section's relationship; the body never vanishes. */
@keyframes seam-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes converge-before { from { translate: -28px 10px; } to { translate: 0 0; } }
@keyframes converge-after { from { translate: 28px 10px; } to { translate: 0 0; } }
@keyframes process-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes letter-settle { from { translate: 0 32px; } to { translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  .js .masthead__pointer::before { animation: field-breathe calc(var(--intag-motion-expressive-ms) * 42) ease-in-out infinite alternate; }
  .hero__title { animation: headline-arrive calc(var(--intag-motion-expressive-ms) * 1.4) var(--intag-motion-ease-entrance) both; }
  @supports (animation-timeline: scroll()) {
    @media (min-width: 1100px) {
      .masthead__art { animation: field-depth linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
      .site-head { animation: navigation-ground linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
    }
  }
  @supports (animation-timeline: view()) {
    @media (min-width: 1100px) and (pointer: fine) {
      .ledger__rows::after { animation: seam-draw linear both; animation-timeline: view(); animation-range: entry 10% exit 0%; }
      .ledger__cell--a { animation: converge-before linear both; animation-timeline: view(); animation-range: entry 0% cover 32%; }
      .ledger__cell--b { animation: converge-after linear both; animation-timeline: view(); animation-range: entry 0% cover 36%; }
      .steps::before { animation: process-line linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
      .map__glyph { animation: letter-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 34%; }
    }
  }
}
[data-theme="light"] .masthead__pointer::before { background-image: url('../patterns/INTAG_Pattern_Lattice_Light_Overlay.svg'), linear-gradient(120deg, var(--intag-color-surface-page), var(--intag-color-action-secondary-bg)); background-size: 96px 96px, cover; }
[data-theme="light"] .site-head { animation-name: none; background: var(--intag-color-surface-page); }
@media (max-width: 1099px) {
  .hero__explore { display: none; }
  .masthead::after { background: linear-gradient(90deg, color-mix(in srgb, var(--field-read) 95%, transparent), color-mix(in srgb, var(--field-read) 87%, transparent)); }
  .btn__arrow { width: 16px; flex-basis: 16px; }
  .btn { gap: var(--intag-space-xs); }
  .btn--sm { gap: 0; }
  .site-head__nav a::after { content: none; }
}
@media (max-width: 699px) {
  .masthead__pointer::before { background-image: image-set(url('../img/kv-portrait.avif') type('image/avif'), url('../img/kv-portrait.webp') type('image/webp')); }
  .hero__actions .btn, .fit__cta .btn, .book__actions .btn { padding-inline: var(--intag-space-sm); }
}
@media (max-width: 359px) { .btn__arrow { display: none; } }

/* A visitor can pause the experience; preference and OS settings stay authoritative. */
.motion-toggle { display: none; min-height: var(--tap); align-items: center; gap: var(--intag-space-xs); background: transparent; border: 0; padding: 0; color: var(--intag-color-text-muted); font-size: var(--intag-fs-en-body); cursor: pointer; }
.js .motion-toggle { display: inline-flex; }
.motion-toggle:hover { color: var(--intag-color-text-primary); }
.motion-icon--play, .motion-stopped .motion-icon--pause { display: none; }
.motion-stopped .motion-icon--play { display: block; }
.motion-paused *, .motion-paused::before, .motion-paused::after, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
.motion-stopped *, .motion-stopped *::before, .motion-stopped *::after { animation: none !important; }
.motion-stopped .masthead__pointer { transform: none; }
.motion-stopped .site-head { background: var(--intag-color-surface-sunken); border-color: var(--intag-color-border-subtle); }
[data-theme="light"].motion-stopped .site-head { background: var(--intag-color-surface-page); }
@media (prefers-reduced-motion: reduce) {
  .masthead__pointer, .btn:hover .btn__arrow, .hero__explore:hover svg, .build__item:hover h3 { transform: none; }
  .ledger__cell--a, .ledger__cell--b, .map__glyph { translate: none; }
}
@media print {
  .motion-toggle, .hero__explore { display: none !important; }
  .hero { display: block; min-height: 0; }
  .hero__title, .hero__details { width: 100%; }
  .masthead::after { display: none; }
  .portrait { position: static; }
}