/*
 * Juliano Ferrari — public site styles.
 * Measurements follow the Figma "Webpage" frame (1512px wide): values are
 * expressed relative to that frame (vw) with clamp() limits for small and
 * very large screens. Theme tokens are overridden from admin settings.
 */

:root {
  --color-accent: #2374ff;
  --color-text: #000000;
  --color-muted: #515151;
  --color-line: #afafaf;
  --color-surface: #d9d9d9;
  --color-dark: #1c1c1c;
  --color-bg: #ffffff;
  --color-icon: #838383;
  --overlay: rgba(0, 0, 0, 0.78);

  --font-heading: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-body: 14px;
  --tracking-display: -0.05em;
  --measure: 68ch;

  --gutter: clamp(16px, 4vw, 48px);
  --container: min(calc(100% - 2 * var(--gutter)), max(1185px, 78.4vw), 1800px);
  --radius: 10px;
  --fs-display: clamp(2.6rem, 7.366vw, 10.5rem);
  --fs-section: clamp(1.5rem, 1.984vw, 2.5rem);
  --section-space: clamp(64px, 7.7vw, 140px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 102px;
  --brands-duration: 40s;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

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

.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 200;
  background: var(--color-text); color: var(--color-bg); padding: 10px 14px; border-radius: var(--radius);
  text-decoration: none; transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

main:focus { outline: none; }

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

.section { padding-block: var(--section-space); }

/* ---------- Shared bits ---------- */

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-section);
  line-height: normal;
  text-transform: uppercase;
  margin: 0 0 clamp(18px, 1.39vw, 28px) 0.5rem;
}
.section-title__bar {
  display: block; flex: none; width: 56px; height: 3px; border-radius: 4px;
  background: var(--color-accent); transform-origin: left center;
}
.section-title--center { flex-direction: column; gap: clamp(16px, 1.39vw, 24px); text-align: center; margin-left: 0; }
.section-title--center .section-title__bar { transform-origin: center; }

.mini-bar { display: inline-block; width: 17.4px; height: 2.9px; border-radius: 4px; background: var(--color-accent); vertical-align: middle; margin-right: 3px; flex: none; }

.placeholder-box { display: block; width: 100%; height: 100%; background: var(--color-surface); }

.line-mask { display: block; overflow: hidden; padding-bottom: 0.04em; margin-bottom: -0.04em; }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 121px; height: 36px; padding: 0 20px;
  border: 1px solid var(--color-accent); border-radius: var(--radius);
  color: var(--color-muted); font-size: 12px; text-transform: uppercase; text-decoration: none;
  transition: background-color 0.25s, color 0.25s;
}
.btn-outline:hover { background: var(--color-accent); color: #fff; }

.likes {
  position: absolute; z-index: 3; top: 12px; right: 9px;
  display: inline-flex; align-items: center; gap: 5px;
  height: 21px; min-width: 54px; padding: 0 10px 0 11px;
  background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius);
  color: var(--color-icon); cursor: pointer; font-size: 10px; line-height: 1;
  transition: color 0.2s, border-color 0.2s;
}
.likes__icon { width: 11px; height: 11px; overflow: visible; }
.likes__count { color: var(--color-text); margin-left: auto; }
.likes:hover, .likes[aria-pressed="true"] { color: var(--color-accent); border-color: var(--color-accent); }
.likes[aria-pressed="true"] .likes__icon path { fill: currentColor; }
.likes.is-bump .likes__icon { animation: like-bump 0.45s var(--ease-out); }
@keyframes like-bump { 40% { transform: scale(1.35); } }

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

.site-header {
  --header-side: max(env(safe-area-inset-left), clamp(16px, 3.31vw, 50px));
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: max(env(safe-area-inset-top), 32px) var(--header-side) 0;
  border: 1px solid transparent; border-radius: var(--radius);
  pointer-events: none;
  transition: top 0.5s var(--ease-out), left 0.5s var(--ease-out), right 0.5s var(--ease-out),
    padding 0.5s var(--ease-out), background-color 0.35s, border-color 0.35s;
}
.site-header > * { pointer-events: auto; }
.site-header__logo { display: block; }
.site-header__logo img { width: 51.75px; height: 38px; object-fit: contain; transition: width 0.5s var(--ease-out), height 0.5s var(--ease-out); }

/* Sticky state: a white card with the footer-card shape, slimmer. */
.site-header.is-stuck {
  top: max(env(safe-area-inset-top), 12px);
  left: clamp(12px, 1.92vw, 29px);
  right: clamp(12px, 1.92vw, 29px);
  padding: 8px clamp(12px, 1.6vw, 22px);
  /* Frosted glass: white at 62% opacity over a blur of the page. */
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-color: rgba(175, 175, 175, 0.55);
  pointer-events: auto;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-stuck { background: rgba(255, 255, 255, 0.85); }
}
.site-header.is-stuck .site-header__logo img { width: 40px; height: 29px; }
.site-header.is-stuck .menu-toggle__icon { width: 32px; height: 32px; }
.site-header.is-stuck .menu-toggle { height: 32px; }

