/* Layout: full-bleed WebGL lens hero framed like a viewfinder; the iris opens onto the FMS logo. Below, one 1200px column of frosted-glass panels floating over slow tungsten/daylight light pools. Dark-first, with a light "daylight studio" theme. */
:root{
  --ink:#050c1d;
  --ink-rgb:5,12,29;--fg-rgb:233,238,252;--tungsten-rgb:74,132,255;--daylight-rgb:143,179,255;
  --panel:#0a1530;
  --line:#1b2b55;
  --fg:#e9eefc;
  --muted:#94a3c8;
  --tungsten:#4a84ff;
  --on-accent:#ffffff;
  --daylight:#8fb3ff;
  --grad:linear-gradient(120deg,#0f2a7a 0%,#1d4ed8 55%,#3b74f6 100%);
  --grad-text:linear-gradient(100deg,#ffffff 0%,#cddcff 55%,#8fb3ff 100%);
  --rec:#ff5a4e;
  --glass:rgba(13,28,66,.5);
  --glass-strong:rgba(8,18,46,.76);
  --glass-line:rgba(150,180,255,.14);
  --glass-hi:rgba(190,210,255,.18);
  --glass-sheen:rgba(170,195,255,.07);
  --shadow:rgba(0,4,18,.78);
  --orb-warm:rgba(29,78,216,.40);
  --orb-cool:rgba(59,116,246,.22);
  --orb-violet:rgba(30,40,150,.30);
  --f-display:"Big Shoulders Display","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --f-body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter:clamp(16px,4vw,48px);
  --radius:18px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ink:#e9eefb;--ink-rgb:233,238,251;--fg-rgb:10,22,51;--tungsten-rgb:29,78,216;--daylight-rgb:30,58,138; --panel:#f6f8fe;--line:#c5d0ec;--fg:#0a1633;--muted:#475782;
  --tungsten:#1d4ed8;--on-accent:#ffffff;--daylight:#1e3a8a;--rec:#e0372b;
  --grad:linear-gradient(120deg,#0f2a7a 0%,#1d4ed8 55%,#2f66f0 100%);
  --grad-text:linear-gradient(100deg,#0a1633 0%,#1e3a8a 50%,#1d4ed8 100%);
  --glass:rgba(255,255,255,.52);--glass-strong:rgba(255,255,255,.78);--glass-line:rgba(15,35,90,.12);--glass-hi:rgba(255,255,255,.9);--glass-sheen:rgba(255,255,255,.55);--shadow:rgba(15,35,100,.26);
  --orb-warm:rgba(29,78,216,.26);--orb-cool:rgba(80,130,255,.22);--orb-violet:rgba(40,50,170,.16);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --ink:#e9eefb;--ink-rgb:233,238,251;--fg-rgb:10,22,51;--tungsten-rgb:29,78,216;--daylight-rgb:30,58,138; --panel:#f6f8fe;--line:#c5d0ec;--fg:#0a1633;--muted:#475782;
  --tungsten:#1d4ed8;--on-accent:#ffffff;--daylight:#1e3a8a;--rec:#e0372b;
  --grad:linear-gradient(120deg,#0f2a7a 0%,#1d4ed8 55%,#2f66f0 100%);
  --grad-text:linear-gradient(100deg,#0a1633 0%,#1e3a8a 50%,#1d4ed8 100%);
  --glass:rgba(255,255,255,.52);--glass-strong:rgba(255,255,255,.78);--glass-line:rgba(15,35,90,.12);--glass-hi:rgba(255,255,255,.9);--glass-sheen:rgba(255,255,255,.55);--shadow:rgba(15,35,100,.26);
  --orb-warm:rgba(29,78,216,.26);--orb-cool:rgba(80,130,255,.22);--orb-violet:rgba(40,50,170,.16);
  color-scheme:light;
}
:root[data-theme="dark"]{color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .4s,color .4s}
a{color:inherit}
:focus-visible{outline:2px solid var(--tungsten);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:var(--gutter)}
.ph{color:var(--tungsten);background:rgba(var(--tungsten-rgb),0.12);border:1px dashed rgba(var(--tungsten-rgb),0.55);padding:0 .35em;border-radius:5px;font-family:var(--f-mono);font-size:.9em}

/* Logo drawn as a mask so it takes the theme's text color */
.logo{display:block;height:auto;aspect-ratio:320/156;transition:filter .4s}
/* logo file is white; darken it on the light theme */
:root[data-theme="light"] .logo{filter:brightness(0) saturate(0) opacity(.88)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .logo{filter:brightness(0) saturate(0) opacity(.88)}}

/* Glass surface */
.glass{background:linear-gradient(135deg,var(--glass-sheen),transparent 42%),var(--glass);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi),0 24px 60px -34px var(--shadow)}

/* Ambient light pools behind the glass */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ambient span{position:absolute;border-radius:50%;animation:drift 26s ease-in-out infinite alternate;will-change:transform}
.ambient .a{width:46vmax;height:46vmax;left:-12vmax;top:18vh;background:radial-gradient(circle,var(--orb-warm),transparent 68%)}
.ambient .b{width:40vmax;height:40vmax;right:-10vmax;top:-6vh;background:radial-gradient(circle,var(--orb-cool),transparent 68%);animation-duration:32s}
.ambient .c{width:34vmax;height:34vmax;right:12vw;bottom:-14vh;background:radial-gradient(circle,var(--orb-violet),transparent 68%);animation-duration:38s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,-4vh) scale(1.08)}100%{transform:translate(-4vw,6vh) scale(.95)}}

/* ---------- Header ---------- */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;padding-block:12px}
.head-row{display:flex;align-items:center;gap:16px;min-height:60px;border-radius:999px;padding:8px 10px 8px 22px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand .logo{width:60px}
@media (max-width:600px){.brand .logo{width:52px}}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{text-decoration:none;font-size:14px;font-weight:500;padding:8px 14px;border-radius:999px;color:var(--muted);transition:color .2s,background .2s}
.nav a:hover{color:var(--fg);background:var(--glass-sheen)}
.theme-btn,.menu-btn{flex:none;height:42px;border-radius:999px;border:1px solid var(--glass-line);background:var(--glass-sheen);color:var(--fg);cursor:pointer;display:inline-grid;place-items:center;transition:transform .2s,border-color .2s,color .2s}
.theme-btn{width:42px}
.theme-btn:hover{border-color:var(--tungsten)}
.theme-btn svg{width:20px;height:20px}
.menu-btn{display:none;padding-inline:16px;font:500 14px var(--f-body)}
.mobile-nav{margin-top:8px;border-radius:var(--radius);padding:8px 16px}
.mobile-nav a{display:block;text-decoration:none;padding:12px 4px;font-weight:500;border-bottom:1px solid var(--glass-line)}
.mobile-nav a:last-child{border-bottom:0}
@media (max-width:820px){.head-row .nav,.head-row .head-cta{display:none}.menu-btn{display:inline-grid;margin-left:auto}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:600 15px var(--f-body);padding:13px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .2s,background .2s,border-color .2s,color .2s}
.btn.primary{background:var(--grad);color:var(--on-accent);box-shadow:0 12px 32px -14px var(--tungsten)}
.btn.primary:hover{transform:translateY(-2px)}
.btn.ghost{color:var(--fg)}
.btn.ghost:hover{border-color:var(--daylight);color:var(--daylight)}
.btn.sm{padding:10px 18px;font-size:14px}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:clamp(600px,86vh,900px);min-height:clamp(600px,86svh,900px);margin-top:-84px;padding-top:84px;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;
  background:radial-gradient(60% 70% at 72% 42%,rgba(var(--tungsten-rgb),0.2),transparent 70%),radial-gradient(50% 60% at 15% 90%,rgba(var(--daylight-rgb),0.14),transparent 70%),var(--ink)}
/* Hero video wall: columns of project tiles on a tilted 3D plane */
.wall{position:absolute;inset:0;z-index:-2;overflow:hidden;perspective:2200px;perspective-origin:62% 40%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 52%,#000 72%);mask-image:linear-gradient(90deg,transparent 0%,transparent 52%,#000 72%)}
.wall-plane{--wx:38deg;--wz:-18deg;--ws:1;--mx:0;--my:0;--cw:232px;
  position:absolute;left:66%;top:50%;height:var(--ph,1500px);will-change:transform;display:flex;gap:18px;align-items:flex-start;
  transform:translate(-50%,-50%) rotateX(calc(var(--wx) - var(--my) * 6deg)) rotateZ(calc(var(--wz) + var(--mx) * 8deg)) scale(var(--ws));
  overflow:hidden;transition:transform 2s cubic-bezier(.16,.8,.2,1)}
.hero.intro .wall-plane{--wx:6deg;--wz:0deg;--ws:.86}
.wall-col{flex:none;width:var(--cw);display:flex;flex-direction:column;gap:18px;padding-bottom:18px;animation:colUp var(--dur,60s) linear infinite;will-change:transform;backface-visibility:hidden}
.wall-col.down{animation-direction:reverse}
.hero.paused .wall-col{animation-play-state:paused}
@keyframes colUp{to{transform:translateY(calc(var(--shift,0px) * -1))}}
.tile{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/9;max-width:100%;background:var(--g);border:1px solid rgba(255,255,255,.14)}
.tile.v{aspect-ratio:9/16}
.tile .art,.tile .shade{position:absolute;inset:0}
.tile .shade{background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 30%,transparent 50%,rgba(8,10,20,.78))}
.scene-hills .art::before{content:"";position:absolute;width:24%;aspect-ratio:1;border-radius:50%;right:16%;top:16%;background:rgba(255,255,255,.75)}
.scene-hills .art::after{content:"";position:absolute;inset:auto 0 0 0;height:48%;background:rgba(10,12,22,.5);clip-path:polygon(0 60%,18% 30%,34% 52%,52% 18%,70% 46%,86% 28%,100% 44%,100% 100%,0 100%)}
.scene-portrait .art::before{content:"";position:absolute;left:50%;bottom:-6%;width:46%;height:42%;transform:translateX(-50%);border-radius:50% 50% 0 0;background:rgba(10,12,22,.62)}
.scene-portrait .art::after{content:"";position:absolute;left:50%;bottom:30%;width:19%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:rgba(10,12,22,.62)}
.tile.v.scene-portrait .art::after{width:34%;bottom:26%}
.tile.v.scene-portrait .art::before{width:80%;height:34%}
.scene-stage .art::before{content:"";position:absolute;inset:0;background:conic-gradient(from 150deg at 50% -12%,transparent 0 10deg,rgba(255,255,255,.35) 12deg 16deg,transparent 18deg 26deg,rgba(255,255,255,.22) 28deg 32deg,transparent 34deg 42deg,rgba(255,255,255,.3) 44deg 48deg,transparent 50deg)}
.scene-stage .art::after{content:"";position:absolute;inset:auto 0 0 0;height:26%;background:radial-gradient(circle at 6px 8px,rgba(10,12,22,.75) 6px,transparent 7px) 0 0/14px 12px,rgba(10,12,22,.45)}
.scene-product .art::before{content:"";position:absolute;left:50%;top:22%;width:20%;height:56%;transform:translateX(-50%);border-radius:30% 30% 10% 10%/12% 12% 6% 6%;background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.18) 40%,rgba(255,255,255,.08))}
.tile.v.scene-product .art::before{width:40%;top:28%;height:44%}
.scene-product .art::after{content:"";position:absolute;left:50%;top:76%;width:36%;height:7%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(10,12,22,.45),transparent)}
.tile .k,.tile .dur{position:absolute;top:10px;z-index:1;font:500 11px var(--f-body);color:#fff;padding:3px 9px;border-radius:999px;background:rgba(6,12,30,.62);border:1px solid rgba(255,255,255,.2)}
.tile .k{left:10px}
.tile .dur{right:10px;font-variant-numeric:tabular-nums}
.tile.live .dur{background:rgba(224,55,43,.85);border-color:transparent}
.tile .t{position:absolute;left:12px;right:12px;bottom:14px;z-index:1;color:#fff;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:19px;line-height:1.15;letter-spacing:.01em}
.tile .bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.18);z-index:1}
.tile.playing .bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p,30%);background:linear-gradient(90deg,#3b74f6,#a9c4ff);animation:play var(--pd,14s) linear infinite}
@keyframes play{from{width:0}to{width:100%}}
@media (max-width:820px){
  .wall{perspective-origin:50% 20%;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 26%,transparent 50%);mask-image:linear-gradient(180deg,#000 0%,#000 26%,transparent 50%)}
  .wall-plane{--cw:150px;--wx:36deg;--wz:-16deg;--ws:1;--ph:1100px;left:50%;top:30%;gap:12px}
  .wall-col{gap:12px;padding-bottom:12px}
  .tile{border-radius:10px}
  .tile .t{font-size:14px;left:8px;right:8px;bottom:10px}
  .tile .k,.tile .dur{font-size:9px;padding:2px 6px;top:6px}
  .tile .k{left:6px}.tile .dur{right:6px}
}

.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,var(--ink) 0%,rgba(var(--ink-rgb),0.88) 26%,rgba(var(--ink-rgb),0.35) 50%,transparent 68%),linear-gradient(0deg,var(--ink) 0%,transparent 30%),linear-gradient(180deg,var(--ink) 0%,transparent 22%)}
.hud{position:absolute;inset:96px clamp(12px,2.4vw,28px) clamp(12px,2.4vw,28px);pointer-events:none;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:rgba(var(--fg-rgb),0.78)}
.hud i{position:absolute;width:28px;height:28px;border-color:rgba(var(--fg-rgb),0.5);border-style:solid;border-width:0}
.hud .tl{top:0;left:0;border-top-width:2px;border-left-width:2px}
.hud .tr{top:0;right:0;border-top-width:2px;border-right-width:2px}
.hud .bl{bottom:0;left:0;border-bottom-width:2px;border-left-width:2px}
.hud .br{bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}
.hud .chip{position:absolute;display:flex;align-items:center;gap:8px;padding:5px 11px;border-radius:999px}
.hud .rec{top:10px;left:40px}
.hud .rec b{width:8px;height:8px;border-radius:50%;background:var(--rec);box-shadow:0 0 10px var(--rec);animation:blink 1.2s steps(2,start) infinite}
.hud .tc{top:10px;right:40px;font-variant-numeric:tabular-nums}
.hud .spec{bottom:10px;right:40px}
@keyframes blink{to{visibility:hidden}}
.hero-inner{position:relative;width:100%;padding-block:clamp(56px,10vh,110px) clamp(56px,9vh,96px)}
.eyebrow{font-family:var(--f-body);font-size:15px;font-weight:500;color:var(--tungsten);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.hero h1{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(44px,7vw,96px);line-height:1.08;padding-block:.12em .04em;letter-spacing:.005em;margin:0;max-width:10ch;text-wrap:balance}
.lede{max-width:52ch;color:rgba(var(--fg-rgb),0.82);font-size:clamp(16px,1.4vw,18px);margin:24px 0 32px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:820px){
  .hero::before{background:linear-gradient(0deg,var(--ink) 18%,rgba(var(--ink-rgb),0.82) 50%,rgba(var(--ink-rgb),0.2) 80%),linear-gradient(180deg,var(--ink) 0%,transparent 20%)}
  .hud .spec{display:none}
}

/* ---------- Ticker ---------- */
.ticker{overflow:hidden;border-radius:0;border-inline:0}
.ticker-track{display:flex;width:max-content;animation:roll 42s linear infinite}
.ticker span{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(22px,3vw,34px);letter-spacing:.04em;padding:14px 28px;white-space:nowrap;display:flex;align-items:center;gap:28px}
.ticker span::after{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--tungsten)}
@keyframes roll{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
section.block{padding-block:clamp(72px,10vw,128px)}
section[id]{scroll-margin-top:96px}
.sec-head{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;align-items:end;margin-bottom:clamp(36px,5vw,56px)}
.sec-head h2{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(36px,5.2vw,66px);line-height:1.08;padding-top:.08em;margin:0;text-wrap:balance}
.sec-head p{margin:0;color:var(--muted);max-width:48ch}
@media (max-width:820px){.sec-head{grid-template-columns:minmax(0,1fr)}}

/* Services */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;perspective:1000px}
@media (max-width:980px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.svc-grid{grid-template-columns:minmax(0,1fr)}}
.svc{--rx:0deg;--ry:0deg;--mx:50%;--my:0%;position:relative;padding:28px 26px 26px;border-radius:var(--radius);
  background:radial-gradient(380px circle at var(--mx) var(--my),rgba(var(--tungsten-rgb),0.16),transparent 50%),linear-gradient(135deg,var(--glass-sheen),transparent 42%),var(--glass);
  transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .25s ease-out,border-color .25s;min-width:0;display:flex;flex-direction:column;gap:12px}
