/* ===== Helena Vasques — sistema ===== */
:root{
  --ink:#0B0B0C;
  --ink-2:#141416;
  --ink-3:#1D1D20;
  --bone:#EFEBE4;
  --bone-2:#DCD5CA;
  /* fundo claro: valores medidos com contraste WCAG AA (≥4.5 sobre --bone) */
  --mute:#655F57;      /* 5.31:1 */
  --brass:#7A5A22;     /* 5.33:1 */
  --brass-soft:#D9BE8E;
  --line:rgba(239,235,228,.14);
  --line-dark:rgba(11,11,12,.14);

  --f: "Schibsted Grotesk", "Helvetica Neue", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;

  --step--1: clamp(.78rem, .74rem + .18vw, .88rem);
  --step-0:  clamp(1rem, .96rem + .22vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --step-2:  clamp(1.7rem, 1.4rem + 1.5vw, 2.9rem);
  --step-3:  clamp(2.4rem, 1.6rem + 3.6vw, 5.4rem);
  --step-4:  clamp(3rem, 1.4rem + 7vw, 8.5rem);

  --gut: clamp(1.25rem, 4vw, 5rem);
  --frame: clamp(0px, 1.4vw, 26px);   /* respiro da moldura do hero */
  --gut-in: clamp(1.25rem, 3vw, 3.2rem);
  --maxw: 1320px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* fundo escuro: os mesmos papéis, clareados (--mute 5.61:1 e --brass 6.80:1 sobre --ink) */
.scene, .sec.dark, .strip, .foot, .nav:not(.solid){--mute:#8E8880; --brass:#B79256}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--f); font-size:var(--step-0); line-height:1.6;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{display:block; max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0; line-height:1; letter-spacing:-.035em; font-weight:600}
p{margin:0 0 1em}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bone);padding:.8rem 1.2rem;z-index:999}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--brass); outline-offset:3px}

/* ===== NAV ===== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem var(--gut);
  color:var(--bone); mix-blend-mode:normal;
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
}
/* padding fixo de propósito: animar padding causa reflow a cada frame do scroll.
   A troca de fundo já marca a mudança de estado. */
.nav.solid{background:var(--bone); color:var(--ink); border-bottom-color:var(--line-dark)}
@media (min-width:821px){
  @supports (backdrop-filter:blur(1px)){
    .nav.solid{background:rgba(239,235,228,.9); backdrop-filter:blur(14px) saturate(1.2)}
  }
}
.brand{display:flex; align-items:baseline; gap:.65rem; text-decoration:none}
.brand-mark{
  font-weight:900; font-size:.95rem; letter-spacing:.06em;
  border:1.5px solid currentColor; padding:.2rem .4rem; line-height:1;
}
.brand-name{font-weight:700; font-size:.9rem; letter-spacing:.16em; text-transform:uppercase}
.nav-links{display:flex; align-items:center; gap:1.9rem}
.nav-links a{text-decoration:none; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; opacity:.82; position:relative; padding:.2rem 0}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{border:1px solid currentColor; padding:.55rem .95rem !important; opacity:1 !important}
.nav-cta::after{display:none}
.nav-cta:hover{background:currentColor}
.nav.solid .nav-cta:hover{color:var(--bone)}
.nav:not(.solid) .nav-cta:hover{color:var(--ink)}
.nav-toggle{display:none; background:none; border:0; padding:.6rem; cursor:pointer}
.nav-toggle span{display:block; width:24px; height:1.5px; background:currentColor; margin:5px 0; transition:transform .35s var(--ease)}

@media (max-width:820px){
  .nav-toggle{display:block; color:inherit}
  .nav-links{
    position:fixed; inset:0; background:var(--ink); color:var(--bone);
    flex-direction:column; justify-content:center; gap:2rem;
    transform:translateY(-100%); transition:transform .55s var(--ease); z-index:-1;
  }
  .nav-links a{font-size:1.4rem; letter-spacing:.1em}
  body.menu-open .nav-links{transform:translateY(0)}
  body.menu-open .nav{color:var(--bone); background:transparent; border-color:transparent}
  body.menu-open .nav-toggle span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
  body.menu-open .nav-toggle span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}
  body.menu-open{overflow:hidden}
}

/* ===== CENA SCROLL ===== */
.scene{position:relative; background:var(--ink)}
.scene-track{height:520vh}
.scene-stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  background:#101012; display:grid; place-items:center;
}
/* O containing block de um absoluto é o PADDING box do stage — inclui a moldura.
   Com height:100% o vídeo estourava a moldura por 2×--frame e sobrava uma faixa
   de imagem crua (sem vinheta) na base ao sair da cena. Daí o calc. */
