/* ============================================================
   FUJIEX v2 — estrutura calcada em staylime.com
   Trocar a paleta = trocar o bloco PALETA abaixo. Nada mais.
   ============================================================ */
:root{
  /* ---------- PALETA (única coisa a trocar depois do teste de cor) ---------- */
  --bg:#162CB6;          /* azul mais vivo que ainda deixa TODO texto ser neon (7.48:1) */
  --acc:#39FF14;         /* neon puro — display, botões, acentos */
  --soft:#A8FF8F;        /* neon lavado — corpo. continua verde, 8.39:1 */
  --on-acc:var(--bg);    /* texto do botão VAZADO no azul da página — 7.48:1 */
  --a1:#162FC8;          /* tinta 1 da ilustração */
  --a2:#1832D8;          /* tinta 2 */
  --a3:#1E3AE6;          /* tinta 3 */

  --ink:#0D1220;         /* texto sobre claro */
  --ink-mut:#5C6478;
  --paper:#FFFFFF;
  --paper-2:#F4F5F8;
  --line:#E3E5EC;

  --fg:var(--soft);      /* texto sobre o azul — verde, nunca branco */
  --mut:var(--soft);
  --line-d:rgba(255,255,255,.2);

  /* ---------- TIPOGRAFIA (escala medida no staylime) ---------- */
  --f:'Switzer','Lausanne','Helvetica Neue',Inter,Arial,sans-serif;
  --mono:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --tr-d:-.04em;   /* display */
  --tr-b:-.01em;   /* corpo */
  --tr-l:.02em;    /* label */
  --pad:clamp(20px,5vw,72px);
  --nav-h:80px;    /* altura da barra fixa — medida no staylime */
  --art-top:45%;   /* % vazio no topo do PNG da hero */
  --hero-drop:.40; /* 1 = texto para antes da cena · menor = desce pro corredor */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f);font-weight:300;background:var(--paper);color:var(--ink);
     line-height:1.5;letter-spacing:var(--tr-b);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--acc);color:var(--on-acc)}

.c{width:min(1560px,100% - var(--pad)*2);margin:0 auto}
.eb{font-size:13px;font-weight:500;letter-spacing:var(--tr-l);text-transform:uppercase}
.lbl{font-family:var(--mono);font-size:11px;letter-spacing:var(--tr-l);text-transform:uppercase}

/* display: peso 500, NUNCA 700. é o que faz parecer simples. */
h1,h2,h3{font-weight:500;letter-spacing:var(--tr-d);line-height:.96}
h1{font-size:clamp(46px,8.1vw,118px)}
h2{font-size:clamp(30px,3.9vw,54px);line-height:1.02}
h3{font-size:clamp(20px,1.8vw,28px);line-height:1.12;letter-spacing:-.03em}

/* centralização geométrica: line-height:0 + padding assimétrico depende das
   métricas da fonte (a referência calibrou pra Lausanne, não pra nossa stack).
   inline-flex centra nos dois eixos independente de fonte. */
.pill{display:inline-flex;align-items:center;justify-content:center;text-align:center;
      min-height:48px;padding:0 30px;line-height:1;
      background:var(--acc);color:var(--on-acc);font-weight:500;font-size:20px;
      border-radius:50px;
      transition:transform .17s cubic-bezier(.25,.1,.25,1),background .17s cubic-bezier(.25,.1,.25,1)}
.pill:hover{transform:scale(1.04,1.04)}
.pill:active{transform:scale(1,1)}
.pill-o{display:inline-block;border:1px solid var(--line);color:var(--ink);font-weight:500;font-size:15px;
        padding:13px 26px;border-radius:100px;transition:.25s}
.pill-o:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ============================ NAV (fixa, como a referência) ============================ */
nav{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--bg)}
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
        gap:24px;height:var(--nav-h)}
.brand{justify-self:start;display:flex;align-items:center}
.brand img{height:36px;width:auto;display:block}
.nav-c{justify-self:center;display:flex;gap:clamp(20px,2.4vw,38px)}
.nav-r{justify-self:end;display:flex;align-items:center}
.nav-c a,.nav-r a{position:relative;font-size:17px;line-height:30px;font-weight:400;
                  color:#FFFFFF;padding:25px 0;opacity:.92;
                  transition:color .15s cubic-bezier(.4,0,.2,1),opacity .15s cubic-bezier(.4,0,.2,1)}
