*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  overflow-x: clip;
  margin: 0; background: var(--bg); color: var(--ink-2);
  font: 400 17px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
html { scrollbar-color: var(--line-strong) var(--bg); }

[id] { scroll-margin-top: 88px; } /* anchors land below the sticky nav */
.wrap { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.icon { width: 20px; height: 20px; flex: none; }

/* Type */
.h1, .h2, .h3, .num, .wordmark { font-family: var(--font-display); color: var(--ink); margin: 0; }
.h1 { font-weight: 600; font-size: clamp(52px, 7.2vw, 96px); line-height: .94; letter-spacing: -.02em; text-wrap: balance; }
.h1 .hl { color: var(--accent); white-space: nowrap; }
.h2 { font-weight: 600; font-size: clamp(38px, 4.4vw, 60px); line-height: 1; letter-spacing: -.015em; text-wrap: balance; }
.h3 { font-weight: 600; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; letter-spacing: -.01em; }
.lead { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: var(--ink-2); max-width: 54ch; margin: 0; }
.small { font-size: 14px; line-height: 1.5; color: var(--muted); }
.mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: .01em; font-variant-numeric: tabular-nums; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 14px; height: 56px; padding: 0 8px 0 24px; border-radius: var(--r-pill);
  font: 500 16px/1 var(--font-body); text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-snap), border-color var(--dur-2), color var(--dur-2), transform var(--dur-1) var(--ease-snap); }
.btn-primary { background: var(--btn-bg); color: var(--btn-ink); }
.btn-primary .dot-arrow { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; transition: transform var(--dur-2) var(--ease-snap); }
.btn-primary:hover .dot-arrow { transform: rotate(45deg); }
.btn-ghost { height: 56px; padding: 0 22px; border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-text); }
.btn:active { transform: scale(.98); }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn-sm { height: 42px; padding: 0 6px 0 18px; font-size: 15px; gap: 10px; }
.btn-sm .dot-arrow { width: 30px; height: 30px; }
.link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 6px; text-decoration-thickness: 2px; font-weight: 500; }
.link:hover { color: var(--accent-text); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--btn-bg); color: var(--btn-ink); padding: 10px 16px; border-radius: var(--r-pill); text-decoration: none; font-weight: 500; }
.skip:focus { top: 12px; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 20; background: transparent;
  border-bottom: 1px solid transparent; transition: border-color var(--dur-2), background-color var(--dur-2); }
.nav.scrolled { border-bottom-color: var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); }
.nav > .wrap { display: flex; align-items: center; height: 76px; gap: var(--s6); }
.wordmark { white-space: nowrap; font-weight: 700; font-size: 24px; letter-spacing: -.01em; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.wordmark i { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); transform: rotate(45deg); }
.nav-links { display: flex; gap: var(--s6); margin-left: auto; }
.nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--ink); }
.nav-links a[aria-current] { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 8px; text-decoration-thickness: 2px; }
.nav-right { display: flex; align-items: center; gap: var(--s3); }
.language-menu { position: relative; font-size: 14px; color: var(--ink-2); }
.language-menu summary { cursor: pointer; white-space: nowrap; padding: 8px; border-radius: var(--r-pill); }
.language-options { position: absolute; right: 0; top: 100%; min-width: 150px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-2); }
.language-options a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.language-options a:hover, .language-options a[aria-current] { background: var(--surface-2); }
.mobile-languages { display: none; }
.language-choices { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s7); }
.footer-languages { margin-left: 0 !important; }
.footer-languages a[aria-current] { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.toggle { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); position: relative; }
.toggle { --tw: 36px; --th: 30px; }
.toggle button { position: relative; z-index: 1; width: var(--tw); height: var(--th); border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; border-radius: var(--r-pill); }
.toggle button[aria-pressed="true"] { color: var(--ink); }
.toggle .knob { position: absolute; top: 3px; left: 3px; width: var(--tw); height: var(--th); border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-snap); }
.toggle[data-pos="1"] .knob { transform: translateX(var(--tw)); }
.toggle[data-pos="2"] .knob { transform: translateX(calc(2 * var(--tw))); }
.toggle .icon { width: 16px; height: 16px; }
.menu-btn .i-close, .menu-btn[aria-expanded="true"] .i-open { display: none; }
.menu-btn[aria-expanded="true"] .i-close { display: block; }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: none; color: var(--ink); place-items: center; }

