:root {
   --black: #000;
   --dark: #080808;
   --dark2: #111;
   --orange: #d15432;
   --red: #ee1d23;
   --white: #fff;
   --light: #f7f7f7;
   --muted: #777;
   --text: #222;
   --line: rgba(255, 255, 255, .13);
   --font-head: 'Manrope', sans-serif;
   --font-body: 'DM Sans', sans-serif
 }

 * {
   box-sizing: border-box
 }

 html {
   scroll-behavior: smooth
 }

 body {
   margin: 0;
   font-family: var(--font-body);
   color: var(--text);
   line-height: 1.7
 }

 img,
 video {
   max-width: 100%;
   display: block
 }

 a {
   color: inherit;
   text-decoration: none
 }

 button,
 input,
 textarea,
 select {
   font: inherit
 }

 .container {
   width: min(1180px, calc(100% - 44px));
   margin-inline: auto
 }

 .skip-link {
   position: absolute;
   left: -9999px;
   top: 0;
   background: white;
   color: black;
   padding: 12px;
   z-index: 999
 }

 .skip-link:focus {
   left: 10px
 }

 .topbar {
   background: #000;
   color: #ddd;
   font-size: .8rem;
   border-bottom: 1px solid #242424
 }

 .topbar-inner {
   min-height: 39px;
   display: flex;
   justify-content: space-between;
   align-items: center
 }

 .topbar a {
   margin-right: 12px
 }

 .topbar i {
   color: var(--orange)
 }

 .site-header {
   position: sticky;
   top: 0;
   z-index: 50;
   background: rgba(8, 8, 8, .97);
   color: #fff;
   border-bottom: 1px solid rgba(255, 255, 255, .09);
   backdrop-filter: blur(12px)
 }

 .nav-wrap {
   min-height: 84px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 25px
 }

 .brand {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-shrink: 0
 }

 .brand-mark {
   font: 800 2.8rem/1 var(--font-head);
   letter-spacing: -.1em;
   color: white
 }

 .brand-mark span {
   color: var(--orange)
 }

 .brand-name {
   font: 800 .95rem/1.2 var(--font-head);
   letter-spacing: .1em
 }

 .brand-name b {
   color: var(--orange)
 }

 .brand-name small {
   display: block;
   font: 600 .55rem var(--font-body);
   letter-spacing: .24em;
   color: #aaa;
   margin-top: 5px
 }

 .primary-nav {
   display: flex;
   align-items: center;
   gap: 19px
 }

 .nav-link {
   font-size: .83rem;
   color: #d8d8d8;
   transition: color .2s
 }

 .nav-link:hover,
 .nav-link.active {
   color: var(--orange)
 }

 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 14px 22px;
   font-weight: 700;
   font-size: .86rem;
   border: 1px solid transparent;
   transition: transform .2s, background .2s, color .2s;
   cursor: pointer
 }

 .btn:hover {
   transform: translateY(-2px)
 }

 .btn-primary {
   background: var(--orange);
   color: white
 }

 .btn-primary:hover {
   background: var(--red)
 }

 .btn-outline {
   border-color: rgba(255, 255, 255, .65);
   color: white;
   background: transparent
 }

 .btn-outline:hover {
   background: white;
   color: #111
 }

 .btn-dark {
   background: #080808;
   color: white
 }

 .btn-small {
   padding: 11px 15px;
   font-size: .77rem
 }

 .menu-toggle {
   display: none;
   background: transparent;
   border: 0;
   color: white;
   width: 42px;
   height: 42px;
   padding: 9px
 }

 .menu-toggle span {
   display: block;
   height: 2px;
   background: white;
   margin: 6px 0
 }

 .home-hero {
   position: relative;
   min-height: min(800px, 88vh);
   min-height: max(650px, 88svh);
   display: flex;
   align-items: center;
   overflow: hidden;
   background: #080808;
   color: #fff
 }

 .hero-video,
 .hero-overlay {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%
 }

 .hero-video {
   object-fit: cover
 }

 .hero-overlay {
   background: linear-gradient(90deg, rgba(0, 0, 0, .86), rgba(0, 0, 0, .49) 60%, rgba(0, 0, 0, .35))
 }

 .hero-content,
 .page-hero-content {
   position: relative;
   z-index: 2;
   padding-block: 95px
 }

 .eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: .7rem;
   font-weight: 700;
   letter-spacing: .19em;
   text-transform: uppercase;
   color: #f3b3a2
 }

 .eyebrow:before {
   content: '';
   width: 25px;
   height: 2px;
   background: var(--orange)
 }

 .dark-eyebrow {
   color: #a9472c
 }

 .dark-eyebrow:before {
   background: var(--orange)
 }

 h1,
 h2,
 h3 {
   font-family: var(--font-head);
   line-height: 1.13;
   margin-top: 0
 }

 h1 {
   font-size: clamp(2.8rem, 6.2vw, 5.7rem);
   letter-spacing: -.06em;
   max-width: 920px;
   margin: 25px 0
 }

 h1 em,
 h2 em {
   font-style: normal;
   color: var(--orange)
 }

 .hero-content>p,
 .page-hero-content>p {
   max-width: 660px;
   color: #ddd;
   font-size: 1.08rem
 }

 .hero-actions {
   display: flex;
   align-items: center;
   gap: 13px;
   flex-wrap: wrap;
   margin-top: 28px
 }

 .text-link {
   font-size: .83rem;
   font-weight: 700;
   color: white;
   padding: 10px
 }

 .page-hero {
   min-height: 510px;
   display: flex;
   align-items: center;
   position: relative;
   color: #fff;
   background: linear-gradient(90deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .45)), var(--hero-image) center/cover no-repeat;
   background-color: #111
 }

 .page-hero h1 {
   font-size: clamp(2.8rem, 6vw, 5rem);
   margin: 20px 0
 }

 .breadcrumbs {
   margin-top: 30px;
   font-size: .78rem;
   color: #ccc
 }

 .breadcrumbs a {
   color: #f1a58f
 }

 .section-pad {
   padding: 100px 0
 }

 .soft-section {
   background: var(--light)
 }

 .dark-section {
   background: #090909;
   color: white
 }

 .section-heading {
   display: flex;
   align-items: end;
   justify-content: space-between;
   gap: 35px;
   margin-bottom: 42px
 }

 .section-heading h2,
 .intro-copy h2,
 .narrow-copy h2,
 .contact-layout h2 {
   font-size: clamp(2.2rem, 4.4vw, 4rem);
   letter-spacing: -.06em;
   margin: 15px 0
 }

 .section-heading>p {
   max-width: 430px;
   color: #777;
   margin-bottom: 7px
 }

 .dark-section .section-heading>p {
   color: #aaa
 }

 .split-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 75px;
   align-items: center
 }

 .feature-photo {
   width: 100%;
   height: 550px;
   object-fit: cover
 }

 .intro-copy p,
 .narrow-copy p,
 .contact-layout p {
   color: #696969
 }

 .lead {
   font-size: 1.2rem;
   color: #444 !important
 }

 .intro-copy .btn {
   margin-top: 15px
 }

 .services-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px
 }

 .service-card {
   background: #fff;
   color: #171717;
   min-width: 0
 }

 .dark-section .service-card {
   background: #121212;
   color: white
 }

 .service-image {
   height: 230px;
   position: relative;
   overflow: hidden
 }

 .service-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .5s
 }

 .service-card:hover img {
   transform: scale(1.05)
 }

 .service-image>span {
   position: absolute;
   right: 15px;
   top: 14px;
   color: white;
   font-weight: 700;
   font-size: .8rem
 }

 .service-copy {
   padding: 25px
 }

 .service-copy>i {
   color: var(--orange);
   font-size: 1.4rem
 }

 .service-copy h3 {
   margin: 12px 0 8px;
   font-size: 1.25rem
 }

 .service-copy p {
   color: #888;
   font-size: .9rem
 }

 .arrow-link {
   display: inline-block;
   color: var(--orange);
   font-weight: 700;
   font-size: .83rem;
   margin-top: 8px
 }

 .featured-video {
   width: 100%;
   max-height: 650px;
   aspect-ratio: 16/9;
   object-fit: cover;
   background: #111
 }

 .vision-section {
   display: grid;
   grid-template-columns: 1fr 1fr;
   background: #080808;
   color: #fff
 }

 .vision-section>div {
   padding: clamp(40px, 7vw, 100px)
 }

 .vision-section h2 {
   font-size: clamp(1.7rem, 3vw, 2.8rem);
   letter-spacing: -.04em;
   margin: 20px 0 0
 }

 .orange-block {
   background: var(--orange)
 }

 .orange-block .eyebrow:before {
   background: #fff
 }

 .values-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px
 }

 .value-card {
   border: 1px solid #e7e7e7;
   padding: 28px
 }

 .value-card span {
   font-size: 1.7rem;
   color: var(--orange)
 }

 .value-card h3 {
   margin: 15px 0 8px
 }

 .value-card p,
 .audience-card p {
   color: #777;
   font-size: .9rem
 }

 .audiences-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px
 }

 .audience-card {
   background: white;
   padding: 30px;
   border: 1px solid #eee
 }

 .audience-card>i {
   font-size: 1.5rem;
   color: var(--orange)
 }

 .audience-card h3 {
   margin: 18px 0 8px;
   font-size: 1.12rem
 }

 .audience-card a {
   color: var(--orange);
   font-size: .84rem;
   font-weight: 700
 }

 .cta-band {
   background: #111;
   color: #fff;
   padding: 70px 0
 }

 .cta-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 40px
 }

 .cta-inner h2 {
   font-size: clamp(2.3rem, 4vw, 3.8rem);
   margin: 13px 0
 }

 .cta-inner p {
   color: #bbb;
   max-width: 650px;
   margin-bottom: 0
 }

 .home-gallery {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px
 }

 .home-gallery img {
   height: 280px;
   width: 100%;
   object-fit: cover
 }

 .narrow-copy {
   max-width: 850px
 }

 .narrow-copy p {
   font-size: 1.02rem
 }

 .about-image-section {
   background: var(--light)
 }

 .service-list {
   margin-top: 35px;
   border-top: 1px solid #ddd
 }

 .service-list article {
   display: grid;
   grid-template-columns: 70px 1fr 30px;
   gap: 20px;
   align-items: start;
   padding: 25px 0;
   border-bottom: 1px solid #ddd
 }

 .service-list article>span {
   color: var(--orange);
   font-weight: 800
 }

 .service-list h3 {
   margin: 0 0 8px
 }

 .service-list p {
   margin: 0;
   color: #777
 }

 .process-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 25px;
   margin-top: 35px
 }

 .process-grid article {
   padding: 28px;
   border: 1px solid #333
 }

 .process-grid b {
   color: var(--orange);
   font-size: 1.3rem
 }

 .process-grid h3 {
   margin: 18px 0 8px
 }

 .process-grid p {
   color: #aaa
 }

 .partner-list {
   list-style: none;
   padding: 0
 }

 .partner-list li {
   padding: 15px 0;
   border-bottom: 1px solid #ddd
 }

 .partner-list i {
   color: var(--orange);
   margin-right: 12px
 }

 .gallery-filters {
   display: flex;
   flex-wrap: wrap;
   gap: 9px;
   margin: 28px 0
 }

 .filter-btn {
   padding: 9px 16px;
   background: white;
   border: 1px solid #ddd;
   cursor: pointer;
   font-size: .8rem
 }

 .filter-btn.active,
 .filter-btn:hover {
   background: var(--orange);
   border-color: var(--orange);
   color: white
 }

 .gallery-grid {
   columns: 4 220px;
   column-gap: 15px
 }

 .gallery-item {
   display: block;
   position: relative;
   width: 100%;
   margin: 0 0 15px;
   padding: 0;
   border: 0;
   background: #111;
   color: white;
   overflow: hidden;
   cursor: pointer;
   break-inside: avoid;
   text-align: left
 }

 .gallery-item img {
   width: 100%;
   height: auto;
   display: block;
   transition: transform .4s
 }

 .gallery-item:hover img {
   transform: scale(1.04)
 }

 .gallery-item>span {
   position: absolute;
   inset: auto 0 0;
   padding: 35px 14px 13px;
   background: linear-gradient(transparent, rgba(0, 0, 0, .82));
   font-size: .85rem;
   display: flex;
   justify-content: space-between;
   gap: 10px
 }

 .gallery-item[hidden] {
   display: none
 }

 .lightbox {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .95);
   z-index: 100;
   display: none;
   align-items: center;
   justify-content: center;
   padding: 60px
 }

 .lightbox.open {
   display: flex
 }

 .lightbox figure {
   margin: 0;
   text-align: center;
   max-width: 90vw;
   max-height: 85vh
 }

 .lightbox img {
   max-height: 75vh;
   max-width: 82vw;
   object-fit: contain;
   margin: auto
 }

 .lightbox figcaption {
   color: white;
   margin-top: 12px
 }

 .lightbox button {
   position: absolute;
   border: 0;
   background: rgba(255, 255, 255, .12);
   color: white;
   font-size: 2rem;
   width: 48px;
   height: 48px;
   cursor: pointer
 }

 .lightbox-close {
   right: 25px;
   top: 20px
 }

 .lightbox-prev {
   left: 20px;
   top: 50%
 }

 .lightbox-next {
   right: 20px;
   top: 50%
 }

 .contact-layout {
   display: grid;
   grid-template-columns: .85fr 1.15fr;
   gap: 60px;
   align-items: start
 }

 .contact-form {
   padding: 35px;
   background: #f7f7f7
 }

 .contact-form h3 {
   font-size: 1.6rem;
   margin-bottom: 5px
 }

 .form-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px;
   margin: 25px 0
 }

 .form-grid label {
   font-size: .8rem;
   font-weight: 700
 }

 .form-grid input,
 .form-grid select,
 .form-grid textarea {
   display: block;
   width: 100%;
   margin-top: 7px;
   padding: 12px;
   border: 1px solid #ddd;
   background: white;
   border-radius: 0
 }

 .full-field {
   grid-column: 1/-1
 }

 .form-message {
   font-size: .9rem;
   margin-top: 12px
 }

 .contact-form small {
   display: block;
   color: #777;
   margin-top: 14px
 }

 .site-footer {
   background: #050505;
   color: #ddd;
   padding: 65px 0 0
 }

 .footer-grid {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
   gap: 38px;
   padding-bottom: 45px
 }

 .brand-light {
   color: white
 }

 .footer-grid h3 {
   font-size: 1rem;
   color: white
 }

 .footer-grid p {
   font-size: .84rem;
   color: #aaa
 }

 .footer-links {
   display: grid;
   gap: 8px
 }

 .footer-links a {
   font-size: .85rem;
   color: #aaa
 }

 .footer-links a:hover {
   color: var(--orange)
 }

 .footer-bottom {
   padding: 20px 0;
   border-top: 1px solid #292929;
   display: flex;
   justify-content: space-between;
   color: #888;
   font-size: .78rem
 }

 .whatsapp-float {
   position: fixed;
   right: 22px;
   bottom: 22px;
   z-index: 60;
   width: 54px;
   height: 54px;
   border-radius: 50%;
   background: #20c768;
   color: white;
   display: grid;
   place-items: center;
   font-size: 1.8rem;
   box-shadow: 0 6px 20px #0003
 }

 .contact-detail {
   display: flex;
   gap: 15px;
   margin: 25px 0
 }

 .contact-detail>span {
   color: var(--orange);
   font-size: 1.2rem
 }

 .contact-detail h3 {
   margin: 0 0 4px
 }

 .contact-detail p {
   margin: 0
 }

 .contact-detail a {
   text-decoration: underline
 }

 .reveal {
   animation: rise .6s both
 }

 @keyframes rise {
   from {
     opacity: 0;
     transform: translateY(15px)
   }

   to {
     opacity: 1;
     transform: none
   }
 }

 @media(max-width:1050px) {
   .primary-nav {
     gap: 12px
   }

   .nav-link {
     font-size: .76rem
   }

   .nav-cta {
     display: none
   }

   .services-grid {
     grid-template-columns: repeat(2, 1fr)
   }

   .footer-grid {
     grid-template-columns: repeat(2, 1fr)
   }
 }

 @media(max-width:820px) {
   .menu-toggle {
     display: block
   }

   .nav-wrap {
     min-height: 74px
   }

   .primary-nav {
     display: none;
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     background: #080808;
     padding: 18px 24px 25px;
     align-items: stretch;
     flex-direction: column;
     gap: 0;
     border-top: 1px solid #222
   }

   .primary-nav.open {
     display: flex
   }

   .nav-link {
     font-size: .95rem;
     padding: 12px 0;
     border-bottom: 1px solid #222
   }

   .nav-cta {
     display: flex;
     margin-top: 15px
   }

   .section-pad {
     padding: 70px 0
   }

   .split-layout,
   .contact-layout {
     grid-template-columns: 1fr;
     gap: 35px
   }

   .feature-photo {
     height: 390px
   }

   .section-heading,
   .cta-inner {
     align-items: flex-start;
     flex-direction: column
   }

   .audiences-grid,
   .values-grid {
     grid-template-columns: repeat(2, 1fr)
   }

   .vision-section {
     grid-template-columns: 1fr
   }

   .vision-section>div {
     padding: 55px 28px
   }

   .home-gallery {
     grid-template-columns: repeat(2, 1fr)
   }

   .home-gallery img {
     height: 250px
   }

   .page-hero {
     min-height: 440px
   }

   .contact-form {
     padding: 25px
   }
 }

 @media(max-width:540px) {
   .container {
     width: min(100% - 30px, 1180px)
   }

   .topbar-inner {
     font-size: .72rem
   }

   .brand-mark {
     font-size: 2.2rem
   }

   .brand-name {
     font-size: .8rem
   }

   .home-hero {
     min-height: 720px
   }

   .hero-content,
   .page-hero-content {
     padding-block: 75px
   }

   .hero-content>p,
   .page-hero-content>p {
     font-size: .98rem
   }

   .hero-actions {
     align-items: stretch;
     flex-direction: column;
     max-width: 300px
   }

   .hero-actions .btn {
     text-align: center
   }

   .services-grid,
   .audiences-grid,
   .values-grid,
   .process-grid,
   .footer-grid {
     grid-template-columns: 1fr
   }

   .service-image {
     height: 220px
   }

   .section-heading h2,
   .intro-copy h2,
   .narrow-copy h2,
   .contact-layout h2 {
     font-size: 2.4rem
   }

   .home-gallery {
     gap: 8px
   }

   .home-gallery img {
     height: 180px
   }

   .form-grid {
     grid-template-columns: 1fr
   }

   .full-field {
     grid-column: auto
   }

   .footer-bottom {
     flex-direction: column;
     gap: 7px
   }

   .gallery-grid {
     columns: 2 140px
   }

   .lightbox {
     padding: 35px 10px
   }

   .lightbox img {
     max-width: 88vw
   }

   .lightbox-prev {
     left: 5px
   }

   .lightbox-next {
     right: 5px
   }

   .service-list article {
     grid-template-columns: 38px 1fr;
     gap: 12px
   }

   .service-list article>i {
     display: none
   }
 }

 @media(prefers-reduced-motion:reduce) {
   html {
     scroll-behavior: auto
   }

   *,
   *::before,
   *::after {
     animation-duration: .01ms !important;
     transition-duration: .01ms !important
   }

   .hero-video {
     display: none
   }
 }