/* Halvern portal preview - one stylesheet for every page.
   Palette: ink #071424, ink-2 #0B1D30, paper #F6F6F4, fog #B1BCC9, gold #DBC291, steel #3E5C76, hairline rgba(228,229,227,.24),
   neon blue #4FB0FF with a 15% brighter pulse #7CC6FF.
   Type: Redaction for page typography and wordmarks.
   Motion rules are scoped to html.motion (set by the boot script only when reduced motion is not requested);
   layout that needs JavaScript is scoped to html.js. Without either class the page is the finished, open page. */

@font-face { font-family: "Redaction"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/redaction-400.woff2?v=ab7c90de") format("woff2"); }
@font-face { font-family: "Redaction"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/redaction-700.woff2?v=815c0294") format("woff2"); }
@font-face { font-family: "Redaction"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/redaction-400-italic.woff2?v=a9a5110e") format("woff2"); }

:root {
  --ink: #071424;
  --ink-2: #0b1d30;
  --paper: #f6f6f4;
  --fog: #b1bcc9;
  --gold: #dbc291;
  --steel: #3e5c76;
  --neon: #4fb0ff;
  --neon-bright: #7cc6ff;
  --rule: rgba(228, 229, 227, .24);
  --rule-soft: rgba(228, 229, 227, .12);
  --wordmark: "Redaction", Georgia, serif;
  --display: "Redaction", Georgia, serif;
  --sans: "Redaction", Georgia, serif;
  --nav-h: 58px;
  --gutter: clamp(20px, 4.2vw, 64px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --measure: 60ch;
}

/* ---------- Cross-document page transitions: a short fade with a small settle. The bar and the launcher stay put. ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms ease-out both vt-out; }
::view-transition-new(root) { animation: 360ms cubic-bezier(.16, 1, .3, 1) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color: var(--paper); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); overflow-x: clip; }
html.motion { scroll-behavior: smooth; }
html.book-open { overflow: hidden; }
body { margin: 0; min-height: 100svh; font: 400 16px/1.6 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--steel); color: var(--paper); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 14px; background: var(--paper); color: var(--ink); font: 500 10.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transform: translateY(-200%); }
.skip:focus { transform: none; }

/* ---------- Ambient neon lines (behind everything; wave and pulse are motion-only) ---------- */
.neon { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.neon svg { display: block; width: 100%; height: 100%; }
.neon path { fill: none; stroke-linecap: round; }
.neon-halo { stroke: var(--neon); stroke-width: 10; opacity: .05; }
.neon-core { stroke: var(--neon); stroke-width: 1.1; opacity: .2; }
.neon-pulse { stroke: var(--neon-bright); stroke-width: 1.6; opacity: 0; stroke-dasharray: 160 2600; stroke-dashoffset: 2760; }
.neon-line { transform-box: view-box; transform-origin: 50% 50%; }
.motion .neon-line { animation: neon-wave 16s ease-in-out infinite alternate; }
.motion .n2 { animation-duration: 21s; animation-delay: -6s; }
.motion .n3 { animation-duration: 14s; animation-delay: -3s; }
.motion .n4 { animation-duration: 19s; animation-delay: -9s; }
.motion .neon-pulse { opacity: .85; animation: neon-slide 11s linear infinite; }
.motion .n2 .neon-pulse { animation-duration: 14s; animation-delay: -4s; }
.motion .n3 .neon-pulse { animation-duration: 9s; animation-delay: -2s; }
.motion .n4 .neon-pulse { animation-duration: 13s; animation-delay: -7s; }
@keyframes neon-wave { from { transform: translateY(-10px) rotate(-.35deg); } to { transform: translateY(10px) rotate(.35deg); } }
@keyframes neon-slide { to { stroke-dashoffset: 0; } }

/* ---------- Type ---------- */
.label { font: 500 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fog); }
.label.gold { color: var(--gold); }
.display { font-family: var(--display); font-weight: 400; letter-spacing: -.02em; line-height: 1.14; text-wrap: balance; overflow-wrap: break-word; }
.h-xl { font-size: clamp(40px, 7vw, 104px); letter-spacing: -.028em; }
.h-l { font-size: clamp(32px, 5vw, 72px); }
.h-m { font-size: clamp(26px, 3.4vw, 46px); }
.h-s { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.15; }
.display em, .gold-em { font-style: normal; color: var(--gold); }
.lede { font-size: clamp(17px, 1rem + .35vw, 20px); line-height: 1.55; color: var(--fog); max-width: 52ch; text-wrap: pretty; }
.prose { max-width: var(--measure); text-wrap: pretty; }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: 1em; }
.prose h3 { font: 700 clamp(18px, 1.6vw, 22px)/1.25 var(--display); letter-spacing: -.015em; margin: 1.8em 0 .5em; }
.prose h3:first-child { margin-top: 0; }
.muted { color: var(--fog); }
.small { font-size: 13px; line-height: 1.55; }
.mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-40 { margin-top: 40px; } .mt-1em { margin-top: 1em; }
html:not(.js) .js-only { display: none; }
.form-note { font-size: 13px; color: var(--fog); }

/* ---------- Controls ---------- */
/* Pills wrap when a label is long, so nothing is clipped on narrow phones; the bar's pill stays on one line. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; max-width: 100%; padding: 11px 20px; border: 1px solid var(--rule); border-radius: 999px; font: 500 11px/1.35 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-align: center; color: var(--paper); text-decoration: none; transition: color .25s var(--ease), border-color .25s var(--ease); }
.btn:hover, .btn:focus-visible { color: var(--gold); border-color: var(--gold); }
.btn.primary { border-color: var(--gold); color: var(--gold); }
.btn.primary:hover, .btn.primary:focus-visible { color: var(--paper); border-color: var(--paper); }
.btn svg { flex: none; width: 12px; height: 12px; }
.text-link { color: var(--paper); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .22em; transition: text-decoration-color .25s, color .25s; }
.text-link:hover { color: var(--gold); text-decoration-color: var(--gold); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; max-width: 100%; min-width: 0; }
.pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border: 1px solid currentColor; border-radius: 999px; font: 500 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.pill.gold { color: var(--gold); }
.pill.fog { color: var(--fog); }

/* ---------- Navigation bar ---------- */
.nav { position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-inline: var(--gutter); background: rgba(7, 20, 36, .74); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule); view-transition-name: site-nav; }
.brand { font: 700 15px/1 var(--wordmark); letter-spacing: .06em; color: var(--paper); text-decoration: none; }
.brand b { font-weight: inherit; color: var(--gold); }
.nav-right { display: flex; align-items: center; gap: 28px; }
.nav-links { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav-links a { position: relative; display: inline-block; padding: 10px 0; font: 500 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fog); text-decoration: none; transition: color .25s var(--ease); }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--gold); }
.nav-links a[aria-current="page"] { color: var(--paper); }
.nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--gold); }
.nav .btn { min-height: 34px; padding: 0 16px; font-size: 10.5px; white-space: nowrap; }
.nav-toggle { display: none; align-items: center; gap: 10px; min-height: 34px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 999px; font: 500 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--paper); transition: color .25s, border-color .25s; }
.nav-toggle[aria-expanded="true"] { color: var(--gold); border-color: var(--gold); }
@media (max-width: 760px) {
  .nav-right { gap: 12px; }
  .js .nav-toggle { display: inline-flex; }
  .js .nav-links { position: fixed; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 4px var(--gutter) 16px; background: var(--ink); border-bottom: 1px solid var(--rule); }
  .js .nav-links { display: none; }
  .js .nav.is-open .nav-links { display: flex; }
  .js .nav-links a { display: block; padding: 14px 0; border-top: 1px solid var(--rule-soft); font-size: 12px; }
  .js .nav-links li:first-child a { border-top: 0; }
  .js .nav-links a[aria-current="page"]::after { left: auto; right: 0; bottom: auto; top: 50%; margin: -2px 0 0; }
  html:not(.js) .nav-links { gap: 14px; }
}
.nav-contact { display: none; } /* "Let's talk" lives in the pill; it joins the menu list only on the narrowest phones */
@media (max-width: 480px) {
  html:not(.js) .nav .btn { display: none; } /* no-JS phones: the three links stay inline; Contact remains in the footer */
}
@media (max-width: 400px) {
  .js .nav .btn { display: none; }
  .js .nav-contact { display: block; }
}

