/* ==========================================================================
   Snails Studio — design system (Figma file: Snails Studio Branding)
   ========================================================================== */

@font-face {
  font-family: "Crazy Blocks";
  src: url("assets/crazy-blocks.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Brand constants (never flip) live on :root; everything the page actually
   paints with goes through the semantic tokens below, which the theme swaps.
   Ink and ground are also exposed as raw rgb triples so alpha values can be
   derived — rgba(var(--ink-rgb), .5) — instead of hardcoded per theme. */
:root {
  --noir: #0a0a0a;
  --beige: #f2e8d5;
  --beige-soft: #e9e1d6;
  --sauge: #7f8f6c;
  --orange: #ff8a3d;
  --violet: #b68aff;

  /* ---- theme: dark (default) ---- */
  color-scheme: dark;

  --ground: var(--noir);
  --ground-rgb: 10, 10, 10;
  --ink: var(--beige);
  --ink-rgb: 242, 232, 213;
  --ink-strong: rgba(255, 255, 255, 0.85);
  --ink-soft: var(--beige-soft);

  /* accents, tuned per theme so they stay legible on the ground */
  --accent: var(--sauge);
  --accent-warm: var(--orange);
  /* Violet Acide marks the reader's own position and actions — progress,
     current section, selection, focus, open state. Sauge labels content;
     orange calls to action. Keeping it to one job stops it becoming decor. */
  --accent-alt: var(--violet);
  --accent-alt-ink: var(--noir);
  --accent-alt-rgb: 182, 138, 255;
  --danger: #b3402c;

  /* collaboration card — a deepened sauge, so beige ink clears 4.5:1 on it;
     it stays the same block of colour in both themes */
  --surface: #4a5740;
  --surface-ink: var(--beige);
  --surface-ink-rgb: 242, 232, 213;
  /* contact card + its form */
  --panel: var(--beige);
  --panel-ink-rgb: 10, 10, 10;
  --panel-field-tint: rgba(255, 255, 255, 0.55);
  --panel-field: rgba(255, 255, 255, 0.48);
  --panel-field-focus: rgba(255, 255, 255, 0.82);

  --ink-75: rgba(var(--ink-rgb), 0.75);
  --ink-70: rgba(var(--ink-rgb), 0.7);
  --ink-50: rgba(var(--ink-rgb), 0.5);
  --ink-40: rgba(var(--ink-rgb), 0.4);
  --line: rgba(var(--ink-rgb), 0.2);
  --line-soft: rgba(var(--ink-rgb), 0.15);
  --pill-line: rgba(var(--ink-rgb), 0.25);

  --dark-70: rgba(var(--panel-ink-rgb), 0.7);
  --dark-60: rgba(var(--panel-ink-rgb), 0.6);
  --dark-line: rgba(var(--panel-ink-rgb), 0.2);

  --display: "Crazy Blocks", "Bagel Fat One", system-ui, sans-serif;
  --fat: "Bagel Fat One", "Crazy Blocks", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;
  --sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 3.8vw, 40px);
  --shell: 1052px;
  --radius-card: clamp(20px, 3.8vw, 40px);
  /* Section glyphs share one size and one anchor: top-right, level with the
     first line of the section heading. */
  --glyph-size: clamp(64px, 7.5vw, 92px);
  --glyph-inset: clamp(0px, 6vw, 80px);
  --section-pad: clamp(64px, 10vw, 112px);
}

/* ---- theme: light ----
   Ground and ink invert. The accents cannot: Orange Bave and Vert Sauge both
   fall under 3:1 on a beige ground, so each gets a deepened variant that
   keeps the same hue at a legible contrast. The two cards invert with the
   page, which keeps their "this block is the other colour" role intact. */
[data-theme="light"] {
  color-scheme: light;

  --ground: var(--beige);
  --ground-rgb: 242, 232, 213;
  --ink: var(--noir);
  --ink-rgb: 10, 10, 10;
  --ink-strong: rgba(0, 0, 0, 0.9);
  --ink-soft: #2b2b28;

  --accent: #4f5c3e;
  --accent-warm: #b4551d;
  /* raw Violet Acide is 2.1:1 on the beige ground — deepened to clear 4.5:1 */
  --accent-alt: #7d4fd6;
  --accent-alt-ink: var(--beige);
  --accent-alt-rgb: 125, 79, 214;
  --danger: #e8705c;

  --panel: var(--noir);
  --panel-ink-rgb: 242, 232, 213;
  --panel-field-tint: rgba(242, 232, 213, 0.07);
  --panel-field: rgba(255, 255, 255, 0.08);
  --panel-field-focus: rgba(255, 255, 255, 0.14);
}

* { box-sizing: border-box; }

/* Quiet, theme-aware scrollbars for the page, dialogs and form fields. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ink-40) var(--ground);
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ground); }
::-webkit-scrollbar-thumb {
  background: var(--ink-40);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-alt); }
::-webkit-scrollbar-corner { background: var(--ground); }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--accent-alt); color: var(--accent-alt-ink); }

:focus-visible {
  outline: 2px solid var(--accent-alt);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--ground);
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }

/* --------------------------------------------------------------------------
   Type primitives
   -------------------------------------------------------------------------- */

.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.57;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
}

.display-mid {
  font-size: clamp(3.4rem, 10.5vw, 6.875rem); /* 110px */
  line-height: 0.78;
}

