/* Option 3 · Lupa. Two layers: BLUEPRINT (line drawings) and REALITY (colour photos), joined by a lens. */
@property --lr  { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --mx { syntax: '<length-percentage>'; inherits: false; initial-value: 50%; }
@property --my { syntax: '<length-percentage>'; inherits: false; initial-value: 50%; }
@property --mag { syntax: '<number>'; inherits: true; initial-value: 1; }

:root {
  --hdr: var(--space-6);
  --lens-r: calc(var(--space-6) * 1.25);
  --ink-soft: color-mix(in srgb, var(--color-accent-base) 38%, transparent);
  --ink-faint: color-mix(in srgb, var(--color-accent-base) 16%, transparent);
  --paper-glass: color-mix(in srgb, var(--color-surface-light) 86%, transparent);
  --ease: var(--motion-easing-standard);
  --pad-x: max(var(--space-5), calc((100vw - 1280px) / 2));
}
@media (max-width: 640px) { :root { --pad-x: var(--space-4); } }

body { background: var(--color-surface-light); }
section { position: relative; }
.on-dark { background: var(--color-surface-dark); color: var(--color-text-on-dark); }
.lead { font-size: var(--font-size-lead); font-weight: var(--font-weight-light); line-height: 1.4; max-width: 34rem; }
.hint { color: var(--color-text-muted-on-light); }
.on-dark .hint { color: var(--color-text-on-dark); opacity: .7; }
.icon svg { stroke-width: 1; }
html:not(.js) [data-reveal] { opacity: 1; transform: none; }

/* ---------- section scaffolding ---------- */
.sec-head { display: grid; gap: var(--space-3); align-content: start; }
.marker { display: inline-flex; align-items: center; gap: var(--space-3); }
.ring {
  display: grid; place-items: center; flex: none;
  width: calc(var(--space-5) + var(--space-1)); height: calc(var(--space-5) + var(--space-1));
  border: var(--border-hairline) solid color-mix(in srgb, currentColor 40%, transparent); border-radius: var(--radius-pill);
}
.head-row { display: flex; justify-content: space-between; align-items: end; gap: var(--space-5); flex-wrap: wrap; }
.head-row .head-side { display: grid; gap: var(--space-3); max-width: 28rem; }
.team, .contact { padding-block: var(--space-8); }
@media (max-width: 760px) { .team, .contact { padding-block: var(--space-7); } }

/* ---------- header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; height: var(--hdr); z-index: 50; }
.hdr-in { height: 100%; display: flex; align-items: center; justify-content: space-between; padding-inline: var(--pad-x); gap: var(--space-4); }
.brand { display: inline-flex; align-items: center; min-height: calc(var(--space-5) + var(--space-1)); }
.brand img { height: var(--space-4); width: auto; }
.nav { display: flex; align-items: center; gap: var(--space-5); }
.nav-list { display: flex; gap: var(--space-4); }
.nav-list a, .foot-nav a, .foot-meta a { white-space: nowrap; text-decoration: none; position: relative; display: inline-flex; align-items: center; min-height: calc(var(--space-5) + var(--space-1)); opacity: .78; transition: opacity var(--motion-duration-fast); }
.nav-list a::after, .foot-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--space-2); height: var(--border-hairline); background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--motion-duration-base) var(--ease); }
.nav-list a:hover, .foot-nav a:hover, .foot-meta a:hover { opacity: 1; }
.nav-list a:hover::after, .foot-nav a:hover::after { transform: scaleX(1); }
.lang button { min-width: calc(var(--space-5) + var(--space-1)); min-height: calc(var(--space-5) + var(--space-1)); color: inherit; }
.cta-hdr { padding-block: var(--space-2); min-height: calc(var(--space-5) + var(--space-1)); }
.cta-hdr::before { display: none; }
.menu-btn { display: none; min-height: calc(var(--space-5) + var(--space-1)); padding: 0 var(--space-4); background: transparent; border: var(--border-hairline) solid var(--color-stroke-on-dark); border-radius: var(--radius-pill); color: inherit; cursor: pointer; }
@media (max-width: 1100px) {
  .js .menu-btn { display: inline-flex; align-items: center; }
  .js .nav { position: fixed; top: var(--hdr); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: var(--space-4); padding: var(--space-4) var(--pad-x) var(--space-5); background: var(--color-surface-dark); border-top: var(--border-hairline) solid var(--color-stroke-on-dark); transform: translateY(-8%); opacity: 0; visibility: hidden; transition: opacity var(--motion-duration-base) var(--ease), transform var(--motion-duration-base) var(--ease), visibility 0s linear var(--motion-duration-base); }
  .js .nav.open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-list a { min-height: calc(var(--space-5) + var(--space-3)); font-size: var(--font-size-lead); letter-spacing: 0; text-transform: none; }
  .cta-hdr { justify-content: center; }
  html:not(.js) .site-header { position: static; height: auto; }
  html:not(.js) .hdr-in { flex-wrap: wrap; padding-block: var(--space-3); }
  html:not(.js) .nav { flex-wrap: wrap; gap: var(--space-3); }
  html:not(.js) .hero { padding-top: 0; }
  html:not(.js) .stage { top: 0; }
}

/* ---------- scroll ruler (right edge) ---------- */
.sruler { --tick: var(--color-accent-base); position: fixed; right: 0; top: var(--hdr); bottom: 0; width: var(--space-3); z-index: 40; pointer-events: none;
  background-image:
    repeating-linear-gradient(180deg, var(--tick) 0 var(--border-hairline), transparent var(--border-hairline) var(--space-2)),
    repeating-linear-gradient(180deg, var(--tick) 0 var(--border-hairline), transparent var(--border-hairline) calc(var(--space-2) * 5));
  background-size: var(--space-2) 100%, var(--space-3) 100%; background-position: right top, right top; background-repeat: no-repeat; opacity: .55; }
.ruler-dark .sruler { --tick: var(--color-text-on-dark); }
.sruler-thumb { position: absolute; right: 0; top: 0; width: var(--space-3); height: calc(var(--border-hairline) * 2); background: var(--tick); will-change: transform; opacity: 1; }
@media (max-width: 640px) { .sruler { width: var(--space-2); } .sruler-thumb { width: var(--space-2); } }

/* ---------- the lens (cursor) ---------- */
.lens { position: fixed; left: 0; top: 0; z-index: 70; width: calc(var(--lens-r) * 2); height: calc(var(--lens-r) * 2); margin: calc(var(--lens-r) * -1) 0 0 calc(var(--lens-r) * -1);
  pointer-events: none; opacity: 0; transition: opacity var(--motion-duration-base) var(--ease); will-change: transform; mix-blend-mode: difference; color: var(--color-surface-light); }
.lens.on { opacity: 1; }
.lens::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-pill); border: var(--border-hairline) solid currentColor; }
.lens::after { content: ""; position: absolute; inset: var(--space-3); border-radius: var(--radius-pill); border: var(--border-hairline) dashed color-mix(in srgb, currentColor 45%, transparent);
  background:
    linear-gradient(currentColor, currentColor) center / var(--border-hairline) var(--space-3) no-repeat,
    linear-gradient(currentColor, currentColor) center / var(--space-3) var(--border-hairline) no-repeat; }
