@font-face{font-family:"Plus Jakarta Sans";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:800;font-style:normal;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2")}
/* Made of This. Layout: a show-call sheet lit like a stage. Blue-black house, red-to-salmon live light, cream type. */
:root{
  --ink:#07080f;        /* House Black */
  --night:#0c1022;      /* Night Blue */
  --deep:#141c42;       /* Deep Blue */
  --red:#ee3b2f;        /* Cue Red */
  --salmon:#ff7a66;     /* Salmon */
  --blush:#ffc2b4;      /* Blush */
  --cream:#efe6d8;      /* Stage Cream */
  --fg:#eceef6;
  --muted:#8e96b6;
  --line:rgba(150,162,220,.16);
  --heat:linear-gradient(90deg,var(--red),var(--salmon));
  --display:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --body:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--ink);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--salmon);outline-offset:3px}
.wrap{max-width:1280px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pk{color:var(--red)}
.sal{color:var(--salmon)}

/* logo + mark */
.logo{display:inline-flex;align-items:flex-start;gap:.16em;font-family:var(--display);font-weight:800;letter-spacing:-.05em;line-height:.9;white-space:nowrap;text-decoration:none;font-size:24px;color:var(--cream);text-transform:uppercase}
.spike{display:inline-block;width:.62em;height:.62em;flex:none;color:var(--red)}
.spike svg{display:block;width:100%;height:100%;overflow:visible}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--ink)}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(7,8,15,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.nav nav{display:flex;gap:32px;align-items:center}
.nav nav a{text-decoration:none;font-size:14px;font-weight:500;color:var(--muted);transition:color .2s}
.nav nav a:hover{color:var(--cream)}
@media (max-width:860px){.nav nav a:not(.btn){display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:700;font-size:15px;text-decoration:none;padding:14px 22px;border-radius:2px;border:1px solid transparent;cursor:pointer;transition:box-shadow .25s,transform .25s,border-color .25s}
.btn-go{background:var(--heat);color:var(--ink)}
.nav nav a.btn-go{color:var(--ink)}
.btn-go:hover{box-shadow:0 0 30px rgba(238,59,47,.5);transform:translateY(-1px)}
.btn-go .dot{width:8px;height:8px;border-radius:50%;background:var(--ink)}
.btn-ghost{border-color:var(--line);color:var(--cream)}
.btn-ghost:hover{border-color:var(--cream)}
.btn-sm{padding:10px 16px;font-size:14px}

/* headings */
h1,h2,h3{font-family:var(--display);text-transform:uppercase;color:var(--cream);margin:0}
h2{font-weight:800;font-size:clamp(38px,5.6vw,80px);line-height:.88;letter-spacing:-.055em;margin-top:16px;text-wrap:balance}
.stack span{display:block}
.stack .l1{color:var(--red)}
.stack .l2{background:linear-gradient(180deg,var(--salmon) 0%,var(--cream) 85%);-webkit-background-clip:text;background-clip:text;color:transparent}
.stack .l3{display:flex;align-items:flex-start;gap:.1em}
.stack .spike{width:.36em;height:.36em;margin-top:.06em}

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);isolation:isolate}
.hero .photo{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 30%}
.hero .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,8,15,.92) 0%,rgba(7,8,15,.55) 50%,rgba(7,8,15,.25) 100%),linear-gradient(0deg,var(--ink) 0%,rgba(7,8,15,0) 45%)}
.lattice{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,rgba(239,230,216,.11) 0 1px,transparent 1px 56px),
    repeating-linear-gradient(90deg,rgba(239,230,216,.11) 0 1px,transparent 1px 56px),
    repeating-linear-gradient(45deg,rgba(239,230,216,.065) 0 1px,transparent 1px 39.6px),
    repeating-linear-gradient(-45deg,rgba(239,230,216,.065) 0 1px,transparent 1px 39.6px);
  -webkit-mask-image:radial-gradient(ellipse 60% 80% at 78% 35%,#000 15%,transparent 75%);
  mask-image:radial-gradient(ellipse 60% 80% at 78% 35%,#000 15%,transparent 75%)}
.hero-inner{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px 56px;align-items:end;padding-block:110px 88px}
.hero-title{grid-column:1/-1}
.hero h1{font-weight:800;font-size:clamp(46px,10.6vw,164px);line-height:.84;letter-spacing:-.058em;margin:26px 0 0}
.lede{font-size:clamp(17px,1.5vw,20px);color:#c9cde2;max-width:34em;margin:0 0 32px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.live{display:inline-flex;align-items:center;gap:10px}
.live i{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

/* show call card */
.callsheet{background:rgba(12,16,34,.82);border:1px solid var(--line);border-radius:4px;padding:20px 22px 8px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--mono);font-size:13px;min-width:0}
.callsheet .head{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.callsheet .head b{font-weight:500;color:var(--cream);letter-spacing:.08em}
.cue{display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line);font-variant-numeric:tabular-nums}
.cue:last-child{border-bottom:0}
.cue .t{color:var(--muted)}
.cue .s{font-size:11px;letter-spacing:.12em;padding:3px 7px;border:1px solid var(--line);border-radius:2px;color:var(--muted)}
.cue.on .s{border-color:var(--red);color:var(--ink);background:var(--heat)}
.cue.on .n{color:var(--cream)}

/* ticker */
.ticker{border-bottom:1px solid var(--line);overflow:hidden;padding-block:20px}
.ticker .track{display:flex;gap:44px;width:max-content;animation:roll 40s linear infinite}
.ticker span{font-family:var(--display);text-transform:uppercase;font-weight:800;font-size:22px;letter-spacing:-.04em;color:#4f5885;white-space:nowrap;display:flex;align-items:center;gap:44px}
.ticker span::after{content:"";width:12px;height:12px;background:var(--salmon);clip-path:polygon(40% 0,60% 0,60% 38%,100% 38%,100% 62%,60% 62%,60% 100%,40% 100%,40% 62%,0 62%,0 38%,40% 38%)}
@keyframes roll{to{transform:translateX(-50%)}}

/* sections */
section{padding-block:120px}
.sec-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:64px}
.sec-head p{color:#b9bfda;max-width:34em;margin:0;font-size:18px}

/* services */
.svc{border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:120px minmax(0,1.1fr) minmax(0,1.4fr) 48px;gap:32px;align-items:center;padding:30px 8px;border-bottom:1px solid var(--line);position:relative;transition:background .3s}
.svc-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--heat);transition:width .3s}
.svc-row:hover{background:linear-gradient(90deg,rgba(20,28,66,.6),transparent)}
.svc-row:hover::before{width:3px}
.svc-row h3{font-weight:800;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.045em;line-height:1}
.svc-row p{margin:0;color:#aab1cf;font-size:16px}
.arr{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--muted);transition:all .3s;flex:none}
.svc-row:hover .arr,.proj:hover .arr{border-color:var(--salmon);color:var(--salmon);transform:rotate(-45deg)}

/* satellite */
.sat{background:radial-gradient(ellipse 70% 90% at 85% 50%,rgba(20,28,66,.95),transparent 70%),var(--night);border-block:1px solid var(--line)}
.sat-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:72px;align-items:center}
.sat p{color:#c3c8e0;font-size:18px;max-width:34em}
.orbit{position:relative;aspect-ratio:1;max-width:440px;width:100%;justify-self:center}
.orbit .ring{position:absolute;inset:0;border:1px solid var(--line);border-radius:50%}
.orbit .r2{inset:16%}
.orbit .r3{inset:32%;border-color:rgba(255,122,102,.4)}
.orbit .core{position:absolute;inset:40%;border-radius:50%;background:var(--heat);box-shadow:0 0 60px rgba(238,59,47,.5);display:grid;place-items:center;color:var(--ink);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-align:center;line-height:1.2}
.orbit .sp{position:absolute;inset:0;animation:spin 30s linear infinite}
.orbit .s2{inset:16%;animation-duration:22s;animation-direction:reverse}
.orbit .sp .tag{animation:spin 30s linear infinite reverse}
.orbit .s2 .tag{animation:spin 22s linear infinite}
.orbit .tag{position:absolute;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:var(--ink);border:1px solid var(--line);padding:5px 9px;border-radius:2px;white-space:nowrap;transform:translate(-50%,-50%);color:var(--cream)}
@keyframes spin{to{rotate:360deg}}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:32px 0 0;padding:0;list-style:none}
.chips li{font-size:14px;border:1px solid var(--line);padding:8px 14px;border-radius:100px;color:#cfd3ea}
.chips li.hot{border-color:rgba(255,122,102,.5);color:var(--salmon)}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.step{background:var(--ink);padding:32px 28px 40px;min-height:260px;display:flex;flex-direction:column;gap:14px}
.step .num{font-family:var(--mono);font-size:13px;color:var(--salmon);letter-spacing:.1em}
.step h3{font-weight:800;font-size:28px;letter-spacing:-.045em;margin-top:auto}
.step p{margin:0;color:#a7aecb;font-size:15px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line)}
.stat{padding:40px 28px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(44px,5vw,72px);letter-spacing:-.06em;line-height:1;background:var(--heat);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:10px;color:var(--muted);font-size:14px}

/* projects */
.projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 24px}
.proj{text-decoration:none;display:flex;flex-direction:column;gap:18px}
.proj.wide{grid-column:1/-1}
.proj .img{position:relative;overflow:hidden;border-radius:3px;aspect-ratio:4/3;background:var(--night)}
.proj.wide .img{aspect-ratio:21/9}
.proj .img img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.proj:hover .img img{transform:scale(1.04)}
.proj .img .badge{position:absolute;top:16px;left:16px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:rgba(7,8,15,.75);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--cream);padding:6px 10px;border-radius:2px}
.proj .cap{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.proj h3{font-weight:800;font-size:clamp(26px,3vw,44px);letter-spacing:-.055em;line-height:.92}
.proj .meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px}

/* contact */
.contact-box{border:1px solid var(--line);border-radius:4px;padding:clamp(32px,6vw,80px);background:radial-gradient(ellipse 60% 120% at 100% 100%,rgba(238,59,47,.22),transparent 60%),radial-gradient(ellipse 60% 100% at 0% 0%,rgba(20,28,66,.85),transparent 60%),var(--night);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;align-items:end}
.contact-box h2{font-size:clamp(40px,6vw,88px)}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.mail code{font-family:var(--mono);font-size:16px;background:rgba(7,8,15,.6);border:1px solid var(--line);padding:13px 16px;border-radius:2px;user-select:all;color:var(--cream)}

/* footer */
footer{padding-block:72px 40px;border-top:1px solid var(--line);background:linear-gradient(180deg,var(--ink),var(--night))}
.giant{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.068em;line-height:.8;font-size:clamp(46px,13.2vw,196px);color:var(--cream);white-space:nowrap;margin-left:-.04em}
.tagrule{display:flex;align-items:center;gap:20px;margin:36px 0 64px}
.tagrule::before{content:"";flex:1;height:1px;background:var(--line)}
.tagrule span{font-family:var(--display);font-weight:700;font-size:12px;text-transform:uppercase;color:var(--cream)}
.fcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding-bottom:56px;border-bottom:1px solid var(--line)}
.fabout .big{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.045em;line-height:1.2;margin:0;max-width:18em;color:var(--cream)}
.short{display:block;width:40px;height:1px;background:var(--red);margin:24px 0}
.fabout .small{color:var(--muted);font-size:14px;margin:0;max-width:22em}
.fmail{font-family:var(--display);font-weight:600;font-size:clamp(26px,3.2vw,44px);letter-spacing:-.05em;margin:14px 0 28px;color:var(--cream);user-select:all;overflow-wrap:anywhere}
.fmail span{color:#56608a}
.flinks{display:flex;flex-wrap:wrap;gap:12px 28px}
.flinks a{text-decoration:none;font-weight:600;letter-spacing:-.02em}
.flinks a:hover{color:var(--salmon)}
.fbase{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:28px}
.fbase .spike{width:40px;height:40px}

/* project page */
.p-hero{padding-block:72px 48px}
.back{display:inline-flex;gap:10px;align-items:center;text-decoration:none}
.p-title{font-weight:800;font-size:clamp(48px,10vw,152px);line-height:.84;letter-spacing:-.06em;margin:28px 0 0}
.p-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line);margin-top:56px}
.p-meta div{padding:22px 20px 22px 0}
.p-meta b{display:block;font-weight:600;color:var(--cream);margin-top:6px;font-size:17px;letter-spacing:-.02em}
.p-img{border-radius:3px;overflow:hidden}
.p-img img{width:100%;height:auto}
.p-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:64px;padding-block:96px}
.p-body .intro{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.6vw,36px);line-height:1.15;letter-spacing:-.045em;color:var(--cream);margin:0 0 28px}
.p-body p{color:#b9bfda;margin:0 0 18px;max-width:38em}
.scope{list-style:none;padding:0;margin:28px 0 0;border-top:1px solid var(--line)}
.scope li{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);color:var(--cream);font-weight:600;letter-spacing:-.02em}
.scope li span{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--muted);font-weight:400}
.gallery{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}
.gallery img{width:100%;height:100%;object-fit:cover;border-radius:3px;aspect-ratio:4/3}
.quote{padding-block:120px;text-align:left}
.quote blockquote{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(30px,4.4vw,64px);line-height:1.02;letter-spacing:-.05em;color:var(--cream);max-width:18em;text-wrap:balance}
.quote cite{display:block;margin-top:28px;font-style:normal}
.next{display:flex;justify-content:space-between;align-items:end;gap:24px;padding-block:72px;border-top:1px solid var(--line);text-decoration:none}
.next h2{margin-top:12px}
.next:hover .arr{border-color:var(--salmon);color:var(--salmon);transform:rotate(-45deg)}

