/* ============================================================================

   JIREH CLEANING REMEDIES — FOLHA DE ESTILO ÚNICA

   Um arquivo só, de propósito: CSS bloqueia a renderização, e vários arquivos
   custam requisições que derrubam o PageSpeed. Em troca, o arquivo é numerado.
   Busque pelo número da seção (ex.: "06.") para saltar direto ao bloco.

   ÍNDICE
   ---------------------------------------------------------------------------
   00. FONTES ............... @font-face locais, subset latin
   01. TOKENS ............... cores, tipos, sombras, curvas de animação
   02. RESET E BASE ......... normalização e padrões do documento
   03. TIPOGRAFIA ........... escala de títulos, corpo, rótulos
   04. LAYOUT ............... container, seções, respiro vertical
   05. ANIMAÇÃO ............. revelação por palavra e fade de entrada
   06. MENU ................. cápsula flutuante + painel mobile
   07. HERO ................. vídeo, véu de contraste, H1/H2/CTA
   08. MARQUEE .............. faixa de serviços em rolagem
   09. BOTÕES ............... variantes sólido, contorno e fantasma
   10. SEÇÃO ABOUT .......... segunda dobra, copy original do site
   11. SEÇÃO SERVICES ....... 9 serviços, 6 visíveis + "View all"
   12. SEÇÃO GALLERY ........ faixa horizontal com 14 fotos reais
   13. SEÇÃO CONTACT ........ contato + botões que saem para a GoDaddy
   14. RODAPÉ ............... ponte em degradê + wordmark fantasma
   15. INSTITUCIONAL ........ componentes exclusivos de /about/ (perfil corp.)
   99. ACESSIBILIDADE ....... foco visível e movimento reduzido

   NOTA SOBRE TEMA
   O site é claro por decisão, não por omissão. Não há tema escuro: a marca
   pediu sensação de limpeza e o escuro só entra no degradê do fim da página.
   Todas as cores são pintadas explicitamente, então a página não herda nada
   do navegador do visitante.

   ========================================================================== */


/* ============================================================================
   00. FONTES — hospedadas aqui, não no Google
   ----------------------------------------------------------------------------
   Antes vinham de fonts.googleapis.com, que custava: uma folha de estilo de
   terceiro BLOQUEANDO a renderização, mais DNS e TLS para dois domínios
   (googleapis e gstatic) antes de a primeira letra aparecer.

   Aqui os arquivos saem do mesmo servidor do site. Só o subset LATIN — o
   texto é todo em inglês, e cyrillic, greek e vietnamese seriam peso morto.

   font-display: swap — o texto aparece de imediato na fonte de sistema e
   troca quando a fonte chega. Ninguém encara tela em branco.

   Instrument Sans é VARIÁVEL: um arquivo só cobre 400, 500 e 600. Por isso
   a declaração usa faixa de peso em vez de três blocos iguais.

   Para trocar de fonte: baixe os woff2 em assets/fonts/, ajuste os blocos
   abaixo e o token --display ou --sans no bloco 01.
   ========================================================================== */
@font-face{
  font-family: "Instrument Serif";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-serif-400.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family: "Instrument Serif";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-serif-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family: "Instrument Sans";
  font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/instrument-sans-var.woff2") format("woff2-variations"),
       url("../fonts/instrument-sans-var.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family: "IBM Plex Mono";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family: "IBM Plex Mono";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


/* ============================================================================
   01. TOKENS
   ----------------------------------------------------------------------------
   Cores amostradas do arquivo original do logo. Mudar um valor aqui muda o
   site inteiro. Não escreva cor solta fora deste bloco.
   ========================================================================== */
:root{
  /* --- fundo e superfície ------------------------------------------------ */
  --paper:        #F7FAFB;   /* fundo geral da página                        */
  --surface:      #FFFFFF;   /* cards, cápsula do menu, faixas alternadas    */
  --surface-2:    #EFF5F8;   /* trilho do menu, cabeçalho de tabela          */
  --line:         #DCE7EC;   /* divisores de 1px                             */
  --line-strong:  #C3D5DE;   /* borda de card em hover                       */

  /* --- tinta (preto-azulado, nunca cinza puro) --------------------------- */
  --ink:          #12232E;   /* texto principal            — 14,8:1 no papel  */
  --ink-soft:     #3A5464;   /* texto de apoio             —  7,9:1  AAA      */
  --muted:        #5C7182;   /* SÓ ícone, borda, divisor   —  5,1:1  só AA    */
  --faint:        #8CA0AD;   /* NUNCA COMO TEXTO           —  2,7:1  reprova  */

  /*  ⚠️ REGRA DE TEXTO — medida, não estimada
      Para texto abaixo de 24px sobre fundo claro, use --ink ou --ink-soft.
      --muted passa em AA (5,1:1) mas não em AAA (precisa 7:1).
      --faint dá 2,7:1 e REPROVA ATÉ EM AA — ele existe para ícone decorativo
      e divisor, nunca para palavra que alguém precise ler.               */

  /* --- marca (extraída do logo) ------------------------------------------ */
  --water:        #1466A8;   /* azul da gota — PREENCHIMENTO (botão, ícone)  */
  --water-deep:   #0C3F6B;   /* o mesmo azul, para TEXTO   — 10,8:1  AAA     */
  /*  --water como texto em fundo claro dá 6,0:1: passa em AA, não em AAA.
      Por isso a divisão: --water preenche superfície, --water-deep escreve. */
  --water-wash:   #E7F1F8;   /* fundo de destaque bem claro                  */
  --verdigris:    #09A888;   /* teal da folha — só preenche, nunca escreve   */
  --verdigris-wash:#E2F7F2;

  /* --- profundidade (só no degradê final e no rodapé) -------------------- */
  --depth:        #0B2860;
  --ramp-1:       #9FC4DC;   /* paradas intermediárias do degradê claro→azul */
  --ramp-2:       #2A5F8E;

  /* --- elevação ---------------------------------------------------------- */
  --lift-1: 0 1px 2px rgba(18,35,46,.05), 0 1px 1px rgba(18,35,46,.04);
  --lift-2: 0 4px 12px rgba(18,35,46,.06), 0 1px 3px rgba(18,35,46,.04);
  --lift-3: 0 16px 48px rgba(12,63,107,.10), 0 4px 12px rgba(18,35,46,.05);
  /* sombra em camadas da cápsula do menu — modelo savory-plate */
  --lift-capsule:
    0 0 0 1px rgba(18,35,46,.05),
    0 1px 1px -.5px rgba(18,35,46,.05),
    0 3px 3px -1.5px rgba(18,35,46,.05),
    0 6px 6px -3px rgba(18,35,46,.05),
    0 12px 12px -6px rgba(18,35,46,.05),
    0 24px 24px -12px rgba(18,35,46,.05);

  /* --- movimento --------------------------------------------------------- */
  --ease-out:  cubic-bezier(.16,1,.3,1);   /* entrada de conteúdo           */
  --ease-soft: cubic-bezier(.33,1,.68,1);  /* mudança de estado             */
  --t-fast:   180ms;
  --t-base:   340ms;
  --t-slow:   640ms;
  --t-reveal: 1100ms;

  /* --- tipografia -------------------------------------------------------- */
  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- medidas ----------------------------------------------------------- */
  --container: 1180px;
  --gutter:    24px;
  --nav-h:     68px;
}
@media (min-width: 768px){
  :root{ --gutter: 40px; }
}


/* ============================================================================
   02. RESET E BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  /* o menu é fixo: âncoras precisam parar abaixo dele */
  scroll-padding-top: calc(var(--nav-h) + 28px);
}

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video{ display: block; max-width: 100%; height: auto; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; cursor: pointer; }
h1, h2, h3, h4{ margin: 0; text-wrap: balance; }
p{ margin: 0; }
ul{ margin: 0; padding: 0; list-style: none; }


/* ============================================================================
   03. TIPOGRAFIA
   ----------------------------------------------------------------------------
   Display em Instrument Serif, corpo em Instrument Sans, rótulos em mono.
   Para voltar ao Playfair Display, troque --display no bloco 01.
   ========================================================================== */
.t-display-xl{
  font-family: var(--display); font-weight: 400;
  font-size: clamp(3rem, 9vw, 6.5rem); line-height: .92;
  letter-spacing: -.028em;
}
.t-display-l{
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.06;
  letter-spacing: -.018em;
}
.t-lede{
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.7; color: var(--ink-soft);
  max-width: 62ch;
}
.t-label{
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--water-deep);
}
.t-meta{
  font-family: var(--mono); font-size: .72rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}


