/* Linje Consulting. Layout: a calm editorial site on Paper. Every section is one row on a 12-column grid:
   a narrow label column with a vertical rule (the y-axis) and a wide content column. Motion comes from the
   brand's own grid: columns of squares that rise, rules that draw, a point that climbs. Light only, like printed stationery. */
:root {
  --paper: #f4f4f3; --stone-bg: #e4e4e5; --white: #ffffff;
  --ink: #2a2925; --muted: #5d5f5f; --rule: #d3d4d6; --rule-strong: #2a2925; --faint: #e3e3e4;
  --olive: #8e8d5a; --olive-ink: #6b6a3f; --olive-l: #a8a772; --bad: #a5402d;
  --display: Gelasio, Georgia, "Times New Roman", serif;
  --body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --pad: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box }
[hidden] { display: none !important }
html { background: var(--paper); scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--paper); color: var(--ink); font: 18px/1.65 var(--body); text-rendering: optimizeLegibility }
img, svg, canvas, video { display: block; max-width: 100% }
a { color: inherit }
p { margin: 0 }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.12; text-wrap: balance; color: var(--ink) }
h2 { font-size: clamp(30px, 3.6vw, 50px); letter-spacing: -.005em }
h3 { font-size: 23px; line-height: 1.25 }
em { font-style: italic }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px }
.wrap { max-width: 1360px; margin: 0 auto; padding-inline: var(--pad) }
.muted { color: var(--muted) }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 14px; text-decoration: none }
.skip:focus { top: 12px }
.label { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.label::before { content: ""; width: 7px; height: 7px; background: var(--olive); flex: none }
.w { display: inline-block }

/* links and buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: var(--paper); text-decoration: none; padding: 13px 22px; font: 600 16px var(--body); border: 1px solid var(--ink); cursor: pointer; transition: background .15s, color .15s; width: max-content }
.btn:hover { background: #000 }
.btn .sq, .sq { width: 9px; height: 9px; background: var(--olive); flex: none; display: inline-block; transition: transform .25s var(--ease) }
.btn:hover .sq { transform: translate(2px, -2px) }
.btn.ghost { background: transparent; color: var(--ink) }
.btn.ghost:hover { background: var(--ink); color: var(--paper) }
.btn[disabled] { opacity: .6; cursor: progress }
.more { display: inline-flex; align-items: center; gap: 8px; font: 600 16px var(--body); color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; width: max-content; max-width: 100% }
.more .arr { width: 12px; height: 12px; transition: transform .25s var(--ease) }
.more:hover .arr, a:hover > .more .arr, a:hover .more .arr { transform: translate(3px, -3px) }

/* ---------- header: logo left, links right, one contact button ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s }
.top.scrolled { border-bottom-color: var(--rule) }
.top .bar { max-width: 1360px; margin: 0 auto; padding: 18px var(--pad); display: flex; align-items: center; gap: 28px }
.top .home { display: flex; align-items: center; margin-right: auto }
.logo { height: 30px; width: auto; color: var(--ink); overflow: visible }
/* header logo on hover: the axis draws itself box by box, then the olive point climbs into the corner */
.home .logo rect { transform-box: fill-box; transform-origin: 50% 100% }
.home:hover .logo [fill="#2a2925"] rect, .home:focus-visible .logo [fill="#2a2925"] rect { animation: logo-tick .5s cubic-bezier(.3, .7, .2, 1) both }
.home .logo [fill="#2a2925"] rect:nth-child(2) { animation-delay: .05s } .home .logo [fill="#2a2925"] rect:nth-child(3) { animation-delay: .1s }
.home .logo [fill="#2a2925"] rect:nth-child(4) { animation-delay: .15s } .home .logo [fill="#2a2925"] rect:nth-child(5) { animation-delay: .2s }
.home:hover .logo [fill="#8e8d5a"] rect, .home:focus-visible .logo [fill="#8e8d5a"] rect { animation: logo-climb .7s .2s cubic-bezier(.3, .7, .2, 1) both }
@keyframes logo-tick { 0% { transform: none } 40% { transform: scaleY(.55) } 100% { transform: none } }
@keyframes logo-climb { 0% { transform: translate(-15px, 15px); opacity: 0 } 30% { opacity: 1 } 100% { transform: none } }
@media (prefers-reduced-motion: reduce) { .home .logo rect { animation: none !important } }
.top nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 32px) }
.top nav .link { position: relative; text-decoration: none; font-size: 16px; color: var(--ink); padding: 6px 0 }
.top nav .link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--olive); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease) }
.top nav .link:hover::after, .top nav .link[aria-current="page"]::after { transform: scaleX(1) }
.top nav .link[aria-current="page"] { color: var(--olive-ink) }
.top nav .nav-cta { padding: 10px 18px; font-size: 15px }
.tools { display: flex; align-items: center; gap: 14px }
.lang { position: relative }
.lang summary { list-style: none; cursor: pointer; font: 500 13px var(--mono); letter-spacing: .1em; padding: 6px 2px; color: var(--muted) }
.lang summary:hover { color: var(--ink) }
.lang summary::-webkit-details-marker { display: none }
.lang ul { position: absolute; right: -10px; top: 36px; list-style: none; margin: 0; padding: 6px; background: var(--white); border: 1px solid var(--rule); min-width: 170px; box-shadow: 0 12px 30px -16px #0003 }
.lang a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; text-decoration: none; font-size: 15px }
.lang a span { font: 500 12px var(--mono); color: var(--muted) }
.lang a:hover, .lang a[aria-current="true"] { background: var(--paper) }
.menu-btn { display: none; align-items: center; gap: 10px; background: none; border: 1px solid var(--ink); font: 15px var(--body); color: var(--ink); cursor: pointer; padding: 8px 12px }
.menu-btn i { width: 16px; height: 10px; border-block: 1.5px solid var(--ink); position: relative }
.progress { height: 2px; background: transparent }
.progress i { display: block; height: 100%; background: var(--olive); transform: scaleX(0); transform-origin: left }
@media (max-width: 1080px) {
  .top .bar { padding-block: 14px }
  .menu-btn { display: inline-flex }
  .top nav { position: fixed; inset: 0; z-index: -1; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); padding: calc(env(safe-area-inset-top, 0px) + 96px) var(--pad) 40px; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .25s, visibility 0s .25s }
  .top nav.open { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .25s }
  .top nav .link { border-top: 1px solid var(--rule); padding: 18px 0; font: 26px/1.2 var(--display) }
  .top nav .link::after { display: none }
  .top nav .nav-cta { margin-top: 24px; justify-content: center; padding: 16px; font-size: 17px }
  body.menu-open { overflow: hidden }
  body.menu-open .menu-btn i { border-color: transparent; height: 2px }
  body.menu-open .menu-btn i::before, body.menu-open .menu-btn i::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: var(--ink); transform: rotate(45deg) }
  body.menu-open .menu-btn i::after { transform: rotate(-45deg) }
}