.svc:hover{border-color:var(--tungsten)}
.svc .ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:var(--tungsten);background:var(--glass-sheen);border:1px solid var(--glass-line);transform:translateZ(30px)}
.svc .ico svg{width:24px;height:24px}
.svc h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:28px;letter-spacing:.02em;line-height:1.14;margin:6px 0 0;transform:translateZ(20px)}
.svc p{margin:0;color:var(--muted);font-size:15px}
.svc .chip{margin-top:auto;align-self:flex-start;font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:var(--daylight);border:1px solid rgba(var(--daylight-rgb),0.4);padding:4px 10px;border-radius:999px}

/* Process */
.steps-panel{border-radius:calc(var(--radius) + 6px);padding:clamp(24px,4vw,44px)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;counter-reset:step;position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:27px;height:1px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 14px)}
.steps li{counter-increment:step;position:relative;min-width:0}
.steps li::before{content:counter(step,decimal-leading-zero);display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--glass-strong);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--tungsten);font-family:var(--f-mono);font-size:15px;color:var(--tungsten);position:relative;margin-bottom:18px}
.steps h3{margin:0 0 6px;font-size:17px;font-weight:600}
.steps p{margin:0;color:var(--muted);font-size:14.5px}
@media (max-width:900px){
  .steps{grid-template-columns:minmax(0,1fr);gap:0}
  .steps::before{left:27px;right:auto;top:0;bottom:0;width:1px;height:auto;background:repeating-linear-gradient(180deg,var(--line) 0 8px,transparent 8px 14px)}
  .steps li{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:18px;padding-bottom:26px}
  .steps li:last-child{padding-bottom:0}
  .steps li::before{grid-row:span 2;margin:0}
  .steps h3{align-self:end;margin-top:6px}
}