.lens-tip { position: absolute; left: 50%; top: calc(100% + var(--space-2)); transform: translateX(-50%) scale(var(--tipk, 1)); white-space: nowrap; opacity: 0; transition: opacity var(--motion-duration-base); }
.lens.tip .lens-tip { opacity: 1; }
.lens.text { opacity: 0 !important; }
.has-hover .hero a, .has-hover .hero button { cursor: pointer; }
@media (hover: none), (pointer: coarse) { .lens-tip { top: calc(100% + var(--space-1)); } }

/* mask-driven reveal: any [data-lens] holds a .rl (reality) layer */
[data-lens] { --lr: 0px; --mag: 1; transition: --lr var(--motion-duration-base) var(--ease), --mag var(--motion-duration-base) var(--ease); }
[data-lens].lens-on { --lr: var(--lens-r); --mag: 1.1; }
[data-lens].lens-on.lens-hot { --lr: calc(var(--lens-r) * 1.3); }
.no-motion [data-lens] { transition: none; }
.rl { position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  transform-origin: var(--mx, 50%) var(--my, 50%); transform: scale(var(--mag));
  -webkit-mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), var(--color-text-on-light) var(--lr), transparent calc(var(--lr) * 1.02));
          mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), var(--color-text-on-light) var(--lr), transparent calc(var(--lr) * 1.02)); }
.rl img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; padding-top: var(--hdr); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; background: var(--color-surface-light); }
.stage { position: absolute; inset: var(--hdr) 0 0 0; touch-action: pan-y; }
.layer { position: absolute; inset: 0; isolation: isolate; }
.layer.bp { z-index: 1; }
.stage .rl { z-index: 6; background: url(../assets/bahia-color.jpg) center 85% / cover; will-change: transform; }
.table { position: absolute; inset: 0; }
.grid { position: absolute; inset: 0; background-image: radial-gradient(circle at 0 0, color-mix(in srgb, var(--color-accent-base) 22%, transparent) 1px, transparent 1.6px); background-size: var(--space-5) var(--space-5); }
.plate { position: absolute; left: var(--x); top: var(--y); width: var(--w); margin: 0; }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate.sys { aspect-ratio: 520 / 650; }
.rl .plate.sys { overflow: hidden; }
.rl .p-sys img { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms var(--ease); }
.rl .p-sys img.on { opacity: 1; }
.p-sys { --x: 50%; --y: 3%; --w: min(40%, calc((100svh - var(--hdr)) * .84 * .8)); }
.hero-copy { position: relative; z-index: 3; padding-bottom: calc(var(--space-6) + var(--space-4)); pointer-events: none; display: grid; gap: var(--space-4); }
.hero-copy > * { max-width: min(40rem, 40vw); }
.hero-copy .display { font-size: clamp(2.25rem, 5.6vw, var(--font-size-display)); }
.hero-copy a, .hero-copy button { pointer-events: auto; }
.hero-copy .sub { color: var(--color-text-on-light); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cta-row .btn { min-height: calc(var(--space-5) + var(--space-1)); }
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); color: var(--color-text-muted-on-light); font-size: .9375rem; }
.eyebrow .pill { background: var(--color-text-on-light); color: var(--color-surface-light); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); letter-spacing: .2em; }
.sys-chips { position: absolute; z-index: 4; left: 50%; bottom: var(--space-4); }
.has-hover.lens-text .hero { cursor: auto; }
@media (min-width: 861px) and (max-width: 1100px) {
  .hero-copy { padding-bottom: var(--space-3); order: 1; }
  .sys-chips { order: 2; margin-bottom: var(--space-3); }
  .hero-copy > * { max-width: min(46rem, 52vw); }
  .p-sys { --x: 52%; --w: min(38%, calc((100svh - var(--hdr)) * .84 * .8)); }
  .sys-chips { position: static; width: min(100% - var(--pad-x) * 2, 1280px); margin-inline: auto; justify-content: flex-start; }
}
@media (max-width: 860px) {
  .hero { min-height: 0; justify-content: flex-start; }
  .stage { position: relative; inset: auto; aspect-ratio: 1 / .92; order: 0; }
  .p-sys { --x: 15%; --y: 2%; --w: 70%; }
  .sys-chips { position: static; order: 1; padding: var(--space-2) var(--pad-x) 0; }
  .hero-copy { order: 2; padding-block: var(--space-3); gap: var(--space-3); }
  .hero-copy > * { max-width: 40rem; }
  .hero-copy .display { font-size: clamp(2.25rem, 7vw, var(--font-size-display)); }
}
@media (max-width: 560px) { .sys-chips { flex-wrap: nowrap; gap: var(--space-1); } .chip { padding: 0 var(--space-2); letter-spacing: .04em; font-size: .625rem; } .stage { aspect-ratio: 1 / .8; } .p-sys { --x: 14%; --y: 1%; --w: 72%; } }

/* entrance: text and CTAs are always visible; only the drawing assembles. Hidden states exist only until `ready`
   (set by an inline <script> in <head> after 1.8s at the latest, so a failed main.js can never leave copy hidden). */
.js:not(.no-motion):not(.ready) .grid { opacity: 0; }
.js:not(.no-motion):not(.ready) .bp .plate { clip-path: inset(0 100% 0 0); }
.js:not(.no-motion).ready .grid { opacity: 1; transition: opacity 900ms var(--ease) 100ms; }
.js:not(.no-motion).ready .bp .plate { clip-path: inset(-12px); transition: clip-path 800ms var(--ease) 150ms; }
.wd { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; }

/* ---------- method: dial ---------- */
.dial { padding: 0; }
.dial-pin { position: sticky; top: 0; height: 100svh; padding-top: var(--hdr); display: grid; grid-template-rows: 1fr auto; overflow: hidden; }
.dial-top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); padding-block: var(--space-5); }
.axes { display: grid; }
.axis { grid-area: 1 / 1; display: grid; gap: var(--space-3); align-content: center; justify-items: start; opacity: 0; transform: translateY(var(--space-3)); pointer-events: none; }
.axis.on { opacity: 1; transform: none; pointer-events: auto; }
.axis-ring { display: grid; place-items: center; width: var(--space-7); height: var(--space-7); border: var(--border-hairline) solid var(--ink-soft); border-radius: var(--radius-pill); color: var(--color-accent-base); }
.axis-ring .icon { width: var(--space-6); height: var(--space-6); }
.axis-ring svg { stroke-width: .7; }
.axis-name { font-weight: var(--font-weight-light); font-size: clamp(2.5rem, 6vw, var(--font-size-display)); line-height: 1; }
.axis-q { font-size: var(--font-size-lead); font-weight: var(--font-weight-light); max-width: 24rem; }
.dial-bottom { padding-bottom: var(--space-5); display: grid; gap: var(--space-3); }
.ruler { padding-top: var(--space-3); }
.track { position: relative; height: calc(var(--space-7) + var(--space-3)); margin-inline: var(--space-5); border-bottom: var(--border-hairline) solid var(--color-accent-base);
  background-image:
    linear-gradient(90deg, var(--color-accent-base) var(--border-hairline), transparent 0),
    linear-gradient(90deg, var(--color-accent-base) var(--border-hairline), transparent 0),
    linear-gradient(90deg, var(--color-accent-base) var(--border-hairline), transparent 0);
  background-size: var(--space-2) 22%, calc(var(--space-2) * 5) 38%, calc(var(--space-2) * 10) 56%; background-position: left bottom; background-repeat: repeat-x; }
