/* Layout: one dark world. Full-bleed sections alternate "plain" (opaque black) and
   "texture" (translucent, letting the fixed marble canvas through); content sits in a
   1380px envelope under a fixed 74px header. Type: Archivo variable (width + weight axes). */
:root{
  --white:#f2f2ef;
  --black:#05060a;
  --accent-deep:#12315f;
  --accent:#3d72c9;
  --accent-soft:#7fa6e8;
  --ink:#f2f2ef;
  --ink-2:#98a1b0;
  --ink-3:#6d7688;
  --line:rgba(242,242,239,.14);
  --line-strong:rgba(242,242,239,.3);
  --veil:rgba(242,242,239,.05);
  --stage:#d9d9d5;
  --stage-ink:#05060a;

  --font:"Archivo","Helvetica Neue",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --t-label:.72rem;
  --t-body:clamp(1rem,.3vw + .93rem,1.14rem);
  --t-lead:clamp(1.18rem,.8vw + .98rem,1.6rem);
  --t-3:clamp(1.3rem,1.2vw + .82rem,1.9rem);
  --t-4:clamp(1.7rem,2.6vw,2.8rem);
  --t-5:clamp(2.1rem,4.4vw,4.4rem);
  --t-6:clamp(2.5rem,6.4vw,6.6rem);
  --t-7:clamp(2.9rem,9vw,9.5rem);
  --lh-display:.94;
  --lh-body:1.62;
  --desc:.14em;

  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(1.35rem,5vw,5rem);
  --header:74px;
  --max:1380px;
  color-scheme:dark;
}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--black);-webkit-text-size-adjust:100%;scroll-behavior:auto;overflow-x:clip}
body{
  font-family:var(--font);font-size:var(--t-body);line-height:var(--lh-body);
  color:var(--ink);background:var(--black);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;
}
body.is-loading{height:100vh;overflow:hidden}
body.is-loading main,body.is-loading .header{pointer-events:none}
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}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.wrap{position:relative;z-index:2;width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.sec{position:relative;color:var(--ink);padding-block:clamp(6rem,14vh,11rem);scroll-margin-top:calc(var(--header) - 1px)}
.sec + .sec::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line)}
.sec--plain{background:var(--black)}
.sec--texture{background:linear-gradient(rgba(5,6,10,.94) 0%,rgba(5,6,10,.62) 16%,rgba(5,6,10,.58) 84%,rgba(5,6,10,.94) 100%)}
/* z-index 0 (not -1) so the canvas paints above body's own background; every section
   comes later in the tree and is positioned, so content still lands on top of it */