/* Work reel */
.filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:28px;padding:6px;border-radius:999px;width:fit-content;max-width:100%}
.filters button{font:500 14px var(--f-body);color:var(--muted);background:transparent;border:1px solid transparent;padding:8px 16px;border-radius:999px;cursor:pointer;transition:all .2s}
.filters button:hover{color:var(--fg)}
.filters button[aria-pressed="true"]{background:var(--grad);color:var(--on-accent)}
@media (max-width:600px){.filters{border-radius:var(--radius)}}
.reel{--cw:clamp(220px,64vw,360px);position:relative;height:calc(var(--cw) * .5625 + 132px);perspective:1500px;overflow:hidden;touch-action:pan-y;cursor:grab;border-radius:var(--radius)}
.reel:active{cursor:grabbing}
.ring{position:absolute;left:50%;top:22px;width:var(--cw);margin-left:calc(var(--cw) / -2);transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.75,.2,1)}
.card{position:absolute;inset:0 auto auto 0;width:var(--cw);backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:opacity .6s,filter .6s;opacity:.3;filter:saturate(.5) brightness(.8)}
.card h3,.card p{transition:opacity .4s;opacity:0}
.card.is-front h3,.card.is-front p{opacity:1}
.card:not(.is-front) .thumb>span:not(.sun):not(.hills){opacity:0}
.card.is-front{opacity:1;filter:none}
.thumb{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:12px;overflow:hidden;border:1px solid var(--glass-line);box-shadow:0 24px 60px -24px var(--shadow)}
.thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.28),transparent 38%);pointer-events:none}
.thumb .sun{position:absolute;width:22%;aspect-ratio:1;border-radius:50%;right:16%;top:16%;background:rgba(255,255,255,.75)}
.thumb .hills{position:absolute;inset:auto 0 0 0;height:46%;background:rgba(10,12,22,.55);clip-path:polygon(0 60%,18% 30%,34% 52%,52% 18%,70% 46%,86% 28%,100% 44%,100% 100%,0 100%)}
.thumb .play{position:absolute;left:12px;bottom:12px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.35);display:grid;place-items:center}
.thumb .play::after{content:"";border-left:11px solid #fff;border-block:7px solid transparent;margin-left:3px}
.thumb .dur,.thumb .cat{position:absolute;font:500 11px var(--f-mono);color:#fff;padding:3px 8px;border-radius:6px;background:rgba(12,14,24,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18)}
.thumb .dur{right:10px;bottom:10px;font-variant-numeric:tabular-nums}
.thumb .cat{left:10px;top:10px;letter-spacing:.08em;text-transform:uppercase}
.card h3{margin:14px 0 2px;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:24px;line-height:1.16;letter-spacing:.02em}
.card p{margin:0;color:var(--muted);font-size:14px}
.reel-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;padding:8px 8px 8px 20px;border-radius:999px}
.reel-bar .count{font-family:var(--f-mono);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;margin-right:auto;min-width:0}
.icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--glass-line);background:var(--glass-sheen);color:var(--fg);cursor:pointer;display:grid;place-items:center;transition:border-color .2s,color .2s}
.icon-btn:hover{border-color:var(--tungsten);color:var(--tungsten)}
.icon-btn svg{width:20px;height:20px}
.note{font-size:13px;color:var(--muted);margin-top:14px}

