/* =========================================================
   Agência Insign — Landing page
   Base = celular. A partir de 900px = layout do Figma (1234px),
   escalado proporcionalmente pela unidade --u.
   ========================================================= */

@font-face { font-family: "Gallient"; src: url("fonts/gallient.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Paper Sheet"; src: url("fonts/papersheet.otf") format("opentype"); font-display: swap; }

@property --u { syntax: "<length>"; inherits: true; initial-value: 1px; }

:root {
  --bg: #E4E2DB;
  --bg-2: #DFDCD5;
  --dark: #1B1B1B;
  --ink: #2D2D2D;
  --ink-soft: #4A4844;
  --yellow: #FED50D;
  --yellow-2: #F0C400;
  --yellow-3: #F5C800;
  --cream: #F2F0E9;
  --serif: Georgia, serif; /* os títulos são desenhos vetoriais (tools/vetorizar.py) */
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --header-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: #000; font-family: var(--mono); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure, fieldset { margin: 0; padding: 0; border: 0; }
em { font-style: italic; }
section { scroll-margin-top: var(--header-h); }

/* Textos vetorizados: cada um é um SVG do tamanho exato da linha */
.vt { display: inline-block; line-height: 0; white-space: nowrap; }
.vt svg { display: block; overflow: visible; }
*:has(> .vt) { line-height: 0 !important; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hl { transform-box: fill-box; transform-origin: left center; }

.page { container-type: inline-size; overflow-x: clip; }
.page > * { --u: calc(min(100cqw, 1920px) / 1234); }
.canvas { position: relative; margin-inline: auto; padding-inline: 20px; max-width: 640px; }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; border-radius: 999px; padding: 15px 22px; color: var(--ink); transition: transform .35s var(--ease), background-color .3s, color .3s, box-shadow .35s var(--ease); white-space: nowrap; }
.btn .arrow { display: inline-block; transition: transform .35s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--yellow { background: var(--yellow); }
.btn--yellow:hover { box-shadow: 0 10px 24px -10px rgba(240, 196, 0, .8); }
.btn--outline { border: 1px solid var(--ink); font-weight: 400; }
.btn--outline:hover { background: var(--ink); color: var(--cream); }
.btn--white { background: #fff; color: #010101; }
.btn--white:hover { background: var(--ink); color: #fff; }

/* =========================================================
   MENU (acompanha a rolagem)
   ========================================================= */
.header { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background-color .4s, backdrop-filter .4s, transform .5s var(--ease); }
.header__bar { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; max-width: none; }
.header__bar::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 1px; background: var(--ink); transform-origin: left; transition: opacity .4s; }
.header.is-scrolled { background: rgba(228, 226, 219, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.header.is-scrolled .header__bar::after { opacity: .25; }
.header__logo img { width: 58px; height: auto; transition: transform .4s var(--ease); }
.header__logo:hover img { transform: rotate(-4deg) scale(1.05); }
.header__nav, .header__cta { display: none; }
.header__burger { width: 40px; height: 40px; display: grid; place-content: center; gap: 6px; }
.header__burger span { display: block; width: 24px; height: 1.5px; background: var(--ink); transition: transform .35s var(--ease); }
.header__burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.header__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

.mobile-menu { position: fixed; inset: 0; z-index: 40; background: var(--bg); display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 80px 28px; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.mobile-menu a:not(.btn) { font-family: var(--serif); font-size: 44px; line-height: 1.1; letter-spacing: -.02em; transform: translateY(16px); opacity: 0; transition: transform .5s var(--ease), opacity .5s; }
.mobile-menu .btn { align-self: flex-start; margin-top: 18px; }
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu.is-open a { transform: none; opacity: 1; }
.mobile-menu.is-open a:nth-child(2) { transition-delay: .05s; }
.mobile-menu.is-open a:nth-child(3) { transition-delay: .1s; }
.mobile-menu.is-open a:nth-child(4) { transition-delay: .15s; }

/* =========================================================
   HERO
   ========================================================= */
.hero { padding: calc(var(--header-h) + 36px) 0 56px; }
.hero__title { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 12.4vw, 62px); color: #000; }
.hero__title .line { display: block; white-space: nowrap; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero__title .in { display: block; }
.l1 { line-height: .95; letter-spacing: -.0288em; }
.l2 { line-height: 1.39; letter-spacing: -.0267em; margin-top: .05em; }
.l3 { line-height: 1.055; letter-spacing: -.032em; margin-top: .1em; overflow: visible !important; clip-path: inset(-1em -1em -.2em -1em); }
.hero__title em { font-style: italic; }
.mark { position: relative; z-index: 0; letter-spacing: -.0513em; margin-right: .2em; }
.mark::before { content: ""; position: absolute; z-index: -1; left: -.201em; top: .413em; width: 4.898em; height: .731em; background: var(--yellow-2); transform-origin: left center; }
.circled { position: relative; display: inline-block; }
.hero__ellipse { position: absolute; left: -.343em; top: -.216em; width: 5.09em; height: 1.326em; overflow: visible; pointer-events: none; }
.hero__ellipse path, .sobre__ellipse path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hero__text { margin-top: 30px; font-size: 13px; line-height: 1.55; color: var(--ink-soft); max-width: 360px; }
.hero__text br.d { display: none; }
.hero__buttons { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }

/* Colagem dos sócios — posições do Figma em % da largura (cqw) */
.collage { container-type: inline-size; position: relative; width: 100%; max-width: 560px; margin: 48px auto 0; }
.collage::before { content: ""; display: block; padding-top: 71.30%; }
.partner { position: absolute; overflow: hidden; cursor: pointer; outline: none; transform: translateZ(0); transition: transform .6s var(--ease), box-shadow .6s var(--ease); will-change: transform; }
.partner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.partner .p-alt { opacity: 0; transform: scale(1.04); transition: opacity .55s var(--ease), transform .8s var(--ease); }
.partner .p-base { transition: transform .8s var(--ease), filter .6s; }
.partner:hover, .partner:focus-visible, .partner.is-active { transform: scale(1.045); z-index: 3; box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .45); }
.partner:hover .p-alt, .partner:focus-visible .p-alt, .partner.is-active .p-alt { opacity: 1; transform: none; }
.partner:hover .p-base, .partner:focus-visible .p-base, .partner.is-active .p-base { transform: scale(1.04); }
.partner--edivan  { left: 10.28cqw; top: 0;       width: 57.45cqw; height: 31.49cqw; transform-origin: 60% 60%; }
.partner--david   { left: 30.32cqw; top: 33.13cqw; width: 37.67cqw; height: 38.11cqw; transform-origin: 40% 40%; }
.partner--gabriel { left: 70.15cqw; top: .44cqw;  width: 29.85cqw; height: 70.85cqw; transform-origin: 30% 50%; }
.edivan-label { position: absolute; z-index: 4; left: 62.30cqw; top: 5.18cqw; font-family: "Paper Sheet", cursive; font-size: 2.443cqw; line-height: .71; color: #fff; white-space: nowrap; transform: translate(-50%, -50%) rotate(18.6deg); pointer-events: none; transition: color .5s var(--ease), transform .6s var(--ease); }
.collage:has(.partner--edivan:hover, .partner--edivan:focus-visible, .partner--edivan.is-active) .edivan-label { color: var(--yellow); transform: translate(-50%, -50%) rotate(18.6deg) scale(1.06); }
.hand { position: absolute; z-index: 5; font-family: "Paper Sheet", cursive; white-space: nowrap; pointer-events: none; transform: translate(-50%, -50%) rotate(18.6deg); }
.hand span { display: block; }
.hand--agencia { left: 21.54cqw; top: 41.95cqw; font-size: 6.525cqw; color: #000; }
.hand--insign  { left: 25.38cqw; top: 53.13cqw; font-size: 19.30cqw; color: var(--yellow-2); }
.hand-accent { position: absolute; z-index: 5; left: 26.76cqw; top: 36.57cqw; width: 1.17cqw; pointer-events: none; }

/* Entrada do hero */
.js .hero__title .in { transform: translateY(105%); }
.js .intro { opacity: 0; transform: translateY(18px); }
.js .hero .hl { transform: scaleX(0); }
.js .partner { opacity: 0; clip-path: inset(0 0 100% 0); }
.js .edivan-label, .js .hand-accent { opacity: 0; }
.js .hand span { clip-path: inset(0 100% 0 0); }

.loaded .hero__title .in { transform: none; transition: transform 1s var(--ease); }
.loaded .l2 .in { transition-delay: .1s; }
.loaded .l3 .in { transition-delay: .2s; }
.loaded .hero .hl { transform: none; transition: transform .8s var(--ease) .75s; }
.loaded .hero__ellipse path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.6, .1, .3, 1) .95s; }
.loaded .intro { opacity: 1; transform: none; transition: opacity .8s var(--ease) .55s, transform .8s var(--ease) .55s; }
.loaded .hero__buttons.intro { transition-delay: .7s; }
.loaded .partner { opacity: 1; clip-path: inset(0 0 0 0); transition: opacity .6s, clip-path 1.1s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease); }
.loaded .partner--edivan { transition-delay: .25s, .25s, 0s, 0s; }
.loaded .partner--gabriel { transition-delay: .4s, .4s, 0s, 0s; }
.loaded .partner--david { transition-delay: .55s, .55s, 0s, 0s; }
.loaded .edivan-label { opacity: 1; transition: opacity .6s 1.1s, color .5s var(--ease), transform .6s var(--ease); }
.loaded .hand span { clip-path: inset(0 0 0 0); transition: clip-path 1.2s cubic-bezier(.65, 0, .35, 1) 1.1s; }
.loaded .hand--insign span { transition-delay: 1.4s; }
.loaded .hand-accent { opacity: 1; transition: opacity .4s 2.2s; }

/* =========================================================
   SOBRE
   ========================================================= */
.sobre { position: relative; color: #fff; padding: 72px 0 80px; }
.sobre__bg { position: absolute; inset: 0; background: var(--dark); border-radius: 48px 48px 0 0; overflow: hidden; }
.sobre__bg::after { content: ""; position: absolute; inset: 0; background: url("img/sobre-textura.png") center / cover no-repeat; opacity: .36; mix-blend-mode: luminosity; }
.sobre__canvas { z-index: 1; }
.sobre__kicker { font-family: var(--serif); font-size: 24px; line-height: .88; letter-spacing: -.027em; margin-left: .38em; }
.sobre__title { position: relative; display: inline-block; font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 13vw, 64px); line-height: .883; letter-spacing: -.0267em; margin-top: .55em; white-space: nowrap; }
.sobre__ellipse { position: absolute; left: -.342em; top: -.726em; width: 7.25em; height: 1.961em; overflow: visible; pointer-events: none; }
.sobre__ellipse path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.sobre__heading.is-in .sobre__ellipse path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.6, .1, .3, 1) .35s; }
.sobre__text { margin-top: 56px; font-size: 13.6px; line-height: 1.55; text-align: justify; hyphens: auto; }
.sobre__text p + p { margin-top: 1.55em; }
.sobre__text b { color: var(--yellow); font-weight: 700; }

/* =========================================================
   SERVIÇOS
   ========================================================= */
.servicos { padding: 72px 0 80px; overflow: hidden; }
.servicos__canvas { display: flex; flex-direction: column; }
.servicos__watermark { position: absolute; right: 0; top: -20px; width: 78%; opacity: .45; pointer-events: none; will-change: transform; }
.servicos__title { position: relative; order: -1; display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-family: var(--serif); font-weight: 400; font-size: clamp(46px, 14vw, 72px); line-height: 1.12; letter-spacing: -.0267em; margin-bottom: 48px; white-space: nowrap; }
.servicos__title .y { color: var(--yellow-2); }
.servicos__title small { font-size: .892em; }

.acc { position: relative; border-top: 1.234px solid #000; }
.acc__item { border-bottom: 1.234px solid #000; }
.acc__head { width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; padding: 18px 40px 14px 0; position: relative; text-align: left; }
.acc__name { font-family: var(--serif); font-style: italic; font-size: 28px; line-height: 1.35; letter-spacing: -.0267em; transition: transform .45s var(--ease); }
.acc__head:hover .acc__name { transform: translateX(6px); }
.acc__tags { font-size: 8px; letter-spacing: .2em; text-transform: uppercase; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 .9em; }
.acc__tags i { display: inline-block; width: .65em; height: .65em; border-radius: 50%; background: var(--yellow); }
.acc__toggle { position: absolute; right: 0; top: 50%; width: 23px; height: 23px; margin-top: -11.5px; border: .6px solid #000; border-radius: 50%; transition: background-color .3s, transform .45s var(--ease); }
.acc__toggle::before, .acc__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 1px; margin: -.5px 0 0 -4px; background: #000; transition: transform .45s var(--ease), background-color .3s; }
.acc__toggle::after { transform: rotate(90deg); }
.acc__item.is-open .acc__toggle::after { transform: rotate(0deg); }
.acc__head:hover .acc__toggle { background: var(--yellow); border-color: var(--yellow); }
.acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.acc__item.is-open .acc__body { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.acc__inner p { font-size: 12px; line-height: 1.6; max-width: 380px; padding-bottom: 16px; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease); }
.acc__item.is-open .acc__inner p { opacity: 1; transform: none; transition-delay: .15s; }
.pill { flex: none; margin-bottom: 16px; background: var(--yellow); border-radius: 999px; font-size: 8px; letter-spacing: .18em; text-transform: uppercase; padding: 9px 13px; transition: transform .35s var(--ease), background-color .3s; }
.pill:hover { transform: translateY(-2px); background: var(--ink); color: #fff; }

/* =========================================================
   NÚMEROS
   ========================================================= */
.numeros { background: var(--bg-2); padding: 72px 0 90px; }
.numeros__title { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 8.6vw, 50px); white-space: nowrap; line-height: 1.35; letter-spacing: -.0267em; text-align: center; }
.numeros__title .nl { display: block; }
.js .numeros__title .hl { transform: scaleX(0); transition: transform .9s var(--ease) .3s; }
.numeros__title.is-in .hl { transform: none; }
.numeros__title .hl--2 { transition-delay: .6s; }
.stats { margin-top: 48px; display: grid; grid-template-columns: 1fr; gap: 18px; }
.stat { display: flex; flex-direction: column; transition: transform .45s var(--ease); }
.stat:hover { transform: translateY(-6px); }
.stat__num { border: 1px solid var(--yellow); border-bottom: 0; height: 110px; display: grid; place-items: center; font-family: "Gallient", var(--serif); font-size: 72px; letter-spacing: -.027em; line-height: 1; padding-top: 12px; }
.stat__num .plus { display: inline-block; transform: translateY(-.2em); margin-right: .02em; }
.stat__num > span { font-variant-numeric: tabular-nums; }
.stat__label { background: var(--bg); border-inline: 1px solid var(--yellow); height: 29px; display: grid; place-items: center; font-size: 10.4px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.stat__text { background: var(--yellow); min-height: 73px; display: grid; place-items: center; padding: 10px 18px; text-align: center; font-size: 11px; line-height: 1.36; color: #5C5A55; transition: background-color .4s; }
.stat:hover .stat__text { background: var(--yellow-2); }

/* =========================================================
   PORTFÓLIO (carrossel)
   ========================================================= */
.portfolio { background: var(--dark); color: #fff; padding: 64px 0 80px; overflow: hidden; }
.portfolio__kicker { display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--serif); font-size: 19px; letter-spacing: -.027em; white-space: nowrap; }
.portfolio__kicker i { flex: 1; max-width: 196px; height: 10px; background: var(--yellow-2); }
.portfolio__title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(38px, 11vw, 72px); line-height: 1.1; letter-spacing: -.0267em; text-align: center; margin-top: 14px; text-wrap: balance; }
.portfolio__handle { margin-top: 36px; font-size: 14px; letter-spacing: -.027em; transition: opacity .3s; }
.portfolio__handle.is-fading { opacity: 0; }

.carousel { position: relative; margin-top: 12px; }
.carousel__stage { position: relative; aspect-ratio: 546 / 315.2; touch-action: pan-y; user-select: none; }
.group { position: absolute; inset: 0; display: flex; gap: 1.28%; transform: translateX(calc(var(--o, 0) * 112%)); opacity: .53; transition: transform .9s var(--ease), opacity .6s; }
.group.is-current { opacity: 1; }
.group.no-anim { transition: none; }
.group:not(.is-current) { pointer-events: none; }
.col { flex: 1; display: flex; flex-direction: column; gap: 2.22%; }
.tile { position: relative; overflow: hidden; border: 2px solid var(--yellow); background: #fff; }
.tile--post { aspect-ratio: 177 / 223; }
.tile--block { flex: 1; background: var(--yellow); }
.tile--story { flex: 1; }
.tile--empty { background: #fff; display: grid; place-items: center; }
.tile--empty::after { content: ""; width: 55%; aspect-ratio: 4192 / 1200; background: url("img/em-breve.svg") center / contain no-repeat; }
.group:not(.is-current) .tile--empty { background: #d9d9d9; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.group.is-current .tile:hover img { transform: scale(1.05); }
.carousel__btn { position: absolute; z-index: 2; top: calc(100% + 18px); width: 48px; height: 48px; border-radius: 50%; transition: transform .35s var(--ease), background-color .3s; }
.carousel__btn img { width: 100%; height: 100%; }
.carousel__btn:hover { background: rgba(254, 213, 13, .15); }
.carousel__btn--prev { left: calc(50% - 58px); }
.carousel__btn--next { left: calc(50% + 10px); }
.portfolio .carousel { margin-bottom: 70px; }
.carousel__btn--next img { transform: scaleX(-1); }
.carousel__btn--prev:hover { transform: translateX(-3px); }
.carousel__btn--next:hover { transform: translateX(3px); }

/* =========================================================
   CONTATO
   ========================================================= */
.contato { background: var(--yellow-3); padding: 72px 0 80px; }
.contato__title { font-family: var(--serif); font-weight: 400; font-size: clamp(46px, 13vw, 67px); line-height: .95; letter-spacing: -.035em; color: var(--cream); }
.contato__title em { color: #282828; }
.contato__intro p { margin-top: 18px; font-size: 12.8px; line-height: 1.6; max-width: 290px; }
.form { margin-top: 44px; display: flex; flex-direction: column; gap: 20px; }
.form__row { display: grid; grid-template-columns: 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field__label { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: #141414; padding: 0; }
.field input { font-family: "Archivo", sans-serif; font-size: 16px; color: #000; background: transparent; border: 0; border-bottom: .8px solid rgba(0, 0, 0, .35); padding: 6px 0 10px; outline: none; border-radius: 0; transition: border-color .3s; width: 100%; }
.field input::placeholder { color: #AE951A; opacity: 1; }
.field input:focus { border-bottom-color: #000; }
.field input.is-invalid { border-bottom-color: #b3261e; }
.field__phone { display: flex; align-items: baseline; gap: 8px; border-bottom: .8px solid rgba(0, 0, 0, .35); transition: border-color .3s; }
.field__phone:focus-within { border-bottom-color: #000; }
.field__phone > span { font-family: "Archivo", sans-serif; font-size: 16px; color: #AE951A; }
.field__phone input { border: 0; }
.chips__list { display: flex; flex-wrap: wrap; gap: 8px 7px; margin-top: 10px; }
.chip { border: .8px solid rgba(0, 0, 0, .35); border-radius: 999px; padding: 8px 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--ease); }
.chip:hover { border-color: #000; transform: translateY(-1px); }
.chip.is-on { background: #000; color: var(--yellow); border-color: #000; }
.form .btn--white { align-self: flex-start; margin-top: 6px; }
.form__msg { font-size: 11px; min-height: 1em; }

/* =========================================================
   Revelar ao rolar
   ========================================================= */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* =========================================================
   DESKTOP — layout do Figma (1234px de largura)
   ========================================================= */
@media (min-width: 900px) {
  :root { --header-h: calc(60 * var(--u)); }
  .canvas { max-width: none; width: calc(1234 * var(--u)); padding: 0; }

  /* Menu */
  .header__bar { height: calc(60 * var(--u)); display: block; }
  .header__bar::after { left: calc(93.4 * var(--u)); right: auto; width: calc(1051.3 * var(--u)); }
  .header__logo { position: absolute; left: calc(249.9 * var(--u)); top: calc(9.3 * var(--u)); }
  .header__logo img { width: calc(65.14 * var(--u)); }
  .header__nav { display: flex; position: absolute; left: calc(490.3 * var(--u)); top: calc(29.5 * var(--u)); gap: calc(18.57 * var(--u)); }
  .header__nav a, .header__cta { font-size: max(8px, calc(6.962 * var(--u))); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); line-height: 1.3; }
  .header__nav a { position: relative; }
  .header__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
  .header__nav a:hover::after, .header__nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
  .header__cta { display: inline-flex; gap: .4em; position: absolute; left: calc(890.3 * var(--u)); top: calc(21.5 * var(--u)); background: var(--ink); color: var(--cream); border-radius: 999px; padding: calc(6.4 * var(--u)) calc(10.44 * var(--u)) calc(7.5 * var(--u)); transition: background-color .3s, color .3s, transform .35s var(--ease); }
  .header__cta:hover { background: var(--yellow); color: var(--ink); transform: translateY(-1px); }
  .header__cta .arrow { transition: transform .35s var(--ease); }
  .header__cta:hover .arrow { transform: translate(2px, -2px); }
  .header__burger, .mobile-menu { display: none; }

  /* Hero */
  .hero { padding: 0; }
  .hero__canvas { height: calc(658 * var(--u)); }
  .hero__copy { position: absolute; left: calc(60.2 * var(--u)); top: calc(126.5 * var(--u)); width: calc(500 * var(--u)); }
  .hero__title { font-size: calc(66.15 * var(--u)); margin-left: calc(13.3 * var(--u)); }
  .l1 { line-height: calc(62.85 * var(--u)); }
  .l2 { line-height: calc(92.1 * var(--u)); margin-top: calc(24.55 * var(--u)); }
  .l3 { line-height: calc(69.8 * var(--u)); margin-top: calc(30.8 * var(--u)); }
  .hero__text { margin: calc(47.4 * var(--u)) 0 0 calc(6.1 * var(--u)); font-size: calc(11.94 * var(--u)); line-height: calc(18.51 * var(--u)); max-width: none; width: calc(360 * var(--u)); }
  .hero__text br.d { display: inline; }
  .hero__buttons { margin-top: calc(47.2 * var(--u)); gap: calc(17.6 * var(--u)); flex-wrap: nowrap; }
  .hero__buttons .btn { height: calc(49.6 * var(--u)); font-size: calc(11.54 * var(--u)); letter-spacing: calc(1.616 * var(--u)); padding: 0; }
  .hero__buttons .btn--yellow { width: calc(168.3 * var(--u)); }
  .hero__buttons .btn--outline { width: calc(176.4 * var(--u)); border-width: calc(.888 * var(--u)); }
  .collage { position: absolute; left: calc(500 * var(--u)); top: calc(116.6 * var(--u)); width: calc(683 * var(--u)); max-width: none; margin: 0; }

  /* Sobre */
  .sobre { padding: 0; }
  .sobre__bg { top: calc(16 * var(--u)); bottom: calc(12 * var(--u)); border-radius: calc(102 * var(--u)) calc(102 * var(--u)) 0 0; }
  .sobre__canvas { height: calc(490 * var(--u)); }
  .sobre__heading { position: absolute; left: calc(124.7 * var(--u)); top: calc(176 * var(--u)); }
  .sobre__kicker { font-size: calc(26 * var(--u)); line-height: calc(22.97 * var(--u)); margin-left: calc(9.85 * var(--u)); }
  .sobre__title { font-size: calc(71.74 * var(--u)); line-height: calc(63.36 * var(--u)); margin-top: calc(39.73 * var(--u)); }
  .sobre__text { position: absolute; left: calc(730 * var(--u)); top: calc(138 * var(--u)); width: calc(388 * var(--u)); margin: 0; font-size: calc(13.64 * var(--u)); line-height: calc(21.14 * var(--u)); }

  /* Serviços */
  .servicos { padding: 0; }
  .servicos__canvas { display: block; height: calc(652 * var(--u)); }
  .servicos__watermark { left: calc(691 * var(--u)); top: calc(123 * var(--u)); right: auto; width: calc(494.7 * var(--u)); opacity: 1; }
  .servicos__title { position: absolute; left: calc(704 * var(--u)); top: calc(190 * var(--u)); width: calc(391 * var(--u)); margin: 0; font-size: calc(71.74 * var(--u)); line-height: calc(97 * var(--u)); }
  .acc { position: absolute; left: calc(83 * var(--u)); top: calc(47 * var(--u)); width: calc(572.4 * var(--u)); }
  .acc__head { flex-wrap: nowrap; gap: calc(16 * var(--u)); padding: calc(15.8 * var(--u)) calc(34 * var(--u)) calc(15.8 * var(--u)) 0; min-height: calc(71.55 * var(--u)); }
  .acc__name { font-size: calc(29.13 * var(--u)); line-height: calc(39.39 * var(--u)); white-space: nowrap; }
  .acc__tags { font-size: max(6px, calc(5.99 * var(--u))); letter-spacing: calc(1.05 * var(--u)); gap: 0 calc(6 * var(--u)); flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
  .acc__toggle { width: calc(22.9 * var(--u)); height: calc(22.9 * var(--u)); margin-top: calc(-11.45 * var(--u)); right: calc(9.2 * var(--u)); }
  .acc__toggle::before, .acc__toggle::after { width: calc(7 * var(--u)); margin-left: calc(-3.5 * var(--u)); }
  .acc__inner { gap: calc(20 * var(--u)); }
  .acc__inner p { font-size: max(9px, calc(9.6 * var(--u))); line-height: calc(17.6 * var(--u)); max-width: calc(374 * var(--u)); padding-bottom: calc(13 * var(--u)); margin-top: calc(-8 * var(--u)); }
  .pill { font-size: max(7px, calc(6.6 * var(--u))); padding: calc(9.6 * var(--u)) calc(13 * var(--u)); margin: 0 calc(9.9 * var(--u)) calc(38 * var(--u)) 0; }

  /* Números */
  .numeros { padding: 0; }
  .numeros__canvas { height: calc(814 * var(--u)); }
  .numeros__title { position: absolute; left: calc(351 * var(--u)); top: calc(61 * var(--u)); width: calc(532 * var(--u)); font-size: calc(49.18 * var(--u)); line-height: calc(66.5 * var(--u)); white-space: nowrap; }
  .stats { display: block; margin: 0; }
  .stat { position: absolute; }
  .s1 { left: calc(131 * var(--u)); top: calc(247 * var(--u)); width: calc(375 * var(--u)); }
  .s2 { left: calc(543 * var(--u)); top: calc(247 * var(--u)); width: calc(549.1 * var(--u)); }
  .s3 { left: calc(131 * var(--u)); top: calc(507 * var(--u)); width: calc(324 * var(--u)); }
  .s4 { left: calc(493.4 * var(--u)); top: calc(507 * var(--u)); width: calc(323 * var(--u)); }
  .s5 { left: calc(856 * var(--u)); top: calc(507 * var(--u)); width: calc(238.7 * var(--u)); }
  .stat__num { height: calc(129 * var(--u)); font-size: calc(85.6 * var(--u)); padding-top: calc(14 * var(--u)); }
  .stat__label { height: calc(29 * var(--u)); font-size: calc(10.37 * var(--u)); letter-spacing: calc(1.658 * var(--u)); }
  .stat__text { height: calc(73 * var(--u)); min-height: 0; font-size: max(9px, calc(11 * var(--u))); line-height: calc(14.9 * var(--u)); padding: 0 calc(12 * var(--u)); }
  .s1 .stat__text { padding-inline: calc(20 * var(--u)); }
  .s2 .stat__text { padding-inline: calc(110 * var(--u)); }
  .s5 .stat__text { padding-inline: calc(20 * var(--u)); }

  /* Portfólio */
  .portfolio { padding: 0; overflow: hidden; }
  .portfolio__canvas { height: calc(658 * var(--u)); }
  .portfolio__head { position: absolute; left: 0; right: 0; top: calc(60 * var(--u)); }
  .portfolio__kicker { font-size: calc(26 * var(--u)); line-height: calc(23 * var(--u)); gap: calc(31 * var(--u)); }
  .portfolio__kicker i { flex: none; width: calc(196 * var(--u)); max-width: none; height: calc(15 * var(--u)); }
  .portfolio__kicker i:last-child { transform: translateY(calc(5 * var(--u))); }
  .portfolio__title { white-space: nowrap; font-size: calc(71.74 * var(--u)); line-height: calc(79 * var(--u)); margin-top: calc(31 * var(--u)); }
  .portfolio__handle { position: absolute; left: calc(341 * var(--u)); top: calc(230.5 * var(--u)); margin: 0; font-size: calc(14.83 * var(--u)); line-height: calc(13.1 * var(--u)); }
  .carousel { position: absolute; left: calc(344 * var(--u)); top: calc(258 * var(--u)); width: calc(546 * var(--u)); margin: 0; }
  .group { gap: calc(7 * var(--u)); transform: translateX(calc(var(--o, 0) * 679 * var(--u))); }
  .col { gap: calc(7 * var(--u)); }
  .portfolio .carousel { margin-bottom: 0; }
  .carousel__btn { width: calc(55 * var(--u)); height: calc(55 * var(--u)); top: calc(133 * var(--u)); margin: 0; }
  .carousel__btn--prev { left: calc(-90 * var(--u)); }
  .carousel__btn--next { left: calc(581 * var(--u)); right: auto; }

  /* Contato */
  .contato { padding: 0; }
  .contato__canvas { height: calc(447 * var(--u)); }
  .contato__intro { position: absolute; left: calc(165 * var(--u)); top: calc(91 * var(--u)); width: calc(420 * var(--u)); }
  .contato__title { white-space: nowrap; font-size: calc(67.07 * var(--u)); line-height: calc(63.72 * var(--u)); letter-spacing: calc(-2.35 * var(--u)); }
  .contato__intro p { margin-top: calc(17.7 * var(--u)); font-size: calc(12.81 * var(--u)); line-height: calc(20.5 * var(--u)); max-width: none; width: calc(300 * var(--u)); }
  .form { position: absolute; left: calc(648 * var(--u)); top: calc(74 * var(--u)); width: calc(416.4 * var(--u)); margin: 0; gap: calc(19.5 * var(--u)); }
  .form__row { grid-template-columns: 1fr 1fr; gap: calc(19.96 * var(--u)); }
  .field { gap: calc(7.13 * var(--u)); }
  .field__label { font-size: max(7.5px, calc(7.84 * var(--u))); letter-spacing: calc(1.41 * var(--u)); }
  .field input, .field__phone > span { font-size: calc(15.69 * var(--u)); }
  .field input { padding: calc(5.7 * var(--u)) 0 calc(9.98 * var(--u)); border-bottom-width: calc(.713 * var(--u)); }
  .field__phone { gap: calc(7 * var(--u)); }
  .chips__list { gap: calc(7.5 * var(--u)) calc(7 * var(--u)); margin-top: calc(10 * var(--u)); }
  .chip { font-size: max(8px, calc(8.56 * var(--u))); letter-spacing: calc(.68 * var(--u)); padding: calc(7.84 * var(--u)) calc(11.41 * var(--u)); border-width: calc(.713 * var(--u)); }
  .form .btn--white { font-size: calc(9.27 * var(--u)); letter-spacing: calc(1.3 * var(--u)); padding: calc(14.26 * var(--u)) calc(22.8 * var(--u)) calc(16.4 * var(--u)); margin-top: calc(-1 * var(--u)); }
  .form__msg { font-size: max(9px, calc(9 * var(--u))); margin-top: calc(-10 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
  html { scroll-behavior: auto; }
}