:root { color-scheme: dark; --pink: #ed008c; --ink: #000; --white: #fff; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
html.lightbox-open, body.lightbox-open { overflow:hidden; }
body { margin: 0; background: url('../images/dither2.png') repeat, linear-gradient(rgba(0,0,0,.7), #000) fixed; background-size: 4px 4px, 100% 100%; color: var(--white); font: 14px/1.45 Montserrat, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
img, video { display: block; max-width: 100%; }
.intro-media { position:relative; }
.intro-video { width: 100%; height: auto; }
.intro-play { display:none; position:absolute; inset:50% auto auto 50%; z-index:2; width:72px; height:72px; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.8); border-radius:50%; background:rgba(0,0,0,.65); color:#fff; font:600 12px Montserrat,Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.intro-media.needs-play .intro-play { display:block; }
.intro-play:hover { background:var(--pink); }
.site-header { position: sticky; top: 0; z-index: 20; height: 48px; background: #000 url('../images/dither2.png') repeat; background-size: 4px 4px; }
.brand { position: absolute; inset: 0 auto auto 0; z-index: 2; width: 115px; transition: opacity .15s linear; }
.brand.is-scroll-reveal { opacity: 0; }
.brand img { width: 115px; height: auto; }
.nav { height: 48px; display: flex; justify-content: center; padding-right: 100px; }
.nav > a, .works-button { display: block; border: 0; padding: 14px 16px; background: transparent; color: #fff; font: inherit; font-size: 16px; cursor: pointer; }
.nav > a:hover, .works:hover .works-button, .works:focus-within .works-button { background: var(--pink); text-decoration: none; }
.works { position: relative; }
.works-menu { position: absolute; top: 48px; left: 0; min-width: 160px; visibility: hidden; opacity: 0; background: #f9f9f9; box-shadow: 0 8px 16px rgba(0,0,0,.25); transition: opacity .12s; }
.works:hover .works-menu, .works:focus-within .works-menu, .works.is-open .works-menu { visibility: visible; opacity: 1; }
.works-menu a { display: block; padding: 12px 16px; color: #000; }
.works-menu a:hover { background: #ddd; text-decoration: none; }
.hero-copy { min-height: 270px; display: flex; justify-content: center; align-items: center; padding: 100px; font-size: clamp(25px,3vw,58px); font-weight: 700; text-align: right; }
.hero-copy p { display: flex; align-items: baseline; flex-wrap: nowrap; margin: 0; white-space: nowrap; transform: translateX(1.8em); }
.changing-word { display: inline-grid; width: 9.7em; min-width: 9.7em; margin-left: .25em; text-align: left; }
.changing-word span { grid-area: 1 / 1; opacity: 0; animation: word-cycle 9s infinite; }
.changing-word span:nth-child(1) { animation-delay: 0s; }
.changing-word span:nth-child(2) { animation-delay: 3s; }
.changing-word span:nth-child(3) { animation-delay: 6s; }
@keyframes word-cycle { 0%,33% { opacity:0 } 8%,25% { opacity:1 } }
.gallery { display: flex; align-items: flex-start; width: 100%; }
.gallery-column { flex: 1 1 0; min-width: 0; }
.project { position: relative; width: 100%; overflow: hidden; background: #111; }
.project.reveal-pending { opacity: 0; transform: translateY(32px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
.project.reveal-pending.is-visible { opacity: 1; transform: translateY(0); }
.project img { width: 100%; height: auto; transition: transform .35s ease; }
.project:hover img { transform: scale(1.025); }
.project-title { position: absolute; inset: auto 0 0; padding: 12px; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .5s ease; font-size: 12px; pointer-events: none; }
.project:hover .project-title, .project:focus-within .project-title { opacity: 1; }
.video-mark { position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-left: 42px solid transparent; border-bottom: 42px solid var(--pink); pointer-events:none; }
.video-mark::after { content:'▶'; position:absolute; top:19px; right:4px; color:#fff; font-size:11px; }
.load-sentinel { height: 1px; }
.content { width: min(1200px, calc(100% - 100px)); margin: 50px auto; padding: 30px 90px; }
.content h1, .content h2 { margin: 0 0 15px; font-size: 22px; }
.about-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; }
.body-copy p { margin: 0 0 1.3em; }
.body-copy .compact { line-height: 1.72; }
.legal { width: min(1250px, calc(100% - 100px)); margin: 30px auto; }
.footer { display: grid; grid-template-columns: 250px 200px 200px; justify-content: space-evenly; gap: 30px; padding: 45px 30px 20px; }
.footer h2 { margin: 0 0 15px; font-size: 22px; }
.footer p { margin: 0; font-size: 14px; }
.socials { display:flex; justify-content:center; gap:10px; padding-top:18px; }
.socials img { width: auto; }
.copyright { padding: 10px; color: gray; font-size: 12px; text-align:center; }
.copyright a { color:gray; font-size:12px; }
.site-footer { border-top: 1px solid rgba(255,255,255,.16); background: #050505; }
.footer-invitation { display: grid; grid-template-columns: 1fr 2fr; gap: 50px; width: min(1240px,calc(100% - 96px)); margin: auto; padding: 105px 0 115px; }
.footer-kicker { margin: 12px 0 0; color: var(--pink); font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.footer-invitation > a { justify-self: start; font-size: clamp(42px,6.2vw,88px); font-weight: 700; line-height: .98; letter-spacing: -.055em; }
.footer-invitation > a span { color: var(--pink); }
.footer-invitation > a:hover { color: var(--pink); text-decoration: none; }
.footer-directory { display: grid; grid-template-columns: 2fr 1fr 1.4fr 1fr; gap: clamp(35px,6vw,90px); padding: 65px max(48px,calc((100% - 1240px)/2)); border-block: 1px solid rgba(255,255,255,.16); }
.footer-directory h2 { margin: 0 0 22px; color: #777; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.footer-directory p, .footer-directory a { font-size: 13px; line-height: 1.9; }
.footer-directory nav a, .footer-directory > div:last-child a { display: block; width: fit-content; }
.footer-directory a:hover { color: var(--pink); text-decoration: none; }
.footer-identity img { width: 92px; margin-bottom: 28px; }
.footer-identity p { max-width: 310px; margin: 0 0 18px; color: #aaa; }
.footer-legal { display: flex; gap: 28px; align-items: center; width: min(1240px,calc(100% - 96px)); margin: auto; padding: 22px 0; color: #777; font-size: 11px; }
.footer-legal p { margin: 0 auto 0 0; }
.footer-legal a { color: #777; font-size: 11px; }
.footer-legal a:hover { color: #fff; text-decoration: none; }
[data-reveal].reveal-ready { opacity: 0; transform: translateY(38px); transition: opacity .8s ease var(--reveal-delay,0ms), transform .8s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms); }
[data-reveal].reveal-ready.is-revealed { opacity: 1; transform: translateY(0); }
.about-page { --page-width: 1240px; overflow: hidden; }
.about-page h1, .about-page h2, .about-page h3, .about-page p { margin-top: 0; }
.about-hero, .about-section, .about-cta { width: min(var(--page-width), calc(100% - 96px)); margin-inline: auto; }
.eyebrow { margin-bottom: 24px; color: var(--pink); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.about-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .7fr); gap: 80px; align-items: end; padding: 130px 0 110px; }
.about-hero h1 { max-width: 850px; margin-bottom: 0; font-size: clamp(46px, 6.5vw, 92px); line-height: .98; letter-spacing: -.055em; }
.about-intro { max-width: 460px; padding-bottom: 5px; font-size: 17px; line-height: 1.7; }
.about-intro p { margin-bottom: 20px; }
.text-link { display: inline-block; margin-top: 12px; padding-bottom: 5px; border-bottom: 2px solid var(--pink); font-weight: 700; }
.text-link:hover { color: var(--pink); text-decoration: none; }
.credentials { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid rgba(255,255,255,.18); }
.credentials div { min-height: 150px; display: flex; flex-direction: column; justify-content: center; padding: 30px clamp(24px,4vw,65px); border-right: 1px solid rgba(255,255,255,.18); }
.credentials div:last-child { border-right: 0; }
.credentials strong { margin-bottom: 8px; font-size: clamp(20px,2vw,30px); line-height: 1.05; }
.credentials span { color: #aaa; font-size: 12px; line-height: 1.45; }
.about-section { padding: 130px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.section-heading { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; margin-bottom: 75px; }
.section-heading h2 { max-width: 750px; margin: 0; font-size: clamp(32px,4.2vw,58px); line-height: 1.08; letter-spacing: -.035em; }
.approach-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(25px,5vw,75px); margin-left: calc(33.333% + 20px); }
.approach-grid article { border-top: 3px solid var(--pink); padding-top: 24px; }
.approach-grid article > span { color: #777; font-size: 11px; letter-spacing: .14em; }
.approach-grid h3 { margin: 28px 0 14px; font-size: 19px; }
.approach-grid p { margin-bottom: 0; color: #c6c6c6; line-height: 1.75; }
.founder-section > .eyebrow { margin-bottom: 50px; }
.founder-copy { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(50px,10vw,150px); }
.founder-copy h2 { margin: 0; font-size: clamp(31px,4vw,55px); line-height: 1.13; letter-spacing: -.035em; }
.founder-copy > div { color: #c6c6c6; font-size: 16px; line-height: 1.8; }
.clients-section .section-heading, .awards-section .section-heading { margin-bottom: 60px; }
.client-list { display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid rgba(255,255,255,.18); }
.client-list span { padding: 18px 12px 18px 0; border-bottom: 1px solid rgba(255,255,255,.12); color: #d5d5d5; font-size: 13px; }
.awards-list { margin-left: calc(33.333% + 20px); }
.awards-list > article { display: grid; grid-template-columns: 90px 1fr; gap: 25px; padding: 28px 0; border-top: 1px solid rgba(255,255,255,.18); }
.awards-list time { color: var(--pink); font-weight: 700; }
.awards-list h3 { margin: 0 0 6px; font-size: 17px; }
.awards-list p { margin-bottom: 0; color: #aaa; }
.awards-list details { border-block: 1px solid rgba(255,255,255,.18); }
.awards-list summary { display: flex; justify-content: space-between; padding: 24px 0; cursor: pointer; font-weight: 700; list-style: none; }
.awards-list summary::-webkit-details-marker { display: none; }
.awards-list details[open] summary span { transform: rotate(45deg); }
.earlier-awards { padding: 0 0 24px 115px; color: #aaa; }
.earlier-awards p { margin-bottom: 14px; }
.about-cta { padding: 140px 0 150px; text-align: center; }
.about-cta h2 { margin-bottom: 22px; font-size: clamp(42px,6vw,82px); letter-spacing: -.05em; }
.about-cta > p:not(.eyebrow) { max-width: 620px; margin: 0 auto 38px; color: #bbb; font-size: 17px; line-height: 1.7; }
.cta-button { display: inline-block; padding: 17px 22px; background: var(--pink); font-weight: 700; }
.cta-button:hover { background: #fff; color: #000; text-decoration: none; }
.contact-page { --contact-width:1240px; }
.contact-hero, .contact-email, .contact-details, .contact-note { width:min(var(--contact-width),calc(100% - 96px)); margin-inline:auto; }
.contact-hero { display:grid; grid-template-columns:1.55fr .7fr; gap:80px; align-items:end; padding:135px 0 110px; }
.contact-hero > .eyebrow { grid-column:1 / -1; margin-bottom:-30px; }
.contact-hero h1 { margin:0; font-size:clamp(54px,7.2vw,102px); line-height:.93; letter-spacing:-.06em; }
.contact-intro { max-width:450px; padding-bottom:5px; color:#c4c4c4; font-size:17px; line-height:1.75; }
.contact-intro p:last-child { margin-bottom:0; }
.contact-email { position:relative; display:grid; grid-template-columns:1fr auto; align-items:end; gap:20px; padding:55px 0; border-block:1px solid rgba(255,255,255,.2); }
.contact-email > p { grid-column:1 / -1; margin:0 0 5px; color:#777; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.contact-email [data-email] a { font-size:clamp(27px,5vw,68px); font-weight:700; line-height:1; letter-spacing:-.045em; }
.contact-email > span:last-child { color:var(--pink); font-size:clamp(30px,5vw,64px); line-height:.8; }
.contact-email:hover [data-email] a { color:var(--pink); text-decoration:none; }
.contact-details { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(30px,6vw,85px); padding:100px 0 115px; }
.contact-details article { border-top:3px solid var(--pink); padding-top:22px; }
.contact-number { margin:0 0 45px; color:#777; font-size:11px; letter-spacing:.14em; }
.contact-details h2 { margin:0 0 18px; font-size:20px; }
.contact-details article > p:last-child { margin:0; color:#aaa; line-height:1.8; }
.contact-details a { color:#fff; line-height:2.1; }
.contact-details a:hover { color:var(--pink); text-decoration:none; }
.contact-note { display:grid; grid-template-columns:1fr 2fr; gap:60px; padding:75px 0 95px; border-top:1px solid rgba(255,255,255,.18); }
.contact-note > p:last-child { max-width:800px; margin:0; font-size:clamp(25px,3.4vw,44px); font-weight:600; line-height:1.25; letter-spacing:-.03em; }
.cookie-popup { position:fixed; z-index:40; right:20px; bottom:20px; max-width:360px; padding:20px; background:#fff; color:#111; box-shadow:0 10px 40px rgba(0,0,0,.45); }
.cookie-popup p { margin:0 0 12px; }
.cookie-popup button { border:0; padding:8px 12px; margin-right:6px; cursor:pointer; }
.cookie-popup .accept { background:var(--pink); color:#fff; }
.lightbox { width:min(1000px,92vw); max-width:none; overflow:hidden; border:0; padding:0; background:#000; color:#fff; box-shadow:0 15px 70px #000; transition:width .48s cubic-bezier(.2,.7,.2,1); }
.lightbox.is-video { width:min(1600px,96vw); }
.lightbox.is-image { width:min(320px,92vw); }
.lightbox::backdrop { background:rgba(0,0,0,.88); }
.lightbox-close { position:fixed; z-index:2; top:12px; right:12px; width:40px; height:40px; border:0; border-radius:50%; background:rgba(0,0,0,.78); color:#fff; font-size:27px; cursor:pointer; }
.lightbox.is-image .lightbox-media { height:min(180px,70vh); max-height:86vh; overflow:auto; transition:height .48s cubic-bezier(.2,.7,.2,1); }
.lightbox.is-image:not(.is-zoomed) .lightbox-media img { width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; }
.lightbox-media img { display:block; margin:auto; cursor:zoom-in; }
.lightbox.is-zoomed { width:100vw!important; height:100vh; max-width:none; max-height:none; margin:0; background:#000; }
.lightbox.is-zoomed .lightbox-media { position:relative; width:100vw; height:100vh!important; max-height:none; overflow:hidden; }
.lightbox.is-zoomed .lightbox-media img { position:absolute; top:0; left:0; width:auto; height:auto; max-width:none; max-height:none; margin:0; cursor:zoom-out; }
.lightbox.is-zoomed .lightbox-media img { cursor:grab; touch-action:none; user-select:none; }
.lightbox.is-zoomed.is-dragging .lightbox-media img { cursor:grabbing; }
.lightbox-media iframe { display:block; width:100%; aspect-ratio:16/9; border:0; }
.lightbox-caption { padding:12px 16px; font-size:12px; }
@media (max-width: 1000px) {
  .gallery { display:block; }
  .content, .legal { width:calc(100% - 40px); padding:30px 20px; margin:25px auto; }
  .about-layout { grid-template-columns:1fr; }
  .about-hero { grid-template-columns: 1fr; gap: 45px; }
  .credentials { grid-template-columns: repeat(2,1fr); }
  .credentials div:nth-child(2) { border-right: 0; }
  .credentials div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.18); }
  .section-heading, .founder-copy { grid-template-columns: 1fr; gap: 35px; }
  .approach-grid, .awards-list { margin-left: 0; }
  .client-list { grid-template-columns: repeat(3,1fr); }
  .footer-invitation { grid-template-columns: 1fr; gap: 35px; }
  .footer-directory { grid-template-columns: 2fr 1fr 1fr; }
  .footer-directory > div:last-child { grid-column: 2; }
  .contact-hero { grid-template-columns:1fr; gap:45px; }
  .contact-hero > .eyebrow { grid-column:auto; margin-bottom:0; }
  .contact-note { grid-template-columns:1fr; gap:25px; }
}
@media (max-width: 700px) {
  .site-header { height:auto; min-height:48px; }
  .brand, .brand img { width:48px; }
  .nav { justify-content:center; padding-right:0; }
  .nav > a, .works-button { padding-inline:10px; font-size:13px; }
  .hero-copy { min-height:190px; padding:60px 8px; font-size:clamp(16px,4.4vw,19px); text-align:center; }
  .hero-copy p { width:100%; flex-direction:column; align-items:center; justify-content:center; line-height:1.25; transform:none; }
  .changing-word { width:10em; min-width:10em; margin:8px 0 0; text-align:center; }
  .footer { grid-template-columns:1fr; }
  .about-hero, .about-section, .about-cta { width:calc(100% - 40px); }
  .about-hero { padding:85px 0 75px; }
  .about-hero h1 { font-size:clamp(42px,14vw,64px); }
  .credentials { grid-template-columns:1fr 1fr; }
  .credentials div { min-height:120px; padding:22px 20px; }
  .about-section { padding:85px 0; }
  .approach-grid { grid-template-columns:1fr; gap:40px; }
  .client-list { grid-template-columns:repeat(2,1fr); }
  .awards-list > article { grid-template-columns:65px 1fr; }
  .earlier-awards { padding-left:0; }
  .about-cta { padding:95px 0 105px; }
  .footer-invitation, .footer-legal { width:calc(100% - 40px); }
  .footer-invitation { padding:75px 0 80px; }
  .footer-directory { grid-template-columns:1fr 1fr; gap:45px 25px; padding:55px 20px; }
  .footer-identity { grid-column:1 / -1; }
  .footer-directory > div:last-child { grid-column:auto; }
  .footer-legal { align-items:flex-start; flex-wrap:wrap; gap:12px 22px; }
  .footer-legal p { flex-basis:100%; }
  .contact-hero, .contact-email, .contact-details, .contact-note { width:calc(100% - 40px); }
  .contact-hero { padding:90px 0 75px; }
  .contact-hero h1 { font-size:clamp(50px,15vw,72px); }
  .contact-email { grid-template-columns:1fr auto; padding:38px 0; }
  .contact-email [data-email] a { font-size:clamp(20px,6vw,32px); }
  .contact-details { grid-template-columns:1fr; gap:55px; padding:75px 0 85px; }
  .contact-number { margin-bottom:28px; }
  .contact-note { padding:65px 0 75px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } .changing-word span { animation-duration:9s!important; animation-iteration-count:infinite!important; } [data-reveal].reveal-ready { opacity:1; transform:none; } }