/* ============================================================================
   O estúdio
   The channel's own signature: near-black with pink and blue neon rim light.
   Hand-written, no build step. Tailwind is gone from this page on purpose:
   the repo has no package.json, so utilities could never be regenerated.
   ========================================================================== */

:root {
  --bg:        #07090E;
  --bg-raised: #0E1219;
  --bg-card:   #12161F;
  --line:      #1E2430;

  --ink:       #FFFFFF;
  --ink-soft:  #C3CAD8;
  --ink-dim:   #9AA5BA;

  --pink:      #FF3882;
  --pink-deep: #E42E8B;
  --blue:      #00FFDB;
  /* ink on a pink ground, as on the primary button */
  --on-light:     #0A0208;

  --rim-pink:  rgba(255, 56, 130, .55);
  --rim-blue:  rgba(0, 255, 219, .45);

  --shell:     min(1120px, 100% - 3rem);
  --radius:    18px;
  /* A critically damped spring, 1 - (1 + wt)e^(-wt), sampled: it settles
     without overshoot, which is what everything on this page wants (ADR-0005
     keeps overshoot for motion that carried momentum, and nothing here does).
     Over the .62s the reveal runs, the response is about 0.4s. */
  --spring:      linear(0,.0218,.0754,.1472,.2275,.3101,.3908,.467,.5372,.6007,.6575,.7075,.7513,.7894,.8222,.8503,.8743,.8947,.912,.9266,.9389,.9492,.9579,.9651,.9711,.9761,.9803,.9837,.9866,.989,.9909,.9925,.9939,.995,.9959,.9966,.9972,.9977,.9982,.9985,1);
  --ease:        cubic-bezier(.22, .61, .36, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --nav-h:       62px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* spacing scales with the user's text size, so bigger type never breaks
     the layout: every gap below is in rem or em, never fixed px */
  background: var(--bg);
  color: var(--ink-soft);
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* Tracking is size-specific: large type reads too loose as it grows, so it
   tightens; body copy sits at zero; small uppercase labels open up. Leading
   moves inversely to size. One letter-spacing value for everything is wrong
   somewhere, so there isn't one. */
h1, h2, h3 { color: var(--ink); margin: 0; font-weight: 800; font-optical-sizing: auto; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5.5vw, 3.9rem); line-height: 1.04; letter-spacing: -.03em; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1.08; letter-spacing: -.025em; }
h3 { font-size: 1.15rem; line-height: 1.25; letter-spacing: -.011em; }
p  { margin: 0 0 1rem; letter-spacing: 0; }
p:last-child { margin-bottom: 0; }
small, .meta { font-size: .85rem; letter-spacing: .01em; }

.shell { width: var(--shell); margin-inline: auto; }

/* --- the rim light, which is the whole concept ------------------------------
   Every section sits on the dark floor and catches light from its edges. The
   glows are painted with radial gradients rather than shadows so they can be
   large and soft without costing layout.                                      */

.section {
  position: relative;
  padding-block: clamp(4.5rem, 11vw, 8.5rem);
  isolation: isolate;
  /* Each section owns its glow. Without this, ::before's overscan below
     painted straight through the hairline into the next section. */
  overflow: hidden;
}
.section::before {
  content: "";
  position: absolute;
  /* Slight overscan so the glow's own soft falloff never shows a hard edge,
     clipped to this section by the overflow above, never the next one. */
  inset: -4% 0;
  z-index: -1;
  pointer-events: none;
  opacity: .8;
  /* --shift is written by the parallax loop; the glow drifts slower than the
     page, which is what reads as depth */
  transform: translate3d(0, var(--shift, 0px), 0);
  will-change: transform;
}
.rim-pink::before {
  background: radial-gradient(60% 55% at 100% 0%, var(--rim-pink), transparent 70%);
}
.rim-blue::before {
  background: radial-gradient(55% 50% at 0% 100%, var(--rim-blue), transparent 70%);
}
.rim-both::before {
  background:
    radial-gradient(50% 45% at 100% 10%, var(--rim-pink), transparent 70%),
    radial-gradient(50% 45% at 0% 90%, var(--rim-blue), transparent 70%);
}
.section + .section { border-top: 1px solid var(--line); }

/* Small uppercase text needs positive tracking to stay legible: the opposite
   of what the display sizes want. */
.eyebrow {
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pink);
  font-weight: 700;
  margin-bottom: 1rem;
}
.lede { color: var(--ink-dim); max-width: 54ch; margin-top: 1rem; }

/* --- hero ---------------------------------------------------------------- */

.hero {
  min-height: min(100svh, 920px);
  isolation: isolate;
  display: grid;
  align-content: center;
  /* top padding clears the brand and language switch, which are pinned above */
  padding-block: clamp(9rem, 17vh, 12rem) 5rem;
  position: relative;
  /* the glow below is deliberately wider than the hero; clip it here so it
     never contributes horizontal scroll on narrow screens */
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: -20% -10% auto -10%; height: 120%;
  z-index: -2; pointer-events: none;
  background:
    radial-gradient(42% 48% at 78% 18%, rgba(255, 56, 130, .24), transparent 68%),
    radial-gradient(44% 50% at 14% 82%, rgba(0, 255, 219, .12), transparent 68%);
}
/* The constellation sits between the distant set and the foreground subject.
   Pointer input is handled on the hero so decoration never blocks a link. */
.hero-particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .55; pointer-events: none; }
/* Curved LED rope, like the studio's flexible tubing. Its painted halo
   moves as one layer; the text and portrait remain still. */