/* ---------- Portal hero ---------- */
.hero { position: relative; height: 250svh; }
/* --p drives the portal (panels, image, wash, dots); --t drives the title. Without motion the portal is open and the
   title stays whole and centred, so reduced-motion and no-JS visitors get a readable finished page. */
.stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; --p: 1; --t: 0; }
.motion .stage { --p: 0; --t: var(--p); }
.hero-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, 0, 0) scale(calc(1.12 - var(--p) * .12)); will-change: transform; }
.hero-wash { position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, var(--gold) 0%, var(--steel) 100%); mix-blend-mode: overlay; opacity: calc(var(--p) * .12); pointer-events: none; }
.hero-veil { position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse 70% 62% at 50% 50%, rgba(7, 20, 36, 0) 0%, rgba(7, 20, 36, .3) 55%, rgba(7, 20, 36, .86) 100%); pointer-events: none; }
.panel { position: absolute; top: 0; bottom: 0; z-index: 3; width: 50.5%; background: var(--ink); will-change: transform; }
.panel-l { left: 0; transform: translate3d(calc(var(--p) * -103%), 0, 0); }
.panel-r { right: 0; transform: translate3d(calc(var(--p) * 103%), 0, 0); }
.dot { position: absolute; left: 50%; top: 50%; z-index: 4; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; pointer-events: none; }
.dot-a { background: var(--gold); box-shadow: 0 0 10px 2px rgba(219, 194, 145, .6); transform: translate3d(calc(var(--p) * -44vw), calc(var(--p) * -40svh), 0); }
.dot-b { background: #9fb6cc; box-shadow: 0 0 10px 2px rgba(159, 182, 204, .55); transform: translate3d(calc(var(--p) * 44vw), calc(var(--p) * 40svh), 0); }
/* The fitter in fx.js sets the real font size so the whole mark fits between the gutters at rest; this is the fallback. */
.portal-title { position: absolute; left: 50%; top: 50%; z-index: 5; margin: 0; white-space: nowrap; font: 700 clamp(28px, 10.6vw, 230px)/1 var(--wordmark); letter-spacing: -.02em; color: var(--paper); transform: translate3d(-50%, -50%, 0) scale(calc(1 + var(--t) * .1)); will-change: transform; }
.portal-title span { display: inline-block; will-change: transform; }
/* The halves travel past the stage edges (half their own width plus more than half the viewport) and the mark fades in
   the last stretch, so the wordmark is gone once the portal is fully open. */
.portal-title .ta { transform: translate3d(calc(var(--t) * (-50% - 56vw)), 0, 0); }
.portal-title .tb { transform: translate3d(calc(var(--t) * (50% + 56vw)), 0, 0); }
.motion .portal-title { opacity: calc(1 - max(0, (var(--t) - .72) / .28)); }
/* Promote only the moving surfaces. Stable tracking avoids reshaping the wordmark on every frame. */
.motion .stage :is(.hero-img, .panel, .dot, .portal-title, .portal-title > span) { -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; }
/* Native scroll timelines let current Safari/Chrome composite the motion without scroll-event writes.
   The sampled curve matches home.js's 1 - (1 - p)^1.8; older engines retain that JS fallback. */
@supports (animation-timeline: view()) and (animation-range: contain) and (animation-timing-function: linear(0, 1)) {
  .motion .hero { view-timeline-name: --portal; view-timeline-axis: block; view-timeline-inset: 0 calc(100% - 100svh); --portal-ease: linear(0, 0.017928, 0.035712, 0.053351, 0.070845, 0.088194, 0.105397, 0.122455, 0.139367, 0.156132, 0.17275, 0.189222, 0.205546, 0.221722, 0.23775, 0.25363, 0.269361, 0.284943, 0.300376, 0.315658, 0.330791, 0.345773, 0.360603, 0.375283, 0.389811, 0.404187, 0.41841, 0.43248, 0.446397, 0.46016, 0.473769, 0.487223, 0.500522, 0.513666, 0.526654, 0.539485, 0.552159, 0.564676, 0.577034, 0.589235, 0.601276, 0.613158, 0.62488, 0.636441, 0.647841, 0.65908, 0.670156, 0.681069, 0.691819, 0.702405, 0.712825, 0.723081, 0.73317, 0.743093, 0.752848, 0.762435, 0.771853, 0.781101, 0.790179, 0.799086, 0.80782, 0.816382, 0.824769, 0.832982, 0.841019, 0.84888, 0.856563, 0.864067, 0.871391, 0.878535, 0.885497, 0.892275, 0.898869, 0.905277, 0.911498, 0.917531, 0.923373, 0.929024, 0.934482, 0.939745, 0.944811, 0.949678, 0.954345, 0.958808, 0.963067, 0.967118, 0.970958, 0.974585, 0.977995, 0.981185, 0.984151, 0.986889, 0.989394, 0.99166, 0.993681, 0.995449, 0.996954, 0.998185, 0.999125, 0.999749, 1); }
  .motion .stage :where(.hero-img, .hero-wash, .panel, .dot, .portal-title, .portal-title > span) {
    animation-duration: 1ms; animation-fill-mode: both; animation-timing-function: var(--portal-ease);
    animation-timeline: --portal; animation-range: contain;
  }
  .motion .hero-img { animation-name: portal-image; }
  .motion .hero-wash { animation-name: portal-wash; }
  .motion .panel-l { animation-name: portal-left; }
  .motion .panel-r { animation-name: portal-right; }
  .motion .dot-a { animation-name: portal-dot-a; }
  .motion .dot-b { animation-name: portal-dot-b; }
  .motion .portal-title { animation-name: portal-title-scale, portal-title-fade; animation-range: contain, contain 50.697882% contain 100%; }
  .motion .portal-title .ta { animation-name: portal-title-left; }
  .motion .portal-title .tb { animation-name: portal-title-right; }
}
@keyframes portal-image { from { transform: translate3d(0, 0, 0) scale(1.12); } to { transform: translate3d(0, 0, 0) scale(1); } }
@keyframes portal-wash { from { opacity: 0; } to { opacity: .12; } }
@keyframes portal-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-103%, 0, 0); } }
@keyframes portal-right { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(103%, 0, 0); } }
@keyframes portal-dot-a { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-44vw, -40svh, 0); } }
@keyframes portal-dot-b { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(44vw, 40svh, 0); } }
@keyframes portal-title-scale { from { transform: translate3d(-50%, -50%, 0) scale(1); } to { transform: translate3d(-50%, -50%, 0) scale(1.1); } }
@keyframes portal-title-fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes portal-title-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-50% - 56vw), 0, 0); } }
@keyframes portal-title-right { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(50% + 56vw), 0, 0); } }
.hero-meta { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.hero-meta > * { position: absolute; margin: 0; font: 500 10.5px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fog); }
.hm-tl { left: var(--gutter); top: calc(var(--nav-h) + 22px); }
.hm-tr { right: var(--gutter); top: calc(var(--nav-h) + 22px); text-align: right; }
.hm-bl { left: var(--gutter); bottom: 28px; display: flex; align-items: center; gap: 12px; }
.hm-bl::after { content: ""; width: 1px; height: 34px; background: var(--rule); }
.hero-line { position: absolute; left: 50%; bottom: 92px; z-index: 6; transform: translateX(-50%); width: min(calc(100% - 2 * var(--gutter)), 44ch); text-align: center; font-size: 14px; line-height: 1.55; color: var(--fog); text-wrap: balance; }
@media (max-width: 600px) {
  .hm-tr { display: none; }
  .hero-line { bottom: 104px; font-size: 13px; }
}

