/* ───────────────────────── Tokens ───────────────────────── */
:root {
  --paper: #eeebe5;
  --paper-2: #e6e1d8;
  --ink: #2b241e;
  --ink-soft: #5b5148;
  --muted: #8a8076;
  --line: rgba(43, 36, 30, .14);
  --accent: #c4473a;      /* text accent: a deeper coral that reads well on paper */
  --coral: #f2635a;
  --night: #1c1713;
  --night-2: #26201b;
  --line-light: rgba(238, 235, 229, .16);
  --glass: rgba(240, 237, 231, .62);

  --f-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;
  --f-script: "Homemade Apple", cursive;

  --gutter: clamp(16px, 4vw, 48px);
  --frame: clamp(10px, 1.6vw, 30px);
  --radius: clamp(14px, 1.4vw, 22px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

.container {
  width: min(1200px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* ───────────────────────── Buttons ───────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .95em 1.35em;
  border-radius: 999px;
  font: 700 15px/1 var(--f-display);
  letter-spacing: -.02em;
  transition: transform .5s var(--ease), background-color .3s, box-shadow .5s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--coral { background: var(--coral); color: #fff; }
.btn--coral:hover { background: #ec5047; }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { background: #000; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ───────────────────────── Nav ───────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding-top: calc(var(--frame) + clamp(18px, 4vh, 58px));
  pointer-events: none;
}
.nav { transition: transform .6s var(--ease), padding .6s var(--ease); }
.nav.is-solid { padding-block: 14px; }
.nav.is-hidden { transform: translateY(-110%); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; }
.nav a, .nav button { pointer-events: auto; }

.logo { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); }
.logo__svg { display: block; height: 34px; width: auto; }

/* nav logo: full logo folds away on scroll, icon unfolds in its place */
.logo--swap { position: relative; }
.logo__full { display: inline-flex; align-items: center; gap: 4px; clip-path: inset(-20% -2% -40% 0); transition: clip-path .9s var(--ease), opacity .6s, translate .9s var(--ease); }
.nav.is-compact .logo__full { clip-path: inset(-20% 100% -40% 0); opacity: 0; translate: -12px 0; }
.nav.is-compact .logo__full { pointer-events: none; }

.menu { position: relative; }
.menu__bar {
  display: flex; align-items: center; padding: 5px;
  background: var(--ink); border-radius: 999px;
  transition: background-color .4s;
}
/* the icon lives inside the pill and unfolds as the full logo folds away */
.menu__home {
  display: grid; place-items: center; flex: none;
  width: 0; height: 32px; margin-right: 0; overflow: hidden; border-radius: 50%;
  color: var(--paper); opacity: 0;
  transition: width .7s var(--ease), margin .7s var(--ease), opacity .4s;
}
.menu__home svg { width: 28px; height: 28px; flex: none; scale: .3; rotate: -120deg; transition: scale .8s var(--ease), rotate .8s var(--ease); }
.nav.is-compact .menu__home { width: 34px; margin-left: 8px; margin-right: 8px; opacity: 1; transition-delay: .15s; }
.nav.is-compact .menu__home svg { scale: 1; rotate: 0deg; transition-delay: .3s; }
.menu__home:hover svg { rotate: -8deg; }
.menu__list { display: flex; gap: 2px; }
.menu__list a {
  display: block; padding: 8px 13px; border-radius: 999px;
  color: var(--paper); font: 600 14px/1 var(--f-display); letter-spacing: -.01em;
  transition: background-color .3s;
}
.menu__list a:hover { background: rgba(255, 255, 255, .1); }
/* language switcher: the current code at the end of the pill, the list opens below it */
.lang { position: relative; display: flex; align-items: center; margin-left: 2px; padding-left: 3px; border-left: 1px solid rgba(238, 235, 229, .16); }
.lang__btn {
  border: 0; cursor: pointer; background: none; color: rgba(238, 235, 229, .75);
  padding: 8px 11px; border-radius: 999px; font: 700 12px/1 var(--f-display); letter-spacing: .08em;
  transition: background-color .3s, color .3s;
}
.lang__btn:hover, .lang__btn[aria-expanded="true"] { background: rgba(255, 255, 255, .1); color: var(--paper); }
.lang__list {
  list-style: none; margin: 0; position: absolute; right: -5px; top: calc(100% + 13px); z-index: 2;
  min-width: 200px; padding: 8px; border-radius: 18px; background: var(--ink);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .5);
}
.lang__list a, .lang__soon { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font: 600 14px/1 var(--f-display); color: var(--paper); }
.lang__list a:hover { background: rgba(255, 255, 255, .08); }
.lang__list b { width: 22px; font-size: 11px; letter-spacing: .08em; color: rgba(238, 235, 229, .5); }
.lang__list a[aria-current="true"]::after { content: ""; width: 7px; height: 7px; margin-left: auto; background: var(--coral); }
.lang__soon { color: rgba(238, 235, 229, .35); cursor: default; }
.lang__soon i { margin-left: auto; font: 600 10px/1 var(--f-display); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.nav.is-dark .lang { border-left-color: rgba(43, 36, 30, .14); }
.nav.is-dark .lang__btn { color: var(--ink); }
.nav.is-dark .lang__btn:hover, .nav.is-dark .lang__btn[aria-expanded="true"] { background: rgba(0, 0, 0, .06); }
.menu__toggle {
  display: none; border: 0; cursor: pointer;
  background: none; color: var(--paper);
  padding: 7px 13px; border-radius: 999px; font: 600 14px/1 var(--f-display); white-space: nowrap;
}

/* ───────────────────────── Intro / stage ───────────────────────── */
.intro { position: relative; height: 250vh; height: 250svh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; padding: var(--frame); }
.frame {
  position: relative; height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
}
.pixels { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* soft light wash at the top so the headline reads on the sky, like the concept */
.frame__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(246, 244, 239, .72) 0%, rgba(246, 244, 239, .35) 32%, rgba(246, 244, 239, 0) 55%);
}

.hero {
  position: absolute; left: 0; right: 0; z-index: 3;
  top: clamp(120px, 20vh, 240px);
  will-change: transform;
}
.services { z-index: 2; }
.hero__title {
  font: 800 clamp(2.5rem, 6.1vw, 6.6rem)/.96 var(--f-display);
  letter-spacing: -.058em;
  color: var(--ink);
}
.hero__title em { font-style: normal; color: var(--accent); }

/* Birkly, linked: underlined quietly, in its own colour */
/* the cycling word: a gradient fills it left to right, then it flips to the next case */
.flip {
  display: inline-block; vertical-align: bottom; position: relative;
  perspective: 600px; transition: width .6s var(--ease);
  cursor: pointer; text-decoration: none;
}
.flip__word {
  display: inline-block; white-space: nowrap; transform-origin: 50% 60%;
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background:
    linear-gradient(90deg, #c4473a, #f2635a 70%, #f59c6c) 0 0 / var(--fill, 0%) 100% no-repeat,
    linear-gradient(rgba(196, 71, 58, .2), rgba(196, 71, 58, .2));
  -webkit-background-clip: text; background-clip: text;
  padding-bottom: .1em; margin-bottom: -.1em;   /* keep descenders inside the clip */
}
.flip__word.is-out { transition: transform .45s cubic-bezier(.55, 0, .7, .2), opacity .35s; transform: rotateX(80deg) translateY(-35%); opacity: 0; }
.flip__word.is-in { transform: rotateX(-80deg) translateY(35%); opacity: 0; }
.flip__word.is-settle { transition: transform .7s var(--ease), opacity .4s; }
.flip:focus-visible { outline-offset: 6px; border-radius: 6px; }

.peek {
  position: absolute; left: 0; top: 0; z-index: 5; width: 300px;
  display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: center;
  padding: 10px; border-radius: 16px;
  background: rgba(246, 244, 239, .82);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 30px 60px -25px rgba(43, 36, 30, .5), inset 0 0 0 1px rgba(255, 255, 255, .6);
  opacity: 0; visibility: hidden; translate: 0 12px; scale: .96; transform-origin: 20% 0;
  transition: opacity .3s, translate .5s var(--ease), scale .5s var(--ease), visibility .3s;
}
.peek.is-open { opacity: 1; visibility: visible; translate: 0 0; scale: 1; }
.peek__media { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--night); display: block; }
.peek__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .8s var(--ease); }
.peek:hover .peek__media img { scale: 1.06; }
.peek__media.is-mark { display: grid; place-items: center; }
.peek__mark { width: 44px; height: 44px; display: block; }
.peek__mark svg { width: 100%; height: 100%; display: block; }
.peek__body { display: grid; gap: 4px; }
.peek__name { font: 800 18px/1.05 var(--f-display); letter-spacing: -.04em; color: var(--ink); }
.peek__desc { font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); }
.peek__go { margin-top: 4px; font: 700 12px/1 var(--f-display); color: var(--accent); }
.peek__go i { font-style: normal; display: inline-block; transition: translate .4s var(--ease); }
.peek:hover .peek__go i { translate: 4px 0; }
/* the mask the headline lines rise out of: it only clips below the line (so text can slide up into
   view), with room for accents and descenders, and never clips sideways */
.ln { display: block; clip-path: inset(-.25em -100vw -.18em -100vw); }
.ln > span { hyphens: auto; -webkit-hyphens: auto; }
.ln > span { display: inline-block; will-change: transform; }
.hero__cta { margin-top: clamp(24px, 4vh, 44px); will-change: transform; }

.services {
  position: absolute; left: 0; right: 0; bottom: clamp(18px, 7vh, 80px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  perspective: 1400px;
}
.card {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px;
  padding: clamp(16px, 1.8vw, 24px);
  min-height: clamp(150px, 22vh, 210px);
  border-radius: 0;
  background: rgba(240, 237, 231, .5);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  backdrop-filter: blur(20px) saturate(1.25);
  box-shadow: 0 30px 60px -30px rgba(43, 36, 30, .45), inset 0 1px 0 rgba(255, 255, 255, .55);
  transform-origin: 50% 100%;
  will-change: transform;
}
.card:first-child { border-radius: 16px 0 0 16px; }
.card:last-child { border-radius: 0 16px 16px 0; }
.card__top { display: flex; justify-content: space-between; align-items: center; }
.card__idx { font: 600 12px/1 var(--f-display); letter-spacing: .1em; color: var(--ink-soft); }
.card .pix { width: 30px; height: 30px; }
.card .pix svg { width: 100%; height: 100%; display: block; }
.card .pix rect { fill: var(--ink); }
.card .pix rect.is-accent { fill: var(--coral); }
.card:hover .pix rect { animation: pixIn .45s var(--ease) both; animation-delay: var(--d); }
.card h3 { font: 800 clamp(1.3rem, 1.8vw, 1.85rem)/1.05 var(--f-display); letter-spacing: -.05em; }
.card p { font-size: 13px; line-height: 1.5; color: var(--ink-soft); max-width: 42ch; }
.card__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-top: 12px; border-top: 1px solid rgba(43, 36, 30, .12);
  font: 600 12px/1 var(--f-display); color: var(--ink-soft);
}
.card__arrow {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: var(--paper); font-size: 13px;
  transition: background-color .3s, rotate .5s var(--ease);
}
.card:hover .card__arrow { background: var(--coral); rotate: -45deg; }

/* offer headline living inside the stage */
.offer-head {
  position: absolute; left: 0; right: 0; bottom: clamp(24px, 6vh, 72px);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 13px/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: clamp(18px, 3vh, 32px);
}
.eyebrow__dot { width: 8px; height: 8px; background: var(--coral); }
.offer-title {
  font: 800 clamp(2.3rem, 5.6vw, 6rem)/.98 var(--f-display);
  letter-spacing: -.055em;
}
.offer-title em { font-style: normal; color: var(--accent); }

/* the button: on hover, coral spreads out from it over the whole frame (js/main.js sets the centre and radius) */
.frame__flood {
  position: absolute; inset: 0; pointer-events: none; background: var(--coral);
  clip-path: circle(0 at var(--fx, 50%) var(--fy, 50%));
  transition: clip-path .55s cubic-bezier(.55, 0, .7, .2);
}
.intro.is-flood .frame__flood { clip-path: circle(var(--fr, 150%) at var(--fx, 50%) var(--fy, 50%)); transition: clip-path 1s var(--ease); }
.hero__title em { transition: color .5s; }
.intro.is-flood .hero__title em { color: var(--paper); }
.intro.is-flood .flip__word { background: none; color: var(--paper); }
.hero__cta { transition: transform .5s var(--ease), background-color .4s, color .4s, box-shadow .5s var(--ease); }
.intro.is-flood .hero__cta { background: var(--ink); color: var(--paper); }
@media (prefers-reduced-motion: reduce) {
  .frame__flood, .intro.is-flood .frame__flood { transition: none; }
}

/* ───────────────────────── Offer section ───────────────────────── */
.offer { position: relative; padding: clamp(24px, 4vh, 48px) 0 clamp(80px, 16vh, 180px); }

.offer__intro {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center;
  padding-bottom: clamp(16px, 3vh, 32px);
}
.lead {
  font: 500 clamp(1.2rem, 1.9vw, 1.75rem)/1.35 var(--f-display);
  letter-spacing: -.025em; color: var(--ink-soft); max-width: 34ch;
}

.stamp { position: relative; width: clamp(130px, 13vw, 180px); aspect-ratio: 1; }
.stamp svg { width: 100%; height: 100%; animation: spin 26s linear infinite; }
.stamp text { font: 600 14px var(--f-display); letter-spacing: .1em; text-transform: uppercase; fill: var(--ink); }
.stamp__six {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 400 clamp(2.4rem, 3.8vw, 3.4rem)/1 var(--f-script); color: var(--accent);
  transform: translateY(8%);
}
@keyframes spin { to { transform: rotate(360deg); } }

.prices { display: grid; grid-template-columns: 1fr 1fr; }
.price {
  padding: clamp(24px, 4vw, 48px) clamp(0px, 3vw, 48px) clamp(24px, 4vw, 48px) 0;
}
.price--care { padding-left: clamp(24px, 3vw, 48px); padding-right: 0; border-left: 1px solid var(--line); }
.price__head {
  display: flex; gap: 14px; align-items: baseline;
  font: 700 clamp(1.1rem, 1.4vw, 1.35rem)/1 var(--f-display); letter-spacing: -.03em;
  margin-bottom: clamp(28px, 5vh, 56px);
}
.price__from { font: 400 18px/1 var(--f-script); color: var(--muted); margin-bottom: 6px; }
.price__amount {
  display: flex; align-items: baseline; gap: .18em; flex-wrap: wrap;
  font: 800 clamp(3.6rem, 9vw, 9.5rem)/.9 var(--f-display); letter-spacing: -.065em;
}
.price__unit { font-size: .22em; letter-spacing: -.02em; font-weight: 700; color: var(--ink-soft); }
.price__unit--pre { align-self: flex-start; margin-top: .12em; font-size: .3em; }
/* long amounts (yen, lira) step down a size so they fit the column */
.price__amount--long { font-size: clamp(2.6rem, 6.2vw, 6.6rem); }
/* currency picker under the prices */
.currency { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: clamp(20px, 3vh, 32px); }
.currency__label { margin-right: 8px; font: 600 12px/1 var(--f-display); letter-spacing: .06em; color: var(--muted); }
.currency button {
  border: 0; cursor: pointer; padding: 7px 11px; border-radius: 999px; background: none;
  font: 700 12px/1 var(--f-display); letter-spacing: .06em; color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--line); transition: background-color .3s, color .3s, box-shadow .3s;
}
.currency button:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(43, 36, 30, .3); }
.currency button[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.price--care .price__amount { color: var(--accent); }
.price__example { margin: 18px 0 28px; font-weight: 500; color: var(--ink); }
.price__list { display: grid; gap: 10px; color: var(--ink-soft); font-size: 15px; }
.price__list li { display: flex; gap: 12px; align-items: baseline; }
.price__list li::before { content: ""; flex: none; width: 6px; height: 6px; background: currentColor; opacity: .5; transform: translateY(-2px); }

/* odometer digits */
.odo { display: inline-flex; }
.odo > * + * { margin-left: -.02em; }
.odo { font-variant-numeric: proportional-nums; }
/* each digit is a window onto a rolling column: clipped top and bottom only, since the tight letter-spacing
   makes the window narrower than the glyph; a little extra height (taken back with negative margins) keeps tall glyphs whole */
.odo__d { position: relative; display: inline-block; height: 1.1em; line-height: 1.1; margin-block: -.1em; clip-path: inset(0 -.3em); }
.odo__size { visibility: hidden; }
.odo__col { position: absolute; left: 50%; top: 0; display: flex; flex-direction: column; align-items: center; translate: -50% 0; will-change: transform; }
.odo__col span { height: 1.1em; line-height: 1.1; }

.note {
  display: grid; grid-template-columns: auto 1fr; gap: 20px;
  margin-top: clamp(36px, 6vh, 64px); max-width: 760px;
}
.note__mark { font: 800 56px/.7 var(--f-display); color: var(--coral); }
.note p { color: var(--ink-soft); }
.note strong { color: var(--ink); font-weight: 600; }

.offer__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: clamp(36px, 6vh, 64px); }
.offer__small { font-size: 14px; color: var(--muted); }

