/* ═══════════════════════════════════════════════════════════════════════
   studio ode — sistema visual
   Derivado do pitch institucional: grotesca pesada, preto/branco granulado,
   azul #0549F2 como único acento cromático.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── fontes ─────────────────────────────────────────────────────────── */
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight:100 900; font-stretch:62% 125%; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight:100 900; font-stretch:62% 125%; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('../fonts/jetbrainsmono-latin.woff2') format('woff2');
  font-weight:400 700; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('../fonts/jetbrainsmono-latin-ext.woff2') format('woff2');
  font-weight:400 700; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── tokens ─────────────────────────────────────────────────────────── */
:root{
  --ink:#0A0A0B;
  --ink-soft:#17171A;
  --paper:#FFFFFF;
  --paper-2:#F1F0ED;
  --blue:#0549F2;
  --blue-deep:#032F9E;
  --grey:#7E7E86;

  --fg:var(--ink);
  --bg:var(--paper);
  /* valores literais de propósito: uma custom property declarada aqui resolve
     var(--fg) contra o :root, não contra a seção que a herda — derivá-las do
     --fg faria linhas e texto secundário sumirem nos blocos escuros */
  --line:rgba(10,10,11,.15);
  --muted:rgba(10,10,11,.58);

  --display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --gut:clamp(1.25rem,4.6vw,5.5rem);
  --max:1560px;
  --sec:clamp(6rem,13vw,13rem);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

/* ── reset ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--display); font-size:clamp(1rem,.94rem + .28vw,1.16rem);
  font-weight:400; line-height:1.6; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
img{height:auto}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
a{color:inherit; text-decoration:none}
ul,ol{list-style:none; padding:0}
::selection{background:var(--blue); color:#fff}

:focus-visible{outline:2px solid var(--blue); outline-offset:4px; border-radius:2px}
[data-dark] :focus-visible{outline-color:#fff}

.skip{
  position:fixed; top:-100px; left:var(--gut); z-index:200;
  background:var(--blue); color:#fff; padding:.9rem 1.4rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  transition:top .3s var(--ease);
}
.skip:focus{top:1rem}

/* ── tipografia ─────────────────────────────────────────────────────── */
.mono{
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.5;
}
.d-xl,.d-l,.d-m{
  font-weight:800; font-variation-settings:'wght' 830,'wdth' 100;
  text-transform:uppercase; line-height:.94; letter-spacing:-.028em;
  text-wrap:balance;
}
.d-xl{font-size:clamp(2.7rem,7.4vw,7.6rem)}
.d-l {font-size:clamp(2.05rem,4.7vw,4.5rem); line-height:.97}
.d-m {font-size:clamp(1.5rem,2.5vw,2.5rem); line-height:1.02}
.d-xl b,.d-l b,.d-m b{font-weight:inherit; color:var(--blue)}

.lead{font-size:clamp(1.06rem,.98rem + .5vw,1.4rem); line-height:1.5; letter-spacing:-.012em}
p+p{margin-top:1em}
.hl{color:var(--blue); font-weight:700}

.label{
  color:var(--blue); display:flex; align-items:center; gap:.7rem;
  margin-bottom:clamp(1.6rem,3vw,2.8rem);
}
.label em{font-style:normal; color:var(--muted)}
.label::before{
  content:''; width:clamp(20px,3vw,48px); height:1px;
  background:currentColor; flex:none;
}

.link{
  display:inline-block; color:inherit; position:relative;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .45s var(--ease);
}
.link:hover,.link:focus-visible{background-size:100% 1px}

/* ── layout ─────────────────────────────────────────────────────────── */
.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
.section{padding-block:var(--sec); position:relative}

/* o azul da marca não atinge contraste AA em texto pequeno sobre preto:
   dentro de blocos escuros ele sobe para um tom mais claro (5,9:1) */
[data-dark]{--fg:#FFFFFF; --bg:var(--ink); --blue:#5B87FF; --line:rgba(255,255,255,.18); --muted:rgba(255,255,255,.6); background:var(--bg); color:var(--fg)}
[data-blue]{--fg:#FFFFFF; --bg:var(--blue); --line:rgba(255,255,255,.24); --muted:rgba(255,255,255,.72); background:var(--bg); color:var(--fg)}
[data-blue] .d-xl b,[data-blue] .d-l b{color:#fff}
[data-soft]{background:var(--paper-2)}

section[id]{scroll-margin-top:clamp(4rem,9vw,7rem)}

/* ── reveals ────────────────────────────────────────────────────────── */
.r{opacity:0; transform:translate3d(0,26px,0); transition:opacity .95s var(--ease),transform .95s var(--ease); transition-delay:var(--d,0s)}
.r.in{opacity:1; transform:none}

.split .w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em; margin-bottom:-.06em}
.split .w>i{display:inline-block; font-style:inherit; transform:translate3d(0,110%,0); transition:transform 1s var(--ease); transition-delay:var(--wd,0s)}
.split.in .w>i{transform:none}

/* ── grão ───────────────────────────────────────────────────────────── */
.grain{
  position:fixed; inset:-120px; z-index:90; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 33%{transform:translate(-14px,9px)} 66%{transform:translate(11px,-12px)} 100%{transform:translate(0,0)}
}

/* ── cursor ─────────────────────────────────────────────────────────── */
.cursor{
  position:fixed; top:0; left:0; z-index:95; pointer-events:none;
  width:9px; height:9px; border-radius:50%; background:var(--blue);
  translate:-50% -50%; opacity:0;
  transition:width .35s var(--ease),height .35s var(--ease),opacity .3s,background .3s,border-color .3s;
}
.cursor.on{opacity:1}
.cursor.grow{width:60px; height:60px; background:transparent; border:1.5px solid var(--blue)}
body.on-dark .cursor{background:#fff}
body.on-dark .cursor.grow{background:transparent; border-color:#fff}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ── preloader ──────────────────────────────────────────────────────── */
.loader{
  position:fixed; inset:0; z-index:150; background:var(--ink);
  display:grid; place-items:center; transition:opacity .6s ease,visibility .6s;
}
.loader.done{opacity:0; visibility:hidden}
.loader__disc{
  width:26px; height:26px; border-radius:50%; background:var(--blue);
  animation:pulse 1.15s var(--ease-io) infinite;
}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(3.1)}}
.loader__meta{
  position:absolute; inset:auto var(--gut) clamp(1.5rem,4vw,3rem) var(--gut);
  display:flex; justify-content:space-between; color:#fff; opacity:.55;
}
html.loading,html.loading body{overflow:hidden}

/* ── nav ────────────────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; gap:2rem;
  padding:clamp(1rem,2vw,1.6rem) var(--gut);
  transition:transform .55s var(--ease),background .4s,backdrop-filter .4s;
  mix-blend-mode:normal;
}
.nav.solid{
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
}
.nav.hide{transform:translateY(-102%)}
.nav__brand{position:relative; display:block; line-height:0}
.nav__brand img{width:clamp(96px,10vw,138px); transition:opacity .3s}
.nav__brand:hover img{opacity:.62}
/* segunda marca, só o lettering: entra quando o menu azul abre */
.nav__brand img+img{position:absolute; top:0; left:0; opacity:0}
body.menu-open .nav__brand img{opacity:0}
body.menu-open .nav__brand img+img{opacity:1}
body.menu-open .nav{background:none; backdrop-filter:none; border-bottom:0}
.nav__links{display:flex; gap:clamp(1rem,2.1vw,2.2rem); margin-left:auto}
.nav__links a{font-size:.86rem; font-weight:600; letter-spacing:-.01em; position:relative}
.nav__links a span{display:block; position:relative}
.nav__links a span::after{
  content:''; position:absolute; left:0; bottom:-4px; height:1.5px; width:100%;
  background:var(--blue); transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .45s var(--ease);
}
.nav__links a:hover span::after,.nav__links a.active span::after{transform:scaleX(1); transform-origin:0 50%}
.nav__cta{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  border:1.4px solid var(--ink); border-radius:100px; padding:.62rem 1.25rem;
  overflow:hidden; position:relative; isolation:isolate;
}
.nav__cta::before{
  content:''; position:absolute; inset:0; background:var(--blue); z-index:-1;
  transform:translateY(101%); transition:transform .48s var(--ease);
}
.nav__cta:hover{color:#fff; border-color:var(--blue)}
.nav__cta:hover::before{transform:none}

.burger{display:none; width:34px; height:22px; position:relative; margin-left:auto; z-index:2}
.burger span{position:absolute; left:0; width:100%; height:2px; background:currentColor; transition:.4s var(--ease)}
.burger span:nth-child(1){top:4px}
.burger span:nth-child(2){bottom:4px; width:66%}
.burger[aria-expanded="true"] span{background:#fff}
.burger[aria-expanded="true"] span:nth-child(1){top:10px; transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){bottom:10px; width:100%; transform:rotate(-45deg)}

/* ── menu mobile ────────────────────────────────────────────────────── */
.menu{
  position:fixed; inset:0; z-index:99; background:var(--blue); color:#fff;
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem var(--gut) 2rem;
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease-io);
  visibility:hidden;
}
.menu.open{clip-path:inset(0 0 0 0); visibility:visible}
.menu__nav{display:flex; flex-direction:column; gap:.2rem}
.menu__nav a{
  display:flex; align-items:baseline; gap:1rem;
  font-size:clamp(2rem,10vw,3.6rem); font-weight:800; text-transform:uppercase;
  letter-spacing:-.03em; line-height:1.14;
  opacity:0; transform:translateY(24px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.menu.open .menu__nav a{opacity:1; transform:none; transition-delay:calc(.18s + var(--i,0)*.055s)}
.menu__nav em{font-style:normal; opacity:.55; font-size:.7rem}
.menu__foot{margin-top:auto; padding-top:3rem; display:flex; justify-content:space-between; opacity:.7}

/* ── hero ───────────────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; overflow:hidden; padding:8rem var(--gut) 3rem;
}
.hero__sky{position:absolute; inset:auto 0 0 0; height:64%; z-index:0}
.hero__sky img{
  width:100%; height:100%; object-fit:cover; object-position:50% 30%;
  filter:contrast(1.06);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 34%);
  mask-image:linear-gradient(to bottom,transparent,#000 34%);
  will-change:transform;
}
.hero__inner{
  position:relative; z-index:1; width:100%; max-width:var(--max); margin-inline:auto;
}
.hero__mark{margin:0}
.hero__mark img{
  width:100%;
  opacity:0; transform:translateY(3.5%) scale(.985);
  animation:markIn 1.5s var(--ease) forwards;
  animation-delay:.15s;
}
@keyframes markIn{to{opacity:1; transform:none}}
.hero__meta{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:clamp(.5rem,1vw,1rem); color:var(--ink);
  opacity:0; animation:fadeIn .9s var(--ease) .75s forwards;
}
@keyframes fadeIn{to{opacity:.72}}
.hero__claim{
  position:relative; z-index:1; width:100%; max-width:var(--max); margin:auto auto 0;
  font-size:clamp(1.35rem,2.5vw,2.3rem); font-weight:700; line-height:1.1;
  letter-spacing:-.03em; text-transform:uppercase; padding-top:clamp(3rem,8vw,7rem);
}
.hero__claim .line{display:block; overflow:hidden}
.hero__claim .line>span{display:block; transform:translateY(105%); animation:lineUp 1.1s var(--ease) forwards}
.hero__claim .line:nth-child(1)>span{animation-delay:.55s}
.hero__claim .line:nth-child(2)>span{animation-delay:.66s; color:var(--blue)}
@keyframes lineUp{to{transform:none}}
.hero__scroll{
  position:absolute; right:var(--gut); bottom:clamp(1.5rem,4vw,3rem); z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  color:var(--ink); opacity:0; animation:fadeIn .8s 1.1s forwards;
}
.hero__scroll svg{animation:bob 2.2s var(--ease-io) infinite}
@keyframes bob{0%,100%{transform:translateY(0); opacity:1}50%{transform:translateY(7px); opacity:.4}}

/* ── marquee ────────────────────────────────────────────────────────── */
.marquee{
  background:var(--blue); color:#fff; overflow:hidden; padding:clamp(.9rem,1.6vw,1.4rem) 0;
  display:flex; user-select:none;
}
.marquee__track{display:flex; gap:0; animation:slide 42s linear infinite; will-change:transform}
.marquee__track span{
  display:flex; align-items:center; gap:1.4rem; white-space:nowrap; padding-right:1.4rem;
  font-size:clamp(1.15rem,2.4vw,2rem); font-weight:800; text-transform:uppercase; letter-spacing:-.02em;
}
.marquee__track i{display:inline-block; width:.55em; height:.55em; border-radius:50%; background:#fff; flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── manifesto ──────────────────────────────────────────────────────── */
.manifesto__grid{
  display:grid; grid-template-columns:1fr 1.28fr; gap:clamp(2rem,5vw,6rem);
  margin-top:clamp(3.5rem,7vw,7rem); align-items:start;
}
.manifesto__fig img{width:100%; filter:grayscale(1) contrast(1.08)}
.manifesto__fig figcaption{margin-top:.9rem; color:var(--muted); font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase}
.quote{border-left:3px solid var(--blue); padding-left:clamp(1rem,2vw,1.8rem); margin-bottom:2.4rem}
.manifesto__text .lead{margin-bottom:1.4rem}
.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem}
.chips li{
  border:1px solid var(--line); border-radius:100px; padding:.42rem 1rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  transition:.4s var(--ease);
}
.chips li:hover{background:var(--blue); border-color:var(--blue); color:#fff; transform:translateY(-2px)}

/* ── barreiras ──────────────────────────────────────────────────────── */
.barriers__grid{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2.5rem,6vw,7rem); align-items:start}
.barriers__head .lead{margin-top:2rem; color:color-mix(in srgb,var(--fg) 78%,transparent)}
.barrier{display:grid; grid-template-columns:auto 1fr; gap:clamp(1rem,2.5vw,2.4rem); padding:clamp(1.4rem,2.6vw,2.1rem) 0; border-top:1px solid var(--line)}
.barrier:last-child{border-bottom:1px solid var(--line)}
.barrier>span{color:var(--blue); padding-top:.42em}
.barrier h3{font-size:clamp(1.1rem,1.5vw,1.42rem); font-weight:700; text-transform:uppercase; letter-spacing:-.015em; margin-bottom:.45rem}
.barrier p{color:color-mix(in srgb,var(--fg) 62%,transparent); font-size:.97rem; line-height:1.55; max-width:52ch}
.barrier{transition:padding-left .5s var(--ease)}
.barrier:hover{padding-left:.7rem}
.barrier:hover h3{color:var(--blue)}

/* ── articulação / venn ─────────────────────────────────────────────── */
.bubbles__grid{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2.5rem,5vw,5rem); align-items:center}
.bubbles .lead{margin-top:1.8rem; max-width:44ch}
.actors{margin-top:clamp(2rem,4vw,3.2rem); border-top:1px solid var(--line)}
.actors li{border-bottom:1px solid var(--line)}
.actors button{
  width:100%; display:flex; align-items:baseline; gap:1rem; padding:1.05rem 0; text-align:left;
  font-size:clamp(1rem,1.35vw,1.22rem); font-weight:700; text-transform:uppercase; letter-spacing:-.015em;
  transition:.4s var(--ease);
}
.actors button span{color:var(--blue); flex:none}
.actors button em{
  font-style:normal; font-weight:400; text-transform:none; letter-spacing:-.01em;
  color:var(--muted); font-size:.9rem; margin-left:auto; text-align:right; max-width:22ch;
}
.actors button:hover,.actors button.on{padding-left:.6rem; color:var(--blue)}

.venn{position:relative; color:var(--ink)}
.venn svg{width:100%; height:auto; overflow:visible}
.venn__guide{stroke:var(--line); stroke-width:1; stroke-dasharray:3 7; fill:none}
.venn__rings circle{
  fill:transparent; transition:stroke .45s var(--ease),fill .45s var(--ease),stroke-width .45s;
  stroke-dasharray:1060; stroke-dashoffset:1060;
}
.venn.in .venn__rings circle{animation:draw 1.5s var(--ease) forwards}
.venn.in .venn__rings circle:nth-child(1){animation-delay:.05s}
.venn.in .venn__rings circle:nth-child(2){animation-delay:.16s}
.venn.in .venn__rings circle:nth-child(3){animation-delay:.27s}
.venn.in .venn__rings circle:nth-child(4){animation-delay:.38s}
.venn.in .venn__rings circle:nth-child(5){animation-delay:.49s}
@keyframes draw{to{stroke-dashoffset:0}}
.venn__rings circle.on{stroke:var(--blue); stroke-width:2.4; fill:color-mix(in srgb,var(--blue) 7%,transparent)}
.venn__dots circle{fill:var(--ink); transition:fill .4s,r .4s var(--ease)}
.venn__dots circle.on{fill:var(--blue); r:16}
.venn__core{
  fill:var(--blue); transform-origin:380px 350px; transform:scale(0);
  transition:transform .9s var(--ease) .55s;
}
.venn.in .venn__core{transform:scale(1)}
/* só o lettering, sem o disco da marca: sobre o azul do núcleo o disco
   viraria uma bolha branca em cima das letras */
.venn__mark{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:15%;
  opacity:0; transition:opacity .5s ease 1.1s;
}
.venn.in .venn__mark{opacity:1}

/* ── sobre ──────────────────────────────────────────────────────────── */
.about__grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2.5rem,6vw,7rem); align-items:center}
.about__text .lead+.lead{margin-top:1.6rem}
.about__text .d-xl{margin-bottom:clamp(2rem,4vw,3.2rem)}
.about__fig{position:relative}
.about__fig img{width:100%; filter:grayscale(1) contrast(1.1)}
.about__fig::after{
  content:''; position:absolute; inset:auto auto -22px -22px; width:96px; height:96px;
  border-radius:50%; background:var(--blue); mix-blend-mode:normal;
}

/* ── método ─────────────────────────────────────────────────────────── */
.method{background:var(--blue); color:#fff; --fg:#fff; --line:rgba(255,255,255,.24); --muted:rgba(255,255,255,.72)}
.method .label{color:#fff}
.method .label em{color:rgba(255,255,255,.6)}
.method__intro{padding-block:var(--sec) clamp(2rem,4vw,4rem)}
.method__scroll{height:330vh; position:relative}
.method__sticky{position:sticky; top:0; height:100svh; display:flex; align-items:center}
/* os três passos ocupam a mesma célula do grid: a altura é a do maior,
   sem posicionamento absoluto e sem salto de layout na troca */
.method__stage{position:relative; width:100%; display:grid; grid-template-rows:auto auto}

.method__nav{grid-row:1; display:flex; gap:clamp(1rem,3vw,2.6rem); align-items:center; margin-bottom:clamp(2rem,4vw,3.5rem); opacity:.6}
.method__nav span{transition:opacity .4s,color .4s}
.method__nav span.is-on{opacity:1; color:#fff; font-weight:700}
.method__nav .method__bar{flex:1; height:1px; background:rgba(255,255,255,.3); position:relative; min-width:40px}
.method__nav .method__bar i{position:absolute; inset:0 auto 0 0; background:#fff; width:0; transition:width .1s linear}

.step{
  grid-row:2; grid-column:1;
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr); gap:clamp(2rem,5vw,6rem);
  align-items:center; opacity:0; visibility:hidden; transform:translateY(34px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),visibility .6s;
}
.step.is-on{opacity:1; visibility:visible; transform:none}
.step__letter{
  font-size:clamp(9rem,26vw,25rem); font-weight:800; line-height:.76;
  font-variation-settings:'wght' 850,'wdth' 100; letter-spacing:-.05em;
  color:#fff; user-select:none;
}
.step__idx{opacity:.72; margin-bottom:1.1rem}
.step__body h3{margin-bottom:1.2rem}
.step__body .lead{max-width:46ch; color:rgba(255,255,255,.9)}
.tags{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.8rem}
.tags li{
  border:1px solid rgba(255,255,255,.4); border-radius:100px; padding:.36rem .9rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
}
.step__q{
  margin-top:2rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.28);
  font-weight:700; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(.92rem,1.2vw,1.1rem);
}

/* ── frentes ────────────────────────────────────────────────────────── */
.fronts__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  margin-top:clamp(3rem,7vw,7rem); border-top:1px solid var(--line);
}
.front{padding:clamp(1.8rem,2.6vw,2.6rem) clamp(1.2rem,2vw,2rem) clamp(2.4rem,4vw,3.4rem); border-right:1px solid var(--line); position:relative; transition:background .5s var(--ease)}
.front:first-child{padding-left:0}
.front:last-child{border-right:0; padding-right:0}
.front::after{content:''; position:absolute; inset:auto 0 0 0; height:2px; background:var(--blue); transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--ease)}
.front:hover::after{transform:scaleX(1)}
.front>span{color:var(--blue); display:block; margin-bottom:1.4rem}
.front h3{font-size:clamp(1.1rem,1.55vw,1.5rem); font-weight:800; text-transform:uppercase; line-height:1.1; letter-spacing:-.02em; margin-bottom:1rem; min-height:2.2em}
.front p{color:var(--muted); font-size:.95rem; line-height:1.55}
.fronts__note{
  margin-top:clamp(2rem,4vw,3rem); padding-top:1.6rem; border-top:1px solid var(--line);
  text-align:center; color:var(--fg); font-weight:700;
}

/* ── pilares ────────────────────────────────────────────────────────── */
.pillars__kicker{color:var(--blue); margin:clamp(3rem,6vw,5.5rem) 0 1.8rem}
.pillars__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0}
.pillar{display:grid; grid-template-columns:auto 1fr; gap:clamp(1rem,2vw,1.8rem); padding:clamp(1.6rem,2.6vw,2.2rem) clamp(1rem,2.5vw,2.5rem) clamp(1.6rem,2.6vw,2.2rem) 0; border-top:1px solid var(--line)}
.pillar>span{color:var(--blue); padding-top:.4em}
.pillar h3{font-size:clamp(1.05rem,1.45vw,1.35rem); font-weight:800; text-transform:uppercase; letter-spacing:-.015em; margin-bottom:.4rem}
.pillar p{color:var(--muted); font-size:.95rem; max-width:44ch}

/* ── portfólio ──────────────────────────────────────────────────────── */
.work__list{margin-top:clamp(3rem,6vw,6rem); border-top:1px solid var(--line)}
.work__item{border-bottom:1px solid var(--line)}
.work__item h3{font-weight:inherit; font-size:inherit}
.work__row{
  width:100%; max-width:var(--max); margin-inline:auto;
  padding:clamp(1.3rem,2.6vw,2.2rem) var(--gut);
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center;
  gap:clamp(1rem,3vw,2.5rem); text-align:left; position:relative; isolation:isolate;
}
.work__row::before{
  content:''; position:absolute; inset:0; background:var(--blue); z-index:-1;
  transform:scaleY(0); transform-origin:50% 100%; transition:transform .55s var(--ease);
}
.work__row:hover::before,.work__row[aria-expanded="true"]::before{transform:scaleY(1)}
.work__row:hover,.work__row[aria-expanded="true"]{color:#fff}
.work__row>.mono{color:var(--blue); transition:color .4s}
.work__row:hover>.mono,.work__row[aria-expanded="true"]>.mono{color:rgba(255,255,255,.75)}
.work__name{
  font-size:clamp(1.7rem,5.4vw,4.4rem); font-weight:800; text-transform:uppercase;
  line-height:1; letter-spacing:-.035em; font-variation-settings:'wght' 830,'wdth' 100;
}
.work__tag{color:var(--muted); transition:color .4s}
.work__row:hover .work__tag,.work__row[aria-expanded="true"] .work__tag{color:rgba(255,255,255,.75)}
.work__plus{position:relative; width:20px; height:20px; flex:none}
.work__plus::before,.work__plus::after{content:''; position:absolute; inset:50% 0 auto 0; height:1.6px; background:currentColor; transition:transform .45s var(--ease)}
.work__plus::after{transform:rotate(90deg)}
.work__row[aria-expanded="true"] .work__plus::after{transform:rotate(0)}

.work__panel{overflow:hidden; transition:height .5s var(--ease)}
.work__panel>div,.work__panel>figure{max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
.work__cols{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,3.5rem); padding-block:clamp(1.8rem,3vw,2.8rem)}
.work__cols .mono{color:var(--blue); margin-bottom:.8rem}
.work__cols p:last-child{color:var(--muted); font-size:.97rem; line-height:1.55}
.work__fig{padding-bottom:clamp(2rem,4vw,3.5rem)}
.work__fig img{width:100%; aspect-ratio:16/7; object-fit:cover; filter:grayscale(1) contrast(1.05)}
.work__fig figcaption{margin-top:.9rem; color:var(--muted); font-family:var(--mono); font-size:.64rem; letter-spacing:.13em; text-transform:uppercase}

.work__peek{
  position:fixed; top:0; left:0; z-index:94; width:min(23vw,320px); aspect-ratio:4/5;
  pointer-events:none; overflow:hidden; opacity:0; translate:-50% -50%;
  transform:scale(.82); transition:opacity .4s var(--ease),transform .5s var(--ease);
}
.work__peek.on{opacity:1; transform:scale(1)}
.work__peek img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08)}
@media (hover:none),(pointer:coarse){.work__peek{display:none}}

/* ── fundadoras ─────────────────────────────────────────────────────── */
.founders{padding-top:0}
.founders__band{
  height:clamp(170px,26vw,340px); margin-bottom:var(--sec);
  background:url('../img/street.jpg') center 62%/cover no-repeat;
  filter:grayscale(1) contrast(1.1) brightness(.92);
}
.founders__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(2.5rem,6vw,6rem); margin-top:clamp(2.5rem,5vw,4.5rem)}
.founder__name{
  font-size:clamp(2.2rem,5.2vw,4.6rem); font-weight:800; text-transform:uppercase;
  line-height:.9; letter-spacing:-.04em; color:var(--blue);
  font-variation-settings:'wght' 850,'wdth' 100; margin-bottom:1.4rem;
}
.founder__role{color:var(--fg); margin-bottom:1.4rem; font-weight:700}
.founder p{color:var(--muted); max-width:46ch}
.founder .link{margin-top:1.6rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; background-size:100% 1px; opacity:.75}
.founder .link:hover{opacity:1; color:var(--blue)}