/* ---------- Statement fold ---------- */
.statement { position: relative; min-height: 100svh; display: grid; align-content: center; padding: clamp(96px, 16vh, 160px) var(--gutter); overflow: clip; border-top: 1px solid var(--rule); }
.statement-inner { position: relative; z-index: 1; }
.statement .index { font: 800 clamp(88px, 14vw, 200px)/.9 var(--display); letter-spacing: -.04em; -webkit-text-stroke: 1px var(--fog); color: transparent; opacity: .55; margin-bottom: 28px; }
.statement .label { display: block; margin-bottom: 20px; }
.statement h2 { font: 700 clamp(24px, 3.6vw, 52px)/1.2 var(--display); letter-spacing: -.02em; max-width: 22ch; }
.statement h2 em { font-style: normal; color: var(--gold); }
.statement .support { margin-top: 28px; max-width: 46ch; color: var(--fog); }
.orb { position: absolute; z-index: 0; right: clamp(-220px, -14vw, -80px); top: 50%; width: clamp(280px, 42vw, 640px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; opacity: .3; pointer-events: none; --sp: .5; transform: translateY(calc(-50% + (var(--sp) - .5) * 160px)) rotate(calc((var(--sp) - .5) * 16deg)); }
.motion .orb { --sp: 0; }
.orb img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }

/* ---------- Work stack: sticky cards that slide over each other ---------- */
.work { padding: clamp(80px, 12vh, 150px) var(--gutter); border-top: 1px solid var(--rule); }
.work-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.work-intro > * { min-width: 0; }
.work-intro .label { display: block; margin-bottom: 18px; }
.work-intro .lede { margin-top: 22px; }
.work-intro .actions { justify-self: end; }
@media (max-width: 800px) { .work-intro { grid-template-columns: 1fr; } .work-intro .actions { justify-self: start; } }
.stack { list-style: none; margin: 0; padding: 0; --stack-top: calc(var(--nav-h) + 24px); }
.stack-item { position: sticky; top: var(--stack-top); margin: 0 0 clamp(20px, 3vw, 32px); --cover: 0; }
.stack-item:nth-child(2) { top: calc(var(--stack-top) + 12px); }
.stack-item:nth-child(3) { top: calc(var(--stack-top) + 24px); }
.stack-item:nth-child(4) { top: calc(var(--stack-top) + 36px); }
.stack-item:nth-child(5) { top: calc(var(--stack-top) + 48px); }
.stack-item:nth-child(n+6) { top: calc(var(--stack-top) + 60px); }
.wcard { position: relative; display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); min-height: clamp(360px, 48vh, 540px); background: var(--ink-2); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; transform-origin: 50% 0; transform: scale(calc(1 - var(--cover) * .06)); }
.wcard::before { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--ink); opacity: calc(var(--cover) * .5); pointer-events: none; }
.wcard::after { content: ""; position: absolute; top: -22%; right: -12%; width: 56%; height: 84%; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, var(--tint) 0%, transparent 100%); opacity: var(--tint-a); pointer-events: none; }
.wcard[data-kind="client"] { --tint: var(--gold); --tint-a: .14; }
.wcard[data-kind="prototype"] { --tint: var(--steel); --tint-a: .34; }
.wcard-media { position: relative; z-index: 1; min-height: 0; background: var(--ink); border-right: 1px solid var(--rule); }
.wcard-cover { position: absolute; inset: 0; }
.wcard-cover img, .wcard-cover svg { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.wcard-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 3vw, 36px); min-width: 0; }
.wcard-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wcard .ord { font: 500 11px/1 var(--sans); letter-spacing: .14em; color: var(--fog); }
.wcard-title { font: 700 clamp(24px, 2.8vw, 38px)/1.05 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.wcard-text { font-size: 15px; line-height: 1.55; color: var(--fog); max-width: 44ch; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 4px 0 0; padding: 0; }
.tags li { padding: 5px 10px; border: 1px solid var(--rule-soft); border-radius: 6px; font: 500 10.5px/1.3 var(--sans); letter-spacing: .08em; color: var(--fog); }
.wcard-actions { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 4px 22px; font: 500 11.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.wcard-actions a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 0 6px; color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--rule); transition: color .25s, border-color .25s; }
.wcard-actions a:hover, .wcard-actions a:focus-visible { color: var(--gold); border-color: var(--gold); }
.wcard-actions svg { width: 11px; height: 11px; }
.work-page .stack { margin-top: clamp(8px, 2vw, 24px); }
@media (max-width: 800px) {
  .wcard { grid-template-columns: 1fr; min-height: 0; }
  .wcard-media { aspect-ratio: 16 / 10; border-right: 0; border-bottom: 1px solid var(--rule); }
  .stack { --stack-top: calc(var(--nav-h) + 12px); }
  .stack-item:nth-child(n) { top: var(--stack-top); }
  .stack-item:nth-child(2) { top: calc(var(--stack-top) + 8px); }
  .stack-item:nth-child(3) { top: calc(var(--stack-top) + 16px); }
  .stack-item:nth-child(4) { top: calc(var(--stack-top) + 24px); }
  .stack-item:nth-child(5) { top: calc(var(--stack-top) + 32px); }
  .stack-item:nth-child(n+6) { top: calc(var(--stack-top) + 40px); }
}
@media (max-height: 640px) {
  .stack-item { position: static; }
  .wcard { transform: none; }
  .wcard::before { display: none; }
}