.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }


/* ───────────────────────── Responsive ───────────────────────── */
@media (max-width: 900px) {
  .services { grid-template-columns: 1fr; gap: 0; }
  .card { min-height: 0; padding: 12px 16px; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; border-radius: 0; }
  .card:first-child { border-radius: 14px 14px 0 0; }
  .card:last-child { border-radius: 0 0 14px 14px; }
  .card__top { grid-row: 1 / 3; }
  .card__idx { display: none; }
  .card h3 { font-size: 1.1rem; }
  .card p { grid-column: 2; font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .card__foot { grid-column: 3; grid-row: 1 / 3; padding: 0; border: 0; }
  .card__foot > span:first-child { display: none; }
  .hero { top: clamp(104px, 16vh, 180px); }
  .prices { grid-template-columns: 1fr; }
  .price, .price--care { padding-left: 0; padding-right: 0; border-left: 0; }
  .offer__intro { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 720px) {
  .menu__toggle { display: block; }
  .menu__list {
    position: absolute; right: 0; top: calc(100% + 8px); background: var(--ink);
    flex-direction: column; border-radius: 18px; padding: 8px; min-width: 160px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .3s, transform .3s var(--ease), visibility .3s;
  }
  .menu.is-open .menu__list { opacity: 1; visibility: visible; transform: none; }
  .menu__list a { padding: 12px 14px; }
  .logo__svg { height: 28px; }
}
@media (max-height: 640px) and (max-width: 900px) {
  .card p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stamp svg, .footer__pulse, .packet { animation: none; }
  .flip__word { --fill: 100%; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ───────────────────────── Shared ───────────────────────── */
.section-title {
  font: 800 clamp(2.2rem, 4.6vw, 4.6rem)/1 var(--f-display);
  letter-spacing: -.055em;
}
.section-title em { font-style: normal; color: var(--accent); }
.link-arrow {
  display: inline-flex; gap: .5em; align-items: center;
  font: 700 15px/1 var(--f-display); letter-spacing: -.02em;
  padding-bottom: 6px; border-bottom: 1.5px solid currentColor;
  transition: gap .4s var(--ease), color .3s;
}
.link-arrow:hover { gap: .9em; color: var(--accent); }
.link-arrow--light:hover { color: var(--coral); }
.case__tags { font-size: 13px; color: var(--muted); }

/* ───────────────────────── Horizon divider ───────────────────────── */
.horizon { position: relative; height: clamp(72px, 11vh, 120px); color: var(--ink); }
.horizon svg { display: none; }
/* a hairline that draws itself from the left, with a coral pixel riding its tip */
.horizon::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: currentColor; opacity: .2; transform-origin: 0 50%; transform: scaleX(var(--draw, 1));
}
.horizon--light { color: var(--paper); }
.horizon--light::before { opacity: .22; }
.horizon--slim { height: clamp(44px, 7vh, 72px); }
.horizon--gap { margin-top: clamp(48px, 8vh, 96px); }

/* ───────────────────────── Cases ───────────────────────── */
.case-hero { position: relative; height: 280vh; height: 280svh; }
.case-hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.case-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.case-hero__grid {
  position: relative; height: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  column-gap: clamp(24px, 4vw, 64px); row-gap: clamp(24px, 4vh, 44px);
  padding-block: clamp(90px, 13vh, 130px) clamp(28px, 6vh, 64px);
}
.case-hero__head { align-self: end; }
.case-hero__head .eyebrow { margin-bottom: clamp(14px, 2vh, 22px); }
.case-hero__info {
  align-self: end; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px clamp(20px, 3vw, 44px);
  padding-left: clamp(0px, 2vw, 32px); border-left: 1px solid var(--line);
}
.case-hero__name { display: grid; gap: 10px; align-content: start; }
.case-hero__about { display: grid; gap: 10px; justify-items: start; max-width: 36ch; }
.case-hero__media { grid-column: 1 / -1; min-height: 0; border-radius: var(--radius); }
.case__name { font: 800 clamp(1.8rem, 2.8vw, 2.8rem)/1 var(--f-display); letter-spacing: -.05em; }
.case__desc { color: var(--ink-soft); }
.case-hero__about .link-arrow { margin-top: 4px; }

/* travelling pixels live above everything except the nav */
.travel { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }

.work {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px);
  padding: clamp(60px, 10vh, 120px) 0 clamp(80px, 14vh, 160px);
}
.work__item { display: grid; gap: 18px; align-content: start; }
.work__item--a { grid-column: 1 / span 5; }
.work__item--b { grid-column: 7 / span 6; margin-top: clamp(80px, 22vh, 240px); }
.work__item--c { grid-column: 2 / span 7; margin-top: clamp(40px, 8vh, 100px); }
.work__item--a .work__media { aspect-ratio: 4 / 5; }
.work__item--b .work__media { aspect-ratio: 4 / 3; }
.work__item--c .work__media { aspect-ratio: 16 / 9; }
.work__media { position: relative; overflow: hidden; border-radius: var(--radius); clip-path: inset(18% 12% 18% 12% round var(--radius)); transition: clip-path 1.4s var(--ease); background: var(--paper-2); }
.work__item.is-in .work__media { clip-path: inset(0 0 0 0 round var(--radius)); }
.work__media img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; will-change: transform; transition: scale 1.2s var(--ease); }
.work__item:hover .work__media img { scale: 1.04; }
.work__meta { display: grid; row-gap: 4px; }
.work__meta h3 { font: 800 clamp(1.5rem, 2.2vw, 2.1rem)/1.05 var(--f-display); letter-spacing: -.045em; }
.work__meta p { color: var(--ink-soft); }
.work__meta h3 { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .6s var(--ease); justify-self: start; }
.work__item:hover h3 { background-size: 100% 2px; }
.work__all {
  grid-column: 10 / span 3; align-self: center; justify-self: center;
  position: relative; width: clamp(170px, 16vw, 230px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center;
  background: var(--ink); color: var(--paper); isolation: isolate; overflow: hidden;
  transition: scale .6s var(--ease); will-change: transform;
}
.work__all::before {   /* coral fills up from the bottom on hover */
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--coral);
  translate: 0 101%; transition: translate .6s var(--ease); border-radius: inherit;
}
.work__all:hover { scale: 1.05; }
.work__all:hover::before { translate: 0 0; }
.work__all-label { font: 800 clamp(1.15rem, 1.6vw, 1.5rem)/1.05 var(--f-display); letter-spacing: -.04em; }
.work__all-count { font-size: 12px; opacity: .65; }
.work__all-arrow { font: 700 22px/1 var(--f-display); margin-top: 6px; transition: translate .5s var(--ease); }
.work__all:hover .work__all-arrow { translate: 6px 0; }

/* ───────────────────────── Dither transition ───────────────────────── */
.dither { position: relative; height: 300vh; height: 300svh; }
.dither__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.dither__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dither__text {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  font: 800 clamp(2.8rem, 9vw, 10rem)/.92 var(--f-display); letter-spacing: -.06em;
  color: #fff; mix-blend-mode: difference;
}
.dither__text span { display: block; will-change: transform; }
.dither__note {
  position: absolute; left: 0; right: 0; bottom: 20vh; text-align: center;
  font: 500 clamp(14px, 1.3vw, 18px)/1 var(--f-display); letter-spacing: .02em;
  color: #fff; mix-blend-mode: difference;
}
.dither__note i { font: 400 1.4em/1 var(--f-script); }

/* ───────────────────────── Birkly (dark) ───────────────────────── */
.birkly { position: relative; isolation: isolate; background: var(--night); color: var(--paper); padding: 0 0 clamp(80px, 14vh, 160px); }
.birkly .section-title em { color: #f2635a; }
.eyebrow--light { color: rgba(238, 235, 229, .6); }
.lead--light { color: rgba(238, 235, 229, .72); }

.birkly__leaves { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.birkly__leaves canvas { position: sticky; top: 0; width: 100%; height: 100vh; height: 100svh; display: block; }

/* flexible architecture: text | a pixel birch tree that assembles | screenshots that turn with each step */
.flow { position: relative; height: 380vh; height: 380svh; }
.flow__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.flow__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; opacity: calc(var(--canvas-o, 1) * var(--canvas-base, 1)); }
.flow__inner {
  position: relative; z-index: 1; height: 100%;
  display: grid; grid-template-rows: minmax(0, 1fr);
  /* room for the pinned intro above (its height is measured in JS) */
  padding-top: calc(var(--head-h, 220px) + clamp(8px, 2vh, 24px)); padding-bottom: clamp(12px, 3vh, 32px);
}
/* the section intro: pinned above the tree scene, it runs on into the AI part and fades before meeting it */
.birkly__pin {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2; pointer-events: none;
  height: calc(var(--pin-h, 400vh));
}
.flow__head {
  position: sticky; top: 0; pointer-events: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: end;
  padding-top: clamp(84px, 12vh, 124px);
  will-change: opacity, transform;
}
.flow__head .section-title { font-size: clamp(2rem, 3.6vw, 3.6rem); }
.flow__head .lead { font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.5; max-width: 52ch; }
.flow__grid {
  min-height: 0;
  display: grid; grid-template-columns: minmax(0, 3.6fr) minmax(0, 2.6fr) minmax(0, 5.8fr); gap: clamp(20px, 3vw, 48px); align-items: center;
}
.flow__tree { height: 88%; align-self: center; }
.flow__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(20px, 4vh, 40px); }
.flow__steps li { position: relative; padding-left: 26px; opacity: .3; transition: opacity .6s var(--ease); }
/* a small pixel leaf marks the active step */
.flow__steps li::before {
  content: ""; position: absolute; left: 0; top: .35em; width: 14px; height: 10px;
  background:
    linear-gradient(#dec470 0 0) 4px 0 / 6px 2px no-repeat,
    linear-gradient(#dec470 0 0) 2px 2px / 10px 2px no-repeat,
    linear-gradient(#dec470 0 0) 0 4px / 14px 2px no-repeat,
    linear-gradient(#dec470 0 0) 2px 6px / 10px 2px no-repeat,
    linear-gradient(#dec470 0 0) 4px 8px / 4px 2px no-repeat;
  transform-origin: 0 50%; scale: 0; rotate: -25deg; transition: scale .6s var(--ease), rotate .6s var(--ease);
}
.flow__steps li.is-active { opacity: 1; }
.flow__steps li.is-active::before { scale: 1; rotate: -10deg; }
.flow__steps h3 { font: 800 clamp(1.3rem, 1.9vw, 1.85rem)/1.08 var(--f-display); letter-spacing: -.045em; margin-bottom: 10px; }
.flow__steps p { font-size: 15px; line-height: 1.55; color: rgba(238, 235, 229, .68); max-width: 36ch; }

/* the screenshot window takes a different angle for each step */
.flow__screen {
  margin: 0; position: relative; border-radius: 14px; overflow: hidden; background: #eef0eb;
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
  transform-origin: 50% 50%;
  transition: transform 1.3s var(--ease), box-shadow 1.3s var(--ease);
}
.flow__screen[data-step="0"] { transform: perspective(1500px) rotateY(-20deg) rotateX(8deg) rotateZ(1deg) scale(.94); }
.flow__screen[data-step="1"] { transform: perspective(1500px) rotateY(14deg) rotateX(-5deg) rotateZ(-2deg) scale(.97); box-shadow: -40px 50px 100px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06); }
.flow__screen[data-step="2"] { transform: perspective(1500px) rotateY(0) rotateX(0) scale(1.02); }
.flow__bar { display: flex; gap: 6px; padding: 11px 14px; background: #e4e6e0; }
.flow__bar i { width: 10px; height: 10px; border-radius: 50%; background: #cfd2ca; }
.flow__shots { position: relative; aspect-ratio: 1.66; overflow: hidden; }
.flow__shots img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block;
  clip-path: inset(100% 0 0 0);   /* the pixel-stepped reveal is driven from JS */
}
.flow__shots img:first-child { clip-path: none; }
.flow__dots { position: absolute; right: 16px; bottom: 14px; display: flex; gap: 6px; }
.flow__dots i { width: 22px; height: 4px; border-radius: 2px; background: rgba(28, 23, 19, .18); transition: background-color .4s, width .5s var(--ease); }
.flow__dots i.is-on { width: 36px; background: var(--coral); }

/* AI layers: a stack of plates that pulls apart as you scroll */
.ai {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center;
  padding: clamp(48px, 10vh, 120px) 0 clamp(24px, 4vh, 48px);
}
.ai__title { font: 800 clamp(1.8rem, 3.2vw, 3.1rem)/1.02 var(--f-display); letter-spacing: -.05em; margin-bottom: clamp(20px, 3vh, 32px); }
.ai__list { display: grid; gap: 16px; }
.ai__list li { padding-left: 22px; position: relative; color: rgba(238, 235, 229, .68); font-size: 15px; line-height: 1.55; max-width: 48ch; }
.ai__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; background: var(--coral); }
.ai__list b { color: var(--paper); font-weight: 600; }
.ai__stack { --gap: 46px; position: relative; height: clamp(380px, 52vh, 520px); }
.layer { position: absolute; left: 0; right: 0; top: 50%; height: 0; translate: 0 calc((1.5 - var(--i)) * var(--gap)); }
.layer__plate {
  position: absolute; left: 34%; top: 0; width: clamp(150px, 15vw, 210px); aspect-ratio: 1;
  transform: translate(-50%, -50%) rotateX(60deg) rotateZ(-45deg);
  border: 1px solid rgba(238, 235, 229, .35); border-radius: 10px;
  background: rgba(238, 235, 229, .05);
}
.layer:nth-of-type(1) .layer__plate { background: rgba(238, 235, 229, .9); border-color: transparent; }
.layer:nth-of-type(2) .layer__plate { background: rgba(242, 99, 90, .2); border-color: rgba(242, 99, 90, .7); }
.layer:nth-of-type(3) .layer__plate {
  background: radial-gradient(circle, rgba(222, 196, 112, .9) 1.2px, transparent 1.6px) 0 0 / 10px 10px, rgba(222, 196, 112, .15);
  border-color: #dec470; box-shadow: 0 0 40px rgba(222, 196, 112, .3);
}
.layer:nth-of-type(4) .layer__plate { border-style: dashed; }
.layer__label {
  position: absolute; left: 58%; top: 0; translate: calc((1 - var(--spread, 1)) * 16px) -50%; opacity: var(--spread, 1);
  display: grid; gap: 2px; padding-left: 18px; border-left: 1px solid rgba(238, 235, 229, .25);
}
.layer__label b { font: 700 15px/1.2 var(--f-display); letter-spacing: -.02em; color: var(--paper); }
.layer__label span { font-size: 12.5px; color: rgba(238, 235, 229, .55); }
.packet {
  position: absolute; left: 34%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--coral);
  animation: packet 3.9s cubic-bezier(.45, 0, .55, 1) infinite; animation-delay: var(--d);
}
.packet:nth-of-type(2) { margin-left: -24px; }
.packet:nth-of-type(3) { margin-left: 18px; background: var(--paper); }
@keyframes packet {
  0%   { translate: 0 calc(var(--gap) * 1.5); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { translate: 0 calc(var(--gap) * -1.5); opacity: 0; }
}

.facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  margin-top: 8px;
}
.facts li { display: grid; gap: 8px; padding: 28px 24px 0 0; }
.facts li + li { padding-left: 24px; border-left: 1px solid var(--line-light); }
.facts b { font: 700 18px/1.2 var(--f-display); letter-spacing: -.03em; }
.facts span { font-size: 14px; color: rgba(238, 235, 229, .6); }

.plugins { margin-top: clamp(72px, 12vh, 140px); }
.plugins__label { font: 600 12px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: rgba(238, 235, 229, .5); margin-bottom: 24px; }
.plugins__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 40px; }
.plugins__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.plugin {
  display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: 14px;
  background: var(--night-2); border: 1px solid var(--line-light);
  transition: background-color .4s, border-color .4s, translate .5s var(--ease);
}
.plugin:hover { background: #2f2721; border-color: rgba(238, 235, 229, .3); translate: 0 -4px; }
.plugin b { font: 700 18px/1.1 var(--f-display); letter-spacing: -.03em; margin-top: 16px; }
.plugin span:not(.pix) { font-size: 13px; color: rgba(238, 235, 229, .6); }
.pix { width: 40px; height: 40px; display: block; }
.pix rect { fill: var(--coral); transition: opacity .3s, transform .5s var(--ease); transform-box: fill-box; transform-origin: center; }
.plugin:nth-child(2) .pix rect { fill: #b9c2a6; }
.plugin:nth-child(3) .pix rect { fill: #d7c8a6; }
.plugin:nth-child(4) .pix rect { fill: #9fb6c7; }
.plugin:nth-child(5) .pix rect { fill: #a7b36a; }

/* ───────────────────────── Contact & footer ───────────────────────── */
.contact { background: var(--night); color: var(--paper); padding-bottom: clamp(80px, 14vh, 160px); }
.contact__kicker { display: flex; align-items: center; gap: 10px; padding-top: clamp(40px, 8vh, 100px); margin-bottom: clamp(18px, 3vh, 30px); font: 600 13px/1 var(--f-display); letter-spacing: .04em; color: rgba(238, 235, 229, .55); }
.contact__kicker span { width: 7px; height: 7px; background: var(--coral); }
.contact__title { font: 800 clamp(3rem, 9vw, 9.5rem)/.92 var(--f-display); letter-spacing: -.065em; }
.contact__title em { font-style: normal; color: var(--coral); }
/* a pixel cursor, blinking after the question */
.contact__cursor { display: inline-block; width: .14em; height: .14em; margin-left: .08em; background: var(--coral); vertical-align: baseline; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.contact__row {
  display: grid; grid-template-columns: minmax(0, 1.3fr) auto auto; gap: clamp(24px, 4vw, 64px); align-items: end;
  margin-top: clamp(40px, 7vh, 80px); padding-top: clamp(24px, 3.5vh, 36px); border-top: 1px solid var(--line-light);
}
.contact__lead { max-width: 46ch; font: 500 clamp(1rem, 1.25vw, 1.2rem)/1.5 var(--f-display); letter-spacing: -.015em; color: rgba(238, 235, 229, .72); }
.contact__form { font: 600 14px/1 var(--f-display); color: rgba(238, 235, 229, .6); padding-bottom: 10px; transition: color .3s; white-space: nowrap; }
.contact__form:hover { color: var(--coral); }
.contact__mail {
  justify-self: start; font: 700 clamp(1.1rem, 1.8vw, 1.6rem)/1.2 var(--f-display); letter-spacing: -.03em;
  padding-bottom: 8px; background: linear-gradient(var(--coral), var(--coral)) 0 100% / 100% 2px no-repeat;
  transition: background-size .6s var(--ease), color .3s; word-break: break-all;
}
.contact__mail:hover { color: var(--coral); background-size: 0 2px; background-position: 100% 100%; }

.footer { background: var(--night); color: rgba(238, 235, 229, .6); font-size: 14px; padding: 0 0 28px; overflow: hidden; }
.footer a { transition: color .3s; }
.footer a:hover { color: var(--coral); }
.footer__grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px;
  padding: clamp(28px, 5vh, 56px) 0 clamp(24px, 4vh, 48px);
}
.footer__col { display: grid; gap: 10px; align-content: start; justify-items: start; }
.footer__lead { font: 600 clamp(1.15rem, 1.6vw, 1.5rem)/1.3 var(--f-display); letter-spacing: -.03em; color: var(--paper); max-width: 22ch; }
.footer__lead em { font: 400 1.05em/1 var(--f-script); color: var(--coral); white-space: nowrap; }
.footer__label { font: 600 11px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: rgba(238, 235, 229, .4); margin-bottom: 4px; }
.footer__clock { display: flex; align-items: center; gap: 10px; font: 700 clamp(1.6rem, 2.4vw, 2.2rem)/1 var(--f-display); letter-spacing: -.04em; color: var(--paper); font-variant-numeric: tabular-nums; }
.footer__pulse { width: 8px; height: 8px; background: var(--coral); animation: pulse 2s steps(2) infinite; }
@keyframes pulse { 50% { opacity: .15; } }
.footer__mark { position: relative; height: clamp(110px, 21vw, 340px); margin-top: clamp(8px, 2vh, 24px); cursor: crosshair; }
.footer__mark canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 20px; font-size: 13px; color: rgba(238, 235, 229, .45); }
.footer__legal { display: flex; gap: 20px; margin-right: auto; padding-left: clamp(0px, 3vw, 40px); }
.footer__legal a { color: rgba(238, 235, 229, .6); }
.footer__top { display: inline-flex; gap: 8px; align-items: center; color: var(--paper); font: 600 13px/1 var(--f-display); }
.footer__top span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(238, 235, 229, .3); transition: translate .5s var(--ease), background-color .3s, border-color .3s; }
.footer__top:hover span { translate: 0 -4px; background: var(--coral); border-color: var(--coral); color: #fff; }
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__col--lead { grid-column: 1 / -1; }
}
.logo--light { color: var(--paper); }

/* nav over dark sections */
.nav.is-dark .logo { color: var(--paper); }
.nav.is-dark .menu__bar, .nav.is-dark .menu__list { background: var(--paper); }
.nav.is-dark .menu__list a, .nav.is-dark .menu__toggle, .nav.is-dark .menu__home { color: var(--ink); }
.nav.is-dark .menu__list a:hover { background: rgba(0, 0, 0, .06); }
.nav .logo, .nav .menu__list, .nav .menu__list a { transition: color .4s, background-color .4s; }

/* ───────────────────────── Responsive (new sections) ───────────────────────── */
@media (max-width: 1000px) {
  .plugins__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 900px) {
  .case-hero__grid { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr); row-gap: 18px; padding-top: 92px; }
  .case-hero__head .section-title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .case-hero__info { grid-template-columns: 1fr; gap: 6px; padding-left: 0; border-left: 0; }
  .case-hero__name { grid-template-columns: auto 1fr; align-items: baseline; gap: 12px; }
  .case__name { font-size: 1.6rem; }
  .case__desc { font-size: 14px; }
  .case-hero__about .case__tags { display: none; }
  .work { grid-template-columns: 1fr; }
  .work__item--a, .work__item--b, .work__item--c { grid-column: 1; margin-top: 0; }
  .work__all { grid-column: 1; width: 100%; aspect-ratio: auto; border-radius: 999px; padding: 22px; grid-template-columns: auto auto auto; align-items: baseline; gap: 12px; justify-content: center; }
  .work__all-arrow { margin: 0; }
  .flow { height: 300vh; height: 300svh; }
  .flow__head { grid-template-columns: 1fr; gap: 10px; }
  .flow__head .section-title { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .flow__head .lead { font-size: 14px; }
  .flow__head { padding-top: 84px; }
  .flow__grid { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: 18px; }
  .flow__steps p { font-size: 14px; }
  .flow__tree { display: none; }
  .flow__screen { order: -1; }
  .flow__screen[data-step] { transform: perspective(1500px) rotateY(0) rotateX(0) scale(1); }
  .flow__steps li:not(.is-active) { display: none; }
  .flow__canvas { --canvas-base: .35; }
  .ai { grid-template-columns: 1fr; }
  .layer__plate, .packet { left: 26%; }
  .layer__label { left: 52%; }
  .contact__row { grid-template-columns: 1fr; justify-items: start; gap: 20px; }
}
@media (max-width: 560px) {
  .plugins__list, .facts { grid-template-columns: 1fr; }
  .facts li, .facts li + li { padding-left: 0; border-left: 0; padding-right: 0; }
  .facts li { padding-bottom: 20px; }
}

/* contact title + pixel icon entrance */
.contact__title [data-up] { transform: translateY(105%); transition: transform 1.3s var(--ease); }
.contact__title .ln + .ln [data-up] { transition-delay: .12s; }
.contact__title.is-in [data-up] { transform: none; }
.plugin:hover .pix rect { animation: pixIn .5s var(--ease) both; animation-delay: var(--d); }
@keyframes pixIn { from { opacity: 0; transform: scale(0); } }
@media (prefers-reduced-motion: reduce) {
  .contact__title [data-up] { transform: none; transition: none; }
  .contact__cursor { animation: none; }
  .work__media { clip-path: none; transition: none; }
  .plugin:hover .pix rect { animation: none; }
}

/* ═════════════════════════ Service page ═════════════════════════ */
.menu__list a[aria-current="page"] { background: rgba(255, 255, 255, .14); }
.nav.is-dark .menu__list a[aria-current="page"] { background: rgba(0, 0, 0, .08); }

/* hero: one big sentence, then the services as a large hairline list */
.sx-hero { position: relative; padding: clamp(140px, 22vh, 220px) 0 clamp(60px, 10vh, 120px); }
.sx-hero__title { font: 800 clamp(3rem, 8.4vw, 9.6rem)/.9 var(--f-display); letter-spacing: -.065em; }
.sx-hero__title em { font-style: normal; color: var(--accent); }
.sx-hero__meta {
  display: grid; justify-items: start; gap: clamp(20px, 3vh, 28px);
  margin-top: clamp(32px, 6vh, 64px);
}
.sx-hero__lead { font: 500 clamp(1.05rem, 1.35vw, 1.3rem)/1.45 var(--f-display); letter-spacing: -.02em; color: var(--ink-soft); max-width: 40ch; }

.sx-list { list-style: none; padding: 0; margin-top: clamp(72px, 14vh, 160px); border-bottom: 1px solid var(--line); }
.sx-list li { border-top: 1px solid var(--line); }
.sx-list a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 40px; gap: 24px; align-items: center;
  padding: clamp(14px, 2.4vh, 26px) 0;
}
.sx-list__t {
  font: 800 clamp(2rem, 5vw, 5.4rem)/1 var(--f-display); letter-spacing: -.055em;
  transition: translate .6s var(--ease), color .4s;
}
.sx-list__d { font: 500 15px/1.3 var(--f-display); color: var(--ink-soft); text-align: right; transition: color .4s; }
.sx-list__go { justify-self: end; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; font-size: 14px; transition: background-color .3s, color .3s, border-color .3s, rotate .5s var(--ease); }
.sx-list a:hover .sx-list__t { translate: 18px 0; color: var(--accent); }
.sx-list a:hover .sx-list__go { background: var(--ink); border-color: var(--ink); color: var(--paper); rotate: -90deg; }
.sx-list:hover a:not(:hover) .sx-list__t, .sx-list:hover a:not(:hover) .sx-list__d { color: rgba(43, 36, 30, .28); }
/* a pixelated preview that follows the cursor and sharpens */
.sx-peek {
  position: fixed; left: 0; top: 0; z-index: 20; width: 340px; height: 240px; pointer-events: none;
  opacity: 0; scale: .6; transition: opacity .35s, scale .5s var(--ease); will-change: transform;
}
.sx-peek.is-on { opacity: 1; scale: 1; }

/* services in detail: a horizontal journey */
.sx-h { position: relative; height: 400vh; }
.sx-h__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.sx-h__track { display: flex; align-items: stretch; gap: clamp(32px, 5vw, 88px); padding: 0 max(var(--gutter), (100vw - 1200px) / 2); will-change: transform; }
.sx-panel {
  flex: none; width: min(1120px, 84vw); height: min(640px, 72vh);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center;
}
.sx-panel__media { position: relative; height: 100%; overflow: hidden; background: var(--paper-2); border-radius: var(--radius); }
.sx-panel__media canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sx-panel__n { font: 600 12px/1 var(--f-display); letter-spacing: .12em; color: var(--muted); margin-bottom: clamp(16px, 3vh, 28px); }
.sx-panel__title { font: 800 clamp(2.6rem, 5vw, 5.4rem)/.92 var(--f-display); letter-spacing: -.06em; }
.sx-panel__claim { margin: clamp(14px, 2vh, 22px) 0; font: 700 clamp(1.1rem, 1.5vw, 1.4rem)/1.3 var(--f-display); letter-spacing: -.025em; color: var(--accent); }
.sx-panel__text { color: var(--ink-soft); font-size: 16px; line-height: 1.6; max-width: 44ch; }
.sx-panel__list { display: grid; gap: 10px; margin-top: clamp(20px, 3vh, 32px); padding-top: clamp(16px, 2.4vh, 24px); border-top: 1px solid var(--line); }
.sx-panel__list li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; color: var(--ink); }
.sx-panel__list li::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--coral); transform: translateY(-2px); }
.sx-end {
  flex: none; width: min(1120px, 84vw); height: min(640px, 72vh); align-self: center;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center;
  padding: clamp(32px, 5vw, 72px); background: var(--ink); color: var(--paper);
  border-radius: var(--radius);   /* the same rounding as the frontpage's intro frame */
}
.sx-end > * { opacity: var(--content-o, 1); }
.sx-h__fill { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 3; pointer-events: none; opacity: 0; background: var(--ink); }
.sx-end__title { font: 800 clamp(2.6rem, 5vw, 5.4rem)/.92 var(--f-display); letter-spacing: -.06em; }
.sx-end__title em { font-style: normal; color: var(--coral); }
.sx-end__side { display: grid; gap: 24px; justify-items: start; }
.sx-end__text { color: rgba(238, 235, 229, .72); font-size: 17px; line-height: 1.55; max-width: 36ch; }
.sx-end .btn--dark { background: var(--paper); color: var(--ink); }
.sx-h__bar { position: absolute; left: max(var(--gutter), (100vw - 1200px) / 2); right: max(var(--gutter), (100vw - 1200px) / 2); bottom: clamp(24px, 6vh, 56px); height: 1px; background: var(--line); }
.sx-h__bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; scale: 0 1; }
.sx-h__bar i::after { content: ""; position: absolute; right: -4px; top: -4px; width: 9px; height: 9px; background: var(--coral); scale: calc(1 / var(--bar, 1)) 1; }

/* process: a botanical plate — one birch grows, the steps are annotations pinned to it */
.trip { position: relative; height: 640vh; height: 640svh; background: var(--night); color: var(--paper); }
.trip__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.trip__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; }   /* text stays above the tree */
.trip__grid {
  position: relative; z-index: 1; height: 100%;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(8px, 2vh, 20px);
  padding-top: clamp(92px, 13vh, 130px); padding-bottom: clamp(20px, 4vh, 40px);
}
.trip__title em { color: #f2635a; }
.trip__plate { position: relative; }
/* the current step: a fixed, large card on the left; the tree grows on the right */
.trip__panel { position: absolute; left: 0; top: 50%; translate: 0 -50%; width: min(440px, 38%); }
.trip__panel .trip__progress { transition: opacity .5s; }
.trip__panel.is-waiting .trip__progress { opacity: 0; }
.trip__progress { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(18px, 3vh, 28px); }
.trip__count { font: 600 12px/1 var(--f-display); letter-spacing: .12em; color: rgba(238, 235, 229, .6); font-variant-numeric: tabular-nums; }
.trip__dots { display: flex; gap: 6px; }
.trip__dots i { width: 8px; height: 8px; background: rgba(238, 235, 229, .18); transition: background-color .4s, scale .4s var(--ease); }
.trip__dots i.is-past { background: rgba(238, 235, 229, .55); }
.trip__dots i.is-on { background: var(--coral); scale: 1.3; }
.trip__notes { list-style: none; margin: 0; padding: 0; position: relative; min-height: 15em; }
.trip__note { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; translate: 0 26px; pointer-events: none; transition: opacity .5s var(--ease), translate .7s var(--ease); }
.trip__note.is-seen { opacity: 0; translate: 0 -26px; }
.trip__note.is-on { opacity: 1; translate: 0 0; pointer-events: auto; transition-delay: .12s; }
.trip__n { display: none; }
.trip__note h3 { font: 800 clamp(2.4rem, 4.4vw, 4.4rem)/.95 var(--f-display); letter-spacing: -.055em; }
.trip__note p { margin-top: clamp(14px, 2vh, 20px); font: 500 clamp(1.05rem, 1.35vw, 1.25rem)/1.5 var(--f-display); letter-spacing: -.015em; color: rgba(238, 235, 229, .78); max-width: 30ch; }
.trip__cta { margin-top: clamp(20px, 3vh, 32px); }
.trip__caption { justify-self: end; font-size: 12px; letter-spacing: .02em; color: rgba(238, 235, 229, .45); }
.trip__caption i { font-family: var(--f-script); font-style: normal; font-size: 1.15em; color: rgba(238, 235, 229, .7); }

/* faq */
.faq { padding: clamp(80px, 14vh, 160px) 0; }
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.faq__head { position: sticky; top: clamp(96px, 16vh, 150px); }
.faq__sub { margin-top: 18px; color: var(--ink-soft); max-width: 32ch; }
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: clamp(18px, 3vh, 26px) 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: 700 clamp(1.1rem, 1.6vw, 1.45rem)/1.25 var(--f-display); letter-spacing: -.03em; color: var(--ink);
}
.faq__q:hover { color: var(--accent); }
.faq__plus { position: relative; flex: none; width: 14px; height: 14px; }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: currentColor; transition: rotate .4s var(--ease); }
.faq__plus::after { rotate: 90deg; }
.faq__q[aria-expanded="true"] .faq__plus::after { rotate: 0deg; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: clamp(18px, 3vh, 26px); color: var(--ink-soft); max-width: 60ch; }
.faq__q[aria-expanded="true"] + .faq__a, .faq__item.is-open .faq__a { grid-template-rows: 1fr; }

