/* Fluw: Delfts Blauw. Tin-glaze white and cobalt ink; every control is round, like the wordmark's stroke. */
:root {
  --glaze: #f3f5f6;
  --white: #fbfcfc;
  --cobalt: #1d3f94;
  --cobalt-deep: #142f74;
  --diluted: #7d9bd6;
  --wash: #dfe6f5;
  --ink: #14182b;
  --muted: #4b5268;
  --line: #c9d3e8;
  --brass: #b08a3e;
  --alert: #b42318;
  --pill: 999px;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --sans: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }  /* no sideways drift on phones */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--glaze);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1; letter-spacing: -0.015em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--cobalt); color: var(--white); }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 4px; }

symbol, .nav__mark svg, .footer__mark, .hero__still { overflow: visible; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: var(--gutter); top: -60px; z-index: 50; background: var(--cobalt); color: var(--white); padding: 10px 14px; text-decoration: none; }
.skip:focus { top: 12px; }

.xxx { width: 7px; height: 21px; color: var(--cobalt); flex: none; }

/* ------------------------------------------------------------------ buttons and links */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 7px 7px 7px 24px; min-height: 52px;
  border: 0; border-radius: var(--pill);
  background: var(--cobalt); color: var(--white);
  font-weight: 600; font-size: 1.0625rem; line-height: 1;
  text-decoration: none; cursor: pointer;
}
.btn::after {
  content: "→"; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--white); color: var(--cobalt); font-weight: 500;
  transition: transform .45s cubic-bezier(.3,.7,.2,1);
}
.btn:hover { background: var(--cobalt-deep); }
.btn:hover::after { transform: rotate(-45deg); }
.btn:active { scale: .97; }

.arrow-link {
  display: inline-block; color: var(--cobalt); font-weight: 600; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat;
  padding-bottom: 2px; transition: background-size .3s;
}
.arrow-link::after { content: " →"; }
.arrow-link:hover { background-size: 0 1.5px; background-position: 100% 100%; }

.kicker {
  display: flex; align-items: center; gap: 12px;
  font: 500 .75rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--cobalt);
}
.intro { color: var(--muted); max-width: 46ch; font-size: 1.125rem; }

/* ------------------------------------------------------------------ nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 20; transition: background-color .3s, box-shadow .3s, transform .45s cubic-bezier(.3,.7,.2,1); }
.nav.is-hidden { transform: translateY(-100%); }
.nav.is-scrolled { background: var(--glaze); box-shadow: 0 1px 0 var(--line); }
.on-blue .nav.is-scrolled { background: var(--cobalt); }
/* the studio's cobalt is a fixed layer that only changes opacity, which the compositor handles
   without repainting the page (repainting the canal drawing every frame is what made it stutter) */
.tint { position: fixed; inset: 0; z-index: -1; background: var(--cobalt); opacity: var(--tint, 0); pointer-events: none; will-change: opacity; }
.on-blue .nav { color: var(--white); }
.on-blue .nav.is-scrolled { box-shadow: 0 1px 0 rgba(223, 230, 245, .2); }
.on-blue .nav__mark { color: var(--white); }
.on-blue .nav__lang { border-color: currentColor; }
.on-blue .nav__links a { background-image: linear-gradient(currentColor, currentColor); }
.nav__in { display: flex; align-items: center; gap: 32px; height: 68px; }
.nav__mark { color: var(--cobalt); margin-right: auto; }
.nav__mark svg { width: 78px; height: auto; }
.nav__links { display: flex; gap: 28px; }
.nav__links a, .nav__lang { font-size: .95rem; font-weight: 500; text-decoration: none; }
.nav__links a { background: linear-gradient(var(--cobalt), var(--cobalt)) 0 100% / 0 1.5px no-repeat; padding-block: 4px; transition: background-size .3s; }
.nav__links a:hover { background-size: 100% 1.5px; }
.nav__lang { font: 500 .75rem/1 var(--mono); letter-spacing: .08em; border: 1.5px solid currentColor; border-radius: var(--pill); padding: 8px 12px 7px; }
.nav__lang:hover { background: var(--ink); color: var(--glaze); }
@media (max-width: 760px) { .nav__links { display: none; } }