/* ---------- heroes ---------- */
.hero .wrap, .page-hero .wrap { padding-block: clamp(48px, 7vw, 104px) clamp(36px, 4.5vw, 64px) }
.hero h1 { font-size: clamp(44px, 6.6vw, 104px); line-height: 1.02; letter-spacing: -.015em; max-width: 14ch }
.page-hero h1 { font-size: clamp(44px, 6vw, 92px); line-height: 1.04; letter-spacing: -.012em; max-width: 18ch }
.page-hero .lede { margin-top: 26px; font-size: clamp(19px, 1.6vw, 23px); color: var(--muted); max-width: 46ch }
canvas.chart { width: 100%; height: clamp(200px, 26vw, 380px); background: var(--stone-bg) }
.chart-hero { height: clamp(240px, 32vw, 460px) }
.page-hero canvas.chart { height: clamp(160px, 18vw, 260px) }
.page-hero canvas.chart[data-variant="mark"] { height: clamp(240px, 26vw, 360px) }

/* ---------- section rows ---------- */
section { padding-block: clamp(72px, 9vw, 132px) }
section.white { background: var(--white) }
.row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 28px clamp(32px, 4vw, 72px); align-items: start }
.row > aside { position: relative; padding-left: 16px; align-self: stretch }
.row > aside::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--ink); transform-origin: top }
.row > aside .label { position: sticky; top: 104px; color: var(--ink) }
.row > aside .label::before { display: none }
.row > aside::after { content: ""; position: absolute; left: -4px; top: 0; width: 9px; height: 9px; background: var(--olive) }
.row > aside.run::before { animation: growY 1.1s var(--ease) both }
.row > aside.run::after { animation: pop .5s .9s cubic-bezier(.3,.7,.2,1.4) both }
.row > .main { display: grid; gap: 30px; min-width: 0; align-content: start }
.row > .main > h2 { max-width: 22ch }
.prose { display: grid; gap: 20px; max-width: 66ch; color: var(--ink) }
.prose p { color: var(--ink) }
.prose p + p { color: var(--muted) }
.prose ul { margin: 0; padding-left: 20px; display: grid; gap: 6px }
@media (max-width: 860px) {
  .row { grid-template-columns: minmax(0, 1fr) }
  .row > aside { padding-block: 2px }
  .row > aside .label { position: static }
}
@keyframes growY { from { transform: scaleY(0) } }
@keyframes grow { from { transform: scaleX(0) } }
@keyframes pop { from { transform: scale(0) } }