.fat {
  font-family: var(--fat);
  font-weight: 400;
  letter-spacing: -0.005em;
}

.fat-96 { font-size: clamp(2.6rem, 9.2vw, 6rem); line-height: 1; }
.fat-60 { font-size: clamp(2rem, 5.7vw, 3.75rem); line-height: 1; }
.fat-36 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); line-height: 1.11; }
.fat-24 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1; }

.mono-label {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.16em;
  color: var(--ink-50);
}
/* the theme-aware accent, not the raw brand hex: #7f8f6c only reaches 2.86:1
   on the beige ground, which 11px bold cannot carry */
.mono-label.sauge { color: var(--accent); }
.mono-label.dark { color: var(--dark-70); }

.lead {
  font-size: clamp(1.125rem, 1.9vw, 1.25rem);
  line-height: 1.625;
  color: var(--ink-75);
}
p strong, li strong { font-weight: 600; }

.accent { color: var(--accent); }
.orange { color: var(--accent-warm); }

/* --------------------------------------------------------------------------
   Pills
   -------------------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--pill-line);
  border-radius: 999px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: rgba(var(--ink-rgb), 0.8);
  white-space: nowrap;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.pill:hover {
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(-1px);
}

.pill-solid {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--noir);
  font-family: var(--fat);
  font-size: 15px;
  letter-spacing: 0.14em;
  height: 40px;
  padding: 0 18px;
  text-transform: uppercase;
}
.pill-solid:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ground);
}

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

.site-header {
  position: sticky;
  top: 0;
  /* Stays above the mobile menu panel (z-index 45) so the close button
     remains reachable. No backdrop-filter here: it would create a
     containing block and trap the panel's `position: fixed` inside the bar. */
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 66.5px;
  padding: 0 var(--gutter);
  background: rgba(var(--ground-rgb), 0.92);
  transition: border-color 0.3s ease, background 0.3s ease;
  border-bottom: 1px solid transparent;
}
body.menu-open .site-header { background: var(--ground); }
body.menu-open .header-section { opacity: 0; }
.site-header.is-stuck { border-bottom-color: var(--line-soft); }

.brand { position: relative; z-index: 50; }
.brand img { width: 74px; height: auto; }

.nav {
  display: flex;
  gap: 8px;
  margin: 0 auto;
}

.header-cta { margin-left: auto; min-height: 40px; font-size: 13px; }
.nav + .header-cta { margin-left: 0; }

/* The wordmark, blob glyphs and the arrow icon are all beige artwork, so on
   a beige ground they vanish. Darkening rather than inverting keeps their
   internal shading (and stays warm, not blue). Artwork sitting on a card
   keeps its own contrast and is excluded. */
[data-theme="light"] .brand img,
[data-theme="light"] .footer-logo,
[data-theme="light"] .glyph,
[data-theme="light"] .nav-glyph,
[data-theme="light"] .trail-snail,
[data-theme="light"] .blob-circle img { filter: brightness(0.14); }
/* the collaboration card keeps the dark ground in both themes, so its glyph
   stays beige instead of being darkened with the rest of the artwork */
[data-theme="light"] .glyph-collaboration { filter: none; }

/* Theme switch — blob radius, like every other round thing on the site.
   Shows the icon of the theme you would switch TO. */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 34.5px;
  min-height: 40px;
  padding: 0;
  border: 1px solid var(--pill-line);
  border-radius: 44px 56px 62px 38px;
  background: none;
  color: rgba(var(--ink-rgb), 0.8);
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.theme-toggle:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .theme-sun { fill: currentColor; }
.theme-toggle .theme-rays path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}
.theme-toggle .theme-moon { fill: currentColor; display: none; }

/* in light mode the button offers the way back to dark */
[data-theme="light"] .theme-toggle .theme-sun,
[data-theme="light"] .theme-toggle .theme-rays { display: none; }
[data-theme="light"] .theme-toggle .theme-moon { display: block; }

.menu-toggle {
  display: none;
  width: 40px;
  height: 34px;
  border: 1px solid var(--pill-line);
  border-radius: 999px;
  background: none;
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.menu-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

main > section {
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-top: clamp(56px, 6.5vw, 112px);
  padding-bottom: clamp(48px, 7vw, 96px);
}

.hero-display {
  font-size: clamp(3rem, 13.2vw, 9.375rem); /* 150px */
  line-height: 0.78;
  margin-bottom: clamp(48px, 8vw, 104px);
}
.hero-display .line { display: block; }
.hero-display .line-a { margin-left: 27%; }
.hero-display .line-b { margin-left: 15%; }
.hero-display .line-c { margin-left: 23%; color: var(--ink-soft); }
.hero-display .line-d { margin-left: 26%; color: var(--ink-soft); }
/* the conclusion of the syllogism: set apart from the two premises, and
   carrying both accent words back together */
.hero-display .line-e { margin-left: 11%; margin-top: 0.14em; }
.hero-display em { font-style: normal; }

/* sits just above the hero rule, like the section labels further down */
.hero-label {
  margin-top: clamp(40px, 6vw, 72px);
  margin-bottom: 12px;
}

.hero-foot {
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.hero-foot .lead { max-width: 534px; }

.blob-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: var(--ink);
}
.blob-circle {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border: 1px solid rgba(var(--ink-rgb), 0.3);
  border-radius: 44px 56px 62px 38px;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1), border-color 0.3s ease, background 0.3s ease;
}
.blob-circle img { width: 16px; height: 16px; }
.blob-link:hover .blob-circle {
  border-radius: 56px 38px 44px 62px;
  border-color: var(--orange);
  background: rgba(255, 138, 61, 0.12);
  transform: translateY(3px);
}

