/* e-consultants — the European distributor of Callitor.
   Thesis: the old firm. 1987, an e- name from the first wave of the web. Established,
   unhurried, editorial — ink on paper, one accent. Newsreader carries the voice (headlines,
   body); Hanken Grotesk 500 is the wordmark; Azeret Mono is the system layer (labels,
   node ids, numbers, scripts). The orange square is the punctuation — same object as
   the hyphen-slot mark. Self-hosted fonts, no external requests, no inline style or
   script (strict CSP). */

@import url("../fonts/fonts.css?v=c89da73d");

:root {
  --paper:        #f3efe7;
  --paper-2:      #ebe5da;
  --ink:          #141210;
  --ink-2:        #1b1815;
  --ink-soft:     #4b4641;
  --ink-faint:    #8a837b;
  --line:         rgba(20, 18, 16, .14);
  --line-strong:  rgba(20, 18, 16, .30);
  --accent:       #ff4f12;
  --on-ink:       #f3efe7;
  --on-ink-soft:  #a9a298;
  --on-ink-line:  rgba(243, 239, 231, .16);
  --serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --mono:  'Azeret Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --wrap: 1180px;
  --pad: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--serif); font-variation-settings: 'opsz' 18; font-weight: 400;
  font-size: 18px; line-height: 1.55; color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
  font-feature-settings: 'kern', 'liga', 'onum';
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--ink); }
code { font-family: var(--mono); font-size: .82em; background: var(--paper-2); padding: .05em .4em; border-radius: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

/* ---------- type roles ---------- */
.display { font-family: var(--serif); font-variation-settings: 'opsz' 72; font-weight: 500; letter-spacing: -.018em; line-height: 1.0; }
.display em { font-style: italic; font-weight: 450; }
.kicker, .eyebrow { display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.kicker::before, .eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--accent); flex: none; }
.lead { font-variation-settings: 'opsz' 24; font-size: clamp(1.12rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--ink-soft); }
.muted { color: var(--ink-faint); }
.ul { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
.ul:hover { text-decoration-color: var(--ink); }
.link-acc, .lead a, .prose a, .acc { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }

/* the wordmark: Hanken Grotesk 500. The hyphen stays in the text (transparent) so
   screen readers still say "e-consultants"; the orange square sits on the e's
   crossbar (0.595em from the em top), S1 size 0.125em. */
.brand-word { font-family: 'Hanken Grotesk Wordmark', sans-serif; font-variation-settings: normal; font-weight: 500; font-size: 30px; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.mark { position: relative; display: inline-block; height: 1em; line-height: 1; vertical-align: baseline; }
.mark .hy { color: transparent; }
.mark::after { content: ""; position: absolute; left: 50%; top: .595em; width: .125em; height: .125em; background: var(--accent); transform: translate(-50%, -50%); }

/* three-beat divider — the square, three times, instead of a rule */
.beats { width: 30px; height: 6px;
  background-image: linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent));
  background-size: 6px 6px; background-repeat: no-repeat; background-position: 0 0, 12px 0, 24px 0; }
.beats-gap { margin: clamp(48px, 6vw, 80px) auto; }

/* ---------- buttons: mono labels, not pills ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px; border: 1px solid var(--ink);
  border-radius: 2px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap; transition: background .25s, color .25s, border-color .25s;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn .arrow { font-family: var(--serif); font-size: 16px; line-height: 0; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-row.center { justify-content: center; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; height: 66px; display: flex; align-items: center;
  border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; }
.nav.solid { background: rgba(243, 239, 231, .9); backdrop-filter: blur(10px); border-color: var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; }
.nav-right { display: flex; align-items: center; gap: 22px; }
.nav-link { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.nav-link:hover { color: var(--ink); }
.lang { display: inline-flex; gap: 12px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; }
.lang a { color: var(--ink-faint); padding-bottom: 2px; border-bottom: 1.5px solid transparent; }
.lang a.on { color: var(--ink); border-bottom-color: var(--accent); }
.nav .btn { padding: 10px 14px; font-size: 11px; }
@media (max-width: 820px) { .nav-plain { display: none; } }
@media (max-width: 460px) { .nav-right { gap: 14px; } .brand-word { font-size: 24px; } .nav .btn { padding: 9px 11px; } }

/* ---------- the opener ---------- */
.opener { padding: 128px 0 clamp(56px, 7vw, 88px); }
.opener .beats { margin-bottom: 22px; }
.dateline { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.dateline .sep { margin: 0 10px; color: var(--line-strong); }
.opener h1 { font-size: clamp(2.6rem, 6.4vw, 5.6rem); margin: 22px 0 36px; max-width: 17ch; text-wrap: balance; }
.opener-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .opener-grid { grid-template-columns: 1fr; gap: 32px; } }
.opener .lead { max-width: 40ch; }
.opener .actions { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.shot-note { margin-top: 14px; text-align: right; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
@media (max-width: 900px) { .shot-note { text-align: left; } }

/* the trades, straight away — same six frames, same crossfade as the band below */
.hero-shot { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 4px; background: var(--paper-2); }
.hero-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%;
  opacity: 0; animation: tradefade 27s linear infinite both; }
.hero-shot .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 46px 16px 14px;
  background: linear-gradient(180deg, transparent, rgba(20,18,16,.72)); }