#texture{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
html.no-texture #texture{display:none}
html.no-texture .sec--texture{
  background:
    linear-gradient(180deg,rgba(5,6,10,.9) 0%,rgba(5,6,10,.45) 18%,rgba(5,6,10,.45) 82%,rgba(5,6,10,.9) 100%),
    radial-gradient(120% 80% at 18% 6%,#16223c 0%,transparent 58%),
    radial-gradient(110% 70% at 88% 96%,#101a2e 0%,transparent 62%),
    var(--black);
}

/* ---------- type ---------- */
.display{
  font-weight:700;font-variation-settings:"wdth" 96,"wght" 700;
  line-height:var(--lh-display);letter-spacing:-.028em;text-wrap:balance;padding-bottom:var(--desc);
}
.display em{font-style:italic;color:var(--accent);font-variation-settings:"wdth" 92,"wght" 700}
.label{
  display:flex;align-items:center;gap:.75em;
  font-size:var(--t-label);font-weight:600;font-variation-settings:"wdth" 88,"wght" 600;
  letter-spacing:.2em;text-transform:uppercase;line-height:1.4;color:var(--ink-3);
}
.label i{font-style:normal;color:var(--accent);letter-spacing:.1em}
.lead{font-size:var(--t-lead);line-height:1.44;letter-spacing:-.012em;color:var(--ink);font-variation-settings:"wdth" 98,"wght" 400}
p{color:var(--ink-2);max-width:62ch}
.sec-title{font-size:var(--t-5);max-width:19ch;margin-block:clamp(1.5rem,3vw,2.6rem) clamp(2.5rem,6vw,4.5rem)}

.link-line{
  color:var(--ink);background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;
  transition:background-size .45s var(--ease);
}
.link-line:hover{background-size:100% 1px}

/* buttons */
.btn{
  position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:.85em;
  padding:1.05em 1.9em;border-radius:9999px;font-size:.86rem;font-weight:600;
  font-variation-settings:"wdth" 92,"wght" 600;letter-spacing:.06em;transition:color .4s var(--ease);
}
.btn > span,.btn > svg{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;border:1px solid var(--line-strong);transition:border-color .4s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;background:var(--ink);transform:translateY(101%);transition:transform .55s var(--ease)}
.btn:hover::after{transform:translateY(0)}
.btn:hover{color:var(--black)}
.btn:hover::before{border-color:transparent}
.btn--solid{color:var(--black)}
.btn--solid::after{transform:translateY(0)}
.btn--solid::before{border-color:transparent}
.btn--solid:hover{color:var(--ink)}
.btn--solid:hover::after{transform:translateY(-101%)}
.arrow{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

/* reveal */
.js .reveal{opacity:0;transform:translateY(2.2rem);will-change:transform,opacity}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform 1.05s var(--ease);transition-delay:var(--delay,0s)}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:var(--desc);margin-bottom:calc(var(--desc) * -1);padding-right:.07em;margin-right:-.07em}
.w > i{display:inline-block;font-style:inherit;transform:translateY(105%)}
.is-in .w > i{transform:none;transition:transform 1.15s var(--ease);transition-delay:calc(var(--i,0) * 42ms + var(--delay,0s))}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  .w > i{transform:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ======================= OPENING ======================= */
#intro{position:fixed;inset:0;z-index:130;display:none;background:var(--stage);opacity:1;transition:opacity .75s var(--ease),visibility .75s}
.js #intro{display:block}
#intro.is-done{opacity:0;visibility:hidden;pointer-events:none}
#stage,#trace{position:absolute;inset:0;width:100%;height:100%;display:block}
#trace{pointer-events:none}
#intro::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(115% 80% at 50% 36%,transparent 30%,rgba(5,6,10,.07) 68%,rgba(5,6,10,.2) 100%),
    linear-gradient(rgba(5,6,10,.05) 0%,transparent 22%);
}
.intro-caption{
  position:absolute;left:50%;top:var(--caption-y,63%);z-index:3;margin:0;max-width:none;
  font-size:clamp(.82rem,2.1vw,1.35rem);font-weight:600;font-variation-settings:"wdth" 92,"wght" 600;
  letter-spacing:.02em;color:var(--stage-ink);white-space:nowrap;
  opacity:0;filter:blur(14px);transform:translate(-50%,.35em) scale(1.06);
  transition:opacity 1s var(--ease),filter 1s var(--ease),transform 1s var(--ease);
}
.intro-caption.is-focus{opacity:1;filter:blur(0);transform:translate(-50%,0) scale(1)}
.enter{
  position:absolute;left:0;right:0;bottom:clamp(3.5rem,12svh,7rem);z-index:4;
  width:fit-content;max-width:calc(100% - 1.6rem);margin-inline:auto;
  display:inline-flex;align-items:center;justify-content:center;padding:1.3em 2.9em;border-radius:9999px;
  font-size:clamp(.76rem,1.5vw,.88rem);font-weight:600;font-variation-settings:"wdth" 92,"wght" 600;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--stage-ink);pointer-events:none;
}
#intro.is-ready .enter{pointer-events:auto}
.enter-plate{
  position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  border:1px solid rgba(18,49,95,calc(.35 * var(--born,0)));
  background:rgba(255,255,255,calc(.6 * var(--born,0)));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:var(--born,0);transition:transform .5s var(--ease),border-color .5s var(--ease);
}
.enter:hover .enter-plate{border-color:rgba(18,49,95,.85);transform:scale(.94)}
.enter-glow{
  position:absolute;top:50%;left:50%;z-index:-1;width:240%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%) scale(var(--pulse-s,1));opacity:calc(var(--pulse,0) * var(--born,0));
  background:radial-gradient(circle,rgba(18,49,95,.34),rgba(18,49,95,.12) 36%,transparent 68%);
}
.enter-text{position:relative;z-index:2;opacity:var(--born,0);transition:opacity .4s var(--ease)}
.intro-controls{
  position:absolute;right:var(--gutter);top:calc(var(--header) / 2 + env(safe-area-inset-top,0px));z-index:5;
  display:flex;align-items:center;gap:clamp(1.2rem,3vw,2.2rem);transform:translateY(-50%);
}
.sound-toggle,.skip{
  position:relative;padding:.7em 0;font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(5,6,10,.46);opacity:0;transition:opacity .6s var(--ease) .8s,color .3s var(--ease);
}
.sound-toggle{display:inline-flex;align-items:center;gap:.7em}
.sound-toggle:hover,.skip:hover{color:var(--accent-deep)}
.sound-bars{display:inline-flex;align-items:flex-end;gap:2px;height:10px}
.sound-bars i{display:block;width:2px;height:100%;border-radius:1px;background:currentColor;transform-origin:50% 100%;animation:bar 1s ease-in-out infinite}
.sound-bars i:nth-child(2){animation-delay:-.35s}
.sound-bars i:nth-child(3){animation-delay:-.7s}
@keyframes bar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.sound-toggle[aria-pressed="false"] .sound-bars i{animation:none;transform:scaleY(.2)}
#intro.is-running .sound-toggle,#intro.is-running .skip{opacity:1}
#intro.is-leaving .sound-toggle,#intro.is-leaving .skip{opacity:0;pointer-events:none;transition-delay:0s}
.skip::after{content:"";position:absolute;left:0;right:0;bottom:.45em;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease)}
.skip:hover::after{transform:scaleX(1);transform-origin:0 50%}
@media (max-width:560px){.sound-label{display:none}}
.wash{
  position:absolute;inset:0;z-index:10;pointer-events:none;opacity:0;transition:opacity .55s var(--ease);
  background:radial-gradient(circle at 50% var(--focus-y,84%),#4d82e8 0%,#2a56a8 16%,#12315f 38%,#0a1730 62%,#05060a 88%);
}
#intro.is-wash .wash{opacity:1}
#intro.is-wash-end .wash{background:radial-gradient(circle at 50% var(--focus-y,84%),#0a1024 0%,#05060a 55%)}
#intro.is-static #stage{display:none}
#intro.is-static .intro-caption{opacity:1;filter:none;transform:translate(-50%,0)}
.intro-poster{position:absolute;top:44%;left:50%;z-index:3;width:min(86vw,64rem);transform:translate(-50%,-50%)}
.intro-poster p{
  margin:0;max-width:none;text-align:center;color:var(--stage-ink);
  font-size:clamp(2rem,9vw,6.6rem);font-weight:800;font-variation-settings:"wdth" 96,"wght" 800;letter-spacing:-.03em;line-height:1;
}
@media (max-width:560px){.enter{letter-spacing:.09em;padding:1.15em 1.8em;font-size:.7rem}}

/* ======================= REEL ======================= */
/* fica entre o header (60) e a abertura (130): a abertura lava por cima e,
   ao sumir, entrega a tela para o vídeo; o vídeo some e entrega o site */
#reel{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  grid-template-rows:1fr auto;gap:clamp(1rem,2.5vh,2rem);
  padding:clamp(3.5rem,8vh,5.5rem) clamp(1rem,4vw,3rem) clamp(1.2rem,4vh,2.5rem);
  background:var(--black);opacity:0;
}
@supports (height:100dvh){#reel{height:100dvh}}
#reel[hidden]{display:none}
/* entra opaco de uma vez: a abertura ainda cobre a tela nesse instante, e um
   fade aqui só criaria o risco de o site aparecer por trás do vídeo */
#reel.is-open{opacity:1}
#reel.is-out{opacity:0;transition:opacity .75s var(--ease)}
.reel-glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 42%,rgba(61,114,201,.22),transparent 70%);
}
/* medido em svh e no próprio 9:16 do vídeo: assim a moldura abraça a imagem sem
   depender de uma altura percentual resolver dentro do grid */