.hero-led { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-led::before {
  content: ""; position: absolute; inset: -5%;
  background: url("assets/hero/led-rope.svg") center / cover no-repeat;
  opacity: .85;
  animation: hero-led-sway 18s cubic-bezier(.37, 0, .63, 1) infinite alternate;
  -webkit-mask-image: linear-gradient(0deg, transparent, #000 22%, #000 85%, transparent);
  mask-image: linear-gradient(0deg, transparent, #000 22%, #000 85%, transparent);
}
@keyframes hero-led-sway {
  from { transform: translate3d(-.7%, -.5%, 0) rotate(-.8deg); }
  to { transform: translate3d(.7%, .5%, 0) rotate(.8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-led::before { animation: none; transform: none; }
}
@media (prefers-contrast: more) { .hero-led { display: none; } }
@media (max-width: 860px) { .hero-led::before { background-position: 68% center; } }
/* Brand and language sit on one bar pinned to the top of the hero, held to the
   same column width as everything else so nothing touches the screen edge. */
.hero-top {
  position: absolute; top: clamp(1.8rem, 4.5vh, 3rem); left: 50%;
  transform: translateX(-50%);
  width: var(--shell); z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.hero-brand { display: flex; align-items: center; }
.hero-logo { height: 30px; width: auto; }
.hero-lead {
  font-size: clamp(2.5rem, 4.8vw, 4.3rem);
  font-weight: 800; color: var(--ink);
  line-height: 1.03;          /* tight leading, because the type is large */
  letter-spacing: -.035em;    /* and tighter tracking still, for the same reason */
  max-width: 18ch; margin: 0 0 1.6rem; text-wrap: balance;
  font-optical-sizing: auto;
}
.hero-lead .accent {
  background: linear-gradient(100deg, var(--pink) 10%, var(--blue) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-body { max-width: 53ch; font-size: 1rem; text-wrap: pretty; }

.cta-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.2rem; }
#trabalho .cta-row { justify-content: center; }
.work-cta-note { text-align: center; color: var(--ink-soft); margin-top: .85rem; font-size: .95rem; }
.hero-socials { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 1.5rem; }
.hero-socials a { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink-soft); font-size: .95rem; text-decoration: none; }
.hero-socials a:hover { color: var(--pink); }
.hero-socials .reach-icon { width: 22px; height: 22px; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .95rem 1.7rem; border-radius: 999px;
  font-weight: 700; font-size: 1rem; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn-primary {
  background: var(--pink); color: var(--on-light);
  box-shadow: 0 10px 34px rgba(255, 56, 130, .35);
}
.btn-ghost { border-color: var(--line); color: var(--ink); background: rgba(255,255,255,.03); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-3px); }
  .btn-primary:hover { background: #FF5795; box-shadow: 0 14px 44px rgba(255, 56, 130, .4); }
  .btn-ghost:hover { border-color: var(--blue); }
  .btn:hover::after { transform: translate(2px, -2px); }
}
.btn::after { content: "↗"; font-size: 1.2em; line-height: 1; transition: transform .2s var(--ease-out); }
.btn-ghost[href^="#"]::after { content: "↓"; }

/* the marquee strip, kept from the old site because it reads as a studio caption */
.marquee {
  position: relative; overflow: hidden;
  border-block: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(255, 56, 130,.10), rgba(0, 255, 219,.10));
  padding-block: .85rem;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track { display: flex; width: max-content; animation: slide 26s linear infinite; }
.marquee-track span {
  padding-inline: 1.6rem; font-weight: 700; font-size: .9rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  white-space: nowrap;
}
.marquee-track span::after { content: "◆"; color: var(--pink); margin-left: 1.6rem; font-size: .6em; vertical-align: middle; }
@keyframes slide { to { transform: translateX(-50%); } }

/* --- reach ---------------------------------------------------------------- */

/* Numbers sit straight on the ground, not boxed in cards: the section's own
   rim-blue glow (.rim-blue on the <section>) already does the lighting, so a
   bordered card here would be a second, redundant surface. A hairline divider
   between items carries the separation instead. */
.reach-grid { display: flex; flex-wrap: wrap; row-gap: 2.6rem; margin-top: 2.8rem; }
.reach-card {
  position: relative; flex: 1 1 200px;
  padding: 0 2.4rem; text-decoration: none; display: block;
  transition: transform .3s var(--ease);
}
.reach-card:first-child { padding-left: 0; }
.reach-card:not(:first-child) { border-left: 1px solid var(--line); }
.reach-card:hover { transform: translateY(-2px); }
.reach-num {
  font-size: clamp(2.6rem, 5.6vw, 4rem); font-weight: 800; color: var(--ink);
  line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 44px rgba(255, 56, 130, .22);
}
.reach-label { color: var(--ink-dim); font-size: .85rem; margin-top: .55rem; text-transform: uppercase; letter-spacing: .1em; }
.reach-net {
  color: var(--pink); font-weight: 700; font-size: .92rem; margin-top: 1.1rem;
  display: inline-flex; align-items: center; gap: .4rem;
}
/* the arrow leans out toward where the link goes; transform, not gap, so the
   hover never asks for layout */
.reach-arrow { display: inline-block; transition: transform .3s var(--ease); }
.reach-card:hover .reach-arrow { transform: translate(2px, -2px); }
.reach-icon { width: 1.15em; height: 1.15em; flex: none; }

@media (max-width: 640px) {
  /* A left hairline reads fine side by side; stacked on a phone it would just
     be a stray vertical stub, so it rotates to the top of each item instead. */
  .reach-card { flex-basis: 100%; padding-left: 0; padding-right: 0; }
  .reach-card:not(:first-child) { border-left: none; border-top: 1px solid var(--line); padding-top: 2rem; }
}

/* --- brands --------------------------------------------------------------- */

.brand-row { display: flex; flex-wrap: wrap; gap: 1rem 2.6rem; align-items: center; justify-content: center; margin-top: 2.6rem; }
/* Gray and brightened so marks in every color read as one row, at an opacity
   that keeps the faintest ink (Remessa Online's blue) above 4:1 on the ground.
   A mark that is dark on transparent (Vivo's purple) can't survive any filter
   here, so it ships as its white negative instead. */
.brand { position: relative; display: block; isolation: isolate; }
.brand img { display: block; height: 34px; width: auto; max-width: 100%; }
.brand img[src$="remessa-online.png"] { height: 23.8px; }
.brand-gray { opacity: .8; filter: grayscale(1) brightness(1.9); }

/* The light passing through the row. One registered number, --glow, rises
   and falls on each logo in turn (--i is its place, --n the row's length),
   and the lit layer shows the larger of that and the pointer: hovering a
   logo lights it without stopping the wave or knocking it out of step. */
@property --glow { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --hover { syntax: "<number>"; inherits: true; initial-value: 0; }
.brand-lit {
  position: absolute; top: 0; left: 0;
  opacity: max(var(--glow), var(--hover));
}
.brand::before {
  content: ""; position: absolute; inset: -12px -18px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 56, 130, .28), transparent);
  opacity: var(--glow); transform: scale(calc(.7 + var(--glow) * .3));
}
.brand:nth-child(even)::before { background: radial-gradient(closest-side, rgba(0, 255, 219, .2), transparent); }
.brand:hover { --hover: 1; transition: --hover .3s var(--ease); }
.brand { transition: --hover .45s var(--ease); }

@keyframes brand-light {
  0%, 15%, 100% { --glow: 0; }
  5% { --glow: 1; }
}

/* Arriving: one logo after another, then the light starts its first pass
   once the last has landed. Scoped to .js, like every reveal: without the
   script the row is simply there, gray, and hover still lights it. */
.js .brand-row.reveal { opacity: 1; transform: none; }
.js .brand-row .brand { opacity: 0; transform: translateY(14px) scale(.94); }
.js .brand-row.is-in .brand {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease-out), transform .62s var(--spring), --hover .45s var(--ease);
  transition-delay: calc(var(--i) * 45ms), calc(var(--i) * 45ms), 0s;
  animation: brand-light calc(var(--n) * .22s + 2.6s) linear infinite;
  animation-delay: calc(var(--n) * 45ms + .6s + var(--i) * .22s);
}
.js .brand-row.is-in .brand:hover { transition-delay: 0s; }

/* --- work ----------------------------------------------------------------- */

/* Here the intro spans the stage it introduces, not the usual reading measure. */
.lede-wide { max-width: none; text-wrap: pretty; }

/* The Publi carousel. Without the page script it is a row of cards you
   scroll sideways. With it (.is-on) the cards stack in one place on a stage
   with perspective, and each one's distance from the front card, --o (and
   its size, --abs), sets where it stands: the front card close and square
   to you, its neighbours stepped back to either side with their outer edges
   turned away, like an open book, the one opposite hidden behind. Each card
   carries its own perspective and the stage stays flat, so z-index alone
   decides which card is in front: one shared 3D scene let the browser
   mis-sort the side cards over the front one. Transform and opacity only. */
.work-carousel { touch-action: pan-y; position: relative; margin-top: 2.4rem; outline: none; }
.work-carousel:focus-visible .work-card.is-front { outline: 2px solid var(--blue); outline-offset: 6px; }
.work-track {
  display: flex; gap: 2.6rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 2.4rem max(1.25rem, calc((100% - 1120px) / 2)) 1.6rem calc(max(1.25rem, calc((100% - 1120px) / 2)) + 2rem);
}
.work-track .work-card { flex: 0 0 min(460px, 80vw); scroll-snap-align: center; }
.work-carousel.is-on .work-track {
  display: grid; justify-items: center; align-items: start; overflow: visible;
  padding: 2.6rem 0 1rem;
}
.work-carousel.is-on .work-card {
  --o: 0; --abs: 0;
  grid-area: 1 / 1; width: min(540px, 78vw);
  z-index: calc(10 - var(--abs) * 2);
  opacity: clamp(0, calc(2 - var(--abs)), 1);
  transform:
    perspective(1600px)
    translateX(calc(var(--o) * 74%))
    translateZ(calc(var(--abs) * -320px))
    rotateY(calc(var(--o) * 32deg + var(--ry)))
    rotateX(var(--rx));
  transition: transform .55s var(--spring), opacity .35s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease);
}
.work-carousel.is-on .work-card:not(.is-front) { cursor: pointer; }
.work-carousel.is-on .work-card.is-away { pointer-events: none; }
.work-carousel.is-on .work-card:not(.is-front) .work-text,
.work-carousel.is-on .work-card:not(.is-front) .work-tag { opacity: .4; }
.work-text, .work-tag { transition: opacity .6s var(--ease), transform .5s var(--spring); }

.work-card {
  --rx: 0deg; --ry: 0deg; --px: 0; --py: 0; --av: 96px;
  background: linear-gradient(160deg, #151A25, var(--bg-card) 55%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: calc(var(--av) * .7 + .9rem) 1.7rem 1.7rem; position: relative;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 24px 50px -24px rgba(0, 0, 0, .95);
}
.work-carousel.is-on .work-card.is-front {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 40px 80px -30px rgba(0, 0, 0, .95),
              0 0 0 1px rgba(255, 56, 130, .14), 0 0 60px -20px rgba(255, 56, 130, .25);
}
.work-carousel.is-on .work-card.is-tilting { transition: transform .15s ease-out, opacity .6s var(--ease), box-shadow .4s var(--ease); }
.work-carousel.is-on .work-card.is-tilting :is(.work-avatar, .work-tag, .work-text) { transition-duration: .15s; }
/* In the carousel the hover light follows .is-tilting, which the script
   holds steady, not :hover, which flickers at a tilting card's edge. */
.work-carousel.is-on .work-card:hover { border-color: var(--line); }
.work-carousel.is-on .work-card:hover::before,
.work-carousel.is-on .work-card:hover::after { opacity: 0; }
.work-carousel.is-on .work-card:hover .work-wire::after { animation: none; }
.work-carousel.is-on .work-card.is-tilting { border-color: rgba(255, 56, 130, .4); }
.work-carousel.is-on .work-card.is-tilting::before { opacity: .9; }
.work-carousel.is-on .work-card.is-tilting::after { opacity: 1; }
.work-carousel.is-on .work-card.is-tilting .work-wire::after { animation: work-pulse 1.6s var(--ease) infinite; }

/* Controls: hidden until the script takes over. Arrows and one dot per
   example; the front example's dot lights up. Feedback on pointer-down. */
.work-controls { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.work-controls[hidden] { display: none; }
.work-arrow {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: var(--ink); background: var(--bg-raised); border: 1px solid var(--line); cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease), transform .1s ease-out;
}
.work-arrow:hover { border-color: rgba(255, 56, 130, .5); color: var(--pink); }
.work-arrow:active { transform: scale(.92); }
.work-dots { display: flex; gap: .2rem; }
.work-dot {
  width: 24px; height: 24px; display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.work-dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line);
  transition: transform .3s var(--spring), background-color .3s var(--ease);
}
.work-dot:hover::before { background: var(--ink-dim); }
.work-dot[aria-current="true"]::before { background: var(--pink); transform: scale(1.5); }
.work-arrow:focus-visible, .work-dot:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.work-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(70% 60% at 0% 100%, var(--rim-blue), transparent 70%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.work-card:hover { border-color: rgba(255, 56, 130, .4); }
.work-card:hover::before { opacity: .9; }
/* The avatar and the format tag share the card's top band, left and right;
   brand, name and description run below it on one left edge. */
/* Layers without a 3D scene: the card is flat and tilts as one piece, and
   its avatar, tag and text slide toward the pointer by different amounts
   (--px, --py, from -.5 to .5), the avatar most, as if nearer. A real
   translateZ put the avatar and the card in one 3D space, where the tilted
   corner could pass in front of the avatar and the two flickered as the
   browser re-sorted them on the way back. */
.work-text { min-width: 0; transform: translate(calc(var(--px) * 6px), calc(var(--py) * 6px)); }
.work-desc { margin-top: .55rem; font-size: .95rem; color: var(--ink-dim); text-wrap: pretty; }
.work-avatar {
  position: absolute; top: 0; left: 0; z-index: 1;
  width: var(--av); height: var(--av); border-radius: 50%; overflow: hidden;
  border: 3px solid var(--bg); background: #0B0E15;
  box-shadow: 0 0 0 4px rgba(255, 56, 130, .08), 0 10px 24px -10px rgba(0, 0, 0, .9);
  transition: transform .5s var(--spring);
  transform: translate(calc(-30% + var(--px) * 16px), calc(-30% + var(--py) * 16px));
}
.work-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-avatar.is-logo {
  width: 132px; height: 78px; border-radius: 16px; padding: 12px;
  display: grid; place-items: center; background: var(--bg-raised);
  transform: translate(calc(-15% + var(--px) * 16px), calc(-30% + var(--py) * 16px));
}
.work-avatar.is-logo img { object-fit: contain; }
.work-avatar.is-logo img[src$="x-team.svg"] { filter: brightness(0) invert(1); }
.work-avatar.is-logo img[src$="dio.png"] { mix-blend-mode: screen; }
@media (max-width: 600px) {
  .work-avatar.is-logo { width: 108px; height: 64px; padding: 10px; }
}
/* The top band, between the avatar and the tag: light from both ends (pink
   from the avatar, blue from the tag), a neon hairline along the edge, and
   a dotted wire joining the two, like the hero's constellation. On hover a
   pulse runs down the wire from the avatar to the tag. Decoration only. */
.work-band {
  position: absolute; top: 0; left: 0; right: 0; height: calc(var(--av) * .7 + .9rem);
  border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(55% 150% at 0% 0%, rgba(255, 56, 130, .2), transparent 70%),
    radial-gradient(40% 130% at 100% 0%, rgba(0, 255, 219, .11), transparent 70%);
  transition: opacity .4s var(--ease);
}
.work-band::after {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 56, 130, .7) 30%, rgba(0, 255, 219, .6) 75%, transparent);
}
.work-wire {
  position: absolute; left: calc(var(--av) * .7 + 1rem); right: 1.6rem;
  top: calc(1.15rem + .7rem); height: 1px; overflow: hidden;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 2px, transparent 2px 7px);
}
.work-wire::after {
  content: ""; position: absolute; inset: -1px 0; width: 100%;
  background: linear-gradient(90deg, transparent, var(--pink) 45%, var(--blue) 55%, transparent);
  transform: translateX(-100%); opacity: 0;
}
.work-card:hover .work-wire::after { animation: work-pulse 1.6s var(--ease) infinite; }
@keyframes work-pulse {
  0% { transform: translateX(-100%); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

@media (max-width: 480px) {
  .work-card { --av: 69px; padding: calc(var(--av) * .7 + .8rem) 1.3rem 1.3rem; }
  .work-tag { top: 1rem; right: 1rem; }
  .work-wire { top: calc(1rem + .7rem); right: 1.4rem; }
}
/* No image yet: the circle is lit like the studio, pink from one side and
   blue from the other, swapped on a diagonal (cards 1 and 4, then 2 and 3)
   so neither a row nor a column of the grid reads as two copies. */
.work-avatar.is-empty {
  background:
    radial-gradient(circle at 25% 80%, rgba(255, 56, 130, .55), transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(0, 255, 219, .3), transparent 55%),
    #0B0E15;
}
.work-card:nth-child(4n+2) .work-avatar.is-empty,
.work-card:nth-child(4n+3) .work-avatar.is-empty {
  background:
    radial-gradient(circle at 75% 80%, rgba(0, 255, 219, .4), transparent 60%),
    radial-gradient(circle at 20% 20%, rgba(255, 56, 130, .4), transparent 55%),
    #0B0E15;
}
.work-tag {
  position: absolute; top: 1.15rem; right: 1.2rem;
  transform: translate(calc(var(--px) * 10px), calc(var(--py) * 10px));
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--blue); border: 1px solid rgba(0, 255, 219,.32);
  padding: .25rem .6rem; border-radius: 999px; background: var(--bg-card); z-index: 1;
}
.work-brand { color: var(--pink); font-weight: 700; font-size: .9rem; margin-bottom: .1rem; }

/* --- talks (an agenda) ----------------------------------------------------
   Read like a schedule, not a gallery: this year with what is coming, and the
   stages worth keeping. No images, so a new event is one entry in talks.json. */

.agenda {
  display: grid; gap: 2.6rem 2.4rem; margin-top: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.agenda-title {
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim); margin: 0; padding-bottom: .9rem; border-bottom: 1px solid var(--line);
}
.agenda-list { list-style: none; margin: 0; padding: 0; }
.agenda-item {
  display: grid; grid-template-columns: 4.8rem 1fr; gap: 0 1rem;
  padding-block: 1.15rem; border-bottom: 1px solid var(--line);
}
.agenda-when { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
/* what has not happened yet, so an agenda with nothing ahead still reads fine */
.agenda-soon {
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pink); border: 1px solid rgba(255, 56, 130, .4); border-radius: 999px;
  padding: .15rem .5rem; white-space: nowrap;
}
.agenda-date {
  font-weight: 800; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue); font-variant-numeric: tabular-nums; line-height: 1.3; padding-top: .15rem;
}
.agenda-event { margin: 0; font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.agenda-event a { color: inherit; text-decoration: none; }
.agenda-event a:hover { color: var(--pink); }
.agenda-about { color: var(--ink-soft); font-size: .9rem; margin: .2rem 0 0; text-wrap: pretty; }
.agenda-where { color: var(--ink-dim); font-size: .85rem; margin: .2rem 0 0; }
.agenda-talk { color: var(--ink-soft); font-size: .92rem; margin: .45rem 0 0; text-wrap: pretty; }

/* --- awards --------------------------------------------------------------- */

.awards { margin-top: 3rem; display: grid; gap: 0; }
.award {
  display: grid; grid-template-columns: 112px 1fr; gap: 1.6rem; align-items: start;
  padding-block: 1.5rem; border-top: 1px solid var(--line); position: relative;
}
.award:last-child { border-bottom: 1px solid var(--line); }
.award-year { font-weight: 800; color: var(--blue); font-size: 1rem; letter-spacing: .04em; padding-top: .1rem; }
.award p { color: var(--ink-dim); font-size: .95rem; margin: .35rem 0 0; max-width: 68ch; }
.award.is-lead {
  border: 1px solid rgba(255, 56, 130, .3); border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.8rem); margin-bottom: 1.2rem;
  background: radial-gradient(ellipse at 100% 0, rgba(255, 56, 130, .12), transparent 65%), var(--bg-raised);
}
.award.is-lead .award-year { color: var(--pink); }
.award.is-lead h3 { font-size: 1.35rem; }
.award blockquote {
  margin: 1rem 0 0; padding-left: 1.1rem; border-left: 2px solid var(--pink); max-width: 62ch;
}
.award blockquote p { color: var(--ink); font-size: 1.05rem; font-style: italic; margin: 0; max-width: none; }
.award blockquote p::before { content: "\201C"; }
.award blockquote p::after { content: "\201D"; }
.award-source {
  display: inline-block; margin-top: .8rem; color: var(--blue); font-size: .88rem; font-weight: 700;
  text-decoration: none;
}
.award-source:hover { text-decoration: underline; }
.award-source:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }

.engineering {
  margin-top: 3.4rem; padding: 2.2rem; border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(140deg, rgba(0, 255, 219,.07), transparent 60%), var(--bg-card);
}
.engineering h3 { font-size: 1.35rem; margin-bottom: .8rem; }
.engineering p { text-wrap: pretty; }

/* --- about ---------------------------------------------------------------- */

.about {
  display: grid; gap: clamp(2.4rem, 6vw, 5rem); align-items: start; margin-top: 2.8rem;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
}

/* the portrait: her photo in a thin ring of the studio's two lights, the
   only ornament in the section */
.portrait { margin: 0; position: relative; }
.portrait::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 120%; aspect-ratio: 1;
  transform: translate(-50%, -10%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 56, 130,.22), rgba(0, 255, 219,.08) 60%, transparent);
}
.portrait-ring {
  position: relative; aspect-ratio: 1; border-radius: 50%; padding: 3px;
  background: linear-gradient(140deg, var(--pink), transparent 40%, transparent 60%, var(--blue));
}
.portrait-ring img { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--bg); }
.about-body p { max-width: 62ch; color: var(--ink-soft); font-size: 1.06rem; }
.about-body p + p { margin-top: 1.1rem; }
.about-note {
  margin-top: 2rem; padding-left: 1.2rem; border-left: 2px solid var(--pink); max-width: 62ch;
  color: var(--ink-dim); font-style: italic;
}