.hero-shot .cap span { position: absolute; left: 16px; bottom: 14px; opacity: 0; font-family: var(--mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(243,239,231,.92); animation: tradefade 27s linear infinite both; }
.hero-shot img:nth-child(1), .hero-shot .cap span:nth-child(1) { animation-delay: 0s; }
.hero-shot img:nth-child(2), .hero-shot .cap span:nth-child(2) { animation-delay: 4.5s; }
.hero-shot img:nth-child(3), .hero-shot .cap span:nth-child(3) { animation-delay: 9s; }
.hero-shot img:nth-child(4), .hero-shot .cap span:nth-child(4) { animation-delay: 13.5s; }
.hero-shot img:nth-child(5), .hero-shot .cap span:nth-child(5) { animation-delay: 18s; }
.hero-shot img:nth-child(6), .hero-shot .cap span:nth-child(6) { animation-delay: 22.5s; }
/* each frame holds its whole sixth and hands over with a 0.7s overlap, so nothing flashes empty */
@keyframes tradefade { 0% { opacity: 0; } 2.6% { opacity: 1; } 16.67% { opacity: 1; } 19.27% { opacity: 0; } 100% { opacity: 0; } }

/* ---------- chapters ---------- */
.chapter { padding: clamp(72px, 9vw, 124px) 0; }
.chapter-head { margin-bottom: clamp(34px, 5vw, 56px); }
.chapter-head h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); margin-top: 14px; max-width: 24ch; text-wrap: balance; }
.chapter-head .lead { margin-top: 18px; max-width: 58ch; }
/* the headline feature: a script in mono against a voice in serif */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); }
@media (max-width: 820px) { .versus { grid-template-columns: 1fr; } }
.versus .lbl { display: inline-flex; margin-bottom: 18px; }
.ivr { border-left: 1px solid var(--line-strong); padding-left: 22px; }
.ivr p { font-family: var(--mono); font-size: 13.5px; line-height: 1.7; color: var(--ink-faint); }
.ivr p + p { margin-top: 10px; }
.ivr .keys { display: flex; gap: 8px; margin-top: 22px; }
.ivr .keys span { width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: 3px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); }
.real { border-left: 3px solid var(--accent); padding-left: 22px; }
.real q { quotes: "\201C" "\201D"; display: block; font-variation-settings: 'opsz' 48; font-style: italic; font-weight: 450;
  font-size: clamp(1.45rem, 2.4vw, 1.95rem); line-height: 1.28; letter-spacing: -.012em; }
.real .after { margin-top: 18px; color: var(--ink-soft); max-width: 38ch; }

dl.traits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); margin-top: clamp(40px, 6vw, 64px); }
@media (max-width: 820px) { dl.traits { grid-template-columns: 1fr; } }
dl.traits > div { padding: 22px 0 24px; }
dl.traits > div::before { content: ""; display: block; width: 6px; height: 6px; background: var(--accent); margin-bottom: 12px; }
dl.traits dt { font-variation-settings: 'opsz' 24; font-weight: 600; font-size: 1.2rem; letter-spacing: -.01em; }
dl.traits dd { margin-top: 6px; color: var(--ink-soft); max-width: 46ch; }

/* who we are — a dense column with a pull-quote, beside the one still photograph */
.about { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }
.about h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin: 14px 0 24px; max-width: 22ch; text-wrap: balance; }
.prose p { font-size: 1.1rem; line-height: 1.6; color: var(--ink-soft); }
.prose p + p { margin-top: 16px; }
.prose p strong { color: var(--ink); font-weight: 600; }
.pull { margin: 30px 0; padding-left: 22px; border-left: 3px solid var(--accent); font-variation-settings: 'opsz' 48; font-style: italic;
  font-weight: 450; font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.photo { position: relative; }
.photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%; border-radius: 4px; background: var(--paper-2); }
.photo figcaption { margin-top: 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }

/* services — a table of contents, not a card grid */
dl.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); }
@media (max-width: 820px) { dl.services { grid-template-columns: 1fr; } }
dl.services > div { padding: 24px 0 28px; }
dl.services > div::before { content: ""; display: block; width: 6px; height: 6px; background: var(--accent); margin-bottom: 14px; }
dl.services dt { font-variation-settings: 'opsz' 36; font-weight: 500; font-size: 1.45rem; letter-spacing: -.012em; line-height: 1.15; }
dl.services dd { margin-top: 8px; color: var(--ink-soft); max-width: 48ch; }

/* ---------- the trade blend: six trades, one unanswered phone ---------- */
.blend { position: relative; overflow: hidden; isolation: isolate; display: grid; place-items: center; text-align: center;
  min-height: clamp(460px, 74vh, 720px); padding: clamp(70px, 10vw, 130px) 0; color: var(--on-ink); }
.blend .frames { position: absolute; inset: 0; z-index: -2; }
.blend .frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%;
  opacity: 0; animation: tradefade 27s linear infinite both; }
.blend::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,18,16,.6), rgba(20,18,16,.74) 55%, rgba(20,18,16,.84)); }
.blend blockquote { max-width: 980px; padding: 0 var(--pad); }
.blend blockquote p { font-variation-settings: 'opsz' 72; font-style: italic; font-weight: 400; font-size: clamp(1.7rem, 4.2vw, 3.4rem);
  line-height: 1.12; letter-spacing: -.018em; text-wrap: balance; }
.blend blockquote p em { font-style: normal; color: var(--accent); }
.blend blockquote footer { margin-top: 24px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-ink-soft); }
.blend .trades { position: absolute; left: 0; right: 0; bottom: clamp(18px, 3vw, 30px); z-index: 1; }
.blend .trades span { position: absolute; left: 0; right: 0; opacity: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(243,239,231,.6); animation: tradefade 27s linear infinite both; }
.blend .frames img:nth-child(1), .blend .trades span:nth-child(1) { animation-delay: 0s; }
.blend .frames img:nth-child(2), .blend .trades span:nth-child(2) { animation-delay: 4.5s; }
.blend .frames img:nth-child(3), .blend .trades span:nth-child(3) { animation-delay: 9s; }
.blend .frames img:nth-child(4), .blend .trades span:nth-child(4) { animation-delay: 13.5s; }
.blend .frames img:nth-child(5), .blend .trades span:nth-child(5) { animation-delay: 18s; }
.blend .frames img:nth-child(6), .blend .trades span:nth-child(6) { animation-delay: 22.5s; }

/* ---------- the ink chapter: Callitor + the network ---------- */
.chapter.ink { background: var(--ink); color: var(--on-ink); color-scheme: dark; }
.ink .kicker { color: var(--on-ink-soft); }
.ink .lead { color: var(--on-ink-soft); }
.ink .btn { border-color: var(--on-ink); }
.ink .btn:hover { background: var(--on-ink); color: var(--ink); }
.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .product { grid-template-columns: 1fr; } }
.product h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin: 14px 0 18px; text-wrap: balance; }
.checks { list-style: none; margin-top: 24px; display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; color: var(--on-ink-soft); line-height: 1.5; }
.checks li::before { content: ""; width: 6px; height: 6px; background: var(--accent); margin-top: .55em; }
.checks li b { color: var(--on-ink); font-weight: 600; }

/* the call, set as a transcript rather than a chat app */
.transcript { border: 1px solid var(--on-ink-line); border-radius: 4px; padding: 22px 24px 18px; }
.transcript .meta { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--on-ink-soft); padding-bottom: 14px; border-bottom: 1px solid var(--on-ink-line); }
.transcript .meta .live::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--accent); margin-right: 8px; vertical-align: middle; }
.transcript .line { display: grid; grid-template-columns: 84px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--on-ink-line); }
.transcript .line:first-of-type { border-top: 0; }
.transcript .who { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-ink-soft); padding-top: 6px; }
.transcript .line.ai .who { color: var(--accent); }
.transcript .line p { font-size: 1.06rem; line-height: 1.45; }
.transcript .line.sms p { font-family: var(--mono); font-size: 12.5px; line-height: 1.55; color: var(--on-ink); padding: 10px 12px;
  border: 1px solid var(--on-ink-line); border-radius: 3px; }