/* --------------------------------------------------------------------------
   Method
   -------------------------------------------------------------------------- */

.method {
  position: relative;
  padding-top: clamp(64px, 10vw, 112px);
  padding-bottom: clamp(64px, 10vw, 112px);
}

.glyph {
  display: block;
  width: auto;
  height: var(--glyph-size);
  pointer-events: none;
}
.method-aside {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
}
/* Section glyphs are optically normalised, not box-matched: the artwork has no
   transparent padding, so a shared height would make the landscape "ae" read
   twice the mass of the sparse expertise spiral. Each factor equalises ink and
   box area against glyph-1 (the method snail), which keeps its 1.35. */
.glyph-methode {
  height: calc(var(--glyph-size) * 1.35);
  opacity: 0.95;
  animation: sway 14s ease-in-out infinite;
}

.method-title {
  text-align: left;
  margin-bottom: 40px;
}
.method-title .line { display: block; }
.method-body > .lead { max-width: 620px; margin: 0 0 88px; text-align: left; }
.method-body > .mono-label { margin-bottom: 20px; }

/* a break that only exists on phones, where the line would otherwise wrap
   mid-sentence */
.br-phone { display: none; }

@keyframes sway {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-14px) rotate(2deg); }
}

.step-list { border-top: 1px solid var(--line); }
.step {
  display: grid;
  grid-template-columns: 80px 204px 1fr;
  gap: 0 0;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.step .mono-label { padding-top: 4px; }
.step h3 { color: var(--ink); }
.step p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-70);
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Expertise
   -------------------------------------------------------------------------- */

.expertise {
  position: relative;
  padding-top: clamp(64px, 10vw, 112px);
  padding-bottom: clamp(64px, 10vw, 112px);
}

.glyph-float {
  height: calc(var(--glyph-size) * 1.556);
  margin: 0 0 20px;
  animation: sway 16s ease-in-out infinite;
}

.expertise-title {
  text-align: left;
  margin-bottom: 24px;
}
.expertise-title .line { display: block; }
.expertise-title em {
  font-style: normal;
  font-size: 1.05em;
  letter-spacing: 0;
  margin-right: 0.12em;
}

.expertise-sub {
  max-width: 47ch;
  margin: 0 0 clamp(48px, 8vw, 78px);
  text-align: left;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-70);
}

.expertise > .mono-label { margin-bottom: 24px; }

.rows { border-top: 1px solid var(--line); }

.row {
  display: grid;
  grid-template-columns: 386px 1fr 219px;
  column-gap: 32px;
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
}
.row-head { display: grid; gap: 16px; }
.row-head h3 { color: var(--ink); }

.row-copy {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-75);
  max-width: 36ch;
}

.dot-list { display: grid; gap: 8px; align-content: start; }
.dot-list li {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-70);
}
.dot-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ink);
}

.team-note {
  margin-top: 40px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-70);
  max-width: 60ch;
}

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

.projects {
  padding-top: clamp(64px, 10vw, 114px);
  padding-bottom: clamp(64px, 10vw, 114px);
}

.projects-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 56px;
}
.glyph-projets {
  height: calc(var(--glyph-size) * 1.485);
  animation: sway 18s ease-in-out infinite;
}

/* Visible arrow controls keep the industry rail usable with a mouse. */
.industry-navigation {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.industry-arrow {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--pill-line);
  border-radius: 44% 56% 52% 48%;
  background: var(--accent-alt);
  color: var(--ground);
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.industry-arrow svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.industry-arrow:hover:not(:disabled) { transform: translateY(-2px); background: var(--ink); }
.industry-arrow:disabled { background: transparent; color: var(--ink-40); cursor: default; }
@media (max-width: 520px) {
  .industry-navigation { display: grid; grid-template-columns: 1fr 44px 44px; gap: 8px; }
  .industry-arrow { grid-row: 1; }
  [data-industry-prev] { grid-column: 2; }
  [data-industry-next] { grid-column: 3; }
  .industry-navigation .project-tabs { grid-column: 1 / -1; grid-row: 2; }
}

/* Sector tabs — native touch/trackpad scrolling remains available. */
.project-tabs {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 4px;
}
.project-tabs::-webkit-scrollbar { display: none; }
[data-scroll-hint]:not([data-scroll-end]) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent);
}

.project-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--pill-line);
  border-radius: 999px;
  background: none;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.8);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.project-tab:hover { border-color: var(--ink); color: var(--ink); }
.project-tab .tab-count { color: var(--ink-50); font-size: 12px; }

.project-tab.is-active {
  background: rgba(var(--ink-rgb), 0.08);
  border-color: var(--ink);
  color: var(--ink);
}
.project-tab.is-active .tab-count { color: var(--accent); }

