/* Design reference: Figma frame 2212 × 1061, 20px outer margin (2252px canvas).
   --u scales Figma pixel values with the viewport (used for layout ratios).
   Type and spacing use the fluid tokens below: they grow from mobile (375px)
   up to a comfortable desktop size and stop at the --max-page width, so large screens
   don't get oversized text. */
:root {
  --max-page: 1600px;       /* page stops growing here; keeps large monitors calm */
  --u: calc(min(100vw, var(--max-page)) / 2252);
  --vw: min(1vw, calc(var(--max-page) / 100));   /* 1vw, frozen at --max-page */

  /* colours */
  --white: #fff;
  --white-90: rgba(255, 255, 255, 0.9);
  --ink: #2e2d2d;            /* all dark text */
  --ink-soft: #5c5b5b;       /* secondary dark text (≈ ink at 70%, AA on --surface) */
  --grey: #b8b8b8;           /* secondary text on dark (9.8:1) */
  --muted: #8c8c8c;          /* small print on dark (5.8:1, WCAG AA) */
  --dark: #0d0d0d;           /* dark blocks */
  --surface: #eeeeee;        /* light grey blocks */
  --line-dark: #333;         /* dividers on dark */
  --line-light: #c8c8c8;     /* dividers on light */
  --page-bg: #fff;

  /* type scale (fluid, capped) */
  --fs-display: clamp(40px, 2.2 * var(--vw) + 30px, 72px);   /* section titles */
  --fs-h3: clamp(26px, 1 * var(--vw) + 20px, 40px);          /* card titles, stat values */
  --fs-lead: clamp(18px, 0.35 * var(--vw) + 15.5px, 22px);   /* intro paragraphs */
  --fs-body: clamp(16px, 0.2 * var(--vw) + 14.5px, 18px);    /* list items, links */
  --fs-small: 15px;                                 /* labels, meta, legal */
  --fs-logo: clamp(20px, 0.7 * var(--vw) + 15px, 28px);
  --nav-fs: clamp(15px, 0.15 * var(--vw) + 13.5px, 17px);

  /* spacing */
  --radius: 15px;
  --radius-inner: 10px;      /* media nested inside a padded block */
  --gutter: 20px;            /* page edge + space between blocks */
  --pad-x: clamp(20px, 3.2 * var(--vw), 64px);
  --pad-y: clamp(40px, 4.6 * var(--vw), 88px);
  --col-gap: clamp(32px, 4 * var(--vw), 80px);
  --measure: 38em;           /* max line length for paragraphs (~70 characters) */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--page-bg);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }

/* Blocks sit 20px from the page edge and 20px apart; capped at --max-page wide. */
.page {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  padding: var(--gutter);
  max-width: var(--max-page);
  margin-inline: auto;
}

/* Mirrors Figma's text-box-trim (cap → alphabetic) so spacing is measured
   from cap height to baseline, as in the design. */
.trim {
  text-box: trim-both cap alphabetic;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  aspect-ratio: 2212 / 1061;
  min-height: 560px;
  max-height: calc(100vh - 2 * var(--gutter));
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: -2;
  user-select: none;
  pointer-events: none;
}

/* Soft dark fade at the top so the nav stays readable on any photo (replaces the old blur) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 22%);
  pointer-events: none;
}
.hero--project::before { content: none; }   /* has its own gradients */

/* ---------- Navbar ---------- */
.nav {
  display: flex;
  align-items: flex-start;
  padding: clamp(20px, 2.2 * var(--vw), 40px) var(--pad-x) 20px;
}

.nav__inner {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo {
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--fs-logo);
  line-height: 1.16;
  color: var(--white);
  white-space: nowrap;
  letter-spacing: 0;
}

.nav__links {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: clamp(24px, 2.2 * var(--vw), 40px);
  list-style: none;
}

.nav__links a,
.btn-contact {
  font-size: var(--nav-fs);
  line-height: 1;
  white-space: nowrap;
}

.nav__links a {
  color: var(--white-90);
  transition: color .2s ease;
}
.nav__links a:hover { color: var(--white); }

.btn-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Figma: 15px around cap-trimmed text = 48px tall; with line-height 1 that is 12px */
  padding: clamp(10px, 0.7 * var(--vw), 13px) clamp(18px, 1.3 * var(--vw), 24px);
  border: 1px solid var(--white);
  border-radius: 100px;
  color: var(--white);
  transition: background-color .25s ease, color .25s ease;
}
.btn-contact:hover { background: var(--white); color: var(--dark); }

.nav__links a:focus-visible,
.btn-contact:focus-visible,
.nav__logo:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
  border-radius: 4px;
}
.btn-contact:focus-visible { border-radius: 100px; }

/* ---------- Menu toggle + dropdown (tablet / mobile only) ---------- */
.nav__toggle {
  display: none;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.nav__toggle-icon { display: block; width: 100%; height: 100%; }
.nav__toggle:hover { transform: rotate(45deg); }
/* open: arrow turns to point down into the menu */
.nav__toggle[aria-expanded="true"] { transform: rotate(90deg); }
.nav__toggle:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }

/* Full-screen menu: covers the viewport; logo + circle stay on top */
.menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 120px calc(var(--gutter) + var(--pad-x)) 40px;
  background: var(--dark);
  color: var(--white);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease, visibility 0s;
}

/* keep the logo + circle above the overlay while it's open */
body.menu-open .nav__inner { z-index: 60; }
/* hero is its own stacking context: lift it above later positioned sections */
body.menu-open .hero,
body.menu-open .page-header { z-index: 100; }
/* the menu lives inside the hero/header: never let the scroll-reveal fade or shift it while open */
.js body.menu-open :is(.hero, .page-header) { opacity: 1; transform: none; transition: none; }

.menu__links { list-style: none; }
.menu__links li { border-bottom: 1px solid #333; }
.menu__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--fs-h3);   /* 26–40px, same scale as the card titles */
  line-height: 1;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1), color .2s ease;
}
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu.is-open .menu__links li:nth-child(1) a { transition-delay: .05s, .05s, 0s; }
.menu.is-open .menu__links li:nth-child(2) a { transition-delay: .1s, .1s, 0s; }
.menu.is-open .menu__links li:nth-child(3) a { transition-delay: .15s, .15s, 0s; }
.menu.is-open .menu__links li:nth-child(4) a { transition-delay: .2s, .2s, 0s; }
.menu__links a:hover { color: var(--grey); }

.menu__links .arrow {
  width: 0.5em;
  height: 0.5em;
  margin-left: 16px;
  stroke-width: 1.2;
  transition: transform .25s ease;
}
.menu__links a:hover .arrow { transform: translate(3px, -3px); }

.menu__socials {
  display: flex;
  align-items: center;
  gap: 24px;
}
.menu__socials a {
  display: block;
  width: 28px;
  height: 28px;
  color: var(--white);
  transition: opacity .2s ease;
}
.menu__socials a:hover { opacity: .6; }
.menu__socials svg { display: block; width: 100%; height: 100%; fill: currentColor; }

.menu a:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; border-radius: 6px; }

body.menu-open { overflow: hidden; }

/* ---------- About ---------- */
.about {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad-y) var(--pad-x);
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--ink);
}

.about__grid {
  display: flex;
  align-items: flex-start;
  gap: var(--col-gap);
}

.about__title-col,
.about__body {
  flex: 1 1 0;
  min-width: 0;
}

.about__title {
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: normal;
  letter-spacing: 0.6332px;
  white-space: nowrap;
  color: var(--ink);
}

.about__body {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4 * var(--vw), 80px);
}

.about__text {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink);
  max-width: var(--measure);
}
.about__text p + p { margin-top: 1em; }

.stats {
  display: flex;
  align-items: flex-start;
  gap: clamp(28px, 5 * var(--vw), 96px);
  list-style: none;
  letter-spacing: 0.6332px;
  white-space: nowrap;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 0.8 * var(--vw), 14px);
}

.stat__value {
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 1.4 * var(--vw) + 22px, 52px);
  line-height: normal;
  color: var(--ink);
}

.stat__label {
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: normal;
  color: var(--ink-soft);
}

/* ---------- Work ---------- */
.work {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1 * var(--vw), 16px);
  padding: 0;
}

.work__head {
  padding: 0 var(--pad-x);
}

.work__title {
  display: flex;
  align-items: center;
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 1.1;
  color: var(--ink);
  padding-block: clamp(16px, 2 * var(--vw), 40px);
}

.work__grid {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* Cards keep Figma's 724 × 946 ratio so the image crops below stay exact. */
.work-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 724 / 946;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.work-card img {
  position: absolute;
  max-width: none;
  user-select: none;
}

/* Crops copied from the Figma image fills */
.work-card--car img    { width: 195.97%; height: 100%;    left: -22.68%; top: 0; }
.work-card--screen img { width: 239.66%; height: 103.17%; left: -44.7%;  top: -1.59%; }
.work-card--outwix img { width: 122.15%; height: 202.59%; left: -11.1%;  top: -46.64%; }

/* Hover: image zooms slightly, the other cards step back, name + arrow come in */
.work-card__media {
  position: absolute;
  inset: 0;
  transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .5s ease, filter .5s ease;
}

.work-card__arrow,
.work-card__info {
  position: absolute;
  opacity: 0;
  transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1);
}

.work-card__arrow {
  top: clamp(14px, 1.4 * var(--vw), 24px);
  right: clamp(14px, 1.4 * var(--vw), 24px);
  width: clamp(40px, 2.6 * var(--vw), 48px);
  height: clamp(40px, 2.6 * var(--vw), 48px);
  transform: scale(.8) rotate(-45deg);
}
.work-card__arrow svg { display: block; width: 100%; height: 100%; }

.work-card__info {
  left: clamp(14px, 1.4 * var(--vw), 24px);
  right: clamp(14px, 1.4 * var(--vw), 24px);
  bottom: clamp(14px, 1.4 * var(--vw), 24px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  transform: translateY(14px);
}

.work-card:is(:hover, :focus-visible) .work-card__media { transform: scale(1.04); }
.work-card:is(:hover, :focus-visible) :is(.work-card__arrow, .work-card__info) { opacity: 1; transform: none; }
.work-card:is(:hover, :focus-visible) .work-card__info { transition-delay: .06s; }
.work__grid:has(.work-card:hover) .work-card:not(:hover) .work-card__media {
  opacity: .55;
  filter: grayscale(.8);
}
.work-card:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }

/* Touch screens: no hover, so show the name + arrow permanently */
@media (hover: none) {
  .work-card__arrow,
  .work-card__info { opacity: 1; transform: none; }
}

/* ---------- Services ---------- */
.services {
  padding: var(--pad-y) var(--pad-x);
  background: var(--dark);
  border-radius: var(--radius);
  overflow: hidden;
}

.services__grid {
  display: flex;
  align-items: stretch;
  gap: var(--col-gap);
}

.services__intro,
.services__main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.services__text {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--grey);
  max-width: var(--measure);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--white);
  border-radius: 100px;
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: normal;
  color: var(--white);
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
  padding: clamp(13px, 0.9 * var(--vw), 17px) clamp(22px, 1.6 * var(--vw), 30px);
}
.btn-outline:hover { background: var(--white); color: var(--dark); }
.btn-outline:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }

.service-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  --row-gap: clamp(16px, 1.4 * var(--vw), 24px);
  gap: var(--row-gap);
  list-style: none;
}

.service-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  line-height: 1.21;        /* Inter "normal"; pinned so the row height matches Figma */
}

.service-list__name {
  line-height: 1.21;
  font-weight: 400;
  font-size: var(--fs-lead);
  letter-spacing: 0.6332px;
  color: var(--white);
  white-space: nowrap;
}

.service-list__more {
  line-height: 1.21;
  flex-shrink: 0;
  width: auto;
  text-align: right;
  font-size: var(--fs-body);
  color: var(--grey);
  transition: color .2s ease;
}
.service-list a:hover .service-list__more { color: var(--white); }
.service-list a:focus-visible { outline: 2px solid var(--white); outline-offset: 6px; border-radius: 4px; }

/* Divider: same 1px line as the footer */
.service-list__divider {
  height: 1px;
  margin-top: var(--row-gap);
  background: var(--line-dark);
}

.services__photo {
  width: 100%;
  aspect-ratio: 976 / 637.398;
  margin-top: clamp(32px, 4 * var(--vw), 72px);
  border-radius: var(--radius-inner);
  object-fit: cover;
}

/* ---------- Footer ---------- */
.footer {
  display: flex;
  flex-direction: column;
  padding: var(--pad-y) var(--pad-x) clamp(28px, 2.6 * var(--vw), 48px);
  background: var(--dark);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--white);
}

.footer__top {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.footer__contact {
  flex: 0 0 auto;
  /* right edge on the shared 50% column line; link columns start where About/Services text starts */
  width: calc(50% - var(--col-gap) / 2);
  margin-right: calc(var(--col-gap) - 20px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2 * var(--vw), 32px);
}

.footer__intro,
.footer__mail {
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.footer__intro { color: var(--grey); }
.footer__mail {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color .2s ease;
}
.footer__mail:hover { text-decoration-color: currentColor; }

.footer__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.2 * var(--vw), 20px);
  line-height: normal;
  white-space: nowrap;
}

.footer__label {
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--muted);
}

.footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  list-style: none;
  font-size: var(--fs-body);
}

.footer__links a,
.footer__legal a { transition: color .2s ease, opacity .2s ease; }
.footer__links a:hover { opacity: .6; }

.footer__line {
  height: 1px;
  margin-top: clamp(48px, 5 * var(--vw), 96px);
  background: var(--line-dark);
  border: 0;
}

.footer__wordmark {
  margin-top: clamp(32px, 3 * var(--vw), 56px);
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 1.8 * var(--vw) + 22px, 56px);
  line-height: 1;
  white-space: nowrap;
}

.footer__bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(24px, 2.4 * var(--vw), 44px);
  font-size: var(--fs-small);
  line-height: normal;
  color: var(--muted);
  white-space: nowrap;
}

.footer__legal {
  display: flex;
  gap: clamp(20px, 2 * var(--vw), 32px);
}
.footer__legal a:hover { color: var(--white); }

.footer a:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; border-radius: 4px; }
.footer .btn-outline:focus-visible { border-radius: 100px; }

/* ---------- Hover gradient on case cards (home + cases page) ---------- */
/* Dark fade at the top so the white tag pills stay readable on light photos */
.work-card::after,
.case::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .22) 16%, rgba(0, 0, 0, 0) 34%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.case::after { z-index: -1; }                 /* between image (-2) and pills */
.work-card__arrow, .work-card__info, .work-card__tags { z-index: 1; }
.work-card:is(:hover, :focus-visible)::after,
.case:is(:hover, :focus-visible)::after { opacity: 1; }

@media (hover: none) {
  .work-card::after,
  .case::after { opacity: 1; }
}