.transcript .foot { margin-top: 14px; font-family: var(--mono); font-size: 11px; color: var(--on-ink-soft); letter-spacing: .04em; }
@media (max-width: 480px) { .transcript .line { grid-template-columns: 1fr; gap: 4px; } }

/* the network, as a full-width plate */
.plate { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (max-width: 900px) { .plate { grid-template-columns: 1fr; } }
.plate .aside { align-self: center; }
.map { width: 100%; height: auto; }
.map .land path { fill: #2b2621; stroke: rgba(243,239,231,.26); stroke-width: .22; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map .pop .pin { fill: var(--accent); stroke: var(--ink); stroke-width: 4; }
.map .city { font-family: var(--serif); font-variation-settings: 'opsz' 24; font-weight: 500; font-size: 31px; fill: var(--on-ink); }
.map .pid { font-family: var(--mono); font-size: 20px; letter-spacing: .06em; fill: var(--on-ink-soft); }
.map .halo { fill: none; stroke: var(--accent); stroke-width: 3; transform-origin: center; transform-box: fill-box; animation: haloexp 3s var(--ease) infinite; }
@keyframes haloexp { 0% { transform: scale(.6); opacity: .8; } 75%, 100% { transform: scale(3.4); opacity: 0; } }
.map .chip { fill: var(--accent); }
.map .chiptext { font-family: var(--mono); font-size: 19px; font-weight: 500; fill: var(--ink); letter-spacing: .04em; }
.nodes { list-style: none; display: grid; gap: 0; }
.nodes li { padding: 11px 0; font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; color: var(--on-ink-soft); display: flex; align-items: center; gap: 10px; }
.nodes li::before { content: ""; width: 6px; height: 6px; background: var(--accent); flex: none; }
.nodes li b { color: var(--on-ink); font-weight: 500; }
.net-note { margin-top: 20px; color: var(--on-ink-soft); max-width: 70ch; }

/* ---------- FAQ — two columns of running text ---------- */
dl.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); }
@media (max-width: 820px) { dl.faq { grid-template-columns: 1fr; } }
dl.faq > div { padding: 22px 0 24px; }
dl.faq > div::before { content: ""; display: block; width: 6px; height: 6px; background: var(--accent); margin-bottom: 12px; }
dl.faq dt { font-variation-settings: 'opsz' 24; font-weight: 600; font-size: 1.15rem; letter-spacing: -.01em; }
dl.faq dd { margin-top: 6px; color: var(--ink-soft); }

/* ---------- messaging & consent ---------- */
.chapter.tint { background: var(--paper-2); }
.tint code { background: var(--paper); }
.consent { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .consent { grid-template-columns: 1fr; } }
ol.points { list-style: none; display: grid; gap: 18px; counter-reset: pt; }
ol.points li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; counter-increment: pt; }
ol.points li::before { content: counter(pt, decimal-leading-zero); font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--accent); padding-top: 6px; }
ol.points li b { display: block; font-variation-settings: 'opsz' 24; font-weight: 600; font-size: 1.08rem; margin-bottom: 3px; }
ol.points li span span { color: var(--ink-soft); }
.sample { margin-top: 18px; }
.sample:first-child { margin-top: 0; }
.sample .kw { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.sample .kw small { color: var(--ink-faint); margin-left: 10px; letter-spacing: .1em; font-size: inherit; }
.sample .msg { font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--ink-soft); padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--paper); }
.sample .msg b { color: var(--ink); font-weight: 500; }
.sample p { color: var(--ink-soft); }

