/* ============================================================ LOOPED PRODUCTION — Design System Amman / Jordan — Creative Production Studio ============================================================ */ @font-face{ font-family:'Baloo 2'; src:url('/fonts/baloo2-var-latin.woff2') format('woff2-variations'); font-weight:400 800; font-style:normal; font-display:swap; } @font-face{ font-family:'Outfit'; src:url('/fonts/outfit-var-latin.woff2') format('woff2-variations'); font-weight:100 900; font-style:normal; font-display:swap; } @font-face{ font-family:'JetBrains Mono'; src:url('/fonts/jetbrainsmono-var-latin.woff2') format('woff2-variations'); font-weight:300 700; font-style:normal; font-display:swap; } /* ---------- TOKENS ---------- */ :root{ /* surface */ --black:#070707; --ink:#0b0b0b; --charcoal:#141414; --graphite:#1c1c1c; --steel:#2a2a2a; --smoke:#8a8a8a; --ash:#9a9a9a; --bone:#e8e5df; --paper:#f2f0eb; /* accent — Looped purple (matches intake.loopedproduction.com) */ --accent:#ef4f44; --accent-lift:#ff8078; /* brighter tint for small text on black */ --accent-ink:#0f0403; /* text sitting on the accent */ --accent-dim:rgba(239,79,68,.18); --accent-glow:rgba(239,79,68,.35); --rec:#ff2d16; --bg:var(--black); --fg:var(--paper); --line:rgba(244,242,238,.13); --line-soft:rgba(244,242,238,.07); /* type */ /* Two roles, matching the Concept 03 system used on the homepage. display/sans — Outfit: geometric grotesk, set at 900 with tight tracking mono — JetBrains Mono: technical metadata only */ --ff-display:'Outfit','Helvetica Neue',Arial,sans-serif; --ff-sans:'Outfit','Helvetica Neue',Helvetica,Arial,sans-serif; --ff-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; /* matches concept.css: font-weight 900, letter-spacing -.075em, line-height .7 */ --display-track:-.062em; --display-lh:.78; --fs-mega:clamp(2.6rem,15.5vw,17rem); --fs-huge:clamp(2.25rem,9.5vw,10rem); --fs-xl:clamp(1.85rem,6vw,5.6rem); --fs-lg:clamp(1.7rem,3.6vw,3.2rem); --fs-md:clamp(1.15rem,1.75vw,1.6rem); --fs-body:clamp(1rem,1.05vw,1.1rem); --fs-sm:.8125rem; --fs-meta:.6875rem; /* space */ --gut:clamp(1.15rem,3.4vw,3.5rem); --sec:clamp(3.5rem,8.5vh,7.5rem); --maxw:1680px; /* motion */ --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,.05,.36,1); --dur:.72s; } /* accent variants, switched via */ [data-accent="brand"]{--accent:#ef4f44;--accent-lift:#ff8078;--accent-ink:#0f0403;--accent-dim:rgba(239,79,68,.18);--accent-glow:rgba(239,79,68,.35)} [data-accent="signal"]{--accent:#d8ff2b;--accent-lift:#d8ff2b;--accent-ink:#0a0a0a;--accent-dim:rgba(216,255,43,.16);--accent-glow:rgba(216,255,43,.3)} [data-accent="rec"] {--accent:#ff3b1f;--accent-lift:#ff6a52;--accent-ink:#fff; --accent-dim:rgba(255,59,31,.18);--accent-glow:rgba(255,59,31,.3)} [data-accent="ion"] {--accent:#4df3ff;--accent-lift:#4df3ff;--accent-ink:#04141a;--accent-dim:rgba(77,243,255,.16);--accent-glow:rgba(77,243,255,.3)} [data-accent="flare"] {--accent:#ff8a00;--accent-lift:#ffa640;--accent-ink:#160a00;--accent-dim:rgba(255,138,0,.18);--accent-glow:rgba(255,138,0,.3)} [data-accent="mono"] {--accent:#f4f2ee;--accent-lift:#f4f2ee;--accent-ink:#050505;--accent-dim:rgba(244,242,238,.14);--accent-glow:rgba(244,242,238,.25)} /* ---------- RESET ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:auto} body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0} ul,ol{list-style:none} img,video,svg{display:block;max-width:100%} picture{display:contents} button,input,select,textarea{font:inherit;color:inherit;background:none;border:0} button{cursor:pointer} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} body{ background:var(--bg);color:var(--fg); font-family:var(--ff-sans);font-size:var(--fs-body); font-weight:400;line-height:1.5; font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:hidden; } body.is-locked{overflow:hidden} /* film grain — one shared overlay, GPU cheap */ body::after{ content:'';position:fixed;inset:-100%;z-index:900;pointer-events:none; opacity:.035;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 6s steps(6) infinite; } @keyframes grain{ 0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,-2%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)} } /* ---------- TYPOGRAPHY ---------- */ .display{ font-family:var(--ff-display); font-weight:900;line-height:var(--display-lh);letter-spacing:var(--display-track); text-transform:uppercase; } .display--mega{font-size:var(--fs-mega)} .display--huge{font-size:var(--fs-huge)} .display--xl{font-size:var(--fs-xl)} .display--lg{font-size:var(--fs-lg);line-height:.86;letter-spacing:-.045em} .lede{font-size:var(--fs-md);line-height:1.4;letter-spacing:-.012em;max-width:44ch;color:var(--bone)} .body-lg{font-size:clamp(1.02rem,1.2vw,1.22rem);line-height:1.62;color:var(--ash);max-width:62ch} .body-lg strong{color:var(--paper);font-weight:600} .meta{ font-family:var(--ff-mono);font-size:var(--fs-meta);font-weight:400; letter-spacing:.16em;text-transform:uppercase;color:var(--smoke); } .meta--accent{color:var(--accent-lift)} .meta--bright{color:var(--bone)} .rule-label{display:flex;align-items:center;gap:.75rem} .rule-label::before{content:'';width:34px;height:1px;background:var(--accent);flex:none} /* accent underline swipe on inline links */ .link{position:relative;display:inline-block;padding-bottom:2px} .link::after{ content:'';position:absolute;left:0;bottom:0;height:1px;width:100%; background:currentColor;transform:scaleX(0);transform-origin:100% 50%; transition:transform .5s var(--ease); } .link:hover::after{transform:scaleX(1);transform-origin:0 50%} /* ---------- LAYOUT ---------- */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)} .wrap--flush{max-width:none;padding-inline:var(--gut)} .section{padding-block:var(--sec);position:relative} .section--tight{padding-block:calc(var(--sec)*.6)} .hairline{height:1px;background:var(--line);border:0;margin:0} .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut)} .sec-head{ display:flex;justify-content:space-between;align-items:baseline; gap:1.6rem;flex-wrap:wrap;margin-bottom:clamp(1.9rem,3.6vw,3.4rem); } .sec-head__index{display:flex;gap:1.5rem;align-items:baseline} /* ---------- BUTTONS ---------- */ .btn{ --pad:1.05rem 2rem; position:relative;display:inline-flex;align-items:center;gap:.85rem; padding:var(--pad);border:1px solid var(--line);border-radius:100px; font-size:.815rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; overflow:hidden;isolation:isolate; transition:color .45s var(--ease),border-color .45s var(--ease),transform .2s var(--ease); } .btn::before{ content:'';position:absolute;inset:0;z-index:-1;background:var(--accent); transform:translateY(101%);transition:transform .55s var(--ease); } .btn:hover{color:var(--accent-ink);border-color:var(--accent)} .btn:hover::before{transform:translateY(0)} .btn:active{transform:scale(.97)} .btn__arrow{transition:transform .45s var(--ease)} .btn:hover .btn__arrow{transform:translateX(5px)} .btn--solid{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .btn--solid::before{background:var(--paper)} .btn--solid:hover{color:var(--black);border-color:var(--paper)} .btn--lg{--pad:1.35rem 2.6rem;font-size:.9rem} .btn--ghost{border-color:var(--line)} /* big text CTA */ .cta-huge{display:inline-flex;align-items:flex-start;gap:.6em;position:relative} .cta-huge__mark{font-size:.28em;transform:translateY(.35em);transition:transform .5s var(--ease)} .cta-huge:hover .cta-huge__mark{transform:translate(.3em,.2em)} /* ---------- CUSTOM CURSOR ---------- */ .cursor{ position:fixed;top:0;left:0;z-index:9999;pointer-events:none; width:9px;height:9px;border-radius:50%;background:var(--accent); transform:translate3d(-50%,-50%,0);mix-blend-mode:difference; transition:width .35s var(--ease),height .35s var(--ease),background .35s var(--ease),opacity .3s; } .cursor__label{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.4); font-family:var(--ff-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase; color:var(--accent-ink);white-space:nowrap;opacity:0;transition:opacity .3s,transform .4s var(--ease); } body[data-cursor="play"] .cursor, body[data-cursor="view"] .cursor, body[data-cursor="drag"] .cursor{ width:84px;height:84px;mix-blend-mode:normal;background:var(--accent); } body[data-cursor="play"] .cursor__label, body[data-cursor="view"] .cursor__label, body[data-cursor="drag"] .cursor__label{opacity:1;transform:translate(-50%,-50%) scale(1)} body[data-cursor="link"] .cursor{width:34px;height:34px;background:var(--paper)} body[data-cursor="hidden"] .cursor{opacity:0} @media (hover:none),(pointer:coarse){.cursor{display:none}} /* ============================================================ NAVIGATION ============================================================ */ .nav{ position:fixed;top:0;left:0;right:0;z-index:800; display:flex;align-items:center;justify-content:space-between; padding:clamp(.85rem,1.7vw,1.35rem) var(--gut); color:var(--paper); transition:transform .5s var(--ease),background .4s var(--ease), backdrop-filter .4s var(--ease),border-color .4s var(--ease), padding .4s var(--ease); border-bottom:1px solid transparent; } /* a readable bed at all times: a soft top scrim over imagery ... */ .nav::before{ content:'';position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg,rgba(5,5,5,.78) 0%,rgba(5,5,5,.42) 55%,transparent 100%); opacity:1;transition:opacity .4s var(--ease); } /* ... upgrading to a solid blurred bar once the user has scrolled */ .nav.is-solid{ background:rgba(5,5,5,.82); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); border-bottom-color:var(--line); padding-block:clamp(.6rem,1.1vw,.9rem); } .nav.is-solid::before{opacity:0} .nav.is-hidden{transform:translateY(-102%)} .nav.is-menu-open{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent} .nav.is-menu-open::before{opacity:0} .brand{display:flex;align-items:center;gap:.7rem;position:relative;z-index:2;flex:none} .brand__logo{width:auto;display:block;transition:height .4s var(--ease),opacity .3s} .brand__logo--wide{height:clamp(15px,1.5vw,20px)} .brand__logo--mark{height:clamp(20px,2.2vw,26px);display:none} .nav.is-solid .brand__logo--wide{height:clamp(14px,1.3vw,17px)} .nav__links{display:flex;gap:clamp(1.1rem,2.2vw,2.3rem);align-items:center} .nav__link{ position:relative;font-size:.735rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;overflow:hidden;display:block; /* height and line-height must match exactly or the roll-up clips the glyphs */ height:1.9em;line-height:1.9em;padding:0; color:var(--bone);transition:color .3s; } .nav__link span{display:block;height:1.9em;line-height:1.9em;transition:transform .45s var(--ease)} .nav__link span:last-child{position:absolute;top:100%;left:0;color:var(--accent-lift)} .nav__link:hover span{transform:translateY(-100%)} .nav__link[aria-current="page"]{color:var(--paper)} .nav__link[aria-current="page"]::after{ content:'';position:absolute;left:0;right:0;bottom:.25em;height:1px;background:var(--accent)} .nav__right{display:flex;align-items:center;gap:.75rem;position:relative;z-index:2;flex:none} .nav__cta{ display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap; font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase; padding:.68rem 1.2rem;border-radius:100px; background:var(--accent);color:var(--accent-ink); transition:gap .35s var(--ease),background .35s var(--ease),transform .2s var(--ease)} .nav__cta:hover{gap:.85rem;background:var(--accent-lift)} .nav__cta:active{transform:scale(.97)} .burger{ display:none;width:42px;height:42px;position:relative;z-index:2; align-items:center;justify-content:center;border-radius:50%; border:1px solid var(--line);background:rgba(5,5,5,.4); } .burger i{display:block;width:18px;height:1.5px;background:currentColor;position:relative;transition:background .2s} .burger i::before,.burger i::after{ content:'';position:absolute;left:0;width:18px;height:1.5px;background:currentColor; transition:transform .45s var(--ease),top .3s var(--ease)} .burger i::before{top:-5px} .burger i::after{top:5px} .nav.is-menu-open .burger i{background:transparent} .nav.is-menu-open .burger i::before{top:0;transform:rotate(45deg)} .nav.is-menu-open .burger i::after{top:0;transform:rotate(-45deg)} /* fullscreen menu */ .menu{ position:fixed;inset:0;z-index:790;background:var(--black); display:flex;flex-direction:column;justify-content:center; padding:6rem var(--gut) 3rem; clip-path:inset(0 0 100% 0);visibility:hidden; transition:clip-path .85s var(--ease),visibility 0s .85s; } .menu.is-open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .85s var(--ease),visibility 0s} .menu__list{display:flex;flex-direction:column;gap:.15em} .menu__item{overflow:hidden} .menu__link{ display:block;font-size:clamp(2rem,10vw,7rem);font-weight:800;line-height:.98; letter-spacing:-.035em;text-transform:uppercase; transform:translateY(105%);transition:transform .8s var(--ease),color .3s; } .menu.is-open .menu__link{transform:translateY(0)} .menu__link:hover{color:var(--accent-lift)} .menu__foot{ margin-top:auto;padding-top:2.5rem;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;justify-content:space-between;align-items:flex-end; opacity:0;transition:opacity .5s .5s} .menu.is-open .menu__foot{opacity:1} .menu__contact{display:flex;flex-direction:column;gap:.4rem;font-size:.95rem} .menu__socials{display:flex;gap:1.4rem} @media (max-width:1080px){ .nav__links{display:none} .burger{display:flex} .brand__logo--wide{display:none} .brand__logo--mark{display:block} .nav__cta{padding:.62rem 1rem;font-size:.68rem} } @media (max-width:520px){ .nav__cta span:first-child{ position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap} .nav__cta{padding:.7rem .95rem;gap:0} .nav__cta:hover{gap:0} } /* ============================================================ HERO ============================================================ */ .hero{ position:relative;height:100svh;min-height:600px;width:100%; overflow:hidden;background:var(--black); } .hero__stage{position:absolute;inset:0;overflow:hidden} .hero__media{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;opacity:0; transition:opacity 1.1s var(--ease); will-change:transform,opacity; } .hero__media.is-active{opacity:1} .hero__video{z-index:2} /* frame montage layers */ .hero__frame{z-index:1} .hero__frame.is-active{opacity:1;animation:heroDrift 7.5s linear both} @keyframes heroDrift{ from{transform:scale(1.14) translate3d(0,0,0)} to{transform:scale(1.02) translate3d(0,-1.2%,0)} } .hero__scrim{ position:absolute;inset:0;z-index:3;pointer-events:none; background: linear-gradient(180deg,rgba(5,5,5,.82) 0%,rgba(5,5,5,.3) 24%,rgba(5,5,5,.34) 52%,rgba(5,5,5,.94) 100%), radial-gradient(125% 90% at 45% 55%,transparent 22%,rgba(5,5,5,.72) 100%), linear-gradient(90deg,rgba(5,5,5,.55) 0%,transparent 55%); } /* scan / timeline texture */ .hero__scan{ position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.16; background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(0,0,0,.5) 3px 4px); } .hero__inner{ position:relative;z-index:6;height:100%; display:flex;flex-direction:column;justify-content:space-between; padding:calc(clamp(1rem,2vw,1.6rem) + 4.5rem) var(--gut) clamp(1.6rem,3vw,2.6rem); } .hero__top{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem} .hero__rec{display:flex;align-items:center;gap:.55rem} .hero__rec i{width:7px;height:7px;border-radius:50%;background:var(--rec);animation:blink 1.6s steps(1) infinite} @keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.15}} .hero__center{margin-top:auto;margin-bottom:auto;display:flex;flex-direction:column;gap:1.4rem} .hero__wordmark{display:flex;flex-direction:column;line-height:var(--display-lh)} .hero__wordmark span{display:block;overflow:hidden} .hero__wordmark b{ display:block;font-weight:800;text-transform:uppercase; font-family:var(--ff-display); font-size:clamp(2.5rem,14.5vw,12.5rem);letter-spacing:var(--display-track); transform:translateY(102%);animation:heroRise 1.15s var(--ease) forwards; } .hero__wordmark span:nth-child(2) b{animation-delay:.1s;color:var(--paper)} @keyframes heroRise{to{transform:translateY(0)}} .hero__wordmark em{font-style:normal;color:var(--accent)} .hero__statement{ overflow:hidden;max-width:min(560px,64vw); } .hero__statement p{ font-size:clamp(1.05rem,2vw,1.7rem);font-weight:600;line-height:1.18; letter-spacing:-.02em;text-transform:uppercase; transform:translateY(110%);animation:heroRise 1s var(--ease) .35s forwards; } .hero__bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap} .hero__tech{display:flex;flex-direction:column;gap:.35rem} .hero__scroll{display:flex;align-items:center;gap:.7rem} .hero__scroll i{ display:block;width:1px;height:34px;background:linear-gradient(var(--accent),transparent); animation:scrollPulse 1.9s var(--ease) infinite;transform-origin:top; } @keyframes scrollPulse{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}} /* progress / timeline bar under hero */ .hero__timeline{ position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(1.6rem,3vw,2.6rem); z-index:5;height:1px;background:var(--line);display:none; } .hero__timeline i{display:block;height:100%;background:var(--accent);width:0} @media (max-width:760px){ .hero{height:100svh} .hero__statement{max-width:none} } /* ============================================================ REVEAL PRIMITIVES ============================================================ */ [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)} [data-reveal].is-in{opacity:1;transform:none} [data-reveal-delay="1"]{transition-delay:.08s} [data-reveal-delay="2"]{transition-delay:.16s} [data-reveal-delay="3"]{transition-delay:.24s} [data-reveal-delay="4"]{transition-delay:.32s} [data-reveal-delay="5"]{transition-delay:.4s} /* cinematic curtain reveal for media (a curtain, not clip-path: clip-path collapses the box and starves IntersectionObserver) */ [data-mask]{position:relative;isolation:isolate} [data-mask]::before{ content:'';position:absolute;inset:-1px;z-index:6;background:var(--black); transform-origin:100% 100%;transform:scaleY(1); transition:transform 1.05s var(--ease);pointer-events:none; } [data-mask].is-in::before{transform:scaleY(0);transform-origin:0 0} [data-mask] img,[data-mask] video{transform:scale(1.14);transition:transform 1.6s var(--ease)} [data-mask].is-in img,[data-mask].is-in video{transform:scale(1)} /* per-line text reveal */ .tl{display:block;overflow:hidden} .tl > span{display:block;transform:translateY(105%);transition:transform 1s var(--ease)} .is-in .tl > span,.tl.is-in > span{transform:translateY(0)} .tl:nth-child(2) > span{transition-delay:.07s} .tl:nth-child(3) > span{transition-delay:.14s} .tl:nth-child(4) > span{transition-delay:.21s} /* parallax hooks */ [data-speed]{will-change:transform} /* ============================================================ WHAT WE DO — interactive service system ============================================================ */ .services{position:relative;background:var(--black)} .services__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none} .services__bgimg{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transform:scale(1.08); transition:opacity .9s var(--ease),transform 1.4s var(--ease); filter:grayscale(1) contrast(1.1) brightness(.3) blur(1px); } .services__bgimg.is-active{opacity:.2;transform:scale(1)} .services__bgveil{position:absolute;inset:0;background:linear-gradient(180deg,var(--black) 0%,rgba(5,5,5,.72) 22%,rgba(5,5,5,.72) 78%,var(--black) 100%)} .svc-list{position:relative;border-top:1px solid var(--line)} .svc{border-bottom:1px solid var(--line);position:relative} .svc__head{ display:grid;grid-template-columns:5rem 1fr auto;align-items:center; gap:clamp(1rem,3vw,3rem);width:100%;text-align:left; padding:clamp(1.05rem,1.9vw,1.6rem) 0;position:relative; } .svc__num{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.14em;color:var(--smoke);transition:color .4s} .svc__title{ font-size:clamp(1.35rem,4.6vw,4rem);font-weight:800;text-transform:uppercase; letter-spacing:-.03em;line-height:.95; transition:transform .6s var(--ease),color .4s var(--ease); } .svc__kicker{ font-family:var(--ff-mono);font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase; color:var(--smoke);opacity:0;transform:translateX(-8px); transition:opacity .5s var(--ease),transform .5s var(--ease); } .svc__toggle{ position:relative;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;flex:none; display:grid;place-items:center;transition:background .4s var(--ease),border-color .4s,transform .5s var(--ease); } .svc__toggle::before,.svc__toggle::after{ content:'';position:absolute;background:currentColor;transition:transform .5s var(--ease),opacity .3s} .svc__toggle::before{width:11px;height:1px} .svc__toggle::after{width:1px;height:11px} .svc.is-open .svc__toggle{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .svc.is-open .svc__toggle::after{opacity:0} .svc:hover .svc__title,.svc.is-open .svc__title{transform:translateX(clamp(6px,1vw,18px))} .svc:hover .svc__num,.svc.is-open .svc__num{color:var(--accent-lift)} .svc:hover .svc__kicker,.svc.is-open .svc__kicker{opacity:1;transform:none} .svc__panel{ display:grid;grid-template-rows:0fr; transition:grid-template-rows .75s var(--ease); } .svc.is-open .svc__panel{grid-template-rows:1fr} .svc__panelin{overflow:hidden} .svc__body{ display:grid;grid-template-columns:5rem 1.1fr .9fr;gap:clamp(1rem,3vw,3rem); padding:0 0 clamp(1.5rem,2.6vw,2.4rem); opacity:0;transform:translateY(14px);transition:opacity .6s .12s var(--ease),transform .6s .12s var(--ease); } .svc.is-open .svc__body{opacity:1;transform:none} .svc__detail{color:var(--ash);font-size:clamp(.95rem,1.1vw,1.08rem);line-height:1.6;max-width:56ch} .svc__detail strong{color:var(--paper);font-weight:600;display:block;margin-bottom:.7rem;font-size:1.05em} .svc__tags{display:flex;flex-wrap:wrap;gap:.5rem;align-content:flex-start} .svc__tag{ font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase; padding:.5rem .85rem;border:1px solid var(--line);border-radius:100px;color:var(--bone); transition:border-color .3s,color .3s} .svc__tag:hover{border-color:var(--accent);color:var(--accent-lift)} @media (max-width:860px){ .svc__head{grid-template-columns:2.6rem 1fr auto;gap:1rem} .svc__kicker{display:none} .svc__body{grid-template-columns:1fr;gap:1.6rem;padding-left:0} .svc__body > .svc__spacer{display:none} } /* ============================================================ SELECTED WORK — editorial grid ============================================================ */ .work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.8rem,3vw,3.4rem) var(--gut)} .pc{position:relative;display:block;grid-column:span 12} .pc--hero{grid-column:span 12} .pc--wide{grid-column:span 7} .pc--tall{grid-column:span 5} .pc--standard{grid-column:span 6} .pc--offset{margin-top:clamp(1.5rem,4.5vw,5rem)} .pc__media{ position:relative;overflow:hidden;background:var(--charcoal); aspect-ratio:16/9; } .pc--hero .pc__media{aspect-ratio:21/9} .pc--tall .pc__media{aspect-ratio:4/5} .pc__img{ width:100%;height:100%;object-fit:cover; transition:transform 1.1s var(--ease),filter .7s var(--ease),opacity .5s var(--ease); filter:grayscale(.35) contrast(1.05); } .pc:hover .pc__img{transform:scale(1.045);filter:grayscale(0) contrast(1.08)} .pc__vid{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity .6s var(--ease);z-index:2; } .pc.is-playing .pc__vid{opacity:1} .pc__media::after{ content:'';position:absolute;inset:0;z-index:3;pointer-events:none; background:linear-gradient(180deg,rgba(5,5,5,.42) 0%,transparent 22%,transparent 48%,rgba(5,5,5,.78) 100%); opacity:.85;transition:opacity .6s} .pc:hover .pc__media::after{opacity:.55} .pc__code{ position:absolute;top:1rem;left:1rem;z-index:4; font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.14em;color:rgba(244,242,238,.72); padding:.4rem .65rem;border:1px solid rgba(244,242,238,.22);border-radius:3px; backdrop-filter:blur(10px) saturate(.6);background:rgba(5,5,5,.55); } .pc__play{ position:absolute;top:1rem;right:1rem;z-index:4;display:flex;align-items:center;gap:.45rem; font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase; color:var(--accent-lift);opacity:0;transform:translateY(-4px);transition:opacity .4s,transform .4s var(--ease)} .pc.is-playing .pc__play{opacity:1;transform:none} .pc__play i{width:6px;height:6px;border-radius:50%;background:var(--rec);animation:blink 1.4s steps(1) infinite} .pc__scrubbar{ position:absolute;left:0;right:0;bottom:0;z-index:4;height:2px;background:rgba(244,242,238,.14); opacity:0;transition:opacity .35s} .pc.is-playing .pc__scrubbar{opacity:1} .pc__scrubbar i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .38s linear} .pc__info{display:grid;grid-template-columns:1fr auto;gap:1rem;padding-top:1.1rem;align-items:start} .pc__titleblock{display:flex;flex-direction:column;gap:.5rem} .pc__client{font-family:var(--ff-mono);font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-lift)} .pc__title{ font-size:clamp(1.35rem,2.8vw,2.9rem);font-weight:800;text-transform:uppercase; letter-spacing:-.028em;line-height:.98; } .pc--hero .pc__title{font-size:clamp(2rem,6vw,5.6rem)} .pc__title em{display:block;font-style:normal;color:var(--smoke);font-size:.5em;letter-spacing:-.015em;margin-top:.45em;transition:color .5s} .pc__title em:empty{display:none} .pc:hover .pc__title em{color:var(--accent-lift)} .pc__specs{display:flex;flex-direction:column;gap:.3rem;text-align:right} .pc__spec{font-family:var(--ff-mono);font-size:var(--fs-meta);letter-spacing:.13em;text-transform:uppercase;color:var(--smoke)} @media (max-width:900px){ .pc--wide,.pc--tall,.pc--standard{grid-column:span 12} .pc--offset{margin-top:0} .pc--hero .pc__media{aspect-ratio:16/10} .pc--tall .pc__media{aspect-ratio:4/5} .pc__info{grid-template-columns:1fr} .pc__specs{text-align:left;flex-direction:row;flex-wrap:wrap;gap:.35rem 1rem} } /* horizontal scroll rail */ .rail{position:relative;overflow:hidden} .rail__track{display:flex;gap:var(--gut);will-change:transform} .rail__item{flex:0 0 clamp(260px,32vw,520px)} .rail__hint{display:flex;align-items:center;gap:.6rem;margin-top:1.5rem;color:var(--smoke)} .rail figure{margin:0} @media (hover:none),(pointer:coarse){ .rail{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; padding-inline:var(--gut);scrollbar-width:none} .rail::-webkit-scrollbar{display:none} .rail__track{transform:none !important} .rail__item{scroll-snap-align:start;flex-basis:min(72vw,320px)} } /* ============================================================ THE LOOP — production timeline ============================================================ */ .loop{background:var(--ink);position:relative;overflow:hidden} .loop__ruler{ display:flex;align-items:flex-end;gap:0;height:20px;margin-bottom:1.8rem; border-bottom:1px solid var(--line); } .loop__tick{flex:1;border-left:1px solid var(--line-soft);height:8px} .loop__tick:nth-child(5n+1){height:18px;border-left-color:var(--line)} .loop__track{position:relative;padding-left:0} .loop__progress{ position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--line); } .loop__progress i{display:block;width:100%;background:var(--accent);height:0;transition:height .12s linear} .step{ display:grid;grid-template-columns:6.5rem 1fr;gap:clamp(1.2rem,3vw,3rem); padding:clamp(1.4rem,2.6vw,2.3rem) 0 clamp(1.4rem,2.6vw,2.3rem) clamp(1.6rem,3vw,3rem); border-bottom:1px solid var(--line);position:relative; } .step:last-child{border-bottom:0} .step::before{ content:'';position:absolute;left:-4px;top:calc(clamp(1.4rem,2.6vw,2.3rem) + .4em); width:10px;height:10px;border-radius:50%;background:var(--graphite); border:1px solid var(--line);transition:background .5s var(--ease),border-color .5s,transform .5s var(--ease); } .step.is-in::before{background:var(--accent);border-color:var(--accent);transform:scale(1.25)} .step__num{font-family:var(--ff-mono);font-size:.75rem;letter-spacing:.14em;color:var(--smoke)} .step.is-in .step__num{color:var(--accent-lift)} .step__meta{display:block;margin-top:.5rem;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.12em;color:var(--smoke)} .step__title{font-size:clamp(1.7rem,4.4vw,3.6rem);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:.95;margin-bottom:.85rem} .step__body{color:var(--ash);font-size:clamp(.98rem,1.15vw,1.12rem);line-height:1.6;max-width:56ch;margin-bottom:1rem} .step__deliv{display:flex;flex-wrap:wrap;gap:.45rem} .step__deliv li{ font-family:var(--ff-mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase; color:var(--ash);padding:.45rem .8rem;border:1px solid var(--line);border-radius:2px} @media (max-width:760px){ .step{grid-template-columns:1fr;gap:.9rem;padding-left:1.4rem} .step__num{display:flex;gap:1rem;align-items:baseline} .step__meta{margin-top:0} } /* ============================================================ CLIENTS — constellation ============================================================ */ .clients{background:var(--black)} .client-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(2rem,4vw,3.5rem)} .chip{ font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase; padding:.6rem 1.05rem;border:1px solid var(--line);border-radius:100px;color:var(--ash); transition:color .35s,border-color .35s,background .35s} .chip:hover{color:var(--paper);border-color:var(--accent)} .chip.is-active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600} .client-wall{ display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(130px,15vw,215px),1fr)); border-top:1px solid var(--line);border-left:1px solid var(--line); } .cw{ position:relative;aspect-ratio:16/9;display:grid;place-items:center;padding:1.2rem; border-right:1px solid var(--line);border-bottom:1px solid var(--line); transition:background .5s var(--ease);overflow:hidden; } .cw::before{ content:'';position:absolute;inset:0;background:var(--accent); transform:translateY(101%);transition:transform .55s var(--ease); } .cw:hover::before{transform:translateY(0)} .cw.is-dim{opacity:.16;filter:grayscale(1)} .cw__logo{ position:relative;z-index:2; width:auto;height:auto; max-width:74%;max-height:clamp(26px,3.4vw,46px); object-fit:contain;opacity:.72; transition:opacity .45s,filter .45s,transform .5s var(--ease); } .cw:hover .cw__logo{opacity:1;filter:invert(1);transform:scale(1.06)} .cw__name{ position:relative;z-index:2;font-weight:700;font-size:clamp(.85rem,1.3vw,1.15rem); text-transform:uppercase;letter-spacing:-.01em;text-align:center;color:var(--bone); transition:color .45s} .cw:hover .cw__name{color:var(--accent-ink)} .cw__sector{ position:absolute;z-index:2;bottom:.7rem;left:.85rem; font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase; color:var(--smoke);opacity:0;transition:opacity .4s,color .4s} .cw:hover .cw__sector{opacity:1;color:rgba(10,10,10,.6)} .cw__count{ position:absolute;z-index:2;top:.7rem;right:.85rem; font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.1em;color:var(--accent-lift); opacity:0;transition:opacity .4s,color .4s} .cw:hover .cw__count{opacity:1;color:rgba(10,10,10,.75)} /* marquee */ .marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:clamp(1.1rem,2vw,1.8rem);display:flex} .marquee__track{display:flex;gap:clamp(2rem,4vw,4.5rem);flex:none;animation:marq 42s linear infinite;padding-right:clamp(2rem,4vw,4.5rem)} .marquee:hover .marquee__track{animation-play-state:paused} @keyframes marq{from{transform:translateX(0)}to{transform:translateX(-100%)}} .marquee__item{ display:flex;align-items:center;gap:clamp(2rem,4vw,4.5rem);flex:none; font-size:clamp(1.4rem,3.4vw,3rem);font-weight:800;text-transform:uppercase;letter-spacing:-.03em; color:var(--smoke);white-space:nowrap;transition:color .35s} .marquee__item:hover{color:var(--accent-lift)} .marquee__item::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;opacity:.7} /* ============================================================ STUDIO / TEAM ============================================================ */ .studio{background:var(--ink)} .team{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(200px,21vw,320px),1fr));gap:clamp(1rem,2vw,2rem)} .tm{position:relative;overflow:hidden;background:var(--charcoal)} .tm__media{position:relative;aspect-ratio:3/4;overflow:hidden} .tm__img{ width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.8); transition:transform 1s var(--ease),filter .6s var(--ease)} .tm:hover .tm__img{transform:scale(1.06);filter:grayscale(0) contrast(1.05) brightness(.95)} .tm__media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(5,5,5,.9) 100%)} .tm__info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.1rem} .tm__role{font-family:var(--ff-mono);font-size:var(--fs-meta);letter-spacing:.15em;text-transform:uppercase;color:var(--accent-lift);display:block;margin-bottom:.4rem} .tm__name{font-size:clamp(1rem,1.3vw,1.3rem);font-weight:700;text-transform:uppercase;letter-spacing:-.015em;line-height:1.1} .tm__spec{ font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--smoke); max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s,margin .5s} .tm:hover .tm__spec{max-height:3em;opacity:1;margin-top:.45rem} /* role tile — used until a real portrait exists */ .tm--role .tm__media{ background: radial-gradient(120% 90% at 30% 12%,var(--accent-dim),transparent 58%), linear-gradient(160deg,var(--graphite) 0%,var(--ink) 62%); display:grid;place-items:center; } .tm--role .tm__media::after{background:linear-gradient(180deg,transparent 45%,rgba(5,5,5,.85) 100%)} .tm__glyph{ font-size:clamp(3.2rem,6vw,5.4rem);font-weight:800;letter-spacing:-.05em; color:transparent;-webkit-text-stroke:1px rgba(244,242,238,.2); transition:-webkit-text-stroke-color .5s var(--ease),transform .8s var(--ease); } .tm--role:hover .tm__glyph{-webkit-text-stroke-color:var(--accent);transform:scale(1.07)} .tm--role .tm__name{font-size:clamp(.86rem,1.05vw,1rem);font-weight:500;text-transform:none;color:var(--ash);letter-spacing:0} .tm--role .tm__name--person{font-size:clamp(1rem,1.3vw,1.3rem);font-weight:700;text-transform:uppercase;color:var(--paper);letter-spacing:-.015em} .values{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .value{background:var(--ink);padding:clamp(1.6rem,3vw,2.6rem);transition:background .5s var(--ease)} .value:hover{background:var(--charcoal)} .value__num{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.14em;color:var(--accent-lift);display:block;margin-bottom:1.4rem} .value__title{font-size:clamp(1.1rem,1.8vw,1.6rem);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:.7rem;line-height:1.05} .value__body{color:var(--ash);font-size:.95rem;line-height:1.55} .caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line)} .cap{background:var(--ink);padding:1.3rem 1.5rem;display:flex;flex-direction:column;gap:.6rem} .cap__meta{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.16em;color:var(--smoke)} .cap__label{font-size:.98rem;font-weight:500;color:var(--bone);line-height:1.35} /* ============================================================ CASE STUDY ============================================================ */ .cs-hero{position:relative;height:92svh;min-height:560px;overflow:hidden} .cs-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:180px;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(5,5,5,.7),transparent)} .cs-hero__media{position:absolute;inset:0} .cs-hero__media img,.cs-hero__media video{width:100%;height:100%;object-fit:cover} .cs-hero__media::after{content:'';position:absolute;inset:0;background: linear-gradient(180deg,rgba(5,5,5,.92) 0%,rgba(5,5,5,.34) 28%,rgba(5,5,5,.5) 58%,rgba(5,5,5,.97) 100%), linear-gradient(90deg,rgba(5,5,5,.5) 0%,transparent 60%)} .cs-hero__inner{ position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end; padding:0 var(--gut) clamp(2.5rem,5vw,4.5rem);max-width:var(--maxw);margin-inline:auto} .cs-hero__client{font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-lift);margin-bottom:1.1rem} .cs-hero__client .u-mute{color:var(--bone)} .cs-hero__title{font-size:clamp(2.1rem,9vw,9rem);font-weight:800;text-transform:uppercase;letter-spacing:-.04em;line-height:.86} .cs-hero__title em{font-style:normal;display:block;color:var(--smoke);font-size:.42em;letter-spacing:-.02em;margin-top:.4em} .cs-facts{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--line)} .cs-fact{display:flex;flex-direction:column;gap:.4rem} .cs-fact dt{font-family:var(--ff-mono);font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;color:var(--smoke)} .cs-fact dd{font-size:.98rem;font-weight:600;text-transform:uppercase;letter-spacing:-.01em} .cs-chapter{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,5rem);padding-block:clamp(2.2rem,4.5vw,4.2rem);border-top:1px solid var(--line)} .cs-chapter__label{position:sticky;top:7rem;align-self:start;height:max-content} .cs-chapter__num{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.16em;color:var(--accent-lift);display:block;margin-bottom:.9rem} .cs-chapter__title{font-size:clamp(1.6rem,3.4vw,2.9rem);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:.98} .cs-chapter__body p{color:var(--bone);font-size:clamp(1.05rem,1.45vw,1.4rem);line-height:1.52;letter-spacing:-.012em;max-width:62ch} .cs-chapter__body p + p{margin-top:1.4rem} @media (max-width:840px){.cs-chapter{grid-template-columns:1fr;gap:1.5rem}.cs-chapter__label{position:static}} .cs-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .cs-stat{background:var(--black);padding:clamp(1.6rem,3.4vw,3rem) clamp(1.2rem,2vw,2rem)} .cs-stat__value{font-size:clamp(2.4rem,6vw,5.2rem);font-weight:800;letter-spacing:-.045em;line-height:.9;color:var(--accent-lift);display:block} .cs-stat__label{font-family:var(--ff-mono);font-size:var(--fs-meta);letter-spacing:.15em;text-transform:uppercase;color:var(--smoke);margin-top:1rem;display:block} .cs-stat[data-placeholder="true"] .cs-stat__value{color:var(--smoke)} .cs-gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut)} .cs-gallery figure{position:relative;overflow:hidden;background:var(--charcoal)} .cs-gallery figure:nth-child(3n+1){grid-column:span 12;aspect-ratio:21/9} .cs-gallery figure:nth-child(3n+2){grid-column:span 7;aspect-ratio:16/10} .cs-gallery figure:nth-child(3n+3){grid-column:span 5;aspect-ratio:4/5} .cs-gallery img{width:100%;height:100%;object-fit:cover} @media (max-width:840px){.cs-gallery figure{grid-column:span 12 !important;aspect-ratio:16/10 !important}} .credits{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.4rem 2rem} .credit dt{font-family:var(--ff-mono);font-size:var(--fs-meta);letter-spacing:.15em;text-transform:uppercase;color:var(--smoke);margin-bottom:.4rem} .credit dd{font-size:1rem;font-weight:500} .cs-next{position:relative;display:block;overflow:hidden;border-top:1px solid var(--line)} .cs-next__inner{position:relative;z-index:2;padding:clamp(3rem,8vw,7rem) var(--gut);max-width:var(--maxw);margin-inline:auto} .cs-next__bg{position:absolute;inset:0;opacity:.2;transition:opacity .7s var(--ease),transform 1.2s var(--ease);transform:scale(1.05)} .cs-next__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)} .cs-next:hover .cs-next__bg{opacity:.42;transform:scale(1)} /* ============================================================ CAREERS ============================================================ */ .jobs{border-top:1px solid var(--line)} .job{border-bottom:1px solid var(--line)} .job__head{ display:grid;grid-template-columns:1fr auto auto;gap:clamp(1rem,3vw,3rem);align-items:center; width:100%;text-align:left;padding:clamp(1.5rem,3vw,2.4rem) 0;position:relative} .job__title{font-size:clamp(1.35rem,3.4vw,2.6rem);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:1;transition:transform .5s var(--ease),color .4s} .job:hover .job__title{transform:translateX(clamp(5px,.8vw,14px));color:var(--accent-lift)} .job__tags{display:flex;gap:.5rem;flex-wrap:wrap} .job__tag{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:var(--smoke);padding:.4rem .7rem;border:1px solid var(--line);border-radius:100px} .job__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)} .job.is-open .job__panel{grid-template-rows:1fr} .job__panelin{overflow:hidden} .job__body{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(1.5rem,3vw,3rem);padding-bottom:clamp(2rem,4vw,3.2rem)} .job__list li{position:relative;padding-left:1.4rem;color:var(--ash);font-size:.97rem;line-height:1.55;margin-bottom:.6rem} .job__list li::before{content:'';position:absolute;left:0;top:.6em;width:6px;height:1px;background:var(--accent)} .job__listtitle{font-family:var(--ff-mono);font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);margin-bottom:1.1rem;display:block} @media (max-width:760px){.job__head{grid-template-columns:1fr auto}.job__tags{display:none}} /* ============================================================ FORMS ============================================================ */ .intents{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));gap:.7rem;margin-bottom:clamp(2rem,4vw,3.5rem)} .intent{ position:relative;text-align:left;padding:1.25rem 1.35rem;border:1px solid var(--line); border-radius:4px;overflow:hidden;isolation:isolate; transition:border-color .4s var(--ease),color .4s var(--ease)} .intent::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--accent);transform:translateY(101%);transition:transform .5s var(--ease)} .intent:hover{border-color:var(--accent)} .intent.is-active{border-color:var(--accent);color:var(--accent-ink)} .intent.is-active::before{transform:translateY(0)} .intent__label{display:block;font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:.4rem} .intent__detail{display:block;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.08em;color:var(--smoke);line-height:1.5} .intent.is-active .intent__detail{color:rgba(10,10,10,.7)} .form{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(1.5rem,3vw,3rem)} .field{position:relative;grid-column:span 1;border-bottom:1px solid var(--line);padding-top:2rem;transition:border-color .4s} .field--full{grid-column:span 2} .field:focus-within{border-color:var(--accent)} .field label{ position:absolute;top:1.9rem;left:0;font-family:var(--ff-mono);font-size:.8rem;letter-spacing:.13em; text-transform:uppercase;color:var(--smoke);pointer-events:none; transform-origin:0 0;transition:transform .45s var(--ease),color .35s} .field input,.field textarea,.field select{ width:100%;padding:.5rem 0 1.05rem;font-size:1.02rem;color:var(--paper); background:transparent;border:0;font-family:inherit} .field textarea{resize:vertical;min-height:3.2rem;line-height:1.5} .field select{cursor:pointer;appearance:none;color:var(--paper)} .field select option{background:var(--charcoal);color:var(--paper)} .field input:focus,.field textarea:focus,.field select:focus{outline:none} .field.is-filled label,.field:focus-within label{transform:translateY(-1.55rem) scale(.76);color:var(--accent-lift)} .field--select label{transform:translateY(-1.55rem) scale(.76)} .field__req{color:var(--accent);margin-left:.25rem} .field--file{padding-bottom:1.05rem} .field--file input{padding-top:1.4rem;font-family:var(--ff-mono);font-size:.78rem;color:var(--ash)} .field--file input::file-selector-button{ margin-right:1rem;padding:.5rem 1rem;border-radius:100px;border:1px solid var(--line); background:transparent;color:var(--paper);font-family:var(--ff-mono);font-size:.68rem; letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:border-color .3s,color .3s} .field--file input::file-selector-button:hover{border-color:var(--accent);color:var(--accent-lift)} .form__foot{grid-column:span 2;display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between;margin-top:2.6rem} .form__note{font-family:var(--ff-mono);font-size:.65rem;letter-spacing:.1em;color:var(--smoke);max-width:38ch;line-height:1.6} @media (max-width:700px){.form{grid-template-columns:1fr}.field,.field--full{grid-column:span 1}.form__foot{grid-column:span 1}} .form__status{grid-column:span 2;margin-top:1.5rem;font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-lift);display:none} .form__status.is-shown{display:block} /* direct contact strip */ .direct{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .direct__item{background:var(--black);padding:clamp(1.4rem,2.6vw,2.2rem);display:flex;flex-direction:column;gap:.65rem;transition:background .45s var(--ease)} .direct__item:hover{background:var(--charcoal)} .direct__label{font-family:var(--ff-mono);font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;color:var(--smoke)} .direct__value{font-size:clamp(1rem,1.5vw,1.28rem);font-weight:600;letter-spacing:-.015em;word-break:break-word} .direct__item:hover .direct__value{color:var(--accent-lift)} /* mobile quick actions */ .quick{ position:fixed;left:0;right:0;bottom:0;z-index:700;display:none; grid-template-columns:repeat(3,1fr);background:rgba(5,5,5,.92); backdrop-filter:blur(14px);border-top:1px solid var(--line); transform:translateY(110%);transition:transform .5s var(--ease); padding-bottom:env(safe-area-inset-bottom); } .quick.is-shown{transform:translateY(0)} .quick__btn{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem; padding:.9rem .5rem;font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.13em; text-transform:uppercase;color:var(--bone);border-left:1px solid var(--line)} .quick__btn:first-child{border-left:0} .quick__btn svg{width:17px;height:17px;stroke:var(--accent);fill:none;stroke-width:1.6} @media (max-width:760px){.quick{display:grid}body{padding-bottom:0}} /* ============================================================ FOOTER ============================================================ */ .footer{position:relative;background:var(--black);border-top:1px solid var(--line);overflow:hidden} .footer__statement{padding-block:clamp(2.6rem,6vw,5.5rem)} .footer__line{display:block;overflow:hidden} .footer__line b{ display:block;font-size:clamp(2rem,9.5vw,9.5rem);font-weight:800;text-transform:uppercase; letter-spacing:-.042em;line-height:.88;transform:translateY(104%);transition:transform 1s var(--ease)} .footer__statement.is-in .footer__line b{transform:translateY(0)} .footer__line:nth-child(2) b{transition-delay:.09s;color:var(--smoke)} .footer__statement.is-in .footer__line:nth-child(2) b{color:var(--paper)} .footer__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:2rem var(--gut);padding-block:clamp(2rem,3.4vw,3rem);border-top:1px solid var(--line)} .footer__col{grid-column:span 3} .footer__col--wide{grid-column:span 3} .footer__coltitle{font-family:var(--ff-mono);font-size:var(--fs-meta);letter-spacing:.17em;text-transform:uppercase;color:var(--smoke);margin-bottom:1.4rem;display:block} .footer__list li{margin-bottom:.6rem} .footer__list a{font-size:.94rem;color:var(--bone);transition:color .3s} .footer__list a:hover{color:var(--accent-lift)} .footer__bottom{ display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center; padding-block:1.8rem;border-top:1px solid var(--line)} .footer__signoff{font-size:clamp(.8rem,1vw,.95rem);font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--accent-lift)} @media (max-width:900px){.footer__col,.footer__col--wide{grid-column:span 6}} @media (max-width:520px){.footer__col,.footer__col--wide{grid-column:span 12}} /* page header for inner pages */ .phead{padding-top:clamp(7rem,13vh,10rem);padding-bottom:clamp(2rem,3.6vw,3.2rem);border-bottom:1px solid var(--line)} .phead__title{font-size:clamp(2.15rem,11vw,10rem);font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.86} .phead__sub{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:flex-end;justify-content:space-between} /* utility */ .u-accent{color:var(--accent)} .u-mute{color:var(--smoke)} .u-right{text-align:right} .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} .skip{position:absolute;top:-100px;left:var(--gut);z-index:1000;background:var(--accent);color:var(--accent-ink);padding:.8rem 1.4rem;font-weight:700;border-radius:0 0 4px 4px;transition:top .3s} .skip:focus{top:0} /* reduced motion */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important} [data-reveal],[data-mask]{opacity:1 !important;transform:none !important} [data-mask]::before{display:none !important} .tl > span,.hero__wordmark b,.hero__statement p,.footer__line b,.menu__link{transform:none !important} body::after{display:none} .hero__media{opacity:1} } /* hero statement + support line */ .hero__statement p em{font-style:normal;color:var(--accent-lift)} .hero__support{margin-top:.4rem;opacity:0;animation:fadeUp .9s var(--ease) .6s forwards} @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* ============================================================ MOBILE-FIRST REFINEMENTS Mobile is its own design, not a squeezed desktop. ============================================================ */ @media (max-width:640px){ :root{--sec:clamp(3.6rem,10vh,5.5rem)} .hero__inner{padding-bottom:clamp(2rem,7vw,3rem)} .hero__top{flex-direction:column;gap:.5rem} .hero__top .u-right{text-align:left} .hero__center{gap:1.1rem} .hero__support{font-size:.6rem;line-height:1.7} .sec-head{margin-bottom:2.2rem;gap:1.2rem} .lede{font-size:1.02rem} /* portfolio becomes an immersive vertical feed */ .work-grid{gap:2.6rem} .pc__media{aspect-ratio:4/5 !important} .pc--hero .pc__media{aspect-ratio:4/5 !important} .pc__info{gap:.6rem} .pc__specs{flex-direction:row;flex-wrap:wrap;gap:.3rem .9rem;text-align:left} .pc__code{font-size:.56rem;top:.7rem;left:.7rem} /* thumb-friendly targets */ .chip{padding:.75rem 1.15rem;font-size:.68rem} .btn{--pad:1.1rem 1.8rem;width:100%;justify-content:center} .btn--lg{--pad:1.25rem 1.8rem} .intent{padding:1.1rem} .svc__head{padding-block:1.2rem} .job__head{padding-block:1.25rem} .cs-facts{gap:1.1rem 2rem} .client-wall{grid-template-columns:repeat(2,1fr)} .cw{aspect-ratio:16/10} .team{grid-template-columns:repeat(2,1fr);gap:.6rem} .credits{gap:1.1rem} /* leave room for the persistent quick-action bar */ .footer__bottom{padding-bottom:5.5rem} } @media (max-width:400px){ .hero__wordmark b{font-size:15vw} } /* tablets */ @media (min-width:641px) and (max-width:1024px){ .client-wall{grid-template-columns:repeat(3,1fr)} .team{grid-template-columns:repeat(3,1fr)} } /* ============================================================ CONDENSED HOMEPAGE BLOCKS ============================================================ */ .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.8rem,4vw,5rem);align-items:start} @media (max-width:900px){.split{grid-template-columns:1fr;gap:2.2rem}} .caps--stack{grid-template-columns:1fr 1fr;border:1px solid var(--line)} @media (max-width:520px){.caps--stack{grid-template-columns:1fr}} .rolelist{border-top:1px solid var(--line)} .rolelist li{border-bottom:1px solid var(--line)} .rolelist a{ display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:1rem; padding:1.1rem 0;transition:padding .4s var(--ease)} .rolelist a:hover{padding-left:.7rem} .rolelist__title{font-size:clamp(1rem,1.5vw,1.28rem);font-weight:700;text-transform:uppercase;letter-spacing:-.015em;transition:color .3s} .rolelist a:hover .rolelist__title{color:var(--accent-lift)} .rolelist__meta{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke)} .rolelist__arrow{color:var(--smoke);transition:transform .4s var(--ease),color .3s} .rolelist a:hover .rolelist__arrow{transform:translateX(5px);color:var(--accent-lift)} @media (max-width:520px){ .rolelist a{grid-template-columns:1fr auto} .rolelist__meta{grid-column:1;font-size:.58rem} } /* ============================================================ LET'S TALK — choose first, then a form shaped by the choice ============================================================ */ .talk{padding-top:clamp(6.5rem,12vh,9rem);padding-bottom:var(--sec)} .talk__head{max-width:70ch;margin-bottom:clamp(2.2rem,4vw,3.4rem)} /* deliberately smaller than the other page titles: the options are the hero here */ .talk__title{ font-size:clamp(1.9rem,4.2vw,3.4rem);font-weight:800;text-transform:uppercase; letter-spacing:-.035em;line-height:.95;margin-top:1rem; } .talk__intro{margin-top:1rem;font-size:clamp(.98rem,1.15vw,1.1rem);line-height:1.55;color:var(--ash);max-width:52ch} .talk__step{display:flex;align-items:center;gap:.85rem;margin-bottom:1.2rem;color:var(--smoke)} .talk__step span:first-child{ display:grid;place-items:center;width:26px;height:26px;border-radius:50%; border:1px solid var(--line);color:var(--accent-lift);font-size:.6rem;flex:none} .talk__pick{margin-bottom:clamp(2.4rem,5vw,4rem)} .talk__form{padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line)} .talk__direct{padding-top:clamp(2.2rem,4.5vw,3.4rem);margin-top:clamp(2.2rem,4.5vw,3.4rem);border-top:1px solid var(--line)} /* option cards */ .intents--lg{grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr));gap:.8rem} .intents--lg .intent{padding:1.5rem 1.4rem 1.4rem;border-radius:6px;min-height:158px;display:flex;flex-direction:column} .intent__idx{ font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.14em;color:var(--smoke); display:block;margin-bottom:1.5rem;transition:color .4s} .intents--lg .intent__label{font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.15;margin-bottom:.5rem} .intents--lg .intent__detail{margin-top:auto;line-height:1.55} .intent__tick{ position:absolute;top:1.3rem;right:1.3rem;width:17px;height:17px;border-radius:50%; border:1px solid var(--line);transition:border-color .4s,background .4s} .intent__tick::after{ content:'';position:absolute;inset:0;margin:auto;width:6px;height:6px;border-radius:50%; background:var(--accent-ink);transform:scale(0);transition:transform .35s var(--ease)} .intent.is-active .intent__tick{border-color:var(--accent-ink);background:var(--accent-ink)} .intent.is-active .intent__tick::after{background:var(--accent);transform:scale(1)} .intent.is-active .intent__idx{color:rgba(15,4,3,.55)} .intent:hover .intent__tick{border-color:var(--accent)} .intent.is-active:hover .intent__tick{border-color:var(--accent-ink)} /* conditional field groups */ .fieldset{display:contents} .fieldset[hidden]{display:none} .field.is-hidden{display:none} @media (max-width:640px){ .intents--lg .intent{min-height:0;padding:1.2rem 1.1rem} .intent__idx{margin-bottom:.9rem} .intents--lg .intent__detail{margin-top:.4rem} } /* ============================================================ TYPE ROLES Every headline runs on the rounded display face so the page shares the logo's DNA; everything functional runs on Outfit. ============================================================ */ .hero__wordmark b, .phead__title, .cs-hero__title, .cs-chapter__title, .cs-stat__value, .footer__line b, .menu__link, .pc__title, .svc__title, .step__title, .job__title, .value__title, .tm__name, .talk__title, .marquee__item, .rolelist__title, .cw__name, .intent__label, .ac__title, .tm__glyph, .hero__statement p{ font-family:var(--ff-display); letter-spacing:var(--display-track); } /* rounded caps sit optically lower and read wider — rebalance */ .display,.hero__wordmark b,.phead__title,.cs-hero__title, .footer__line b,.menu__link,.talk__title{line-height:var(--display-lh)} .pc__title,.svc__title,.step__title,.job__title{line-height:1} .value__title,.tm__name,.rolelist__title,.intent__label{line-height:1.08;letter-spacing:-.005em} .marquee__item{letter-spacing:-.01em} .cs-stat__value{letter-spacing:-.025em} /* Outfit is geometric and slightly narrow at small sizes — nudge for comfort */ .body-lg,.lede,.svc__detail,.step__body,.value__body,.cs-chapter__body p, .job__list li,.talk__intro{letter-spacing:.002em} .btn,.nav__link,.nav__cta{font-family:var(--ff-sans)} /* ------------------------------------------------------------ Live type comparison: add ?type=b / ?type=c to any URL ------------------------------------------------------------ */ [data-type="b"]{--ff-display:'Outfit','Helvetica Neue',Arial,sans-serif;--display-track:-.035em;--display-lh:.88} [data-type="c"]{--ff-display:'Outfit','Helvetica Neue',Arial,sans-serif;--ff-sans:'Outfit','Helvetica Neue',Arial,sans-serif;--display-track:-.035em;--display-lh:.88} [data-type="b"] .display,[data-type="c"] .display, [data-type="b"] .hero__wordmark b,[data-type="c"] .hero__wordmark b{font-weight:900} /* ============================================================ MOTION ARCHIVE — source-grounded films imported from the original work.loopedproduction.com portfolio. ============================================================ */ .archive{background:var(--charcoal);border-top:1px solid var(--line)} .archive__head{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--gut);align-items:end;margin-bottom:clamp(2.5rem,6vw,5rem)} .archive__head .body-lg{max-width:34ch;color:var(--ash);justify-self:end} .archive-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(1rem,1.7vw,1.8rem)} .archive-card{display:block;min-width:0;transition:opacity .35s,transform .5s var(--ease)} .archive-card.is-dim{display:none} .archive-card__frame{position:relative;aspect-ratio:9/14;margin:0;overflow:hidden;background:var(--steel)} .archive-card__frame:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.65));pointer-events:none} .archive-card__frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.76) contrast(1.05);transition:transform .85s var(--ease),filter .55s} .archive-card:hover .archive-card__frame img,.archive-card:focus-visible .archive-card__frame img{transform:scale(1.055);filter:saturate(1) contrast(1.02)} .archive-card__play{position:absolute;z-index:2;left:50%;top:50%;width:3rem;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:.65rem;transform:translate(-50%,-50%) scale(.72);opacity:0;transition:opacity .35s,transform .45s var(--ease)} .archive-card:hover .archive-card__play,.archive-card:focus-visible .archive-card__play{opacity:1;transform:translate(-50%,-50%) scale(1)} .archive-card__duration{position:absolute;z-index:2;right:.65rem;bottom:.6rem;padding:.2rem .35rem;background:rgba(5,5,5,.7);color:var(--paper);font-size:.52rem} .archive-card__meta{display:grid;grid-template-columns:auto 1fr;gap:.7rem;padding-top:.7rem;align-items:start} .archive-card__meta .meta{font-size:.5rem;padding-top:.18rem} .archive-card__meta strong{font-size:.78rem;line-height:1.15;letter-spacing:.02em;text-transform:uppercase} .archive__source{max-width:72ch;margin:clamp(2.5rem,5vw,4.5rem) 0 0;line-height:1.65} @media(max-width:1180px){.archive-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:720px){.archive__head{display:block}.archive__head .body-lg{margin-top:1.5rem}.archive-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem .75rem}.archive-card__frame{aspect-ratio:9/13}.archive-card__play{opacity:1;width:2.5rem}.archive-card__meta{display:block}.archive-card__meta .meta{display:block;margin-bottom:.35rem}.archive-card__meta strong{font-size:.72rem}} /* ============================================================ CONCEPT 03 SYSTEM LAYER Shared chrome so every inner page reads as the same site as the homepage: film grain, coordinate rail, hairline language. ============================================================ */ .grain{ position:fixed;inset:-50%;z-index:50;pointer-events:none;opacity:.055; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); animation:c3grain .22s steps(2) infinite; } @keyframes c3grain{ 0%{transform:translate(0)}25%{transform:translate(3%,-2%)}50%{transform:translate(-2%,3%)} 75%{transform:translate(2%,2%)}100%{transform:translate(-3%,-3%)} } .rail{ position:fixed;z-index:55;left:0;top:0;bottom:0;width:48px; border-right:1px solid var(--line); display:flex;flex-direction:column;align-items:center;justify-content:space-between; padding:7.5rem 0 2rem;font-size:.49rem;color:#8a8a8a;letter-spacing:.1em; font-family:var(--ff-mono); } .rail span,.rail b{writing-mode:vertical-rl} .rail b{font-weight:500;color:var(--accent-lift)} body{padding-left:48px} .nav{left:48px} .footer__legal{display:flex;gap:1.4rem;font-family:var(--ff-mono);font-size:var(--fs-meta);letter-spacing:.13em;text-transform:uppercase} .footer__legal a{color:var(--ash)} .footer__legal a:hover{color:var(--accent-lift)} @media(prefers-reduced-motion:reduce){.grain{animation:none}} @media(max-width:900px){ .rail{display:none} body{padding-left:0} .nav{left:0} } /* A section reused as a full page already has the page H1 saying the same thing — keep the heading for assistive tech, drop the visual duplicate. */ .sec-head--sr{ position:absolute !important;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0; } /* ---------- LEGAL PAGES ---------- */ .legal{max-width:none;border-top:1px solid var(--line)} .legal__block{display:grid;grid-template-columns:70px 1fr;gap:clamp(1rem,3vw,3rem); padding:clamp(2rem,4vw,3.2rem) 0;border-bottom:1px solid var(--line)} .legal__num{font-size:.6rem;letter-spacing:.14em;color:var(--accent-lift);padding-top:.45rem} .legal__h{font-family:var(--ff-display);font-weight:900;letter-spacing:-.045em;line-height:.9; font-size:clamp(1.5rem,3vw,2.6rem);margin:0 0 1.1rem;text-transform:uppercase} .legal__block p{max-width:74ch;margin:0 0 1rem;font-size:clamp(.98rem,1.05vw,1.08rem); line-height:1.6;color:var(--ash)} .legal__block p:last-child{margin-bottom:0} .legal__block a{color:var(--accent-lift);text-decoration:underline;text-underline-offset:3px} @media(max-width:720px){.legal__block{grid-template-columns:1fr;gap:.5rem}.legal__num{padding-top:0}} /* ---------- FAQ ---------- */ .faq__list{border-top:1px solid var(--line);margin-top:clamp(2.5rem,5vw,4rem)} .faq__item{border-bottom:1px solid var(--line)} .faq__item summary{list-style:none;cursor:pointer;display:grid; grid-template-columns:56px 1fr 34px;align-items:center;gap:1rem; padding:clamp(1.35rem,2.6vw,2rem) 0;transition:color .35s} .faq__item summary::-webkit-details-marker{display:none} .faq__num{font-size:.6rem;letter-spacing:.14em;color:var(--smoke);transition:color .35s} .faq__q{font-family:var(--ff-display);font-weight:900;text-transform:uppercase; letter-spacing:-.038em;line-height:.98;font-size:clamp(1.05rem,2.1vw,1.9rem)} .faq__mark{position:relative;width:20px;height:20px;justify-self:end} .faq__mark:before,.faq__mark:after{content:'';position:absolute;background:var(--accent-lift); left:50%;top:50%;transition:transform .4s var(--ease)} .faq__mark:before{width:18px;height:1px;transform:translate(-50%,-50%)} .faq__mark:after{width:1px;height:18px;transform:translate(-50%,-50%)} .faq__item[open] .faq__mark:after{transform:translate(-50%,-50%) scaleY(0)} .faq__item[open] .faq__num{color:var(--accent-lift)} .faq__item summary:hover .faq__q{color:var(--accent-lift)} .faq__a{margin:0 0 clamp(1.6rem,3vw,2.4rem);padding-left:calc(56px + 1rem); max-width:78ch;font-size:clamp(.98rem,1.05vw,1.08rem);line-height:1.6;color:var(--ash)} @media(max-width:720px){ .faq__item summary{grid-template-columns:34px 1fr 20px;gap:.65rem} .faq__a{padding-left:calc(34px + .65rem)} } /* Live status pill — mirrors the homepage header so both are identical. */ .nav__status{display:flex;align-items:center;gap:.6rem;font-family:var(--ff-mono); font-size:.57rem;letter-spacing:.1em;color:#a8a8a8;margin-left:auto;margin-right:auto} .nav__status i{display:block;width:6px;height:6px;border-radius:50%;background:var(--accent); box-shadow:0 0 15px var(--accent);animation:navpulse 1.6s ease infinite} @keyframes navpulse{50%{opacity:.35}} @media(max-width:1080px){.nav__status{display:none}} /* Header parity with the homepage: identical 4-column grid so the logo, status pill, nav and CTA land in exactly the same places on every page. (The previous flex + auto-margin layout let the CTA collide with "Studio".) */ .nav{ display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center;gap:2.5rem; justify-content:initial; } .nav__status{margin:0;justify-self:end} .nav__links{justify-self:start} .nav__right{justify-self:end} .brand__logo--wide{height:clamp(14px,1.15vw,17px)} .nav.is-solid .brand__logo--wide{height:clamp(13px,1.05vw,15px)} @media(max-width:1080px){ .nav{grid-template-columns:auto 1fr;gap:1rem} .nav__links{display:none} } /* Mobile header parity (<=1080px): both the homepage and the inner pages show the monogram plus the three primary links. The CTA pill and the burger are hidden here - everything secondary lives in the footer, which is on every page - so the two headers stay identical at every width. */ @media(max-width:1080px){ .nav{grid-template-columns:auto 1fr;gap:1rem;align-items:center} .nav__links{display:flex;justify-self:end;gap:.9rem} .nav__link{font-size:.66rem;letter-spacing:.07em} .nav__right{display:none} .nav__status{display:none} } /* A single team card must not read as one lonely cell in a four-up grid. With one person the block becomes a wide founder feature: portrait (or monogram) on the left, role and detail set large on the right. */ .team--solo{display:grid;grid-template-columns:minmax(240px,28%) 1fr;gap:0; border:1px solid var(--line);background:var(--charcoal)} .team--solo .tm{background:transparent;display:contents} .team--solo .tm__media{aspect-ratio:4/5;border-right:1px solid var(--line)} .team--solo .tm__media::after{display:none} .team--solo .tm__info{position:static;display:flex;flex-direction:column;justify-content:center; padding:clamp(1.6rem,4vw,3.2rem)} .team--solo .tm__role{font-size:.62rem;margin-bottom:1.1rem} .team--solo .tm__name{font-family:var(--ff-display);font-weight:900; font-size:clamp(1.8rem,4.4vw,3.6rem);line-height:.86;letter-spacing:-.05em} .team--solo .tm__spec{margin-top:1.1rem;font-size:.72rem;color:var(--ash);opacity:1;transform:none} .team--solo .tm__glyph{font-size:clamp(4rem,9vw,8rem);-webkit-text-stroke-color:rgba(244,242,238,.28)} @media(max-width:700px){ .team--solo{grid-template-columns:1fr} .team--solo .tm__media{aspect-ratio:16/10;border-right:0;border-bottom:1px solid var(--line)} } /* Solo card, refined. With no portrait supplied there is nothing to put in a 4:5 media tile, and an empty monogram block just reads as dead space — so the card collapses to a dense founder band. Drop a portrait into studio.json -> team[0].image and the two-column layout returns. */ .team--solo{grid-template-columns:1fr} .team--solo .tm--role .tm__media{display:none} .team--solo .tm__info{display:grid;grid-template-columns:minmax(180px,22%) 1fr; align-items:baseline;gap:clamp(1rem,3vw,2.5rem); padding:clamp(1.6rem,3.4vw,2.6rem) clamp(1.4rem,3vw,2.4rem)} .team--solo .tm__role{margin:0;align-self:baseline} .team--solo .tm__spec{max-height:none;overflow:visible;opacity:1;margin-top:.9rem; font-size:.66rem;color:var(--ash);grid-column:2} .team--solo .tm__name{grid-column:2;grid-row:1} .team--solo .tm__name--person{font-size:clamp(1.8rem,4.4vw,3.4rem);color:var(--paper)} /* When a real portrait exists, restore the two-column feature layout. */ .team--solo:has(.tm__img){grid-template-columns:minmax(220px,26%) 1fr} .team--solo:has(.tm__img) .tm__media{display:block;aspect-ratio:1/1;border-right:1px solid var(--line)} .team--solo:has(.tm__img) .tm__info{grid-template-columns:1fr;align-content:center} @media(max-width:700px){ .team--solo .tm__info{grid-template-columns:1fr;gap:.75rem} .team--solo .tm__name,.team--solo .tm__spec{grid-column:1} .team--solo .tm__name{grid-row:auto} } .team--solo .tm__info{gap:.5rem clamp(1rem,3vw,2.5rem)} .team--solo .tm__spec{margin-top:0} /* ---------- IN-PAGE VIDEO PLAYER ---------- */ .vbox{position:fixed;inset:0;z-index:2000;display:none;place-items:center;padding:clamp(1rem,4vw,3rem)} .vbox.is-open{display:grid} .vbox__backdrop{position:absolute;inset:0;background:rgba(4,4,4,.9);backdrop-filter:blur(10px)} .vbox__inner{position:relative;z-index:2;width:min(1180px,100%);animation:vboxIn .45s var(--ease) both} @keyframes vboxIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} .vbox__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:0 .2rem .8rem;border-bottom:1px solid var(--line);margin-bottom:.9rem} .vbox__title{font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ash); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vbox__close{display:inline-flex;align-items:center;gap:.5rem;background:none;border:1px solid var(--line); color:var(--paper);border-radius:99px;padding:.55rem 1rem;cursor:pointer; font-family:var(--ff-mono);font-size:.55rem;letter-spacing:.13em;text-transform:uppercase; transition:background .3s,border-color .3s,color .3s} .vbox__close:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .vbox__close span{font-size:1rem;line-height:1} .vbox__frame{position:relative;aspect-ratio:16/9;max-height:80vh;background:#000;overflow:hidden; border:1px solid var(--line)} .vbox__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} @media(max-width:720px){.vbox{padding:1rem .8rem}.vbox__title{display:none}} @media(prefers-reduced-motion:reduce){.vbox__inner{animation:none}} /* Vertical films get a portrait shell sized so the whole frame fits the viewport height without cropping, letterboxing or pillarboxing. */ .vbox--portrait .vbox__inner{width:min(calc(76vh * 0.5625), 92vw)}