/* =========================================================================
   arntzrichard Design — portfolio
   Mobile-first · light + dark (system default, user toggle) · EN/FR
   1 Fonts & tokens   2 Base   3 Header   4 Buttons   5 Logo animation
   6 Hero   7 Clients   8 Work list   9 Services   10 About & quotes
   11 Contact & footer   12 Motion
   ========================================================================= */

/* 1. FONTS & TOKENS ------------------------------------------------------- */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {   /* Arial tuned to Outfit's metrics → no layout shift on swap */
  font-family: "Outfit Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 97.8%;
  ascent-override: 102%;
  descent-override: 26.6%;
  line-gap-override: 0%;
}

:root {
  /* Dark-only identity: near-black with a cool bias toward the brand blue */
  --bg: #0E0E10;
  --bg-alt: #141417;
  --surface: #1A1A1E;
  --text: #EDEBE6;
  --text-2: #C4C0B9;
  --muted: #9A968F;            /* 6.5:1 */
  --line: rgba(237, 235, 230, 0.12);
  --line-strong: rgba(237, 235, 230, 0.3);
  --blue: #5AB0EE;             /* text blue, 8:1 */
  --blue-bright: #3AA0E8;      /* graphics */
  --live: #3DD68C;

  --logo-ink: #EDEBE6;
  --logo-on: #0E0E10;
  --logo-a: #3AA0E8;
  --logo-b: #4A8FE0;
  --logo-cap: #77736D;

  --contact-bg: #16161A;
  --contact-text: #EDEBE6;
  --contact-muted: #9A968F;
  --contact-blue: #5AB0EE;

  --shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);

  --font: "Outfit", "Outfit Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(1.25rem, 4.5vw, 3rem);
  --section-y: clamp(5rem, 11vw, 9rem);
  --header-h: 64px;           /* 64px on phones; 72px from 900px */
  --radius: 16px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: cubic-bezier(0.34, 1.5, 0.5, 1);
  color-scheme: dark;
}

/* 2. BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--blue-bright); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

html[lang="en"] [data-lang="fr"], html[lang="fr"] [data-lang="en"] { display: none !important; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 16px; border-radius: 8px;
  background: var(--text); color: var(--bg); font-weight: 600; text-decoration: none;
  transform: translateY(-160%); transition: transform 0.2s;
}
.skip-link:focus { transform: none; }
.scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 24px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-bright); flex-shrink: 0; }
.dot--live { background: var(--live); box-shadow: 0 0 0 0 var(--live); }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.section-title {
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  font-weight: 600; line-height: 1; letter-spacing: -0.035em;
}
.section-count { font-size: 1rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Thin reading-progress bar (CSS scroll-driven where supported) */
.progress {
  position: fixed; inset: 0 0 auto 0; z-index: 70; height: 2px;
  background: var(--blue-bright); transform-origin: left; transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .progress { animation: grow linear both; animation-timeline: scroll(root); }
  @keyframes grow { to { transform: scaleX(1); } }
}

/* 3. HEADER ---------------------------------------------------------------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease), color 0.35s var(--ease);
}
.header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
/* Home page: at the top the header sits on the white hero, so it takes the hero's
   light tokens (declared with .hero below) and the logo's print colours. Once you
   scroll it becomes the dark frosted bar, a little more opaque so it stays dark
   over the white hero. */
.header--on-light:not(.is-scrolled) {
  --logo-ink: #111111; --logo-on: #FFFFFF; --logo-a: #0878BF; --logo-b: #07569E; --logo-cap: #8E8E8E;
}
.header--on-light:not(.is-scrolled) .lang { background: rgba(255, 255, 255, 0.6); }
.header--on-light.is-scrolled { background: color-mix(in srgb, var(--bg) 92%, transparent); }
.header .logo path, .header .logo rect, .header .logo circle { transition: fill 0.35s var(--ease); }
.header .burger, .header .lang { transition: color 0.35s var(--ease), background-color 0.35s var(--ease), border-color 0.35s var(--ease); }
.header__inner { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.header__logo { display: block; border-radius: 6px; }
.header__logo .logo { height: 37px; width: auto; aspect-ratio: 756 / 194; }   /* +10% (was 34px) */


.controls { display: flex; align-items: center; gap: 0.5rem; }
.lang {
  display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(14, 14, 16, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lang__btn {
  min-width: 40px; min-height: 34px; padding: 0 8px; border: 0; border-radius: 999px;
  background: transparent; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--muted); cursor: pointer; transition: background-color 0.25s, color 0.25s;
}
.lang__btn { display: inline-grid; place-items: center; text-decoration: none; }
.lang__btn[aria-current="true"] { background: var(--text); color: var(--bg); }
.lang__btn:not([aria-current]):hover { color: var(--text); }
.btn.header__cta { display: none; }

@media (min-width: 720px) { .btn.header__cta { display: inline-flex; } .header__logo .logo { height: 44px; }   /* +10% (was 40px) */ }
@media (min-width: 900px) {
  :root { --header-h: 72px; }
  .header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .header__inner { height: var(--header-h); }
}

/* 4. BUTTONS --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 52px; padding: 0.85rem 1.5rem; border: 1px solid transparent; border-radius: 999px;
  font-size: 1rem; font-weight: 500; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s, border-color 0.25s, transform 0.3s var(--ease);
}
.btn--solid { background: var(--text); color: var(--bg); }
.btn--solid:hover { background: var(--blue-bright); color: #fff; }
.btn--ghost { border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--text); }
.btn--sm { min-height: 42px; padding: 0.5rem 1.1rem; font-size: 0.9375rem; }
.btn__icon { width: 18px; height: 18px; transition: transform 0.3s var(--ease); }
.btn:hover .btn__icon { transform: translateX(4px); }

/* 5. LOGO COLOURS + ANIMATION ---------------------------------------------- */
.logo .lg-circle, .logo .lg-bar { fill: var(--logo-ink); transition: fill 0.4s; }
.logo .lg-mark, .logo .lg-design { fill: var(--logo-on); transition: fill 0.4s; }
.logo .lg-tip { fill: var(--logo-a); }
.logo .lg-l--a { fill: var(--logo-a); }
.logo .lg-l--b { fill: var(--logo-b); }
.logo .lg-cap { fill: var(--logo-cap); }
.logo * { transform-box: fill-box; }

/* 6. HERO ------------------------------------------------------------------ */
/* Light sections (the home hero, and .section--light such as the client logos on About).
   They re-declare the colour tokens, so text, buttons, lines and focus rings switch to
   dark-on-light without separate component styles. The header reuses the same values
   while it sits on top of the home hero (see .header--on-light). */
.hero,
.section--light,
.header--on-light:not(.is-scrolled) {
  --bg: #FFFFFF;
  --bg-alt: #F3F2EF;
  --text: #0E0E10;             /* 19:1 on white */
  --text-2: #3F3C38;           /* 10.9:1 */
  --muted: #5E5A54;            /* 6.8:1 */
  --line: rgba(14, 14, 16, 0.1);
  --line-strong: rgba(14, 14, 16, 0.24);
  --blue: #0868AD;             /* text + focus ring, 5.8:1 */
  --blue-bright: #0878BF;      /* logo blue: large text and fills, 4.7:1 */
  color-scheme: light;
}
.section--light { --bg: #F3F2EF; --muted: #57534D; /* 6.6:1 on the grey */ background: var(--bg); color: var(--text); }
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 5rem));
  padding-bottom: clamp(3.5rem, 7vw, 5rem);
  background: var(--bg);
  color: var(--text);
}
.hero__inner { display: grid; gap: clamp(3rem, 7vw, 4rem); align-items: center; }
.hero__eyebrow { margin-bottom: 1.5rem; }
.hero__title {
  /* A full sentence, so smaller than a three-word slogan: 4 lines on desktop, about 6 on phones */
  font-size: clamp(2.4rem, 1.1rem + 4vw, 4.25rem);
  font-weight: 600; line-height: 1; letter-spacing: -0.04em;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__title .line > span { display: inline-block; text-wrap: balance; }
.hero__title .accent { color: var(--blue-bright); }
.hero__lead { max-width: 33rem; margin-top: 2rem; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3rem); line-height: 1.55; color: var(--text-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }

.hero { isolation: isolate; overflow: hidden; overflow: clip; }   /* clip, not hidden: lets the inner part pin (sticky) */
/* Featured work beside the headline: a cut-out device mockup that links to its case study */
.hero__art { display: block; justify-self: center; width: min(100%, 560px); color: var(--muted); text-decoration: none; border-radius: 12px; }
.hero__art img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 26px 30px rgba(14, 14, 16, 0.16));
  transition: transform 0.6s var(--ease);
}
.hero__cap { display: flex; align-items: center; justify-content: center; gap: 0.45rem; margin-top: 1.1rem; font-size: 0.9375rem; }
.hero__cap strong { color: var(--text); font-weight: 600; }
.hero__cap svg { width: 16px; height: 16px; color: var(--blue); transition: transform 0.3s var(--ease); }
.hero__art:hover img { transform: translateY(-6px); }
.hero__art:hover .hero__cap svg { transform: translateX(4px); }
.hero__art:hover strong { text-decoration: underline; text-underline-offset: 3px; }

