/* =========================================================
   Narro · página Serviços (layout inspirado no print de 27/09)
   Fundo quase preto, texto branco, verde só em rótulos, números e detalhes. Usa os tokens de style.css.
   ========================================================= */
body.page-servicos{--bg:#0b0a0d;background:var(--bg);color:#fff}
.page-servicos .site-header,.page-servicos .site-header .brand,.page-servicos .brand__tagline,.page-servicos .nav-toggle{color:#fff}
.page-servicos .site-header{z-index:20}

.sv-kicker{font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--green)}
.sv-label{font-size:9.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--green)}
.sv-row__num{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--green)}

/* DOBRA 1 */
.sv-hero{padding-top:clamp(28px,5vh,60px);padding-bottom:clamp(80px,14vh,170px)}
.sv-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:center}
.sv-hero__title{margin-top:clamp(18px,3vh,32px);font-size:clamp(42px,5vw,86px);font-weight:300;line-height:1.1;letter-spacing:-.03em}
.sv-hero__title span{display:block;white-space:nowrap}
.sv-hero__title strong{font-weight:700;letter-spacing:-.035em}
.sv-hero__text{width:min(440px,100%);margin-top:clamp(28px,6vh,72px);font-size:var(--p-size);font-weight:300;line-height:var(--p-leading);letter-spacing:var(--p-tracking);color:rgba(255,255,255,.78);text-wrap:pretty}
.sv-hero__art{justify-self:end;width:100%;max-width:min(620px,70svh)}
.sv-hero__n{display:block;width:100%;height:auto;overflow:visible}
.sv-hero__img{filter:grayscale(1) contrast(1.08)}

/* blocos com cabeçalho (rótulo + frase de abertura) */
.sv-block{padding-bottom:clamp(90px,15vh,180px)}
.sv-block__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:start;margin-bottom:clamp(40px,7vh,80px)}
.sv-block__lead{font-size:clamp(17px,1.45vw,24px);font-weight:300;line-height:1.5;letter-spacing:-.005em;color:rgba(255,255,255,.92);text-wrap:pretty}

/* DOBRA 2 · linhas */
.sv-rows{border-top:1px solid rgba(255,255,255,.14)}
.sv-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,96px);row-gap:10px;padding-block:clamp(30px,5vh,52px);border-bottom:1px solid rgba(255,255,255,.14);position:relative}
.sv-row__title{grid-column:1;grid-row:1;font-size:clamp(28px,2.7vw,46px);font-weight:300;line-height:1.08;letter-spacing:-.025em;transition:color .45s ease}
.sv-row__body{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:10px;max-width:520px}
.sv-row__text{font-size:clamp(14px,1.05vw,17px);font-weight:300;line-height:1.55;color:rgba(255,255,255,.9)}
.sv-row__body .sv-label{margin-top:10px}
.sv-row__deliv{font-size:13px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.6)}
.sv-row:hover .sv-row__title{color:var(--green)}

/* DOBRA 3 · grade 2 colunas */
.sv-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,96px)}
.sv-point{display:grid;grid-template-columns:minmax(0,1fr);column-gap:18px;row-gap:12px;padding-block:clamp(28px,4.5vh,44px);border-top:1px solid rgba(255,255,255,.14)}
.sv-point__title{font-size:clamp(21px,1.75vw,28px);font-weight:400;line-height:1.15;letter-spacing:-.02em;transition:color .45s ease}
.sv-point__text{grid-column:1;max-width:46ch;font-size:13px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.62)}
.sv-point:hover .sv-point__title{color:var(--green)}

