:root {
  --purple-950: #0d001d;
  --purple-900: #16002f;
  --purple-700: #4b1387;
  --yellow: #ffd900;
  --white: #fff;
  --muted: #d8d1df;
  --container: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--white); background: var(--purple-950); font-family: "Mazzard M", "Manrope", sans-serif; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
.container { width: min(calc(100% - 64px), var(--container)); margin-inline: auto; }

.skip-link { position: fixed; z-index: 999; top: 12px; left: 12px; padding: 12px 18px; color: #111; background: var(--yellow); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: fixed; z-index: 50; inset: 0 0 auto; height: 92px; border-bottom: 1px solid rgba(255,255,255,.13); transition: background .35s, height .35s, backdrop-filter .35s; }
.site-header.is-scrolled { height: 76px; background: rgba(0,0,0,.88); backdrop-filter: blur(18px); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 34px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand-logo { display: block; width: auto; height: 48px; max-width: 190px; object-fit: contain; }
.main-nav { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.main-nav a { position: relative; color: rgba(255,255,255,.82); font-size: 13px; font-weight: 600; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 2px; background: var(--yellow); transition: right .25s; }
.main-nav a:hover::after, .main-nav a:focus-visible::after { right: 0; }
.header-cta { padding: 13px 20px; color: #18110a; background: var(--yellow); border-radius: 999px; font-size: 12px; font-weight: 800; transition: transform .25s, box-shadow .25s; }
.header-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(255,217,0,.25); }
.menu-toggle { display: none; }

.hero { position: relative; min-height: 760px; height: 100svh; overflow: hidden; isolation: isolate; background: #000; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 25vw 100%; opacity: .32; }
.hero-content { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-top: 70px; }
.eyebrow { margin: 0 0 22px; color: var(--yellow); font-size: 11px; font-weight: 800; letter-spacing: .2em; }
.hero h1 { max-width: 900px; margin: 0; font-size: clamp(58px, 7vw, 108px); line-height: .91; letter-spacing: -.065em; font-weight: 800; }
.hero h1 span { color: var(--yellow); -webkit-text-stroke: 0; }
.hero-copy { max-width: 600px; margin: 28px 0 0; color: var(--muted); font-size: clamp(16px, 1.35vw, 20px); line-height: 1.6; }
.hero-actions { display: flex; align-items: center; gap: 16px; margin-top: 38px; }
.btn { min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 0 25px; border: 1px solid transparent; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 800; transition: transform .25s, background .25s, border-color .25s, box-shadow .25s; }
.btn:hover { transform: translateY(-3px); }
.btn-primary { color: #171009; background: var(--yellow); box-shadow: 0 14px 36px rgba(255,217,0,.15); }
.btn-primary:hover { box-shadow: 0 17px 40px rgba(255,217,0,.3); }
.hero-footer { position: absolute; inset: auto 0 28px; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.48); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.scroll-hint { display: flex; align-items: center; gap: 12px; }
.scroll-hint i { display: block; width: 42px; height: 1px; background: rgba(255,255,255,.45); }

.numbers { position: relative; overflow: hidden; padding: 140px 0; color: var(--purple-950); background: #f8f6fa; }
.numbers::before { content: ""; position: absolute; width: 440px; height: 440px; right: -260px; top: -260px; border: 1px solid rgba(75,19,135,.1); border-radius: 50%; box-shadow: 0 0 0 72px rgba(75,19,135,.025), 0 0 0 144px rgba(75,19,135,.018); pointer-events: none; }
.numbers-inner { position: relative; display: grid; grid-template-columns: minmax(250px, .7fr) minmax(650px, 1.7fr); align-items: center; gap: clamp(50px, 6vw, 96px); }
.section-kicker { margin: 0 0 20px; color: var(--purple-700); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.numbers-intro h2 { margin: 0; font-size: clamp(42px, 4.4vw, 66px); line-height: 1.02; letter-spacing: -.055em; }
.numbers-intro > p:last-child { max-width: 470px; margin: 25px 0 0; color: #665d6d; font-size: 15px; line-height: 1.75; }
.numbers-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; border: 1px solid rgba(22,0,47,.12); border-radius: 24px; overflow: hidden; background: rgba(255,255,255,.68); box-shadow: 0 20px 55px rgba(22,0,47,.06); }
.number-card { position: relative; min-width: 0; padding: 34px 24px 32px; }
.number-card:nth-child(3n + 2), .number-card:nth-child(3n + 3) { border-left: 1px solid rgba(22,0,47,.12); }
.number-card:nth-child(n + 4) { border-top: 1px solid rgba(22,0,47,.12); }
.number-card dt { display: flex; align-items: flex-start; margin: 0; color: var(--purple-700); font-size: clamp(32px, 3.15vw, 50px); font-weight: 800; line-height: .95; letter-spacing: -.055em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.number-card-wide dt { font-size: clamp(28px, 2.75vw, 44px); }
.number-prefix { margin: .06em .08em 0 0; color: #000000; font-size: .62em; line-height: 1; letter-spacing: 0; }
.number-unit { margin: .06em 0 0 .14em; color: #040404; font-size: .62em; line-height: 1; letter-spacing: -.02em; }
.number-card dd { margin: 18px 0 0; color: #665d6d; font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1.45; text-transform: uppercase; }

.services { padding: 140px 0; color: var(--white); background: #000; }
.services-heading { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .65fr); align-items: end; gap: 70px; margin-bottom: 62px; }
.services-heading .section-kicker { color: var(--yellow); }
.services-heading h2 { margin: 0; font-size: clamp(46px, 5.3vw, 76px); line-height: .98; letter-spacing: -.06em; }
.services-heading h2 span { color: var(--yellow); }
.services-heading > p { margin: 0 0 4px; color: #bdb3c8; font-size: 15px; line-height: 1.75; }
.services-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 20px; }
.service-card { position: relative; display: flex; grid-column: span 2; min-height: 330px; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 28px; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: rgba(255,255,255,.045); transition: transform .35s ease, color .35s ease, border-color .35s ease, background .35s ease; }
.service-card::before { content: ""; position: absolute; right: -70px; bottom: -90px; width: 190px; height: 190px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; transition: transform .5s ease, border-color .35s ease; }
.service-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.service-number { color: var(--yellow); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.service-mark { color: rgba(255,255,255,.3); font-size: 28px; line-height: 1; transition: color .35s ease, transform .35s ease; }
.service-content { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr; align-content: start; min-height: 168px; }
.service-card h3 { min-height: 2.1em; margin: 0; font-size: clamp(24px, 2vw, 31px); line-height: 1.05; letter-spacing: -.04em; }
.service-card p { margin: 16px 0 0; color: rgba(255,255,255,.65); font-size: 13px; line-height: 1.65; transition: color .35s ease; }
.service-card:hover { color: #15031f; border-color: var(--yellow); background: var(--yellow); transform: translateY(-8px); }
.service-card:hover::before { border-color: rgba(21,3,31,.18); transform: scale(1.2); }
.service-card:hover .service-number, .service-card:hover .service-mark { color: #582779; }
.service-card:hover .service-mark { transform: rotate(12deg) scale(1.12); }
.service-card:hover p { color: rgba(21,3,31,.72); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }

.brands { overflow: hidden; padding: 140px 0 126px; color: var(--purple-950); background: #f8f6fa; }
.brands-heading { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .65fr); align-items: end; gap: 70px; margin-bottom: 64px; }
.brands-heading h2 { margin: 0; font-size: clamp(46px, 5.3vw, 76px); line-height: .98; letter-spacing: -.06em; }
.brands-heading h2 span { color: var(--purple-700); }
.brands-heading > p { margin: 0 0 4px; color: #665d6d; font-size: 15px; line-height: 1.75; }
.brands-marquee { position: relative; width: 100%; overflow: hidden; border-block: 1px solid rgba(22,0,47,.1); background: rgba(255,255,255,.66); }
.brands-marquee::before, .brands-marquee::after { content: ""; position: absolute; z-index: 2; inset-block: 0; width: min(10vw, 150px); pointer-events: none; }
.brands-marquee::before { left: 0; background: linear-gradient(90deg, #f8f6fa, transparent); }
.brands-marquee::after { right: 0; background: linear-gradient(-90deg, #f8f6fa, transparent); }
.brands-track { display: flex; width: max-content; animation: brand-scroll 88s linear infinite; }
.brands-marquee:hover .brands-track, .brands-marquee:focus-within .brands-track { animation-play-state: paused; }
.brand-item { display: grid; place-items: center; width: 240px; height: 152px; padding: 28px 38px; border-right: 1px solid rgba(22,0,47,.08); }
.brand-item img { display: block; width: 100%; height: 100%; object-fit: contain; filter: none; opacity: 1; transition: transform .3s; }
.brand-item:hover img { transform: scale(1.04); }
.brands-note { margin-top: 42px; color: #766c7e; font-size: 13px; letter-spacing: .02em; text-align: center; }
.brands-note strong { color: var(--purple-700); }
@keyframes brand-scroll { to { transform: translateX(-50%); } }

.process { position: relative; overflow: hidden; padding: 140px 0; color: var(--white); background: #080808; }
.process::before { content: "04"; position: absolute; right: -1vw; top: 32px; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.055); font-size: clamp(180px, 28vw, 420px); font-weight: 800; line-height: 1; letter-spacing: -.09em; pointer-events: none; }
.process-heading { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .65fr); align-items: end; gap: 70px; margin-bottom: 70px; }
.process-heading .section-kicker { color: var(--yellow); }
.process-heading h2 { margin: 0; font-size: clamp(46px, 5.3vw, 76px); line-height: .98; letter-spacing: -.06em; }
.process-heading h2 span { color: var(--yellow); }
.process-heading > p { margin: 0 0 4px; color: rgba(255,255,255,.58); font-size: 15px; line-height: 1.75; }
.process-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block: 0; padding-block: 0; list-style: none; counter-reset: process; }
.process-step { position: relative; min-width: 0; padding: 32px 30px 8px; border-top: 1px solid rgba(255,255,255,.22); }
.process-step + .process-step { border-left: 1px solid rgba(255,255,255,.12); }
.process-step::before { content: ""; position: absolute; left: 0; top: -2px; width: 38%; height: 3px; background: var(--yellow); transform: scaleX(.18); transform-origin: left; transition: transform .45s ease; }
.process-step:hover::before { transform: scaleX(1); }
.process-number { display: block; margin-bottom: 46px; color: rgba(255,255,255,.34); font-size: 11px; font-weight: 800; letter-spacing: .2em; }
.process-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 28px; color: #080808; background: var(--yellow); border-radius: 50%; font-size: 20px; font-weight: 800; transition: transform .35s ease; }
.process-step:hover .process-icon { transform: rotate(8deg) scale(1.06); }
.process-step h3 { margin: 0; font-size: clamp(22px, 2vw, 29px); line-height: 1.1; letter-spacing: -.04em; }
.process-step p { margin: 18px 0 0; color: rgba(255,255,255,.56); font-size: 13px; line-height: 1.7; }

.projects { padding: 140px 0; color: #111; background: #fff; }
.projects-heading { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .65fr); align-items: end; gap: 70px; margin-bottom: 62px; }
.projects-heading .section-kicker { color: var(--purple-700); }
.projects-heading h2 { margin: 0; font-size: clamp(46px, 5.3vw, 76px); line-height: .98; letter-spacing: -.06em; }
.projects-heading h2 span { color: var(--purple-700); }
.projects-heading > p { margin: 0 0 4px; color: #666; font-size: 15px; line-height: 1.75; }
.projects-grid { display: grid; grid-template-columns: 1.45fr 1fr; grid-template-rows: repeat(2, 340px); gap: 20px; }
.project-card { position: relative; min-height: 0; overflow: hidden; isolation: isolate; border-radius: 22px; background: #111; }
.project-card-featured { grid-row: 1 / 3; }
.project-card img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.78); transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .4s; }
.project-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, transparent 25%, rgba(0,0,0,.9) 100%); }
.project-content { position: absolute; inset: auto 0 0; padding: 32px; color: #fff; }
.project-content p { margin: 0 0 14px; color: var(--yellow); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.project-content h3 { max-width: 620px; margin: 0; font-size: clamp(24px, 2.5vw, 40px); line-height: 1.08; letter-spacing: -.04em; }
.project-content a { display: inline-flex; gap: 10px; margin-top: 20px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.project-card:hover img, .project-card:focus-within img { transform: scale(1.045); filter: saturate(1); }

.videos { padding: 140px 0; color: #fff; background: #080808; }
.videos-heading { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .65fr); align-items: end; gap: 70px; margin-bottom: 62px; }
.videos-heading .section-kicker { color: var(--yellow); }
.videos-heading h2 { margin: 0; font-size: clamp(46px, 5.3vw, 76px); line-height: .98; letter-spacing: -.06em; }
.videos-heading h2 span { color: var(--yellow); }
.videos-heading > p { margin: 0 0 4px; color: rgba(255,255,255,.58); font-size: 15px; line-height: 1.75; }
.videos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.video-card { overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 22px; background: #111; transition: transform .35s, border-color .35s; }
.video-card > a { display: block; height: 100%; }
.video-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #1a1a1a; }
.video-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55)); }
.video-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); filter: saturate(.8) contrast(1.04); transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .35s; }
.video-play { position: absolute; z-index: 2; inset: 50% auto auto 50%; display: grid; place-items: center; width: 58px; height: 58px; padding-left: 4px; color: #080808; background: var(--yellow); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 12px 34px rgba(0,0,0,.32); transition: transform .3s; }
.video-duration { position: absolute; z-index: 2; right: 14px; bottom: 12px; padding: 5px 7px; color: #fff; background: rgba(0,0,0,.78); border-radius: 5px; font-size: 10px; font-weight: 800; }
.video-copy { padding: 26px 26px 28px; }
.video-copy p { margin: 0 0 12px; color: var(--yellow); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.video-copy h3 { margin: 0; font-size: clamp(21px, 1.8vw, 28px); line-height: 1.13; letter-spacing: -.035em; }
.video-copy > span { display: inline-flex; gap: 9px; margin-top: 22px; color: rgba(255,255,255,.63); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.video-copy i { color: var(--yellow); font-style: normal; }
.video-card:hover, .video-card:focus-within { transform: translateY(-5px); border-color: rgba(255,217,0,.5); }
.video-card:hover img, .video-card:focus-within img { transform: scale(1.06); filter: saturate(1) contrast(1.02); }
.video-card:hover .video-play, .video-card:focus-within .video-play { transform: translate(-50%, -50%) scale(1.08); }
.videos-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 44px; padding-top: 36px; border-top: 1px solid rgba(255,255,255,.14); }
.videos-cta p { max-width: 560px; margin: 0; color: rgba(255,255,255,.58); font-size: 14px; line-height: 1.65; }

.contact { position: relative; overflow: hidden; padding: 58px 0 0; color: #111; background: #fff; }
.contact-heading { text-align: center; }
.contact-heading .section-kicker { color: #747474; }
.contact-heading h2 { margin: 0; font-size: clamp(48px, 5.6vw, 78px); line-height: .94; letter-spacing: -.06em; text-transform: uppercase; }
.contact-heading h2 span { color: transparent; -webkit-text-stroke: 1.5px #111; }
.contact-heading > p:last-child { max-width: 560px; margin: 20px auto 0; color: #666; font-size: 14px; line-height: 1.65; }
.contact-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 4vw, 64px); margin-top: 28px; }
.contact-grid::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 31%; width: 100vw; height: calc(69% + 82px); background: var(--yellow); transform: translateX(-50%); }
.contact-card { min-width: 0; text-align: center; }
.contact-portrait { position: relative; display: grid; place-items: center; width: min(100%, 254px); aspect-ratio: 1; margin: 0 auto; overflow: hidden; color: #fff; background: #2d2060; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); }
.contact-portrait::before, .contact-portrait::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); }
.contact-portrait::before { width: 44%; aspect-ratio: 1; top: 18%; }
.contact-portrait::after { width: 72%; height: 46%; bottom: -12%; border-radius: 50% 50% 0 0; }
.contact-portrait span { position: relative; z-index: 2; margin-top: 5%; color: rgba(255,255,255,.78); font-size: clamp(34px, 4.4vw, 66px); font-weight: 800; letter-spacing: -.06em; }
.contact-portrait img { position: absolute; z-index: 3; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.contact-portrait-karilyn { background: #3b287d; }
.contact-portrait-veronica { background: #251951; }
.contact-copy { padding: 28px 12px 52px; }
.contact-copy h3 { margin: 0; color: #181818; font-size: clamp(24px, 2.2vw, 34px); line-height: 1; letter-spacing: -.045em; text-transform: uppercase; }
.contact-copy a { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; color: #39206f; font-size: clamp(16px, 1.45vw, 21px); font-weight: 800; }
.contact-copy a span { transition: transform .25s; }
.contact-copy a:hover span, .contact-copy a:focus-visible span { transform: translate(3px, -3px); }
.contact-footer { display: flex; align-items: center; justify-content: space-between; gap: 38px; padding-block: 38px; }
.contact-details { display: grid; gap: 8px; color: #555; font-size: 12px; font-weight: 700; }
.contact-details a { color: #111; font-size: 15px; }
.social-strip { color: #111; background: #fff; }
.social-strip-inner { min-height: 112px; display: flex; align-items: center; justify-content: center; gap: 34px; }
.social-strip-inner > p { margin: 0; font-size: 13px; font-weight: 800; }
.social-strip-links { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(28px, 4vw, 52px); }
.social-strip-links a { display: inline-flex; align-items: center; gap: 7px; color: #111; font-size: 17px; font-weight: 800; line-height: 1; transition: color .25s, transform .25s; }
.social-strip-links a:hover { color: var(--purple-700); transform: translateY(-2px); }
.social-strip-links a img { display: block; width: auto; height: 32px; max-width: 130px; object-fit: contain; }
.social-instagram { font-family: Georgia, serif; font-style: italic; }
.social-instagram > span { font-family: Arial, sans-serif; font-style: normal; font-size: 22px; }
.social-linkedin > span { padding: 2px 3px; color: #fff; background: #111; border-radius: 2px; font-size: 12px; }
.social-youtube > span { display: grid; place-items: center; width: 24px; height: 16px; padding-left: 2px; color: #fff; background: #111; border-radius: 5px; font-size: 8px; }
.site-footer { color: rgba(255,255,255,.65); background: #050505; }
.site-footer-inner { min-height: 118px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.footer-brand img { display: block; width: auto; height: 32px; max-width: 145px; object-fit: contain; }
.site-footer p, .site-footer a { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.site-footer > .container > a:last-child { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .brands-track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
  .brands-track .brand-item[aria-hidden="true"] { display: none; }
}