/* ---------- Pills (name label + tags on case cards) ---------- */
.pill {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 100px;
  background: var(--white);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

/* Tag: outline only, no fill, always white (readable thanks to the hover gradient) */
.pill--outline {
  padding: 9px 17px;            /* 1px border keeps it the same height as .pill */
  background: transparent;
  border: 1px solid currentColor;
  color: var(--white);
  font-weight: 400;
}

/* The case name is not shown on the cards (only tags + arrow on hover);
   it stays in the HTML as the link text for screen readers. */
.work-card__info,
.case__info {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Pills on the case cards (name label + tags on hover) use Clash Display */
:is(.work-card, .case) .pill {
  font-family: "Clash Display", "Inter", sans-serif;
  letter-spacing: 0.01em;
}

/* ---------- Arrow icon ---------- */
/* Drawn shape instead of the ↗ glyph. Every arrow is sized from the nav
   button's font size, so size, stroke weight and spacing are identical
   everywhere (nav, buttons, services list). */
.arrow {
  display: inline-block;
  flex-shrink: 0;
  width: calc(0.6 * var(--nav-fs));
  height: calc(0.6 * var(--nav-fs));
  margin-left: calc(0.55 * var(--nav-fs));
  vertical-align: calc(0.02 * var(--nav-fs));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  overflow: visible;
}


.service-list__more {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  white-space: nowrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .footer__top { flex-wrap: wrap; row-gap: 56px; }
  .footer__contact { width: 100%; margin-right: 0; }
}

@media (max-width: 1000px) {
  .about__grid { flex-direction: column; }
  .about__title-col, .about__body { flex: none; width: 100%; }

  /* Stack as: text → list → photo → button */
  .services__grid { flex-direction: column; gap: 40px; }
  .services__intro, .services__main { display: contents; }
  .services__text { order: 1; }
  .service-list { order: 2; }
  .services__photo { order: 3; margin-top: 0; }
  .btn-outline { order: 4; }
}

/* Tablet + mobile: work cards become a horizontal swipe row */
@media (max-width: 900px) {
  .work__grid {
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
  }
  .work__grid::-webkit-scrollbar { display: none; }
  .work-card { flex: 0 0 46%; scroll-snap-align: start; }
}

@media (max-width: 640px) {
  .work-card { flex-basis: 82%; }
  .service-list__name { white-space: normal; }
  .service-list__more { width: auto; white-space: nowrap; }

  .footer__top { row-gap: 40px; }
  .footer__col { flex: 1 1 140px; }
  .footer__bottom { flex-direction: column; gap: 12px; white-space: normal; }
}

@media (max-width: 900px) {
  .hero { aspect-ratio: auto; height: calc(100svh - 2 * var(--gutter)); max-height: none; }
  .hero__bg { object-position: 55% top; }
  .nav__links { display: none; }

  /* Tablet + mobile: Contact pill is replaced by the circle menu toggle */
  .nav__inner { align-items: center; }
  .btn-contact { display: none; }
  .nav__toggle { display: block; }
  .menu { display: flex; }
}

@media (max-width: 480px) {
  :root { --gutter: 12px; }
  .nav { padding: 20px 16px; }
  :root { --nav-fs: 14px; }
  .nav__toggle { width: 44px; height: 44px; }
  .menu { padding: 108px 28px 32px; }
  .stats { gap: 28px; justify-content: space-between; }
}

/* =====================================================================
   Cases page
   ===================================================================== */

/* Nav inside a padded block (the header supplies the padding) */
.nav--flush { padding: 0; }

.page-header {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 7 * var(--vw), 140px);
  padding: clamp(20px, 2.2 * var(--vw), 40px) var(--pad-x) var(--pad-y);
  background: var(--dark);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
}

.nav__links a[aria-current="page"] { color: var(--white); }

.page-header__intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--col-gap);
}

.page-header__title-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(24px, calc(48 * var(--u)), 48px);
  min-width: 0;
}

.page-header__title {
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 1.05;
  white-space: nowrap;
}

.page-header__text {
  flex: 0 0 calc(50% - var(--col-gap) / 2);   /* starts on the shared 50% column line */
  min-width: 0;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--grey);
  padding-right: max(0px, calc(50% - var(--col-gap) / 2 - var(--measure)));   /* caps line length, keeps the start on the line */
}

@media (max-width: 1000px) {
  .page-header__intro { flex-direction: column; align-items: flex-start; }
  .page-header__text { flex: none; width: 100%; max-width: var(--measure); }
}

@media (max-width: 480px) {
  .nav--flush { padding: 0; }
  .page-header { padding: 20px 16px 32px; }
}

/* ---------- Cases grid ---------- */
/* Rows of 760px (Figma) with 20px gaps; each card's --w is its Figma width,
   used to size it so the row splits exactly like the design. */
.cases {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cases__row {
  display: flex;
  gap: 20px;
  height: clamp(320px, 34 * var(--vw), 640px);
}

.case {
  position: relative;
  /* exact Figma share of the row: both cards in a row add up to 2192 (2212 - 20 gap) */
  flex: 0 1 calc((100% - 20px) * var(--w, 1096) / 2192);
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: clamp(14px, 1.4 * var(--vw), 24px);   /* same inset as the home work cards */
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background: var(--surface);
  color: var(--white);
}

.case__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case__arrow {
  align-self: flex-end;
  width: clamp(40px, 2.6 * var(--vw), 48px);
  height: clamp(40px, 2.6 * var(--vw), 48px);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.case__arrow svg { display: block; width: 100%; height: 100%; }

/* Name + tags, same as the home work cards */
.case__info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
}
/* Tags: top row, right-aligned up against the arrow (same on home + cases) */
.work-card__tags,
.case__tags {
  position: absolute;
  top: clamp(14px, 1.4 * var(--vw), 24px);
  left: clamp(14px, 1.4 * var(--vw), 24px);
  right: calc(clamp(14px, 1.4 * var(--vw), 24px) + clamp(40px, 2.6 * var(--vw), 48px) + 8px);
  min-height: clamp(40px, 2.6 * var(--vw), 48px);   /* = arrow height, so the pills sit centred next to it */
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
.work-card:is(:hover, :focus-visible) .work-card__tags,
.case:is(:hover, :focus-visible) .case__tags {
  opacity: 1;
  transform: none;
  transition-delay: .1s;
}
@media (hover: none) {
  .work-card__tags,
  .case__tags { opacity: 1; transform: none; }
}


/* --zoom: extra centered zoom beyond object-fit: cover (from the Figma crop).
   On hover the image zooms in slightly (4%) and the other cases step back,
   same as the work cards on the home page. */
.case__img {
  transform: scale(var(--zoom, 1));
  transform-origin: var(--origin, 50% 50%);
  transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .5s ease, filter .5s ease;
}
.case:is(:hover, :focus-visible) .case__img { transform: scale(calc(var(--zoom, 1) * 1.04)); }
.cases:has(.case:hover) .case:not(:hover) .case__img {
  opacity: .55;
  filter: grayscale(.8);
}

/* Clean image by default; arrow and name label come in on hover/focus */
.case__arrow,
.case__info {
  opacity: 0;
  transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1);
}
.case__arrow { transform: scale(.8) rotate(-45deg); }
.case__info { transform: translateY(14px); }

.case:is(:hover, :focus-visible) .case__arrow,
.case:is(:hover, :focus-visible) .case__info {
  opacity: 1;
  transform: none;
}
.case:is(:hover, :focus-visible) .case__info { transition-delay: .06s; }

.case:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }

/* Touch screens have no hover: always show the info there */
@media (hover: none) {
  .case__arrow,
  .case__info { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .cases__row { flex-direction: column; height: auto; }
  .case { flex: none; width: 100%; aspect-ratio: 1096 / 760; }
}

@media (max-width: 480px) {
  .cases, .cases__row { gap: 12px; }
  .case { aspect-ratio: 4 / 5; }
}

/* ---------- CTA ---------- */
.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--col-gap);
  padding: var(--pad-y) var(--pad-x);
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}

.cta__title {
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -0.02em;      /* -1.92px @ 96px */
  color: var(--ink);
  white-space: nowrap;
}

.cta__body {
  flex: 0 0 calc(50% - var(--col-gap) / 2);   /* starts on the shared 50% column line */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(24px, 2.4 * var(--vw), 40px);
}

.cta__text {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink);
}

/* Filled variant of the "Let's work together" button */
.btn-filled {
  background: var(--dark);
  border-color: var(--dark);
}
.btn-filled:hover { background: #2e2d2d; border-color: #2e2d2d; color: var(--white); }
.btn-filled:focus-visible { outline-color: var(--dark); }

@media (max-width: 1000px) {
  .cta { flex-direction: column; align-items: flex-start; }
  .cta__body { flex: none; width: 100%; max-width: var(--measure); }
}

@media (max-width: 480px) {
  .cta__title { white-space: normal; }
}

/* ---------- Scroll reveal ---------- */
/* Sections and the blocks inside them fade in while sliding up whenever they
   scroll into view, and reset once they leave so it replays in both scroll
   directions. The .js class is set in <head>, so without JavaScript all
   content simply stays visible. Keep this list in sync with js/main.js. */
.js :is(
  .page > :not(.cases),
  .about__title, .about__text, .stat,
  .work__title, .work-card,
  .services__text, .service-list > li, .services__photo, .services .btn-outline,
  .footer__contact > *, .footer__col, .footer__line, .footer__wordmark, .footer__bottom,
  .page-header__title, .page-header__text,
  .case,
  .cta__title, .cta__text, .cta .btn-outline,
  .project-intro, .project-brief__title, .project-brief__col, .project-facts > div,
  .gallery__head, .gallery__item, .irie-row__item,
  .showcase__head, .showcase__split > *, .tpl-viewer, .compare,
  .showcase__bento > *, .showcase__palette, .ph--banner, .card-pair, .ph--site,
  .me-hero, .cv__head, .cv__item, .story, .screen__panel, .contact-hero__title, .contact-hero__sub, .contact,
  .why__list li, .dm, .talk, .pm, .spot__info, .faq__head, .brief-grid > div, .faq__item
) {
  opacity: 0;
  transform: translateY(48px);
  /* leaving: reset without delay (happens off-screen) */
  transition:
    opacity .5s ease,
    transform .5s ease,
    background-color .25s ease, color .25s ease, border-color .25s ease;
}

.js :is(
  .page > :not(.cases),
  .about__title, .about__text, .stat,
  .work__title, .work-card,
  .services__text, .service-list > li, .services__photo, .services .btn-outline,
  .footer__contact > *, .footer__col, .footer__line, .footer__wordmark, .footer__bottom,
  .page-header__title, .page-header__text,
  .case,
  .cta__title, .cta__text, .cta .btn-outline,
  .project-intro, .project-brief__title, .project-brief__col, .project-facts > div,
  .gallery__head, .gallery__item, .irie-row__item,
  .showcase__head, .showcase__split > *, .tpl-viewer, .compare,
  .showcase__bento > *, .showcase__palette, .ph--banner, .card-pair, .ph--site,
  .me-hero, .cv__head, .cv__item, .story, .screen__panel, .contact-hero__title, .contact-hero__sub, .contact,
  .why__list li, .dm, .talk, .pm, .spot__info, .faq__head, .brief-grid > div, .faq__item
).is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity .9s cubic-bezier(.2, .8, .2, 1) var(--reveal-delay, 0s),
    transform 1.1s cubic-bezier(.2, .8, .2, 1) var(--reveal-delay, 0s),
    background-color .25s ease, color .25s ease, border-color .25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .js :is(
    .page > :not(.cases),
    .about__title, .about__text, .stat,
    .work__title, .work-card,
    .services__text, .service-list > li, .services__photo, .services .btn-outline,
    .footer__contact > *, .footer__col, .footer__line, .footer__wordmark, .footer__bottom,
    .page-header__title, .page-header__text,
    .case,
    .cta__title, .cta__text, .cta .btn-outline,
  .project-intro, .project-brief__title, .project-brief__col, .project-facts > div,
  .gallery__head, .gallery__item, .irie-row__item,
  .showcase__head, .showcase__split > *, .tpl-viewer, .compare,
  .showcase__bento > *, .showcase__palette, .ph--banner, .card-pair, .ph--site,
  .me-hero, .cv__head, .cv__item, .story, .screen__panel, .contact-hero__title, .contact-hero__sub, .contact,
  .why__list li, .dm, .talk, .pm, .spot__info, .faq__head, .brief-grid > div, .faq__item
  ) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =====================================================================
   Project detail page
   ===================================================================== */

/* Header: full photo with nav on top and title + meta at the bottom */
.hero--project {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 2212 / 1026;
  min-height: 640px;
}
.hero--project .hero__bg { object-position: center; }

/* Figma: dark fade at the top (nav) and a stronger one at the bottom (title) */
.hero--project::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .75) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 30%);
  pointer-events: none;
}

.project-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--col-gap);
  padding: 0 var(--pad-x) clamp(28px, 3.2 * var(--vw), 64px);
  color: var(--white);
}

.project-intro__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 1.6 * var(--vw), 28px);
  min-width: 0;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-body);
  line-height: 1;
  color: rgba(255, 255, 255, .85);
  transition: color .2s ease;
}
.back-link:hover { color: var(--white); }
.back-link__arrow {
  width: 0.7em;
  height: 0.7em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  transition: transform .25s ease;
}
.back-link:hover .back-link__arrow { transform: translateX(-3px); }
.back-link:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; border-radius: 4px; }

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
}

/* Larger tag used in the project header (Figma: 20px, 1.5px border, light tint) */
.pill--lg {
  padding: clamp(10px, 0.7 * var(--vw), 13px) clamp(18px, 1.3 * var(--vw), 24px);
  border-width: 1.5px;
  border-color: rgba(255, 255, 255, .8);
  background: rgba(0, 0, 0, .2);
  font-size: var(--fs-body);
  line-height: 1;
}

.project-title {
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(48px, 4.6 * var(--vw) + 20px, 112px);
  line-height: 1;
  letter-spacing: -0.03em;      /* Figma: -3.84px @ 128px */
  color: var(--white);
}

.project-meta {
  display: flex;
  flex-shrink: 0;
  gap: clamp(24px, 2.6 * var(--vw), 48px);
  font-family: "Clash Display", "Inter", sans-serif;
}
.project-meta > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.project-meta dt {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, .7);
}
.project-meta dd {
  font-size: clamp(18px, 0.35 * var(--vw) + 16px, 23px);
  font-weight: 500;
  line-height: 1.1;
  color: var(--white);
  white-space: nowrap;
}
@media (max-width: 1000px) {
  .project-intro { flex-direction: column; align-items: flex-start; gap: 32px; }
}

@media (max-width: 900px) {
  .hero--project { aspect-ratio: auto; height: calc(100svh - 2 * var(--gutter)); min-height: 600px; }
}

@media (max-width: 480px) {
  .project-intro { padding: 0 16px 28px; }
  .project-meta { gap: 24px; }
}

/* ---------- Project: briefing & approach ---------- */
.project-brief {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4.4 * var(--vw), 84px);
  padding: var(--pad-y) var(--pad-x);
  background: var(--surface);
  border-radius: var(--radius);
  color: var(--ink);
}

.project-brief__title {
  max-width: 14em;              /* Figma: 1300px wide at 96px */
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 1.12;
  letter-spacing: -0.02em;      /* -1.92px @ 96px */
}

/* two columns on the shared 50% line (same as About / Services) */
.project-brief__cols {
  display: flex;
  gap: var(--col-gap);
}
.project-brief__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.3 * var(--vw), 24px);
}

.project-brief__label {
  display: flex;
  gap: 14px;
  padding-bottom: clamp(16px, 1.3 * var(--vw), 24px);
  border-bottom: 1px solid var(--line-light);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
}
.project-brief__label span { font-weight: 400; color: var(--ink-soft); }

