/* ============================================================
   PSYILHOUETTE MEDIA
   Palette + type are taken straight from the brand book:
   pure black / pure white primary, RGB accents for section themes.
   Swiss 721 BT -> Archivo, DIN Pro -> Barlow (licensed substitutes).
   Single visual world by design: this page is a display panel.
   ============================================================ */

:root{
  --void:#000000;
  --paper:#FFFFFF;

  /* brand accents, verbatim from the guidelines */
  --r:#FF4400;
  --g:#51DA4C;
  --b:#0432FF;

  /* neutrals biased a few degrees toward the blue accent
     so they read as chosen rather than inherited grey */
  --ink:#FFFFFF;
  --ash:#8E919E;
  --ash-dim:#585B68;
  --line:#1B1C22;
  --line-hi:#2E3039;
  --surface:#07070A;
  --surface-2:#0D0E13;

  --f-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-text:"Barlow","DIN Pro","Helvetica Neue",Arial,sans-serif;

  --gutter:clamp(20px,5vw,72px);
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}

a{color:inherit}

:focus-visible{
  outline:2px solid var(--b);
  outline-offset:3px;
}

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- type ---------- */

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:800;
  letter-spacing:-0.032em;
  line-height:0.98;
  text-wrap:balance;
  margin:0;
}

.eyebrow{
  font-family:var(--f-display);
  font-weight:700;
  font-size:11px;
  letter-spacing:0.19em;
  text-transform:uppercase;
  color:var(--ash);
  margin:0;
}

p{margin:0}

.lede{
  font-size:clamp(17px,1.5vw,20px);
  color:var(--ash);
  max-width:56ch;
}

/* ---------- logo mark ---------- */

.mark{display:block;height:auto;background:var(--void)}

/* ---------- header ---------- */

.nav{
  position:sticky;
  top:env(safe-area-inset-top,0px);
  z-index:60;
  background:rgba(0,0,0,0.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}

.nav__in{
  display:flex;
  align-items:center;
  gap:24px;
  height:64px;
}

.nav__brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  margin-right:auto;
}

.nav__brand .mark{width:28px}

.nav__brand b{
  font-family:var(--f-display);
  font-weight:800;
  font-size:13px;
  letter-spacing:0.13em;
  text-transform:uppercase;
}

.nav__links{
  display:flex;
  gap:26px;
  font-family:var(--f-display);
  font-weight:600;
  font-size:12px;
  letter-spacing:0.13em;
  text-transform:uppercase;
}

.nav__links a{
  text-decoration:none;
  color:var(--ash);
  transition:color .18s ease;
}
.nav__links a:hover{color:var(--paper)}

.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--f-display);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.13em;
  text-transform:uppercase;
  padding:11px 18px;
  text-decoration:none;
  border:1px solid var(--paper);
  background:var(--paper);
  color:var(--void);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{background:var(--r);border-color:var(--r);color:var(--paper)}

.btn--ghost{
  background:transparent;
  color:var(--paper);
  border-color:var(--line-hi);
}
.btn--ghost:hover{background:transparent;border-color:var(--paper);color:var(--paper)}

@media (max-width:760px){
  .nav__links{display:none}
}

/* at phone width the wordmark wrapped onto two lines and the CTA
   overlapped it; keep both on one line and drop the word last */
.nav__brand b{white-space:nowrap}
.nav__in > .btn{flex:none}

@media (max-width:560px){
  .nav__brand b{font-size:12px;letter-spacing:.1em}
  .nav__in > .btn{padding-inline:14px}
}
@media (max-width:430px){
  .nav__brand b{display:none}
}

/* ---------- hero ---------- */

.hero{
  position:relative;
  isolation:isolate;
  min-height:clamp(500px,76vh,680px);
  display:flex;
  align-items:flex-end;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}

#field{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
}

.hero__scrim{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.78) 26%,rgba(0,0,0,0) 62%),
    linear-gradient(to right,rgba(0,0,0,.72) 0%,rgba(0,0,0,0) 58%);
}

.hero__in{
  position:relative;
  z-index:2;
  width:100%;
  padding-block:44px 52px;
}