.scene-video{
  position:absolute; inset:0;
  width:calc(100% - var(--frame) * 2); height:calc(100% - var(--frame) * 2);
  object-fit:cover; filter:contrast(1.06) saturate(.86) brightness(.94);
}
.scene-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    /* faixa escura à esquerda: garante contraste da frase sobre qualquer quadro */
    linear-gradient(to right, rgba(6,6,7,.88) 0%, rgba(6,6,7,.62) 26%, transparent 52%),
    radial-gradient(120% 90% at 50% 45%, transparent 34%, rgba(8,8,9,.5) 80%, rgba(8,8,9,.82) 100%),
    linear-gradient(to bottom, rgba(8,8,9,.5) 0%, transparent 24%, transparent 52%, rgba(8,8,9,.92) 100%);
}
@media (max-width:700px){
  .scene-vignette{
    background:
      linear-gradient(to bottom, rgba(8,8,9,.72) 0%, rgba(8,8,9,.25) 24%, rgba(8,8,9,.55) 46%,
                      rgba(8,8,9,.9) 68%, rgba(8,8,9,.97) 100%);
  }
  .scene-foot .scroll-hint{display:none}
  .tick{display:none}
  .wordmark{--mark-size:clamp(3.4rem,15vw,6rem); bottom:calc(var(--frame) + 3.6rem)}
  .caps{bottom:clamp(9rem,28vh,14rem)}
}
.scene-grain{
  position:absolute; inset:-50%; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.6'/></svg>");
  animation:grain 1.1s steps(3) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}

/* moldura: o vídeo respira dentro de uma borda escura, como na referência */
.scene-stage{padding:var(--frame); background:#050506}
.scene-video, .scene-vignette, .scene-grain{inset:var(--frame)}
.scene-grain{inset:-50%}

/* colunas finas + marcadores de grid */
.rule-grid{position:absolute; inset:var(--frame); z-index:2; display:grid; grid-template-columns:repeat(4,1fr); pointer-events:none}
.rule-grid i{border-right:1px solid rgba(239,235,228,.09)}
.rule-grid i:last-child{border-right:0}
.tick{position:absolute; z-index:3; top:50%; font-size:1rem; line-height:1; color:rgba(239,235,228,.42); pointer-events:none}
.tick-l{left:calc(var(--frame) + .7rem)}
.tick-r{right:calc(var(--frame) + .7rem)}

/* meta nos cantos */
.hero-meta{
  position:absolute; z-index:4; top:calc(var(--frame) + 4.6rem); color:var(--bone);
  font-size:.8rem; line-height:1.6; font-weight:400;
}
.hero-meta p{margin:0}
.hero-meta-l{left:calc(var(--frame) + var(--gut-in))}
.hero-meta-r{right:calc(var(--frame) + var(--gut-in)); text-align:right}
.hero-meta .dot{display:block; width:11px; height:11px; margin:0 0 .5rem auto; border:1px solid currentColor; border-radius:50%}
@media (max-width:700px){.hero-meta-r{display:none}}

/* frases da cena */
.caps{position:absolute; z-index:4; left:calc(var(--frame) + var(--gut-in)); right:calc(var(--frame) + var(--gut-in)); bottom:clamp(11rem,32vh,20rem)}
.cap{
  position:absolute; inset:auto 0 0 0; color:var(--bone);
  opacity:0; transform:translateY(20px); pointer-events:none;
  transition:opacity .6s var(--ease), transform .8s var(--ease);
  max-width:min(100%, 46vw, 21ch);
}
@media (max-width:700px){.cap{max-width:min(100%, 17ch)}}
.cap.on{opacity:1; transform:none; pointer-events:auto}
.kicker{
  font-size:.72rem; letter-spacing:.02em; color:rgba(239,235,228,.55);
  margin:0 0 .9rem; font-weight:400;
}
/* frases da cena: grotesk quadrada e apertada, para casar com a tensão do wordmark */
.display{
  margin:0; font-family:"Archivo", var(--f);
  font-size:var(--step-2); font-weight:600; letter-spacing:-.045em; line-height:1.04;
  font-variation-settings:"wdth" 94;
  text-wrap:balance; text-shadow:0 2px 40px rgba(0,0,0,.45);
}
.display em{font-style:normal; color:rgba(239,235,228,.58)}

/* wordmark gigante sangrando pela base */
/* nome sangra pela base: só a parte de cima das letras aparece */
.wordmark{
  --mark-size: clamp(4.5rem, 19vw, 17rem);
  position:absolute; z-index:3; left:calc(var(--frame) + var(--gut-in)); right:var(--frame);
  bottom:calc(var(--frame) + 2.2rem);
  height:calc(var(--mark-size) * .52); overflow:hidden; pointer-events:none;
}
.wordmark span{
  display:block; color:var(--bone); font-weight:600; letter-spacing:-.055em;
  font-size:var(--mark-size); line-height:.74;
  transform:translateY(var(--mark-y, 0));
  will-change:transform;
}

.scene-foot{
  position:absolute; z-index:5; left:calc(var(--frame) + var(--gut-in)); right:calc(var(--frame) + var(--gut-in));
  bottom:calc(var(--frame) + .8rem); display:flex; align-items:end; justify-content:space-between; gap:1rem;
  pointer-events:none;
}
.counter{font-size:.72rem; color:rgba(239,235,228,.55); font-variant-numeric:tabular-nums}
@media (max-width:700px){.counter-r{display:none}}

.pill{
  display:inline-flex; align-items:center; gap:.8rem; margin-top:1.8rem; pointer-events:auto;
  text-decoration:none; color:var(--bone); border:1px solid rgba(239,235,228,.4);
  border-radius:999px; padding:.75rem .8rem .75rem 1.4rem; font-size:.8rem;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s;
}
.pill i{
  display:grid; place-items:center; width:1.9rem; height:1.9rem; border-radius:50%;
  border:1px solid currentColor; font-size:.85rem; transition:transform .4s var(--ease);
}
.pill:hover{background:var(--bone); color:var(--ink); border-color:var(--bone)}
.pill:hover i{transform:translateX(3px)}

.scroll-hint{
  z-index:4; color:var(--bone); font-size:.62rem; letter-spacing:.34em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:.6rem; opacity:.6;
  transition:opacity .5s;
}
.scroll-hint i{display:block; width:1px; height:42px; background:linear-gradient(var(--bone),transparent); animation:drop 2s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0); transform-origin:top}50%{transform:scaleY(1); transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}
.scroll-hint.hide{opacity:0}