.project-brief__text {
  max-width: var(--measure);
  font-size: var(--fs-lead);
  line-height: 1.6;
}

.project-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3 * var(--vw), 64px);
}
.project-facts > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: clamp(16px, 1.3 * var(--vw), 24px);
  border-top: 1px solid var(--line-light);
}
.project-facts dt {
  font-size: var(--fs-small);
  line-height: 1;
  color: var(--ink-soft);
}
.project-facts dd {
  font-size: var(--fs-body);
  line-height: 1.4;
}

@media (max-width: 1000px) {
  .project-brief__cols { flex-direction: column; gap: 40px; }
}

@media (max-width: 640px) {
  .project-facts { grid-template-columns: 1fr; gap: 20px; }
}

/* Case intro: the title, then four short blocks side by side —
   briefing, approach, deliverables and tools — each with a line on top, read at a glance */
.brief-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px clamp(24px, 2.4 * var(--vw), 40px);
}
.brief-grid > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line-light);
}
.brief-grid dt {
  display: flex;
  gap: 10px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink);
}
.brief-grid dt span { font-weight: 400; color: var(--ink-soft); }
.brief-grid dd { font-size: var(--fs-body); line-height: 1.55; color: var(--ink); }
/* briefing and approach as two full text blocks, each half the width (split on the shared 50% line),
   the facts row underneath */
.brief-grid--halves { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--col-gap); }
.brief-grid--halves > div { gap: 16px; padding-top: 22px; }
.brief-grid--halves dd { max-width: var(--measure); font-size: var(--fs-lead); line-height: 1.6; }
@media (max-width: 1000px) {
  .brief-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .brief-grid--halves { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .brief-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Project: deliverables gallery ---------- */
.gallery {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}

.gallery__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(24px, 2.2 * var(--vw), 40px) var(--pad-x) clamp(8px, 1.2 * var(--vw), 24px);
}
.gallery__title {
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.gallery__caption {
  font-size: var(--fs-body);
  line-height: 1.3;
  color: var(--ink-soft);
}

/* Figma bento: one large photo (1317 × 900) + two stacked (875 × 440) */
.gallery__bento {
  display: grid;
  grid-template-columns: 1317fr 875fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--gutter);
  aspect-ratio: 2212 / 900;
}
.gallery__item--tall { grid-row: span 2; }

/* second row: 744 × 630 + 1448 × 630 */
.gallery__row {
  display: grid;
  grid-template-columns: 744fr 1448fr;
  gap: var(--gutter);
  aspect-ratio: 2212 / 630;
}

.gallery__item {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.gallery__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .gallery__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .gallery__bento,
  .gallery__row { display: flex; flex-direction: column; aspect-ratio: auto; gap: 12px; }
  .gallery__item { aspect-ratio: 4 / 3; }
}

/* ---------- Project: more projects ---------- */
.more-projects {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  margin-top: clamp(40px, 5 * var(--vw), 96px);   /* extra breathing room after the gallery */
}
.more-projects .gallery__head { align-items: center; }

/* same case cards as the cases page, in a lower row (Figma: 564px vs 760px) */
.cases--more .cases__row { height: clamp(300px, 26 * var(--vw), 500px); }

/* Outline pill link on light backgrounds ("All cases ↗") */
.btn-ghost {
  display: inline-flex;
  align-items: baseline;
  flex-shrink: 0;
  padding: clamp(10px, 0.7 * var(--vw), 13px) clamp(18px, 1.3 * var(--vw), 24px);
  border: 1.5px solid var(--ink);
  border-radius: 100px;
  font-size: var(--fs-body);
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}
.btn-ghost:hover { background: var(--ink); color: var(--white); }
.btn-ghost:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 900px) {
  .cases--more .cases__row { height: auto; }
}

/* ---------- Project: festival gallery (justified rows, 17 photos) ---------- */
/* Every photo keeps its own proportions (--r = width / height, 3:2 landscape,
   2:3 or 3:4 portrait). Within a row each photo grows in proportion to --r, so
   all photos in a row end up the same height and nothing is cropped. */
.irie-rows {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}

.irie-row {
  display: flex;
  gap: var(--gutter);
}

.irie-row__item {
  position: relative;
  flex: var(--r) 1 0;
  min-width: 0;
  aspect-ratio: var(--r);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.irie-row__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}
.irie-row__item:hover img { transform: scale(1.03); }
.irie-row__item > .ph { position: absolute; inset: 0; border-radius: 0; }   /* placeholder until the photo arrives */

/* phones: two-column masonry, each photo at its own proportions */
@media (max-width: 700px) {
  .irie-rows { display: block; columns: 2; column-gap: 12px; }
  .irie-row { display: contents; }
  .irie-row__item {
    display: block;
    width: 100%;
    margin-bottom: 12px;
    break-inside: avoid;
  }
}

/* =====================================================================
   Project: Instagram branding showcase (Agence Het Zoute)
   ===================================================================== */
/* Each chapter: numbered title left, short explanation on the shared 50% line */
.showcase {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  margin-top: clamp(48px, 5 * var(--vw), 96px);   /* clear breathing room between the numbered blocks */
}

.showcase__head {
  display: flex;
  align-items: flex-start;   /* title and text start at the same height, like the rest of the site */
  justify-content: space-between;
  gap: var(--col-gap);
  padding: 0 var(--pad-x) clamp(8px, 1.2 * var(--vw), 24px);
}
.showcase__title {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 1.8 * var(--vw) + 20px, 56px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.showcase__title span {
  font-family: "Inter", sans-serif;
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
}
.showcase__text {
  flex: 0 0 calc(50% - var(--col-gap) / 2);
  /* the box always starts on the 50% line; the padding only caps the line length */
  padding-right: max(0px, calc(50% - var(--col-gap) / 2 - var(--measure)));
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Placeholder: grey block with a small label of what goes there */
.ph {
  position: relative;
  min-width: 0;
  border-radius: var(--radius);
  background: #e6e6e6;
  overflow: hidden;
}
.ph[data-label]::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

/* Profile & highlights: phone left, highlight covers + header right */
.showcase__split {
  display: grid;
  grid-template-columns: minmax(0, 875fr) minmax(0, 1317fr);
  gap: var(--gutter);
}
/* Mockups sit on a light panel (transparent PNGs from Canva) */
.mockup {
  position: relative;
  min-width: 0;
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.mockup img {
  position: absolute;
  inset: 7%;
  width: 86%;
  height: 86%;
  object-fit: contain;
}
.mockup--phone { aspect-ratio: 4 / 5; }
.mockup--laptop { flex: 1; min-height: 240px; }

.showcase__panel {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  min-width: 0;
}
.highlights {
  display: flex;
  justify-content: space-evenly;
  gap: 16px;
  padding: clamp(24px, 3 * var(--vw), 56px) clamp(20px, 3 * var(--vw), 56px);
  border-radius: var(--radius);
  background: var(--surface);
  list-style: none;
}
.highlights li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-small);
  color: var(--ink);
}
.highlights img {
  width: clamp(56px, 5.4 * var(--vw), 104px);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px #c8c8c8;   /* Instagram-style ring */
}

.post {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface);
}

/* Before & after: dark block with the comparison slider */
.showcase--dark {
  gap: clamp(32px, 3 * var(--vw), 56px);
  padding: var(--pad-y) var(--pad-x);
  background: var(--dark);
  border-radius: var(--radius);
}
.showcase--dark .showcase__head { padding: 0; }
.showcase--dark .showcase__title { color: var(--white); }
.showcase--dark .showcase__title span,
.showcase--dark .showcase__text { color: var(--grey); }

/* Before / after slider: the "before" layer is clipped to --pos */
.compare {
  position: relative;
  aspect-ratio: 2000 / 1349;
  border-radius: var(--radius-inner);
  overflow: hidden;
  background: var(--white);
  user-select: none;
  touch-action: pan-y;
}
.compare__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.compare__before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

/* divider line + round handle */
.compare::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
  pointer-events: none;
}
.compare__handle {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: var(--pos);
  display: grid;
  place-items: center;
  width: clamp(44px, 3.4 * var(--vw), 56px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.compare__handle svg { width: 45%; fill: none; stroke: var(--dark); stroke-width: 2; }

.compare__label {
  position: absolute;
  z-index: 1;
  top: clamp(12px, 1.4 * var(--vw), 24px);
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--dark);
  color: var(--white);
  font-family: "Clash Display", "Inter", sans-serif;
  font-size: var(--fs-small);
  line-height: 1.2;
  pointer-events: none;
}
.compare__label--before { left: clamp(12px, 1.4 * var(--vw), 24px); }
.compare__label--after { right: clamp(12px, 1.4 * var(--vw), 24px); }

/* the invisible range input covers the image: drag anywhere, keyboard works too */
.compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.compare:has(.compare__range:focus-visible) .compare__handle { outline: 3px solid var(--grey); outline-offset: 3px; }

@media (max-width: 900px) {
  .showcase__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .showcase__text { flex: none; }
  .showcase__split { grid-template-columns: 1fr; }
  .highlights { overflow-x: auto; justify-content: flex-start; gap: 20px; }
  .mockup--laptop { aspect-ratio: 16 / 10; flex: none; }
  .compare { aspect-ratio: 4 / 3; }
  .compare__img { object-position: 50% 30%; }
}

/* ---------- Templates: 3 × 3 catalogue ---------- */
/* title, text and templates together on one light grey panel */
.tpl-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4.4 * var(--vw), 80px);
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--radius);
  background: var(--surface);
}
.tpl-panel .showcase__head { padding: 0; }
@media (max-width: 700px) {
}

/* ---------- Templates: viewer (large template + 3×3 thumbnails) ---------- */
.tpl-viewer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--col-gap);
  align-items: start;
}

.tpl-viewer__stage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 560px;
}
.tpl-viewer__img { transition: opacity .25s ease; }
.tpl-viewer__img.is-swapping { opacity: 0; }

/* right column: thumbnails + counter + arrows, starting on the 50% line (like the text) */
.tpl-viewer__side {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.4 * var(--vw), 24px);
  width: 100%;
  max-width: 500px;   /* 3 rows of thumbnails ≈ the height of the large template */
}

.tpl-viewer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.tpl-viewer__label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--fs-body);
  color: var(--ink);
}
.tpl-viewer__count {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.tpl-viewer__nav { display: flex; gap: 8px; }
.tpl-viewer__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.tpl-viewer__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.tpl-viewer__btn:hover { background: var(--ink); color: var(--white); }
.tpl-viewer__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.tpl-viewer__thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  list-style: none;
}
.tpl-viewer__thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: calc(var(--radius) - 5px);
  background: none;
  overflow: hidden;
  cursor: pointer;
  opacity: .55;
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: opacity .25s ease, outline-color .25s ease;
}
.tpl-viewer__thumb img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.tpl-viewer__thumb:hover { opacity: .85; }
.tpl-viewer__thumb[aria-pressed="true"] { opacity: 1; outline-color: var(--ink); }
.tpl-viewer__thumb:focus-visible { outline-color: var(--ink); }

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

/* ---------- Before & after: text left, slider right ---------- */
.showcase--dark:has(.compare) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);   /* slider gets ⅔ of the width */
  gap: var(--col-gap);
  align-items: start;   /* title + text at the top, next to the slider */
}
.showcase--dark:has(.compare) .showcase__head {
  flex-direction: column;
  gap: clamp(16px, 1.6 * var(--vw), 28px);
}
.showcase--dark:has(.compare) .showcase__text { flex: none; }

@media (max-width: 900px) {
  .tpl-viewer { grid-template-columns: 1fr; gap: 24px; }
  .tpl-viewer__stage { margin-inline: auto; }
  .tpl-viewer__side { margin-inline: auto; }
  .showcase--dark:has(.compare) { grid-template-columns: 1fr; gap: 28px; }
}

/* =====================================================================
   Project: brand identity showcase (Bende Content)
   Reuses the showcase chapters of the Zoute page + a few extra blocks.
   ===================================================================== */
.ph--dark { background: #1f1f1f; }
.ph--dark::after { color: var(--muted); }
.ph--phone { aspect-ratio: 4 / 5; }
.ph--wide { flex: 1; min-height: 220px; }
.ph--post { display: block; width: 100%; aspect-ratio: 4 / 5; }
.ph--banner { aspect-ratio: 2212 / 900; }

/* Logo: large logo + dark + icon, same bento as the project galleries */
.showcase__bento {
  display: grid;
  grid-template-columns: 1317fr 875fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--gutter);
  aspect-ratio: 2212 / 900;
}
.ph--big { grid-row: span 2; }
.showcase__bento--flip { grid-template-columns: 875fr 1317fr; }
.showcase__bento--flip .ph--big { grid-column: 2; grid-row: 1 / span 2; }

/* colour variants strip */
.showcase__palette {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 2fr);
  gap: var(--gutter);
  height: clamp(120px, 11 * var(--vw), 200px);
}
.swatch {
  position: relative;
  border-radius: var(--radius);
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.swatch span {
  position: absolute;
  left: clamp(12px, 1.2 * var(--vw), 20px);
  bottom: clamp(12px, 1.2 * var(--vw), 20px);
  font-family: "Clash Display", "Inter", sans-serif;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--white);
}
.swatch--light span { color: var(--ink); }

/* real logo files in the bento: each logo sits whole on its own background colour, with room around
   it so the section stays calm (the files have their own margin too) */
/* a real photo in a placeholder frame: fills the frame, cropped to fit */
.ph-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Flip-through book (brand guidelines): cover alone, then spreads of two landscape pages */
.book { display: flex; flex-direction: column; gap: clamp(16px, 1.6 * var(--vw), 24px); outline: none; }
.book__stage {
  position: relative;
  display: grid;
  grid-template: 100% / 100%;        /* every spread sits in the same cell, so the new one lies over the old */
  justify-items: center;
  width: 100%;
  aspect-ratio: 1684 / 595;          /* two landscape A4 pages side by side */
  contain: size;                     /* height comes from the ratio, never from the page images */
  touch-action: pan-y;
  user-select: none;
}
.book__spread {
  grid-area: 1 / 1;
  display: flex;
  height: 100%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
  opacity: 0;
  transition: opacity .3s ease;      /* a calm cross-fade, no movement, no blank frame */
}
.book__spread.is-in { opacity: 1; }
.book__page { display: block; height: 100%; width: auto; aspect-ratio: 842 / 595; background: #fff; }
/* a soft fold in the middle of a spread */
.book__spread:has(.book__page + .book__page) { position: relative; }
.book__spread:has(.book__page + .book__page)::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  width: 6%;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .10) 48%, rgba(0, 0, 0, .16) 50%, rgba(0, 0, 0, .10) 52%, transparent);
  pointer-events: none;
}
.book__bar { display: flex; align-items: center; justify-content: center; gap: 20px; }
.book__count { min-width: 64px; text-align: center; font-size: var(--fs-small); color: var(--grey); font-variant-numeric: tabular-nums; }
.book__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  background: none;
  color: var(--white);
  cursor: pointer;
  transition: background .2s, border-color .2s, opacity .2s;
}
.book__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.book__btn:hover:not(:disabled) { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); }
.book__btn:disabled { opacity: .3; cursor: default; }
@media (max-width: 700px) {
  .book__stage { aspect-ratio: 842 / 595; }   /* one page at a time on phones */
}
@media (prefers-reduced-motion: reduce) { .book__spread { transition: none; } }