/* responsive */
@media (max-width:960px){
  .hero-inner,.sec-head,.sat-grid,.contact-box,.p-body{grid-template-columns:minmax(0,1fr)}
  .hero-inner{padding-block:72px 56px}
  .steps,.stats,.p-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .svc-row{grid-template-columns:minmax(0,1fr) 40px;gap:10px 16px;padding:24px 4px}
  .svc-row .mono{grid-column:1/-1}
  .svc-row .arr{grid-row:2/4;grid-column:2}
  .projects,.gallery{grid-template-columns:minmax(0,1fr)}
  .proj.wide .img{aspect-ratio:4/3}
  section{padding-block:80px}
  .p-body{padding-block:64px;gap:40px}
}
@media (max-width:760px){.fcols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .steps{grid-template-columns:minmax(0,1fr)}
  .step{min-height:0}
  .logo{font-size:19px}
  .nav .btn{padding:9px 12px;font-size:13px}
  .hero h1{font-size:12vw}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* v2: Spector-style big imagery, dropdowns, spinning mark, scroll reveals */
.spike svg{animation:tick 1s cubic-bezier(.7,0,.2,1) infinite}
@keyframes tick{0%,55%{transform:rotate(0)}100%{transform:rotate(90deg)}}

/* dropdowns */
.dd{position:relative}
.dd>button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--muted);transition:color .2s}
.dd>button:hover,.dd:focus-within>button,.dd.open>button{color:var(--cream)}
.dd>button svg{width:10px;height:10px;transition:transform .3s}
.dd.open>button svg,.dd:hover>button svg{transform:rotate(180deg)}
.menu{position:absolute;top:calc(100% + 22px);left:-20px;min-width:260px;background:rgba(12,16,34,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:4px;padding:10px;display:grid;gap:2px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility .25s}
.menu::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}
.dd:hover .menu,.dd.open .menu,.dd:focus-within .menu{opacity:1;visibility:visible;transform:none}
.menu a{display:flex;justify-content:space-between;gap:16px;padding:10px 12px;border-radius:2px;text-decoration:none;font-size:14px;font-weight:600;color:var(--cream)!important;letter-spacing:-.01em}
.menu a span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;align-self:center}
.menu a:hover{background:rgba(238,59,47,.12)}
.menu a:hover span{color:var(--salmon)}
@media (max-width:860px){.nav nav .dd{display:none}}