.menu-toggle, .menu-close {
  display: inline-flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 0 0 4px; border: 0; background: none; cursor: pointer;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em;
}
.menu-toggle__label, .menu-close__label { mix-blend-mode: difference; color: #fff; }
.menu-toggle__icon, .menu-close__icon {
  position: relative; display: grid; place-content: center; gap: 5px;
  width: 38px; height: 38px; border-radius: 50%; background: var(--color-accent);
  transition: transform 0.35s var(--ease-out);
}
.menu-toggle__icon i, .menu-close__icon i { display: block; width: 16px; height: 2px; border-radius: 2px; background: #fff; transition: transform 0.35s var(--ease-out); }
.menu-toggle__icon i:last-child { width: 10px; justify-self: start; }
.menu-toggle:hover .menu-toggle__icon { transform: scale(1.08); }
.menu-toggle:hover .menu-toggle__icon i:last-child { transform: translateX(6px); }
.menu-close__icon { gap: 0; }
.menu-close__icon i { position: absolute; left: 11px; top: 18px; }
.menu-close__icon i:first-child { transform: rotate(45deg); }
.menu-close__icon i:last-child { transform: rotate(-45deg); }
.menu-close:hover .menu-close__icon { transform: rotate(90deg); }
.menu-close__label { color: #fff; mix-blend-mode: normal; }

/* ---------- Fullscreen menu ---------- */

.menu {
  position: fixed; inset: 0; z-index: 100;
  height: 100vh; height: 100dvh;
  color: #fff; overflow: hidden;
}
.menu[hidden] { display: none; }
.menu__bg { position: absolute; inset: 0; background: var(--color-dark); transform-origin: top center; }
.menu__inner {
  position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px;
  padding: calc(max(env(safe-area-inset-top), 32px) + 70px) max(env(safe-area-inset-right), clamp(16px, 3.31vw, 50px)) max(env(safe-area-inset-bottom), 40px) max(env(safe-area-inset-left), clamp(16px, 3.31vw, 50px));
}
.menu-close { position: absolute; top: max(env(safe-area-inset-top), 32px); right: max(env(safe-area-inset-right), clamp(16px, 3.31vw, 50px)); }
.menu__nav { align-self: end; }
.menu__list { display: grid; align-content: start; gap: 0.08em; font-size: clamp(2.4rem, min(6.2vw, 9.5vh), 7.5rem); line-height: 0.92; }
.menu__item { display: block; }
.menu__link {
  display: flex; width: fit-content; align-items: flex-start; gap: 0.35em; text-decoration: none;
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-display); line-height: 0.92;
}
.menu__mask { display: block; overflow: hidden; padding: 0.04em 0.12em 0.06em; margin-inline: -0.12em; }
.menu__text { display: block; transition: color 0.25s, transform 0.4s var(--ease-out); }
.menu__link:hover .menu__text, .menu__link:focus-visible .menu__text { color: var(--color-accent); transform: translateX(0.12em); }
.menu__aside { display: grid; gap: 8px; justify-items: start; max-width: 320px; padding-bottom: 8px; }
.menu__label { font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: 2px; }
.menu__mail { font-weight: 300; font-size: 14px; text-decoration: none; border-bottom: 1px solid var(--color-accent); }
.menu__meta { font-weight: 300; font-size: 12px; opacity: 0.75; }
.menu__meta span { display: block; font-size: 10px; margin-top: 4px; }
.footer-social.menu__social { margin-top: 14px; padding-left: 0; }

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

.hero {
  position: relative;
  display: grid; place-items: center;
  min-height: 100vh; min-height: 100svh;
  padding: calc(var(--header-h) + 24px) var(--gutter) clamp(48px, 7.6vh, 110px);
  overflow: hidden; isolation: isolate;
  text-align: center;
}
@supports (height: 100dvh) { .hero { min-height: 100dvh; } }
@supports (height: 100svh) { .hero { min-height: 100svh; } }
.hero__media { position: absolute; inset: 0; z-index: -1; background: var(--color-dark); }
.hero__video, .hero__picture, .hero__picture img, .hero__embed { width: 100%; height: 100%; object-fit: cover; border: 0; }
.hero__embed { position: absolute; top: 50%; left: 50%; width: max(100%, 177.78vh); height: max(100%, 56.25vw); transform: translate(-50%, -50%); pointer-events: none; }
.hero__veil { position: absolute; inset: 0; background: #000; }
.hero--light { color: #fff; }
.hero--image .hero__media, .hero--video .hero__media { background: var(--color-surface); }

.hero__content { padding-top: clamp(0px, 6.6vh, 72px); -webkit-user-select: none; user-select: none; }
.hero__title {
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase;
  font-size: var(--fs-display); letter-spacing: var(--tracking-display); line-height: 0.81;
}
/* Desktop: the headline a little larger than the other display titles. */
@media (min-width: 1025px) { .hero__title { font-size: clamp(5rem, 8.6vw, 12.25rem); } }
.hero__line { display: block; }
.hero__stage { display: grid; }
.hero__phrase { grid-area: 1 / 1; display: block; }
.hero__phrase[hidden] { display: none; }
.hero__metaballs { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease-out); }
.hero__metaballs.is-ready { opacity: 1; }
.hero.is-over-bubble { cursor: grab; }
.hero.is-dragging-bubble, .hero.is-dragging-bubble * { cursor: grabbing; }
/* Soft white fade at the bottom so liquid reaching the edge never looks cut off. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 100px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-bg));
  pointer-events: none;
}
.hero__welcome {
  margin-top: clamp(28px, 4.1vw, 64px);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(0.625rem, 0.75vw, 0.8rem); letter-spacing: 0.42em; line-height: 1.4;
  padding-left: 0.42em; /* balances the trailing letter-spacing so the line stays centred */
}
.hero__welcome + .hero__name { margin-top: clamp(6px, 0.6vw, 12px); }
.hero__name {
  margin-top: clamp(28px, 4.1vw, 64px);
  font-family: var(--font-heading); font-style: italic; font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.6rem, 3.323vw, 4.6rem); letter-spacing: -0.05em; line-height: 1.2;
}
.hero__role {
  font-family: var(--font-body); font-weight: 400; text-transform: uppercase;
  font-size: clamp(0.625rem, 0.75vw, 0.8rem); letter-spacing: -0.02em; line-height: 1.4; /* same size as .hero__welcome */
}
.hero__name .line-mask, .hero__role .line-mask, .hero__welcome .line-mask { padding-inline: 0.14em; }

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

.about { padding-top: clamp(64px, 7.7vw, 117px); }
.about__grid {
  display: grid;
  grid-template-columns: 333fr 404fr;
  column-gap: clamp(28px, 3.3vw, 64px);
  width: min(100%, calc(787 / 1185 * 100%));
  margin-inline: auto;
  margin-top: 4px;
}
.about__media {
  aspect-ratio: 333 / 490; overflow: hidden;
  border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface);
}
.about__media img, .about__media picture { width: 100%; height: 100%; object-fit: cover; }
.about__text { max-width: var(--measure); font-size: var(--fs-body); line-height: normal; padding-top: 2px; }
.about__text p + p { margin-top: 1.2em; }
.about__text .about__headline + p { margin-top: 1.6em; }
.about__headline {
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.25rem, 1.9vw, 2.1rem); letter-spacing: -0.03em; line-height: 1.02;
}
.about__side { display: flex; flex-direction: column; gap: 18px; }
.about__nickname {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1rem, 1.15vw, 1.25rem); letter-spacing: -0.02em; line-height: 1.2;
}
.scramble { display: inline-block; white-space: nowrap; }
.about__cta {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 10px;
  padding: 11px 20px 11px 14px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px;
  font-family: var(--font-heading); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.02em;
  color: inherit; text-decoration: none;
  transition: background-color 0.25s, border-color 0.25s, transform 0.3s var(--ease-out);
}
.about__cta img { width: 18px; height: 18px; }
.about__cta:hover, .about__cta:focus-visible { background: var(--color-accent); border-color: var(--color-accent); transform: translateY(-2px); }
.about:not(.section--dark) .about__cta { border-color: var(--color-line); }
.about:not(.section--dark) .about__cta img { filter: invert(1); }
.about:not(.section--dark) .about__cta:hover { color: #fff; }
.about:not(.section--dark) .about__cta:hover img { filter: none; }
.about--image-right .about__side { order: 2; }
.about--image-right .about__grid { grid-template-columns: 404fr 333fr; }

/* ---------- Brands marquee ---------- */

.brands { padding-top: clamp(48px, 5.5vw, 88px); padding-bottom: clamp(24px, 2.8vw, 48px); }
.brands .section-title { margin-bottom: clamp(32px, 3.6vw, 53px); }
.brands__rows { display: grid; gap: 14px; }
/* Faint arrow pointing on to the next section (under Featuring and the brands). */
.section-next {
  display: grid; place-items: center; width: 36px; height: 36px; margin: clamp(28px, 3vw, 44px) auto 0;
  color: var(--color-line); opacity: 0.6; transition: opacity 0.25s, color 0.25s;
  animation: section-next 2.4s var(--ease-out) infinite;
}
.section-next svg { width: 24px; height: 24px; }
.section-next:hover, .section-next:focus-visible { opacity: 1; color: var(--color-accent); }
@keyframes section-next { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .section-next { animation: none; } }
.marquee { overflow: hidden; }
.marquee__track { display: flex; gap: 12px; width: max-content; padding-inline: 6px; }
.brand-tile {
  flex: none; width: clamp(150px, 16.667vw, 330px); aspect-ratio: 252 / 135;
  display: grid; place-items: center; background: transparent; overflow: hidden;
}
.brand-tile__link { display: grid; place-items: center; width: 100%; height: 100%; }
.brand-tile__logo { height: auto; max-height: 58%; object-fit: contain; }
.brands--mono .brand-tile__logo { filter: brightness(0); }
.brand-tile__name { font-weight: 700; text-transform: uppercase; letter-spacing: -0.03em; font-size: clamp(14px, 1.3vw, 22px); }

.is-marquee .marquee__track { animation: marquee var(--marquee-duration, var(--brands-duration)) linear infinite; }
.is-marquee .marquee--right .marquee__track { animation-direction: reverse; }
/* Keeps moving under the mouse; only pauses while a logo link has keyboard focus. */
.is-marquee .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* Without JS or with reduced motion: a centered, wrapping wall of logos. */
.marquee:not(.is-ready) .marquee__track { flex-wrap: wrap; justify-content: center; width: var(--container); margin-inline: auto; padding: 0; }
@media (prefers-reduced-motion: reduce) {
  .is-marquee .marquee__track { animation: none; }
}

/* ---------- Showcase ---------- */

.showcase { padding-top: clamp(64px, 7.7vw, 117px); }
.showcase .section-title { margin-bottom: clamp(20px, 1.85vw, 28px); }
.showcase__frame {
  position: relative; aspect-ratio: 1185 / 592; overflow: hidden;
  border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface);
}
.showcase__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.8s var(--ease-out), visibility 0s linear 0.8s; }
.showcase__slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.8s var(--ease-out), visibility 0s; z-index: 1; }
.showcase__link { display: block; width: 100%; height: 100%; }
.showcase__picture, .showcase__picture img { width: 100%; height: 100%; object-fit: cover; }
.showcase__slide img { transform: scale(1.04); transition: transform 6s linear; }
.showcase__slide.is-active img { transform: scale(1); }