.progress{position:absolute; left:var(--frame); right:var(--frame); bottom:var(--frame); height:2px; background:rgba(239,235,228,.12); z-index:5}
.progress i{display:block; height:100%; width:0%; background:var(--brass)}

/* ===== BLOCOS ===== */
.sec{padding:clamp(5rem,11vh,9rem) var(--gut); max-width:var(--maxw); margin-inline:auto}
section[id]{scroll-margin-top:5rem}
.sec.dark{max-width:none; background:var(--ink); color:var(--bone)}
.sec.dark > *{max-width:var(--maxw); margin-inline:auto}
.eyebrow{font-size:.78rem; color:var(--mute); font-weight:400; margin:0 0 1.4rem; font-variant-numeric:tabular-nums}
.h2{font-size:var(--step-2); text-wrap:balance}
.h2.big{font-size:var(--step-3)}
.sub{color:var(--mute); max-width:52ch; margin-top:1.2rem}
.sec-head{margin-bottom:clamp(2.5rem,6vh,4.5rem)}
.body{max-width:56ch; color:color-mix(in srgb, currentColor 74%, transparent)}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5.5rem); align-items:start}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

.strip{background:var(--ink-2); color:var(--bone); padding:clamp(4rem,10vh,7rem) var(--gut)}
.lede{
  max-width:26ch; margin-inline:auto; text-align:center;
  font-size:var(--step-2); font-weight:500; letter-spacing:-.03em; line-height:1.08;
  font-variation-settings:"wdth" 95; text-wrap:balance;
}

.portrait{margin:clamp(2rem,5vh,3.5rem) 0 0; max-width:26rem}
.portrait img{width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; filter:grayscale(.15) contrast(1.05)}
.portrait figcaption{margin-top:.9rem; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mute)}

.bio p{color:#3A3733; max-width:54ch}
.facts{list-style:none; padding:0; margin:2.2rem 0 0; border-top:1px solid var(--line-dark)}
.facts li{display:grid; grid-template-columns:9rem 1fr; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--line-dark); font-size:var(--step--1)}
.facts span{color:var(--mute); letter-spacing:.14em; text-transform:uppercase; font-size:.66rem; font-weight:700; padding-top:.2em}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:clamp(3rem,7vh,5rem); border-top:1px solid var(--line-dark); padding-top:2.4rem}
.stats div{display:flex; flex-direction:column; gap:.4rem}
.stats b{font-size:clamp(2.6rem,1.4rem+4vw,5rem); font-weight:500; letter-spacing:-.05em; line-height:1}
.stats span{font-size:.8rem; color:var(--mute); max-width:18ch; margin-top:.6rem}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr; gap:2rem}}