/* Hero */
.hero { padding-block: var(--s8) var(--s9); position: relative; overflow-x: clip; } /* glow bleeds right; keep it out of the page width */
/* Dark: the portrait sits in a faint cyan "screen light", as if lit by a monitor at night. Light: none. */
.hero::before { content: ""; position: absolute; width: 900px; height: 900px; right: -220px; top: -260px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--hero-glow), transparent); pointer-events: none; }
.hero > * { position: relative; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s8); align-items: center; }
.hero .lead { margin-top: var(--s6); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin-top: var(--s7); }
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s6); }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.hero-meta .icon { width: 16px; height: 16px; color: var(--accent-text); }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; } /* mask room for descenders without changing the line height */
.split .w > span { display: inline-block; }
.js-anim .split .w > span { opacity: 0; transform: translateY(110%); animation: rise var(--dur-4) var(--ease-out) forwards; animation-delay: calc(var(--i) * 55ms + 120ms); }
@keyframes rise { to { transform: none; opacity: 1; } }

.portrait { position: relative; container-type: inline-size; } /* cqw below = % of the square photo's side */
.photo { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 1 / 1; background: var(--surface-2); box-shadow: var(--shadow-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo::after { content: ""; position: absolute; inset: 0; background: var(--photo-veil); pointer-events: none; }
/* The log card can hang below the photo: the caption stacks right, beside it (phones and narrow portraits: one row). */
.photo-cap { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; gap: 6px; margin-top: var(--s4);
  padding-inline: calc(330px - 64px + var(--s5)) 4px; text-align: right; }
.photo-cap b { font: 600 20px/1 var(--font-display); color: var(--ink); letter-spacing: .005em; }

/* Agent log: the one authored motion moment */
/* Sits below his chin (face box ends at 53% of the photo height), over the shoulder; never on the face. */
.agentlog { position: absolute; left: -64px; top: 57cqw; width: 330px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: 14px 14px 10px; }
.agentlog header { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 10px; border-bottom: 1px solid var(--line); }
.agentlog header strong { display: flex; align-items: center; gap: 8px; font: 600 15px/1 var(--font-display); color: var(--ink); letter-spacing: .02em; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-soft); animation: pulse 2s var(--ease-out) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
.agentlog .clock { color: var(--muted); }
.agentlog ol { list-style: none; margin: 0; padding: 6px 0 0; display: grid; }
.agentlog li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: start; padding: 8px 4px; font-size: 13.5px; line-height: 1.35; color: var(--ink-2); }
.agentlog li + li { border-top: 1px dashed var(--line); }
.agentlog li .st { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); margin-top: 1px; }
.agentlog li .st .icon { width: 12px; height: 12px; }
.agentlog li > span:nth-child(2) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* one line per task: the card never jumps */
.agentlog li b { display: block; font-weight: 500; color: var(--ink); }
.agentlog li time { color: var(--muted); font-size: 12px; }
.agentlog li.run .st { background: none; border: 1.5px solid var(--accent); border-right-color: transparent; animation: spin .9s linear infinite; }
.agentlog li.enter { animation: logIn var(--dur-3) var(--ease-out); }
@keyframes logIn { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } }
@keyframes spin { to { transform: rotate(360deg); } }
.agentlog footer { display: flex; justify-content: space-between; padding: 8px 4px 2px; border-top: 1px solid var(--line); margin-top: 4px; font-size: 12px; color: var(--muted); }
/* Narrow portrait (small desktops): no room for the caption beside the card, so the card joins the flow,
   still pulled up to just below the chin (57cqw), and the caption returns to one row under it. */