/* hero v2 */
.hero2{position:relative;overflow:hidden;isolation:isolate;min-height:min(94vh,980px);display:flex;flex-direction:column;justify-content:space-between;border-bottom:1px solid var(--line)}
.hero2 .photo{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 40%;transform:scale(1.06);animation:settle 2.4s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes settle{to{transform:scale(1)}}
.hero2 .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,8,15,.96) 0%,rgba(7,8,15,.35) 48%,rgba(7,8,15,.55) 100%)}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding-block:40px 0}
.hero-top .label{display:grid;gap:14px}
.hero-top .big{font-family:var(--display);font-weight:600;font-size:clamp(26px,3vw,42px);letter-spacing:-.05em;line-height:1;color:var(--cream)}
.words{height:1.05em;overflow:hidden;font-family:var(--display);font-weight:600;font-size:clamp(26px,3vw,42px);letter-spacing:-.05em;line-height:1.05;color:var(--salmon)}
.words div{animation:words 10s cubic-bezier(.7,0,.2,1) infinite}
.words span{display:block;height:1.05em}
@keyframes words{0%,16%{transform:translateY(0)}20%,36%{transform:translateY(-1.05em)}40%,56%{transform:translateY(-2.1em)}60%,76%{transform:translateY(-3.15em)}80%,96%{transform:translateY(-4.2em)}100%{transform:translateY(-5.25em)}}
.hero-top .side{max-width:360px;display:grid;gap:20px;justify-items:start}
.hero-top .side p{margin:0;color:#d3d7e8;font-size:16px}
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-block:0 52px}
.hero2 h1{font-weight:800;font-size:clamp(50px,10.8vw,172px);line-height:.84;letter-spacing:-.06em}
.hero2 h1 span{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
.hero2 h1 .l2{animation-delay:.12s}.hero2 h1 .l3{animation-delay:.24s}
@keyframes rise{from{transform:translateY(40%);opacity:0}}
.hero-aside{max-width:340px;display:grid;gap:22px;padding-bottom:10px}
.hero-aside p{margin:0;color:#cfd3e6;font-size:16px}
.scroll-cue{display:flex;align-items:center;gap:12px}
.scroll-cue i{width:1px;height:40px;background:linear-gradient(var(--salmon),transparent);animation:cue 1.8s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* full-bleed project grid */
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;overflow:hidden}
.ptile{position:relative;aspect-ratio:1;overflow:hidden;text-decoration:none;isolation:isolate;display:block}
.ptile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .6s;z-index:-1}
.ptile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,8,15,.9),rgba(7,8,15,0) 55%);opacity:.7;transition:opacity .5s;z-index:-1}
.ptile:hover img{transform:scale(1.06)}
.ptile:hover::after{opacity:1}
.ptile .pc{position:absolute;left:24px;right:24px;bottom:22px;display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.ptile h3{font-weight:800;font-size:clamp(22px,2.2vw,34px);letter-spacing:-.055em;line-height:.92;margin-top:8px}
.ptile .arr{background:rgba(7,8,15,.5)}
.ptile:hover .arr{border-color:var(--salmon);color:var(--salmon);transform:rotate(-45deg)}
.ptile .num{position:absolute;top:20px;left:24px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--cream);opacity:.8}
.more{display:flex;justify-content:center;padding-block:96px 0;text-decoration:none}
.more h2{font-size:clamp(48px,9vw,140px);transition:color .3s}
.more:hover h2{color:var(--salmon)}
@media (max-width:960px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.hero-top{flex-direction:column;gap:40px}.hero-bottom .scroll-cue{display:none}}
@media (max-width:560px){.pgrid{grid-template-columns:minmax(0,1fr)}.hero2 h1{font-size:12.4vw}}