@media (max-width: 900px) {
  .sx-list a { grid-template-columns: minmax(0, 1fr) 36px; cursor: pointer; }
  .sx-list__d { display: none; }
  .sx-peek { display: none; }
  .sx-h { height: auto !important; }
  .sx-h__stage { position: relative; height: auto; overflow: visible; display: block; }
  .sx-h__track { flex-direction: column; transform: none !important; gap: 72px; padding: 24px var(--gutter) 72px; }
  .sx-panel { width: 100%; height: auto; grid-template-columns: 1fr; gap: 24px; }
  .sx-panel__media { height: auto; aspect-ratio: 4 / 3; }
  .sx-end { width: 100%; height: auto; grid-template-columns: 1fr; }
  .sx-h__bar { display: none; }
  .faq__grid { grid-template-columns: 1fr; }
  .faq__head { position: static; }
  .trip { height: 560vh; height: 560svh; }
  .trip__title { font-size: 1.8rem; }
  .trip__panel { top: auto; bottom: 0; translate: 0 0; width: 100%; }
  .trip__notes { min-height: 9.5em; }
  .trip__note h3 { font-size: 2rem; }
  .trip__note p { font-size: 15px; }
  .trip__caption { justify-self: start; }
}

/* ═════════════════════════ Page transition ═════════════════════════ */
html.is-arriving body::after { content: ""; position: fixed; inset: 0; z-index: 10000; background: var(--night); }
.pt { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 10001; pointer-events: none; display: none; }
.pt.is-on { display: block; pointer-events: auto; }
site-header, site-contact, site-footer { display: contents; }