/* ---------- service rows ---------- */
.svc-list { display: grid; border-top: 1px solid var(--ink) }
.svc-row { display: grid; grid-template-columns: 42px minmax(0, 5fr) minmax(0, 6fr) auto; gap: 8px 28px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--rule); text-decoration: none; position: relative; transition: background .25s }
.svc-row::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--olive); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease) }
.svc-row:hover::before { transform: scaleX(1) }
.svc-row h3 { font-size: clamp(22px, 2vw, 28px) }
.svc-row p { color: var(--muted); font-size: 17px }
.svc-row .more { border: 0; padding: 4px 0 0; font-size: 15px; white-space: nowrap }
.svc-glyph { width: 36px; height: 36px; overflow: visible }
.svc-glyph rect { fill: var(--rule); transition: fill .3s }
.svc-glyph rect.on { fill: var(--ink) }
.svc-glyph rect.pt { fill: var(--olive) }
.svc-list.compact .svc-row { grid-template-columns: 42px minmax(0, 1fr) auto; padding: 18px 0 }
.svc-list.compact .svc-row p { display: none }
.svc-list.compact .svc-row h3 { font-size: 22px }
@media (max-width: 760px) {
  .svc-row { grid-template-columns: 36px minmax(0, 1fr) }
  .svc-row p, .svc-row .more { grid-column: 2 }
  .svc-list.compact .svc-row { grid-template-columns: 36px minmax(0, 1fr) }
  .svc-list.compact .svc-row .more { display: none }
}

/* ---------- statement band ---------- */
.statement { background: var(--ink); color: var(--paper) }
.statement .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(40px, 6vw, 96px); align-items: center }
.statement .axis { width: 100%; max-width: 440px; aspect-ratio: 1; height: auto }
.statement .axis .cell { fill: #34332e }
.statement .axis .bar { fill: var(--paper) }
.statement .axis .pt { fill: var(--olive-l) }
.statement .axis .trail { fill: var(--olive-l); opacity: .35 }
.statement .label { color: #b9babc }
.statement-text { display: grid; gap: 26px }
.statement .big { font-family: var(--display); font-size: clamp(40px, 5.6vw, 84px); line-height: 1.04; color: var(--paper) }
.statement .big em { font-style: normal; color: var(--olive-l) }
.statement-text > p:last-child { color: #c4c5c8; max-width: 44ch; font-size: 19px }
@media (max-width: 860px) { .statement .wrap { grid-template-columns: minmax(0, 1fr) } .statement .axis { max-width: 300px } }

/* ---------- approach flow ---------- */
.flow { position: relative; margin-top: 8px }
.flow .line { position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--rule) }
.flow .line i { position: absolute; inset: 0; background: var(--ink); transform-origin: left }
.flow .dot { position: absolute; top: 0; left: calc(100% - 16px); width: 16px; height: 16px; background: var(--olive) }
.flow.run .line i { animation: grow 2.4s cubic-bezier(.4,.1,.2,1) both }
.flow.run .dot { animation: travel 2.4s cubic-bezier(.4,.1,.2,1) both }
@keyframes travel { from { left: 0 } }
.steps { list-style: none; margin: 0; padding: 40px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; counter-reset: s }
.steps li { display: grid; gap: 10px; align-content: start; min-width: 0 }
.steps li::before { counter-increment: s; content: counter(s, decimal-leading-zero); font: 500 13px var(--mono); color: var(--muted); letter-spacing: .1em }
.steps h3 { font-size: 22px }
.steps p { color: var(--muted); font-size: 16px }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0, 1fr) } }