/* hover acende em neon. apagar no hover lê como desabilitado, e o neon já é a
   cor da ação em toda a página (botão, barra da seção ativa). */
.nav-c a:hover,.nav-r a:hover{color:var(--acc);opacity:1}
/* barra de 2px no topo marca a seção em que o scroll está, como na referência.
   ela não é hover: hover é só a queda de opacidade. */
.nav-c a::after,.nav-r a::after{content:"";position:absolute;top:0;left:0;width:100%;
  height:2px;background:var(--acc);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .2s cubic-bezier(.25,.1,.25,1)}
.nav-c a.on::after,.nav-r a.on::after{transform:scaleY(1)}
/* o header inteiro desce ao carregar, antes do texto da hero */
.nav-in{animation:navIn .6s cubic-bezier(.25,.1,.25,1) both}
@keyframes navIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
/* alvos de âncora não podem ficar debaixo da barra */
#what,#work,#proof,#talk{scroll-margin-top:var(--nav-h)}
@media(max-width:1259px){.nav-c a,.nav-r a{font-size:15px;line-height:22px}}
@media(max-width:860px){
  .nav-in{grid-template-columns:1fr auto}
  .nav-c{display:none}
  .brand img{height:28px}
}

/* ============================ HERO ============================ */
/* Como na referência: a hero não rola. Ela fica presa no topo e as seções
   seguintes sobem por cima, cobrindo-a de baixo para cima. */
.hero{position:sticky;top:0;z-index:0;min-height:100svh;color:var(--fg);
      display:flex;flex-direction:column;overflow:hidden;padding-top:var(--nav-h);
      /* A ilustração É o fundo da hero, como na referência: largura total, ancorada
         embaixo. O topo do PNG já é #162CB6 exato, então a cor de fundo do CSS
         continua a imagem sem emenda em qualquer altura de tela. Nada por cima,
         nenhum recorte, nenhuma máscara. */
      background:var(--bg) url("../img/hero-opcoes/hero-f-azul.png") no-repeat center bottom;
      background-size:100% auto}
.hero-in{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;
         align-items:center;justify-content:center;text-align:center;
         padding:24px var(--pad) calc(100vw * (1 - 0.45) / 1.777 * var(--hero-drop))}
.hero .eb{color:var(--soft);font-weight:400;font-size:clamp(14px,1.15vw,17px);
          margin-bottom:clamp(20px,2.6vh,32px)}
/* ENTRADA DA HERO: a imagem aparece primeiro, o texto sobe depois de trás de
   uma máscara (overflow:hidden), como na referência. Valores medidos no
   staylime: translateY(20px) + opacidade, .6s, cubic-bezier(.25,.1,.25,1). */
.mask{overflow:hidden;padding-bottom:6px;margin-bottom:-6px}
.up{opacity:0;transform:translateY(20px);
    animation:textUp .6s cubic-bezier(.25,.1,.25,1) forwards}
@keyframes textUp{to{opacity:1;transform:translateY(0)}}
/* a opacidade de repouso mora na MÁSCARA, nunca no elemento animado: em .eb ela
   sobrescrevia o opacity:0 do .up por especificidade e o texto nascia visível. */
.hero .mask-eb{opacity:.82}
/* eyebrow e as duas linhas do título sobem no MESMO instante. o botão depois. */
/* o wrapper carrega a ENTRADA; o <a> carrega o HOVER. se os dois ficarem no mesmo
   elemento, a animação com forwards trava o transform e o scale do hover não roda. */
.hero .eb.up,
.hero h1 .up{animation-delay:.35s}
.hero .pill-in{display:inline-block;animation-delay:.65s}
.hero h1{max-width:16ch;display:flex;flex-direction:column;align-items:center}
.hero h1 .mask,.hero h1 .up{display:block}
.hero .pill-in{display:inline-block}
.hero h1 em{font-style:normal;color:inherit}
.hero .pill-in{margin-top:clamp(28px,3.6vh,46px)}