/* ============================================================================
   04. LAYOUT
   ========================================================================== */
.container{
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--gutter);
}
.section{ padding-block: clamp(64px, 9vw, 112px); }
.section--tight{ padding-block: clamp(40px, 5vw, 64px); }
.section--surface{ background: var(--surface); }


/* ============================================================================
   05. ANIMAÇÃO
   ----------------------------------------------------------------------------
   Sem biblioteca. IntersectionObserver adiciona .is-in, o CSS faz o resto.
   O estado escondido depende da classe .js no <html>: se o JavaScript não
   rodar, o conteúdo aparece normalmente em vez de sumir.
   ========================================================================== */
.reveal-line{ display: inline-flex; overflow: hidden; vertical-align: top; }
.js .reveal-word{
  display: inline-block; transform: translateY(112%);
  transition: transform var(--t-reveal) var(--ease-out);
}
.js .is-in .reveal-word{ transform: translateY(0); }

.js .rise{
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}
.js .is-in.rise, .js .is-in .rise{ opacity: 1; transform: none; }


/* ============================================================================
   06. MENU
   ----------------------------------------------------------------------------
   Cápsula flutuante destacada do topo, com trilho segmentado embutido para
   os links — modelo savory-plate. Os links viram pílulas brancas no hover.
   Hambúrguer aparece SÓ abaixo de 900px; no desktop o menu fica sempre aberto.
   O painel mobile é CSS puro (checkbox + :checked), sem JavaScript.
   ========================================================================== */
.nav{
  position: fixed; top: 16px; left: 0; right: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center;
  padding-inline: 16px;
}
.nav__toggle{ position: absolute; opacity: 0; pointer-events: none; }

.nav__bar{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; max-width: var(--container);
  padding: 8px; border-radius: 999px;
  background: rgba(255,255,255,.74);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: var(--lift-capsule);
  transition: background var(--t-base) var(--ease-soft),
              box-shadow var(--t-base) var(--ease-soft);
}
/* ao rolar, a cápsula fica um pouco mais sólida */
.nav.is-scrolled .nav__bar{
  background: rgba(255,255,255,.9);
  box-shadow: var(--lift-capsule), 0 2px 14px rgba(12,63,107,.07);
}

/* --- marca dentro da cápsula ------------------------------------------- */
.nav__brand{ display: flex; align-items: center; gap: 10px; padding-inline: 10px; flex: none; }
.nav__brand img{ width: 26px; height: 30px; object-fit: contain; }
.nav__brand b{
  font-size: .82rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink);
}
.nav__brand small{
  display: block; font-size: .53rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 500; line-height: 1.3;
}

/* --- trilho segmentado (o detalhe do savory-plate) ---------------------- */
.nav__track{
  display: none;
  background: var(--surface-2);
  border-radius: 999px; padding: 4px;
  box-shadow: inset 0 0 0 1px rgba(18,35,46,.04);
}
@media (min-width: 900px){ .nav__track{ display: flex; align-items: center; } }
.nav__track a{
  padding: 8px 18px; border-radius: 999px;
  font-size: .7rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
  transition: background var(--t-base) var(--ease-soft),
              color var(--t-base) var(--ease-soft),
              box-shadow var(--t-base) var(--ease-soft);
}
.nav__track a:hover,
.nav__track a[aria-current="true"]{
  background: var(--surface); color: var(--ink); box-shadow: var(--lift-1);
}

/* --- ações à direita ---------------------------------------------------- */
.nav__actions{ display: flex; align-items: center; gap: 8px; flex: none; padding-right: 2px; }
.nav__phone{
  display: none; font-family: var(--mono); font-size: .74rem;
  color: var(--ink-soft); padding: 5px 10px;
  font-variant-numeric: tabular-nums;
  transition: color var(--t-fast);
}
.nav__phone:hover{ color: var(--water-deep); }
@media (min-width: 1080px){ .nav__phone{ display: block; } }

/* FLEX, não grid. No grid as linhas automáticas esticam para preencher a
   altura do botão e espalham as barras ~14px, então o translateY(±5.5px)
   do X não alcança o centro e o ícone fecha torto. Com flex + gap fixo, o
   espaçamento é exatamente 5,5px (1,5 da barra + 4 do gap) e o X fecha. */