/* Animated logo pieces (used by logo(True) in gen.py; not on any page right now) */
.logo .lg-stroke { fill: none; stroke: var(--logo-a); stroke-width: 1.6; opacity: 0; }
.logo .lg-tip-1 { transform-origin: 0% 100%; }

@media (min-width: 960px) {
  .hero { min-height: min(100svh, 900px); display: flex; align-items: center; }
  .hero__inner { grid-template-columns: 1.2fr 0.8fr; }
  .hero__art { width: 100%; }
}

/* 8. WORK LIST ------------------------------------------------------------- */
.work { border-top: 1px solid var(--line); }
.row {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  grid-template-areas: "thumb thumb thumb" "num name arrow" ". cat cat";
  align-items: baseline; column-gap: 0.75rem;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: opacity 0.4s var(--ease);
}
.row__num { grid-area: num; font-size: 0.875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.row__name {
  grid-area: name;
  font-size: clamp(1.9rem, 1rem + 4vw, 4.4rem);
  font-weight: 500; line-height: 1.02; letter-spacing: -0.035em;
  transition: transform 0.5s var(--ease), color 0.3s;
}
.row__cat { grid-area: cat; margin-top: 0.5rem; font-size: 0.9375rem; color: var(--muted); }
.row__arrow { grid-area: arrow; width: 26px; height: 26px; align-self: center; color: var(--blue-bright); transform: rotate(-45deg); transition: transform 0.4s var(--ease); }
.row__thumb { grid-area: thumb; margin-bottom: 1.25rem; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; background: var(--bg-alt); }
.row__thumb img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 760px) {
  .row {
    grid-template-columns: 3.5rem 1fr minmax(14rem, auto) 2.5rem;
    grid-template-areas: "num name cat arrow";
    padding-block: 2rem;
  }
  .row__cat { margin-top: 0; text-align: right; }
  .row__thumb { display: none; }
}

/* Mouse devices: hover list + floating preview */
@media (hover: hover) and (pointer: fine) {
  .work:hover .row:not(:hover):not(:focus-visible) { opacity: 0.32; }
  .row:hover .row__name, .row:focus-visible .row__name { transform: translateX(14px); }
  .row:hover .row__arrow, .row:focus-visible .row__arrow { transform: rotate(0deg) translateX(4px); }
  .row__thumb { display: none; }
}

.preview {
  position: fixed; top: 0; left: 0; z-index: 40;
  width: clamp(280px, 26vw, 400px); aspect-ratio: 4 / 3;
  pointer-events: none;
  transform: translate3d(var(--px, -999px), var(--py, -999px), 0) translate(-50%, -50%) rotate(var(--pr, 0deg));
  will-change: transform;
}
.preview__frame {
  width: 100%; height: 100%; overflow: hidden; border-radius: var(--radius);
  box-shadow: var(--shadow);
  transform: scale(0.4); opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}
.preview.is-visible .preview__frame { transform: scale(1); opacity: 1; }
.preview img { width: 100%; height: 100%; object-fit: cover; }
.preview.is-swapping img { animation: swap 0.5s var(--ease); }
@media (hover: none), (pointer: coarse) { .preview { display: none; } }

/* 9. SERVICES -------------------------------------------------------------- */

/* 10. ABOUT & QUOTES ------------------------------------------------------- */
.about__text { margin-top: 1.5rem; max-width: 38rem; font-size: 1.15rem; color: var(--text-2); }
.about__tools { margin-top: 1.5rem; font-size: 0.9375rem; color: var(--muted); }