/* .art continua existindo só na seção do formulário */
.art{position:absolute;left:0;right:0;bottom:0;height:100%;z-index:1;overflow:hidden;pointer-events:none}
.art svg{width:100%;height:100%}

/* todo irmão posterior à hero sobe por cima dela */
body > section,body > footer,body > .mq{position:relative;z-index:1}

/* ==================== POSICIONAMENTO ==================== */
.pos{padding:clamp(80px,11vh,150px) 0 clamp(60px,8vh,100px);background:var(--paper)}
.pos h2{font-size:clamp(30px,4.4vw,66px);max-width:32ch;color:var(--bg);
        text-wrap:pretty}
.pos h2 em{font-style:normal;color:inherit}
.caps{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,5vw,90px);
      margin-top:clamp(84px,12vh,150px);max-width:900px;margin-inline:auto}
.caps .lbl{grid-column:1/-1;color:var(--ink);margin-bottom:18px}
.caps a{font-size:clamp(21px,1.8vw,27px);font-weight:400;color:var(--ink-mut);padding:11px 0;
        border-bottom:1px solid var(--line);transition:.22s;display:block}
.caps a:hover{color:var(--ink);padding-left:10px}
@media(max-width:700px){.caps{grid-template-columns:1fr;margin-left:0}}

/* ==================== AUTORIDADE + NÚMEROS ==================== */
.auth{padding:clamp(30px,4vh,56px) 0 clamp(70px,10vh,130px);background:var(--paper)}
/* mesma coluna do bloco "What we produce": 900px centrados, texto à esquerda,
   terminando na mesma linha da direita. */
.auth p{font-size:clamp(22px,2.2vw,32px);line-height:1.32;letter-spacing:-.028em;
        max-width:900px;margin:0 auto;color:var(--ink);text-wrap:pretty}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3.4vw,54px);
      margin-top:clamp(70px,10vh,130px);text-align:center}
.nums div{border-top:1px solid var(--line);padding-top:22px}
.nums b{display:block;font-weight:500;font-size:clamp(42px,5.2vw,84px);letter-spacing:-.05em;
        line-height:.98;color:var(--ink)}
.nums span{display:block;margin-top:12px;font-size:clamp(14px,1.05vw,16px);
           color:var(--ink-mut);line-height:1.4;max-width:22ch;margin-inline:auto}
@media(max-width:780px){.nums{grid-template-columns:1fr}}

/* ==================== MARQUEE ==================== */
.mq{overflow:hidden;white-space:nowrap;padding:clamp(14px,2.2vh,26px) 0;user-select:none}
.mq-t{display:inline-block;font-size:clamp(52px,8.4vw,128px);font-weight:500;
      letter-spacing:var(--tr-d);line-height:1;animation:slide 34s linear infinite}