/* real business cards: a lighter, more diffuse shadow than the placeholders */
.ph--card.ph--card-soft { box-shadow: 0 10px 34px rgba(0, 0, 0, .06), 0 2px 6px rgba(0, 0, 0, .03); }

/* two portrait photos side by side, half the width each */
.photo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}
.photo-pair > .ph { aspect-ratio: 4 / 5; }
.photo-pair--low > .ph { aspect-ratio: 16 / 9; }
.photo-pair--small > .ph { aspect-ratio: 4 / 3; }   /* small mockups (letterhead, envelope) */   /* a smaller, landscape pair (e.g. sketches) */

.logo-tile { background: var(--bg, #e6e6e6); }
.logo-tile img {
  position: absolute;
  inset: 14% 18% 18%;   /* nudged up: the logo sits ~2% low in its file */
  width: 64%;
  height: 68%;
  object-fit: contain;
}
.ph--big.logo-tile img { inset: 18% 22% 22%; width: 56%; height: 60%; }
/* "white" tiles are a touch off-white, so they stand out from the white page */
.showcase { --off-white: #f4f4f4; }
.logo-tile[style*="#ffffff"] { background: var(--off-white); }

/* palette with the logo strip: three swatches + the logo in black and white (positive / negative),
   made from the transparent logo with a filter: navy turns black, lime and white turn white */
.showcase__palette--logos { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 3fr); }
.logo-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  background: none;
}
.logo-bw {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
}
.logo-bw img {
  position: absolute;
  inset: 4% 6% 8%;   /* centred (the logo sits ~2% low in its file); the file has wide margins of its own */
  width: 88%;
  height: 88%;
  object-fit: contain;
}
.logo-bw--pos { background: var(--off-white); }
.logo-bw--pos img { filter: grayscale(1) contrast(12); }
.logo-bw--neg { background: #000; }
.logo-bw--neg img { filter: grayscale(1) contrast(12) invert(1); }
.logo-bw em {
  position: absolute;
  left: clamp(12px, 1.2 * var(--vw), 20px);
  bottom: clamp(12px, 1.2 * var(--vw), 20px);
  font-family: "Clash Display", "Inter", sans-serif;
  font-size: var(--fs-small);
  font-style: normal;
  font-weight: 500;
}
.logo-bw--pos em { color: var(--ink); }
.logo-bw--neg em { color: var(--white); }
@media (max-width: 900px) {
  .showcase__palette--logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .showcase__palette--logos .logo-strip { aspect-ratio: 2 / 1; gap: 12px; }
}
/* Device mockups with a screenshot laid over the screen: the frame PNGs from the Zoute case,
   with the screen, the phone's camera island and the laptop's notch positioned in % of the frame.
   The device keeps the frame's own ratio and fits inside its panel (like object-fit: contain). */
.mockup:has(.device) { container-type: size; }
.device {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(86cqw, 86cqh * var(--ar));
  aspect-ratio: var(--ar);
  translate: -50% -50%;
}
.mockup .device > img,
.device > span { position: absolute; }
.mockup .device__frame { inset: 0; width: 100%; height: 100%; object-fit: fill; }
.mockup .device__screen { object-fit: cover; object-position: 50% 0; }
.device__cutout { background: #000; }

/* phone frame 532 × 1084: screen 478 × 1031 at (28, 27) */
.device--phone { --ar: 532 / 1084; }
.mockup .device--phone .device__screen { left: 5.26%; top: 2.49%; width: 89.85%; height: 95.11%; border-radius: 9.2% / 4.27%; }
.device--phone .device__cutout { left: 36.1%; top: 3.7%; width: 28.2%; height: 4.4%; border-radius: 100px; }

/* laptop frame 1926 × 1166: screen 1552 × 1006 at (187, 35), notch 127 × 33 at the top centre */
.device--laptop { --ar: 1926 / 1166; }
.mockup .device--laptop .device__screen { left: 9.71%; top: 3%; width: 80.58%; height: 86.28%; border-radius: 1.3% / 2%; }
.device--laptop .device__cutout { left: 46.83%; top: 3%; width: 6.6%; height: 2.83%; border-radius: 0 0 6px 6px; }

/* a real highlight cover: the logo on a lime circle, with the Instagram ring */
.highlight-cover {
  display: grid;
  place-items: center;
  width: clamp(56px, 5.4 * var(--vw), 104px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #bcf903;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px #c8c8c8;
  overflow: hidden;
}
.highlights .highlight-cover img { width: 78%; height: auto; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
/* icon covers: the file is a full circle on a 2000 × 1805 canvas (circle ≈ 1756px, centred at 1000 / 902);
   scaled so the circle fills the cover exactly, its own edge trimmed by the cover's round clip */
.highlight-cover--icon { position: relative; background: none; }
.highlights .highlight-cover--icon img {
  position: absolute;
  left: -7.11%;
  top: -1.54%;
  width: 114.3%;
  max-width: none;
}
/* the bookmark is drawn larger than the other icons: shrink the file to 85% and
   fill the cover with the same lime so the circle's edge disappears */
.highlight-cover--small { background: #bef803; }
.highlights .highlight-cover--small img { left: 1.42%; top: 6.16%; width: 97.2%; }

/* highlight placeholders (round, with the Instagram ring) */
.ph--circle {
  display: block;
  width: clamp(56px, 5.4 * var(--vw), 104px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #d9d9d9;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px #c8c8c8;
}

/* template viewer with placeholders */
.tpl-viewer__thumb .ph { border-radius: 0; }

/* Business card: front + back side by side, business-card ratio (85 × 55) */
.card-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--radius);
  background: var(--surface);
}
.ph--card {
  aspect-ratio: 85 / 55;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
}

/* Website: dark block, text left with an "In the making" label, mockup right */
.showcase--site {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--col-gap);
  align-items: start;
}
.showcase--site .showcase__head { flex-direction: column; gap: clamp(16px, 1.6 * var(--vw), 28px); }
.showcase--site .showcase__text { flex: none; }
.ph--site { aspect-ratio: 16 / 10; background: #1f1f1f; }
.ph--site::after { color: var(--muted); }
.pill--soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #bcf802;
  color: #021626;
  font-family: "Clash Display", "Inter", sans-serif;
}
.pill--soon::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: soon-pulse 1.6s ease-in-out infinite;
}
@keyframes soon-pulse { 50% { opacity: .25; } }

@media (max-width: 900px) {
  .showcase__bento { display: flex; flex-direction: column; aspect-ratio: auto; gap: 12px; }
  .showcase__bento .ph { aspect-ratio: 3 / 2; }
  .showcase__palette { grid-template-columns: repeat(4, minmax(0, 1fr)); height: auto; }
  .showcase__palette > * { aspect-ratio: 3 / 4; }
  .showcase__palette .ph--type { grid-column: 1 / -1; aspect-ratio: 3 / 1; }  .ph--wide { aspect-ratio: 16 / 9; flex: none; }
  .ph--banner { aspect-ratio: 4 / 3; }
  .card-pair { grid-template-columns: 1fr; }
  .showcase--site { grid-template-columns: 1fr; gap: 28px; }
}
@media (prefers-reduced-motion: reduce) { .pill--soon::before { animation: none; } }

/* =====================================================================
   About page
   ===================================================================== */
/* Light header: nav in black, no background */
.page-header--light {
  padding-bottom: 0;
  background: none;
  color: var(--ink);
  overflow: visible;
}
.nav--light .nav__logo,
.nav--light .nav__links a { color: var(--ink); }
.nav--light .nav__links a:hover,
.nav--light .nav__links a[aria-current="page"] { color: var(--dark); }
.nav--light .nav__links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.nav--light .btn-contact { border-color: var(--ink); color: var(--ink); }
.nav--light .btn-contact:hover { background: var(--dark); border-color: var(--dark); color: var(--white); }
.nav--light .nav__toggle-icon rect { fill: var(--dark); }
.nav--light .nav__toggle-icon path { fill: var(--white); }
.nav--light :is(.nav__links a, .btn-contact, .nav__logo, .nav__toggle):focus-visible { outline-color: var(--ink); }
/* once the (dark) mobile menu is open, the logo and button go back to white */
body.menu-open .nav--light .nav__logo { color: var(--white); }
body.menu-open .nav--light .nav__toggle-icon rect { fill: var(--white); }
body.menu-open .nav--light .nav__toggle-icon path { fill: #1a1a1a; }

/* Intro reuses the home About block; the title may wrap here */
.me-about .about__title { white-space: normal; }
.me-about .stats { flex-wrap: wrap; row-gap: 28px; }
@media (max-width: 1000px) {
  .me-about .about__grid { flex-direction: column; gap: 40px; }
}

/* Period of each CV row on a 2022 → now track (5 years) */
.cv__track {
  --from: 0;
  --to: 5;
  position: relative;
  width: clamp(120px, 10 * var(--vw), 180px);
  height: 4px;
  border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(20% - 2px), var(--page-bg) calc(20% - 2px) 20%),
    var(--line-light);
}
.cv__track::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 calc(var(--from) * 20%);
  width: calc((var(--to) - var(--from)) * 20%);
  border-radius: inherit;
  background: var(--ink);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1) .15s;
}
/* still running: fades out to the right */
.cv__track[data-now]::after {
  background: linear-gradient(90deg, var(--ink) 70%, rgba(46, 45, 45, .25));
}
/* the bar draws in when the row scrolls into view */
.js .cv__item:not(.is-visible) .cv__track::after { transform: scaleX(0); }

/* Section heads with a filter on the right */
.cv, .stories {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  margin-top: clamp(24px, 3 * var(--vw), 56px);
}
.cv__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px var(--col-gap);
  padding: 0 var(--pad-x) clamp(8px, 1.2 * var(--vw), 24px);
}
/* filter chips start on the shared 50% line */
.cv__head .filter { flex: 0 0 calc(50% - var(--col-gap) / 2); }

.filter { display: flex; flex-wrap: wrap; gap: 8px; }
.filter__btn {
  padding: 9px 17px;
  border: 1px solid var(--line-light);
  border-radius: 100px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-small);
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.filter__btn:hover { border-color: var(--ink); }
.filter__btn[aria-pressed="true"] { background: var(--dark); border-color: var(--dark); color: var(--white); }
.filter__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 1000px) {
  .cv__head .filter { flex-basis: 100%; }
}

/* CV timeline: every row opens for details */
.cv__list {
  margin-inline: var(--pad-x);
  list-style: none;
  border-top: 1px solid var(--line-light);
}
.cv__item { border-bottom: 1px solid var(--line-light); }
.cv__item[hidden] { display: none; }

/* year | role + place | toggle — the role starts on the shared 50% line */
.cv__row {
  display: grid;
  grid-template-columns: calc(50% - var(--col-gap) / 2) minmax(0, 1fr) 40px;
  grid-template-areas: "year role toggle" "year place toggle";
  column-gap: var(--col-gap);
  row-gap: 6px;
  align-items: center;
  padding: clamp(18px, 1.6 * var(--vw), 28px) 0;
  list-style: none;
  cursor: pointer;
}
.cv__row::-webkit-details-marker { display: none; }
.cv__row:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.cv__when {
  grid-area: year;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.cv__year {
  font-size: var(--fs-body);
  color: var(--ink-soft);
}
.cv__role {
  grid-area: role;
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 0.9 * var(--vw) + 16px, 34px);
  line-height: 1.1;
  color: var(--ink);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.cv__place { grid-area: place; font-size: var(--fs-body); color: var(--ink-soft); }
.cv__row:hover .cv__role { transform: translateX(8px); }

/* plus that turns into a minus */
.cv__toggle {
  grid-area: toggle;
  position: relative;
  justify-self: end;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-light);
  border-radius: 50%;
  transition: background-color .25s ease, border-color .25s ease;
}
.cv__toggle::before,
.cv__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: var(--ink);
  translate: -50% -50%;
  transition: rotate .3s ease, background-color .25s ease;
}
.cv__toggle::after { rotate: 90deg; }
.cv__row:hover .cv__toggle { border-color: var(--ink); }
details[open] .cv__toggle { background: var(--dark); border-color: var(--dark); }
details[open] .cv__toggle::before,
details[open] .cv__toggle::after { background: var(--white); }
details[open] .cv__toggle::after { rotate: 0deg; }

.cv__detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-left: calc(50% + var(--col-gap) / 2);   /* under the role column */
  padding-bottom: clamp(22px, 2 * var(--vw), 32px);
  max-width: var(--measure);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-soft);
  animation: cv-open .4s ease both;
}
.cv__detail a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@keyframes cv-open { from { opacity: 0; transform: translateY(-6px); } }

.cv__tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.cv__tags li {
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--surface);
  font-size: 13px;
  line-height: 1.2;
  color: var(--ink);
}


@media (max-width: 700px) {
  .cv__row {
    grid-template-columns: minmax(0, 1fr) 40px;
    grid-template-areas: "year toggle" "role toggle" "place toggle";
  }
  .cv__year { font-size: var(--fs-small); }
  .cv__detail { margin-left: 0; }
}

/* Toolkit: macOS-style dock (under the name on the About page) */
.me-hero__dock {
  display: flex;
  justify-content: center;
  margin-top: clamp(36px, 2.6 * var(--vw), 48px);
}
.dock.dock--small {
  --size: clamp(38px, 1 * var(--vw) + 26px, 46px);
  height: calc(var(--size) + 14px);
  gap: 5px;
  padding: 6px;
  border-radius: 15px;
}
.dock.dock--small .dock__sep { margin-block: 4px; }
.dock {
  --size: clamp(46px, 3 * var(--vw) + 22px, 72px);
  height: calc(var(--size) + 22px);   /* fixed: magnified icons grow out of the top, like macOS */
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px;
  list-style: none;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 26px;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .2), 0 6px 14px -6px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .05);   /* soft, low shadow: it floats a little */
}

.dock__item {
  --scale: 1;
  position: relative;
  width: calc(var(--size) * var(--scale));
  height: calc(var(--size) * var(--scale));
  flex-shrink: 0;
  transition: width .2s ease-out, height .2s ease-out;
}
.dock.is-tracking .dock__item { transition-duration: .06s; }

