:root {
--black:#080809;
--ink:#1d1d1f;
--muted:#6e6e73;
--paper:#fff;
--soft:#f5f5f7;
--line:#d2d2d7;
--orange:#f04b23;
--orange-bright:#ff6338;
--orange-text:#b82d0a;
--max:1280px;
--radius:28px}
* {
box-sizing:border-box}
html {
scroll-behavior:smooth;
scroll-padding-top:88px;
background:var(--soft)}
body {
margin:0;
color:var(--ink);
background:var(--soft);
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
font-size:17px;
line-height:1.5;
letter-spacing:-.012em;
-webkit-font-smoothing:antialiased}
body.menu-open,body.modal-open {
overflow:hidden}
img {
display:block;
width:100%}
a {
color:inherit;
text-decoration:none}
button,input,textarea {
font:inherit}
button {
color:inherit}
button,a {
-webkit-tap-highlight-color:transparent}
button {
touch-action:manipulation}
button[hidden],[hidden] {
display:none!important}
::selection {
color:#fff;
background:var(--orange-text)}
:focus-visible {
outline:3px solid var(--orange);
outline-offset:5px}
.content-shell {
width:min(calc(100% - 80px),var(--max));
margin-inline:auto}
.overline {
margin:0 0 18px;
font-size:.75rem;
font-weight:600;
letter-spacing:.055em}
.skip-link {
position:fixed;
z-index:500;
top:-100px;
left:20px;
padding:12px 20px;
border-radius:999px;
color:#fff;
background:#000}
.skip-link:focus {
top:16px}
main:focus {
outline:none}
section[id] {
scroll-margin-top:0}
.site-header {
position:fixed;
z-index:200;
inset:0 0 auto;
height:64px;
border-bottom:1px solid #0000000c;
background:#fafafce8;
backdrop-filter:saturate(180%) blur(20px)}
.nav-shell {
width:min(calc(100% - 64px),var(--max));
height:100%;
margin-inline:auto;
display:flex;
align-items:center;
gap:34px}
.brand {
width:100px;
flex:0 0 auto}
.brand img {
height:auto}
.desktop-nav {
display:flex;
align-items:center;
justify-content:center;
gap:clamp(18px,2.3vw,34px);
margin-inline:auto}
.desktop-nav a,.nav-contact {
position:relative;
padding-block:18px;
font-size:.76rem;
font-weight:500;
white-space:nowrap;
transition:color .2s}
.desktop-nav a:hover,.nav-contact:hover {
color:var(--orange-text)}
.desktop-nav a[aria-current] {
color:var(--orange-text)}
.nav-actions {
display:flex;
align-items:center;
gap:18px}
.language {
width:40px;
height:40px;
display:grid;
place-items:center;
border:0;
border-radius:50%;
background:#00000006;
cursor:pointer;
font-size:1.05rem}
.language:hover {
background:#0000000d}
.menu-toggle {
display:none;
width:44px;
height:44px;
padding:8px;
border:0;
background:transparent;
cursor:pointer}
.menu-toggle span {
display:block;
width:20px;
height:1.5px;
margin:6px auto;
background:currentColor;
transition:transform .2s}
.menu-open .menu-toggle span:first-child {
transform:translateY(3.75px) rotate(45deg)}
.menu-open .menu-toggle span:last-child {
transform:translateY(-3.75px) rotate(-45deg)}
.mobile-nav {
position:fixed;
z-index:190;
inset:64px 0 0;
display:grid;
align-content:start;
gap:8px;
padding:36px max(24px,6vw);
overflow-y:auto;
background:#fafafc}
.mobile-nav a {
padding:8px 0;
font-size:clamp(1.75rem,7vw,2.6rem);
line-height:1.2;
letter-spacing:-.045em;
font-weight:600}
.product-hero {
position:relative;
display:grid;
overflow:hidden;
text-align:center}
.product-hero--dark {
margin:80px 16px 0;
border-radius:36px;
background:var(--black);
color:var(--soft)}
#inicio {
padding:48px 36px 28px;
min-height:0}
.hero-copy {
position:relative;
z-index:1;
max-width:920px;
margin-inline:auto}
.hero-eyebrow {
display:flex;
align-items:center;
justify-content:center;
gap:12px;
color:#babac0}
.signal-mark {
display:flex;
align-items:center;
gap:3px;
height:18px}
.signal-mark i {
display:block;
width:2px;
height:6px;
border-radius:2px;
background:var(--orange)}
.signal-mark i:nth-child(2),.signal-mark i:nth-child(6) {
height:12px}
.signal-mark i:nth-child(3),.signal-mark i:nth-child(5) {
height:18px}
.signal-mark i:nth-child(4) {
height:9px}
.hero-copy h1 {
max-width:900px;
margin:0;
font-size:clamp(3.25rem,6.4vw,6rem);
font-weight:600;
line-height:1.015;
letter-spacing:-.06em;
text-wrap:balance}
.hero-line {
max-width:720px;
margin:22px auto 0;
font-size:clamp(1.08rem,1.7vw,1.5rem);
line-height:1.35;
letter-spacing:-.025em}
.product-hero--dark .hero-line {
color:#b3b3ba}
.hero-links {
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:24px;
margin-top:26px}
.pill {
min-height:46px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:0 24px;
border:0;
border-radius:999px;
font-size:.9rem;
font-weight:550;
cursor:pointer;
transition:background .2s,transform .2s}
.pill:hover {
transform:translateY(-2px)}
.pill--accent {
color:#160904;
background:var(--orange)}
.pill--accent:hover {
background:var(--orange-bright)}
.pill--dark {
color:#fff;
background:var(--ink)}
.text-link {
display:inline-flex;
align-items:center;
gap:8px;
min-height:44px;
color:var(--orange-text);
font-size:.95rem;
font-weight:500}
.text-link b {
font-size:1.5em;
font-weight:350;
line-height:.7;
transition:transform .2s}
.text-link:hover b {
transform:translateX(4px)}
.product-hero--dark .text-link {
color:#ff7955}
.text-link--light {
color:#f5f5f7}
.text-link--dark {
color:#17100d}
.hero-media {
position:relative;
display:block;
width:min(960px,100%);
margin:32px auto 0;
padding:0;
border:0;
color:#fff;
background:transparent;
cursor:pointer;
text-align:left}
.hero-media-frame {
position:relative;
display:block;
width:100%;
overflow:hidden;
aspect-ratio:16/9;
border-radius:24px;
background:#000}
.hero-media img {
width:100%;
height:100%;
object-fit:contain}
.media-play {
position:absolute;
z-index:2;
top:20px;
right:20px;
width:52px;
aspect-ratio:1;
display:grid;
place-items:center;
border:1px solid #ffffff75;
border-radius:50%;
color:#fff;
background:#080809eb;
font-size:.85rem;
transition:background .2s,border-color .2s,transform .2s}
.hero-media:hover .media-play,.hero-media:focus-visible .media-play,.feature-media:hover .media-play,.feature-media:focus-visible .media-play,.duo-media:hover .media-play,.duo-media:focus-visible .media-play,.service-reel-poster:hover .media-play,.service-reel-poster:focus-visible .media-play {
color:#160904;
border-color:var(--orange);
background:var(--orange);
transform:scale(1.06)}
.media-caption {
position:relative;
display:grid;
gap:3px;
padding:17px 42px 0 2px}
.media-caption strong {
font-size:.94rem;
font-weight:500}
.media-caption small {
font-size:.74rem;
color:#a9a9b0}
.caption-arrow {
position:absolute;
right:3px;
top:20px;
font-size:1.4rem;
color:#bebec5}
.product-hero--light {
grid-template-columns:.78fr 1.22fr;
align-items:center;
gap:64px;
margin:16px;
padding:76px max(28px,calc((100vw - 1280px)/2));
border-radius:36px;
background:#fff;
text-align:left}
.product-hero--light .hero-copy {
margin:0}
.product-hero--light .overline {
color:var(--orange-text)}
.hero-copy h2 {
margin:0;
font-size:clamp(2.7rem,4.3vw,4.8rem);
font-weight:600;
line-height:1.04;
letter-spacing:-.055em;
text-wrap:balance}
.product-hero--light .hero-line {
margin:22px 0 0;
font-size:1.1rem;
line-height:1.5;
color:var(--muted)}
.product-hero--light .hero-links {
justify-content:flex-start}
.feature-media {
position:relative;
display:block;
width:100%;
aspect-ratio:16/9;
overflow:hidden;
margin:0;
padding:0;
border:0;
border-radius:var(--radius);
background:#000;
cursor:pointer}
.feature-media img {
height:100%;
object-fit:contain}
.feature-caption {
position:absolute;
bottom:0;
left:0;
right:0;
padding:34px 20px 16px;
color:#fff;
background:linear-gradient(transparent,#000b);
font-size:.78rem;
text-align:left}
.duo-features {
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
padding:0 16px}
.duo-card {
display:flex;
flex-direction:column;
align-items:center;
min-height:560px;
overflow:hidden;
padding:48px 40px 32px;
border-radius:36px;
text-align:center}
.duo-card--dark {
color:#f5f5f7;
background:var(--black)}
.duo-card--orange {
color:#17100d;
background:var(--orange)}
.duo-copy {
max-width:520px}
.duo-copy h2 {
margin:0;
font-size:clamp(2.2rem,3vw,3.2rem);
font-weight:600;
line-height:1.05;
letter-spacing:-.05em;
text-wrap:balance}
.duo-copy .text-link {
margin-top:18px}
.duo-card--orange .text-link--dark {
padding:0 18px;
border:1px solid #17100d66;
border-radius:999px;
transition:color .2s,background .2s,border-color .2s,transform .2s}
.duo-card--orange:hover .text-link--dark,.duo-card--orange:focus-within .text-link--dark {
transform:translateY(-2px);
border-color:#17100d;
color:#fff;
background:#17100d}
.duo-media {
position:relative;
display:block;
width:min(560px,100%);
aspect-ratio:16/9;
overflow:hidden;
margin:auto auto 0;
padding:0;
border:0;
border-radius:22px;
color:#fff;
background:#111;
text-align:left;
cursor:pointer}
.duo-media img {
height:100%;
object-fit:contain}
.duo-media .media-play {
top:50%;
right:auto;
left:50%;
width:60px;
transform:translate(-50%,-50%)}
.duo-media:hover .media-play,.duo-media:focus-visible .media-play {
transform:translate(-50%,-50%) scale(1.06)}
.duo-caption {
position:absolute;
z-index:2;
inset:auto 0 0;
display:grid;
grid-template-columns:1fr auto;
gap:1px 16px;
padding:42px 20px 18px;
color:#fff;
background:linear-gradient(transparent,#000c);
text-align:left}
.duo-caption strong {
grid-column:span 2;
font-size:.9rem}
.duo-caption span {
font-size:.75rem}
.duo-caption b {
font-size:1rem}
.radio-brand {
width:min(164px,32%);
aspect-ratio:41/30;
overflow:hidden;
margin:auto}
.radio-brand img {
display:block;
width:243.902%;
max-width:none;
height:auto;
mix-blend-mode:multiply}
.catalog-section {
padding:112px 0;
background:#fff;
margin-top:16px}
.catalog-intro {
display:grid;
grid-template-columns:1.2fr .8fr;
align-items:end;
gap:0 60px;
margin-bottom:60px}
.catalog-intro .overline {
grid-column:span 2;
color:var(--orange-text)}
.catalog-intro h2,.section-title h2,.studio-intro h2 {
margin:0;
font-size:clamp(2.8rem,4.6vw,4.7rem);
font-weight:600;
line-height:1.06;
letter-spacing:-.05em;
text-wrap:balance}
.catalog-intro>p:last-child {
max-width:440px;
margin:0 0 3px;
color:var(--muted);
font-size:1rem;
line-height:1.6}
.catalog-block {
margin-top:92px}
.catalog-intro+.catalog-block {
margin-top:0}
.catalog-head {
display:flex;
justify-content:space-between;
align-items:center;
gap:24px;
padding-bottom:18px;
border-bottom:1px solid var(--line)}
.catalog-head h3 {
margin:0;
font-size:clamp(1.75rem,2.8vw,2.6rem);
font-weight:600;
letter-spacing:-.04em}
.catalog-head>span {
color:var(--muted);
font-size:.78rem}
.work-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:36px 24px;
margin-top:26px}
#television-grid {
grid-template-columns:repeat(6,minmax(0,1fr))}
#television-grid .work-card {
grid-column:span 2}
#television-grid .work-card:nth-child(-n+2) {
grid-column:span 3}
.work-card {
min-width:0;
padding:0;
border:0;
background:transparent;
text-align:left;
cursor:pointer}
.work-poster {
position:relative;
display:block;
overflow:hidden;
aspect-ratio:16/9;
border-radius:20px;
background:#111}
.work-poster img {
position:relative;
z-index:1;
height:100%;
object-fit:contain;
transition:opacity .3s}
.work-card:hover .work-poster img {
opacity:.86}
.work-fallback {
position:absolute;
inset:0;
display:grid;
place-items:center;
padding:24px;
color:#fff;
font-size:1.1rem;
text-align:center}
.work-play {
position:absolute;
z-index:2;
right:14px;
top:14px;
width:42px;
aspect-ratio:1;
display:grid;
place-items:center;
border:1px solid #ffffff33;
border-radius:50%;
color:#fff;
background:#080809b8;
backdrop-filter:blur(8px);
font-size:.7rem;
transition:transform .2s,background .2s,color .2s}
.work-card:hover .work-play,.work-card:focus-visible .work-play {
transform:scale(1.06);
color:#160904;
background:var(--orange);
border-color:var(--orange)}
.work-meta {
display:grid;
gap:4px;
padding:13px 2px 0}
.work-meta small {
color:var(--muted);
font-size:.67rem;
font-variant-numeric:tabular-nums;
letter-spacing:.015em}
.work-meta strong {
font-size:1rem;
font-weight:550;
line-height:1.3;
letter-spacing:-.02em}
.radio-section {
margin-top:100px;
padding:48px;
border-radius:32px;
color:#f5f5f7;
background:var(--black)}
.catalog-head--light {
border-color:#303034}
.catalog-head--light>span {
color:#a1a1aa}
.radio-player {
display:grid;
grid-template-columns:.95fr 1.05fr;
gap:72px;
margin-top:40px}
.radio-now {
min-width:0;
align-self:center}
.radio-now .overline {
color:#a1a1aa}
.radio-now h4 {
min-height:2.15em;
margin:10px 0 22px;
font-size:clamp(2.05rem,3.5vw,3.5rem);
font-weight:550;
line-height:1.08;
letter-spacing:-.04em;
text-wrap:balance}
.radio-wave {
height:92px;
margin:28px 0 22px;
position:relative}
.radio-wave canvas {
display:block;
width:100%;
height:100%}
.radio-seek {
width:100%;
margin:0;
accent-color:var(--orange);
cursor:pointer}
.radio-time {
display:flex;
justify-content:space-between;
color:#a1a1aa;
font-size:.72rem;
font-variant-numeric:tabular-nums;
margin-top:7px}
.radio-controls {
display:flex;
align-items:center;
gap:12px;
margin-top:26px}
.radio-controls button {
width:46px;
aspect-ratio:1;
border:1px solid #424245;
border-radius:50%;
color:#fff;
background:#1d1d1f;
cursor:pointer;
font-size:1.3rem;
transition:background .2s}
.radio-controls button:hover {
background:#343436}
.radio-controls .radio-main {
width:60px;
border-color:var(--orange);
color:#160904;
background:var(--orange);
font-size:1rem}
.radio-controls .radio-main:hover {
background:var(--orange-bright)}
.radio-list {
max-height:450px;
overflow:auto;
margin:0;
padding:0 8px 0 0;
list-style:none;
scrollbar-width:thin;
scrollbar-color:#424245 transparent;
overscroll-behavior:contain}
.radio-list button {
width:100%;
display:grid;
grid-template-columns:30px 1fr auto;
gap:12px;
align-items:center;
min-height:54px;
padding:14px 8px;
border:0;
border-bottom:1px solid #303034;
border-radius:4px;
color:#a1a1aa;
background:transparent;
text-align:left;
cursor:pointer;
transition:color .2s,background .2s}
.radio-list button:hover {
color:#fff;
background:#ffffff06}
.radio-track.is-active button {
color:#fff;
background:#ffffff0b;
box-shadow:inset 2px 0 var(--orange)}
.radio-track.is-active .radio-track__index {
color:var(--orange-bright)}
.radio-track__index,.radio-track__duration {
font-size:.7rem;
font-variant-numeric:tabular-nums}
.radio-track__name {
font-size:.82rem}
.radio-feedback {
font-size:.85rem;
color:#ffc3b4}
.radio-retry {
min-height:44px;
padding:8px 18px;
border:1px solid #666;
border-radius:999px;
background:transparent;
color:#fff;
cursor:pointer}
.archive-link-card {
display:flex;
justify-content:space-between;
align-items:center;
gap:34px;
margin-top:32px;
padding:38px 42px;
border-radius:28px;
background:var(--soft)}
.archive-link-card .overline {
margin-bottom:10px;
color:var(--muted)}
.archive-link-card h3 {
max-width:680px;
margin:0;
font-size:clamp(1.75rem,2.9vw,2.7rem);
font-weight:550;
line-height:1.08;
letter-spacing:-.04em}
.archive-link-card .pill {
flex-shrink:0}
.archive-link-card .pill--dark:hover,.archive-link-card .pill--dark:focus-visible {
color:#160904;
background:var(--orange)}
.services-section {
padding:100px 0;
background:var(--soft)}
.section-title {
max-width:820px}
.section-title .overline {
color:var(--muted)}
.service-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
margin-top:48px}
.service-card {
display:flex;
flex-direction:column;
min-width:0;
min-height:210px;
padding:26px;
border-radius:26px;
background:#fff}
.service-card>span,.service-reel-copy>span {
color:var(--orange-text);
font-size:.74rem;
font-weight:650}
.service-card h3 {
margin:28px 0 12px;
font-size:clamp(1.5rem,2.3vw,2.2rem);
font-weight:600;
line-height:1.1;
letter-spacing:-.04em}
.service-card p {
margin:0;
color:var(--muted);
font-size:.9rem;
line-height:1.55}
.service-card--wide {
grid-column:1/-1;
color:#fff;
background:#1d1d1f}
.service-card--reel {
display:grid;
grid-template-columns:.9fr 1.1fr;
gap:46px;
align-items:center;
min-height:390px;
padding:44px}
.service-reel-copy {
display:flex;
flex-direction:column;
justify-content:center;
align-self:center}
.service-reel-copy>span {
color:#ff7955}
.service-card--reel h3 {
margin:28px 0 18px;
font-size:clamp(2.2rem,3.2vw,3.4rem);
line-height:1.05}
.service-card--wide p {
color:#b5b5bb}
.service-reel-media {
min-width:0}
.service-reel-frame {
position:relative;
width:100%;
overflow:hidden;
aspect-ratio:16/9;
border-radius:20px;
background:#000}
.service-reel-poster {
position:absolute;
inset:0;
display:block;
width:100%;
height:100%;
padding:0;
border:0;
color:#fff;
background:#000;
cursor:pointer}
.service-reel-poster img {
width:100%;
height:100%;
object-fit:contain}
.service-reel-poster .media-play {
top:50%;
right:auto;
left:50%;
width:60px;
transform:translate(-50%,-50%)}
.service-reel-poster:hover .media-play,.service-reel-poster:focus-visible .media-play {
transform:translate(-50%,-50%) scale(1.06)}
.service-card--wide .service-reel-label {
margin-top:12px;
color:#b5b5bb;
font-size:.78rem}
.voice-section {
display:grid;
grid-template-columns:1.15fr .85fr;
gap:70px;
align-items:center;
padding:76px max(40px,calc((100vw - var(--max))/2));
color:#f5f5f7;
background:var(--black)}
.voice-kicker {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px 15px;
color:#b5b5bb}
.voice-status {
display:inline-flex;
align-items:center;
min-height:28px;
padding:3px 11px;
border:1px solid #f04b2380;
border-radius:999px;
color:#ff7955;
font-size:.7rem;
letter-spacing:0}
.voice-copy h2 {
max-width:650px;
margin:0;
font-size:clamp(2.5rem,4vw,4.1rem);
font-weight:600;
line-height:1.04;
letter-spacing:-.05em;
text-wrap:balance}
.voice-copy>p:last-child {
max-width:580px;
margin:24px 0 0;
color:#b5b5bb;
font-size:1rem;
line-height:1.55}
.voice-device {
padding:24px;
border:1px solid #353538;
border-radius:24px;
background:#141415}
.device-top {
display:flex;
justify-content:space-between;
gap:18px;
align-items:center;
padding-bottom:16px;
border-bottom:1px solid #303034;
font-size:.85rem}
.device-top>span {
color:#a1a1aa;
font-size:.67rem}
.device-script {
margin:18px 0;
padding:20px;
border-radius:14px;
color:#d2d2d7;
background:#232325;
font-size:1rem}
.device-control {
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 0;
border-bottom:1px solid #303034}
.device-control span {
color:#a1a1aa;
font-size:.74rem}
.device-control b {
font-size:.76rem;
font-weight:500}
.device-control i {
display:none}
.device-intent {
display:grid;
gap:6px;
margin-top:20px;
padding:16px;
border-radius:14px;
background:#24201f;
border-left:2px solid var(--orange)}
.device-intent small {
color:#b5b5bb;
font-size:.7rem}
.device-intent strong {
color:#f5f5f7;
font-size:.82rem;
font-weight:500}
.studio-section {
padding:112px 0;
background:#fff}
.studio-intro {
display:grid;
grid-template-columns:1.2fr .8fr;
gap:0 60px;
align-items:end}
.studio-intro .overline {
grid-column:span 2;
color:var(--orange-text)}
.studio-intro>p:last-child {
max-width:480px;
margin:0 0 3px;
color:var(--muted);
font-size:1rem;
line-height:1.6}
.stats {
display:grid;
grid-template-columns:repeat(3,1fr);
margin-top:60px;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line)}
.stats>div {
padding:32px 26px;
border-right:1px solid var(--line);
display:flex;
flex-direction:column;
justify-content:center}
.stats>div:first-child {
padding-left:0}
.stats>div:last-child {
border-right:0}
.stats strong {
display:block;
color:var(--ink);
font-size:clamp(3rem,4.8vw,4.8rem);
font-weight:500;
line-height:1.1;
letter-spacing:-.05em}
.stats span {
color:var(--muted);
font-size:.8rem}
.stat-commercials>span:first-child {
display:block;
margin-bottom:0}
.team-heading {
display:flex;
justify-content:space-between;
align-items:end;
gap:30px;
margin-top:84px;
padding-bottom:20px;
border-bottom:1px solid var(--line)}
.team-heading h3 {
margin:0;
font-size:2.5rem;
font-weight:600;
letter-spacing:-.045em}
.team-heading p {
margin:0;
color:var(--muted);
font-size:.95rem}
.team-grid {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:24px;
margin-top:28px}
.person {
min-width:0;
margin:0}
.person-photo {
overflow:hidden;
aspect-ratio:4/5;
border-radius:22px;
background:var(--soft)}
.person-photo img {
height:100%;
object-fit:cover;
filter:grayscale(1);
transition:filter .45s,transform .65s}
.person-photo:hover img {
filter:grayscale(0);
transform:scale(1.025)}
.person figcaption {
display:grid;
gap:3px;
padding-top:16px}
.person strong {
font-size:.95rem;
font-weight:550}
.person span {
color:var(--muted);
font-size:.74rem}
.person .certification-badge {
width:58px;
max-width:100%;
height:auto;
object-fit:contain;
margin-top:14px}
.contact-section {
display:grid;
grid-template-columns:1fr 1fr;
gap:90px;
padding:100px max(40px,calc((100vw - var(--max))/2));
color:#f5f5f7;
background:#1d1d1f}
.contact-copy .overline {
color:#b5b5bb}
.contact-copy h2 {
max-width:600px;
margin:0;
font-size:clamp(2.8rem,4.8vw,4.8rem);
font-weight:600;
line-height:1.04;
letter-spacing:-.05em;
text-wrap:balance}
.contact-copy>p:not(.overline) {
max-width:560px;
margin:24px 0 0;
color:#b5b5bb;
font-size:1rem}
.contact-links {
display:grid;
gap:8px;
margin-top:34px;
color:#d2d2d7;
font-size:.88rem}
.contact-links a:hover {
color:#ff7955}
.brief-form {
display:grid;
align-content:start;
gap:24px}
.brief-form label {
display:grid;
gap:8px;
color:#b5b5bb;
font-size:.76rem}
.brief-form input,.brief-form textarea {
width:100%;
padding:14px 0;
border:0;
border-bottom:1px solid #76767c;
border-radius:0;
color:#fff;
background:transparent;
font-size:1rem}
.brief-form input::placeholder,.brief-form textarea::placeholder {
color:#9c9ca2;
opacity:1;
}

.brief-form input:focus-visible,.brief-form textarea:focus-visible {
outline:2px solid var(--orange);
outline-offset:6px;
border-color:var(--orange)}
.brief-form textarea {
min-height:104px;
resize:vertical}
.brief-form .pill {
justify-self:start}
.site-footer {
padding:46px max(40px,calc((100vw - var(--max))/2)) 24px;
color:var(--muted);
background:var(--soft)}
.footer-main {
display:flex;
justify-content:space-between;
align-items:center;
gap:30px;
padding-bottom:34px}
.footer-main img {
width:140px;
height:auto}
.footer-main p {
margin:0;
color:var(--ink);
font-size:1.2rem;
font-weight:500}
.footer-bottom {
display:flex;
justify-content:space-between;
gap:28px;
padding-top:20px;
border-top:1px solid var(--line);
font-size:.72rem}
.footer-bottom div {
display:flex;
gap:22px}
.footer-bottom a:hover {
color:var(--orange-text)}
dialog {
width:100vw;
max-width:none;
height:100dvh;
max-height:none;
margin:0;
padding:0;
border:0;
color:#fff;
background:#000}
dialog::backdrop {
background:#000}
.modal-bar {
position:absolute;
z-index:2;
inset:0 0 auto;
min-height:64px;
display:flex;
align-items:center;
gap:20px;
padding:10px 18px;
background:linear-gradient(#000,transparent)}
.modal-bar strong {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:.84rem;
margin-right:auto}
.modal-bar button {
width:44px;
flex-shrink:0;
aspect-ratio:1;
border:1px solid #ffffff59;
border-radius:50%;
color:#fff;
background:#000b;
cursor:pointer}
.video-external {
font-size:.75rem;
color:#d2d2d7;
white-space:nowrap}
.video-external:hover {
color:#ff7955}
dialog iframe {
width:100%;
height:100%;
border:0}
.reveal {
opacity:1;
transform:none}
.reveal.is-visible {
animation:arrive .65s cubic-bezier(.2,.7,.2,1) both}
@keyframes arrive {
from {
opacity:.15;
transform:translateY(16px)}
to {
opacity:1;
transform:none}
}
@media(max-width:1100px) {
.desktop-nav {
gap:18px}
.nav-shell {
gap:24px}
.product-hero--light {
gap:36px;
padding:60px 34px}
.duo-card {
padding:40px 28px 28px;
min-height:520px}
.radio-player {
gap:42px}
.service-card--reel {
gap:30px;
padding:34px}
.service-card {
padding:24px}
.voice-section {
gap:40px}
.contact-section {
gap:60px}
}
@media(max-width:980px) {
.desktop-nav,.nav-contact {
display:none}
.nav-actions {
margin-left:auto;
gap:8px}
.menu-toggle {
display:block}
.content-shell {
width:calc(100% - 48px)}
#inicio {
padding:48px 28px 24px}
.hero-copy h1 {
font-size:clamp(3.4rem,7.8vw,5.5rem)}
.product-hero--light {
grid-template-columns:1fr 1.1fr;
gap:28px;
padding:48px 28px}
.hero-copy h2 {
font-size:clamp(2.25rem,4.8vw,3.7rem)}
.product-hero--light .hero-line {
font-size:1rem}
.duo-card {
min-height:460px;
padding:36px 24px 24px}
.duo-copy h2 {
font-size:2.3rem}
.duo-media {
margin-top:32px}
.catalog-intro,.studio-intro {
grid-template-columns:1fr;
gap:22px}
.catalog-intro .overline,.studio-intro .overline {
grid-column:auto;
margin:0}
.catalog-intro>p:last-child,.studio-intro>p:last-child {
max-width:640px}
.work-grid {
grid-template-columns:repeat(2,minmax(0,1fr))}
#television-grid {
grid-template-columns:repeat(2,minmax(0,1fr))}
#television-grid .work-card,#television-grid .work-card:nth-child(-n+2) {
grid-column:auto}
.radio-section {
padding:36px}
.radio-player {
gap:32px}
.radio-now h4 {
font-size:2.4rem}
.service-grid {
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px}
.service-card h3 {
font-size:1.7rem}
.service-card p {
font-size:.84rem}
.voice-section {
grid-template-columns:1fr 1fr;
padding:64px 28px}
.voice-copy h2 {
font-size:3rem}
.team-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
gap:36px 22px}
.contact-section {
padding:80px 28px;
gap:42px}
.site-footer {
padding-inline:28px}
}
@media(max-width:700px) {
html {
scroll-padding-top:80px}
.content-shell {
width:calc(100% - 40px)}
.nav-shell {
width:calc(100% - 32px)}
.brand {
width:92px}
.site-header {
height:60px}
.mobile-nav {
top:60px}
.product-hero--dark {
margin:72px 10px 0;
border-radius:28px}
#inicio {
padding:38px 20px 22px}
.hero-eyebrow {
font-size:.65rem;
gap:10px}
.hero-copy h1 {
font-size:clamp(2.8rem,10.8vw,4.7rem);
letter-spacing:-.055em}
.hero-line {
font-size:1.08rem;
max-width:370px}
.hero-links {
gap:16px;
margin-top:22px}
.pill {
font-size:.85rem;
padding:0 20px}
.text-link {
font-size:.88rem}
.hero-media {
margin-top:30px}
.hero-media-frame {
border-radius:17px}
.media-caption {
padding-top:14px}
.media-caption strong {
font-size:.82rem}
.media-caption small {
font-size:.67rem}
.media-play {
width:44px;
top:12px;
right:12px;
font-size:.75rem}
.product-hero--light {
grid-template-columns:1fr;
gap:28px;
margin:10px;
padding:38px 22px;
border-radius:28px}
.product-hero--light .hero-copy {
max-width:520px}
.product-hero--light .hero-line {
margin-top:16px;
font-size:1.03rem}
.hero-copy h2 {
font-size:2.7rem;
max-width:420px}
.product-hero--light .hero-links {
margin-top:18px}
.feature-media {
border-radius:20px}
.duo-features {
grid-template-columns:1fr;
gap:10px;
padding:0 10px}
.duo-card {
min-height:0;
border-radius:28px;
padding:38px 24px 24px}
.duo-copy {
max-width:440px}
.duo-copy h2 {
font-size:2.45rem}
.duo-media {
margin-top:30px;
border-radius:20px}
.duo-card--orange {
min-height:380px}
.radio-brand {
width:124px;
margin:36px auto 20px}
.catalog-section {
margin-top:10px;
padding:76px 0}
.catalog-intro {
gap:18px;
margin-bottom:42px}
.catalog-intro h2,.section-title h2,.studio-intro h2 {
font-size:clamp(2.7rem,8.6vw,3.5rem)}
.catalog-intro>p:last-child,.studio-intro>p:last-child {
font-size:.95rem}
.catalog-block {
margin-top:64px}
.catalog-head {
padding-bottom:14px;
gap:16px}
.catalog-head h3 {
font-size:2rem}
.catalog-head>span {
font-size:.72rem}
.work-grid,#television-grid {
grid-template-columns:1fr;
gap:28px;
margin-top:22px}
.work-poster {
border-radius:18px}
.work-meta strong {
font-size:1rem}
.radio-section {
margin-top:68px;
padding:30px 22px;
border-radius:26px}
.radio-player {
grid-template-columns:1fr;
gap:32px;
margin-top:30px}
.radio-now h4 {
min-height:0;
font-size:2.4rem}
.radio-wave {
height:72px;
margin-top:18px}
.radio-list {
max-height:328px}
.radio-controls {
margin-top:22px}
.archive-link-card {
align-items:flex-start;
flex-direction:column;
gap:24px;
margin-top:24px;
padding:28px 24px;
border-radius:24px}
.archive-link-card h3 {
font-size:2rem}
.services-section,.studio-section {
padding:76px 0}
.service-grid {
grid-template-columns:1fr;
margin-top:36px;
gap:12px}
.service-card {
min-height:0;
padding:24px}
.service-card h3 {
font-size:2rem;
margin-top:24px}
.service-card p {
font-size:.93rem}
.service-card--reel {
grid-template-columns:1fr;
gap:26px;
padding:28px 24px}
.service-card--reel h3 {
font-size:2.65rem;
margin:28px 0 16px}
.service-reel-frame {
border-radius:18px}
.voice-section {
grid-template-columns:1fr;
gap:32px;
padding:60px 24px}
.voice-copy h2 {
font-size:2.8rem}
.voice-copy>p:last-child {
font-size:.96rem}
.voice-device {
padding:22px}
.stats {
margin-top:36px;
grid-template-columns:repeat(3,minmax(0,1fr))}
.stats>div,.stats>div:first-child {
padding:22px 10px}
.stats strong {
font-size:clamp(2.2rem,6.6vw,3.3rem)}
.stats span {
font-size:.65rem;
line-height:1.4}
.stats .stat-commercials strong {
font-size:clamp(2rem,6.2vw,3rem)}
.team-heading {
align-items:flex-start;
flex-direction:column;
gap:8px;
margin-top:60px}
.team-heading h3 {
font-size:2.3rem}
.team-heading p {
font-size:.9rem}
.team-grid {
gap:28px 16px}
.person-photo {
border-radius:18px}
.person strong {
font-size:.88rem}
.person span {
font-size:.7rem}
.person .certification-badge {
width:50px}
.contact-section {
grid-template-columns:1fr;
gap:42px;
padding:68px 24px}
.contact-copy h2 {
font-size:3.1rem}
.contact-copy>p:not(.overline) {
font-size:.96rem}
.site-footer {
padding:38px 24px 24px}
.footer-main {
align-items:flex-start;
flex-direction:column;
gap:22px;
padding-bottom:26px}
.footer-main img {
width:126px}
.footer-main p {
font-size:1.05rem}
.footer-bottom {
flex-direction:column;
gap:16px}
.modal-bar {
gap:12px;
padding:10px 12px}
.modal-bar strong {
font-size:.75rem}
.video-external {
font-size:.65rem}
.modal-bar button {
width:40px}
}
@media(max-width:360px) {
#inicio {
padding-inline:16px}
.hero-copy h1 {
font-size:2.7rem}
.hero-eyebrow {
font-size:.58rem}
.hero-links {
gap:12px}
.team-grid {
grid-template-columns:1fr}
.stats strong {
font-size:2rem}
.stats .stat-commercials strong {
font-size:1.8rem}
}
@media(prefers-reduced-motion:reduce) {
html {
scroll-behavior:auto}
*,*::before,*::after {
animation:none!important;
transition:none!important}
.reveal {
opacity:1;
transform:none}
}
.media-fallback {
position:absolute;
inset:0;
display:grid;
place-items:center;
padding:64px 26px;
color:#d2d2d7;
font-size:clamp(1.2rem,2vw,2rem);
line-height:1.2;
text-align:center;
background:#171719}
.modal-bar {
padding-top:max(10px,env(safe-area-inset-top));
padding-left:max(18px,env(safe-area-inset-left));
padding-right:max(18px,env(safe-area-inset-right))}
/* Archive shares the same typography, cards and playback controls as the main page. */
.archive-page {
background:#fff}
.archive-page .archive-header {
height:80px}
.archive-header .nav-shell {
justify-content:space-between}
.archive-back {
min-height:48px;
padding:0 24px;
font-size:1rem;
font-weight:600;
color:#fff;
background:var(--ink)}
.archive-back:hover,.archive-back:focus-visible {
color:#160904;
background:var(--orange)}
.archive-back>span:first-child {
font-size:1.25rem;
transition:transform .2s}
.archive-back:hover>span:first-child {
transform:translateX(-3px)}
.archive-wordmark {
width:100px;
height:auto;
margin-left:auto}
.archive-page main {
padding-top:80px}
.archive-hero {
padding:72px 0 60px}
.archive-hero .overline {
color:var(--orange-text)}
.archive-hero h1 {
max-width:900px;
margin:0;
font-size:clamp(3rem,6.5vw,6rem);
font-weight:600;
line-height:1.03;
letter-spacing:-.055em;
text-wrap:balance}
.archive-intro {
max-width:540px;
margin:24px 0 0;
color:var(--muted);
font-size:1.1rem;
line-height:1.55}
.archive-section {
padding:20px 0 100px}
.archive-section .catalog-head h2 {
margin:0;
font-size:clamp(1.75rem,2.8vw,2.6rem);
font-weight:600;
letter-spacing:-.04em}
.archive-footer {
padding-top:0}
.archive-footer .footer-bottom {
border-top:0}
@media(min-width:981px) {
#inicio {
grid-template-columns:.85fr 1.15fr;
align-items:center;
gap:clamp(32px,4vw,64px);
padding:76px max(40px,calc((100vw - 1300px)/2));
min-height:620px;
text-align:left}
#inicio .hero-copy {
margin:0;
max-width:520px}
#inicio .hero-eyebrow {
justify-content:flex-start}
#inicio .hero-copy h1 {
font-size:clamp(3.25rem,5.1vw,4.5rem);
line-height:1.035;
letter-spacing:-.055em}
#inicio .hero-line {
max-width:420px;
margin:24px 0 0;
font-size:clamp(1.05rem,1.5vw,1.3rem);
line-height:1.4}
#inicio .hero-links {
justify-content:flex-start;
gap:20px}
#inicio .hero-media {
width:100%;
margin:0}
#inicio .hero-media-frame {
border-radius:22px}
}
@media(max-width:700px) {
.archive-page .archive-header {
height:72px}
.archive-page main {
padding-top:72px}
.archive-header .nav-shell {
gap:12px}
.archive-back {
padding:0 18px;
font-size:.9rem;
min-height:46px}
.archive-wordmark {
display:none}
.archive-hero {
padding:48px 0 44px}
.archive-hero h1 {
font-size:clamp(2.8rem,10vw,4.2rem)}
.archive-intro {
font-size:1rem}
.archive-section {
padding-bottom:68px}
}