/* trabalho: três esteiras em loop contínuo, direções alternadas */
.reel-wrap{display:flex; flex-direction:column; gap:clamp(.7rem,1.6vw,1.2rem)}
.reel{overflow:hidden;
      -webkit-mask-image:linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
      mask-image:linear-gradient(to right, transparent, #000 9%, #000 91%, transparent)}
.reel-track{display:flex; width:max-content; will-change:transform}
.reel-set{display:flex; gap:clamp(.7rem,1.6vw,1.2rem); padding-right:clamp(.7rem,1.6vw,1.2rem)}

/* --shift = largura de UMA cópia (medida no JS). Ao completar o ciclo, a cópia
   seguinte está exatamente onde a anterior começou, então a emenda é invisível.
   O JS clona o conjunto até a esteira cobrir 2x a viewport. */
@keyframes reel-esq{from{transform:translateX(0)}                    to{transform:translateX(calc(var(--shift, 50%) * -1))}}
@keyframes reel-dir{from{transform:translateX(calc(var(--shift, 50%) * -1))} to{transform:translateX(0)}}
.reel-esq .reel-track{animation:reel-esq var(--dur) linear infinite}
.reel-dir .reel-track{animation:reel-dir var(--dur) linear infinite}
.reel:hover .reel-track, .reel:focus-within .reel-track{animation-play-state:paused}

.shot{margin:0; flex:none; position:relative}
/* altura fixa + largura automática: cada foto mantém a proporção original,
   sem esticar e sem cortar */
.shot img{
  height:clamp(190px, 26vh, 330px); width:auto; display:block;
  filter:saturate(.85) contrast(1.04); transition:filter .5s var(--ease)
}
.shot:hover img{filter:saturate(1) contrast(1)}
/* legenda sobreposta: em faixa que anda, texto fixo embaixo vira ruído */
.shot figcaption{
  position:absolute; inset:auto 0 0 0; padding:2.4rem .9rem .8rem;
  display:flex; flex-direction:column; gap:.1rem;
  background:linear-gradient(transparent, rgba(6,6,7,.9));
  opacity:0; transition:opacity .45s var(--ease);
}
.shot:hover figcaption, .shot:focus-within figcaption{opacity:1}
.shot figcaption b{font-size:.85rem; font-weight:500; letter-spacing:-.015em; color:var(--bone)}
.shot figcaption span{font-size:.72rem; color:rgba(239,235,228,.6)}

@media (prefers-reduced-motion:reduce){
  /* sem movimento: vira uma faixa que o usuário rola na mão.
     Seletor precisa igualar a especificidade de `.reel-esq .reel-track`. */
  .reel{overflow-x:auto; -webkit-mask-image:none; mask-image:none}
  .reel-esq .reel-track, .reel-dir .reel-track{animation:none}
  .reel-track{width:auto}
  .reel-set:not(:first-child){display:none}
}

/* gear */
.gearsec{max-width:var(--maxw)}
.gear-media{background:var(--ink-3); overflow:hidden}
.gear-media video{width:100%; aspect-ratio:16/10; object-fit:cover; filter:contrast(1.05) saturate(.8)}
.kit{list-style:none; padding:0; margin:2rem 0 0; border-top:1px solid var(--line-dark)}
.kit li{padding:.9rem 0; border-bottom:1px solid var(--line-dark); font-size:var(--step--1)}
.kit span{display:block; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); font-weight:700; margin-bottom:.25rem}

/* menu de serviços */
.menu{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.8rem,1.6vw,1.4rem); align-items:stretch}
@media (max-width:1080px){.menu{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.menu{grid-template-columns:1fr}}
.card{
  display:flex; flex-direction:column; position:relative;
  border:1px solid var(--line); padding:clamp(1.4rem,2.4vw,2rem);
  background:linear-gradient(180deg, rgba(255,255,255,.035), transparent);
  transition:border-color .5s var(--ease), transform .5s var(--ease), background .5s;
}
.card:hover{border-color:rgba(183,146,86,.55); transform:translateY(-4px)}
.card.feature{background:linear-gradient(180deg, rgba(183,146,86,.13), rgba(183,146,86,.02)); border-color:rgba(183,146,86,.45)}
.tag{position:absolute; top:-.7rem; left:clamp(1.4rem,2.4vw,2rem); background:var(--brass); color:var(--ink); font-size:.6rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; padding:.3rem .6rem}
.card header{border-bottom:1px solid var(--line); padding-bottom:1rem; margin-bottom:1rem}
.card h3{font-size:var(--step-1); font-weight:800; margin-bottom:.7rem}
.price{font-size:var(--step-1); font-weight:900; letter-spacing:-.03em; color:var(--brass-soft); margin:0}
.price small{font-size:.62em; font-weight:600; color:var(--mute)}
.card-sub{font-size:.76rem; letter-spacing:.06em; color:var(--mute); text-transform:uppercase}
.card ul{list-style:none; padding:0; margin:0 0 1.6rem; flex:1}
.card li{position:relative; padding-left:1.1rem; margin-bottom:.6rem; font-size:var(--step--1); color:rgba(239,235,228,.78); line-height:1.5}
.card li::before{content:""; position:absolute; left:0; top:.62em; width:5px; height:1px; background:var(--brass)}
.card footer a{
  display:inline-block; text-decoration:none; font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; font-weight:700; border-bottom:1px solid var(--brass); padding-bottom:.35rem;
  transition:letter-spacing .4s var(--ease)
}
.card footer a:hover{letter-spacing:.28em}
.menu-note{margin:2.6rem 0 0; font-size:var(--step--1); color:var(--mute); max-width:60ch}

/* processo */
.steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.5rem,3vw,3rem); counter-reset:s}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.steps li{border-top:1px solid var(--ink); padding-top:1.2rem}
.steps b{display:block; font-size:.7rem; letter-spacing:.2em; color:var(--brass); font-weight:800; margin-bottom:1.6rem}
.steps h3{font-size:var(--step-1); margin-bottom:.7rem; font-weight:800}
.steps p{font-size:var(--step--1); color:#4A4640; margin:0}

/* depoimentos */
.quotes{background:var(--bone-2); max-width:none}
.q-wrap{max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3.5rem)}
@media (max-width:900px){.q-wrap{grid-template-columns:1fr}}
blockquote{margin:0; border-left:2px solid var(--brass); padding-left:1.5rem}
blockquote p{font-size:var(--step-1); font-weight:500; letter-spacing:-.02em; line-height:1.3; text-wrap:pretty}
cite{font-style:normal; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:#55504A; font-weight:600}

/* contato */
.contact-list{list-style:none; padding:0; margin:2.2rem 0 0; border-top:1px solid var(--line-dark)}
.contact-list li{display:grid; grid-template-columns:8rem 1fr; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--line-dark); font-size:var(--step--1)}
.contact-list span{font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); font-weight:700; padding-top:.2em}
.contact-list a{text-decoration:none; border-bottom:1px solid var(--brass)}