.showcase__bars { display: flex; gap: 10px; padding: 0 10px; margin-top: 14px; }
.story-bar {
  position: relative; flex: 1 1 0; height: 3px; padding: 0; border: 0; border-radius: 4px;
  background: var(--color-line); cursor: pointer; overflow: visible;
}
.story-bar::after { content: ""; position: absolute; inset: -10px 0; } /* larger hit area */
.story-bar__fill {
  position: absolute; inset: 0; border-radius: inherit; background: var(--color-accent);
  transform: scaleX(0); transform-origin: left center; will-change: transform;
}
.story-bar.is-done .story-bar__fill { transform: scaleX(1); }

.showcase__captions { display: grid; margin-top: 25px; }
.showcase__caption { grid-area: 1 / 1; }
.showcase__caption[hidden] { display: none; }
.showcase__headline { color: var(--color-muted); font-size: 14px; text-transform: uppercase; min-height: 14px; }
.showcase__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.8rem, 2.38vw, 3rem); text-transform: uppercase; line-height: normal; margin-top: 1px; }
.showcase__title a { text-decoration: none; }
.showcase__title a:hover { color: var(--color-accent); }
.showcase__desc { font-size: 17px; line-height: 1.4; margin-top: 13px; max-width: 800px; padding-left: 3px; }
.showcase__client { display: flex; align-items: center; gap: 4px; font-size: 12px; text-transform: uppercase; margin-top: 10px; }
.showcase__stage { position: relative; }
.showcase__controls { position: absolute; right: 0; bottom: 0; display: flex; gap: 6px; }
.ctrl {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; cursor: pointer;
  background: #fff; border: 1px solid var(--color-line); border-radius: 50%; font-size: 13px; line-height: 1;
  transition: border-color 0.2s, color 0.2s;
}
.ctrl:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ---------- Selected works ---------- */

