/* ACEHIGH corporate site — the one-screen app
   Loaded after style.css. Everything here lives under html.is-app, which site.js adds before paint;
   without JS the long page in style.css still stands. Eight screens, each the whole viewport,
   the thread runs down the left as a ruler, the contact tag opens as a dialog. */

:root { --screen-ms: 700ms; --nav-h: 48px; } /* .nav is calc(--cell * 2) = 48px, border inside the box */
@media (prefers-reduced-motion: reduce) { :root { --screen-ms: 150ms; } }

/* ---------- the document stops scrolling; main is the stage ---------- */
html.is-app, html.is-app body { height: 100%; overflow: hidden; overscroll-behavior: none; scroll-behavior: auto; }
html.is-app main#main { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 0; }

html.is-app main > section {
  position: absolute; inset: 0; z-index: 0;
  overflow-y: auto; overflow-x: hidden;
  min-height: 100%; display: grid; margin: 0;
  visibility: hidden; opacity: 0; translate: 0 8vh;
  transition: opacity var(--screen-ms) var(--ease), translate var(--screen-ms) var(--ease), visibility 0s linear var(--screen-ms);
  scrollbar-width: thin; scrollbar-color: var(--hair) transparent;
  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);
  outline: 0;
}
html.is-app main > section::-webkit-scrollbar { width: 6px; }
html.is-app main > section::-webkit-scrollbar-thumb { background: var(--hair); border: 0; }
html.is-app main > section.is-ink, html.is-app #careers { scrollbar-color: transparent transparent; }
html.is-app main > section.is-ink::-webkit-scrollbar-thumb, html.is-app #careers::-webkit-scrollbar-thumb { background: transparent; }
html.is-app main > section.is-active { visibility: visible; opacity: 1; translate: none; transition-delay: 0s; z-index: 2; }
html.is-app main > section.is-leaving { visibility: visible; opacity: 0; translate: 0 -6vh; z-index: 1; }
html.is-app[data-dir="up"] main > section { translate: 0 -8vh; }
html.is-app[data-dir="up"] main > section.is-active { translate: none; }
html.is-app[data-dir="up"] main > section.is-leaving { translate: 0 6vh; }
/* failsafe: until the engine has marked a screen, the first one is on stage */
html.is-app main:not(:has(> section.is-active)) > section:first-child { visibility: visible; opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) {
  html.is-app main > section, html.is-app main > section.is-leaving, html.is-app[data-dir="up"] main > section, html.is-app[data-dir="up"] main > section.is-leaving {
    translate: none; transition: opacity 150ms linear, visibility 0s linear 150ms;
  }
}

/* every screen: no band padding, the .wrap is the stage, content centred in it */
html.is-app #top, html.is-app #ai, html.is-app #brands, html.is-app #system,
html.is-app #partner, html.is-app #careers, html.is-app #company, html.is-app #contact { padding: 0; min-height: 100%; }
html.is-app main > section > .wrap {
  width: min(100% - 96px, 1680px); margin-inline: auto;
  min-height: 100%; display: grid; align-content: center;
  padding-block: calc(var(--cell) * 2); row-gap: calc(var(--cell) * 1.5);
}
html.is-app .section-head { margin-bottom: 0; }
html.is-app .section .actions { margin-top: 0; }
html.is-app #ai h2 small, html.is-app #brands h2 small, html.is-app #system h2 small, html.is-app #partner h2 small,
html.is-app #company h2 small, html.is-app #contact h2 small { font-size: clamp(36px, 3.75vw, 64px); }
html.is-app:lang(en) .section h2 { font-size: clamp(36px, 3.75vw, 64px); }
html.is-app .nav .wrap { width: min(100% - 96px, 1680px); }
html.is-app .hero { background-color: var(--ink); }

/* a button dressed as a ghost tape must not keep the browser's grey */
html.is-app button.btn-ghost { background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }

/* head left, content right: the screens whose content is wide */
html.is-app #ai > .wrap, html.is-app #brands > .wrap, html.is-app #partner > .wrap, html.is-app #company > .wrap, html.is-app #contact > .wrap, html.is-app #system > .wrap {
  grid-template-columns: minmax(280px, .9fr) 2.4fr; column-gap: calc(var(--cell) * 3);
}
html.is-app #ai .section-head, html.is-app #brands .section-head, html.is-app #partner .section-head,
html.is-app #company .section-head, html.is-app #contact .section-head, html.is-app #system .section-head {
  grid-column: 1; align-self: start; position: sticky; top: calc(var(--cell) * 2);
}
html.is-app #brands .brands, html.is-app #brands .channels, html.is-app #partner .offers, html.is-app #partner .actions,
html.is-app #company .company, html.is-app #contact .contact { grid-column: 2; }

/* ---------- 01 top: already one viewport; the wrap just fills the stage ---------- */
html.is-app .hero { padding: 0; overflow-x: hidden; }
html.is-app .hero > .wrap { min-height: 100%; align-items: center; align-content: center; }

/* ---------- 02 ai: the chart becomes 4×2 tiles; the label's reverse prints the picked job ---------- */
html.is-app #ai > .wrap { grid-template-columns: minmax(280px, 1fr) 2.6fr 1.15fr; column-gap: calc(var(--cell) * 2); }
html.is-app #ai .legend { grid-column: 2; align-self: start; }
html.is-app #ai .chart-back { grid-column: 3; align-self: stretch; }
html.is-app #ai .legend {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--hair); border: 1px solid var(--hair); border-top-color: var(--ink);
}
html.is-app #ai .legend::before { inset: -40px; }
html.is-app #ai .legend li, html.is-app #ai .legend li.is-active {
  display: grid; grid-template-columns: 1fr; grid-template-areas: "glyph" "name" "punch";
  align-content: start; row-gap: 12px;
  margin: 0; padding: var(--cell); min-height: 200px; border: 0;
  background: var(--cloth); color: var(--ink); translate: none;
  transition: background-color .4s ease, color .4s ease, opacity .5s ease;
}
html.is-app #ai .legend li p, html.is-app #ai .legend li .data span { display: none; }
html.is-app #ai .legend .glyph { grid-area: glyph; width: 64px; height: 64px; }
html.is-app #ai .legend .glyph svg { width: 46px; height: 46px; }
html.is-app #ai .legend h3 { grid-area: name; font: 600 14px/1.4 var(--cjk); color: var(--mute); display: grid; gap: 2px; }
html.is-app #ai .legend h3 span { font: 700 11px/1.3 var(--f-cond); letter-spacing: .14em; color: var(--mute); }
html.is-app #ai .legend .data { grid-area: punch; row-gap: 0; padding: 0; }
html.is-app #ai .legend .data b { font: 800 clamp(17px, 1.2vw, 21px)/1.4 var(--cjk); letter-spacing: -.01em; color: var(--ink); scale: 1; translate: none; }
html.is-app:lang(en) #ai .legend .data b { font: 800 clamp(18px, 1.25vw, 22px)/1.2 var(--f-body); letter-spacing: -.02em; }
html.is-app #ai .legend li.is-in:not(.is-active) { opacity: .72; }
html.is-app #ai .legend li.is-active { background: var(--ink); color: var(--band); opacity: 1; }
html.is-app #ai .legend li.is-active h3, html.is-app #ai .legend li.is-active h3 span { color: var(--ink-mute); }
html.is-app #ai .legend li.is-active .data b { color: var(--band); translate: none; scale: 1; }
html.is-app #ai .legend li.is-active .glyph { border-color: var(--thread); box-shadow: 0 0 0 1px var(--thread), 0 18px 36px -16px rgba(224,24,58,.7); }
html.is-app #ai .legend li::after { bottom: 0; }
@media (hover: hover) { html.is-app #ai .legend li:not(.is-active):hover { opacity: 1; } }

/* the reverse of the label: cloth card, running stitch, typed text */
html.is-app .chart-back {
  position: relative; display: grid; align-content: start; row-gap: 14px;
  padding: calc(var(--cell) * 1.25) var(--cell) var(--cell); min-height: 100%;
  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);
  border: 1px solid var(--hair); color: var(--ink);
  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);
}
html.is-app .chart-back::before { content: ""; position: absolute; inset: 8px; border: 1px dashed var(--thread); pointer-events: none; }
html.is-app .chart-back::after { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 1px; background: var(--stitch); }
html.is-app .chart-back .cb-kicker { font: 700 12px/1 var(--f-cond); letter-spacing: .22em; text-transform: uppercase; color: var(--thread); border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
html.is-app .chart-back .cb-title { font: 700 clamp(20px, 1.5vw, 26px)/1.3 var(--cjk); letter-spacing: -.01em; min-height: 1.3em; }
html.is-app .chart-back .cb-data { display: grid; row-gap: 4px; }
html.is-app .chart-back .cb-data b { display: block; font: 800 clamp(20px, 1.6vw, 26px)/1.35 var(--cjk); letter-spacing: -.01em; color: var(--thread); text-wrap: balance; }
html.is-app:lang(en) .chart-back .cb-data b { font: 800 clamp(22px, 1.7vw, 28px)/1.15 var(--f-body); letter-spacing: -.02em; }
html.is-app .chart-back .cb-data span { font: 700 11px/1.6 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
html.is-app .chart-back .cb-text { font-size: 16px; line-height: 1.9; min-height: 5.7em; }
html.is-app .chart-back .caret { display: inline-block; width: .08em; height: .9em; background: var(--thread); vertical-align: -.1em; margin-left: .06em; animation: blink 1s steps(1, end) infinite; }

/* ---------- 03 brands: three columns of the composition label ---------- */
html.is-app #brands .brands { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--cell); border-top: 0; align-items: start; }
html.is-app #brands .channels { margin-top: 0; }
html.is-app #brands .brand { border-bottom: 0; border-left: 1px solid rgba(242,242,238,.28); padding-left: var(--cell); transition: opacity .45s ease; }
html.is-app #brands .brand::before { inset: 0 auto 0 -1px; width: 3px; transform: scaleY(0); transform-origin: 50% 0; transition: transform .45s var(--ease-io); }
html.is-app #brands .brand:has(.brand-head[aria-expanded="true"])::before { transform: scaleY(1); }
html.is-app #brands .brands:has(.brand-head[aria-expanded="true"]) .brand:not(:has(.brand-head[aria-expanded="true"])) { opacity: .45; }
html.is-app #brands .brand-head { grid-template-columns: 1fr; grid-template-areas: none; row-gap: 14px; padding: 0 0 var(--cell); align-items: start; }
html.is-app #brands .brand-head > span:first-child { grid-area: auto; }
html.is-app #brands.is-ink .brand .mark { font-size: clamp(36px, 3.3vw, 60px); line-height: .9; text-wrap: balance; }
html.is-app #brands .brand .meta { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center; justify-items: start; text-align: left; max-width: none; }
html.is-app #brands .brand .meta > span:first-child { grid-area: auto; font-size: 13px; letter-spacing: .08em; text-align: left; max-width: none; }
html.is-app #brands .brand .meta .open { grid-area: auto; margin-top: 0; }
html.is-app #brands .brand-inner { grid-template-columns: 1fr; row-gap: var(--cell); padding-bottom: var(--cell); }
html.is-app #brands .brand-inner li { font-size: clamp(15px, 1.05vw, 18px); padding: 12px 0; grid-template-columns: 36px 1fr; column-gap: 12px; }
html.is-app #brands .brand-inner li svg { width: 26px; height: 26px; }
@media (hover: hover) {
  html.is-app #brands .brand:has(.brand-head:hover)::before, html.is-app #brands .brand:has(.brand-head:focus-visible)::before { transform: scaleY(1); }
  html.is-app #brands.is-ink .brand-head:hover .mark { color: var(--thread-on-ink); }
  html.is-app #brands.is-ink .brand-head:hover .tag { color: var(--band); }
  html.is-app #brands.is-ink .brand-head:hover .meta { color: var(--ink-mute); }
  html.is-app #brands.is-ink .brand-head:hover .meta span { color: var(--band); }
  html.is-app #brands.is-ink .brand-head:hover .open { border-color: var(--band); color: var(--band); }
}

/* ---------- 04 system: head and the one sentence share the first row, the flow takes the rest ---------- */
html.is-app #system .system { display: contents; }
html.is-app #system .system > p { grid-column: 2; align-self: end; margin: 0; max-width: 40em; }
html.is-app #system .sysflow { grid-column: 1 / -1; height: clamp(480px, 100svh - 280px, 640px); min-height: 0; }
html.is-app #system > .wrap { row-gap: var(--cell); padding-block: calc(var(--cell) * 1.5); }

/* ---------- 05 partner: four offers across, real estate as one footnote line ---------- */
html.is-app #partner > .wrap { grid-template-columns: minmax(260px, .8fr) 3fr; }
html.is-app #partner .offers { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: calc(var(--cell) * 1.5); row-gap: var(--cell); border-top: 0; align-items: start; }
html.is-app #partner .offer { display: block; border-top: 1px solid var(--ink); border-bottom: 0; padding: var(--cell) 0 0; }
html.is-app #partner .offer h3 { margin-bottom: 14px; }
html.is-app #partner .offer h3 span { font-size: clamp(22px, 1.9vw, 32px); }
html.is-app #partner .offer ul { grid-template-columns: 1fr; margin-top: 12px; }
html.is-app #partner #realestate {
  grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; column-gap: var(--cell); align-items: baseline;
  border-top: 1px solid var(--hair); padding: 12px 0; font-size: 14px; color: var(--mute);
}
html.is-app #partner #realestate h3 { display: flex; gap: 10px; align-items: baseline; font-size: 15px; margin: 0; }
html.is-app #partner #realestate h3 span { order: 0; font: 700 11px/1 var(--f-cond); letter-spacing: .14em; color: var(--mute); }
html.is-app #partner #realestate > div { display: contents; }
html.is-app #partner #realestate p { font-size: 14px; color: var(--mute); }
html.is-app #partner #realestate .small-note { margin: 0; font-size: 12px; white-space: nowrap; }

/* ---------- 06 careers: the ink room is keyed on the section itself now ---------- */
html.is-app #careers {
  display: grid; grid-template-columns: 100%; column-gap: 0; align-items: stretch;
  background-color: var(--ink); color: var(--band);
  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);
}
html.is-app #careers::before, html.is-app #careers::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: repeating-linear-gradient(90deg, var(--thread-on-ink) 0 6px, transparent 6px 12px); }
html.is-app #careers::before { top: 0; } html.is-app #careers::after { bottom: 0; }
html.is-app #careers-pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--cell) * 5); align-items: start; }
html.is-app #careers h2 small { font-size: clamp(48px, 6vw, 104px); }
html.is-app #careers .roles { margin-top: 10px; }
html.is-app #careers .actions { margin-top: var(--cell); }

