/* ACEHIGH corporate site — care-label world, second pass
   One garment, one thread: the label is sewn on in the opening, the thread runs down the
   left gutter as you read, and ends knotted at the contact tag. AI room is the only ink. */

@font-face {
  font-family: "Sofia Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/SofiaSans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, 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+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sofia Sans Extra Condensed";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("fonts/SofiaSansExtraCondensed-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, 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+FEFF, U+FFFD;
}

:root {
  --band: #f2f2ee;
  --band-deep: #e4e4dd;
  --cloth: #fbfbf9;
  --ink: #16161a;
  --ink-2: #26262c;
  --ink-mute: #a8adb5;
  --mute: #5b6068;
  --hair: #c9ccd1;
  --thread: #c8102e;
  --thread-deep: #a40d25;
  --thread-on-ink: #e0183a;
  --cell: 24px;
  --gutter-x: max(var(--cell), calc(50% - 576px));
  --cjk: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic Medium", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-body: "Sofia Sans", var(--cjk);
  --f-cond: "Sofia Sans Extra Condensed", var(--cjk);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --stitch: repeating-linear-gradient(90deg, var(--thread) 0 6px, transparent 6px 12px);
  --stitch-v: repeating-linear-gradient(180deg, var(--thread) 0 6px, transparent 6px 12px);
  --grid-ink: rgba(22,22,26,.06);
}
:lang(zh-Hans) {
  --cjk: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", "Hiragino Sans", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: var(--hair) var(--band); scrollbar-width: thin; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  position: relative;
  color: var(--ink);
  font: 400 16px/1.75 var(--f-body);
  font-feature-settings: "palt" 1, "tnum" 1;
  background-color: var(--band);
  background-image:
    linear-gradient(to right, var(--grid-ink) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-ink) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: calc(50% - 576px) 0;
  overflow-x: clip;
}
::selection { background: var(--thread); color: #fff; }
:focus-visible { outline: 2px solid var(--thread); outline-offset: 3px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
img, svg { display: block; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: var(--hair); border: 2px solid var(--band); }

.skip { position: absolute; left: 8px; top: -48px; z-index: 60; background: var(--ink); color: #fff; padding: 6px 12px; }
.skip:focus { top: 8px; }

.wrap { width: min(100% - 2 * var(--cell), 1152px); margin-inline: auto; }

/* ---------- the thread: one spine down the left gutter ---------- */
.spine {
  position: absolute; z-index: 5; pointer-events: none;
  left: max(6px, calc(50% - 576px - 14px));
  top: var(--spine-top, 0px);
  width: 1px;
  height: var(--spine-h, 0px);
  background: var(--stitch-v);
}
.spine::after {
  content: ""; position: absolute; left: -3px; bottom: -3px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--thread);
  opacity: 0; transform: scale(.4); transition: opacity .3s, transform .4s var(--ease);
}
.spine.is-done::after { opacity: 1; transform: none; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: calc(var(--cell) * 2);
  background: color-mix(in srgb, var(--band) 97%, transparent);
  border-bottom: 1px solid var(--hair);
}
.nav .wrap { height: 100%; display: flex; align-items: center; gap: var(--cell); }
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 20px; width: auto; transition: filter .3s; }
.nav-links { display: flex; gap: 2px; margin-left: auto; }
.nav-links a { position: relative; text-decoration: none; font-size: 14px; padding: 6px 10px; color: var(--ink); }
.nav-links a::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 1px;
  background: var(--stitch);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .3s var(--ease-io);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after, .nav-links a[aria-current="true"]::after { transform: scaleX(1); }
.nav-progress {
  position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--stitch);
  transform: scaleX(var(--read, 0)); transform-origin: 0 50%;
}
.nav-lang { display: flex; border: 1px solid var(--ink); font: 600 13px/1 var(--f-cond); letter-spacing: .06em; }
.nav-lang a, .nav-lang span { padding: 7px 10px; text-decoration: none; }
.nav-lang a { transition: background-color .2s, color .2s; }
.nav-lang a:hover { background: var(--ink); color: var(--band); }
.nav-lang span { background: var(--ink); color: var(--band); }
.nav-toggle {
  display: none; margin-left: auto; width: 40px; height: 40px;
  border: 1px solid var(--ink); background: transparent; cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.nav-toggle svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: calc(var(--cell) * 2) 0 0;
  background-color: var(--band-deep);
  background-image:
    linear-gradient(to right, rgba(22,22,26,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22,22,26,.07) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: calc(50% - 576px) 0;
}
.hero .wrap {
  display: grid;
  grid-template-columns: 480px 1fr;
  column-gap: calc(var(--cell) * 2.5);
  align-items: start;
}

/* the hanging label: cloth, hem seam, running stitch, floor shadow */
.label {
  position: relative; z-index: 2;
  margin-bottom: calc(var(--cell) * -4);
  padding: 12px;
  background-color: var(--cloth);
  background-image:
    repeating-linear-gradient(135deg, rgba(22,22,26,.035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #fdfdfb, #f4f4f0);
  border: 1px solid var(--hair);
  border-top: 0;
  transform-origin: 50% -48px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 1px 1px rgba(22,22,26,.12),
    0 14px 22px -16px rgba(22,22,26,.35),
    0 42px 56px -36px rgba(22,22,26,.5);
}
.label::after {
  content: ""; position: absolute; left: 4%; right: 4%; bottom: -14px; height: 18px; z-index: -1;
  background: radial-gradient(60% 100% at 50% 0, rgba(22,22,26,.28), transparent 70%);
}
.label-stitch {
  position: absolute; inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px);
  overflow: visible; pointer-events: none; z-index: 1;
}
.label-stitch rect { x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px); fill: none; stroke-linecap: round; }
.label-stitch .holes { stroke: rgba(22,22,26,.22); stroke-width: 2.2; stroke-dasharray: 0 12; }
.label-stitch .holes.h2 { stroke-dashoffset: -7; }
.label-stitch .thread { stroke: var(--thread); stroke-width: 1.6; stroke-dasharray: 7 5; }
.label-stitch .sew-mask { stroke: #fff; stroke-width: 12; }
.label-stitch .tack, .label-stitch .tail { stroke: var(--thread); stroke-width: 1.4; fill: none; }
.label-stitch .knot { fill: var(--thread); }

.label-seam {
  position: relative; height: 20px; margin: -12px -12px 12px;
  border-bottom: 1px solid var(--hair);
  background:
    repeating-linear-gradient(90deg, var(--thread) 0 5px, transparent 5px 9px) 0 6px / 100% 1.5px no-repeat,
    repeating-linear-gradient(90deg, var(--thread) 0 5px, transparent 5px 9px) 4px 12px / 100% 1.5px no-repeat,
    linear-gradient(180deg, #dcdcd6, var(--band-deep) 55%, #f0f0ec);
  box-shadow: inset 0 1px 0 rgba(22,22,26,.14), inset 0 -1px 0 rgba(255,255,255,.8);
}
.label-seam::before, .label-seam::after {
  content: ""; position: absolute; top: 4px; width: 12px; height: 11px;
  background: repeating-linear-gradient(180deg, var(--thread) 0 1.5px, transparent 1.5px 3.5px);
}
.label-seam::before { left: 6px; }
.label-seam::after { right: 6px; }

.label-head {
  display: grid; row-gap: 6px; padding: 14px 14px 10px;
  border-bottom: 1px solid var(--ink);
}
.label-head strong { font: 800 clamp(40px, 4vw, 56px)/.95 var(--f-cond); letter-spacing: 0; text-shadow: 0 0 .35px currentColor; }
.label-head span { font: 600 14px/1 var(--f-cond); letter-spacing: .18em; color: var(--ink); }
.label-rows { margin: 0; }
.label-row {
  display: grid; grid-template-columns: 96px 1fr; column-gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--hair); align-items: baseline;
}
.label-row:last-child { border-bottom: 0; }
.label-row dt { font: 600 14px/1.5 var(--f-cond); letter-spacing: .12em; color: var(--ink); }
.label-row dd { font-size: 16px; line-height: 1.6; }
.label-row dd b { font-weight: 700; }
.label-row.is-sym { grid-template-columns: 1fr; row-gap: 10px; padding-bottom: 14px; }
.label-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 16px 14px 10px; font: 600 14px/1 var(--f-cond); letter-spacing: .22em; color: var(--ink);
  text-shadow: 0 0 .35px currentColor;
}
.label-foot i { font-style: normal; font-size: 22px; line-height: 1; font-weight: 800; color: var(--thread); letter-spacing: .02em; }

/* care symbols: printed tiles that turn over */
.sym-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sym { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; perspective: 500px; position: relative; }
.sym-face {
  position: absolute; inset: 0; display: grid; place-items: center;
  border: 1px solid var(--ink);
  background: repeating-linear-gradient(90deg, rgba(22,22,26,.05) 0 1px, transparent 1px 2px), var(--cloth);
  box-shadow: inset 0 0 0 3px var(--cloth), inset 0 0 0 4px rgba(22,22,26,.18);
  backface-visibility: hidden;
  transition: transform .55s var(--ease), border-color .2s;
}
.sym-face svg { width: 31px; height: 31px; stroke: var(--ink); stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sym-face.back {
  transform: rotateX(180deg);
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.16) 0 1px, transparent 1px 2px), var(--thread);
  border-color: var(--thread); color: #fff; box-shadow: none;
  font: 700 12px/1.1 var(--f-cond); letter-spacing: .02em; text-align: center; padding: 2px;
}
@media (hover: hover) {
  .sym:hover .sym-face.front { transform: rotateX(-14deg); border-color: var(--thread); }
}
.sym.is-flipped .sym-face.front, .sym.is-peek .sym-face.front { transform: rotateX(-180deg); }
.sym.is-flipped .sym-face.back, .sym.is-peek .sym-face.back { transform: rotateX(0); }
.sym-caption {
  min-height: 1.5em; font-size: 14px; line-height: 1.5; color: var(--ink);
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
}
.sym-caption:empty { display: none; }
.sym-caption b { font: 700 13px/1 var(--f-cond); letter-spacing: .1em; color: var(--thread); }
.sym-caption a { font-size: 13px; color: var(--mute); }

/* hero copy */
.hero-copy { padding-top: calc(var(--cell) * 2); padding-bottom: calc(var(--cell) * 5); }
.hero h1 {
  font-family: var(--cjk); font-weight: 800;
  font-size: clamp(36px, 4.2vw, 60px); line-height: 1.06; letter-spacing: -.015em;
  text-wrap: balance;
}
.hero h1 .stitch {
  background: repeating-linear-gradient(90deg, var(--thread) 0 8px, transparent 8px 14px) 0 100% / 100% 2px no-repeat;
  padding-bottom: .06em;
}
.hero-lead { margin-top: calc(var(--cell) * 1.25); max-width: 30em; font-size: 18px; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: calc(var(--cell) * 1.5); }
.hero-note { margin-top: calc(var(--cell) * 1.5); font-size: 13px; color: var(--mute); display: flex; gap: 10px; align-items: center; }
.hero-note svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* buttons: grosgrain tape with an inner stitch; ghost fills with ink from the left */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 22px; text-decoration: none;
  font-weight: 600; font-size: 15px; border: 1px solid var(--ink); color: var(--ink);
  transition: color .2s, border-color .2s, background-color .2s;
}
.btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; transition: translate .25s var(--ease); }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .28s var(--ease-io);
}
.btn::after {
  content: ""; position: absolute; inset: 4px; border: 1px dashed currentColor; opacity: 0;
  transition: opacity .2s; pointer-events: none;
}
.btn:hover::after, .btn:focus-visible::after { opacity: .7; }
.btn:hover svg { translate: 3px 0; }
.btn-ghost:hover::before, .btn-ghost:focus-visible::before, .btn-ghost:active::before { transform: scaleX(1); }
.btn-ghost:hover, .btn-ghost:focus-visible, .btn-ghost:active { color: var(--band); }
.btn-primary {
  color: #fff; border-color: var(--thread-deep);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 1px, transparent 1px 3px), var(--thread);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.2);
}
.btn-primary::after { opacity: .6; }
.btn-primary::before { background: var(--thread-deep); }
.btn-primary:hover::before, .btn-primary:focus-visible::before { transform: scaleX(1); }