.needle { position: absolute; left: 0; top: 0; bottom: 0; width: 0; z-index: 3; pointer-events: none; will-change: transform; }
.needle i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--border-hairline); }
.needle i::before { content: ""; position: absolute; border-top-color: var(--color-text-on-light); border-bottom: 0; transform: translateY(0); }
.station { position: absolute; top: 0; left: calc(var(--f) * 100%); transform: translateX(-50%); width: calc(var(--space-5) + var(--space-1)); height: calc(var(--space-5) + var(--space-1)); display: grid; place-items: center; padding: 0; background: var(--color-surface-light); border: var(--border-hairline) solid var(--ink-soft); border-radius: var(--radius-pill); color: var(--color-accent-base); cursor: pointer; transition: background var(--motion-duration-base) var(--ease), color var(--motion-duration-base) var(--ease), border-color var(--motion-duration-base) var(--ease); margin-top: var(--space-3); }
.station .icon { width: var(--space-4); height: var(--space-4); }
.station.on { background: var(--color-accent-base); color: var(--color-surface-light); border-color: var(--color-accent-base); }
@media (max-width: 760px) {
  .dial-top { grid-template-columns: 1fr; gap: var(--space-4); align-content: start; padding-block: var(--space-4); }
  .axes { min-height: calc(var(--space-8) + var(--space-5)); }
  .axis-ring { width: calc(var(--space-6) + var(--space-3)); height: calc(var(--space-6) + var(--space-3)); }
  .axis-ring .icon { width: var(--space-5); height: var(--space-5); }
  .track { margin-inline: var(--space-4); }
  .station { width: calc(var(--space-5) + var(--space-1)); }
}
/* static dial: no JS or reduced motion */
:is(html:not(.js), html.no-motion) .dial { height: auto; padding-block: var(--space-8); }
:is(html:not(.js), html.no-motion) .dial-pin { position: static; height: auto; padding-top: 0; display: block; }
:is(html:not(.js), html.no-motion) .dial-top { grid-template-columns: 1fr; gap: var(--space-6); }
:is(html:not(.js), html.no-motion) .axes { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 1023px) { :is(html:not(.js), html.no-motion) .axes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { :is(html:not(.js), html.no-motion) .axes { grid-template-columns: 1fr; } }
:is(html:not(.js), html.no-motion) .axis { grid-area: auto; opacity: 1; transform: none; pointer-events: auto; padding-top: var(--space-4); border-top: var(--border-hairline) solid var(--ink-soft); }
:is(html:not(.js), html.no-motion) .axis-ring { width: calc(var(--space-6) + var(--space-3)); height: calc(var(--space-6) + var(--space-3)); }
:is(html:not(.js), html.no-motion) .axis-ring .icon { width: var(--space-5); height: var(--space-5); }
:is(html:not(.js), html.no-motion) .axis-name { font-size: var(--font-size-title); }
:is(html:not(.js), html.no-motion) .dial-bottom { display: none; }

/* ---------- magic or reality: split ---------- */
.split-sec { padding: 0; }
.js .split-sec { height: 260svh; }
.split-pin { position: sticky; top: 0; height: 100svh; padding-top: var(--hdr); display: flex; flex-direction: column; background: var(--color-surface-light); overflow: hidden; }
.split-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-5); padding-block: var(--space-4); flex-wrap: wrap; }
.split-side { display: grid; gap: var(--space-2); max-width: 26rem; }
.split { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: pan-y; cursor: ew-resize; border-block: var(--border-hairline) solid var(--ink-soft); background: var(--color-surface-light); --sp: 50%; }
.split > img, .s-rl, .s-rl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split > .s-bp { mix-blend-mode: multiply; }
.s-rl { clip-path: inset(0 0 0 var(--sp)); }
.tag { position: absolute; bottom: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--color-surface-light); color: var(--color-text-on-light); border: var(--border-hairline) solid var(--color-accent-base); border-radius: var(--radius-pill); pointer-events: none; z-index: 2; }
.tag-bp { left: var(--pad-x); } .tag-rl { right: calc(var(--pad-x) + var(--space-3)); }
.divider { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--space-6)); margin-left: calc(var(--space-6) / -2); z-index: 3; cursor: ew-resize; touch-action: pan-y; will-change: transform; display: grid; place-items: center; }
.divider::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: var(--border-hairline); background: var(--color-surface-light); box-shadow: 0 0 0 var(--border-hairline) color-mix(in srgb, var(--color-surface-dark) 40%, transparent); }
.knob { position: relative; display: grid; place-items: center; width: calc(var(--space-6)); height: calc(var(--space-6)); border-radius: var(--radius-pill); background: var(--paper-glass); border: var(--border-hairline) solid var(--color-accent-base); color: var(--color-accent-base); transition: transform var(--motion-duration-base) var(--ease); }
.divider:hover .knob, .divider:focus-visible .knob { transform: scale(1.12); }
.divider:focus-visible { outline: none; }
.divider:focus-visible .knob { outline: var(--border-hairline) solid var(--color-text-on-light); outline-offset: var(--space-1); }
@media (max-width: 760px) { .split-head { padding-block: var(--space-3); gap: var(--space-2); } .split-head .headline { font-size: 1.75rem; } .split-side .lead { font-size: var(--font-size-body); } .knob { width: calc(var(--space-5) + var(--space-1)); height: calc(var(--space-5) + var(--space-1)); } }
:is(html:not(.js), html.no-motion) .split-sec { height: auto; }
:is(html:not(.js), html.no-motion) .split-pin { position: static; height: auto; }
:is(html:not(.js), html.no-motion) .split { flex: none; height: 70svh; }
html:not(.js) .divider { display: none; }

/* ---------- services: tape ---------- */
.tape { padding: 0; }
.tape-pin { position: sticky; top: 0; height: 100svh; padding-top: var(--hdr); display: flex; flex-direction: column; overflow: hidden; }
.tape-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-4); padding-block: var(--space-5) var(--space-3); flex-wrap: wrap; }
.tape-view { flex: 1; display: flex; min-height: 0; padding-bottom: var(--space-5); }
.tape-track { position: relative; display: flex; align-items: stretch; gap: var(--space-4); width: max-content; padding: var(--space-4) var(--pad-x) 0; will-change: transform; }
  background-image:
    linear-gradient(90deg, var(--color-stroke-on-dark) var(--border-hairline), transparent 0),
    linear-gradient(90deg, var(--color-text-on-dark) var(--border-hairline), transparent 0);
  background-size: var(--space-2) 40%, calc(var(--space-2) * 10) 85%; background-position: left bottom; background-repeat: repeat-x; }