/* staggered statement */
.statement,.sat p.statement{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(40px,7.4vw,116px);line-height:.88;letter-spacing:-.06em;margin:0}
.statement span{display:block;color:#2a3156}
.statement .s2{padding-left:8%;color:#525b88}
.statement .s3{padding-left:22%;color:var(--cream)}
.statement .s4{padding-left:22%;color:var(--salmon)}

/* reveals (only armed by JS, so the page is complete without it) */
.js .rv{opacity:0;transform:translateY(60px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.js .ptile.rv{transform:translateY(-140px) rotate(-4deg);transform-origin:0 0}
.js .ptile.rv img{clip-path:inset(0 0 100% 0);transform:scale(1.25)}
.js .ptile.rv.in{transform:none;transition:transform 1.3s cubic-bezier(.2,.8,.2,1),opacity .5s}
.js .ptile.rv.in img{clip-path:inset(0 0 0 0);transform:scale(1);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1),transform 1.6s cubic-bezier(.2,.7,.2,1)}
.js .ptile.rv.in:hover img{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1!important;transform:none!important;clip-path:none!important}}

/* services accordion */
.svc-item{border-bottom:1px solid var(--line)}
.svc-item summary{list-style:none;border-bottom:0;cursor:pointer}
.svc-item summary::-webkit-details-marker{display:none}
.svc-item .arr{font-size:20px;font-weight:400;line-height:1}
.svc-item[open] .arr{transform:rotate(45deg);border-color:var(--salmon);color:var(--salmon);background:rgba(255,122,102,.08)}
.svc-item[open] .svc-row::before{width:3px}
.svc-list{list-style:none;margin:0;padding:0 8px 32px calc(120px + 32px + 8px);display:flex;flex-wrap:wrap;gap:8px}
.svc-list li{font-size:14px;border:1px solid var(--line);background:rgba(7,8,15,.4);padding:8px 14px;border-radius:100px;color:#d7dbee}
.svc-item[open] .svc-list li{animation:chip .5s cubic-bezier(.2,.7,.2,1) both}
.svc-item[open] .svc-list li:nth-child(2){animation-delay:.04s}.svc-item[open] .svc-list li:nth-child(3){animation-delay:.08s}.svc-item[open] .svc-list li:nth-child(4){animation-delay:.12s}.svc-item[open] .svc-list li:nth-child(5){animation-delay:.16s}.svc-item[open] .svc-list li:nth-child(6){animation-delay:.2s}.svc-item[open] .svc-list li:nth-child(7){animation-delay:.24s}
@keyframes chip{from{opacity:0;transform:translateY(8px)}}
@media (max-width:960px){.svc-list{padding:0 4px 28px}}
.menu.mega{grid-template-columns:repeat(2,minmax(0,1fr));min-width:580px;left:-180px}

/* founder */
.founder{border-top:1px solid var(--line)}
.f-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:72px;align-items:center}
.f-photo{margin:0;position:relative;border-radius:3px;overflow:hidden;isolation:isolate}
.f-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.92) contrast(1.04)}
.f-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,8,15,.75),transparent 35%),linear-gradient(135deg,rgba(238,59,47,.0) 60%,rgba(238,59,47,.18));pointer-events:none}
.f-photo figcaption{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;display:flex;justify-content:space-between;color:var(--cream)}
.f-copy p{color:#b9bfda;max-width:36em;margin:0 0 18px}
.f-copy .f-intro{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.2vw,30px);line-height:1.18;letter-spacing:-.04em;color:var(--cream);margin:28px 0 24px}
.f-sign{display:flex;flex-direction:column;gap:6px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.sig{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.05em;font-size:24px;background:var(--heat);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:960px){.f-grid{grid-template-columns:minmax(0,1fr);gap:40px}.f-photo{max-width:520px}}
#about,.founder,footer{overflow:hidden}
.hero2>.wrap{width:100%}
/* founder, calmer */
.founder{padding-block:96px}
.f-grid{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:72px;align-items:start;max-width:1080px}
.f-photo img{aspect-ratio:4/5;filter:none}
.f-photo::after{background:linear-gradient(0deg,rgba(7,8,15,.7),transparent 30%)}
.f-photo figcaption{font-size:10px}
.founder h2{font-size:clamp(32px,3.6vw,52px)}
.f-copy .f-intro{font-size:clamp(19px,1.7vw,23px);font-weight:500;letter-spacing:-.025em;margin:22px 0 20px;max-width:30em}
.f-copy p{font-size:16px}
.f-sign{margin-top:24px;padding-top:18px}
.sig{font-size:16px;background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--cream);letter-spacing:-.03em}
@media (max-width:760px){.f-grid{grid-template-columns:minmax(0,1fr)}.f-photo{max-width:300px}}
/* landing: singer */
.hero2.singer .photo{background-color:#04111a;background-repeat:no-repeat;background-size:auto 122%;background-position:84% 20%}
.hero2.singer .photo::after{background:linear-gradient(90deg,rgba(7,8,15,.96) 0%,rgba(7,8,15,.55) 38%,rgba(7,8,15,0) 66%),linear-gradient(0deg,var(--ink) 0%,rgba(7,8,15,0) 40%)}
.hero2.singer .lattice{-webkit-mask-image:radial-gradient(ellipse 42% 75% at 74% 40%,#000 10%,transparent 72%);mask-image:radial-gradient(ellipse 42% 75% at 74% 40%,#000 10%,transparent 72%)}
@media (max-width:760px){.hero2.singer .photo{background-size:cover;background-position:62% 30%}.hero2.singer .photo::after{background:linear-gradient(0deg,var(--ink) 8%,rgba(7,8,15,.35) 60%,rgba(7,8,15,.6) 100%)}}

/* menu: the spike mark lands on the item you hover */
.menu{transform:translateY(-12px) scaleY(.96);transform-origin:top}
.menu a{position:relative;transition:padding .35s cubic-bezier(.2,.7,.2,1),background .25s}
.menu a::before{content:"";position:absolute;left:12px;top:50%;width:12px;height:12px;margin-top:-6px;background:var(--heat);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg %3E%3Crect x='10' y='0' width='4' height='8.5'/%3E%3Crect x='10' y='15.5' width='4' height='8.5'/%3E%3Crect x='0' y='10' width='8.5' height='4'/%3E%3Crect x='15.5' y='10' width='8.5' height='4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg %3E%3Crect x='10' y='0' width='4' height='8.5'/%3E%3Crect x='10' y='15.5' width='4' height='8.5'/%3E%3Crect x='0' y='10' width='8.5' height='4'/%3E%3Crect x='15.5' y='10' width='8.5' height='4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  opacity:0;transform:rotate(-90deg) scale(.3);transition:opacity .25s,transform .45s cubic-bezier(.2,.9,.3,1.3)}
.menu a:hover,.menu a:focus-visible{padding-left:34px;background:linear-gradient(90deg,rgba(238,59,47,.16),rgba(238,59,47,0))}
.menu a:hover::before,.menu a:focus-visible::before{opacity:1;transform:none}
.menu a{opacity:0;transform:translateY(-6px)}
.dd:hover .menu a,.dd.open .menu a,.dd:focus-within .menu a{opacity:1;transform:none;transition:opacity .3s,transform .4s cubic-bezier(.2,.7,.2,1),padding .35s cubic-bezier(.2,.7,.2,1),background .25s}
.dd .menu a:nth-child(2){transition-delay:.02s}.dd .menu a:nth-child(3){transition-delay:.04s}.dd .menu a:nth-child(4){transition-delay:.06s}.dd .menu a:nth-child(5){transition-delay:.08s}.dd .menu a:nth-child(6){transition-delay:.1s}.dd .menu a:nth-child(7){transition-delay:.12s}.dd .menu a:nth-child(8){transition-delay:.14s}
.dd .menu a:hover{transition-delay:0s!important}
.dd>button{position:relative}
.dd>button::after{content:"";position:absolute;left:0;right:16px;bottom:-26px;height:2px;background:var(--heat);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.dd:hover>button::after,.dd.open>button::after{transform:scaleX(1)}
.menu-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px;padding:12px 12px 4px;border-top:1px solid var(--line)}
.menu-foot .spike{width:14px;height:14px}

/* copy that flows in, word by word */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.w>span{display:inline-block}
.js .split .w>span{transform:translateY(110%)}
.js .split.flow .w>span{transform:none;transition:transform 1s cubic-bezier(.2,.75,.2,1)}
.step p{min-height:3.2em}
@media (prefers-reduced-motion:reduce){.js .split .w>span{transform:none!important}}
.hero2.singer .photo{background-size:auto 112%;background-position:right -40px top 0}

/* signal band (replaces the plain ticker) */
.band{position:relative;overflow:hidden;border-block:1px solid var(--line);padding-block:34px 30px;background:var(--ink);isolation:isolate}
.band::before{content:"";position:absolute;inset:-60px;z-index:-1;background-image:linear-gradient(rgba(150,162,220,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(150,162,220,.07) 1px,transparent 1px);background-size:48px 48px;animation:gridpan 24s linear infinite}
@keyframes gridpan{to{transform:translate(48px,48px)}}
.band::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:-30%;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,122,102,.10),transparent);animation:scan 7s cubic-bezier(.45,0,.55,1) infinite}
@keyframes scan{0%{left:-30%}60%,100%{left:110%}}
.band .rail{display:flex;width:max-content;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.band .rail-wrap{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.band .r1{animation:roll 110s linear infinite}
.band .r2{animation:rollr 140s linear infinite;margin-top:18px}
.band:hover .r1,.band:hover .r2{animation-play-state:paused}
@keyframes rollr{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.band .r1 span{display:inline-flex;align-items:center;gap:22px;padding-right:56px;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.05em;font-size:clamp(28px,3.4vw,46px);line-height:1;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(239,230,216,.42);transition:color .4s}
.band .r1 span:nth-child(3n+1){color:var(--cream);-webkit-text-stroke:0}
.band .r1 span i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--salmon);-webkit-text-stroke:0;align-self:flex-start;margin-top:4px}
.band .r2 span{display:inline-flex;align-items:center;gap:14px;padding-right:34px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#5d6795;white-space:nowrap}
.band .r2 span::before{content:"";width:6px;height:6px;border:1px solid var(--salmon);transform:rotate(45deg)}
.band .corner{position:absolute;z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:#4b5480;text-transform:uppercase}
.band .c1{top:10px;left:max(16px,env(safe-area-inset-left,0px))}.band .c2{top:10px;right:max(16px,env(safe-area-inset-right,0px))}
.band .c2 b{color:var(--salmon);font-weight:400}

/* services grid with live signal lines */
.svc-wrap{position:relative;margin-top:24px}
.feed{position:relative;height:72px;width:1px;margin:0 auto;background:var(--line);overflow:hidden}
.feed::after{content:"";position:absolute;left:0;width:1px;height:40%;background:linear-gradient(transparent,var(--salmon));animation:feed 2.2s cubic-bezier(.6,0,.4,1) infinite}
@keyframes feed{from{top:-40%}to{top:100%}}
.svc-grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.svc-grid canvas{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);pointer-events:none;z-index:2}
.tile{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;gap:12px;min-height:250px;padding:26px 26px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);cursor:pointer;background:transparent;transition:background .5s cubic-bezier(.16,1,.3,1)}
.tile:hover,.tile:focus-visible{background:radial-gradient(ellipse 90% 80% at 0% 0%,rgba(238,59,47,.14),transparent 70%),rgba(20,28,66,.35)}
.tile:focus-visible{outline:2px solid var(--salmon);outline-offset:-2px}
.tile .top{display:flex;justify-content:space-between;align-items:center}
.tile .top .no{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--salmon)}
.tile h3{font-weight:800;font-size:clamp(22px,2vw,28px);letter-spacing:-.045em;line-height:.95;margin-top:auto}
.tile p{margin:0;color:#a9b0cd;font-size:14.5px;line-height:1.5}
.tile .more-btn{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding-top:14px;border-top:1px dashed var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tile .more-btn b{width:26px;height:26px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-weight:400;font-size:15px;color:var(--cream);transition:all .4s cubic-bezier(.16,1,.3,1)}
.tile:hover .more-btn b{background:var(--heat);border-color:transparent;color:var(--ink);transform:rotate(90deg)}
.tile:hover .more-btn{color:var(--cream)}
.tile .spike{position:absolute;right:22px;top:24px;width:12px;height:12px;opacity:0;transform:scale(.4);transition:all .5s cubic-bezier(.16,1,.3,1)}
.tile:hover .spike{opacity:1;transform:none}
.js .tile.rv{opacity:0;transform:translateY(48px) scale(.94);filter:blur(6px)}
.js .tile.rv.in{opacity:1;transform:none;filter:none;transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1.3s cubic-bezier(.16,1,.3,1),filter 1s cubic-bezier(.16,1,.3,1)}
@media (max-width:960px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.svc-grid{grid-template-columns:minmax(0,1fr)}.tile{min-height:0}}

/* service drawer */
.drawer{position:fixed;inset:0;z-index:50;display:grid;justify-items:end;visibility:hidden;pointer-events:none}
.drawer.open{visibility:visible;pointer-events:auto}
.drawer .scrim{position:absolute;inset:0;background:rgba(4,5,10,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .5s}
.drawer.open .scrim{opacity:1}
.drawer .panel{position:relative;width:min(520px,100%);height:100%;overflow:auto;background:var(--night);border-left:1px solid var(--line);padding:calc(28px + env(safe-area-inset-top,0px)) max(28px,env(safe-area-inset-right,0px)) 40px 32px;transform:translateX(100%);transition:transform .7s cubic-bezier(.16,1,.3,1)}
.drawer.open .panel{transform:none}
.drawer .close{all:unset;cursor:pointer;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--cream);font-size:20px;float:right}
.drawer .close:hover{border-color:var(--salmon);color:var(--salmon)}
.drawer h3{font-size:clamp(34px,4vw,48px);font-weight:800;letter-spacing:-.055em;line-height:.9;margin:56px 0 18px}
.drawer p{color:#b9bfda;margin:0 0 28px}
.drawer ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.drawer li{display:flex;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);color:var(--cream);font-weight:600;letter-spacing:-.02em;opacity:0;transform:translateX(24px)}
.drawer.open li{opacity:1;transform:none;transition:opacity .5s,transform .7s cubic-bezier(.16,1,.3,1)}
.drawer li span{font-family:var(--mono);font-size:11px;color:var(--salmon);font-weight:400;letter-spacing:.1em}
.drawer .btn{margin-top:32px}
.stack .l3{display:block}.stack .l3 .spike{display:inline-block;vertical-align:top;margin-left:.1em}

/* ===== v3: softer shapes, cursor, live grid, page curtain ===== */
.hero2.singer .photo{background-size:auto 112%;background-position:right -130px top 0}
.hero2.singer .photo::after{background:linear-gradient(90deg,rgba(7,8,15,.94) 0%,rgba(7,8,15,.6) 40%,rgba(7,8,15,0) 62%),linear-gradient(0deg,var(--ink) 0%,rgba(7,8,15,0) 38%)}
.hero2 .lattice{display:none}
#heroGrid{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}

/* buttons: pill with a fine line, fill sweeps in */
.btn{border-radius:100px;position:relative;overflow:hidden;isolation:isolate}
.btn-go{background:rgba(238,59,47,.08);border:1px solid rgba(255,122,102,.65);color:var(--cream)}
.nav nav a.btn-go{color:var(--cream)}
.btn-go::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--heat);border-radius:inherit;transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.btn-go:hover::before{transform:scaleX(1)}
.btn-go:hover,.nav nav a.btn-go:hover{color:var(--ink);box-shadow:0 0 34px rgba(238,59,47,.35)}
.btn-go .dot{background:var(--salmon);box-shadow:0 0 0 0 rgba(255,122,102,.6);animation:ping 2s ease-out infinite;transition:background .3s}
.btn-go:hover .dot{background:var(--ink)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,122,102,.55)}80%,100%{box-shadow:0 0 0 9px rgba(255,122,102,0)}}
.btn-ghost{border-radius:100px}