.works { padding-top: clamp(64px, 7.7vw, 117px); padding-bottom: clamp(32px, 3.6vw, 64px); }
.works .section-title { gap: 23px; margin-bottom: clamp(20px, 1.9vw, 29px); }
.works__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.58vw, 39px); }
.work-card { position: relative; }
.work-card__link { display: block; position: relative; text-decoration: none; color: #fff; border-radius: var(--radius); }
.work-card__media {
  position: relative; aspect-ratio: 369 / 238; overflow: hidden;
  border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface);
}
.work-card__media picture, .work-card__media img, .work-card__placeholder { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-card__media img { transition: transform 0.9s var(--ease-out); }
.work-card__shade { position: absolute; inset: 0; background: var(--overlay); opacity: 0; transition: opacity 0.45s var(--ease-out); }
.work-card__info {
  position: absolute; left: 32px; right: 32px; bottom: 29px; z-index: 2;
  opacity: 0; transform: translateY(8px); transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
/* Card texts wrap between words but never inside one; a word wider than the card
   scales the title down to fit (fitCardTitles in site.js). */
.work-card__headline { font-size: 12px; text-transform: uppercase; }
.nobr { white-space: nowrap; }
.work-card__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.2rem, 1.5vw, 1.9rem); line-height: 1.04; letter-spacing: -0.01em; text-transform: uppercase; margin-top: 1px; overflow-wrap: normal; word-break: keep-all; hyphens: manual; }
.work-card__sub { display: flex; align-items: center; gap: 3px; font-size: 10px; text-transform: uppercase; margin-top: 9px; }
.work-card .likes { top: 15px; right: 11px; }

.work-card:hover .work-card__shade,
.work-card:focus-within .work-card__shade,
.work-card.is-touched .work-card__shade { opacity: 1; }
.work-card:hover .work-card__info,
.work-card:focus-within .work-card__info,
.work-card.is-touched .work-card__info { opacity: 1; transform: none; }
.work-card:hover .work-card__media img { transform: scale(1.03); }

/* Touch devices have no hover: the card information sits under the image instead,
   and the dark Figma hover shade is shown while the card is pressed. */