/* 11. CONTACT & FOOTER ----------------------------------------------------- */
.contact__title { margin-top: 1.5rem; max-width: 14ch; font-size: clamp(3rem, 1rem + 8vw, 7.5rem); font-weight: 600; line-height: 0.95; letter-spacing: -0.05em; text-wrap: balance; }
.social { display: flex; gap: 0.6rem; }
.social a {
  display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(237, 235, 230, 0.2); border-radius: 50%;
  color: var(--contact-text); transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.3s var(--spring);
}
.social a:hover { background: var(--contact-blue); border-color: var(--contact-blue); color: #0E0E10; transform: translateY(-3px); }
.social svg { width: 20px; height: 20px; }


/* 11. SHARED PAGE PARTS --------------------------------------------------- */
.section--flush { padding-top: 0; }
.text-link { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; color: var(--blue); text-decoration: none; white-space: nowrap; }
.text-link svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease); }
.text-link:hover svg { transform: translateX(4px); }
.h-sm { margin-bottom: 0.9rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.page-hero { padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 5rem)); padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.page-title { margin-top: 1.25rem; font-size: clamp(3.4rem, 1rem + 10vw, 8rem); font-weight: 600; line-height: 0.92; letter-spacing: -0.05em; }
.page-title--md { margin-top: 0; font-size: clamp(2.5rem, 1.2rem + 5vw, 4.75rem); }
.page-title__count { font-size: 0.28em; font-weight: 500; letter-spacing: 0; color: var(--muted); vertical-align: super; }
.page-lead { max-width: 38rem; margin-top: 1.5rem; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3rem); color: var(--text-2); }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.25rem; }
.chips[hidden] { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 42px; padding: 0.4rem 1rem;
  border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; cursor: pointer;
  font-size: 0.9375rem; font-weight: 500; transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.chip span { font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--text); }
.chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip[aria-pressed="true"] span { color: inherit; opacity: 0.6; }
.work__item[hidden] { display: none; }

.svc-grid { display: grid; gap: 2rem; }
.svc-mini { padding-top: 1.25rem; border-top: 1px solid var(--line-strong); }
.svc-mini__n { display: block; margin-bottom: 1.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--blue); }
.svc-mini h3 { margin-bottom: 0.5rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; }
.svc-mini p { font-size: 0.9375rem; color: var(--text-2); }
@media (min-width: 680px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .svc-grid { grid-template-columns: repeat(4, 1fr); } }