/* phone menu: a round button opens a full cobalt sheet with big, staggered links */
.nav__menu { display: none; position: relative; z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; cursor: pointer; padding: 0; }
.nav__menu span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; transition: transform .45s cubic-bezier(.3,.7,.2,1), top .45s cubic-bezier(.3,.7,.2,1); }
.nav__menu span:first-child { top: 18px; } .nav__menu span:nth-child(2) { top: 26px; }
.nav__menu b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.menu-open .nav__menu span:first-child { top: 22px; transform: rotate(45deg); }
.menu-open .nav__menu span:nth-child(2) { top: 22px; transform: rotate(-45deg); }
.menu-open .nav { color: var(--white); background: transparent !important; box-shadow: none !important; transform: none !important; }
.menu-open .nav__mark { color: var(--white); }
.menu {
  position: fixed; inset: 0; z-index: 19; background: var(--cobalt); color: var(--white);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 96px var(--gutter) 40px;
  /* a circle grows out of the menu button and shrinks back into it, on the same curve both ways;
     centre and radius are measured in pixels by the script so every browser can animate it */
  --mx0: calc(100% - 39px); --my0: 34px; --mr: 150vmax;
  clip-path: circle(0px at var(--mx0) var(--my0)); visibility: hidden;
  transition: clip-path .75s cubic-bezier(.65,0,.35,1), visibility 0s .75s;
}
.menu-open .menu { clip-path: circle(var(--mr) at var(--mx0) var(--my0)); visibility: visible; transition: clip-path .75s cubic-bezier(.65,0,.35,1), visibility 0s; }
.menu__links { display: grid; gap: 4px; }
.menu__links a {
  font-size: clamp(3rem, 15vw, 5rem); font-weight: 760; font-variation-settings: "wdth" 76; line-height: 1; letter-spacing: -0.03em;
  text-decoration: none; transform: translateY(40px); opacity: 0; transition: transform .7s cubic-bezier(.16,.84,.2,1), opacity .5s;
}
.menu-open .menu__links a { transform: none; opacity: 1; transition-delay: calc(.25s + var(--i) * 60ms); }
.menu__foot { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(223, 230, 245, .3); font-size: .95rem; }
.menu__foot a { color: #dfe6f5; }
@media (max-width: 760px) { .nav__menu { display: block; } .nav__lang { display: none; } .nav__in { gap: 12px; } }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 68px; isolation: isolate; overflow: hidden; }  /* the parallaxed water never spills over the next section */
.hero__water { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
#ink { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s; touch-action: pan-y; }
.hero__still {
  position: absolute; left: 50%; top: 37%;
  width: min(80vw, 37svh * 2.533); height: auto;
  transform: translate(-50%, -50%);
  color: var(--cobalt); overflow: visible; transition: opacity .6s;
}
.ink-on #ink { opacity: 1; }
.ink-on .hero__still { opacity: 0; }
/* with motion on, the static logo stays hidden from the first paint so the ink writes it from nothing;
   it only shows if the ink can't run (no WebGL, script failure, lost GPU context) */
.motion .hero__still { opacity: 0; }
.motion .ink-off:not(.ink-on) .hero__still { opacity: 1; }
.hero__stir {
  position: absolute; right: var(--gutter); top: 96px;
  font: 400 .75rem/1 var(--mono); color: var(--cobalt); letter-spacing: .04em;
  opacity: 0; transition: opacity .8s .6s;
}
.hero__stir::before { content: "≈ "; }
.ink-on .hero__stir { opacity: .7; }
.ink-on.stirred .hero__stir { opacity: 0; transition-delay: 0s; }

.hero__text { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px 64px; align-items: end; padding-bottom: clamp(28px, 6vh, 64px); }

.hero h1 {
  font-size: clamp(3.4rem, 9vw, 8.6rem);
  font-weight: 760; font-variation-settings: "wdth" 76; line-height: .88; letter-spacing: -0.03em;
}
.hero__right { display: grid; gap: 26px; max-width: 400px; justify-self: end; }
.lead { font-size: 1.1875rem; line-height: 1.55; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }

@media (max-width: 860px) {
  .hero__still { top: 30%; width: min(84vw, 32svh * 2.533); }
  .hero h1 { font-size: max(3.4rem, 16.5vw); }
  .hero__text { grid-template-columns: 1fr; }
  .hero__right { justify-self: start; }
  .hero__stir { top: 84px; }
}

/* ------------------------------------------------------------------ canal walk */
.canal { --ch: min(60vh, 640px); --base: 4vh; padding-top: clamp(96px, 14vh, 160px); }
.canal__head { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px 64px; align-items: end; }
.canal__head h2, .section-head h2, .process h2 { font-size: clamp(2.25rem, 4.6vw, 4.1rem); font-variation-settings: "wdth" 80; font-weight: 700; }
.canal__head .intro { justify-self: end; }
.canal__hint { display: none; }
.canal__pin { position: relative; }
.canal__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.canal__track {
  position: absolute; left: 0; top: 0; height: 100%;
  width: calc(var(--tw) * var(--ch) / 600);
  will-change: transform;
}
.canal__notes { position: absolute; left: 0; top: 0; height: 100%; width: calc(var(--tw) * var(--ch) / 600); will-change: transform; pointer-events: none; }
.canal__notes .house-note { pointer-events: auto; }
.canal__drawing { position: absolute; left: 0; bottom: var(--base); height: var(--ch); width: 100%; }
.canal__img, .canal__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }
.canal__svg { overflow: visible; }