/* rounder surfaces */
.callsheet,.contact-box,.menu,.p-img,.f-photo,.proj .img,.gallery img{border-radius:20px}
.mail code{border-radius:100px;padding:13px 20px}
.steps{border-radius:20px;overflow:hidden}
.cue .s{border-radius:100px;padding:3px 9px}

/* services: line-drawn cards with a running edge light */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
.svc-grid{border:0;gap:12px}
.svc-grid canvas{display:none}
.tile{border:1px solid var(--line);border-radius:20px;background:rgba(12,16,34,.35);overflow:hidden;isolation:isolate}
.tile::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--a),transparent 0 70%,var(--salmon) 82%,var(--red) 88%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .4s;pointer-events:none}
.tile:hover::before,.tile:focus-visible::before{opacity:1;animation:edge 2.4s linear infinite}
@keyframes edge{to{--a:360deg}}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(238,59,47,.16),transparent 70%);opacity:0;transition:opacity .4s}
.tile:hover::after{opacity:1}
.tile:hover,.tile:focus-visible{background:rgba(12,16,34,.55)}
.tile .more-btn{border-top:0;padding-top:4px}
.feed{height:96px}
.svc-lines{position:relative;height:1px;margin:0 0 24px;background:linear-gradient(90deg,transparent,var(--line) 15%,var(--line) 85%,transparent)}
.svc-lines::after{content:"";position:absolute;top:0;height:1px;width:22%;background:linear-gradient(90deg,transparent,var(--salmon),transparent);animation:run 4s cubic-bezier(.6,0,.4,1) infinite}
@keyframes run{from{left:-22%}to{left:100%}}