@media (hover: none) {
  .work-card__link { color: var(--color-text); }
  .work-card__info { position: static; opacity: 1; transform: none; padding: 12px 2px 0; }
  .work-card__headline { color: var(--color-muted); }
  .work-card__link:active .work-card__shade { opacity: 1; }
  .work-card:focus-within .work-card__shade { opacity: 0; }
}

.load-status { min-height: 24px; margin-top: 24px; text-align: center; font-size: 12px; color: var(--color-muted); text-transform: uppercase; }
.load-status__fallback { color: var(--color-muted); }
.is-enhanced .load-status__fallback { display: none; }
.loader { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--color-line); border-top-color: var(--color-accent); border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.works__sentinel { height: 1px; }

/* ---------- Featuring ---------- */

.featuring { padding-top: clamp(48px, 5.5vw, 88px); padding-bottom: clamp(24px, 2.8vw, 48px); text-align: center; }
.featuring .section-title { margin-bottom: clamp(16px, 1.4vw, 22px); }
.featuring__stage { display: grid; }
.phrase { grid-area: 1 / 1; }
.phrase[hidden] { display: none; }
.phrase__text {
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase;
  font-size: var(--fs-display); letter-spacing: var(--tracking-display); line-height: 0.83;
}
.phrase__line { display: block; white-space: nowrap; }
/* The mask hides words while they slide in; the padding (cancelled by the negative margin) keeps
   letter overhangs from tight tracking or italics from being clipped at the sides. */
.phrase__mask { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.1em 0.12em 0.08em; margin: -0.1em -0.12em -0.08em; }
.phrase__word { display: inline-block; }
.phrase__sub {
  display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 0 20px;
  margin-top: clamp(32px, 3.5vw, 54px); font-size: clamp(1.15rem, 1.984vw, 2.5rem); text-transform: uppercase;
}
.phrase__prefix { font-weight: 100; font-style: italic; }
.phrase__subline { font-weight: 400; }

/* ---------- Articles ---------- */

.articles { padding-top: clamp(40px, 4vw, 64px); padding-bottom: clamp(24px, 2.5vw, 40px); }
.articles .section-title { gap: 26px; margin-bottom: clamp(28px, 2.9vw, 45px); }
.articles__list { display: grid; gap: 15px; padding-left: calc(102 / 1185 * 100%); }
.article-row { display: grid; grid-template-columns: minmax(0, 333px) minmax(0, 536px); column-gap: 33px; align-items: start; }
.article-row__media {
  display: block; aspect-ratio: 333 / 184; overflow: hidden;
  border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface);
}
.article-row__media picture, .article-row__media img, .article-row__placeholder { display: block; width: 100%; height: 100%; object-fit: cover; }
.article-row__media img { transition: transform 0.8s var(--ease-out); }
.article-row:hover .article-row__media img { transform: scale(1.03); }
.article-row__body { padding-top: 16px; }
.article-row__subject { color: var(--color-muted); font-size: 12px; text-transform: uppercase; }
.article-row__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.5rem, 1.984vw, 2.5rem); line-height: normal; text-transform: uppercase; margin-top: 0; }
.article-row__title a { text-decoration: none; }
.article-row__title a:hover { color: var(--color-accent); }
.article-row__excerpt { font-size: 14px; line-height: normal; margin-top: 16px; max-width: 536px; }
.article-row .btn-outline { margin-top: 7px; }
.articles__more { display: grid; justify-items: center; margin-top: 9px; }
.articles__more .load-status { margin-top: 12px; }
.more-btn { position: relative; display: block; width: 51.39px; height: 51.39px; border-radius: 50%; transition: transform 0.35s var(--ease-out); }
.more-btn__circle { width: 51.39px; height: 51.39px; }
.more-btn__plus { position: absolute; left: 18.42px; top: 18.42px; width: 14.69px; height: 14.69px; transition: transform 0.35s var(--ease-out); }
.more-btn:hover { transform: scale(1.06); }
.more-btn:hover .more-btn__plus { transform: rotate(90deg); }
.more-btn[aria-busy="true"] { pointer-events: none; opacity: 0.6; }
.more-btn[aria-busy="true"] .more-btn__plus { animation: spin 0.8s linear infinite; }

/* ---------- The Digital Factory (Amplia), before the footer ---------- */