.c-ink { stroke: var(--cobalt); stroke-linejoin: round; stroke-linecap: round; }
.h-wall { fill: var(--white); stroke: var(--cobalt); stroke-width: 2.2; }
.h-line { fill: none; stroke: var(--cobalt); stroke-width: 2.2; }
.h-thin { fill: none; stroke: var(--cobalt); stroke-width: 1.4; }
.h-win { fill: var(--cobalt); stroke: none; }
.h-win + .h-thin { stroke: var(--white); stroke-width: 1.2; }
.h-stone { fill: var(--white); stroke: var(--cobalt); stroke-width: 2.2; }
.t-crown { fill: var(--wash); stroke: var(--cobalt); stroke-width: 1.8; }
.c-water { fill: var(--wash); }
.c-refl { opacity: .26; }
.c-refl .h-wall { fill: var(--wash); }
.c-refl .h-win { fill: var(--diluted); }
.c-refl .h-thin { stroke-width: 0; }
.c-ripples { stroke: var(--diluted); stroke-width: 1.6; stroke-linecap: round; opacity: .7; }
.tile-ink { fill: none; stroke: var(--cobalt); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tile-glaze { fill: var(--white); stroke: none; }
.tile-ink .dot { fill: var(--cobalt); }

.house-note {
  position: absolute;
  left: calc(var(--x) * var(--ch) / 600);
  bottom: calc(var(--base) + var(--ch) * .64 + 20px);
  width: min(calc(440 * var(--ch) / 600), 420px);
  display: grid; gap: 12px; align-content: end;
}
.house-note h3 { font-size: clamp(1.9rem, 3vw, 2.6rem); font-variation-settings: "wdth" 78; color: var(--cobalt); }
.house-note p { font-size: 1rem; }
.house-note__tile { display: none; }
.trade { font: 400 .75rem/1.6 var(--mono); color: var(--muted); letter-spacing: .02em; }

@media (max-width: 819px) {
  /* phones get the same pinned walk: the street slides under your thumb, one trade at a time */
  .canal { --ch: min(42svh, 360px); --base: 5svh; }
  .canal__head { grid-template-columns: 1fr; }
  .canal__head .intro { justify-self: start; }
  .canal__stage { height: 100vh; height: 100svh; }
  .canal__notes { width: auto; right: 0; transform: none !important; }
  .house-note {
    left: var(--gutter); right: var(--gutter); top: 88px; bottom: auto; width: auto;
    grid-template-columns: 52px 1fr; gap: 14px 16px; align-items: center;
    opacity: 0; visibility: hidden; transform: translateY(18px);
    transition: opacity .5s, transform .7s cubic-bezier(.16,.84,.2,1), visibility 0s .7s;
  }
  .house-note.is-current { opacity: 1; visibility: visible; transform: none; transition: opacity .5s .1s, transform .7s .1s cubic-bezier(.16,.84,.2,1), visibility 0s; }
  .house-note > :not(.house-note__tile) { grid-column: 1 / -1; }
  .house-note > * { min-width: 0; }
  .house-note h3 { grid-column: 2 !important; font-size: clamp(1.6rem, 8vw, 2.1rem); overflow-wrap: anywhere; }
  .house-note__tile { display: block; width: 52px; height: 52px; }
  .house-note p { font-size: .98rem; }
  .house-note .trade { display: none; }
  .motion .house-note h3, .motion .house-note > p, .motion .house-note > a { transform: none; }
}

/* ------------------------------------------------------------------ house rules */
.rules { padding-block: clamp(96px, 14vh, 160px) clamp(80px, 12vh, 140px); }
.section-head { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px 64px; align-items: end; margin-bottom: clamp(48px, 7vh, 80px); }
.section-head .intro { justify-self: end; }
.tableau { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 28px; }
.rule { margin: 0; display: grid; gap: 22px; align-content: start; }
.tegel {
  position: relative; aspect-ratio: 1; display: grid; place-items: center;
  background: var(--white); padding: 18%; border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 0 var(--line), 0 14px 24px -18px rgba(20, 24, 43, .35);
}
/* tiles hang themselves on the wall as they scroll in: --q goes 0 to 1 */
.tegel { --r: 0deg; --ty: 0px; --swing: 9deg; --drop: 90px; --k: 1; transform: translateY(calc(var(--ty) + (1 - var(--q, 1)) * var(--drop))) rotate(calc(var(--r) + (1 - var(--q, 1)) * var(--swing) * var(--k))); transform-origin: 50% 0; }
.rule:nth-child(1) .tegel { --r: -1.2deg; --swing: -10deg; }
.rule:nth-child(2) .tegel { --r: .7deg; --ty: 10px; --swing: 8deg; }
.rule:nth-child(3) .tegel { --r: -.4deg; --swing: -7deg; }
.rule:nth-child(4) .tegel { --r: 1.1deg; --ty: 6px; --swing: 11deg; }
.tegel__corners { position: absolute; inset: 0; width: 100%; height: 100%; }
.tegel blockquote {
  position: relative; margin: 0; text-align: center; color: var(--cobalt);
  font-size: clamp(1.35rem, 2.1vw, 1.85rem); font-weight: 650; font-variation-settings: "wdth" 76; line-height: 1.05;
  text-wrap: balance;
}
.rule figcaption { font-size: .98rem; color: var(--ink); max-width: 34ch; }
@media (max-width: 1020px) { .tableau { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .section-head { grid-template-columns: 1fr; } .section-head .intro { justify-self: start; } }
@media (max-width: 520px) {
  .tableau { grid-template-columns: 1fr; gap: 28px; }
  .rule { grid-template-columns: 44% 1fr; gap: 20px; align-items: center; }
  .tegel blockquote { font-size: 1.05rem; }
  .tegel { --drop: 24px; --k: .35; }
}

/* ------------------------------------------------------------------ process: one stroke of ink runs down the page and meanders past each step */
.process { padding-block: clamp(96px, 14vh, 160px) clamp(40px, 6vh, 80px); }
.river { position: relative; display: grid; gap: clamp(120px, 22vh, 240px); padding-block: clamp(60px, 10vh, 120px) clamp(100px, 16vh, 180px); }
.river__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.river__bed, .river__ink { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.river__bed { stroke: var(--wash); stroke-width: 14; }
.river__ink { stroke: var(--cobalt); stroke-width: 14; }
.river__head { fill: var(--cobalt); }
.bend { position: relative; width: min(44%, 560px); display: grid; gap: 14px; }
.bend:nth-of-type(even) { margin-left: auto; }
.bend__when { font: 500 .75rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cobalt); }
.bend h3 { font-size: clamp(2.8rem, 6.6vw, 6.2rem); font-weight: 760; font-variation-settings: "wdth" 76; line-height: .88; letter-spacing: -0.03em; color: var(--cobalt); }
.bend__text { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.45; max-width: 32ch; }
.bend h3, .bend__text, .bend__when { transition: color .6s, opacity .6s, transform .9s cubic-bezier(.16,.84,.2,1); }
.motion .bend:not(.is-reached) h3 { color: var(--line); transform: translateX(var(--lean, -24px)); }
.motion .bend:nth-of-type(even):not(.is-reached) h3 { --lean: 24px; }
.motion .bend:not(.is-reached) .bend__text, .motion .bend:not(.is-reached) .bend__when { opacity: .25; }
@media (max-width: 760px) {
  .river { gap: 96px; }
  .bend, .bend:nth-of-type(even) { width: auto; margin-left: 0; padding-left: 56px; }
  .river__bed, .river__ink { stroke-width: 10; }
}

/* ------------------------------------------------------------------ the studio */
.statement { background: var(--cobalt); color: var(--white); }
.motion .statement { background: transparent; }
.statement__pin { height: 230vh; }
.statement__stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.statement .kicker { color: #c3d0ee; margin-bottom: 28px; }
.statement__text {
  max-width: 21ch; font-size: clamp(2.1rem, 5.4vw, 5.2rem); font-weight: 650; font-variation-settings: "wdth" 82;
  line-height: 1.02; letter-spacing: -0.022em;
}
.statement__text .sw { opacity: var(--o, 1); transition: opacity .25s linear; }
/* text follows the page colour, so nothing is ever white on glaze mid-transition */
.motion .statement, .motion .statement .kicker, .motion .promises p { transition: color .4s; }
.motion .statement { color: var(--ink); }
.motion .statement .kicker { color: var(--cobalt); }
.motion .promises p { color: var(--muted); }
.motion .promises li { border-top-color: var(--line); }
.on-blue .statement { color: var(--white); }
.on-blue .statement .kicker { color: #c3d0ee; }
.on-blue .promises p { color: #d3dcf2; }
.on-blue .promises li { border-top-color: rgba(223, 230, 245, .3); }
.js .statement__text .sw { --o: .2; }
.promises { list-style: none; margin: 0; padding: 0 0 clamp(80px, 12vh, 140px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 32px; }
.promises li { border-top: 1px solid rgba(223, 230, 245, .3); padding-top: 22px; display: grid; gap: 10px; align-content: start; }
.promises h3 { font-size: 1.5rem; font-variation-settings: "wdth" 84; font-weight: 650; }
.promises p { color: #d3dcf2; font-size: 1rem; }
@media (max-width: 960px) { .promises { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; } }
@media (max-width: 520px) { .statement__pin { height: 190vh; } .promises { grid-template-columns: 1fr; gap: 28px; } }

/* ------------------------------------------------------------------ contact */
.contact { padding-block: clamp(88px, 13vh, 150px); }
.weather { font: 400 .8rem/1.4 var(--mono); color: var(--cobalt); margin-bottom: 18px; }
.contact h2 {
  font-size: clamp(4.2rem, 15vw, 13rem); font-weight: 800; font-variation-settings: "wdth" 75;
  line-height: .82; letter-spacing: -0.035em; color: var(--cobalt);
}
.contact__sub { font-size: 1.25rem; margin-top: 22px; max-width: 34ch; }
.contact__grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px 80px; margin-top: clamp(48px, 8vh, 88px); align-items: start; }
.contact__direct { display: grid; gap: 14px; justify-items: start; }
.mail a { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 600; font-variation-settings: "wdth" 85; text-decoration: none; color: var(--ink); border-bottom: 2px solid var(--cobalt); }
.mail a:hover { color: var(--cobalt); }
.copy { background: none; border: 0; padding: 4px 0; font: 400 .78rem/1 var(--mono); color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.copy:hover { color: var(--cobalt); }
.contact__city { color: var(--muted); margin-top: 12px; }

.form { display: grid; gap: 26px; }
.form fieldset { border: 0; margin: 0; padding: 0; }
.form legend, .field > span { font: 500 .72rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 12px; padding: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choices label { position: relative; cursor: pointer; }
.choices input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choices span { display: inline-block; padding: 10px 16px; border: 1.5px solid var(--cobalt); border-radius: var(--pill); color: var(--cobalt); font-weight: 500; padding-inline: 20px; transition: background-color .15s, color .15s; }
.choices input:checked + span { background: var(--cobalt); color: var(--white); }
.choices input:focus-visible + span { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.field { display: grid; }
.field input, .field textarea {
  width: 100%; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0; background: transparent;
  padding: 8px 0 12px; font-size: 1.15rem; outline: none; resize: vertical;
}
.field input:focus, .field textarea:focus { border-bottom-color: var(--cobalt); box-shadow: 0 1.5px 0 var(--cobalt); }
.field [aria-invalid="true"] { border-bottom-color: var(--alert); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.form__status { min-height: 1.6em; font-weight: 500; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.form .btn[aria-busy="true"]::after { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.form__status.is-error { color: var(--alert); }
.form__status.is-ok { color: var(--cobalt); }
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ footer */
.footer { position: relative; background: var(--cobalt); color: #dfe6f5; margin-top: 40px; }
.footer__wave { position: absolute; left: 0; top: -30px; width: 100%; height: 60px; overflow: visible; }
.footer__wave path { fill: var(--cobalt); stroke: var(--cobalt); stroke-width: 2; }
.footer__in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px 40px; padding-block: 56px 36px; }
.footer__mark { color: var(--white); }
.footer__mark svg { width: 104px; height: auto; }
.footer__made { display: inline-flex; align-items: center; gap: 10px; font-size: .95rem; }
.footer__made .xxx { height: 16px; width: 6px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: .95rem; }
.footer__links a { color: var(--white); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s; }
.footer__links a:hover { background-size: 100% 1px; }
.footer__copy { grid-column: 1 / -1; font: 400 .75rem/1 var(--mono); color: #9fb2e0; padding-top: 24px; border-top: 1px solid rgba(223, 230, 245, .2); }
@media (max-width: 760px) { .footer__in { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ motion (only with .motion: JS on, reduced motion off) */
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hero h1 .w > span { display: inline-block; }
.motion .hero h1 .w > span { transform: translateY(108%); }
.motion .hero__right > * { opacity: 0; transform: translateY(14px); }
.motion .hero.is-in h1 .w > span { transform: none; transition: transform 1.1s cubic-bezier(.16,.84,.2,1) calc(.15s + var(--i) * 70ms); }
.motion .hero.is-in .hero__right > * { opacity: 1; transform: none; transition: opacity .9s, transform 1s cubic-bezier(.16,.84,.2,1); }
.motion .hero.is-in .hero__right > :nth-child(1) { transition-delay: .55s; }
.motion .hero.is-in .hero__right > :nth-child(2) { transition-delay: .68s; }
.motion .hero.is-in .hero__right > :nth-child(3) { transition-delay: .8s; }
.motion .hero__text { transform: translateY(calc(var(--hp, 0) * -60px)); opacity: calc(1 - var(--hp, 0) * 1.4); }
.motion .hero__water { transform: translateY(calc(var(--hp, 0) * 22vh)) scale(calc(1 + var(--hp, 0) * .06)); }

.motion .house-note h3 { transform: translateX(calc(var(--d, 0) * 90px)); }
.motion .house-note > p, .motion .house-note > a { transform: translateX(calc(var(--d, 0) * 45px)); }
.motion .stone { stroke-dasharray: 760; stroke-dashoffset: calc((1 - var(--draw, 1)) * 760); }

.motion .contact h2 { font-variation-settings: "wdth" calc(100 - var(--v, 1) * 25); font-weight: calc(300 + var(--v, 1) * 500); }
.btn { transform: translate(var(--mx, 0px), var(--my, 0px)); transition: background-color .2s, transform .35s cubic-bezier(.3,.7,.2,1), scale .2s; }

/* the street is alive: a rider on the quay, a houseboat on the swell, ripples on the water */
.rider { display: block; position: absolute; z-index: 2; left: max(24vw, 64px); width: calc(var(--ch) * 120 / 600); height: auto;
  bottom: calc(var(--base) + var(--ch) * 170 / 600 - var(--ch) * 4 / 600); overflow: visible; }
.rider__flip { fill: none; stroke: var(--cobalt); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* a white outline underneath keeps the rider legible against the houses behind */
.rider__halo { stroke: var(--white); stroke-width: 8; }
.rider__wheel { transform-box: fill-box; transform-origin: 50% 50%; }
/* the rider turns round when you scroll back: a quick squash through edge-on, like a real turn */
.rider__flip { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .45s cubic-bezier(.5,0,.3,1); }
.rider.is-back .rider__flip { transform: scaleX(-1); }
.rider__head { fill: var(--white); }
.rider__wheel circle { fill: rgba(251, 252, 252, .7); }
.motion .boat { animation: bob 5s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(-2px) rotate(-.4deg); } to { transform: translateY(3px) rotate(.5deg); } }

@property --cs { syntax: '<number>'; inherits: false; initial-value: .45; }
/* a soft ring follows the pointer and swells over anything you can press */
.cursor { position: fixed; left: 0; top: 0; z-index: 60; width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: none;
  border: 1.5px solid var(--cobalt); border-radius: 50%; display: grid; place-items: center;
  transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0) scale(var(--cs, .45)); opacity: 0;
  transition: opacity .3s, border-color .3s, background-color .3s, --cs .35s cubic-bezier(.3,.7,.2,1); }
.cursor span { font: 500 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cobalt); opacity: 0; transition: opacity .2s; }
.has-cursor .cursor { opacity: 1; }
.cursor.is-link { --cs: 1.1; background: rgba(29, 63, 148, .08); }
.cursor.is-stir { --cs: 1.5; }
.cursor.is-stir span { opacity: 1; }
.on-blue .cursor { border-color: var(--white); }

/* paper grain over everything, barely there */
body::after { content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* form lines draw in from the left on focus */
.field { position: relative; }
.field::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cobalt); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s cubic-bezier(.16,.84,.2,1); }
.field:focus-within::after { transform: scaleX(1); }
.field input:focus, .field textarea:focus { box-shadow: none; }