.nav__burger{
  width: 42px; height: 42px; border-radius: 999px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  background: transparent; border: 0;
  transition: background var(--t-fast);
}
.nav__burger:hover{ background: var(--surface-2); }
@media (min-width: 900px){ .nav__burger{ display: none; } }
.nav__burger span:not(.sr-only){
  display: block; width: 17px; height: 1.5px; background: var(--ink);
  border-radius: 2px; flex: none;
  transition: transform var(--t-base) var(--ease-soft),
              opacity var(--t-fast);
}
.nav__toggle:checked ~ .nav__bar .nav__burger span:nth-child(1){ transform: translateY(5.5px) rotate(45deg); }
.nav__toggle:checked ~ .nav__bar .nav__burger span:nth-child(2){ opacity: 0; }
.nav__toggle:checked ~ .nav__bar .nav__burger span:nth-child(3){ transform: translateY(-5.5px) rotate(-45deg); }

/* --- painel mobile ------------------------------------------------------ */
.nav__panel{
  display: none;
  width: 100%; max-width: var(--container);
  margin-top: 8px; padding: 10px;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 26px; box-shadow: var(--lift-3);
}
.nav__toggle:checked ~ .nav__panel{ display: block; }
@media (min-width: 900px){ .nav__toggle:checked ~ .nav__panel{ display: none; } }
.nav__panel a{
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px; border-radius: 14px;
  font-size: .78rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
  transition: background var(--t-fast), color var(--t-fast);
}
.nav__panel a:hover{ background: var(--surface-2); color: var(--ink); }
.nav__panel a::after{ content: "→"; color: var(--faint); transition: transform var(--t-base) var(--ease-out); }
.nav__panel a:hover::after{ transform: translateX(4px); color: var(--water); }
.nav__panel-foot{
  margin-top: 6px; padding: 14px 18px 6px; border-top: 1px solid var(--line);
  display: grid; gap: 4px;
}
.nav__panel-foot a{ padding: 0; text-transform: none; letter-spacing: 0; font-family: var(--mono); font-size: .76rem; }
.nav__panel-foot a::after{ content: none; }


/* ============================================================================
   07. HERO
   ----------------------------------------------------------------------------
   Vídeo ao fundo (o teaser), véu branco por cima e conteúdo alinhado à base
   — disposição modelada no bloomava.

   O VÉU NÃO É DECORAÇÃO. É requisito de legibilidade: a luminância do vídeo
   muda entre as três cenas do loop, e medido no pixel mais escuro o texto
   escuro sem véu dá 0,8:1. O degradê de baixo garante no mínimo 72% de branco
   na faixa onde o texto vive, o que sustenta AAA em qualquer quadro.
   Se mudar o vídeo, REMEÇA o contraste antes de publicar.
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--paper);
}
.hero__media{ position: absolute; inset: 0; z-index: 0; }
.hero__media video,
.hero__media img{
  width: 100%; height: 100%; object-fit: cover;
}

/* --- véu de contraste ---------------------------------------------------
   NÃO REMOVER SEM REMEDIR. Calibrado para deixar o máximo de vídeo visível
   mantendo AAA (≥7:1) sobre o pixel mais escuro de qualquer quadro do loop.
   Na faixa do texto a opacidade fica em torno de 0,70–0,84, o que dá ~8,7:1
   no pior caso. Subir demais apaga o vídeo; baixar quebra a legibilidade.
   ---------------------------------------------------------------------- */
.hero__scrim{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.82) 12%,
      rgba(255,255,255,.70) 28%,
      rgba(255,255,255,.38) 44%,
      rgba(255,255,255,.10) 62%,
      rgba(255,255,255,0)   78%),
    linear-gradient(to right,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.08) 34%,
      rgba(255,255,255,0)   58%);
}
/* Véu próprio para tela estreita. NÃO é ajuste fino de estética.
   Abaixo de 880px o layout empilha, o bloco de texto fica muito mais alto no
   quadro e alcança a parte transparente do véu do desktop. Medido lá: a
   primeira linha do H1 cai para 1,96:1 — reprova até em AA. Aqui o degradê
   sobe para cobrir a altura que o texto realmente ocupa no celular.
   Custo consciente: menos vídeo visível no mobile. Legibilidade ganha. */
@media (max-width: 879px){
  .hero__scrim{
    background:
      linear-gradient(to top,
        rgba(255,255,255,.96) 0%,
        rgba(255,255,255,.91) 30%,
        rgba(255,255,255,.84) 52%,
        rgba(255,255,255,.58) 68%,
        rgba(255,255,255,.20) 82%,
        rgba(255,255,255,0)   93%);
  }
}

/* emenda com a marquee: o último fio precisa fechar em branco sólido,
   senão aparece uma linha de corte entre o hero e a faixa abaixo */
.hero::after{
  content: ""; position: absolute; z-index: 1; inset: auto 0 0 0; height: 64px;
  pointer-events: none;
  background: linear-gradient(to top, var(--surface), rgba(255,255,255,0));
}

.hero__inner{
  position: relative; z-index: 2;
  width: 100%;
  padding-block: 0 clamp(48px, 7vw, 88px);
  display: grid; gap: 28px;
}
@media (min-width: 880px){
  .hero__inner{ grid-template-columns: 1.5fr 1fr; align-items: end; gap: 48px; }
}

/* --- H1 em três linhas ---------------------------------------------------
   As duas primeiras são construções paralelas e têm o mesmo peso. A terceira
   é o desfecho e vem menor, senão o bloco cresce demais e sobe para a parte
   do quadro onde o véu é mais fraco — o que quebraria o contraste.
   Os tamanhos abaixo mantêm a altura total do bloco praticamente igual à da
   versão de duas linhas. Ver o comentário do véu antes de aumentá-los.
   ---------------------------------------------------------------------- */
.hero__title{
  font-family: var(--display); font-weight: 400;
  /* entrelinha fechada não é só estética: encolhe o bloco e mantém a linha 1
     abaixo da faixa onde o véu enfraquece. Abrir isso derruba o contraste. */
  letter-spacing: -.028em; line-height: .88; color: var(--ink);
}
.hero__title .line-1,
.hero__title .line-2{
  display: block; font-size: clamp(2.2rem, 5.9vw, 4.15rem);
}
/* --water-deep, NÃO --water. Medido: o azul claro da marca sobre o hero dá
   2,5:1 e reprova até em AA. Ele funciona sobre o papel liso (5,6:1), mas o
   fundo aqui é vídeo sob véu, mais escuro que papel puro. O azul profundo
   resolve sem precisar reforçar o véu. */
.hero__title .line-1 em{ font-style: italic; color: var(--water-deep); }
.hero__title .line-3{
  display: block; margin-top: .38em;
  font-size: clamp(1.15rem, 2.5vw, 1.75rem);
  line-height: 1.15; letter-spacing: -.012em;
}

/* O parágrafo do hero usa --ink, não --ink-soft como no resto do site.
   Motivo medido: ele fica na parte alta do bloco de texto, onde o véu é mais
   fraco. Com --ink-soft o pior quadro do loop dá 3,5:1 — reprova em AA.
   Com --ink sobe para 7,3:1. Não trocar de volta. */