@container (max-width: 469px) {
  .agentlog { position: relative; top: auto; margin-top: -43cqw; }
  .photo-cap { flex-direction: row; align-items: baseline; padding-left: 4px; text-align: left; }
}

/* Built strip */
.built { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.built .wrap { display: flex; align-items: center; gap: var(--s7); min-height: 96px; flex-wrap: wrap; padding-block: var(--s4); }
.built p { margin: 0; font-size: 14px; color: var(--muted); max-width: 16ch; line-height: 1.4; }
.built ul { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s8); list-style: none; margin: 0; padding: 0; flex: 1; justify-content: space-between; }
.built li { white-space: nowrap; font: 600 28px/1 var(--font-display); color: var(--ink); letter-spacing: -.005em; display: flex; align-items: baseline; gap: 10px; }
.built li small { font: 400 12px/1 var(--font-mono); color: var(--muted); }

/* Logo marquee: pure CSS, one stream of tools under the numbers. The .proof border above is the only rule (no double line). */
.logos { padding-block: var(--s7) 0; }
.logos-label { margin: 0 0 var(--s5); font-size: 14px; line-height: 1.4; color: var(--muted); }
.logos-view { overflow: hidden; height: 28px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.logos-track { display: flex; width: max-content; will-change: transform; animation: marquee 60s linear infinite; }
.logos-list { display: flex; flex: none; list-style: none; margin: 0; padding: 0; }
/* Gap lives on the items (padding-right) so translateX(-50%) lands exactly on the second copy. */
.logos-list li { display: flex; align-items: center; gap: 10px; flex: none; padding-right: var(--s8); height: 28px; color: var(--muted); font: 600 20px/1 var(--font-display); letter-spacing: -.005em; white-space: nowrap; transition: color var(--dur-2); }
.logos-list li:hover { color: var(--ink); }
.logos-list .icon { width: 28px; height: 28px; }
.logos-note { margin: var(--s5) 0 0; color: var(--muted); font-size: 12px; }
.logos-view:hover .logos-track, .logos-view:focus-within .logos-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Sections */
.section { padding-block: var(--s10) 0; }
.section.tight { padding-top: var(--s8); }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: var(--s6); margin-bottom: var(--s8); flex-wrap: wrap; }

/* Proof band (Sana-style ruled grid) */
.proof { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof > div { padding: var(--s6) var(--s6) var(--s6) 0; display: flex; flex-direction: column; justify-content: space-between; min-height: 200px; }
.proof > div + div { border-left: 1px solid var(--line); padding-left: var(--s6); }
.num { font-weight: 600; font-size: clamp(56px, 6vw, 84px); line-height: .9; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.num sup { font-size: .5em; color: var(--accent); vertical-align: .55em; margin-left: 2px; }
.proof p { margin: var(--s5) 0 0; max-width: 24ch; color: var(--ink-2); font-size: 16px; line-height: 1.45; }

/* Work (experience) */
.work { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s8); align-items: start; }
.work-intro { position: sticky; top: 110px; }
.work-intro p { margin: var(--s5) 0 0; color: var(--ink-2); }
.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 40px; gap: var(--s5); padding: var(--s6) var(--s2); border-bottom: 1px solid var(--line);
  text-decoration: none; transition: background-color var(--dur-2) ease; border-radius: 2px; }
a.row:hover { background: var(--accent-soft); }
.row .yr { align-self: start; color: var(--muted); padding-top: 12px; display: flex; align-items: center; gap: 8px; }
.row .yr .live { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.row .role { font-size: 14px; color: var(--muted); margin-top: 6px; }
.row p { margin: var(--s3) 0 0; color: var(--ink-2); max-width: 60ch; }
.row .go { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--ink);
  margin-top: 4px; transition: transform var(--dur-2) var(--ease-snap), background-color var(--dur-2), border-color var(--dur-2); }
.row:hover .go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: rotate(45deg); }