/* ---------- Services roster ---------- */
.roster { padding: clamp(80px, 12vh, 150px) var(--gutter); border-top: 1px solid var(--rule); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 48px); }
.roster-list { list-style: none; margin: 0; padding: 0; }
.roster-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "label mark ord" "name mark ord" "line mark ord"; column-gap: clamp(16px, 3vw, 40px); row-gap: 8px; align-items: center; padding: clamp(20px, 3vw, 32px) 0; border-top: 1px solid var(--rule); text-decoration: none; color: inherit; }
.mark { display: block; width: clamp(56px, 8vw, 104px); aspect-ratio: 1; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; background: var(--ink-2); }
.mark img { width: 100%; height: 100%; object-fit: cover; }
.roster-row .mark { grid-area: mark; align-self: center; }
.mark-lg { width: min(180px, 42%); margin-bottom: 22px; border-radius: 10px; }
.roster-list li:last-child .roster-row { border-bottom: 1px solid var(--rule); }
.roster-row .label { grid-area: label; }
.roster-row .name { grid-area: name; font: 700 clamp(28px, 4.4vw, 60px)/1.02 var(--display); letter-spacing: -.025em; overflow-wrap: anywhere; transition: color .3s var(--ease), transform .3s var(--ease); }
.roster-row .line { grid-area: line; color: var(--fog); font-size: 14px; max-width: 48ch; }
.roster-row .ord { grid-area: ord; align-self: start; font: 500 11px/1 var(--sans); letter-spacing: .14em; color: var(--fog); }
.roster-row:hover .name, .roster-row:focus-visible .name { color: var(--gold); }
@media (hover: hover) { .motion .roster-row:hover .name { transform: translateX(6px); } }