.dock__icon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 22.5%;
  background: var(--bg, #fff);
  color: var(--fg, #fff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 2px 6px rgba(0, 0, 0, .12);
}
.dock__icon svg { width: 56%; height: 56%; }
a.dock__icon:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Adobe-style tiles: two letters in a thin rounded frame */
.dock__icon--adobe {
  position: relative;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: calc(var(--size) * var(--scale) * .4);
  letter-spacing: -0.02em;
}
.dock__icon--adobe::before {
  content: "";
  position: absolute;
  inset: 12%;
  border: max(1.5px, calc(var(--size) * var(--scale) * .035)) solid currentColor;
  border-radius: 14%;
}
.dock__icon--canva {
  background: linear-gradient(135deg, #00c4cc 0%, #7d2ae8 100%);
  font-family: "Clash Display", "Inter", sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: calc(var(--size) * var(--scale) * .55);
}
.dock__icon--insta {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.dock__icon--mail { background: linear-gradient(180deg, #4aa3ff, #1e7cf2); }

.dock__sep {
  align-self: stretch;
  width: 1px;
  margin: 6px 2px;
  background: rgba(0, 0, 0, .12);
}

/* label above the icon, like the macOS dock */
.dock__tip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(30, 30, 30, .85);
  color: var(--white);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  translate: -50% 4px;
  transition: opacity .15s ease, translate .15s ease;
}
.dock__item:hover .dock__tip,
.dock__item:focus-within .dock__tip { opacity: 1; translate: -50% 0; }

@media (max-width: 640px) {
  .me-hero__dock { margin-top: 28px; }
  .dock { flex-wrap: wrap; justify-content: center; height: auto; }
  .dock__sep { display: none; }
}

/* Behind the scenes: grey cards, photo on top, text with proper breathing room */
.story-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  list-style: none;
}
.story__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
.story__media {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-inner);
  overflow: hidden;
}
.story__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.story__link:hover .story__media img { transform: scale(1.04); }
.story__meta {
  margin: clamp(20px, 1.8 * var(--vw), 32px) clamp(14px, 1.4 * var(--vw), 26px) 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.story__title {
  margin: 0 clamp(14px, 1.4 * var(--vw), 26px);
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 0.6 * var(--vw) + 18px, 30px);
  line-height: 1.15;
}
.story__excerpt {
  margin: 12px clamp(14px, 1.4 * var(--vw), 26px) 0;
  max-width: 32em;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-soft);
}
.story__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: auto clamp(14px, 1.4 * var(--vw), 26px) clamp(14px, 1.4 * var(--vw), 26px);
  padding-top: clamp(20px, 1.8 * var(--vw), 32px);
  font-size: var(--fs-body);
  font-weight: 500;
}
.story__more .arrow {
  width: .7em;
  height: .7em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  transition: transform .25s ease;
}
.story__link:hover .story__more .arrow { transform: translate(3px, -3px); }
.story__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

@media (max-width: 1000px) { .story-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .story-list { grid-template-columns: 1fr; } }

/* Profile: round photo with the name centred below, plenty of air */
.me-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(48px, 5 * var(--vw), 104px) var(--pad-x) clamp(56px, 6 * var(--vw), 120px);
  text-align: center;
  color: var(--ink);
}
.me-hero__photo {
  width: clamp(160px, 12 * var(--vw), 220px);
  aspect-ratio: 1;
  margin-bottom: clamp(28px, 2.6 * var(--vw), 44px);
  border-radius: 50%;
  object-fit: cover;
}
.me-hero__title {
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(44px, 3.2 * var(--vw) + 24px, 88px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.me-hero__sub {
  margin-top: clamp(12px, 1 * var(--vw), 18px);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* About sits in the open (no grey box), a thin line separates it from the profile */
.me-about {
  padding: clamp(48px, 5 * var(--vw), 96px) 0;
  margin-inline: var(--pad-x);
  background: none;
  border-top: 1px solid var(--line-light);
  border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  .dock__item { transition: none; }
}

/* About page: more air between the blocks */
.page--about { --about-gap: clamp(96px, 9 * var(--vw), 176px); gap: var(--about-gap); }
.page--about > .footer { margin-top: calc(var(--gutter) - var(--about-gap)); }   /* footer sits close, like on the other pages; the air between the sections stays */
.page--about > .page-header + .me-hero { margin-top: calc(var(--gutter) - var(--about-gap)); }   /* profile stays close to the nav */
.page--about > :is(.cv, .stories, .screen) { margin-top: 0; }
.page--about .me-about { padding-block: clamp(56px, 5.6 * var(--vw), 112px) 0; overflow: visible; }   /* no clipping of descenders (the "g" in "creating") */
.page--about .me-hero { padding-bottom: 0; }

/* Screen time: grey panel, weekly total + day chart left, app bars right */
.screen__panel {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4 * var(--vw), 72px);
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
.screen__week {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.screen__stat {
  display: flex;
  flex-direction: column;
  margin-top: clamp(32px, 3 * var(--vw), 56px);
}
.screen__label { font-size: var(--fs-small); color: var(--ink-soft); }
.screen__total {
  margin-top: 10px;
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 1.4 * var(--vw) + 22px, 52px);   /* same as the About numbers */
  line-height: 1;
  letter-spacing: -0.02em;
}
.screen__delta { margin-top: 10px; font-size: var(--fs-small); color: #2f9e5f; }

/* day chart */
.screen__days {
  display: flex;
  align-items: flex-end;
  gap: clamp(8px, 1 * var(--vw), 16px);
  height: clamp(170px, 13 * var(--vw), 230px);
  max-width: 380px;
  margin-top: auto;
  padding-top: clamp(32px, 3 * var(--vw), 48px);
  list-style: none;
}
.screen__days li {
  flex: 1 1 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-soft);
}
.screen__bar {
  width: 100%;
  height: calc(var(--v) * (100% - 26px));
  border-radius: 6px;
  background: var(--ink);
  transform-origin: bottom;
}
.screen__days .is-weekend .screen__bar { background: #b8b8b8; }

/* app list */
.screen__apps {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  list-style: none;
}
.screen__apps li {
  display: grid;
  grid-template-columns: 44px minmax(0, 11em) minmax(0, 1fr) 5.5em;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-light);
}
.screen__apps li:first-child { padding-top: 0; }
.screen__apps li:last-child { border-bottom: 0; padding-bottom: 0; }
.screen__icon { --size: 44px; --scale: 1; width: 44px; height: 44px; }
.screen__icon .dock__icon { box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.screen__name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.3;
}
.screen__name small { font-size: 13px; font-weight: 400; color: var(--ink-soft); }
.screen__track {
  height: 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .07);
  overflow: hidden;
}
.screen__track span {
  display: block;
  width: calc(var(--v) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--ink);
  transform-origin: left;
}
.screen__time {
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink-soft);
}

/* bars grow in when the panel scrolls into view, one after another */
.screen__bar, .screen__track span { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.screen__days li:nth-child(n) .screen__bar { transition-delay: calc(var(--i, 0) * 60ms + .2s); }
.js .screen__panel:not(.is-visible) .screen__bar { transform: scaleY(0); }
.js .screen__panel:not(.is-visible) .screen__track span { transform: scaleX(0); }
.screen__days li:nth-child(1) { --i: 0; } .screen__days li:nth-child(2) { --i: 1; }
.screen__days li:nth-child(3) { --i: 2; } .screen__days li:nth-child(4) { --i: 3; }
.screen__days li:nth-child(5) { --i: 4; } .screen__days li:nth-child(6) { --i: 5; }
.screen__days li:nth-child(7) { --i: 6; }
.screen__apps li:nth-child(1) { --i: 0; } .screen__apps li:nth-child(2) { --i: 1; }
.screen__apps li:nth-child(3) { --i: 2; } .screen__apps li:nth-child(4) { --i: 3; }
.screen__apps li:nth-child(5) { --i: 4; } .screen__apps li:nth-child(6) { --i: 5; }
.screen__apps li:nth-child(7) { --i: 6; } .screen__apps li:nth-child(8) { --i: 7; }
.screen__track span { transition-delay: calc(var(--i, 0) * 80ms + .3s); }

@media (max-width: 1000px) {

  .screen__days { margin-top: 32px; padding-top: 0; }
}
@media (max-width: 560px) {
  .screen__apps li { grid-template-columns: 40px minmax(0, 1fr) 4.6em; row-gap: 10px; }
  .screen__track { grid-column: 2 / -1; grid-row: 2; }
  .screen__icon { --size: 40px; width: 40px; height: 40px; }
}

.screen__body { display: flex; gap: var(--col-gap); }
@media (max-width: 1000px) {
  .screen__body { flex-direction: column; gap: 48px; }
}
/* one sentence that says what this is, instead of a title */
.screen__intro {
  max-width: 22em;
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}
.screen__intro span { font-weight: 400; color: var(--ink-soft); }

/* =====================================================================
   Contact page
   ===================================================================== */
.page--contact { --contact-gap: clamp(48px, 5 * var(--vw), 96px); gap: var(--contact-gap); }
.page--contact > .footer { margin-top: calc(var(--gutter) - var(--contact-gap)); }   /* footer sits close, like on the other pages */
.page--contact > .page-header + .contact-hero { margin-top: calc(var(--gutter) - clamp(48px, 5 * var(--vw), 96px)); }
.nav--light .btn-contact[aria-current="page"] { background: var(--dark); border-color: var(--dark); color: var(--white); }

/* Big title: letters hop on hover, the second line rotates through words */
.contact-hero {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2 * var(--vw), 36px);
  padding: clamp(48px, 6 * var(--vw), 120px) var(--pad-x) 0;
  color: var(--ink);
}
.contact-hero__title {
  display: flex;
  flex-direction: column;
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(56px, 6.4 * var(--vw) + 16px, 168px);
  line-height: .95;
  letter-spacing: -0.035em;
}
.contact-hero__line { display: flex; }
.contact-hero__sub {
  max-width: 30em;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Grey panel: direct links left, form on the 50% line */
.contact {
  display: flex;
  gap: var(--col-gap);
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
.contact__details {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 2.6 * var(--vw), 44px);
}
.contact__label {
  display: block;
  margin-bottom: 12px;
  padding: 0;
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--ink-soft);
}
.contact__mail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 0.9 * var(--vw) + 16px, 34px);
  line-height: 1.2;
  word-break: break-all;
}
.contact__socials { display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; }
.contact__socials a,
.contact__mail {
  text-decoration: underline 1px transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color .25s ease;
}
.contact__socials a { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-body); font-weight: 500; }
.contact__socials a:hover,
.contact__mail:hover { text-decoration-color: currentColor; }
.contact .arrow { width: .6em; height: .6em; fill: none; stroke: currentColor; stroke-width: 1.3; flex-shrink: 0; transition: transform .25s ease; }
.contact a:hover .arrow { transform: translate(2px, -2px); }
.contact__value { font-size: var(--fs-body); }
.contact a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

/* Form */
.contact-form {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 1.8 * var(--vw), 28px);
}
.contact-form__trap { position: absolute; left: -9999px; }

.contact-form__topics { display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
.contact-form__topics legend { margin-bottom: 12px; }
.contact-form__topics label { position: relative; cursor: pointer; }
.contact-form__topics input { position: absolute; opacity: 0; pointer-events: none; }
.contact-form__topics span {
  display: inline-block;
  padding: 9px 17px;
  border: 1px solid var(--line-light);
  border-radius: 100px;
  background: var(--white);
  font-size: var(--fs-small);
  line-height: 1.2;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.contact-form__topics label:hover span { border-color: var(--ink); }
.contact-form__topics input:checked + span { background: var(--dark); border-color: var(--dark); color: var(--white); }
.contact-form__topics input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }

.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 1.8 * var(--vw), 28px); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-size: var(--fs-small); color: var(--ink-soft); }
.field__input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-inner);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body);
  line-height: 1.4;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field__input::placeholder { color: #a3a3a3; }
.field__input:hover { border-color: var(--line-light); }
.field__input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(46, 45, 45, .08); }
.field__input--area { min-height: 160px; resize: vertical; }

