/* Triage v3. Replica of nnechaeva.com's system: a 1200-unit artboard scaled to
   the window (320 units on phones). Every size below is N * --u. */

:root {
  --ground: #041211;
  --cream: #F8F7EE;
  --sage: #93B1A6;
  --teal: #183D3D;
  --tint: #0C2624; /* offer 01 sections: between ground and teal */
  --u: calc(100vw / 1200);
  --serif: "Viaoda Libre", "Bodoni Moda", Georgia, serif;
  --sans: "Roboto", Arial, sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);

  --sc-canvas: var(--ground); --sc-surface: var(--teal);
  --sc-ink: var(--cream); --sc-ink-soft: #C9D3CC;
  --sc-accent: var(--sage); --sc-accent-ink: var(--ground);
  --sc-font-display: var(--serif); --sc-font-text: var(--sans);
}
@media (max-width: 899px) {
  :root { --u: min(calc(100vw / 320), 2.2px); }
}

html { scroll-behavior: auto; background: var(--ground); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { background: var(--ground); color: var(--cream); font: 400 calc(12 * var(--u))/1.42 var(--sans); letter-spacing: 0; }
p, h1, h2, h3, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { width: 100%; height: 100%; object-fit: cover; }
::placeholder { color: rgba(248, 247, 238, .62); }

.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--sage); color: var(--ground); padding: 8px 14px; border-radius: 30px; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* shared type */
.label { position: absolute; left: calc(30 * var(--u)); top: calc(26 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); text-transform: uppercase; }
.head { position: absolute; left: calc(495 * var(--u)); top: 0; font: 400 calc(80 * var(--u))/calc(124 * var(--u)) var(--serif); text-transform: uppercase; white-space: nowrap; }
.head--two span { display: block; }
.head--two span + span { margin-top: calc(-55 * var(--u)); }
.head--tight { line-height: calc(80 * var(--u)); top: calc(22 * var(--u)); }
.head--tight span + span { margin-top: calc(-13 * var(--u)); }

