/* In2Dutch by Joel van Valkenhoef.
   Navy and orange from the logo carry the interface; Delft blue lives only in
   the illustrated tiles and panels. One serif for the voice (italic for the
   turn of a sentence), one sans for reading, sized to hold up on a big monitor. */
/* Typefaces are served from this site: no third-party request, and they can be preloaded. */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/instrument-serif.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/instrument-serif-italic.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/fonts/geist-var.woff2") format("woff2"); }

:root {
  --navy: #012A5D;
  --navy-deep: #011C40;
  --orange: #F9560A;        /* emphasis in large type, accents */
  --orange-btn: #FC6A12;    /* buttons, with navy text (5:1) */
  --orange-deep: #BF400A;   /* small text links on light grounds (5:1) */
  --porcelain: #F6F4EF;
  --grout: #E3DED2;

  --sc-canvas:     var(--porcelain);
  --sc-surface:    #FFFFFF;
  --sc-ink:        #0C1E3A;
  --sc-ink-soft:   #46536A;
  --sc-accent:     var(--orange-btn);
  --sc-accent-ink: var(--navy);
  --sc-font-display: "Instrument Serif", Georgia, serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-shadow-color: 216 60% 14%;

  --hair: color-mix(in oklab, var(--sc-ink) 13%, transparent);
  --bar-h: 84px;
  --gut: clamp(1.25rem, 5.5vw, 6.5rem);

  /* reading sizes grow with the screen so body copy keeps its presence beside the headlines */
  --fs-body: clamp(1.08rem, 0.97rem + 0.36vw, 1.36rem);
  --fs-lede: clamp(1.25rem, 1.08rem + 0.62vw, 1.72rem);
  --fs-small: clamp(0.95rem, 0.9rem + 0.2vw, 1.1rem);
  --fs-nav: clamp(1rem, 0.93rem + 0.26vw, 1.2rem);
}
@media (max-width: 860px) { :root { --bar-h: 68px; } }

html { scroll-padding-top: calc(var(--bar-h) + 16px); }
body { background: var(--sc-canvas); font-size: var(--fs-body); }
em { font-style: italic; }
::selection { background: var(--orange-btn); color: var(--navy); }
:focus-visible { outline-color: var(--orange-deep); }

/* ------------------------------------------------------------ type -- */
.h2, .hero__title, .hero__big, .contact__h, .quote, .aside, .tray__close, .reader h3, .reader__line, .say__q blockquote, .exp__year, .svc-hero h1, .cta-band h2, .work__cols h3 {
  font-family: var(--sc-font-display); font-weight: 400; letter-spacing: -0.01em;
}
.h2 { font-size: clamp(2.7rem, 1.6rem + 3.6vw, 6rem); line-height: 0.98; margin: 0; text-wrap: balance; max-width: 15ch; }
.h2 em, .hero__title em, .hero__big em, .contact__h em, .tray__close em, .reader__line em, .svc-hero h1 em, .cta-band h2 em { color: var(--orange); }
.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--sc-ink); max-width: 30em; margin: 0; text-wrap: pretty; }
.body { font-size: var(--fs-body); line-height: 1.7; color: var(--sc-ink-soft); max-width: 34em; margin: 0; text-wrap: pretty; }
.body strong { color: var(--sc-ink); font-weight: 600; }
.body a, .lede a, .link { color: var(--orange-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.body a:hover, .lede a:hover, .link:hover { color: var(--navy); }
.quote {
  font-style: italic; font-size: clamp(2rem, 1.2rem + 2.6vw, 4rem); line-height: 1.1; color: var(--sc-ink);
  text-align: center; max-width: 22ch; margin: clamp(6rem, 11vw, 10rem) auto 0; text-wrap: balance;
}
.quote small { display: block; font: 400 var(--fs-body)/1.5 var(--sc-font-text); font-style: normal; color: var(--sc-ink-soft); margin-bottom: 1.2rem; letter-spacing: 0; }
.quote--left { text-align: left; margin: 3.5rem 0 0; font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.8rem); }
.aside { font-style: italic; color: var(--orange); font-size: clamp(1.5rem, 1.15rem + 1vw, 2.3rem); line-height: 1.2; margin: 0; max-width: 20ch; }
.kicker { font-size: clamp(0.8rem, 0.76rem + 0.14vw, 0.92rem); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); margin: 0; }