.pull { max-width: 52rem; margin: clamp(4rem, 9vw, 6rem) 0 0; }
.pull blockquote { margin: 0; }
.pull blockquote p { font-size: clamp(1.5rem, 1rem + 2vw, 2.4rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.025em; text-wrap: balance; }
.pull figcaption { display: grid; margin-top: 1.25rem; color: var(--muted); }
.pull figcaption strong { color: var(--text); font-weight: 600; }

.cta { padding-block: clamp(3.5rem, 7vw, 5.5rem); background: var(--contact-bg); border-top: 1px solid var(--line); }
.cta__inner { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
/* One line from tablet width up; wraps on phones, where one line would need tiny type */
.cta__title { font-size: clamp(2.25rem, 0.9rem + 3.9vw, 4.25rem); font-weight: 600; line-height: 1; letter-spacing: -0.045em; text-wrap: balance; }
@media (min-width: 760px) { .cta__title { white-space: nowrap; } }
.cta__row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.cta__text { max-width: 34rem; color: var(--text-2); font-size: 1.125rem; }

/* 12. CASE STUDY ----------------------------------------------------------- */
.case-hero { padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 3.5rem)); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.crumbs { display: flex; gap: 0.6rem; font-size: 0.875rem; color: var(--muted); }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 2rem; }
.tags li { padding: 0.25rem 0.75rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.8125rem; color: var(--text-2); }
.case-title { max-width: 18ch; margin-top: 1.25rem; font-size: clamp(2.6rem, 1rem + 6.5vw, 6.25rem); font-weight: 600; line-height: 0.95; letter-spacing: -0.045em; text-wrap: balance; }
.case-lead { max-width: 44rem; margin-top: 1.75rem; font-size: clamp(1.125rem, 1rem + 0.6vw, 1.45rem); line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.pending-note { max-width: 40rem; margin: 1rem 0 1.75rem; color: var(--muted); }
.facts { display: grid; gap: 1.25rem 2rem; margin: 2.75rem 0 0; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.fact dt { margin-bottom: 0.3rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.fact dd { margin: 0; font-size: 1rem; color: var(--text); }
.fact dd a { color: var(--blue); text-underline-offset: 3px; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .facts { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } .facts .fact:has(dd:is(*)) { min-width: 0; } }

.shot { margin: 0; min-width: 0; }
.shot__media { overflow: hidden; border-radius: var(--radius); background: var(--bg-alt); }
.shot__media img { width: 100%; height: auto; }
.shot figcaption { max-width: 40rem; margin-top: 0.9rem; font-size: 0.9375rem; color: var(--muted); }
.shot--device .shot__media {
  display: grid; place-items: center; padding: clamp(1.5rem, 5vw, 4rem);
  background: radial-gradient(ellipse at 50% 35%, #26262B 0%, #151518 70%);
}
.shot--device .shot__media img { width: auto; max-width: 100%; max-height: 78vh; object-fit: contain; }
.shot--cover { margin-bottom: 0; }
.gallery { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
.shot-pair { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 760px) { .shot-pair { grid-template-columns: 1fr 1fr; } .shot-pair .shot__media { height: 100%; } .shot-pair .shot { display: grid; } }

.prose-2 { display: grid; gap: 2.5rem; }
.prose-2 p { max-width: 36rem; font-size: 1.15rem; line-height: 1.6; color: var(--text-2); }
@media (min-width: 900px) { .prose-2 { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.deliv { display: grid; gap: 1rem; }
.result { max-width: 40rem; font-size: clamp(1.35rem, 1rem + 1.5vw, 2rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }
.result + .pull { margin-top: clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 900px) { .deliv { grid-template-columns: 0.4fr 1fr; gap: 3rem; } .deliv .result, .deliv .pull { grid-column: 2; } .deliv .result { margin-top: -0.35em; } }

.next { border-top: 1px solid var(--line); }
.next__link { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0.75rem 1.5rem; padding-block: clamp(3rem, 8vw, 5.5rem); text-decoration: none; }
.next__link .eyebrow { grid-column: 1 / -1; }
.next__name { font-size: clamp(2.4rem, 1rem + 6vw, 6rem); font-weight: 600; line-height: 0.95; letter-spacing: -0.045em; transition: color 0.3s; }
.next__arrow { width: clamp(36px, 5vw, 64px); height: clamp(36px, 5vw, 64px); color: var(--blue-bright); transition: transform 0.4s var(--ease); }
.next__link:hover .next__name { color: var(--blue); }
.next__link:hover .next__arrow { transform: translateX(10px); }

/* Story module: the PAP logo on a light paper plate */
.story { padding-block: clamp(2rem, 6vw, 4rem) var(--section-y); }
.story__inner { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
.story__plate {
  position: relative; display: grid; place-items: center; aspect-ratio: 6 / 5; padding: 8%;
  border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(rgba(246, 245, 242, 0.86), rgba(246, 245, 242, 0.86)), url("../img/paper.webp") center / cover;
}
.pap-logo { width: min(100%, 520px); height: auto; overflow: visible; }
.pap-logo * { transform-box: fill-box; }
.steps { display: grid; gap: 1.5rem; margin-top: 2rem; }
.step { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.step__n { font-size: 0.8125rem; font-weight: 600; color: var(--blue); font-variant-numeric: tabular-nums; }
.step h3 { margin-bottom: 0.35rem; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; }
.step p { color: var(--text-2); }
@media (min-width: 960px) { .story__inner { grid-template-columns: 1.1fr 0.9fr; } }

/* 13. ABOUT + CONTACT PAGES ------------------------------------------------- */
.client-list { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; font-size: 1.05rem; color: var(--text-2); }
/* Testimonials (About): full-length quotes of very different lengths, so the cards are
   packed in columns (masonry) instead of equal-height grid rows. Reading order runs down
   each column. */
.quote-grid { columns: 1; column-gap: 1rem; }
.quote {
  display: flex; flex-direction: column; gap: 1.75rem; margin-bottom: 1rem;
  padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  break-inside: avoid; position: relative; overflow: hidden;
}
/* Thin colour line on top, like the PAP story plate; colour per client in accents.css (--q-accent) */
.quote::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--q-accent, transparent); transform-origin: left; }
.quote blockquote { margin: 0; }
.quote blockquote p { font-size: 1.0625rem; line-height: 1.6; color: var(--text-2); }
.quote__who { display: grid; font-size: 0.9375rem; color: var(--muted); }
.quote__who strong { font-weight: 600; color: var(--text); }
@media (min-width: 760px) { .quote-grid { columns: 2; } }
@media (min-width: 1100px) { .quote-grid { columns: 3; } }

.contact-page { padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 5rem)); padding-bottom: var(--section-y); }
.contact-page .contact__title { margin-top: 1.25rem; }
.contact-list { margin: clamp(3rem, 7vw, 5rem) 0 0; border-top: 1px solid var(--line); }
.contact-row { display: grid; gap: 0.6rem; padding-block: 1.75rem; border-bottom: 1px solid var(--line); }
.contact-row dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.contact-row dd { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 0; min-width: 0; }
.contact__big {
  font-size: clamp(1.4rem, 0.6rem + 3.4vw, 3rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.15;
  color: var(--blue); text-decoration: none; overflow-wrap: anywhere;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size 0.5s var(--ease);
}
.contact__big:hover { background-size: 100% 2px; }
.contact__plain { font-size: 1.15rem; color: var(--text-2); }
.copy {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 38px; padding: 0.35rem 0.9rem;
  border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--text-2);
  font-size: 0.875rem; cursor: pointer;
}
.copy[hidden] { display: none; }
.copy svg { width: 15px; height: 15px; }
.copy:hover { color: var(--text); border-color: var(--text); }
.copy.is-done { color: var(--live); border-color: var(--live); }
@media (min-width: 900px) { .contact-row { grid-template-columns: 12rem 1fr; align-items: center; } }

.social a { border-color: var(--line-strong); color: var(--text); }
.social--sm a { width: 40px; height: 40px; }
.social--sm svg { width: 18px; height: 18px; }

/* Footer */
.footer { padding-block: 2.5rem; background: var(--contact-bg); color: var(--muted); font-size: 0.9375rem; border-top: 1px solid var(--line); }
.footer__inner { display: grid; gap: 1.5rem; align-items: center; }
.footer__logo .logo { height: 34px; width: auto; aspect-ratio: 756 / 194; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.footer__nav a, .footer__top { color: var(--text-2); text-decoration: none; }
.footer__nav a:hover, .footer__top:hover { color: var(--text); }
.footer__legal { font-size: 0.875rem; }
@media (min-width: 960px) {
  .footer__inner { grid-template-columns: auto 1fr auto; }
  .footer__nav { justify-self: center; }
  .footer__legal { grid-column: 1 / 3; }
  .footer__top { justify-self: end; }
}

/* Page transitions between pages (Chrome, Edge, Safari 18+; others just navigate) */
@view-transition { navigation: auto; }
.header { view-transition-name: site-header; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 0.3s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in 0.5s var(--ease) both; }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

/* 14. MOTION --------------------------------------------------------------- */
@keyframes rise    { from { transform: translateY(110%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pop     { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes draw    { from { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 1; } 70% { opacity: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0; } }
@keyframes up      { from { opacity: 0; transform: translateY(45%); } to { opacity: 1; transform: none; } }
@keyframes wipe    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes flag-in { from { opacity: 0; transform: rotate(-110deg) scale(0.4); } to { opacity: 1; transform: none; } }


@keyframes pulse   { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
@keyframes swap    { from { transform: scale(1.12); filter: blur(6px); } to { transform: none; filter: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* Header logo: simple fade */
  .header__logo { animation: fade-up 0.8s var(--ease) 0.1s both; }
  /* Home hero: the device mockup rises in after the headline */
  .hero__art { animation: fade-up 0.9s var(--ease) 0.35s both; }

  /* Logo build (class logo-anim, kept for reuse): blue ring draws → circle fills → a, r rise →
     blue base + flag snap in → name types on → DESIGN bar wipes open → grey cap pops */
  .logo-anim .lg-stroke { animation: draw 1.1s var(--ease-io) 0.45s both; }
  .logo-anim .lg-circle { transform-origin: center; animation: pop 0.8s var(--spring) 1.05s both; }
  .logo-anim .lg-mark-0 { animation: up 0.7s var(--ease) 1.35s both; }
  .logo-anim .lg-mark-1 { animation: up 0.7s var(--ease) 1.47s both; }
  .logo-anim .lg-tip-0 { transform-origin: left center; animation: wipe 0.45s var(--ease) 1.7s both; }
  .logo-anim .lg-tip-1 { animation: flag-in 0.8s var(--spring) 1.82s both; }
  .logo-anim .lg-l { animation: up 0.6s var(--ease) both; }
  .logo-anim .lg-l:nth-child(1)  { animation-delay: 2.00s; }
  .logo-anim .lg-l:nth-child(2)  { animation-delay: 2.05s; }
  .logo-anim .lg-l:nth-child(3)  { animation-delay: 2.10s; }
  .logo-anim .lg-l:nth-child(4)  { animation-delay: 2.15s; }
  .logo-anim .lg-l:nth-child(5)  { animation-delay: 2.20s; }
  .logo-anim .lg-l:nth-child(6)  { animation-delay: 2.25s; }
  .logo-anim .lg-l:nth-child(7)  { animation-delay: 2.30s; }
  .logo-anim .lg-l:nth-child(8)  { animation-delay: 2.35s; }
  .logo-anim .lg-l:nth-child(9)  { animation-delay: 2.40s; }
  .logo-anim .lg-l:nth-child(10) { animation-delay: 2.45s; }
  .logo-anim .lg-l:nth-child(11) { animation-delay: 2.50s; }
  .logo-anim .lg-l:nth-child(12) { animation-delay: 2.55s; }
  .logo-anim .lg-bar { transform-origin: left center; animation: wipe 0.7s var(--ease-io) 2.5s both; }
  .logo-anim .lg-design { animation: fade-up 0.6s var(--ease) 2.95s both; }
  .logo-anim .lg-cap { transform-origin: center; animation: pop 0.5s var(--spring) 3.1s both; }

  /* Hero copy */
  .hero__eyebrow { animation: fade-up 0.8s var(--ease) 0.1s both; }
  .hero__title .line > span { animation: rise 1s var(--ease) both; }
  .hero__title .line:nth-child(1) > span { animation-delay: 0.2s; }
  .hero__title .line:nth-child(2) > span { animation-delay: 0.32s; }
  .hero__lead { animation: fade-up 0.9s var(--ease) 0.7s both; }
  .hero__actions { animation: fade-up 0.9s var(--ease) 0.85s both; }

  .dot--live { animation: pulse 1.8s ease-out infinite; }

  /* Scroll reveals */
  .js [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease), transform 1s var(--ease); }
  .js [data-reveal][data-delay="1"] { transition-delay: 0.1s; }
  .js [data-reveal][data-delay="2"] { transition-delay: 0.2s; }
  .js [data-reveal][data-delay="3"] { transition-delay: 0.3s; }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .row[data-reveal].is-in { transition: opacity 0.4s var(--ease), transform 1s var(--ease); }


}


/* 15. PROJECT ACCENTS (colours set per project in accents.css) ------------- */
.case .tags li { border-color: color-mix(in srgb, var(--accent, var(--blue)) 55%, transparent); color: var(--accent, var(--blue)); }
.case-title::after {
  content: ""; display: block; width: 72px; height: 4px; margin-top: 1.5rem; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent, var(--blue)) 50%, var(--accent-2, var(--accent, var(--blue))) 50%);
}
.case .h-sm, .case .fact dt, .case .step__n { color: var(--accent, var(--blue)); }
.case .facts { border-top-color: color-mix(in srgb, var(--accent, var(--blue)) 45%, transparent); }
.case .fact dd a { color: var(--accent, var(--blue)); }
.case .shot--device .shot__media {
  background:
    radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--accent, #3AA0E8) 16%, #1E1E22) 0%, #141417 72%);
}
.case .shot figcaption { padding-left: 0.9rem; border-left: 2px solid var(--accent, var(--blue)); }
.case .story__plate { box-shadow: inset 0 -4px 0 var(--accent-2, var(--accent)), inset 0 4px 0 var(--accent, var(--blue)); }
.next__link .next__arrow { color: var(--accent, var(--blue-bright)); }
.next__link:hover .next__name { color: var(--accent, var(--blue)); }
@media (hover: hover) and (pointer: fine) {
  .work__item .row:hover .row__name, .work__item .row:focus-visible .row__name { color: var(--accent, var(--text)); }
  .work__item .row:hover .row__arrow, .work__item .row:focus-visible .row__arrow { color: var(--accent, var(--blue-bright)); }
}
.work__item .row__num { transition: color 0.3s; }
.work__item .row:hover .row__num { color: var(--accent, var(--muted)); }

/* 16. CLIENT LOGO WALL + CONTACT EXTRAS ------------------------------------ */
.clients-lead { margin-top: -1rem; margin-bottom: clamp(2rem, 5vw, 3rem); }
.logo-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.logo-wall__item {
  position: relative; aspect-ratio: 3 / 2; min-width: 0;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.logo-wall__item img { position: absolute; top: 17%; left: 16%; width: 68%; height: 66%; object-fit: contain; opacity: 0.62; transition: opacity 0.3s; }
.logo-wall__item:hover img { opacity: 1; }
/* The logo files are off-white silhouettes for dark backgrounds: on a light section they
   are turned near-black and shown as mid-grey, full strength on hover. */
.section--light .logo-wall__item img { filter: brightness(0); opacity: 0.55; }
.section--light .logo-wall__item:hover img { opacity: 0.9; }
@media (min-width: 640px) { .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .logo-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.contact__big--text { color: var(--text); }
.contact__hint { flex-basis: 100%; font-size: 0.9375rem; color: var(--muted); }
.footer__mail { color: var(--text-2); text-decoration: none; }
.footer__mail:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.about__tagline { margin-top: 1.25rem; max-width: 30ch; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.1rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: var(--blue); text-wrap: balance; }
.principles { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.principle { position: relative; padding-top: 1.5rem; }
.principle::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--blue-bright); transform-origin: left; }
.principle h3 { margin-bottom: 0.75rem; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
.principle p { max-width: 34rem; font-size: 1.075rem; color: var(--text-2); }
@media (min-width: 900px) { .principles { grid-template-columns: repeat(3, 1fr); } }

/* Photo pairs (no device backdrop): fill the cell edge to edge */
.shot--photo .shot__media { height: auto; }
.shot--photo .shot__media img { width: 100%; height: auto; }
.shot-pair .shot--photo { display: block; }
.shot-pair:has(.shot--photo) { align-items: start; }
/* Light plate for mockups designed on white (e.g. BLMP) */
.case .shot--light .shot__media { background: radial-gradient(ellipse at 50% 35%, #F7F6F3 0%, #E4E2DD 80%); }

/* Device screen swap: identical frames stacked, the active one fades in */
.swap { position: relative; }
.swap__img { display: block; width: 100%; height: auto; }
.swap__img + .swap__img { position: absolute; inset: 0; }
.swap__img:not(.is-active) { opacity: 0; }
.swap__img { transition: opacity 0.9s var(--ease-io); }
.swap__dots { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.swap__dot {
  position: relative; overflow: hidden; min-height: 38px; padding: 0.35rem 0.95rem;
  border: 1px solid var(--line-strong); border-radius: 999px; background: transparent;
  color: var(--text-2); font-size: 0.875rem; cursor: pointer;
}
.swap__dot[aria-pressed="true"] { color: var(--text); border-color: var(--accent, var(--blue)); }
.swap__dot::after {           /* progress line while auto-playing */
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--accent, var(--blue)); transform: scaleX(0); transform-origin: left;
}
.swap.is-playing ~ .swap__dots .swap__dot[aria-pressed="true"]::after { animation: swap-bar var(--swap-ms, 4500ms) linear both; }
@keyframes swap-bar { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .swap__img { transition: none; } }

/* WhatsApp click-to-chat (Contact page). WhatsApp's own green, darkened so white text passes WCAG AA (5.4:1). */
.wa-btn {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0.55rem 1.15rem 0.55rem 0.95rem;
  border-radius: 999px; background: #0F7A41; color: #fff; font-size: 0.9375rem; font-weight: 600; text-decoration: none;
  transition: background-color 0.25s, transform 0.25s var(--ease);
}
.wa-btn svg { width: 20px; height: 20px; flex: none; }
.wa-btn:hover { background: #0B6835; transform: translateY(-1px); }
.wa-btn:focus-visible { outline: 2px solid #25D366; outline-offset: 3px; }

/* 17. ABOUT PAGE: portrait, working steps, logo weights, scroll motion ---- */
.me { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.me__photo { position: relative; width: min(64vw, 260px); margin: 0; }
.me__frame { position: relative; aspect-ratio: 1; }
.me__frame img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* Thin blue ring around the photo, echoing the circle in the logo */
.me__ring { position: absolute; inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); max-width: none; transform: rotate(-90deg); overflow: visible; }
.me__ring circle { fill: none; stroke: var(--blue-bright); stroke-width: 0.4; }   /* SVG units: about 1.5px at full size */
.me__since {
  position: absolute; right: -6%; bottom: 4%; display: grid; padding: 0.6rem 1rem; text-align: left;
  border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow);
}
.me__since span { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.me__since strong { font-size: 1.6rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; color: var(--text); }
.me .page-title--md { margin-top: 1rem; }
.about__tools .h-sm { display: inline; margin: 0 0.5rem 0 0; }
@media (min-width: 900px) {
  .me { grid-template-columns: minmax(280px, 380px) 1fr; }
  .me__photo { width: 100%; max-width: 360px; justify-self: center; }
}

/* Working together: four numbered steps joined by a line that fills in */
.steps-flow { position: relative; }
.steps-flow__list { display: grid; gap: 2.25rem; }
.step-card { position: relative; padding-left: 4.25rem; }
.step-card__n {
  position: absolute; left: 0; top: -0.35rem; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--blue-bright); background: var(--blue-bright); font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff;
  transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease), color 0.45s var(--ease);
}
.step-card h3 { margin-bottom: 0.5rem; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; }
.step-card p { max-width: 30rem; font-size: 1rem; color: var(--text-2); }
.steps-flow__track { position: absolute; left: 22px; top: 0.5rem; bottom: 0.5rem; width: 2px; background: var(--line); }
.steps-flow__track span { position: absolute; inset: 0; background: var(--blue-bright); transform-origin: top; }
@media (min-width: 900px) {
  .steps-flow__list { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .step-card { padding: 4.5rem 0 0; }
  .step-card__n { top: 0; }
  .steps-flow__track { left: 0; right: 0; top: 22px; bottom: auto; width: auto; height: 2px; }
  .steps-flow__track span { transform-origin: left; }
}

/* Client logos: dense badges toned down, thin marks lifted, so the wall reads evenly */
.section--light .logo-wall__item--heavy img { opacity: 0.42; }
.section--light .logo-wall__item--light img { opacity: 0.72; }

@media (prefers-reduced-motion: no-preference) {
  /* Hero: the photo opens from the centre, the blue ring draws around it, then the text arrives */
  .page-about .me__frame img { animation: me-open 1.1s var(--ease-io) 0.1s both; }
  .page-about .me__ring circle { stroke-dasharray: 1.02 1; animation: me-ring 1.5s var(--ease-io) 0.45s both; }   /* 1.02: closes the seam at the top */
  .page-about .me__since { animation: fade-up 0.7s var(--ease) 1.2s both; }
  .page-about .me__text > * { animation: fade-up 0.8s var(--ease) both; }
  .page-about .me__text > :nth-child(1) { animation-delay: 0.25s; }
  .page-about .me__text > :nth-child(2) { animation-delay: 0.35s; }
  .page-about .me__text > :nth-child(3) { animation-delay: 0.45s; }
  .page-about .me__text > :nth-child(4) { animation-delay: 0.55s; }
  .page-about .me__text > :nth-child(5) { animation-delay: 0.65s; }
  .page-about .me__text > :nth-child(6) { animation-delay: 0.75s; }
  .page-about .me__text > :nth-child(7) { animation-delay: 0.85s; }
  @keyframes me-open { from { clip-path: circle(0% at 50% 50%); transform: scale(1.12); } to { clip-path: circle(50% at 50% 50%); transform: none; } }
  @keyframes me-ring { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
  /* As you scroll away, the portrait drifts up and settles back (where scroll-linked animation is supported) */
  @supports (animation-timeline: view()) {
    .page-about .me__frame { animation: me-drift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    @keyframes me-drift { to { transform: translateY(-18%) scale(0.9); opacity: 0.35; } }
  }

  /* Section titles rise out of a mask */
  .page-about .rise { overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
  .page-about .rise > span { display: inline-block; }
  .js .page-about .rise > span { transform: translateY(105%); transition: transform 1s var(--ease); }
  .js .page-about .rise.is-in > span { transform: none; }

  /* Things that appear together come in one after another (--k is set by main.js) */
  .js .page-about [data-reveal] { transition-delay: calc(var(--k, 0) * 90ms); }
  .js .page-about .logo-wall__item[data-reveal] { transform: translateY(18px) scale(0.94); transition-delay: calc(var(--k, 0) * 60ms); }
  .js .page-about .logo-wall__item[data-reveal].is-in { transform: none; }

  /* Principles: the blue rule draws across, then the text fades up */
  .js .page-about .principle::before { transform: scaleX(0); transition: transform 1.1s var(--ease-io) calc(var(--k, 0) * 140ms); }
  .js .page-about .principle.is-in::before { transform: none; }

  /* Steps: the line fills, and each number lights up as the line reaches it */
  .js .page-about .steps-flow__track span { transform: scaleY(0); transition: transform 1.6s var(--ease-io) 0.2s; }
  .js .page-about .steps-flow.is-in .steps-flow__track span { transform: none; }
  .js .page-about .steps-flow .step-card__n { border-color: var(--line-strong); background: var(--bg); color: var(--text); }
  .js .page-about .steps-flow.is-in .step-card__n { border-color: var(--blue-bright); background: var(--blue-bright); color: #fff; }
  .js .page-about .steps-flow.is-in .step-card:nth-child(1) .step-card__n { transition-delay: 0.25s; }
  .js .page-about .steps-flow.is-in .step-card:nth-child(2) .step-card__n { transition-delay: 0.7s; }
  .js .page-about .steps-flow.is-in .step-card:nth-child(3) .step-card__n { transition-delay: 1.15s; }
  .js .page-about .steps-flow.is-in .step-card:nth-child(4) .step-card__n { transition-delay: 1.6s; }
  @media (min-width: 900px) { .js .page-about .steps-flow__track span { transform: scaleX(0); } }

  /* Testimonials: each card's colour line sweeps across once the card is in */
  .js .page-about .quote::before { transform: scaleX(0); transition: transform 0.9s var(--ease-io) calc(var(--k, 0) * 90ms + 0.35s); }
  .js .page-about .quote.is-in::before { transform: none; }
}
/* Without motion (reduced motion, or JS off), everything above is simply shown in its final state. */

/* 18. SCROLL-LINKED MOTION: home showcase, home hero, case study covers -----
   These follow the scroll position, so they play forward when you scroll down
   and rewind when you scroll up. They use CSS scroll-driven animations
   (Chrome, Edge, recent Safari). Other browsers, phones (showcase and hero) and
   reduced-motion users get the normal static layout. */

/* Showcase (home): base layout = projects stacked, each with text and image */
.showcase { position: relative; padding-top: var(--section-y); }
.showcase__head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.showcase__track { display: grid; gap: clamp(3.5rem, 9vw, 5.5rem); }
.showcase__link { display: grid; gap: 1.75rem; color: inherit; text-decoration: none; }
.showcase__n { font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent, var(--blue)); }
.showcase__n span { color: var(--muted); }
.showcase__name { margin-top: 0.9rem; font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; text-wrap: balance; transition: color 0.3s var(--ease); }
.showcase__line { margin-top: 1rem; max-width: 30rem; font-size: 1.125rem; color: var(--text-2); }
.showcase .tags { margin-top: 1.25rem; }
.showcase .tags li { border-color: color-mix(in srgb, var(--accent, var(--blue)) 55%, transparent); color: var(--accent, var(--blue)); }
.showcase__cta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.75rem; font-weight: 500; color: var(--text); }
.showcase__cta svg { width: 18px; height: 18px; color: var(--accent, var(--blue)); transition: transform 0.3s var(--ease); }
.showcase__media { overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--radius); background: var(--bg-alt); }
.showcase__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.showcase__media--device { background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--accent, #3AA0E8) 18%, #1E1E22) 0%, #141417 75%); }
.showcase__media--device img { object-fit: contain; padding: 5% 6%; }
.showcase__media--plate { background: radial-gradient(ellipse at 50% 35%, #F7F6F3 0%, #E4E2DD 80%); }
.showcase__link:hover .showcase__name { color: var(--accent, var(--blue)); }
.showcase__link:hover .showcase__cta svg { transform: translateX(4px); }
.showcase__link:hover .showcase__media img { transform: scale(1.03); }
.showcase__bar { display: none; }
@media (min-width: 960px) {
  .showcase__link { grid-template-columns: 0.8fr 1.2fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Case study covers: zoom out to rest as the cover comes into view, then drift on as you scroll past */
    .case .shot--cover .shot__media img { animation: cover-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes cover-drift {
      0%   { transform: scale(1.12) translateY(4%); }
      50%  { transform: none; }
      100% { transform: scale(1.05) translateY(-3%); }
    }

    @media (min-width: 960px) {
      /* Home hero: as it scrolls away, the headline lifts off, the Elevation mockup fades out,
         and the white background darkens to the showcase colour, so the page flows straight
         into Featured projects (no pause, no blank screen) */
      .hero { min-height: 100vh; min-height: 100svh; view-timeline: --hero block; view-timeline-inset: 0px; background: transparent; }   /* inset 0: ignore the header's scroll-padding */
      /* The white is a full-screen layer behind the page, so the whole screen fades to dark as one
         (no edge between the hero and the showcase). It hides once the hero has scrolled away. */
      .hero::before {
        content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
        animation: hero-dusk linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%;
      }
      .hero__copy { animation: hero-lift linear both; animation-timeline: --hero; animation-range: exit 0% exit 70%; }
      .hero__art img { animation: hero-fade linear both; animation-timeline: --hero; animation-range: exit 5% exit 75%; }
      .hero__cap { animation: hero-cap linear both; animation-timeline: --hero; animation-range: exit 0% exit 20%; }
      @keyframes hero-dusk {   /* white → the dark site background (#0E0E10), then hidden */
        0%, 18% { background-color: #FFFFFF; }
        60%     { background-color: #0E0E10; visibility: visible; }
        100%    { background-color: #0E0E10; visibility: hidden; }
      }
      @keyframes hero-lift { to { transform: translateY(-10vh); opacity: 0; } }
      @keyframes hero-fade { to { transform: translateY(-6vh) scale(0.94); opacity: 0; } }
      @keyframes hero-cap  { to { opacity: 0; } }

      /* Showcase: the section pins, and the three projects slide through it with a pause on each */
      .showcase { padding: 0; margin-top: -8vh; view-timeline: --showcase block; view-timeline-inset: 0px; }   /* -8vh: tucks into the darkened end of the hero, no empty band */
      .showcase__pin {
        position: sticky; top: 0; overflow: clip; padding-bottom: clamp(3rem, 8vh, 5rem);   /* only as tall as its content: the next section follows right after */
        display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(1.25rem, 3vh, 2.25rem);
        padding-top: calc(var(--header-h) + clamp(1.5rem, 5vh, 3.5rem));   /* content anchored under the header, not centred: no empty band above it */
      }
      .showcase__head { margin-bottom: 0; }
      .showcase__track { display: flex; gap: 0; animation: showcase-slide linear both; animation-timeline: --showcase; animation-range: contain 0% contain 100%; }
      .showcase__panel { flex: 0 0 100%; min-width: 0; }
      .showcase__media { max-height: 64vh; }
      .showcase__bar { display: block; position: relative; height: 2px; }
      .showcase__bar::before, .showcase__bar span { content: ""; position: absolute; top: 0; bottom: 0; left: var(--gutter); right: var(--gutter); }
      .showcase__bar::before { background: var(--line); }
      .showcase__bar span { background: var(--blue-bright); transform-origin: left; animation: showcase-bar linear both; animation-timeline: --showcase; animation-range: contain 0% contain 100%; }
      /* Height and the showcase-slide keyframes are generated per number of projects into accents.css */
      @keyframes showcase-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    }
  }
}

/* 19. MENU: hamburger + full-screen menu ------------------------------------
   The menu is a <dialog> opened with showModal(), so the browser handles focus,
   the Esc key and hiding the page from screen readers. main.js adds .is-open to
   run the animation, and waits for it before closing. */
.burger {
  display: inline-flex; align-items: center; gap: 0.6rem; min-width: 44px; min-height: 44px; padding: 0 0.6rem;
  border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; font-size: 0.9375rem; font-weight: 500; cursor: pointer;
}
.burger__icon { position: relative; width: 22px; height: 12px; flex: none; }
.burger__icon span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.4s var(--ease), right 0.3s var(--ease), top 0.4s var(--ease); }
.burger__icon span:first-child { top: 0; }
.burger__icon span:last-child { top: 10px; right: 7px; }
.burger:hover .burger__icon span:last-child { right: 0; }
.burger--close .burger__icon span { right: 0; top: 5px; }
.burger--close .burger__icon span:first-child { transform: rotate(45deg); }
.burger--close .burger__icon span:last-child { transform: rotate(-45deg); }
.burger--close:hover .burger__icon { transform: rotate(90deg); }
.burger--close .burger__icon { transition: transform 0.4s var(--ease); }
.burger__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 720px) { .burger__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; } }

.menu {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; color: var(--text); overflow: hidden;
}
.menu::backdrop { background: transparent; }
.menu__panel {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(ellipse at 85% 0%, color-mix(in srgb, var(--blue-bright) 14%, transparent) 0%, transparent 55%), var(--bg);
  clip-path: inset(0 0 100% 0); transition: clip-path 0.75s var(--ease-io);
}
.menu.is-open .menu__panel { clip-path: inset(0 0 0 0); }
.menu__top { flex: none; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.menu__body { flex: 1; display: grid; align-content: center; gap: clamp(2.5rem, 6vh, 4rem); padding-block: clamp(1.5rem, 5vh, 3rem); }
.menu__list { display: grid; gap: clamp(0.1rem, 1vh, 0.6rem); }
.menu__item { overflow: hidden; padding-bottom: 0.08em; }
.menu__item a {
  display: inline-flex; align-items: baseline; gap: clamp(0.75rem, 2vw, 1.5rem); color: var(--text); text-decoration: none;
  font-size: clamp(2.75rem, 1.4rem + 6.5vw, 6.5rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.045em;
  transition: color 0.3s var(--ease);
}
.menu__n { font-size: 0.875rem; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--muted); transform: translateY(-0.4em); }
.menu__word { display: inline-block; transition: transform 0.4s var(--ease); }
.menu__item a:hover .menu__word, .menu__item a:focus-visible .menu__word { transform: translateX(0.12em); }
.menu__item a:hover, .menu__item a[aria-current="page"] { color: var(--blue); }
.menu__item a[aria-current="page"] .menu__n { color: var(--blue); }
.menu__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.menu__mail { color: var(--text-2); text-decoration: none; }
.menu__mail:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 960px) {
  .menu__body { grid-template-columns: 1fr auto; align-items: end; }
  .menu__foot { flex-direction: column; align-items: flex-start; padding-bottom: 0.9rem; }
}
/* While the menu is open, the page behind can't scroll (main.js pads for the scrollbar) */
html.menu-open { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  /* Panel sweeps down, then the words rise in one after another, then the contact row fades up */
  .menu__word, .menu__n { transform: translateY(110%); transition: transform 0.7s var(--ease) 0s; }
  .menu.is-open .menu__item .menu__word, .menu.is-open .menu__item .menu__n { transform: none; }
  .menu.is-open .menu__item .menu__n { transform: translateY(-0.4em); }
  .menu.is-open .menu__item:nth-child(1) :is(.menu__word, .menu__n) { transition-delay: 0.30s; }
  .menu.is-open .menu__item:nth-child(2) :is(.menu__word, .menu__n) { transition-delay: 0.38s; }
  .menu.is-open .menu__item:nth-child(3) :is(.menu__word, .menu__n) { transition-delay: 0.46s; }
  .menu.is-open .menu__item:nth-child(4) :is(.menu__word, .menu__n) { transition-delay: 0.54s; }
  .menu.is-open .menu__item a:hover .menu__word { transform: translateX(0.12em); transition-delay: 0s; }
  .menu__foot, .menu__top { opacity: 0; transition: opacity 0.4s var(--ease); }
  .menu.is-open .menu__foot { opacity: 1; transition: opacity 0.6s var(--ease) 0.65s; }
  .menu.is-open .menu__top { opacity: 1; transition: opacity 0.5s var(--ease) 0.2s; }
}
@media (prefers-reduced-motion: reduce) {
  .menu__panel { transition: none; }
}

/* "See all projects" button under the home showcase */
.showcase__more { display: flex; padding-top: clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 960px) { .showcase__more { padding-top: 0; } }   /* pinned: sits right under the progress line */
.showcase__more .btn { min-width: min(100%, 16rem); }

/* 20. COOKIE BAR + PRIVACY PAGE --------------------------------------------
   consent.js shows the bar when no choice is stored. It slides up from the
   bottom, stays small and never blocks the page. Both choices weigh the same. */
.consent {
  position: fixed; z-index: 60; left: 0.75rem; right: 0.75rem; bottom: 0.75rem;
  display: grid; gap: 0.75rem; align-items: center;
  max-width: 46rem; margin-inline: auto; padding: 0.85rem 1rem;
  background: rgba(22, 22, 26, 0.94); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
  font-size: 0.875rem; line-height: 1.45; color: var(--text-2);
  transform: translateY(calc(100% + 1.5rem)); opacity: 0;
  transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
}
@supports (backdrop-filter: blur(1px)) { .consent { background: rgba(22, 22, 26, 0.82); backdrop-filter: blur(14px) saturate(1.2); } }
.consent.is-open { transform: none; opacity: 1; }
.consent__text { margin: 0; }
.consent__text a { color: var(--text); text-underline-offset: 2px; }
.consent__actions { display: flex; gap: 0.5rem; }
.consent__btn {
  flex: 1; min-height: 40px; padding: 0.4rem 1rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--text);
  font: inherit; font-weight: 500; cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.consent__btn:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.consent__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (min-width: 640px) {
  .consent { grid-template-columns: 1fr auto; gap: 1.25rem; padding: 0.75rem 0.75rem 0.75rem 1.25rem; }
  .consent__btn { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .consent { transform: none; transition: opacity 0.2s; } }

.footer__links { display: inline-flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-left: 0.75rem; }
.footer__links a, .footer__cookies { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.footer__links a:hover, .footer__cookies:hover { color: var(--text); }
.footer__cookies { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }

.legal .page-title { margin-top: 1rem; }
.legal__body { display: grid; gap: 2rem; max-width: 42rem; margin-top: clamp(2.5rem, 6vw, 4rem); }
.legal__sec p { color: var(--text-2); font-size: 1.0625rem; line-height: 1.65; }
.legal__sec a { color: var(--text); text-underline-offset: 3px; }
.legal__date { font-size: 0.875rem; color: var(--muted); }