/* ---------- Process table ---------- */
.process { padding: clamp(80px, 12vh, 150px) var(--gutter); border-top: 1px solid var(--rule); }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; padding: 0 16px 14px 0; font: 500 10.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fog); border-bottom: 1px solid var(--rule); }
.table td { vertical-align: top; padding: 22px 24px 22px 0; border-bottom: 1px solid var(--rule); font-size: 14px; line-height: 1.55; color: var(--fog); }
.table td:first-child { font: 700 clamp(22px, 2.4vw, 34px)/1.05 var(--display); letter-spacing: -.02em; color: var(--paper); width: 22%; }
.table td:last-child, .table th:last-child { padding-right: 0; }
.process .fine { margin-top: 16px; font-size: 12px; color: var(--fog); }
@media (max-width: 720px) {
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table, .table tbody { display: block; }
  .table tr { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 16px; row-gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
  .table td { display: block; padding: 0; border: 0; }
  .table td:first-child { grid-row: 1 / span 3; width: auto; }
  .table td:not(:first-child)::before { content: attr(data-label); display: block; margin-bottom: 4px; font: 500 10px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
}

/* ---------- Close and footer ---------- */
.close { padding: clamp(96px, 14vh, 170px) var(--gutter) 0; border-top: 1px solid var(--rule); }
.close-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.close-grid > * { min-width: 0; }
.close h2 { font: 400 clamp(36px, 6.4vw, 96px)/1.14 var(--display); letter-spacing: -.02em; max-width: 17ch; text-wrap: balance; overflow-wrap: break-word; }
.close .fine { margin-top: 22px; max-width: 52ch; font-size: 13px; color: var(--fog); }
.close .actions { justify-content: flex-end; max-width: 440px; }
@media (max-width: 720px) { .close-grid { grid-template-columns: 1fr; } .close .actions { justify-content: flex-start; } }
.footer { margin-top: clamp(56px, 8vh, 96px); border-top: 1px solid var(--rule); padding: 14px 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font: 500 11px/1.6 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fog); }
.footer ul { display: flex; flex-wrap: wrap; gap: 0 18px; list-style: none; margin: 0; padding: 0; }
.footer a { display: inline-block; padding: 8px 0; color: inherit; text-decoration: none; transition: color .25s; }
.footer a:hover, .footer a:focus-visible { color: var(--gold); }
.footer a[aria-current="page"] { color: var(--paper); }
.footer .facts { display: flex; flex-wrap: wrap; gap: 0 18px; padding: 8px 0; }
.footer-contact { flex-basis: 100%; border-top: 1px solid var(--rule-soft); padding-top: 6px; }
.footer-contact ul, .social-links { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-contact li { max-width: 100%; }
.footer-contact a, .social-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 999px; font: 400 14px/1.4 var(--sans); letter-spacing: normal; text-transform: none; color: var(--paper); text-decoration: none; overflow-wrap: anywhere; transition: color .2s, border-color .2s, background-color .2s; }
.footer-contact a:hover, .footer-contact a:focus-visible, .social-links a:hover, .social-links a:focus-visible { color: var(--gold); border-color: var(--gold); background-color: var(--ink-2); }
.social-icon { width: 16px; height: 16px; flex: none; }
/* The giant mark is sized by fx.js to the container width; this is the fallback for uppercase Redaction Bold. */
.giant { margin-top: 12px; transform: translateY(-39px); pointer-events: none; }
.giant span { display: block; font: 700 clamp(30px, 11vw, 260px)/1.05 var(--wordmark); letter-spacing: -.03em; color: var(--paper); text-align: center; white-space: nowrap; }

/* ---------- Inner pages ---------- */
.page { padding: calc(var(--nav-h) + clamp(56px, 10vh, 120px)) var(--gutter) 0; }
.page-head { padding-bottom: clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--rule); }
.page-head .kicker { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; margin-bottom: clamp(28px, 5vw, 56px); border-bottom: 1px solid var(--rule); }
.page-head .lede { margin-top: 22px; }
@media (max-width: 600px) { .page-head .kicker .meta { display: none; } }
.page-section { padding: clamp(48px, 7vw, 96px) 0; border-bottom: 1px solid var(--rule); }
.page-section.no-rule { border-bottom: 0; }
.two-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.two-col > * { min-width: 0; }
.two-col .display { max-width: 16ch; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }
.meta-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px 24px; }
.meta-list dt { font: 500 10.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fog); margin-bottom: 6px; }
.meta-list dd { font-size: 15px; overflow-wrap: anywhere; }
.bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bullets li { position: relative; padding-left: 20px; }
.bullets li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.page-foot { padding: 0 var(--gutter) 24px; }
@media (max-width: 800px) { .page-foot { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } }
.page-foot .footer { margin-top: clamp(64px, 10vh, 120px); }
.draft { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--gold); border-radius: 999px; font: 500 10.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.draft::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.notice { padding: 16px 18px; border: 1px solid var(--rule); border-radius: 6px; font-size: 14px; line-height: 1.55; color: var(--fog); }
.notice strong { color: var(--paper); font-weight: 600; }
.numbered { font: 500 11px/1 var(--sans); letter-spacing: .14em; color: var(--fog); }
.about-figure { position: relative; margin: 0; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; background: var(--ink-2); }
.about-media-row { margin-top: 28px; align-items: center; }
.film-toggle { position: absolute; bottom: 12px; right: 12px; padding: 7px 12px; border-radius: 999px; background: var(--ink); font-size: 12px; opacity: 0; }
.about-figure:hover .film-toggle, .film-toggle:focus-visible { opacity: 1; }
.about-figure video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Service sections on /services */
.service { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; padding: clamp(48px, 7vw, 96px) 0; border-bottom: 1px solid var(--rule); }
.service#websites > .head { align-self: center; }
.service:not(#websites) > .head { display: contents; }
.service-title { grid-column: 1; }
.service:not(#websites) .service-previews { grid-column: 1; grid-row: 2; margin-top: 0; }
.service:not(#websites) > .body { grid-column: 2; grid-row: 2; align-self: center; }
.service > * { min-width: 0; }
.service .head .label { display: block; margin-bottom: 14px; }
.service .head .display { max-width: 12ch; overflow-wrap: anywhere; }
.service .head .ord { display: block; margin-top: 18px; }
.service .body p + p { margin-top: 1em; }
.service .body .bullets { margin-top: 24px; }
.service .related { margin-top: 28px; }
.service-previews { display: grid; gap: 24px; margin-top: 28px; }
.service > .service-previews { grid-column: 1 / -1; grid-template-columns: 1fr; margin-top: 0; }
.service-preview-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 24px; }
.service-preview-copy { min-width: 0; }
.service-preview { display: block; text-decoration: none; }
.service-preview > span { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; color: var(--fog); }
.service-preview > span svg { width: 14px; height: 14px; }
.service-preview:hover > span { color: var(--gold); }
@media (max-width: 800px) {
  .service { grid-template-columns: 1fr; }
  .service-preview-row { grid-template-columns: 1fr; }
  .service:not(#websites) > .head { display: block; }
  .service:not(#websites) > .body { grid-column: auto; grid-row: auto; }
  .service:not(#websites) .service-previews { margin-top: 28px; }
}
@media (max-width: 600px) { .service > .service-previews { grid-template-columns: 1fr; } }

/* Detail pages */
.cover { aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--rule); border-radius: 6px; background: var(--ink-2); }
.cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cover.typo { display: grid; place-items: center; background: var(--ink); }
.cover.typo svg { width: 100%; height: 100%; }
.cover-pair { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.cover-pair .cover { position: relative; aspect-ratio: auto; }
.cover-pair .cover:first-child { aspect-ratio: 16 / 10; }
.cover-pair .cover img { position: absolute; inset: 0; height: 100%; object-fit: contain; object-position: center; }
.detail-row { align-items: center; }
.detail-actions { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
@media (max-width: 800px) { .detail-actions { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .cover-pair { grid-template-columns: 1fr; }
  .cover-pair .cover:last-child { aspect-ratio: 16 / 10; }
  .cover-pair .cover:last-child img { object-fit: contain; object-position: center top; }
}
.pager { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 0 0; }
.pager a { display: inline-block; padding: 8px 0; font: 500 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fog); text-decoration: none; }
.pager a:hover { color: var(--gold); }
figcaption { margin-top: 8px; font-size: 12px; color: var(--fog); }

/* Contact form (opens the visitor's mail app; nothing is sent from the page) */
.form { display: grid; gap: 18px; max-width: 520px; }
.field { display: grid; gap: 8px; }
.field label { font: 500 10.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fog); }
.field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 6px; background: var(--ink-2); color: var(--paper); font: 400 16px/1.4 var(--sans); }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; border-color: transparent; }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fog) 50%), linear-gradient(135deg, var(--fog) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
html:not(.js) .form { display: none; }
.routes { list-style: none; margin: 0; padding: 0; }
.routes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 22px 0; border-top: 1px solid var(--rule); }
.routes li > * { min-width: 0; }
.routes li:last-child { border-bottom: 1px solid var(--rule); }
.routes .what { font: 700 clamp(20px, 2.2vw, 28px)/1.1 var(--display); letter-spacing: -.02em; }
.routes .how { margin-top: 6px; font-size: 14px; color: var(--fog); max-width: 56ch; }
@media (max-width: 600px) { .routes li { grid-template-columns: 1fr; } }

/* ---------- Entry reveals: run once, never un-reveal, motion only ---------- */
.motion .reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.motion .reveal.in { opacity: 1; transform: none; }
.d1 { --d: .08s; } .d2 { --d: .16s; } .d3 { --d: .24s; } .d4 { --d: .32s; }

/* ---------- Booking popup (Cal.com in a frame) ---------- */
.book { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; }
.book[hidden] { display: none; }
.book-backdrop { position: absolute; inset: 0; background: rgba(7, 20, 36, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.book-panel { position: relative; width: min(1080px, 100%); height: min(760px, 100%); display: flex; flex-direction: column; background: rgba(7,20,36,.88); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; }
.motion .book-panel { transition: opacity .28s var(--ease), transform .32s var(--ease); }
.motion .book-backdrop { transition: opacity .25s var(--ease); }
.motion .book.is-out .book-panel { opacity: 0; transform: translateY(12px) scale(.985); }
.motion .book.is-out .book-backdrop { opacity: 0; }
.book-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px 14px; border-bottom: 1px solid var(--rule); }
.book-head h2 { font: 700 22px/1.2 var(--display); letter-spacing: -.02em; }
.book-head p { margin-top: 6px; font-size: 14px; color: var(--fog); }
.book-close { flex: none; width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: 50%; display: grid; place-items: center; transition: color .25s, border-color .25s; }
.book-close:hover { border-color: var(--gold); color: var(--gold); }
.book-close svg { width: 12px; height: 12px; }
.book-timezones { position: relative; z-index: 2; padding: 12px 18px; border-bottom: 1px solid var(--rule); font: 16px/1.4 var(--sans); }
.book-timezones summary { display: grid; grid-template-columns: auto 1fr 20px; gap: 8px 18px; align-items: center; min-height: 56px; padding: 12px 16px; background: var(--gold); color: var(--ink); border: 1px solid var(--gold); border-radius: 10px; cursor: pointer; list-style: none; }
.book-timezones summary::-webkit-details-marker { display: none; }
.book-timezones summary:hover, .book-timezones[open] summary { background: var(--paper); border-color: var(--paper); }
.book-timezone-action { display: flex; gap: 10px; align-items: center; font-size: 18px; font-weight: 700; }
.book-timezone-action svg { width: 20px; height: 20px; flex: none; }
.book-timezone-current { min-width: 0; text-align: right; font-size: 14px; overflow-wrap: anywhere; }
.book-timezone-chevron { width: 20px; height: 20px; }
.book-timezones[open] .book-timezone-chevron { transform: rotate(180deg); }
.book-timezones-menu { position: absolute; top: calc(100% - 4px); left: 18px; width: min(480px, calc(100% - 36px)); max-height: min(460px, 65dvh); overflow-y: auto; padding: 18px; background: var(--ink-2); border: 1px solid var(--steel); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.3); }
.book-timezones form { display: grid; gap: 8px; }
.book-timezones form[hidden] { display: none; }
.book-timezones label { color: var(--fog); font-size: 14px; }
.book-timezones input, .book-timezones select { width: 100%; min-width: 0; border: 1px solid var(--steel); border-radius: 6px; padding: 10px; background: var(--ink); color: var(--paper); font: 16px/1.4 var(--sans); color-scheme: dark; }
.book-timezones select { padding: 4px; }
.book-timezones option { padding: 9px 6px; }
.book-timezones select option:checked { color: var(--ink); background: var(--gold); }
.book-timezones input:focus-visible, .book-timezones select:focus-visible, .book-timezones summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.book-timezones p { color: var(--fog); font-size: 14px; line-height: 1.5; }
.book-timezones .btn { justify-self: start; margin-top: 6px; }
.book-frame { position: relative; flex: 1; min-height: 0; background: transparent; }
.book:not(.is-loaded) .book-frame::before { content: ""; position: absolute; inset: 24px; pointer-events: none; border-radius: 8px; background: repeating-linear-gradient(0deg, var(--rule-soft) 0 36px, transparent 36px 52px); opacity: .45; }
.book:not(.is-loaded) .book-status { z-index: 1; padding: 12px 16px; border-radius: 8px; background: var(--ink); white-space: nowrap; }
.book-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; color-scheme: light; }
.book:not(.is-loaded) .book-frame iframe { opacity: 0; pointer-events: none; }
.book-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fog); pointer-events: none; }
.book-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.book.is-loaded .book-status { display: none; }
.book-foot { padding: 10px 18px 12px; border-top: 1px solid var(--rule); font-size: 11px; line-height: 1.5; color: var(--fog); }
.book-foot a { color: var(--fog); }
@media (max-width: 700px) {
  .book { padding: 0; }
  .book-panel { width: 100%; height: 100%; border-radius: 0; border: 0; }
  .book-timezones summary { grid-template-columns: 1fr 20px; gap: 4px 12px; }
  .book-timezone-current { grid-row: 2; text-align: left; }
  .book-timezone-chevron { grid-column: 2; grid-row: 1 / 3; }
}