/* DOBRA 4 · chamada */
.sv-cta{padding-bottom:clamp(90px,15vh,170px)}
.sv-cta__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:end;padding-top:clamp(40px,7vh,80px);border-top:1px solid rgba(255,255,255,.14)}
.sv-cta__title{font-size:clamp(46px,5.6vw,96px);font-weight:300;line-height:1;letter-spacing:-.04em}
.sv-cta__side{display:flex;flex-direction:column;gap:28px;max-width:520px}
.sv-cta__textwrap{display:flex;gap:var(--quote-gap);align-items:flex-start}
.sv-cta__text{font-size:clamp(14px,1.05vw,17px);font-weight:300;line-height:1.6;color:rgba(255,255,255,.9)}
.sv-quote{flex:none;width:clamp(34px,3vw,48px);height:auto;margin-top:-6px;color:var(--green)}
.sv-quote__mark{fill:currentColor}
.sv-cta__go{display:inline-flex;align-items:center;gap:14px;width:max-content;font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#fff}
.sv-cta__go .cta__circle{background:var(--green)}
.sv-cta__go .cta__circle svg{stroke:#1d0039}
.sv-cta__go:hover .cta__circle{transform:translateX(4px)}

@media(max-width:900px){
  .sv-hero__grid,.sv-block__head,.sv-row,.sv-cta__grid{grid-template-columns:minmax(0,1fr)}
  .sv-hero__title span{white-space:normal}
  .sv-hero__title{font-size:clamp(38px,10.5vw,56px)}
  .sv-hero__art{justify-self:start;max-width:420px;order:-1;width:78%}
  .sv-hero__text{margin-top:24px}
  .sv-block__head{gap:18px}
  .sv-row{row-gap:14px}
  .sv-row__body{grid-column:1;grid-row:2}
  .sv-points{grid-template-columns:minmax(0,1fr)}
  .sv-cta__side{gap:22px}
}

/* aspas ao lado do texto de abertura (como na hero da home) */
.sv-hero__aside{position:relative;display:flex;gap:var(--quote-gap);align-items:flex-start;margin-top:clamp(28px,6vh,72px)}
.sv-hero__aside .sv-hero__text{margin-top:0}
.sv-hero__quote{flex:none;width:var(--quote-size);height:auto;margin-top:var(--quote-top);color:var(--green);overflow:visible}
.sv-hero__mark{fill:currentColor;stroke:currentColor;stroke-width:1.6px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.sv-hero__art{position:relative}
.sv-hero__img{will-change:transform}

/* parte de baixo: letras enormes e discretas passando o tempo todo por trás */
.sv-lower{position:relative;isolation:isolate}
.sv-lower > section{position:relative;z-index:1}
.sv-letters{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.sv-letters__row{position:absolute;left:0;white-space:nowrap;font-size:clamp(130px,15vw,290px);font-weight:700;line-height:1;letter-spacing:-.04em;color:rgba(255,255,255,.016);will-change:transform}
.sv-letters__row:nth-child(3n+2){color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.045)}
.sv-letters__row span{padding-right:.35em}

/* animação: nada aparece pronto antes da entrada */
html.sv-wait .sv-hero,html.sv-wait .page-servicos .site-header .container{visibility:hidden}
.sv-line{display:block}
.sv-rule{position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--green);transform:scaleX(0);transform-origin:left center;pointer-events:none}
.sv-row,.sv-point{position:relative}
.sv-row__title,.sv-point__title{transition:color .45s ease,transform .7s var(--ease-out)}
.sv-row:hover .sv-row__title,.sv-point:hover .sv-point__title{transform:translateX(10px)}
@media(max-width:900px){.sv-hero__aside{margin-top:24px}}
.sv-quote__mark{stroke:currentColor;stroke-width:1.4px;vector-effect:non-scaling-stroke;stroke-linejoin:round}

/* efeito psicodélico no hover do "n" (WebGL, servicos.js): o canvas fica por cima da foto, recortado no mesmo "n" */
.sv-hero__fx{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;
  -webkit-mask:url("../svg/n-narro.svg") center/100% 100% no-repeat;mask:url("../svg/n-narro.svg") center/100% 100% no-repeat}
.sv-hero__fx.is-on{opacity:1}

/* botão discreto "Quero falar com a Narro" (WhatsApp) em cada serviço: aparece no hover (servicos.js) */
.sv-talk{position:relative;display:inline-flex;align-items:center;gap:10px;width:max-content;margin-top:16px;padding:6px 0;font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#fff;white-space:nowrap}
.sv-point .sv-talk{grid-column:2;margin-top:4px}
.sv-talk__label{display:inline-flex;overflow:hidden}
.sv-talk__label .sv-tc{display:inline-block;will-change:transform}
.sv-talk__arrow{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid rgba(101,214,0,.55);transition:background-color .4s ease,border-color .4s ease}
.sv-talk__arrow svg{width:11px;height:11px;fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s ease,transform .5s var(--ease-out)}
.sv-talk__line{position:absolute;left:0;right:32px;bottom:0;height:1px;background:var(--green);transform:scaleX(0);transform-origin:left center}
.sv-talk:hover .sv-talk__arrow,.sv-talk:focus-visible .sv-talk__arrow{background:var(--green);border-color:var(--green)}
.sv-talk:hover .sv-talk__arrow svg,.sv-talk:focus-visible .sv-talk__arrow svg{stroke:#1d0039;transform:translateX(2px)}
/* com mouse: escondido até o hover da frente (a animação de entrada é do GSAP) */
@media(hover:hover) and (pointer:fine){.sv-talk{visibility:hidden}}

/* títulos dos blocos ("Da marca à campanha", "A ideia em cada ponto de contato"): o mesmo peso dos títulos grandes,
   sem caixa alta (27/09) */
.sv-block__head .sv-kicker{font-size:clamp(30px,3.2vw,56px);font-weight:300;line-height:1.08;letter-spacing:-.025em;text-transform:none;color:#fff;text-wrap:balance}
@media(max-width:900px){.sv-block__head .sv-kicker{font-size:clamp(28px,8vw,40px)}}
/* 27/09: títulos dos blocos em verde-limão, negrito e ~30% maiores */
.sv-block__head .sv-kicker{font-size:clamp(39px,4.16vw,73px);font-weight:700;letter-spacing:-.035em;line-height:1.02;color:var(--green)}
@media(max-width:900px){.sv-block__head .sv-kicker{font-size:clamp(34px,10.4vw,52px)}}