.card { position: relative; flex: none; width: clamp(16rem, 24vw, 22rem); min-height: clamp(18rem, 48vh, 28rem); padding: var(--space-5); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-5); border: var(--border-hairline) solid var(--color-stroke-on-dark); border-radius: var(--radius-sm); }
.card.ai { width: clamp(24rem, 50vw, 46rem); background: var(--color-surface-light); color: var(--color-text-on-light); border-color: var(--color-surface-light); }
.card-ring { display: grid; place-items: center; width: calc(var(--space-6) + var(--space-3)); height: calc(var(--space-6) + var(--space-3)); border: var(--border-hairline) solid color-mix(in srgb, currentColor 40%, transparent); border-radius: var(--radius-pill); }
.card-ring .icon { width: var(--space-5); height: var(--space-5); }
.card.ai .card-ring { width: var(--space-7); height: var(--space-7); color: var(--color-accent-base); }
.card.ai .card-ring .icon { width: var(--space-6); height: var(--space-6); }
.card.ai .card-ring svg { stroke-width: .75; }
.card-name { font-weight: var(--font-weight-regular); font-size: var(--font-size-lead); line-height: 1.2; }
.card.ai .card-name { font-weight: var(--font-weight-light); font-size: clamp(1.75rem, 3.4vw, var(--font-size-headline)); line-height: 1.08; }
.card-d { margin-top: var(--space-2); opacity: .75; max-width: 28rem; }
.card.ai .card-d { opacity: 1; font-size: var(--font-size-lead); font-weight: var(--font-weight-light); }
.badge { position: absolute; top: var(--space-5); right: var(--space-5); display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border: var(--border-hairline) solid var(--color-accent-base); border-radius: var(--radius-pill); color: var(--color-accent-base); }
.badge::before { content: ""; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill); background: currentColor; }
/* static tape: vertical list on mobile, no JS, reduced motion */
:is(html:not(.js), html.no-motion, html.static) .tape { height: auto !important; padding-block: var(--space-7); }
:is(html:not(.js), html.no-motion, html.static) .tape-pin { position: static; height: auto; padding-top: 0; display: block; }
:is(html:not(.js), html.no-motion, html.static) .tape-view { display: block; padding: 0; }
:is(html:not(.js), html.no-motion, html.static) .tape-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); width: auto; padding: var(--space-5) 0 0; transform: none !important; margin-inline: auto; width: min(100% - var(--pad-x) * 2, 1280px); }
:is(html:not(.js), html.no-motion, html.static) .card { width: auto; min-height: 0; }
:is(html:not(.js), html.no-motion, html.static) .card.ai { grid-column: 1 / -1; width: auto; min-height: clamp(16rem, 32vh, 24rem); }
@media (max-width: 860px) {
  .tape-head { padding-top: 0; }
  .card { padding: var(--space-4); flex-direction: row; align-items: flex-start; gap: var(--space-4); min-height: 0; }
  .card.ai { flex-direction: column; padding-top: var(--space-5); }
  .card .card-ring { width: calc(var(--space-5) + var(--space-1)); height: calc(var(--space-5) + var(--space-1)); flex: none; }
  .card .card-ring .icon { width: var(--space-4); height: var(--space-4); }
  .card.ai .card-ring { width: var(--space-6); height: var(--space-6); }
  .card.ai .card-ring .icon { width: var(--space-5); height: var(--space-5); }
  .card-d { margin-top: var(--space-1); }
  .badge { top: var(--space-4); right: var(--space-4); }
}


/* ---------- team: ID plates ---------- */
.ids { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-6); perspective: 1400px; }
.id-wrap { display: block; }
.id { position: relative; height: 100%; padding: var(--space-4); display: grid; gap: var(--space-3); align-content: start; background: var(--color-surface-light); border: var(--border-hairline) solid var(--ink-soft); border-radius: var(--radius-sm); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 350ms var(--ease); transform-style: preserve-3d; }
.no-hover .id { transform: rotateY(calc((var(--p, .5) - .5) * 14deg)); }
.no-motion .id { transform: none !important; transition: none; }
.id-slot { justify-self: center; width: var(--space-6); height: var(--space-2); border: var(--border-hairline) solid var(--ink-soft); border-radius: var(--radius-pill); }
.id-photo { position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; border: var(--border-hairline) solid var(--ink-soft); overflow: hidden;
  background:
    linear-gradient(to top right, transparent calc(50% - var(--border-hairline)), var(--ink-faint) 50%, transparent calc(50% + var(--border-hairline))),
    linear-gradient(to top left, transparent calc(50% - var(--border-hairline)), var(--ink-faint) 50%, transparent calc(50% + var(--border-hairline))); transform: translateZ(var(--space-3)); }
