/* The CENA opening uses the original logo, without changing its proportions. */
:root{--font-helvetica:'Helvetica Neue',Helvetica,'Nimbus Sans',Arial,sans-serif}
html.intro-active{overflow:hidden}
.site-intro{display:none;position:fixed;inset:0;z-index:200;place-items:center;background:var(--blue,#3a4a99);pointer-events:none}
.intro-active .site-intro{display:grid;pointer-events:auto}
.intro-signature{width:clamp(210px,29vw,420px);max-width:72vw;position:relative}
.intro-signature img{display:block;width:100%;height:auto;object-fit:contain;animation:intro-logo .85s cubic-bezier(.16,1,.3,1) both}
.intro-line{display:block;width:44px;height:1px;margin:30px auto 0;background:#ffffff60;transform-origin:left;animation:intro-line 1.05s cubic-bezier(.25,.7,.2,1) both}
.intro-leaving .site-intro{opacity:0;transition:opacity .34s ease;pointer-events:none}
@keyframes intro-logo{from{opacity:0;transform:translateY(10px);clip-path:inset(0 100% 0 0)}to{opacity:1;transform:translateY(0);clip-path:inset(0)}}
@keyframes intro-line{from{opacity:0;transform:scaleX(0)}to{opacity:.65;transform:scaleX(1)}}

/* Helvetica, close tracking and a quiet hierarchy across the portfolio. */
#trabalhos h2,#trabalhos .eyebrow,#trabalhos .filters button,#trabalhos .caption h3,#trabalhos .caption>span,#trabalhos .play{font-family:var(--font-helvetica);font-weight:400;font-kerning:normal}
#trabalhos h2{letter-spacing:-.06em;line-height:.99}
#trabalhos>.eyebrow{letter-spacing:-.015em}
#trabalhos .filters button{letter-spacing:-.03em}
#trabalhos .caption h3{letter-spacing:-.035em}
#trabalhos .caption>span{letter-spacing:-.02em}
.services .service{font-family:var(--font-helvetica);font-weight:400;letter-spacing:-.04em}

/* The whole cover remains clickable; the invitation sits lightly on the image. */
#trabalhos .play{bottom:20px;right:22px;gap:8px;padding:7px 0;background:transparent;border:0;border-radius:0;backdrop-filter:none;color:white;font-size:12px;line-height:1.2;letter-spacing:-.025em;text-shadow:0 1px 8px #000,0 1px 2px #0008;opacity:.87;transition:opacity .25s ease}
#trabalhos .play:after{content:'↗';display:block;place-items:normal;width:auto;height:auto;border-radius:0;background:none;color:inherit;font-size:17px;line-height:1;transition:transform .25s ease}
#trabalhos .film:hover .play,#trabalhos .film:focus-visible .play{background:transparent;border:0;opacity:1}
#trabalhos .film:hover .play:after,#trabalhos .film:focus-visible .play:after{background:none;transform:translate(2px,-2px)}
@media(max-width:650px){#trabalhos .play{bottom:12px;right:15px;font-size:12px;gap:7px}#trabalhos .play:after{width:auto;height:auto;font-size:16px}#trabalhos h2{letter-spacing:-.055em}}
@media(prefers-reduced-motion:reduce){.intro-signature img,.intro-line{animation:none}.intro-leaving .site-intro{transition:none}}

/* Full-width reel, with the same complete 16:9 framing as the stills.
   The negative margins balance the hero's 4% (mobile 5%) inline padding. */
.reel-stage{width:auto;margin-inline:calc(-4% / .92);height:auto;min-height:0;aspect-ratio:16/9}
.reel-stage video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.hero-bottom{justify-content:flex-end}
#nav{justify-content:safe center}
@media(max-width:650px){.reel-stage{margin-inline:calc(-5% / .9)}.reel-label{bottom:24px}#reel-control{bottom:15px}}