/* ---------- the opening: one authored moment, everything already final without JS ---------- */
html.is-ready .label-seam { clip-path: inset(0 100% 0 0); animation: wipe .6s var(--ease-io) both; }
html.is-ready .label {
  clip-path: inset(0 0 100% 0);
  animation: unroll .9s var(--ease) .35s both, settle 2.4s cubic-bezier(.22, 1, .36, 1) 1.1s both;
}
html.is-ready .label-stitch .sew-mask { animation: sew 1.5s var(--ease-io) .9s forwards; }
html.is-ready .label-head, html.is-ready .label-row, html.is-ready .label-foot {
  opacity: 0; translate: 0 6px; animation: row-in .5s var(--ease) calc(.6s + var(--i, 0) * 60ms) both;
}
.label-row:nth-child(1) { --i: 1; } .label-row:nth-child(2) { --i: 2; } .label-row:nth-child(3) { --i: 3; }
.label-row:nth-child(4) { --i: 4; } .label-row:nth-child(5) { --i: 5; } .label-row:nth-child(6) { --i: 6; }
.label-foot { --i: 7; }
html.is-ready .hero h1 { clip-path: inset(0 100% 0 0); animation: wipe .8s var(--ease-io) .5s both; }
html.is-ready .hero-lead, html.is-ready .hero-actions, html.is-ready .hero-note {
  opacity: 0; translate: 0 8px; animation: row-in .6s var(--ease) 1.1s both;
}
html.is-ready .hero-actions { animation-delay: 1.25s; }
html.is-ready .hero-note { animation-delay: 1.4s; }
@keyframes wipe { to { clip-path: inset(0); } }
@keyframes unroll { to { clip-path: inset(0 0 -60px 0); } }
@keyframes settle { 0% { rotate: 1.8deg; } 40% { rotate: -1.2deg; } 70% { rotate: -.35deg; } 100% { rotate: 0deg; } }
@keyframes sew { to { stroke-dashoffset: 0; } }
@keyframes row-in { to { opacity: 1; translate: none; } }
html.is-settled .label, html.is-settled .label-seam, html.is-settled .label-head, html.is-settled .label-row, html.is-settled .label-foot,
html.is-settled .hero h1, html.is-settled .hero-lead, html.is-settled .hero-actions, html.is-settled .hero-note, html.is-settled .label-stitch .sew-mask {
  animation: none; clip-path: none; opacity: 1; translate: none; rotate: 0deg; stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  html.is-ready .label, html.is-ready .label-seam, html.is-ready .label-head, html.is-ready .label-row, html.is-ready .label-foot,
  html.is-ready .hero h1, html.is-ready .hero-lead, html.is-ready .hero-actions, html.is-ready .hero-note,
  html.is-ready .label-stitch .sew-mask { animation: none; clip-path: none; opacity: 1; translate: none; }
  .sym-face, .btn::before, .nav-links a::after, .btn svg { transition: none; }
}

/* ---------- sections and the value ladder ---------- */
.section { position: relative; padding: calc(var(--cell) * 4) 0 calc(var(--cell) * 3); }
.section.is-deep { background-color: var(--band-deep); --grid-ink: rgba(22,22,26,.07); }
.section.is-cloth { background-color: var(--cloth); --grid-ink: rgba(22,22,26,.035); }
.section.is-deep, .section.is-cloth {
  background-image:
    linear-gradient(to right, var(--grid-ink) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-ink) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: calc(50% - 576px) 0;
}
.section.is-ink {
  background-color: var(--ink); color: var(--band);
  padding: calc(var(--cell) * 5) 0 calc(var(--cell) * 4);
  background-image:
    linear-gradient(to right, rgba(242,242,238,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242,242,238,.06) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: calc(50% - 576px) 0;
}
.is-ink::before, .is-ink::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: repeating-linear-gradient(90deg, var(--thread-on-ink) 0 6px, transparent 6px 12px);
}
.is-ink::before { top: 0; } .is-ink::after { bottom: 0; }