/* Logo wall */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.client-card {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 28px 24px 24px;
  border: 1px solid var(--line);
  border-radius: 28px 34px 30px 36px;
  background: rgba(var(--ink-rgb), 0.03);
  text-align: left;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.client-card:hover {
  background: rgba(var(--ink-rgb), 0.07);
  border-color: rgba(var(--ink-rgb), 0.35);
  transform: translateY(-3px);
}

/* Client mark lane. Every card reserves the same 40px band so a wordmark logo
   and a two-letter fallback sit on one baseline across the grid. Logos are
   painted as masks in --ink, never in their own colours: the brand palette
   stays intact and light mode inverts them for free. */
.client-mark {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 40px;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--ink-50);
  transition: color 0.3s ease, opacity 0.3s ease;
}
.client-card:hover .client-mark { color: var(--ink); }

.client-mark-logo {
  width: 132px;
  background: var(--ink);
  opacity: 0.82;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: left center;
          mask-position: left center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.client-card:hover .client-mark-logo { opacity: 1; }

.client-mark-logo[data-logo="wcf"] {
  -webkit-mask-image: url("assets/clients/wcf.png");
          mask-image: url("assets/clients/wcf.png");
}
.client-mark-logo[data-logo="cleanmania"] {
  -webkit-mask-image: url("assets/clients/cleanmania.png");
          mask-image: url("assets/clients/cleanmania.png");
}
.client-mark-logo[data-logo="pimprenelle"] {
  -webkit-mask-image: url("assets/clients/pimprenelle.png");
          mask-image: url("assets/clients/pimprenelle.png");
}
.client-mark-logo[data-logo="contraste"] {
  -webkit-mask-image: url("assets/clients/contraste.png");
          mask-image: url("assets/clients/contraste.png");
}
.client-mark-logo[data-logo="elia"] {
  -webkit-mask-image: url("assets/clients/elia.png");
          mask-image: url("assets/clients/elia.png");
}
.client-mark-logo[data-logo="alpaga"] {
  -webkit-mask-image: url("assets/clients/alpaga.png");
          mask-image: url("assets/clients/alpaga.png");
}
.client-mark-logo[data-logo="publicis"] {
  -webkit-mask-image: url("assets/clients/publicis.svg");
          mask-image: url("assets/clients/publicis.svg");
}
.client-mark-logo[data-logo="gump"] {
  -webkit-mask-image: url("assets/clients/gump.png");
          mask-image: url("assets/clients/gump.png");
}

.client-name { font-size: 24px; line-height: 1.1; color: var(--ink); }
.client-open {
  color: var(--accent-warm);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.client-card:hover .client-open,
.client-card:focus-visible .client-open { opacity: 1; transform: none; }

.project-empty {
  padding: 40px 0;
  font-size: 18px;
  color: var(--ink-70);
}
.project-empty a { color: var(--accent-warm); }

.case-studies { display: none; }

/* Case-study dialog — full-bleed. The dialog is the viewport; the copy
   stays in a reading column so full screen never means full-width text. */
.case-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  /* the UA caps a dialog at calc(100% - 6px - 2em) in both axes */
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  overflow: hidden;
}
.case-dialog::backdrop { background: rgba(0, 0, 0, 0.72); }

.case-dialog-body {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: clamp(88px, 12vh, 140px) var(--gutter) clamp(64px, 12vh, 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.case-dialog-body .case {
  max-width: 760px;
  margin: 0 auto;
}

/* Same organic texture as the cards, so the modal stays in the family */
.case-dialog::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/figma/blob-bg.webp") center / cover no-repeat;
  /* far quieter than on the cards: here it sits behind body copy */
  opacity: 0.07;
  pointer-events: none;
}

.case-close {
  position: fixed;
  top: clamp(16px, 3vw, 32px);
  right: clamp(16px, 3vw, 32px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(52px, 6vw, 64px);
  height: clamp(52px, 6vw, 64px);
  border: 1px solid rgba(var(--ink-rgb), 0.25);
  border-radius: 44% 56% 62% 38%;
  background: rgba(var(--ink-rgb), 0.06);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.4s ease;
}
.case-close svg { width: 40%; height: 40%; }
.case-close svg path { stroke: currentColor; stroke-width: 1.6; }
.case-close:hover {
  background: var(--accent-warm);
  border-color: var(--accent-warm);
  color: var(--noir);
  border-radius: 58% 42% 38% 62%;
  transform: rotate(90deg);
}

/* Sector label left, client mark right, on one line above the title. In the
   flow, so it can never meet the close button that owns the viewport corner. */
.case-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}
.case-head .case-eyebrow { margin-bottom: 0; }
.case-logo {
  flex: none;
  width: clamp(120px, 26vw, 168px);
  height: 44px;
  opacity: 0.65;
  -webkit-mask-position: right center;
          mask-position: right center;
}

.case-eyebrow { margin-bottom: 16px; }
.case-title {
  margin-bottom: 32px;
  font-size: clamp(2.25rem, 7vw, 4rem);
  line-height: 0.92;
  color: var(--ink);
}
.case-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  padding: 24px 0;
  margin-bottom: 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.case-meta dt {
  margin-bottom: 6px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.case-meta dd { font-size: 17px; line-height: 1.5; color: var(--ink); }

.case-lead {
  margin-bottom: 40px;
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.55;
  color: var(--ink-75);
}
.case-dialog-body .mono-label { display: block; margin-bottom: 14px; }
.case-list { margin-bottom: 40px; }
.case-list li { font-size: 18px; line-height: 1.65; }
.case-after {
  margin-bottom: 40px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-70);
}

/* Open / close motion. The panel rises, the backdrop fades; closing plays
   the same pair in reverse via .is-closing before the dialog is closed. */
@keyframes case-in {
  from { opacity: 0; transform: translateY(28px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes case-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(20px) scale(0.99); }
}
@keyframes case-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

.case-dialog[open] { animation: case-in 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.case-dialog[open]::backdrop { animation: case-backdrop-in 0.35s ease; }
.case-dialog.is-closing { animation: case-out 0.25s ease forwards; }
.case-dialog.is-closing::backdrop { animation: case-backdrop-in 0.25s ease reverse forwards; }

/* Content staggers in behind the panel. Guarded on no-preference so the
   `both` fill can never leave the copy at opacity 0 when motion is off. */
@media (prefers-reduced-motion: no-preference) {
  .case-dialog[open] .case > * {
    animation: case-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .case-dialog[open] .case > *:nth-child(1) { animation-delay: 0.08s; }
  .case-dialog[open] .case > *:nth-child(2) { animation-delay: 0.12s; }
  .case-dialog[open] .case > *:nth-child(3) { animation-delay: 0.16s; }
  .case-dialog[open] .case > *:nth-child(4) { animation-delay: 0.2s; }
  .case-dialog[open] .case > *:nth-child(5) { animation-delay: 0.24s; }
  .case-dialog[open] .case > *:nth-child(6) { animation-delay: 0.28s; }
  .case-dialog[open] .case > *:nth-child(n + 7) { animation-delay: 0.32s; }
}

.projects-foot {
  margin-top: 48px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-70);
}
.projects-foot .mono-label { display: block; margin-bottom: 8px; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq {
  padding-top: clamp(48px, 8vw, 96px);
  padding-bottom: clamp(48px, 8vw, 96px);
}
.faq-head { margin-bottom: 48px; }
.faq-head .mono-label { margin-bottom: 20px; }
.faq-head h2 { max-width: 14ch; }

.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  display: grid;
  grid-template-columns: 1fr 24px;
  align-items: center;
  gap: 16px;
  padding: 28px 0;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i {
  position: relative;
  width: 14px;
  height: 14px;
  justify-self: end;
}
.faq-list summary i::before,
.faq-list summary i::after {
  content: "";
  position: absolute;
  background: var(--ink-50);
  transition: transform 0.3s ease, background 0.3s ease;
}
.faq-list summary i::before { inset: 6px 0; height: 1.5px; }
.faq-list summary i::after { inset: 0 6px; width: 1.5px; }
.faq-list details[open] summary i::after { transform: scaleY(0); }
.faq-list details[open] summary i::before { background: var(--accent-alt); }
.faq-list details p {
  padding: 0 24px 28px 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-70);
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   Collaboration
   -------------------------------------------------------------------------- */

.collaboration { padding-bottom: clamp(48px, 7vw, 72px); }

.collaboration-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: clamp(28px, 4.6vw, 48px);
  isolation: isolate;

  /* derived ink tokens resolve on the element that declares them, so the
     card has to restate them against its own surface ink */
  --ink: var(--surface-ink);
  --ink-rgb: var(--surface-ink-rgb);
  --ink-75: rgba(var(--surface-ink-rgb), 0.75);
  --ink-70: rgba(var(--surface-ink-rgb), 0.7);
  --ink-50: rgba(var(--surface-ink-rgb), 0.5);
  --line: rgba(var(--surface-ink-rgb), 0.2);
  --line-soft: rgba(var(--surface-ink-rgb), 0.15);
}
.collaboration-card::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: url("assets/figma/blob-bg.webp") center / cover no-repeat;
  opacity: 0.2;
  z-index: -1;
}

.collaboration-top {
  display: grid;
  grid-template-columns: 432px 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.collaboration-top .lead { color: var(--ink-75); }

.collaboration-head {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 16px;
}
/* glyph-2 is landscape, so it needs the smallest height to carry the same
   visual mass as the others (see .glyph-methode) */
.glyph-collaboration {
  height: calc(var(--glyph-size) * 1.085);
  animation: sway 15s ease-in-out infinite;
}
.collaboration-title {
  max-width: 100%;
  /* display-mid's 110px is sized for a full-width heading; in the card it
     shares the row with the lead, so it gets its own scale */
  font-size: clamp(2.4rem, 5.2vw, 4.25rem);
  text-align: left;
  color: var(--surface-ink);
}

.collaboration-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.collaboration-point {
  border-top: 1px solid var(--dark-line);
  padding-top: 20px;
}
.collaboration-point h3 { color: var(--surface-ink); margin-bottom: 12px; }
.collaboration-point p {
  font-size: 16px;
  line-height: 22.75px;
  color: var(--ink-70);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact { padding-bottom: clamp(64px, 9vw, 112px); }
.contact-card {
  --panel: var(--ground);
  --panel-ink-rgb: var(--ink-rgb);
  --dark-70: rgba(var(--panel-ink-rgb), .7);
  --dark-60: rgba(var(--panel-ink-rgb), .6);
  --dark-line: rgba(var(--panel-ink-rgb), .2);
  --danger: #e8705c;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--panel);
  color: rgba(var(--panel-ink-rgb), 1);
  padding: clamp(28px, 5vw, 64px);
  color-scheme: inherit;
}
[data-theme="light"] .contact-card { --danger: #b3402c; }
.contact-grid { display: block; }
.contact-intro { position: relative; margin-bottom: 64px; }
.contact-intro > .mono-label { margin: 0 0 32px; }
.contact-intro h2 {
  position: relative;
  width: fit-content;
  margin: 0;
  font-family: var(--fat);
  font-size: clamp(3rem, 7.4vw, 6.25rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.005em;
}
.contact-intro h2 > span { color: var(--accent-warm); }
.contact-arrow { display: inline-block; overflow: visible; width: .62em; height: .62em; margin-left: .12em; vertical-align: -.04em; color: var(--accent-warm); transform: rotate(-12deg); }
.contact-copy { margin: 28px 0 0; font-size: 17px; line-height: 1.7; color: var(--dark-70); }
.contact-form { display: grid; gap: 0; min-width: 0; }
.field { min-width: 0; margin: 0; padding: 0; border: 0; }
.contact-form > .field:not(.field-trap), .contact-person {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.65fr);
  column-gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--dark-line);
}
.field label, .field-choice legend, .contact-person-label {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(var(--panel-ink-rgb), 1);
}
.question-number { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--dark-60); }
.field-choice { position: relative; min-inline-size: 0; }
.field-choice legend { float: left; width: 100%; padding: 0; }
.choice-list { display: flex; flex-wrap: wrap; align-content: start; gap: 8px; }
.choice-list label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid rgba(var(--panel-ink-rgb), .28);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.choice-list label:hover { border-color: rgba(var(--panel-ink-rgb), 1); }
.choice-list label:has(input:checked) { background: var(--accent-alt); border-color: var(--accent-alt); color: var(--accent-alt-ink); }
.choice-list label:has(input:focus-visible) { outline: 2px solid var(--accent-alt); outline-offset: 4px; }
.choice-list input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.field input:not([type="radio"]), .field textarea, .field select {
  width: 100%;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid rgba(var(--panel-ink-rgb), .3);
  border-radius: 0;
  background: transparent;
  color: rgba(var(--panel-ink-rgb), 1);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  transition: border-color .18s ease;
}
.field textarea { resize: vertical; min-height: 84px; }
.field select { cursor: pointer; }
.field input::placeholder, .field textarea::placeholder { color: var(--dark-60); opacity: 1; }
.field input:not([type="radio"]):focus, .field textarea:focus, .field select:focus { outline: none; border-bottom: 2px solid var(--accent-alt); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--danger); }
.field-choice[aria-invalid="true"] .choice-list { outline: 1px solid var(--danger); outline-offset: 5px; border-radius: 20px; }
.field-error { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--danger); }
.contact-form > .field > .field-error { grid-column: 2; }
.field-error:empty, .form-status:empty { display: none; }
.contact-person-label { margin: 0; }
.contact-person-fields, .field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.contact-person-fields .field label, .contact-extra .field label { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--dark-60); }
.contact-extra { margin-left: calc((100% - 32px) * .8 / 2.45 + 32px); padding-bottom: 28px; }
.contact-extra summary { width: fit-content; cursor: pointer; font-size: 15px; color: var(--dark-70); }
.contact-extra summary span { margin-left: 8px; font-size: 13px; color: var(--dark-60); }
.contact-extra-fields { display: grid; gap: 24px; padding-top: 28px; }
.contact-extra .field label span { font-weight: 400; }
.field-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; padding: 0; border: 0; }
.contact-send { display: flex; align-items: center; gap: 28px; border-top: 1px solid var(--dark-line); padding-top: 32px; }
.mail-pill { display: inline-flex; align-items: center; border-radius: 999px; }
.form-submit {
  justify-content: space-between;
  gap: 40px;
  min-height: 78px;
  padding: 14px 32px;
  border: 0;
  background: var(--orange);
  color: var(--noir);
  font-family: var(--fat);
  font-size: 27px;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.form-submit:hover { transform: translateY(-3px); background: #ffa365; }
.form-submit span { font-family: var(--sans); font-size: 32px; font-weight: 400; }
.form-submit[disabled] { opacity: .55; cursor: progress; }
.form-note { margin: 0; font-size: 14px; line-height: 1.7; color: var(--dark-60); }
.form-note a { text-decoration: underline; }
.form-status { margin: 20px 0 0; font-size: 15px; color: var(--dark-70); }
.form-status.is-error { color: var(--danger); }
.contact-foot { display: flex; justify-content: space-between; gap: 20px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--dark-line); font-family: var(--mono); font-size: 12px; color: var(--dark-60); }
.contact-foot a { color: rgba(var(--panel-ink-rgb), 1); }
.contact-foot a span { margin-left: 8px; }
.contact-foot a:hover { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 700px) {
  .contact-intro { margin-bottom: 40px; }
  .contact-intro h2 { font-size: clamp(2.4rem, 9vw, 3.5rem); }
  .contact-arrow { width: .48em; height: .48em; }
  .contact-copy { font-size: 17px; }
  .contact-form > .field:not(.field-trap), .contact-person { grid-template-columns: 1fr; gap: 18px; padding: 24px 0; }
  .question-number { display: inline-block; margin: 0 12px 0 0; }
  .contact-form > .field > .field-error { grid-column: 1; }
  .choice-list { gap: 8px; }
  .choice-list label { padding: 9px 14px; font-size: 14px; }
  .contact-person-fields, .field-pair { grid-template-columns: 1fr; gap: 20px; }
  .contact-extra { margin-left: 0; }
  .contact-send { flex-direction: column; align-items: stretch; gap: 20px; }
  .form-submit { min-height: 70px; font-size: 25px; padding: 12px 24px; }
  .contact-foot { flex-direction: column; gap: 12px; margin-top: 40px; }
}

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

.site-footer {
  border-top: 1px solid var(--line-soft);
  max-width: var(--shell);
  margin: 0 auto;
  padding: 48px var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
}

.footer-center {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  text-align: center;
}
.footer-logo { width: 165px; height: auto; margin: 0 auto 10px; }
.footer-line {
  font-family: var(--display);
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-70);
}

