:root {
  --ink: #2b2930;
  --paper: #f9fafb;
  --green: #3fbd9a;
  --yellow: #e8be72;
  --red: #dd5862;
  --blue: #7fc5cc;
  --line: rgba(43,41,48,.2);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Manrope, sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.site-header { position: fixed; z-index: 20; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px 24px; color: white; mix-blend-mode: difference; transition: color .22s ease; }
.site-header.contact-theme { color: var(--yellow); mix-blend-mode: normal; }
.site-header.studio-theme { color: var(--red); mix-blend-mode: normal; }
.wordmark { display: block; width: 92px; aspect-ratio: 784 / 334; background: currentColor; -webkit-mask: url("assets/felipa-logo.png") center / contain no-repeat; mask: url("assets/felipa-logo.png") center / contain no-repeat; }
.wordmark img { display: block; width: 100%; height: auto; opacity: 0; }
footer>a img { display: block; width: 150px; height: auto; }
nav { display: flex; gap: 28px; font: 500 .78rem/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .04em; }
nav a { position: relative; }
nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px; background: currentColor; transition: right .25s; }
nav a:hover::after { right: 0; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 14px; }
.header-social { font: 500 .75rem "DM Mono", monospace; text-transform: uppercase; }
.language-toggle { border: 0; padding: 0; color: inherit; background: transparent; font: 500 .75rem "DM Mono", monospace; cursor: pointer; }
.hero { position: relative; min-height: 100svh; color: white; background: var(--ink); overflow: hidden; }
.hero-video, .hero-video iframe, .hero-wash { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hero-video { overflow: hidden; background: #222; }
.hero-video iframe { width: 177.78vh; min-width: 100%; height: 56.25vw; min-height: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(1.06); opacity: .78; pointer-events: none; }
.hero-wash { background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.03) 35%, rgba(0,0,0,.65)); }
.hero-copy { position: relative; z-index: 2; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px 24px 28px; }
.eyebrow, .index, .hero-meta, .hero-credit, .client, .project-info>p, .since { font: 500 .78rem/1.3 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .045em; }
.hero-meta { display: flex; justify-content: space-between; align-items: flex-end; border-top: 1px solid rgba(255,255,255,.5); padding-top: 14px; }
.hero-meta p { margin: 0; }
.hero-meta a { font-size: .9rem; }
.hero-credit { position: absolute; z-index: 2; right: 24px; top: 50%; transform: rotate(90deg) translateX(50%); transform-origin: right center; font-size: .62rem; opacity: .7; }
.ticker { overflow: hidden; background: var(--green); padding: 15px 0; border-bottom: 1px solid var(--ink); }
.ticker-track { display: flex; width: max-content; gap: 22px; align-items: center; font: 400 1.25rem "Archivo Black", sans-serif; text-transform: uppercase; animation: marquee 28s linear infinite; }
.ticker i { font-style: normal; font-size: .8rem; }
@keyframes marquee { to { transform: translateX(-50%); } }
.work { padding: 120px 24px 140px; }
.section-intro { display: grid; grid-template-columns: 1fr 3fr; align-items: start; margin-bottom: 100px; }
.section-intro h2, .studio h2 { margin: 0; font: 400 clamp(3.2rem, 8vw, 8.5rem)/.88 "Archivo Black", sans-serif; letter-spacing: -.075em; text-transform: uppercase; }
.work .section-intro h2 { font-size: clamp(2.56rem, 6.4vw, 6.8rem); }
.project { margin-bottom: 90px; }
.project-media { position: relative; display: block; width: 100%; aspect-ratio: 16/9; padding: 0; overflow: hidden; border: 0; background: #171717; }
.project-play { position: absolute; z-index: 3; inset: 0; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.project-media img, .project-media iframe, .project-story-image { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; transform: scale(1.01); filter: brightness(.92); transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .4s, opacity .2s; }
.project-media iframe { z-index: 1; pointer-events: none; }
.project-story-image { z-index: 2; }
.project-media:hover img, .project-media:hover iframe, .project-media:hover .project-story-image { transform: scale(1.035); filter: brightness(1.04); }
.project-slide { position: absolute; z-index: 4; top: 50%; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; color: var(--paper); background: rgba(43,41,48,.55); backdrop-filter: blur(8px); font-size: 1.4rem; line-height: 1; cursor: pointer; opacity: 0; transform: translateY(-50%); transition: opacity .25s, background .25s; }
.project-previous { left: 14px; }
.project-next { right: 14px; }
.project-media:hover .project-slide, .project-slide:focus-visible { opacity: 1; }
.project-slide:hover { background: var(--red); }
.play { position: absolute; z-index: 2; left: 16px; bottom: 16px; padding: 10px 13px; color: var(--ink); background: var(--paper); border-radius: 999px; font: 500 .75rem "DM Mono", monospace; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: .3s; }
.project-media:hover .play, .project-play:focus-visible .play { opacity: 1; transform: none; }
.project-info { display: flex; justify-content: space-between; gap: 30px; align-items: end; padding-top: 16px; border-top: 1px solid var(--ink); }
.project-info h3 { margin: 4px 0 0; font: 400 clamp(1.75rem, 3vw, 3.2rem)/.95 "Archivo Black", sans-serif; letter-spacing: -.06em; text-transform: uppercase; }
.project-info p { margin: 0 0 4px; text-align: right; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 80px 24px; }
.project-grid .project { margin: 0; }
.project-grid .project-info { align-items: start; flex-direction: column; gap: 18px; }
.project-grid .project-info>p { text-align: left; }
.project-grid .project-info h3 { font-size: clamp(1.3rem, 2.1vw, 2.35rem); }
.project-grid-all { margin-bottom: 110px; }
.influencer-work { padding: 120px 24px 140px; color: var(--ink); background: var(--green); border-top: 1px solid var(--ink); }
.influencer-work .section-intro { margin-bottom: 100px; }
.influencer-intro-copy h2 { font-size: clamp(2rem, 4.1vw, 4.8rem); white-space: normal; }
.influencer-intro-copy p { max-width: 660px; margin: 30px 0 0; font-size: clamp(1.05rem, 1.7vw, 1.55rem); line-height: 1.22; letter-spacing: -.035em; }
.all-work { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 20px 0; font: 400 clamp(1.5rem, 3vw, 3rem) "Archivo Black", sans-serif; text-transform: uppercase; letter-spacing: -.045em; transition: padding .25s, color .25s; }
.all-work:hover { padding-left: 14px; color: var(--red); }
.studio { display: grid; grid-template-columns: 1fr 3fr; min-height: 100vh; padding: 130px 24px; background: var(--blue); border-top: 1px solid var(--ink); }
.studio-sticky { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; }
.since { margin: 0 0 6px; }
.manifesto { max-width: 1120px; margin: 55px 0; font-size: clamp(2rem, 4.4vw, 5rem); line-height: 1.05; letter-spacing: -.045em; }
.manifesto em, .contact h2 em { color: var(--red); font-family: Georgia, serif; font-weight: 400; }
.body-copy { max-width: 720px; margin: 0 0 100px auto; font-size: clamp(1.1rem, 1.6vw, 1.55rem); line-height: 1.45; }
.disciplines { border-top: 1px solid var(--ink); }
.disciplines>div { display: grid; grid-template-columns: 60px 1fr 1.15fr; align-items: center; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--ink); }
.disciplines span { font: 500 .75rem "DM Mono", monospace; }
.disciplines h3 { margin: 0; font: 400 clamp(1.5rem, 3vw, 3.2rem) "Archivo Black", sans-serif; text-transform: uppercase; letter-spacing: -.045em; }
.disciplines p { margin: 0; line-height: 1.4; }
.trimedary { padding: 110px 24px 130px; background: var(--paper); border-top: 1px solid var(--ink); }
.trimedary>.index { margin: 0 0 68px; color: var(--red); }
.trimedary-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 7vw; align-items: center; }
.trimedary h2 { margin: 0 0 34px; font: 400 clamp(2.4rem, 5vw, 5.8rem)/.86 "Archivo Black", sans-serif; letter-spacing: -.075em; text-transform: uppercase; }
.camel-space { display: inline-block; width: .82em; }
.trimedary-copy p { max-width: 650px; margin: 0 0 20px; font-size: clamp(1.1rem, 1.65vw, 2rem); line-height: 1.12; letter-spacing: -.04em; }
.trimedary-copy strong { color: var(--red); font-weight: 700; }
.trimedary-copy em { font-family: Georgia, serif; }
.trimedary-copy:has([lang="es"]) .trimedary-extra { display: none; }
.trimedary-art { margin: 0; overflow: hidden; background: var(--ink); }
.trimedary-art img { display: block; width: 100%; height: auto; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.trimedary-art:hover img { transform: scale(1.025); }
.collaborators { background: var(--ink); color: white; padding: 110px 24px 130px; }
.collaborators .index { color: var(--green); margin-bottom: 70px; }
.client-wall { margin: 0; overflow: hidden; background: var(--ink); }
.client-wall img { display: block; width: 100%; height: auto; }
.names { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.names span { font: 400 clamp(2.3rem, 6vw, 7.5rem)/.9 "Archivo Black", sans-serif; letter-spacing: -.075em; text-transform: uppercase; }
.collaborators .names span { font-size: clamp(1.84rem, 4.8vw, 6rem); }
.names span::after { content: "/"; color: var(--yellow); padding-left: 20px; }
.awards { padding: 110px 24px 130px; background: var(--yellow); color: var(--ink); }
.awards .index { margin-bottom: 70px; color: var(--red); }
.awards .names span { font-size: clamp(1.61rem, 4.2vw, 5.25rem); }
.awards .names span::after { color: var(--red); }
.contact { display: grid; grid-template-columns: 1fr 3fr; padding: 130px 24px 30px; min-height: 95vh; background: var(--red); }
.contact h2 { margin: 0 0 60px; font: 400 clamp(4rem, 10vw, 11rem)/.8 "Archivo Black", sans-serif; letter-spacing: -.085em; text-transform: uppercase; }
.contact h2 em { color: var(--yellow); text-transform: none; }
.email { display: flex; justify-content: space-between; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 18px 0; font-size: clamp(1.2rem, 2.5vw, 2.6rem); letter-spacing: -.04em; }
.contact-meta { grid-column: 2; align-self: end; display: flex; justify-content: space-between; align-items: end; margin-top: 80px; font: 500 .78rem/1.5 "DM Mono", monospace; text-transform: uppercase; }
.socials { display: flex; gap: 22px; }
footer { display: grid; grid-template-columns: 1fr auto auto; gap: 40px; align-items: end; padding: 24px; color: white; background: var(--ink); }
footer p { margin: 0; font: 400 .7rem "DM Mono", monospace; text-transform: uppercase; }
.film-dialog { width: min(1100px, calc(100vw - 32px)); max-width: none; padding: 48px 0 0; border: 0; background: transparent; overflow: visible; }
.film-dialog::backdrop { background: rgba(0,0,0,.92); backdrop-filter: blur(12px); }
.film-frame { position: relative; aspect-ratio: 16/9; background: black; }
.film-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film-frame img { width: 100%; height: 100%; object-fit: contain; }
.close-film { position: absolute; right: 0; top: 5px; color: white; background: none; border: 0; padding: 8px 0; font: 500 .75rem "DM Mono", monospace; text-transform: uppercase; cursor: pointer; }
@media (max-width: 760px) {
  .site-header { grid-template-columns: 1fr auto; padding: 16px; }
  nav { display: none; }
  .hero-copy { padding: 100px 16px 20px; }
  .hero h1 { margin-top: 22vh; font-size: clamp(4rem, 21vw, 7rem); }
  .hero-light { margin-left: 18vw; }
  .hero-bold:last-child { margin-left: 0; }
  .hero-meta { align-items: start; gap: 22px; }
  .hero-meta p { max-width: 190px; }
  .hero-credit { display: none; }
  .work, .influencer-work, .studio, .trimedary, .collaborators, .awards, .contact { padding-left: 16px; padding-right: 16px; }
  .work { padding-top: 80px; padding-bottom: 90px; }
  .influencer-work { padding-top: 80px; padding-bottom: 90px; }
  .section-intro, .studio, .contact { grid-template-columns: 1fr; }
  .section-intro { gap: 35px; margin-bottom: 65px; }
  .section-intro h2, .studio h2 { font-size: 3.5rem; }
  .influencer-intro-copy h2 { font-size: 2.45rem; white-space: normal; }
  .project-grid { grid-template-columns: 1fr; gap: 65px; }
  .project-info { align-items: start; flex-direction: column; gap: 15px; }
  .project-info>p { text-align: left; }
  .play { opacity: 1; transform: none; }
  .studio { gap: 65px; padding-top: 80px; padding-bottom: 90px; }
  .studio-sticky { gap: 30px; }
  .manifesto { font-size: 2.3rem; }
  .body-copy { margin-bottom: 60px; }
  .disciplines>div { grid-template-columns: 32px 1fr; }
  .disciplines p { grid-column: 2; }
  .trimedary { padding-top: 80px; padding-bottom: 90px; }
  .trimedary-grid { grid-template-columns: 1fr; gap: 35px; }
  .trimedary-copy p { font-size: 1.35rem; }
  .collaborators { padding-top: 80px; padding-bottom: 90px; }
  .awards { padding-top: 80px; padding-bottom: 90px; }
  .contact { padding-top: 80px; min-height: 85vh; }
  .contact h2 { font-size: 3.75rem; }
  .email { font-size: 1.05rem; }
  .contact-meta { grid-column: 1; flex-direction: column; align-items: start; gap: 30px; }
  .socials { flex-wrap: wrap; }
  footer { grid-template-columns: 1fr auto; }
  footer p:nth-of-type(1) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track { animation: none; }
  * { transition-duration: .001ms !important; }
}