/* --- community ------------------------------------------------------------ */

.community-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 2.8rem; }
.community-card {
  background: linear-gradient(150deg, rgba(255,255,255,.035), transparent 65%), var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.8rem; display: flex; flex-direction: column; gap: .7rem;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.community-card:hover { transform: translateY(-4px); border-color: rgba(0, 255, 219,.4); }
.community-logo { width: 2rem; height: 2rem; color: var(--pink); margin-bottom: .4rem; flex: none; }
.community-card p { color: var(--ink-dim); font-size: .94rem; flex: 1; }
.community-card a { color: var(--pink); font-weight: 700; text-decoration: none; }
.community-card a:hover { text-decoration: underline; }

/* --- videos --------------------------------------------------------------- */

.video-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 2.8rem; }
.video { position: relative; text-decoration: none; display: block; transition: transform .3s var(--ease); }
.video:hover { transform: translateY(-4px); }
.video img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); aspect-ratio: 16/9; object-fit: cover; }
.video::after {
  content: "↗"; position: absolute; top: .75rem; right: .75rem;
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 50%;
  opacity: 0; transform: translateY(6px);
  transition: transform .25s var(--ease-out), opacity .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .video:hover::after { opacity: 1; transform: none; }
}
.video:focus-visible::after { opacity: 1; transform: none; }
.video h3 { font-size: 1rem; margin-top: .9rem; font-weight: 700; }
.video time { color: var(--ink-dim); font-size: .85rem; display: block; margin-top: .3rem; }

