/* OBJETARIA — CSS derivado do master site.html por tools/build.mjs. Não editar à mão: edite o master e rode o build. */

/* =========================================================
   OBJETARIA · RESET DE ISOLAMENTO (gerado — não faz parte do master)
   Devolve ao padrão do navegador o que um tema/WordPress definir em elementos
   que o master deixa no padrão (fonte de <button>, line-height de <label>,
   transições, raio, nowrap, margens de <p>/<h*>...). Peso de 1 ID: vence o
   tema, perde para o CSS do master (2 IDs).
   ========================================================= */
html:has(> body.obj-master){ font-size:revert !important; }
body.obj-master:not(#obj) :is(a,abbr,b,blockquote,button,caption,code,dd,dl,dt,em,fieldset,figcaption,figure,form,h1,h2,h3,h4,h5,h6,hr,i,input,label,legend,li,nav,ol,optgroup,option,p,pre,select,small,strong,sub,sup,table,tbody,td,textarea,tfoot,th,thead,tr,ul):not(.elementor-editor-element-settings, .elementor-editor-element-settings *, .elementor-add-section, .elementor-add-section *, .elementor-element-overlay, .elementor-element-overlay *, .elementor-empty-view, .elementor-empty-view *):where(:not(#wpadminbar, #wpadminbar *)){ all:revert; }

/* =========================================================
   TOKENS — cor, tipografia, layout e movimento
   Todos os valores foram medidos nos prints e vídeos da
   referência, em tela de 1905 px de largura.
   ========================================================= */
:root{
  /* ---- Cor ---- */
  --accent:       #FF8731;               /* laranja medido em "Fabricating the future" */
  --accent-soft:  rgba(255,135,49,.35);  /* divisórias em repouso (lista de projetos) */
  --accent-hover: #F2701B;               /* laranja mais fundo para ícones em hover */
  --accent-line:  #FF8731;               /* linhas finas de 1 px */
  --on-accent:    #FFFFFF;               /* texto sobre o laranja: branco, como nos botões da referência
                                            (contraste 2,4:1; use #131313 para um contraste maior) */
  --fill-hover:   #141212;               /* fundo do botão sólido em hover (medido no vídeo) */
  --radius-btn:   5px;                   /* arredondamento leve de todos os botões */

  --ink:          #22242A;
  --text:         #2A2C31;
  --muted:        #5F6268;
  --black:        #131313;   /* bloco "Fabricating the future" */
  --navy:         #0F1A22;   /* "Our process" */
  --footer:       #191A21;
  --field:        #23242D;
  --gray-bg:      #F2F2F2;   /* "What we do" e depoimentos */
  --white:        #FFFFFF;
  --rule:         #E5E5E7;
  --rule-2:       #D9D9D9;
  --rule-strong:  #B5B6B9;   /* linha abaixo das logos de "Our clientele" (medida no vídeo: bem mais nítida que --rule) */
  --number:       #D9D9D9;   /* números 01–04 em repouso */
  --label-dark:   #131618;   /* rótulos de "Our process", quase invisíveis como na referência */
  --on-dark:      #FFFFFF;
  --on-dark-muted:#BFC3CA;

  /* ---- Tipografia ---- */
  /* Schabo Condensed (títulos) e Aeonik Regular 400 / Medium 500 (texto) são arquivos locais em assets/fonts. League Gothic só entra como reserva da Schabo. */
  --f-display: 'Schabo Condensed', 'League Gothic', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --f-body:    'Aeonik', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --display-track:  -.01em;   /* Schabo: -.01em reproduz a largura das linhas do hero da referência (-.02em era da League Gothic) */
  --display-stroke: 0;        /* sem engrossamento artificial: a Schabo real já tem o peso da referência */

  --fs-hero:       clamp(3.7rem, 6.91vw, 8.23rem);   /* 132 px @1905 */
  --fs-h2:         clamp(2.85rem, 4.86vw, 5.79rem);  /*  93 px */
  --fs-h2-sm:      clamp(2.1rem, 2.89vw, 3.44rem);   /*  55 px · "Our clientele" */
  --fs-h2-contact: clamp(2.4rem, 3.85vw, 4.58rem);   /*  73 px · rodapé */
  --fs-num:        clamp(4.5rem, 9.5vw, 11.3rem);    /* 181 px · números 01–04 */
  --fs-lead:       clamp(1.75rem, 2.5vw, 2.975rem);  /*  48 px · frase dos depoimentos */
  --fs-eyebrow:    clamp(.95rem, 1.33vw, 1.5875rem); /*  25 px */
  --fs-hero-text:  clamp(1rem, 1.037vw, 1.235rem);   /*  20 px */
  --fs-text:       1.04rem;    /* 16,6 px · parágrafos */
  --fs-text-sm:    .975rem;    /* 15,6 px · projetos e processo */
  --fs-ui:         1.0625rem;  /* 17 px · menu, botões, links */
  --lh-text:       1.56;
  --lh-display:       .875;
  --lh-display-loose: .972;

  /* ---- Layout ---- */
  --container:      1336px;
  --container-wide: 1398px;
  --container-hero: 1220px;
  --gutter: clamp(20px, 4vw, 48px);
  --split: 45%;
  --step-x: 41.25%;    /* vértice do degrau entre seções */
  --step-h: 50px;      /* altura do degrau (o do bloco preto é 40) */
  --tab-h: 40px;       /* aba que sobe do bloco preto para dentro do hero */
  --tab-inset: 20%;
  --tab-chamfer: 30px;

  /* ---- Movimento (calibrado pelos vídeos) ---- */
  --ease-premium: cubic-bezier(.22,1,.36,1);
  --ease-slide:   cubic-bezier(.25,.1,.25,1);   /* curva medida no vídeo do banner (igual ao "ease" do CSS) */
  --ease-out:     cubic-bezier(0,0,.58,1);
  --ease-in:      cubic-bezier(.42,0,1,1);
  --duration-micro:   250ms;  /* botão do menu: fundo e seta (medido: ~230 ms) */
  --duration-hover:   450ms;  /* cor de links, textos e indicadores */
  --duration-reveal:  900ms;  /* projetos: foto abre + número laranja (um pouco mais lento que o vídeo, ~520 ms, para a abertura ficar mais macia) */
  --ease-open:    cubic-bezier(.36,.5,.12,1);   /* abertura da foto: começa macia e assenta longa
                                                   (formato ajustado ao vídeo de We thrive) */
  --duration-panel:   600ms;  /* painel laranja de What we do entrando (medido) */
  --duration-panel-out: 200ms;/* painel saindo (medido: ~180 ms) */
  --duration-slide:   500ms;  /* troca de slide do hero (medido: 500 ms, curva ease) */
  --duration-fast:    450ms;  /* troca de depoimento */
  --duration-medium:  700ms;  /* botões com preenchimento (ghost) */

  /* ---- Setas ↗ (um só desenho, três tamanhos) ---- */
  --arrow-sm: 14px;   /* View project, Discover more */
  --arrow-md: 17px;   /* botão Contato do menu */
  --arrow-lg: 30px;   /* painel laranja de What we do */
  --parallax:        .09;    /* fotos editoriais andam 9% mais rápido que a rolagem */
}

/* ---- Fontes da referência (arquivos locais, sem CDN) ----
   Schabo Condensed 400 ativa --f-display. Aeonik: Regular 400 e Medium 500 reais ativam --f-body; não há Light nem Bold,
   então 300 usa o Regular e 600/700 usam o Medium (sem síntese de peso). */
@font-face{ font-family:'Schabo Condensed'; src:url('../fonts/SCHABO%20Condensed.woff2') format('woff2'); font-style:normal; font-weight:400; font-display:swap; }
@font-face{ font-family:'Aeonik'; src:url('../fonts/Aeonik%20Regular.woff2') format('woff2'); font-style:normal; font-weight:400; font-display:swap; }
@font-face{ font-family:'Aeonik'; src:url('../fonts/Aeonik%20Medium.woff2') format('woff2'); font-style:normal; font-weight:500; font-display:swap; }

/* =========================================================
   BASE
   ========================================================= */
body.obj-master:not(#obj):not(#obj) *:where(:not(#wpadminbar, #wpadminbar *)),body.obj-master:not(#obj):not(#obj) *:where(:not(#wpadminbar, #wpadminbar *))::before,body.obj-master:not(#obj):not(#obj) *:where(:not(#wpadminbar, #wpadminbar *))::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body.obj-master:not(#obj):not(#obj){
  margin:0;
  font-family:var(--f-body);
  font-size:var(--fs-text);
  line-height:var(--lh-text);
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;        /* as linhas decorativas vão até a borda da tela */
}
body.obj-master:not(#obj):not(#obj) img:where(:not(#wpadminbar, #wpadminbar *)),body.obj-master:not(#obj):not(#obj) svg:where(:not(#wpadminbar, #wpadminbar *)){ display:block; max-width:100%; }
body.obj-master:not(#obj):not(#obj) a:where(:not(#wpadminbar, #wpadminbar *)){ color:inherit; }
body.obj-master:not(#obj):not(#obj) p,body.obj-master:not(#obj):not(#obj) h1,body.obj-master:not(#obj):not(#obj) h2,body.obj-master:not(#obj):not(#obj) h3,body.obj-master:not(#obj):not(#obj) figure{ margin:0; }
body.obj-master:not(#obj):not(#obj) .wrap{ width:min(var(--container), 100% - 2 * var(--gutter)); margin-inline:auto; }
body.obj-master:not(#obj):not(#obj) .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; }
body.obj-master:not(#obj):not(#obj) .accent{ color:var(--accent); }

/* Títulos condensados */
body.obj-master:not(#obj):not(#obj) .display{
  font-family:var(--f-display);
  font-weight:400;
  font-synthesis:none;
  text-transform:uppercase;
  letter-spacing:var(--display-track);
  line-height:var(--lh-display);
  -webkit-text-stroke:var(--display-stroke) currentColor;
  color:var(--ink);
}
body.obj-master:not(#obj):not(#obj) .h2{ font-size:var(--fs-h2); }
body.obj-master:not(#obj):not(#obj) .h2--loose{ line-height:var(--lh-display-loose); }
body.obj-master:not(#obj):not(#obj) .h2-sm{ font-size:var(--fs-h2-sm); }

/* Foco visível no teclado (a cor muda com o fundo da seção) */
body.obj-master:not(#obj):not(#obj) :focus-visible{ outline:2px solid var(--focus, var(--accent)); outline-offset:3px; }
body.obj-master:not(#obj):not(#obj) .skip{ position:absolute; left:-9999px; top:12px; z-index:100; padding:10px 16px; background:var(--accent); color:var(--on-accent); font-weight:500; text-decoration:none; }
body.obj-master:not(#obj):not(#obj) .skip:focus{ left:12px; }

/* Ícones */
body.obj-master:not(#obj):not(#obj) .i{ width:1em; height:1em; flex:none; }
body.obj-master:not(#obj):not(#obj) .i path,body.obj-master:not(#obj):not(#obj) .i circle,body.obj-master:not(#obj):not(#obj) .i rect{ fill:none; stroke:currentColor; stroke-width:1.5; }
/* Seta ↗ que gira para ↘ no hover do elemento pai (mesma microinteração em todo o site) */
body.obj-master:not(#obj):not(#obj) .arrow{ width:var(--arrow-size, var(--arrow-sm)); height:var(--arrow-size, var(--arrow-sm)); flex:none; overflow:visible;
  transition:transform var(--arrow-dur, var(--duration-hover)) var(--arrow-ease, var(--ease-premium)); }
body.obj-master:not(#obj):not(#obj) .arrow path{ fill:none; stroke:currentColor; stroke-width:var(--arrow-stroke, 1.9); stroke-linecap:square; }

/* Placeholder de imagem — TROCAR pelas fotos reais */
body.obj-master:not(#obj):not(#obj) .ph{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  background-color:var(--ph-bg, #8E949C);
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 1px, transparent 1px 14px);
  color:var(--ph-fg, rgba(255,255,255,.72));
}
body.obj-master:not(#obj):not(#obj) .ph__label{ font-size:.6875rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; padding:8px; }
body.obj-master:not(#obj):not(#obj) .ph--dark{ --ph-bg:#2C323B; --ph-fg:rgba(255,255,255,.42); }
body.obj-master:not(#obj):not(#obj) .ph--blueprint{
  --ph-bg:#F4F5F6; --ph-fg:#7D848E;
  background-image:linear-gradient(rgba(15,26,34,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(15,26,34,.07) 1px, transparent 1px);
  background-size:24px 24px;
}
body.obj-master:not(#obj):not(#obj) .ph--logo{ --ph-bg:transparent; --ph-fg:#9A9EA5; background-image:none; border:1px dashed #C4C7CC; }
body.obj-master:not(#obj):not(#obj) .ph--line{ --ph-bg:transparent; --ph-fg:rgba(255,255,255,.7); background-image:none; border:1px dashed rgba(255,255,255,.45); }

/* Fotos com parallax leve (o JS move; sem JS ficam paradas) */
body.obj-master:not(#obj):not(#obj) [data-parallax]{ position:relative; z-index:1; will-change:transform; }

/* =========================================================
   BOTÕES E LINKS — hover lento com preenchimento progressivo
   ========================================================= */
body.obj-master:not(#obj):not(#obj) .btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:49px;
  --btn-px:30px;
  padding:0 calc(var(--btn-px) - .1em) 0 var(--btn-px);   /* desconta o espaçamento que sobra depois da última letra */
  font-family:var(--f-body); font-size:var(--fs-ui); font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none; line-height:1; white-space:nowrap;
  border:0; border-radius:var(--radius-btn); cursor:pointer;
  transition:color var(--duration-medium) var(--ease-premium);
}
/* Botão laranja: no hover o fundo escurece (medido na referência: laranja → #141212).
   Sem borda, para não sobrar contorno laranja. */
body.obj-master:not(#obj):not(#obj) .btn--solid{ background:var(--accent); color:var(--on-accent);
  transition:background-color var(--duration-hover) var(--ease-out), color var(--duration-hover) var(--ease-out); }
body.obj-master:not(#obj):not(#obj) .btn--solid:hover,body.obj-master:not(#obj):not(#obj) .btn--solid:focus-visible{ background:var(--fill-hover); color:var(--on-dark); }
/* "Contact us today": mantém o laranja da referência; no hover só aprofunda o tom, sem trocar o estilo */
body.obj-master:not(#obj):not(#obj) .btn--static{ background:var(--accent); color:var(--on-accent);
  transition:background-color var(--duration-hover) var(--ease-out); }
body.obj-master:not(#obj):not(#obj) .btn--static:hover,body.obj-master:not(#obj):not(#obj) .btn--static:focus-visible{ background:var(--accent-hover); }
/* Botão com contorno (só Why we are different e Submit): no hover o laranja entra em fade curto
   e sai do mesmo jeito; o texto continua branco */
body.obj-master:not(#obj):not(#obj) .btn--ghost{ background:transparent; color:var(--on-dark); box-shadow:inset 0 0 0 1px var(--accent); }
body.obj-master:not(#obj):not(#obj) .btn--ghost::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--accent);
  opacity:0;
  transition:opacity 250ms var(--ease-out);
}
body.obj-master:not(#obj):not(#obj) .btn--ghost:hover::before,body.obj-master:not(#obj):not(#obj) .btn--ghost:focus-visible::before{ opacity:1; }
body.obj-master:not(#obj):not(#obj) .btn--ghost:hover,body.obj-master:not(#obj):not(#obj) .btn--ghost:focus-visible{ color:var(--on-accent); }

/* Links "View project" e "Discover more": sem sublinhado; no hover o texto fica
   laranja e a seta gira de ↗ para ↘ (como na referência) */
body.obj-master:not(#obj):not(#obj) .link-arrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:1.103rem; font-weight:500; line-height:1.3; color:var(--ink); text-decoration:none;
  transition:color var(--duration-hover) var(--ease-premium);
}
body.obj-master:not(#obj):not(#obj) .link-arrow .arrow{ color:var(--accent); }
body.obj-master:not(#obj):not(#obj) .link-arrow:hover,body.obj-master:not(#obj):not(#obj) .link-arrow:focus-visible{ color:var(--accent); }
body.obj-master:not(#obj):not(#obj) .link-arrow:hover .arrow,body.obj-master:not(#obj):not(#obj) .link-arrow:focus-visible .arrow{ transform:rotate(90deg); }

/* =========================================================
   CORTES ENTRE SEÇÕES — degrau diagonal com cantos suaves
   (clip-path com arcos aproximados; vértice em --step-x)
   ========================================================= */
body.obj-master:not(#obj):not(#obj) .cut{ position:relative; z-index:2; }
body.obj-master:not(#obj):not(#obj) .cut::after{
  content:""; position:absolute; left:0; right:0; top:100%;
  height:var(--step-h);
  background:inherit;
  clip-path:polygon(
    calc(var(--step-x) - 10.5px) 0,
    calc(var(--step-x) - 5.6px) .43px,
    calc(var(--step-x) - .8px) 1.7px,
    calc(var(--step-x) + 3.7px) 3.8px,
    calc(var(--step-x) + 8px) 6.9px,
    calc(var(--step-x) + var(--step-h) * 1.16 - 3px) calc(100% - 2.6px),
    calc(var(--step-x) + var(--step-h) * 1.16 + .3px) calc(100% - .65px),
    calc(var(--step-x) + var(--step-h) * 1.16 + 4px) 100%,
    100% 100%, 100% 0);
  pointer-events:none;
}

/* =========================================================
   HEADER — transparente, sobre o hero
   ========================================================= */
body.obj-master:not(#obj):not(#obj) .header{ position:absolute; inset:0 0 auto; z-index:30; color:var(--on-dark); --focus:var(--accent); }
body.obj-master:not(#obj):not(#obj) .header__inner{
  width:min(var(--container-wide), 100% - 2 * var(--gutter));
  margin-inline:auto;
  height:75px; padding-top:9px;
  display:flex; align-items:center; gap:clamp(28px, 6.45vw, 123px);
  border-bottom:1px solid var(--accent-line);
}
body.obj-master:not(#obj):not(#obj) .header__logo{ width:62px; height:26px; flex:none; text-decoration:none; }
body.obj-master:not(#obj):not(#obj) .nav{ margin-left:auto; display:flex; align-items:center; gap:clamp(28px, 6.45vw, 123px); }
body.obj-master:not(#obj):not(#obj) .nav a{
  font-size:var(--fs-ui); font-weight:400; text-decoration:none; color:var(--on-dark);
  padding-block:6px;
  background:linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat;
  transition:background-size var(--duration-medium) var(--ease-premium);
}
body.obj-master:not(#obj):not(#obj) .nav a:hover,body.obj-master:not(#obj):not(#obj) .nav a:focus-visible{ background-size:100% 1px; }
body.obj-master:not(#obj):not(#obj) .btn-contact{
  flex:none; display:inline-flex; align-items:center; gap:14px;
  height:42px; padding:1px 22px 0 24px;      /* 1 px no topo compensa a caixa alta e centra o texto na vertical */
  border:1px solid rgba(255,255,255,.9); border-radius:var(--radius-btn);
  font-size:.9375rem; font-weight:500; line-height:1; letter-spacing:.015em; text-transform:uppercase;
  text-decoration:none; color:var(--on-dark); background:transparent;
  --arrow-size:var(--arrow-md); --arrow-stroke:2; --arrow-dur:var(--duration-micro); --arrow-ease:var(--ease-out);
  transition:background-color var(--duration-micro) var(--ease-out), color var(--duration-micro) var(--ease-out), border-color var(--duration-micro) var(--ease-out);
}
body.obj-master:not(#obj):not(#obj) .btn-contact .arrow{ color:var(--accent); }
/* hover medido no vídeo: fundo transparente → branco, texto escuro, seta ↗ gira para ↘ */
body.obj-master:not(#obj):not(#obj) .btn-contact:hover,body.obj-master:not(#obj):not(#obj) .btn-contact:focus-visible{ background:var(--white); color:var(--black); border-color:var(--white); }
body.obj-master:not(#obj):not(#obj) .btn-contact:hover .arrow,body.obj-master:not(#obj):not(#obj) .btn-contact:focus-visible .arrow{ transform:rotate(90deg); }

/* ---- Menu do celular (só até 560 px; no desktop nada disso aparece) ----
   Medido quadro a quadro no vídeo "video do menu hamburguer e como ele abre.mp4"
   (tela de 360 × 780 px gravada em 1956 × 4238, escala 5,433):
   · ícone ☰ de 18 × 11 px (barras de 1,5 px a cada 4,75 px), centro a 16,9 px
     do fim da linha laranja; vira ✕ de 13,6 × 11 px (traços a ±38,5°) em dois
     tempos: barras se juntam no meio (60 ms), pausa (50 ms), giram (70 ms);
     o fechamento faz o caminho inverso;
   · painel branco de canto reto, na largura da linha do header, cobrindo a linha;
     desce inteiro de trás dela (translateY) em 330 ms, curva (.23,.59,.43,.98),
     e sobe em 230 ms, curva (.37,0,.63,1); a página não escurece;
   · links de 13,75 px (500) a ~15,5 px da borda do painel, um a cada 40,67 px; botão de
     41,9 px de altura a ~15,6 px das laterais e 16 px de baixo, borda de 1 px na cor do
     texto, cantos de 2 px, texto 10,75 px (600) e seta ↗ de ~9 px de tinta e traço de 1,5 px. */
body.obj-master:not(#obj):not(#obj) .nav-toggle,body.obj-master:not(#obj):not(#obj) .mnav{ display:none; }
body.obj-master:not(#obj):not(#obj) .nav-toggle{
  flex:none; width:44px; height:44px; margin-right:-4.9px; padding:0;   /* centro do ícone a 16,9 px do fim da linha */
  align-items:center; justify-content:center;
  border:0; background:none; color:var(--on-dark); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
body.obj-master:not(#obj):not(#obj) .nav-toggle__bars{ position:relative; display:block; width:18px; height:11px; }
body.obj-master:not(#obj):not(#obj) .nav-toggle__bars > span{
  position:absolute; left:0; width:100%; height:1.5px; background:currentColor;
  /* fechando: primeiro desgira (60 ms), depois as barras se separam (70 ms, após 110 ms) */
  transition:transform 60ms var(--ease-out), top 70ms var(--ease-out) 110ms, opacity 0s linear 110ms;
}
body.obj-master:not(#obj):not(#obj) .nav-toggle__bars > span:nth-child(1){ top:0; }
body.obj-master:not(#obj):not(#obj) .nav-toggle__bars > span:nth-child(2){ top:4.75px; }
body.obj-master:not(#obj):not(#obj) .nav-toggle__bars > span:nth-child(3){ top:9.5px; }
body.obj-master:not(#obj):not(#obj) .nav-toggle[aria-expanded="true"] .nav-toggle__bars > span{
  /* abrindo: barras se juntam (60 ms), pausa, e giram (70 ms, após 110 ms) */
  transition:top 60ms var(--ease-out), transform 70ms var(--ease-out) 110ms, opacity 0s linear 60ms;
}
body.obj-master:not(#obj):not(#obj) .nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(1){ top:4.75px; transform:rotate(38.5deg) scaleX(.92); }
body.obj-master:not(#obj):not(#obj) .nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(2){ opacity:0; }
body.obj-master:not(#obj):not(#obj) .nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(3){ top:4.75px; transform:rotate(-38.5deg) scaleX(.92); }
body.obj-master:not(#obj):not(#obj) .mnav{
  position:absolute; left:0; right:0; top:calc(100% - 1px);   /* cobre a linha do header, como na referência */
  overflow:hidden; visibility:hidden; pointer-events:none;
  transition:visibility 0s linear 230ms;
  --focus:var(--ink);
  -webkit-tap-highlight-color:transparent;
}
body.obj-master:not(#obj):not(#obj) .mnav.is-open{ visibility:visible; pointer-events:auto; transition:none; }
body.obj-master:not(#obj):not(#obj) .mnav__panel{
  display:flex; flex-direction:column;
  padding:7.7px 15.45px 16px; background:var(--white); color:var(--ink);
  transform:translateY(-100%);
  transition:transform 230ms cubic-bezier(.37,0,.63,1);
}
body.obj-master:not(#obj):not(#obj) .mnav.is-open .mnav__panel{ transform:none; transition:transform 330ms cubic-bezier(.23,.59,.43,.98); }
body.obj-master:not(#obj):not(#obj) .mnav__link{
  display:flex; align-items:center; height:40.67px; margin-left:-1.3px;   /* tinta da 1ª letra alinhada à borda do botão */
  font-size:13.75px; font-weight:500; line-height:1; text-decoration:none; color:var(--ink);
  transition:color var(--duration-hover) var(--ease-premium);
}
body.obj-master:not(#obj):not(#obj) .mnav__link:hover,body.obj-master:not(#obj):not(#obj) .mnav__link:focus-visible{ color:var(--accent); }
body.obj-master:not(#obj):not(#obj) .mnav__cta{
  display:flex; align-items:center; justify-content:space-between;
  height:41.9px; margin-top:7.7px; padding:0 14.9px .6px 14.8px;
  border:1px solid var(--ink); border-radius:2px;
  font-size:10.75px; font-weight:500; line-height:1; letter-spacing:0; text-transform:uppercase;
  text-decoration:none; color:var(--ink);
  --arrow-size:12.5px; --arrow-stroke:2; --arrow-dur:var(--duration-micro); --arrow-ease:var(--ease-out);
}
body.obj-master:not(#obj):not(#obj) .mnav__cta .arrow{ color:var(--accent); margin-top:.6px; }
body.obj-master:not(#obj):not(#obj) .mnav__cta:hover .arrow,body.obj-master:not(#obj):not(#obj) .mnav__cta:focus-visible .arrow{ transform:rotate(90deg); }

/* =========================================================
   HERO — carrossel horizontal (imagem + texto mudam juntos)
   ========================================================= */
body.obj-master:not(#obj):not(#obj) .hero{
  position:relative; z-index:1;
  height:800px;             /* medido no vídeo: o hero da referência tem 800 px de altura
                               fixa, também em telas mais baixas (antes: 74% da altura da janela) */
  background:var(--black); color:var(--on-dark);
  overflow:hidden;
  --focus:var(--accent);
}
body.obj-master:not(#obj):not(#obj) .hero__viewport{ position:absolute; inset:0; overflow:hidden; touch-action:pan-y; }
body.obj-master:not(#obj):not(#obj) .hero__slide{
  position:absolute; inset:0;
  transition:transform var(--duration-slide) var(--ease-slide);
  will-change:transform;
}
body.obj-master:not(#obj):not(#obj) .hero__slide.no-anim{ transition:none; }
body.obj-master:not(#obj):not(#obj) .hero__slide:not(:first-child){ transform:translateX(100%); }   /* sem JS, só o primeiro slide aparece */
body.obj-master:not(#obj):not(#obj) .hero__media{ position:absolute; inset:0; }
body.obj-master:not(#obj):not(#obj) .hero__media .ph__label{ position:absolute; right:28px; top:96px; }
/* Foto do slide: a forma do hero é fixa, o asset se adapta (cover). Mobile usa master dedicado 944×1680. */
body.obj-master:not(#obj):not(#obj) .hero__media picture{ position:absolute; inset:0; }
body.obj-master:not(#obj):not(#obj) .hero__media img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
@media (max-width:560px){ body.obj-master:not(#obj):not(#obj) .hero__media img{ object-position:100% 50%; } }
/* Hero 1: enquadramento aprovado (desktop ancorado à direita e no topo; mobile centralizado) */
body.obj-master:not(#obj):not(#obj) .hero__slide:nth-child(1) .hero__media img{ object-position:100% 0%; }
@media (max-width:560px){ body.obj-master:not(#obj):not(#obj) .hero__slide:nth-child(1) .hero__media img{ object-position:50% 50%; } }
body.obj-master:not(#obj):not(#obj) .hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,.28) 55%, rgba(10,10,10,.1) 100%),
    linear-gradient(180deg, rgba(10,10,10,.5) 0%, rgba(10,10,10,0) 22%);
}
body.obj-master:not(#obj):not(#obj) .hero__slide:nth-child(1) .hero__media{ --ph-bg:#2A3038; }
body.obj-master:not(#obj):not(#obj) .hero__slide:nth-child(2) .hero__media{ --ph-bg:#33302C; }
body.obj-master:not(#obj):not(#obj) .hero__slide:nth-child(3) .hero__media{ --ph-bg:#262E36; }
body.obj-master:not(#obj):not(#obj) .hero__content{
  position:relative; z-index:1;
  height:100%;
  width:min(var(--container-hero), 100% - 2 * var(--gutter));
  margin-inline:auto;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:87px 0 77px;
}
body.obj-master:not(#obj):not(#obj) .hero__eyebrow{ font-size:var(--fs-eyebrow); font-weight:400; line-height:1.2; text-transform:uppercase;
  /* sobe .08 do corpo do título sem mudar a altura do bloco: dá folga ao til (Ã) da Schabo */
  margin-top:calc(var(--fs-hero) * -.08); margin-bottom:calc(2px + var(--fs-hero) * .08); }
body.obj-master:not(#obj):not(#obj) .hero__title{ font-size:var(--fs-hero); color:var(--on-dark);
  /* a Schabo desenha as maiúsculas .12em acima da League Gothic: desce o título de volta à posição
     aprovada (topo das maiúsculas a 180 px do topo do hero em 1905, como na referência) sem mover texto e botão */
  margin-top:.12em; margin-bottom:calc(clamp(24px, 2.87vw, 55px) - .12em); }
body.obj-master:not(#obj):not(#obj) .hero__text{ font-size:var(--fs-hero-text); line-height:1.42; max-width:660px; color:rgba(255,255,255,.94); margin-bottom:clamp(24px, 2.54vw, 48px); }
body.obj-master:not(#obj):not(#obj) .hero .btn{ --btn-px:35px; letter-spacing:.04em; padding-right:calc(var(--btn-px) - .04em); }

/* Linha laranja com dobra, à direita do hero */
body.obj-master:not(#obj):not(#obj) .hero__line{ position:absolute; right:0; bottom:var(--tab-h); z-index:2; width:514px; height:180px; overflow:visible; pointer-events:none; }
body.obj-master:not(#obj):not(#obj) .hero__line path{ fill:none; stroke:var(--accent-line); stroke-width:1; vector-effect:non-scaling-stroke; }

/* Setas do carrossel, no canto inferior direito */
body.obj-master:not(#obj):not(#obj) .hero__controls{ position:absolute; right:0; bottom:0; z-index:3; display:flex; height:var(--tab-h); background:var(--accent); }
body.obj-master:not(#obj):not(#obj) .hero__arrow{
  width:40px; height:100%; display:grid; place-items:center;
  border:0; padding:0; background:transparent; color:var(--white); cursor:pointer;   /* chevrons brancos, como na referência */
  --focus:var(--white);
}
/* setas estáveis: sem efeito de hover, como na referência */
body.obj-master:not(#obj):not(#obj) .hero__arrow:focus-visible{ outline-offset:-4px; }
body.obj-master:not(#obj):not(#obj) .hero__arrow .i{ width:22px; height:22px; }
body.obj-master:not(#obj):not(#obj) .hero__arrow .i path{ stroke-width:1.2; }

/* =========================================================
   FABRICATING THE FUTURE — aba sobe no hero, degrau na saída
   ========================================================= */
body.obj-master:not(#obj):not(#obj) .future{ background:var(--black); color:var(--on-dark); padding:53px 0 101px; --focus:var(--accent); --step-h:40px; }
body.obj-master:not(#obj):not(#obj) .future.cut{ z-index:3; }   /* fica acima de "What we do" para o degrau aparecer */
/* aba: chanfros de 30 px com cantos suaves (a caixa é 10 px mais larga de cada lado para a curva de encaixe) */
body.obj-master:not(#obj):not(#obj) .future::before{
  content:""; position:absolute; bottom:100%;
  left:calc(var(--tab-inset) - 10px); right:calc(var(--tab-inset) - 10px);
  height:var(--tab-h); background:inherit;
  clip-path:polygon(
    4px 100%, 9.4px calc(100% - 1.3px), 13.6px calc(100% - 4.8px),
    calc(var(--tab-chamfer) + 7px) 4px, calc(var(--tab-chamfer) + 10.5px) 1px, calc(var(--tab-chamfer) + 15px) 0,
    calc(100% - var(--tab-chamfer) - 15px) 0, calc(100% - var(--tab-chamfer) - 10.5px) 1px, calc(100% - var(--tab-chamfer) - 7px) 4px,
    calc(100% - 13.6px) calc(100% - 4.8px), calc(100% - 9.4px) calc(100% - 1.3px), calc(100% - 4px) 100%);
}
body.obj-master:not(#obj):not(#obj) .future__grid{ display:grid; grid-template-columns:var(--split) minmax(0,1fr); align-items:start; }
body.obj-master:not(#obj):not(#obj) .future__title{ font-size:var(--fs-h2); color:var(--accent); }
body.obj-master:not(#obj):not(#obj) .future__text{ padding-top:10px; }
body.obj-master:not(#obj):not(#obj) .future__text p{ line-height:1.56; max-width:724px; }
body.obj-master:not(#obj):not(#obj) .future__text .btn{ margin-top:38px; }
body.obj-master:not(#obj):not(#obj) .future__video{ margin-top:103px; aspect-ratio:16 / 9; border-bottom:2px solid var(--accent); --ph-bg:#262B32; }
body.obj-master:not(#obj):not(#obj) .future__video .i{ width:64px; height:64px; color:rgba(255,255,255,.6); }
body.obj-master:not(#obj):not(#obj) .future__video .i path,body.obj-master:not(#obj):not(#obj) .future__video .i circle{ stroke-width:1; }
body.obj-master:not(#obj):not(#obj) .future__video .ph__label{ position:absolute; left:24px; bottom:18px; }

/* =========================================================
   WHAT WE DO — grade de serviços com painel laranja no hover
   ========================================================= */
body.obj-master:not(#obj):not(#obj) .services{ background:var(--gray-bg); padding:125px 0 199px; --focus:var(--ink); }
body.obj-master:not(#obj):not(#obj) .services .h2{ margin-bottom:55px; }
body.obj-master:not(#obj):not(#obj) .tiles{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-auto-rows:clamp(220px, 16.8vw, 320px); gap:19px; }
body.obj-master:not(#obj):not(#obj) .tile:nth-child(n+3){ grid-column:span 2; }
body.obj-master:not(#obj):not(#obj) .tile{ position:relative; display:block; overflow:hidden; color:var(--on-dark); text-decoration:none; }
body.obj-master:not(#obj):not(#obj) .tile:focus-visible{ outline-offset:4px; }
body.obj-master:not(#obj):not(#obj) .tile__media{ position:absolute; inset:0; --ph-bg:#747A83; }
body.obj-master:not(#obj):not(#obj) .tile__media picture,body.obj-master:not(#obj):not(#obj) .tile__media img{ display:block; width:100%; height:100%; }
body.obj-master:not(#obj):not(#obj) .tile__media img{ object-fit:cover; object-position:50% 50%; }
body.obj-master:not(#obj):not(#obj) .tile__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 55%); }
body.obj-master:not(#obj):not(#obj) .tile__media .ph__label{ position:absolute; top:14px; left:14px; padding:0; }
body.obj-master:not(#obj):not(#obj) .tile__label{
  position:absolute; left:31px; right:31px; bottom:31px;
  font-size:clamp(1rem, 1.155vw, 1.375rem); font-weight:500; line-height:1.15; letter-spacing:.01em; text-transform:uppercase;
}
body.obj-master:not(#obj):not(#obj) .tile__label::before{ content:""; display:block; width:32px; height:5px; margin-bottom:21px; background:var(--accent); }   /* 5 px, medido no vídeo (antes 3 px) */
/* Painel laranja translúcido (medido: #FF8731 a 82%) — a foto continua visível por baixo.
   Entra de baixo para cima em 600 ms e sai em 200 ms, como no vídeo. */
body.obj-master:not(#obj):not(#obj) .tile__panel{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:28px 20px 18px; overflow:auto;
  background:rgba(255,135,49,.82); color:var(--on-dark);
  transform:translateY(101%);
  transition:transform var(--duration-panel-out) var(--ease-in);
}
body.obj-master:not(#obj):not(#obj) .tile:hover .tile__panel,body.obj-master:not(#obj):not(#obj) .tile:focus-visible .tile__panel{ transform:none; transition:transform var(--duration-panel) var(--ease-premium); }
body.obj-master:not(#obj):not(#obj) .tile__panel .arrow{ position:absolute; top:29px; right:28px; --arrow-size:var(--arrow-lg); --arrow-stroke:1.3; color:var(--on-dark); }
body.obj-master:not(#obj):not(#obj) .tile__title{ margin-bottom:30px; padding-right:48px; font-size:clamp(1rem, 1.155vw, 1.375rem); font-weight:500; line-height:1.15; text-transform:uppercase; }
body.obj-master:not(#obj):not(#obj) .tile__desc{ font-size:var(--fs-text); line-height:1.56; max-width:40em; }
body.obj-master:not(#obj):not(#obj) .services__foot{ display:flex; align-items:center; justify-content:space-between; gap:40px; margin-top:60px; }
body.obj-master:not(#obj):not(#obj) .services__foot p{ max-width:792px; }
body.obj-master:not(#obj):not(#obj) .services__foot .btn{ --btn-px:20px; flex:none; }

/* =========================================================
   OUR CLIENTELE
   ========================================================= */
body.obj-master:not(#obj):not(#obj) .clients{ padding:148px 0 0; --focus:var(--ink); }
body.obj-master:not(#obj):not(#obj) .clients__row{
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); align-items:center; justify-items:center;
  margin:62px -41px 0;   /* a fileira de logos é um pouco mais larga que a coluna */
}
body.obj-master:not(#obj):not(#obj) .clients__logo{ width:150px; height:52px; }
body.obj-master:not(#obj):not(#obj) .rule{ height:1px; border:0; margin:0; background:var(--rule); }
body.obj-master:not(#obj):not(#obj) .clients .rule{ margin-top:94px; background:var(--rule-strong); }

/* =========================================================
   WE THRIVE ON IMPOSSIBLE — hover: foto abre, número fica laranja
   ========================================================= */
body.obj-master:not(#obj):not(#obj) .projects{ padding:76px 0 141px; --focus:var(--ink); --pm-w:clamp(150px, 12.35vw, 235px); --pm-w-open:clamp(260px, 22.9vw, 436px); --pm-h:clamp(190px, 15.75vw, 300px); }
body.obj-master:not(#obj):not(#obj) .projects .h2{ margin-bottom:57px; }
body.obj-master:not(#obj):not(#obj) .projects__list{ list-style:none; margin:0; padding:0; }
body.obj-master:not(#obj):not(#obj) .project{
  --pt:38px;
  position:relative;
  padding:var(--pt) 0 21px;
  border-bottom:1px solid var(--accent-soft);
  transition:border-color var(--duration-reveal) var(--ease-premium);
}
body.obj-master:not(#obj):not(#obj) .project:first-child{ --pt:0px; }
body.obj-master:not(#obj):not(#obj) .project__main{ display:flex; align-items:flex-start; gap:40px; width:calc(75% - 63px); }
body.obj-master:not(#obj):not(#obj) .project__media{ position:relative; flex:none; width:var(--pm-w); height:var(--pm-h); overflow:hidden; background:none; transition:width var(--duration-reveal) var(--ease-open); }
/* A foto tem sempre a largura da moldura ABERTA e fica centralizada: fechada, a moldura mostra
   só o miolo; no hover a moldura abre da esquerda para a direita e revela o resto da foto,
   que assenta de um zoom leve (1,03) para 1 — a foto "se abre", não estica. */
body.obj-master:not(#obj):not(#obj) .project__img{ position:absolute; top:0; bottom:0; left:50%; width:var(--pm-w-open); height:100%; object-fit:cover; object-position:50% 50%; display:flex; align-items:center; justify-content:center;
  transform:translateX(-50%) scale(1.03); transform-origin:50% 50%; transition:transform var(--duration-reveal) var(--ease-open); }
body.obj-master:not(#obj):not(#obj) .project__body{ flex:0 1 500px; min-width:0; }
body.obj-master:not(#obj):not(#obj) .project__logo{ width:96px; height:36px; }
body.obj-master:not(#obj):not(#obj) .project__title{ margin-top:20px; font-size:clamp(1.2rem, 1.34vw, 1.6rem); font-weight:500; line-height:1.3; color:var(--ink); }
body.obj-master:not(#obj):not(#obj) .project__body p{ margin-top:19px; font-size:var(--fs-text-sm); line-height:1.54; }
body.obj-master:not(#obj):not(#obj) .project__more{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--duration-reveal) var(--ease-open); }
body.obj-master:not(#obj):not(#obj) .project__more > div{ overflow:hidden; }
/* "View project" aparece em fade quando a foto termina de abrir */
body.obj-master:not(#obj):not(#obj) .project__more .link-arrow{ margin-top:16px; opacity:0; transform:translateY(4px);
  transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out), color var(--duration-hover) var(--ease-premium); }
body.obj-master:not(#obj):not(#obj) .project__num{
  position:absolute; left:calc(75% - 4px); top:calc(var(--pt) + var(--pm-h) / 2); transform:translateY(-50%);
  font-family:'Aeonik', var(--f-body); font-weight:400; font-size:var(--fs-num); line-height:1;
  letter-spacing:.05em; font-variant-numeric:lining-nums tabular-nums;
  color:var(--number);
  transition:color var(--duration-reveal) var(--ease-premium);
  pointer-events:none;
}
body.obj-master:not(#obj):not(#obj) .project:hover,body.obj-master:not(#obj):not(#obj) .project:focus-within{ border-bottom-color:var(--accent); }
body.obj-master:not(#obj):not(#obj) .project:hover .project__media,body.obj-master:not(#obj):not(#obj) .project:focus-within .project__media{ width:var(--pm-w-open); }
body.obj-master:not(#obj):not(#obj) .project:hover .project__more,body.obj-master:not(#obj):not(#obj) .project:focus-within .project__more{ grid-template-rows:1fr; }
body.obj-master:not(#obj):not(#obj) .project:hover .project__img,body.obj-master:not(#obj):not(#obj) .project:focus-within .project__img{ transform:translateX(-50%) scale(1); }
body.obj-master:not(#obj):not(#obj) .project:hover .project__more .link-arrow,body.obj-master:not(#obj):not(#obj) .project:focus-within .project__more .link-arrow{ opacity:1; transform:none;
  transition:opacity 450ms var(--ease-premium) 450ms, transform 450ms var(--ease-premium) 450ms, color var(--duration-hover) var(--ease-premium); }
body.obj-master:not(#obj):not(#obj) .project:hover .project__num,body.obj-master:not(#obj):not(#obj) .project:focus-within .project__num{ color:var(--accent); }

/* =========================================================
   OUR PROCESS — composição editorial com linhas conectoras
   (as linhas ficam paradas atrás das fotos; as fotos andam
    um pouco mais rápido que a rolagem e revelam a linha)
   ========================================================= */
body.obj-master:not(#obj):not(#obj) .process{ background:var(--navy); color:var(--on-dark); padding:96px 0 107px; --focus:var(--accent); }
body.obj-master:not(#obj):not(#obj) .process .h2{ color:var(--on-dark); margin-bottom:67px; }
body.obj-master:not(#obj):not(#obj) .process__grid{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(32px, 6%, 80px);
  grid-template-rows:auto auto 43px auto;
}
body.obj-master:not(#obj):not(#obj) .process__img{ width:100%; aspect-ratio:628 / 176; border-radius:3px; }
body.obj-master:not(#obj):not(#obj) .process__img{ position:relative; overflow:hidden; }   /* o que o placeholder dava: recorte no raio de 3 px */
body.obj-master:not(#obj):not(#obj) .process__img picture,body.obj-master:not(#obj):not(#obj) .process__img img{ display:block; width:100%; height:100%; }
body.obj-master:not(#obj):not(#obj) .process__img img{ object-fit:cover; object-position:50% 50%; }
body.obj-master:not(#obj):not(#obj) .process__img--a{ grid-area:1 / 1; }
body.obj-master:not(#obj):not(#obj) .process__img--b{ grid-area:2 / 2; --ph-bg:#5F6B78; }
body.obj-master:not(#obj):not(#obj) .process__img--c{ grid-area:4 / 1; --ph-bg:#56626F; }
body.obj-master:not(#obj):not(#obj) .process__step{ position:relative; }
body.obj-master:not(#obj):not(#obj) .process__step p{ max-width:470px; font-size:var(--fs-text-sm); line-height:1.54; }
body.obj-master:not(#obj):not(#obj) .process__step--1{ grid-area:1 / 2; align-self:center; }
body.obj-master:not(#obj):not(#obj) .process__step--2{ grid-area:2 / 1; align-self:end; margin-bottom:4px; }
body.obj-master:not(#obj):not(#obj) .process__step--3{ grid-area:3 / 2 / 5 / 3; align-self:end; margin-bottom:8px; }
body.obj-master:not(#obj):not(#obj) .process__label{
  position:absolute; left:0; right:0; bottom:100%;
  font-size:clamp(1.1rem, 1.26vw, 1.5rem); font-weight:500; line-height:1.2; text-align:center;
  color:var(--label-dark);
  pointer-events:none;
}
body.obj-master:not(#obj):not(#obj) .process__lines{ position:absolute; inset:0; z-index:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
body.obj-master:not(#obj):not(#obj) .process__lines path{ fill:none; stroke:var(--accent-line); stroke-width:1; }

/* =========================================================
   OUR ACHIEVEMENTS + escadas sob medida
   ========================================================= */
body.obj-master:not(#obj):not(#obj) .achievements{ padding:148px 0 0; --focus:var(--ink); }   /* mesmo respiro de "Nossos clientes", que também vem logo após um degrau (antes 207) */
body.obj-master:not(#obj):not(#obj) .achievements .h2{ text-align:center; }
body.obj-master:not(#obj):not(#obj) .achievements__intro{ max-width:980px; margin:32px auto 0; text-align:center; line-height:1.59; }
body.obj-master:not(#obj):not(#obj) .panels{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; width:min(1203px, 100%); margin:19px auto 0; }
body.obj-master:not(#obj):not(#obj) .panel{ position:relative; display:flex; align-items:flex-end; height:clamp(260px, 17.8vw, 339px); color:var(--on-dark); overflow:hidden; }
body.obj-master:not(#obj):not(#obj) .panel__media{ position:absolute; inset:0; --ph-bg:#474D56; transition:transform var(--duration-reveal) var(--ease-premium); }
body.obj-master:not(#obj):not(#obj) .panel:hover .panel__media{ transform:scale(1.04); }   /* zoom leve no hover, sem overlay extra */
body.obj-master:not(#obj):not(#obj) .panel__media .ph__label{ position:absolute; top:12px; left:12px; padding:0; }
body.obj-master:not(#obj):not(#obj) .panel__media > img,body.obj-master:not(#obj):not(#obj) .panel__media > picture > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--op, 50% 50%); }
body.obj-master:not(#obj):not(#obj) .panel__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 60%, rgba(0,0,0,.12) 100%); }
body.obj-master:not(#obj):not(#obj) .panel__body{ position:relative; padding:0 21px 20px; }
body.obj-master:not(#obj):not(#obj) .panel h3{ margin-bottom:10px; font-size:clamp(1.15rem, 1.18vw, 1.406rem); font-weight:500; line-height:1.2; }
body.obj-master:not(#obj):not(#obj) .panel p{ font-size:.844rem; line-height:1.333; }
body.obj-master:not(#obj):not(#obj) .railings{
  /* bloco mais largo que a coluna: começa 72 px antes e termina 114 px depois (medido) */
  margin:199px max(var(--gutter), calc((100% - var(--container)) / 2 - 114px)) 0 max(var(--gutter), calc((100% - var(--container)) / 2 - 72px));
  display:grid; grid-template-columns:minmax(0,687fr) minmax(0,772fr); column-gap:63px; align-items:start;
}
body.obj-master:not(#obj):not(#obj) .railings__text{ padding-top:10px; text-align:center; }
body.obj-master:not(#obj):not(#obj) .railings__text h3{ margin-bottom:35px; font-size:clamp(1.2rem, 1.34vw, 1.6rem); font-weight:500; line-height:1.25; color:var(--ink); }
body.obj-master:not(#obj):not(#obj) .railings__text p + p{ margin-top:27px; }
body.obj-master:not(#obj):not(#obj) .railings__img{ aspect-ratio:772 / 513; --ph-bg:#9C8577; }

/* =========================================================
   OUR MISSION & VISION — linhas laranjas e título grande
   ========================================================= */
body.obj-master:not(#obj):not(#obj) .mission{ padding:121px 0 0; overflow-x:hidden; overflow-x:clip; --focus:var(--ink); }
body.obj-master:not(#obj):not(#obj) .mission__grid{ display:grid; grid-template-columns:minmax(0,708fr) minmax(0,536fr); column-gap:94px; align-items:start; margin-top:162px; }
body.obj-master:not(#obj):not(#obj) .mission__media{ position:relative; }
body.obj-master:not(#obj):not(#obj) .mission__img{ aspect-ratio:708 / 546; --ph-bg:#A7AFB8; }
/* linha que vem da margem esquerda, dobra e desce atrás da foto (a foto cobre o fim dela) */
body.obj-master:not(#obj):not(#obj) .mission__media::before{ content:""; position:absolute; top:-76px; right:calc(100% - 50px); width:100vw; height:1px; background:var(--accent-line); }
body.obj-master:not(#obj):not(#obj) .mission__media::after{ content:""; position:absolute; top:-76px; left:50px; width:260px; height:1px; background:var(--accent-line); transform-origin:0 50%; transform:rotate(47.6deg); }
body.obj-master:not(#obj):not(#obj) .mission__text{ margin-top:-16px; }
/* linha laranja do título: fica logo abaixo de "Nossa missão & visão" (~18 px da tinta
   das letras, a mesma folga que ela tinha do texto); o texto continua no mesmo lugar,
   porque o que sai de cima volta embaixo (as duas margens somam 48 px, como antes) */
body.obj-master:not(#obj):not(#obj) .mission__rule{ display:block; width:100vw; height:1px; margin:calc(16.5px - var(--fs-h2) * .1745) 0 calc(31.5px + var(--fs-h2) * .1745) -94px; background:var(--accent-line); }
body.obj-master:not(#obj):not(#obj) .mission__text p{ max-width:536px; }
body.obj-master:not(#obj):not(#obj) .mission .link-arrow{ margin-top:26px; }

/* =========================================================
   QUALITY & SUSTAINABILITY
   ========================================================= */
body.obj-master:not(#obj):not(#obj) .quality{ position:relative; padding:103px 0 200px; overflow-x:hidden; overflow-x:clip; --focus:var(--ink); }
body.obj-master:not(#obj):not(#obj) .quality__grid{ display:grid; grid-template-columns:minmax(0,532fr) minmax(0,735fr); column-gap:69px; align-items:start; }
body.obj-master:not(#obj):not(#obj) .quality__text{ padding-top:81px; }
body.obj-master:not(#obj):not(#obj) .quality__text p{ max-width:532px; margin-top:49px; }
body.obj-master:not(#obj):not(#obj) .quality .link-arrow{ margin-top:22px; }
body.obj-master:not(#obj):not(#obj) .quality__media{ position:relative; }
body.obj-master:not(#obj):not(#obj) .quality__img{ aspect-ratio:735 / 567; --ph-bg:#A99C8F; }
/* linha horizontal que sai de trás da foto até a borda direita */
body.obj-master:not(#obj):not(#obj) .quality__media::after{ content:""; position:absolute; left:60%; top:68%; width:100vw; height:1px; background:var(--accent-line); }
body.obj-master:not(#obj):not(#obj) .quality__diag{ position:absolute; inset:0; z-index:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
body.obj-master:not(#obj):not(#obj) .quality__diag path{ fill:none; stroke:var(--accent-line); stroke-width:1; }

/* =========================================================
   CLIENTS & TESTIMONIALS — hover no cliente troca o texto
   ========================================================= */
body.obj-master:not(#obj):not(#obj) .testimonials{ background:var(--gray-bg); padding:96px 0 102px; --focus:var(--ink); }
body.obj-master:not(#obj):not(#obj) .testimonials__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:54px; align-items:stretch; }
body.obj-master:not(#obj):not(#obj) .testimonials__left{ display:flex; flex-direction:column; }
body.obj-master:not(#obj):not(#obj) .testimonials__lead{ display:grid; margin-top:55px; }
body.obj-master:not(#obj):not(#obj) .lead{
  grid-area:1 / 1; max-width:620px;
  font-size:var(--fs-lead); line-height:1.25; color:var(--ink);
  opacity:0; transform:translateY(5px);
  transition:opacity 250ms var(--ease-in), transform 250ms var(--ease-in);
}
/* troca editorial: o texto atual sai (250 ms, sobe 5 px) e só então o novo entra (380 ms, desce 5 px → 0) */
body.obj-master:not(#obj):not(#obj) .lead.is-active{ opacity:1; transform:none; transition:opacity 380ms var(--ease-premium) 220ms, transform 380ms var(--ease-premium) 220ms; }
body.obj-master:not(#obj):not(#obj) .lead.is-leaving{ opacity:0; transform:translateY(-5px); }
body.obj-master:not(#obj):not(#obj) .testimonials__line{ margin-top:auto; margin-bottom:1px; height:1px; background:var(--accent); }
body.obj-master:not(#obj):not(#obj) .partners{ list-style:none; margin:0; padding:0; }
body.obj-master:not(#obj):not(#obj) .partner{
  position:relative;
  display:grid; grid-template-columns:110px 1fr; column-gap:60px; align-items:center;
  width:100%; padding:28px 0 27px;
  border:0; border-bottom:3px solid var(--rule-2); background:none;   /* 3 px, medido no vídeo (antes 2 px) */
  font:inherit; color:inherit; text-align:left; cursor:default;
}
body.obj-master:not(#obj):not(#obj) .partners li:first-child .partner{ padding-top:0; }
body.obj-master:not(#obj):not(#obj) .partner::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:3px;
  background:var(--accent); opacity:0;
  transition:opacity var(--duration-hover) var(--ease-premium);
}
body.obj-master:not(#obj):not(#obj) .partner.is-active::after{ opacity:1; }
body.obj-master:not(#obj):not(#obj) .partner__logo{ width:110px; height:40px; }
body.obj-master:not(#obj):not(#obj) .partner strong{ display:block; max-width:320px; font-size:1.175rem; font-weight:400; line-height:1.15; color:var(--ink); }
body.obj-master:not(#obj):not(#obj) .partner small{ display:block; margin-top:9px; font-size:.78rem; line-height:1.2; color:var(--muted); }

/* =========================================================
   RODAPÉ + CONTATO
   ========================================================= */
body.obj-master:not(#obj):not(#obj) .footer{ background:var(--footer); color:var(--on-dark); padding:84px 0 80px; --focus:var(--accent); }
body.obj-master:not(#obj):not(#obj) .footer__grid{ display:grid; grid-template-columns:minmax(0,532fr) minmax(0,736fr); column-gap:68px; }
body.obj-master:not(#obj):not(#obj) .footer__brand{ width:268px; height:26px; }
body.obj-master:not(#obj):not(#obj) .footer__about > p{ margin-top:17px; line-height:1.29; }
body.obj-master:not(#obj):not(#obj) .footer__rule{ height:1px; border:0; margin:41px 0 39px; background:rgba(255,255,255,.14); }
body.obj-master:not(#obj):not(#obj) .footer__links{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:278px 1fr; row-gap:21.6px; font-size:.984rem; line-height:1.2; }
body.obj-master:not(#obj):not(#obj) .footer__links a{
  font-weight:500; text-decoration:none;
  transition:color var(--duration-hover) var(--ease-premium);
}
body.obj-master:not(#obj):not(#obj) .footer__links a:hover,body.obj-master:not(#obj):not(#obj) .footer__links a:focus-visible{ color:var(--accent); }
body.obj-master:not(#obj):not(#obj) .footer__contact{ list-style:none; margin:39px 0 0; padding:0; display:grid; row-gap:10px; font-size:.89rem; font-weight:500; line-height:1.4; }
body.obj-master:not(#obj):not(#obj) .footer__contact li{ display:flex; flex-wrap:wrap; align-items:center; column-gap:22px; row-gap:10px; }
body.obj-master:not(#obj):not(#obj) .footer__contact li:first-child{ margin-bottom:15px; }
body.obj-master:not(#obj):not(#obj) .footer__contact span{ display:inline-flex; align-items:center; gap:7px; }
body.obj-master:not(#obj):not(#obj) .footer__contact .i{ width:15px; height:15px; color:var(--accent); }
body.obj-master:not(#obj):not(#obj) .footer__about .footer__credit{ margin-top:50px; font-size:.77rem; font-weight:500; color:var(--on-dark-muted); }
body.obj-master:not(#obj):not(#obj) .footer__form{ margin-top:-4px; }
body.obj-master:not(#obj):not(#obj) .footer .display{ font-size:var(--fs-h2-contact); color:var(--on-dark); }
body.obj-master:not(#obj):not(#obj) .form{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px 15px; margin-top:51px; }
body.obj-master:not(#obj):not(#obj) .field{ position:relative; }
body.obj-master:not(#obj):not(#obj) .field--full{ grid-column:1 / -1; }
body.obj-master:not(#obj):not(#obj) .field input,body.obj-master:not(#obj):not(#obj) .field textarea{
  display:block; width:100%; height:45px; padding:14px 16px 10px;
  border:0; border-bottom:1px solid var(--accent); border-radius:0;
  background:var(--field); color:var(--on-dark);
  font:inherit; font-size:.9375rem;
}
body.obj-master:not(#obj):not(#obj) .field textarea{ height:145px; resize:vertical; }
body.obj-master:not(#obj):not(#obj) .field label{
  position:absolute; left:16px; top:12px;
  font-size:.875rem; font-weight:500; color:var(--on-dark); pointer-events:none;
  transition:opacity var(--duration-fast) var(--ease-premium);
}
body.obj-master:not(#obj):not(#obj) .field input:not(:placeholder-shown) + label,
body.obj-master:not(#obj):not(#obj) .field textarea:not(:placeholder-shown) + label{ opacity:0; }
body.obj-master:not(#obj):not(#obj) .field input:focus-visible,body.obj-master:not(#obj):not(#obj) .field textarea:focus-visible{ outline:1px solid var(--accent); outline-offset:0; }   /* foco visível na mesma espessura de 1 px, sem brilho */
body.obj-master:not(#obj):not(#obj) .captcha{ grid-column:1 / -1; width:303px; height:77px; margin-top:8px; --ph-bg:#F2F2F2; --ph-fg:#8A8F97; background-image:none; }
body.obj-master:not(#obj):not(#obj) .form .btn{ grid-column:1 / -1; justify-self:start; min-height:47px; margin-top:9px; --btn-px:50px; background:transparent; }

/* =========================================================
   RESPONSIVO — tablet (900 px)
   ========================================================= */
@media (max-width:900px){
  :root{ --step-h:28px; --tab-h:30px; --tab-inset:8%; --tab-chamfer:24px; }
  body.obj-master:not(#obj):not(#obj) .future{ --step-h:24px; }
  body.obj-master:not(#obj):not(#obj) .header__inner{ gap:24px; }
  body.obj-master:not(#obj):not(#obj) .nav{ gap:24px; }
  body.obj-master:not(#obj):not(#obj) .hero{ height:auto; min-height:640px; }
  body.obj-master:not(#obj):not(#obj) .hero__content{ padding-top:120px; }
  body.obj-master:not(#obj):not(#obj) .hero__line{ display:none; }
  body.obj-master:not(#obj):not(#obj) .future__grid{ grid-template-columns:1fr; row-gap:28px; }
  body.obj-master:not(#obj):not(#obj) .future__video{ margin-top:56px; }
  body.obj-master:not(#obj):not(#obj) .services{ padding-bottom:120px; }
  body.obj-master:not(#obj):not(#obj) .tiles{ grid-template-columns:1fr 1fr; }
  body.obj-master:not(#obj):not(#obj) .tile:nth-child(n){ grid-column:auto; }
  body.obj-master:not(#obj):not(#obj) .tile:nth-child(5){ grid-column:1 / -1; }
  body.obj-master:not(#obj):not(#obj) .clients{ padding-top:110px; }
  body.obj-master:not(#obj):not(#obj) .clients__row{ grid-template-columns:repeat(3, minmax(0,1fr)); row-gap:28px; margin-inline:0; }
  body.obj-master:not(#obj):not(#obj) .project__main{ width:calc(100% - 140px); }
  body.obj-master:not(#obj):not(#obj) .project__num{ left:auto; right:0; font-size:5.5rem; letter-spacing:0; }
  body.obj-master:not(#obj):not(#obj) .process__grid{ grid-template-columns:1fr; grid-template-rows:none; }
  body.obj-master:not(#obj):not(#obj) .process__img--a,body.obj-master:not(#obj):not(#obj) .process__img--b,body.obj-master:not(#obj):not(#obj) .process__img--c,
  body.obj-master:not(#obj):not(#obj) .process__step--1,body.obj-master:not(#obj):not(#obj) .process__step--2,body.obj-master:not(#obj):not(#obj) .process__step--3{ grid-area:auto; align-self:auto; margin:0; }
  body.obj-master:not(#obj):not(#obj) .process__step{ padding:18px 0 40px; }
  body.obj-master:not(#obj):not(#obj) .process__label{ position:static; margin-bottom:8px; text-align:left; color:#3B4A57; }
  body.obj-master:not(#obj):not(#obj) .process__lines{ display:none; }
  body.obj-master:not(#obj):not(#obj) .achievements{ padding-top:110px; }
  body.obj-master:not(#obj):not(#obj) .panels{ grid-template-columns:1fr 1fr; }
  body.obj-master:not(#obj):not(#obj) .railings{ grid-template-columns:1fr; row-gap:40px; margin-top:100px; }
  body.obj-master:not(#obj):not(#obj) .mission__grid,body.obj-master:not(#obj):not(#obj) .quality__grid{ grid-template-columns:1fr; row-gap:40px; }
  body.obj-master:not(#obj):not(#obj) .mission__grid{ margin-top:120px; }
  body.obj-master:not(#obj):not(#obj) .mission__text{ margin-top:0; }
  body.obj-master:not(#obj):not(#obj) .mission__rule{ margin-left:calc(-1 * var(--gutter)); }
  body.obj-master:not(#obj):not(#obj) .quality{ padding:110px 0 120px; }
  body.obj-master:not(#obj):not(#obj) .quality__text{ padding-top:0; }
  body.obj-master:not(#obj):not(#obj) .quality__media::after,body.obj-master:not(#obj):not(#obj) .quality__diag{ display:none; }
  body.obj-master:not(#obj):not(#obj) .testimonials__grid{ grid-template-columns:1fr; row-gap:40px; }
  body.obj-master:not(#obj):not(#obj) .testimonials__line{ display:none; }
  body.obj-master:not(#obj):not(#obj) .footer__grid{ grid-template-columns:1fr; row-gap:56px; }
  body.obj-master:not(#obj):not(#obj) .footer__form{ margin-top:0; }
}

/* =========================================================
   RESPONSIVO — celular (560 px)
   ========================================================= */
@media (max-width:560px){
  :root{ --step-h:20px; --tab-h:26px; --tab-chamfer:16px; }
  body.obj-master:not(#obj):not(#obj) .future{ --step-h:18px; }
  body.obj-master:not(#obj):not(#obj) .nav{ display:none; }
  body.obj-master:not(#obj):not(#obj) .header__inner{ justify-content:space-between; }
  body.obj-master:not(#obj):not(#obj) .btn-contact{ height:38px; padding:1px 14px 0 16px; gap:10px; font-size:.8125rem; }
  /* menu hambúrguer: o "Contate-nos" sai do header e vai para dentro do painel, como na referência */
  body.obj-master:not(#obj):not(#obj) .header__inner{ position:relative; }
  body.obj-master:not(#obj):not(#obj) .header__inner > .btn-contact{ display:none; }
  body.obj-master:not(#obj):not(#obj) .nav-toggle{ display:flex; }
  body.obj-master:not(#obj):not(#obj) .mnav{ display:block; }
  body.obj-master:not(#obj):not(#obj) .hero{ height:800px; min-height:800px; }   /* mobile aprovado: 800 px (o tablet segue com height:auto / min-height:640px) */
  body.obj-master:not(#obj):not(#obj) .hero__content{ padding:110px 0 80px; }
  body.obj-master:not(#obj):not(#obj) .services{ padding:96px 0 110px; }
  body.obj-master:not(#obj):not(#obj) .tiles{ grid-template-columns:1fr; }
  body.obj-master:not(#obj):not(#obj) .tile:nth-child(n){ grid-column:auto; }
  body.obj-master:not(#obj):not(#obj) .services__foot{ flex-direction:column; align-items:flex-start; }
  body.obj-master:not(#obj):not(#obj) .clients{ padding-top:96px; }
  body.obj-master:not(#obj):not(#obj) .achievements{ padding-top:96px; }
  body.obj-master:not(#obj):not(#obj) .clients__row{ grid-template-columns:1fr 1fr; }
  body.obj-master:not(#obj):not(#obj) .project{ display:flex; flex-direction:column; }
  body.obj-master:not(#obj):not(#obj) .project__main{ flex-direction:column; width:100%; gap:20px; }
  body.obj-master:not(#obj):not(#obj) .project__body{ flex:none; width:100%; }
  body.obj-master:not(#obj):not(#obj) .project__media,body.obj-master:not(#obj):not(#obj) .project:hover .project__media,body.obj-master:not(#obj):not(#obj) .project:focus-within .project__media{ width:100%; height:auto; aspect-ratio:16 / 10; }
  /* número abaixo do "Ver detalhes", com a mesma distância visual que tinha da foto (18,5 px de tinta a tinta) */
  body.obj-master:not(#obj):not(#obj) .project__num{ position:static; transform:none; margin-top:4.6px; font-size:3.25rem; }
  body.obj-master:not(#obj):not(#obj) .project__more{ grid-template-rows:1fr; }
  body.obj-master:not(#obj):not(#obj) .project__more .link-arrow{ opacity:1; transform:none; }
  body.obj-master:not(#obj):not(#obj) .project__img,body.obj-master:not(#obj):not(#obj) .project:hover .project__img,body.obj-master:not(#obj):not(#obj) .project:focus-within .project__img{ left:0; width:100%; transform:none; }
  /* O processo: foto na proporção 400 × 308,97; os mini-títulos saem da tela
     (continuam para leitor de tela) e o respiro foto → texto fica o mesmo 18 px */
  body.obj-master:not(#obj):not(#obj) .process__img{ aspect-ratio:400 / 308.97; }
  body.obj-master:not(#obj):not(#obj) .process__label{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  body.obj-master:not(#obj):not(#obj) .panels{ grid-template-columns:1fr; }
  body.obj-master:not(#obj):not(#obj) .mission{ padding-top:80px; }
  /* Missão: a foto desce para baixo do "Conheça mais", como em Corten & aço inoxidável.
     O vão de 96 px é o mesmo que já existia acima da foto e comporta as linhas
     laranja que saem dela (começam 76 px acima), sem cruzar o texto. */
  body.obj-master:not(#obj):not(#obj) .mission__grid{ margin-top:48px; row-gap:96px; }   /* título mais perto da linha cinza acima (era 96) */
  /* linha laranja do título some no celular, mas o espaço dela fica: o texto não se move em relação ao título */
  body.obj-master:not(#obj):not(#obj) .mission__rule{ visibility:hidden; }
  body.obj-master:not(#obj):not(#obj) .achievements__intro,body.obj-master:not(#obj):not(#obj) .railings__text p{ text-align:justify; }
  body.obj-master:not(#obj):not(#obj) .mission__media{ order:1; }
  body.obj-master:not(#obj):not(#obj) .quality{ padding-top:96px; }
  body.obj-master:not(#obj):not(#obj) .lead{ font-size:1.375rem; }   /* frase de Parceiros & clientes menor no celular (era 28 px) */
  /* Parceiros no celular: um parceiro por bloco — logo na própria linha (alinhado à esquerda,
     largura natural, contain, até a largura útil), texto abaixo, divisor entre os blocos */
  body.obj-master:not(#obj):not(#obj) .partner{ display:flex; flex-direction:column; align-items:flex-start; row-gap:18px; }
  body.obj-master:not(#obj):not(#obj) .partner__logo{ display:flex; align-items:center; width:auto; max-width:100%; height:36px; }
  body.obj-master:not(#obj):not(#obj) .partner__logo.ph{ width:140px; }                 /* placeholder: um único slot por parceiro */
  body.obj-master:not(#obj):not(#obj) .partner__logo > img{ display:block; width:auto; max-width:100%; height:100%; object-fit:contain; object-position:0 50%; }
  /* Portas no celular: título grande e parágrafos à esquerda, na mesma coluna recuada dos parágrafos
     (32 px a 375 → 36 px a partir de ~420 px; sempre em 2 linhas, sem overflow) */
  body.obj-master:not(#obj):not(#obj) .railings__text h3{ max-width:338px; margin-inline:auto; padding-inline:22px; box-sizing:content-box;
    font-size:clamp(32px, 10.75vw - 9px, 36px); line-height:1.1; text-align:left; }
  body.obj-master:not(#obj):not(#obj) .railings__text p{ text-align:left; }
  body.obj-master:not(#obj):not(#obj) .form{ grid-template-columns:1fr; }
  body.obj-master:not(#obj):not(#obj) .captcha{ width:100%; max-width:303px; }
  body.obj-master:not(#obj):not(#obj) .footer__brand{ width:200px; }
  body.obj-master:not(#obj):not(#obj) .footer__links{ grid-template-columns:1fr 1fr; }
}

/* =========================================================
   CELULAR — ritmo vertical calibrado pelo FireShot mobile da referência
   (página inteira capturada a 460 px de largura; distâncias de tinta a tinta).
   Só distâncias: tamanhos de fonte, fotos e conteúdo não mudam.
   ========================================================= */
@media (max-width:560px){
  /* Nossos clientes: título com caixa de 212 × 54 px; logos um abaixo do outro, cada um numa área
     da largura útil × 36 px (object-fit: contain), a cada 93 px, como na referência */
  body.obj-master:not(#obj):not(#obj) .clients{ padding-top:76px; }                                 /* degrau → título 60 px, como na referência (era 73) */
  body.obj-master:not(#obj):not(#obj) .clients .h2-sm{ font-size:45.58px; line-height:54px; }   /* texto "Nossos clientes" = 212,02 px de largura (tracking -.01em mantido) */
  body.obj-master:not(#obj):not(#obj) .clients__row{ display:flex; flex-direction:column; row-gap:var(--cl-gap,57px); margin:var(--cl-top,68px) 0 0; }
  body.obj-master:not(#obj):not(#obj) .clients__logo{ width:100%; height:36px; }
  body.obj-master:not(#obj):not(#obj) .clients__logo > img{ display:block; width:100%; height:100%; object-fit:contain; }
  body.obj-master:not(#obj):not(#obj) .clients .rule{ margin-top:var(--cl-rule,77.6px); }
  /* Portas: coluna de leitura como a da referência (recuo de 42 px, até 338 px de largura) */
  body.obj-master:not(#obj):not(#obj) .railings__text p{ max-width:338px; margin-inline:auto; padding-inline:22px; box-sizing:content-box; }
  /* Feito para cada espaço */
  body.obj-master:not(#obj):not(#obj) .projects{ padding-top:44px; padding-bottom:103px; }         /* linha cinza → título 40 px; última linha → O processo 103 px */
  body.obj-master:not(#obj):not(#obj) .projects .h2{ margin-bottom:29px; }                          /* título → 1ª foto 26,5 px */
  body.obj-master:not(#obj):not(#obj) .project{ --pt:41.7px; }                                      /* linha do card → foto seguinte 40 px */
  body.obj-master:not(#obj):not(#obj) .project__title{ margin-top:24px; }                           /* logo → título do projeto 26 px */
  body.obj-master:not(#obj):not(#obj) .project__body p{ margin-top:21px; }                          /* título do projeto → texto 30 px */
  body.obj-master:not(#obj):not(#obj) .project__more .link-arrow{ margin-top:32.7px; }              /* texto → "Ver detalhes" 39 px */
  /* Nossa missão & visão */
  body.obj-master:not(#obj):not(#obj) .mission__grid{ grid-template-columns:minmax(0,1fr); margin-top:var(--m-top,71.7px); row-gap:var(--m-gap,68px); }   /* "Conheça mais" → foto 72,5 px */
  body.obj-master:not(#obj):not(#obj) .mission__rule{ margin-top:0; margin-bottom:var(--m-rule,21.6px); }   /* título → texto 33,5 px (a linha segue oculta) */
  body.obj-master:not(#obj):not(#obj) .mission .link-arrow{ margin-top:var(--m-link,35.7px); }       /* texto → "Conheça mais" 42 px */
  body.obj-master:not(#obj):not(#obj) .mission__media::before,body.obj-master:not(#obj):not(#obj) .mission__media::after{ top:-56px; }  /* linhas laranja acompanham o vão menor acima da foto */
  /* Corten & aço inoxidável */
  body.obj-master:not(#obj):not(#obj) .quality{ padding-top:var(--q-top,55.6px); padding-bottom:var(--q-bot,107.5px); }  /* foto da missão → título 54 px; foto da equipe → próxima seção 107 px */
  body.obj-master:not(#obj):not(#obj) .quality__text p{ margin-top:var(--q-p,22.5px); }             /* título → texto 25 px */
  body.obj-master:not(#obj):not(#obj) .quality .link-arrow{ margin-top:var(--q-link,28.9px); }       /* texto → "Ver materiais" 39 px */
  body.obj-master:not(#obj):not(#obj) .quality__grid{ row-gap:var(--q-gap,12.1px); }                /* "Ver materiais" → foto 19,5 px */
}

/* Telas de toque: o link "View project" fica sempre visível */
@media (hover:none){
  body.obj-master:not(#obj):not(#obj) .project__more{ grid-template-rows:1fr; }
  body.obj-master:not(#obj):not(#obj) .project__more .link-arrow{ opacity:1; transform:none; }
}
@media (hover:none) and (min-width:561px){
  body.obj-master:not(#obj):not(#obj) .project__img,body.obj-master:not(#obj):not(#obj) .project:hover .project__img,body.obj-master:not(#obj):not(#obj) .project:focus-within .project__img{ transform:translateX(-50%); }
}

/* Movimento reduzido (Windows com "Efeitos de animação" desligado, por exemplo):
   só saem a rolagem suave e o parallax das fotos (desligado no JS). O slide do hero,
   os hovers e as trocas de conteúdo continuam iguais, porque fazem parte do desenho
   da referência e só acontecem quando a pessoa clica ou passa o mouse. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

/* peso máximo real = Medium 500 (sem negrito sintético) */
body.obj-master:not(#obj):not(#obj) :where(b, strong, th, h1, h2, h3, h4, h5, h6){ font-weight:500; }

/* eyebrow do hero · Aeonik Medium 500 · 25/36 */
body.obj-master:not(#obj):not(#obj) .hero__eyebrow{ font-family:'Aeonik', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:500; font-size:25px; line-height:36px; }
@media (max-width:991px){ body.obj-master:not(#obj):not(#obj) .hero__eyebrow{ font-size:var(--fs-eyebrow); line-height:calc(var(--fs-eyebrow) * 1.44); } }

/* =========================================================
   OBJETARIA · CAMADA WORDPRESS/ELEMENTOR (gerada — não faz parte do master)
   1. Os invólucros do Elementor (section > container > column > widget) ficam
      "transparentes": sem padding, margem, largura máxima nem posicionamento,
      para que cada <section> do master se comporte como no site.html.
   2. Slots preenchidos pela Biblioteca de Mídia (REAL_ASSET_REQUIRED).
   ========================================================= */
body.obj-master:not(#obj):not(#obj):not(.elementor-editor-active) .elementor-section.obj-sec,
body.obj-master:not(#obj):not(#obj):not(.elementor-editor-active) .obj-sec > .elementor-container,
body.obj-master:not(#obj):not(#obj):not(.elementor-editor-active) .obj-sec .elementor-column,
body.obj-master:not(#obj):not(#obj):not(.elementor-editor-active) .obj-sec .elementor-widget-wrap,
body.obj-master:not(#obj):not(#obj):not(.elementor-editor-active) .obj-sec .elementor-widget,
body.obj-master:not(#obj):not(#obj):not(.elementor-editor-active) .obj-sec .elementor-widget-container{
  position:static; display:block; width:auto; max-width:none; min-height:0;
  margin:0; padding:0; border:0; background:none; box-shadow:none; transform:none;
}
body.obj-master:not(#obj):not(#obj) .elementor-section.obj-sec{ margin:0; padding:0; }
body.obj-master:not(#obj):not(#obj) .obj-sec .elementor-widget:not(:last-child){ margin:0; }
/* no editor os invólucros continuam posicionados (alças do Elementor), mas sem espaçamento */
body.obj-master:not(#obj):not(#obj).elementor-editor-active .obj-sec .elementor-widget-wrap,
body.obj-master:not(#obj):not(#obj).elementor-editor-active .obj-sec .elementor-element-populated{ padding:0; }

/* editor: o header do master é absoluto (altura 0); o Elementor o trata como "widget vazio" e
   injeta um ícone de 26 px que empurraria o hero para baixo só no editor */
body.obj-master:not(#obj):not(#obj).elementor-editor-active .obj-sec .elementor-widget-empty{ min-height:0; padding:0; background:none; }
body.obj-master:not(#obj):not(#obj).elementor-editor-active .obj-sec .elementor-widget-empty-icon{ display:none; }
body.obj-master:not(#obj):not(#obj).elementor-editor-active .obj-sec .elementor-column{ min-height:0; }

/* logo oficial no header (ajuste aprovado sobre o master, que tinha 62×26 da referência antiga).
   Calibração 2 (a 1ª ampliação era 110×36 / 96×32): 176×56 no desktop e 120×40 no celular, logo em
   contain e alinhada à esquerda (.obj-fill--contain); no desktop a área visível fica ~1,5× maior.
   No tablet (561–900) a largura acompanha o espaço livre do header para o menu nunca quebrar linha. */
body.obj-master:not(#obj):not(#obj) .header__logo{ width:176px; height:56px; }
@media (max-width:900px){ body.obj-master:not(#obj):not(#obj) .header__logo{ width:clamp(62px, calc(100% - 485px), 176px); } }
@media (max-width:560px){ body.obj-master:not(#obj):not(#obj) .header__logo{ width:120px; height:40px; } }

/* logos dos projetos em "Feito para cada espaço" (ajuste aprovado sobre o master, que tinha 96×36):
   170×50 no desktop e 160×50 no celular, logo em contain e alinhada ao início da coluna de texto
   (.obj-fill--contain, --obj-pos 0 50%). A margem negativa mantém no fluxo os mesmos 36 px do slot
   antigo: título, texto, número e altura do card não se movem; logo → título ≈ 14–18 px de tinta a tinta. */
body.obj-master:not(#obj):not(#obj) .project__logo{ width:170px; height:50px; margin-bottom:-14px; }
@media (max-width:560px){ body.obj-master:not(#obj):not(#obj) .project__logo{ width:160px; } }

/* logo oficial no rodapé (ajuste aprovado sobre o master, que tinha 268×26 da referência):
   240×80 no desktop/tablet e 210×70 no celular, em contain e alinhada à esquerda. O PNG da assinatura tem
   ~27% de área transparente em cima, ~22% embaixo e ~2,4% à esquerda: as margens negativas só compensam
   essa área, para a parte visível começar onde começava, alinhar com o texto e ficar a ~24 px do parágrafo. */
body.obj-master:not(#obj):not(#obj) .footer__brand{ width:240px; height:80px; margin:-17px 0 -14px -6px; }
@media (max-width:560px){ body.obj-master:not(#obj):not(#obj) .footer__brand{ width:210px; height:70px; margin:-13px 0 -12px -5px; } }

/* logos de "Nossos clientes" (ajuste aprovado sobre o master, que tinha 150×52 e, no celular, a largura útil × 36):
   210×72 a partir do tablet (limitado à coluna da grade menos 24 px, nunca abaixo dos 150 de antes) e imagem até
   180×64 no celular, sempre em contain e centrada. As margens negativas mantêm no fluxo a altura antiga (52 / 36):
   o slot cresce em torno do mesmo centro; título, linha inferior, centros e altura da seção não se movem. */
body.obj-master:not(#obj):not(#obj) .clients__logo{ width:clamp(150px, calc(100% - 24px), 210px); height:72px; margin-block:-10px; }
@media (max-width:560px){
  body.obj-master:not(#obj):not(#obj) .clients__logo{ width:100%; height:64px; margin-block:-14px; }
  body.obj-master:not(#obj):not(#obj) .clients__logo > img{ width:min(180px, 100%); margin-inline:auto; }
}

/* formulário de contato funcional (plugin, includes/contato.php): a forma do master não muda. O aviso de estado
   (enviando / sucesso / erro) e o campo-isca anti-spam ficam fora do fluxo da grade, então o formulário não cresce;
   o reCAPTCHA v2 (304×78) entra na caixa já reservada de 303×77 sem alterar a geometria. */
body.obj-master:not(#obj):not(#obj) .form{ position:relative; }
body.obj-master:not(#obj):not(#obj) .form__hp{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
body.obj-master:not(#obj):not(#obj) .form__status{ position:absolute; left:0; top:calc(100% + 14px); margin:0; max-width:100%; font-size:.875rem; line-height:1.35; color:var(--on-dark-muted); }
body.obj-master:not(#obj):not(#obj) .form__status.is-ok{ color:var(--on-dark); }
body.obj-master:not(#obj):not(#obj) .form__status.is-error{ color:var(--accent); }
body.obj-master:not(#obj):not(#obj) .form .btn[disabled]{ opacity:.6; cursor:progress; }
body.obj-master:not(#obj):not(#obj) .captcha.is-ready{ display:block; overflow:visible; background:none; }
body.obj-master:not(#obj):not(#obj) .captcha.is-ready .ph__label{ display:none; }

/* slots preenchidos: a forma do slot é fixa, o asset se adapta */
body.obj-master:not(#obj):not(#obj) .ph.obj-filled{ background-image:none; }
body.obj-master:not(#obj):not(#obj) .ph--logo.obj-filled,body.obj-master:not(#obj):not(#obj) .ph--line.obj-filled{ border:0; background:none; }
body.obj-master:not(#obj):not(#obj) .obj-fill{ position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:var(--obj-pos, 50% 50%); }
body.obj-master:not(#obj):not(#obj) .obj-fill--contain{ position:static; object-fit:contain; }
/* foto real de projeto: mesma geometria do placeholder (mais larga que a moldura, revelada no hover);
   sem isto a regra base img{max-width:100%} do master a encolheria para a largura fechada */
body.obj-master:not(#obj):not(#obj) .project__media > img.project__img{ max-width:none; }
@media (max-width:560px){
  body.obj-master:not(#obj):not(#obj) .partner__logo.ph.obj-filled{ width:auto; }
}

/* 1.2.22 · Home — dois textos com tamanho pedido pelo cliente (fonte, cor, alinhamento e posição do master):
   "Portas Pivotantes E Portões Em Corten" a 24 px em todas as larguras; a frase de "Parceiros & clientes" (as quatro
   frases que se revezam no mesmo lugar, para o tamanho não pular na troca) em Aeonik Medium 500 real, 25/28. */
body.obj-master:not(#obj):not(#obj) .railings__text h3{ font-size:24px; }
/* 1.2.23: frase de Parceiros & clientes a 45 px (desktop/tablet) e 24 px (celular), as quatro iguais; peso 500 real e a
   mesma proporção de entrelinha (25/28 → 1,12). No celular a frase sobe para perto do título (55 → 22 px de vão). */
body.obj-master:not(#obj):not(#obj) .testimonials__lead .lead{ font-weight:500; font-size:45px; line-height:1.12; }
@media (max-width:560px){
  body.obj-master:not(#obj):not(#obj) .testimonials__lead .lead{ font-size:24px; }
  body.obj-master:not(#obj):not(#obj) .testimonials__lead{ margin-top:22px; }
}

/* 1.2.23 · Home — "O que fazemos": a marca Objetaria (logo de fundo objetaria transparente.png, sem alteração de
   desenho nem de cor) como última camada da seção. A camada (.obj-svc-bg, inserida pelo objetaria-header.js) cobre a
   caixa da seção e a recorta com clip-path; a imagem dentro dela é position:fixed, então fica PARADA na tela enquanto o
   conteúdo passa por cima e só aparece dentro da seção — antes e depois dela, nada. Não é background-attachment:fixed
   (inconsistente no iOS) nem um fixed solto no body; a seção em si não é recortada (o degrau .cut::after, que sai por
   baixo dela, continua inteiro). O conteúdo (.wrap) sobe para z-index 1 sem mudar de lugar; a camada não recebe toque.
   Tamanho e posição: grande, à direita e parcialmente cortada, como elemento gráfico; no celular, maior que a tela. */
body.obj-master:not(#obj):not(#obj) .services > .obj-svc-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; -webkit-clip-path:inset(0); clip-path:inset(0);
  /* nas bordas da seção a marca some aos poucos (sem corte reto onde o cinza continua nos degraus de cima e de baixo) */
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 110px, #000 calc(100% - 180px), transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 110px, #000 calc(100% - 180px), transparent 100%); }
body.obj-master:not(#obj):not(#obj) .services > .obj-svc-bg > span{
  position:fixed; inset:0; display:block; pointer-events:none;
  background-image:url('../media/home-fundo-objetaria.webp'); background-repeat:no-repeat;
  background-position-x:var(--svc-bg-x, right -4vw); background-position-y:var(--svc-bg-y, 50%);
  background-size:auto var(--svc-bg-h, 112vh);
  opacity:var(--svc-bg-op, .1);
}
body.obj-master:not(#obj):not(#obj) .services.has-obj-bg > .wrap{ position:relative; z-index:1; }
@media (max-width:900px){ body.obj-master:not(#obj):not(#obj) .services > .obj-svc-bg > span{ --svc-bg-h:96vh; --svc-bg-x:right -18vw; } }
@media (max-width:560px){ body.obj-master:not(#obj):not(#obj) .services > .obj-svc-bg > span{ --svc-bg-h:78vh; --svc-bg-x:62%; --svc-bg-y:56%; } }

/* 1.2.22 · logos de Parceiros & clientes: preto puro (filtro SVG) e escala óptica por logo (ver PARTNER_LOGOS no build) */
body.obj-master:not(#obj):not(#obj) .partner{ grid-template-columns:132px 1fr; column-gap:38px; }
body.obj-master:not(#obj):not(#obj) .partner__logo{ width:132px; justify-content:flex-start; }
body.obj-master:not(#obj):not(#obj) .partner__logo > img{ filter:url(#obj-logo-preto); object-position:0 50%; }
body.obj-master:not(#obj):not(#obj) .partner__logo > img[src*="/logo-corten" i]{ flex:none; max-width:none; width:115.1px; height:38.4px; margin-left:-7.3px; transform:translateY(0.1px); }
body.obj-master:not(#obj):not(#obj) .partner__logo > img[src*="/logo-aco-patinavel" i]{ flex:none; max-width:none; width:143.1px; height:47.7px; margin-left:-5.6px; transform:translateY(0.1px); }
body.obj-master:not(#obj):not(#obj) .partner__logo > img[src*="/logo-solda-inox" i]{ flex:none; max-width:none; width:114.6px; height:38.2px; margin-left:-6.9px; transform:translateY(0.2px); }
body.obj-master:not(#obj):not(#obj) .partner__logo > img[src*="/Sem-nome-1125-x-347-px-1061-x-245-px" i]{ flex:none; max-width:none; width:135px; height:31.2px; margin-left:-3.2px; transform:translateY(0.3px); }
@media (max-width:560px){
  body.obj-master:not(#obj):not(#obj) .partner__logo{ width:100%; }
  body.obj-master:not(#obj):not(#obj) .partner__logo > img[src*="/logo-corten" i]{ width:120.2px; height:40.1px; margin-left:-7.6px; transform:translateY(0.1px); }
  body.obj-master:not(#obj):not(#obj) .partner__logo > img[src*="/logo-aco-patinavel" i]{ width:149.5px; height:49.8px; margin-left:-5.8px; transform:translateY(0.1px); }
  body.obj-master:not(#obj):not(#obj) .partner__logo > img[src*="/logo-solda-inox" i]{ width:119.7px; height:39.9px; margin-left:-7.2px; transform:translateY(0.2px); }
  body.obj-master:not(#obj):not(#obj) .partner__logo > img[src*="/Sem-nome-1125-x-347-px-1061-x-245-px" i]{ width:141px; height:32.6px; margin-left:-3.3px; transform:translateY(0.3px); }
}

/* ===== movimento reduzido: transições do master restauradas (gerado) ===== */
@media (prefers-reduced-motion:reduce){
body.obj-master:not(#obj):not(#obj) .arrow{ transition:transform var(--arrow-dur, var(--duration-hover)) var(--arrow-ease, var(--ease-premium)) !important; }
body.obj-master:not(#obj):not(#obj) .btn{ transition:color var(--duration-medium) var(--ease-premium) !important; }
body.obj-master:not(#obj):not(#obj) .btn--solid{ transition:background-color var(--duration-hover) var(--ease-out), color var(--duration-hover) var(--ease-out) !important; }
body.obj-master:not(#obj):not(#obj) .btn--static{ transition:background-color var(--duration-hover) var(--ease-out) !important; }
body.obj-master:not(#obj):not(#obj) .btn--ghost::before{ transition:opacity 250ms var(--ease-out) !important; }
body.obj-master:not(#obj):not(#obj) .link-arrow{ transition:color var(--duration-hover) var(--ease-premium) !important; }
body.obj-master:not(#obj):not(#obj) .nav a{ transition:background-size var(--duration-medium) var(--ease-premium) !important; }
body.obj-master:not(#obj):not(#obj) .btn-contact{ transition:background-color var(--duration-micro) var(--ease-out), color var(--duration-micro) var(--ease-out), border-color var(--duration-micro) var(--ease-out) !important; }
body.obj-master:not(#obj):not(#obj) .nav-toggle__bars > span{ transition:transform 60ms var(--ease-out), top 70ms var(--ease-out) 110ms, opacity 0s linear 110ms !important; }
body.obj-master:not(#obj):not(#obj) .nav-toggle[aria-expanded=] .nav-toggle__bars > span{ transition:top 60ms var(--ease-out), transform 70ms var(--ease-out) 110ms, opacity 0s linear 60ms !important; }
body.obj-master:not(#obj):not(#obj) .mnav{ transition:visibility 0s linear 230ms !important; }
body.obj-master:not(#obj):not(#obj) .mnav.is-open{ transition:none !important; }
body.obj-master:not(#obj):not(#obj) .mnav__panel{ transition:transform 230ms cubic-bezier(.37,0,.63,1) !important; }
body.obj-master:not(#obj):not(#obj) .mnav.is-open .mnav__panel{ transition:transform 330ms cubic-bezier(.23,.59,.43,.98) !important; }
body.obj-master:not(#obj):not(#obj) .mnav__link{ transition:color var(--duration-hover) var(--ease-premium) !important; }
body.obj-master:not(#obj):not(#obj) .hero__slide{ transition:transform var(--duration-slide) var(--ease-slide) !important; }
body.obj-master:not(#obj):not(#obj) .hero__slide.no-anim{ transition:none !important; }
body.obj-master:not(#obj):not(#obj) .tile__panel{ transition:transform var(--duration-panel-out) var(--ease-in) !important; }
body.obj-master:not(#obj):not(#obj) .tile:hover .tile__panel,body.obj-master:not(#obj):not(#obj) .tile:focus-visible .tile__panel{ transition:transform var(--duration-panel) var(--ease-premium) !important; }
body.obj-master:not(#obj):not(#obj) .project{ transition:border-color var(--duration-reveal) var(--ease-premium) !important; }
body.obj-master:not(#obj):not(#obj) .project__media{ transition:width var(--duration-reveal) var(--ease-open) !important; }
body.obj-master:not(#obj):not(#obj) .project__img{ transition:transform var(--duration-reveal) var(--ease-open) !important; }
body.obj-master:not(#obj):not(#obj) .project__more{ transition:grid-template-rows var(--duration-reveal) var(--ease-open) !important; }
body.obj-master:not(#obj):not(#obj) .project__more .link-arrow{ transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out), color var(--duration-hover) var(--ease-premium) !important; }
body.obj-master:not(#obj):not(#obj) .project__num{ transition:color var(--duration-reveal) var(--ease-premium) !important; }
body.obj-master:not(#obj):not(#obj) .project:hover .project__more .link-arrow,body.obj-master:not(#obj):not(#obj) .project:focus-within .project__more .link-arrow{ transition:opacity 450ms var(--ease-premium) 450ms, transform 450ms var(--ease-premium) 450ms, color var(--duration-hover) var(--ease-premium) !important; }
body.obj-master:not(#obj):not(#obj) .panel__media{ transition:transform var(--duration-reveal) var(--ease-premium) !important; }
body.obj-master:not(#obj):not(#obj) .lead{ transition:opacity 250ms var(--ease-in), transform 250ms var(--ease-in) !important; }
body.obj-master:not(#obj):not(#obj) .lead.is-active{ transition:opacity 380ms var(--ease-premium) 220ms, transform 380ms var(--ease-premium) 220ms !important; }
body.obj-master:not(#obj):not(#obj) .partner::after{ transition:opacity var(--duration-hover) var(--ease-premium) !important; }
body.obj-master:not(#obj):not(#obj) .footer__links a{ transition:color var(--duration-hover) var(--ease-premium) !important; }
body.obj-master:not(#obj):not(#obj) .field label{ transition:opacity var(--duration-fast) var(--ease-premium) !important; }
}