/* Services */
.svc { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: start; }
.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-item > h3 { margin: 0; font: inherit; }
.acc-item button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); background: none; border: 0; color: inherit;
  padding: var(--s6) 0; cursor: pointer; text-align: left; }
.acc-item .pm { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--ink); flex: none;
  transition: transform var(--dur-3) var(--ease-snap), background-color var(--dur-2), border-color var(--dur-2); }
.acc-item.open .pm { transform: rotate(45deg); background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-snap); }
.acc-item.open .acc-body { grid-template-rows: 1fr; }
.acc-body > div { overflow: hidden; }
.acc-body ul { list-style: none; margin: 0; padding: 0 0 var(--s6); display: grid; gap: var(--s3); max-width: 58ch; }
.acc-body li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; color: var(--ink-2); }
.acc-body li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin: 10px 0 0 4px; }

.fit { position: sticky; top: 110px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s7) var(--s6) var(--s6); box-shadow: var(--shadow-1); }
.fit ul { list-style: none; margin: var(--s5) 0 var(--s6); padding: 0; display: grid; gap: var(--s4); }
.fit li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; color: var(--ink-2); line-height: 1.45; }
.fit li .icon { width: 20px; height: 20px; color: var(--accent-text); margin-top: 2px; }
.fit .avail { display: flex; align-items: center; gap: 10px; margin-top: var(--s5); font-size: 14px; color: var(--muted); }

/* About */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); padding-top: var(--s8); border-top: 1px solid var(--line); }
.about .statement { font: 500 clamp(24px, 2.2vw, 30px)/1.3 var(--font-display); color: var(--ink); margin: 0; letter-spacing: .002em; max-width: 34ch; }
.about .statement em { font-style: normal; color: var(--accent-text); }
.socials { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.socials a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  text-decoration: none; font-size: 14px; font-weight: 500; color: var(--ink); transition: border-color var(--dur-2), color var(--dur-2); }
.socials a:hover { border-color: var(--accent); color: var(--accent-text); }
.socials .icon { width: 16px; height: 16px; }

/* Blog */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.post { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s6);
  text-decoration: none; min-height: 340px; transition: border-color var(--dur-2), transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3); }
.post:hover { border-color: var(--line-strong); transform: translateY(-4px); box-shadow: var(--shadow-1); }
.post time { color: var(--muted); }
.post h2, .post h3 { font: 600 24px/1.1 var(--font-display); color: var(--ink); margin: var(--s4) 0 var(--s4); letter-spacing: -.005em; text-wrap: balance; }
.post p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.post .more { margin-top: auto; padding-top: var(--s5); display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--accent-text); }
.post .more .icon { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-snap); }
.post:hover .more .icon { transform: translate(2px, -2px); }

/* Contact band */
.contact { margin-top: var(--s10); }
.band { background: var(--band-bg); color: var(--band-ink); border-radius: var(--r-xl); padding: var(--s9) var(--s8); position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: end; border: 1px solid var(--line); }
.band::before { content: ""; position: absolute; width: 640px; height: 640px; right: -180px; top: -320px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--band-accent) 28%, transparent), transparent); pointer-events: none; }
.band .h2 { color: var(--band-ink); font-size: clamp(48px, 6vw, 88px); line-height: .92; }
.band .h2 .hl { color: var(--band-accent); }
.band p { color: var(--band-muted); margin: var(--s5) 0 0; max-width: 40ch; }
.band-actions { display: grid; gap: var(--s4); justify-items: start; position: relative; }
.band .btn-primary { background: var(--band-ink); color: var(--band-bg); }
.band .btn-primary .dot-arrow { background: var(--band-accent); color: #041014; }
.band .mail { display: flex; align-items: center; gap: 10px; color: var(--band-ink); text-decoration: none; font-size: 16px; }
.band .mail .icon { color: var(--band-accent); }
.band .mail > span { overflow-wrap: anywhere; }
.band .mail small { font-size: 14px; color: var(--band-muted); }
.band .mail u { text-decoration-color: var(--band-accent); text-underline-offset: 5px; }

/* Mobile menu panel */
.mnav { position: absolute; top: 100%; left: 0; right: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); box-shadow: var(--shadow-2); max-height: calc(100dvh - 64px); overflow-y: auto; }
.mnav[hidden] { display: none; }
.mnav .wrap { display: grid; padding-block: var(--s3) var(--s5); }
.mnav a:not(.btn) { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; font: 600 26px/1.1 var(--font-display); color: var(--ink); }
.mnav .btn { margin-top: var(--s5); justify-content: space-between; }
.nav.menu-open { background: var(--bg); border-bottom-color: var(--line); }