/* cursor: the spike becomes the pointer over images */
.cursor{position:fixed;left:0;top:0;z-index:200;pointer-events:none;width:0;height:0;opacity:0;transition:opacity .3s}
.cursor.on{opacity:1}
.cursor .ring{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(239,230,216,.55);transition:transform .5s cubic-bezier(.16,1,.3,1),background .4s,border-color .4s}
.cursor .dotc{position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%;background:var(--salmon);transition:opacity .3s}
.cursor .spk{position:absolute;left:-14px;top:-14px;width:28px;height:28px;color:var(--cream);opacity:0;transform:scale(.3) rotate(-90deg);transition:opacity .35s,transform .6s cubic-bezier(.16,1,.3,1)}
.cursor .spk svg{width:100%;height:100%;display:block;animation:tick 1s cubic-bezier(.7,0,.2,1) infinite}
.cursor .lbl{position:absolute;left:30px;top:-8px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);opacity:0;transform:translateX(-6px);transition:all .4s cubic-bezier(.16,1,.3,1);white-space:nowrap}
.cursor.link .ring{transform:scale(1.5);border-color:var(--salmon)}
.cursor.media .ring{transform:scale(2.4);background:rgba(238,59,47,.85);border-color:transparent}
.cursor.media .spk{opacity:1;transform:none}
.cursor.media .dotc{opacity:0}
.cursor.media .lbl{opacity:1;transform:none;left:52px}
@media (pointer:fine){.has-cursor .ptile,.has-cursor .hero2,.has-cursor .p-img,.has-cursor .gallery img,.has-cursor .f-photo{cursor:none}}