.form{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
.f{display:flex; flex-direction:column; gap:.45rem}
.f.full{grid-column:1/-1}
.form label{font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); font-weight:700}
.form input,.form select,.form textarea{
  font:inherit; font-size:var(--step--1); color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--ink);
  padding:.7rem 0; border-radius:0; -webkit-appearance:none; appearance:none;
}
.form textarea{resize:vertical; border:1px solid var(--ink); padding:.8rem}
.form input::placeholder,.form textarea::placeholder{color:#6A635B}
.form button{grid-column:1/-1; justify-self:start}
.form-msg{grid-column:1/-1; margin:0; font-size:var(--step--1); color:var(--brass); min-height:1.4em}
@media (max-width:560px){.form{grid-template-columns:1fr}}

.btn{
  display:inline-block; cursor:pointer; text-decoration:none; font-family:inherit;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  padding:1.05rem 2.2rem; border:1px solid var(--ink); background:var(--ink); color:var(--bone);
  transition:background .4s var(--ease), color .4s var(--ease), letter-spacing .4s var(--ease);
}
.btn:hover{background:transparent; color:var(--ink); letter-spacing:.26em}
.btn-ghost{background:transparent; border-color:var(--bone); color:var(--bone)}
.btn-ghost:hover{background:var(--bone); color:var(--ink)}

/* rodapé */
.foot{background:var(--ink); color:var(--bone); padding:clamp(3rem,7vh,5rem) var(--gut) 2.5rem}
.foot-top{max-width:var(--maxw); margin:0 auto 2.5rem; display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:space-between; align-items:end; border-bottom:1px solid var(--line); padding-bottom:2rem}
.foot-brand{font-size:var(--step-2); font-weight:900; letter-spacing:-.045em}
.foot-top nav{display:flex; gap:1.6rem; flex-wrap:wrap}
.foot-top a{text-decoration:none; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; opacity:.7}
.foot-top a:hover{opacity:1}
.foot-note{max-width:var(--maxw); margin-inline:auto; font-size:.72rem; color:var(--mute); line-height:1.7}

/* reveal (só ativa com JS) */
.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .9s var(--ease)}
.js .reveal.on{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1 !important; transform:none !important}
  .scene-grain,.scroll-hint i{animation:none}
}