/* ==========================================================================
   Justina Honsel — site styles
   Swap fonts or colours in :root and everything follows.
   ========================================================================== */

/* Newsreader (Production Type, SIL Open Font License), hosted on this site, so no visitor
   data goes to Google. Regular and italic, Latin and Latin Extended. */
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-400-italic-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-400-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-400-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #efdb58;                      /* yellow, first colour of the cycle */
  --ink: #000000e0;
  --ink-soft: rgba(0, 0, 0, 0.62);    /* stays readable on every background colour */
  --rule: rgba(0, 0, 0, 0.14);
  --placeholder: #3375f6;           /* colour shown until a project has an image */

  --serif: "Newsreader", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;   /* only on the opening page */
  --weight: 400;

  /* Fluid scale, matched to the mockup's proportions */
  --pad: clamp(14px, 1.2vw, 28px);           /* page side margin */
  --gap: clamp(12px, 3.7vw, 72px);           /* gutter between tiles */
  --header-y: clamp(12px, 1.25vw, 26px);
  --text-l: clamp(15px, 1.67vw, 24px);       /* header, headings, statements: 24px on desktop */
  --lh-l: 1.1667;                             /* 28px line height at 24px */
  --text-statement: var(--text-l);
  --text-m: clamp(15px, 1.15vw, 21px);       /* reading text */
  --text-s: clamp(11px, 1.13vw, 20px);       /* captions, meta */
  --intro-top: clamp(128px, 13vw, 260px);
  --intro-bottom: clamp(56px, 4.1vw, 96px);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  background-color: var(--bg);
  -webkit-text-size-adjust: 100%;
}

/* ---------- Background: drifting colour clouds with film grain ----------
   Each cloud is a soft radial gradient that drifts, breathes and turns on its own
   slow timeline. The timelines have different lengths, so the overall picture never
   visibly repeats. Only transforms animate, which keeps it smooth.
   --bg-delay (set in each page's <head>) keeps the clouds where they were between pages. */

.clouds {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  /* The colour changes every 2 s (assets/background.js) and fades over the same 2 s */
  background-color: var(--bg-colour, var(--bg));
  background-image: linear-gradient(180deg,
    rgb(255 255 255 / 0.12) 0%, rgb(255 255 255 / 0) 55%, rgb(255 255 255 / 0.06) 100%);
  transition: background-color 2s ease-in-out;
  pointer-events: none;
}
.clouds i {
  position: absolute;
  width: var(--w);
  height: var(--h);
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgb(var(--c) / 0.74) 0%,
    rgb(var(--c) / 0.5) 38%,
    rgb(var(--c) / 0.2) 68%,
    rgb(var(--c) / 0) 100%);
  opacity: var(--o, 1);
  will-change: transform;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: var(--bg-delay, 0s);
}
/* Soft light and shade drifting over the current colour, so every colour flows as a gradient */
/*                              tone               strength   size                 position            drift / breathe / turn */
.clouds i:nth-child(1) { --c: 255 255 255; --o: 0.3;  --w: 72vmax;  --h: 52vmax; top: -24vh; left: -20vw; animation-name: cloud-drift-1, cloud-breathe, cloud-turn; animation-duration: 67s, 41s, 113s; } /* light, top left */
.clouds i:nth-child(2) { --c: 0 0 0;       --o: 0.03; --w: 66vmax;  --h: 48vmax; top: -22vh; left: 62vw;  animation-name: cloud-drift-2, cloud-breathe, cloud-turn; animation-duration: 79s, 53s, 131s; } /* shade, top right */
.clouds i:nth-child(3) { --c: 255 255 255; --o: 0.32; --w: 82vmax;  --h: 38vmax; top: -12vh; left: 16vw;  animation-name: cloud-drift-3, cloud-breathe, cloud-turn; animation-duration: 59s, 47s, 103s; } /* light, top */
.clouds i:nth-child(4) { --c: 0 0 0;       --o: 0.03; --w: 58vmax;  --h: 50vmax; top: 24vh;  left: 26vw;  animation-name: cloud-drift-4, cloud-breathe, cloud-turn; animation-duration: 71s, 37s, 127s; } /* shade, centre */
.clouds i:nth-child(5) { --c: 255 255 255; --o: 0.24; --w: 104vmax; --h: 42vmax; top: 32vh;  left: -8vw;  animation-name: cloud-drift-5, cloud-breathe, cloud-turn; animation-duration: 89s, 43s, 149s; } /* light band */
.clouds i:nth-child(6) { --c: 255 255 255; --o: 0.26; --w: 92vmax;  --h: 40vmax; top: 70vh;  left: 6vw;   animation-name: cloud-drift-6, cloud-breathe, cloud-turn; animation-duration: 97s, 61s, 167s; } /* light, bottom */

/* Each cloud wanders gently around its place */
@keyframes cloud-drift-1 { to { translate: 14vw 10vh; } }
@keyframes cloud-drift-2 { to { translate: -12vw 12vh; } }
@keyframes cloud-drift-3 { to { translate: 18vw 6vh; } }
@keyframes cloud-drift-4 { to { translate: -14vw 10vh; } }
@keyframes cloud-drift-5 { to { translate: 12vw -8vh; } }
@keyframes cloud-drift-6 { to { translate: -16vw -6vh; } }
@keyframes cloud-breathe { to { scale: 1.16; } }
@keyframes cloud-turn    { to { rotate: 7deg; } }

/* Film grain: fine static noise over the clouds */
.clouds::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.3;
  mix-blend-mode: overlay;
}

@media (prefers-reduced-motion: reduce) {
  .clouds i { animation: none; }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: transparent;   /* lets the colour clouds behind the page show through */
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--text-m);
  font-weight: var(--weight);
  line-height: 1.45;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { flex: 1; }

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
a:hover { opacity: 0.5; }
a:focus-visible,
button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