.contact-form__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 4px; }
.contact-form__send { cursor: pointer; font-family: inherit; }
.contact-form__send .arrow { width: .7em; height: .7em; margin-left: 10px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.contact-form__send:disabled { opacity: .5; cursor: progress; }
.contact-form__status { font-size: var(--fs-small); color: var(--ink-soft); }
.contact-form__status.is-ok { color: #2f9e5f; }
.contact-form__status.is-error { color: #c0392b; }

@media (max-width: 1000px) {
  .contact { flex-direction: column-reverse; gap: 56px; }
}
@media (max-width: 560px) {
  .contact-form__row { grid-template-columns: 1fr; }
}

/* letters: each one hops up when the cursor touches it */
.contact-hero__line .char {
  display: inline-block;
  white-space: pre;
  transition: translate .5s cubic-bezier(.2, 1.6, .4, 1), color .3s ease;
}
.contact-hero__line .char:hover { translate: 0 -.12em; color: var(--dark); transition-duration: .15s; }

/* rotating word: slides up out of view, the next one slides in from below */
.rotator {
  display: grid;
  padding: 0 0 .12em;               /* room for descenders (p, y) */
  margin-bottom: -.12em;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  transition: width .6s cubic-bezier(.2, .7, .2, 1);
}
.rotator__word {
  grid-area: 1 / 1;
  justify-self: start;              /* own width, so the box can shrink to the word */
  white-space: nowrap;
  color: var(--ink-soft);
  translate: 0 110%;
  transition: translate .7s cubic-bezier(.7, 0, .2, 1);
}
.rotator__word.is-active { translate: 0 0; }
.rotator__word.is-leaving { translate: 0 -110%; }

[data-clock] { font-variant-numeric: tabular-nums; }
.status-dot {
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: #2fbf71;
  animation: status-pulse 2s ease-out infinite;
}
@keyframes status-pulse {
  0% { box-shadow: 0 0 0 0 rgba(47, 191, 113, .5); }
  100% { box-shadow: 0 0 0 8px rgba(47, 191, 113, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot { animation: none; }
  .rotator__word, .contact-hero__line .char { transition: none; }
}
@media (max-width: 480px) { .contact-hero__title { font-size: 14vw; } }   /* "photography." must fit the screen */
.contact__status { display: flex; align-items: center; font-size: var(--fs-body); font-weight: 500; }
.contact__time { margin-top: 6px; font-size: var(--fs-small); color: var(--ink-soft); }

/* three-letter Adobe tiles (LrC) need a slightly smaller label */
.dock__icon--adobe.dock__icon--3 { font-size: calc(var(--size) * var(--scale) * .3); letter-spacing: -0.03em; }
/* real app icons (Canva, DaVinci Resolve), clipped to the same rounded tile */
.dock__icon--img { overflow: hidden; background: none; }
.dock__icon--img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* =====================================================================
   Services page
   ===================================================================== */
.page--services { gap: clamp(48px, 5 * var(--vw), 96px); }
.page--services > .showcase { margin-top: 0; }

/* Jump links under the title: the white outline tags from the case cards */
.svc-jump { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.svc-jump .pill { transition: background-color .25s ease, color .25s ease; }
.svc-jump .pill:hover { background: var(--white); color: var(--dark); }
.svc-jump .pill:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* What I do (v4) as one Instagram chat, seen from the visitor's side: the visitor asks (blue, right),
   Milan answers with the five services (grey, left, with his photo).
   Made to look like Instagram itself: its system font, its colours (sent #4a5df9, received #efefef),
   15px text, bubbles that group with small corners, the client's avatar and the app's icons. */
.cl {
  --ig-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ig-blue: #4a5df9;
  --ig-grey: #efefef;
  --ig-soft: #737373;
  border: 1px solid #dbdbdb;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  color: #000;
  font-family: var(--ig-font);
}
.cl svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.cl__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--pad-x);
  border-bottom: 1px solid #dbdbdb;
}
.cl__head img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.cl__head p { flex: 1; line-height: 1.2; }   /* name and "Active now" close together, like Instagram */
.cl__head strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.25; }
.cl__head p span { display: block; font-size: 12px; line-height: 1.3; color: var(--ig-soft); }
.cl__icons { display: flex; gap: 18px; }
.cl__icons svg { width: 24px; height: 24px; }

.cl__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px var(--pad-x) 16px;
}
.cl__day { align-self: center; margin-bottom: 16px; font-size: 12px; font-weight: 600; color: var(--ig-soft); }

.cl__msg {
  position: relative;
  max-width: min(520px, 78%);
  padding: 10px 16px;
  border-radius: 22px;
  font-size: 17px;
  line-height: 1.4;
  touch-action: manipulation;   /* double-tap likes instead of zooming */
  user-select: none;
  cursor: default;
}
.cl__msg--them { align-self: flex-start; margin-left: 36px; background: var(--ig-grey); }
.cl__msg--me { align-self: flex-end; background: var(--ig-blue); color: var(--white); }

/* messages from the same person hang together: small corners where they meet */
.cl__msg--me + .cl__msg--me { border-top-right-radius: 4px; }
.cl__msg--me:has(+ .cl__msg--me) { border-bottom-right-radius: 4px; }
.cl__msg--them + .cl__msg--them { border-top-left-radius: 4px; }
.cl__msg--them:has(+ .cl__msg--them) { border-bottom-left-radius: 4px; }
.cl__msg--them + .cl__msg--me,
.cl__msg--me + .cl__msg--them,
.cl__seen + .cl__typing { margin-top: 12px; }

/* Milan's photo next to his last message (and next to the typing dots) */
.cl__msg--them:not(:has(+ .cl__msg--them))::before,
.cl__typing::before {
  content: "";
  position: absolute;
  left: -36px;
  bottom: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: url("../assets/about-portrait.jpg") center / cover;
}

/* service messages: the name on its own line in bold, the explanation under it */
.cl__msg--svc strong { display: block; font-weight: 600; }
.cl__msg--svc span { display: block; color: #262626; }

.cl__seen { align-self: flex-end; margin-top: 4px; font-size: 12px; color: var(--ig-soft); }

/* double-click a message: a heart, like on Instagram */
.cl__msg.is-liked { margin-bottom: 14px; }
.cl__msg.is-liked::after {
  content: "❤️";
  position: absolute;
  bottom: -14px;
  padding: 2px 5px;
  border: 2px solid var(--white);
  border-radius: 100px;
  background: var(--ig-grey);
  font-size: 12px;
  line-height: 1.2;
  animation: cl-like .35s cubic-bezier(.2, 1.6, .4, 1) both;
}
.cl__msg--me.is-liked::after { right: 10px; }
.cl__msg--them.is-liked::after { left: 10px; }
@keyframes cl-like { from { scale: 0; } }

/* Milan typing, at the end (left, grey, like the other side typing in Instagram) */
.cl__typing {
  position: relative;
  align-self: flex-start;
  display: flex;
  gap: 4px;
  margin: 12px 0 0 36px;
  padding: 15px 16px;
  border-radius: 22px;
  background: var(--ig-grey);
}
.cl__typing span { width: 7px; height: 7px; border-radius: 50%; background: #8e8e8e; animation: typing 1.2s ease-in-out infinite; }
.cl__typing span:nth-child(2) { animation-delay: .15s; }
.cl__typing span:nth-child(3) { animation-delay: .3s; }

/* playing in: messages wait until the chat is on screen, then pop in one by one */
.cl.is-waiting .cl__body > :not(.cl__day) { visibility: hidden; }
.cl__body > .is-in { animation: talk-in .4s cubic-bezier(.2, .8, .2, 1) both; }

/* message bar, like Instagram's: emoji, text, mic / photo / heart. Goes to the contact page. */
.cl__compose {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 var(--pad-x) 18px;
  padding: 10px 16px;
  border: 1px solid #dbdbdb;
  border-radius: 100px;
  font-size: 17px;
  color: var(--ig-soft);
  transition: border-color .2s ease;
}
.cl__compose > span:first-of-type { flex: 1; }
.cl__compose svg { width: 24px; height: 24px; color: #000; }
.cl__compose-icons { display: flex; gap: 14px; }
.cl__compose:hover { border-color: #a8a8a8; }
.cl__compose:focus-visible { outline: 2px solid var(--ig-blue); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .cl__typing span, .cl__body > .is-in, .cl__msg.is-liked::after { animation: none; }
}
@media (max-width: 560px) {
  .cl__msg { max-width: 82%; }
  .cl__icons { gap: 14px; }
  .cl__compose-icons svg:nth-child(2) { display: none; }
}

/* Why work with me: dark block, title + numbers left, four reasons in a 2 × 2 on the 50% line */
.why {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--col-gap);
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--radius);
  background: var(--dark);
  color: var(--white);
}
.why__intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(40px, 4 * var(--vw), 80px);
}
.why .showcase__title { color: var(--white); }
.why .showcase__title span { color: var(--grey); }
.why__stats .stat__value { color: var(--white); }
.why__stats .stat__label { color: var(--grey); }
.why__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 2.8 * var(--vw), 48px) clamp(24px, 2.4 * var(--vw), 40px);
  list-style: none;
}
.why__list li { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line-dark); }
.why__num { font-size: var(--fs-small); color: var(--muted); }
.why__title {
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 0.6 * var(--vw) + 16px, 28px);
  line-height: 1.15;
}
.why__text { font-size: var(--fs-body); line-height: 1.6; color: var(--grey); }

@media (max-width: 1000px) {
  .why { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .why__list { grid-template-columns: 1fr; }
}

/* Services as Instagram DMs: inbox left, open chat right, in the site's own black, white and grey */
.dm {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  color: var(--ink);
}

/* inbox */
.dm__inbox {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  border-right: 1px solid var(--line-light);
}
.dm__me { display: flex; align-items: center; gap: 10px; padding: 24px 24px 8px; }
.dm__me img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.dm__me p {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--fs-body);
}
.dm__me svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.dm__inbox-title { padding: 16px 24px 8px; font-size: var(--fs-body); font-weight: 500; }

.dm__list { list-style: none; }
.dm__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 24px;
  transition: background-color .2s ease;
}
.dm__row:hover { background: #f6f6f6; }
.dm__row[aria-selected="true"] { background: var(--surface); }
.dm__row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.dm__row > img { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
.dm__row-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-right: 16px; }
.dm__row-text strong { font-size: var(--fs-body); font-weight: 500; line-height: 1.25; }
.dm__row-text span {
  overflow: hidden;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* unread: bold preview + a dot, like Instagram */
.dm__row.is-unread .dm__row-text span { font-weight: 500; color: var(--ink); }
.dm__row.is-unread::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4a5df9;   /* Instagram's unread blue */
  translate: 0 -50%;
}

/* bottom of the inbox: start a new conversation on the contact page */
.dm__new {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: auto 16px 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--surface);
  transition: background-color .2s ease;
}
.dm__new:hover { background: #e4e4e4; }
.dm__new:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dm__new-icon {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--dark);
}
.dm__new-icon::before,
.dm__new-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--white);
  translate: -50% -50%;
}
.dm__new-icon::after { rotate: 90deg; }
.dm__new > span:last-child { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-small); color: var(--ink-soft); }
.dm__new strong { font-size: var(--fs-body); font-weight: 500; color: var(--ink); }

/* open chat */
/* all chats share one grid cell, so the box is as tall as the longest chat and doesn't jump when switching */
.dm__chats { display: grid; grid-template-rows: 1fr auto; min-width: 0; }
.dm__chat { grid-area: 1 / 1; display: flex; flex-direction: column; }
.dm__chat[hidden] { display: flex; visibility: hidden; }
.dm__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line-light);
}
.dm__head img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.dm__head strong {
  display: block;
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--fs-body);
}
.dm__head span { font-size: 13px; color: var(--ink-soft); }
.dm__back {
  display: none;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-left: -8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.dm__back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.dm__back:focus-visible { outline: 2px solid var(--ink); }

.dm__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 24px;
}
.dm__day { align-self: center; margin: 0 0 14px; font-size: 13px; color: var(--ink-soft); }

/* bubbles in Instagram's own colours: the client left in light grey, Milan right in Instagram blue */
.dm__msg {
  max-width: min(440px, 78%);
  padding: 11px 16px;
  border-radius: 22px;
  font-size: var(--fs-body);
  line-height: 1.4;
}
.dm__msg--them { align-self: flex-start; background: #f3f5f7; color: #000; }
.dm__msg--me { align-self: flex-end; background: #4a5df9; color: var(--white); }
.dm__msg--them + .dm__msg--me,
.dm__msg--me + .dm__msg--them { margin-top: 14px; }

/* case as a shared post, the way a forwarded post looks in a DM */
.dm__post {
  align-self: flex-end;
  display: block;
  width: min(260px, 72%);
  padding: 0;
  margin-top: 4px;
  border-radius: 18px;
  overflow: hidden;
  background: #f3f5f7;
  color: #000;
}
.dm__post-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
}
.dm__post-head img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.dm__post-img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: opacity .2s ease;
}
.dm__post-cap {
  display: block;
  padding: 10px 12px 12px;
  font-size: 14px;
  line-height: 1.4;
  color: #000;
}
.dm__post-cap strong { font-weight: 600; }
.dm__post:hover .dm__post-img { opacity: .9; }
.dm__post:focus-visible { outline: 2px solid #4a5df9; outline-offset: 3px; }

/* two shared posts side by side, like sending several at once */
.dm__posts {
  align-self: flex-end;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: min(440px, 82%);
  margin-top: 4px;
}
.dm__posts .dm__post { width: auto; max-width: none; margin: 0; }
.dm__posts .dm__post-cap {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
}
.dm__posts .dm__post-head { padding: 8px 10px; font-size: 13px; }
.dm__posts .dm__post-head img { width: 22px; height: 22px; }
/* last line of every chat: Milan is typing his answer to "let's work together" */
.dm__typing {
  align-self: flex-end;
  display: flex;
  gap: 4px;
  margin-top: 14px;
  padding: 15px 16px;
  border-radius: 22px;
  background: #4a5df9;
}
.dm__typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  animation: typing 1.2s ease-in-out infinite;
}
.dm__typing span:nth-child(2) { animation-delay: .15s; }
.dm__typing span:nth-child(3) { animation-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .dm__typing span { animation: none; } }
.dm__seen { align-self: flex-end; margin-top: 2px; font-size: 12px; color: var(--ink-soft); }

/* messages pop in one after another when a chat opens */
.dm__chat.is-open .dm__body > * { animation: dm-in .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes dm-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .dm__chat.is-open .dm__body > * { animation: none; } }

/* message bar: goes to the contact page */
.dm__compose {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 24px 20px;
  padding: 12px 12px 12px 20px;
  border: 1px solid var(--line-light);
  border-radius: 100px;
  font-size: var(--fs-body);
  color: var(--ink-soft);
  transition: border-color .2s ease, color .2s ease;
}
.dm__compose svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.dm__compose:hover { border-color: var(--ink); color: var(--ink); }
.dm__compose:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* phones: like the app, either the inbox or one chat (with a back arrow) */
@media (max-width: 760px) {
  .dm { grid-template-columns: 1fr; height: auto; }
  .dm__inbox { border-right: 0; overflow: visible; padding-bottom: 12px; }
  .dm__row { padding-inline: 16px; }
  .dm__me, .dm__inbox-title { padding-inline: 16px; }
  .dm__chats { display: none; }
  .dm.is-reading .dm__inbox { display: none; }
  .dm.is-reading .dm__chats { display: grid; }
  .dm__back { display: grid; }
  .dm__head, .dm__body { padding-inline: 16px; }
  .dm__compose { margin-inline: 16px; }
}

/* Services as one live chat (v2): a chat window with a fixed height, quick replies at the bottom.
   The visitor is "you" (Instagram blue, right), Milan answers in light grey (left). */
.talk {
  display: flex;
  flex-direction: column;
  width: 100%;   /* full width, like the other blocks */
  height: clamp(600px, 78vh, 760px);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  color: #000;
}
.talk__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px var(--pad-x);
  border-bottom: 1px solid var(--line-light);
}
.talk__head img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.talk__head strong {
  display: block;
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--fs-body);
}
.talk__head span { font-size: 13px; color: var(--ink-soft); }

.talk__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px var(--pad-x);
  scroll-behavior: smooth;
}
.talk__body > * { flex-shrink: 0; }   /* the window has a fixed height: messages must never be squeezed */
.talk__day { align-self: center; margin-bottom: 12px; font-size: 13px; color: var(--ink-soft); }