/* ---------- film ---------- */
.film .frame { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: var(--ink); overflow: hidden }
.film video, .film .chart-film { position: absolute; inset: 0; width: 100%; height: 100% }
.film .chart-film { background: var(--ink) }
.film .over { position: absolute; inset: 0; display: grid; align-content: end; gap: 16px; padding: clamp(20px, 4vw, 52px); color: var(--paper); background: linear-gradient(90deg, rgba(42,41,37,.85), rgba(42,41,37,.1) 70%) }
.film .over .label { color: #c4c5c8 }
.film .over h3 { color: var(--paper); font-size: clamp(26px, 3.4vw, 46px); max-width: 16ch }
.play { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 14px; font: 600 16px var(--body); color: var(--paper); width: max-content }
.play i { width: 64px; height: 64px; display: grid; place-items: center; background: var(--paper); transition: transform .2s; animation: ring 2.6s ease-out infinite }
.play:hover i { transform: scale(1.06) }
.play i::before { content: ""; border-left: 16px solid var(--ink); border-block: 10px solid transparent; margin-left: 4px }
.play:focus-visible i { outline: 2px solid var(--olive-l); outline-offset: 3px }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(244,244,243,.55) } 70%, 100% { box-shadow: 0 0 0 22px rgba(244,244,243,0) } }
.film.playing .over, .film.playing .chart-film { display: none }
.film .note { font-size: 15px; color: var(--muted) }