img { display: block; max-width: 100%; }
ul { list-style: none; margin: 0; padding: 0; }
.caps { text-transform: uppercase; }
h1, h2, h3, p { margin: 0; font-weight: inherit; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--pad);
  top: -100px;
  z-index: 100;
  background: var(--ink);
  color: var(--bg);
  padding: 0.4em 0.8em;
  font-size: var(--text-s);
  text-transform: uppercase;
}
.skip-link:focus { top: var(--pad); }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "brand nav connect";
  align-items: baseline;
  padding: var(--header-y) var(--pad);
  font-size: var(--text-l);
  line-height: var(--lh-l);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  /* Fully transparent: the navigation floats directly on the page background */
  color: var(--ink);
  background: transparent;
  pointer-events: none;          /* clicks pass through to the page, except on the links below */
}
.site-header a,
.site-header button { pointer-events: auto; }

.brand   { grid-area: brand; justify-self: start; }
.nav     { grid-area: nav; }
.connect { grid-area: connect; justify-self: end; }

/* Right side of the header: EN / DE switch next to Connect */
.header-end {
  grid-area: connect;
  justify-self: end;
  display: flex;
  align-items: baseline;
  gap: 1.1em;
}
.lang-switch { display: inline-flex; align-items: baseline; gap: 0.3em; }
.lang-switch button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.lang-switch button[aria-pressed="false"],
.lang-switch span { opacity: 0.45; }
.lang-switch button[aria-pressed="false"]:hover { opacity: 1; }

.nav ul { display: flex; flex-wrap: wrap; justify-content: center; }
.nav li:not(:last-child)::after { content: ","; margin-right: 0.45em; }

.site-header a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* ---------- Opening page (home, once per visit) ----------
   The aerial film in black and white, the welcome in the site's changing colours, two instant
   photos of Justina that keep changing. html.intro-on is set in the <head> of index.html; main.js runs it. */

.intro { display: none; }
html.intro-on .intro,
html.intro-leaving .intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: block;
  isolation: isolate;
  overflow: hidden;
  padding: var(--header-y) var(--pad) 24px;   /* the top bar sits exactly where the website header sits */
  background: #1a1a1a;                       /* until the film shows */
  color: var(--bg-colour, var(--bg));       /* the type follows the colour cycle */
  transition: color 2s ease-in-out;
}
html.intro-on body { overflow: hidden; }
html.intro-on .site-header,
html.intro-on main,
html.intro-on .site-footer { opacity: 0; }
html.intro-leaving .site-header,
html.intro-leaving main,
html.intro-leaving .site-footer { transition: opacity 0.9s ease; }
html.intro-leaving .intro { opacity: 0; transition: opacity 0.9s ease, color 2s ease-in-out; }

.intro-video {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12) brightness(0.62);
}
.intro::after {                              /* a soft shade top and bottom keeps the type readable */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.35), rgb(0 0 0 / 0) 40%, rgb(0 0 0 / 0) 65%, rgb(0 0 0 / 0.35));
  pointer-events: none;
}