/* --- footer --------------------------------------------------------------- */

.footer { text-align: center; padding-block: clamp(4.5rem, 10vw, 7.5rem) 3rem; position: relative; }
.footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 60% at 50% 0%, rgba(255, 56, 130,.18), transparent 68%);
}
.footer-line {
  font-size: clamp(1.5rem, 3.6vw, 2.4rem); font-weight: 800; color: var(--ink);
  max-width: 20ch; margin: 0 auto 2rem; line-height: 1.1; letter-spacing: -.03em;
  text-wrap: balance;
}
.colophon { margin-top: 4rem; color: var(--ink-dim); font-size: .82rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* --- language switch ------------------------------------------------------ */

.lang { display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 700; }
.lang a { color: var(--ink-dim); text-decoration: none; padding: .3rem .6rem; border-radius: 8px; }
.lang a[aria-current="true"] { color: var(--ink); background: rgba(255,255,255,.07); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .btn:hover, .reach-card:hover, .work-card:hover, .community-card:hover, .video:hover { transform: none; }
  .work-carousel.is-on .work-card { transition: opacity .2s ease; }
  .work-card:hover .work-wire::after { animation: none; }
}

@media (max-width: 860px) {
  :root { --shell: min(1120px, 100% - 2.5rem); }
  .about { grid-template-columns: 1fr; gap: 2.4rem; }
  .portrait { max-width: 220px; }
  .award { grid-template-columns: 68px 1fr; gap: 1rem; }
}


/* ============================================================================
   The floating bar
   A translucent layer with content scrolling underneath, not an opaque strip
   that eats a band of the page. It materialises once the hero is behind you:
   blur and scale animate together so it reads as a material arriving, rather
   than a rectangle fading in.
   ========================================================================== */

.bar {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(10, 13, 19, .62);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px) scale(.99);
  transform-origin: 50% 0;
  transition:
    opacity .32s var(--ease-out), transform .42s var(--ease-out),
    backdrop-filter .32s var(--ease-out),
    visibility 0s linear .42s;
}
.bar.is-on {
  opacity: 1; visibility: visible; transform: none;
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  transition-delay: 0s;
}
/* a bright top edge, the way light catches the lip of a real material */
.bar::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22) 20%, rgba(255,255,255,.22) 80%, transparent);
}
/* a scroll edge effect instead of a hard 1px divider: content dissolves into
   the bar rather than being cut by a line */
.bar::after {
  content: ""; position: absolute; inset: 100% 0 auto; height: 26px;
  background: linear-gradient(rgba(10,13,19,.5), transparent);
  -webkit-mask-image: linear-gradient(#000, transparent);
  mask-image: linear-gradient(#000, transparent);
  pointer-events: none;
}
.bar .shell { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bar-brand { display: flex; align-items: center; flex: none; text-decoration: none; }
.bar-brand img { display: block; width: 160px; height: auto; }
.bar-right { display: flex; align-items: center; gap: .9rem; }
.bar .btn { padding: .55rem 1.1rem; font-size: .9rem; }

/* The waypoints: hidden below a width where brand + links + language + CTA
   would crowd the single row. Mobile keeps today's simple bar unchanged. */
.section-nav { display: none; }
@media (min-width: 1200px) {
  .section-nav { display: flex; gap: .85rem; }
  .section-nav a {
    font-size: .78rem; font-weight: 600; color: var(--ink-dim); text-decoration: none;
    transition: color .2s var(--ease);
  }
  .section-nav a:hover { color: var(--ink); }
  .section-nav a.is-active { color: var(--pink); }
}
/* So a jump to a section does not tuck its heading behind the fixed bar. */
.section, .hero { scroll-margin-top: calc(var(--nav-h) + 1rem); }

/* Vibrancy: over a translucent surface, flat grey goes muddy. Slightly heavier
   weight and a touch more tracking keep it readable as the backdrop changes. */
.bar .lang a { font-weight: 700; letter-spacing: .02em; color: var(--ink-soft); }
.bar .lang a[aria-current="true"] { color: var(--ink); }

/* --- press feedback ------------------------------------------------------
   Feedback belongs on pointer-down, not on click. Waiting for the release
   reads as lag, and the moment lag appears directness falls off a cliff. */
.btn, .reach-card, .community-card a, .video {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* Every link and button dips the instant it is pressed. :where() keeps this
   at zero specificity, so a control with its own press (the scales below)
   or a revealed card holding opacity 1 keeps its own. */
:where(a, button):active { opacity: .72; transition: opacity 0s; }
.btn:active { transform: scale(.972); transition: transform .1s ease-out; }
.reach-card:active, .video:active { transform: scale(.99); transition: transform .1s ease-out; }

/* --- pointer-tracked sheen ------------------------------------------------
   The card lights up where the cursor actually is, so the surface reads as
   catching light rather than switching state on hover. */
.reach-card, .work-card, .community-card {
  --mx: 50%; --my: 50%;
}
.reach-card::before, .work-card::after, .community-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(255,255,255,.07), transparent 60%);
  opacity: 0; transition: opacity .35s var(--ease-out);
  border-radius: inherit;
}
/* pointer devices only: on touch, :hover sticks after a tap and the light
   would sit in the middle of whatever was tapped */
@media (hover: hover) {
  .reach-card:hover::before, .work-card:hover::after,
  .community-card:hover::before { opacity: 1; }
}
.work-card, .community-card { position: relative; }

/* --- reveal, with a spring instead of a duration --------------------------
   Scoped to .js: if the script never runs, nothing is hidden and the page is
   simply there. Content must never depend on JavaScript to become visible. */
.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease-out), transform .62s var(--spring);
}