.section h2 {
  display: grid; row-gap: 4px; align-items: end;
  font-family: var(--cjk); font-weight: 700;
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1.25; letter-spacing: .01em;
}
.section h2 small {
  display: block; order: 2;
  font: 700 clamp(44px, 6.5vw, 88px)/.88 var(--f-cond); letter-spacing: -.01em;
  color: var(--ink); text-transform: uppercase; margin-left: -.03em;
}
#system h2 small, #company h2 small, #contact h2 small, .pair h2 small { font-size: clamp(36px, 4.5vw, 64px); }
#brands h2 small { font-size: clamp(28px, 3vw, 40px); }
.is-ink h2 small { color: var(--band); }
.section .lead { margin-top: var(--cell); max-width: 42em; font-size: 17px; }
.section-head { margin-bottom: calc(var(--cell) * 2); }
#ai { padding-top: calc(var(--cell) * 7); }
@media (min-width: 1200px) { #ai .section-head { margin-left: calc(480px + var(--cell) * 2.5); } }

/* ---------- AI room: the care chart on ink ---------- */
.legend { border-top: 1px solid var(--band); }
.is-ink .lead { color: var(--band); }
.legend li {
  display: grid; grid-template-columns: 120px 1.1fr 2fr 1fr;
  column-gap: var(--cell); align-items: start; position: relative;
  padding: var(--cell) 0; border-bottom: 1px solid rgba(242,242,238,.22);
  transition: background-color .3s;
  scroll-margin-top: calc(var(--cell) * 3 + 2px);
}
.legend li.is-active {
  background: rgba(242,242,238,.07);
  margin-inline: calc(-1 * var(--cell)); padding-inline: var(--cell);
  border-bottom: 1px dashed var(--thread-on-ink);
}
.legend .glyph {
  width: 96px; height: 96px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--band); padding: 0;
  background: repeating-linear-gradient(90deg, rgba(22,22,26,.05) 0 1px, transparent 1px 2px), var(--cloth);
  box-shadow: inset 0 0 0 3px var(--cloth), inset 0 0 0 4px rgba(22,22,26,.18);
  transition: background-color .3s, border-color .3s, box-shadow .3s, transform .55s var(--ease);
}
.legend .glyph svg { width: 68px; height: 68px; stroke: var(--ink); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.legend li.is-active .glyph { background: var(--thread); border-color: var(--thread); box-shadow: none; }
.legend li.is-active .glyph svg { stroke: #fff; }
.legend .glyph.is-flipped { transform: rotateX(360deg); }
.legend h3 { font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--band); }
.legend h3 span { display: block; font: 700 15px/1.3 var(--f-cond); letter-spacing: .1em; color: var(--ink-mute); margin-top: 4px; }
.legend p { font-size: 15px; line-height: 1.75; color: var(--band); }
.legend .data { font-size: 14px; line-height: 1.6; color: var(--band); display: grid; row-gap: 8px; }
.legend .data b { display: block; font: 700 11px/1.6 var(--f-cond); letter-spacing: .14em; color: var(--ink-mute); }

/* ---------- brands: label rows that open to show the AI inside ---------- */
.brands { border-top: 1px solid var(--ink); }
.brand { border-bottom: 1px solid var(--hair); }
.brand-head {
  width: 100%; display: grid; grid-template-columns: 1fr auto; column-gap: var(--cell); align-items: center;
  padding: calc(var(--cell) * 1.25) 0; border: 0; background: transparent; text-align: left; cursor: pointer;
}
.brand .mark { font: 800 clamp(40px, 6.6vw, 96px)/.9 var(--f-cond); letter-spacing: -.01em; text-transform: uppercase; }
.brand .tag { margin-top: 10px; font-size: 16px; font-weight: 600; }
.brand .meta { display: grid; justify-items: end; row-gap: 6px; font: 600 13px/1.5 var(--f-cond); letter-spacing: .08em; color: var(--mute); text-align: right; }
.brand .meta span { color: var(--ink); }
.brand .open {
  width: 40px; height: 40px; border: 1px solid var(--ink); display: grid; place-items: center; margin-top: 6px;
  transition: background-color .25s, transform .4s var(--ease);
}
.brand .open svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.brand-head[aria-expanded="true"] .open { background: var(--ink); color: var(--band); transform: rotate(45deg); }
.brand-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.brand-body > div { overflow: hidden; }
.brand-head[aria-expanded="true"] + .brand-body { grid-template-rows: 1fr; }
.brand-inner { display: grid; grid-template-columns: 1fr 1.4fr; column-gap: calc(var(--cell) * 2); padding: 0 0 calc(var(--cell) * 1.5); }
.brand-inner p { font-size: 15px; color: var(--ink); max-width: 30em; }
.brand-inner ul { border-top: 1px solid var(--ink); }
.brand-inner li { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 15px; }
.brand-inner li svg { width: 28px; height: 28px; stroke: var(--ink); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.brand-inner li b { display: block; font: 700 11px/1.4 var(--f-cond); letter-spacing: .12em; color: var(--mute); }
.channels { margin-top: calc(var(--cell) * 2); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0; font-size: 15px; }
.channels li { padding: 0 14px; border-left: 1px solid var(--hair); line-height: 1.4; }
.channels li:first-child { padding-left: 0; border-left: 0; font: 700 13px/1.4 var(--f-cond); letter-spacing: .12em; color: var(--ink); }

/* ---------- system map: everything threads into ACE ---------- */
.system { display: grid; grid-template-columns: 1.5fr 1fr; column-gap: calc(var(--cell) * 2); align-items: start; }
.system > p { grid-column: 1 / -1; font-size: 17px; line-height: 1.75; max-width: 40em; margin-bottom: calc(var(--cell) * 1.5); }
.sysmap { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: repeat(3, auto); gap: calc(var(--cell) * 1.5) calc(var(--cell) * 1.5); align-items: center; }
.sysmap svg.wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sysmap svg.wires line { stroke: var(--hair); stroke-width: 1.5; stroke-dasharray: 5 5; transition: stroke .25s; }
.sysmap svg.wires line.is-on { stroke: var(--thread); }
.node {
  position: relative; z-index: 1; display: grid; row-gap: 4px; align-content: start; align-self: center; text-align: left; cursor: pointer;
  border: 1px solid var(--ink); background: var(--cloth); padding: 14px 16px 12px;
  box-shadow: inset 0 0 0 3px var(--cloth), inset 0 0 0 4px rgba(22,22,26,.14);
  transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s;
}
.node b { font: 800 26px/1 var(--f-cond); letter-spacing: 0; text-transform: uppercase; }
.node span { font-size: 13px; color: var(--mute); line-height: 1.5; }
.node[data-pos="tl"] { grid-area: 1 / 1; } .node[data-pos="tr"] { grid-area: 1 / 3; }
.node[data-pos="ml"] { grid-area: 2 / 1; } .node[data-pos="mr"] { grid-area: 2 / 3; }
.node[data-pos="bm"] { grid-area: 3 / 2; } .node.ace { grid-area: 2 / 2; align-self: center; justify-self: center; }
.node.ace { background: var(--ink); color: var(--band); border-color: var(--ink); box-shadow: none; width: min(100%, 200px); aspect-ratio: 1; display: grid; align-content: center; justify-items: center; row-gap: 8px; text-align: center; padding: 12px; }
.node.ace b { font-size: 34px; }
.node.ace span { color: var(--ink-mute); }
.node.ace svg { width: 44px; height: 44px; stroke: var(--band); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.node:hover, .node:focus-visible, .node.is-on { border-color: var(--thread); box-shadow: inset 0 0 0 3px var(--cloth), inset 0 0 0 4px var(--thread); }
.node.ace:hover, .node.ace.is-on { box-shadow: inset 0 0 0 1px var(--thread-on-ink); }
.sys-panel { border-top: 1px solid var(--ink); padding-top: var(--cell); min-height: 200px; }
.sys-panel b { display: block; font: 800 32px/1 var(--f-cond); text-transform: uppercase; }
.sys-panel h3 { font-size: 18px; font-weight: 700; margin-top: 8px; }
.sys-panel p { margin-top: 10px; font-size: 15px; line-height: 1.75; }
.sys-panel .hint { margin-top: var(--cell); font-size: 13px; color: var(--mute); }

/* ---------- partner offerings ---------- */
.offers { border-top: 1px solid var(--ink); }
.offer { display: grid; grid-template-columns: 1.1fr 2fr; column-gap: calc(var(--cell) * 2); padding: var(--cell) 0; border-bottom: 1px solid var(--hair); }
.offer h3 { font-size: 20px; font-weight: 700; line-height: 1.4; }
.offer h3 span { display: block; font: 700 15px/1.4 var(--f-cond); letter-spacing: .1em; color: var(--ink); }
.offer p { font-size: 15px; }
.offer ul { margin-top: 10px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px var(--cell); font-size: 14px; color: var(--mute); }
.offer ul li::before { content: "— "; color: var(--mute); }
.section .actions { margin-top: calc(var(--cell) * 1.5); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.section .actions .hint { font-size: 14px; color: var(--mute); }

/* ---------- careers + real estate ---------- */
.pair { display: grid; grid-template-columns: 2fr 1fr; column-gap: calc(var(--cell) * 2); }
.pair > div + div { border-left: 1px solid var(--hair); padding-left: calc(var(--cell) * 2); }
.pair p { font-size: 15px; }
.pair .roles { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.pair .roles li { border: 1px solid var(--hair); padding: 4px 10px; font-size: 13px; background: var(--cloth); }
.small-note { margin-top: 12px; font-size: 13px; color: var(--mute); }

/* ---------- company ---------- */
.company { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--cell) * 2); align-items: start; }
.table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--ink); font-size: 14px; }
.table th, .table td { padding: 9px 0; border-bottom: 1px solid var(--hair); vertical-align: top; text-align: left; line-height: 1.6; }
.table th { width: 128px; font-weight: 600; color: var(--mute); padding-right: 12px; }
.table.history th { width: 112px; font: 800 44px/1 var(--f-cond); letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; padding: 14px 12px 10px 0; vertical-align: baseline; }
.table.history td { padding: 16px 0 12px; font-size: 15px; vertical-align: baseline; }
.table.history tr:last-child th { color: var(--thread); }
.company h3 { font-size: 15px; font-weight: 600; margin-bottom: 10px; color: var(--mute); }
.origin { margin-top: var(--cell); font-size: 14px; color: var(--mute); max-width: 36em; }

/* ---------- contact: the thread ends on a red tag ---------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--cell) * 2); align-items: start; }
.contact-tag {
  position: relative; background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px), var(--thread);
  color: #fff; padding: calc(var(--cell) * 1.5) var(--cell) var(--cell);
  box-shadow: 0 14px 22px -16px rgba(22,22,26,.35), 0 42px 56px -36px rgba(22,22,26,.5);
}
.contact-tag::before { content: ""; position: absolute; left: 10px; right: 10px; top: 8px; height: 1px; background: repeating-linear-gradient(90deg, #fff 0 6px, transparent 6px 12px); opacity: .9; }
.contact-tag .btn-primary { background: var(--band); color: var(--thread); border-color: var(--band); box-shadow: none; }
.contact-tag .btn-primary::before { background: #fff; }
.contact-tag .btn-primary::after { border-color: var(--thread); }
.contact dl { border-top: 1px solid #fff; margin-top: var(--cell); }
.contact dl div { display: grid; grid-template-columns: 96px 1fr; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.35); font-size: 15px; }
.contact dt { font-weight: 600; color: rgba(255,255,255,.92); }
.contact dd a { color: #fff; }
.contact dd.tel { font: 600 22px/1.3 var(--f-cond); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.contact .map { aspect-ratio: 4 / 3; border: 1px solid var(--hair); background: var(--band-deep); }
.contact .map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }

/* ---------- footer: the garment closes in ink ---------- */
.footer { background: var(--ink); color: var(--ink-mute); padding: calc(var(--cell) * 2) 0; font-size: 13px; }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 12px var(--cell); align-items: center; justify-content: space-between; }
.footer img { height: 16px; width: auto; filter: invert(1); opacity: .95; }
.footer ul { display: flex; gap: 14px; flex-wrap: wrap; }
.footer a { color: var(--band); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .legend li { grid-template-columns: 72px 1fr; row-gap: 8px; }
  .legend li p, .legend li .data { grid-column: 2; }
  .legend .glyph { width: 64px; height: 64px; }
  .legend .glyph svg { width: 46px; height: 46px; }
  .legend h3 { font-size: 18px; }
  .legend li.is-active { margin-inline: calc(-1 * var(--cell)); padding-inline: var(--cell); }
  .system, .company, .contact, .pair { grid-template-columns: 1fr; row-gap: calc(var(--cell) * 1.5); }
  .pair > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); padding-top: var(--cell); }
  .offer { grid-template-columns: 1fr; row-gap: 10px; }
  .brand-inner { grid-template-columns: 1fr; row-gap: var(--cell); }
  .sysmap { grid-template-columns: 1fr 1fr; gap: var(--cell); }
  .node[data-pos], .node.ace { grid-area: auto; }
  .node.ace { grid-column: 1 / -1; aspect-ratio: auto; justify-self: stretch; padding: 20px; }
  .sysmap svg.wires { display: none; }
}
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; row-gap: calc(var(--cell) * 1.5); }
  .label { max-width: none; margin: 0; }
  .label-row.is-sym { margin-inline: -12px; padding-inline: 14px; background: var(--band-deep); }
  .sym-row { display: grid; grid-template-columns: repeat(4, 48px); }
  .sym { width: 48px; height: 48px; }
  .sym-face svg { width: 34px; height: 34px; }
  .hero-copy { padding-top: calc(var(--cell) * .5); padding-bottom: calc(var(--cell) * 2); }
  #ai { padding-top: calc(var(--cell) * 5); }
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute; top: calc(var(--cell) * 2); left: 0; right: 0;
    display: flex; flex-direction: column; gap: 0;
    background: var(--ink); color: var(--band); padding: 12px var(--cell) 20px;
    visibility: hidden; opacity: 0; translate: 0 -8px;
    transition: translate .3s var(--ease), opacity .3s, visibility 0s .3s;
  }
  .nav.is-open .nav-links { visibility: visible; opacity: 1; translate: none; transition: translate .3s var(--ease), opacity .3s; }
  .nav.is-open { background: var(--ink); }
  .nav.is-open .nav-logo img { filter: invert(1); }
  .nav.is-open .nav-toggle, .nav.is-open .nav-lang { border-color: var(--band); color: var(--band); }
  .nav.is-open .nav-lang span { background: var(--band); color: var(--ink); }
  .nav-links a { color: var(--band); font: 600 18px/1.2 var(--cjk); padding: 14px 0; border-bottom: 1px solid rgba(242,242,238,.18); }
  .nav-links a::after { display: none; }
  .nav-links a[aria-current="true"] { border-bottom-color: var(--thread-on-ink); }
  .nav-links::after { content: ""; display: block; height: 1px; margin-top: 12px; background: repeating-linear-gradient(90deg, var(--thread-on-ink) 0 6px, transparent 6px 12px); }
  .brand-head { grid-template-columns: 1fr auto; }
  .brand .meta { display: none; }
}
@media (max-width: 480px) {
  .label-row { grid-template-columns: 80px 1fr; padding: 10px 10px; }
  .label-row dd { font-size: 15px; }
  .label-row.is-sym { padding-inline: 12px; }
  .offer ul { grid-template-columns: 1fr; }
  .table th { width: 96px; }
  .table.history th { width: 88px; font-size: 34px; }
  .contact dl div { grid-template-columns: 80px 1fr; }
  .brand .mark { font-size: clamp(36px, 11vw, 44px); }
  .hero h1 { font-size: clamp(34px, 9.6vw, 38px); }
}