/* ---------- articles ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px }
.post-card { display: grid; gap: 12px; align-content: start; text-decoration: none; padding-top: 18px; border-top: 1px solid var(--ink); min-width: 0 }
.post-card[hidden] { display: none }
.post-card .gridart { width: 64px; height: 64px; margin-bottom: 6px }
.post-card .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.post-card h3 { font-size: 23px; transition: color .2s }
.post-card:hover h3 { color: var(--olive-ink) }
.post-card p { color: var(--muted); font-size: 16px }
.post-card .more { border: 0; padding: 0; font-size: 15px; margin-top: 4px }
.gridart rect.g-on { fill: var(--ink) }
.gridart rect.g-off { fill: var(--faint) }
.gridart rect.g-mid { fill: var(--rule) }
.gridart rect.g-trail { fill: var(--olive-l); opacity: .45 }
.gridart rect.g-pt { fill: var(--olive) }
.filters { display: flex; flex-wrap: wrap; gap: 8px }
.filters button { font: 15px var(--body); padding: 8px 14px; background: var(--white); border: 1px solid var(--rule); cursor: pointer; color: var(--ink) }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink) }
@media (max-width: 1000px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 600px) { .post-grid { grid-template-columns: minmax(0, 1fr) } }

/* ---------- small blocks ---------- */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink) }
.pair-card { display: grid; gap: 14px; padding: 26px 26px 26px 0; text-decoration: none; border-bottom: 1px solid var(--rule); align-content: start }
.pair-card + .pair-card { padding-left: 26px; border-left: 1px solid var(--rule) }
.pair-card .more { border: 0; padding: 0; font-size: 15px }
.pair-card:hover h3 { color: var(--olive-ink) }
@media (max-width: 600px) { .pair { grid-template-columns: minmax(0, 1fr) } .pair-card + .pair-card { padding-left: 0; border-left: 0 } }
.offer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink) }
.offer.six { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.offer article { display: grid; gap: 10px; align-content: start; padding: 26px 26px 26px 0; min-width: 0; border-bottom: 1px solid var(--rule) }
.offer article:not(:nth-child(3n + 1)) { padding-left: 26px; border-left: 1px solid var(--rule) }
.offer .num { font: 500 13px var(--mono); letter-spacing: .1em; color: var(--muted) }
.offer .pt-num { color: var(--olive) }
.offer p { color: var(--muted); font-size: 16px }
@media (max-width: 860px) { .offer, .offer.six { grid-template-columns: minmax(0, 1fr) } .offer article:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0 } }
.questions { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--ink); max-width: 60rem }
.questions li { padding: 18px 0 18px 32px; border-bottom: 1px solid var(--rule); font-family: var(--display); font-size: clamp(19px, 1.7vw, 23px); line-height: 1.35; position: relative }
.questions li::before { content: ""; position: absolute; left: 0; top: 28px; width: 10px; height: 10px; background: var(--rule); transition: background .3s, transform .3s }
.questions li:hover::before { background: var(--olive); transform: rotate(45deg) }
.who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink) }
.who div { position: relative; display: grid; gap: 8px; align-content: start; padding: 24px 22px 24px 0; min-width: 0 }
.who div + div { padding-left: 22px; border-left: 1px solid var(--rule) }
.who h3 { font-size: 21px }
.who p { color: var(--muted); font-size: 16px }
@media (max-width: 1000px) { .who { grid-template-columns: repeat(2, minmax(0, 1fr)) } .who div:nth-child(3) { padding-left: 0; border-left: 0 } }
@media (max-width: 560px) { .who { grid-template-columns: minmax(0, 1fr) } .who div, .who div + div { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--rule) } }
.words { margin: 0; display: grid; border-top: 1px solid var(--ink) }
.words div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding-block: 22px; border-bottom: 1px solid var(--rule) }
.words dt { font-family: var(--display); font-style: italic; font-size: 27px; line-height: 1.2; position: relative; padding-left: 22px }
.words dt::before { content: ""; position: absolute; left: 0; top: .42em; width: 10px; height: 10px; background: var(--olive) }
.words.run dt::before { animation: climb 1s var(--ease) both }
.words.run div:nth-child(2) dt::before { animation-delay: .25s }
.words.run div:nth-child(3) dt::before { animation-delay: .5s }
@keyframes climb { 0% { transform: translate(0, 24px) scale(.4); opacity: 0 } 100% { transform: none; opacity: 1 } }
.words dt small { display: block; font: 500 11px var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 8px }
.words dd { margin: 0; color: var(--muted) }
@media (max-width: 600px) { .words div { grid-template-columns: minmax(0, 1fr); gap: 8px } }
.map { display: flex; flex-wrap: wrap; gap: 10px }
.map span { display: inline-flex; align-items: center; gap: 10px; font: 500 13px var(--mono); letter-spacing: .08em; padding: 9px 14px; border: 1px solid var(--rule); background: var(--white) }
section.white .map span { background: var(--paper) }
.map span::before { content: ""; width: 8px; height: 8px; background: var(--olive); animation: blink 2.4s ease-in-out infinite }
.map span:nth-child(2)::before { animation-delay: .8s }
.map span:nth-child(3)::before { animation-delay: 1.6s }
@keyframes blink { 0%, 100% { opacity: 1; transform: scale(1) } 50% { opacity: .35; transform: scale(.6) } }
.formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink) }
.formats article { display: grid; gap: 12px; align-content: start; padding: 28px 28px 28px 0; border-bottom: 1px solid var(--rule); min-width: 0 }
.formats article:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--rule) }
.formats p { color: var(--muted); font-size: 16px }
.tag { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--olive-ink) }
@media (max-width: 700px) { .formats { grid-template-columns: minmax(0, 1fr) } .formats article:nth-child(even) { padding-left: 0; border-left: 0 } }
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink) }
.role { display: grid; gap: 12px; align-content: start; padding: 26px 26px 26px 0; min-width: 0; scroll-margin-top: 110px }
.role + .role { padding-left: 26px; border-left: 1px solid var(--rule) }
.role .gridart { width: 56px; height: 56px }
.role p { color: var(--muted); font-size: 16px }
.role ul { margin: 0; padding: 0; list-style: none; display: grid; border-top: 1px solid var(--rule) }
.role li { padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 15px }
@media (max-width: 900px) { .roles { grid-template-columns: minmax(0, 1fr) } .role + .role { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule) } }

/* ---------- faq ---------- */
.faq-list details { border-bottom: 1px solid var(--rule) }
.faq-list details:first-of-type { border-top: 1px solid var(--ink) }
.faq-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-family: var(--display); font-size: clamp(20px, 1.9vw, 24px) }
.faq-list summary::-webkit-details-marker { display: none }
.faq-list summary::after { content: ""; flex: none; width: 12px; height: 12px; background: var(--rule); transition: background .2s, transform .3s }
.faq-list details[open] summary::after { background: var(--olive); transform: rotate(45deg) }
.faq-list details p { padding: 0 0 24px; color: var(--muted); max-width: 64ch; overflow: hidden }

