/* Suprema — navy, gold and expressive editorial typography. No remote assets. */
:root { --radius: 8px; --radius-lg: 12px; }
header { border-bottom: 1px solid var(--border); }
.nav nav { gap: 22px; }
.nav { min-height: 94px; }
.nav .brand-name { letter-spacing: -.075em; }
.button { transition: transform .25s, background .25s, box-shadow .25s; }
.button:hover { transform: translateY(-3px); box-shadow: 0 8px 24px #0002; }
.home-agency .topbar { background: #071b29; }
.home-agency header { background: #0c2132; border-color: #ffffff20; }
.home-agency header .brand-name,.home-agency .nav nav a,.home-agency .menu-toggle { color: #fff; }
.home-agency header .brand-sub { color: #bdc9ce; }
.home-agency .nav nav a.button { color: var(--navy); }
.agency-stage { background: #0c2132; color: #fff; overflow: hidden; position: relative; }
.agency-stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 85% 50%,#35505c66,transparent 60%); }
.home-agency .hero { position: relative; grid-template-columns: 1.05fr 1fr; padding: 70px 0 80px; gap: 55px; min-height: 670px; }
.home-agency .hero-copy .eyebrow { color: #edc77b; font-size: 11px; letter-spacing: .18em; }
.home-agency .hero-copy h1 { color: #fff; font-size: clamp(66px,6.5vw,94px); line-height: 1.02; letter-spacing: -.065em; margin: 25px 0; }
.home-agency .hero-copy h1 em { font-family: Georgia,serif; color: #edc77b; font-weight: 400; }
.home-agency .hero-copy > p { color: #c0cdd4; font-size: 17px; max-width: 425px; }
.home-agency .hero-actions > a:not(.button) { color: #fff; border-bottom: 1px solid #ffffff50; font-size: 13px; }
.home-agency .hero-proof { gap: 17px; padding-top: 8px; }
.home-agency .hero-proof span { color: #b6c6d0; font-size: 11px; }
.home-agency .agency-visual { position: relative; border: 1px solid #ffffff35; border-radius: 3px; background: #183548; padding: 12px; box-shadow: 24px 26px 0 -1px #0c2132,24px 26px 0 0 #edc77b66; transform: perspective(1200px) rotateY(var(--ry,-5deg)) rotateX(var(--rx,2deg)); transition: transform .35s ease-out; }
.home-agency .agency-visual > img { display: block; width: 100%; height: 340px; border-radius: 1px; object-fit: cover; }
.visual-index { display: flex; justify-content: space-between; padding: 6px 3px 18px; font-size: 9px; letter-spacing: .12em; color: #b6c6d0; }
.visual-caption { display: flex; align-items: center; justify-content: space-between; padding: 22px 15px 12px; font-size: 19px; line-height: 1.4; color: #ced9df; }
.visual-caption strong { color: #fff; }
.visual-star { display: inline-block; color: #edc77b; font-size: 65px; line-height: 1; transform: rotate(var(--turn,0deg)); }
.concept-label { display: block; color: #bac8d0; font-size: 10px; padding: 4px 15px 8px; }
.agency-signature { position: relative; display: flex; align-items: center; justify-content: space-around; gap: 25px; padding: 21px 30px; border-top: 1px solid #ffffff25; color: #edc77b; font-size: 12px; letter-spacing: .14em; font-weight: 700; }
.agency-signature span:nth-child(even) { font-size: 25px; }
.home-agency .section { width: 100%; padding: 90px max(40px, calc((100% - 1240px) / 2)); }
.home-agency .section h2 { font-family: Arial,Helvetica,sans-serif; font-size: clamp(32px,4vw,52px); letter-spacing: -.055em; }
.home-agency .section h2 em { font-family: Georgia,serif; font-weight: 400; color: #8b661b; }
.portfolio { background: #f4f2eb; }
.portfolio .section-heading { margin-bottom: 34px; }
.portfolio-filters { display: flex; gap: 10px; margin-bottom: 35px; flex-wrap: wrap; }
.portfolio-filters button { background: transparent; border: 1px solid #b8c1c3; color: #203847; padding: 12px 20px; border-radius: 30px; font-size: 13px; min-height: 44px; }
.portfolio-filters button.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.portfolio-filters span { font-size: 10px; margin-left: 10px; opacity: .7; }
.portfolio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 32px; }
.work-card { min-width: 0; display: block; }
.work-card[hidden] { display: none; }
.work-main { grid-row: span 2; }
.work-image { position: relative; overflow: hidden; background: #d8dfdf; padding: 28px; border-radius: 5px; }
.work-image img { display: block; width: 100%; height: 230px; object-fit: cover; object-position: top; box-shadow: 0 12px 35px #0c213233; transition: transform .5s; }
.work-main .work-image { background: #b5c2be; padding: 48px 30px; }
.work-main .work-image img { height: 600px; object-position: top left; object-fit: cover; }
.work-card:hover .work-image img { transform: translateY(-5px) scale(1.025); }
.work-open { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #edc77b; color: #0c2132; font-size: 23px; }
.work-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }
.work-meta span { font-size: 10px; letter-spacing: .12em; color: #536773; }
.work-meta h3 { font-size: 23px; margin: 10px 0; letter-spacing: -.035em; }
.work-card p { font-size: 13px; color: #536773; margin: 0; }
.work-concept .work-image { padding: 0; background: #decdaa; }
.work-concept .work-image img { height: 230px; object-position: center; box-shadow: none; }
.work-label { position: absolute; left: 14px; bottom: 14px; background: #0c2132; color: #fff; font-size: 9px; padding: 7px 10px; letter-spacing: .08em; }
.text-link { display: inline-block; font-size: 13px; border-bottom: 1px solid; margin-top: 12px; }
.portfolio-status { font-size: 12px; color: #536773; margin: 25px 0 0; }
.home-agency .offer-strip { background: #edc77b; color: #0c2132; }
.home-agency .offer-strip strong,.home-agency .offer-strip p,.home-agency .offer-strip a,.home-agency .offer-strip .wrap > span { color: #0c2132; }
.home-agency #servicos { background: #fff; }
.home-agency .services-grid { grid-template-columns: repeat(3,1fr); gap: 18px; }
.home-agency .service-card { border-radius: 5px; box-shadow: none; }
.home-agency .service-card .card-image { height: 155px; }
.home-agency .service-card .card-body { padding: 24px; }
.home-agency .service-card:last-child { grid-column: span 3; display: grid; grid-template-columns: 1fr 2fr; }
.home-agency .service-card:last-child .card-image { height: 100%; min-height: 180px; }
.home-agency .plans { background: #e9eeeb; }
.home-agency .plan { border-radius: 6px; }
.home-agency .process { background: #0c2132; color: #fff; }
.home-agency .process h2,.home-agency .process h3 { color: #fff; }
.home-agency .process p { color: #c0cdd4; }
.home-agency .process .eyebrow,.home-agency .steps article > span { color: #edc77b; }
.home-agency .steps article { background: transparent; border-color: #ffffff30; border-radius: 0; }
.home-agency .contact { border-radius: 0; }
.scroll-progress { position: fixed; top: 0; left: 0; z-index: 1000; height: 3px; background: #edc77b; width: 100%; transform: scaleX(var(--progress,0)); transform-origin: left; pointer-events: none; }
@media (prefers-reduced-motion:no-preference) { .reveal-pending { opacity: 0; transform: translateY(24px); } .reveal-ready { transition: opacity .65s ease,transform .65s ease; } }
@media (max-width:1100px) { .nav nav { gap: 14px; } .home-agency .hero { gap: 30px; } .home-agency .hero-copy h1 { font-size: 78px; } .home-agency .agency-visual > img { height: 280px; } }
@media (max-width:900px) { .home-agency .nav nav { background: #0c2132; } .home-agency .hero { grid-template-columns: 1fr; padding: 48px 0 62px; } .home-agency .hero-copy h1 { font-size: clamp(65px,12vw,90px); } .home-agency .agency-visual { max-width: 650px; width: calc(100% - 20px); margin-top: 12px; transform: none; } .home-agency .agency-visual > img { height: auto; aspect-ratio: 1.8; } .agency-signature { font-size: 9px; gap: 16px; } .agency-signature span:last-child,.agency-signature span:nth-child(4) { display: none; } .home-agency .services-grid { grid-template-columns: repeat(2,1fr); } .home-agency .service-card:last-child { grid-column: auto; display: block; } .home-agency .service-card:last-child .card-image { height: 155px; min-height: 0; } .work-main .work-image img { height: 510px; } }
@media (max-width:600px) { .nav { min-height: 80px; } .home-agency .hero { gap: 20px; } .home-agency .hero-copy h1 { font-size: clamp(59px,15.5vw,78px); } .home-agency .hero-copy > p { font-size: 16px; } .home-agency .hero-proof { gap: 10px; } .home-agency .hero-proof span { font-size: 10px; } .visual-caption { padding: 15px 8px 8px; font-size: 17px; } .visual-star { font-size: 50px; } .visual-index { font-size: 8px; } .home-agency .section { padding-top: 60px; padding-bottom: 60px; } .portfolio-grid { grid-template-columns: 1fr; gap: 32px; } .work-main { grid-row: auto; } .work-main .work-image { padding: 25px; } .work-main .work-image img { height: 330px; object-fit: cover; } .work-image { padding: 20px; } .work-image img { height: 220px; } .portfolio-filters { gap: 7px; } .portfolio-filters button { padding: 10px 13px; font-size: 12px; } .portfolio-filters span { margin-left: 5px; } .home-agency .services-grid { grid-template-columns: 1fr; } .home-agency .service-card .card-image,.home-agency .service-card:last-child .card-image { height: 190px; } .agency-signature { padding: 16px; font-size: 8px; letter-spacing: .07em; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } .home-agency .agency-visual { transform: none; } }
@media (max-width:600px) { .home-agency .section { padding-left: 18px; padding-right: 18px; } .home-agency .hero-copy h1 { font-size: clamp(46px,13vw,54px); } }
html:not(.js-enabled) .portfolio-filters { display: none; }
/* Image art direction: photographic concepts and unaltered real screen captures. */
.card-image,.service-image { position: relative; background: #132e42; }
.card-image img,.service-image img { object-position: 50% 52%; }
.photo-origin { position: absolute; left: 10px; bottom: 10px; padding: 4px 7px; background: #0c2132eF; color: #fff; font-size: 8px; letter-spacing: .07em; line-height: 1.4; border: 1px solid #edc77b55; border-radius: 2px; }
.work-main .work-image,.work-card:not(.work-concept) .work-image { background: #163346; border: 1px solid #edc77b55; }
.work-card:not(.work-concept) .work-image img,.work-main .work-image img { object-fit: contain; object-position: center; background: #f7f7f3; }
.work-concept .work-image img { object-position: 50% 55%; }
@media (max-width:900px) { html:not(.js-enabled) .menu-toggle { display: none; } html:not(.js-enabled) .nav { flex-wrap: wrap; } html:not(.js-enabled) .nav nav { display: flex; position: static; flex-wrap: wrap; width: 100%; } }