.hero__side p{ margin-bottom: 22px; color: var(--ink); }

/* indicador de rolagem */
.hero__scroll{
  position: absolute; z-index: 2; left: 50%; bottom: 16px;
  transform: translateX(-50%);
  font-family: var(--mono); font-size: .6rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--faint);
  display: flex; align-items: center; gap: 8px;
}
.hero__scroll i{
  display: block; width: 1px; height: 22px;
  background: linear-gradient(to bottom, var(--faint), transparent);
  animation: heroScroll 2.4s var(--ease-soft) infinite;
}
@keyframes heroScroll{
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (max-width: 879px){ .hero__scroll{ display: none; } }


/* ============================================================================
   08. MARQUEE
   ----------------------------------------------------------------------------
   Faixa logo abaixo do hero — modelo echelon. O conteúdo é duplicado e a
   animação anda exatamente -50%, por isso o loop não tem emenda. A segunda
   cópia é aria-hidden para o leitor de tela ouvir a lista uma vez só.
   Os nomes saem de JIREH.SERVICOS no config.js.
   ========================================================================== */
.marquee{
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--surface);
  padding-block: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{
  display: flex; width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{ animation-play-state: paused; }
.marquee__set{ display: flex; align-items: center; flex: none; }
.marquee__set span{
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.15rem, 2.4vw, 1.75rem);
  letter-spacing: -.012em; color: var(--ink-soft);
  padding-inline: 26px; white-space: nowrap;
}
.marquee__set i{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--verdigris); flex: none;
}
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }


/* ============================================================================
   09. BOTÕES
   ========================================================================== */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 24px; border-radius: 999px;
  font-family: var(--sans); font-size: .78rem; font-weight: 500; letter-spacing: .05em;
  border: 1px solid transparent; white-space: nowrap;
  transition: background var(--t-base) var(--ease-soft),
              color var(--t-base) var(--ease-soft),
              border-color var(--t-base) var(--ease-soft),
              transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-soft);
}
.btn:hover{ transform: translateY(-2px); }
.btn .arw{ transition: transform var(--t-base) var(--ease-out); }
.btn:hover .arw{ transform: translateX(4px); }

.btn--solid{ background: var(--water); color: #fff; }
.btn--solid:hover{ background: var(--water-deep); box-shadow: var(--lift-2); }

.btn--line{ border-color: var(--line-strong); color: var(--ink); background: rgba(255,255,255,.6); }
.btn--line:hover{ border-color: var(--water); color: var(--water); background: var(--surface); }

.btn--ghost{ border-color: rgba(255,255,255,.45); color: #fff; }
.btn--ghost:hover{ background: #fff; color: var(--depth); border-color: #fff; }

.btn--sm{ padding: 10px 18px; font-size: .72rem; }


/* ============================================================================
   10. SEÇÃO — ABOUT
   ----------------------------------------------------------------------------
   Segunda dobra, modelo bloomava: grade de 12 colunas, coluna de texto
   estreita e muito ar. O título fica numa coluna à parte que acompanha a
   rolagem no desktop, e os três blocos correm na coluna larga.

   A COPY É A ORIGINAL DO SITE ATUAL, palavra por palavra. Não reescrever.
   ========================================================================== */
.about__grid{ display: grid; gap: 40px; }
@media (min-width: 900px){
  /* 3fr/8fr, não 4fr/7fr: o card é horizontal e precisa de largura suficiente
     para a coluna de texto não cair abaixo de ~50 caracteres por linha. */
  .about__grid{ grid-template-columns: 3fr 8fr; gap: 56px; }
}

.about__aside h2{
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.04;
  letter-spacing: -.018em;
}
@media (min-width: 900px){
  .about__aside{ position: sticky; top: calc(var(--nav-h) + 40px); align-self: start; }
}
.about__rule{
  width: 52px; height: 2px; margin-top: 20px;
  background: var(--verdigris); border-radius: 2px;
}

.about__body{ display: grid; gap: 22px; }

/* --- card de tópico -------------------------------------------------------
   Empilhado na vertical (os três em coluna), mas horizontal por dentro no
   desktop: foto à esquerda, texto à direita. Vertical empilhado com foto em
   cima seria alto demais — três imagens 3:2 em largura total dariam uma
   seção de mais de 1400px.
   ------------------------------------------------------------------------ */
.about-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  transition: transform var(--t-slow) var(--ease-soft),
              box-shadow var(--t-slow) var(--ease-soft),
              border-color var(--t-slow) var(--ease-soft);
}
@media (min-width: 720px){
  .about-card{ grid-template-columns: 280px 1fr; }
}
.about-card:hover{
  transform: translateY(-5px);
  box-shadow: var(--lift-3);
  border-color: var(--line-strong);
}

.about-card__shot{
  position: relative; overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 3 / 2;
}
@media (min-width: 720px){
  /* no desktop a foto acompanha a altura do card, não uma proporção fixa */
  .about-card__shot{ aspect-ratio: auto; min-height: 100%; }
}
.about-card__shot img{
  width: 100%; height: 100%; object-fit: cover;
  /* o 1.01 evita fio branco na borda durante a transformação */
  transform: scale(1.01);
  transition: transform 1.05s var(--ease-out);
}
.about-card:hover .about-card__shot img{ transform: scale(1.06); }

/* Véu azulado que se dissolve no hover: passar o mouse "limpa" a imagem.
   É o único gesto do site que comenta o que a empresa faz — por isso é
   discreto e não se repete em outro componente. */
.about-card__shot::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(11,40,96,.14), rgba(11,40,96,.02) 58%);
  transition: opacity var(--t-slow) var(--ease-soft);
}
.about-card:hover .about-card__shot::after{ opacity: 0; }

.about-card__body{ padding: 26px 28px 30px; align-self: center; }
.about-card__body h3{
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.15;
  letter-spacing: -.014em; margin-bottom: 11px;
}
.about-card__body p{
  font-size: .97rem; line-height: 1.72; color: var(--ink-soft);
  /* 54ch, não 66ch. A unidade ch mede a largura do "0", que é mais larga que
     a letra média — 60ch entregava ~78 caracteres por linha, acima da faixa
     confortável de leitura. 54ch cai em ~68. */
  max-width: 54ch;
}


/* ============================================================================
   11. SEÇÃO — SERVICES
   ----------------------------------------------------------------------------
   Nove serviços. Seis visíveis, três atrás do botão "View all".

   Os três extras estão no HTML desde o início — só ficam ocultos. Isso importa
   por dois motivos: o Google indexa os nove, e sem JavaScript todos aparecem
   (o ocultamento depende da classe .js no <html>, igual às animações).

   Cards tipográficos, sem foto: a seção About logo acima já tem três cards com
   imagem, e repetir o padrão pesaria a página.
   ========================================================================== */
