@font-face { font-family: 'Archivo Black'; src: url(/fonts/archivo-black-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url(/fonts/figtree-var.woff2) format('woff2'); font-weight: 300 900; font-display: swap; }
:root {
--black: #000;
--yellow: #ffe100;
--white: #fff;
--paper: #fafafa;
--line: rgba(255, 255, 255, .92);
--head: 'Archivo Black', 'Arial Black', Impact, sans-serif;
--body: 'Figtree', 'Helvetica Neue', Arial, sans-serif;
--gut: clamp(16px, 4vw, 64px);
--wide: clamp(16px, 8vw, 128px);
--sec: clamp(56px, 7vw, 112px);
--t-mega: clamp(68px, 11.3vw, 176px);
--t-h2: clamp(38px, 5.4vw, 84px);
--t-h3: clamp(22px, 2.5vw, 38px);
--t-h4: clamp(20px, 1.8vw, 27px);
--t-body: clamp(16px, 1.25vw, 20px);
color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0; background: var(--black); color: var(--white);
font: 500 var(--t-body)/1.5 var(--body);
-webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 .9em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--head); font-weight: 400; letter-spacing: -.005em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--yellow); color: #000; padding: 10px 16px; font-weight: 700; }
.skip:focus { top: 12px; }
.vid { display: block; position: relative; overflow: hidden; }
.vid > img { width: 100%; height: 100%; object-fit: cover; }
.vid > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.vid > video.on { opacity: 1; }
.mega { font-size: var(--t-mega); line-height: .86; }
.h1x, .h2 { font-size: var(--t-h2); line-height: 1.1; }
.h3 { font-family: var(--head); font-size: var(--t-h3); line-height: 1.25; }
.h4 { font-size: var(--t-h4); line-height: 1.25; color: var(--yellow); }
.yellow { color: var(--yellow); }
.btn {
display: inline-block; background: var(--yellow); color: #000; text-decoration: none;
font: 400 clamp(13px, 1.2vw, 18px)/1.15 var(--head); letter-spacing: .02em;
padding: 1.1em 2.15em; border: 0; border-radius: 16px 0; cursor: pointer;
transition: transform .18s ease, background-color .18s ease;
}
.btn:hover { background: var(--white); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.hdr {
display: flex; align-items: center; justify-content: space-between; gap: 24px;
padding: clamp(18px, 2.4vw, 40px) var(--gut); position: relative; z-index: 20;
}
.hdr-logo img { width: clamp(108px, 10.5vw, 160px); }
.hdr-nav { display: flex; align-items: center; gap: clamp(14px, 1.5vw, 26px); }
.hdr-nav > a:not(.btn) { color: var(--yellow); text-decoration: none; font-size: clamp(16px, 1.3vw, 20px); }
.hdr-nav > a:not(.btn):hover, .hdr-nav > a[aria-current] { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.hdr-ig { display: grid; color: var(--yellow); margin-left: clamp(4px, 1vw, 16px); }
.hdr-ig svg { width: clamp(24px, 2vw, 32px); height: auto; }
.hdr-cta { font-size: clamp(12px, .95vw, 14.5px); padding: 1.15em 2.3em; }
.burger { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px 6px; cursor: pointer; }
.burger span { display: block; height: 3px; background: var(--yellow); border-radius: 2px; transition: transform .25s ease; }
.burger span + span { margin-top: 9px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-6px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 15; background: var(--black); display: flex; flex-direction: column; justify-content: center; padding: 96px var(--gut) 48px; }
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; gap: 10px; }
.menu nav a { font: 400 clamp(40px, 12vw, 64px)/1.1 var(--head); color: var(--yellow); text-decoration: none; }
.menu-ig { color: var(--yellow); margin-top: 32px; width: 40px; }
.menu-ig svg { width: 40px; height: 40px; }
html.menu-open { overflow: hidden; }
html.menu-open .hdr { position: fixed; inset: 0 0 auto; background: var(--black); }
section { position: relative; }
.rule { border-bottom: 2px solid var(--line); }
.cta-ready { text-align: center; padding: var(--sec) var(--gut); }
.cta-ready .h2 { margin-bottom: .45em; }
.sprinkle-art { width: clamp(150px, 15vw, 230px); }
.cta-ready .sprinkle { display: flex; justify-content: center; margin-bottom: 8px; }
.band.marquee { background: var(--yellow); color: #000; overflow: hidden; border-block: 2px solid var(--line); padding: clamp(14px, 1.9vw, 30px) 0; }
.mq-track { display: flex; width: max-content; animation: mq 46s linear infinite; }
.mq-group { display: flex; flex-shrink: 0; }
.mq-item { font: 400 clamp(28px, 3.5vw, 54px)/1.1 var(--head); white-space: nowrap; padding-inline: .32em; }
@keyframes mq { to { transform: translate3d(-50%, 0, 0); } }
.carousel { position: relative; }
[data-track] { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
[data-track]::-webkit-scrollbar { display: none; }
.car-btn {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
width: clamp(44px, 3.6vw, 56px); height: clamp(44px, 3.6vw, 56px); border-radius: 50%; border: 0;
background: rgba(38, 38, 38, .82); color: var(--yellow); display: grid; place-items: center; cursor: pointer;
transition: background-color .18s ease, transform .18s ease;
}
.car-btn svg { width: 56%; height: auto; }
.car-btn:hover { background: #000; }
.car-btn.light { background: rgba(255, 225, 0, .78); color: #111; }
.car-btn.light:hover { background: var(--yellow); }
.hero-home { min-height: calc(100svh - clamp(80px, 9vw, 130px)); display: grid; place-items: center; text-align: center; padding: 0 var(--gut) clamp(48px, 6vw, 96px); }
.hero-home .w { display: block; }
.p-home .hdr { position: absolute; inset: 0 0 auto; }
.p-home .hero-home.has-video { min-height: 100svh; padding-top: clamp(80px, 9vw, 130px); }
.p-home .hdr::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)); pointer-events: none; z-index: -1; }
.hero-home .mega { position: relative; z-index: 1; }
.hero-media { position: absolute; inset: 0; overflow: hidden; background: #000; }
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media video { opacity: 0; transition: opacity .8s ease; }
.hero-media video.on { opacity: 1; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .62); }
.has-video .mega { text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.intro { text-align: center; padding: var(--sec) var(--gut); }
.intro .h2 { max-width: 12.4em; margin: 0 auto; }
.cases-head { text-align: center; padding: var(--sec) var(--gut) clamp(28px, 3vw, 48px); }
.cases-head .h3 { margin-top: .5em; }
.cases { padding-bottom: var(--sec); }
.cs-track { gap: clamp(12px, 1.2vw, 20px); padding-inline: max(var(--gut), 4vw); scroll-padding-inline: max(var(--gut), 4vw); }
.cs-card { position: relative; flex: 0 0 88vw; height: clamp(440px, 45vw, 720px); overflow: hidden; scroll-snap-align: center; background: #111; }
.cs-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(15deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,0) 70%); pointer-events: none; }
.cs-card-copy { position: absolute; z-index: 1; left: clamp(20px, 5.5vw, 90px); right: 20px; bottom: clamp(28px, 6%, 64px); }
.cs-card-title { font-size: clamp(32px, 3.5vw, 54px); line-height: 1.05; margin-bottom: .3em; }
.cs-card-copy p { font-size: clamp(16px, 1.3vw, 20px); margin-bottom: 1.1em; }
.cases .car-prev { left: max(calc(var(--gut) + 14px), 5vw); }
.cases .car-next { right: max(calc(var(--gut) + 14px), 5vw); }
.spice-rack { text-align: center; padding: var(--sec) var(--gut); }
.spice-rack .h3 { margin-top: .5em; }
.spice-rack .h3 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.spices { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); max-width: 1180px; margin: clamp(40px, 4.5vw, 72px) auto 0; }
.spice-icon { width: clamp(96px, 9vw, 140px); margin: 0 auto 18px; }
.spice .h4 { margin-bottom: .55em; }
.spice p { line-height: 1.62; }
.brands { padding: var(--sec) 0; text-align: center; }
.brands .h1x { padding-inline: var(--gut); margin-bottom: clamp(28px, 4vw, 60px); }
.logo-track { list-style: none; margin: 0; padding: 0 clamp(60px, 6vw, 96px); gap: 0; }
.logo-track li { flex: 0 0 calc(100% / 6); display: grid; place-items: center; height: clamp(110px, 9vw, 150px); padding: 0 clamp(10px, 1.6vw, 28px); scroll-snap-align: start; }
.brand-logo { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
.brands .car-prev { left: clamp(8px, 1vw, 16px); }
.brands .car-next { right: clamp(8px, 1vw, 16px); }
.insta { padding: var(--sec) 0; text-align: center; }
.insta .h1x { padding-inline: var(--gut); margin-bottom: clamp(28px, 4vw, 60px); }
.ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.2vw, 18px); }
.ig-tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #111; }
.ig-tile .vid, .ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, opacity .3s ease; }
.ig-tile:hover img { transform: scale(1.04); opacity: .85; }
.play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 0; height: 0; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent #fff; filter: drop-shadow(0 1px 4px rgba(0,0,0,.4)); }
@media (prefers-reduced-motion: no-preference) {
.hero-home .w { animation: drop .8s cubic-bezier(.2, .9, .3, 1.25) both; }
.hero-home .w:nth-child(2) { animation-delay: .14s; }
.hero-home .w:nth-child(3) { animation: drop .8s cubic-bezier(.2, .9, .3, 1.25) .28s both, shake .9s ease-in-out 1.15s 1; transform-origin: 50% 85%; }
.hero-home .w:nth-child(4) { animation-delay: .42s; }
}
@keyframes drop { from { transform: translateY(-.38em) scale(.94) rotate(-3deg); } to { transform: none; } }
@keyframes shake { 0%, 100% { transform: none; } 15% { transform: rotate(-6deg); } 35% { transform: rotate(5deg); } 55% { transform: rotate(-4deg); } 75% { transform: rotate(2deg); } }
.page-title { text-align: center; padding: clamp(40px, 6vw, 96px) var(--gut) var(--sec); }
.page-title .h2 { max-width: 11.5em; margin: 0 auto; }
.goods-card { padding: clamp(28px, 3.6vw, 56px) var(--gut) 0; }
.goods-card:last-of-type { padding-bottom: var(--sec); }
.goods-inner { position: relative; min-height: clamp(460px, 48vw, 760px); display: flex; align-items: center; overflow: hidden; background: #111; }
.goods-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.goods-inner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 70%); pointer-events: none; }
.goods-copy { position: relative; z-index: 1; padding: 40px clamp(20px, 4.2vw, 72px); max-width: min(620px, 92%); }
.goods-copy .h2 { margin-bottom: .3em; }
.goods-client { font-size: clamp(17px, 1.45vw, 22px); margin-bottom: 1.1em; }
.services { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(28px, 4vw, 64px); padding: var(--sec) var(--wide); border-block: 2px solid var(--line); }
.svc-intro .h3 { margin-bottom: .4em; }
.svc-col h3 { font: 700 clamp(15px, 1.1vw, 17px)/1.3 var(--body); letter-spacing: .05em; color: var(--yellow); margin-bottom: .55em; }
.svc-col p { margin-bottom: 1.6em; line-height: 1.6; }
.wall { columns: 4 240px; column-gap: clamp(12px, 1.6vw, 24px); padding: var(--sec) var(--gut); border-bottom: 2px solid var(--line); }
.wall-tile, .g-tile { display: block; width: 100%; padding: 0; border: 0; background: #111; cursor: zoom-in; overflow: hidden; }
.wall-tile { margin: 0 0 clamp(12px, 1.6vw, 24px); break-inside: avoid; }
.wall-tile img, .wall-tile video, .g-tile img, .g-tile video { width: 100%; transition: transform .5s ease; }
.wall-tile:hover img, .wall-tile:hover video, .g-tile:hover img, .g-tile:hover video { transform: scale(1.03); }
.contact-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: clamp(24px, 4vw, 64px) var(--wide) clamp(32px, 4vw, 56px); }
.contact-hero .h3 { padding-bottom: .4em; }
.contact-form-wrap { background: var(--white); color: #111; padding: clamp(40px, 5vw, 80px) var(--wide) var(--sec); }
.form { max-width: 600px; }
.form-lede { font-size: clamp(18px, 1.5vw, 23px); line-height: 1.4; margin-bottom: 1.2em; }
.form-note { background: #fff6b0; padding: 12px 14px; font-size: 15px; margin-bottom: 1.4em; }
.form label, .form fieldset { display: block; margin: 0 0 22px; }
.form fieldset { border: 0; padding: 0; }
.form legend, .lbl { display: block; font-size: 17px; margin-bottom: 6px; padding: 0; }
.row-2 { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.row-2 legend { grid-column: 1 / -1; }
.row-2 label { margin: 0; }
.row-2 .lbl { font-size: 12px; }
.lbl small { font-size: 11px; color: #555; font-weight: 500; }
.help { display: block; font-size: 12px; color: #333; margin: 0 0 8px; }
.form input:not([type=checkbox]) { width: 100%; font: 500 16px var(--body); color: #111; background: var(--paper); border: 1px solid #555; border-radius: 0; padding: 13px 12px; }
.form input:focus { outline: 2px solid #111; outline-offset: 1px; }
.check { display: flex !important; align-items: center; gap: 10px; margin: 0 0 14px !important; font-size: 17px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: #111; margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form .btn { margin-top: 6px; font-size: 16px; padding: 1.05em 2.1em; }
.form .btn:hover { background: #111; color: var(--yellow); }
.form .btn[disabled] { opacity: .6; cursor: progress; }
.form-status { margin-top: 14px; font-weight: 700; min-height: 1.5em; }
.cs-hero { min-height: clamp(460px, 56vw, 92vh); display: flex; align-items: center; padding: 64px var(--wide); overflow: hidden; background: #111; }
.cs-hero-bg, .cs-cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-hero::after, .cs-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 50%, rgba(0,0,0,.05) 80%); pointer-events: none; }
.cs-hero .h2 { position: relative; z-index: 1; max-width: 8.5em; }
.label { color: var(--yellow); font: 700 1em/1.5 var(--body); letter-spacing: 0; margin: 0 0 .9em; }
.sol-list { list-style: none; margin: 0; padding: 0; }
.sol-list li { margin-bottom: .75em; }
.cs-intro { display: grid; grid-template-columns: 1fr 1.5fr 1.6fr; gap: clamp(24px, 3vw, 48px) clamp(24px, 3.4vw, 56px); padding: var(--sec) var(--wide) clamp(40px, 5vw, 72px); align-items: start; }
.cs-logos { grid-column: 1 / 3; display: flex; align-items: center; gap: clamp(18px, 2.6vw, 44px); }
.cs-client-logo { max-height: clamp(64px, 6vw, 100px); width: auto; max-width: 46%; }
.cs-ad-logo { height: clamp(44px, 4.4vw, 70px); width: auto; }
.plus { font: 400 clamp(40px, 4vw, 64px)/1 var(--head); color: var(--yellow); }
.cs-request, .cs-solution { font-size: clamp(16px, 1.25vw, 19px); }
.cs-solution .label { font-weight: 500; }
.cs-request .label, .cs-progress .label { margin-bottom: .9em; }
.cs-solution .label strong { font-weight: 700; }
.cs-intro-img { grid-column: 3; grid-row: 1 / span 2; }
.cs-intro-img img, .cs-intro-img .vid { width: 100%; aspect-ratio: 1; object-fit: cover; }
.cs-progress { display: grid; grid-template-columns: 1fr 3.1fr; gap: clamp(24px, 3.4vw, 56px); padding: 0 var(--wide) var(--sec); align-items: start; font-size: clamp(16px, 1.25vw, 19px); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px clamp(20px, 3vw, 48px); }
.stats.n2 { grid-template-columns: repeat(2, 1fr); max-width: 66%; }
.stat-num, .stat-label { font: 400 clamp(28px, 2.7vw, 42px)/1.1 var(--head); margin: 0; }
.stat-num { color: var(--yellow); }
.cs-split { display: grid; grid-template-columns: 1.65fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(32px, 4vw, 64px) var(--wide) clamp(32px, 4vw, 64px) var(--gut); }
.cs-split.image-right { grid-template-columns: 1fr 1.65fr; padding: clamp(32px, 4vw, 64px) var(--gut) clamp(32px, 4vw, 64px) var(--wide); }
.cs-split.image-right .cs-split-img { order: 2; }
.cs-split-img img, .cs-split-img video { width: 100%; }
.cs-split-copy .h3 { margin-bottom: .6em; }
.cs-split-copy p { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; }
.cs-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2.2vw, 34px); padding: clamp(32px, 4vw, 64px) var(--gut); }
.g-tile { aspect-ratio: 1; }
.g-tile img, .g-tile video, .g-tile .vid { height: 100%; object-fit: cover; }
.cs-quote { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 3vw, 48px); padding: var(--sec) var(--wide); max-width: 1500px; }
.q-mark { font: 400 clamp(110px, 13vw, 210px)/.78 var(--head); color: var(--yellow); margin: 0; }
.cs-quote figure { margin: 0; }
.cs-quote blockquote { margin: 0; font-size: clamp(19px, 1.9vw, 30px); line-height: 1.45; }
.cs-quote figcaption { margin-top: 1em; color: var(--yellow); font-weight: 700; font-size: clamp(15px, 1.2vw, 19px); letter-spacing: .03em; }
.cs-cta { min-height: clamp(420px, 46vw, 80vh); display: flex; align-items: center; padding: 64px var(--wide); overflow: hidden; background: #111; }
.cs-cta-copy { position: relative; z-index: 1; max-width: 9.5em; font-size: var(--t-h2); }
.cs-cta-copy .h2 { margin-bottom: .45em; }
.cs-cta-copy .btn { font-size: clamp(13px, 1.2vw, 18px); }
.faq { padding: var(--sec) var(--gut); }
.faq > .h1x, .faq > .h3 { text-align: center; }
.faq > .h3 { margin-top: .5em; }
.faq-list { max-width: 980px; margin: clamp(32px, 4vw, 60px) auto 0; border-top: 2px solid var(--line); }
.faq-row { border-bottom: 2px solid var(--line); }
.faq-row summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(18px, 2vw, 28px) 0; cursor: pointer; }
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row summary h3 { font: 400 clamp(19px, 1.9vw, 28px)/1.25 var(--head); }
.faq-row summary:hover h3 { color: var(--yellow); }
.faq-plus { position: relative; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 16px 0; background: var(--yellow); }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 3px; background: #000; translate: -50% -50%; transition: rotate .2s ease; }
.faq-plus::after { rotate: 90deg; }
.faq-row[open] .faq-plus::after { rotate: 0deg; }
.faq-a { padding: 0 0 clamp(20px, 2.2vw, 30px); max-width: 52em; }
.faq-a p { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; }
.lb { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, .95); display: grid; place-items: center; padding: 64px 72px; }
.lb[hidden] { display: none; }
.lb-stage iframe { width: min(540px, 92vw); height: min(860px, calc(100svh - 120px)); border: 0; background: #fff; }
.lb-stage img, .lb-stage video { max-width: min(92vw, 1600px); max-height: calc(100svh - 128px); width: auto; height: auto; }
.lb-close, .lb-prev, .lb-next { position: absolute; background: none; border: 0; color: var(--yellow); cursor: pointer; display: grid; place-items: center; width: 52px; height: 52px; }
.lb-close { top: 10px; right: 12px; font: 400 40px/1 var(--head); }
.lb-prev { left: 10px; top: 50%; translate: 0 -50%; }
.lb-next { right: 10px; top: 50%; translate: 0 -50%; }
html.lb-open { overflow: hidden; }
.ftr { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(36px, 4vw, 64px) var(--wide); }
.ftr-left { display: flex; flex-direction: column; gap: 14px; }
.ftr-mail { color: var(--yellow); font-size: clamp(16px, 1.35vw, 21px); text-decoration: none; }
.ftr-mail:hover { text-decoration: underline; }
.ftr-ig { color: var(--yellow); width: 30px; }
.ftr-where { margin: 4px 0 0; font-size: 14px; color: rgba(255, 255, 255, .72); }
.ftr-where a { color: inherit; text-underline-offset: .18em; }
.ftr-where a:hover { color: var(--yellow); }
.ftr-logo img { width: clamp(130px, 13vw, 200px); }
.ftr-brand { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.endorse, .intro-endorse a { color: var(--yellow); text-decoration: none; font-weight: 600; }
.endorse { font-size: clamp(14px, 1.05vw, 16px); }
.endorse:hover, .intro-endorse a:hover { text-decoration: underline; text-underline-offset: .2em; }
.intro-endorse { margin: clamp(18px, 2vw, 30px) 0 0; font-size: clamp(17px, 1.5vw, 23px); }
.results { padding: clamp(36px, 4.5vw, 64px) var(--gut); text-align: center; }
.results .h3 { margin-bottom: clamp(18px, 2vw, 28px); }
.res-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; max-width: 1280px; margin: 0 auto; }
.res { display: flex; flex-direction: column; gap: 4px; padding: clamp(14px, 1.6vw, 22px) 10px; text-decoration: none; background: #111; transition: background-color .18s ease; }
.res:hover { background: #1c1c1c; }
.res-num { font: 400 clamp(28px, 2.8vw, 44px)/1.05 var(--head); color: var(--yellow); }
.res-label { font-size: clamp(14px, 1.05vw, 16px); }
.res-client { font-size: 13px; color: rgba(255, 255, 255, .62); }
.proof { padding: var(--sec) var(--gut); text-align: center; }
.proof .h1x { margin-bottom: clamp(28px, 3.5vw, 52px); }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(14px, 1.8vw, 26px); max-width: 1280px; margin: 0 auto; text-align: left; }
.mini-case { display: block; text-decoration: none; background: #111; overflow: hidden; }
.mini-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.mini-case:hover .mini-img { transform: scale(1.03); }
.mini-copy { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 22px; }
.mini-client { font: 400 clamp(20px, 1.7vw, 26px)/1.15 var(--head); }
.mini-line { font-size: clamp(15px, 1.1vw, 17px); color: rgba(255, 255, 255, .86); }
.mini-more { color: var(--yellow); font-weight: 600; font-size: 15px; margin-top: 4px; }
.mini-case:hover .mini-more { text-decoration: underline; text-underline-offset: .2em; }
.more-svc { padding: clamp(36px, 4.5vw, 64px) var(--gut); text-align: center; }
.chip-row, .wall-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.chip-row a, .chip { font: 600 15px/1 var(--body); color: #fff; text-decoration: none; border: 2px solid rgba(255, 255, 255, .55); border-radius: 16px 0; padding: 12px 18px; background: none; cursor: pointer; transition: border-color .18s ease, color .18s ease, background-color .18s ease; }
.chip-row a:hover, .chip:hover { border-color: var(--yellow); color: var(--yellow); }
.chip[aria-pressed="true"] { background: var(--yellow); border-color: var(--yellow); color: #000; }
.wall-filters { padding: clamp(28px, 3vw, 44px) var(--gut) 0; margin: 0; }
.wall-tile[hidden] { display: none; }
.svc-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(32px, 4vw, 64px) var(--wide) var(--sec); }
.svc-hero-copy .h3 { margin: .45em 0 .7em; }
.svc-lead { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55; margin-bottom: 1.4em; max-width: 34em; }
.svc-hero-img img, .svc-hero-img .vid { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.svc-includes { padding: var(--sec) var(--wide); }
.inc-list { list-style: none; margin: 18px 0 0; padding: 0; }
.inc-list li { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); font-size: clamp(16px, 1.25vw, 19px); }
.inc-list a { color: #fff; text-decoration: none; }
.inc-list a:hover { color: var(--yellow); }
.inc-list.cols { columns: 2 280px; column-gap: clamp(28px, 4vw, 64px); }
.inc-list.cols li { break-inside: avoid; }
.svc-sg { margin-top: 26px; color: rgba(255, 255, 255, .78); }
.svc-sg a { color: var(--yellow); }
.two-lists, .about-who { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); padding: var(--sec) var(--wide); }
.about-who p { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55; margin-top: 14px; }
.about-lead { max-width: 40em; margin: 1.2em auto 0; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.55; }
.svc-grid-wrap { padding: 0 var(--gut) var(--sec); }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 26px); max-width: 1380px; margin: 0 auto; }
.svc-card { position: relative; display: block; overflow: hidden; text-decoration: none; background: #111; aspect-ratio: 4 / 5; }
.svc-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.svc-card:hover .svc-card-img { transform: scale(1.04); }
.svc-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.2) 55%, rgba(0,0,0,0) 80%); }
.svc-card-copy { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 8px; }
.svc-card-title { font: 400 clamp(24px, 2.2vw, 34px)/1.1 var(--head); }
.svc-card-sub { font-size: 15px; color: rgba(255, 255, 255, .88); }
.cs-hero-copy { position: relative; z-index: 1; }
.cs-date { margin-top: 14px; color: var(--yellow); font-weight: 600; font-size: clamp(14px, 1.1vw, 17px); }
.spice .h4 a { color: inherit; text-decoration: none; }
.spice .h4 a:hover { text-decoration: underline; text-underline-offset: .18em; }
.form select, .form textarea { width: 100%; font: 500 16px var(--body); color: #111; background: var(--paper); border: 1px solid #555; border-radius: 0; padding: 13px 12px; }
.form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #111 50%), linear-gradient(135deg, #111 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.form textarea { resize: vertical; min-height: 110px; }
.ts-slot { min-height: 0; margin: 4px 0 12px; }
.legal { text-align: left; max-width: 820px; margin: 0 auto; }
.legal .h1x { text-align: left; }
.legal-copy p { margin: 1em 0; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; }
.legal-copy a { color: var(--yellow); }
.legal-copy .help { color: rgba(255, 255, 255, .66); font-size: 14px; }
.ftr-links { display: flex; gap: clamp(28px, 5vw, 80px); }
.ftr-links div { display: flex; flex-direction: column; gap: 8px; }
.ftr-links a { color: rgba(255, 255, 255, .85); text-decoration: none; font-size: 15px; }
.ftr-links a:hover { color: var(--yellow); }
.ftr-h { color: var(--yellow); font-weight: 700; font-size: 15px; margin: 0 0 4px; }
.sticky-cta { display: none; }
@media (max-width: 820px) {
.sticky-cta { display: block; position: fixed; z-index: 40; left: var(--gut); right: var(--gut); bottom: max(12px, env(safe-area-inset-bottom)); text-align: center; box-shadow: 0 6px 24px rgba(0, 0, 0, .45); transform: translateY(160%); visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; }
.sticky-cta.show { transform: none; visibility: visible; transition: transform .3s ease; }
.res-row { grid-template-columns: 1fr 1fr; }
.res:last-child { grid-column: 1 / -1; }
.svc-hero { grid-template-columns: 1fr; padding-inline: var(--gut); }
.svc-hero-img { order: -1; }
.svc-includes, .two-lists, .about-who { padding-inline: var(--gut); grid-template-columns: 1fr; }
.svc-grid { grid-template-columns: 1fr; }
.svc-card { aspect-ratio: 5 / 4; }
.ftr { flex-wrap: wrap; }
.ftr-links { order: 3; width: 100%; }
}
@media (min-width: 821px) and (max-width: 1100px) {
.svc-grid { grid-template-columns: 1fr 1fr; }
.res-row { grid-template-columns: repeat(3, 1fr); }
.hdr-nav { gap: 12px; }
.hdr-nav > a:not(.btn) { font-size: 15px; }
}
.glance { padding: clamp(36px, 4.5vw, 64px) var(--wide); }
.glance .h3 { margin-bottom: .6em; }
.glance-p { max-width: 46em; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.55; margin-bottom: 1.2em; }
.tbl-wrap { overflow-x: auto; max-width: 1100px; }
.tbl { width: 100%; border-collapse: collapse; font-size: clamp(15px, 1.15vw, 17px); }
.tbl th, .tbl td { text-align: left; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, .2); vertical-align: top; }
.tbl thead th { color: var(--yellow); font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.tbl tbody th { font-weight: 700; }
.tbl td:nth-child(2) { color: #fff; }
.steps { margin: 10px 0 0; padding-left: 1.3em; max-width: 46em; }
.steps li { padding: 8px 0; font-size: clamp(16px, 1.25vw, 19px); }
.steps li::marker { color: var(--yellow); font-weight: 700; }
.chip-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-list li { border: 1px solid rgba(255, 255, 255, .35); border-radius: 16px 0; padding: 8px 14px; font-size: 14px; }
.work-intro { padding-bottom: 0; }
.legal-copy .h4 { margin: 1.6em 0 .4em; }
@media (max-width: 820px) { .glance { padding-inline: var(--gut); } }
.wall-more-wrap { text-align: center; padding: 0 var(--gut) var(--sec); margin: 0; }
.wall { border-bottom: 0; }
.p-404 .mega { font-size: clamp(56px, 9vw, 140px); }
.p-404 .hero-home { gap: 24px; align-content: center; }
@media (max-width: 1024px) {
.services { grid-template-columns: 1fr 1fr; }
.svc-intro { grid-column: 1 / -1; }
.cs-intro { grid-template-columns: 1fr 1.4fr; }
.cs-intro-img { grid-column: 1 / -1; grid-row: auto; max-width: 560px; }
.logo-track li { flex-basis: 25%; }
}
@media (max-width: 820px) {
.hdr-nav { display: none; }
.burger { display: block; }
.hero-home { min-height: calc(100svh - 96px); }
.mega { font-size: clamp(64px, 22vw, 120px); }
.spices { grid-template-columns: 1fr; max-width: 420px; }
.cs-card { flex-basis: 86vw; height: clamp(440px, 118vw, 600px); }
.cs-card::after { background: linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.2) 55%, rgba(0,0,0,0) 75%); }
.cases .car-btn { top: auto; bottom: -64px; transform: none; }
.cases .car-prev { left: auto; right: calc(var(--gut) + 64px); }
.cases .car-next { right: var(--gut); }
.cases { padding-bottom: calc(var(--sec) + 64px); }
.logo-track { padding: 0 56px; }
.logo-track li { flex-basis: 50%; height: 120px; }
.ig-grid { grid-template-columns: 1fr 1fr; }
.goods-inner { min-height: clamp(420px, 120vw, 560px); align-items: flex-end; }
.goods-inner::after { background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,0) 80%); }
.services { grid-template-columns: 1fr; padding-inline: var(--gut); }
.contact-hero { padding-inline: var(--gut); }
.contact-form-wrap { padding-inline: var(--gut); }
.cs-hero, .cs-cta { padding-inline: var(--gut); align-items: flex-end; padding-bottom: 48px; }
.cs-hero::after, .cs-cta::after { background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.2) 60%, rgba(0,0,0,0) 85%); }
.cs-intro, .cs-progress { grid-template-columns: 1fr; padding-inline: var(--gut); }
.cs-logos { grid-column: auto; }
.stats, .stats.n2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); max-width: none; }
.stat-num, .stat-label { font-size: clamp(26px, 7.4vw, 36px); }
.cs-split, .cs-split.image-right { grid-template-columns: 1fr; padding-inline: var(--gut); }
.cs-split.image-right .cs-split-img { order: 0; }
.cs-gallery { grid-template-columns: 1fr 1fr; }
.cs-quote { grid-template-columns: 1fr; padding-inline: var(--gut); gap: 0; }
.q-mark { line-height: .6; }
.ftr { padding-inline: var(--gut); }
.lb { padding: 56px 8px; }
.lb-prev, .lb-next { top: auto; bottom: 6px; translate: none; }
}
@media (max-width: 420px) {
.row-2 { grid-template-columns: 1fr; }
.ftr { flex-direction: column-reverse; align-items: flex-start; }
.ftr-brand { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
.mq-track { animation: none; }
.btn, .car-btn, .ig-tile img, .wall-tile img, .g-tile img { transition: none; }
}
.ss { position: relative; height: 150svh; background: #000; }
.ss-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.ss-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.ss-shaker {
position: absolute; z-index: 1; top: 6%;
width: clamp(76px, 9vw, 132px); left: calc(50% - clamp(76px, 9vw, 132px) / 2); height: auto; aspect-ratio: 1;
transform: rotate(-6deg); transform-origin: 50% 52%; will-change: transform;
cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.ss-copy { position: relative; z-index: 3; width: 100%; padding: clamp(150px, 26svh, 250px) 16px 24px; text-align: center; pointer-events: none; }
.ss-copy a { pointer-events: auto; }
.ss-h { margin: 0; font: 400 clamp(48px, 9vw, 150px)/.95 var(--head, 'Archivo Black'), sans-serif; letter-spacing: -.01em; }
.ss-h span { display: block; }
.ss-l1 { color: #fff; }
.ss-l2 { color: var(--yellow, #ffe100); }
.ss-after { margin-top: clamp(22px, 3.2vw, 44px); }
.ss-logo { display: block; width: clamp(160px, 15vw, 230px); height: auto; margin: 0 auto clamp(14px, 1.6vw, 22px); }
.ss-sub { max-width: 34em; margin: 0 auto .7em; color: rgba(255, 255, 255, .86); font-size: clamp(15px, 1.2vw, 19px); line-height: 1.5; }
.ss-link { color: var(--yellow, #ffe100); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.ss-link:hover { color: #fff; }
.ss.ss-live .ss-h, .ss.ss-live .ss-logo, .ss.ss-live .ss-sub, .ss.ss-live .ss-links { opacity: 0; }
.ss-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin: 18px 0 0; }
.ss-link { display: inline-block; }
@media (max-width: 820px) {
.ss-shaker { top: 4%; }
.ss-copy { padding-top: clamp(130px, 24svh, 190px); }
}
@media (prefers-reduced-motion: reduce) {
.ss { height: auto; }
.ss-stage { position: relative; height: auto; min-height: 100svh; }
.ss-canvas { display: none; }
}