/* page curtain between pages */
.curtain{position:fixed;inset:0;z-index:300;background:var(--ink);display:grid;place-items:center;pointer-events:none;transform:translateY(-101%)}
.curtain::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--heat)}
.curtain .spike{width:44px;height:44px}
.js .curtain.boot{transform:none;animation:lift 1s cubic-bezier(.76,0,.24,1) .25s forwards}
@keyframes lift{to{transform:translateY(-101%)}}
.curtain.leave{animation:drop .7s cubic-bezier(.76,0,.24,1) forwards}
@keyframes drop{from{transform:translateY(101%)}to{transform:none}}

/* load: copy falls into place after the curtain lifts */
.hero2 h1 span,.p-title span{animation:fall 1.3s cubic-bezier(.16,1,.3,1) both;animation-delay:.75s}
.hero2 h1 .l2,.p-title .l3{animation-delay:.87s}.hero2 h1 .l3{animation-delay:.99s}
@keyframes fall{from{transform:translateY(-70%) rotate(-2deg);opacity:0;filter:blur(8px)}}
.hero-top>*{animation:fadeup 1.1s cubic-bezier(.16,1,.3,1) both;animation-delay:1.1s}
.hero-top .side{animation-delay:1.25s}
@keyframes fadeup{from{transform:translateY(16px);opacity:0}}
.hero2 .photo{animation:settle 2.6s cubic-bezier(.16,1,.3,1) .4s both}
@media (prefers-reduced-motion:reduce){.curtain{display:none}.cursor{display:none}}

/* plus, not X: the mark rests as a plus and ticks a quarter turn */
.band .r2 span::before{width:9px;height:9px;border:0;transform:none;background:var(--salmon);clip-path:polygon(40% 0,60% 0,60% 40%,100% 40%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%,0 40%,40% 40%)}

/* giant ghost mark knocked into the pictures */
.ghost{position:absolute;pointer-events:none;color:var(--cream);mix-blend-mode:overlay;opacity:.32;z-index:0}
.ghost svg{display:block;width:100%;height:100%}
.ptile .ghost{width:120%;height:120%;left:-10%;top:-10%;transition:transform 1.4s cubic-bezier(.16,1,.3,1),opacity .6s}
.ptile:nth-child(2n) .ghost{left:30%;top:-40%}
.ptile:nth-child(3n) .ghost{left:-45%;top:20%}
.ptile:hover .ghost{transform:rotate(90deg) scale(1.08);opacity:.5}
.ptile .pc,.ptile .num{z-index:1}
.hero-ghost{position:absolute;z-index:-1;right:-6vw;top:50%;width:min(78vw,1100px);aspect-ratio:1;transform:translateY(-50%);pointer-events:none}
.hero-ghost .ghost{position:absolute;inset:0;opacity:.09;mix-blend-mode:screen;color:var(--salmon);animation:slowturn 60s linear infinite}
@keyframes slowturn{to{transform:rotate(360deg)}}