/* ---------- Daan ---------- */
.daan-launch { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px 0 14px; border: 1px solid var(--rule); border-radius: 999px; background: rgba(11, 29, 48, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font: 500 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--paper); view-transition-name: daan-launch; transition: color .25s, border-color .25s; }
.daan-launch::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.daan-launch:hover, .daan-launch:focus-visible { color: var(--gold); border-color: var(--gold); }
.daan-launch[aria-expanded="true"] { visibility: hidden; }
html:not(.js) .daan-launch, body[data-no-launcher] .daan-launch, html.book-open .daan-launch { display: none; }
.daan { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 70; width: min(384px, calc(100vw - 32px)); height: min(600px, calc(100dvh - var(--nav-h) - 32px)); display: flex; flex-direction: column; background: var(--ink-2); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.daan[hidden] { display: none; }
.motion .daan { transition: opacity .3s var(--ease), transform .3s var(--ease); }
.motion .daan.is-out { opacity: 0; transform: translateY(12px); }
.daan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 14px; border-bottom: 1px solid var(--rule); }
.daan-head h2 { font: 700 18px/1.1 var(--display); letter-spacing: -.02em; }
.daan-head p { margin-top: 5px; font-size: 12px; color: var(--fog); }
.daan-close { flex: none; width: 34px; height: 34px; border: 1px solid var(--rule); border-radius: 50%; display: grid; place-items: center; transition: color .25s, border-color .25s; }
.daan-close:hover { border-color: var(--gold); color: var(--gold); }
.daan-close svg { width: 12px; height: 12px; }
.daan-log { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px; display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; overscroll-behavior: contain; }
.msg { flex-shrink: 0; max-width: 88%; width: fit-content; min-width: 0; font-size: 14px; line-height: 1.5; }
.msg .who { display: block; margin: 0 0 5px 2px; font: 500 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fog); }
.msg .bubble { padding: 10px 12px; border: 1px solid var(--rule-soft); border-radius: 10px; background: var(--ink); }
.msg .bubble p { color: var(--paper); overflow-wrap: anywhere; }
.msg .bubble p + p { margin-top: .6em; }
.msg .bubble a { color: var(--gold); text-decoration: underline; text-decoration-color: rgba(219, 194, 145, .5); text-underline-offset: .18em; overflow-wrap: anywhere; }
.msg-user { align-self: flex-end; }
.msg-user .who { color: var(--gold); text-align: right; margin: 0 2px 5px 0; }
.msg-user .bubble { background: rgba(219, 194, 145, .08); border-color: rgba(219, 194, 145, .28); border-bottom-right-radius: 3px; }
.msg-daan .bubble { border-bottom-left-radius: 3px; }
.msg-system .bubble { background: transparent; border-style: dashed; }
.msg-system .bubble p { color: var(--fog); }
.msg-system .bubble a { color: var(--paper); }
.daan-book { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 16px; border-top: 1px solid var(--rule); color: var(--gold); text-align: left; font-size: 13px; }
.daan-book svg { width: 16px; height: 16px; }
.daan-availability { max-width: 100%; }
.daan-availability details { margin-top: 12px; }
.daan-availability summary { padding: 8px 0; cursor: pointer; color: var(--paper); }
.daan-times { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.daan-times button { min-width: 68px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 6px; color: var(--gold); }
.daan-times button:hover, .daan-times button:focus-visible { border-color: var(--gold); }
.daan-times button:disabled { opacity: .5; }
.daan-availability .btn { margin-top: 12px; white-space: normal; text-align: left; }
.daan-status { padding: 0 16px 8px; min-height: 22px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fog); }
.daan-status.busy::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.daan-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; padding: 12px 16px; border-top: 1px solid var(--rule); align-items: end; }
.daan-form label { grid-column: 1 / -1; font: 500 10.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fog); }
.daan-form textarea { width: 100%; min-height: 44px; max-height: 120px; resize: none; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 6px; background: var(--ink); color: var(--paper); font: 400 16px/1.4 var(--sans); }
.daan-form textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; border-color: transparent; }
.daan-form textarea:disabled { opacity: .5; }
.daan-form .btn { min-height: 44px; }
.daan-foot { padding: 0 16px 12px; font-size: 11px; line-height: 1.5; color: var(--fog); }
.daan-foot a { color: var(--fog); }
@media (max-width: 600px) {
  .daan { right: 0; bottom: 0; left: 0; width: auto; height: min(calc(100dvh - var(--nav-h)), 680px); border-radius: 10px 10px 0 0; border-bottom: 0; }
  .daan-launch { min-height: 36px; padding: 0 12px 0 11px; }
  .daan-launch .lg { display: none; } /* phones: the launcher reads "Daan" and covers less content */
}

/* ---------- Custom cursor (fine pointers only; inverts against whatever is behind it) ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: opacity .2s; }
.cursor.is-visible { opacity: 1; }
.cursor.is-hidden { opacity: 0; }
.cursor-dot { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.cursor-ring { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 50%; }
.motion .cursor-ring { transition: width .25s var(--ease), height .25s var(--ease), left .25s var(--ease), top .25s var(--ease), border-color .25s; }
.motion .cursor-dot { transition: width .2s var(--ease), height .2s var(--ease), left .2s var(--ease), top .2s var(--ease); }
.cursor.is-link .cursor-ring { width: 46px; height: 46px; left: -23px; top: -23px; border-color: #fff; }
.cursor.is-link .cursor-dot { width: 4px; height: 4px; left: -2px; top: -2px; }
.cursor.is-down .cursor-ring { width: 24px; height: 24px; left: -12px; top: -12px; }
html.has-cursor, html.has-cursor body, html.has-cursor a, html.has-cursor button, html.has-cursor label, html.has-cursor summary { cursor: none; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select, html.has-cursor iframe, html.has-cursor [contenteditable] { cursor: auto; }