.digital { padding-top: clamp(64px, 5.6vw, 85px); padding-bottom: clamp(24px, 2.5vw, 40px); }
.digital__grid { display: grid; grid-template-columns: minmax(0, 538px) minmax(0, 450px); justify-content: center; column-gap: clamp(32px, 5.42vw, 82px); align-items: end; }
.digital .section-title { margin-left: 0; margin-bottom: clamp(14px, 1.4vw, 20px); } /* close to the text and on its left edge */
.digital__text { max-width: 538px; font-size: 14px; line-height: normal; }
.digital__text p + p { margin-top: 1.2em; }
.digital__cta {
  display: inline-flex; align-items: center; justify-content: center; min-width: 145px; height: 36px; margin-top: 7px; padding: 0 24px;
  border: 1px solid var(--color-accent); border-radius: 10px;
  color: var(--color-muted); font-size: 12px; text-transform: uppercase; text-decoration: none;
  transition: background-color 0.25s, color 0.25s, transform 0.3s var(--ease-out);
}
.digital__cta:hover, .digital__cta:focus-visible { background: var(--color-accent); color: #fff; transform: translateY(-2px); }
/* Card: the Figma mask shape (rounded rectangle) over the animated Amplia GIF. */
.digital__visual { display: block; width: 100%; max-width: 450px; margin-bottom: 18px; }
.digital__card {
  position: relative; display: block; aspect-ratio: 779 / 429; overflow: hidden; border-radius: 10px; /* the GIF's own proportions, so its text is never cropped */
  -webkit-mask: url("../img/figma/digital-mask.svg") center / 100% 100% no-repeat;
  mask: url("../img/figma/digital-mask.svg") center / 100% 100% no-repeat;
}
.digital__gif { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.digital__visual:hover .digital__gif { transform: scale(1.04); }
@media (max-width: 900px) {
  .digital__grid { grid-template-columns: 1fr; row-gap: 36px; }
}

/* ---------- Card sections: dark like the footer panel (About), light gray like the top of the footer (Showcase) ---------- */

.section--card {
  /* 5px larger on every side than the dark cards; the extra padding keeps the content in place. */
  margin: calc(clamp(24px, 2.65vw, 40px) - 5px) calc(clamp(12px, 1.92vw, 29px) - 5px);
  padding-block: calc(clamp(56px, 6.6vw, 100px) + 5px);
  background: #e9e9e9;
  background: color-mix(in srgb, var(--color-surface) 55%, #fff); /* lighter than the footer gray */
  color: var(--color-text);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
.section--card .story-bar { background: rgba(0, 0, 0, 0.14); }

.section--dark {
  /* Same width as the Showcase card (.section--card). */
  margin: clamp(24px, 2.65vw, 40px) calc(clamp(12px, 1.92vw, 29px) - 5px);
  padding-block: clamp(56px, 6.6vw, 100px);
  background: var(--color-dark);
  color: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
.section--dark .showcase__headline { color: var(--color-line); }
.section--dark .story-bar { background: rgba(255, 255, 255, 0.24); }
.section--dark .ctrl { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.section--dark .ctrl:hover { border-color: var(--color-accent); color: var(--color-accent); }
.section--dark .showcase__title a:hover { color: var(--color-accent); }

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

.site-footer { padding: clamp(24px, 2.65vw, 40px) clamp(12px, 1.92vw, 29px) 0; margin-top: clamp(24px, 3vw, 56px); }
.footer-card { border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); overflow: hidden; }
.footer-card__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(22px, 1.98vw, 30px) clamp(20px, 2.3vw, 35px) clamp(30px, 2.5vw, 38px); }
.footer-card__thanks { color: var(--color-accent); font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.5rem, 1.984vw, 2.5rem); line-height: normal; }
.footer-card__panel {
  position: relative; background: var(--color-dark); color: #fff;
  border-top: 1px solid var(--color-line); border-radius: var(--radius); margin: 0 -1px -1px;
  padding: clamp(36px, 3.37vw, 51px) clamp(20px, 2.25vw, 34px) clamp(40px, 4.2vw, 64px);
  min-height: clamp(280px, 20.8vw, 340px);
}
.footer-cols { display: grid; grid-template-columns: auto auto auto 1fr; column-gap: clamp(32px, 2.3vw, 35px); align-items: start; }
.footer-col__title { font-family: var(--font-heading); font-weight: 700; font-size: 18.647px; line-height: normal; white-space: nowrap; }
.footer-col__title::after { content: ""; display: block; height: 2.5px; border-radius: 3.34px; background: var(--color-accent); margin-top: 10px; width: 184.39px; }
.footer-col__title--plain::after { display: none; }
.footer-col__title--contact { text-transform: uppercase; font-size: 22px; letter-spacing: -0.01em; }
.footer-col--nav { margin-left: clamp(0px, 2.3vw, 35px); }
.footer-list { margin-top: 20px; font-weight: 300; font-size: 13.681px; line-height: 22.859px; }
.footer-list a { text-decoration: none; transition: color 0.2s; }
.footer-list a:hover, .footer-list a:focus-visible { color: var(--color-accent); }
.footer-list__likes { margin-left: 8px; font-size: 12px; opacity: 0.5; white-space: nowrap; }
.footer-social { display: flex; align-items: center; gap: 13px; margin-top: 16px; padding-left: 4px; }
.footer-social a { display: grid; place-items: center; min-width: 20px; min-height: 24px; text-decoration: none; transition: opacity 0.2s, transform 0.25s var(--ease-out); }
.footer-social a:hover { transform: translateY(-2px); opacity: 0.8; }
.footer-social__icon--tiktok { width: 21px; height: 24px; }
.footer-social__icon--instagram, .footer-social__icon--spotify, .footer-social__icon--linkedin, .footer-social__icon--behance { width: 24.5px; height: 24.5px; }
.footer-social__text { font-size: 13px; text-transform: uppercase; }
.footer-col--contact { justify-self: end; display: grid; justify-items: end; gap: 28px; padding-right: clamp(0px, 3.3vw, 50px); text-align: left; }
.footer-col--contact > div:last-child { justify-self: start; }
.footer-logo { justify-self: end; margin-top: 9px; }
.footer-logo img { width: 95.33px; height: 70px; object-fit: contain; }
.footer-contact__mail { display: inline-block; margin-top: 2px; font-weight: 300; font-size: 13.681px; line-height: 22.859px; text-decoration: none; }
.footer-contact__mail:hover { color: var(--color-accent); }
.footer-contact__location { font-weight: 300; font-size: 13.681px; line-height: 22.859px; margin-top: 4px; }
.footer-contact__tz { font-weight: 300; font-size: 8.68px; line-height: 22.859px; }
.footer-copy { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding: 21px clamp(20px, 2.3vw, 35px) max(env(safe-area-inset-bottom), 24px); font-size: 12px; }

/* Language switcher (menu and footer): small, quiet, current language in the accent colour. */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: 0.06em; }
.lang-switch__link { text-decoration: none; opacity: 0.55; transition: opacity 0.2s, color 0.2s; }
.lang-switch__link:hover, .lang-switch__link:focus-visible { opacity: 1; }
.lang-switch__link[aria-current] { opacity: 1; color: var(--color-accent); font-weight: 700; }
.lang-switch__sep { opacity: 0.35; }
.lang-switch--menu { margin-bottom: 18px; }
.footer-top {
  flex: none; display: grid; place-items: center; width: clamp(40px, 3vw, 52px); aspect-ratio: 1;
  color: var(--color-accent); border: 2px solid currentColor; border-radius: 50%;
  transition: transform 0.3s var(--ease-out), background-color 0.2s, color 0.2s;
}
.footer-top svg { width: 46%; height: 46%; }
.footer-top:hover, .footer-top:focus-visible { transform: translateY(-4px); background: var(--color-accent); color: #fff; }

/* ---------- Inner pages ---------- */

.preview-banner { position: sticky; top: 0; z-index: 60; background: var(--color-accent); color: #fff; text-align: center; font-size: 12px; padding: 8px 16px; }
.entry { padding-top: calc(var(--header-h) + clamp(24px, 4vw, 64px)); }
.breadcrumb { display: flex; gap: 8px; font-size: 12px; text-transform: uppercase; color: var(--color-muted); margin-bottom: clamp(28px, 4vw, 56px); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent); }
.entry__kicker { font-size: 12px; text-transform: uppercase; color: var(--color-muted); }
.entry__title {
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.4rem, 5.6vw, 7.5rem); letter-spacing: var(--tracking-display); line-height: 0.88; margin-top: 8px;
  overflow-wrap: anywhere;
}
.entry__lead { font-size: clamp(16px, 1.3vw, 20px); line-height: 1.4; max-width: 62ch; margin-top: clamp(18px, 2vw, 28px); }
.entry__meta { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 28px; font-size: 12px; text-transform: uppercase; }
.entry__meta dt { color: var(--color-muted); }
.entry__meta dd { margin-top: 2px; }
.entry__cover { margin-top: clamp(32px, 4vw, 64px); }
.entry__cover-frame { position: relative; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); }
.entry__cover-frame img, .entry__cover-frame picture { width: 100%; }
.entry__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: clamp(32px, 6vw, 96px); margin-top: clamp(40px, 5vw, 80px); }
.container--narrow.entry__body { grid-template-columns: minmax(0, 1fr); }
.entry__aside { font-size: 12px; text-transform: uppercase; line-height: 1.7; border-top: 2.5px solid var(--color-accent); padding-top: 14px; align-self: start; }
.entry__gallery { display: grid; gap: clamp(16px, 2.58vw, 39px); margin-top: clamp(40px, 5vw, 80px); }
/* Layout chosen per project: 1 or 2 columns, at a width centred on the page; each image sits
   centred in its column, horizontally and vertically. A lone last image in 2 columns is centred. */