/* ===== pass 3: ink hero with a living cloth, light AI chart, ink brand board ===== */
.hero {
  background-color: var(--ink); color: var(--band);
  background-image: none;
  min-height: 100svh;
  padding: calc(var(--cell) * 2) 0 0;
  display: grid; align-items: stretch;
  overflow: clip;
}
.hero .cloth { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero .wrap {
  position: relative; z-index: 1;
  grid-template-columns: 1fr 400px;
  column-gap: calc(var(--cell) * 3);
  align-items: start;
  padding-top: calc(var(--cell) * 2);
  padding-bottom: calc(var(--cell) * 3);
}
.hero-copy { align-self: end; padding: calc(var(--cell) * 6) 0 0; }
.hero h1 { display: grid; row-gap: 18px; font-size: 16px; line-height: 1; letter-spacing: 0; }
.hero h1 .big {
  font: 800 clamp(64px, 11.5vw, 176px)/.86 var(--f-cond);
  letter-spacing: -.015em; text-transform: uppercase; color: var(--band);
  text-shadow: 0 0 .4px currentColor;
}
.hero h1 .sub { font: 700 clamp(19px, 2vw, 30px)/1.4 var(--cjk); letter-spacing: .01em; color: var(--band); }
.hero h1 .stitch { background: repeating-linear-gradient(90deg, var(--thread-on-ink) 0 8px, transparent 8px 14px) 0 100% / 100% 2px no-repeat; padding-bottom: .08em; }
.hero-lead { color: #d8d9d4; max-width: 34em; font-size: 17px; }
.hero-note { color: var(--ink-mute); }
.hero .btn-ghost { color: var(--band); border-color: var(--band); }
.hero .btn-ghost::before { background: var(--band); }
.hero .btn-ghost:hover, .hero .btn-ghost:focus-visible, .hero .btn-ghost:active { color: var(--ink); }
.hero .label { margin-bottom: 0; }
.hero .label::after { background: radial-gradient(60% 100% at 50% 0, rgba(0,0,0,.6), transparent 70%); }
html.is-ready .hero h1 .big { clip-path: inset(0 100% 0 0); animation: wipe .9s var(--ease-io) .4s both; }
html.is-ready .hero h1 { clip-path: none; animation: none; }
html.is-ready .hero h1 .sub { opacity: 0; translate: 0 8px; animation: row-in .6s var(--ease) .9s both; }
html.is-settled .hero h1 .big, html.is-settled .hero h1 .sub { animation: none; clip-path: none; opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) { html.is-ready .hero h1 .big, html.is-ready .hero h1 .sub { animation: none; clip-path: none; opacity: 1; translate: none; } }
#ai { padding-top: calc(var(--cell) * 4); }
@media (min-width: 1200px) { #ai .section-head { margin-left: 0; } }

/* AI chart on the light band */
#ai .lead { color: var(--ink); }
#ai .legend { border-top-color: var(--ink); }
#ai .legend li { border-bottom-color: var(--hair); }
#ai .legend li.is-active { background: rgba(22,22,26,.05); border-bottom-color: var(--thread); }
#ai .legend .glyph { border-color: var(--ink); }
#ai .legend h3 { color: var(--ink); }
#ai .legend h3 span { color: var(--mute); }
#ai .legend p, #ai .legend .data { color: var(--ink); }
#ai .legend .data b { color: var(--mute); }

/* brand board on ink */
#brands.is-ink .lead { color: var(--band); }
#brands.is-ink .brands { border-top-color: rgba(242,242,238,.6); }
#brands.is-ink .brand { border-bottom-color: rgba(242,242,238,.22); }
#brands.is-ink .brand-head { color: var(--band); }
#brands.is-ink .brand .mark { font-size: clamp(44px, 8.6vw, 128px); }
#brands.is-ink .brand .meta { color: var(--ink-mute); }
#brands.is-ink .brand .meta span { color: var(--band); }
#brands.is-ink .brand .open { border-color: var(--band); color: var(--band); }
#brands.is-ink .brand-head[aria-expanded="true"] .open { background: var(--band); color: var(--ink); }
#brands.is-ink .brand-inner p { color: #d8d9d4; }
#brands.is-ink .brand-inner ul { border-top-color: rgba(242,242,238,.6); }
#brands.is-ink .brand-inner li { border-bottom-color: rgba(242,242,238,.22); color: var(--band); }
#brands.is-ink .brand-inner li svg { stroke: var(--band); }
#brands.is-ink .brand-inner li b { color: var(--ink-mute); }
#brands.is-ink .channels li { border-left-color: rgba(242,242,238,.3); color: var(--band); }
#brands.is-ink .channels li:first-child { color: var(--ink-mute); }
@media (hover: hover) { #brands.is-ink .brand-head:hover .mark { color: var(--thread-on-ink); transition: color .25s; } }

@media (max-width: 1000px) {
  #brands.is-ink .brand .mark { font-size: clamp(40px, 12vw, 72px); }
}
@media (max-width: 860px) {
  .hero { min-height: 0; }
  .hero .wrap { grid-template-columns: 1fr; row-gap: calc(var(--cell) * 2); padding-top: var(--cell); }
  .hero-copy { padding-top: calc(var(--cell) * 2); padding-bottom: 0; }
  .hero h1 .big { font-size: clamp(64px, 19vw, 96px); }
  .hero .label { margin: 0; }
}
.hero.is-grabbing { cursor: grabbing; } .hero { cursor: grab; } .hero a, .hero button { cursor: pointer; }

.hero .label { color: var(--ink); }
.brand .mark, .brand .tag { display: block; }
.brand-head > span:first-child { display: grid; row-gap: 6px; min-width: 0; }
.brand .tag { margin-top: 0; }

/* punchline column */
.legend li { grid-template-columns: 120px 1fr 1.9fr 1.3fr; }
.legend .data { display: grid; row-gap: 6px; align-content: start; padding-top: 2px; }
.legend .data b { display: block; font: 700 19px/1.45 var(--cjk); letter-spacing: 0; text-transform: none; color: var(--ink); }
.legend .data span { font-size: 13px; color: var(--mute); }
:lang(en) .legend .data b { font: 700 20px/1.3 var(--f-body); letter-spacing: -.01em; }
@media (max-width: 1000px) { .legend li { grid-template-columns: 72px 1fr; } }

/* ===== pass 4: the rest of the page catches the hero's heat ===== */
/* hero hem: a red stitch where the cloth ends */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 1; background: repeating-linear-gradient(90deg, var(--thread-on-ink) 0 6px, transparent 6px 12px); }

/* AI chart: symbols sew themselves in as you reach them; the punchline is the headline */
#ai .legend li {
  grid-template-columns: 168px 1fr 1fr;
  grid-template-areas: "glyph punch name" "glyph punch desc";
  column-gap: calc(var(--cell) * 1.5); row-gap: 10px;
  padding: calc(var(--cell) * 1.5) 0; align-items: start;
}
#ai .legend .glyph { grid-area: glyph; width: 144px; height: 144px; }
#ai .legend .glyph svg { width: 104px; height: 104px; stroke-width: 1.3; stroke-dasharray: 220; stroke-dashoffset: 0; }
#ai .legend h3 { grid-area: name; font-size: 15px; font-weight: 600; color: var(--mute); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
#ai .legend h3 span { display: inline; margin: 0; font-size: 12px; letter-spacing: .14em; color: var(--mute); }
#ai .legend p { grid-area: desc; font-size: 15px; max-width: 30em; }
#ai .legend .data { grid-area: punch; row-gap: 10px; }
#ai .legend .data b { font: 800 clamp(24px, 2.4vw, 34px)/1.3 var(--cjk); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
:lang(en) #ai .legend .data b { font: 800 clamp(26px, 2.6vw, 38px)/1.1 var(--f-body); letter-spacing: -.02em; }
#ai .legend .data span { font-size: 14px; color: var(--mute); }
#ai .legend li.is-active .data b { color: var(--thread); }
html.js #ai .legend li { opacity: 0; translate: 0 18px; transition: opacity .7s var(--ease), translate .9s var(--ease); }
html.js #ai .legend li .glyph svg { stroke-dashoffset: 220; transition: stroke-dashoffset 1.4s var(--ease-io) .15s, stroke .3s; }
html.js #ai .legend li.is-in { opacity: 1; translate: none; }
html.js #ai .legend li.is-in .glyph svg { stroke-dashoffset: 0; }
@media (hover: hover) { #ai .legend .glyph:hover { transform: rotateY(-18deg); } }

/* brand board: the row floods red under the hand */
#brands .brand { position: relative; isolation: isolate; }
#brands .brand::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--gutter-x)); z-index: -1; background: var(--thread); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease-io); }
@media (hover: hover) {
  #brands .brand:has(.brand-head:hover)::before, #brands .brand:has(.brand-head:focus-visible)::before { transform: scaleX(1); }
  #brands.is-ink .brand-head:hover .mark { color: var(--ink); }
  #brands.is-ink .brand-head:hover .tag, #brands.is-ink .brand-head:hover .meta, #brands.is-ink .brand-head:hover .meta span { color: var(--ink); }
  #brands.is-ink .brand-head:hover .open { border-color: var(--ink); color: var(--ink); }
}
#brands .brand-head[aria-expanded="true"] ~ .brand-body .brand-inner { padding-top: var(--cell); }
html.js #brands .brand .mark { clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease-io); }
html.js #brands .brand.is-in .mark { clip-path: inset(0 -2% 0 0); }

/* channel ticker */
.channels { overflow: hidden; flex-wrap: nowrap; gap: 0; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.channels .track { display: flex; flex: none; align-items: baseline; animation: ticker 28s linear infinite; }
.channels .track li { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .channels .track { animation: none; } .channels { mask-image: none; } }
@keyframes ticker { to { transform: translateX(-50%); } }
#brands.is-ink .channels .track li:first-child { padding-left: 14px; border-left: 1px solid rgba(242,242,238,.3); }

/* system map: data flows toward ACE */
.sysmap svg.wires line { stroke-dasharray: 6 6; animation: flow 1.6s linear infinite; }
.sysmap svg.wires line.is-on { animation-duration: .5s; stroke-width: 1.8; }
@keyframes flow { to { stroke-dashoffset: -12; } }
.node.ace { position: relative; }
.node.ace::after { content: ""; position: absolute; inset: -6px; border: 1px solid var(--thread-on-ink); opacity: .35; animation: breathe 3.2s var(--ease) infinite; pointer-events: none; }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .35; } 50% { transform: scale(1.04); opacity: .08; } }
@media (prefers-reduced-motion: reduce) { .sysmap svg.wires line, .node.ace::after { animation: none; } }

/* offers: the English print leads */
.offer { grid-template-columns: 1.3fr 2fr; }
.offer h3 { display: grid; row-gap: 2px; }
.offer h3 span { order: -1; font: 800 clamp(28px, 3vw, 44px)/.95 var(--f-cond); letter-spacing: -.01em; color: var(--ink); text-transform: uppercase; }
.offer ul li::before { color: var(--thread); }

/* roles chips */
.pair .roles li { transition: background-color .2s, color .2s, border-color .2s; }
@media (hover: hover) { .pair .roles li:hover { background: var(--ink); color: var(--band); border-color: var(--ink); } }

/* contact knot breathes once the thread arrives */
.spine.is-done::after { animation: breathe-dot 2.4s var(--ease) infinite; }
@keyframes breathe-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,16,46,.35); } 50% { box-shadow: 0 0 0 8px rgba(200,16,46,0); } }