/* ---------- forms ---------- */
.form { display: grid; gap: 22px; background: var(--white); border: 1px solid var(--rule); padding: clamp(22px, 3.5vw, 44px); min-width: 0 }
section.white .form { background: var(--paper) }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start }
.field { display: grid; gap: 8px; min-width: 0; border: 0; margin: 0; padding: 0 }
.field label, .field legend { font: 600 15px var(--body); padding: 0 }
.field label span { font-weight: 400; color: var(--muted); margin-left: 6px; font-size: 14px }
.field input, .field textarea { font: 17px/1.5 var(--body); color: var(--ink); background: var(--white); border: 1px solid var(--rule); border-bottom: 2px solid var(--ink); padding: 12px 14px; width: 100%; border-radius: 0; transition: border-color .2s }
.field textarea { resize: vertical; min-height: 140px }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--olive) }
.field textarea::placeholder { color: #8b8d8d }
.field.bad input, .field.bad textarea { border-bottom-color: var(--bad) }
.field .err { color: var(--bad); font-size: 14px }
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chips label { position: relative; cursor: pointer; font-weight: 400 }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer }
.chips span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--rule); background: var(--white); font-size: 15px; transition: border-color .2s }
.chips span::before { content: ""; width: 8px; height: 8px; background: var(--rule); transition: background .2s, transform .25s }
.chips input:checked + span { border-color: var(--ink) }
.chips input:checked + span::before { background: var(--olive); transform: rotate(45deg) }
.chips input:focus-visible + span { outline: 2px solid var(--olive); outline-offset: 2px }
.consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; color: var(--muted); cursor: pointer }
.consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink) }
.consent.bad span { color: var(--bad) }
.send { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center }
.status { font-size: 15px; color: var(--muted); max-width: 52ch }
.status.ok { color: var(--olive-ink) }
.status:empty { display: none }
form.sent .field, form.sent .consent { opacity: .55 }
@media (max-width: 600px) { .two { grid-template-columns: minmax(0, 1fr) } }
.contact-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 40px; align-items: start }
.contact-side { display: grid; gap: 26px }
.contact-side > p { color: var(--muted) }
@media (max-width: 1000px) { .contact-grid { grid-template-columns: minmax(0, 1fr) } }
.next { margin: 0; display: grid; border-top: 1px solid var(--rule) }
.next div { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding-block: 12px; border-bottom: 1px solid var(--rule) }
.next dt { font: 500 13px/1.9 var(--mono); color: var(--olive-ink) }
.next dd { margin: 0; font-size: 17px }
.mail { display: grid; gap: 10px; justify-items: start; padding-left: 18px; border-left: 3px solid var(--olive) }
.mail .label::before { display: none }
.mail .addr { font-family: var(--display); font-size: clamp(20px, 2vw, 24px); overflow-wrap: anywhere; user-select: all }
.mail .btn { padding: 9px 16px; font-size: 15px }