.entry__gallery { width: calc(var(--container) * var(--gallery-scale, 1)); justify-items: center; align-items: center; }
.entry__gallery .entry__figure { width: 100%; }
.entry__gallery--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.entry__gallery--cols-2 > .entry__figure:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - clamp(16px, 2.58vw, 39px) / 2); }
@media (max-width: 640px) {
  .entry__gallery { width: var(--container); }
  .entry__gallery--cols-2 { grid-template-columns: 1fr; }
  .entry__gallery--cols-2 > .entry__figure:last-child:nth-child(odd) { width: 100%; }
}
.entry__figure { overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); }
.entry__figure img, .entry__figure picture, .entry__figure video { width: 100%; display: block; }
.entry__figure figcaption { padding: 10px 14px; font-size: 12px; color: var(--color-muted); background: #fff; }
.entry__pager { display: flex; justify-content: space-between; gap: 24px; margin-top: clamp(48px, 6vw, 96px); padding-top: 24px; border-top: 1px solid var(--color-line); }
.pager-link { display: grid; gap: 4px; text-decoration: none; font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: clamp(1.1rem, 1.6vw, 1.8rem); max-width: 45%; }
.pager-link span { font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--color-muted); }
.pager-link--next { text-align: right; margin-left: auto; }
.pager-link:hover { color: var(--color-accent); }
.entry__updated { margin-top: 32px; font-size: 12px; color: var(--color-muted); text-transform: uppercase; }