/* ── parceiros ──────────────────────────────────────────────────────── */
.partners{--line:rgba(255,255,255,.18)}
.partners__grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(3rem,6vw,6rem); align-items:center}
/* minmax(0,…): sem isso o tamanho intrínseco dos logos estoura as trilhas */
.partners__logos{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.16)}
.partners__logos li{
  background:var(--ink); display:grid; place-items:center; aspect-ratio:3/2;
  padding:clamp(1rem,2.4vw,2rem); transition:background .45s var(--ease);
}
.partners__logos li:hover{background:var(--blue)}
.partners__logos img{max-height:66px; max-width:78%; width:auto; object-fit:contain; opacity:.62; transition:opacity .45s var(--ease),transform .45s var(--ease)}
.partners__logos li:hover img{opacity:1; transform:scale(1.06)}

/* ── contato ────────────────────────────────────────────────────────── */
.contact{background:var(--ink); color:#fff; --fg:#fff; --blue:#5B87FF; --line:rgba(255,255,255,.2); --muted:rgba(255,255,255,.62); position:relative}
.contact__sky{position:relative; height:clamp(180px,30vw,400px); overflow:hidden}
.contact__sky img{
  width:100%; height:100%; object-fit:cover; object-position:50% 40%;
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);
  mask-image:linear-gradient(to bottom,#000 55%,transparent);
}
.contact__sky span{position:absolute; left:var(--gut); top:1.6rem; color:var(--ink); opacity:.55}
.contact__body{padding-block:clamp(2rem,5vw,4rem) clamp(4rem,8vw,7rem)}
.contact__grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:clamp(2rem,4vw,4rem);
  margin-top:clamp(3rem,6vw,5rem); padding-top:clamp(2rem,3vw,3rem); border-top:1px solid var(--line);
}
.contact__creed{font-size:clamp(1rem,1.3vw,1.22rem); line-height:1.5; color:rgba(255,255,255,.86)}
.card .mono{color:var(--blue); margin-bottom:1.1rem}
.card .link{display:block; margin-bottom:.5rem; color:rgba(255,255,255,.8)}
.card .link:hover{color:#fff}

.big-cta{
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  margin-top:clamp(3.5rem,7vw,6rem); padding:clamp(1.5rem,3vw,2.4rem) clamp(1.5rem,3vw,2.6rem);
  background:#0549F2; position:relative; overflow:hidden; isolation:isolate;
}
.big-cta span{font-size:clamp(1.5rem,4vw,3.4rem); font-weight:800; text-transform:uppercase; letter-spacing:-.035em; line-height:1}
.big-cta svg{flex:none; width:clamp(24px,3vw,44px); height:auto; transition:transform .5s var(--ease)}
.big-cta::before{content:''; position:absolute; inset:0; background:#fff; z-index:-1; transform:translateY(101%); transition:transform .55s var(--ease)}
.big-cta:hover{color:#0549F2}
.big-cta:hover::before{transform:none}
.big-cta:hover svg{transform:translate(6px,-6px)}

.foot{
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  padding-block:clamp(2rem,4vw,3rem); border-top:1px solid var(--line);
}
.foot__mark{width:clamp(110px,12vw,170px)}
.foot__meta{display:flex; gap:clamp(1rem,3vw,3rem); flex-wrap:wrap; color:var(--muted)}
.foot__meta a:hover{color:#fff}

/* ── responsivo ─────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .fronts__grid{grid-template-columns:repeat(2,1fr)}
  .front{border-bottom:1px solid var(--line)}
  .front:nth-child(2n){border-right:0; padding-right:0}
  .front:nth-child(2n+1){padding-left:0}
  .front h3{min-height:0}
  .contact__grid{grid-template-columns:1fr 1fr}
  .contact__creed{grid-column:1/-1}
}
@media (max-width:980px){
  .nav__links,.nav__cta{display:none}
  .burger{display:block}
  .manifesto__grid,.barriers__grid,.bubbles__grid,.about__grid,.partners__grid{grid-template-columns:1fr}
  .manifesto__fig{max-width:420px}
  .about__grid{gap:3rem}
  .about__fig{max-width:520px}
  .pillars__grid,.founders__grid{grid-template-columns:1fr}
  .work__cols{grid-template-columns:1fr; gap:1.6rem}
  .work__row{grid-template-columns:auto 1fr auto}
  .work__tag{display:none}
  .partners__logos{grid-template-columns:repeat(3,1fr)}
  .venn{max-width:560px; margin-inline:auto; order:2}
  .actors button em{display:none}

  /* método: pilha simples, sem sticky */
  .method__scroll{height:auto}
  .method__sticky{position:static; height:auto; display:block}
  .method__stage{display:block}
  .method__nav{display:none}
  .step{grid-row:auto; grid-column:auto; opacity:1; visibility:visible; transform:none; grid-template-columns:1fr; gap:1rem; padding-block:clamp(2.5rem,7vw,4rem); border-top:1px solid rgba(255,255,255,.24)}
  .step:first-of-type{border-top:0}
  .step__letter{font-size:clamp(6rem,22vw,12rem); line-height:.8}
}
@media (max-width:620px){
  .hero{padding-top:6rem}
  .fronts__grid{grid-template-columns:1fr}
  .front{padding-inline:0; border-right:0}
  .fronts__note{text-align:left}
  .hero__meta .mono:last-child{display:none}
  .hero__scroll{display:none}
  .barrier{grid-template-columns:1fr; gap:.4rem}
  .partners__logos{grid-template-columns:repeat(2,1fr)}
  .contact__grid{grid-template-columns:1fr}
  .foot{flex-direction:column; align-items:flex-start; gap:1.4rem}
  .foot__meta{flex-direction:column; gap:.4rem}
  .big-cta{flex-direction:row}
}

/* ── movimento reduzido ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .grain{animation:none}
  .r{opacity:1; transform:none}
  .split .w>i{transform:none}
  .hero__mark img,.hero__meta,.hero__scroll{opacity:1; animation:none}
  .hero__claim .line>span{transform:none}
  .venn__rings circle{stroke-dashoffset:0}
  .venn__core{transform:scale(1)}
  .venn__mark{opacity:1}
  .marquee__track{animation:none}
  .step{grid-row:auto; grid-column:auto; opacity:1; visibility:visible; transform:none; padding-block:2.5rem}
  .method__scroll{height:auto}
  .method__sticky{position:static; height:auto; display:block}
  .method__stage{display:block}
  .method__nav{display:none}
}

/* ── impressão ──────────────────────────────────────────────────────── */
@media print{
  .nav,.menu,.grain,.cursor,.loader,.hero__scroll,.work__peek,.marquee{display:none !important}
  .r,.split .w>i{opacity:1 !important; transform:none !important}
  body{background:#fff; color:#000}
}