.initials { font-weight: var(--font-weight-light); font-size: clamp(2.25rem, 5vw, var(--font-size-display)); letter-spacing: .04em; line-height: 1; background: var(--color-surface-light); padding: var(--space-2) var(--space-3); color: var(--color-accent-base); }
.id-name { font-weight: var(--font-weight-regular); font-size: var(--font-size-lead); line-height: 1.2; transform: translateZ(var(--space-2)); }
.id-role { color: var(--color-text-muted-on-light); line-height: 1.4; font-size: var(--font-size-label); text-wrap: balance; }
@media (max-width: 980px) { .ids { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ids { gap: var(--space-3); } .id { padding: var(--space-3); } .id-name { font-size: var(--font-size-body); } }

/* ---------- contact: drafting form ---------- */
.contact { background: var(--color-surface-light); border-top: var(--border-hairline) solid var(--color-grey-line); }
.contact-grid { display: grid; grid-template-columns: 4fr 7fr; gap: var(--space-7); align-items: start; }
.draft { position: relative; }
.draft-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-5); }
.draft .field { position: relative; }
.draft .field input:not([type=checkbox]), .draft .field textarea { border: 0; border-bottom: var(--border-hairline) solid var(--ink-soft); border-radius: var(--radius-none); padding: var(--space-3) 0; min-height: calc(var(--space-5) + var(--space-1)); width: 100%; resize: vertical; background: transparent; }
.draft .field input::placeholder, .draft .field textarea::placeholder { color: var(--color-text-muted-on-light); opacity: .8; }
.draft .field input:focus, .draft .field textarea:focus { outline: none; }
.draft .field:focus-within .label { color: var(--color-text-on-light); }
.line { position: absolute; left: 0; right: 0; bottom: 0; height: var(--border-hairline); background: var(--color-accent-base); transform: scaleX(0); transform-origin: left; transition: transform var(--motion-duration-slow) var(--ease); pointer-events: none; }
.field:focus-within .line, .field:has([aria-invalid=true]) .line { transform: scaleX(1); }
.field:has([aria-invalid=true]) .line { background: var(--color-text-on-light); height: calc(var(--border-hairline) * 2); }
.field .err { margin-top: var(--space-1); }
.f-project, .f-consent, .submit-row { grid-column: 1 / -1; }
.check { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: calc(var(--space-5) + var(--space-1)); cursor: pointer; }
.check input { position: absolute; opacity: 0; width: calc(var(--space-5) + var(--space-1)); height: calc(var(--space-5) + var(--space-1)); margin: 0; left: calc(var(--space-2) * -1); cursor: pointer; }
.box { flex: none; position: relative; width: var(--space-4); height: var(--space-4); border: var(--border-hairline) solid var(--color-accent-base); transition: background var(--motion-duration-fast); }
.box::after { content: ""; position: absolute; left: 7px; top: 2px; width: 6px; height: 12px; border: solid var(--color-surface-light); border-width: 0 var(--border-hairline) var(--border-hairline) 0; transform: rotate(45deg) scale(0); transition: transform var(--motion-duration-fast); }
.check input:checked + .box { background: var(--color-accent-base); }
.check input:checked + .box::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .box { outline: var(--border-hairline) solid var(--color-accent-base); outline-offset: var(--space-1); }
.check input[aria-invalid=true] + .box { border-width: calc(var(--border-hairline) * 2); border-color: var(--color-text-on-light); }
.submit-row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-3); }
.submit-row .btn { min-height: calc(var(--space-5) + var(--space-3)); padding-inline: var(--space-5); cursor: pointer; font-size: var(--font-size-lead); }
.privacy { font-size: var(--font-size-label); color: var(--color-text-muted-on-light); max-width: 24rem; }
.status { margin-top: var(--space-4); font-size: var(--font-size-label); }
.status:empty { display: none; }
.status:focus { outline: none; }
.status[data-state=error] { color: var(--color-text-on-light); border-left: calc(var(--border-hairline) * 2) solid var(--color-text-on-light); padding-left: var(--space-3); }
.draft.is-sent .draft-fields { display: none; }
.draft.is-sent .status { margin: 0; font-size: clamp(1.75rem, 3.4vw, var(--font-size-headline)); font-weight: var(--font-weight-light); line-height: 1.1; padding-top: calc(var(--space-7) + var(--space-3)); position: relative; animation: stamp var(--motion-duration-slow) var(--ease) both; }
.draft.is-sent .status::before { content: ""; position: absolute; left: 0; top: 0; width: var(--space-7); height: var(--space-7); border: var(--border-hairline) solid var(--color-accent-base); border-radius: var(--radius-pill); }
.draft.is-sent .status::after { content: ""; position: absolute; left: calc(var(--space-6) - var(--space-3) + var(--space-1)); top: calc(var(--space-5) - var(--space-1)); width: var(--space-3); height: var(--space-5); border: solid var(--color-accent-base); border-width: 0 var(--border-hairline) var(--border-hairline) 0; transform: rotate(45deg); }
@keyframes stamp { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
.no-motion .draft.is-sent .status { animation: none; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: var(--space-5); } }
@media (max-width: 560px) { .draft-fields { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-footer { position: relative; overflow: hidden; padding-block: var(--space-7) var(--space-6); isolation: isolate; }
.foot-in { display: grid; gap: var(--space-5); }
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.foot-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); opacity: .8; font-size: var(--font-size-label); }
.foot-meta span { display: inline-flex; align-items: center; min-height: calc(var(--space-5) + var(--space-1)); }

/* reduced motion: everything still, content visible */
.no-motion *, .no-motion *::before, .no-motion *::after { animation-duration: 0s !important; transition-duration: 0s !important; scroll-behavior: auto !important; }

/* ================= v2: technology reading ================= */
@property --ex { syntax: '<number>'; inherits: true; initial-value: 0; }