/* ---------- 07 company: two tables with room to breathe ---------- */
html.is-app #company .company { grid-template-columns: 1fr 1fr; column-gap: calc(var(--cell) * 3); }
html.is-app .table th, html.is-app .table td { padding: 12px 0; }
html.is-app .table th { padding-right: 12px; }
html.is-app .table.history th { padding: 14px 12px 12px 0; }
html.is-app .table.history td { padding: 16px 0 12px; }

/* ---------- 08 contact: the button opens the tag, the map fills the right, the footer closes the garment ---------- */
html.is-app #contact .contact { grid-template-columns: 1.1fr 1.4fr; column-gap: calc(var(--cell) * 2); align-items: stretch; }
html.is-app #contact .contact > div:first-child { display: grid; align-content: start; }
html.is-app #contact .contact .btn-primary { height: auto; font-size: 20px; padding: 18px 28px; justify-self: start; cursor: pointer; }
html.is-app #contact .contact dl { border-top: 1px solid var(--ink); margin-top: calc(var(--cell) * 1.5); }
html.is-app #contact .contact dl div { border-bottom-color: var(--hair); font-size: 15px; }
html.is-app #contact .contact dt { color: var(--mute); }
html.is-app #contact .contact dd a { color: var(--ink); }
html.is-app #contact .contact dd.tel { color: var(--ink); }
html.is-app #contact .map { aspect-ratio: auto; height: 100%; min-height: clamp(420px, 100svh - 420px, 560px); }
html.is-app #contact .footer { grid-column: 1 / -1; background: transparent; color: var(--mute); padding: var(--cell) 0 0; border-top: 1px solid var(--hair); }
html.is-app #contact .footer .wrap { width: 100%; margin: 0; }
html.is-app #contact .footer img { filter: none; opacity: 1; }
html.is-app #contact .footer a { color: var(--ink); }