.hero h1{
  font-size:clamp(2.5rem,6.6vw,5.1rem);
  font-weight:900;
  margin-block:18px 20px;
  max-width:17ch;
}

/* RGB channel separation — the three brand accents rendered
   the way a display misconverges. Additive over black. */
.split{
  position:relative;
  display:inline-block;
  isolation:isolate;
  color:transparent;
}
.split span{
  position:absolute;
  inset:0;
  mix-blend-mode:screen;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.split span:nth-child(1){color:var(--r)}
.split span:nth-child(2){color:var(--g)}
.split span:nth-child(3){color:var(--b)}
.split.is-lit span:nth-child(1){transform:translate(-3px,-2px)}
.split.is-lit span:nth-child(3){transform:translate(3px,2px)}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

.cam{
  position:absolute;
  right:var(--gutter);
  bottom:52px;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
}

.cam__btn{
  font-family:var(--f-display);
  font-weight:700;
  font-size:11px;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--ash);
  background:rgba(0,0,0,.5);
  border:1px solid var(--line-hi);
  padding:9px 14px;
  cursor:pointer;
  transition:color .18s ease,border-color .18s ease;
}
.cam__btn:hover{color:var(--paper);border-color:var(--paper)}

.cam__note{
  font-size:11px;
  letter-spacing:0.05em;
  color:var(--ash-dim);
  max-width:24ch;
  text-align:right;
  line-height:1.4;
}

@media (max-width:900px){
  .cam{position:static;align-items:flex-start;margin-top:26px}
  .cam__note{text-align:left}
}

/* ---------- ticker ---------- */

.ticker{
  border-bottom:1px solid var(--line);
  overflow:hidden;
  padding-block:13px;
  background:var(--surface);
}
.ticker__track{
  display:flex;
  gap:0;
  width:max-content;
  animation:slide 44s linear infinite;
}
.ticker span{
  font-family:var(--f-display);
  font-weight:600;
  font-size:12px;
  letter-spacing:0.17em;
  text-transform:uppercase;
  color:var(--ash-dim);
  padding-inline:22px;
  white-space:nowrap;
}
.ticker span::after{content:"/";margin-left:22px;color:var(--line-hi)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- section scaffold ---------- */

section{scroll-margin-top:80px}

.sec{padding-block:clamp(64px,9vw,120px)}
.sec--line{border-bottom:1px solid var(--line)}

.sec__head{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-bottom:clamp(38px,5vw,62px);
}
.sec__head h1,.sec__head h2{font-size:clamp(2rem,4.4vw,3.4rem)}

@media (min-width:900px){
  .sec__head{grid-template-columns:1.05fr .95fr;align-items:end;gap:48px}
}

/* ---------- services ---------- */

.arms{
  display:grid;
  gap:1px;
  background:var(--line);
  border-block:1px solid var(--line);
}
@media (min-width:920px){
  .arms{grid-template-columns:repeat(3,1fr)}
}

.arm{
  background:var(--void);
  padding:clamp(26px,3vw,38px) clamp(22px,2.4vw,32px) clamp(30px,3.4vw,42px);
  display:flex;
  flex-direction:column;
  gap:16px;
  position:relative;
  transition:background .3s ease;
}
.arm:hover{background:var(--surface-2)}

.arm__bar{
  height:3px;
  width:54px;
  background:var(--accent);
  transition:width .35s cubic-bezier(.2,.7,.3,1);
}
.arm:hover .arm__bar{width:100%}

.arm__n{
  font-family:var(--f-display);
  font-weight:700;
  font-size:11px;
  letter-spacing:0.17em;
  text-transform:uppercase;
  color:var(--accent);
}

.arm h3{font-size:1.55rem;font-weight:800}

.arm p{color:var(--ash);font-size:15px}

.arm__tags{
  list-style:none;
  margin:6px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0;
  border-top:1px solid var(--line);
}
.arm__tags li{
  font-size:13.5px;
  color:var(--ash);
  padding-block:8px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:10px;
}
.arm__tags li::before{
  content:"";
  width:5px;height:5px;
  flex:none;
  background:var(--accent);
}

/* ---------- flagship case ---------- */

.case{
  display:grid;
  gap:0;
  border:1px solid var(--line);
  background:var(--surface);
}
@media (min-width:940px){
  .case{grid-template-columns:1.1fr .9fr}
}

.case__vis{
  position:relative;
  min-height:300px;
  background:var(--void);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
@media (min-width:940px){
  .case__vis{border-bottom:0;border-right:1px solid var(--line)}
}
#rig{position:absolute;inset:0;width:100%;height:100%;display:block}

.case__badge{
  position:absolute;
  left:18px;top:18px;
  z-index:2;
  font-family:var(--f-display);
  font-weight:700;
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--r);
  border:1px solid var(--r);
  padding:5px 9px;
  background:rgba(0,0,0,.6);
}

.case__body{
  padding:clamp(26px,3.2vw,44px);
  display:flex;
  flex-direction:column;
  gap:18px;
}
.case__body h3{font-size:clamp(1.8rem,3vw,2.5rem)}
.case__body p{color:var(--ash);font-size:15.5px}

.stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:6px;
}