.wrap { width: 100%; max-width: 100rem; margin-inline: auto; padding-inline: var(--gut); }
.sec { padding-block: clamp(7rem, 12vw, 14rem); }
.g-white { background: #FFFFFF; }
.g-porcelain { background: var(--porcelain); }
.g-night { background: var(--navy-deep); --sc-ink: #EEF2F8; --sc-ink-soft: #B4C0D4; --hair: rgb(255 255 255 / 0.16); color: var(--sc-ink); }
.g-navy {
  --sc-ink: #FFFFFF; --sc-ink-soft: #CBD6E8; --hair: rgb(255 255 255 / 0.2);
  color: var(--sc-ink); background-color: var(--navy);
}
.g-navy .body a, .g-night .body a { color: #FFB27A; }
.g-navy ::selection, .g-night ::selection { background: var(--orange-btn); color: var(--navy); }

.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 10px 14px; border-radius: 999px; }
.skip:focus { top: 12px; }

/* --------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; gap: 0.65em;
  background: var(--orange-btn); color: var(--navy);
  font: 600 var(--fs-small)/1 var(--sc-font-text); letter-spacing: 0;
  padding: 1.05em 1.5em; border: 0; border-radius: 999px;
  text-decoration: none; white-space: nowrap; cursor: pointer; max-width: 100%;
  box-shadow: 0 12px 26px -14px rgb(249 86 10 / 0.75);
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.btn .arr { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #FF8233; }
  .btn:hover .arr { transform: translateX(3px); }
}
.btn:active { transform: translateY(1px) scale(0.985); }
.btn--lg { font-size: clamp(1.02rem, 0.95rem + 0.24vw, 1.22rem); padding: 1.15em 1.7em; }
.btn[disabled] { opacity: 0.55; cursor: progress; }
/* inline, so the arrow follows the last word when the label wraps */
.more { display: inline-block; color: var(--orange-deep); font-weight: 600; font-size: var(--fs-small); text-decoration: none; }
.more .nb { white-space: nowrap; }
.more .arr { display: inline-block; vertical-align: -0.14em; margin-left: 0.5em; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms var(--sc-ease-out); }
.more:hover { color: var(--navy); }
.more:hover .arr { transform: translateX(3px); }

/* -------------------------------------------------------------- bar -- */
.bar { position: fixed; inset: 0 0 auto 0; height: var(--bar-h); z-index: 60; transition: background-color 260ms var(--sc-ease-out), box-shadow 260ms var(--sc-ease-out); }
.bar.is-solid {
  background: color-mix(in oklab, var(--porcelain) 90%, transparent);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 1px 0 var(--hair);
}
.bar__in { height: 100%; display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.5rem); padding-inline: var(--gut); max-width: 112rem; margin-inline: auto; }
.bar__logo { flex: none; display: block; border-radius: 6px; }
.bar__logo img { height: clamp(40px, 2.6vw + 12px, 58px); width: auto; }
.bar__nav { display: flex; gap: 0.2rem; margin-left: auto; }
.bar__nav a {
  font-size: var(--fs-nav); font-weight: 500; color: var(--sc-ink); text-decoration: none;
  padding: 0.55em 0.9em; border-radius: 999px; transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.bar__nav a:hover { background: color-mix(in oklab, var(--navy) 8%, transparent); }
.bar__nav a[aria-current="true"] { color: var(--orange-deep); }
.btn--bar { font-size: var(--fs-small); padding: 0.9em 1.25em; }
.bar__menu {
  display: none; margin-left: auto; background: color-mix(in oklab, #fff 72%, transparent); border: 1px solid var(--hair); color: var(--sc-ink);
  font-weight: 500; font-size: 1rem; padding: 0.65em 1.1em; border-radius: 999px; cursor: pointer;
}
@media (max-width: 1280px) { .bar__nav { display: none; } .bar__menu { display: inline-flex; margin-left: 0; } .btn--bar { margin-left: auto; } }
@media (max-width: 720px) { .btn--bar { display: none; } .bar__menu { margin-left: auto; } }

.menu {
  position: fixed; inset: var(--bar-h) 0 0 0; z-index: 59; background: var(--porcelain);
  padding: 2rem var(--gut) calc(2rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: space-between; overflow: auto;
}
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a { font: 400 clamp(2.1rem, 8.6vw, 3rem)/1.15 var(--sc-font-display); color: var(--sc-ink); text-decoration: none; padding: 0.4rem 0; border-bottom: 1px solid var(--hair); }
.menu .btn { align-self: flex-start; margin-top: 2rem; }

/* ------------------------------------------------------------- hero -- */
.hero { background: #EAD9C6; }
.world { position: absolute; inset: 0; overflow: hidden; --p: var(--sc-p, 0);
  --jh: min(74svh, calc(52vw * 0.9064));       /* Joel's height; the plate is placed relative to him */
}
.world__box {
  /* The plate (sky extended upward) is sized and placed from Joel, not from the
     screen: the three towers, centred 61.5% across it and topping out 51.25%
     down it, sit behind his head, a little below his hairline and no wider than
     it. The waterline is at 75.1%; all three planes scale from it. */
  --ar: 1.4735; --wl: 75.125%; --city-top: 51.056%; --water-top: 75.26%; --city-o: 49.18%;
  --hx: calc(95vw - var(--jh) * 0.562);         /* where the centre of his head is */
  --bh: max(calc(var(--jh) * 1.66), calc(100vw / var(--ar)), calc(var(--hx) / (0.615 * var(--ar))), 100svh);
  position: absolute; left: 0; height: var(--bh); aspect-ratio: var(--ar);
  top: clamp(calc(100svh - var(--bh)), calc(103svh - var(--jh) * 0.87 - var(--bh) * 0.5125), 0px);
  translate: clamp(calc(100vw - 100%), calc(var(--hx) - 61.5%), 0px) 0;
}
.world__sky, .world__city, .world__water { position: absolute; left: 0; right: 0; display: block; will-change: transform; }
.world__box picture { position: absolute; inset: 0; display: block; }
/* the repainting: late in the scroll the Delft version of every plane dissolves in over the photograph */
.world { --kd: clamp(0, calc((var(--p) - 0.58) / 0.3), 1); }
.world .is-delft { opacity: var(--kd); }
.world__joel .is-delft { position: absolute; inset: 0; }
/* Joel's two cut-outs do not share an outline, so the photograph only leaves once the painting is fully there */
.world__joel img:not(.is-delft) { opacity: calc(1 - clamp(0, calc((var(--kd) - 0.72) / 0.28), 1)); }
.world__sky { top: 0; bottom: 0; transform-origin: 50% var(--wl); transform: scale(calc(1 + var(--p) * 0.05)); }
.world__city { top: var(--city-top); bottom: 0; transform-origin: 50% var(--city-o); transform: scale(calc(1 + var(--p) * 0.13)); }
.world__water { top: var(--water-top); bottom: 0; transform-origin: 50% 0; transform: scale(calc(1 + var(--p) * 0.4)); }
.world__sky img, .world__city img, .world__water img { width: 100%; height: 100%; max-width: none; }
/* the city stays in the background: a porcelain veil over everything, denser where the copy sits */
.world__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(246 244 239 / 0.95) 0%, rgb(246 244 239 / 0.9) 34%, rgb(246 244 239 / 0.5) 52%, rgb(246 244 239 / 0) 70%),
    rgb(246 244 239 / 0.24);
}
.world__joel {
  position: absolute; right: 5vw; bottom: -3vh; height: var(--jh); aspect-ratio: 1400 / 1269;
  transform-origin: 50% 100%; transform: scale(calc(1 + var(--p) * 0.1)); will-change: transform;
}
.world__joel img { width: 100%; height: 100%; max-width: none; }
.hero__beat {
  position: absolute; z-index: 5; left: var(--gut);
  top: calc(var(--bar-h) + clamp(2.5rem, 10vh, 8rem));
  width: min(40rem, 44vw);
}
@media (min-width: 1700px) { .hero__beat { width: min(52rem, 42vw); } }
.hero__title { margin: 0; font-size: clamp(2.8rem, min(5.3vw, 9vh), 7.4rem); line-height: 0.98; text-wrap: balance; }
.hero__title em { display: block; margin-top: 0.08em; }
.hero__big { margin: 0; font-size: clamp(2.6rem, min(4.7vw, 8.2vh), 6.4rem); line-height: 1; text-wrap: balance; }
.hero__lede { margin: 1.6rem 0 0; font-size: clamp(1.08rem, 0.98rem + 0.4vw, 1.5rem); line-height: 1.55; max-width: 27em; color: var(--sc-ink); text-wrap: pretty; }
.hero__beat .btn { margin-top: 2rem; }

@media (max-width: 860px) and (orientation: portrait) {
  /* The phone gets its own camera move: the sky opens, the city comes closer,
     the water runs toward the reader and Joel rises into the frame. */
  .world__box { --ar: 0.5581; --wl: 62.8%; --city-top: 41.642%; --water-top: 63.009%; --city-o: 36.26%;
    left: 50%; top: auto; bottom: 0; height: max(100%, calc(100vw / var(--ar))); translate: -50% 0; }
  .world__joel { height: 47svh; }
  .world__sky { transform: scale(calc(1 + var(--p) * 0.22)); }
  .world__city { transform: scale(calc(1 + var(--p) * 0.42)); }
  .world__water { transform: scale(calc(1 + var(--p) * 0.9)); }
  .world__veil { background:
    linear-gradient(180deg, rgb(246 244 239 / 0.94) 0%, rgb(246 244 239 / 0.86) 34%, rgb(246 244 239 / 0.25) 50%, rgb(246 244 239 / 0) 60%),
    rgb(246 244 239 / 0.2); }
  .world__joel {
    right: 50%; translate: 50% 0; height: 47svh; bottom: -2svh;
    transform: translate3d(0, calc((1 - var(--p)) * 7svh), 0) scale(calc(0.9 + var(--p) * 0.3));
  }
  .hero__beat { width: auto; right: var(--gut); top: calc(var(--bar-h) + 2svh); }
  .hero__title { font-size: clamp(2.1rem, 8.6vw, 2.9rem); }
  .hero__big { font-size: clamp(2rem, 8.4vw, 2.8rem); }
  .hero__lede { font-size: 1rem; line-height: 1.5; margin-top: 0.9rem; }
  .hero__beat .btn { margin-top: 1.1rem; }
}
@media (max-width: 860px) and (max-height: 740px) { .hero__beat--1 .hero__lede { display: none; } }

/* --------------------------------------- photograph into Delftware -- */
/* A picture that exists twice, as a photograph and as a Delft painting of the
   same frame. site.js sets --k from 0 to 1 as the picture crosses the middle of
   the screen; the painting arrives as glaze spreading, a wipe or a dissolve. */
.delft { position: relative; overflow: hidden; --k: 0; background: #F0EEE7; }
.delft > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.delft > .delft__d { position: absolute; inset: 0; z-index: 1; }
.delft--glaze > .delft__d { clip-path: circle(calc(var(--k) * 75%) at 50% 50%); }
.delft--wipe > .delft__d {
  -webkit-mask-image: linear-gradient(100deg, #000 calc(var(--k) * 128% - 28%), transparent calc(var(--k) * 128%));
          mask-image: linear-gradient(100deg, #000 calc(var(--k) * 128% - 28%), transparent calc(var(--k) * 128%));
}
/* small portraits: the photograph drains to cobalt on white */
.duo { position: relative; overflow: hidden; --k: 0; isolation: isolate; }
.duo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; filter: grayscale(var(--k)) contrast(calc(1 + var(--k) * 0.22)) brightness(calc(1 + var(--k) * 0.1)); }
.duo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #1B378C; mix-blend-mode: screen; opacity: var(--k); pointer-events: none; }

/* ------------------------------------------------------------ start -- */
.start__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 10rem); align-items: center; }
.start__side { display: grid; gap: clamp(1.5rem, 2.4vw, 2.4rem); min-width: 0; }
.start__fig { margin: 0; border-radius: 22px; aspect-ratio: 3 / 2; box-shadow: 0 30px 60px -40px hsl(var(--sc-shadow-color) / 0.5); }
.start__copy > * + * { margin-top: 1.6rem; }
.start__copy .aside { margin-top: 2.6rem; }
.tray { background: var(--porcelain); border-radius: 28px; padding: clamp(1.8rem, 3vw, 3.4rem); }
.tray__q { margin: 0 0 1.3rem; }
.tray__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.5em; cursor: pointer;
  background: #fff; color: var(--sc-ink); border: 1px solid var(--hair); border-radius: 999px;
  font-size: var(--fs-small); padding: 0.72em 1.15em; min-height: 46px; text-align: left;
  transition: background-color 150ms var(--sc-ease-out), color 150ms var(--sc-ease-out), border-color 150ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.chip::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; flex: none; background: color-mix(in oklab, var(--sc-ink) 22%, transparent); transition: background-color 150ms var(--sc-ease-out); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip[aria-pressed="true"]::before { background: var(--orange-btn); }
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--orange-btn); } }
.chip:active { transform: scale(0.97); }
.tray__out { margin: 1.3rem 0 0; font-size: var(--fs-small); color: var(--sc-ink-soft); min-height: 3em; }
.tray__close { margin: 1.6rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--hair); font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.4rem); line-height: 1.15; text-wrap: balance; }
@media (max-width: 860px) { .start__grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------- the tile wall -- */
/* Six contemporary photographs, complete from the first paint. One by one,
   as each service is read, the photograph is repainted as a Delft tile. */
.tiles__stage {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center;
  gap: clamp(2rem, 5vw, 6rem); padding: calc(var(--bar-h) + 3vh) var(--gut) 3vh;
}
.tiles__sub { margin: 0.8rem 0 0; font: italic 400 clamp(1.6rem, 1.2rem + 1.3vw, 2.8rem)/1.1 var(--sc-font-display); color: var(--orange); }
.reader { position: relative; margin-top: clamp(2rem, 6vh, 4.5rem); min-height: 16rem; }
.reader__i { position: absolute; inset: 0 0 auto 0; opacity: 0; translate: 0 14px; transition: opacity 380ms var(--sc-ease-out), translate 380ms var(--sc-ease-out); pointer-events: none; visibility: hidden; }
.reader__i.is-active { opacity: 1; translate: 0 0; pointer-events: auto; visibility: visible; }
.reader h3 { margin: 0; font-size: clamp(1.9rem, 1.3rem + 1.7vw, 3.4rem); line-height: 1.02; max-width: 16ch; text-wrap: balance; }
.reader p { margin: 1rem 0 0; font-size: var(--fs-body); line-height: 1.65; color: var(--sc-ink-soft); max-width: 30em; }
.reader .more { margin-top: 1.3rem; }
.reader__line { font-size: clamp(1.8rem, 1.25rem + 1.6vw, 3.2rem) !important; line-height: 1.06 !important; color: var(--sc-ink) !important; margin: 0 !important; max-width: 17ch !important; text-wrap: balance; }
.reader__i .btn { margin-top: 1.6rem; }

.wall {
  --t: min(11.4vw, 30vh);
  justify-self: center; display: grid; grid-template-columns: repeat(4, var(--t)); gap: 5px; padding: 5px;
  background: var(--grout); border-radius: 6px;
  box-shadow: inset 0 2px 6px hsl(var(--sc-shadow-color) / 0.12), 0 40px 80px -50px hsl(var(--sc-shadow-color) / 0.5);
}
.tile {
  --k: clamp(0, calc((var(--sc-p, 0) - (0.08 + var(--i) * 0.12)) / 0.075), 1);
  position: relative; display: block; width: var(--t); height: var(--t); border-radius: 3px;
  box-shadow: 0 1px 1px hsl(var(--sc-shadow-color) / 0.18), 0 6px 14px -6px hsl(var(--sc-shadow-color) / 0.3);
  transition: scale 420ms var(--sc-ease-out), box-shadow 420ms var(--sc-ease-out);
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border-radius: 3px; object-fit: cover; }
/* the Delft version opens from the centre, like glaze spreading */
.tile__d { clip-path: circle(calc(var(--k) * 75%) at 50% 50%); }
/* the eighth tile is the way in: the mark, leading to the contact form */
.tile--cta { background: var(--navy); display: grid; place-items: center; }
.tile--cta img { position: static; width: 56%; height: auto; border-radius: 0; object-fit: contain; }
/* the name of the service rides on its tile while it is being read or pointed at */
.tile__name {
  position: absolute; left: 6%; right: 6%; bottom: 6%; z-index: 2; pointer-events: none;
  background: rgb(1 42 93 / 0.94); color: #fff; border-radius: 8px; padding: 0.5em 0.6em;
  font: 500 clamp(0.72rem, 0.56rem + 0.42vw, 1rem)/1.2 var(--sc-font-text); text-align: center; text-wrap: balance;
  opacity: 0; translate: 0 6px; transition: opacity 220ms var(--sc-ease-out), translate 220ms var(--sc-ease-out);
}
.tile.is-active .tile__name, .tile.is-peek .tile__name { opacity: 1; translate: 0 0; }
.tile--cta .tile__name { background: var(--orange-btn); color: var(--navy); }
/* pointing at a tile repaints it straight away, without waiting for the scroll to reach it */
.tile.is-peek .tile__d { clip-path: circle(75% at 50% 50%); }
@media (hover: hover) and (pointer: fine) { .tile__d { transition: clip-path 420ms var(--sc-ease-out); } }
.tile.is-peek { scale: 1.08; z-index: 3; box-shadow: 0 2px 2px hsl(var(--sc-shadow-color) / 0.16), 0 30px 50px -18px hsl(var(--sc-shadow-color) / 0.55); }
.tile.is-active { scale: 1.08; z-index: 2; box-shadow: 0 2px 2px hsl(var(--sc-shadow-color) / 0.16), 0 30px 50px -18px hsl(var(--sc-shadow-color) / 0.55); }
.tile:focus-visible { outline: 3px solid var(--orange-btn); outline-offset: 3px; z-index: 4; }
@media (max-width: 860px) {
  .tiles__stage { grid-template-columns: 1fr; align-content: center; gap: 1.4rem; padding-top: calc(var(--bar-h) + 1svh); padding-bottom: 1svh; }
  .tiles__text { display: contents; }
  .tiles__text .h2 { font-size: 2.4rem; }
  .tiles__sub { font-size: 1.5rem; margin-top: -0.9rem; }
  .wall { --t: min(21.4vw, 15svh); order: 3; }
  .tile__name { display: none; }
  .reader { order: 4; margin-top: 0.4rem; min-height: 12.5rem; }
  .reader h3 { font-size: 1.7rem; }
  .reader p { font-size: 1rem; margin-top: 0.6rem; }
  .reader .more { margin-top: 0.8rem; }
  .reader__line { font-size: 1.6rem !important; }
}

/* ------------------------------------------------------- working -- */
.work__head { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 3rem 6vw; align-items: end; }
.work__head .h2 { max-width: 17ch; }
.work__fig { margin: clamp(4rem, 7vw, 6.5rem) auto 0; width: min(100% - 2 * var(--gut), 104rem); border-radius: 26px; overflow: hidden; aspect-ratio: 21 / 9; }
.work__img { width: 100%; height: 100%; overflow: hidden; }
.work__img > img { width: 100%; height: 118%; object-fit: cover; transform: translate3d(0, calc(var(--sc-p, 0.5) * -14%), 0) scale(1.04); }
.work__img.delft > .delft__d { inset: 0 0 auto 0; }
.work__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 5rem); margin-top: clamp(4rem, 7vw, 6rem); }
.work__cols h3 { margin: 0 0 0.8rem; font-size: clamp(1.6rem, 1.25rem + 0.9vw, 2.3rem); line-height: 1.1; }
@media (max-width: 860px) {
  .work__head, .work__cols { grid-template-columns: 1fr; }
  .work__fig { aspect-ratio: 4 / 3; border-radius: 20px; }
  .work__img img { object-position: 62% 50%; }
}