.services__head{ margin-bottom: 40px; }
.services__head h2{
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.04;
  letter-spacing: -.018em;
}
/* mesmo fio de verdete do About — amarra as duas seções */
.services__rule{
  width: 52px; height: 2px; margin-top: 20px;
  background: var(--verdigris); border-radius: 2px;
}

.services__grid{ display: grid; gap: 16px; }
@media (min-width: 620px){ .services__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px){ .services__grid{ grid-template-columns: repeat(3, 1fr); } }

.svc{
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 26px 24px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: transform var(--t-slow) var(--ease-soft),
              box-shadow var(--t-slow) var(--ease-soft),
              border-color var(--t-slow) var(--ease-soft),
              background var(--t-slow) var(--ease-soft);
}
.svc:hover{
  transform: translateY(-5px);
  box-shadow: var(--lift-3);
  border-color: var(--line-strong);
  background: var(--water-wash);
}
/* fio de verdete que cresce da esquerda — o teal preenche, nunca escreve */
.svc::before{
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--verdigris);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow) var(--ease-out);
}
.svc:hover::before{ transform: scaleX(1); }

.svc h3{
  font-family: var(--display); font-weight: 400;
  font-size: 1.32rem; line-height: 1.2; letter-spacing: -.012em;
  margin-bottom: 8px; text-wrap: balance;
}
.svc__meta{
  font-family: var(--mono); font-size: .74rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; margin-bottom: 20px;
}
.svc__go{
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 500; color: var(--water-deep);
}
.svc__go .arw{ transition: transform var(--t-base) var(--ease-out); }
.svc:hover .svc__go .arw{ transform: translateX(5px); }
/* o link cobre o card inteiro, mas o foco continua visível no elemento certo */
.svc__go::after{ content: ""; position: absolute; inset: 0; }
.svc:focus-within{ border-color: var(--water); }

/* --- os três extras ----------------------------------------------------- */
.js .svc--extra[hidden]{ display: none; }
.svc--extra{ animation: svcIn var(--t-slow) var(--ease-out) both; }
@keyframes svcIn{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: none; } }

.services__more{ display: flex; justify-content: center; margin-top: 28px; }
.js .services__more[hidden]{ display: none; }


/* ============================================================================
   12. SEÇÃO — GALLERY
   ----------------------------------------------------------------------------
   Faixa horizontal com rolagem por encaixe (scroll-snap), sangrando até a
   borda direita da tela para deixar claro que continua.

   Por que faixa e não grade: as seções About e Services acima já são grades.
   Uma terceira grade seguida vira monotonia — a faixa muda a textura da
   página e ainda é o gesto nativo no celular.

   Altura fixa, largura livre: as fotos são retrato e uma é paisagem. Em vez
   de cortar todas num formato só, a faixa acomoda as duas orientações.
   ========================================================================== */
.gallery__head{ margin-bottom: 36px; }
.gallery__head h2{
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.04;
  letter-spacing: -.018em;
}
.gallery__rule{
  width: 52px; height: 2px; margin-top: 20px;
  background: var(--verdigris); border-radius: 2px;
}

.gallery__strip{
  display: flex; gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* alinha o primeiro card com o container e sangra à direita */
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  scroll-padding-inline-start: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  padding-block: 4px 20px;
  /* barra de rolagem escondida sem perder a rolagem */
  scrollbar-width: none;
}
.gallery__strip::-webkit-scrollbar{ display: none; }

.gshot{
  position: relative; flex: none;
  height: clamp(300px, 44vh, 460px);
  border-radius: 14px; overflow: hidden;
  background: var(--surface-2);
  scroll-snap-align: start;
  border: 1px solid var(--line);
  transition: box-shadow var(--t-slow) var(--ease-soft),
              border-color var(--t-slow) var(--ease-soft);
}
.gshot img{
  height: 100%; width: auto; max-width: none; display: block;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 1.05s var(--ease-out);
}
.gshot:hover{ box-shadow: var(--lift-3); border-color: var(--line-strong); }
.gshot:hover img{ transform: scale(1.06); }
/* mesmo véu que se dissolve dos cards do About — mantém a gramática */
.gshot::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(11,40,96,.14), rgba(11,40,96,.02) 58%);
  transition: opacity var(--t-slow) var(--ease-soft);
}
.gshot:hover::after{ opacity: 0; }