/* --- the three accessibility signals, honoured independently -------------- */

@media (prefers-reduced-motion: reduce) {
  /* not "no feedback": a gentler, non-vestibular equivalent */
  .bar { transition: opacity .2s ease, visibility 0s; transform: none !important; }
  .js .reveal { transform: none; }
  .js .reveal.is-in { transform: none; transition: opacity .4s ease; }
  .js .brand-row .brand { transform: none; }
  .brand::before { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .bar, .bar.is-on {
    background: rgba(10, 13, 19, .97);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root { --ink-dim: #AEB7C9; --line: #3A4454; }
  .bar, .bar.is-on { background: #06080C; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .work-card, .community-card, .engineering { border-color: #4A5568; }
  .brand-gray { opacity: 1; }
  .js .brand-row.is-in .brand { animation: none; }
  .brand::before { display: none; }
  .work-band { background: none; }
  .section::before, .hero::before, .footer::before { opacity: .25; }
}

/* Independent planes: distant studio, constellation, chair and portrait.
   Copy and navigation stay still. Masks keep the photography on the same
   near-black ground without a frame or a hard bottom edge. */
.hero-scenery {
  position: absolute; inset: -5%; z-index: -3; pointer-events: none;
  opacity: .8; will-change: transform;
}
.hero-scenery img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(7,9,14,.85) 25%, rgba(7,9,14,.25) 60%, transparent),
              linear-gradient(0deg, var(--bg), transparent 22%);
}
.hero-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero-copy { position: relative; z-index: 2; width: 60%; }
.hero-eyebrow { display: flex; align-items: center; gap: .65rem; color: var(--ink-soft); }
.hero-eyebrow::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--blue); }
.hero-lead { max-width: 22ch; font-size: clamp(2.5rem, 4.3vw, 4.1rem); }
.hero-body { max-width: 55ch; }
.hero-portrait-stage {
  position: absolute; z-index: 1; pointer-events: none;
  right: -5%; bottom: -1rem;
  width: 76%;
}
.hero-chair {
  position: absolute; z-index: 0; inset: 0;
  will-change: transform;
}
.hero-chair img { width: 100%; height: 100%; object-fit: contain; }
.hero-foreground {
  position: relative; z-index: 1; will-change: transform;
}
.hero-subject {
  display: block; width: 100%; height: auto; object-fit: contain;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: studio-enter .75s var(--ease-out) both; }
  .hero-copy > :nth-child(2) { animation-delay: 60ms; }
  .hero-copy > :nth-child(3) { animation-delay: 120ms; }
  .hero-copy > :nth-child(4) { animation-delay: 180ms; }
  .hero-subject { animation: studio-enter .9s var(--ease-out) both; }
}
@keyframes studio-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.reading-progress {
  position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, var(--pink), var(--blue)); transform: scaleX(0); transform-origin: left;
}
.section h2 { max-width: 24ch; text-wrap: balance; }
.eyebrow { display: flex; align-items: center; gap: .7rem; }
.section .eyebrow::before { content: ""; width: 1.5rem; height: 1px; background: currentColor; }
#marcas { padding-block: clamp(3rem, 6vw, 5rem); }
#marcas h2 { margin-inline: auto; font-size: clamp(1.15rem, 2.5vw, 1.8rem); color: var(--ink-soft); max-width: 32ch; }
#marcas .brand-row { gap: 2rem 2.6rem; }
.agenda-group { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(14,18,25,.6); }
.agenda-item:last-child { border-bottom: 0; padding-bottom: 0; }
.agenda-item { position: relative; }
.agenda-item::before {
  content: ""; position: absolute; inset: 0 -.6rem; border-radius: 8px;
  background: linear-gradient(90deg, rgba(0,255,219,.05), transparent); opacity: 0;
  transition: opacity .2s ease; pointer-events: none;
}
@media (hover: hover) and (pointer: fine) { .agenda-item:hover::before { opacity: 1; } }
.section-nav a { position: relative; white-space: nowrap; }
.section-nav a::after {
  content: ""; position: absolute; inset: auto 0 -.45rem; height: 2px; background: var(--pink);
  transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out);
}
.section-nav a.is-active::after { transform: scaleX(1); }
:where(a, button):focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; }
@media (max-width: 1199px) {
  :root { --nav-h: 108px; }
  .bar .shell { flex-wrap: wrap; gap: .6rem 1rem; }
  .section-nav {
    display: flex; order: 3; flex-basis: 100%; gap: 1.25rem; overflow-x: auto;
    padding-block: .25rem .6rem; scrollbar-width: none;
  }
  .section-nav::-webkit-scrollbar { display: none; }
  .section-nav a { font-size: .78rem; color: var(--ink-soft); text-decoration: none; }
  .section-nav a.is-active { color: var(--pink); }
}
@media (max-width: 860px) {
  .hero { padding-top: 8.5rem; min-height: auto; }
  .hero-layout { gap: 1.5rem; }
  .hero-copy { width: 100%; max-width: 620px; }
  .hero-portrait-stage { position: relative; right: auto; width: 136%; margin: 0 0 -5rem -36%; }
  .hero-scenery img { object-position: 68% center; }
  .hero::after { background: linear-gradient(180deg, rgba(7,9,14,.8), rgba(7,9,14,.6) 50%, transparent 80%), linear-gradient(0deg, var(--bg), transparent 20%); }
  .hero-lead { font-size: clamp(2.5rem, 7.5vw, 4rem); }
  .hero-body { max-width: 60ch; }
}
@media (max-width: 480px) {
  .hero-logo { height: 24px; }
  .hero-top { top: 1.6rem; }
  .hero { padding-block: 7.5rem 3rem; }
  .hero-lead { font-size: clamp(2.3rem, 9.5vw, 3rem); }
  .hero-portrait-stage { width: 152%; margin-left: -43%; margin-bottom: -3rem; }
  .hero-eyebrow { font-size: .65rem; }
  .bar-right { gap: .3rem; }
  .bar .btn { font-size: .75rem; padding: .5rem .7rem; }
  .bar .btn::after { display: none; }
  .bar-brand img { width: 120px; }
  .lang a { padding: .4rem; }
  .agenda { grid-template-columns: minmax(0, 1fr); }
  .agenda-group { padding: 1.1rem; }
  .award.is-lead { grid-template-columns: 1fr; gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover::after { transform: none; }
  .section-nav a::after { transition: none; }
  .hero-scenery, .hero-chair, .hero-foreground, .hero-particles { transform: none !important; will-change: auto; }
  .js .brand-row.is-in .brand { animation: none; }
  .work-carousel.is-on .work-card.is-tilting .work-wire::after { animation: none; }
}
@media (prefers-reduced-transparency: reduce) { .agenda-group { background: var(--bg-raised); } }
@media (prefers-contrast: more) {
  .hero-lead { background: none; color: var(--ink); }
  .agenda-group, .award.is-lead { border-color: var(--ink-soft); }
  .hero-scenery, .hero-particles { opacity: .12; }
}
.work-carousel.is-on .work-track { transition: transform .4s var(--spring); }
@media (prefers-reduced-motion: reduce) { .work-carousel.is-on .work-track { transition: none; } }

/* --- media kit ----------------------------------------------------------- */
.media-kit { --nav-h: 132px; }
.media-kit :is(section, footer) { scroll-margin-top: var(--nav-h); }
.mk-header {
  position: sticky; top: 0; z-index: 20; padding-top: 1rem;
  background: rgba(7, 9, 14, .94); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.mk-header-row { display: flex; align-items: center; gap: 1.5rem; }
.mk-brand { flex: none; }
.mk-brand img { width: 180px; height: auto; }
.mk-back { margin-left: auto; font-size: .8rem; text-decoration: none; }
.mk-header .btn { font-size: .8rem; padding: .5rem .9rem; }
.mk-nav { display: flex; gap: 2rem; overflow-x: auto; padding-block: 1rem; }
.mk-nav a { white-space: nowrap; text-decoration: none; font-size: .82rem; color: var(--ink-soft); }
.mk-nav a:hover, .mk-back:hover { color: var(--pink); }
.mk-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 4rem; align-items: center; padding-block: 5rem; }
.mk-hero h1 { font-size: clamp(2.8rem, 4.7vw, 4.5rem); max-width: 14ch; }
.mk-intro { margin-top: 1.8rem; max-width: 53ch; font-size: 1.06rem; }
.mk-photo { margin: 0; position: relative; }
.mk-photo img { width: 100%; height: auto; max-height: 590px; object-fit: cover; border-radius: 22px; }
.mk-credentials { list-style: none; padding: 0; margin: 2.4rem 0 0; border-top: 1px solid var(--line); }
.mk-credentials li { padding: .65rem 0; color: var(--ink-dim); font-size: .8rem; border-bottom: 1px solid var(--line); }
.mk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: 3rem 2rem; border-block: 1px solid var(--line); }
.mk-stat { padding: 2rem 1.8rem; display: flex; flex-direction: column; text-decoration: none; }
.mk-stat + .mk-stat { border-left: 1px solid var(--line); }
.mk-platform { display: flex; gap: .6rem; align-items: center; color: var(--pink); font-weight: 700; }
.mk-platform svg { width: 24px; height: 24px; flex: none; }
.mk-stat strong { font-size: clamp(2.5rem, 5vw, 4.2rem); line-height: 1.2; letter-spacing: -.045em; color: var(--ink); margin-top: 1rem; }
.mk-stat > span:last-child { font-size: .85rem; color: var(--ink-dim); }
.mk-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: .8rem; }
.mk-total strong { font-size: 1.7rem; color: var(--blue); letter-spacing: -.025em; }
.mk-total span { font-size: .9rem; }
.mk-small { font-size: .8rem; line-height: 1.65; color: var(--ink-dim); max-width: 85ch; margin-top: 1rem; }
.mk-audience-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 3.5rem; align-items: start; }
.mk-topics, .mk-brief { padding-left: 1.2rem; margin: 1.3rem 0 0; }
.mk-topics li, .mk-brief li { padding-block: .35rem; }
.mk-topics li::marker, .mk-brief li::marker { color: var(--pink); }
.mk-callout { padding: 1.8rem; border-radius: var(--radius); background: var(--bg-raised); border: 1px solid var(--line); }
.mk-evidence { margin-block: 2rem 4rem; }
.mk-callout p { margin-top: .85rem; font-size: .9rem; }
.mk-callout .btn { margin-top: .5rem; font-size: .85rem; }
.mk-channels { margin-top: 3rem; }
.mk-channel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); gap: 4rem; padding-block: 2.8rem; border-top: 1px solid var(--line); }
.mk-channel h3 { color: var(--blue); font-size: 1.6rem; }
.mk-channel > div:first-child p { margin-top: .8rem; font-size: .9rem; max-width: 32ch; }
.mk-format + .mk-format { margin-top: 1.7rem; }
.mk-format h4, .mk-cases h4 { margin: 0 0 .5rem; color: var(--ink); font-weight: 700; font-size: 1.08rem; }
.mk-format p { font-size: .95rem; max-width: 58ch; }
.mk-custom { display: flex; gap: 2rem; align-items: center; justify-content: space-between; padding-top: 2rem; border-top: 1px solid var(--line); }
.mk-custom p { max-width: 57ch; margin-top: .7rem; font-size: .9rem; }
.mk-custom .btn { flex: none; }
.mk-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.2rem 3rem; align-items: center; padding-block: 3.5rem; margin-bottom: 2rem; }
.mk-logos img { max-width: 130px; max-height: 36px; width: auto; height: auto; object-fit: contain; filter: grayscale(1) brightness(1.9); }
.mk-logos img[src$="remessa-online.png"] { max-width: 91px; max-height: 25.2px; }
.mk-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; margin-top: 2rem; }
.mk-cases article { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.mk-cases article p:last-child { font-size: .9rem; max-width: 48ch; }
.mk-steps { counter-reset: mk-step; list-style: none; padding: 0; margin: 3rem 0 0; display: grid; gap: 2rem; }
.mk-steps li { position: relative; padding-left: 4.5rem; counter-increment: mk-step; min-height: 3rem; }
.mk-steps li::before { content: '0' counter(mk-step); position: absolute; left: 0; top: -.35rem; font-size: 2rem; color: var(--pink); font-weight: 800; letter-spacing: -.05em; }
.mk-steps p { max-width: 70ch; margin-top: .6rem; font-size: .95rem; }
.mk-faq { margin-top: 2.5rem; }
.mk-faq details { border-bottom: 1px solid var(--line); padding-block: 1.3rem; }
.mk-faq summary { cursor: pointer; color: var(--ink); font-weight: 600; }
.mk-faq details p { margin-top: 1rem; max-width: 75ch; font-size: .95rem; }
.mk-contact-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
.mk-email { display: inline-block; margin-top: 1.3rem; font-size: clamp(1rem, 2vw, 1.3rem); color: var(--blue); overflow-wrap: anywhere; }
.mk-footer { display: flex; justify-content: space-between; gap: 2rem; padding-block: 2rem; font-size: .75rem; color: var(--ink-dim); }
@media (max-width: 860px) {
  .mk-hero { gap: 2rem; padding-block: 3rem; }
  .mk-hero h1 { font-size: clamp(2.4rem, 5.6vw, 3.4rem); }
  .mk-photo img { min-height: 380px; object-fit: cover; }
  .mk-audience-detail, .mk-contact-grid { gap: 2rem; }
  .mk-channel { gap: 2rem; }
  .mk-custom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .media-kit { --nav-h: 160px; }
  .mk-header-row { flex-wrap: wrap; gap: .7rem 1rem; }
  .mk-brand img { width: 140px; }
  .mk-header .lang { margin-left: auto; }
  .mk-header .mk-back { order: 4; margin-left: 0; font-size: .75rem; }
  .mk-print { display: none; }
  .mk-nav { gap: 1.5rem; padding-block: .75rem; }
  .mk-hero, .mk-audience-detail, .mk-contact-grid, .mk-channel, .mk-cases { grid-template-columns: minmax(0, 1fr); }
  .mk-photo { max-width: 380px; width: 100%; margin-inline: auto; }
  .mk-photo img { min-height: 0; max-height: 440px; object-position: center 30%; }
  .mk-stats { margin-top: 2rem; grid-template-columns: minmax(0, 1fr); }
  .mk-stat { padding: 1.5rem 0; }
  .mk-stat + .mk-stat { border-left: 0; border-top: 1px solid var(--line); }
  .mk-stat strong { margin-top: .3rem; }
  .mk-callout { padding: 1.4rem; }
  .mk-channel { gap: 1.2rem; padding-block: 2rem; }
  .mk-channel > div:first-child p { max-width: none; }
  .mk-logos { gap: 1.8rem; }
  .mk-logos img { max-width: 100px; max-height: 28px; }
  .mk-logos img[src$="remessa-online.png"] { max-width: 70px; max-height: 19.6px; }
  .mk-steps li { padding-left: 3.5rem; }
  .mk-footer { flex-direction: column; gap: .7rem; }
}
@media (prefers-reduced-transparency: reduce) { .mk-header { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-contrast: more) { .mk-header { background: var(--bg); } .mk-logos img { filter: none; } }
@media print {
  .media-kit { --ink: #10131b; --ink-soft: #303644; --ink-dim: #414957; --line: #d8dce3; --bg: #fff; --bg-raised: #f5f6f8; --pink: #b51752; --blue: #006759; background: #fff; font-size: 10pt; }
  .media-kit .shell { width: 100%; }
  .mk-header, .mk-footer a, .media-kit .cta-row, .mk-callout .btn { display: none; }
  .media-kit .section { overflow: visible; padding-block: 1.5rem; break-inside: auto; }
  .media-kit .section::before { display: none; }
  .mk-hero { grid-template-columns: 1.35fr 1fr; padding-block: 1rem; gap: 2rem; }
  .mk-hero h1 { font-size: 28pt; }
  .mk-photo img { min-height: 0; max-height: 300px; }
  .mk-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: 1.5rem; }
  .mk-stat + .mk-stat { border-top: 0; border-left: 1px solid var(--line); }
  .mk-stat { padding: 1rem; }
  .mk-stat strong { font-size: 30pt; }
  .mk-logos { padding-block: 1.5rem; }
  .mk-logos img { filter: none; }
  .mk-channel, .mk-cases article, .mk-steps li, .mk-callout { break-inside: avoid; }
  .mk-channel { padding-block: 1.2rem; grid-template-columns: 1fr 1.65fr; }
  .mk-faq details::details-content { content-visibility: visible; }
  .mk-faq details:not([open]) > p { display: block; }
  .mk-contact-grid { grid-template-columns: 1.3fr 1fr; gap: 2rem; }
  .mk-custom .btn { display: none; }
}

/* Platform counters share one responsive presentation. */
.mk-performance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 1.4rem; }
.mk-performance-stat { display: flex; flex-direction: column; gap: .6rem; padding: 1.7rem; background: var(--bg); }
.mk-performance-stat strong { color: var(--ink); font-size: clamp(1.9rem, 3.3vw, 2.8rem); letter-spacing: -.04em; line-height: 1.15; }
.mk-performance-stat span { font-size: .82rem; color: var(--ink-dim); }
.mk-popular-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.mk-popular-video { min-width: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg-raised); }
.mk-popular-video a { display: block; height: 100%; text-decoration: none; }
.mk-popular-video img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.mk-popular-video a > div { padding: 1.2rem; }
.mk-popular-video h4 { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.4; }
.mk-popular-video p { margin-top: 1rem; font-size: .85rem; }
.mk-popular-video strong { color: var(--blue); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .mk-popular-video a:hover h4 { color: var(--pink); } }
@media (max-width: 600px) {
  .mk-performance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-performance-stat { padding: 1.1rem; }
  .mk-performance-stat strong { font-size: clamp(1.4rem, 6vw, 1.9rem); }
  .mk-popular-grid { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .mk-performance-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); break-inside: avoid; }
  .mk-performance-stat { padding: 1rem; }
  .mk-popular-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-popular-video { break-inside: avoid; }
}