/* ═════════════════════════ Cases overview ═════════════════════════ */
.cx-hero { padding: clamp(140px, 22vh, 220px) 0 clamp(48px, 8vh, 96px); }
.cx-hero__title { font: 800 clamp(3.2rem, 10vw, 11rem)/.86 var(--f-display); letter-spacing: -.07em; }
.cx-hero__title em { font-style: normal; color: var(--accent); }
.cx-hero__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px; align-items: end; margin-top: clamp(32px, 6vh, 64px); }
.cx-hero__lead { font: 500 clamp(1.05rem, 1.35vw, 1.3rem)/1.45 var(--f-display); letter-spacing: -.02em; color: var(--ink-soft); max-width: 40ch; }
.cx-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-filter button {
  border: 1px solid var(--line); background: none; cursor: pointer; padding: 9px 14px; border-radius: 999px;
  font: 600 13px/1 var(--f-display); color: var(--ink-soft); transition: background-color .3s, color .3s, border-color .3s;
}
.cx-filter button:hover { border-color: var(--ink); color: var(--ink); }
.cx-filter button.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.cx-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(48px, 8vh, 96px) clamp(24px, 3vw, 48px);
  padding-bottom: clamp(80px, 14vh, 160px);
}
.cx-card { display: grid; gap: 18px; align-content: start; transition: opacity .6s var(--ease); }
.cx-card--wide { grid-column: 1 / -1; }
.cx-card--tall { grid-column: 1 / span 5; }
.cx-card--land { grid-column: 7 / span 6; margin-top: clamp(80px, 20vh, 240px); }
.cx-card:nth-child(4) { grid-column: 2 / span 10; }
.cx-card__media { display: block; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); }
.cx-card--wide .cx-card__media { aspect-ratio: 16 / 7.5; }
.cx-card--tall .cx-card__media { aspect-ratio: 4 / 5; }
.cx-card--land .cx-card__media { aspect-ratio: 4 / 3; }
.cx-card__media canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.cx-card__meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: baseline; }
.cx-card__name {
  font: 800 clamp(1.8rem, 3.2vw, 3.2rem)/1 var(--f-display); letter-spacing: -.055em; justify-self: start;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .6s var(--ease);
}
.cx-card:hover .cx-card__name { background-size: 100% 2px; }
.cx-card__kind { grid-column: 1; color: var(--ink-soft); }
.cx-card__tags { grid-column: 2; grid-row: 1; font: 600 12px/1 var(--f-display); letter-spacing: .04em; color: var(--muted); text-align: right; }
.cx-card.is-dim { opacity: .28; pointer-events: none; }