/* the exploded system */
.sysvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sysvg .s { fill: var(--color-surface-light); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sysvg .l { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sysvg .guide { stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.sysvg .pulse { fill: none; stroke: var(--color-accent-base); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 95; stroke-dashoffset: 5; opacity: 0; }
.sysvg .glow { fill: var(--color-accent-base); opacity: 0; }
.sysvg .L { transition: opacity var(--motion-duration-base) var(--ease); cursor: default; }
.sysvg .gd, .sysvg .dim { transform-box: fill-box; transform-origin: top; transform: scaleY(var(--ex)); }
.sysvg .dim { transform-origin: center; }
.sysvg .lab { opacity: 1; pointer-events: none; transform: translateX(14px); }
.sysvg text { font-family: var(--font-family-label); font-size: var(--lab, 13px); letter-spacing: .14em; text-transform: uppercase; fill: color-mix(in srgb, var(--color-text-on-light) 82%, var(--color-surface-light)); paint-order: stroke; stroke: var(--color-surface-light); stroke-width: 5px; stroke-linejoin: round; }
.sysvg .L.on text { fill: var(--color-text-on-light); }
.sysvg[data-active] .L:not(.on) { opacity: .5; }
.sysvg .L.on .lab { opacity: 1; }
.sys.live .pulse { opacity: 1; animation: pulse 3.4s linear var(--d) infinite; }
@keyframes pulse { to { stroke-dashoffset: -100; } }
.sys.live .glow { animation: wave 5s ease-in-out var(--d) infinite; }
@keyframes wave { 0%, 100% { opacity: 0; } 30% { opacity: .75; } 55% { opacity: 0; } }
.sys-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); pointer-events: none; }
.chip { pointer-events: auto; min-height: calc(var(--space-5) + var(--space-1)); padding: 0 var(--space-3); letter-spacing: .12em; background: var(--paper-glass); border: var(--border-hairline) solid var(--ink-soft); border-radius: var(--radius-pill); color: var(--color-accent-base); cursor: pointer; transition: background var(--motion-duration-base) var(--ease), color var(--motion-duration-base) var(--ease); }
.no-motion .sysvg .lab { transition: none; }

/* dial: observability trace */
.axis-head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; width: 100%; }
.trace { flex: 1 1 8rem; max-width: 16rem; height: auto; overflow: visible; }
.trace .base, .trace .tk { stroke: var(--ink-soft); stroke-width: 1; }
.trace .wave { fill: none; stroke: var(--color-accent-base); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.trace .head { fill: var(--color-accent-base); opacity: 0; }
.axis.on .wave { stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s var(--ease) .15s; }
.axis.on .head { opacity: 1; transition: opacity .3s 1.6s; animation: blink 1.6s ease-in-out 1.8s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
:is(html:not(.js), html.no-motion) .trace .wave { stroke-dashoffset: 0; transition: none; }
:is(html:not(.js), html.no-motion) .trace .head { opacity: 1; animation: none; }

/* services: motifs */
.motif { width: 100%; height: clamp(4.5rem, 13vh, 7rem); overflow: visible; align-self: stretch; }
.card.ai .motif { height: clamp(5.5rem, 17vh, 9rem); }
.motif .s { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.motif .side { fill: color-mix(in srgb, currentColor 8%, transparent); }
.motif .l { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .6; }
.motif .faint { opacity: .3; }
.motif .pt, .motif .head { fill: currentColor; }
.motif .rip { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
.card.ai .motif .pt { fill: var(--color-accent-base); }
.motif .pt { opacity: .9; }
.card.live .pt { animation: conv 3.8s ease-in var(--d) infinite backwards; }
@keyframes conv { 0% { transform: translate(var(--dx), var(--dy)); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(0, 0); opacity: 0; } }
.card.live .fl { animation: flt 3.6s ease-in-out var(--d) infinite alternate; }
@keyframes flt { to { transform: translateY(-7px); } }
.card.live .dr { animation: drf 5s ease-in-out var(--d) infinite alternate; }
@keyframes drf { to { transform: translateX(calc(var(--s) * 9px)); } }
.card.live .dsk { animation: dsk 2.6s ease-in-out var(--d) infinite; }
@keyframes dsk { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.card.live .pin { animation: drop 3.2s var(--ease) infinite; }
@keyframes drop { 0% { transform: translateY(-16px); opacity: 0; } 22% { transform: none; opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
.card.live .rip { animation: rip 3.2s ease-out infinite; }
@keyframes rip { 0%, 20% { transform: scale(.2); opacity: 0; } 30% { opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }
.card.live .fr { animation: dsk 3s ease-in-out var(--d) infinite; }
.card.live .gr { animation: gro 5s ease-out var(--d) infinite backwards; }
@keyframes gro { 0% { opacity: 0; transform: translateY(8px); } 20%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.no-motion .card * { animation: none !important; }
@media (max-width: 860px) {
  .card, .card.ai { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ring text" "motif motif"; align-items: start; }
  .card-ring { grid-area: ring; } .card-text { grid-area: text; } .motif { grid-area: motif; height: 4.5rem; margin-top: var(--space-3); }
}
:is(html:not(.js), html.no-motion, html.static) .card, :is(html:not(.js), html.no-motion, html.static) .card.ai { }

@media (max-height: 760px) and (min-width: 861px) { .hero-copy .display { font-size: clamp(2.25rem, 4.4vw, 3.5rem); } .hero-copy { gap: var(--space-3); } }


.skip:focus { min-height: calc(var(--space-5) + var(--space-1)); display: inline-flex; align-items: center; }

/* dial v3 */
.js .dial { height: 280svh; }
.dial-top { align-items: start; align-content: center; }
.axes { align-self: start; padding-top: calc(var(--space-5) + var(--space-3)); }
.axis { transition: opacity 140ms var(--ease), transform 140ms var(--ease); }
.axis.on { transition-delay: 160ms; transition-duration: 380ms; }
.track { background: none; border-bottom: var(--border-hairline) solid var(--ink-soft); }
.spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: var(--space-6); pointer-events: none; overflow: visible; }
.spark path { fill: none; stroke: var(--ink-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.needle i { background: color-mix(in srgb, var(--color-text-on-light) 45%, transparent); }
.needle i::before { top: auto; bottom: calc(var(--space-2) * -1); left: calc(var(--space-2) * -1); width: var(--space-3); height: var(--space-3); border: 0; border-radius: var(--radius-pill); background: var(--color-text-on-light); }
@media (max-width: 760px) { .axes { padding-top: 0; } }
:is(html:not(.js), html.no-motion) .axes { padding-top: 0; }
.tape-view { align-items: flex-start; padding-top: var(--space-5); }
:is(html:not(.js), html.no-motion, html.static) .tape-view { padding: 0; }
.split-lead { font-size: var(--font-size-body); font-weight: var(--font-weight-regular); color: var(--color-text-muted-on-light); padding-block: var(--space-3); }

/* system v3: quiet plates, tags, signature packet */
.sys { --ex: 1; }
.sysvg .tag line { stroke: var(--ink-soft); }
.sysvg .tag text, .sysvg .tg { font-size: 12px; letter-spacing: .08em; fill: var(--color-text-muted-on-light); }
.sysvg .packet { fill: none; stroke: var(--color-accent-base); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 3 97; stroke-dashoffset: 3; }
.sysvg .pkdot { fill: var(--color-accent-base); opacity: 0; }
.sysvg .pk, .sysvg .loop { transform-box: fill-box; transform-origin: center; }
.sysvg .L { transform: translateY(calc(var(--k) * 130px * var(--ex))); }
.sys.run :is(.packet, .pulse, .pkdot) { animation-play-state: paused; }
.sys.run.live :is(.packet, .pulse, .pkdot) { animation-play-state: running; }
.sys.run .packet { animation: pkt 5s linear 2 both; }
.sys.run .pkdot { animation: pkd 5s ease-out var(--d) 2 backwards; }
.sys.run .pulse { opacity: 1; animation: pulse 3.4s linear var(--d) 3 both; }
.sys.run .glow { animation: wave 5s ease-in-out var(--d) infinite; animation-play-state: paused; }
.sys.run.live .glow { animation-play-state: running; }
.sys.live .pulse, .sys.live .glow { animation: none; }
.sys.run.live .pulse { animation: pulse 3.4s linear var(--d) 3 both; }
.sys.run.live .glow { animation: wave 5s ease-in-out var(--d) infinite; }
@keyframes pkt { from { stroke-dashoffset: 3; } to { stroke-dashoffset: -100; } }
@keyframes pkd { 0% { opacity: 1; transform: scale(1); } 12% { opacity: 1; } 30%, 100% { opacity: 0; } }
.m-tr .s { opacity: 1; stroke-width: 1.4; }
.motif .s { opacity: .95; }
@media (max-width: 860px) { .sysvg .lab { display: none; } }

/* ================= v4: decluttered hero, colour, scan-line theme wipe =================
   DECISION (Hernando): colour is allowed in this hero. Each layer of the stack has one brand hue
   (Interfaz blue, Logica yellow, Modelos green, Datos slate with a blue lift). Strokes are grey at rest and blend
   toward the hue as the pointer approaches (--w, set in main.js), or fully on chip focus / tap. */

/* stack colour */
.sysvg { --rest: color-mix(in srgb, var(--color-text-muted-on-light) 85%, var(--color-surface-light)); }
.sysvg .s { stroke: color-mix(in srgb, var(--hue) calc(22% + var(--w, 0) * 78%), var(--rest)); }
.sysvg .l { stroke: color-mix(in srgb, var(--hue) calc(22% + var(--w, 0) * 78%), var(--rest)); opacity: .8; }
.sysvg .side { fill: color-mix(in srgb, var(--hue) calc(8% + var(--w, 0) * 14%), var(--color-surface-light)); }
.sysvg .L .body > .s:nth-child(3) { fill: color-mix(in srgb, var(--hue) calc(10% + var(--w, 0) * 8%), var(--color-surface-light)); }
.sysvg .L.on .body > .s:nth-child(3) { fill: color-mix(in srgb, var(--hue) calc(10% + var(--w, 0) * 8%), var(--color-surface-light)); }
.sysvg .guide { stroke: var(--rest); }
.sysvg .nd { fill: color-mix(in srgb, var(--hue) calc(18% + var(--w, 0) * 70%), var(--color-surface-light)); stroke: color-mix(in srgb, var(--hue) calc(55% + var(--w, 0) * 45%), var(--rest)); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sysvg .syn { fill: none; stroke: var(--hue); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 95; stroke-dashoffset: 5; opacity: 0; }
.sys.run.live .syn { opacity: 1; animation: syn 2.8s linear var(--d) 4 both; }
@keyframes syn { to { stroke-dashoffset: -100; } }
.sysvg .bar { fill: color-mix(in srgb, var(--hue) calc(var(--w, 0) * 35%), var(--color-surface-light)); transform-box: fill-box; transform-origin: center bottom; }
.sys.run.live .bar { animation: eq 1.3s ease-in-out var(--d) infinite alternate; }
@keyframes eq { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
.sysvg .packet, .sysvg .pkdot { stroke: var(--color-accent-base); }
.chip { --hue: var(--color-brand-blue); }
.chip[data-layer="1"] { --hue: color-mix(in srgb, var(--color-brand-yellow) 70%, var(--color-text-on-light)); }
.chip[data-layer="2"] { --hue: var(--color-brand-green); }
.chip[data-layer="3"] { --hue: color-mix(in srgb, var(--color-accent-base) 55%, var(--color-brand-blue)); }
.chip:hover, .chip.is-on { background: color-mix(in srgb, var(--hue) 22%, var(--color-surface-light)); color: var(--color-text-on-light); border-color: var(--hue); }
.chip.is-on { box-shadow: inset 0 calc(var(--border-hairline) * -3) 0 var(--hue); }

/* scan-line theme wipe: one backdrop-filter layer (translateX only) inverts everything behind it.
   Text, buttons and strokes stay ONE real DOM copy. The reality layer (.rl) sits above it so photos keep true colour. */
.wipe { display: none; position: absolute; inset: 0; z-index: 5; pointer-events: none; transform: translate3d(-100%, 0, 0); will-change: transform;
  -webkit-backdrop-filter: invert(1) hue-rotate(180deg) brightness(1.4); backdrop-filter: invert(1) hue-rotate(180deg) brightness(1.4); }
.wipe::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: calc(var(--border-hairline) * 2); background: var(--color-brand-blue); }
@supports ((backdrop-filter: invert(1)) or (-webkit-backdrop-filter: invert(1))) { .js:not(.no-motion) .wipe { display: block; } }
.js:not(.no-motion) .hero { background: var(--color-surface-light); }

/* dial is dark so the page continues dark after the wipe */
.dial { --color-surface-light: var(--color-surface-dark); --color-text-on-light: var(--color-text-on-dark); --color-accent-base: var(--color-text-on-dark);
  --color-text-muted-on-light: color-mix(in srgb, var(--color-text-on-dark) 68%, var(--color-surface-dark)); --color-grey-line: color-mix(in srgb, var(--color-text-on-dark) 14%, var(--color-surface-dark));
  --ink-soft: color-mix(in srgb, var(--color-text-on-dark) 38%, transparent); --paper-glass: color-mix(in srgb, var(--color-surface-dark) 86%, transparent);
  background: var(--color-surface-dark); color: var(--color-text-on-dark); }
.dial .dial-pin { background: var(--color-surface-dark); }
.dial :focus-visible { outline-color: var(--color-text-on-dark); }

/* v5 */
.sysvg .lab line { stroke: var(--color-surface-light); stroke-width: 0; }
.sysvg .lab .l { stroke: color-mix(in srgb, var(--color-text-on-light) 55%, var(--color-surface-light)); }
@media (max-width: 560px) {
  .sys-chips { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding-top: var(--space-3); gap: var(--space-1); scrollbar-width: none; }
  .sys-chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; scroll-snap-align: start; min-height: calc(var(--space-5) + var(--space-1)); padding: 0 var(--space-2); letter-spacing: .04em; font-size: .625rem; }
  .hero-copy { gap: var(--space-2); }
  .cta-row { gap: var(--space-2); flex-wrap: nowrap; }
  .cta-row .btn { padding-inline: var(--space-3); font-size: .875rem; white-space: nowrap; }
}

/* v6: divider stage capped at the native image width (1536) so the photos are never upscaled */
.split { align-self: center; width: 100%; max-width: 1536px; }
.split > .s-bp { mix-blend-mode: normal; }
.split > img, .s-rl img { image-rendering: auto; }

.sysvg .hi { stroke-width: 1.5; opacity: .95; }
.sysvg .conn { stroke-width: 1; }

/* v7: services tape as one system. Every card: same box, padding, hairline border, height and internal order
   (ring / motif / title / description, all left-aligned). The AI card is wider and white. */
.tape-track { gap: var(--space-4); padding: var(--space-4) var(--pad-x); align-items: stretch; }
.tape-view { align-items: flex-start; padding-top: var(--space-3); padding-bottom: 0; }
.card { position: relative; flex: none; width: 20rem; height: clamp(24rem, calc(100svh - var(--hdr) - 16rem), 30rem); min-height: 0; padding: var(--space-5); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: var(--space-3); justify-content: stretch; text-align: left; border: var(--border-hairline) solid var(--color-stroke-on-dark); border-radius: var(--radius-sm); background: transparent; color: var(--color-text-on-dark); }
.card.ai { width: 38rem; background: var(--color-surface-light); color: var(--color-text-on-light); border-color: var(--color-stroke-on-dark); }
.card-ring { grid-row: 1; width: calc(var(--space-6) - var(--space-1)); height: calc(var(--space-6) - var(--space-1)); }
.card-ring .icon { width: var(--space-5); height: var(--space-5); }
.card.ai .card-ring { width: calc(var(--space-6) - var(--space-1)); height: calc(var(--space-6) - var(--space-1)); }
.card.ai .card-ring .icon { width: var(--space-5); height: var(--space-5); }
.card .motif { grid-row: 2; width: 100%; height: 100%; max-height: none; min-height: 0; align-self: stretch; }
.card-text { grid-row: 3; display: grid; gap: var(--space-2); align-content: start; min-height: calc(var(--font-size-lead) * 1.25 + var(--font-size-body) * 1.5 * 3 + var(--space-2)); }
.card-name { font-size: var(--font-size-lead); font-weight: var(--font-weight-regular); line-height: 1.25; margin: 0; }
.card-d { margin: 0; opacity: .78; font-size: var(--font-size-body); line-height: 1.5; max-width: 34ch; }
.card.ai .card-name { font-size: var(--font-size-title); font-weight: var(--font-weight-light); line-height: 1.15; max-width: 22ch; }
.card.ai .card-d { opacity: .9; font-size: var(--font-size-lead); font-weight: var(--font-weight-light); line-height: 1.4; max-width: 34ch; }
.card.ai .card-text { min-height: 0; }
.badge { position: absolute; top: var(--space-5); right: var(--space-5); }
:is(html:not(.js), html.no-motion, html.static) .card { width: auto; height: auto; min-height: 26rem; }
:is(html:not(.js), html.no-motion, html.static) .card.ai { grid-column: 1 / -1; min-height: 26rem; }
@media (max-width: 860px) {
  .card, .card.ai { width: auto; height: auto; min-height: 0; padding: var(--space-4); grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; grid-template-areas: "ring badge" "text text" "motif motif"; row-gap: var(--space-3); column-gap: var(--space-3); }
  .card-ring, .card.ai .card-ring { grid-area: ring; }
  .card-text { grid-area: text; min-height: 0; }
  .card .motif { grid-area: motif; height: 5rem; }
  .badge { position: static; grid-area: badge; justify-self: end; align-self: start; }
  .card:not(.ai) { grid-template-areas: "ring text" "motif motif"; }
  .card:not(.ai) .card-text { align-self: center; }
  .card.ai .card-name { font-size: var(--font-size-lead); max-width: none; }
  .card.ai .card-d { font-size: var(--font-size-body); }
}
@media (max-width: 860px) { html.static .card, html.static .card.ai, html:not(.js) .card, html:not(.js) .card.ai { min-height: 0; } }

/* v8 fixes */
.sysvg .dn { opacity: .85; stroke-width: 1; }
.sysvg .net-sm { display: none; }
@media (max-width: 480px) { .sysvg .net-full { display: none; } .sysvg .net-sm { display: inline; } }
.hero-copy { grid-template-columns: minmax(0, 1fr); }
.hero-copy > * { min-width: 0; }
@media (max-width: 560px) {
  .cta-row { flex-direction: column; flex-wrap: wrap; align-items: stretch; }
  .cta-row .btn { justify-content: center; width: 100%; }
  .sys-chips { padding-top: var(--space-4); }
  .stage { margin-bottom: var(--space-2); }
}
.tag-bp { left: var(--space-4); }
.tag-rl { right: var(--space-4); }
.tape-pin { z-index: 45; background: var(--color-surface-dark); }
@media (max-width: 860px) {
  .card, .card.ai { min-height: 13.5rem; grid-template-areas: "ring text" "motif motif"; }
  .card.ai .card-text { padding-right: 6.5rem; }
  .card.ai .badge { position: absolute; top: var(--space-4); right: var(--space-4); }
  .card:not(.ai) .card-text { align-self: center; }
  .card.ai .card-text { align-self: center; }
}
@media (max-width: 860px) { html.static .card, html.static .card.ai, html:not(.js) .card, html:not(.js) .card.ai { min-height: 13.5rem; } }

/* footer: the 4L as a window onto the B&W workshop photo (same technique as option 1; mask inlined as a data URI) */
/* sized by viewport height too, so the whole footer (4L + links + legal row) fits one screen under the fixed header */
.mark-fig { margin: 0; width: min(60vw, 1100px, max(14rem, calc((100svh - 20rem) * 1.3535))); }
.mask { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.5 -1.5 139.41 103.0'%3E%3Cpath d='M61.8 4.35L61.8 21.88A1.8 1.8 0 0 1 61.28 23.15L22.63 61.8L60 61.8A1.8 1.8 0 0 1 61.8 63.6L61.8 98.2A1.8 1.8 0 0 1 60 100L47.6 100A1.8 1.8 0 0 1 45.8 98.2L45.8 77.8L1.8 77.8A1.8 1.8 0 0 1 0 76L0 62.55A1.8 1.8 0 0 1 0.53 61.28L58.73 3.07A1.8 1.8 0 0 1 61.8 4.35Z' fill='%23000' fill-rule='evenodd'/%3E%3Cpath d='M61.8 4.35L61.8 21.88A1.8 1.8 0 0 1 61.28 23.15L6.63 77.8L1.8 77.8A1.8 1.8 0 0 1 0 76L0 62.55A1.8 1.8 0 0 1 0.53 61.28L58.73 3.07A1.8 1.8 0 0 1 61.8 4.35Z' fill='%23000'/%3E%3Cg transform='translate(74.6 0)'%3E%3Cpath d='M1.8 0L14.2 0A1.8 1.8 0 0 1 16 1.8L16 84L57.46 84A1.8 1.8 0 0 1 58.73 87.07L46.33 99.47A1.8 1.8 0 0 1 45.06 100L1.8 100A1.8 1.8 0 0 1 0 98.2L0 1.8A1.8 1.8 0 0 1 1.8 0Z' fill='%23000' fill-rule='evenodd'/%3E%3Cpath d='M1.8 0L14.2 0A1.8 1.8 0 0 1 16 1.8L16 84L3.07 96.93A1.8 1.8 0 0 1 0 95.65L0 1.8A1.8 1.8 0 0 1 1.8 0Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"); position: relative; aspect-ratio: 139.41 / 103; overflow: hidden; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.mask img { position: absolute; left: 0; top: -15%; width: 100%; height: 130%; object-fit: cover; filter: grayscale(1); transform: translateY(calc((var(--p, .5) - .5) * -22%)); will-change: transform; }
.no-motion .mask img { transform: none; }
.site-footer .foot-in { gap: var(--space-5); }
.site-footer .foot-meta, .site-footer .foot-nav { opacity: 1; color: var(--color-text-on-dark); }
@media (max-width: 560px) { .mark-fig { width: 80vw; } .foot-meta { flex-direction: column; align-items: flex-start; gap: 0; } .foot-nav { flex-direction: column; align-items: flex-start; gap: 0; } }

/* footer layout v2: 4L on the left, a full-height column on the right so the footer fills the whole width */
.site-footer .foot-in { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5) var(--space-7); align-items: stretch; }
.foot-side { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-5); min-width: 0; }
.site-footer .foot-nav { flex-direction: column; flex-wrap: nowrap; align-items: stretch; width: 100%; gap: 0; margin: 0; padding: 0; list-style: none; }
.site-footer .foot-nav li { border-top: var(--border-hairline) solid var(--color-stroke-on-dark); }
.site-footer .foot-nav li:last-child { border-bottom: var(--border-hairline) solid var(--color-stroke-on-dark); }
.site-footer .foot-nav a { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: calc(var(--space-6) + var(--space-2)); font-family: var(--font-family-text); font-weight: var(--font-weight-light); font-size: clamp(1.5rem, 2.6vw, var(--font-size-title)); letter-spacing: 0; text-transform: none; white-space: normal; }
.site-footer .foot-nav a::after { content: "\2192"; position: static; height: auto; background: none; transform: none; opacity: .6; transition: transform var(--motion-duration-base) var(--motion-easing-standard); }
.site-footer .foot-nav a:hover::after { transform: translateX(var(--space-2)); opacity: 1; }
.site-footer .foot-meta { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
@media (max-width: 860px) {
  .site-footer .foot-in { grid-template-columns: 1fr; }
  .mark-fig { width: min(80vw, 28rem); }
  .site-footer .foot-nav a { min-height: calc(var(--space-6)); font-size: var(--font-size-lead); }
}