.footer-right {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  text-align: right;
}
.footer-links { display: flex; gap: 12px; justify-content: flex-end; }
.footer-copy {
  margin-top: 24px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ink-40);
}

/* --------------------------------------------------------------------------
   Reveal
   -------------------------------------------------------------------------- */

.reveal-ready .reveal {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  filter: blur(2px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-ready .reveal.is-visible { opacity: 1; transform: none; filter: blur(0); }

/* Parallax-driven nodes: the scroll loop owns the transform, so the reveal
   only fades them in — otherwise every frame would restart the transition. */
.reveal[data-parallax],
.reveal[data-parallax].is-visible {
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0)
             rotate(var(--rot, 0deg)) scale(var(--scale, 1));
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Scroll progress bar
   -------------------------------------------------------------------------- */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  background: rgba(var(--ink-rgb), 0.08);
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent-alt), var(--accent) 55%, var(--accent-warm));
  transition: transform 0.12s linear;
}

/* --------------------------------------------------------------------------
   Trail — the snail leaves its trace as you scroll
   -------------------------------------------------------------------------- */

.trail {
  position: fixed;
  left: clamp(18px, 2.1vw, 34px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: none;
  width: 18px;
  pointer-events: none;
}
.trail-track {
  position: absolute;
  left: 8px;
  top: 0;
  width: 2px;
  height: 100%;
  border-radius: 2px;
  background: rgba(var(--ink-rgb), 0.12);
}
.trail-fill {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  transform: scaleY(var(--progress, 0));
  transform-origin: 50% 0;
  background: linear-gradient(180deg, var(--accent-alt), var(--accent) 55%, var(--accent-warm));
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.trail-snail {
  position: absolute;
  left: 50%;
  top: 0;
  width: 26px;
  max-width: none;
  height: auto;
  transform: translate(-50%, calc(var(--snail, 0px) - 50%)) rotate(var(--snail-rot, 0deg));
  filter: drop-shadow(0 2px 6px rgba(10, 10, 10, 0.9));
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.trail-marks {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.trail-marks li {
  display: flex;
  align-items: center;
  height: 0;
}
.trail-marks i {
  flex: none;
  width: 5px;
  height: 5px;
  margin-left: 6.5px;
  border-radius: 999px;
  background: var(--ground);
  box-shadow: inset 0 0 0 1.5px rgba(var(--ink-rgb), 0.3);
  transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease;
}
.trail-marks li.is-past i {
  background: var(--orange);
  box-shadow: none;
  transform: scale(0.8);
}
.trail-marks li.is-active i {
  background: var(--accent-alt);
  box-shadow: 0 0 0 2.5px rgba(var(--accent-alt-rgb), 0.28);
  transform: scale(1.5);
}

/* only once the page shell leaves room beside it */
@media (min-width: 1160px) {
  .trail { display: block; height: min(58vh, 480px); }
}

/* --------------------------------------------------------------------------
   Header — section tracking
   -------------------------------------------------------------------------- */

.header-section {
  display: none;
  position: relative;
  z-index: 50;
  margin-left: 4px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-50);
  overflow: hidden;
  white-space: nowrap;
}
.header-section span {
  display: inline-block;
  animation: label-in 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
@keyframes label-in {
  from { opacity: 0; transform: translateY(90%); }
  to { opacity: 1; transform: none; }
}

.nav .pill.is-current {
  border-color: rgba(255, 138, 61, 0.6);
  color: var(--ink);
  background: rgba(255, 138, 61, 0.1);
}

/* --------------------------------------------------------------------------
   Mobile menu panel
   -------------------------------------------------------------------------- */

.nav-panel-foot { display: none; }

body.menu-open { overflow: hidden; }

@media (max-width: 860px) {
  .nav {
    position: fixed;
    inset: 0;
    z-index: 45;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 96px var(--gutter) 32px;
    background: var(--ground);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.45s ease, visibility 0s linear 0.45s;
  }
  .nav::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("assets/figma/blob-bg.webp") center / 150% no-repeat;
    opacity: 0.14;
    transform: scale(1.1);
    transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.3, 1);
    pointer-events: none;
  }
  .nav.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.35s ease;
  }
  .nav.is-open::before { transform: scale(1); }

  .nav .pill {
    position: relative;
    z-index: 1;
    height: auto;
    padding: 18px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: none;
    display: grid;
    grid-template-columns: 1fr;
    align-items: baseline;
    justify-content: flex-start;
    text-align: left;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.3, 1),
                transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1),
                color 0.25s ease;
  }
  .nav .pill span {
    font-family: var(--display);
    font-size: clamp(2.4rem, 13vw, 4rem);
    line-height: 0.9;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--ink);
    transition: color 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
    display: inline-block;
  }
  .nav .pill:nth-child(2) span { color: var(--accent); }
  .nav .pill:nth-child(4) span { color: var(--orange); }
  .nav .pill:active span,
  .nav .pill.is-current span { transform: translateX(10px); }

  .nav.is-open .pill {
    opacity: 1;
    transform: none;
  }
  .nav.is-open .pill:nth-child(1) { transition-delay: 0.10s; }
  .nav.is-open .pill:nth-child(2) { transition-delay: 0.16s; }
  .nav.is-open .pill:nth-child(3) { transition-delay: 0.22s; }
  .nav.is-open .pill:nth-child(4) { transition-delay: 0.28s; }

  .nav-panel-foot {
    position: relative;
    z-index: 0;
    display: block;
    margin-top: 40px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease 0.34s, transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) 0.34s;
  }
  .nav.is-open .nav-panel-foot { opacity: 1; transform: none; }

  .nav-glyph {
    position: absolute;
    right: -14px;
    top: -128px;
    width: 124px;
    height: auto;
    opacity: 0.28;
    animation: sway 12s ease-in-out infinite;
    pointer-events: none;
  }
  .nav-meta {
    display: grid;
    gap: 6px;
    margin-top: 20px;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-40);
  }

  .menu-toggle {
    position: relative;
    z-index: 50;
    width: 46px;
    height: 40px;
    border-radius: 44px 56px 62px 38px;
    transition: background 0.35s ease, border-color 0.35s ease, border-radius 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  .menu-toggle[aria-expanded="true"] {
    background: var(--orange);
    border-color: var(--orange);
    border-radius: 56px 38px 44px 62px;
  }
  .menu-toggle[aria-expanded="true"] span { background: var(--noir); }
}