/* ---------- the thread as a ruler: one stitch per screen, the knot on the current one ---------- */
html.is-app .spine {
  position: fixed; left: 36px; top: var(--nav-h); bottom: 0; height: auto; width: 1px; z-index: 5;
  display: grid; grid-template-rows: repeat(var(--n, 8), 1fr);
  background: none;
}
html.is-app .spine::before { content: ""; position: absolute; inset: 0; width: 1px; background: var(--stitch-v); }
html.is-app .spine i { position: relative; display: block; }
html.is-app .spine i::before { content: ""; position: absolute; left: -3px; top: 50%; width: 7px; height: 1px; background: var(--thread); }
html.is-app .spine::after {
  content: ""; position: absolute; left: -4.5px; width: 10px; height: 10px; border-radius: 50%; background: var(--thread);
  top: calc((var(--i, 0) + .5) / var(--n, 8) * 100%); translate: 0 -50%;
  opacity: 1; transform: none; animation: none;
  box-shadow: 0 0 0 3px var(--band);
  transition: top var(--screen-ms) var(--ease);
}
html.is-app .spine.is-done::after { opacity: 1; transform: none; animation: none; }
html.is-app:has(main > section.is-ink.is-active) .spine::after, html.is-app:has(#careers.is-active) .spine::after, html.is-app:has(#top.is-active) .spine::after { box-shadow: 0 0 0 3px var(--ink); }
html.is-app:has(main > section.is-deep.is-active) .spine::after { box-shadow: 0 0 0 3px var(--band-deep); }

/* page count after the language switch */
html.is-app .screen-count { font: 700 13px/1 var(--f-cond); letter-spacing: .14em; color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- the contact tag, now a dialog ---------- */
html.is-app .cdialog {
  position: fixed; inset: 0; margin: auto; padding: 0; border: 0; background: transparent; color: #fff;
  width: min(560px, 100% - 2 * var(--cell)); max-width: none; max-height: calc(100svh - 2 * var(--cell));
  overflow: visible;
}
html.is-app .cdialog::backdrop { background: rgba(22,22,26,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: cd-fade 320ms ease both; }
html.is-app .cdialog[open] { animation: cd-in 320ms var(--ease) both; }
@keyframes cd-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: none; } }
@keyframes cd-fade { from { opacity: 0; } to { opacity: 1; } }
html.is-app .cdialog-tag {
  position: relative; max-height: calc(100svh - 2 * var(--cell)); overflow-y: auto;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px), var(--thread);
  color: #fff; padding: calc(var(--cell) * 1.75) calc(var(--cell) * 1.5) calc(var(--cell) * 1.25);
  box-shadow: 0 14px 22px -16px rgba(22,22,26,.55), 0 42px 56px -36px rgba(22,22,26,.7);
  display: grid; row-gap: 14px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.4) transparent;
}
html.is-app .cdialog-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; }
html.is-app .cd-close {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; padding: 0; z-index: 1;
  border: 1px solid rgba(255,255,255,.7); background: transparent; color: #fff; cursor: pointer;
  display: grid; place-items: center; transition: background-color .2s, color .2s;
}
html.is-app .cd-close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
html.is-app .cd-close:hover, html.is-app .cd-close:focus-visible { background: #fff; color: var(--thread); }
html.is-app .cd-kicker { font: 700 12px/1 var(--f-cond); letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.85); }
html.is-app .cdialog h2 { font: 700 clamp(24px, 2vw, 30px)/1.3 var(--cjk); letter-spacing: -.01em; padding-right: 56px; }
html.is-app:lang(en) .cdialog h2 { font: 900 clamp(32px, 2.6vw, 40px)/.95 var(--f-disp); letter-spacing: 0; text-transform: uppercase; }
html.is-app .cd-lead { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.92); }
html.is-app .cdialog .cform { margin-top: 6px; }
html.is-app .cdialog .btn-primary { background: var(--band); color: var(--thread); border-color: var(--band); box-shadow: none; cursor: pointer; }
html.is-app .cdialog .btn-primary::before { background: #fff; }
html.is-app .cdialog .btn-primary::after { border-color: var(--thread); }
html.is-app .cdialog :focus-visible { outline-color: #fff; }
html.is-app .cd-alt { border-top: 1px solid rgba(255,255,255,.7); margin-top: 6px; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--cell); }
html.is-app .cd-alt div { display: grid; row-gap: 2px; padding: 12px 0 0; font-size: 14px; }
html.is-app .cd-alt dt { font: 700 11px/1.4 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
html.is-app .cd-alt dd a { color: #fff; font: 600 16px/1.4 var(--f-cond); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  html.is-app .cdialog[open], html.is-app .cdialog::backdrop { animation: none; }
  html.is-app .spine::after { transition: none; }
}

/* ---------- middle widths: the head sits above its content again ---------- */
@media (max-width: 1100px) {
  html.is-app #ai > .wrap, html.is-app #brands > .wrap, html.is-app #partner > .wrap, html.is-app #company > .wrap, html.is-app #contact > .wrap, html.is-app #system > .wrap {
    grid-template-columns: 1fr; column-gap: 0; align-content: start;
  }
  html.is-app #ai .section-head, html.is-app #brands .section-head, html.is-app #partner .section-head,
  html.is-app #company .section-head, html.is-app #contact .section-head, html.is-app #system .section-head { position: static; }
  html.is-app #ai .legend, html.is-app #ai .chart-back, html.is-app #brands .brands, html.is-app #brands .channels, html.is-app #partner .offers,
  html.is-app #partner .actions, html.is-app #company .company, html.is-app #contact .contact, html.is-app #system .system > p, html.is-app #system .sysflow { grid-column: auto; }
  html.is-app #partner .offers { grid-template-columns: repeat(2, 1fr); }
  html.is-app .chart-back { min-height: 0; }
}
@media (max-width: 1000px) {
  html.is-app #system .sysflow { height: auto; }
  html.is-app #careers-pair { grid-template-columns: 1fr; }
}

/* ---------- phones: the screens scroll inside themselves, one column everywhere ---------- */
@media (max-width: 860px) {
  html.is-app main > section > .wrap { width: min(100% - 2 * var(--cell), 1680px); align-content: start; padding-block: var(--cell) calc(var(--cell) * 3); row-gap: var(--cell); }
  html.is-app .hero > .wrap { align-items: start; align-content: start; min-height: 0; }
  html.is-app .nav .wrap { width: min(100% - 2 * var(--cell), 1680px); }
  html.is-app .spine, html.is-app .screen-count { display: none; }
  html.is-app .section-head { margin-bottom: 0; }
  html.is-app #ai .legend { grid-template-columns: repeat(2, 1fr); }
  html.is-app #ai .legend li, html.is-app #ai .legend li.is-active { min-height: 150px; padding: 16px; row-gap: 8px; }
  html.is-app #ai .legend .glyph { width: 52px; height: 52px; }
  html.is-app #ai .legend .glyph svg { width: 38px; height: 38px; }
  html.is-app .chart-back .cb-text { min-height: 0; }
  html.is-app #brands .brands { grid-template-columns: 1fr; row-gap: var(--cell); }
  html.is-app #brands .brand { border-left: 0; border-top: 1px solid rgba(242,242,238,.28); padding-left: 0; padding-top: var(--cell); }
  html.is-app #brands .brand::before { inset: -1px 0 auto 0; width: auto; height: 3px; transform: scaleX(0); transform-origin: 0 50%; }
  html.is-app #brands .brand:has(.brand-head[aria-expanded="true"])::before { transform: scaleX(1); }
  html.is-app #system > .wrap { padding-block: var(--cell) calc(var(--cell) * 3); }
  html.is-app #partner .offers { grid-template-columns: 1fr; row-gap: var(--cell); }
  html.is-app #partner #realestate { grid-template-columns: 1fr; row-gap: 6px; }
  html.is-app #partner #realestate .small-note { white-space: normal; }
  html.is-app #company .company { grid-template-columns: 1fr; row-gap: calc(var(--cell) * 1.5); }
  html.is-app #contact .contact { grid-template-columns: 1fr; row-gap: calc(var(--cell) * 1.5); }
  html.is-app #contact .contact .btn-primary { font-size: 17px; padding: 14px 22px; }
  html.is-app #contact .map { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  html.is-app #contact .footer { padding-top: var(--cell); }
  /* the tag becomes a sheet from the bottom; 16px fields so iOS does not zoom */
  html.is-app .cdialog { inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; height: 100svh; max-height: 100svh; }
  html.is-app .cdialog[open] { animation-name: cd-up; }
  html.is-app .cdialog-tag { height: 100%; max-height: none; padding: calc(var(--cell) * 1.75) var(--cell) calc(var(--cell) * 2); }
  html.is-app .cdialog .cform input, html.is-app .cdialog .cform select, html.is-app .cdialog .cform textarea { font-size: 16px; }
  html.is-app .cd-alt { grid-template-columns: 1fr; }
}
@keyframes cd-up { from { opacity: 0; translate: 0 100%; } to { opacity: 1; translate: none; } }
@media (max-width: 860px) and (prefers-reduced-motion: reduce) { html.is-app .cdialog[open] { animation: none; } }

/* ---------- nav belongs to the screen (2026-11-02 「导航和内容不是很协调」) ----------
   No cream strip over ink screens: the nav floats on the active screen, shares its column,
   takes its tone, and is tall enough to sit in the same scale as the screen's type. */
html.is-app { --nav-h: 72px; }
html.is-app .nav { height: var(--nav-h); background: transparent; border-bottom: 0; transition: color .5s var(--ease); }
html.is-app .nav::after { content: ""; position: absolute; left: 48px; right: 48px; bottom: 0; height: 1px; background: currentColor; opacity: .14; transition: opacity .5s; }
html.is-app main#main { inset: 0; }
html.is-app main > section { padding-top: var(--nav-h); }
html.is-app .nav-links { gap: 6px; }
html.is-app .nav-links a { font-size: 14px; font-weight: 600; color: inherit; padding: 8px 12px; opacity: .72; transition: opacity .2s, color .5s; }
html.is-app .nav-links a:hover, html.is-app .nav-links a.is-current { opacity: 1; }
html.is-app .nav-links a::after { background: var(--thread); }
html.is-app .nav-logo img { height: 24px; transition: filter .5s; }
html.is-app .nav-lang { border-color: currentColor; transition: border-color .5s; }
html.is-app .nav-lang a { color: inherit; }
html.is-app[data-tone="ink"] .nav-lang span { background: var(--band); color: var(--ink); }
html.is-app[data-tone="band"] .nav-lang span { background: var(--ink); color: var(--band); }
html.is-app .screen-count { color: inherit; opacity: .6; font-size: 14px; min-width: 56px; text-align: right; }
html.is-app .nav-progress { display: none; }
html.is-app[data-tone="ink"] .nav { color: var(--band); }
html.is-app[data-tone="ink"] .nav-logo img { filter: invert(1); }
html.is-app[data-tone="ink"] .nav::after { opacity: .18; }
html.is-app[data-tone="band"] .nav { color: var(--ink); }
html.is-app .spine { top: var(--nav-h); }
@media (max-width: 860px) {
  html.is-app { --nav-h: 56px; }
  html.is-app .nav::after { left: var(--cell); right: var(--cell); }
  html.is-app .nav.is-open { color: var(--band); }
}