.prose { font-size: 16px; line-height: 1.6; max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3, .prose h4 { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; line-height: 1.05; letter-spacing: -0.02em; margin-top: 1.8em; }
.prose h2 { font-size: clamp(1.5rem, 1.984vw, 2.2rem); }
.prose h3 { font-size: 1.25rem; }
.prose h4 { font-size: 1rem; }
.prose ul { list-style: none; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 17.4px; height: 2.9px; border-radius: 4px; background: var(--color-accent); }
.prose ol { list-style: decimal; padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }
.prose a { color: var(--color-accent); text-underline-offset: 3px; }
.prose blockquote { margin: 1.6em 0; padding-left: 20px; border-left: 3px solid var(--color-accent); font-size: 1.25em; line-height: 1.35; }
.prose img { border-radius: var(--radius); border: 1px solid var(--color-line); }
.prose figure figcaption { font-size: 12px; color: var(--color-muted); margin-top: 8px; }
.prose pre { overflow-x: auto; padding: 16px; background: #f4f4f4; border-radius: var(--radius); font-size: 13px; }
.prose code { font-size: 0.92em; }

.empty-note { color: var(--color-muted); padding: 40px 0; }
.error-page { min-height: 70vh; display: grid; align-content: center; justify-items: start; gap: 16px; padding-top: var(--header-h); }
.error-page__code { color: var(--color-accent); font-weight: 700; }
.error-page__title { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: var(--fs-display); letter-spacing: var(--tracking-display); line-height: 0.85; }
.error-page__text { color: var(--color-muted); }

/* ---------- Motion initial states (only while JS motion is active) ---------- */

.js-motion [data-reveal],
.js-motion [data-reveal-stagger] > *,
.js-motion [data-footer-reveal] { opacity: 0; }
.js-motion [data-hero-line] { transform: translateY(105%); }
.js-motion [data-phrase].is-active [data-word] { transform: translateY(110%); }
.js-motion [data-phrase].is-active [data-phrase-sub] { opacity: 0; }
.js-motion [data-phrase].is-revealed [data-word] { transform: none; }
.js-motion [data-phrase].is-revealed [data-phrase-sub] { opacity: 1; }
.js-motion [data-title] .section-title__bar { transform: scaleX(0); }

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

@media (max-width: 1100px) {
  .works__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .articles__list { padding-left: 0; }
  .footer-cols { grid-template-columns: repeat(3, auto); row-gap: 40px; }
  .footer-col--contact { grid-column: 1 / -1; justify-self: stretch; grid-template-columns: 1fr auto; align-items: end; justify-items: start; padding-right: 0; }
  .footer-logo { order: 2; justify-self: end; }
  .footer-col--nav { margin-left: 0; }
}

@media (max-width: 760px) {
  :root { --header-h: 86px; }
  .site-header:not(.is-stuck) { padding-top: max(env(safe-area-inset-top), 24px); }
  .section-title { margin-left: 0; }
  .hero__title { font-size: min(18vw, 6.5rem); }
  .about__grid { grid-template-columns: 1fr; width: 100%; row-gap: 28px; }
  .about__side { max-width: 420px; width: 100%; justify-self: center; }
  .about--image-right .about__side { order: 0; }
  .about--image-right .about__grid { grid-template-columns: 1fr; }
  .showcase__frame { aspect-ratio: 4 / 3; }
  .showcase__bars { gap: 6px; padding: 0 4px; }
  .showcase__controls { position: static; justify-content: flex-end; margin-top: 16px; }
  .works__grid { grid-template-columns: 1fr; }
  .work-card__info { left: 20px; bottom: 20px; }
  .phrase__text { font-size: clamp(2.1rem, 11.4vw, 4.5rem); line-height: 0.86; }
  .phrase__line { white-space: normal; }
  .article-row { grid-template-columns: 1fr; row-gap: 4px; }
  .article-row__body { padding-top: 12px; }
  .articles__list { gap: 40px; }
  .menu__inner { grid-template-columns: 1fr; align-items: start; align-content: space-between; }
  .menu__list { font-size: clamp(2.2rem, 11vw, 4rem); }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-col--social { grid-column: 1 / -1; }
  .footer-col__title::after { width: min(184.39px, 100%); }
  .footer-contact__tz { font-size: 12px; }
  .entry__body { grid-template-columns: 1fr; }
  .pager-link { max-width: 48%; }
}

@media (max-width: 420px) {
  .footer-cols { grid-template-columns: 1fr; }
  .footer-col--contact { grid-template-columns: 1fr; }
  .footer-logo { order: -1; justify-self: start; }
  .menu-toggle__label { display: none; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .hero__title { font-size: min(14vh, 6rem); }
  .menu__list { font-size: clamp(1.8rem, 9vh, 3rem); }
  .menu__inner { grid-template-columns: 1fr auto; }
}

@media (min-width: 2200px) {
  .about__text, .article-row__excerpt { font-size: 16px; }
  .showcase__desc { font-size: 19px; }
}

@media print {
  .site-header, .menu, .showcase__controls, .likes, .more-btn { display: none !important; }
  .hero { min-height: auto; }
}