.mq.light{background:var(--paper);color:#EDEFF4}
.mq.dark{background:var(--bg);color:#4756B3}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==================== CASES / CATEGORIAS ==================== */
.work{padding:clamp(70px,10vh,130px) 0 clamp(70px,9vh,120px);background:var(--paper)}
.work-h{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
        margin-bottom:clamp(34px,5vh,60px);flex-wrap:wrap}
.work-h h2{max-width:15ch;color:var(--ink)}
.work-h p{font-size:clamp(18px,1.45vw,23px);line-height:1.45;letter-spacing:-.015em;
          color:var(--ink-mut);max-width:34ch}

.case{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,68px);
      align-items:center;padding:clamp(26px,4vh,52px) 0;border-top:1px solid var(--line)}
.case:nth-child(even) .case-art{order:2}
.case:nth-child(even) .case-side{order:1}
@media(max-width:900px){.case{grid-template-columns:1fr}
  .case:nth-child(even) .case-art,.case:nth-child(even) .case-side{order:initial}}

/* placeholder de arte da categoria */
.case-art{position:relative;border-radius:16px;overflow:hidden;
          background:var(--ph-bg,#111827);display:flex;flex-direction:column;
          gap:clamp(16px,1.8vw,26px);padding:clamp(20px,2.4vw,34px)}
/* grade das peças reais da categoria */
.ca-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(7px,.7vw,11px)}
/* categoria com 2 peças: 2 colunas. as peças ficam maiores e o card fica
   naturalmente mais baixo, em vez de exibir buracos. */
.ca-grid.ca-2{grid-template-columns:repeat(2,1fr)}
/* sequência de edição: quadros deitados, 2x2, numerados na ordem do passo */
/* Sequência: original na fileira de cima, 01·02 na segunda, 03·04 na terceira.
   Espaçamentos mais curtos que os outros cards, porque aqui são 3 fileiras. */
.ca-grid.ca-seq{grid-template-columns:repeat(2,1fr);gap:clamp(5px,.5vw,7px)}
.case-art.is-seq{gap:clamp(9px,.9vw,13px)}
.ca-seq figure{position:relative;margin:0;line-height:0}
.ca-seq figure:first-child{grid-column:1/-1}
/* especificidade maior que .ca-grid img, senão a regra genérica (3:4 + contain)
   vence por ordem e as fotos deitadas ficam boiando numa caixa em pé. */
.ca-grid.ca-seq img{width:100%;aspect-ratio:16/9;object-fit:cover;
                    object-position:center;border-radius:3px;display:block}
.ca-seq b{position:absolute;left:11px;top:11px;font-family:var(--mono);font-weight:400;
          font-size:clamp(14px,1.25vw,19px);letter-spacing:.08em;line-height:1;
          padding:7px 11px;border-radius:4px;background:var(--ph-bg);color:var(--acc)}
.ca-seq figure:first-child b{color:var(--ph-fg)}
/* contain, não cover: as peças têm formatos diferentes (retrato, quadrada,
   paisagem) e cortar destruía até 50% das paisagens. Assim cada uma aparece
   inteira, e a diferença de formato vira prova da variedade que a página vende. */
.ca-grid img{width:100%;aspect-ratio:3/4;object-fit:contain;object-position:center;
             border-radius:3px;display:block;background:transparent}
/* todos os cards no azul da marca: são cinco categorias do MESMO estúdio, não
   cinco clientes diferentes. o ritmo vem da alternância de LADO dos blocos.
   o neon fica como faísca no rótulo, nunca como superfície. */
.case-art{--ph-bg:var(--bg);--ph-fg:var(--soft);--ph-line:rgba(168,255,143,.26)}
.case-art .lbl{color:var(--acc);opacity:1;font-size:clamp(12px,1vw,14px)}
.case-art .lbl{color:var(--ph-fg);opacity:.75}
.case-art h3{color:var(--ph-fg);max-width:18ch;margin-top:12px;
             font-size:clamp(22px,2.05vw,32px)}
.case-art .ph-note{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
                   text-transform:uppercase;color:var(--ph-fg);opacity:.5}
.ships{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.ships span{font-size:12px;padding:5px 11px;border-radius:100px;
            border:1px solid var(--ph-line);color:var(--ph-fg);opacity:.85;
            font-size:clamp(13px,1.05vw,15px);padding:6px 13px}

/* painel de medição — ocupa o lugar do depoimento da referência */
.case-side .lbl{color:var(--ink-mut);margin-bottom:16px;font-size:clamp(12px,1vw,14px)}
.case-side h3{color:var(--ink);max-width:19ch;margin-bottom:20px;
              font-size:clamp(25px,2.55vw,40px);line-height:1.06}
.case-side>p{font-size:clamp(17px,1.32vw,21px);line-height:1.5;color:var(--ink-mut);max-width:44ch}
.meas{margin-top:22px;border-top:1px solid var(--line)}
.meas div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
          padding:14px 0;border-bottom:1px solid var(--line)}
.meas span{font-size:clamp(15px,1.15vw,17px);color:var(--ink-mut)}
.meas b{font-family:var(--mono);font-weight:400;font-size:clamp(14px,1.1vw,16px);color:var(--ink)}

/* ==================== FORM ==================== */
.talk{position:relative;background:var(--bg);padding:clamp(70px,10vh,130px) 0;overflow:hidden}
.talk-card{position:relative;z-index:2;background:var(--paper);border-radius:20px;
           padding:clamp(30px,4.6vw,68px);max-width:760px;margin:0 auto}
.talk-card h2{color:var(--ink);margin-bottom:12px}
.talk-card>p{font-size:17px;color:var(--ink-mut);margin-bottom:clamp(26px,3.4vh,40px)}
.f{display:flex;flex-direction:column;gap:12px}
.f input,.f textarea{font:inherit;font-size:16px;letter-spacing:var(--tr-b);background:var(--paper-2);
     border:1px solid transparent;border-radius:11px;padding:16px 18px;color:var(--ink);transition:.2s}
.f input:focus,.f textarea:focus{outline:0;border-color:var(--ink);background:var(--paper)}
.f textarea{min-height:132px;resize:vertical}
.f .fine{font-size:12px;line-height:1.5;color:var(--ink-mut);margin-top:4px}
.f button{align-self:flex-start;margin-top:10px;font:inherit;font-weight:500;font-size:20px;
     display:inline-flex;align-items:center;justify-content:center;line-height:1;
     min-height:48px;padding:0 30px;background:var(--acc);color:var(--on-acc);border:0;
     border-radius:50px;cursor:pointer;transition:transform .17s cubic-bezier(.25,.1,.25,1)}
.f button:hover{transform:scale(1.04,1.04)}
.f button[disabled]{opacity:.55;cursor:wait;transform:none}
.f .err{font-size:15px;color:#C2321F;margin-top:4px;display:none}
.f.has-error .err{display:block}
/* tela de sucesso, como na referência ("You made our day!") */
.talk-done{display:none}
.talk-card.done .f{display:none}
.talk-card.done .talk-done{display:block}
.talk-done h3{color:var(--ink);font-size:clamp(24px,2.4vw,36px);margin-bottom:12px}
.talk-done p{font-size:17px;color:var(--ink-mut);max-width:44ch}
.f button:active{transform:scale(1,1)}

/* ==================== FOOTER ==================== */
footer{background:var(--bg);color:var(--fg);padding:clamp(64px,9vh,110px) 0 34px;
       border-top:1px solid var(--line-d);text-align:center}
/* rodapé enxuto: contato e jurídico. sem logo (o header fixo já o mostra o tempo
   todo) e sem slogan (competia com o "Let's talk." do formulário logo acima). */
.f-top{display:flex;flex-direction:column;align-items:center;gap:clamp(26px,3.2vh,44px)}
.f-top a.mail{font-size:clamp(26px,3.4vw,52px);font-weight:500;letter-spacing:var(--tr-d);
              color:var(--soft);line-height:1.1;transition:color .18s cubic-bezier(.25,.1,.25,1)}
.f-top a.mail:hover{color:var(--acc)}
.social{display:flex;gap:24px}
.social a{display:inline-flex;color:var(--soft);
          transition:color .18s cubic-bezier(.25,.1,.25,1),transform .18s}
.social a:hover{color:var(--acc);transform:translateY(-2px)}
.social svg{width:30px;height:30px;fill:currentColor;display:block}
/* assinatura: uma linha discreta. em corpo grande ela vira segunda manchete e
   compete com o "Let's talk." do formulário logo acima. */
.f-bot{margin-top:clamp(56px,7vh,96px);font-size:14px;color:var(--soft);opacity:.6}
@media(max-width:700px){.f-top{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .up{opacity:1;transform:none}
  .nav-in{animation:none}
}

/* ============================================================
   PÁGINA ABOUT
   ============================================================ */
/* cabeçalho: texto à esquerda, ilustração à direita, como no About da referência.
   o fundo do JPEG é #162CB6 exato, então ele encosta na seção sem emenda. */
/* mesmo mecanismo da hero: o cabeçalho não rola, fica preso no topo e as seções
   seguintes sobem por cima, cobrindo-o de baixo para cima. */
.pg-head{position:sticky;top:0;z-index:0;
         background:var(--bg);color:var(--fg);padding:calc(var(--nav-h) + clamp(56px,8vh,110px))
         0 clamp(56px,8vh,110px)}
.pg-head .c{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,70px);align-items:center}
.pg-head .pg-txt{min-width:0}
.pg-head img{width:100%;height:auto;display:block;border-radius:14px}
@media(max-width:900px){
  .pg-head .c{grid-template-columns:1fr}
  .pg-head img{max-width:560px}
}
/* entrada do cabeçalho, mesma curva e distância da hero.
   ATENÇÃO: .up nunca no mesmo elemento que já tem opacity própria — a regra
   base vence o opacity:0 inicial e a animação não acontece (bug do eyebrow). */
.d1{animation-delay:.30s}
.d2{animation-delay:.40s}
.d3{animation-delay:.50s}
.d4{animation-delay:.62s}
.pg-head .crumb{font-family:var(--mono);font-size:12px;letter-spacing:var(--tr-l);
                text-transform:uppercase;color:var(--soft);opacity:.6;margin-bottom:clamp(22px,3vh,38px)}
.pg-head .crumb a:hover{color:var(--acc)}
.pg-head h1{font-size:clamp(46px,7vw,104px);color:var(--acc);max-width:14ch}
.pg-head p{margin-top:clamp(22px,2.8vh,36px);font-size:clamp(18px,1.6vw,26px);
           line-height:1.42;color:var(--soft);max-width:44ch}

.sec-light{background:var(--paper);padding:clamp(70px,10vh,130px) 0}
.sec-light .lbl{color:var(--ink);margin-bottom:clamp(24px,3vh,40px);display:block}
.mission h2{font-size:clamp(30px,4.4vw,66px);max-width:30ch;color:var(--bg);text-wrap:pretty}

/* três parágrafos "It's the …" — coluna à direita, como na referência.
   o fundo BRANCO mora na section de largura total; o .c só limita o conteúdo.
   se o fundo ficasse no .c, sobrariam faixas laterais mostrando o azul preso atrás. */
.creed-sec{background:var(--paper);padding:clamp(70px,10vh,130px) 0}
/* o título acompanha a leitura em vez de ficar parado no topo: com 4 parágrafos
   na direita, a esquerda sobrava quase mil pixels de vazio. */
.creed{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(30px,5vw,90px)}
.creed h2{font-size:clamp(28px,3.5vw,52px);color:var(--ink);max-width:15ch;
          align-self:start;position:sticky;top:calc(var(--nav-h) + clamp(28px,5vh,64px))}
@media(max-width:900px){.creed h2{position:static}}
.creed .body p{font-size:clamp(17px,1.32vw,21px);line-height:1.6;color:var(--ink-mut);
               margin-bottom:clamp(20px,2.4vh,30px);max-width:46ch}
.creed .body p:last-child{margin-bottom:0}
.creed .body b{font-weight:500;color:var(--ink)}
@media(max-width:900px){.creed{grid-template-columns:1fr}}

/* faixa azul: o argumento estrutural */
.sec-dark{background:var(--bg);color:var(--fg);padding:clamp(70px,10vh,130px) 0}
.sec-dark .lbl{color:var(--acc);margin-bottom:clamp(22px,2.8vh,36px);display:block}
.sec-dark h2{font-size:clamp(28px,3.6vw,54px);color:var(--soft);max-width:19ch}
.sec-dark p{margin-top:clamp(22px,2.6vh,34px);font-size:clamp(17px,1.32vw,21px);
            line-height:1.55;color:var(--soft);opacity:.86;max-width:52ch}

/* time */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);
      margin-top:clamp(44px,6vh,80px)}
.team div{border-top:1px solid var(--line);padding-top:20px}
.team b{display:block;font-weight:500;font-size:clamp(20px,1.8vw,28px);letter-spacing:-.03em;
        color:var(--ink)}
.team span{display:block;margin-top:8px;font-size:clamp(14px,1.05vw,16px);color:var(--ink-mut);
           line-height:1.4}
.team a{color:var(--bg);border-bottom:1px solid var(--line);transition:.2s}
.team a:hover{border-color:var(--bg)}
@media(max-width:780px){.team{grid-template-columns:1fr}}