.reel-frame{
  position:relative;z-index:1;margin:0;aspect-ratio:9 / 16;
  height:min(72svh,60rem);max-width:min(100%,34rem);
  border-radius:8px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 40px 120px rgba(0,0,0,.65);
  transform:scale(.97);transition:transform .9s var(--ease);
}
#reel.is-open .reel-frame{transform:none}
.reel-frame video{display:block;width:100%;height:100%;object-fit:cover;background:#05060a}
.reel-bar{position:absolute;left:0;right:0;bottom:0;z-index:2;height:2px;background:rgba(242,242,239,.14)}
.reel-bar-fill{display:block;height:100%;width:0;background:var(--accent);transition:width .25s linear}
.reel-controls{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  gap:clamp(1.2rem,4vw,2.4rem);flex-wrap:wrap;
}
.reel-mute,.reel-skip{
  display:inline-flex;align-items:center;gap:.7em;padding:.7em 0;
  font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);transition:color .3s var(--ease);
}
.reel-mute:hover,.reel-skip:hover,.reel-mute:focus-visible,.reel-skip:focus-visible{color:var(--ink)}
.reel-mute[aria-pressed="true"] .sound-bars i{animation:none;transform:scaleY(.2)}
.reel-skip .arrow{width:.95rem;height:.95rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.reel-skip:hover .arrow{transform:translateX(.22rem)}
/* deitado sobra pouca altura: corta a folga e deixa o vídeo usar quase tudo */
@media (max-height:520px) and (orientation:landscape){
  #reel{padding:.8rem 1rem;gap:.6rem}
  .reel-frame{height:min(82svh,60rem)}
  .reel-controls{gap:1.6rem}
}
@media (prefers-reduced-motion:reduce){
  #reel,.reel-frame{transition-duration:.01s}
  .reel-frame{transform:none}
}

/* ======================= HEADER ======================= */
.header{
  position:fixed;top:0;left:0;right:0;z-index:60;height:calc(var(--header) + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) var(--gutter) 0;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;color:var(--ink);
}
.header::before{
  content:"";position:absolute;top:0;left:0;right:0;z-index:-1;height:calc(var(--header) + 3.5rem + env(safe-area-inset-top,0px));pointer-events:none;
  background:linear-gradient(180deg,var(--black) 8%,rgba(5,6,10,.72) 45%,transparent 100%);
}
.brand{display:inline-flex;align-items:center;gap:.6rem}
/* monograma pintado por máscara: herda currentColor como o SVG que substituiu,
   então acompanha a cor do link e o hover sem precisar de outra imagem */
.brand-mark{
  flex:none;width:30px;height:28px;background:currentColor;
  -webkit-mask:url(../img/logo-hb.png) center/contain no-repeat;
  mask:url(../img/logo-hb.png) center/contain no-repeat;
  transition:transform .5s var(--ease);
}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06)}
.brand-name{font-size:.95rem;font-weight:700;font-variation-settings:"wdth" 94,"wght" 700;letter-spacing:-.01em}
.brand-name span{margin-left:.28em;font-weight:500;color:var(--ink-3)}
.nav{display:flex;gap:clamp(1rem,2.6vw,2.4rem)}
.nav a{position:relative;display:inline-flex;align-items:baseline;gap:.5em;font-size:.82rem;font-weight:500;letter-spacing:.03em;color:var(--ink-2);transition:color .4s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-.5em;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
.nav a:hover,.nav a.is-active{color:var(--ink)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.nav-n{font-size:.62rem;font-weight:600;letter-spacing:.14em;color:var(--accent)}
.header-cta{padding:.78em 1.4em;font-size:.8rem}
@media (max-width:900px){
  .nav{display:none}
  .header-cta{gap:.6em;padding:.75em 1.1em;font-size:.74rem;letter-spacing:.02em}
}
@media (max-width:400px){
  .header-cta .arrow{display:none}
  .header-cta{padding:.75em 1em;font-size:.7rem}
  .brand-name{font-size:.88rem}
}

/* ======================= HERO ======================= */
.face-slot{position:relative}
.face-slot--hero{position:absolute;top:0;right:0;width:clamp(22rem,47vw,52rem);height:100%;pointer-events:none}
.face-slot--dest{position:relative;width:100%;aspect-ratio:3/4;max-width:100%;overflow:hidden;border-radius:3px;background:var(--veil)}
.face-slot--dest::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:3;height:2px;background:linear-gradient(90deg,var(--accent),transparent 70%)}
.face{position:relative;width:100%;height:100%;overflow:hidden}
.face img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:grayscale(1) contrast(1.12)}
.face-fade{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:var(--fade,1);
  background:
    linear-gradient(90deg,#05060a 0%,rgba(5,6,10,.86) 16%,rgba(5,6,10,.2) 52%,transparent 76%),
    linear-gradient(transparent 62%,rgba(5,6,10,.45) 88%,#05060a 100%),
    linear-gradient(rgba(5,6,10,.85) 0%,transparent 22%);
}
.js .face--flying{position:fixed;top:0;left:0;z-index:1;will-change:transform,width,height;contain:layout paint}
.face-static{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:grayscale(1) contrast(1.12)}
.js .face-static{display:none}
.js.face-still .face-static{display:block}

.hero{position:relative;display:flex;align-items:center;min-height:100svh;padding-block:calc(var(--header) + 3rem) clamp(3rem,8vh,6rem)}
.hero-thesis{font-size:var(--t-6);max-width:13ch;margin-block:clamp(1.3rem,3vw,2.3rem) clamp(2.2rem,5vw,3.6rem)}
.hero-bridge{font-size:var(--t-lead);color:var(--ink-2);margin-bottom:clamp(.6rem,1.4vw,1rem)}
.hero-list{display:flex;flex-direction:column;gap:.06em}
.hero-list li{
  font-size:var(--t-5);font-weight:700;font-variation-settings:"wdth" 94,"wght" 700;
  letter-spacing:-.035em;line-height:1.06;color:var(--ink);
}
.hero-down{display:inline-flex;align-items:center;gap:1rem;margin-top:clamp(2.5rem,6vw,4rem);color:var(--ink-2);transition:color .4s var(--ease)}
.hero-down:hover{color:var(--ink)}
.hero-down-line{position:relative;display:block;width:clamp(3rem,7vw,5.5rem);height:1px;overflow:hidden;background:var(--line-strong)}
.hero-down-line::after{content:"";position:absolute;inset:0;background:var(--accent);transform:translateX(-101%);transition:transform .7s var(--ease)}
.hero-down:hover .hero-down-line::after{transform:translateX(0)}

@media (max-width:860px){
  .hero{align-items:flex-start;min-height:100svh;padding-block:0 clamp(2rem,5vh,3.2rem);overflow:hidden}
  .face-slot--hero{top:auto;bottom:0;left:2%;right:2%;width:auto;height:56svh}
  .face img{object-position:50% 14%}
  .hero-text{padding-top:calc(var(--header) + .7rem);mix-blend-mode:difference}
  .hero-text > .label,.hero-down{display:none}
  .hero-thesis{max-width:none;margin-block:.85rem 1.5rem;font-size:clamp(2.55rem,10.6vw,3.6rem)}
  .hero-bridge{margin-bottom:.7rem;font-size:1.12rem;color:rgba(242,242,239,.82)}
  .hero-list li{font-size:clamp(2.2rem,9vw,3.4rem)}
  .face-fade{
    background:
      linear-gradient(90deg,#05060a 0%,rgba(5,6,10,.55) 11%,transparent 32% 68%,rgba(5,6,10,.55) 89%,#05060a 100%),
      linear-gradient(#05060a 0%,rgba(5,6,10,.5) 13%,transparent 38%),
      linear-gradient(transparent 72%,rgba(5,6,10,.3) 92%,#05060a 100%);
  }
}

/* ======================= ABOUT ======================= */
.about-thesis{font-size:var(--t-5);max-width:17ch;margin-block:clamp(1.2rem,2.6vw,2.4rem) clamp(2rem,4.5vw,3.4rem)}
.about-body{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,5.5rem);align-items:start}
.about-photo{margin:0;min-width:0}
.about-text{display:flex;flex-direction:column;gap:1.1rem;min-width:0}
.about-text p{line-height:1.5}
.about-text .lead{max-width:34ch;line-height:1.38}
.stats{display:flex;flex-wrap:wrap;gap:clamp(1rem,2.4vw,2rem);margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.stats li{display:flex;flex-direction:column;gap:.35rem}
.stats b{font-size:var(--t-4);font-weight:700;font-variation-settings:"wdth" 92,"wght" 700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.stats .label{font-size:.66rem;letter-spacing:.12em;white-space:nowrap;color:var(--ink-3)}
@media (max-width:860px){
  .about-body{grid-template-columns:1fr;gap:1.6rem}
  .face-slot--dest{max-width:20rem}
  .sec{padding-block:clamp(4rem,9vh,7rem)}
}

/* ======================= WORK ======================= */
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.sec-head-note{margin:0;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.projects{border-top:1px solid var(--line)}
.project{border-bottom:1px solid var(--line)}
.project-top{
  position:relative;width:100%;text-align:left;display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;
  gap:clamp(1rem,2.6vw,2.2rem);padding-block:clamp(1.1rem,2.4vw,1.7rem);
}
.project-top::before{content:"";position:absolute;inset:0 calc(var(--gutter) * -.35);z-index:-1;background:var(--veil);transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s var(--ease)}
.project-top:hover::before,.project-top:focus-visible::before{transform:scaleY(1)}
.project-n{min-width:2.2em;color:var(--ink-3)}
/* thumbnail: a still frame of the project, warmed on hover so the row feels clickable */
.project-thumb{flex:none;width:clamp(4.5rem,9vw,7.5rem);aspect-ratio:4/3;overflow:hidden;border-radius:3px;background:var(--veil);border:1px solid var(--line)}
.project-thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);opacity:.72;transition:filter .6s var(--ease),opacity .6s var(--ease),transform .7s var(--ease)}
.project-top:hover .project-thumb img,.project-top:focus-visible .project-thumb img{filter:none;opacity:1;transform:scale(1.05)}
.project-name{font-size:var(--t-4);letter-spacing:-.03em;line-height:1;transition:transform .55s var(--ease),color .4s var(--ease)}
.project-top:hover .project-name,.project-top:focus-visible .project-name{transform:translateX(.5rem);color:var(--accent-soft)}
/* o ano acompanha o nome em vez de virar coluna: o grid da linha tem quatro
   pontos de quebra ajustados, e uma coluna a mais teria que ser refeita em todos */
.project-year{margin-left:.55em;font-size:var(--t-label);font-weight:600;font-variation-settings:"wght" 600;letter-spacing:.14em;color:var(--ink-3);white-space:nowrap;transition:color .4s var(--ease)}
.project-top:hover .project-year,.project-top:focus-visible .project-year{color:var(--accent-soft)}
.project-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.project-tag{padding:.4em .85em;border:1px solid var(--line);border-radius:9999px;letter-spacing:.12em;color:var(--ink-2)}
.project-go{flex:none;display:grid;place-items:center;width:2.4rem;height:2.4rem;border:1px solid var(--line);border-radius:50%;transition:border-color .45s var(--ease),background-color .45s var(--ease)}
.project-go svg{width:1.05rem;height:1.05rem;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease),stroke .45s var(--ease)}
.project-top:hover .project-go,.project-top:focus-visible .project-go{border-color:var(--accent);background:var(--accent)}
.project-top:hover .project-go svg,.project-top:focus-visible .project-go svg{transform:translateX(.18rem)}
/* every cell is placed by hand: auto-placement reshuffles the row once the
   thumbnail drops out, which put the arrow under the number */
.project-n{grid-area:1 / 1}
.project-thumb{grid-area:1 / 2}
.project-name{grid-area:1 / 3}
.project-tags{grid-area:1 / 4}
.project-go{grid-area:1 / 5}
@media (max-width:980px){
  .project-top{grid-template-columns:auto auto 1fr auto;row-gap:.9rem}
  .project-tags{grid-area:2 / 2 / 3 / 5}
  .project-go{grid-area:1 / 4}
}
/* a miniatura fica no celular: encolhe, o nome desce de corpo e as folgas
   apertam, em vez de sumir com a única pista visual do projeto */
@media (max-width:560px){
  .project-top{grid-template-columns:auto auto 1fr auto;gap:.5rem .8rem;row-gap:.75rem}
  .project-thumb{width:3.6rem}
  .project-n{min-width:0}
  .project-name{font-size:clamp(1.3rem,5.6vw,1.85rem)}
  .project-tags{grid-area:2 / 2 / 3 / 5}
  .project-go{grid-area:1 / 4;width:2rem;height:2rem}
  .project-go svg{width:.9rem;height:.9rem}
}
@media (max-width:380px){
  .project-top{gap:.4rem .6rem}
  .project-thumb{width:3rem}
  .project-tag{padding:.35em .7em;font-size:.6rem}
}

/* ======================= PROJECT MODAL ======================= */
/* below the intro (130) and the cursor (200), above the header (60) */
.project-modal{position:fixed;inset:0;z-index:110;display:grid;place-items:end center;padding:clamp(.5rem,2.5vw,2.2rem)}
/* dvh so the sheet shrinks with the phone's address bar instead of hiding under it */
@supports (height:100dvh){.project-modal{height:100dvh}}
.project-modal[hidden]{display:none}
.project-modal-scrim{position:absolute;inset:0;background:rgba(2,3,6,.74);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);opacity:0;transition:opacity .45s var(--ease)}
.project-modal.is-open .project-modal-scrim{opacity:1}
.project-modal-panel{
  position:relative;width:min(64rem,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;
  background:#07080d;border:1px solid var(--line);border-radius:5px;
  padding:0 0 clamp(2rem,4vw,3.2rem);
  opacity:0;transform:translateY(2.5rem) scale(.985);transform-origin:50% 100%;
  transition:opacity .45s var(--ease),transform .65s var(--ease);
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
}
.project-modal.is-open .project-modal-panel{opacity:1;transform:none}
.project-modal-close{
  position:sticky;top:.75rem;z-index:5;float:right;margin-right:.75rem;display:grid;place-items:center;
  width:2.5rem;height:2.5rem;border-radius:50%;background:rgba(5,6,10,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line-strong);
  transition:background-color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.project-modal-close:hover{background:var(--ink);border-color:var(--ink);transform:rotate(90deg)}
.project-modal-close svg{width:1rem;height:1rem;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;transition:stroke .35s var(--ease)}
.project-modal-close:hover svg{stroke:var(--black)}

/* --- modal content --- */
.project-modal-body{--pad:clamp(1.3rem,4vw,3.4rem)}
.project-modal-body > *{padding-inline:var(--pad)}
.cm-hero{margin:0 0 clamp(1.6rem,3vw,2.4rem);padding:0;background:#0b0d16;border-bottom:1px solid var(--line)}
.cm-hero img{display:block;width:100%;height:auto;max-height:26rem;object-fit:cover;object-position:50% 0}
.cm-hero--light{background:#4992f4}
.cm-hero--light img{max-height:22rem;object-fit:contain}
.cm-head{display:flex;flex-direction:column;gap:.9rem}
.cm-title{margin:0;font-size:var(--t-5);font-weight:700;font-variation-settings:"wdth" 92,"wght" 700;letter-spacing:-.045em;line-height:.98}
.cm-deck{margin:0;max-width:52ch;font-size:var(--t-lead);line-height:1.4;color:var(--ink-2)}
.cm-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:1.2rem;margin:clamp(1.8rem,3.4vw,2.6rem) 0 0;padding-block:1.3rem;border-block:1px solid var(--line)}
.cm-meta div{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.cm-meta dt{color:var(--ink-3)}
.cm-meta dd{margin:0;font-weight:600;font-variation-settings:"wght" 600;line-height:1.3}

/* pull quote between the header and the first section */
.cm-quote{margin:0;padding-block:clamp(2rem,4vw,3rem);border-bottom:1px solid var(--line)}
.cm-quote p{margin:0;max-width:30ch;font-size:var(--t-4);font-weight:700;font-variation-settings:"wdth" 94,"wght" 700;letter-spacing:-.03em;line-height:1.1}
.cm-quote b{color:var(--accent-soft);font-weight:inherit}
.cm-quote cite{display:block;margin-top:1rem;max-width:56ch;font-style:normal;font-size:1rem;line-height:1.5;color:var(--ink-2)}

/* numbered section */
.cm-sec{margin-block:clamp(2.4rem,5vw,4rem)}
.cm-sec p{max-width:62ch;line-height:1.55;color:var(--ink-2)}
.cm-sec p + p{margin-top:.9rem}
.cm-sec p b{color:var(--ink);font-weight:700;font-variation-settings:"wght" 700}
.cm-h{display:flex;align-items:baseline;gap:.7em;margin:0 0 1rem;font-size:var(--t-3);font-weight:700;font-variation-settings:"wdth" 94,"wght" 700;letter-spacing:-.02em;line-height:1.1}
.cm-h i{flex:none;font-style:normal;font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--accent-soft);font-variation-settings:"wght" 600}
.cm-lede{max-width:46ch !important;margin:0 0 1.1rem;font-size:var(--t-lead);line-height:1.35;color:var(--ink) !important}
.cm-h4{display:flex;flex-wrap:wrap;align-items:baseline;gap:.9em;margin:clamp(1.8rem,3.4vw,2.6rem) 0 1rem;font-size:1.18rem;font-weight:700;font-variation-settings:"wght" 700;letter-spacing:-.015em}
.cm-h4 span{font-size:var(--t-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.cm-note{max-width:62ch;margin-top:1.3rem;padding-left:1rem;border-left:2px solid var(--line-strong);font-size:.95rem;line-height:1.5;color:var(--ink-3) !important}

/* card grid: hairlines drawn per card so an empty track stays black */
.cm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1px;margin-top:1.6rem}
.cm-cards > li{display:flex;flex-direction:column;gap:.55rem;padding:1.3rem;background:#07080d;box-shadow:0 0 0 1px var(--line)}
.cm-cards b{font-size:1.02rem;font-weight:700;font-variation-settings:"wght" 700;letter-spacing:-.01em;line-height:1.25}
.cm-cards span{font-size:.95rem;line-height:1.5;color:var(--ink-2)}
.cm-cards--insights > li{background:#0a0d18}
.cm-cards--insights b{color:var(--accent-soft)}

/* data sources / tags */
.cm-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.cm-chips > li{padding:.45em .9em;border:1px solid var(--line);border-radius:9999px;font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}

/* counted list: the number is drawn, not a marker, so it can be styled */
.cm-list{counter-reset:n;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:.1rem 2rem;margin-top:1.6rem}
.cm-list > li{counter-increment:n;display:grid;grid-template-columns:2.4em 1fr;align-items:baseline;gap:.4em;padding-block:.7rem;border-bottom:1px solid var(--line);line-height:1.45;color:var(--ink-2)}
.cm-list > li::before{content:counter(n,decimal-leading-zero);font-size:var(--t-label);font-weight:600;letter-spacing:.12em;color:var(--ink-3)}
.cm-list--lead{grid-template-columns:1fr}
.cm-list--lead > li{gap:.9em;font-size:var(--t-lead);line-height:1.4;color:var(--ink);padding-block:1.1rem}

/* checklist */
.cm-ticks{display:grid;gap:.1rem;margin-top:1.4rem}
.cm-ticks > li{position:relative;padding:.7rem 0 .7rem 1.8em;border-bottom:1px solid var(--line);line-height:1.45;color:var(--ink-2)}
.cm-ticks > li::before{content:"";position:absolute;left:.25em;top:1.15em;width:.55em;height:.55em;border-radius:50%;background:var(--accent)}
.cm-ticks--pain > li::before{background:var(--ink-3)}
.cm-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:clamp(1.4rem,3vw,2.6rem);margin-top:1.8rem}

/* process steps */
.cm-steps{counter-reset:s;display:grid;gap:1px;margin-top:1.6rem}
.cm-steps > li{counter-increment:s;display:grid;grid-template-columns:3em 1fr;gap:.3rem 1rem;padding:1.2rem 1.3rem;background:#07080d;box-shadow:0 0 0 1px var(--line)}
.cm-steps > li > *{grid-column:2}
.cm-steps > li::before{content:counter(s,decimal-leading-zero);grid-column:1;grid-row:1;font-size:var(--t-label);font-weight:600;letter-spacing:.12em;color:var(--accent-soft);padding-top:.25em}
.cm-steps b{font-size:1.02rem;font-weight:700;font-variation-settings:"wght" 700;letter-spacing:-.01em}
.cm-steps span{font-size:.95rem;line-height:1.5;color:var(--ink-2)}
.cm-steps em{font-style:normal;font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* left-to-right chain of stages */
.cm-chain{counter-reset:c;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:1px;margin-top:1.6rem}
.cm-chain > li{counter-increment:c;display:flex;flex-direction:column;gap:.4rem;padding:1.2rem;background:#07080d;box-shadow:0 0 0 1px var(--line)}
.cm-chain > li::before{content:counter(c,decimal-leading-zero);font-size:var(--t-label);font-weight:600;letter-spacing:.12em;color:var(--ink-3)}
.cm-chain b{font-size:1.02rem;font-weight:700;font-variation-settings:"wght" 700}
.cm-chain span{font-size:.92rem;line-height:1.45;color:var(--ink-2)}

/* a design decision: eyebrow, headline, screen, then problem/context/decision/impact */
.cm-dec{margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(1.6rem,3vw,2.2rem);border-top:1px solid var(--line)}
.cm-dec > .label{margin:0 0 .8rem;color:var(--accent-soft)}
.cm-dec h4{margin:0 0 1.4rem;max-width:34ch;font-size:var(--t-3);font-weight:700;font-variation-settings:"wdth" 94,"wght" 700;letter-spacing:-.025em;line-height:1.15}
.cm-dec dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1px;margin:1.6rem 0 0}
.cm-dec dl div{display:flex;flex-direction:column;gap:.5rem;padding:1.2rem;background:#07080d;box-shadow:0 0 0 1px var(--line)}
.cm-dec dt{color:var(--ink-3)}
.cm-dec dd{margin:0;font-size:.95rem;line-height:1.5;color:var(--ink-2)}

/* a single screen, full width of the content column */
.cm-fig{margin:0}
.cm-fig img{display:block;width:100%;height:auto;border-radius:4px;border:1px solid var(--line);background:#0b0d16}
.cm-fig--phone img{width:auto;max-width:100%;height:clamp(18rem,46vh,26rem);margin-inline:auto;object-fit:contain}
.cm-fig figcaption{margin-top:.7rem;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* gallery: telas empilhadas, lidas no scroll normal da página.
   Uma tela de desktop ocupa a coluna inteira; telas de celular entram numa
   grade de várias colunas, senão cada uma viraria uma torre de 900px. */
.cm-gallery{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3vw,2.4rem);margin-top:1.6rem}
/* teto de 16rem: as capturas de celular têm ~274px de largura real, então acima
   disso elas só borram */
.cm-gallery--phones{grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),16rem));justify-content:start;gap:clamp(1.1rem,2.2vw,1.8rem)}
.cm-shot{margin:0;display:flex;flex-direction:column}
.cm-shot img{display:block;width:100%;height:auto;border-radius:4px;border:1px solid var(--line);background:#0b0d16}
.cm-shot figcaption{margin-top:.7rem;max-width:40ch;font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;line-height:1.5;color:var(--ink-3)}

/* --- BMW project blocks --- */
.cm-hero--bmw{background:#0b0d16}
.cm-hero--bmw img{max-height:24rem;object-position:50% 50%}

/* benchmark: one market per card */
.cm-bench{display:flex;flex-direction:column;gap:1.2rem;padding:1.4rem;background:#07080d;box-shadow:0 0 0 1px var(--line)}
.cm-bench:first-of-type{margin-top:1.6rem}
.cm-bench + .cm-bench{margin-top:1px}
.cm-bench header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.8rem 1.4rem}
/* a bandeira nunca herda o uppercase nem o tracking do título */
.cm-flag{display:inline-block;margin-right:.5em;font-size:1.05em;line-height:1;letter-spacing:normal;text-transform:none;vertical-align:-.04em}
.cm-bench h4{display:flex;align-items:center;margin:0;font-size:1.28rem;font-weight:700;font-variation-settings:"wdth" 94,"wght" 700;letter-spacing:-.02em;text-transform:uppercase}
.cm-meter{display:flex;align-items:center;gap:.7em;margin:0 !important;max-width:none !important}
.cm-meter .label{color:var(--ink-3)}
.cm-meter-bars{display:flex;gap:3px}
.cm-meter-bars i{width:1.4rem;height:3px;border-radius:999px;background:var(--accent)}
.cm-meter-bars i.is-off{background:var(--line-strong)}
.cm-meter b{font-size:.88rem;font-weight:600;font-variation-settings:"wght" 600;color:var(--accent-soft)}
.cm-bench dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.cm-bench dl div{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.cm-bench dt{color:var(--ink-3)}
.cm-bench dd{margin:0;font-size:.94rem;line-height:1.45;color:var(--ink-2)}

/* ordered chips: the index rides inside the chip, so wrapping never orphans an arrow */
.cm-chips--flow{counter-reset:k;margin-top:0}
.cm-chips--flow > li{counter-increment:k;display:inline-flex;align-items:center;gap:.65em}
.cm-chips--flow > li::before{content:counter(k,decimal-leading-zero);color:var(--accent-soft)}
.cm-chips--sm{margin-top:.2rem}
.cm-chips--sm > li{padding:.35em .75em;font-size:.68rem}

/* work flow: phase + group on the left, the screens it became on the right */
.cm-flow{display:grid;gap:1px;margin-top:1.6rem}
.cm-flow > li{display:grid;grid-template-columns:minmax(0,11rem) 1fr;align-items:start;gap:1rem 1.6rem;padding:1.2rem 1.3rem;background:#07080d;box-shadow:0 0 0 1px var(--line)}
.cm-flow > li > div{display:flex;flex-direction:column;gap:.45rem}
.cm-flow .label{color:var(--accent-soft)}
.cm-flow b{font-size:1.02rem;font-weight:700;font-variation-settings:"wght" 700;line-height:1.2}
.cm-flow .cm-chips{margin-top:0}

/* pull requests */
.cm-prs{display:grid;margin-top:1.6rem;border-top:1px solid var(--line)}
.cm-prs > li{display:grid;grid-template-columns:4.6rem minmax(0,1fr) minmax(0,15rem) auto;align-items:baseline;gap:.6rem 1.6rem;padding:1.15rem .2rem;border-bottom:1px solid var(--line)}
.cm-pr-id{color:var(--accent-soft)}
.cm-pr-main{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.cm-pr-main b{font-size:1.02rem;font-weight:700;font-variation-settings:"wght" 700}
.cm-pr-main span,.cm-pr-aceite{font-size:.94rem;line-height:1.45;color:var(--ink-2)}
.cm-pr-status{justify-self:start;padding:.4em .9em;border:1px solid rgba(127,166,232,.38);border-radius:9999px;background:rgba(61,114,201,.18);font-size:var(--t-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--accent-soft)}
.cm-pr-status.is-review{border-color:var(--line-strong);background:var(--veil);color:var(--ink-3)}

/* tool marks */
.cm-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr));gap:1rem;margin-top:1.6rem}
.cm-tools > li{display:flex;flex-direction:column;align-items:center;gap:.8rem}
.cm-tool-box{display:flex;align-items:center;justify-content:center;width:100%;padding:1.5rem;border:1px solid var(--line);border-radius:4px}
/* the mark is sized in rem and the box grows around it: a percentage height on
   the image did not resolve against the box, so the logo spilled over */
.cm-tool-box img{width:auto;height:3.2rem;max-width:100%;object-fit:contain}
.cm-tools b{font-size:.92rem;font-weight:600;font-variation-settings:"wght" 600;color:var(--ink-2)}

.cm-fig figcaption i,.cm-shot figcaption i{font-style:normal;margin-right:.5em;color:var(--accent-soft)}
@media (max-width:760px){
  .cm-flow > li{grid-template-columns:1fr}
  .cm-prs > li{grid-template-columns:1fr;gap:.5rem}
}

/* --- blocos do projeto Dati --- */
/* o card de resultado ganha o tom do acento para sair da leitura corrida */
.cm-cards > li.is-result{background:rgba(61,114,201,.1);box-shadow:0 0 0 1px rgba(127,166,232,.3)}
.cm-cards > li.is-result b{font-size:var(--t-4);font-weight:700;font-variation-settings:"wdth" 92,"wght" 700;letter-spacing:-.035em;line-height:1}

.cm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:1px;margin-top:1px}
.cm-stats li{display:flex;flex-direction:column;gap:.5rem;padding:1.5rem 1.3rem;background:#07080d;box-shadow:0 0 0 1px var(--line)}
.cm-stats b{font-size:var(--t-4);font-weight:700;font-variation-settings:"wdth" 92,"wght" 700;letter-spacing:-.04em;line-height:1}
.cm-stats span{font-size:.94rem;line-height:1.45;color:var(--ink-2)}

.cm-award{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.2rem;margin-top:1.6rem !important;max-width:none !important;padding:1.2rem 1.3rem;background:rgba(61,114,201,.08);box-shadow:0 0 0 1px rgba(127,166,232,.26)}
.cm-award .label{color:var(--accent-soft)}
.cm-award b{font-size:1.15rem;font-weight:700;font-variation-settings:"wght" 700;color:var(--ink)}
.cm-award > span:last-child{font-size:.95rem;color:var(--ink-2)}

/* time: iniciais em chip, com quem escreve o project destacado */
.cm-people{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.cm-people li{display:inline-flex;align-items:center;gap:.65em;padding:.35em 1em .35em .35em;border:1px solid var(--line);border-radius:9999px}
.cm-person-foto{flex:none;width:2.25rem;height:2.25rem;border-radius:50%;object-fit:cover;background:var(--veil)}
.cm-people b{font-size:.95rem;font-weight:600;font-variation-settings:"wght" 600}
.cm-people li > span:last-child{font-size:.85rem;color:var(--ink-3)}
.cm-people li.is-me{border-color:rgba(127,166,232,.45);background:rgba(61,114,201,.1)}
.cm-people li.is-me .cm-person-foto{box-shadow:0 0 0 2px var(--accent)}

/* fluxo de validação: oito etapas numa grade que desce */
.cm-steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:1px;margin-top:1.4rem}
.cm-step{display:flex;flex-direction:column;gap:.55rem;padding:1.2rem;background:#07080d;box-shadow:0 0 0 1px var(--line)}
.cm-step--ok{background:rgba(61,114,201,.08);box-shadow:0 0 0 1px rgba(127,166,232,.26)}
.cm-step-top{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin:0 !important;max-width:none !important}
.cm-step-n{font-size:var(--t-label);font-weight:600;letter-spacing:.12em;color:var(--ink-3)}
.cm-step-dono{padding:.3em .7em;border:1px solid var(--line);border-radius:9999px;font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.cm-step--ok .cm-step-dono{border-color:rgba(127,166,232,.4);color:var(--accent-soft)}
.cm-step b{font-size:1.02rem;font-weight:700;font-variation-settings:"wght" 700;line-height:1.25}
.cm-step em{font-style:normal;font-size:.85rem;line-height:1.4;color:var(--ink-3)}
.cm-step-time{margin-top:auto;padding-top:.5rem;font-size:var(--t-label);letter-spacing:.1em;color:var(--ink-3)}

/* produtos: nome e duração na mesma linha */
.cm-prods > li{gap:.6rem}
.cm-prod-top{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem}
.cm-prod-time{flex:none;padding:.3em .7em;border:1px solid var(--line);border-radius:9999px;font-size:.62rem;font-weight:600;letter-spacing:.1em;color:var(--ink-3)}

.cm-sec--take{padding-block:clamp(1.8rem,3.4vw,2.6rem);background:#0a0d18;border-block:1px solid var(--line)}
.cm-outro{margin:clamp(2rem,4vw,3rem) 0 0;max-width:26ch;font-size:var(--t-4);font-weight:700;font-variation-settings:"wdth" 94,"wght" 700;letter-spacing:-.03em;line-height:1.1;color:var(--ink-3)}
/* ---------- modal: por device ---------- */

/* notebook pequeno e tablet deitado: o painel já é fluido, só folga menos */
@media (max-width:1100px){
}

/* tablet em pé */
@media (max-width:860px){
  .cm-hero img{max-height:20rem}
  .cm-hero--light img,.cm-hero--bmw img{max-height:18rem}
  .cm-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cm-steps > li{grid-template-columns:2.6em 1fr}
}

/* celular: vira uma folha de baixo para cima, com uma faixa de fundo no topo para fechar tocando fora */
@media (max-width:640px){
  .project-modal{place-items:end stretch;padding:3.25rem 0 0}
  .project-modal-panel{
    width:100%;height:100%;max-height:100%;
    border-inline:0;border-bottom:0;border-radius:10px 10px 0 0;
    padding-bottom:max(1.5rem,env(safe-area-inset-bottom));
    transform:translateY(3rem);
  }
  .project-modal-close{top:.6rem;margin-right:.6rem;width:2.75rem;height:2.75rem}
  .project-modal-body{--pad:1.15rem}
  .cm-hero{margin-bottom:1.3rem}
  .cm-hero img{max-height:13rem}
  .cm-hero--light img,.cm-hero--bmw img{max-height:12rem}
  .cm-deck{font-size:1.05rem}
  .cm-meta{gap:1rem;margin-top:1.4rem}
  .cm-meta dd{font-size:.95rem}
  .cm-quote p{font-size:1.5rem}
  .cm-sec{margin-block:2.2rem}
  .cm-h{flex-wrap:wrap}
  .cm-h i{flex-basis:100%}
  .cm-lede{font-size:1.1rem}
  .cm-cards > li,.cm-steps > li,.cm-chain > li,.cm-flow > li,.cm-dec dl div{padding:1.1rem}
  .cm-fig--phone img{height:clamp(15rem,38vh,20rem)}
  .cm-bench{padding:1.1rem}
  .cm-bench h4{font-size:1.15rem}
  .cm-tools,.cm-gallery--phones{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cm-tool-box{padding:1.2rem}
  .cm-outro{font-size:1.5rem}
}

/* celular deitado e telas baixas: o herói não pode comer a altura toda */
@media (max-height:520px) and (orientation:landscape){
  .project-modal{padding:.5rem;place-items:end center}
  .project-modal-panel{height:100%;border:1px solid var(--line);border-radius:5px}
  .cm-hero img,.cm-hero--light img,.cm-hero--bmw img{max-height:9rem}
  .cm-fig--phone img{height:min(70vh,16rem)}
}

html.modal-open{overflow:hidden}
html.modal-open body{padding-right:var(--sbw,0px)}
@media (prefers-reduced-motion:reduce){
  .project-modal-panel{transform:none;transition:opacity .01s}
  .project-modal-scrim{transition:opacity .01s}
}

/* ======================= SERVICES ======================= */
/* hairlines between cards: each card draws a 1px ring into the 1px gap, so the lines arrive
   with their card instead of a grey block waiting behind cards that are still revealing.
   clip-path trims the outer left/right ring, keeps room above/below for the rise-in. */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:1px;border-block:1px solid var(--line);clip-path:inset(-40% 0)}
.service{position:relative;display:flex;flex-direction:column;gap:.9rem;padding:clamp(2rem,3.4vw,3rem) clamp(1.4rem,2.4vw,2.4rem);background:var(--black);box-shadow:0 0 0 1px #26272a;transition:background-color .5s var(--ease);min-width:0}
.service::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.service:hover{background:#0a0c14}
.service:hover::after{transform:scaleX(1)}
.service-n{color:var(--ink-3)}
.service-title{font-size:var(--t-3);font-weight:700;font-variation-settings:"wdth" 94,"wght" 700;letter-spacing:-.02em;line-height:1.1}
/* subtitle hugs its title: negative margin cancels the card's .9rem flex gap */
.service-sub{margin-top:-.55rem;font-size:.84rem;line-height:1.35;font-weight:600;font-variation-settings:"wght" 600;color:var(--accent-soft)}
.service-text{font-size:.98rem;color:var(--ink-2)}

/* ======================= FOOTER ======================= */
.footer{padding-bottom:clamp(2.5rem,5vh,4rem)}
.footer-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(2rem,6vw,5rem)}
.footer-title{font-size:var(--t-7);letter-spacing:-.045em;max-width:12ch}
.footer-lead{font-size:var(--t-lead);color:var(--ink-2);max-width:38ch;margin-top:clamp(1.2rem,2.6vw,2rem)}
.ember{
  position:relative;isolation:isolate;justify-self:end;display:inline-grid;place-items:center;
  padding:1.5em 3.1em;border-radius:9999px;font-size:clamp(1rem,1.5vw,1.2rem);color:var(--ink);
}
.ember-canvas{position:absolute;top:50%;left:50%;z-index:0;pointer-events:none;transform:translate(-50%,-50%)}
.ember-ring{
  position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  border:1px solid rgba(61,114,201,.55);
  background:radial-gradient(circle,rgba(61,114,201,.18),rgba(61,114,201,.05) 58%,transparent 74%);
  box-shadow:0 0 60px -12px rgba(61,114,201,.45),inset 0 0 40px -18px rgba(61,114,201,.8);
  transition:transform .6s var(--ease),border-color .5s var(--ease),background .5s var(--ease);
}
.ember:hover .ember-ring{transform:scale(.94);border-color:rgba(61,114,201,.95);background:radial-gradient(circle,rgba(61,114,201,.24),rgba(61,114,201,.07) 58%,transparent 74%)}
.ember-core{position:relative;z-index:2;display:flex;align-items:center;gap:.9em;white-space:nowrap}
.ember-text{font-size:1em;font-weight:700;font-variation-settings:"wdth" 94,"wght" 700;letter-spacing:.01em;line-height:1.1}
.ember-arrow{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.ember:hover .ember-arrow{transform:translateX(6px)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:2rem;margin-top:clamp(4rem,10vw,8rem);padding-top:2rem;border-top:1px solid var(--line)}
.footer-grid .label{margin-bottom:.6rem}
.footer-grid p:not(.label){color:var(--ink)}
/* align-items keeps each underline the width of its own word, not the column */
.footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
.footer-end{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-top:clamp(3rem,6vw,5rem);padding-top:1.6rem;border-top:1px solid var(--line)}
.footer-end .brand-mark{width:26px;height:24px}
@media (max-width:960px){.footer-top{grid-template-columns:1fr;gap:clamp(2.2rem,7vw,3.5rem)}}
@media (max-width:860px){
  .footer-top{gap:clamp(2.5rem,8vw,4rem)}
  .ember{justify-self:start;padding:1.35em 2.5em;font-size:1rem}
}

/* ======================= CURSOR ======================= */
.cursor,.cursor-ring{position:fixed;top:0;left:0;z-index:200;border-radius:50%;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .4s var(--ease)}
.cursor{width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff}
.cursor-ring{
  width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(255,255,255,.55);
  transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),border-color .4s var(--ease),opacity .4s var(--ease);
}
body.cursor-on .cursor,body.cursor-on .cursor-ring{opacity:1}
.cursor-ring.is-near{width:58px;height:58px;margin:-29px 0 0 -29px;border-color:rgba(255,255,255,.85)}
@media (hover:none),(pointer:coarse){.cursor,.cursor-ring{display:none}}