/* ---------------------------------------------------- experience -- */
/* The year itself is the ground of this section: a collage of 2005 that is repainted as Delftware while it passes. */
.exp { padding-top: var(--bar-h); }
.exp__scene { margin: 0; width: 100%; aspect-ratio: 16 / 9; max-height: 92svh; background: var(--porcelain); }
.exp__scene::after { content: ""; position: absolute; inset: auto 0 0 0; height: 26%; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgb(246 244 239 / 0), var(--porcelain) 92%); }
.exp__grid { position: relative; z-index: 3; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 6vw, 7rem); align-items: start; margin-top: clamp(-7rem, -6vw, -2.5rem); }
.exp__h { position: sticky; top: calc(var(--bar-h) + 6vh); }
.exp__copy > * + * { margin-top: 1.5rem; }
.exp__copy .lede { margin-top: 0; }
/* a dot sits before every item; the one that lands at the start of a line is clipped away */
.exp__tags { list-style: none; padding: 0; margin: 2.8rem 0 0 -0.9em; display: flex; flex-wrap: wrap; gap: 0.9rem 0; max-width: 44rem; clip-path: inset(-1rem -1rem -1rem 0.7em);
  font-size: clamp(0.82rem, 0.78rem + 0.16vw, 0.98rem); letter-spacing: 0.13em; text-transform: uppercase; color: var(--navy); font-weight: 500; }