.cx-next { display: grid; justify-items: start; gap: 28px; padding: clamp(40px, 8vh, 96px) 0 clamp(96px, 16vh, 180px); border-top: 1px solid var(--line); }
.cx-next__title { font: 800 clamp(2.4rem, 6vw, 6.4rem)/.92 var(--f-display); letter-spacing: -.06em; }
.cx-next__title em { font-style: normal; color: var(--accent); }

/* ═════════════════════════ Case detail ═════════════════════════ */
.cd-hero { position: relative; height: 240vh; height: 240svh; }
.cd-hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.cd-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cd-hero__text { position: relative; z-index: 1; padding-top: clamp(130px, 20vh, 200px); will-change: transform, opacity; }
.cd-back { display: inline-flex; gap: 10px; align-items: center; font: 600 14px/1 var(--f-display); color: var(--ink-soft); margin-bottom: clamp(20px, 3vh, 32px); transition: gap .4s var(--ease), color .3s; }
.cd-back:hover { gap: 16px; color: var(--ink); }
.cd-title { font: 800 clamp(3rem, 9vw, 10rem)/.88 var(--f-display); letter-spacing: -.07em; }
.cd-kind { margin-top: clamp(14px, 2vh, 22px); font: 500 clamp(1.1rem, 1.6vw, 1.5rem)/1.3 var(--f-display); letter-spacing: -.02em; color: var(--ink-soft); }