/* ---------- talk + newsletter + footer ---------- */
.talk { background: var(--stone-bg) }
.talk-box { display: grid; gap: 18px; max-width: 60ch }
.talk-box p { color: var(--muted) }
.mail-link { font-family: var(--display); font-size: clamp(24px, 2.6vw, 34px); text-decoration: none; border-bottom: 1px solid var(--rule); width: max-content; max-width: 100%; overflow-wrap: anywhere; transition: border-color .2s }
.mail-link:hover { border-color: var(--olive) }
.newsletter { background: var(--ink); color: var(--paper) }
.newsletter h2 { color: var(--paper) }
.newsletter .main > p { color: #c4c5c8; max-width: 56ch }
.newsletter .row > aside::before { background: var(--paper) }
.newsletter .row > aside .label { color: var(--paper) }
.nl-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 14px; align-items: end; max-width: 640px }
.nl-form .field label { color: #c4c5c8; font-weight: 400 }
.nl-form .field input { background: #34332e; border-color: #4a4944; border-bottom-color: var(--paper); color: var(--paper) }
.nl-form .btn { background: var(--paper); color: var(--ink); border-color: var(--paper) }
.nl-form .btn:hover { background: var(--white) }
.nl-form .consent, .nl-form .status { grid-column: 1 / -1; color: #b9babc }
.nl-form .consent a { color: var(--paper) }
.nl-form .status.ok { color: var(--olive-l) }
.nl-form .field.bad input { border-bottom-color: #e07a62 }
.nl-form .field .err { color: #f0a08c }
@media (max-width: 560px) { .nl-form { grid-template-columns: minmax(0, 1fr) } }
footer { background: var(--paper) }
footer canvas.chart-foot { height: 120px; background: var(--paper) }
footer .cols { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.5fr)); gap: 32px; padding-block: 48px 40px; border-top: 1px solid var(--ink) }
footer .cols > div { display: grid; gap: 8px; align-content: start; min-width: 0 }
footer .cols a { text-decoration: none; font-size: 16px; width: max-content; max-width: 100%; border-bottom: 1px solid transparent }
footer .cols a:hover { border-bottom-color: var(--olive) }
footer .cols .label { margin-bottom: 8px; color: var(--ink) }
footer .brand .logo { height: 30px; margin-bottom: 10px }
footer .brand p { color: var(--muted); max-width: 30ch; font-size: 16px }
footer .base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 18px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 14px }
footer .base:last-of-type { padding-bottom: 40px }
footer .base a { color: var(--muted) }
@media (max-width: 900px) { footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)) } footer .brand { grid-column: 1 / -1 } }
@media (max-width: 480px) { footer .cols { grid-template-columns: minmax(0, 1fr) } }
.to-top { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; background: var(--ink); border: 0; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; transform: translateY(8px); z-index: 15 }
.to-top::before { content: ""; position: absolute; inset: 15px; border-left: 2px solid var(--paper); border-top: 2px solid var(--paper); transform: translateY(3px) rotate(45deg) }
.to-top.show { opacity: 1; pointer-events: auto; transform: none }

/* ---------- article page ---------- */
.post-hero .wrap { padding-block: clamp(40px, 6vw, 88px) clamp(32px, 4vw, 56px); display: grid; gap: 20px; max-width: 1360px }
.post-hero .back { font-size: 15px; color: var(--muted); text-decoration: none; width: max-content }
.post-hero .back:hover { color: var(--ink) }
.post-hero .meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.post-hero h1 { font-size: clamp(38px, 5vw, 72px); line-height: 1.06; max-width: 20ch }
.post-hero .lede { font-size: clamp(19px, 1.6vw, 22px); color: var(--muted); max-width: 52ch }
.post-hero canvas.chart { height: clamp(140px, 16vw, 220px) }
.post-row { padding-block: clamp(48px, 6vw, 88px) }
.post-aside { display: grid; gap: 10px; align-content: start }
.post-aside .label { position: static !important; color: var(--muted) !important }
.post-aside .more { font-size: 15px }
.post-body { max-width: 68ch; display: grid; gap: 20px; font-size: 19px; line-height: 1.7 }
.post-body h2 { font-size: clamp(26px, 2.6vw, 34px); margin-top: 20px }
.post-body ul, .post-body ol { margin: 0; padding-left: 22px; display: grid; gap: 8px }
.post-body blockquote { margin: 8px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--olive); font-family: var(--display); font-size: 23px; line-height: 1.45 }
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; border-top: 1px solid var(--rule); padding-top: 24px }
.pager a { display: grid; gap: 6px; text-decoration: none; min-width: 0 }
.pager a.next { text-align: right; justify-items: end }
.pager b { font-family: var(--display); font-weight: 400; font-size: 20px }
.pager .label::before { display: none }
.pager a:hover b { color: var(--olive-ink) }
.legal h3 { font-size: 24px; margin-top: 14px }
.legal ul { color: var(--muted) }