/* Studio reports retain their own dates and content scopes. */
.media-kit #resultados { padding-top: clamp(3rem, 6vw, 5rem); }
.mk-analytics { margin-top: 1.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line); }
.mk-scope { margin: 2rem 0 0; font-size: 1rem; color: var(--blue); }
.mk-analytics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-analytics-grid strong { font-size: clamp(1.7rem, 2.7vw, 2.3rem); }
.mk-demographic-title { margin-top: 3rem; }
.mk-demographics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 4rem; margin-top: 2rem; }
.mk-demographics h4 { margin: 0; color: var(--ink); font-size: 1.05rem; }
.mk-demographics .mk-small { margin-top: .3rem; }
.mk-share-list { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.mk-share-list li { margin-top: 1rem; font-size: .85rem; }
.mk-share-list li > div:first-child { display: flex; justify-content: space-between; gap: 1rem; }
.mk-share-list strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.mk-share-track { height: 5px; background: var(--line); border-radius: 3px; margin-top: .4rem; overflow: hidden; }
.mk-share-track span { display: block; height: 100%; background: var(--pink); border-radius: inherit; }
.mk-demographics article:nth-child(even) .mk-share-track span { background: var(--blue); }
@media (max-width: 860px) { .mk-analytics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mk-demographics { grid-template-columns: minmax(0, 1fr); gap: 2rem; } .mk-analytics-grid strong { font-size: clamp(1.3rem, 5.5vw, 1.9rem); } }
@media print { .mk-demographics article { break-inside: avoid; } .mk-analytics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 600px) { .mk-analytics-grid { grid-template-columns: minmax(0, 1fr); } }