.cd-story { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 112px); align-items: start; padding: clamp(80px, 14vh, 160px) 0 clamp(48px, 8vh, 96px); }
.cd-lead { font: 600 clamp(1.5rem, 2.6vw, 2.5rem)/1.22 var(--f-display); letter-spacing: -.035em; }
.cd-facts { margin: 0; display: grid; gap: 24px; padding-top: 10px; }
.cd-facts dt { font: 600 11px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.cd-facts dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cd-facts dd span { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; font: 600 13px/1 var(--f-display); color: var(--ink-soft); }

.cd-facts__link { font: 600 14px/1 var(--f-display); color: var(--ink); padding-bottom: 4px; border-bottom: 1.5px solid var(--coral); transition: color .3s; }
.cd-facts__link:hover { color: var(--accent); }

/* the story: one section per chapter, the heading on the left and its text on the right */
.cd-steps { padding-bottom: clamp(24px, 4vh, 48px); }
.cd-step {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(20px, 3vh, 32px) clamp(28px, 5vw, 96px); align-items: start;
  padding: clamp(32px, 6vh, 64px) 0 clamp(56px, 10vh, 112px); border-top: 1px solid var(--line);
}
.cd-step__label { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font: 600 12px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cd-step__label::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--coral); }
.cd-step__head h2 { font: 800 clamp(1.6rem, 2.6vw, 2.5rem)/1.05 var(--f-display); letter-spacing: -.045em; text-wrap: balance; }
.cd-step__body { max-width: 62ch; color: var(--ink-soft); font-size: 17px; line-height: 1.65; }
.cd-step__body > * + * { margin-top: 16px; }
.cd-step__body ul, .cd-step__body ol { list-style: none; padding: 0; display: grid; gap: 10px; }
.cd-step__body li { position: relative; padding-left: 20px; }
.cd-step__body li::before { content: ""; position: absolute; left: 0; top: .68em; width: 6px; height: 6px; background: var(--coral); }
.cd-step__body strong { color: var(--ink); font-weight: 600; }
.cd-step__body a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(196, 71, 58, .5); text-underline-offset: 3px; }
.cd-step__body code { font-size: .88em; padding: 2px 6px; border-radius: 4px; background: var(--paper-2); color: var(--ink); }
.cd-step__figure { margin: clamp(8px, 2vh, 24px) 0 0; }
.cd-step__figure--wide { grid-column: 1 / -1; }
.cd-step__figure--wide .cd-detail { aspect-ratio: 16 / 9; }
.cd-step__figure--inset { grid-column: 2; }
.cd-step__figure--inset .cd-detail { aspect-ratio: 4 / 3; }
.cd-step__figure figcaption { margin-top: 12px; font-size: 13px; color: var(--muted); }
/* the pixelated photographs that sharpen as they scroll into view (js/case.js) */
.cd-detail { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); }
.cd-detail canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.cd-quote { padding: clamp(80px, 16vh, 180px) 0; }
.cd-quote blockquote { margin: 0; }
.cd-quote p { font: 800 clamp(2.2rem, 5.4vw, 5.8rem)/1 var(--f-display); letter-spacing: -.06em; max-width: 18ch; }
.cd-quote footer { margin-top: 20px; font: 600 14px/1.3 var(--f-display); color: var(--muted); }

.cd-result { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 96px); padding: clamp(32px, 6vh, 64px) 0 clamp(96px, 16vh, 180px); border-top: 1px solid var(--line); }
.cd-result h2 { font: 800 clamp(1.4rem, 2vw, 1.9rem)/1.1 var(--f-display); letter-spacing: -.04em; }
.cd-result p { font: 600 clamp(1.3rem, 2vw, 1.9rem)/1.3 var(--f-display); letter-spacing: -.03em; color: var(--ink); max-width: 34ch; }
.cd-result .cd-result__visit { margin-top: 28px; }

/* next case: a calm row on paper, the name on the left and its photo on the right */
.cd-next {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center;
  padding: clamp(40px, 7vh, 72px) 0 clamp(80px, 14vh, 150px); border-top: 1px solid var(--line);
}
.cd-next__text { display: grid; gap: 12px; justify-items: start; }
.cd-next__label { font: 600 12px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cd-next__name { font: 800 clamp(2.6rem, 6.4vw, 6.6rem)/.92 var(--f-display); letter-spacing: -.065em; transition: color .4s; }
.cd-next:hover .cd-next__name { color: var(--accent); }
.cd-next__kind { font: 500 clamp(1rem, 1.3vw, 1.2rem)/1.35 var(--f-display); color: var(--ink-soft); }
.cd-next__go { margin-top: 10px; }
.cd-next__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); }
.cd-next__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: scale 1.2s var(--ease); }
.cd-next:hover .cd-next__canvas { scale: 1.03; }

@media (max-width: 900px) {
  .cx-hero__row { grid-template-columns: 1fr; }
  .cx-grid { grid-template-columns: 1fr; }
  .cx-card--wide, .cx-card--tall, .cx-card--land, .cx-card:nth-child(4) { grid-column: 1; margin-top: 0; }
  .cx-card--wide .cx-card__media, .cx-card--tall .cx-card__media, .cx-card--land .cx-card__media { aspect-ratio: 4 / 3; }
  .cx-card__meta { grid-template-columns: 1fr; }
  .cx-card__tags { grid-column: 1; grid-row: auto; text-align: left; }
  .cd-hero { height: 200vh; height: 200svh; }
  .cd-story, .cd-step, .cd-result { grid-template-columns: 1fr; }
  .cd-step__figure--inset { grid-column: 1; }
  .cd-step__body { font-size: 16px; }
  .cd-next { grid-template-columns: 1fr; }
}