.talk__msg {
  max-width: min(520px, 70%);
  padding: 10px 16px;
  border-radius: 22px;
  font-size: var(--fs-body);
  line-height: 1.4;
  animation: talk-in .35s cubic-bezier(.2, .8, .2, 1) both;
}
.talk__msg--milan { align-self: flex-start; background: #f3f5f7; }
.talk__msg--you { align-self: flex-end; background: #4a5df9; color: var(--white); }
/* a new speaker gets a little air, like in the app */
.talk__msg--milan + .talk__msg--you,
.talk__msg--you + .talk__msg--milan,
.talk__seen + .talk__msg--milan,
.talk__seen + .talk__typing { margin-top: 12px; }
@keyframes talk-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }

/* photo sent as a message */
.talk__photo {
  display: block;
  width: min(280px, 70%);
  padding: 0;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 18px;
}

/* case as a link preview */
.talk__link {
  display: flex;
  flex-direction: column;
  width: min(300px, 74%);
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
}
.talk__link img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.talk__link span { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 12px; font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.talk__link strong { font-size: var(--fs-body); font-weight: 600; color: #000; }
.talk__link small { margin-top: 4px; font-size: 12px; color: var(--muted); }
.talk__link:hover strong { text-decoration: underline; }
.talk__link:focus-visible { outline: 2px solid #4a5df9; outline-offset: 3px; }
.talk__msg a:not(.talk__link) { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.talk__seen { align-self: flex-end; margin-top: 2px; font-size: 12px; color: var(--ink-soft); animation: talk-in .3s ease both; }

/* typing dots */
.talk__typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 22px;
  background: #f3f5f7;
}
.talk__typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8e8e8e;
  animation: typing 1.2s ease-in-out infinite;
}
.talk__typing span:nth-child(2) { animation-delay: .15s; }
.talk__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { translate: 0 0; opacity: .5; } 30% { translate: 0 -4px; opacity: 1; } }

/* quick replies: one row that scrolls sideways, like suggested replies */
.talk__replies {
  display: flex;
  gap: 8px;
  padding: 12px var(--pad-x) 16px;
  border-top: 1px solid var(--line-light);
  overflow-x: auto;
  scrollbar-width: none;
}
.talk__replies::-webkit-scrollbar { display: none; }
.talk__chip {
  flex-shrink: 0;
  padding: 10px 16px;
  border: 1px solid #4a5df9;
  border-radius: 100px;
  background: var(--white);
  color: #4a5df9;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.talk__chip:hover { background: #4a5df9; color: var(--white); }
.talk__chip:focus-visible { outline: 2px solid #4a5df9; outline-offset: 3px; }
.talk__chip[aria-pressed="true"] { border-color: var(--line-light); color: var(--ink-soft); }
.talk__chip[aria-pressed="true"]:hover { background: var(--surface); }
.talk__chip:disabled { opacity: .4; cursor: default; }
.talk__chip:disabled:hover { background: var(--white); color: #4a5df9; }

/* without JS the answers simply show under the chat; with JS they're the scripts the chat plays */
.talk__scripts { display: flex; flex-direction: column; gap: 6px; margin-top: 24px; }
.talk__script { display: flex; flex-direction: column; gap: 4px; }
.js .talk__scripts { display: none; }

@media (prefers-reduced-motion: reduce) {
  .talk__msg, .talk__seen { animation: none; }
  .talk__typing span { animation: none; }
}
@media (max-width: 560px) {
  .talk { height: 640px; }
  .talk__body, .talk__head { padding-inline: 14px; }
  .talk__replies { padding-inline: 14px; }
  .talk__msg { max-width: 86%; }
}

/* Services v3: a phone that types each conversation, the services list next to it on a grey panel */
.pm {
  --dur: 9s;   /* how long each service stays up while it plays by itself (keep in sync with js/main.js) */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--col-gap);
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}

/* the phone */
.pm__phone {
  width: clamp(270px, 22 * var(--vw), 340px);
  aspect-ratio: 9 / 19;
  padding: 10px;
  border-radius: 52px;
  background: #0d0d0d;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .35), inset 0 0 0 2px #2a2a2a;
}
.pm__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 42px;
  overflow: hidden;
  background: var(--white);
  color: #000;
}
.pm__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 26px 8px;
  font-size: 13px;
  font-weight: 600;
}
.pm__island {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 34%;
  height: 26px;
  border-radius: 20px;
  background: #0d0d0d;
  translate: -50% 0;
}
.pm__icons { display: flex; align-items: flex-end; gap: 3px; }
.pm__icons i { display: block; width: 4px; border-radius: 1px; background: #000; }
.pm__icons i:nth-child(1) { height: 5px; }
.pm__icons i:nth-child(2) { height: 8px; }
.pm__icons i:nth-child(3) { width: 18px; height: 9px; margin-left: 4px; border-radius: 3px; }

.pm__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 10px;
  border-bottom: 1px solid #efefef;
}
.pm__bar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.pm__bar img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.pm__bar strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; }
.pm__bar span { font-size: 11px; color: #737373; }

/* messages pile up from the bottom; older ones slide out of the top, like a real chat */
.pm__chat {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 12px;
  overflow: hidden;
}
.pm__chat > * { flex-shrink: 0; }
.pm__msg {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 18px;
  font-size: 13px;
  line-height: 1.35;
  animation: talk-in .35s cubic-bezier(.2, .8, .2, 1) both;
}
.pm__msg--you { align-self: flex-end; margin-bottom: 8px; background: #4a5df9; color: var(--white); }
.pm__msg--milan { align-self: flex-start; background: #f3f5f7; }
.pm__photo { display: block; width: 72%; padding: 0; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.pm__link { display: block; width: 76%; padding: 0; overflow: hidden; border-radius: 16px; }
.pm__link img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pm__link span { display: block; padding: 8px 10px 10px; font-size: 11px; color: #737373; }
.pm__link strong { display: block; font-size: 12px; font-weight: 600; color: #000; }
.pm__typing {
  align-self: flex-start;
  display: flex;
  gap: 3px;
  padding: 11px 12px;
  border-radius: 18px;
  background: #f3f5f7;
}
.pm__typing span { width: 6px; height: 6px; border-radius: 50%; background: #8e8e8e; animation: typing 1.2s ease-in-out infinite; }
.pm__typing span:nth-child(2) { animation-delay: .15s; }
.pm__typing span:nth-child(3) { animation-delay: .3s; }

.pm__input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 12px 16px;
  padding: 8px 10px 8px 14px;
  border: 1px solid #dbdbdb;
  border-radius: 100px;
  font-size: 13px;
  color: #737373;
}
.pm__input svg { width: 18px; height: 18px; fill: none; stroke: #000; stroke-width: 1.5; stroke-linejoin: round; }

/* the services */
.pm__list { list-style: none; border-top: 1px solid var(--line-light); }
.pm__item { position: relative; border-bottom: 1px solid var(--line-light); scroll-margin-top: var(--gutter); }
.pm__toggle {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: clamp(18px, 1.6 * var(--vw), 26px) 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.1;
  text-align: left;
  cursor: pointer;
  transition: color .25s ease;
}
.pm__toggle span { font-family: "Inter", sans-serif; font-size: var(--fs-small); font-weight: 400; }
.pm__toggle:hover,
.pm__item.is-active .pm__toggle { color: var(--ink); }
.pm__toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

/* stories-style line: fills while a service plays by itself */
.pm__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
}
.pm.is-auto .pm__item.is-active .pm__progress { animation: pm-progress var(--dur) linear forwards; }
@keyframes pm-progress { to { transform: scaleX(1); } }

.pm__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.2, .8, .2, 1);
}
.pm__detail > div { overflow: hidden; }
.pm__item.is-active .pm__detail { grid-template-rows: 1fr; }
.pm__text { max-width: var(--measure); font-size: var(--fs-lead); line-height: 1.6; }
.pm__get { margin-top: 16px; font-size: var(--fs-body); line-height: 1.5; }
.pm__get strong { display: block; margin-bottom: 2px; font-size: var(--fs-small); font-weight: 400; color: var(--ink-soft); }
.pm__cases {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 24px;
  margin-top: 16px;
  padding-bottom: clamp(22px, 2 * var(--vw), 32px);
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.pm__cases a {
  display: inline-flex;
  align-items: baseline;
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--fs-body);
  color: var(--ink);
  text-decoration: underline 1px transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color .25s ease;
}
.pm__cases a:hover { text-decoration-color: currentColor; }
.pm__cases a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .pm__msg { animation: none; }
  .pm__typing span { animation: none; }
  .pm__detail { transition: none; }
}
@media (max-width: 900px) {
  .pm { grid-template-columns: 1fr; justify-items: center; }
  .pm__list { width: 100%; }
  .pm__phone { width: 270px; }
}

/* Project in the spotlight: dark block, story left, before/after slider right (⅔) */
.spot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--col-gap);
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--radius);
  background: var(--dark);
  color: var(--white);
}
.spot__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(28px, 2.6 * var(--vw), 44px);
  min-width: 0;
}
.spot .showcase__title { color: var(--white); }
.spot .showcase__title span { color: var(--grey); }
.spot__body { display: flex; flex-direction: column; gap: 14px; margin-top: auto; }
.spot__meta { font-size: var(--fs-small); color: var(--muted); }
.spot__title {
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.1;
}
.spot__text { font-size: var(--fs-body); line-height: 1.6; color: var(--grey); }

/* numbers in the same style as the About stats */
.spot__facts { display: flex; gap: clamp(24px, 2.6 * var(--vw), 48px); }
.spot__facts > div { display: flex; flex-direction: column-reverse; gap: 8px; }
.spot__facts dt { font-size: var(--fs-small); color: var(--muted); }
.spot__facts dd {
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 1.4 * var(--vw) + 22px, 52px);
  line-height: 1;
}
.spot .compare { align-self: center; }

/* FAQ: title left, questions on the 50% line (same toggle as the CV rows) */
.faq {
  display: flex;
  gap: var(--col-gap);
  padding: 0 var(--pad-x);
  color: var(--ink);
}
.faq__head {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 1.6 * var(--vw), 28px);
}
.faq__text { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-soft); }
.faq__text a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.faq__list { flex: 1 1 0; min-width: 0; list-style: none; border-top: 1px solid var(--line-light); }
.faq__item { border-bottom: 1px solid var(--line-light); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(18px, 1.6 * var(--vw), 28px) 0;
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q .cv__toggle { flex-shrink: 0; }
.faq__q:hover .cv__toggle { border-color: var(--ink); }
.faq__q:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.faq__a {
  max-width: var(--measure);
  padding: 0 64px clamp(22px, 2 * var(--vw), 32px) 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-soft);
  animation: cv-open .4s ease both;
}

@media (max-width: 1000px) {
  .faq { flex-direction: column; gap: 28px; }
  .spot { grid-template-columns: 1fr; gap: 40px; }
  .spot__body { margin-top: 0; }
}
@media (max-width: 640px) {
  .faq__a { padding-right: 0; }
}

/* =====================================================================
   Nav hover: line
   A thin line draws in under the link from the left and leaves to the right.
   The page you're on keeps its line (this replaces the old text underline on light pages).
   ===================================================================== */
.nav__links a { position: relative; }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.nav__links a:is(:hover, :focus-visible)::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav--light .nav__links a[aria-current="page"] { text-decoration: none; }
/* Contact pill: plain colour fade + the arrow hops out and back in */
.btn-contact:is(:hover, :focus-visible) .arrow { animation: arrow-hop .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes arrow-hop {
  45% { transform: translate(120%, -120%); opacity: 0; }
  46% { transform: translate(-120%, 120%); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__links a::after { transition: none; }
  .btn-contact:is(:hover, :focus-visible) .arrow { animation: none; }
}
/* ============ Cases overview (cases.html), in the site's own style ============
   "Latest" block: the newest case as a card on the left, its details on the 50% line on a grey surface.
   Below: filter chips and the usual case cards on a 5-column grid, rows alternating wide+narrow / narrow+wide
   (the same 1448 / 744 rhythm as cases.html); js sets the spans again after filtering. */
/* newest case: photo left, details on the 50% line, on a grey surface like the case-page blocks */
.cf-new {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--col-gap);
  padding: var(--gutter);
  border-radius: var(--radius);
  background: var(--surface);
}
.cf-new__media { flex: none; width: auto; aspect-ratio: 3 / 2; }
/* the photo breathes: a very slow zoom in and out, the same calm movement as the hover on the other cards */
.cf-new__media .case__img { animation: cf-breathe 14s ease-in-out infinite alternate; }
.cf-new__media:is(:hover, :focus-visible) .case__img { animation-play-state: paused; }
@keyframes cf-breathe { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .cf-new__media .case__img { animation: none; } }
.cf-new__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(20px, 2 * var(--vw), 32px);
  padding: clamp(8px, 1 * var(--vw), 16px) 0;
}
.cf-new__label { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-small); color: #5c5c5c; }
.cf-new__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); animation: cf-dot 2s ease-in-out infinite; }
@keyframes cf-dot { 50% { opacity: .25; } }
.cf-new__title {
  display: flex;
  flex-direction: column;
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--ink);
}
.cf-new__line { display: flex; }
/* same as the contact title: each letter hops on hover */
.cf-new__line .char { display: inline-block; white-space: pre; transition: translate .5s cubic-bezier(.2, 1.6, .4, 1); }
.cf-new__line .char:hover { translate: 0 -.12em; transition-duration: .15s; }
@media (prefers-reduced-motion: reduce) { .cf-new__line .char { transition: none; } }
.cf-new__text { max-width: var(--measure, 52ch); font-size: var(--fs-lead); line-height: 1.6; color: #5c5c5c; }
.cf-new__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(28px, 3 * var(--vw), 56px);
  font-family: "Clash Display", "Inter", sans-serif;
}
.cf-new__meta > div { display: flex; flex-direction: column; gap: 6px; }
.cf-new__meta dt { font-size: 14px; color: #6b6b6b; }
.cf-new__meta dd { font-size: clamp(16px, .3 * var(--vw) + 14px, 20px); font-weight: 500; color: var(--ink); }
.cf-new__link { align-items: center; gap: 10px; }
.cf-new__link .arrow { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; }
/* same hover as the Contact pill in the nav: plain colour fade + the arrow hops out and back in */
.cf-new__link:is(:hover, :focus-visible) .arrow { animation: arrow-hop .4s cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) { .cf-new__link:is(:hover, :focus-visible) .arrow { animation: none; } }
@media (prefers-reduced-motion: reduce) { .cf-new__dot { animation: none; } }

/* closing call to action about the visitor's idea: a block on a darkened, blurred photo (so it stands
   apart from the grey blocks and the black footer), headline left, an Instagram-style message window
   on the 50% line with a floating "wants to send you a message" request */
.cf-cta {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--col-gap);
  align-items: center;
  padding: var(--pad-y) var(--pad-x);
  overflow: hidden;
  border-radius: var(--radius);
  background: #2a2420;
  color: var(--white);
  isolation: isolate;
}
.cf-cta__bg {
  position: absolute;
  inset: -40px;
  z-index: -2;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  object-fit: cover;
  filter: blur(28px) saturate(1.1);
}
.cf-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 100%);
  pointer-events: none;
}
.cf-cta__intro { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 1.8 * var(--vw), 28px); }
.cf-cta__title {
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -.02em;
}
.cf-cta__text { max-width: 42ch; font-size: var(--fs-lead); line-height: 1.6; color: rgba(255, 255, 255, .8); }

.cf-cta__chat { position: relative; justify-self: center; width: min(100%, 420px); padding-top: 34px; }
.cf-cta__request {
  position: absolute;
  top: 0;
  left: -28px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.3;
  animation: cf-float 5s ease-in-out infinite;
}
.cf-cta__request img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
@keyframes cf-float { 50% { transform: translateY(-8px); } }