@media (max-width: 520px) {
  .choice-list-inline { grid-template-columns: 1fr; }
  .field-pair { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Parallax primitives
   -------------------------------------------------------------------------- */

[data-parallax] {
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0)
             rotate(var(--rot, 0deg)) scale(var(--scale, 1));
  will-change: transform;
}

[data-parallax-bg]::before {
  transform: translate3d(0, var(--py, 0px), 0) scale(1.18);
  will-change: transform;
}

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

/* The five-line lockup is tall: on a short laptop viewport the conclusion
   was falling below the fold, so trim the lead-in and the type a step. */
@media (min-width: 861px) and (max-height: 800px) {
  .hero { padding-top: clamp(32px, 4vw, 64px); }
  .hero-display { font-size: clamp(2.75rem, 9.6vw, 7.25rem); }
}

@media (max-width: 1000px) {
  /* the lockup gets close to wrapping here — give it a little leading back */
  .hero-display { line-height: 0.86; }
  .row { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .row .dot-list { grid-column: 2; }
  .collaboration-top {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "lead";
  }
  .collaboration-top .collaboration-head { grid-area: head; }
  .collaboration-top .lead { grid-area: lead; }
  .collaboration-head { justify-items: start; }
  .collaboration-title { text-align: left; }
}

@media (max-width: 860px) {
  .site-header { gap: 12px; }
  .header-section { display: block; }
  .header-cta { display: none; }
  .menu-toggle { display: flex; margin-left: auto; }

  .hero-display {
    font-size: clamp(2.5rem, 12.4vw, 4.5rem);
    /* each line wraps at this width — it needs real leading, not the
       overlapping 0.78 used for the single-line desktop lockup */
    line-height: 0.96;
  }
  .hero-display .line { margin-bottom: 0.04em; }
  .hero-display .line-a,
  .hero-display .line-b,
  .hero-display .line-c,
  .hero-display .line-d,
  .hero-display .line-e { margin-left: 0; }

  :root { --glyph-size: 64px; }

  .step { grid-template-columns: 56px 1fr; row-gap: 12px; }
  .step p { grid-column: 2; max-width: none; }

  .row { grid-template-columns: 1fr; }
  .row .dot-list { grid-column: 1; }
  .row-copy { max-width: none; }


  .collaboration-points { grid-template-columns: 1fr; }

  .site-footer { grid-template-columns: 1fr; text-align: center; }
  .footer-right { grid-column: 1; grid-row: 2; justify-self: center; text-align: center; }
  .footer-links { justify-content: center; }
}

@media (max-width: 560px) {
  .br-phone { display: inline; }
  .contact-card { padding: 32px 22px; }
  .project-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 calc(var(--gutter, 20px) * -1);
    padding: 4px var(--gutter, 20px) 8px;
  }
  .project-grid::-webkit-scrollbar { display: none; }
  .client-card { flex: 0 0 min(74vw, 280px); scroll-snap-align: start; }
  .case-meta { grid-template-columns: 1fr; }
  .case-dialog-body { padding-top: clamp(76px, 14vh, 104px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
  [data-parallax],
  .reveal[data-parallax],
  .reveal[data-parallax].is-visible { transform: none; }
  [data-parallax-bg]::before { transform: none; }
  /* the trail stays: it is a progress indicator, not decoration.
     Its transitions are already neutralised by the rule above. */
}