.stat{background:var(--surface);padding:14px 12px}
.stat b{
  display:block;
  font-family:var(--f-display);
  font-weight:800;
  font-size:1.4rem;
  letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;
  color:var(--paper);
}
.stat span{
  display:block;
  font-size:11px;
  line-height:1.35;
  color:var(--ash-dim);
  margin-top:4px;
}

/* ---------- work slots ---------- */

.slots{
  display:grid;
  gap:14px;
  margin-top:14px;
  grid-template-columns:1fr;
}
@media (min-width:640px){.slots{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.slots{grid-template-columns:repeat(3,1fr)}}

.slot{
  border:1px dashed var(--line-hi);
  background:var(--surface);
  min-height:188px;
  max-width:100%;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:12px;
}
.slot__n{
  font-family:var(--f-display);
  font-weight:700;
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--accent);
}
.slot p{font-size:14px;color:var(--ash-dim);line-height:1.45}
.slot b{
  font-family:var(--f-display);
  font-weight:700;
  font-size:15px;
  color:var(--ash);
  letter-spacing:-0.01em;
}

/* ---------- studio / founders ---------- */

.people{
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:8px;
}
@media (min-width:760px){.people{grid-template-columns:repeat(2,1fr)}}

.person{
  background:var(--void);
  padding:clamp(24px,3vw,36px);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.person__role{
  font-family:var(--f-display);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
}
.person h3{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.person a{
  color:var(--ash);
  text-decoration:none;
  font-size:15px;
  font-variant-numeric:tabular-nums;
  border-bottom:1px solid var(--line-hi);
  align-self:flex-start;
  transition:color .18s ease,border-color .18s ease;
}
.person a:hover{color:var(--paper);border-color:var(--paper)}

/* ---------- contact ---------- */

.contact{
  display:grid;
  gap:clamp(30px,4vw,56px);
}
@media (min-width:900px){.contact{grid-template-columns:1.15fr .85fr;align-items:start}}

.contact h2{font-size:clamp(2.2rem,5.6vw,4.2rem)}

.contact__big{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(1.15rem,2.4vw,1.75rem);
  letter-spacing:-0.025em;
  color:var(--paper);
  text-decoration:none;
  border-bottom:2px solid var(--line-hi);
  display:inline-block;
  word-break:break-word;
  transition:border-color .18s ease,color .18s ease;
}
.contact__big:hover{border-color:var(--g);color:var(--g)}

.detail{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-block:16px;
  border-bottom:1px solid var(--line);
}
.detail:first-of-type{border-top:1px solid var(--line)}
.detail dt{
  font-family:var(--f-display);
  font-weight:700;
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ash-dim);
}
.detail dd{
  margin:0;
  font-size:15.5px;
  color:var(--ash);
  font-variant-numeric:tabular-nums;
}
.detail dd a{text-decoration:none;color:var(--ash)}
.detail dd a:hover{color:var(--paper)}

.contact__panel{
  display:flex;
  flex-direction:column;
  gap:22px;
}

/* ---------- footer ---------- */

.foot{
  border-top:1px solid var(--line);
  padding-block:clamp(40px,5vw,64px);
  background:var(--surface);
}
.foot__in{
  display:flex;
  flex-wrap:wrap;
  gap:36px;
  align-items:flex-end;
  justify-content:space-between;
}
.foot .mark{width:74px}
.foot__meta{
  font-size:12.5px;
  color:var(--ash-dim);
  letter-spacing:0.03em;
  line-height:1.7;
}
.foot__links{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-top:16px;
}
.foot__links a{
  font-family:var(--f-display);
  font-weight:700;
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ash);
  text-decoration:none;
  border-bottom:1px solid var(--line-hi);
  padding-bottom:3px;
  transition:color .18s ease,border-color .18s ease;
}
.foot__links a:hover{color:var(--paper);border-color:var(--paper)}
.foot__rgb{display:flex;gap:0;margin-top:20px}
.foot__rgb i{width:34px;height:4px;display:block}