@media (max-width: 1000px) {
  #ai .legend li { grid-template-columns: 88px 1fr; grid-template-areas: "glyph punch" "glyph name" "desc desc"; column-gap: var(--cell); }
  #ai .legend .glyph { width: 80px; height: 80px; }
  #ai .legend .glyph svg { width: 58px; height: 58px; }
  #ai .legend .data b { font-size: 22px; }
  .offer { grid-template-columns: 1fr; }
}

/* ===== review fixes (pass 3 review) ===== */
/* 5. heading hierarchy: the reader's heading leads, the Latin print is one consistent size */
.section h2 { font-size: clamp(28px, 3vw, 40px); }
.section h2 small, #system h2 small, #company h2 small, #contact h2 small, .pair h2 small, #brands h2 small { font-size: clamp(40px, 5vw, 72px); }
/* 1. EN: one title per section, set as the label print itself */
:lang(en) .section h2 { font: 800 clamp(40px, 5vw, 72px)/.9 var(--f-cond); letter-spacing: -.01em; text-transform: uppercase; }
:lang(en) .section h2 small { display: none; }
/* 7. no caps eyebrow inside the brand's AI list */
.brand-inner li b { display: none; }
.brand-inner li { font-size: 15px; }
/* 8. the cloth is grabbed from the cloth, not from the copy or the label */
.hero .label, .hero-copy { cursor: auto; }
/* 6. brand positioning line stays on phones */
@media (max-width: 860px) {
  .brand .meta { display: grid; justify-items: end; text-align: right; max-width: 38%; }
  .brand .meta > span:first-child { font-size: 12px; line-height: 1.4; }
}
/* 3. mobile system map: the tapped block and ACE light together */
@media (max-width: 1000px) {
  .node.is-on:not(.ace) { background: var(--thread); color: #fff; border-color: var(--thread); box-shadow: none; }
  .node.is-on:not(.ace) span { color: rgba(255,255,255,.85); }
  .sysmap:has(.node.is-on:not(.ace)) .node.ace { box-shadow: inset 0 0 0 2px var(--thread-on-ink); }
  .sys-hint-desk { display: none; }
}
@media (min-width: 1001px) { .sys-hint-mob { display: none; } }
@media (max-width: 860px) {
  .brand-head { grid-template-columns: 1fr 40px; grid-template-areas: "main open" "meta meta"; row-gap: 10px; }
  .brand-head > span:first-child { grid-area: main; }
  .brand .meta { display: contents; }
  .brand .meta > span:first-child { grid-area: meta; max-width: none; text-align: left; font-size: 12px; letter-spacing: .08em; }
  .brand .meta .open { grid-area: open; margin-top: 0; align-self: start; }
}

/* ===== contact form on the red tag ===== */
.cform { display: grid; row-gap: 14px; }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.cf-grid label { display: grid; row-gap: 6px; min-width: 0; }
.cf-grid .cf-wide { grid-column: 1 / -1; }
.cf-grid label > span { font: 700 12px/1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.92); }
.cform input, .cform select, .cform textarea {
  width: 100%; margin: 0; font: 400 15px/1.5 var(--f-body); color: var(--ink);
  background: var(--cloth); border: 1px solid rgba(255,255,255,.7); border-radius: 0; padding: 10px 12px;
  box-shadow: inset 0 0 0 3px var(--cloth), inset 0 0 0 4px rgba(22,22,26,.12);
  transition: box-shadow .2s, border-color .2s;
}
.cform select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.cform textarea { resize: vertical; min-height: 104px; }
.cform input:focus-visible, .cform select:focus-visible, .cform textarea:focus-visible { outline: 0; border-color: #fff; box-shadow: inset 0 0 0 3px var(--cloth), inset 0 0 0 4px var(--thread); }
.cform input::placeholder, .cform textarea::placeholder { color: var(--mute); }
.cform .cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.cf-note { font-size: 13px; color: rgba(255,255,255,.85); }
.cf-status { font-size: 14px; line-height: 1.5; color: #fff; min-height: 1.5em; }
.cf-status:empty { display: none; }
.cform.is-sending .btn { opacity: .6; pointer-events: none; }
.cform.is-done .cf-grid, .cform.is-done .cf-foot { display: none; }
.cform.is-done .cf-status { font: 700 22px/1.4 var(--cjk); padding: calc(var(--cell) * 1.5) 0; }
:lang(en) .cform.is-done .cf-status { font: 700 24px/1.3 var(--f-body); }
.pair.is-solo { grid-template-columns: 1fr; }
.sys-hint-mob { display: none; }
@media (max-width: 1000px) { .sys-hint-desk { display: none; } .sys-hint-mob { display: inline; } }
.node[data-pos="tm"] { grid-area: 1 / 2; } .node[data-pos="bl"] { grid-area: 3 / 1; }
@media (max-width: 1000px) { .node[data-pos="tm"], .node[data-pos="bl"] { grid-area: auto; } }
@media (max-width: 560px) { .cf-grid { grid-template-columns: 1fr; } }

/* ===== the label turns over: the job is printed on its reverse ===== */
.hero .wrap { perspective: 1800px; }
.label { transform-style: preserve-3d; transition: transform .9s var(--ease); }
.label.is-turned { transform: rotateY(180deg); }
.label > .label-stitch, .label > .label-seam, .label > .label-head, .label > .label-rows, .label > .label-foot { backface-visibility: hidden; }
.label-back {
  position: absolute; inset: 0; z-index: 3; transform: rotateY(180deg); backface-visibility: hidden;
  background-color: var(--cloth);
  background-image: repeating-linear-gradient(45deg, rgba(22,22,26,.035) 0 1px, transparent 1px 3px), linear-gradient(180deg, #fdfdfb, #f4f4f0);
  color: var(--ink); padding: 22px 22px 18px; display: grid; grid-template-rows: auto 1fr auto; row-gap: 16px;
  box-shadow: inset 0 0 0 7px transparent;
}
.label-back::before { content: ""; position: absolute; inset: 8px; border: 1px dashed var(--thread); pointer-events: none; }
.lb-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
.lb-head strong { font: 800 26px/1 var(--f-cond); letter-spacing: 0; }
.lb-close { border: 0; background: transparent; padding: 4px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--thread); }
.lb-close svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.5; fill: none; transform: rotate(180deg); }
.lb-body { display: grid; grid-template-columns: 96px 1fr; column-gap: 18px; align-content: start; min-height: 0; }
.lb-glyph { width: 96px; height: 96px; display: grid; place-items: center; border: 1px solid var(--ink); background: var(--thread); }
.lb-glyph svg { width: 68px; height: 68px; stroke: #fff; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lb-text { display: grid; row-gap: 8px; align-content: start; }
.lb-name { font: 700 12px/1.4 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.lb-punch { font: 800 clamp(20px, 1.6vw, 24px)/1.35 var(--cjk); letter-spacing: -.01em; text-wrap: balance; }
:lang(en) .lb-punch { font: 800 24px/1.15 var(--f-body); letter-spacing: -.02em; }
.lb-sub { font-size: 13px; color: var(--mute); }
.lb-desc { font-size: 14px; line-height: 1.7; }
.lb-syms { display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--hair); padding-top: 12px; }
.lb-syms button { width: 36px; height: 36px; padding: 0; border: 1px solid var(--ink); background: var(--cloth); cursor: pointer; display: grid; place-items: center; transition: background-color .2s, border-color .2s; }
.lb-syms button svg { width: 24px; height: 24px; stroke: var(--ink); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
.lb-syms button[aria-pressed="true"] { background: var(--thread); border-color: var(--thread); }
.lb-syms button[aria-pressed="true"] svg { stroke: #fff; }
@media (hover: hover) { .lb-syms button:hover { border-color: var(--thread); } }
@media (prefers-reduced-motion: reduce) { .label { transition: none; } }
@media (max-width: 480px) {
  .label-back { padding: 16px 14px 14px; row-gap: 12px; }
  .lb-body { grid-template-columns: 72px 1fr; column-gap: 12px; }
  .lb-glyph { width: 72px; height: 72px; } .lb-glyph svg { width: 50px; height: 50px; }
  .lb-punch { font-size: 19px; }
}
.nav-logo img { height: 22px; }
.footer img { height: 18px; filter: invert(1); }

/* ===== careers: an ink room, roles as a casting list ===== */
#careers.section {
  background-color: var(--ink); color: var(--band);
  padding: calc(var(--cell) * 5) 0 calc(var(--cell) * 4);
  background-image: linear-gradient(to right, rgba(242,242,238,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(242,242,238,.06) 1px, transparent 1px);
  background-size: var(--cell) var(--cell); background-position: calc(50% - 576px) 0;
}
#careers.section::before, #careers.section::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: repeating-linear-gradient(90deg, var(--thread-on-ink) 0 6px, transparent 6px 12px); }
#careers.section::before { top: 0; } #careers.section::after { bottom: 0; }
#careers-pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--cell) * 3); align-items: start; }
#careers h2 { grid-column: 1; color: var(--band); }
#careers h2 small { color: var(--band); font-size: clamp(64px, 11vw, 168px); line-height: .86; letter-spacing: -.02em; }
#careers .lead { grid-column: 1; color: var(--band); font-size: clamp(18px, 1.6vw, 24px); line-height: 1.6; max-width: 20em; font-weight: 600; }
#careers .roles { grid-column: 2; grid-row: 1 / span 4; margin-top: 10px; display: block; border-top: 1px solid rgba(242,242,238,.6); }
#careers .roles li {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between;
  padding: 18px 12px; border: 0; border-bottom: 1px solid rgba(242,242,238,.22); background: transparent;
  font: 700 clamp(20px, 2vw, 30px)/1.3 var(--cjk); color: var(--band); cursor: default;
}
#careers .roles li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--thread); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease-io); }
#careers .roles li::after { content: ""; width: 10px; height: 10px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .5; transition: opacity .2s, translate .3s var(--ease); }
@media (hover: hover) {
  #careers .roles li:hover { color: #fff; }
  #careers .roles li:hover::before { transform: scaleX(1); }
  #careers .roles li:hover::after { opacity: 1; translate: 6px 0; }
}
#careers .small-note { grid-column: 1; color: var(--ink-mute); font-size: 14px; max-width: 28em; }
#careers .actions { grid-column: 1; }
#careers .btn-ghost { color: var(--band); border-color: var(--band); }
#careers .btn-ghost::before { background: var(--band); }
#careers .btn-ghost:hover, #careers .btn-ghost:focus-visible { color: var(--ink); }
@media (max-width: 1000px) {
  #careers-pair { grid-template-columns: 1fr; }
  #careers .roles { grid-column: 1; grid-row: auto; margin: var(--cell) 0; }
  #careers h2 small { font-size: clamp(56px, 16vw, 96px); }
}

/* ===== hero balance on wide screens ===== */
.hero .wrap { width: min(100% - 2 * var(--cell), 1440px); grid-template-columns: 1fr 420px; column-gap: calc(var(--cell) * 4); align-items: center; min-height: calc(100svh - var(--cell) * 2); padding-top: var(--cell); padding-bottom: calc(var(--cell) * 2); }
.hero .label { align-self: start; margin-top: calc(var(--cell) * 1); }
.hero-copy { align-self: center; padding: 0; }
.hero h1 .big { font-size: clamp(64px, 12vw, 212px); }
.hero h1 .sub { font-size: clamp(20px, 2.1vw, 34px); }
.hero-lead { font-size: clamp(16px, 1.25vw, 19px); max-width: 36em; }
@media (min-width: 1500px) { .hero h1 { row-gap: 24px; } .hero-lead { margin-top: calc(var(--cell) * 1.5); } }
@media (max-width: 860px) { .hero .wrap { min-height: 0; align-items: start; } .hero .label { margin-top: 0; } }
.hero .wrap { width: min(100% - 96px, 1440px); }
@media (max-width: 860px) { .hero .wrap { width: min(100% - 2 * var(--cell), 1440px); } }
/* typed headline */
html.is-ready .hero h1 .big { animation: none; clip-path: none; }
.hero h1 .big .ch { visibility: hidden; }
.hero h1 .big .ch.on { visibility: visible; }
.hero h1 .big .caret { display: inline-block; width: .07em; height: .78em; background: var(--thread-on-ink); vertical-align: -.02em; margin-left: .05em; animation: blink 1s steps(1, end) infinite; }
.hero h1 .big .caret.is-gone { display: none; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero h1 .big .ch { visibility: visible; } .hero h1 .big .caret { display: none; } }
html.js .hero h1 .sub .ch { visibility: hidden; }
html.js .hero h1 .sub .ch.on { visibility: visible; }
html.js.is-ready .hero h1 .sub { animation: none; opacity: 1; translate: none; }
.hero h1 .sub .caret { height: .9em; width: .08em; vertical-align: -.1em; }
@media (prefers-reduced-motion: reduce) { html.js .hero h1 .sub .ch { visibility: visible; } }
.hero-note { display: none; }
.lb-punch { text-wrap: pretty; font-size: clamp(22px, 1.8vw, 28px); }
.lb-desc { font-size: 15px; }
.label-back .caret { display: inline-block; width: .08em; height: .85em; background: var(--thread); vertical-align: -.08em; margin-left: .06em; animation: blink 1s steps(1, end) infinite; }
.lb-body { align-content: start; }
.label-back { grid-template-rows: auto 1fr auto; }

/* ===== AI chart: the active row breathes instead of switching ===== */
:root { --spring: cubic-bezier(.22, 1.2, .36, 1); }
#ai .legend li { background: transparent; isolation: isolate; transition: none; }
#ai .legend li::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(200,16,46,.10), rgba(200,16,46,.035) 55%, transparent);
  transform: scaleX(0); transform-origin: 0 50%; opacity: 0;
  transition: transform .7s var(--ease), opacity .5s;
}
#ai .legend li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--stitch); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .8s var(--ease-io) .05s;
}
#ai .legend li.is-active { background: transparent; border-bottom-color: var(--hair); margin-inline: calc(-1 * var(--cell)); padding-inline: var(--cell); }
#ai .legend li.is-active::before { transform: scaleX(1); opacity: 1; }
#ai .legend li.is-active::after { transform: scaleX(1); }
#ai .legend .glyph { transition: background-color .45s ease .15s, border-color .45s ease .15s, box-shadow .45s ease .15s, transform .9s var(--spring); }
#ai .legend .glyph.is-flipped { transform: rotateY(360deg) translateY(-2px); }
#ai .legend .glyph svg { transition: stroke .45s ease .15s, stroke-dashoffset 1.4s var(--ease-io) .15s; }
#ai .legend .data b { transition: color .5s ease, translate .7s var(--ease); }
#ai .legend li.is-active .data b { translate: 6px 0; }
#ai .legend .data span, #ai .legend p { transition: opacity .5s ease, translate .6s var(--ease); }
#ai .legend li.is-active .data span { translate: 6px 0; }
#ai .legend li.is-active p { translate: 4px 0; }
#ai .legend h3 { transition: color .4s; }
#ai .legend li.is-active h3 { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { #ai .legend li::before, #ai .legend li::after, #ai .legend .glyph, #ai .legend .data b, #ai .legend .data span, #ai .legend p { transition: none; } }
#ai .legend .data b, .lb-punch, .hero h1 .sub, .brand .tag { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
@media (max-width: 480px) {
  .nav .wrap { gap: 10px; }
  .nav-logo img { height: 17px; }
  .nav-lang { font-size: 11px; }
  .nav-lang a, .nav-lang span { padding: 6px 6px; white-space: nowrap; }
  .nav-toggle { width: 36px; height: 36px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; white-space: nowrap; }
}

/* ===== system panel: breathe between descriptions ===== */
.sys-panel { position: relative; border-top: 0; padding-top: calc(var(--cell) + 1px); }
.sys-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); }
.sys-panel::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--stitch); transform: scaleX(0); transform-origin: 0 50%; }
.sys-panel.is-rule::after { animation: sew-rule .9s var(--ease-io) both; }
@keyframes sew-rule { to { transform: scaleX(1); } }
.sys-panel b, .sys-panel h3 { transition: opacity .22s ease, translate .35s var(--ease); }
.sys-panel.is-switching b, .sys-panel.is-switching h3, .sys-panel.is-switching p { opacity: 0; translate: 0 6px; }
.sys-panel p { transition: opacity .22s ease, translate .35s var(--ease); min-height: 5.4em; }
.sys-panel .caret { display: inline-block; width: .08em; height: .9em; background: var(--thread); vertical-align: -.1em; margin-left: .06em; animation: blink 1s steps(1, end) infinite; }
.sys-panel .hint { display: none; }
.node { transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .45s var(--ease), transform .6s var(--spring); }
.node:hover, .node.is-on { transform: translateY(-2px); }
.sysmap svg.wires line { transition: stroke .45s ease, stroke-width .45s ease; }
@media (prefers-reduced-motion: reduce) { .sys-panel.is-rule::after { animation: none; transform: scaleX(1); } .node, .sys-panel b, .sys-panel h3, .sys-panel p { transition: none; } }