.idea {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .35);
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.idea__head { display: flex; align-items: center; gap: 12px; padding: 22px 18px 14px; border-bottom: 1px solid #efefef; }
.idea__head img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.idea__head strong { display: block; font-size: 15px; font-weight: 600; }
.idea__head span { font-size: 12px; color: #737373; }
.idea__body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px; }
.idea__msg { max-width: 80%; padding: 9px 14px; border-radius: 20px; background: #efefef; font-size: 14px; line-height: 1.35; }
.idea__msg + .idea__msg { border-top-left-radius: 6px; }
.idea__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.idea__chips button {
  padding: 8px 12px;
  border: 1px solid #dbdbdb;
  border-radius: 100px;
  background: var(--white);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.idea__chips button:hover { background: #fafafa; border-color: #b5b5b5; }
.idea__chips button[aria-pressed="true"] { background: #4a5df9; border-color: #4a5df9; color: var(--white); }
.idea__compose {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 14px 14px;
  padding: 6px 6px 6px 18px;
  border: 1px solid #dbdbdb;
  border-radius: 100px;
  transition: border-color .2s ease;
}
.idea__compose:focus-within { border-color: #8e8e8e; }
.idea__compose input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; }
.idea__compose button {
  padding: 8px 14px;
  border: 0;
  border-radius: 100px;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #4a5df9;
  cursor: pointer;
}
.idea__compose button:hover { background: #f0f2ff; }

@media (max-width: 900px) {
  .cf-cta { grid-template-columns: 1fr; gap: 40px; }
  .cf-cta__request { left: 8px; }
}
@media (prefers-reduced-motion: reduce) { .cf-cta__request { animation: none; } }
/* filler tile: fills the empty slot a filter leaves behind, instead of stretching one case */
.cf__fill {
  grid-column: span var(--span, 2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px, 2.2 * var(--vw), 36px);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: background .3s ease;
}
.cf__fill[hidden] { display: none; }
.cf__fill:hover { background: #e4e4e4; }
.cf__fill-text {
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(26px, 2.4 * var(--vw), 44px);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.cf__fill-link { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); }
.cf__fill-link .arrow { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.cf {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2 * var(--vw), 32px);
  margin-top: clamp(48px, 5 * var(--vw), 96px);    /* clear room under the Latest block, like between case-page blocks */
}
/* section head: big title with the live count left, filter chips starting on the 50% line */
.cf__bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px var(--col-gap);
  align-items: end;
  padding: 0 var(--pad-x);   /* same inset as the section heads on the other pages */
}
.cf__title {
  font-family: "Clash Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
}
.cf__count {
  margin-left: 6px;
  vertical-align: super;
  font-family: "Inter", sans-serif;
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0;
  color: #6b6b6b;
  font-variant-numeric: tabular-nums;
}
.cf__bar .filter { justify-self: end; justify-content: flex-end; }   /* right edge lines up with the grid below */
@media (max-width: 900px) {
  .cf__bar { grid-template-columns: 1fr; }
  .cf__bar .filter { justify-self: start; justify-content: flex-start; }
}

.cf__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: clamp(320px, 34 * var(--vw), 640px);   /* same row height as cases.html */
  gap: 20px;
}
.cf__grid .case { flex: none; grid-column: span var(--span, 3); }
.cf__grid .case[hidden] { display: none; }
.cf__grid .case.is-entering { animation: cf-in .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes cf-in { from { opacity: 0; transform: translateY(16px); } }

@media (max-width: 900px) {
  .cf-new { grid-template-columns: 1fr; }
  .cf__fill { min-height: 220px; }
  .cf__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .cf__grid .case { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { .cf__grid .case.is-entering { animation: none; } }

/* ============ Cases overview: the newest case is simply the first card, with a "New" label ============ */
.case__new {
  position: absolute;
  top: clamp(14px, 1.4 * var(--vw), 24px);
  left: clamp(14px, 1.4 * var(--vw), 24px);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px 8px 12px;
  border-radius: 100px;
  background: var(--white);
  color: var(--ink);
  font-family: "Clash Display", "Inter", sans-serif;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1;
}
.case__new .status-dot { margin-right: 8px; }
.cf__grid { margin-top: 0; }
/* Bende Content: four templates. The large template is smaller than on Zoute so the section stays compact;
   the four thumbnails sit 2 x 2 and together are about as tall as the large one. */
.tpl-viewer--four .tpl-viewer__stage { max-width: 420px; }
.tpl-viewer--four .tpl-viewer__side { max-width: 380px; }
.tpl-viewer--four .tpl-viewer__thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* =====================================================================
   Printwork models (cases.html, Printwork filter only)
   The printed pieces in CSS 3D on the grey case tile, sized in container units.
   Roll-up after the reference mockup: silver top rail, banner, cassette with two feet.
   ===================================================================== */
/* Under Printwork the grid turns into equal halves with tall rows, so every piece gets the
   same room and stands at the same height (an odd count still gets the filler tile). */
.cf__grid.is-print { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(460px, 48 * var(--vw), 820px); }
.cf__grid.is-print > * { grid-column: auto; }
.case--model {
  container-type: size;
  color: var(--ink);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.case--model.is-dragging { cursor: grabbing; }
.case--model::after { display: none; }
.case--model .case__tags { opacity: 1; transform: none; z-index: 2; }
.case--model .pill--outline { color: var(--ink); }

.model {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4cqh;
  padding-top: 6cqh;   /* room for the pills */
  perspective: 1700px;
}
.model__float { transform-style: preserve-3d; animation: model-float 5s ease-in-out infinite; }
@keyframes model-float { 50% { transform: translateY(-1.4cqh); } }

.model__obj {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 5deg)) rotateY(var(--ry, -20deg));
  transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}
.is-dragging .model__obj { transition: none; }

.model__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--white);
}
.model__face img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.model__face--back { transform: rotateY(180deg); }
/* soft light over the print; it darkens as the side turns away (--shade from main.js) */
.model__face::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .05));
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, var(--shade, 0));
  pointer-events: none;
}

.model__shadow {
  flex: none;
  width: var(--shadow-w, 40cqh);
  height: 3.4cqh;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0));
}
[data-kind="sheet"] .model__shadow { animation: model-shadow 5s ease-in-out infinite; }
@keyframes model-shadow { 50% { transform: scale(.86); opacity: .7; } }

/* Flyer: a floating A5 sheet */
[data-kind="sheet"] { --shadow-w: 42cqh; }
[data-kind="sheet"] .model__obj { height: 70cqh; aspect-ratio: 1200 / 1704; }
[data-kind="sheet"] .model__face { border-radius: 2px; }

/* Roll-up, built after the mockup: a thin aluminium top rail with end caps, the banner, an
   extruded aluminium cassette with dark end caps, two flat feet, and a pole behind the banner.
   Every metal part is a .cube (six faces, sized with --w / --h / --d). It stands on the floor,
   so it does not float. */
[data-kind="rollup"] {
  --bh: 72cqh;                          /* banner height */
  --bw: calc(var(--bh) * 900 / 2117);   /* banner width, from the print */
  --shadow-w: 64cqh;
  gap: 0;
}
[data-kind="rollup"] .model__obj { display: flex; flex-direction: column; align-items: center; }
[data-kind="rollup"] .model__shadow { margin-top: -1.2cqh; height: 3.6cqh; background: radial-gradient(closest-side, rgba(0, 0, 0, .24), rgba(0, 0, 0, 0)); }

.cube { position: relative; flex: none; width: var(--w); height: var(--h); transform-style: preserve-3d; }
.cube > i { position: absolute; left: 0; top: 0; display: block; }
.cube > i:nth-child(1), .cube > i:nth-child(2) { width: var(--w); height: var(--h); background: var(--c-front); }
.cube > i:nth-child(3), .cube > i:nth-child(4) { width: var(--d); height: var(--h); left: calc((var(--w) - var(--d)) / 2); background: var(--c-side); }
.cube > i:nth-child(5), .cube > i:nth-child(6) { width: var(--w); height: var(--d); top: calc((var(--h) - var(--d)) / 2); background: var(--c-top); }
.cube > i:nth-child(1) { transform: translateZ(calc(var(--d) / 2)); }
.cube > i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.cube > i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.cube > i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.cube > i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.cube > i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); background: #8d9196; }

/* brushed aluminium */
.model__rail, .model__cassette {
  --c-front:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    linear-gradient(180deg, #f4f5f6 0%, #d6d9dc 30%, #b9bdc1 62%, #a2a6ab 100%);
  --c-top: linear-gradient(90deg, #cfd2d5, #eef0f1 50%, #cfd2d5);
  --c-side: #6f7378;   /* dark plastic end caps */
}
.model__rail { --w: calc(var(--bw) * 1.035); --h: 1.5cqh; --d: 1.5cqh; }
.model__cassette { --w: calc(var(--bw) * 1.08); --h: 2.8cqh; --d: 5.2cqh; z-index: 1; }
.model__cassette > i:nth-child(3), .model__cassette > i:nth-child(4) { border-radius: .8cqh; }

/* the banner hangs from the rail into the slot of the cassette */
.model__banner { position: relative; width: var(--bw); height: var(--bh); transform-style: preserve-3d; }
[data-kind="rollup"] .model__face--front::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .10), rgba(255, 255, 255, .07) 18%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .04) 80%, rgba(0, 0, 0, .12)),
    linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0) 4%, rgba(0, 0, 0, 0) 96%, rgba(0, 0, 0, .18));
}
.model__face--blank { background: linear-gradient(90deg, #d4d5d7, #e7e8e9 50%, #d4d5d7); }

/* telescopic pole behind the banner (only seen when you turn it round) */
.model__pole {
  position: absolute;
  left: 50%;
  top: 1.5cqh;
  width: .9cqh;
  height: var(--bh);
  margin-left: -.45cqh;
  transform: translateZ(-1.6cqh);
  background: linear-gradient(90deg, #8f9398, #e2e4e6 45%, #9a9ea3);
  border-radius: .45cqh;
}

/* two flat feet that stick out to the front and back */
.model__feet {
  display: flex;
  justify-content: space-between;
  width: calc(var(--bw) * .86);
  transform-style: preserve-3d;
}
.model__foot {
  --w: 4.6cqh; --h: .9cqh; --d: 15cqh;
  --c-front: linear-gradient(180deg, #c9ccd0, #9da1a6);
  --c-top: linear-gradient(180deg, #b3b7bb, #e4e6e8 50%, #b3b7bb);
  --c-side: linear-gradient(180deg, #b5b9bd, #8b8f94);
}
.model__foot > i:nth-child(1), .model__foot > i:nth-child(2) { border-radius: .4cqh .4cqh 0 0; }
.model__hint {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 1.4 * var(--vw), 24px);
  transform: translateX(-50%);
  font-size: var(--fs-small);
  color: var(--ink-soft);
  white-space: nowrap;
  transition: opacity .4s ease;
}
.case--model.is-touched .model__hint { opacity: 0; }

@media (max-width: 900px) {
  .cf__grid.is-print { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .case--model { height: 520px; }
}
@media (prefers-reduced-motion: reduce) {
  .model__float, .model__shadow { animation: none; }
}
/* no arrow on the models, so the pills may use the full width (and wrap on the narrow tile) */
.model { z-index: 0; }
/* same height for every piece: the flyer and the roll-up banner are both 72% of the tile */
.model { padding: 0 0 7cqh; }
[data-kind="sheet"] .model__obj { height: 72cqh; }


/* bottom bar: client + piece on the left, a hint and the flip button on the right */
.model__bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: auto;
}
.model__bar .print-cap { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: var(--fs-small); color: var(--ink-soft); }
.model__bar .print-cap strong { font-family: "Clash Display", "Inter", sans-serif; font-weight: 500; color: var(--ink); }
.model__tools { display: flex; align-items: center; gap: 12px; }
.model__tools .model__hint { position: static; transform: none; }
.model__flip { flex: none; }@container (max-width: 520px) { .model__tools .model__hint { display: none; } }   /* narrow tile: the flip button says enough */

/* Shadows on the floor instead of in the layout: the shadow sits right under the piece
   (absolutely placed in .model__ground), so it no longer pushes the model up. The light comes
   from the front left, so the roll-up also casts a long soft shadow to the right. */
.model__ground { position: relative; display: flex; flex-direction: column; align-items: center; transform-style: preserve-3d; }
.model__ground .model__shadow {
  position: absolute;
  left: 50%;
  top: 100%;
  width: var(--shadow-w);
  margin: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
[data-kind="sheet"] { --shadow-w: 36cqh; }
[data-kind="sheet"] .model__ground .model__shadow {
  top: calc(100% + 6cqh);   /* the flyer floats, so its shadow lies a little below it */
  height: 3cqh;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0));
  filter: blur(2px);
  animation: model-shadow-floor 5s ease-in-out infinite;
}
@keyframes model-shadow-floor { 50% { transform: translate(-50%, -50%) scale(.85); opacity: .65; } }

/* roll-up: a tight contact shadow under the cassette and feet ... */
[data-kind="rollup"] { --shadow-w: calc(var(--bw) * 1.3); }
[data-kind="rollup"] .model__ground .model__shadow {
  height: 2.4cqh;
  margin-top: -.3cqh;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .38), rgba(0, 0, 0, .12) 60%, rgba(0, 0, 0, 0));
  filter: blur(1.5px);
}
/* ... and the cast shadow, stretching back and to the right over the floor */
[data-kind="rollup"] .model__ground .model__shadow--cast {
  left: 50%;
  width: calc(var(--bw) * 1.9);
  height: 4.4cqh;
  margin-top: -1.2cqh;
  transform: translate(-22%, -50%) skewX(-38deg);
  background: radial-gradient(60% 50% at 30% 50%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0));
  filter: blur(6px);
}

/* darker metal, like the real stand: a near-black top rail, a dark brushed cassette with light
   aluminium end caps, light feet */
.model__rail {
  --c-front:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    linear-gradient(180deg, #6a6c70 0%, #45474a 40%, #2f3133 100%);
  --c-top: linear-gradient(90deg, #3a3c3f, #57595c 50%, #3a3c3f);
  --c-side: #26282a;
}
.model__cassette {
  --c-front:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    linear-gradient(180deg, #a9acb0 0%, #85888c 18%, #6c6f73 60%, #55585c 100%);
  --c-top: linear-gradient(90deg, #6f7276, #93969a 50%, #6f7276);
  --c-side: linear-gradient(180deg, #e3e5e7, #b5b8bc);
}
.model__foot {
  --c-front: linear-gradient(180deg, #d5d7da, #b0b3b7);
  --c-top: linear-gradient(180deg, #c3c6c9, #e6e8ea 50%, #c3c6c9);
  --c-side: linear-gradient(180deg, #c9ccd0, #9fa2a6);
}
.model__pole { background: linear-gradient(90deg, #3c3e41, #7c7f83 45%, #3c3e41); }
/* matt banner material: a soft fall-off towards the bottom, like in the photo */
[data-kind="rollup"] .model__face--front::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .08), rgba(255, 255, 255, .05) 20%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, .06) 85%, rgba(0, 0, 0, .12)),
    linear-gradient(180deg, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0) 3%, rgba(0, 0, 0, 0) 85%, rgba(0, 0, 0, .1));
}
@media (prefers-reduced-motion: reduce) { .model__ground .model__shadow { animation: none; } }.model { padding-bottom: 3cqh; }   /* the pieces stand a little lower in the tile, closer to the floor line */

/* =====================================================================
   Reels (cases.html, Reels filter only)
   Three 9:16 tiles per row that play muted while on screen; a click opens the reel viewer.
   ===================================================================== */
.cf__grid[data-filter="reels"] { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; }
.cf__grid[data-filter="reels"] > * { grid-column: auto; aspect-ratio: 9 / 16; }
.case--reel { padding: 0; background: #1a1a1a; color: var(--white); }
.case--reel::after { display: none; }
.reel__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .5s ease, filter .5s ease;
}
/* soft fade at the bottom for the caption */
.case--reel::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  z-index: -1;
  background: linear-gradient(0deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.reel__badge {
  position: absolute;
  top: clamp(12px, 1.2 * var(--vw), 20px);
  left: clamp(12px, 1.2 * var(--vw), 20px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
}
.reel__badge svg { width: 10px; height: 10px; fill: currentColor; }
.reel__cap {
  position: absolute;
  left: clamp(14px, 1.4 * var(--vw), 22px);
  right: clamp(14px, 1.4 * var(--vw), 22px);
  bottom: clamp(14px, 1.4 * var(--vw), 22px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, .8);
  pointer-events: none;
}
.reel__cap strong { font-family: "Clash Display", "Inter", sans-serif; font-weight: 500; font-size: 1.15em; color: var(--white); }
.case--reel:hover .reel__video { transform: scale(1.03); }
.cases:has(.case--reel:hover) .case--reel:not(:hover) .reel__video { opacity: .55; filter: grayscale(.8); }

@media (max-width: 900px) {
  .cf__grid[data-filter="reels"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* Reels: the whole tile is the pause / play button; the mute button sits on top of it, top right */
.reel__toggle { position: absolute; inset: 0; z-index: 1; border: 0; background: none; cursor: pointer; }
.reel__toggle:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; border-radius: var(--radius); }
.reel__mute {
  position: absolute;
  top: clamp(10px, 1.1 * var(--vw), 18px);
  right: clamp(10px, 1.1 * var(--vw), 18px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.reel__mute:hover { transform: scale(1.06); }
.reel__mute[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.reel__mute:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.reel__mute svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.reel__mute svg path:first-child { fill: currentColor; stroke: none; }
.reel__icon-on, .reel__mute[aria-pressed="true"] .reel__icon-off { display: none; }
.reel__mute[aria-pressed="true"] .reel__icon-on { display: block; }
/* paused: a play icon in the middle and the video a little darker */
.reel__state {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.8);
  transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
.reel__state svg { width: 24px; height: 24px; margin-left: 3px; fill: currentColor; }
.case--reel.is-paused .reel__state { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.case--reel.is-paused .reel__video { filter: brightness(.75); }