/* Blog index, article, 404 */
.page-head { padding-block: var(--s9) var(--s8); }
.page-head .h1 { font-size: clamp(48px, 6vw, 84px); }
.page-head .lead { margin-top: var(--s5); }
.section.flush { padding-top: 0; }
.notfound .code { color: var(--accent-text); margin: 0 0 var(--s4); }
.notfound .hero-cta { margin-top: var(--s7); }

.article { padding-block: var(--s8) 0; }
.wrap.narrow { max-width: calc(760px + 2 * var(--gutter)); }
.back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; }
.back .icon { width: 16px; height: 16px; transform: rotate(-135deg); transition: transform var(--dur-2) var(--ease-snap); }
.back:hover { color: var(--ink); }
.back:hover .icon { transform: rotate(-135deg) translate(0, -2px); }
.crumbs { margin-top: var(--s4); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.crumbs li + li::before { content: "/"; color: var(--line-strong); }
.crumbs a { color: var(--muted); font-weight: 500; text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.crumbs [aria-current="page"] { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.art-title { font-size: clamp(40px, 5vw, 64px); line-height: 1; margin-top: var(--s5); }
.art-meta { display: flex; gap: 10px; color: var(--muted); margin: var(--s5) 0 var(--s7); }
.art-img { width: 100%; height: auto; border-radius: var(--r-lg); margin-bottom: var(--s7); background: var(--surface-2); border: 1px solid var(--line); }

/* Article body from SEOGrown: bare p, h2, lists, tables, figures. Scoped so nothing else moves. */
.prose { color: var(--ink-2); font-size: 18px; line-height: 1.75; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose figure { margin: 0 0 var(--s5); }
.prose h2, .prose h3, .prose h4 { font-family: var(--font-display); color: var(--ink); font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.prose h2 { font-size: clamp(30px, 3vw, 38px); line-height: 1.05; margin: var(--s8) 0 var(--s4); }
.prose h3 { font-size: 26px; line-height: 1.1; margin: var(--s7) 0 var(--s3); }
.prose h4 { font-size: 21px; margin: var(--s6) 0 var(--s3); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.prose a:hover { color: var(--accent-text); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: var(--s2); padding-left: 4px; }
.prose li::marker { color: var(--accent-text); }
.prose blockquote { border-left: 3px solid var(--accent); padding: 4px 0 4px var(--s5); color: var(--ink); font-style: normal; }
.prose img { width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--line); }
.prose figcaption { font-size: 14px; color: var(--muted); margin-top: var(--s2); }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 var(--s6); font-size: 15px; line-height: 1.5; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; vertical-align: top; min-width: 140px; }
.prose th { background: var(--surface-2); color: var(--ink); font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--s7) 0; }
.prose code { font-family: var(--font-mono); font-size: .9em; background: var(--surface-2); padding: 2px 6px; border-radius: 6px; }

/* Footer */
.foot { padding-block: var(--s8) var(--s7); }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5) var(--s7); }
.foot nav { display: flex; gap: var(--s5); flex-wrap: wrap; margin-left: auto; }
.foot nav a { text-decoration: none; font-size: 14px; color: var(--ink-2); }
.foot .copy { width: 100%; display: flex; justify-content: space-between; padding-top: var(--s5); border-top: 1px solid var(--line); margin-top: var(--s4); }

/* Reveal: visible by default, only animated when JS is on and the element enters */
.js-anim .rv { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
.js-anim .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-anim .rv, .js-anim .split .w > span { opacity: 1 !important; transform: none !important; }
  /* Marquee becomes a static, fully visible wrap: no second copy, no fade. */
  .logos-view { height: auto; -webkit-mask-image: none; mask-image: none; }
  .logos-track { width: auto; will-change: auto; }
  .logos-list[aria-hidden="true"] { display: none; }
  .logos-view { padding-inline: clamp(20px, 5vw, 80px); }
  .logos-list { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; justify-content: center; gap: var(--s4) var(--s7); }
  .logos-list li { padding-right: 0; }
}

/* Tablet */
@media (max-width: 1080px) {
  .hero-grid, .work, .svc, .about, .band { grid-template-columns: 1fr; }
  .work-intro, .fit { position: static; }
  .agentlog { left: 16px; }
  .nav > .wrap { gap: var(--s2); } .nav-links { gap: var(--s3); } /* tablet: links and the call button stay on one line down to 721px */
  .nav-right .btn { white-space: nowrap; }
  .photo-cap { padding-left: calc(16px + 330px + var(--s5)); }
  .posts { grid-template-columns: 1fr 1fr; }
}
/* The extra language control needs the compact navigation on narrow tablets. */
@media (max-width: 870px) {
  .language-menu { display: none; }
  .mobile-languages { display: flex; gap: var(--s5); padding-top: var(--s4); }
  .mnav .mobile-languages a:not(.btn) { font: 500 16px/1.4 var(--font-body); border: 0; }
  .nav-links, .nav-right .btn { display: none; }
  .menu-btn { display: grid; }
  .nav-right { margin-left: auto; }
}
/* Phone */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav > .wrap { height: 64px; gap: var(--s3); }
  .nav-right { gap: var(--s2); }
  .toggle { --tw: 38px; --th: 36px; } /* touch: closer to the 44px target without crowding the bar */
  .hero { padding-block: var(--s6) var(--s8); }
  .hero-grid { gap: var(--s7); }
  .hero-cta { margin-top: var(--s6); }
  .hero-cta .btn { width: 100%; justify-content: space-between; }
  .hero-cta .btn-ghost { justify-content: center; }
  .agentlog { position: relative; left: auto; top: auto; bottom: auto; width: auto; margin: -56px 12px 0; }
  .built ul { gap: var(--s3) var(--s5); justify-content: flex-start; }
  .built .wrap { flex-direction: column; align-items: flex-start; gap: var(--s4); padding-block: var(--s6); }
  .built p { max-width: none; }
  .built ul { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: var(--s4) var(--s5); }
  .built li { font-size: 22px; flex-direction: column; gap: 4px; }
  .logos { padding-top: var(--s6); }
  .logos-view { height: 24px; }
  .logos-list li { height: 24px; padding-right: var(--s7); font-size: 18px; }
  .logos-list .icon { width: 24px; height: 24px; }
  .photo-cap { margin-top: var(--s4); flex-direction: row; align-items: baseline; padding-left: 4px; text-align: left; }
  .section { padding-block: var(--s9) 0; }
  .sec-head { margin-bottom: var(--s6); }
  .proof { grid-template-columns: 1fr; }
  .proof > div { min-height: 0; padding: var(--s5) 0; }
  .proof > div + div { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .row { grid-template-columns: 1fr 40px; }
  .row .yr { grid-column: 1 / -1; padding-top: 0; }
  .posts { grid-template-columns: 1fr; }
  .post { min-height: 0; }
  .band { padding: var(--s8) var(--s5); border-radius: var(--r-lg); }
  .foot nav { margin-left: 0; }
  .page-head { padding-block: var(--s8) var(--s7); }
  .article { padding-top: var(--s6); }
  .prose { font-size: 17px; }
  .foot .copy { flex-direction: column; gap: var(--s2); }
}
/* Small phones (360): the bar must keep its gutter */
@media (max-width: 380px) {
  .nav .wordmark { font-size: 21px; gap: 8px; }
  .toggle { --tw: 34px; }
}