/* ═════════════════════════ Products ═════════════════════════ */
/* a big frame like the frontpage intro, with a soft coast-light gradient; the pixel word is drawn on the canvas */
.pr-hero { height: 100vh; height: 100svh; padding: var(--frame); }
.pr-hero__frame {
  position: relative; height: 100%; overflow: hidden; border-radius: var(--radius);
  background:
    radial-gradient(60% 70% at 85% 10%, rgba(242, 99, 90, .16), transparent 70%),
    radial-gradient(70% 60% at 10% 100%, rgba(185, 194, 166, .45), transparent 70%),
    linear-gradient(170deg, #f3efe8 0%, #e6e3dc 50%, #d5dcd8 100%);
}
.pr-hero__art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pr-hero__inner { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(96px, 14vh, 140px); padding-bottom: clamp(20px, 4vh, 40px); pointer-events: none; }
.pr-hero__inner a { pointer-events: auto; }
.pr-hero__kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1 var(--f-display); letter-spacing: .02em; color: var(--ink-soft); }
.pr-hero__kicker::before { content: ""; width: 7px; height: 7px; background: var(--coral); }
/* the area the pixel word is drawn into */
.pr-hero__word { flex: 1; width: 100%; min-height: 120px; margin: clamp(12px, 3vh, 32px) 0 clamp(8px, 2vh, 20px); }
.pr-hero__title { font: 700 clamp(1.3rem, 2.2vw, 2.1rem)/1.15 var(--f-display); letter-spacing: -.035em; }
.pr-hero__plugins { list-style: none; padding: 0; margin: clamp(20px, 4vh, 40px) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pr-hero__plugins a {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 11px; border-radius: 999px;
  font: 600 13px/1 var(--f-display); color: var(--ink);
  background: rgba(246, 244, 239, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(43, 36, 30, .1); transition: background-color .3s, box-shadow .3s, translate .4s var(--ease);
}
.pr-hero__plugins a::before { content: "+"; color: var(--accent); font-weight: 700; margin-right: -3px; }
.pr-hero__plugins a:hover { background: rgba(246, 244, 239, .9); box-shadow: inset 0 0 0 1px rgba(43, 36, 30, .22); translate: 0 -2px; }
.pr-hero__plugins .pix { width: 18px; height: 18px; }
.pr-hero__plugins .pix svg { width: 100%; height: 100%; display: block; }
.pr-hero__plugins .pix rect { fill: var(--ink); }
.pr-hero__plugins a:hover .pix rect { fill: var(--coral); animation: pixIn .45s var(--ease) both; animation-delay: var(--d); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the language of the products hero, carried through: big rounded frames with soft gradients,
   centred type, and frosted glass on top */
.glass {
  background: rgba(246, 244, 239, .5); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 24px 48px -32px rgba(43, 36, 30, .35);
}
.pr-kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1 var(--f-display); letter-spacing: .02em; color: var(--ink-soft); }
.pr-kicker::before { content: ""; width: 7px; height: 7px; background: var(--coral); }
.pr-heading { margin-top: clamp(14px, 2.4vh, 22px); font: 800 clamp(2.2rem, 5vw, 5rem)/.95 var(--f-display); letter-spacing: -.06em; }
.pr-heading em { font-style: normal; color: var(--accent); }

/* intro: one centred statement, what's included as chips */
.pr-intro { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: clamp(80px, 15vh, 170px) 0; }
.pr-intro__lead { max-width: 24ch; font: 700 clamp(1.6rem, 3.2vw, 3rem)/1.15 var(--f-display); letter-spacing: -.045em; }
.pr-chips { list-style: none; padding: 0; margin: clamp(28px, 5vh, 48px) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pr-chips li {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 11px; border-radius: 999px;
  font: 600 13px/1 var(--f-display); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(43, 36, 30, .14);
}
.pr-intro__link { margin-top: clamp(24px, 4vh, 36px); }
.pr-chips .pix, .pr-points .pix { width: 18px; height: 18px; }
.pr-chips .pix svg, .pr-points .pix svg { width: 100%; height: 100%; display: block; }
.pr-chips .pix rect, .pr-points .pix rect { fill: var(--ink); }
.pr-chips .pix rect.is-accent, .pr-points .pix rect.is-accent { fill: var(--coral); }

/* framed panels, like the hero */
.pr-frame { padding: 0 var(--frame); }
.pr-frame + .pr-frame { margin-top: var(--frame); }
.pr-frame__inner { position: relative; overflow: hidden; border-radius: var(--radius); padding: clamp(72px, 13vh, 150px) 0; }
.pr-frame--sky .pr-frame__inner {
  background:
    radial-gradient(55% 60% at 90% 90%, rgba(242, 99, 90, .12), transparent 70%),
    radial-gradient(60% 60% at 5% 0%, rgba(255, 255, 255, .7), transparent 70%),
    linear-gradient(180deg, #e9ece8 0%, #dbe3e3 100%);
}
.pr-frame--sand .pr-frame__inner {
  background:
    radial-gradient(60% 60% at 10% 10%, rgba(255, 255, 255, .6), transparent 70%),
    radial-gradient(60% 70% at 95% 100%, rgba(185, 194, 166, .5), transparent 70%),
    linear-gradient(170deg, #efe9de 0%, #e3ddd0 100%);
}

/* Birkly: centred head, the screenshot fan in the middle, four glass promises below */
.pr-birkly { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.pr-birkly .pr-deck { width: min(100%, 760px); margin: clamp(28px, 5vh, 56px) 0 clamp(12px, 2vh, 24px); }
.pr-points { list-style: none; padding: 0; margin: 0 0 clamp(28px, 5vh, 48px); width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); text-align: left; }
.pr-points li { display: grid; align-content: start; gap: 8px; padding: clamp(18px, 2vw, 26px); border-radius: calc(var(--radius) * .8); }
.pr-points .pix { margin-bottom: 10px; }
.pr-points b { font: 700 16px/1.2 var(--f-display); letter-spacing: -.02em; }
.pr-points span:not(.pix) { font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.pr-deck { position: relative; aspect-ratio: 1.45; }
.pr-card {
  position: absolute; left: 14%; top: 10%; width: 72%; margin: 0;
  border-radius: var(--radius); overflow: hidden; background: #eef0eb;
  box-shadow: 0 40px 80px -40px rgba(43, 36, 30, .55), 0 0 0 1px rgba(43, 36, 30, .06);
  transform-origin: 50% 100%; transition: transform .2s linear; will-change: transform;
}
.pr-card:nth-child(2) { z-index: 2; }
.pr-card img { display: block; width: 100%; aspect-ratio: 1.66; object-fit: cover; object-position: top left; }
.pr-card figcaption { padding: 10px 14px; font: 600 12px/1 var(--f-display); color: var(--ink-soft); background: #e4e6e0; text-align: left; }

/* plugins */
.pg__head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; margin-bottom: clamp(36px, 6vh, 64px); }
.pg__note { margin-top: clamp(16px, 2.6vh, 24px); color: var(--ink-soft); max-width: 52ch; }
.pg__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.pg-tile {
  display: grid; align-content: start; gap: 12px; min-height: clamp(240px, 32vh, 320px);
  padding: clamp(22px, 2.4vw, 34px); border-radius: calc(var(--radius) * .8);
  transition: translate .5s var(--ease), background-color .4s;
}
.pg-tile:hover { translate: 0 -6px; background: rgba(246, 244, 239, .78); }
.pg-tile__icon { width: 44px; height: 44px; margin-bottom: clamp(16px, 4vh, 40px); }
.pg-tile__icon svg { width: 100%; height: 100%; display: block; }
.pg-tile__icon rect { fill: var(--ink); }
.pg-tile:hover .pg-tile__icon rect { animation: pixIn .45s var(--ease) both; animation-delay: var(--d); }
.pg-tile__name { font: 800 clamp(1.6rem, 2.4vw, 2.3rem)/1 var(--f-display); letter-spacing: -.05em; }
.pg-tile__text { color: var(--ink-soft); line-height: 1.55; }
.pg-tile__good { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(43, 36, 30, .1); font: 600 12px/1.4 var(--f-display); color: var(--muted); }
.pg-tile--custom { background: rgba(43, 36, 30, .92); color: var(--paper); box-shadow: 0 24px 48px -32px rgba(43, 36, 30, .5); }
.pg-tile--custom:hover { background: var(--ink); }
.pg-tile--custom .pg-tile__icon rect { fill: var(--coral); }
.pg-tile--custom .pg-tile__text { color: rgba(238, 235, 229, .72); }
.pg-tile--custom .btn { justify-self: start; margin-top: auto; }

@media (max-width: 900px) {
  .pr-points { grid-template-columns: 1fr 1fr; }
  .pg__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pr-points { grid-template-columns: 1fr; }
}

/* ═════════════════════════ Contact ═════════════════════════ */
.ct { background: var(--night); color: var(--paper); padding: clamp(140px, 20vh, 200px) 0 clamp(80px, 14vh, 160px); }
.ct__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 120px); align-items: start; }
.ct__intro { position: sticky; top: clamp(110px, 16vh, 150px); }
.ct__title { font: 800 clamp(3rem, 7.4vw, 8rem)/.9 var(--f-display); letter-spacing: -.065em; }
.ct__title em { font-style: normal; color: var(--coral); }
.ct__lead { margin-top: clamp(20px, 3vh, 32px); font: 500 clamp(1.05rem, 1.35vw, 1.3rem)/1.45 var(--f-display); letter-spacing: -.02em; color: rgba(238, 235, 229, .72); max-width: 36ch; }
.ct__details { margin: clamp(32px, 6vh, 56px) 0 0; display: grid; gap: 18px; }
.ct__details div { display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid var(--line-light); }
.ct__details dt { font: 600 11px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: rgba(238, 235, 229, .45); }
.ct__details dd { margin: 0; font: 700 clamp(1.1rem, 1.6vw, 1.45rem)/1.2 var(--f-display); letter-spacing: -.03em; display: flex; align-items: center; gap: 10px; }
.ct__details a { background: linear-gradient(var(--coral), var(--coral)) 0 100% / 100% 2px no-repeat; padding-bottom: 4px; transition: color .3s; word-break: break-all; }
.ct__details a:hover { color: var(--coral); }
/* office hours: the Danish time, whether we're in, and the hours */
.ct-office__status { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--f-display); letter-spacing: 0; color: rgba(238, 235, 229, .6); }
.ct-office__status i { width: 7px; height: 7px; background: rgba(238, 235, 229, .35); }
.ct-office.is-open .ct-office__status { color: var(--paper); }
.ct-office.is-open .ct-office__status i { background: var(--coral); animation: pulse 2.4s ease-in-out infinite; }
.ct-office__hours { font-size: 13px; color: rgba(238, 235, 229, .5); }
.ct-form__privacy a { color: rgba(238, 235, 229, .8); text-decoration: underline; text-underline-offset: 3px; }
.ct-form__privacy a:hover { color: var(--coral); }

.ct__formwrap { position: relative; }
.ct-form {
  display: grid; gap: clamp(22px, 3.4vh, 32px);
  padding: clamp(24px, 3vw, 44px); border-radius: var(--radius); background: var(--night-2); border: 1px solid var(--line-light);
  transition: opacity .3s;
}
.ct-form.is-leaving { opacity: 0; }
.ct-form[hidden], .ct-thanks[hidden] { display: none; }   /* our display:grid would otherwise override [hidden] */
.ct-form__group { border: 0; margin: 0; padding: 0; display: grid; gap: 14px; }
.ct-form__group legend, .field__label { padding: 0; font: 600 13px/1 var(--f-display); color: rgba(238, 235, 229, .7); margin-bottom: 12px; }
.ct-form__group legend i, .field__label i { font-style: normal; color: rgba(238, 235, 229, .4); font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid rgba(238, 235, 229, .22); border-radius: 999px;
  font: 600 13px/1 var(--f-display); color: rgba(238, 235, 229, .8); transition: background-color .25s, color .25s, border-color .25s;
}
.chip span::before { content: ""; width: 6px; height: 6px; background: rgba(238, 235, 229, .25); transition: background-color .25s; }
.chip:hover span { border-color: rgba(238, 235, 229, .5); }
.chip input:checked + span { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.chip input:checked + span::before { background: var(--coral); }
.chip input:focus-visible + span { outline: 2px solid var(--coral); outline-offset: 2px; }
.ct-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.field { display: grid; }
.field input, .field textarea {
  width: 100%; border: 0; border-bottom: 1px solid rgba(238, 235, 229, .28); background: none; color: var(--paper);
  font: 500 clamp(1.05rem, 1.3vw, 1.2rem)/1.4 var(--f-display); letter-spacing: -.015em; padding: 8px 0 10px; border-radius: 0;
  transition: border-color .3s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(238, 235, 229, .3); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--coral); }
.field__error { display: none; margin-top: 8px; font-size: 13px; color: #f59a93; }
.field.is-invalid input, .field.is-invalid textarea { border-bottom-color: #f59a93; }
.field.is-invalid .field__error { display: block; }
.ct-form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 8px; }
.ct-form__privacy { font-size: 13px; color: rgba(238, 235, 229, .5); }
.ct-flock { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; display: none; }
.ct-flock.is-on { display: block; }

.ct-thanks { padding: clamp(24px, 3vw, 44px) 0; display: grid; gap: 18px; justify-items: start; animation: thanksIn 1s var(--ease) both; }
.ct-thanks:focus { outline: none; }
.ct-thanks__title { font: 800 clamp(4rem, 12vw, 12rem)/.85 var(--f-display); letter-spacing: -.07em; color: var(--coral); }
.ct-thanks__text { font: 500 clamp(1.1rem, 1.5vw, 1.4rem)/1.45 var(--f-display); color: rgba(238, 235, 229, .78); max-width: 34ch; }
.ct-thanks__again { background: none; border: 0; border-bottom: 1.5px solid currentColor; color: var(--paper); cursor: pointer; padding: 0 0 6px; }
@keyframes thanksIn { from { opacity: 0; transform: translateY(30px); } }

.ct-next { padding: clamp(80px, 14vh, 160px) 0; }
.ct-next .section-title em { color: var(--accent); font-style: normal; }
.ct-next__steps { list-style: none; padding: 0; margin: clamp(40px, 7vh, 72px) 0 0; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
/* one fine line through all three steps, fading out at its ends, with a coral pixel for each step */
.ct-next__steps::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: linear-gradient(90deg, rgba(43, 36, 30, .25), rgba(43, 36, 30, .25) 85%, transparent); }
.ct-next__steps li { position: relative; display: grid; align-content: start; gap: 10px; padding-top: 36px; }
.ct-next__steps li::before { content: ""; position: absolute; left: 0; top: 0; width: 7px; height: 7px; background: var(--coral); }
.ct-next__n { font: 600 12px/1 var(--f-display); letter-spacing: .12em; color: var(--coral); }
.ct-next__steps h3 { font: 800 clamp(1.4rem, 2vw, 1.9rem)/1.05 var(--f-display); letter-spacing: -.045em; }
.ct-next__steps p { color: var(--ink-soft); max-width: 32ch; }

@media (max-width: 900px) {
  .ct__grid { grid-template-columns: 1fr; }
  .ct__intro { position: static; }
  .ct-form__row { grid-template-columns: 1fr; }
  .ct-next__steps { grid-template-columns: 1fr; gap: 36px; }
  .ct-next__steps::before { left: 3px; right: auto; top: 3px; bottom: 0; width: 1px; height: auto; background: linear-gradient(rgba(43, 36, 30, .25), rgba(43, 36, 30, .25) 85%, transparent); }
  .ct-next__steps li { padding: 0 0 0 30px; }
}
@media (prefers-reduced-motion: reduce) { .ct-thanks { animation: none; } }

/* ═════════════════════════ From Tønder to anywhere ═════════════════════════ */
.where { position: relative; height: 340vh; height: 340svh; background: var(--night); color: var(--paper); }
.where__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.where__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.where__text { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
.where__text > * { max-width: min(460px, 36%); }
.where__coords { font: 600 12px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--coral); margin-bottom: clamp(16px, 3vh, 24px); }
.where__title { position: relative; display: grid; font: 800 clamp(2.4rem, 4.8vw, 5rem)/.95 var(--f-display); letter-spacing: -.06em; }
.where__line { grid-area: 1 / 1; will-change: transform, opacity; }
.where__line em { font-style: normal; color: var(--coral); }
.where__line--b { opacity: 0; }
.where__lead { margin-top: clamp(18px, 3vh, 28px); font: 500 clamp(1rem, 1.25vw, 1.2rem)/1.5 var(--f-display); color: rgba(238, 235, 229, .72); }

@media (max-width: 900px) {
  .where { height: 300vh; height: 300svh; }
  .where__text { justify-content: flex-end; padding-bottom: clamp(28px, 6vh, 56px); }
  .where__text > * { max-width: none; }
  .where__title { font-size: 2.2rem; }
}

/* ═════════════════════════ Legal pages (privacy.html, company.html) ═════════════════════════ */
.lg { padding: clamp(130px, 20vh, 200px) 0 clamp(96px, 16vh, 180px); }
.lg__head { max-width: 760px; margin-bottom: clamp(48px, 9vh, 96px); }
.lg__kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1 var(--f-display); letter-spacing: .02em; color: var(--muted); }
.lg__kicker::before { content: ""; width: 7px; height: 7px; background: var(--coral); }
.lg__title { margin: clamp(16px, 3vh, 26px) 0 clamp(18px, 3vh, 26px); font: 800 clamp(2.8rem, 6.4vw, 6.4rem)/.92 var(--f-display); letter-spacing: -.065em; }
.lg__title em { font-style: normal; color: var(--accent); }
.lg__lead { font: 500 clamp(1.05rem, 1.35vw, 1.3rem)/1.45 var(--f-display); letter-spacing: -.02em; color: var(--ink-soft); max-width: 46ch; }
.lg__updated { margin-top: 18px; font: 600 12px/1 var(--f-display); letter-spacing: .06em; color: var(--muted); }
.lg__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 110px); align-items: start; padding-top: clamp(28px, 5vh, 48px); border-top: 1px solid var(--line); }
.lg__toc { position: sticky; top: clamp(100px, 15vh, 140px); }
.lg__toc p { font: 600 11px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.lg__toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lg__toc a { font: 600 14px/1.3 var(--f-display); color: var(--ink-soft); transition: color .3s; }
.lg__toc a:hover { color: var(--accent); }
.lg__body { display: grid; gap: clamp(40px, 7vh, 64px); max-width: 68ch; }
.lg__body section { scroll-margin-top: 110px; }
.lg__body h2 { font: 800 clamp(1.4rem, 2vw, 1.9rem)/1.1 var(--f-display); letter-spacing: -.04em; margin-bottom: 16px; }
.lg__body p, .lg__body li { color: var(--ink-soft); line-height: 1.7; }
.lg__body p + p { margin-top: 12px; }
.lg__body ul { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.lg__body li { position: relative; padding-left: 18px; }
.lg__body li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; background: var(--coral); }
.lg__body b { color: var(--ink); font-weight: 600; }
.lg__body a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(196, 71, 58, .5); text-underline-offset: 3px; transition: color .3s; }
.lg__body a:hover { color: var(--accent); }
.lg__body code { font-size: .9em; padding: 1px 6px; border-radius: 4px; background: var(--paper-2); }
.lg__facts { margin: 4px 0 0; display: grid; }
.lg__facts div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.lg__facts div:first-child { border-top: 1px solid var(--line); }
.lg__facts dt { font: 600 13px/1.5 var(--f-display); color: var(--muted); }
.lg__facts dd { margin: 0; color: var(--ink); line-height: 1.5; }
/* details still to be filled in: easy to spot before launch */
mark.todo { background: rgba(242, 99, 90, .14); color: var(--accent); padding: 0 4px; border-radius: 3px; font-weight: 600; }

@media (max-width: 900px) {
  .lg__grid { grid-template-columns: 1fr; }
  .lg__toc { position: static; }
  .lg__facts div { grid-template-columns: 1fr; gap: 4px; }
  .footer__legal { padding-left: 0; }
}

/* ═════════════════════════ Japanese pages ═════════════════════════
   A Japanese typeface next to ours, no negative tracking (it cramps kana and kanji), a little more
   line height, and headlines a step smaller, since Japanese lines don't break between words. */
html[lang="ja"] {
  --f-display: "Plus Jakarta Sans", "Noto Sans JP", system-ui, sans-serif;
  --f-body: "Inter", "Noto Sans JP", system-ui, sans-serif;
}
html[lang="ja"] body * { letter-spacing: 0 !important; line-break: strict; }
/* break headlines between phrases, not inside a word (where the browser supports it) */
html[lang="ja"] :is(h1, h2, h3, .pr-hero__title) { word-break: auto-phrase; }
html[lang="ja"] :is(.hero__title, .offer-title, .sx-hero__title, .cx-hero__title, .cd-title, .ct__title, .lg__title, .contact__title) {
  font-size: clamp(2.2rem, 5.2vw, 5.6rem); line-height: 1.12;
}
html[lang="ja"] :is(.section-title, .pr-heading, .sx-panel__title, .trip__title) { line-height: 1.2; }


/* ───────────────────────── 404 ───────────────────────── */
.nf {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center;
  min-height: 100svh; padding-block: clamp(130px, 20vh, 190px) clamp(56px, 10vh, 110px);
}
.nf__kicker { font: 600 12px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nf__title { margin: 18px 0 22px; font: 800 clamp(2.6rem, 5.4vw, 5.4rem)/.95 var(--f-display); letter-spacing: -.06em; text-wrap: balance; }
.nf__title em { font-style: normal; color: var(--accent); }
.nf__lead { max-width: 32em; color: var(--ink-soft); font-size: clamp(16px, 1.25vw, 18px); }
.nf__status { display: flex; gap: 12px; align-items: baseline; min-height: 1.4em; margin-top: 28px; font: 600 15px/1.4 var(--f-display); letter-spacing: -.01em; }
.nf__status::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--coral); transform: translateY(-1px); }
.nf__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn--line { border: 0; cursor: pointer; background: none; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(43, 36, 30, .25); }
.btn--line:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn--line:disabled { cursor: default; opacity: .45; transform: none; }
.nf__hej { margin-top: 22px; }
.nf__scene { margin: 0; }
.nf__canvas { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius); background: #cfd9d9; cursor: pointer; }
.nf__caption { margin-top: 12px; font-size: 12px; letter-spacing: .02em; color: var(--muted); }
.nf__caption i { font-family: var(--f-script); font-style: normal; font-size: 1.15em; color: var(--ink-soft); }
html[lang="ja"] .nf__title { font-size: clamp(2.1rem, 4.2vw, 4.2rem); line-height: 1.15; }
@media (max-width: 860px) {
  .nf { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 120px; }
}

/* ═════════════════════════ Small screens and media-library images ═════════════════════════ */
/* the logo and icon come from the media library as images: give them the size the inline SVGs had */
img.logo__full { display: block; height: 34px; width: auto; }
.menu__home img { width: 28px; height: 28px; flex: none; scale: .3; rotate: -120deg; transition: scale .8s var(--ease), rotate .8s var(--ease); }
.nav.is-compact .menu__home img { scale: 1; rotate: 0deg; transition-delay: .3s; }
.menu__home:hover img { rotate: -8deg; }
@media (max-width: 720px) {
  img.logo__full { height: 28px; }
  /* long words (German, Danish, Turkish …) wrap instead of running off the screen */
  h1, h2, h3, .lg__title, .section-title { overflow-wrap: break-word; hyphens: auto; }
  /* the pixel birches sit behind the text on small screens: keep the text readable */
  .flow__canvas, .trip__canvas { opacity: .35; }
}