.intro-top {                                 /* same grid, font and size as the website header */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  font: 400 var(--text-l)/var(--lh-l) var(--serif);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.intro-sound {
  all: unset;
  justify-self: end;
  display: inline-flex;
  align-items: baseline;
  cursor: pointer;
}
.intro-sound:not(.is-on) .eq i { animation-play-state: paused; transform: scaleY(0.35); }
.intro-sound:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.intro-head { width: min(53vw, 900px); margin-top: clamp(16px, 3vh, 40px); }
.intro-title {
  margin: 0;
  font: 700 clamp(44px, 7.6vw, 128px)/0.9 var(--sans);
  letter-spacing: -0.045em;
}
.intro-lead {
  margin: 0.35em 0 0;
  font-size: clamp(21px, 2.6vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.012em;
}
.intro-lead .caps { font: 700 0.92em/1 var(--sans); letter-spacing: -0.02em; text-transform: uppercase; }
.intro-note {
  position: absolute;
  left: var(--pad);
  bottom: 26px;                              /* down at the bottom, on one line with "Enter the universe" */
  max-width: 27em;
  margin: 0;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.12;
}
.intro-enter {                               /* big words; the underline draws in on hover */
  position: absolute;
  right: var(--pad);
  bottom: 22px;
  padding-bottom: 0.08em;
  color: inherit;
  font: 400 clamp(30px, 3.4vw, 54px)/1 var(--sans);
  letter-spacing: -0.035em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.intro-enter span { display: inline-block; transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.intro-enter:hover,
.intro-enter:focus-visible { background-size: 100% 2px; }
.intro-enter:hover span,
.intro-enter:focus-visible span { transform: translateX(0.15em); }

/* Two instant photos of Justina, in colour; they float gently and take turns while the page is open */
.intro-photos { position: absolute; right: 2vw; top: 22vh; width: 44vw; height: 70vh; }
.intro-card {
  --iw: min(20.5vw, 36vh);
  position: absolute;
  width: var(--iw);
  padding: calc(var(--iw) * 0.12) calc(var(--iw) * 0.074) calc(var(--iw) * 0.324);
  background: #f6f6f4;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 2px 8px rgb(0 0 0 / 0.06);
  transform: translateY(8vh) rotate(var(--r));
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease;
}
.intro-card.one { --r: 5deg; left: 8%; top: 0; }
.intro-card.two { --r: 3deg; left: 47%; top: 9%; }
.intro-card.is-in { transform: rotate(var(--r)); opacity: 1; }
.intro-card.is-float { animation: intro-float var(--ft, 6s) ease-in-out infinite alternate; }
@keyframes intro-float {
  from { transform: rotate(var(--r)); }
  to { transform: translate(var(--dx, 8px), -14px) rotate(calc(var(--r) + var(--dr, 2deg))); }
}
.intro-card.is-front { z-index: 2; }
.intro-card .ph { aspect-ratio: 46 / 62; overflow: hidden; background: #ddd; }
.intro-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.9s ease, transform 0.9s ease, opacity 0.9s ease;
}
.intro[data-swap="blur"] .intro-card img.is-out {   /* blur: the portrait blurs out, the next one comes into focus */
  filter: blur(11px) brightness(1.06);
  transform: scale(1.08);
  opacity: 0.75;
}

.intro-in { opacity: 0; transform: translateY(14px); animation: intro-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--delay, 0s) forwards; }
@keyframes intro-in { to { opacity: 1; transform: none; } }

/* How the polaroids change (data-swap on .intro) */
/* develop: like an instant photo, the next picture rises out of a pale, milky blank */
.intro[data-swap="develop"] .intro-card img { transition: filter 2.8s cubic-bezier(0.2, 0.6, 0.2, 1); }
.intro[data-swap="develop"] .intro-card img.is-out {
  filter: brightness(2.2) contrast(0.28) saturate(0) sepia(0.2);
  transition-duration: 0.35s;
}
/* flip: the polaroid turns edge-on and comes back with the next picture */
.intro[data-swap="flip"] .intro-photos { perspective: 1200px; }
.intro[data-swap="flip"] .intro-card { transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease, rotate 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.intro[data-swap="flip"] .intro-card.is-out { rotate: y 90deg; transition-timing-function: ease, ease, ease-in; transition-duration: 0.9s, 0.6s, 0.3s; }
/* flash: a short camera flash, as if the photo was just taken */
.intro-card .ph { position: relative; }
.intro[data-swap="flash"] .intro-card .ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  transition: opacity 0.9s ease-out;
  pointer-events: none;
}
.intro[data-swap="flash"] .intro-card.is-out .ph::after { opacity: 1; transition-duration: 0.07s; }
.intro[data-swap="flash"] .intro-card { transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease, scale 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.intro[data-swap="flash"] .intro-card.is-out { scale: 1.035; transition-duration: 0.9s, 0.6s, 0.07s; }
/* smear: a quick sideways whip in steps (main.js sets the blur and shift), so no smoothing here */
.intro[data-swap="smear"] .intro-card img { transition: none; }
/* shuffle: the polaroid flies off downwards and a new one drops in from above */
.intro[data-swap="shuffle"] .intro-card {
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease,
              translate 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), rotate 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.intro[data-swap="shuffle"] .intro-card.is-out {
  z-index: 3;
  translate: 18vw 115vh;
  rotate: 24deg;
  transition: translate 0.6s cubic-bezier(0.5, 0, 0.75, 0), rotate 0.6s cubic-bezier(0.5, 0, 0.75, 0);
}
.intro[data-swap="shuffle"] .intro-card.is-above { z-index: 3; translate: -6vw -115vh; rotate: -14deg; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .intro-in { animation: none; opacity: 1; transform: none; }
  .intro-card { transition: none; }
}
@media (max-width: 899px) {
  html.intro-on .intro { overflow-y: auto; padding-bottom: 124px; }
  .intro-head { width: 100%; }
  .intro-photos { position: relative; right: auto; top: auto; width: 100%; height: 62vw; margin-top: 6vw; }
  .intro-card { --iw: 34vw; }
  .intro-card.one { left: 10%; }
  .intro-card.two { left: 50%; top: 6%; }
  .intro-note { position: static; margin-top: 8vw; }   /* close under the photos, clear of "Enter the universe" */
  .intro-enter {                             /* always in reach on a phone, on a dark fade so text scrolling underneath never collides with it */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 60px 16px calc(22px + env(safe-area-inset-bottom));
    text-align: right;
    font-size: 26px;
    background: linear-gradient(180deg, rgb(0 0 0 / 0), rgb(0 0 0 / 0.94) 46%, #000);
  }
  .intro-enter:hover,
  .intro-enter:focus-visible { background-size: auto; }
}

@media (max-width: 760px) {                  /* like the website header on a phone: name and sound, tagline below */
  .intro-top { grid-template-columns: 1fr auto; row-gap: 0.55em; font-size: 15px; }
  .intro-top > span:nth-child(2) { grid-row: 2; grid-column: 1 / -1; justify-self: center; text-align: center; text-wrap: balance; }   /* a long tagline breaks into two even lines */
}

/* ---------- Protection: text can't be selected, photos can't be dragged or long-pressed ----------
   The email address and the contact form stay selectable (main.js also blocks copying and right-click). */
body { -webkit-user-select: none; user-select: none; }
input,
textarea,
select,
[contenteditable],
a[href^="mailto:"],
.connect-form { -webkit-user-select: text; user-select: text; }
img,
video { -webkit-user-drag: none; -webkit-touch-callout: none; }

/* ---------- Statement (home intro + page heads) ---------- */

.statement {
  padding: var(--intro-top) var(--pad) var(--intro-bottom);
  text-align: center;
}
.statement p {
  margin-inline: auto;
  max-width: 34em;
  font-size: var(--text-statement);
  font-style: italic;
  line-height: var(--lh-l);
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.statement p + p { margin-top: 1.42em; }
/* Home: set exactly as written (no capitals), regular upright, lines balanced in a narrow column */
.statement-home p,
.statement-purpose p {
  max-width: 26em;
  font-weight: var(--weight);
  font-style: italic;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
}
/* Home: the statement between the projects and the reviews, spaced like the reviews below it */
.statement-purpose { padding: clamp(96px, 10vw, 168px) var(--pad) 0; }

/* Home: "Free intro call" badge, floating at the top right beside the statement. Dark like the
   opening page, its type takes the colour of the moment; the ring of words turns slowly.
   Every size inside follows --badge. (assets/main.js sets the letters of the ring.) */
.statement-home { position: relative; }
.call-badge {
  --badge: clamp(118px, 10.5vw, 176px);
  position: absolute;
  z-index: 2;
  top: calc(var(--intro-top) - var(--badge) * 0.42);
  left: calc(50% + var(--text-statement) * 14);
  display: grid;
  place-items: center;
  width: var(--badge);
  aspect-ratio: 1;
  overflow: hidden;                   /* the turning ring's square corners never reach past the circle */
  border-radius: 50%;
  background: #111;                   /* dark enough for every colour of the cycle, plum included */
  color: var(--bg-colour, var(--bg));
  box-shadow: 0 18px 36px -20px rgb(0 0 0 / 0.5);
  transition: color 2s ease-in-out, scale 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  animation: call-badge-float 7s ease-in-out infinite;
}
.call-badge:hover { opacity: 1; }     /* no link fade: it only grows (below) */
.call-badge-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-size: calc(var(--badge) * 0.08);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  animation: call-badge-turn 32s linear infinite;
}
.call-badge-ring i {                  /* one letter: stands at the top, turned round the centre */
  position: absolute;
  inset: 7% 0 50%;
  width: fit-content;
  margin-inline: auto;
  font-style: normal;
  white-space: pre;
  transform-origin: 50% 100%;
  rotate: var(--a, 0deg);
}
.call-badge-label {
  font-size: calc(var(--badge) * 0.14);
  font-style: italic;
  line-height: 1;
  text-align: center;
}
.call-badge:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }
@media (hover: hover) and (pointer: fine) {
  .call-badge:hover { scale: 1.06; }
}
@keyframes call-badge-float { 50% { translate: 0 -10px; } }
@keyframes call-badge-turn { to { rotate: 1turn; } }
@media (prefers-reduced-motion: reduce) {
  .call-badge,
  .call-badge-ring { animation: none; }
}
@media (max-width: 760px) {           /* phone: at the right edge, half over the first project */
  .call-badge {
    --badge: 104px;
    top: auto;
    bottom: calc(var(--badge) * -0.68);   /* clear of the last line, even at the top of its float */
    left: auto;
    right: var(--pad);
  }
  .call-badge-ring { font-size: calc(var(--badge) * 0.085); }
}

/* ---------- Work grid ---------- */

.work-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: calc(var(--gap) * 1.1);
  padding: 0 var(--pad);
}

.tile { margin: 0; }
a.tile:hover { opacity: 1; }   /* linked tiles keep the image hover instead of fading */

.tile-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: rgb(255 255 255 / 0.16);   /* soft tone while a photo loads */
  transition: background-color 0.25s ease;
}
.tile-media.is-placeholder { background-color: var(--placeholder); }
.tile-media img,
.tile-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-sound {                    /* small switch in the corner of a project video */
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 0.4em 0.75em;
  border: 0;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.5);
  color: #fff;
  font: inherit;
  font-size: var(--text-s);
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}
.video-sound:hover { background: rgb(0 0 0 / 0.7); }
.tile-media .tile-main { opacity: 0; transition: opacity 0.6s ease; }
.tile-media .tile-main.is-loaded { opacity: 1; }
.tile-media .tile-alt { opacity: 0; transition: opacity 0.25s ease; }
@media (hover: none) {
  .tile-media.is-alt .tile-alt { opacity: 1; }   /* gallery pictures with a second picture: tap */
}

@media (hover: hover) and (pointer: fine) {
  .tile:hover .tile-alt,
  .tile-media.has-alt:hover .tile-alt { opacity: 1; }
  .tile:hover .tile-media.is-placeholder {
    background-color: color-mix(in srgb, var(--placeholder) 82%, #000);
  }
}

.tile-caption {
  display: flex;
  flex-direction: column;
  margin-top: 0.95em;
  font-size: var(--text-s);
  line-height: 1.32;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.work-more {                      /* small link under the eight home projects */
  padding: 1.6em var(--pad) 0;
  text-align: right;
  font-size: var(--text-s);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.work-more a::after { content: " →"; }

/* ---------- Home: client testimonials ---------- */

.testimonials {
  padding: clamp(96px, 10vw, 168px) var(--pad) 0;
  text-align: center;
}
.testimonials-title {
  margin-bottom: 2.2em;
  font-size: var(--text-s);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.testimonials-viewport {          /* takes the height of the review on show (set in main.js) */
  overflow: hidden;
  transition: height 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
@media (prefers-reduced-motion: reduce) {
  .testimonials-viewport { transition: none; }
}
.testimonials-track {
  display: flex;
  align-items: flex-start;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);   /* smooth slide */
  touch-action: pan-y;
}
.testimonial {
  flex: 0 0 100%;
  margin: 0;
  padding: 0 6%;
}
.testimonial blockquote { margin: 0 auto; max-width: 32em; }
.testimonial p {                  /* same voice as the statement at the top */
  font-size: var(--text-statement);
  font-style: italic;
  line-height: var(--lh-l);
}
.testimonial p + p { margin-top: calc(var(--lh-l) * 1em); }   /* a full empty line between paragraphs */
.testimonial-role { display: block; margin-top: 0.4em; color: var(--ink-soft); }
.testimonial figcaption {
  margin-top: 1.4em;
  font-size: var(--text-s);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.testimonials-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4em;
  margin-top: 2.2em;
}
.testimonials-arrow {
  padding: 0.2em 0.4em;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-l);
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.2s ease;
}
.testimonials-arrow:hover { color: var(--ink); }
.testimonials-dots { display: flex; gap: 10px; }
.testimonials-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  opacity: 0.45;
  cursor: pointer;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}
.testimonials-dot[aria-current="true"] { background: var(--ink); opacity: 1; }

/* ---------- Projects index ---------- */

.index {
  padding: 0 var(--pad);
  text-transform: uppercase;
}
.index-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: baseline;
  padding: 0.7em 0 0.75em;
  border-top: 1px solid var(--rule);
  font-size: var(--text-l);
  line-height: var(--lh-l);
}
.index-row:last-child { border-bottom: 1px solid var(--rule); }
.index-row span:last-child { text-align: right; }   /* also inside the row link */
.index-row.is-head {
  border-top: 0;
  padding-bottom: 0.9em;
  font-size: var(--text-s);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.index-row:not(.is-head) { transition: opacity 0.2s ease; }
@media (hover: hover) and (pointer: fine) {
  .index:hover .index-row:not(.is-head):not(:hover) { opacity: 0.32; }
}

.index-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: clamp(160px, 18vw, 340px);
  aspect-ratio: 4 / 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.index-preview.is-visible { opacity: 1; }

/* ---------- Services ---------- */

/* Small label above a statement (Services intro, packages head) */
.eyebrow {
  margin-bottom: 1em;              /* the headline sits one line below the label */
  font-size: var(--text-s);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* The three services: idea, identity, realisation */
.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: calc(var(--gap) * 1.2);
  padding: 0 var(--pad);
}
.service {
  padding-top: 0.9em;
  border-top: 1px solid var(--ink);
}
@supports (grid-template-rows: subgrid) {      /* titles, texts and lists line up across the columns */
  .service { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
}
.service-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
  font-size: var(--text-s);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.service-key { color: var(--ink-soft); }
.service h2 {
  margin: 0.25em 0 0.9em;
  font-size: var(--text-l);
  line-height: var(--lh-l);
  text-transform: uppercase;
}
.service p { max-width: 26em; }
.service ul {
  margin-top: 1.4em;
  font-size: var(--text-s);
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.service ul li { font-style: italic; }
.service .service-note {
  margin-top: 1.2em;
  font-size: var(--text-s);
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-soft);
}

.packages {
  margin-top: clamp(120px, 13vw, 240px);
  padding: 0 var(--pad);
}
.packages-head {
  margin-bottom: clamp(72px, 6.5vw, 120px);
  text-align: center;
}
.packages-title {
  margin: 0 auto;
  max-width: 34em;
  font-size: var(--text-statement);
  font-style: italic;
  font-weight: var(--weight);
  line-height: var(--lh-l);
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

/* Packages side by side: four offers, each booked on its own, sorted from small to large.
   Each part sits on a shared row, so names, texts, lists and details line up across the four. */
.package-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: calc(var(--gap) * 0.5);
  row-gap: 64px;
}
.package {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  padding: 1.1em 1.1em 1.5em;
  border-top: 1px solid var(--ink);
  transition: background-color 0.3s ease;
}
@supports (grid-template-rows: subgrid) {
  .package { display: grid; grid-row: span 9; grid-template-rows: subgrid; row-gap: 1.1em; }
}
.package-body,
.package-top,
.package-name,
.package-copy,
.package-lists { display: contents; }   /* their parts sit straight on the shared rows */
@media (hover: hover) and (pointer: fine) {
  .package:hover { background: rgb(255 255 255 / 0.22); }
}
.package-meta {
  display: flex;
  align-items: center;
  gap: 1em;
  min-height: 1.9em;
  font-size: var(--text-s);
  letter-spacing: 0.02em;
}
.package h3 {
  margin: 0;
  font-size: clamp(24px, 2vw, 36px);
  font-weight: var(--weight);
  line-height: 1.05;
  text-transform: uppercase;
}
.package-kick {
  font-size: var(--text-s);
  letter-spacing: 0.04em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.package-copy p { font-size: var(--text-m); line-height: 1.45; }
.package-copy .package-line { font-style: italic; }
.package-label {
  display: block;
  margin-bottom: 0.5em;
  font-size: var(--text-s);
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.package-lists ul { font-size: var(--text-m); line-height: 1.5; }
.package-lists li { position: relative; padding-left: 1em; }
.package-lists li::before { content: "·"; position: absolute; left: 0.1em; }
.package-detail {                 /* the details at the foot of each package */
  display: grid;
  gap: 0.15em;
  padding-top: 0.85em;
  border-top: 1px solid var(--rule);
  font-size: var(--text-m);
  font-style: italic;
  line-height: 1.45;
}
.package-link {
  justify-self: start;
  align-self: end;
  font-size: var(--text-s);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
}
.package-link::after { content: " →"; }

.ongoing {                        /* a monthly offer, booked on its own: a quiet tinted band under the four */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* the same columns as the packages above */
  column-gap: calc(var(--gap) * 0.5);
  row-gap: 1.1em;
  align-items: start;
  margin-top: clamp(72px, 6.5vw, 120px);
  padding: 1.1em 0 1.5em;
  border-top: 1px solid var(--ink);
  background: rgb(255 255 255 / 0.2);
}
.ongoing > * { padding: 0 1.1em; }   /* the same inset as the package texts, so the columns line up */
.ongoing-head { grid-column: 1 / span 2; }
.ongoing-kick {
  display: block;
  margin-bottom: 0.9em;
  font-size: var(--text-s);
  letter-spacing: 0.04em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ongoing h3 {
  margin: 0;
  font-size: clamp(24px, 2vw, 36px);
  font-weight: var(--weight);
  line-height: 1.05;
  text-transform: uppercase;
}
.ongoing-text { grid-column: 3; font-size: var(--text-m); line-height: 1.45; }
.ongoing-aside { grid-column: 4; display: grid; gap: 1.1em; justify-items: start; }
.ongoing-meta {
  font-size: var(--text-m);
  font-style: italic;
  line-height: 1.45;
}

/* Closing invitation */
.services-cta { padding-top: clamp(128px, 13vw, 240px); }
.services-cta-link {
  margin-top: 1.4em;
  font-size: var(--text-statement);
  font-style: italic;
  line-height: var(--lh-l);
}
.services-cta-link a { border-bottom: 1px solid currentColor; }
.services-cta-link a::after { content: " →"; }

/* ---------- About ---------- */

.about {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--gap);
  padding: var(--intro-top) var(--pad) 0;
  align-items: start;
}
.about-portrait { grid-column: 1; }
.about-portrait.is-natural { aspect-ratio: auto; }          /* the whole photo, uncropped */
.about-portrait.is-natural img { position: static; width: 100%; height: auto; }
.about-portrait.is-natural .tile-alt { position: absolute; height: 100%; }   /* the second portrait lies exactly on top */
.tile-media.is-auto .tile-alt { animation: portrait-swap 10s ease-in-out infinite; }   /* About and Connect portraits: about 4 seconds each */
@keyframes portrait-swap {
  0%, 40% { opacity: 0; }
  50%, 90% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tile-media.is-auto .tile-alt { animation: none; }
}
.about > .tile-media.is-wide { grid-column: span 2; aspect-ratio: auto; }   /* landscape shot, uncropped */
.about > .tile-media.is-wide img { position: static; height: auto; }
.about-text {
  grid-column: 2 / span 2;
  font-size: var(--text-l);
  line-height: var(--lh-l);
}
.about-text p + p { margin-top: 1em; }
.about-details {
  grid-column: 4;
  display: grid;
  gap: 2em;
  font-size: var(--text-s);
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-transform: uppercase;
}
.about-details h2 {
  margin-bottom: 0.4em;
  font-size: inherit;
  color: var(--ink-soft);
}

/* ---------- Selected clients (About) ---------- */

.clients {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
  /* extra breathing room (about 80px on desktop) between the About text and the client list */
  padding: calc(var(--intro-bottom) + clamp(48px, 5.6vw, 80px)) var(--pad) 0;
  align-items: start;
}
.clients h2 {                     /* same label style as the About details */
  grid-column: 1;
  font-size: var(--text-s);
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.clients-list {                   /* three columns that line up with the grid */
  grid-column: 2 / span 3;
  columns: 3;
  column-gap: var(--gap);
  font-size: var(--text-s);
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.clients-list li { break-inside: avoid; }

/* ---------- Press, interviews & cooperations (About) ---------- */

.press {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
  padding: clamp(48px, 5.6vw, 80px) var(--pad) 0;   /* about 80px below the client list */
  align-items: start;
}
.press h2,
.press h3 {                       /* same label style as Selected Clients */
  font-size: var(--text-s);
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.press h2 { grid-column: 1; }
.press-lists {                    /* the groups flow through three grid-aligned columns */
  grid-column: 2 / span 3;
  columns: 3;
  column-gap: var(--gap);
  font-size: var(--text-s);
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.press-group { break-inside: avoid; }
.press-group + .press-group { margin-top: 1.5em; }
.press-group h3 { break-after: avoid; }
.press-group.press-group-founder { break-before: column; margin-top: 0; }   /* its own column, on the right */
.press-note + ul { margin-top: 1.4em; }   /* the next name in the same group */
.press-note {                     /* a short line in normal case under the name */
  margin-top: 0.6em;
  max-width: 32ch;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
}
.press-group li,
.press-lists > li { break-inside: avoid; }

/* ---------- Connect ---------- */

.connect-page { padding: var(--intro-top) var(--pad) 0; }
.connect-hero,
.connect-start {                  /* the same four-column grid as the About page */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--gap);
  align-items: start;
}
.connect-portrait { grid-column: 1; }
.connect-intro { grid-column: 2 / span 3; }

.connect-headline {
  margin: 0;
  max-width: 15em;
  font-size: clamp(28px, 3.3vw, 56px);
  font-style: italic;
  font-weight: var(--weight);
  line-height: 1.06;
  text-wrap: balance;
}
.connect-for {
  margin-top: 1em;
  max-width: 30em;
  font-size: var(--text-l);
  line-height: var(--lh-l);
}

.connect-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap);
  margin: clamp(40px, 4.4vw, 80px) 0 0;
  padding: 1.1em 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}
.connect-step-num { font-size: var(--text-s); color: var(--ink-soft); }
.connect-steps h3 {
  margin: 0.6em 0 0.4em;
  font-size: var(--text-s);
  font-weight: var(--weight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.connect-steps p { font-size: var(--text-m); line-height: 1.35; }
.connect-book,
.project-cta a {
  border-bottom: 1px solid currentColor;
}
.connect-book {
  display: inline-block;
  margin-top: 0.8em;
  font-size: var(--text-s);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.connect-book::after,
.project-cta a::after { content: " →"; }


.connect-start {
  margin-top: clamp(96px, 10vw, 180px);
  scroll-margin-top: 5rem;
}
.connect-form { grid-column: 2 / span 3; grid-row: 1; }
.connect-direct { grid-column: 1; grid-row: 1; }
.connect-form h2 {
  margin-bottom: 1.1em;
  font-size: clamp(24px, 2.4vw, 40px);
  font-style: italic;
  font-weight: var(--weight);
  line-height: 1.1;
}
.connect-direct h2,
.field > span,
.choices legend,
.connect-contact dt {
  display: block;
  font-size: var(--text-s);
  font-weight: var(--weight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.connect-direct h2 { margin: 0.9em 0 1.4em; }   /* lines up with the form's first fields */
.connect-contact { margin: 0; overflow-wrap: anywhere; }
.connect-contact > div { padding: 0.75em 0; border-top: 1px solid var(--rule); }
.connect-contact > div:last-child { border-bottom: 1px solid var(--rule); }
.connect-contact dd { margin: 0.3em 0 0; font-size: var(--text-m); }
.connect-direct .connect-photo { width: 64%; margin-top: 2.4em; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
.field { display: block; margin-bottom: 1.7em; }
.field > span { margin-bottom: 0.5em; }
.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: 0.2em 0 0.4em;
  font: inherit;
  font-size: var(--text-l);
  line-height: var(--lh-l);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s ease;
}
.field textarea { resize: vertical; min-height: 5.2em; }
.field input:focus,
.field textarea:focus { border-bottom-color: var(--ink); }
.connect-form.is-checked :is(input, textarea):invalid { border-bottom-color: #a4262c; }

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 0 0 1.9em;
  padding: 0;
  border: 0;
}
.choices legend { width: 100%; margin-bottom: 0.75em; padding: 0; }
.choices label { position: relative; cursor: pointer; }
.choices input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.choices label span {             /* pill buttons; filled when chosen */
  display: inline-block;
  padding: 0.42em 1em 0.48em;
  font-size: var(--text-m);
  border: 1px solid var(--rule);
  border-radius: 999px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.choices label:hover span { border-color: var(--ink); }
.choices input:checked + span { background: var(--ink); border-color: transparent; color: #fff; }
.choices input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

.form-end { display: flex; flex-wrap: wrap; align-items: center; gap: 1em 1.6em; margin-top: 0.4em; }
.connect-form button {
  padding: 1em 2.4em;
  font: inherit;
  font-size: var(--text-s);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.connect-form button::after { content: " →"; }
.connect-form button:hover,
.connect-form button:focus-visible { background: var(--ink); color: #fff; }
.connect-form button:disabled { opacity: 0.5; cursor: progress; }
.form-note { max-width: 30em; font-size: var(--text-s); line-height: 1.45; color: var(--ink-soft); }
.form-note a { border-bottom: 1px solid currentColor; }
.form-status:not(:empty) { margin-top: 1.4em; font-size: var(--text-l); font-style: italic; line-height: var(--lh-l); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Under each project: an invitation to start one */
.project-cta {
  padding: clamp(80px, 8vw, 150px) var(--pad) 0;
  font-size: var(--text-statement);
  font-style: italic;
  line-height: var(--lh-l);
  text-align: center;
}

/* ---------- Imprint & Privacy ---------- */

.legal {                          /* label on the left, text across the two middle columns */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 2.4em;
  padding: 0 var(--pad);
  align-items: baseline;
}
.legal h2 {                       /* same label style as Selected Clients */
  grid-column: 1;
  font-size: var(--text-s);
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.legal-text { grid-column: 2 / span 2; overflow-wrap: anywhere; }   /* long web addresses wrap on phones */
.legal-text p + p { margin-top: 0.8em; }

/* ---------- Footer ---------- */

.site-footer {
  margin-top: clamp(120px, 14vw, 280px);
  padding: 0 var(--pad) calc(var(--pad) * 0.9);
  /* Clip sideways only: the name's capitals rise above its tight line box,
     so clipping the top as well would slice them off */
  overflow-x: clip;
}
.footer-name {
  display: block;
  width: 100%;
  font-size: 12.4vw;             /* JS refines this so the name spans edge to edge */
  line-height: 0.8;
  letter-spacing: -0.015em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.footer-name {                   /* outline only: the SVG filter in each page keeps just the letters' outer edge,
                                    so the font's overlapping shapes leave no lines inside the letters */
  filter: url("#outline-text");
}
.footer-name:hover { opacity: 1; }
.footer-meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  margin-top: 1.6em;
  font-size: var(--text-s);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.footer-meta > :last-child { justify-self: end; }
.footer-legal { display: flex; flex-wrap: wrap; column-gap: 1.6em; }
@media (min-width: 761px) {       /* four items spread evenly across the width */
  .footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6em 1.6em; }
  .footer-meta .footer-legal,
  .footer-meta .footer-social { display: contents; }   /* every footer item gets the same even spacing */
}
.footer-social { display: flex; flex-wrap: wrap; column-gap: 1.6em; }

/* Playlist link: three tiny bars bouncing like a music equaliser */
.music-link { white-space: nowrap; }
.eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.12em;
  height: 0.75em;
  margin-right: 0.45em;
}
.eq i {
  width: 0.14em;
  height: 100%;
  background: currentColor;
  transform-origin: bottom;
  animation: eq 1.2s ease-in-out infinite;
}
.eq i:nth-child(2) { animation-delay: -0.45s; }
.eq i:nth-child(3) { animation-delay: -0.8s; }
@keyframes eq {
  0%, 100% { transform: scaleY(0.3); }
  50%      { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .eq i { animation: none; transform: scaleY(0.6); }
}

/* ---------- Cursor (mouse and trackpad only; JS adds .has-custom-cursor) ---------- */

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;      /* centre of the flower sits on the pointer */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  will-change: transform;
}
.custom-cursor > span {           /* twirl layer: turns occasionally over text (see main.js) */
  position: absolute;
  inset: 0;
}
.custom-cursor > span::before {   /* the flower itself, turning slowly like a wheel */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: url("cursor.png") center / 100% 100% no-repeat;  /* 128px source, sharp on retina */
  animation: cursor-spin 6s linear infinite;
}
@keyframes cursor-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .custom-cursor > span::before { animation: none; }
}
.custom-cursor.is-visible { opacity: 1; }
html:has(.call-badge:hover) .custom-cursor > span::before { filter: invert(1); }   /* light flower on the dark badge */

@media (hover: hover) and (pointer: fine) {
  html.has-custom-cursor,
  html.has-custom-cursor * { cursor: none !important; }
}

/* ---------- Flower stamps (a click on an empty spot) ---------- */

.flower-stamps {                  /* sits on the page background, beneath all content */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: -1;
  pointer-events: none;
}
.flower-stamp {
  position: absolute;
  width: 40px;                    /* same size and graphic as the cursor */
  height: 40px;
  margin: -20px 0 0 -20px;        /* centred on the click */
  background: url("cursor.png") center / 100% 100% no-repeat;
  pointer-events: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .package-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ongoing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ongoing-head { grid-column: 1 / -1; }
  .ongoing-text { grid-column: 1; }
  .ongoing-aside { grid-column: 2; }
  .about { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-text { grid-column: 2 / span 2; }
  .about-details { grid-column: 2 / span 2; grid-template-columns: 1fr 1fr; }
  .clients { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .clients-list { grid-column: 2 / span 2; columns: 2; }
  .press { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .press-lists { grid-column: 2 / span 2; columns: 2; }
  .press-group.press-group-founder { break-before: auto; margin-top: 1.5em; }
  .legal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .connect-hero,
  .connect-start { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .connect-intro,
  .connect-form { grid-column: 2 / span 2; }
  .connect-steps { grid-template-columns: 1fr; row-gap: 1.4em; }
}

@media (max-width: 760px) {
  :root {
    --pad: 16px;
    --gap: 14px;
    --text-l: 16px;
    --text-statement: 16px;
    --text-m: 16px;
    --text-s: 11.5px;
    --intro-top: 9.5rem;
    --intro-bottom: 3.5rem;
  }

  .site-header {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand connect"
      "nav nav";
    row-gap: 0.55em;
    font-size: 15px;
  }
  .site-header::before {                     /* text scrolling under the two header rows blurs away instead of colliding with them */
    content: "";
    position: absolute;
    inset: 0 0 -16px 0;
    z-index: -1;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(#000 72%, transparent);
    mask-image: linear-gradient(#000 72%, transparent);
  }
  .nav ul { justify-content: center; }

  .wide-only { display: none; }

  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .services { grid-template-columns: 1fr; row-gap: 48px; }
  .service { display: block; }
  .package-list { grid-template-columns: 1fr; row-gap: 40px; }
  .package { display: flex; }
  .package-link { align-self: flex-start; }   /* in the stacked column: on the left */
  .ongoing { grid-template-columns: 1fr; }
  .ongoing > * { grid-column: 1; }

  /* On a phone each row is client and location on one line, the discipline smaller underneath.
     Linked rows keep their cells inside the link (display: contents), hence the "> a >" twins. */
  .index-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.3em; font-size: 15px; }
  .index-row span { overflow-wrap: break-word; }
  .index-row > span:nth-child(1),
  .index-row > a > span:nth-child(1),
  .index-row.is-head > span:nth-child(3) { display: none; }
  .index-row > span:nth-child(2),
  .index-row > a > span:nth-child(2) { grid-column: 1; grid-row: 1; }
  .index-row > span:nth-child(4),
  .index-row > a > span:nth-child(4) { grid-column: 2; grid-row: 1; }
  .index-row > span:nth-child(3),
  .index-row > a > span:nth-child(3) { grid-column: 1 / -1; grid-row: 2; font-size: 12px; letter-spacing: 0.02em; color: var(--ink-soft); }

  .about { grid-template-columns: 1fr; }
  .about-portrait,
  .about-text,
  .about-details { grid-column: 1; }
  .about-portrait { width: 70%; }
  .about > .tile-media.is-wide { grid-column: 1; }

  .clients { grid-template-columns: 1fr; row-gap: 0.6em; }
  .clients h2,
  .clients-list { grid-column: 1; }
  .clients-list { columns: 2; }

  .press { grid-template-columns: 1fr; row-gap: 0.6em; }
  .press h2,
  .press-lists { grid-column: 1; }
  .press-lists { columns: 2; }


  .connect-hero,
  .connect-start { grid-template-columns: 1fr; }
  .connect-portrait,
  .connect-intro,
  .connect-form,
  .connect-direct { grid-column: 1; grid-row: auto; }
  .connect-portrait { width: 62%; }
  .connect-intro { margin-top: 1.2em; }   /* air between the photo and the headline */
  .connect-headline { font-size: 30px; }
  .field-row { grid-template-columns: 1fr; }
  .connect-direct { margin-top: 2.5em; }
  .connect-direct h2 { margin-top: 0; }

  .legal { grid-template-columns: 1fr; row-gap: 0.6em; }
  .legal h2,
  .legal-text { grid-column: 1; }
  .legal-text + h2 { margin-top: 1.8em; }


  .footer-meta {
    grid-template-columns: 1fr 1fr;
    row-gap: 0.6em;
  }
  .footer-meta > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

.flower-burst {                   /* the flowers that bloom out when someone clicks the email on Connect */
  position: fixed;
  z-index: 1000;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  background: url("cursor.png") center / 100% 100% no-repeat;
  pointer-events: none;
}

/* ---------- Project page: previous / next project ---------- */

.project-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
  padding: clamp(48px, 5.6vw, 80px) var(--pad) 0;
  font-size: var(--text-s);
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-transform: uppercase;
}
.project-nav a { display: flex; flex-direction: column; gap: 0.35em; max-width: 45%; }
.project-nav .is-next { margin-left: auto; align-items: flex-end; text-align: right; }
.project-nav small { font-size: inherit; color: var(--ink-soft); }