/* Partners */
.partners{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
@media (max-width:820px){.partners{grid-template-columns:repeat(3,minmax(0,1fr))}}
.partners div{aspect-ratio:5/3;max-width:100%;border-radius:14px;display:grid;place-items:center;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;border-style:dashed}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(20px,3vw,32px);align-items:stretch}
@media (max-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
.info{border-radius:var(--radius);padding:clamp(22px,3vw,34px)}
.info .logo{width:150px;margin:4px 0 28px}
.info dl{margin:0;display:grid;gap:18px}
.info dt{font-size:13px;font-weight:500;color:var(--muted);margin-bottom:4px}
.info dd{margin:0;font-size:17px;font-weight:500;line-height:1.5;color:var(--fg);user-select:text;overflow-wrap:anywhere}
.info dd a{color:var(--fg);text-decoration:underline;text-decoration-color:rgba(var(--tungsten-rgb),.6);text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
.info dd a:hover{color:var(--daylight);text-decoration-color:currentColor}
form.brief{border-radius:var(--radius);padding:clamp(20px,3vw,32px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:600px){form.brief{grid-template-columns:minmax(0,1fr)}}
.field{display:grid;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:13px;font-weight:500;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;font:15px var(--f-body);color:var(--fg);background:var(--glass-strong);border:1px solid var(--glass-line);border-radius:12px;padding:12px 14px;transition:border-color .2s}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--tungsten)}
.brief{position:relative}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-foot small{color:var(--muted);font-size:12.5px;max-width:40ch}

/* Footer */
.site-foot{padding-block:0 32px;color:var(--muted);font-size:14px}
.foot-row{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;align-items:center;border-radius:var(--radius);padding:20px 24px}
.socials{display:flex;gap:18px;flex-wrap:wrap}
.socials a{text-decoration:none}
.socials a:hover{color:var(--tungsten)}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;padding:12px 18px;border-radius:14px;font-size:14px;font-weight:500;max-width:min(92vw,460px);background:var(--glass-strong)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker-track,.hud .rec b,.ambient span{animation:none}
  .ring,.svc{transition:none}
}
.brief button[type="submit"][disabled]{opacity:.6;cursor:progress}