/* ---------- Visora panel ---------- */

[hidden]{display:none !important}

.viz{
  border:1px solid var(--line);
  background:var(--surface);
  margin-bottom:16px;
  --accent:var(--r);
}
.viz__head{
  padding:clamp(24px,3vw,38px) clamp(22px,2.6vw,36px) 20px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.viz__head h3{font-size:clamp(1.9rem,3.4vw,2.8rem)}
.viz__head p{color:var(--ash);font-size:15.5px;max-width:68ch}
.viz__head strong{color:var(--paper);font-weight:600}
.viz__deploy{
  font-size:14px !important;
  padding-top:2px;
  border-top:1px solid var(--line);
  margin-top:2px;
}

/* one stage, three modes */
.viz__modes{
  display:flex;
  gap:1px;
  background:var(--line);
  border-top:1px solid var(--line);
}
.viz__mode{
  flex:1 1 0;
  background:var(--void);
  color:var(--ash);
  border:0;
  border-bottom:2px solid transparent;
  font-family:var(--f-display);
  font-weight:800;
  font-size:11.5px;
  letter-spacing:.15em;
  text-transform:uppercase;
  padding:15px 10px;
  cursor:pointer;
  transition:color .18s ease,background .18s ease,border-color .18s ease;
}
.viz__mode:hover{color:var(--paper);background:var(--surface-2)}
.viz__mode[aria-selected="true"]{
  color:var(--paper);
  background:var(--surface-2);
  border-bottom-color:var(--accent);
}

.viz__stage{
  position:relative;
  background:var(--void);
  border-block:1px solid var(--line);
  aspect-ratio:1400/586;
  max-width:100%;
  overflow:hidden;
  -webkit-user-select:none;
  user-select:none;
}
.viz__stage.is-spin{cursor:grab;touch-action:pan-y}
.viz__stage.is-spin:active{cursor:grabbing}
.viz__stage:focus-visible{outline:2px solid var(--b);outline-offset:3px}
.viz__stage.is-swap .lyr[data-set="views"]{opacity:.2}

.lyr{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  display:block;
  pointer-events:none;
  -webkit-user-drag:none;
  transition:opacity .2s ease;
}
.lyr[data-set="sun"],
.lyr[data-set="spin"]{transition:none}

.viz__tag,
.sun__time,
.spin__hint{
  position:absolute;
  font-family:var(--f-display);
  font-weight:700;
  color:var(--paper);
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.26);
  pointer-events:none;
}
.viz__tag{
  left:14px;top:14px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  padding:5px 9px;
}
.sun__time{
  right:14px;top:14px;
  font-weight:800;font-size:15px;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  padding:5px 10px;
}
.spin__hint{
  left:50%;bottom:16px;transform:translateX(-50%);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  padding:6px 12px;
  transition:opacity .3s ease;
}

