/* =========================================================== AO3 STUDIOS — minimal high-end VFX site Palette: black ground, red + white type =========================================================== */ :root{ --black:#000000; /* page background */ --ink:#0a0a0a; --white:#ffffff; /* primary text */ --red:#e10600; --red-bright:#ff1a0d; --muted:rgba(255,255,255,.55); --line:rgba(255,255,255,.12); --surface:#0c0c0c; --nav-scrim:rgba(0,0,0,.78); --menu-bg:rgba(0,0,0,.96); --panel-a:rgba(0,0,0,.55); --panel-b:rgba(0,0,0,.18); --ctl-bg:rgba(0,0,0,.4); --ctl-bg-hover:rgba(0,0,0,.72); --maxw:1320px; --ease:cubic-bezier(.22,1,.36,1); } body.light{ --black:#ffffff; --ink:#f3f3f3; --white:#0d0d0d; --muted:rgba(0,0,0,.55); --line:rgba(0,0,0,.12); --surface:#f1f1f1; --nav-scrim:rgba(255,255,255,.86); --menu-bg:rgba(255,255,255,.97); --panel-a:rgba(255,255,255,.80); --panel-b:rgba(255,255,255,.42); --ctl-bg:rgba(255,255,255,.55); --ctl-bg-hover:rgba(255,255,255,.88); } body{transition:background .4s var(--ease),color .4s var(--ease)} /* ============================================================ PHASE CONTROL — Phase 1: showreel only Everything is still in the page, just hidden. To reveal a section, delete its line below. To launch the full site, remove the "phase-1" class from (or delete this block). ============================================================ */ .phase-1 #ai, .phase-1 #clients, .phase-1 #team, .phase-1 #careers{display:none !important} /* trim the hero down to a reel teaser (Contact + Branding stay live) */ .phase-1 .menu-toggle, .phase-1 .scroll-cue{display:none !important} /* Phase 1: no placeholders — only real, populated cards */ .phase-1 #work .feature:not([data-video]){display:none !important} .phase-1 #branding .brand-card:not([data-video]):not([href]){display:none !important} /* keep Work + Studio + Branding + Contact links in the nav during Phase 1 */ .phase-1 .nav-links a:not(.nav-cta):not([href="#branding"]):not([href="#work"]):not([href="#story"]){display:none !important} /* keep only the "Start a project" button, which jumps to Contact */ .phase-1 .hero-meta .btn:not(.ghost){display:none !important} /* Phase 1 status line replaces the generic lede */ .phase-1 .hero-lockup .lede{display:none} .coming-soon{display:none} .phase-1 .coming-soon{ display:flex;align-items:center;gap:10px;margin-top:14px;max-width:34ch; font-family:"Archivo",sans-serif;font-weight:700;font-style:italic; letter-spacing:.04em;font-size:.92rem;line-height:1.4;color:rgba(255,255,255,.92); } .phase-1 .coming-soon::before{ content:"";flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--red-bright); box-shadow:0 0 0 0 rgba(255,26,13,.6);animation:pulse 1.8s var(--ease) infinite; } @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(255,26,13,.55)} 70%{box-shadow:0 0 0 11px rgba(255,26,13,0)} 100%{box-shadow:0 0 0 0 rgba(255,26,13,0)} } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--black); color:var(--white); font-family:"Inter",system-ui,-apple-system,sans-serif; font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{color:inherit;text-decoration:none} img,video{display:block;max-width:100%} .display{ font-family:"Archivo",system-ui,sans-serif; font-weight:900; font-style:italic; letter-spacing:-.02em; line-height:.92; text-transform:uppercase; } .eyebrow{ font-family:"Archivo",sans-serif; font-weight:800; letter-spacing:.32em; text-transform:uppercase; font-size:.72rem; color:var(--red-bright); } /* ---------- layout helpers ---------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} section{position:relative} .section-pad{padding:88px 0} /* ---------- nav ---------- */ .nav{ position:fixed;top:0;left:0;right:0;z-index:50; display:flex;align-items:center;justify-content:space-between; padding:22px 28px; transition:background .4s var(--ease),padding .4s var(--ease); } .nav.scrolled{background:var(--nav-scrim);backdrop-filter:blur(10px);padding:14px 28px} .brand{display:flex;align-items:center;gap:12px} .brand .logo{width:108px;height:auto;color:var(--white);transition:color .4s var(--ease)} .brand:hover .logo{color:var(--red-bright)} .nav-right{display:flex;align-items:center;gap:22px} .theme-toggle{ background:none;border:1px solid var(--line);color:var(--white); width:38px;height:38px;border-radius:50%;cursor:pointer; display:flex;align-items:center;justify-content:center; transition:border-color .25s var(--ease),color .25s var(--ease)} .theme-toggle:hover{border-color:var(--red-bright);color:var(--red-bright)} .nav-links{display:flex;gap:30px;align-items:center} .nav-links a{ font-family:"Archivo",sans-serif;font-weight:700; font-size:.78rem;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);transition:color .25s var(--ease); } .nav-links a:hover{color:var(--white)} .nav-cta{ border:1px solid var(--red);color:var(--white)!important; padding:9px 16px;border-radius:2px;transition:background .25s var(--ease),border-color .25s; } .nav-cta:hover{background:var(--red)} /* When nav is transparent over the dark hero video, force white chrome in BOTH themes */ .nav:not(.scrolled) .brand .logo{color:#fff} .nav:not(.scrolled) .brand:hover .logo{color:var(--red-bright)} .nav:not(.scrolled) .nav-links a{color:rgba(255,255,255,.82)} .nav:not(.scrolled) .nav-links a:hover{color:#fff} .nav:not(.scrolled) .nav-cta{color:#fff;border-color:var(--red)} .nav:not(.scrolled) .nav-cta:hover{background:var(--red)} .nav:not(.scrolled) .theme-toggle{color:#fff;border-color:rgba(255,255,255,.3)} .nav:not(.scrolled) .theme-toggle:hover{color:var(--red-bright);border-color:var(--red-bright)} .nav:not(.scrolled) .menu-toggle{color:#fff} /* mobile menu open: keep the toggle visible over the dark overlay */ .nav.menu-open .menu-toggle{color:#fff} .menu-toggle{display:none;background:none;border:0;color:var(--white);cursor:pointer} .menu-toggle svg rect{fill:currentColor} /* ---------- hero ---------- */ .hero{height:100svh;min-height:600px;position:relative;overflow:hidden} /* carousel */ .hero-track{position:absolute;inset:0;display:flex;height:100%; transition:transform .7s var(--ease);will-change:transform;z-index:1} .hero-slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden} .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero-slide--ph{background: repeating-linear-gradient(45deg,#0a0a0a,#0a0a0a 16px,#0e0e0e 16px,#0e0e0e 32px)} .hero-ph{position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:14px;color:rgba(255,255,255,.5);text-align:center;padding:24px} .hero-ph svg *{fill:var(--red)} .hero-ph .t{font-family:"Archivo",sans-serif;font-weight:900;font-style:italic; text-transform:uppercase;font-size:1.4rem;color:rgba(255,255,255,.85)} .hero-ph .s{font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:.18em; text-transform:uppercase;font-size:.7rem;color:rgba(255,255,255,.45)} /* arrows */ .hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4; width:50px;height:50px;border-radius:50%;border:1px solid var(--line); background:var(--ctl-bg);color:var(--white);cursor:pointer; display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px); transition:border-color .25s var(--ease),background .25s var(--ease),opacity .25s} .hero-arrow:hover{border-color:var(--white);background:var(--ctl-bg-hover)} .hero-arrow.prev{left:24px} .hero-arrow.next{right:24px} /* dots */ .hero-dots{position:absolute;z-index:4;left:50%;bottom:84px;transform:translateX(-50%); display:flex;gap:10px} .hero-dots button{width:9px;height:9px;border-radius:50%;border:0;cursor:pointer; background:rgba(255,255,255,.4);transition:background .25s var(--ease),transform .25s} .hero-dots button.active{background:var(--red-bright);transform:scale(1.25)} .hero[data-single="true"] .hero-arrow, .hero[data-single="true"] .hero-dots{display:none} .hero .scrim{ position:absolute;inset:0; background: linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 32%,rgba(0,0,0,.35) 70%,rgba(0,0,0,.92) 100%); z-index:2; } .hero-content{ position:absolute;z-index:3;left:0;bottom:0; padding:0 28px 56px; } .hero-inner{ max-width:var(--maxw);margin:0 auto; display:flex;justify-content:flex-start; } .hero-lockup{ max-width:430px; background:linear-gradient(135deg,var(--panel-a),var(--panel-b)); backdrop-filter:blur(3px); border-left:3px solid var(--red); padding:20px 24px 22px; border-radius:2px; } .hero h1{ font-size:clamp(2rem,4.4vw,3.2rem); max-width:14ch; line-height:.95; } .hero h1 .red{color:var(--red-bright)} .hero p.lede{ margin-top:10px;max-width:36ch;color:rgba(255,255,255,.82); font-size:clamp(.74rem,.85vw,.85rem);line-height:1.45; } .hero-meta{ display:flex;gap:12px;align-items:center;margin-top:16px;flex-wrap:wrap; } .hero-meta .btn{padding:10px 18px;font-size:.78rem} .hero .eyebrow{font-size:.58rem;letter-spacing:.26em} .btn{ display:inline-flex;align-items:center;gap:10px; font-family:"Archivo",sans-serif;font-weight:800;font-style:italic; text-transform:uppercase;letter-spacing:.05em;font-size:.9rem; background:var(--red);color:#fff;padding:14px 26px;border-radius:2px; transition:transform .25s var(--ease),background .25s; } .btn:hover{background:var(--red-bright);transform:translateY(-2px)} .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--white)} .btn.ghost:hover{border-color:var(--white);background:var(--surface)} /* sound + scroll controls */ .sound-toggle{ position:absolute;z-index:4;right:28px;bottom:64px; width:48px;height:48px;border-radius:50%; border:1px solid var(--line);background:var(--ctl-bg); color:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center; backdrop-filter:blur(6px);transition:border-color .25s var(--ease),background .25s; } .sound-toggle:hover{border-color:var(--white);background:var(--ctl-bg-hover)} .scroll-cue{ position:absolute;z-index:3;left:50%;bottom:22px;transform:translateX(-50%); font-family:"Archivo",sans-serif;font-weight:700;font-size:.62rem; letter-spacing:.3em;text-transform:uppercase;color:var(--muted); display:flex;flex-direction:column;align-items:center;gap:8px; } .scroll-cue::after{content:"";width:1px;height:34px;background:linear-gradient(var(--red-bright),transparent);animation:cue 1.8s var(--ease) infinite} @keyframes cue{0%{opacity:0;transform:scaleY(.3)}50%{opacity:1}100%{opacity:0;transform:scaleY(1)}} /* ---------- three acts ---------- */ .acts{} .acts .head{max-width:var(--maxw);margin:0 auto;padding:0 28px} .acts h2{font-size:clamp(1.8rem,4vw,3.4rem);max-width:18ch} .acts-years{font-size:clamp(3rem,9vw,7.5rem);line-height:.9;letter-spacing:-.02em} .acts-years .red{color:var(--red-bright)} .acts-sub{font-size:clamp(1.3rem,2.6vw,2.1rem)!important;color:var(--muted);max-width:24ch} .acts .head p{color:var(--muted);margin-top:18px;max-width:52ch} .acts-grid{ max-width:var(--maxw);margin:64px auto 0;padding:0 28px; display:grid;grid-template-columns:repeat(3,1fr);gap:0; } .act{background:var(--black);padding:44px 34px 40px;transition:background .4s var(--ease)} .act:hover{background:var(--surface)} .act .icon{height:64px;margin-bottom:26px;display:flex;align-items:flex-end} .act .icon svg{height:100%;width:auto} .act .icon svg *{fill:var(--white);transition:fill .4s var(--ease)} .act:hover .icon svg *{fill:var(--red-bright)} .act h3{font-family:"Archivo",sans-serif;font-weight:900;font-style:italic;text-transform:uppercase; font-size:1.5rem;letter-spacing:.02em} .act .tag{color:var(--red-bright);font-family:"Archivo",sans-serif;font-weight:700; font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;margin:6px 0 16px} .act p{color:var(--muted);font-size:.98rem} /* ---------- work / reels ---------- */ .work{} .work .head{max-width:var(--maxw);margin:0 auto 56px;padding:0 28px; display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap} .work h2{font-size:clamp(1.8rem,4vw,3.4rem)} .work-list{ max-width:var(--maxw);margin:0 auto;padding:0 28px; display:flex;flex-direction:column;gap:64px; } /* vertical = editorial magazine spread: text | video | text */ .feature.v{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:48px; } .feature.v .feature-media.v{width:min(330px,68vw);aspect-ratio:9/16} .feature.v .feature-cap{display:none} .v-side{display:flex;flex-direction:column;gap:14px} .v-side.left{text-align:right;align-items:flex-end} .v-side.right{text-align:left;align-items:flex-start} .v-side .ft-no{position:static;font-size:1.4rem;opacity:.9;text-shadow:none;color:var(--white)} .v-side .ft-kicker{margin-bottom:0} .v-desc{color:var(--muted);font-size:.95rem;max-width:30ch;line-height:1.5} .feature-media{ position:relative;overflow:hidden;border-radius:4px;cursor:pointer; background:#0c0c0c; } .feature-media.h{aspect-ratio:16/9} .feature-media.v{aspect-ratio:9/16} .feature-media img{width:100%;height:100%;object-fit:cover; transition:transform .8s var(--ease),filter .5s var(--ease)} .feature-media:hover img{transform:scale(1.04);filter:brightness(.65)} .feature.sq{max-width:600px;margin:0 auto} .feature-media.sq{aspect-ratio:1/1} .feature-media video{width:100%;height:100%;object-fit:cover;transition:filter .5s var(--ease)} .feature-media.sq:hover video{filter:brightness(.72)} .ft-no{position:absolute;top:18px;left:20px;z-index:3; font-family:"Archivo",sans-serif;font-weight:900;font-style:italic;font-size:1.1rem; color:#fff;opacity:.85;letter-spacing:.05em;text-shadow:0 2px 12px rgba(0,0,0,.6)} .feature-media .play{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.92);z-index:3; width:80px;height:80px;border-radius:50%;border:1.5px solid rgba(255,255,255,.8); display:flex;align-items:center;justify-content:center;opacity:.85; transition:all .4s var(--ease);background:rgba(0,0,0,.28);backdrop-filter:blur(4px); } .feature-media:hover .play{opacity:1;transform:translate(-50%,-50%) scale(1);border-color:var(--red-bright)} .feature-media .play svg{width:26px;height:26px;fill:#fff;margin-left:4px} /* placeholder media */ .feature-media.is-ph{cursor:default; background:repeating-linear-gradient(45deg,#0a0a0a,#0a0a0a 14px,#0e0e0e 14px,#0e0e0e 28px)} .feature-media.is-ph .ph{position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px} .feature-media.is-ph .ph svg *{fill:var(--red)} .feature-media.is-ph .ph .label{font-family:"Archivo",sans-serif;font-weight:800;font-style:italic; text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;color:rgba(255,255,255,.6)} /* caption */ .feature-cap{display:flex;justify-content:space-between;align-items:flex-end;gap:20px; margin-top:18px} .ft-kicker{display:block;font-family:"Archivo",sans-serif;font-weight:700;font-size:.66rem; letter-spacing:.24em;text-transform:uppercase;color:var(--red-bright);margin-bottom:8px} .ft-name{font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1} .ft-watch{font-family:"Archivo",sans-serif;font-weight:800;font-style:italic; text-transform:uppercase;letter-spacing:.05em;font-size:.85rem;color:var(--white);white-space:nowrap} .ft-watch.muted{color:var(--muted)} /* craft statement under the reel */ .feature-craft{margin-top:22px;max-width:66ch;display:flex;flex-direction:column;gap:14px} .feature-craft p{color:var(--white);opacity:.88;font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:1.6} /* Sukkar — hero-lockup format (panel + square clip) */ .sk-lock-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} .sk-lockup{background:linear-gradient(135deg,var(--panel-a),var(--panel-b));backdrop-filter:blur(3px); border-left:3px solid var(--red);padding:34px 38px;border-radius:2px} .sk-lockup .eyebrow{font-size:.68rem} .sk-lock-title{font-size:clamp(2.6rem,5.5vw,4.6rem);line-height:.9;margin-top:14px} .sk-line{display:flex;align-items:flex-start;gap:13px;margin-top:20px;max-width:34ch; font-family:"Archivo",sans-serif;font-weight:700;font-style:italic; font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.4;color:var(--white)} .sk-line::before{content:"";flex:0 0 auto;width:9px;height:9px;border-radius:50%; background:var(--red-bright);margin-top:.45em} .sk-lockup .hero-meta{margin-top:26px} .sk-lock-grid .feature-media.sq{width:100%;max-width:520px;margin:0 auto;aspect-ratio:1/1} @media (max-width:820px){ .sk-lock-grid{grid-template-columns:1fr;gap:26px} .sk-lock-grid .feature-media.sq{order:-1} } /* Sukkar — fashion-magazine editorial (legacy, unused) */ .feature.skm{padding:8px 0} .skm-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center} .skm-left{display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2} .skm-kick{font-family:"Archivo",sans-serif;font-weight:800;text-transform:uppercase; letter-spacing:.22em;font-size:.72rem;color:var(--red-bright)} .skm-kick i{color:var(--muted);font-style:italic} .skm-title{font-size:clamp(3.4rem,9vw,7.5rem);line-height:.82;margin:16px 0 0;letter-spacing:-.02em} .skm-lead{margin-top:24px;font-family:"Archivo",sans-serif;font-weight:900;font-style:italic; text-transform:uppercase;line-height:.92;font-size:clamp(1.5rem,2.8vw,2.6rem);color:var(--white)} .skm-lead .sm{display:inline-block;font-size:.4em;font-weight:700;font-style:normal; letter-spacing:.16em;color:var(--muted);vertical-align:middle;margin-right:.35em} .skm-lead em{color:var(--red-bright)} .skm-note{color:var(--muted);margin-top:18px;max-width:34ch;font-size:.95rem;line-height:1.55} .skm-watch{margin-top:24px} .skm-right{position:relative} .skm-num{position:absolute;top:-54px;right:4px;z-index:1;font-family:"Archivo",sans-serif; font-weight:900;font-style:italic;font-size:clamp(5rem,12vw,11rem);line-height:1; color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.18);pointer-events:none} .feature.skm .feature-media.sq{width:100%;max-width:520px;margin-left:auto;aspect-ratio:1/1;position:relative;z-index:2} .skm-disc{margin:16px 0 0 auto;max-width:520px;color:var(--muted);font-size:.82rem;line-height:1.7} .skm-disc b{color:var(--red-bright);font-family:"Archivo",sans-serif;font-weight:800; text-transform:uppercase;font-size:.7rem;letter-spacing:.14em} @media (max-width:820px){ .skm-grid{grid-template-columns:1fr;gap:26px} .skm-num{position:static;font-size:4rem;margin-bottom:-10px} .feature.skm .feature-media.sq{margin:0 auto;max-width:440px} .skm-disc{margin:16px auto 0;max-width:440px} } /* Sukkar magazine (text | square | text) inside Work */ .feature.sq-mag .sk-wrap{grid-template-columns:1fr auto 1fr;align-items:center;gap:44px} .sk-wrap .feature-media.sq{width:min(440px,68vw);aspect-ratio:1/1;margin:0} .sk-no{position:static!important;font-size:1.4rem;text-shadow:none;color:var(--white);opacity:.9} .feature.sq-mag .feature-cap.sk-cap{justify-content:center;text-align:center;gap:18px;margin-top:26px} /* ---------- team ---------- */ .team{} .team .head{max-width:var(--maxw);margin:0 auto 56px;padding:0 28px} .team h2{font-size:clamp(1.8rem,4vw,3.4rem)} .team .head p{color:var(--muted);margin-top:16px;max-width:52ch} .team-grid{ max-width:var(--maxw);margin:0 auto;padding:0 28px; display:grid;grid-template-columns:repeat(4,1fr);gap:18px; } .member{position:relative} .member .photo{aspect-ratio:3/4;border-radius:3px;overflow:hidden; background:repeating-linear-gradient(45deg,#0a0a0a,#0a0a0a 12px,#0d0d0d 12px,#0d0d0d 24px); display:flex;align-items:center;justify-content:center} .member .photo svg{width:46px;opacity:.5} .member .photo svg *{fill:var(--red)} .member h4{font-family:"Archivo",sans-serif;font-weight:900;font-style:italic;text-transform:uppercase; font-size:1.05rem;margin-top:16px} .member .role{color:var(--muted);font-size:.85rem;margin-top:2px} /* ---------- Sukkar (square before/after) ---------- */ .sukkar .head{max-width:var(--maxw);margin:0 auto 52px;padding:0 28px} .sukkar h2{font-size:clamp(1.8rem,4vw,3.4rem)} .sukkar .head p{color:var(--muted);margin-top:16px;max-width:56ch} .sk-wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px; display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:44px} .sk-side{display:flex;flex-direction:column;gap:8px} .sk-side.left{text-align:right;align-items:flex-end} .sk-side.right{text-align:left;align-items:flex-start} .sk-k{font-family:"Archivo",sans-serif;font-weight:700;font-size:.64rem;letter-spacing:.24em; text-transform:uppercase;color:var(--red-bright);margin-top:10px} .sk-meta{color:var(--muted);font-size:.95rem;line-height:1.55;max-width:26ch} .sk-watch{font-family:"Archivo",sans-serif;font-weight:800;font-style:italic;text-transform:uppercase; letter-spacing:.04em;font-size:.85rem;color:var(--white);margin-top:14px} .sk-media{position:relative;overflow:hidden;border-radius:6px;cursor:pointer;background:#0c0c0c; width:min(540px,72vw);aspect-ratio:1/1} .sk-media video{width:100%;height:100%;object-fit:cover;transition:filter .5s var(--ease)} .sk-media:hover video{filter:brightness(.72)} .sk-media .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);z-index:3; width:74px;height:74px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);display:flex; align-items:center;justify-content:center;opacity:0;transition:all .4s var(--ease); background:rgba(0,0,0,.3);backdrop-filter:blur(4px)} .sk-media:hover .play{opacity:1;transform:translate(-50%,-50%) scale(1);border-color:var(--red-bright)} .sk-media .play svg{width:24px;height:24px;fill:#fff;margin-left:3px} .sk-badge{position:absolute;top:16px;left:16px;z-index:3;background:var(--red);color:#fff; font-family:"Archivo",sans-serif;font-weight:800;font-style:italic;text-transform:uppercase; letter-spacing:.06em;font-size:.62rem;padding:6px 12px;border-radius:3px} @media (max-width:820px){ .sk-wrap{grid-template-columns:1fr;justify-items:center;gap:22px;text-align:center} .sk-side.left,.sk-side.right{text-align:center;align-items:center} .sk-side.left{order:2}.sk-media{order:1}.sk-side.right{order:3} .sk-meta{max-width:38ch} } /* ---------- AI / labs (magazine mosaic) ---------- */ .ai{position:relative;overflow:hidden} .ai .head{max-width:var(--maxw);margin:0 auto 52px;padding:0 28px;position:relative;z-index:1} .ai h2{font-size:clamp(1.8rem,4vw,3.4rem)} .ai .head p{color:var(--muted);margin-top:16px;max-width:54ch} .ai .grad{background:linear-gradient(90deg,var(--red-bright),#ff8a3d); -webkit-background-clip:text;background-clip:text;color:transparent} .ai-glow{position:absolute;top:-140px;right:-90px;width:540px;height:540px;border-radius:50%; background:radial-gradient(circle,rgba(225,6,0,.22),transparent 65%);filter:blur(24px); pointer-events:none;z-index:0} .ai-grid{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:1; display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:128px;gap:16px} .ai-card{position:relative;overflow:hidden;border-radius:5px; background:#0c0c0c;cursor:pointer;display:block; transition:box-shadow .35s var(--ease),transform .35s var(--ease)} .ai-card:hover{box-shadow:0 18px 50px rgba(225,6,0,.18);transform:translateY(-3px)} .ai-card.a{grid-column:span 7;grid-row:span 3} .ai-card.b{grid-column:span 5;grid-row:span 3} .ai-card.c{grid-column:span 4;grid-row:span 2} .ai-card.d{grid-column:span 4;grid-row:span 2} .ai-card.e{grid-column:span 4;grid-row:span 2} .ai-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .8s var(--ease),filter .5s var(--ease)} .ai-card:hover img{transform:scale(1.05);filter:brightness(.7)} .ai-card .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:repeating-linear-gradient(45deg,#0a0a0a,#0a0a0a 14px,#0e0e0e 14px,#0e0e0e 28px)} .ai-card .ph svg{opacity:.5} .ai-card .ph svg *{fill:var(--red)} .ai-no{position:absolute;top:16px;left:18px;z-index:3;font-family:"Archivo",sans-serif; font-weight:900;font-style:italic;font-size:1rem;color:#fff;opacity:.85;text-shadow:0 2px 10px rgba(0,0,0,.6)} .ai-card .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);z-index:3; width:64px;height:64px;border-radius:50%;border:1.5px solid rgba(255,255,255,.8); display:flex;align-items:center;justify-content:center;opacity:0;transition:all .4s var(--ease); background:rgba(0,0,0,.28);backdrop-filter:blur(4px)} .ai-card:hover .play{opacity:1;transform:translate(-50%,-50%) scale(1);border-color:var(--red-bright)} .ai-card .play svg{width:22px;height:22px;fill:#fff;margin-left:3px} .ai-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px; background:linear-gradient(transparent,rgba(0,0,0,.82))} .ai-tag{font-family:"Archivo",sans-serif;font-weight:700;font-size:.62rem;letter-spacing:.22em; text-transform:uppercase;color:var(--red-bright)} .ai-title{font-size:clamp(1.1rem,1.8vw,1.6rem);margin-top:5px;color:#fff} /* ---------- branding ---------- */ .branding .head{max-width:var(--maxw);margin:0 auto 52px;padding:0 28px} .branding h2{font-size:clamp(1.8rem,4vw,3.4rem)} .branding .head p{color:var(--muted);margin-top:16px;max-width:54ch} .brand-grid{max-width:var(--maxw);margin:0 auto;padding:0 28px; display:flex;flex-direction:column;gap:90px} .brand-card{display:block;cursor:pointer} .brand-media{position:relative;overflow:hidden;border-radius:4px;background:#0c0c0c;aspect-ratio:16/9} .brand-media .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:repeating-linear-gradient(45deg,#0a0a0a,#0a0a0a 14px,#0e0e0e 14px,#0e0e0e 28px)} .brand-media .ph svg{opacity:.5} .brand-media .ph svg *{fill:var(--red)} .brand-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .8s var(--ease),filter .5s var(--ease)} .brand-card:hover .brand-media img{transform:scale(1.05);filter:brightness(.7)} .brand-media .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);z-index:3; width:62px;height:62px;border-radius:50%;border:1.5px solid rgba(255,255,255,.8); display:flex;align-items:center;justify-content:center;opacity:0;transition:all .4s var(--ease); background:rgba(0,0,0,.28);backdrop-filter:blur(4px)} .brand-card:hover .brand-media .play{opacity:1;transform:translate(-50%,-50%) scale(1);border-color:var(--red-bright)} .brand-media .play{width:80px;height:80px} .brand-media .play svg{width:26px;height:26px;fill:#fff;margin-left:4px} .brand-cap{margin-top:18px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px} .brand-tag{display:block;font-family:"Archivo",sans-serif;font-weight:700;font-size:.66rem; letter-spacing:.24em;text-transform:uppercase;color:var(--red-bright);margin-bottom:8px} .brand-name{font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1} .brand-watch{font-family:"Archivo",sans-serif;font-weight:800;font-style:italic; text-transform:uppercase;letter-spacing:.05em;font-size:.85rem;color:var(--white);white-space:nowrap} /* ---------- clients ---------- */ .clients{} .clients .head{max-width:var(--maxw);margin:0 auto 48px;padding:0 28px} .clients h2{font-size:clamp(1.8rem,4vw,3.4rem)} .client-grid{ max-width:var(--maxw);margin:0 auto;padding:0 28px; display:grid;grid-template-columns:repeat(6,1fr);gap:0; } .client{ background:var(--black);aspect-ratio:3/2;display:flex;align-items:center;justify-content:center; padding:22px;transition:background .35s var(--ease); } .client:hover{background:var(--surface)} .client span{ font-family:"Archivo",sans-serif;font-weight:800;letter-spacing:.04em; text-transform:uppercase;font-size:.82rem;color:var(--muted);transition:color .35s var(--ease);text-align:center; } .client:hover span{color:var(--white)} .client img{max-height:42px;max-width:100%;width:auto;object-fit:contain; opacity:.7;filter:grayscale(1);transition:opacity .35s var(--ease),filter .35s var(--ease)} body.light .client img{filter:grayscale(1) invert(0)} .client:hover img{opacity:1;filter:none} /* ---------- jobs / careers ---------- */ .jobs{} .jobs .head{max-width:var(--maxw);margin:0 auto 48px;padding:0 28px} .jobs h2{font-size:clamp(1.8rem,4vw,3.4rem)} .jobs .head p{color:var(--muted);margin-top:16px;max-width:56ch} .job-list{max-width:var(--maxw);margin:0 auto;padding:0 28px} .job{ display:grid;grid-template-columns:1.6fr 1fr 1fr .8fr auto;align-items:center;gap:20px; padding:22px 8px; transition:padding .3s var(--ease),background .3s var(--ease); } .job:hover{padding-left:20px;padding-right:20px;background:var(--surface)} .job-title{font-family:"Archivo",sans-serif;font-weight:900;font-style:italic; text-transform:uppercase;font-size:1.2rem} .job-dept,.job-loc,.job-type{font-family:"Archivo",sans-serif;font-weight:700; font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .job-type{color:var(--red-bright)} .job-arrow{font-size:1.3rem;color:var(--muted);transition:transform .3s var(--ease),color .3s var(--ease);justify-self:end} .job:hover .job-arrow{transform:translateX(6px);color:var(--red-bright)} .jobs-foot{max-width:var(--maxw);margin:34px auto 0;padding:0 28px;color:var(--muted); font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem} .jobs-foot a{color:var(--white);border-bottom:1px solid var(--red);padding-bottom:2px} .jobs-foot a:hover{color:var(--red-bright)} /* ---------- contact ---------- */ .contact{text-align:center} .contact .eyebrow{display:block;margin-bottom:20px} .contact h2{font-size:clamp(2.2rem,7vw,6rem);max-width:16ch;margin:0 auto} .contact .email{ display:inline-block;margin-top:34px; font-family:"Archivo",sans-serif;font-weight:900;font-style:italic; font-size:clamp(1.2rem,3vw,2rem);color:var(--white); border-bottom:2px solid var(--red);padding-bottom:6px;transition:color .25s var(--ease) } .contact .email:hover{color:var(--red-bright)} /* ---------- footer ---------- */ .footer{padding:64px 0 40px} .footer-top{display:grid;grid-template-columns:1.8fr 1fr 1.2fr;gap:36px;align-items:start} .footer-brand .logo{width:96px;color:var(--white)} .footer-tag{color:var(--muted);font-size:.9rem;margin-top:16px;max-width:26ch;line-height:1.5} .footer-h{display:block;font-family:"Archivo",sans-serif;font-weight:800;font-size:.66rem; letter-spacing:.24em;text-transform:uppercase;color:var(--red-bright);margin-bottom:16px} .footer-list{list-style:none} .footer-list li{color:var(--white);font-family:"Archivo",sans-serif;font-weight:700; font-size:.92rem;letter-spacing:.02em;margin-bottom:9px} .footer .social{display:flex;flex-direction:column;gap:11px} .footer .social a{color:var(--muted);font-family:"Archivo",sans-serif;font-weight:700; font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;transition:color .25s var(--ease)} .footer .social a:hover{color:var(--white)} .footer-mail{color:var(--white);font-family:"Archivo",sans-serif;font-weight:700;font-size:.9rem; border-bottom:1px solid var(--red);padding-bottom:3px;transition:color .25s var(--ease)} .footer-mail:hover{color:var(--red-bright)} .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap; margin-top:40px} .footer .small{color:var(--muted);font-size:.78rem} /* ---------- lightbox ---------- */ .lightbox{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.94); display:none;align-items:center;justify-content:center;padding:24px} .lightbox.open{display:flex} .lightbox .box{position:relative;width:min(1100px,100%)} .lightbox video{width:100%;border-radius:4px} .lightbox .close{position:absolute;top:-46px;right:0;background:none;border:0;color:#fff; cursor:pointer;font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:.16em; text-transform:uppercase;font-size:.78rem;display:flex;align-items:center;gap:8px} /* ---------- reveal animation ---------- */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .reveal.in{opacity:1;transform:none} /* ---------- responsive ---------- */ @media (max-width:900px){ .section-pad{padding:80px 0} .acts-grid{grid-template-columns:1fr} .team-grid{grid-template-columns:repeat(2,1fr)} .work-list{gap:64px} .feature.v{gap:28px} .client-grid{grid-template-columns:repeat(3,1fr)} .brand-grid{gap:64px} .footer-top{grid-template-columns:1fr 1fr;gap:34px 24px} .job{grid-template-columns:1.4fr 1fr auto;gap:14px} .job-loc{display:none} } @media (max-width:640px){ .nav-links{ position:fixed;inset:0;background:rgba(8,8,8,.97);flex-direction:column; justify-content:center;gap:30px;transform:translateX(100%);transition:transform .4s var(--ease)} .nav-links.open{transform:none} .nav-links a{font-size:1.1rem;color:rgba(255,255,255,.82)} .nav-links a:hover{color:#fff} .nav-links .nav-cta{color:#fff} /* Phase 1: show the Contact link inline in the bar (no slide-out needed) */ .phase-1 .nav-links{position:static;inset:auto;background:none;transform:none; flex-direction:row;gap:0} .phase-1 .nav-links .nav-cta{font-size:.78rem} .menu-toggle{display:block;z-index:60} .hero-arrow{width:40px;height:40px} .hero-arrow.prev{left:12px} .hero-arrow.next{right:12px} .hero-dots{bottom:70px} .feature.v{grid-template-columns:1fr;gap:18px;justify-items:center;text-align:center} .feature.v .feature-media.v{width:min(300px,80vw)} .v-side.left,.v-side.right{text-align:center;align-items:center} .v-side.left{order:1} .feature.v .feature-media{order:2} .v-side.right{order:3} .team-grid{grid-template-columns:repeat(2,1fr)} .sound-toggle{bottom:auto;top:74px;right:18px} .hero-content{padding-bottom:48px} .footer-top{grid-template-columns:1fr 1fr;gap:30px 20px} .footer-brand{grid-column:1 / -1} .client-grid{grid-template-columns:repeat(2,1fr)} .brand-grid{gap:56px} .job{grid-template-columns:1fr auto;gap:6px 14px} .job-dept{display:none} .job-title{font-size:1.05rem} .job-type{grid-row:2;grid-column:1} .job-arrow{grid-row:1 / span 2} }