/* ---------- Performance & compatibility ---------- */
@media (pointer:coarse),(max-width:820px){
  .glass{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .ambient span{animation:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.toast{background:var(--glass-strong)}
}
#process,#partners,#contact{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* ---------- Scene transitions ----------
   Hidden states only apply after main.js marks elements with .rv, so the page
   stays fully visible if JavaScript fails or motion is reduced. */
.rv{opacity:0;translate:0 32px;transition:opacity .8s cubic-bezier(.2,.7,.2,1),translate .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 80ms)}
.rv.in{opacity:1;translate:0 0}
.rv-3d{translate:0 48px;scale:.96}
.rv-3d.in{scale:1}
/* section titles: a vertical wipe, like a shutter opening on the next scene */
.sec-head.rv{opacity:1;translate:none}
.sec-head.rv h2{clip-path:inset(-.4em -1em 100% -1em);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.sec-head.rv.in h2{clip-path:inset(-.4em -1em -.4em -1em)}
.sec-head.rv p,.sec-head.rv .eyebrow{opacity:0;translate:0 14px;transition:opacity .7s .35s ease,translate .8s .35s cubic-bezier(.2,.7,.2,1)}
.sec-head.rv.in p,.sec-head.rv.in .eyebrow{opacity:1;translate:0 0}
.sec-head::after{content:"";position:absolute;left:0;right:0;bottom:-20px;height:1px;background:linear-gradient(90deg,var(--tungsten),rgba(var(--tungsten-rgb),0) 70%);transform-origin:left;transition:transform 1.3s .2s cubic-bezier(.7,0,.2,1)}
.sec-head.rv:not(.in)::after{transform:scaleX(0)}

/* hero entrance on page load */
.hero-inner > *{animation:heroIn 1s cubic-bezier(.2,.7,.2,1) both}
.hero-inner > h1{animation-name:heroWipe;animation-duration:1.2s}
.hero-inner > :nth-child(2){animation-delay:.25s}
.hero-inner > :nth-child(3){animation-delay:.4s}
.hud{animation:heroIn 1.2s .5s ease both}
@keyframes heroIn{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes heroWipe{from{clip-path:inset(-.3em -1em 100% -1em);translate:0 24px}to{clip-path:inset(-.3em -1em -.3em -1em);translate:0 0}}

/* theme switch: circular reveal from the toggle (View Transitions API) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}

@media (prefers-reduced-motion:reduce){
  .rv,.rv.in,.sec-head.rv p,.sec-head.rv .eyebrow{opacity:1;translate:none;scale:none;transition:none}
  .sec-head.rv h2{clip-path:none;transition:none}
  .sec-head::after{transition:none;transform:none}
  .hero-inner > *,.hud{animation:none}
}

/* ---------- Theme toggle: 3D coin ----------
   Moon face = dark mode, sun face = light mode. The coin shows the CURRENT mode
   and flips to the other face when the theme changes. Pure CSS state, so no flash on load. */
.theme-btn{perspective:260px}
.coin{--flip:0deg;position:relative;display:block;width:30px;height:30px;transform-style:preserve-3d;transform:rotateY(var(--flip));transition:transform .9s cubic-bezier(.45,-0.35,.25,1.35)}
:root[data-theme="light"] .coin{--flip:180deg}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .coin{--flip:180deg}}
.theme-btn:hover .coin,.theme-btn:focus-visible .coin{transform:rotateY(calc(var(--flip) + 25deg)) rotateX(14deg)}
.theme-btn:active .coin{transform:rotateY(var(--flip)) scale(.9)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face svg{display:block;width:100%;height:100%;overflow:visible}
.face-moon svg{filter:drop-shadow(0 2px 2px rgba(0,8,30,.45)) drop-shadow(0 0 5px rgba(150,180,255,.45))}
.face-sun{transform:rotateY(180deg)}
.face-sun svg{filter:drop-shadow(0 2px 2px rgba(120,50,0,.3)) drop-shadow(0 0 6px rgba(255,180,40,.55))}
.face-sun .rays{transform-origin:16px 16px;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.theme-btn:hover .face-sun .rays{transform:rotate(45deg)}
.face-moon .star{transform-box:fill-box;transform-origin:center;animation:twinkle 2.8s ease-in-out infinite}
.face-moon .star + .star{animation-delay:1.4s}
@keyframes twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.6)}}
@media (prefers-reduced-motion:reduce){.coin,.face-sun .rays{transition:none}.face-moon .star{animation:none}}

/* ---------- Content from /admin: real thumbnails and brand logos ---------- */
.tile.has-img .art{display:none}
.thumb.has-img .sun,.thumb.has-img .hills{display:none}
.card:not(.is-front) a.play{pointer-events:none}
a.play{text-decoration:none;transition:transform .2s,background .2s}
a.play:hover{transform:scale(1.08);background:rgba(255,255,255,.35)}
.partners > div{min-height:0;overflow:hidden}
.partners .has-logo{position:relative;border-style:solid;padding:0}
.partners .has-logo img{position:absolute;inset:0;margin:auto;display:block;width:60%;height:auto;max-width:86%;max-height:70%;object-fit:contain;transition:opacity .3s;opacity:0}
.partners .has-logo img.ready{opacity:1}
.partners div span{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:14px;font-weight:600;color:var(--fg);text-align:center;padding:0 10px}
/* Brand logos sit on a soft light plate so dark or colored logos stay readable in both themes */
.partners .has-logo{background:linear-gradient(160deg,rgba(255,255,255,.97),rgba(228,235,251,.94));border-color:rgba(255,255,255,.35);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 1px 0 #fff,0 18px 40px -26px rgba(0,4,18,.7);transition:transform .25s,box-shadow .25s}
.partners .has-logo:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 #fff,0 24px 44px -24px rgba(29,78,216,.55)}
@media (prefers-reduced-motion:reduce){.partners .has-logo,.partners .has-logo:hover{transition:none;transform:none}}