/* ---------- downloads ---------- */
.downloads { display: grid; border-top: 1px solid var(--ink) }
.dl { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--rule); text-decoration: none; position: relative }
.dl::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--olive); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease) }
.dl:hover::before { transform: scaleX(1) }
.dl-ico { width: 30px; height: 30px }
.dl-ico rect { fill: var(--ink) } .dl-ico rect.pt { fill: var(--olive); transition: transform .4s var(--ease) }
.dl:hover .dl-ico rect.pt { transform: translateY(6px) }
.dl-txt { display: grid; gap: 2px; min-width: 0 }
.dl-txt b { font: 400 22px/1.3 var(--display) }
.dl-txt span { color: var(--muted); font-size: 16px }
.dl-meta { display: inline-flex; align-items: center; gap: 10px; font: 500 12px var(--mono); letter-spacing: .12em; color: var(--muted) }
.dl-meta svg { width: 14px; height: 14px; color: var(--ink); transition: transform .3s var(--ease) }
.dl:hover .dl-meta svg { transform: translateY(3px) }
.logo-show { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink) }
.logo-show > div { display: grid; place-items: center; padding: 56px 24px }
.logo-show .logo { height: clamp(40px, 5vw, 64px) }
.ls-dark { background: var(--ink) }
.boiler { background: var(--white); border-left: 3px solid var(--olive); padding: 22px 26px; max-width: 68ch; font-size: 18px }
@media (max-width: 600px) { .logo-show { grid-template-columns: 1fr } .dl { grid-template-columns: 30px minmax(0, 1fr) } .dl-meta { grid-column: 2 } }

/* ---------- engagements ---------- */
.note-line { font-size: 15px !important; color: var(--muted) !important; font-style: italic }
.eng { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--ink) }
.eng > div { display: grid; gap: 14px; align-content: start; padding: 24px 26px 24px 0; min-width: 0 }
.eng > div + div { padding-left: 26px; border-left: 1px solid var(--rule) }
.eng .num { font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.eng-sit p { font-size: 18px }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 }
.ticks li { padding: 9px 0 9px 22px; border-bottom: 1px solid var(--rule); font-size: 16px; position: relative; line-height: 1.45 }
.ticks li::before { content: ""; position: absolute; left: 0; top: 16px; width: 8px; height: 8px; background: var(--rule) }
.ticks.pt li::before { background: var(--olive) }
.pair-links { display: flex; flex-wrap: wrap; gap: 14px 30px }
@media (max-width: 1000px) { .eng { grid-template-columns: minmax(0, 1fr) } .eng > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule) } }

/* ---------- photos: used sparingly, one per page at most ---------- */
.page-hero.has-photo .wrap { padding-bottom: clamp(32px, 4vw, 52px) }
.hero-photo, .inline-photo { margin: 0; overflow: hidden; background: var(--stone-bg) }
.hero-photo img { width: 100%; height: clamp(240px, 34vw, 520px); object-fit: cover; object-position: 50% 45%; animation: drift 30s ease-in-out infinite alternate }
.inline-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block }
@keyframes drift { from { transform: scale(1.02) } to { transform: scale(1.09) translate(-1%, .5%) } }
.page-hero.plain .wrap { padding-bottom: clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--rule) }
footer .cols { border-top: 1px solid var(--ink) }

/* ---------- form extras ---------- */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0 }
.field input[type=file] { padding: 12px; background: var(--white); border: 1px dashed var(--rule); border-bottom: 2px solid var(--ink); font: 15px var(--body); cursor: pointer }
.field input[type=file]::file-selector-button { font: 600 14px var(--body); background: var(--ink); color: var(--paper); border: 0; padding: 8px 14px; margin-right: 14px; cursor: pointer }
.field .hint { font-size: 14px; color: var(--muted) }
form :disabled { cursor: default }

/* ---------- cookie banner ---------- */
.cookie { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; justify-content: center; pointer-events: none }
.cookie-in { pointer-events: auto; max-width: 980px; width: 100%; background: var(--white); border: 1px solid var(--ink); box-shadow: 0 18px 40px -20px #0005; padding: 20px 22px; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; animation: cookieIn .5s var(--ease) both }
.cookie-in p { font-size: 15px; max-width: 62ch; color: var(--muted) } .cookie-in b { color: var(--ink); margin-right: 4px }
.cookie-btns { display: flex; gap: 10px; flex-wrap: wrap } .cookie .btn { padding: 10px 16px; font-size: 15px }
@keyframes cookieIn { from { transform: translateY(16px); opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation: none !important; transition: none !important }
}