.exp__tags li { position: relative; padding: 0 0.9em; }
.exp__tags li::before { content: "·"; position: absolute; left: 0; translate: -50% 0; letter-spacing: 0; color: var(--orange); }
.exp__tags a { color: inherit; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 1.5px; text-underline-offset: 0.3em; }
.exp__tags a:hover { color: var(--orange-deep); }
@media (max-width: 860px) {
  .exp__grid { grid-template-columns: 1fr; margin-top: -1.2rem; } .exp__h { position: static; }
  /* on a phone the collage is shown larger than the screen and drifts sideways as it is scrolled past */
  .exp__scene { aspect-ratio: 1 / 1; max-height: none; }
  .exp__scene > img { object-position: calc(8% + var(--t, 0.5) * 84%) 50%; }
}

/* ----------------------------------------------------------- film -- */
.av-intro { padding-block: clamp(6rem, 11vw, 12rem); }
.av-intro + .av { margin-top: calc(-1 * clamp(3rem, 7vw, 8rem)); }
.av-intro .more { color: #FFB27A; }
.av-intro .more:hover { color: #fff; }
.av-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 7vw, 8rem); align-items: end; }
.av-intro__copy > * + * { margin-top: 1.4rem; }
.av-intro__fig { grid-column: 1 / -1; margin: clamp(1.5rem, 3vw, 3rem) 0 0; border-radius: 22px; aspect-ratio: 21 / 9; box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.6); }
.av-intro__fig > img { object-position: 50% 38%; }
@media (max-width: 860px) { .av-intro__fig { aspect-ratio: 16 / 10; border-radius: 16px; } }
.g-night .h2 em { color: #FF9A52; }
.av__stage { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--bar-h) + 2vh) var(--gut) 3vh; gap: 3vh; }
.av__frame {
  position: relative; overflow: hidden; border-radius: 10px; flex: none; background: #000;
  width: min(100%, calc((100svh - var(--bar-h) - 36vh) * 2.353)); aspect-ratio: 1280 / 544;
  box-shadow: 0 50px 100px -50px rgb(0 0 0 / 0.9);
}
.av__frame picture { position: absolute; inset: 0; }
.av__frame .sc-stage__poster, .av__frame video[data-sc-scrub] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#filmSeq { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 380ms var(--sc-ease-out); }
#filmSeq.is-ready { opacity: 1; }
.av__subs { position: absolute; left: 0; right: 0; bottom: 8%; z-index: 3; text-align: center; }
.av__subs p { position: absolute; left: 4%; right: 4%; bottom: 0; margin: 0; }
.av__subs span {
  display: inline; background: rgb(4 12 28 / 0.8); color: #fff;
  font: 500 clamp(0.95rem, 0.7rem + 0.8vw, 1.6rem)/1.6 var(--sc-font-text);
  padding: 0.12em 0.55em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* the review sheet: English source beside the Dutch subtitle, so the pairing reads without knowing Dutch */
.cues { width: min(100%, calc((100svh - var(--bar-h) - 36vh) * 2.353)); border-collapse: collapse; font-size: var(--fs-small); }
.cues caption { caption-side: top; text-align: left; padding-bottom: 0.7rem; }
.cues th { text-align: left; font-weight: 500; font-size: 0.78em; letter-spacing: 0.13em; text-transform: uppercase; color: var(--sc-ink-soft); padding: 0 1rem 0.6rem 0; border-bottom: 1px solid var(--hair); }
.cues td { padding: 0.75rem 1rem 0.75rem 0; border-bottom: 1px solid var(--hair); vertical-align: top; color: var(--sc-ink-soft); transition: color 200ms var(--sc-ease-out); line-height: 1.4; }
.cues td:first-child { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.86em; width: 1%; padding-top: 0.9rem; }
.cues td:last-child { padding-right: 0; }
.cues tr.is-live td { color: var(--sc-ink); }
.cues tr.is-live td:first-child { color: #FF9A52; }
.cues tr.is-live td:last-child { font-weight: 500; }
@media (max-width: 860px) {
  .av-intro__grid { grid-template-columns: 1fr; }
  .av__stage { justify-content: flex-start; padding-top: calc(var(--bar-h) + 2svh); gap: 2.2svh; }
  .av__frame { width: min(100%, calc(44svh * 618 / 720)); aspect-ratio: 618 / 720; }
  .av__subs span { font-size: clamp(0.72rem, 3.4vw, 0.86rem); }
  .av__subs p { left: 2%; right: 2%; }
  .cues { width: 100%; font-size: 0.9rem; }
  .cues thead { display: none; }
  .cues tr { display: grid; grid-template-columns: auto 1fr; gap: 0 0.8rem; padding: 0.55rem 0; border-bottom: 1px solid var(--hair); }
  .cues td { border: 0; padding: 0; }
  .cues td:first-child { grid-row: span 2; padding-top: 0.15rem; }
  .cues td:nth-child(2)::before { content: "EN  "; font-size: 0.72em; letter-spacing: 0.12em; opacity: 0.7; }
  .cues td:nth-child(3)::before { content: "NL  "; font-size: 0.72em; letter-spacing: 0.12em; opacity: 0.7; }
}
@media (min-width: 861px) { .is-phone .av__frame { width: min(100%, calc(50svh * 618 / 720)); aspect-ratio: 618 / 720; } .is-phone .cues { width: min(100%, 46rem); } }

/* ------------------------------------------------------------- AI -- */
.ai__head .h2 { max-width: 19ch; }
/* the panel reads left to right, Delft ornament becoming circuit and network; scroll uncovers it in that order */
.ai__panel { margin: clamp(3rem, 6vw, 5.5rem) 0 0; border-radius: 22px; overflow: hidden; aspect-ratio: 2400 / 904; position: relative; background: #EDEBE4; box-shadow: 0 40px 80px -50px hsl(var(--sc-shadow-color) / 0.5); }
.ai__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ai__panel img.is-ink { filter: grayscale(1) contrast(0.6) brightness(1.2); opacity: 0.55; }
.ai__panel img.is-blue { --r: clamp(0.22, calc((var(--sc-p, 1) - 0.12) / 0.34), 1); clip-path: inset(0 calc((1 - var(--r)) * 100%) 0 0); }
.ai__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 9rem); align-items: start; margin-top: clamp(3.5rem, 6vw, 6rem); }
.ai__copy > * + * { margin-top: 1.5rem; }
.bound { position: sticky; top: calc(var(--bar-h) + 2.5rem); background: var(--porcelain); border-radius: 28px; padding: clamp(1.8rem, 3vw, 3rem); }
.bound__k { margin: 0 0 1.2rem; }
.bound__tabs { display: flex; flex-wrap: wrap; gap: 0.2rem 1.5rem; border-bottom: 1px solid var(--hair); }
.bound__tabs button { background: none; border: 0; padding: 0.8rem 0; cursor: pointer; font-size: var(--fs-small); color: var(--sc-ink-soft); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.bound__tabs button[aria-selected="true"] { color: var(--sc-ink); border-bottom-color: var(--orange-btn); }
.bound__src { margin: 1.5rem 0 0; color: var(--sc-ink-soft); font-size: var(--fs-small); line-height: 1.6; }
.bound__switch { margin-top: 1.5rem; display: inline-flex; background: #fff; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair); }
.bound__switch button { border: 0; background: none; cursor: pointer; font-size: var(--fs-small); padding: 0.6em 1.1em; border-radius: 999px; color: var(--sc-ink-soft); min-height: 44px; transition: background-color 150ms var(--sc-ease-out), color 150ms var(--sc-ease-out); }
.bound__switch button[aria-checked="true"] { background: var(--navy); color: #fff; }
.bound__nl { margin: 1.4rem 0 0; font: 400 clamp(1.45rem, 1.15rem + 0.9vw, 2.2rem)/1.25 var(--sc-font-display); min-height: 4.2em; color: var(--sc-ink); }
.bound__nl.is-draft { color: #7A5A1C; }
.bound__why { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--hair); font-size: var(--fs-small); line-height: 1.6; color: var(--sc-ink-soft); }
.bound__why b { color: var(--sc-ink); font-weight: 600; }
@media (max-width: 960px) { .ai__grid { grid-template-columns: minmax(0, 1fr); } .bound { position: relative; top: auto; min-width: 0; } .ai__panel { aspect-ratio: 16 / 9; border-radius: 16px; } }

/* --------------------------------------------------------- beyond -- */
.beyond { padding-block: clamp(7rem, 12vw, 13rem); }
.beyond__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 7rem); align-items: center; }
.beyond__copy > * + * { margin-top: 1.6rem; }
.beyond .h2 em { color: #FF9A52; }
.beyond .quote { color: #fff; text-align: left; margin: 2.8rem 0 0; font-size: clamp(1.7rem, 1.1rem + 1.7vw, 2.9rem); max-width: 20ch; }
/* Joel in the middle; the lines to the people he can bring in are drawn as the section passes */
.net { width: 100%; height: auto; overflow: visible; --p: var(--sc-p, 1); }
.net__line { fill: none; stroke: var(--orange-btn); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; --d: clamp(0, calc((var(--p) - 0.13 - var(--i) * 0.03) / 0.15), 1); stroke-dashoffset: calc(1 - var(--d)); }
.net__link { stroke: rgb(255 255 255 / 0.28); stroke-width: 1; stroke-dasharray: 3 5; fill: none; opacity: clamp(0, calc((var(--p) - 0.42) / 0.1), 1); }
.net__node { --d: clamp(0, calc((var(--p) - 0.2 - var(--i) * 0.03) / 0.1), 1); opacity: var(--d); }
.net__node circle { fill: #fff; }
.net__node text { font: 500 15px var(--sc-font-text); fill: #fff; }
.net__ring { fill: none; stroke: var(--orange-btn); stroke-width: 3; }
.net__glaze, .net__delft { opacity: clamp(0, calc((var(--p) - 0.6) / 0.16), 1); }
.net__me text { font: 400 22px var(--sc-font-display); fill: #fff; font-style: italic; }
@media (max-width: 860px) { .beyond__grid { grid-template-columns: 1fr; } .net { max-width: 30rem; margin-inline: auto; } .net__node text { font-size: 21px; } .net__me text { font-size: 26px; }
  .net__node--r text { text-anchor: end; transform: translate(30px, 0); } .net__node--l text { text-anchor: start; transform: translate(-38px, 0); } }

/* ---------------------------------------------------- testimonials -- */
.say__h { margin-bottom: clamp(3.5rem, 6vw, 6rem); }
.say__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 9rem); align-items: start; }
.say__q { margin: 0; }
.say__q::before { content: "\201C"; display: block; font: italic 400 7rem/0.6 var(--sc-font-display); color: var(--orange); height: 3.4rem; }
.say__q--b { margin-top: clamp(0rem, 10vw, 10rem); }
.say__q blockquote { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.5rem); line-height: 1.3; text-wrap: pretty; }
.say__q figcaption { margin-top: 2rem; display: flex; align-items: center; gap: 1rem; font-size: var(--fs-small); }
.say__q figcaption > span { display: flex; flex-direction: column; gap: 0.15rem; }
.say__q figcaption span span { color: var(--sc-ink-soft); }
/* portrait slot: a photograph replaces the initials once the client agrees */
.say__face { width: 84px; height: 84px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden; background: var(--porcelain); color: var(--navy); font: 400 1.5rem/1 var(--sc-font-display); object-fit: cover; box-shadow: inset 0 0 0 1px var(--hair); }
@media (max-width: 860px) { .say__grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------- about -- */
.about__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(3rem, 7vw, 9rem); align-items: center; }
/* Joel's own Delft tile. At first its round window holds his photograph; as it is scrolled the glaze
   spreads outward from his face and the photograph becomes the painting. */
.about__fig { margin: 0; position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; --k: 0; container-type: inline-size;
  box-shadow: 0 0 0 6px var(--grout), 0 2px 3px hsl(var(--sc-shadow-color) / 0.2), 0 44px 80px -44px hsl(var(--sc-shadow-color) / 0.6); }
.tilefig img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tilefig__p {
  -webkit-mask-image: radial-gradient(circle at 61.5% 40%, transparent calc(var(--k) * 104% - 4%), #000 calc(var(--k) * 104%));
          mask-image: radial-gradient(circle at 61.5% 40%, transparent calc(var(--k) * 104% - 4%), #000 calc(var(--k) * 104%));
}
.tilefig__name { position: absolute; left: 14%; right: 14%; top: 82.4%; height: 9.6%; display: grid; place-items: center; text-align: center; color: #fff;
  font: italic 400 5.2cqw/1 var(--sc-font-display); letter-spacing: 0.01em; text-shadow: 0 1px 0 rgb(10 30 90 / 0.5); }
/* the portrait file carries real headroom above the hair, so neither the arch nor the drift can crop it */
.about__img { position: absolute; inset: -5% 0; }
.about__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.about__copy > * + * { margin-top: 1.5rem; }
.about__copy .lede { margin-top: 2rem; }
.about__langs { margin-top: 2.2rem !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.9rem; }
.about__langs span { font-family: var(--sc-font-display); font-style: italic; font-size: clamp(1.3rem, 1.1rem + 0.5vw, 1.7rem); color: var(--sc-ink); }
@media (max-width: 860px) { .about__grid { grid-template-columns: 1fr; } .about__fig { max-width: 26rem; width: 100%; } }

/* --------------------------------------------------------- contact -- */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 9rem); align-items: start; }
.contact__h { margin: 0; font-size: clamp(3rem, 1.8rem + 4vw, 6.8rem); line-height: 0.96; max-width: 11ch; text-wrap: balance; }
.contact__intro > * + * { margin-top: 1.5rem; }
.contact__intro .lede { margin-top: 2.2rem; }
.contact__card { font-style: normal; margin-top: 3rem !important; display: flex; align-items: center; gap: 1.1rem; padding-top: 2rem; border-top: 1px solid var(--hair); font-size: var(--fs-small); }
.contact__card img { width: 72px; height: 72px; object-fit: cover; object-position: 50% 0; border-radius: 50%; background: #D9DCD7; }
.contact__card span { display: flex; flex-direction: column; gap: 0.15rem; }
.contact__card a { color: var(--orange-deep); text-decoration: none; }
.contact__card a:hover { text-decoration: underline; }
.form { background: var(--porcelain); border-radius: 28px; padding: clamp(1.8rem, 3vw, 3.4rem); display: grid; gap: 1.3rem; }
.field { display: grid; gap: 0.5rem; }
.field label { font-weight: 500; font-size: var(--fs-small); }
.field label em { font-style: normal; color: var(--sc-ink-soft); font-size: 0.88em; margin-left: 0.4em; }
.field input, .field textarea {
  width: 100%; background: #fff; color: var(--sc-ink); border: 1px solid color-mix(in oklab, var(--sc-ink) 18%, transparent);
  border-radius: 14px; padding: 0.95rem 1.05rem; font-size: max(1rem, var(--fs-small)); line-height: 1.45;
  transition: border-color 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out);
}
.field textarea { resize: vertical; min-height: 9rem; }
.field input::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 75%, transparent); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--orange-btn); box-shadow: 0 0 0 4px color-mix(in oklab, var(--orange-btn) 26%, transparent); }
.field [aria-invalid="true"] { border-color: #B42318; }
.field__help { margin: 0; font-size: 0.9em; color: var(--sc-ink-soft); }
.field__help a { color: var(--orange-deep); }
.field__have { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.field__have[hidden] { display: none; }
.field__have span { font-size: 0.85rem; padding: 0.3em 0.75em; border-radius: 999px; background: color-mix(in oklab, var(--navy) 9%, #fff); color: var(--navy); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.btn--submit { justify-self: start; }
.form__msg { margin: 0; font-size: var(--fs-small); min-height: 1.4em; }
.form__msg.is-ok { color: #136C3A; font-weight: 500; }
.form__msg.is-err { color: #B42318; }
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } }

.field__label { font-weight: 500; font-size: var(--fs-small); }
.field__label em { font-style: normal; color: var(--sc-ink-soft); font-size: 0.88em; margin-left: 0.4em; }
.drop {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1rem; padding: 1.1rem 1.2rem;
  background: #fff; border: 1.5px dashed color-mix(in oklab, var(--sc-ink) 26%, transparent); border-radius: 14px;
  transition: border-color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.drop.is-over { border-color: var(--orange-btn); background: color-mix(in oklab, var(--orange-btn) 8%, #fff); }
.field .drop__input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.drop__btn {
  display: inline-flex; align-items: center; gap: 0.5em; cursor: pointer; flex: none;
  background: var(--navy); color: #fff; border-radius: 999px; padding: 0.7em 1.15em; font-size: var(--fs-small); font-weight: 500;
  transition: background-color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.drop__btn svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.drop__btn:hover { background: var(--navy-deep); }
.drop__btn:active { transform: scale(0.97); }
.drop__input:focus-visible + .drop__btn { outline: 3px solid var(--orange-btn); outline-offset: 3px; }
.drop__hint { font-size: 0.9em; color: var(--sc-ink-soft); flex: 1 1 14rem; }
.files { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.files:empty { display: none; }
.files li { position: relative; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.3rem 0.9rem; background: #fff; border-radius: 12px; padding: 0.7rem 0.9rem; font-size: 0.92em; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair); }
.files__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files__state { color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.files li.is-done .files__state { color: #136C3A; }
.files li.is-err .files__state { color: #B42318; white-space: normal; grid-column: 1 / -1; }
.files__x { border: 0; background: none; cursor: pointer; color: var(--sc-ink-soft); font-size: 1.3em; line-height: 1; padding: 0.1em 0.3em; border-radius: 6px; }
.files__x:hover { color: var(--sc-ink); background: color-mix(in oklab, var(--sc-ink) 8%, transparent); }
.files__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--orange-btn); transform-origin: 0 50%; transform: scaleX(var(--up, 0)); transition: transform 160ms linear; }
.files li.is-done .files__bar, .files li.is-err .files__bar { display: none; }

/* ------------------------------------------------- calls to action -- */
.cta-row { margin: clamp(2rem, 3.5vw, 3.2rem) 0 0 !important; }
.cta-row--center { text-align: center; }
.dock { display: none; }
@media (max-width: 720px) {
  .dock {
    display: inline-flex; justify-content: center; position: fixed; z-index: 58;
    left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 14px 30px -10px rgb(1 28 64 / 0.55);
    transition: transform 260ms var(--sc-ease-out), opacity 200ms var(--sc-ease-out);
  }
  .dock[hidden] { display: inline-flex; transform: translateY(140%); opacity: 0; pointer-events: none; }
}

/* ---------------------------------------------------------- footer -- */
.foot { padding-block: clamp(4rem, 7vw, 6.5rem) calc(clamp(2.5rem, 4vw, 3.5rem) + env(safe-area-inset-bottom)); font-size: var(--fs-small); }
.foot__top { display: grid; grid-template-columns: 1.2fr 1fr 0.7fr; gap: 3rem clamp(2rem, 6vw, 7rem); align-items: start; }
.foot__logo img { height: clamp(46px, 3vw + 12px, 64px); width: auto; }
.foot p { margin: 1.4rem 0 0; color: var(--sc-ink-soft); max-width: 26em; }
.foot .foot__k { font: 500 0.8em/1 var(--sc-font-text); max-width: none; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); margin: 0.4rem 0 1.2rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.foot a { color: #fff; text-decoration: none; }
.foot a:hover { color: #FFB27A; }
.foot__base { margin-top: clamp(3rem, 5vw, 4.5rem); padding-top: 1.6rem; border-top: 1px solid var(--hair); color: var(--sc-ink-soft); font-size: 0.9em; }
@media (max-width: 860px) { .foot__top { grid-template-columns: 1fr; } }

/* --------------------------------------------------- service pages -- */
.crumbs { font-size: var(--fs-small); color: var(--sc-ink-soft); display: flex; flex-wrap: wrap; gap: 0.5em; margin: 0 0 2rem; padding: 0; list-style: none; }
.crumbs li + li::before { content: "/"; margin-right: 0.5em; opacity: 0.5; }
.crumbs a { color: var(--sc-ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--orange-deep); }
.svc-hero { padding: calc(var(--bar-h) + clamp(3rem, 7vw, 7rem)) 0 clamp(5rem, 9vw, 9rem); }
.svc-hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2.5rem, 7vw, 8rem); align-items: center; }
.svc-hero h1 { margin: 0; font-size: clamp(2.8rem, 1.7rem + 4vw, 6.6rem); line-height: 0.97; text-wrap: balance; max-width: 15ch; }
.svc-hero .lede { margin-top: 2rem; }
.svc-hero .btn { margin-top: 2.4rem; }
.svc-tile { --t: min(34vw, 30rem); --k: clamp(0, calc((var(--sc-p, 0) - 0.52) / 0.2), 1); position: relative; width: var(--t); aspect-ratio: 1; justify-self: center; padding: 6px; background: var(--grout); border-radius: 8px; box-shadow: 0 50px 90px -50px hsl(var(--sc-shadow-color) / 0.55); }
.svc-tile img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); border-radius: 4px; object-fit: cover; }
.svc-tile .tile__d { clip-path: circle(calc(var(--k) * 75%) at 50% 50%); }
.svc-body__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2.5rem, 7vw, 8rem); align-items: start; }
.svc-body .h2 { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 4.4rem); }
.svc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.svc-list li { padding: 1.3rem 0; border-bottom: 1px solid var(--hair); font-size: var(--fs-lede); line-height: 1.4; color: var(--sc-ink); }
.svc-prose > * + * { margin-top: 1.5rem; }
.faq { border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { cursor: pointer; list-style: none; padding: 1.4rem 2.5rem 1.4rem 0; position: relative; font: 400 clamp(1.4rem, 1.15rem + 0.8vw, 2rem)/1.2 var(--sc-font-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.2rem; top: 1.15rem; font: 300 1.8rem/1 var(--sc-font-text); color: var(--orange-deep); transition: transform 200ms var(--sc-ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 1.5rem; }
.others { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); margin-top: 3rem; }
.others a { text-decoration: none; color: var(--sc-ink); display: block; }
.others img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 4px; box-shadow: 0 0 0 5px var(--grout), 0 20px 30px -18px hsl(var(--sc-shadow-color) / 0.45); transition: transform 220ms var(--sc-ease-out); }
.others span { display: block; margin-top: 1.2rem; font: 400 clamp(1.2rem, 1.05rem + 0.5vw, 1.6rem)/1.15 var(--sc-font-display); }
.others a:hover img { transform: translateY(-4px); }
.others a:hover span { color: var(--orange-deep); }
.cta-band { text-align: center; }
.cta-band h2 { margin: 0 auto; font-size: clamp(2.6rem, 1.6rem + 3.6vw, 5.6rem); line-height: 0.98; max-width: 14ch; text-wrap: balance; }
.cta-band p { margin: 1.6rem auto 0; max-width: 32em; color: var(--sc-ink-soft); }
.cta-band .btn { margin-top: 2.4rem; }
@media (max-width: 860px) {
  .svc-hero__grid, .svc-body__grid { grid-template-columns: 1fr; }
  .svc-tile { --t: min(70vw, 22rem); }
  .others { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 861px) and (max-width: 1200px) { .others { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ------------------------------------------ service page: steps -- */
.steps { list-style: none; margin: clamp(2.5rem, 5vw, 4.5rem) 0 0; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3.5rem); }
.steps li { counter-increment: step; border-top: 1px solid var(--hair); padding-top: 1.4rem; }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; font: italic 400 1.5rem/1 var(--sc-font-display); color: var(--orange); margin-bottom: 1.1rem; }
.steps h3 { margin: 0 0 0.7rem; font: 400 clamp(1.4rem, 1.2rem + 0.6vw, 1.9rem)/1.12 var(--sc-font-display); letter-spacing: -0.01em; text-wrap: balance; }
.steps p { margin: 0; }
.steps__more { margin: clamp(2rem, 4vw, 3.5rem) 0 0; color: var(--sc-ink-soft); }
.steps__more a { color: var(--orange-deep); font-weight: 600; text-decoration: none; }
.steps__more a:hover { text-decoration: underline; }
.svc-sub { margin: 2.6rem 0 0 !important; font: 500 0.8rem/1 var(--sc-font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); }
.svc-list--sm { margin-top: 1rem !important; }
.svc-list--sm li { font-size: var(--fs-body); padding: 0.95rem 0; color: var(--sc-ink-soft); }
.related { margin-top: 2.2rem !important; display: grid; gap: 0.9rem; }
.related p { margin: 0; }
@media (max-width: 1100px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ------------------------------------------------- page not found -- */
.lost { padding-top: calc(var(--bar-h) + clamp(3rem, 8vw, 7rem)); padding-bottom: clamp(5rem, 9vw, 8rem); max-width: 62rem; }
.lost .h2 { margin: 1.2rem 0 1.6rem; }
.lost .svc-list { margin-top: 2.2rem; }
.lost .svc-list a { color: inherit; text-decoration: none; display: block; }
.lost .svc-list a:hover { color: var(--orange-deep); }
.lost .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; }

/* ------------------------------------ visitor statistics, opt-in -- */
.consent {
  position: fixed; z-index: 70; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); margin-inline: auto; max-width: 34rem;
  background: var(--navy); color: #fff; border-radius: 18px; padding: 1.1rem 1.2rem; box-shadow: 0 20px 50px -18px rgb(1 28 64 / 0.7);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; font-size: 0.92rem; line-height: 1.45;
}
.consent p { margin: 0; flex: 1 1 15rem; }
.consent a { color: #FFB27A; }
.consent__acts { display: flex; gap: 0.6rem; }
.consent button { border: 0; cursor: pointer; border-radius: 999px; padding: 0.75em 1.15em; font: 600 0.9rem/1 var(--sc-font-text); min-height: 44px; }
.consent__no { background: rgb(255 255 255 / 0.12); color: #fff; }
.consent__yes { background: var(--orange-btn); color: var(--navy); }

/* ---------------------------------------------------- small screens -- */
/* Text links get a thumb-sized hit area without moving anything. */
.more, .crumbs a, .exp__tags a { position: relative; }
.more::after, .crumbs a::after, .exp__tags a::after { content: ""; position: absolute; inset: -0.7rem -0.3rem; }
@media (max-width: 860px) {
  .contact__card span { gap: 0; }
  .contact__card a { padding-block: 0.5rem; }
  .foot ul { gap: 0; }
  .foot li a { display: inline-block; padding-block: 0.8rem; }
  .foot .foot__k { margin-bottom: 0.5rem; }
  /* the page title already says where you are */
  .crumbs li[aria-current] { display: none; }
}
@media (max-width: 720px) {
  .field label em { display: block; margin: 0.25em 0 0; }
}
@media (max-width: 480px) {
  .form, .tray, .bound { padding: 1.4rem 1.15rem; border-radius: 22px; }
  .bound__tabs { gap: 0 0.5rem; justify-content: space-between; }
  .bound__tabs button { font-size: 0.86rem; }
}
@media (max-width: 340px) { .bound__tabs { display: grid; grid-template-columns: 1fr 1fr; } .bound__tabs button { text-align: left; } }
@media (max-width: 380px) {
  .btn { padding-inline: 1.2em; gap: 0.5em; }
  .hero__beat .btn { font-size: 0.92rem; }
  .chip { font-size: 0.9rem; padding-inline: 0.95em; }
}
/* Short phones: the tile wall and its reader have to share one screen. */
@media (max-width: 860px) and (max-height: 700px) and (orientation: portrait) {
  .tiles__stage { gap: 0.9rem; }
  .tiles__text .h2 { font-size: 1.9rem; }
  .tiles__sub { display: none; }
  .wall { --t: min(21.4vw, 13svh); }
  .reader { min-height: 11rem; }
  .reader h3 { font-size: 1.45rem; }
  .reader p { font-size: 0.95rem; line-height: 1.5; margin-top: 0.4rem; }
  .reader__line { font-size: 1.4rem !important; }
  .reader__i .btn { margin-top: 0.9rem; }
}
/* A phone on its side keeps the wide compositions, scaled to the short screen. */
@media (max-width: 960px) and (orientation: landscape) {
  .hero__beat { width: min(34rem, 54vw); right: auto; top: calc(var(--bar-h) + 3svh); }
  .hero__title { font-size: clamp(1.7rem, min(4.6vw, 9svh), 2.8rem); }
  .hero__big { font-size: clamp(1.6rem, min(4.3vw, 8.4svh), 2.6rem); }
  .hero__lede { font-size: 1rem; line-height: 1.5; margin-top: 0.8rem; }
  .hero__beat .btn { margin-top: 1rem; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .hero__beat--1 .hero__lede { display: none; }
}
@media (max-width: 960px) and (orientation: landscape) and (max-height: 560px) {
  .tiles__stage { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: 1.5rem; padding-top: calc(var(--bar-h) + 1svh); padding-bottom: 1svh; }
  .tiles__text { display: block; }
  .tiles__text .h2 { font-size: 1.55rem; }
  .tiles__sub { display: none; }
  .wall { --t: min(11.4vw, 32svh); order: 0; }
  .reader { order: 0; margin-top: 0.7rem; min-height: 9.5rem; }
  .reader h3 { font-size: 1.3rem; }
  .reader p { font-size: 0.92rem; line-height: 1.45; margin-top: 0.35rem; }
  .reader .more { margin-top: 0.5rem; }
  .reader__line { font-size: 1.3rem !important; }
  .reader__i .btn { margin-top: 0.7rem; }
  /* the film sits beside its subtitle rows instead of above them */
  .av__stage { flex-direction: row; align-items: center; justify-content: center; gap: 4vw; padding-top: calc(var(--bar-h) + 1svh); padding-bottom: 1svh; }
  .av__frame, .is-phone .av__frame { width: auto; height: calc(100svh - var(--bar-h) - 6svh); aspect-ratio: 618 / 720; flex: none; }
  .av__subs span { font-size: 0.7rem; }
  .cues, .is-phone .cues { width: auto; flex: 1 1 0; min-width: 0; font-size: 0.86rem; }
  .cues td { padding-block: 0.45rem; }
}

/* -------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .world { --p: 0; }
  .tile, .svc-tile { --k: 1; transition: none; }
  .ai__panel img.is-blue { --r: 1; }
  .net { --p: 1; }
  .btn, .chip, .reader__i { transition: none; }
}

/* GUIDES · one reading column, the service page's hero and closing sections */
.guide-hero h1 { font-size: clamp(2.5rem, 1.6rem + 3.2vw, 5.2rem); max-width: 19ch; }
.guide__by { margin: 1.8rem 0 0; font-size: var(--fs-small); color: var(--sc-ink-soft); }
.guide__by a { color: inherit; text-underline-offset: 0.2em; }
.guide__draft { display: inline-block; margin: 0 0 1.6rem; padding: 0.55rem 0.9rem; border-radius: 4px; background: var(--navy); color: #FFFFFF; font-size: var(--fs-small); }
.guide.sec { padding-block: clamp(4rem, 7vw, 7rem); }
.guide__in { max-width: 46rem; }
.guide__in > * + * { margin-top: 1.5rem; }
.guide__h { margin: clamp(3rem, 5vw, 4.5rem) 0 0; font: 400 clamp(1.9rem, 1.4rem + 1.6vw, 3rem)/1.08 var(--sc-font-display); letter-spacing: -0.01em; text-wrap: balance; color: var(--sc-ink); }
.guide__in > .guide__h:first-child { margin-top: 0; }
.guide__tw { overflow-x: auto; }
.guide__pairs { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.guide__pairs th { text-align: left; font: 500 0.8rem/1 var(--sc-font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); padding: 0 1.2rem 0.9rem 0; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.guide__pairs td { padding: 0.95rem 1.2rem 0.95rem 0; border-bottom: 1px solid var(--hair); color: var(--sc-ink); }
.guide__pairs td:first-child { color: var(--sc-ink-soft); }
.guide__next { margin-top: 2.6rem !important; }
.guide-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); max-width: 62rem; }
.guide-list li { border-bottom: 1px solid var(--hair); }
.guide-list a { display: block; padding: clamp(1.8rem, 3vw, 2.8rem) 0; text-decoration: none; color: var(--sc-ink); }
.guide-list h2 { margin: 0 0 0.8rem; font: 400 clamp(1.8rem, 1.3rem + 1.6vw, 3rem)/1.08 var(--sc-font-display); text-wrap: balance; }
.guide-list .more { margin-top: 1.2rem; }
.guide-list a:hover h2 { color: var(--orange-deep); }
@media (max-width: 560px) {
  .guide__pairs { font-size: var(--fs-small); }
  .guide__pairs th { white-space: normal; letter-spacing: 0.08em; }
  .guide__pairs th, .guide__pairs td { padding-right: 0.7rem; }
}