.pill { display: inline-flex; align-items: center; justify-content: center; width: calc(210 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(30 * var(--u)); font: 500 calc(12 * var(--u))/1 var(--sans); text-transform: uppercase; letter-spacing: 0; white-space: nowrap; border: 0; cursor: pointer; transition: background-color 160ms var(--ease), transform 120ms var(--ease); }
.pill--solid { background: var(--sage); color: var(--ground); }
@media (hover: hover) and (pointer: fine) { .pill--solid:hover { background: #A9C4BA; } }
.pill:active { transform: scale(.97); }
.pill:disabled { opacity: .55; cursor: default; }

/* the fixed bar */
.bar { position: fixed; inset: 0 0 auto; z-index: 20; height: calc(40 * var(--u)); background: var(--ground); border-bottom: 1px solid var(--teal); }
.bar__mark { position: absolute; left: calc(30 * var(--u)); top: calc(11 * var(--u)); height: calc(18 * var(--u)); }
.bar__mark img { height: 100%; width: auto; object-fit: contain; }
.bar__nav { position: absolute; left: calc(408 * var(--u)); top: 0; height: 100%; display: flex; align-items: center; gap: calc(18 * var(--u)); }
.bar a { font-size: calc(12 * var(--u)); line-height: 1; text-transform: uppercase; color: #fff; }
.bar__cta { position: absolute; right: calc(29 * var(--u)); top: 0; height: 100%; display: flex; align-items: center; }
.bar__nav a, .bar__cta { transition: color 160ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .bar__nav a:hover, .bar__cta:hover { color: var(--sage); } }
.bar__burger { display: none; }
.menu { position: fixed; inset: calc(40 * var(--u)) 0 0; z-index: 19; background: var(--ground); display: flex; flex-direction: column; padding: calc(24 * var(--u)) calc(12 * var(--u)); gap: calc(10 * var(--u)); }
.menu[hidden] { display: none; }
.menu a { font: 400 calc(40 * var(--u))/1.1 var(--serif); text-transform: uppercase; }

/* sections are artboards */
.sec { position: relative; border-top: 1px solid var(--teal); }

/* hero */
.hero { position: relative; height: calc(760 * var(--u)); overflow: hidden; }
.hero__name { position: absolute; inset: calc(104 * var(--u)) 0 auto; text-align: center; font: 400 calc(116 * var(--u))/calc(104 * var(--u)) var(--serif); text-transform: uppercase; white-space: nowrap; }
.hero__name span { display: block; }
.hero__name { z-index: 1; transform: translate3d(0, calc(var(--hy, 0) * 1px), 0); opacity: var(--hfade, 1); will-change: transform; }
.hero__photo { position: absolute; z-index: 2; left: calc(240 * var(--u)); top: calc(345 * var(--u)); width: calc(420 * var(--u)); height: calc(280 * var(--u)); }
.hero__who { position: absolute; z-index: 2; left: calc(660 * var(--u)); top: calc(345 * var(--u)); width: calc(345 * var(--u)); height: calc(300 * var(--u)); box-sizing: border-box; padding: 0 calc(20 * var(--u)) 0 calc(45 * var(--u)); background: var(--ground); }
.hero__lead { font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u)); color: var(--sage); text-transform: uppercase; }
.hero__facts { margin-top: calc(21 * var(--u)); width: calc(240 * var(--u)); line-height: calc(21 * var(--u)); }
.hero__cta { position: absolute; z-index: 3; left: calc(705 * var(--u)); top: calc(640 * var(--u)); }
/* Gustav's portrait (his LinkedIn photo, 2026-10-27) above Book a call */
.hero__me { display: flex; align-items: center; gap: calc(14 * var(--u)); margin-top: calc(18 * var(--u)); }
.hero__me img { width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: 50%; object-fit: cover; flex: none; }
.hero__me span { line-height: calc(17 * var(--u)); color: var(--sage); }
.hero__me b { display: block; font-weight: 500; color: var(--cream); }

/* entrance: Tilda fadeinleft / fadeinright */
.fl { opacity: 0; transform: translate3d(calc(-100 * var(--u)), 0, 0); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.fl[data-fx="right"] { transform: translate3d(calc(100 * var(--u)), 0, 0); }
.fl.is-in { opacity: 1; transform: none; }
.no-js .fl { opacity: 1; transform: none; }

/* kompetencer */
.fields { height: calc(700 * var(--u)); overflow: hidden; }
.fields__text { position: absolute; left: calc(497 * var(--u)); top: calc(145 * var(--u)); width: calc(189 * var(--u)); line-height: calc(17 * var(--u)); display: grid; gap: calc(18 * var(--u)); }
.fields .head { left: 0; right: 0; text-align: center; }
.offers { left: calc(270 * var(--u)); width: calc(660 * var(--u)); grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; column-gap: calc(60 * var(--u)); row-gap: 0; top: calc(150 * var(--u)); }
.offer { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
.offer__body { display: grid; gap: calc(10 * var(--u)); align-content: start; justify-items: start; }
.offer__more { color: var(--sage); text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.offer__more:hover { color: var(--cream); }
/* Offer 01 zone: its two sections share one tint. */
.brain, .ask { background: var(--tint); }
.ask { border-top-color: rgba(147, 177, 166, .12); }
.label--offer { color: var(--sage); font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); font-weight: 500; }
.label--offer b { font-weight: 500; margin-right: calc(6 * var(--u)); color: var(--cream); }
.dir__note { position: absolute; left: calc(30 * var(--u)); top: calc(62 * var(--u)); width: calc(300 * var(--u)); line-height: calc(17 * var(--u)); }
.offer__t { margin-bottom: calc(8 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); font-weight: 500; color: var(--sage); text-transform: uppercase; }
.offer__t b { font-weight: 500; margin-right: calc(6 * var(--u)); color: var(--cream); }
.rows { position: absolute; left: 0; right: 0; top: calc(372 * var(--u)); display: grid; gap: calc(15 * var(--u)); }
.rows__r { display: flex; gap: calc(20 * var(--u)); width: max-content; will-change: transform; }
.rows__r span { flex: none; display: inline-flex; align-items: center; height: calc(50 * var(--u)); padding: 0 calc(40 * var(--u)); border: 1px solid var(--sage); border-radius: calc(30 * var(--u)); color: var(--sage); font-size: calc(18 * var(--u)); line-height: 1; text-transform: uppercase; white-space: nowrap; }
.rows__r[data-row="1"] { margin-left: calc(-37 * var(--u)); transform: translate3d(calc(var(--sc-p, 0) * -1010 * var(--u)), 0, 0); }
.rows__r[data-row="2"] { margin-left: calc(-1180 * var(--u)); transform: translate3d(calc(var(--sc-p, 0) * 1145 * var(--u)), 0, 0); }
.rows__r[data-row="3"] { margin-left: calc(-85 * var(--u)); transform: translate3d(calc(var(--sc-p, 0) * -1180 * var(--u)), 0, 0); }

/* baggrund */
.bg { height: calc(740 * var(--u)); }
.bg .head span + span { margin-top: calc(-55 * var(--u)); }
.cover { overflow: hidden; }
.cover::after { content: ""; position: absolute; inset: -2px; background: var(--ground); transform: translate3d(0, 0, 0); transition: transform 1.5s var(--ease) .5s; }
.cover.is-in::after { transform: translate3d(0, 102%, 0); }
.no-js .cover::after { display: none; }
.bg__photo { position: absolute; left: calc(30 * var(--u)); top: calc(222 * var(--u)); width: calc(310 * var(--u)); height: calc(392 * var(--u)); }
.bg__list { position: absolute; left: calc(497 * var(--u)); top: calc(220 * var(--u)); width: calc(676 * var(--u)); }
.list { border-top: 1px solid var(--teal); margin-bottom: calc(32 * var(--u)); }
.list li { position: relative; display: flex; justify-content: space-between; gap: calc(40 * var(--u)); padding: calc(12 * var(--u)) calc(2 * var(--u)) calc(12 * var(--u)) 0; min-height: calc(50 * var(--u)); border-bottom: 1px solid var(--teal); line-height: calc(17 * var(--u)); }
.list li::before { content: ""; position: absolute; inset: 0; background: var(--teal); opacity: 0; transform: scaleY(.2); transition: opacity 100ms linear, transform 300ms var(--ease); z-index: -1; }
.list span { max-width: calc(512 * var(--u)); }
.list span a { text-decoration: underline; text-decoration-color: var(--sage); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.list b { font-weight: 400; text-transform: uppercase; line-height: calc(16 * var(--u)); padding-top: 1px; white-space: nowrap; }
.bg__list .list { isolation: isolate; }
@media (hover: hover) and (pointer: fine) { .list li:hover::before { opacity: 1; transform: none; } }

/* forløb: a pinned stage where the cards stack */
.dir { border-top: 0; }
.dir__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; border-top: 1px solid var(--teal); }
.dir__head { position: absolute; inset: 0 0 auto; height: calc(222 * var(--u)); }
.dir__head .head--two span + span { margin-top: calc(-13 * var(--u)); }
.card { position: absolute; left: 0; right: 0; top: 0; background: var(--ground); border-top: 1px solid var(--teal); transform: translate3d(0, calc(var(--y, 0) * var(--u)), 0); will-change: transform; }
.card[data-card="1"] { --y: 222; height: calc(314 * var(--u)); z-index: 1; }
.card[data-card="2"] { --y: 535; height: calc(317 * var(--u)); z-index: 2; }
.card[data-card="3"] { --y: 852; height: calc(364 * var(--u)); z-index: 3; }
.card--teal { background: var(--teal); border-top: 0; }
.card__t { position: absolute; left: calc(30 * var(--u)); top: calc(16 * var(--u)); width: calc(440 * var(--u)); white-space: nowrap; font: 400 calc(30 * var(--u))/calc(30 * var(--u)) var(--serif); text-transform: uppercase; }
.card__side .card__sub { position: absolute; left: calc(30 * var(--u)); top: calc(56 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: var(--sage); text-transform: uppercase; }
.card__body { position: absolute; left: calc(497 * var(--u)); top: calc(16 * var(--u)); width: calc(600 * var(--u)); }
.card__k { color: var(--sage); text-transform: uppercase; line-height: calc(16 * var(--u)); margin-bottom: calc(15 * var(--u)); }
.card__grid { display: grid; grid-template-columns: calc(255 * var(--u)) calc(255 * var(--u)); column-gap: calc(33 * var(--u)); row-gap: calc(15 * var(--u)); line-height: calc(17 * var(--u)); margin-bottom: calc(24 * var(--u)); }
.card--teal .card__grid { color: var(--cream); }

/* værktøjer: pinned while the run slides left */
.tools { border-top: 0; height: calc(330 * var(--u)); }
.tools__in { position: absolute; left: 0; right: 0; top: 0; height: calc(300 * var(--u)); border-top: 1px solid var(--teal); }
.tools .head { top: calc(24 * var(--u)); line-height: calc(80 * var(--u)); }
.tools__rail { position: absolute; left: 0; right: 0; top: calc(140 * var(--u)); display: flex; align-items: center; gap: calc(80 * var(--u)); margin: 0; padding: calc(20 * var(--u)) calc(31 * var(--u)); list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: calc(31 * var(--u)); scrollbar-width: none; }
.tools__rail::-webkit-scrollbar { display: none; }
.tools__rail li { scroll-snap-align: start; flex: none; }
.tools__rail:focus-visible { outline: 2px solid var(--sage); outline-offset: -2px; }
/* Sideways scrollers (tools band, chat tabs on phones): arrow buttons + edge fades. */
.snav { position: absolute; z-index: 2; width: calc(46 * var(--u)); height: calc(46 * var(--u)); display: grid; place-items: center; padding: 0; border: 1px solid var(--sage); border-radius: 50%; background: var(--ground, #041211); color: var(--cream); cursor: pointer; transition: background .25s, color .25s; }
.snav[hidden] { display: none; }
.snav:hover { background: var(--sage); color: var(--ground, #041211); }
.snav:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.snav svg { width: 45%; height: 45%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tools__nav { top: calc(160 * var(--u)); }
.tools__nav.snav--next { right: calc(30 * var(--u)); }
.tools__nav.snav--prev { left: calc(30 * var(--u)); }
.is-scroller { --fl: 0px; --fr: 0px; -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--fl) * .4), #000 var(--fl), #000 calc(100% - var(--fr)), transparent calc(100% - var(--fr) * .4)); mask-image: linear-gradient(90deg, transparent calc(var(--fl) * .4), #000 var(--fl), #000 calc(100% - var(--fr)), transparent calc(100% - var(--fr) * .4)); }
.tools__rail.has-prev { --fl: calc(150 * var(--u)); }
.tools__rail.has-next { --fr: calc(190 * var(--u)); }
.tools__rail li { font: 400 calc(38 * var(--u))/1 var(--sans); letter-spacing: -0.02em; color: #BFC4BD; white-space: nowrap; }

/* kontakt */
.contact { height: calc(583 * var(--u)); }
.contact__photo { position: absolute; left: calc(30 * var(--u)); top: calc(33 * var(--u)); width: calc(282 * var(--u)); height: calc(377 * var(--u)); }
.contact .head { top: calc(24 * var(--u)); line-height: calc(80 * var(--u)); }
.contact__body { position: absolute; left: calc(497 * var(--u)); top: calc(155 * var(--u)); width: calc(671 * var(--u)); }
.kicker { font-size: calc(20 * var(--u)); line-height: calc(26 * var(--u)); color: var(--sage); text-transform: uppercase; }
.kicker--form { margin-top: calc(40 * var(--u)); }
.small { margin-top: calc(4 * var(--u)); width: calc(330 * var(--u)); line-height: calc(17 * var(--u)); }
.form { display: grid; grid-template-columns: 1fr 1fr calc(210 * var(--u)); column-gap: calc(20 * var(--u)); align-items: end; margin-top: calc(40 * var(--u)); }
.field input { width: 100%; height: calc(40 * var(--u)); background: transparent; border: 0; border-bottom: 1px solid rgba(248, 247, 238, .5); color: var(--cream); font: 400 calc(12 * var(--u))/1 var(--sans); padding: 0; border-radius: 0; transition: border-color 160ms var(--ease); }
.field input:focus { outline: none; border-bottom-color: var(--sage); }
.field input[aria-invalid="true"] { border-bottom-color: #E9A38F; }
.form__msg { grid-column: 1 / -1; min-height: calc(17 * var(--u)); margin-top: calc(10 * var(--u)); color: var(--sage); line-height: calc(17 * var(--u)); }
.fine { font-size: calc(10 * var(--u)); line-height: calc(16 * var(--u)); opacity: .9; }
.contact__call { margin-top: calc(24 * var(--u)); }
.contact__call a { color: var(--sage); text-decoration: underline; text-underline-offset: .2em; white-space: nowrap; }

/* footer */
.foot { position: relative; height: calc(47 * var(--u)); border-top: 1px solid var(--teal); }
.foot > * { position: absolute; top: calc(10 * var(--u)); line-height: calc(17 * var(--u)); }
.foot > :nth-child(1) { left: calc(30 * var(--u)); }
.foot > :nth-child(2) { left: calc(495 * var(--u)); }
.foot > :nth-child(3) { right: calc(30 * var(--u)); }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--sage); } }

/* ---------------------------------------------------------------- phone -- */
@media (max-width: 899px) {
  body { font-size: calc(12 * var(--u)); }
  .bar__nav, .bar__cta { display: none; }
  .bar__mark { left: calc(10 * var(--u)); top: calc(12 * var(--u)); height: calc(16 * var(--u)); }
  .bar__burger { display: block; position: absolute; right: calc(6 * var(--u)); top: 0; width: calc(40 * var(--u)); height: 100%; background: none; border: 0; padding: 0; cursor: pointer; }
  .bar__burger span { position: absolute; left: calc(10 * var(--u)); right: calc(10 * var(--u)); height: 1.5px; background: var(--cream); transition: transform 200ms var(--ease); }
  .bar__burger span:first-child { top: calc(16 * var(--u)); }
  .bar__burger span:last-child { top: calc(23 * var(--u)); }
  .bar__burger[aria-expanded="true"] span:first-child { transform: translateY(calc(3.5 * var(--u))) rotate(45deg); }
  .bar__burger[aria-expanded="true"] span:last-child { transform: translateY(calc(-3.5 * var(--u))) rotate(-45deg); }

  main, .foot { max-width: calc(320 * var(--u)); margin-inline: auto; }
  .label { left: calc(10 * var(--u)); top: calc(10 * var(--u)); font-size: calc(10 * var(--u)); line-height: calc(14 * var(--u)); }
  .head { left: calc(10 * var(--u)); font-size: calc(50 * var(--u)); line-height: calc(50 * var(--u)); white-space: normal; }
  .pill { width: calc(210 * var(--u)); height: calc(40 * var(--u)); font-size: calc(10 * var(--u)); }

  .hero { height: auto; padding: calc(62 * var(--u)) 0 calc(64 * var(--u)); overflow: visible; }
  .hero__name { position: relative; inset: auto; font-size: calc(50 * var(--u)); line-height: calc(46 * var(--u)); }
  .hero__photo { position: relative; left: auto; top: auto; width: auto; height: auto; aspect-ratio: 3 / 2; margin: calc(22 * var(--u)) calc(54 * var(--u)) 0; }
  .hero__who { position: relative; left: auto; top: auto; width: auto; height: auto; padding: 0; margin: calc(18 * var(--u)) calc(54 * var(--u)) 0; }
  .hero__lead { font-size: calc(13 * var(--u)); line-height: calc(15.6 * var(--u)); width: calc(200 * var(--u)); }
  .hero__facts { margin-top: calc(14 * var(--u)); width: auto; line-height: calc(19 * var(--u)); }
  .hero__me { margin-top: calc(18 * var(--u)); gap: calc(12 * var(--u)); }
  .hero__me img { width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
  .hero__cta { position: relative; left: auto; top: auto; margin: calc(24 * var(--u)) 0 0 calc(54 * var(--u)); }
  .hero__name { z-index: 1; }
  .hero__photo, .hero__who, .hero__cta { position: relative; z-index: 2; }

  .fields { height: calc(760 * var(--u)); }
  .fields .head { top: calc(62 * var(--u)); width: calc(300 * var(--u)); }
  .fields__text { left: calc(10 * var(--u)); top: calc(185 * var(--u)); width: calc(220 * var(--u)); line-height: calc(17 * var(--u)); gap: calc(12 * var(--u)); }
  .fields .head { left: calc(10 * var(--u)); right: auto; text-align: left; }
  .offers { left: calc(10 * var(--u)); width: calc(300 * var(--u)); grid-template-columns: 1fr; grid-template-rows: none; row-gap: calc(18 * var(--u)); }
  .offer { display: block; grid-row: auto; }
  .offer__t { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); margin-bottom: calc(4 * var(--u)); }
  .rows { top: calc(520 * var(--u)); gap: calc(15 * var(--u)); }
  .rows__r span { height: calc(40 * var(--u)); padding: 0 calc(22 * var(--u)); font-size: calc(11.5 * var(--u)); }
  .rows__r { margin-left: 0 !important; animation: loop-l 60s linear infinite; }
  .rows__r[data-row="2"] { animation-name: loop-r; animation-duration: 45s; }
  .rows__r[data-row="3"] { animation-duration: 50s; }
  @keyframes loop-l { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-33.333%, 0, 0); } }
  @keyframes loop-r { from { transform: translate3d(-33.333%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

  .bg { height: auto; padding: calc(62 * var(--u)) calc(10 * var(--u)) calc(56 * var(--u)); }
  .bg .head { position: relative; left: auto; top: auto; font-size: calc(36 * var(--u)); line-height: calc(40 * var(--u)); }
  .bg .head span + span { margin-top: 0; }
  .bg__photo { position: relative; left: auto; top: auto; margin-top: calc(28 * var(--u)); width: calc(210 * var(--u)); height: calc(266 * var(--u)); }
  .bg__list { position: relative; left: auto; top: auto; width: auto; margin-top: calc(36 * var(--u)); }
  .list li { gap: calc(24 * var(--u)); line-height: calc(16 * var(--u)); min-height: calc(46 * var(--u)); }
  .list span { max-width: calc(230 * var(--u)); }

  .dir { height: auto !important; }
  .dir__stage { position: relative; height: auto; overflow: visible; }
  .dir__head { position: relative; height: calc(250 * var(--u)); }
  .dir__note { left: calc(10 * var(--u)); top: calc(166 * var(--u)); width: calc(290 * var(--u)); }
  .label--offer { font-size: calc(11 * var(--u)); line-height: calc(14 * var(--u)); }
  .dir__head .head { top: calc(62 * var(--u)); font-size: calc(43 * var(--u)); line-height: calc(43 * var(--u)); }
  .dir__head .head--two span + span { margin-top: 0; }
  .card { position: sticky; height: auto !important; transform: none; padding: calc(16 * var(--u)) calc(10 * var(--u)) calc(40 * var(--u)); }
  .card[data-card="1"] { top: calc(40 * var(--u)); }
  .card[data-card="2"] { top: calc(80 * var(--u)); }
  .card[data-card="3"] { top: calc(120 * var(--u)); }
  .card__t, .card__side .card__sub, .card__body { position: relative; left: auto; top: auto; width: auto; }
  .card__t { white-space: normal; }
  .card__side .card__sub { margin-top: calc(12 * var(--u)); }
  .card__body { margin-top: calc(26 * var(--u)); }
  .card__grid { grid-template-columns: 1fr; line-height: calc(16 * var(--u)); width: calc(290 * var(--u)); }
  .card--teal { margin-inline: calc(-1 * max(0px, (100vw - 320 * var(--u)) / 2)); padding-inline: calc(max(0px, (100vw - 320 * var(--u)) / 2) + 10 * var(--u)); }

  .tools { height: calc(270 * var(--u)); }
  .tools__in { top: 0; height: calc(260 * var(--u)); }
  .tools .head { top: calc(62 * var(--u)); }
  .tools__rail { top: calc(128 * var(--u)); gap: calc(44 * var(--u)); padding-inline: calc(10 * var(--u)); scroll-padding-inline: calc(10 * var(--u)); }
  .snav { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
  .tools__nav { top: calc(142 * var(--u)); }
  .tools__nav.snav--next { right: calc(10 * var(--u)); }
  .tools__nav.snav--prev { left: calc(10 * var(--u)); }
  .tools__rail.has-prev { --fl: calc(60 * var(--u)); }
  .tools__rail.has-next { --fr: calc(70 * var(--u)); }
  .tools__rail li { font-size: calc(24 * var(--u)); }

  .contact { height: auto; padding: calc(80 * var(--u)) calc(10 * var(--u)) calc(48 * var(--u)); display: grid; grid-template-columns: 1fr calc(134 * var(--u)); column-gap: calc(12 * var(--u)); }
  .contact .head { top: calc(10 * var(--u)); font-size: calc(50 * var(--u)); }
  .contact__photo { position: relative; left: auto; top: auto; grid-column: 2; grid-row: 1; width: calc(134 * var(--u)); height: calc(180 * var(--u)); margin-top: calc(40 * var(--u)); }
  .contact__body { display: contents; }
  .contact__body > .kicker:first-child { grid-column: 1; grid-row: 1; margin-top: calc(40 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u)); }
  .contact__body > .small:nth-child(2) { grid-column: 1; grid-row: 1; margin-top: calc(110 * var(--u)); width: auto; line-height: calc(16 * var(--u)); }
  .contact__body > :nth-child(n+3) { grid-column: 1 / -1; }
  .kicker--form { margin-top: calc(36 * var(--u)); font-size: calc(16 * var(--u)); }
  .small { width: auto; line-height: calc(16 * var(--u)); }
  .form { grid-template-columns: 1fr; row-gap: calc(14 * var(--u)); margin-top: calc(16 * var(--u)); }
  .field input { font-size: max(16px, calc(10 * var(--u))); }
  .form__go { margin-top: calc(10 * var(--u)); }
  .fine { margin-top: calc(10 * var(--u)); font-size: calc(8.5 * var(--u)); }

  .foot { height: auto; padding: calc(12 * var(--u)) calc(10 * var(--u)) calc(20 * var(--u)); display: grid; gap: calc(6 * var(--u)); }
  .foot > * { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .fl { transition-duration: 300ms; transform: none; }
  .cover::after { display: none; }
  .hero__name { transform: none !important; opacity: 1 !important; }
  .rows__r { animation: none !important; transform: none !important; }
  .card { transition: none; }
}

/* ---------------------------------------------------------------------------
   Variant: one geometric family, Outfit, matched to the triage wordmark
   (flat t crossbar, cut e terminal, single-storey a, round g). Everything
   else is identical to builds/triage.                                       */
:root { --serif: "Outfit", system-ui, sans-serif; --sans: "Outfit", system-ui, sans-serif; }
body { letter-spacing: 0.005em; }
.hero__name { font-weight: 700; letter-spacing: -0.035em; }
.head, .card__t, .menu a { font-weight: 600; letter-spacing: -0.03em; }

/* Tools as logo lockups (mark + name), monochrome like the reference's client band.
   The band scrolls sideways (swipe, trackpad, arrow buttons); it is not pinned. */
.tools__rail { gap: calc(64 * var(--u)); }
.tools__rail li { display: flex; align-items: center; gap: calc(12 * var(--u)); font: 500 calc(28 * var(--u))/1 var(--sans); letter-spacing: -0.02em; color: #BFC4BD; }
.tools__rail svg { width: auto; height: calc(34 * var(--u)); flex: none; }
.tools__more { position: absolute; left: 0; right: 0; text-align: center; top: calc(232 * var(--u)); font: 400 calc(20 * var(--u))/1 var(--sans); color: var(--sage); }

/* What it knows: an Obsidian-style graph of an example company brain (graph.js) */
.brain { height: calc(900 * var(--u)); }
.brain__text { position: absolute; left: calc(30 * var(--u)); top: calc(250 * var(--u)); width: calc(250 * var(--u)); line-height: calc(17 * var(--u)); display: grid; gap: calc(14 * var(--u)); }
.brain__note { color: var(--sage); }
.brain__graph { position: absolute; left: calc(330 * var(--u)); top: calc(170 * var(--u)); width: calc(850 * var(--u)); height: calc(700 * var(--u)); display: block; touch-action: pan-y; }
.brain--nodata .brain__graph, .brain--nodata .brain__note { display: none; }
@media (max-width: 899px) {
  .brain { height: auto; padding: calc(62 * var(--u)) calc(10 * var(--u)) calc(30 * var(--u)); }
  .brain .head { position: relative; left: auto; top: auto; font-size: calc(36 * var(--u)); line-height: calc(40 * var(--u)); }
  .brain .head span + span { margin-top: 0; }
  .brain__text { position: relative; left: auto; top: auto; width: calc(260 * var(--u)); margin-top: calc(24 * var(--u)); }
  .brain__graph { position: relative; left: auto; top: auto; width: 100%; height: calc(380 * var(--u)); margin-top: calc(16 * var(--u)); }
}

/* Just ask it: six scripted scenarios (chat.js) over one generated, empty chat
   window (assets/chat-frame.webp, 1600x1195). Everything inside .chat is sized
   in cqw of the window, so 1cqw = 16 image px: positions below are image px / 16. */
.ask { height: calc(800 * var(--u)); }
.ask__text { position: absolute; left: calc(30 * var(--u)); top: calc(250 * var(--u)); width: calc(250 * var(--u)); line-height: calc(17 * var(--u)); display: grid; gap: calc(14 * var(--u)); }
.ask__note { color: var(--sage); }
.ask__tabbar { position: absolute; left: calc(495 * var(--u)); top: calc(170 * var(--u)); width: calc(655 * var(--u)); }
.ask__tabs { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.ask__nav { display: none; }
.ask__tab { position: relative; overflow: hidden; padding: calc(8 * var(--u)) calc(14 * var(--u)); border: 1px solid rgba(147, 177, 166, .35); border-radius: calc(30 * var(--u)); background: none; color: var(--sage); font: 500 calc(11 * var(--u))/1 inherit; font-family: inherit; text-transform: uppercase; letter-spacing: .02em; cursor: pointer; transition: color .3s, border-color .3s; }
.ask__tab:hover, .ask__tab.is-on { color: var(--cream); border-color: var(--sage); }
.ask__tab:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.ask__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sage); transform: scaleX(var(--p, 0)); transform-origin: left; }
html.no-js .ask__tabbar { display: none; }
.ask__chat { position: absolute; left: calc(495 * var(--u)); top: calc(260 * var(--u)); width: calc(655 * var(--u)); aspect-ratio: 1600 / 1195; border: 1px solid var(--teal); border-radius: calc(10 * var(--u)); overflow: hidden; margin: 0; }
.chat { position: relative; container-type: inline-size; font-family: 'Lato', system-ui, sans-serif; color: #d1d2d3; }
.chat img { display: block; width: 100%; }
.chat__sel { position: absolute; left: .9cqw; width: 21.1cqw; height: 3.6cqw; top: calc(12.9cqw + var(--row, 1) * 4.25cqw); border-radius: .6cqw; background: rgba(120, 70, 140, .55); mix-blend-mode: screen; transition: top .35s var(--ease); }
.chat__head { position: absolute; left: 25.3cqw; top: 0; height: 7.3cqw; display: flex; align-items: center; margin: 0; font-weight: 700; font-size: 2.4cqw; color: #e8e8e8; }
.chat__log { position: absolute; left: 25cqw; right: 2cqw; top: 9.6cqw; height: 53.5cqw; overflow: hidden; display: flex; flex-direction: column; gap: 2.6cqw; }
.chat__log.is-over { -webkit-mask-image: linear-gradient(transparent, #000 4cqw); mask-image: linear-gradient(transparent, #000 4cqw); }
.msg { display: grid; grid-template-columns: 5.4cqw 1fr; column-gap: 2.4cqw; align-items: start; font-size: 2cqw; line-height: 1.5; }
.msg p { margin: 0; }
.msg--short { margin-top: -1.2cqw; }
.msg.is-new { animation: msg-in .45s var(--ease) both; }
.msg.is-own { animation: msg-own .9s var(--ease) both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(1cqw); } }
@keyframes msg-own { from { opacity: 0; transform: translateY(1cqw); } }
.msg__av { width: 5.4cqw; height: 5.4cqw; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 2.6cqw; }
.msg__av--bot { border-radius: 1cqw; background: #93B1A6; grid-template-columns: repeat(3, .55cqw); grid-auto-rows: .55cqw; gap: .45cqw; place-content: center; }
.msg__av--bot i { display: block; width: .55cqw; height: .55cqw; border-radius: 50%; background: #fff; opacity: .9; }
.msg__meta { display: flex; align-items: baseline; gap: 1cqw; }
.msg__meta b { color: #f2f2f2; font-size: 2.1cqw; }
.msg__app { padding: .1cqw .5cqw; border-radius: .3cqw; background: #2c2d30; color: #a4a5a8; font-size: 1.3cqw; letter-spacing: .03em; }
.msg__t { color: #8b8c90; font-size: 1.55cqw; }
.msg__text b { color: #f2f2f2; }
.chat__ok { color: #7fc8a0; }
.chat__a { color: #4fb3e8; text-decoration: underline; text-decoration-color: rgba(79, 179, 232, .45); text-underline-offset: .2em; }
.msg p.msg__src { margin-top: .6cqw; color: #8b8c90; font-size: 1.7cqw; }
.msg__quote { margin: 1cqw 0 0; padding: .2cqw 0 .2cqw 1.6cqw; border-left: .35cqw solid #93B1A6; color: #c3c4c6; font-size: 1.85cqw; }
.msg__file { display: inline-flex; align-items: center; gap: 1.4cqw; margin-top: 1cqw; padding: 1cqw 1.8cqw 1cqw 1cqw; border: 1px solid #3a3b3e; border-radius: 1cqw; background: #1a1b1e; font-size: 1.7cqw; line-height: 1.35; color: #a4a5a8; }
.msg__file b { color: #f2f2f2; }
.msg__thumb { width: 7.4cqw; height: 4.6cqw; border-radius: .4cqw; background: #f3f1ea; display: grid; align-content: center; gap: .45cqw; padding: 0 .9cqw; }
.msg__thumb i { height: .45cqw; border-radius: .2cqw; background: #183D3D; }
.msg__thumb i:nth-child(1) { width: 70%; height: .7cqw; }
.msg__thumb i:nth-child(2) { width: 90%; background: #93B1A6; }
.msg__thumb i:nth-child(3) { width: 55%; background: #93B1A6; }
.msg p.msg__btns { display: flex; flex-wrap: wrap; gap: .9cqw; margin-top: 1.1cqw; }
.msg__btn { padding: .55cqw 1.4cqw; border: 1px solid #5d5e62; border-radius: .6cqw; font-weight: 700; font-size: 1.65cqw; color: #e8e8e8; transition: background .25s, transform .25s, box-shadow .25s; }
.msg__btn--go { background: #148567; border-color: #148567; color: #fff; }
.msg__btn.is-pressed { background: #0d5c47; border-color: #0d5c47; transform: scale(.96); box-shadow: 0 0 0 .35cqw rgba(20, 133, 103, .35); }
.chat__day { display: flex; align-items: center; gap: 1.5cqw; margin: 0; color: #c3c4c6; font-weight: 700; font-size: 1.6cqw; }
.chat__day::before, .chat__day::after { content: ""; flex: 1; height: 1px; background: #35363a; }
.chat__day span { padding: .4cqw 1.6cqw; border: 1px solid #35363a; border-radius: 3cqw; animation: msg-in .45s var(--ease) both; }
.msg--dots .msg__main { padding-top: 1.6cqw; }
.chat__dots { display: inline-flex; gap: .7cqw; }
.chat__dots i { width: 1cqw; height: 1cqw; border-radius: 50%; background: #93B1A6; animation: ask-dot 1s ease-in-out infinite; }
.chat__dots i:nth-child(2) { animation-delay: .15s; }
.chat__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ask-dot { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-35%); } }
.chat__input { position: absolute; left: 25.9cqw; width: 71.3cqw; top: 64.6cqw; height: 6.9cqw; margin: 0; padding: 0 2.1cqw; display: flex; align-items: center; font-size: 2cqw; white-space: nowrap; overflow: hidden; }
.chat__ph { color: #7c7d81; }
.chat__typed { color: #e8e8e8; }
.chat__typed:not(:empty)::after { content: ""; display: inline-block; width: .15cqw; height: 2.4cqw; margin-left: .15cqw; vertical-align: -0.45cqw; background: #e8e8e8; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .msg.is-new, .msg.is-own { animation: none; } .chat__sel { transition: none; } }
@media (max-width: 899px) {
  .ask { height: auto; padding: calc(62 * var(--u)) calc(10 * var(--u)) calc(40 * var(--u)); }
  .ask .head { position: relative; left: auto; top: auto; font-size: calc(36 * var(--u)); line-height: calc(40 * var(--u)); }
  .ask__text { position: relative; left: auto; top: auto; width: calc(260 * var(--u)); margin-top: calc(24 * var(--u)); }
  .ask__tabbar { position: relative; left: auto; top: auto; width: auto; margin: calc(24 * var(--u)) calc(-10 * var(--u)) 0; }
  .ask__tabs { padding: 2px calc(10 * var(--u)); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .ask__nav { display: grid; top: 50%; margin-top: calc(-17 * var(--u)); }
  .ask__nav[hidden] { display: none; }
  .ask__nav.snav--next { right: calc(6 * var(--u)); }
  .ask__nav.snav--prev { left: calc(6 * var(--u)); }
  .ask__tabs.has-prev { --fl: calc(76 * var(--u)); }
  .ask__tabs.has-next { --fr: calc(84 * var(--u)); }
  .ask__tabs::-webkit-scrollbar { display: none; }
  .ask__tab { flex: none; font-size: calc(10 * var(--u)); padding: calc(9 * var(--u)) calc(12 * var(--u)); }
  .ask__chat { position: relative; left: auto; top: auto; width: 100%; margin-top: calc(12 * var(--u)); border-radius: calc(8 * var(--u)); }
  /* phones: crop the sidebar (left 22.5% of the window) so the chat reads larger */
  .ask__chat { aspect-ratio: 1240 / 1195; }
  .chat { width: 129%; margin-left: -29%; }
  .chat__head { font-size: 3cqw; }
  .chat__log { gap: 3cqw; }
  .msg { grid-template-columns: 6.4cqw 1fr; font-size: 2.65cqw; line-height: 1.45; }
  .msg__av { width: 6.4cqw; height: 6.4cqw; font-size: 3cqw; }
  .msg__av--bot { grid-template-columns: repeat(3, .7cqw); grid-auto-rows: .7cqw; gap: .55cqw; }
  .msg__av--bot i { width: .7cqw; height: .7cqw; }
  .msg__meta b { font-size: 2.7cqw; }
  .msg__t, .msg__app { font-size: 2cqw; }
  .msg p.msg__src, .msg__file, .msg__quote { font-size: 2.3cqw; }
  .msg__btn { font-size: 2.2cqw; }
  .chat__input { font-size: 2.6cqw; }
}
@media (max-width: 899px) {
  .tools__rail { gap: calc(36 * var(--u)); }
  .tools__rail li { font-size: calc(20 * var(--u)); gap: calc(9 * var(--u)); }
  .tools__rail svg { height: calc(24 * var(--u)); }
  .tools__more { top: calc(200 * var(--u)); font-size: calc(14 * var(--u)); }
}

/* First client (#case): label + head like every section, then intro on the left
   and the "what it does" list, quote and pill on the right (the Background grid). */
.case { display: grid; grid-template-columns: calc(310 * var(--u)) calc(676 * var(--u)); column-gap: calc(157 * var(--u)); padding: calc(160 * var(--u)) 0 calc(80 * var(--u)) calc(30 * var(--u)); }
.case[hidden] { display: none; }
.case .head { top: calc(24 * var(--u)); line-height: calc(80 * var(--u)); }
.case__intro { display: grid; gap: calc(14 * var(--u)); align-content: start; line-height: calc(17 * var(--u)); }
.case__intro a { text-decoration: underline; text-decoration-color: var(--sage); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.case__fact { color: var(--sage); text-transform: uppercase; }
.case__logo { display: block; width: 100%; height: auto; margin-top: calc(36 * var(--u)); }
.case__main { display: flex; flex-direction: column; align-items: flex-start; }
.case__quote { margin: 0 0 calc(56 * var(--u)); }
.case__quote p { max-width: calc(660 * var(--u)); font-size: calc(26 * var(--u)); line-height: calc(36 * var(--u)); color: var(--cream); }
.case__quote footer { margin-top: calc(18 * var(--u)); line-height: calc(17 * var(--u)); color: var(--sage); text-transform: uppercase; }
/* Tasks as outlined chips */
.case__tasks { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); border: 0; isolation: isolate; }
.case__tasks li { min-height: 0; padding: calc(10 * var(--u)) calc(18 * var(--u)); border: 1px solid var(--teal); border-radius: calc(30 * var(--u)); }
.case__tasks li::before { border-radius: calc(30 * var(--u)); }
.case__tasks span { max-width: none; }
@media (max-width: 899px) {
  .case { display: block; padding: calc(62 * var(--u)) calc(10 * var(--u)) calc(48 * var(--u)); }
  .case .head { position: relative; left: auto; top: auto; font-size: calc(36 * var(--u)); line-height: calc(40 * var(--u)); }
  .case__intro { margin-top: calc(20 * var(--u)); }
  .case__logo { width: calc(240 * var(--u)); margin-top: calc(20 * var(--u)); margin-bottom: calc(8 * var(--u)); }
  .case__main { margin-top: calc(32 * var(--u)); }
  .case__quote { margin-bottom: calc(36 * var(--u)); }
  .case__quote p { font-size: calc(18 * var(--u)); line-height: calc(25 * var(--u)); }
  .case__tasks { gap: calc(8 * var(--u)); }
  .case__tasks li { padding: calc(8 * var(--u)) calc(12 * var(--u)); }
}

/* Chat: voice note bubble and image preview */
.msg__voice { display: inline-flex; align-items: center; gap: 1.2cqw; margin-top: .4cqw; padding: .8cqw 1.6cqw .8cqw .8cqw; border-radius: 3cqw; background: #1f3532; }
.msg__play { width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: #93B1A6; position: relative; flex: none; }
.msg__play::after { content: ""; position: absolute; left: 1.3cqw; top: 1cqw; border-left: 1.1cqw solid #041211; border-top: .7cqw solid transparent; border-bottom: .7cqw solid transparent; }
.msg__wave { display: inline-flex; align-items: center; gap: .3cqw; height: 3cqw; }
.msg__wave i { width: .35cqw; border-radius: .2cqw; background: #93B1A6; }
.msg__dur { color: #a4a5a8; font-size: 1.55cqw; }
.msg p.msg__said { margin-top: .6cqw; color: #a4a5a8; font-style: italic; }
.chat__rec { color: #e86a6a; }
.msg__thumb--img { background: linear-gradient(160deg, #cfd9d2 0%, #93B1A6 45%, #183D3D 100%); position: relative; }
.msg__thumb--img::after { content: ""; position: absolute; left: 22%; bottom: 18%; width: 40%; height: 40%; border-radius: .3cqw .3cqw 0 0; background: #f3f1ea; opacity: .85; }
@media (max-width: 899px) {
  .msg__dur { font-size: 2cqw; }
}

/* Case client tag: a sage outlined chip so the section reads as a client case */
.label--case { display: inline-flex; align-items: center; padding: calc(6 * var(--u)) calc(14 * var(--u)); border: 1px solid var(--sage); border-radius: calc(30 * var(--u)); color: var(--sage); font-size: calc(14 * var(--u)); line-height: 1; font-weight: 500; }
/* Background: Book a call + LinkedIn side by side */
.bg__cta { display: flex; align-items: center; gap: calc(28 * var(--u)); }
.bg__in { white-space: nowrap; color: var(--sage); text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) { .bg__in:hover { color: var(--cream); } }
@media (max-width: 899px) {
  .label--case { font-size: calc(11 * var(--u)); padding: calc(5 * var(--u)) calc(10 * var(--u)); }
  .bg__cta { gap: calc(18 * var(--u)); }
}