/* ---------- the closing: one loud moment ---------- */
.closing { background: var(--accent); color: var(--ink); padding: clamp(72px, 9vw, 120px) 0; }
.closing h2 { font-size: clamp(2.2rem, 5.2vw, 4.4rem); max-width: 16ch; text-wrap: balance; }
.closing p { margin-top: 22px; max-width: 50ch; font-size: 1.12rem; line-height: 1.5; }
.closing .btn-row { margin-top: 34px; }
.closing .btn { border-color: var(--ink); }
.closing .btn:hover { background: var(--ink); color: var(--accent); }
.closing .btn-primary { background: var(--ink); color: var(--paper); }
.closing .btn-primary:hover { color: var(--accent); }
.cta-contact { margin-top: 30px; font-size: 1.12rem; }
.cta-contact a { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.cta-contact .sep { margin: 0 12px; opacity: .5; }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: var(--on-ink-soft); padding: 64px 0 30px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .foot-grid { grid-template-columns: 1fr; } }
.foot .brand-word { color: var(--on-ink); font-size: 34px; }
.foot .tag { margin-top: 16px; max-width: 38ch; line-height: 1.55; }
.foot .partner { margin-top: 14px; font-size: .95rem; }
.foot h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-ink-soft); margin-bottom: 14px; font-weight: 500; }
.foot a { display: block; padding: 3px 0; color: var(--on-ink); }
.foot a:hover { color: var(--accent); }
.foot .reg { display: grid; gap: 3px; font-size: .95rem; line-height: 1.55; }
.foot .reg span { color: var(--on-ink); }
.foot .reg a { display: inline; padding: 0; }
.foot-bar { margin-top: 44px; padding-top: 28px; border-top: 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; position: relative; }
.foot-bar::before { content: ""; position: absolute; top: 0; left: 0; width: 30px; height: 6px;
  background-image: linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent));
  background-size: 6px 6px; background-repeat: no-repeat; background-position: 0 0, 12px 0, 24px 0; }
.foot-bar a { display: inline; padding: 0; color: var(--on-ink-soft); }
.foot-bar a:hover { color: var(--accent); }
.bar-bare { margin-top: 0; border-top: 0; padding-top: 0; }
.bar-bare::before { content: none; }

/* ---------- legal pages ---------- */
.legal-hero { padding: clamp(130px, 15vw, 180px) 0 clamp(28px, 4vw, 44px); }
.legal-hero h1 { font-family: var(--serif); font-variation-settings: 'opsz' 72; font-weight: 500; font-size: clamp(2.4rem, 5vw, 3.8rem); letter-spacing: -.018em; margin: 16px 0 14px; }
.legal-hero .lead { max-width: 60ch; }
.legal-updated { margin-top: 16px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.legal-body { padding: clamp(40px, 6vw, 72px) 0; }
.legal-sec { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 24px; padding: clamp(22px, 3vw, 34px) 0; }
.legal-sec .no { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; color: var(--accent); padding-top: 9px; }
.legal-sec .no::before { content: ""; display: block; width: 6px; height: 6px; background: var(--accent); margin-bottom: 8px; }
.legal-sec h2 { font-variation-settings: 'opsz' 36; font-weight: 500; font-size: clamp(1.4rem, 2.2vw, 1.7rem); letter-spacing: -.012em; }
.legal-copy { grid-column: 2; display: grid; gap: 12px; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; max-width: 72ch; }
.legal-copy ul { list-style: none; padding-left: 0; display: grid; gap: 7px; }
.legal-copy ul li { padding-left: 1.15em; position: relative; }
.legal-copy ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--accent); transform: translateY(-50%); }
.legal-copy a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .18em; }
.legal-copy strong { color: var(--ink); font-weight: 600; }
@media (max-width: 620px) { .legal-sec { grid-template-columns: 1fr; } .legal-copy { grid-column: 1; } }
.nf-hero { min-height: 72vh; display: flex; align-items: center; border-bottom: 0; }

/* inner pages — represent / MSP */
.inner-body { padding: 8px 0 clamp(48px, 7vw, 80px); }
.inner-copy { max-width: 62ch; display: grid; gap: 16px; }
.inner-copy p { font-size: 1.12rem; line-height: 1.6; color: var(--ink-soft); }
.inner-copy p strong { color: var(--ink); font-weight: 600; }
.inner-points { max-width: 62ch; margin-top: clamp(32px, 5vw, 48px); display: grid; gap: 0; }
.inner-points > div { padding: 18px 0 20px; }
.inner-points > div::before { content: ""; display: block; width: 6px; height: 6px; background: var(--accent); margin-bottom: 12px; }
.inner-points dt { font-variation-settings: 'opsz' 24; font-weight: 600; font-size: 1.15rem; letter-spacing: -.01em; }
.inner-points dd { margin-top: 6px; color: var(--ink-soft); }
.inner-aside { margin-top: clamp(28px, 4vw, 40px); max-width: 62ch; color: var(--ink-soft); }
.mt-14 { margin-top: 14px; } .mt-16 { margin-top: 16px; } .mt-30 { margin-top: 30px; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
  .blend .frames img, .blend .trades span, .hero-shot img, .hero-shot .cap span { animation: none; opacity: 0; }
  .blend .frames img:nth-child(1), .blend .trades span:nth-child(1), .hero-shot img:nth-child(1), .hero-shot .cap span:nth-child(1) { opacity: 1; }
}