/* ===== AI chart: a spotlight, not a highlight ===== */
#ai .legend { position: relative; }
#ai .legend::before {
  content: ""; position: absolute; inset: -40px calc(-1 * var(--gutter-x)); z-index: 0; pointer-events: none;
  background: radial-gradient(520px 320px at var(--mx, 50%) var(--my, 50%), rgba(200,16,46,.11), rgba(200,16,46,.03) 45%, transparent 70%);
  opacity: 0; transition: opacity .6s ease;
}
#ai .legend.is-lit::before { opacity: 1; }
#ai .legend li { z-index: 1; transition: opacity .7s ease, filter .7s ease, translate .7s var(--ease); }
#ai .legend li::before { display: none; }
#ai .legend li.is-active { background: transparent; }
#ai .legend:has(li.is-active) li:not(.is-active) { opacity: .38; translate: 0 0; }
#ai .legend li.is-active { translate: 8px 0; }
#ai .legend li.is-active .glyph {
  background: var(--thread); border-color: var(--thread);
  box-shadow: 0 0 0 1px var(--thread), 0 24px 48px -20px rgba(200,16,46,.7), 0 0 0 10px rgba(200,16,46,.06);
}
#ai .legend li.is-active .data b { color: var(--thread); translate: 0 0; scale: 1.04; transform-origin: 0 50%; }
#ai .legend .data b { transition: color .6s ease, scale .8s var(--spring); scale: 1; transform-origin: 0 50%; }
#ai .legend li.is-active .data span, #ai .legend li.is-active p { translate: 0 0; }
#ai .legend li::after { transition: transform 1.1s var(--ease-io) .1s; }
@media (prefers-reduced-motion: reduce) { #ai .legend::before { display: none; } #ai .legend li, #ai .legend .data b { transition: none; } }

/* ===== 基幹システム: streams of data flowing into ACE ===== */
#system.is-ink { padding: calc(var(--cell) * 5) 0 calc(var(--cell) * 4); }
#system .lead, #system .system > p { color: #d8d9d4; }
#system .system { grid-template-columns: 1fr; }
.sysflow { position: relative; display: grid; grid-template-columns: 300px 1fr 180px 300px; grid-template-areas: "st canvas ace panel"; align-items: stretch; min-height: 620px; column-gap: 0; }
.sf-canvas { grid-area: 1 / 1 / 2 / 5; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; }
.sf-stations { grid-area: st; position: relative; z-index: 1; display: grid; grid-template-rows: repeat(7, 1fr); align-content: stretch; }
.sysflow .node:not(.ace) {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "tick b" "tick span" "tick small"; column-gap: 14px; row-gap: 2px; align-content: center;
  background: transparent; border: 0; box-shadow: none; padding: 10px 12px 10px 0; color: var(--band); text-align: left; cursor: pointer; transform: none;
}
.sysflow .node:not(.ace)::before { content: ""; grid-area: tick; width: 3px; height: 56px; align-self: center; background: var(--band); opacity: .9; transition: background-color .4s, box-shadow .4s, height .5s var(--ease); }
.sysflow .node:not(.ace) b { grid-area: b; font: 800 30px/1 var(--f-cond); letter-spacing: 0; text-transform: uppercase; color: var(--band); transition: color .4s; }
.sysflow .node:not(.ace) span { grid-area: span; font-size: 13px; color: var(--ink-mute); transition: color .4s; }
.sysflow .node:not(.ace) small { grid-area: small; order: -1; font: 600 11px/1.2 var(--f-cond); letter-spacing: .28em; color: #6b7079; }
.sysflow .node:not(.ace):hover, .sysflow .node:not(.ace).is-on { transform: none; background: transparent; box-shadow: none; border: 0; color: var(--band); }
.sysflow .node:not(.ace).is-on::before { background: var(--thread-on-ink); box-shadow: 0 0 18px 2px rgba(224,24,58,.45); height: 72px; }
.sysflow .node:not(.ace).is-on b { color: #fff; }
.sysflow .node:not(.ace).is-on span { color: var(--band); }
.sysflow .node:not(.ace):focus-visible { outline: 2px solid var(--thread-on-ink); outline-offset: 2px; }
.sf-ace { grid-area: ace; position: relative; z-index: 1; display: grid; place-items: center; }
.sysflow .node.ace {
  width: 140px; aspect-ratio: 1; background: var(--cloth); color: var(--ink); border: 1px solid var(--cloth);
  box-shadow: 0 0 0 1px rgba(242,242,238,.15), 0 0 60px -10px rgba(242,242,238,.25); transform: none;
}
.sysflow .node.ace b { color: var(--ink); font-size: 30px; }
.sysflow .node.ace span { color: var(--mute); }
.sysflow .node.ace svg { stroke: var(--ink); width: 36px; height: 36px; }
.sysflow .node.ace::after { border-color: var(--thread-on-ink); opacity: .5; }
.sysflow .node.ace.is-on, .sysflow .node.ace:hover { box-shadow: 0 0 0 1px var(--thread-on-ink), 0 0 70px -6px rgba(224,24,58,.55); transform: none; }
.sysflow .sys-panel { grid-area: panel; z-index: 1; align-self: center; padding-left: calc(var(--cell) * 1.25); padding-top: var(--cell); color: var(--band); border: 0; min-height: 0; }
.sysflow .sys-panel::before { background: rgba(242,242,238,.45); }
.sysflow .sys-panel b { color: var(--band); }
.sysflow .sys-panel h3 { color: var(--band); }
.sysflow .sys-panel p { color: #d8d9d4; min-height: 6.5em; }
.sysflow .sys-panel .caret { background: var(--thread-on-ink); }
@media (max-width: 1200px) { .sysflow { grid-template-columns: 240px 1fr 150px 240px; } .sysflow .node:not(.ace) b { font-size: 26px; } }
@media (max-width: 1000px) {
  .sysflow { grid-template-columns: 1fr; grid-template-areas: "st" "ace" "panel"; min-height: 0; row-gap: var(--cell); }
  .sf-canvas { display: none; }
  .sf-stations { grid-template-rows: none; border-top: 1px solid rgba(242,242,238,.25); }
  .sysflow .node:not(.ace) { border-bottom: 1px solid rgba(242,242,238,.18); padding: 14px 0; }
  .sysflow .node:not(.ace)::before { height: 40px; }
  .sysflow .node:not(.ace).is-on::before { height: 48px; }
  .sf-ace { justify-items: start; }
  .sysflow .sys-panel { padding-left: 0; }
  .node.is-on:not(.ace) { background: transparent; color: var(--band); }
  .node.is-on:not(.ace) span { color: var(--band); }
}
/* glyph: redraw, never flip */
#ai .legend .glyph, #ai .legend .glyph.is-flipped { transform: none; }
#ai .legend li.is-active .glyph svg { animation: redraw 1.1s var(--ease-io) both; }
@keyframes redraw { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { #ai .legend li.is-active .glyph svg { animation: none; } }
.sysflow .node[data-pos], .sysflow .node.ace { grid-area: auto; }
.sf-stations .node { grid-column: 1; }
.sf-ace .node.ace { grid-area: auto; justify-self: center; align-self: center; }
.sysflow .node:not(.ace) span { max-width: 22em; }

/* ===== review pass 4 fixes + brand statements ===== */
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } }
.sym-row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.sym { width: 100%; max-width: 44px; aspect-ratio: 1; height: auto; }
@media (max-width: 860px) { .sym-row { grid-template-columns: repeat(4, 48px); } .sym { max-width: 48px; } }
#ai .legend h3 { font: 700 18px/1.35 var(--cjk); color: var(--ink); align-items: baseline; }
#ai .legend h3 span { color: var(--mute); }
#careers .roles li { cursor: pointer; }
.brand-inner { grid-template-columns: 1fr 1.6fr; }
.brand-inner li { grid-template-columns: 44px 1fr; column-gap: 16px; padding: 16px 0; align-items: start; font: 700 clamp(17px, 1.45vw, 22px)/1.45 var(--cjk); letter-spacing: -.005em; }
:lang(en) .brand-inner li { font: 600 clamp(17px, 1.4vw, 21px)/1.4 var(--f-body); letter-spacing: -.01em; }
.brand-inner li svg { width: 30px; height: 30px; margin-top: .2em; }
.brand-inner li .caret { display: inline-block; width: .08em; height: .9em; background: var(--thread-on-ink); vertical-align: -.1em; margin-left: .06em; animation: blink 1s steps(1, end) infinite; }
#brands.is-ink .brand-inner li { border-bottom-color: rgba(242,242,238,.16); }
.sysflow .node.ace { box-shadow: 0 0 0 1px rgba(242,242,238,.2); row-gap: 6px; }
.sysflow .node.ace.is-on, .sysflow .node.ace:hover { box-shadow: 0 0 0 1px var(--thread-on-ink); }
.sysflow .node.ace::after { display: none; }
.sysflow .sys-panel::before, .sysflow .sys-panel::after { display: none; }
.sysflow .sys-panel { padding-top: 0; }
.sysflow .node:not(.ace)::before { transition: background-color .6s ease, box-shadow .6s ease, height .6s var(--ease); }
.sysflow .node:not(.ace) b, .sysflow .node:not(.ace) span { transition: color .6s ease; }
.sysflow .node.ace { transition: box-shadow .6s ease; }
.brand-inner li > span { display: block; }
/* the flow block keeps one height: the panel reserves room for the longest description */
.sysflow { height: 640px; min-height: 0; }
.sysflow .sys-panel { align-self: center; height: 320px; overflow: hidden; }
.sysflow .sys-panel p { min-height: 0; }
.sysflow .node:not(.ace):focus:not(:focus-visible) { outline: 0; }
@media (max-width: 1200px) { .sysflow { height: 600px; } }
@media (max-width: 1000px) { .sysflow { height: auto; } .sysflow .sys-panel { height: auto; overflow: visible; } }
.hero-lead { font-size: clamp(17px, 1.45vw, 22px); line-height: 1.9; max-width: 26em; color: #e4e5e0; font-weight: 400; letter-spacing: .01em; margin-top: calc(var(--cell) * 1.75); }
:lang(en) .hero-lead { max-width: 30em; }
.hero-actions { margin-top: calc(var(--cell) * 2); }
/* nav shares the hero's edges */
.nav .wrap { width: min(100% - 96px, 1440px); }
@media (max-width: 860px) { .nav .wrap { width: min(100% - 2 * var(--cell), 1440px); } }
.sysflow .node:not(.ace) small { color: #8a8f98; }

/* ===== display face: squarer, sharper ===== */
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("fonts/BigShouldersDisplay-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, 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+FEFF, U+FFFD;
}
:root { --f-disp: "Big Shoulders Display", "Sofia Sans Extra Condensed", var(--cjk); }
.hero h1 .big { font-family: var(--f-disp); font-weight: 900; letter-spacing: 0; line-height: .84; text-shadow: none; }
.section h2 small { font-family: var(--f-disp); font-weight: 900; letter-spacing: .005em; }
:lang(en) .section h2 { font-family: var(--f-disp); font-weight: 900; }
.brand .mark { font-family: var(--f-disp); font-weight: 900; letter-spacing: 0; }
#careers h2 small { letter-spacing: 0; }
.label-head strong { font-family: var(--f-disp); font-weight: 900; letter-spacing: .01em; }
.offer h3 span { font-family: var(--f-disp); font-weight: 900; }
.sysflow .node b, .sysflow .node.ace b, .sysflow .sys-panel b { font-family: var(--f-disp); font-weight: 900; }
.table.history th { font-family: var(--f-disp); font-weight: 900; }
/* the hero says two lines and nothing more */
.hero-lead { display: none; }
.hero-actions { margin-top: calc(var(--cell) * 2.5); }
.hero-lead { display: block; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.95; max-width: 30em; color: #dadbd6; margin-top: calc(var(--cell) * 1.5); }
:lang(en) .hero-lead { max-width: 34em; }
.hero-actions { margin-top: calc(var(--cell) * 2); }
/* headline: one line on desktop, sized to its column */
.hero h1 .big { font-size: clamp(64px, 10.6vw, 184px); }
@media (min-width: 861px) { .hero h1 .big { white-space: nowrap; } }
html.js .hero-lead .ch { visibility: hidden; }
html.js .hero-lead .ch.on { visibility: visible; }
html.js.is-ready .hero-lead { animation: none; opacity: 1; translate: none; }
.hero-lead .caret { height: .95em; width: .07em; vertical-align: -.12em; }
@media (prefers-reduced-motion: reduce) { html.js .hero-lead .ch { visibility: visible; } }