/* --- setas, só no desktop ----------------------------------------------- */
.gallery__nav{ display: none; gap: 8px; }
@media (min-width: 900px){ .gallery__nav{ display: flex; } }
.gallery__head-row{
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
}
.gnav{
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); display: grid; place-items: center;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), opacity var(--t-fast);
}
.gnav:hover:not(:disabled){ background: var(--water); border-color: var(--water); color: #fff; }
.gnav:disabled{ opacity: .35; cursor: default; }


/* ============================================================================
   13. SEÇÃO — CONTACT
   ----------------------------------------------------------------------------
   Duas colunas: texto à esquerda, painel de ação à direita. Textura diferente
   das anteriores (About = cards, Services = grade, Gallery = faixa) para a
   página não repetir o mesmo gesto quatro vezes.

   O botão "Request A Quote!" SAI DO SITE. O formulário real é da GoDaddy e
   não pode ser embutido — eles enviam
     Content-Security-Policy: frame-ancestors 'self' godaddy.com ...
   que bloqueia iframe em qualquer outro domínio. Ver README.
   ========================================================================== */
.contact__grid{ display: grid; gap: 40px; }
@media (min-width: 900px){
  .contact__grid{ grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
}
.contact__lead h2{
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.04;
  letter-spacing: -.018em;
}
.contact__sub{
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.2;
  letter-spacing: -.012em; color: var(--water-deep);
  margin: 18px 0 14px;
}
.contact__rule{
  width: 52px; height: 2px; margin-top: 20px;
  background: var(--verdigris); border-radius: 2px;
}

/* --- painel de ação ----------------------------------------------------- */
.contact__panel{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 8px 26px 26px;
  box-shadow: var(--lift-2);
}
.contact__row{
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 14px; padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.contact__row:last-of-type{ border-bottom: 0; }
.contact__row dt{
  font-family: var(--mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
  flex: 0 0 100%;
}
.contact__row dd{
  margin: 0; font-size: 1.02rem; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.contact__row a{
  /* inline-block + padding: sem isso o alvo fica com 20px de altura e fica
     abaixo do mínimo de 24px do WCAG 2.5.8 para área de toque. */
  display: inline-block; padding-block: 3px;
  color: var(--ink); text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--line-strong);
  transition: color var(--t-fast), box-shadow var(--t-fast);
}
.contact__row a:hover{ color: var(--water-deep); box-shadow: inset 0 -1px 0 var(--water); }
.contact__hours{ font-size: .92rem; color: var(--ink-soft); }
.contact__hours b{
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 500; color: var(--ink);
}
.contact__hours b::before{
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--verdigris); flex: none;
}

.contact__actions{ display: grid; gap: 10px; margin-top: 24px; }
@media (min-width: 520px){ .contact__actions{ grid-template-columns: 1fr 1fr; } }
.contact__actions .btn{ width: 100%; }
.contact__actions .btn--solid{ grid-column: 1 / -1; }

/* marca visual de link que sai do site */
.ext::after{
  content: "↗"; font-size: .8em; opacity: .7;
  margin-left: 2px;
}


/* ============================================================================
   14. RODAPÉ
   ----------------------------------------------------------------------------
   Três coisas combinadas:
     · a ponte em degradê claro→azul (modelo luxury-desert-retreat) — é aqui,
       e só aqui, que a página vira azul;
     · a estrutura do echelon — frase de display grande à esquerda, colunas de
       link enxutas à direita, base com fio fino;
     · o wordmark gigante em tom quase invisível (modelo savory-plate).

   A PONTE PRECISA DE ALTURA REAL. Um degradê curto vira uma faixa listrada em
   vez de passagem. 200px é o mínimo em que o olho não encontra a emenda.
   ========================================================================== */

/* --- ponte claro → azul -------------------------------------------------- */
.bridge{
  height: clamp(160px, 22vw, 240px);
  background: linear-gradient(to bottom,
    var(--surface) 0%,
    var(--water-wash) 24%,
    var(--ramp-1) 50%,
    var(--ramp-2) 76%,
    var(--depth) 100%);
}

.foot{
  background: var(--depth);
  color: #fff;
  padding-top: clamp(48px, 7vw, 80px);
  overflow: hidden;
}

.foot__top{ display: grid; gap: 40px; }
@media (min-width: 800px){
  .foot__top{ grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; }
}

.foot__mark{
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.02;
  letter-spacing: -.022em; margin-bottom: 24px;
}
.foot__mark em{ font-style: italic; color: #9FD0F2; }

/* Sobre as opacidades daqui em diante: elas são todas ≥ .74 porque abaixo
   disso o texto branco sobre o navy #0B2860 cai de 7:1 e perde o AAA.
   Medido: .5 dá 4,6:1 e .55 dá 5,25:1 — passam em AA e reprovam em AAA.
   A hierarquia entre rótulo e link é feita por CAIXA ALTA, corpo e
   entreletra, não por opacidade. Não baixar estes valores. */
.foot__col h3{
  font-family: var(--mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.74); margin-bottom: 14px;
}
.foot__col a,
.foot__col span{
  display: block; padding: 5px 0;
  font-size: .9rem; color: rgba(255,255,255,.95);
  font-variant-numeric: tabular-nums;
}
.foot__col a{
  transition: color var(--t-fast) var(--ease-soft),
              transform var(--t-base) var(--ease-out);
}
.foot__col a:hover{ color: #fff; transform: translateX(3px); }
.foot__col .hours{ color: rgba(255,255,255,.78); font-size: .84rem; }

/* --- base --------------------------------------------------------------- */
.foot__base{
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.15);
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  align-items: center; justify-content: space-between;
  font-size: .78rem; color: rgba(255,255,255,.76);
}
.foot__nav{ display: flex; flex-wrap: wrap; gap: 4px 20px; }
/* padding para o alvo de toque chegar a 24px — ver WCAG 2.5.8 */
.foot__nav a{ padding-block: 3px; }
.foot__nav a{ transition: color var(--t-fast); }
.foot__nav a:hover{ color: #fff; }

/* --- wordmark fantasma --------------------------------------------------- */
/* Decorativo. aria-hidden no HTML, sem seleção e sem clique: existe para o
   olho e para mais nada. O tom fica logo acima do fundo — se ficar legível
   demais, vira título e rouba a leitura da base. */
.foot__ghost{
  display: block; width: 100%;
  margin-top: clamp(24px, 4vw, 44px);
  margin-bottom: calc(-0.18em);
  font-family: var(--display); font-weight: 400;
  font-size: 15.5vw; line-height: .82;
  letter-spacing: .04em; text-align: center;
  color: rgba(255,255,255,.07);
  user-select: none; pointer-events: none;
  white-space: nowrap;
}


/* ============================================================================
   15. PÁGINA INSTITUCIONAL — /about/
   ----------------------------------------------------------------------------
   Componentes exclusivos da página "Company Profile", construída a partir do
   perfil corporativo em PDF/PPTX. Nada aqui aparece na home — por isso vive
   num bloco próprio, no fim do arquivo, fácil de achar e fácil de remover
   inteiro se um dia a página sair do ar.

   TEXTO: tudo dentro de .ip-prose, .vcard, .numlist, .chiprow, .stepflow,
   .roadmap3 e .quote é cópia literal do documento original — ver o comentário
   no topo de about/index.html para a lista completa de onde vem cada trecho.
   Não editar a redação aqui nem lá sem reabrir o PDF/PPTX de origem.

   REUSO: 19 seções do documento caem em só 9 componentes porque a mesma forma
   se repete o tempo todo no material de origem — "5 itens numerados", "cartão
   com título e frase", "processo em etapas com seta". Um componente por
   forma, não um por slide.
   ========================================================================== */

/* --- hero da página ------------------------------------------------------ */
.ip-hero{
  padding: clamp(150px, 20vw, 210px) 0 clamp(56px, 8vw, 88px);
  background: linear-gradient(180deg, var(--water-wash) 0%, var(--paper) 62%);
  border-bottom: 1px solid var(--line);
}
.ip-hero__eyebrow{
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--water-deep);
  display: block; margin-bottom: 20px;
}
.ip-hero h1{
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.02;
  letter-spacing: -.022em; max-width: 16ch;
}
.ip-hero .t-lede{ margin-top: 22px; max-width: 58ch; }
.ip-hero__meta{
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  font-family: var(--mono); font-size: .74rem; color: var(--muted);
}

/* --- sub-nav fixa da página ----------------------------------------------
   Fica presa logo abaixo da cápsula principal do site — 19 seções pedem um
   jeito de pular direto, e um documento deste tamanho sem isso vira um scroll
   sem fim. Some no mobile: uma segunda barra fixa competiria com o polegar. */
.ip-subnav{
  position: sticky; top: calc(var(--nav-h) + 8px); z-index: 20;
  display: none;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px; margin: 0 auto 0; max-width: fit-content;
  box-shadow: var(--lift-2);
}
@media (min-width: 980px){ .ip-subnav{ display: block; } }
.ip-subnav__track{
  display: flex; gap: 2px; overflow-x: auto; max-width: 82vw;
  scrollbar-width: none;
}
.ip-subnav__track::-webkit-scrollbar{ display: none; }
.ip-subnav a{
  flex: none; padding: 7px 14px; border-radius: 999px;
  font-family: var(--mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.ip-subnav a:hover{ color: var(--ink); background: var(--surface-2); }
.ip-subnav a[aria-current="true"]{ background: var(--water); color: #fff; }

/* --- estrutura comum de seção --------------------------------------------
   Cada bloco do documento vira um <section class="ip-section">, com o mesmo
   par eyebrow+h2 usado no resto do site (.t-label + .band h2 já existiam;
   aqui só ajusto largura de leitura para prosa longa). */
.ip-section{ padding-block: clamp(56px, 8vw, 96px); border-top: 1px solid var(--line); }
.ip-section:first-of-type{ border-top: 0; }
.ip-section--tint{ background: var(--surface); }
.ip-section h2{
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.08;
  letter-spacing: -.016em; margin-bottom: 8px; max-width: 20ch;
}
.ip-section__kicker{ font-size: 1.02rem; color: var(--ink-soft); margin-bottom: 32px; max-width: 52ch; }
.ip-prose{ max-width: 66ch; }
.ip-prose p{ font-size: 1rem; line-height: 1.75; color: var(--ink-soft); }
.ip-prose p + p{ margin-top: 16px; }
.ip-prose strong{ color: var(--ink); font-weight: 600; }

/* --- retrato + carta (Letter from the Founder) ---------------------------- */
.ip-letter{ display: grid; gap: 32px; }
@media (min-width: 860px){ .ip-letter{ grid-template-columns: 260px 1fr; gap: 48px; align-items: start; } }
.ip-letter__portrait{ border-radius: 14px; overflow: hidden; box-shadow: var(--lift-2); }
.ip-letter__portrait img{ width: 100%; display: block; }
.ip-letter__name{ margin-top: 14px; }
.ip-letter__name b{ display: block; font-size: 1rem; font-weight: 600; }
.ip-letter__name span{ display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.ip-letter__sign{ margin-top: 20px; font-family: var(--display); font-style: italic; font-size: 1.5rem; color: var(--water-deep); }

/* --- callout lateral (usa o mesmo cartão do resto do site) --------------- */
.ip-side{
  border-left: 2px solid var(--water); background: var(--water-wash);
  padding: 18px 22px; border-radius: 0 12px 12px 0; margin-top: 28px;
}
.ip-side b{ display: block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--water-deep); margin-bottom: 6px; }
.ip-side p{ font-size: .94rem; color: var(--ink-soft); line-height: 1.6; }

/* --- vcard: cartão genérico de valor/razão/serviço ------------------------
   Reaproveitado em Core Values, Our Services, Why Jireh e What Clients
   Expect. .vcard--tags acrescenta o rodapé "WHAT MATTERS MOST" das
   Industries — mesma forma, um campo extra. */
.ip-grid{ display: grid; gap: 14px; }
@media (min-width: 620px){ .ip-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px){ .ip-grid--3{ grid-template-columns: repeat(3, 1fr); } }
.vcard{
  padding: 24px 22px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; transition: border-color var(--t-slow), transform var(--t-slow) var(--ease-soft), box-shadow var(--t-slow) var(--ease-soft);
}
.vcard:hover{ transform: translateY(-3px); box-shadow: var(--lift-2); border-color: var(--line-strong); }
.vcard h3{ font-family: var(--display); font-weight: 400; font-size: 1.24rem; margin-bottom: 8px; letter-spacing: -.01em; }
.vcard p{ font-size: .92rem; line-height: 1.6; color: var(--ink-soft); }
.vcard__tags{
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .66rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--water-deep); line-height: 1.7;
}
/* --ink-soft, não --faint: 2,7:1 reprova até em AA — mesma regra do bloco 01. */
.vcard__tags span{ display: block; font-size: .58rem; color: var(--ink-soft); letter-spacing: .12em; margin-bottom: 4px; }

/* --- numlist: item numerado 01-05 -----------------------------------------
   Education & Experience Applied to Jireh, Quality Principles, Strategic
   Priorities — três slides, uma forma. */
.numlist{ display: grid; gap: 22px; }
@media (min-width: 700px){ .numlist{ grid-template-columns: repeat(2, 1fr); gap: 26px 40px; } }
.numlist__item{ display: flex; gap: 16px; }
.numlist__n{
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--water-wash); color: var(--water-deep);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .74rem; font-weight: 500;
}
.numlist__item h3{ font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.numlist__item p{ font-size: .9rem; line-height: 1.55; color: var(--ink-soft); }

/* --- chiprow: lista curta separada por ponto -------------------------------
   Our Commitment, Environment Standard, tags "Why clients choose", barra de
   indústrias. Palavra por palavra do original, sem reescrever. */
.chiprow{
  display: flex; flex-wrap: wrap; gap: 10px 8px; margin-top: 18px;
}
.chiprow span{
  padding: 7px 16px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--line); font-size: .82rem; font-weight: 500; color: var(--ink-soft);
}

/* --- stepflow: processo em etapas com seta --------------------------------
   The Jireh Quality Process™ (5) e The Jireh Partnership Model™ (6) — mesma
   forma, contagem diferente. */
.stepflow{
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 4px;
  margin-top: 28px;
}
.stepflow__item{
  flex: 1 1 140px; display: flex; align-items: center; gap: 10px;
}
.stepflow__card{
  flex: 1; padding: 18px 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; min-width: 0;
}
.stepflow__n{
  font-family: var(--mono); font-size: .66rem; color: var(--water-deep);
  letter-spacing: .08em; display: block; margin-bottom: 6px;
}
.stepflow__card h3{ font-size: .96rem; font-weight: 600; margin-bottom: 4px; }
.stepflow__card p{ font-size: .82rem; line-height: 1.5; color: var(--ink-soft); }
.stepflow__arrow{ flex: none; color: var(--faint); font-size: 1.1rem; }
@media (max-width: 640px){ .stepflow{ flex-direction: column; } .stepflow__arrow{ display: none; } }

/* --- roadmap3: três colunas simples ---------------------------------------
   Compliance Roadmap (Current/In Progress/Future) e Future Roadmap
   (Short/Mid/Long-Term) — mesma forma, rótulos diferentes por seção. */
.roadmap3{ display: grid; gap: 22px; margin-top: 8px; }
@media (min-width: 760px){ .roadmap3{ grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.roadmap3__col h3{
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--water-deep);
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.roadmap3__col ul{ display: grid; gap: 10px; }
.roadmap3__col li{
  font-size: .92rem; color: var(--ink-soft); line-height: 1.5;
  padding-left: 18px; position: relative;
}
.roadmap3__col li::before{
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--verdigris);
}

/* --- quote: bloco de destaque ---------------------------------------------
   Reaproveitado nas várias citações e "featured statements" espalhadas pelo
   documento — timeline, roadmap futuro, seção de impacto. */
.ip-quote{
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding-block: 28px; margin-top: 36px;
}
.ip-quote p{
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem); line-height: 1.35;
  color: var(--ink); max-width: 42ch;
}
.ip-quote cite{
  display: block; margin-top: 14px; font-style: normal;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}

/* --- pull: banner de afirmação em tela cheia (THE JIREH DIFFERENCE™) ------ */
.ip-pull{
  background: var(--depth); color: #fff;
  padding-block: clamp(64px, 10vw, 108px);
  text-align: center;
}
.ip-pull__eyebrow{
  font-family: var(--mono); font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; color: #9FD0F2; display: block; margin-bottom: 22px;
}
.ip-pull h2{
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.1rem, 5.2vw, 3.6rem); line-height: 1.06;
  letter-spacing: -.018em; max-width: 16ch; margin: 0 auto;
}
.ip-pull p{
  margin: 26px auto 0; max-width: 52ch; font-size: 1.04rem;
  line-height: 1.65; color: rgba(255,255,255,.82);
}
.ip-pull__tag{
  display: inline-block; margin-top: 22px;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}

/* --- timeline (Heritage — A Timeline of Preparation) ----------------------- */
.ip-timeline{
  display: flex; overflow-x: auto; gap: 0; margin-top: 36px;
  padding-bottom: 8px; scrollbar-width: thin;
}
.ip-timeline__pt{
  flex: 0 0 200px; position: relative; padding: 28px 20px 0 0;
  border-top: 2px solid var(--line);
}
.ip-timeline__pt::before{
  content: ""; position: absolute; top: -6px; left: 0;
  width: 10px; height: 10px; border-radius: 50%; background: var(--water);
}
.ip-timeline__pt b{
  display: block; font-family: var(--mono); font-size: .72rem;
  color: var(--water-deep); letter-spacing: .04em; margin-bottom: 8px;
}
.ip-timeline__pt strong{ display: block; font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.ip-timeline__pt span{ display: block; font-size: .84rem; color: var(--ink-soft); line-height: 1.5; }

/* --- contato final (reaproveita o padrão do .contact__panel da home) ------ */
.ip-contact{
  display: grid; gap: 40px; align-items: start;
}
@media (min-width: 860px){ .ip-contact{ grid-template-columns: 1fr 1fr; } }
.ip-contact__thanks h2{
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 2.8rem); line-height: 1.06; letter-spacing: -.016em;
}


/* ============================================================================
   99. ACESSIBILIDADE
   ========================================================================== */
:focus-visible{
  outline: 2px solid var(--water); outline-offset: 3px; border-radius: 4px;
}
.skip{
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--surface); color: var(--ink);
  padding: 10px 18px; border-radius: 999px; box-shadow: var(--lift-2);
  font-size: .8rem;
}
.skip:focus{ left: 16px; }

.sr-only{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal-word{ transform: none; }
  .js .rise{ opacity: 1; transform: none; }
  .marquee__track{ animation: none; }
}


/* ============================================================================
   FORMULÁRIO DE ORÇAMENTO  (.quote)
   ----------------------------------------------------------------------------
   Nativo do site. Substituiu o link que mandava o visitante para o site antigo
   inteiro. Mora dentro da seção #contato, logo abaixo da grade de contato.

   Regra de contraste respeitada: rótulo e texto digitado usam --ink; a dica
   auxiliar usa --ink-soft (7,9:1). --muted só aparece em borda, nunca em letra.
   ========================================================================== */
.quote{
  margin-top: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px;
  box-shadow: var(--lift-2);
}
.quote__head{ margin-bottom: 20px }
.quote__title{
  margin: 0 0 6px;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  color: var(--ink);
}
.quote__sub{ margin: 0; color: var(--ink-soft) }

/* --- mensagens de retorno -------------------------------------------------
   Escondidas por padrão. O #hash devolvido pelo orcamento.php revela a certa,
   usando :target — sem depender de JavaScript.                              */
.quote__msg{ display: none; margin: 0 0 18px; padding: 12px 14px; border-radius: 10px }
.quote__msg:target{ display: block }
.quote__msg--ok{
  background: var(--verdigris-wash);
  border: 1px solid var(--verdigris);
  color: var(--ink);
}
.quote__msg--erro{
  background: var(--water-wash);
  border: 1px solid var(--water);
  color: var(--ink);
}

/* --- grade de campos ---------------------------------------------------- */
.quote__grid{
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px){
  .quote__grid{ grid-template-columns: 1fr 1fr }
  .quote__field--wide{ grid-column: 1 / -1 }
}

.quote__field{ margin: 0; display: flex; flex-direction: column; gap: 6px }
.quote__field label{
  font-size: .9rem; font-weight: 600; color: var(--ink);
}
.quote__req{ color: var(--water-deep) }
.quote__opt{ font-weight: 400; color: var(--ink-soft) }

.quote__field input,
.quote__field select,
.quote__field textarea{
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 11px 13px;
  transition: border-color .15s ease, background-color .15s ease;
}
.quote__field textarea{ resize: vertical; min-height: 120px }
.quote__field input:hover,
.quote__field select:hover,
.quote__field textarea:hover{ border-color: var(--water) }
.quote__field input:focus,
.quote__field select:focus,
.quote__field textarea:focus{
  background: var(--surface);
  border-color: var(--water);
}
/* campo de arquivo: o botão interno herda a fonte do sistema, então damos ar */
.quote__field input[type="file"]{ padding: 9px 11px }

.quote__hint{ font-size: .82rem; color: var(--ink-soft) }

/* --- armadilha anti-robô ---------------------------------------------------
   Tirada do fluxo visual e do foco, mas NÃO com display:none — alguns robôs
   ignoram campos escondidos assim. Fora da tela é mais eficaz.              */
.quote__trap{
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

/* --- rodapé do formulário ----------------------------------------------- */
.quote__foot{
  margin: 20px 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
.quote__note{ font-size: .88rem; color: var(--ink-soft) }