/* cross composition: type set around the arms of the mark */
.cross{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;padding-block:24px;isolation:isolate}
.arm{position:absolute;background:var(--line);overflow:hidden}
.arm-v{left:50%;top:0;bottom:0;width:1px}
.arm-h{left:0;right:0;top:var(--cy,50%);height:1px}
.arm-v::after,.arm-h::after{content:"";position:absolute;background:linear-gradient(var(--dir,180deg),transparent,var(--salmon),transparent)}
.arm-v::after{left:0;width:1px;height:30%;animation:armv 3.6s cubic-bezier(.6,0,.4,1) infinite}
.arm-h::after{top:0;height:1px;width:24%;--dir:90deg;animation:armh 4.4s cubic-bezier(.6,0,.4,1) infinite .8s}
@keyframes armv{from{top:-30%}to{top:100%}}
@keyframes armh{from{left:-24%}to{left:100%}}
.core-mark{position:absolute;left:50%;top:var(--cy,50%);width:64px;height:64px;transform:translate(-50%,-50%);display:grid;place-items:center;background:var(--night);border-radius:50%;z-index:2}
.core-mark .spike{width:30px;height:30px}
.vlabel{position:absolute;left:calc(50% + 10px);top:0;writing-mode:vertical-rl;font-size:10px;color:#5d6795}
.hlabel{position:absolute;left:0;top:calc(var(--cy,50%) - 22px);font-size:10px;color:#5d6795}
.vword{position:absolute;left:50%;bottom:-.1em;transform:translateX(-58%) rotate(180deg);writing-mode:vertical-rl;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.06em;font-size:clamp(90px,14vw,220px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(239,230,216,.12);z-index:-1;pointer-events:none}
.q{padding:44px 56px}
.q1,.q3{text-align:right;justify-self:end}
.q1,.q2{align-self:end}
.cx-big{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.06em;line-height:.86;font-size:clamp(44px,6.4vw,100px);color:var(--cream)}
.cx-big span{display:block}
.cx-big .in1{margin-right:-.6em;color:#525b88}
.cx-big.hot{color:var(--red)}
.cx-big .in2{margin-left:1.1em;background:linear-gradient(90deg,var(--salmon),var(--cream));-webkit-background-clip:text;background-clip:text;color:transparent}
.cx-small{margin:0;max-width:24em;color:#b9bfda;font-size:16px}
.cx-num{margin:0;display:inline-flex;align-items:flex-end;gap:16px}
.cx-num b{font-family:var(--display);font-weight:800;font-size:clamp(90px,12vw,190px);letter-spacing:-.07em;line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--salmon)}
.cx-num span{text-align:left;color:var(--cream);padding-bottom:10px}
@media (max-width:760px){
  .cross{grid-template-columns:minmax(0,1fr)}
  .arm,.core-mark,.vlabel,.hlabel,.vword{display:none}
  .q{padding:24px 0;text-align:left!important;justify-self:start!important}
  .cx-big .in1{margin-right:0}.cx-big .in2{margin-left:.6em}
}
.sat .cross .cx-big{font-size:clamp(44px,6.4vw,100px);max-width:none;color:var(--cream)}
.sat .cross .cx-big.hot{color:var(--red)}
.sat .cross .cx-small{font-size:17px;max-width:24em}
.sat .cross .cx-num{font-size:inherit}
.ghost{mix-blend-mode:soft-light;opacity:.38}
.ptile .ghost{width:92%;height:92%;left:4%;top:4%}
.ptile:nth-child(2n) .ghost{left:28%;top:-18%}
.ptile:nth-child(3n) .ghost{left:-22%;top:24%}
.ptile:hover .ghost{opacity:.55}
.hero-ghost .ghost{opacity:.07;animation:ghosttick 6s cubic-bezier(.7,0,.2,1) infinite}
@keyframes ghosttick{0%,80%{transform:rotate(0)}100%{transform:rotate(90deg)}}
.ghost{opacity:.28}.ptile:hover .ghost{opacity:.45}

/* showreel strip */
.reel{position:relative;overflow:hidden;height:min(100vh,860px);min-height:560px;isolation:isolate;border-block:1px solid var(--line);margin-top:96px;touch-action:pan-y;user-select:none}
.reel-bg{position:absolute;inset:0;z-index:-2}
.reel-bg img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;filter:blur(2px) brightness(.32) saturate(1.1);opacity:0;transition:opacity 1.2s cubic-bezier(.16,1,.3,1),transform 8s linear;transform:scale(1.04)}
.reel-bg img.on{opacity:1;transform:scale(1.1)}
.reel::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 80% 60% at 50% 50%,transparent,rgba(7,8,15,.75)),linear-gradient(0deg,rgba(7,8,15,.7),transparent 30%,transparent 70%,rgba(7,8,15,.6))}
.reel-head{position:absolute;top:36px;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;z-index:2}
.reel-head h2{font-size:clamp(34px,4.4vw,64px)}
.reel-track{position:absolute;left:0;right:0;top:50%;height:0}
.rc{position:absolute;top:0;left:0;width:var(--cw,15vw);border-radius:10px;overflow:hidden;will-change:transform,height;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.rc img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.rc::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(239,230,216,.12)}
.rc.c::after{box-shadow:inset 0 0 0 1px rgba(255,122,102,.7)}
.reel-cap{position:absolute;left:0;right:0;bottom:44px;text-align:center;z-index:2;display:grid;justify-items:center;gap:10px;padding-inline:16px}
.reel-cap h3{font-weight:800;font-size:clamp(26px,3vw,44px);letter-spacing:-.055em;line-height:.95}
.reel-cap q{display:block;max-width:34em;color:#c9cde2;font-size:16px;quotes:"\201C" "\201D"}
.reel-cap>*{transition:opacity .5s,transform .7s cubic-bezier(.16,1,.3,1)}
.reel-cap.swap>*{opacity:0;transform:translateY(10px)}
.reel-hint{display:flex;align-items:center;gap:10px}
.reel-hint i{width:28px;height:1px;background:var(--salmon);position:relative;overflow:hidden}
.reel-hint i::after{content:"";position:absolute;inset:0;background:var(--cream);animation:hint 1.6s ease-in-out infinite}
@keyframes hint{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (max-width:760px){.reel{height:640px}.rc{--cw:42vw}.reel-head .reel-hint{display:none}}
.reel-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
.reel-bg img{filter:blur(14px) brightness(.3) saturate(1.15)}
.reel-cap{bottom:36px}
/* cursor v2: just a small red plus, no lag */
.cursor .ring,.cursor .dotc,.cursor .lbl{display:none!important}
.cursor .spk{left:-9px;top:-9px;width:18px;height:18px;color:var(--red);opacity:1!important;transform:none!important;transition:none;filter:drop-shadow(0 0 4px rgba(238,59,47,.6))}
.cursor.link .spk{transform:scale(1.25)!important;color:var(--salmon)}
.cursor.media .spk{transform:scale(1.35)!important}
@media (pointer:fine){.has-cursor,.has-cursor *{cursor:none!important}}