.viz__panel{padding:0 clamp(22px,2.6vw,36px)}
.viz__nav{
  display:flex;
  flex-wrap:wrap;
  gap:1px;
  background:var(--line);
  margin-inline:calc(clamp(22px,2.6vw,36px) * -1);
}
.viz__btn{
  flex:1 1 auto;
  min-width:102px;
  background:var(--void);
  color:var(--ash);
  border:0;
  border-top:2px solid transparent;
  font-family:var(--f-display);
  font-weight:700;
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:13px 10px;
  cursor:pointer;
  transition:color .18s ease,background .18s ease,border-color .18s ease;
}
.viz__btn:hover{color:var(--paper);background:var(--surface-2)}
.viz__btn[aria-selected="true"]{
  color:var(--paper);
  background:var(--surface-2);
  border-top-color:var(--accent);
}
.viz__cap{
  padding-top:18px;
  color:var(--ash);
  font-size:15px;
  max-width:74ch;
}

.sun__ctl{
  display:flex;
  align-items:center;
  gap:18px;
  padding-top:22px;
  flex-wrap:wrap;
}
.sun__lab{
  font-family:var(--f-display);
  font-weight:700;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ash-dim);
  flex:none;
}
.sun__range{
  -webkit-appearance:none;
  appearance:none;
  flex:1 1 220px;
  height:4px;
  border-radius:2px;
  background:linear-gradient(90deg,#0b1430,#c86a2a,#cfd6e0,#f2e6c4,#b4541f,#1a2247,#05060f);
  outline:none;
  cursor:pointer;
}
.sun__range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:17px;height:17px;border-radius:50%;
  background:var(--paper);
  border:2px solid var(--void);
  box-shadow:0 0 0 1px rgba(255,255,255,.5);
  cursor:grab;
}
.sun__range::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;
  background:var(--paper);
  border:2px solid var(--void);
  box-shadow:0 0 0 1px rgba(255,255,255,.5);
  cursor:grab;
}
.sun__range:focus-visible{outline:2px solid var(--b);outline-offset:6px}

.viz__foot{padding:22px clamp(22px,2.6vw,36px) clamp(24px,3vw,34px)}

/* ---------- film ---------- */

.film__stage{
  position:relative;
  background:var(--void);
  border-block:1px solid var(--line);
  aspect-ratio:16/9;
  max-width:100%;
  overflow:hidden;
}
.film__stage video{
  width:100%;
  height:100%;
  display:block;
  background:var(--void);
}
.viz__panel[data-panel="film"]{padding-top:0}
.viz__panel[data-panel="film"] .viz__cap{padding-top:18px}

/* ---------- vertical film ---------- */

.film__vert{
  border-block:1px solid var(--line);
  background:var(--void);
  padding:clamp(26px,3.2vw,44px) clamp(22px,2.6vw,36px);
}
.film__phone{
  max-width:330px;
  margin-inline:auto;
  aspect-ratio:9/16;
  background:var(--void);
  border:1px solid var(--line-hi);
  overflow:hidden;
}
.film__phone video{
  width:100%;
  height:100%;
  display:block;
  background:var(--void);
}
.viz__panel .viz__cap:first-child{padding-top:18px}

/* ---------- abstract arm panels ---------- */

.arm{position:relative}
.arm__viz{
  display:block;
  width:calc(100% + (clamp(22px,2.4vw,32px) * 2));
  margin-left:calc(clamp(22px,2.4vw,32px) * -1);
  margin-top:calc(clamp(26px,3vw,38px) * -1);
  margin-bottom:clamp(18px,2vw,24px);
  aspect-ratio:16/9;
  max-width:none;
  background:var(--void);
  border-bottom:1px solid var(--line);
}

/* ---------- studio photo ---------- */

.studio__top{
  display:grid;
  gap:clamp(26px,3.4vw,52px);
  margin-bottom:clamp(30px,4vw,48px);
}
@media (min-width:860px){
  .studio__top{grid-template-columns:0.82fr 1.18fr;align-items:center}
}
.studio__photo{
  margin:0;
  border:1px solid var(--line);
  background:var(--void);
}
.studio__photo img{
  display:block;
  width:100%;
  height:auto;
  filter:grayscale(1);
}
.studio__photo figcaption{
  font-size:12px;
  letter-spacing:.04em;
  color:var(--ash-dim);
  padding:10px 12px 11px;
  border-top:1px solid var(--line);
}
.studio__intro{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.studio__intro h2{font-size:clamp(2rem,4.4vw,3.4rem)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .ticker__track{animation:none}
}