/* Clone People — site.css
   One hand-written stylesheet: fonts, tokens, layout, components, motion. */

/* 1. Fonts — self-hosted subsets, latin only ------------------------------- */

@font-face{
  font-family:"Archivo";
  src:url("/assets/fonts/archivo-0.woff2") format("woff2");
  font-weight:400 900;
  font-display:swap;
}
@font-face{
  font-family:"Instrument Sans";
  src:url("/assets/fonts/instrument-0.woff2") format("woff2");
  font-weight:400 500;
  font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("/assets/fonts/jbmono-0.woff2") format("woff2");
  font-weight:400 500;
  font-display:swap;
}

/* 2. Tokens ---------------------------------------------------------------- */

:root{
  --ink:#0D0E11;
  --ink-2:#15171D;
  --bone:#F4F1EA;
  --bone-dim:rgba(244,241,234,.56);
  --lamp:#FFA028;
  --sage:#8A9689;
  --line:rgba(244,241,234,.14);
  --line-soft:rgba(244,241,234,.07);

  --gut:clamp(20px,5vw,72px);
  --rail:64px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --step--1:clamp(.82rem,.95vw,.9rem);
  --step-0:clamp(.95rem,1.05vw,1.02rem);
  --step-1:clamp(1.05rem,1.7vw,1.35rem);
  --step-2:clamp(1.3rem,2.6vw,1.9rem);
  --step-3:clamp(1.6rem,3.4vw,2.6rem);
  --step-4:clamp(2.1rem,5.6vw,4.2rem);
}

/* 3. Reset ----------------------------------------------------------------- */

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:var(--step-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-bottom:var(--rail);
  overflow-x:hidden;
}

/* the single ambient wash — allowed, and the only gradient on the site */
body::before{
  content:"";
  position:fixed;
  inset:-20% -10% auto -10%;
  height:80vh;
  background:radial-gradient(60% 55% at 72% 8%,rgba(255,160,40,.12),transparent 70%);
  pointer-events:none;
  z-index:0;
}

h1,h2,h3,p,figure,blockquote{margin:0}
[hidden]{display:none !important}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--lamp);color:#1a1206}

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

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  padding:12px 18px;
  background:var(--lamp);
  color:#1a1206;
}
.skip:focus{left:12px;top:12px}

/* 4. Layout ---------------------------------------------------------------- */

.wrap{
  position:relative;
  z-index:2;
  padding:0 var(--gut);
}

.mono{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(10px,.72vw,11.5px);
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.display{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-weight:800;
  text-transform:uppercase;
  line-height:.9;
  letter-spacing:-.03em;
}

/* 5. Components ------------------------------------------------------------ */

/* 5.1 slate — the top bar -------------------------------------------------- */

.slate{
  position:sticky;
  top:10px;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:10px clamp(10px,2.4vw,26px) 0;
  padding:clamp(12px,2vw,20px) clamp(14px,2.6vw,26px);
  border:1px solid transparent;
  border-radius:16px;
  color:var(--sage);
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.slate[data-stuck="true"]{
  background:rgba(15,17,21,.8);
  border-color:rgba(244,241,234,.1);
  box-shadow:0 20px 60px -28px rgba(0,0,0,.95),inset 0 1px 0 rgba(244,241,234,.07);
}
/* blur only where the mobile panel is not a fixed child: backdrop-filter
   creates a containing block for position:fixed */
@media(min-width:861px){
  .slate[data-stuck="true"]{
    -webkit-backdrop-filter:blur(26px) saturate(160%);
    backdrop-filter:blur(26px) saturate(160%);
  }
}
.slate__brand{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}
.slate__brand img{
  display:block;
  height:clamp(30px,3.6vw,44px);
  width:auto;
}

.nav{
  display:flex;
  gap:clamp(14px,2.4vw,34px);
  margin-left:auto;
}
.nav a{
  position:relative;
  padding:4px 0;
  color:var(--sage);
  transition:color .22s var(--ease);
}
.nav a:hover{color:var(--bone)}
.nav a[aria-current="page"]{color:var(--bone)}
.nav a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-2px;
  height:1px;
  background:var(--lamp);
}

.slate__meta{
  display:flex;
  align-items:center;
  gap:clamp(10px,1.6vw,22px);
  margin-left:clamp(10px,2vw,30px);
}
.slate__dot{color:var(--lamp)}
#frame{color:var(--bone-dim);font-variant-numeric:tabular-nums}

.menu-btn{
  display:none;
  align-items:center;
  gap:8px;
  padding:8px 0;
  background:none;
  border:0;
  cursor:pointer;
  color:var(--bone);
}
.menu-btn__bars{
  display:inline-block;
  width:18px;
  height:2px;
  background:currentColor;
  box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;
}

/* Without JavaScript there is no menu button and no panel: the links simply
   wrap under the brand, so every page stays navigable. The panel below is
   gated on .js, which the inline script adds to <html>. */
@media(max-width:860px){
  .nav{
    order:3;
    width:100%;
    margin:0;
    flex-wrap:wrap;
    gap:6px 18px;
  }
  .slate{flex-wrap:wrap}
  .slate__loc{display:none}
  #frame{display:none}

  .js .nav{
    position:fixed;
    inset:0;
    z-index:60;
    order:0;
    width:auto;
    margin:0;
    padding:96px var(--gut) var(--gut);
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:center;
    gap:8px;
    background:var(--ink);
    border-top:1px solid var(--line);
    transform:translateY(-101%);
    transition:transform .34s var(--ease);
  }
  .js .nav a{
    font-family:"Archivo",Arial,sans-serif;
    font-weight:700;
    font-size:clamp(2rem,9vw,3.2rem);
    letter-spacing:-.02em;
    text-transform:uppercase;
    color:var(--bone);
    padding:10px 0;
    border-bottom:1px solid var(--line-soft);
  }
  .js .nav a[aria-current="page"]::after{display:none}
  .js .nav[data-open="true"]{transform:translateY(0)}
  .js .menu-btn{display:inline-flex;position:relative;z-index:70}
}

body[data-nav="open"]{overflow:hidden}

/* 5.2 buttons -------------------------------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:.85em 1.5em;
  border:1px solid var(--lamp);
  background:var(--lamp);
  color:#1a1206;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
  border-radius:2px;
  cursor:pointer;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
}
.btn:hover{background:transparent;color:var(--lamp);transform:translateY(-1px)}
.btn svg{width:12px;height:12px;flex:none}

.btn--ghost{background:transparent;color:var(--bone);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--bone);background:rgba(244,241,234,.04);color:var(--bone)}

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

.hero{
  position:relative;
  z-index:2;
  padding:clamp(40px,7vw,86px) var(--gut) clamp(44px,6vw,76px);
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--sage);
  margin:0 0 clamp(20px,3vw,34px);
}
.eyebrow::before{
  content:"";
  width:clamp(24px,4vw,56px);
  height:1px;
  background:var(--lamp);
  flex:none;
}

.hero__name{
  font-size:clamp(2.6rem,11.4vw,10.5rem);
  margin:0;
}
.hero__name .line{display:block;overflow:hidden;white-space:nowrap;padding-bottom:.04em}
.hero__name .char{
  display:inline-block;
  transform:translateY(105%);
  animation:rise .95s var(--ease) forwards;
}
@keyframes rise{to{transform:translateY(0)}}

.hero__tag{
  margin:clamp(22px,3.2vw,34px) 0 0;
  max-width:32ch;
  font-size:var(--step-1);
  line-height:1.35;
  font-weight:500;
}
.hero__tag em{font-style:normal;color:var(--lamp)}

.hero__bio{
  margin:clamp(14px,2vw,20px) 0 0;
  max-width:54ch;
  color:var(--bone-dim);
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:clamp(26px,4vw,44px);
}

/* 5.4 bands and section headers -------------------------------------------- */

.band{
  position:relative;
  z-index:2;
  padding:clamp(52px,8vw,104px) var(--gut);
  border-top:1px solid var(--line-soft);
}

.band__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  margin-bottom:clamp(28px,4.2vw,52px);
}
.band__title{
  font-size:var(--step-3);
  font-family:"Archivo",Arial,sans-serif;
  font-weight:700;
  text-transform:uppercase;
  line-height:1;
  letter-spacing:-.02em;
}
.band__note{color:var(--sage)}

/* 5.5 page head (interior pages) ------------------------------------------- */

.head{
  position:relative;
  z-index:2;
  padding:clamp(48px,7vw,92px) var(--gut) clamp(30px,4vw,48px);
  border-bottom:1px solid var(--line-soft);
}
.head__title{font-size:clamp(2.3rem,6.4vw,5rem);margin:0}
.head__lede{
  margin:clamp(16px,2.4vw,26px) 0 0;
  max-width:58ch;
  color:var(--bone-dim);
  font-size:var(--step-1);
  line-height:1.5;
}

/* 5.6 player — lite YouTube embed ------------------------------------------ */

.player{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  background:var(--ink-2);
  overflow:hidden;
  border-radius:2px;
}

.player__btn{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:var(--ink-2);
  cursor:pointer;
}
.player__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.player__btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(13,14,17,.62),rgba(13,14,17,.06) 55%);
  transition:opacity .3s var(--ease);
}
.player__btn:hover::after{opacity:.7}

.player__play{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:clamp(56px,7vw,84px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--lamp);
  color:#1a1206;
  transition:transform .22s var(--ease);
}
.player__btn:hover .player__play{transform:scale(1.06)}
.player__play svg{width:34%;margin-left:6%}

.player__label{
  position:absolute;
  z-index:1;
  left:clamp(14px,2vw,26px);
  bottom:clamp(12px,1.8vw,22px);
  right:clamp(14px,2vw,26px);
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--bone);
  text-align:left;
}
.player__label-text{
  font-family:"JetBrains Mono",monospace;
  font-size:clamp(10px,.7vw,11px);
  letter-spacing:.13em;
  text-transform:uppercase;
}
.player__label-time{margin-left:auto;color:var(--bone-dim)}

.player iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.player video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:#000;
  object-fit:contain;
}

/* 5.7 work grid ------------------------------------------------------------ */

.chips{
  display:inline-flex;
  flex-wrap:wrap;
  gap:4px;
  padding:5px;
  margin:0 0 clamp(24px,3.4vw,40px);
  border:1px solid var(--line-soft);
  border-radius:999px;
  background:rgba(21,23,29,.72);
}
.chip{
  padding:.55em 1.05em;
  border:1px solid transparent;
  background:transparent;
  border-radius:999px;
  color:var(--sage);
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease);
}
.chip:hover{color:var(--bone);background:rgba(244,241,234,.06)}
.chip[aria-pressed="true"]{
  background:var(--bone);
  border-color:var(--bone);
  color:var(--ink);
}
.chip:focus-visible{outline-offset:4px}

.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(24px,3.4vw,44px);
  margin:0;
  padding:0;
  list-style:none;
}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.grid{grid-template-columns:repeat(3,1fr)}}

.grid__item{min-width:0}
@media(min-width:1080px){.grid__item--wide{grid-column:span 2}}

.tile{
  position:relative;
  display:block;
}
.tile__media{
  position:relative;
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--ink-2) center/cover no-repeat;
  border:1px solid var(--line-soft);
  border-radius:2px;
}
.tile__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s var(--ease);
}
.tile:hover .tile__media img{transform:scale(1.03)}
.tile__index{
  position:absolute;
  top:10px;left:12px;
  z-index:1;
  color:var(--bone);
  text-shadow:0 1px 10px rgba(13,14,17,.95),0 0 2px rgba(13,14,17,.9);
}
.tile__body{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:14px 0 0;
  border-top:1px solid transparent;
}
.tile__title{
  font-family:"Archivo",Arial,sans-serif;
  font-weight:600;
  font-size:clamp(1.02rem,1.5vw,1.22rem);
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--bone);
}
.tile__meta{color:var(--sage);white-space:nowrap;flex:none}
.tile:hover .tile__title{color:var(--lamp)}
.tile:hover .tile__media{border-color:var(--line)}

/* contact: form beside the details */
.contact-grid{
  display:grid;
  gap:clamp(32px,6vw,80px);
  grid-template-columns:1fr;
}
@media(min-width:900px){
  .contact-grid{grid-template-columns:1.15fr .85fr;align-items:start}
}

/* 5.8 capability list ------------------------------------------------------ */

.craft{
  display:grid;
  border-top:1px solid var(--line-soft);
  margin:0;
  padding:0;
  list-style:none;
}
.craft__item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(14px,3vw,40px);
  align-items:baseline;
  padding:clamp(18px,2.4vw,28px) 0;
  border-bottom:1px solid var(--line-soft);
  transition:padding-left .3s var(--ease);
}
.craft__item:hover{padding-left:10px}
.craft__num{color:var(--lamp);flex:none;padding-top:.3em}
.craft__name{
  font-family:"Archivo",Arial,sans-serif;
  font-weight:600;
  font-size:clamp(1.2rem,3.2vw,1.9rem);
  line-height:1.05;
  letter-spacing:-.015em;
  text-transform:uppercase;
}
.craft__desc{
  display:block;
  font-family:"Instrument Sans",Arial,sans-serif;
  font-size:var(--step--1);
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  color:var(--bone-dim);
  margin-top:8px;
  max-width:54ch;
  line-height:1.55;
}

/* 5.9 credibility ---------------------------------------------------------- */

.cred{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(16px,3.4vw,44px);
  color:var(--sage);
  margin:0;
  padding:0;
  list-style:none;
}
.cred li{white-space:nowrap}
.cred--logos{
  align-items:center;
  gap:clamp(12px,2vw,26px);
}
.cred--logos li{display:flex;align-items:center;justify-content:center}
.cred--logos img{
  display:block;
  width:clamp(62px,6.6vw,88px);
  height:auto;
  border-radius:50%;
}
.cred__name{
  width:clamp(62px,6.6vw,88px);
  height:clamp(62px,6.6vw,88px);
  border-radius:50%;
  background:#fff;
  color:#1a1206;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(8px,.62vw,10px);
  letter-spacing:.1em;
}

/* 5.10 close block --------------------------------------------------------- */

.close{
  position:relative;
  z-index:2;
  margin:clamp(28px,5vw,64px) clamp(10px,2.4vw,26px) clamp(30px,5vw,56px);
  padding:clamp(42px,6.4vw,92px) clamp(24px,4.4vw,60px);
  border:1px solid var(--line-soft);
  border-radius:20px;
  background:rgba(19,21,27,.6);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  backdrop-filter:blur(22px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(244,241,234,.06);
  overflow:hidden;
}
/* the lamp, kept inside the card so the glass has something to sit on */
.close::before{
  content:"";
  position:absolute;
  inset:-45% 12% auto -12%;
  height:130%;
  background:radial-gradient(42% 58% at 26% 0%,rgba(255,160,40,.12),transparent 68%);
  pointer-events:none;
}
.close > *{position:relative}
.close__lead{
  font-family:"Archivo",Arial,sans-serif;
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(1.9rem,7vw,4.8rem);
  line-height:.94;
  letter-spacing:-.03em;
  margin:0 0 clamp(22px,3vw,32px);
}
.close__lead a{
  display:inline-block;
  border-bottom:.055em solid var(--lamp);
  padding-bottom:.02em;
  transition:color .25s var(--ease);
}
.close__lead a:hover{color:var(--lamp)}
.close__note{color:var(--bone-dim);max-width:52ch}

/* 5.11 prose --------------------------------------------------------------- */

.prose{
  position:relative;
  z-index:2;
  max-width:66ch;
  padding:clamp(36px,5vw,64px) var(--gut);
}
.prose > * + *{margin-top:1.1em}
.prose h2{
  font-family:"Archivo",Arial,sans-serif;
  font-weight:700;
  text-transform:uppercase;
  font-size:var(--step-2);
  letter-spacing:-.02em;
  line-height:1.05;
  margin-top:clamp(34px,4vw,54px);
}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--bone-dim);max-width:62ch}
.prose strong{color:var(--bone);font-weight:500}
.prose a{color:var(--bone);border-bottom:1px solid var(--line)}
.prose a:hover{color:var(--lamp);border-color:var(--lamp)}
.prose ul{margin:1em 0 0;padding-left:1.1em;color:var(--bone-dim)}
.prose li{margin:.35em 0}

.pull{
  margin:clamp(28px,4vw,44px) 0;
  padding-left:clamp(16px,2.4vw,28px);
  border-left:2px solid var(--lamp);
  font-size:var(--step-1);
  line-height:1.45;
  color:var(--bone);
  max-width:38ch;
}

/* 5.12 project meta + pager ------------------------------------------------ */

.meta{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:var(--line-soft);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  margin:0;
  padding:0;
}
@media(min-width:720px){.meta{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
.meta > div{
  background:var(--ink);
  padding:clamp(14px,1.8vw,22px) clamp(10px,1.4vw,18px);
}
.meta > div:first-child{padding-left:0}
.meta dt{color:var(--sage);margin-bottom:6px}
.meta dd{margin:0;color:var(--bone);font-size:var(--step-0)}

/* label / content split, used on project pages */
.split{
  position:relative;
  z-index:2;
  padding-top:clamp(6px,.8vw,12px);
  padding-bottom:clamp(24px,3.4vw,44px);
}
.split__row{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  padding:clamp(20px,2.6vw,30px) 0;
  border-top:1px solid var(--line-soft);
}
.split__row:first-child{border-top:0}
.split__label{
  font-family:"Archivo",Arial,sans-serif;
  font-weight:700;
  font-size:clamp(1.15rem,1.9vw,1.5rem);
  line-height:1.05;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.split__body p{color:var(--bone-dim);max-width:66ch}
.split__body p + p{margin-top:1em}
.split__body ul{margin:0;padding-left:1.1em;color:var(--bone-dim)}
.split__body li{margin:.35em 0}
@media(min-width:900px){
  .split__row{
    grid-template-columns:minmax(150px,19%) 1fr;
    gap:clamp(24px,4vw,64px);
    align-items:start;
    padding:clamp(24px,3vw,38px) 0;
  }
  .split__label{
    font-size:var(--step-1);
    padding-top:.1em;
  }
}

.pager{
  display:grid;
  grid-template-columns:1fr;
  border-top:1px solid var(--line-soft);
  margin:0;
  padding:0;
}
@media(min-width:720px){.pager{grid-template-columns:1fr 1fr}}
.pager a{
  display:block;
  padding:clamp(24px,3.4vw,40px) var(--gut);
  border-bottom:1px solid var(--line-soft);
  transition:background .22s var(--ease);
}
.pager a:hover{background:rgba(244,241,234,.03)}
.pager a + a{border-left:1px solid var(--line-soft)}
.pager__label{color:var(--sage);display:block;margin-bottom:8px}
.pager__name{
  font-family:"Archivo",Arial,sans-serif;
  font-weight:600;
  font-size:clamp(1.1rem,1.9vw,1.5rem);
  line-height:1.1;
  letter-spacing:-.01em;
}
.pager a:hover .pager__name{color:var(--lamp)}
.pager--end{color:var(--sage)}
@media(max-width:719px){.pager a + a{border-left:0}}

/* 5.13 rail — the signature element ---------------------------------------- */

.rail{
  position:fixed;
  left:0;right:0;bottom:0;
  height:var(--rail);
  z-index:50;
  display:flex;
  align-items:center;
  gap:clamp(12px,2.4vw,28px);
  padding:0 var(--gut);
  background:rgba(13,14,17,.8);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(244,241,234,.06);
  border-top:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}
.rail__tc{color:var(--lamp);flex:none}
.rail__track{
  position:relative;
  flex:1;
  height:2px;
  min-width:60px;
  background:var(--line);
  border-radius:2px;
  cursor:pointer;
  touch-action:none;
}
.rail__track::before{
  content:"";
  position:absolute;
  inset:-14px 0;
}
.rail__fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  background:var(--bone);
}
.rail__head{
  position:absolute;
  top:50%;
  left:0%;
  width:0;
  height:0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:12px solid var(--lamp);
  transform:translate(-2px,-50%);
  filter:drop-shadow(0 0 6px rgba(255,160,40,.45));
}
.rail__marks{position:absolute;inset:0;pointer-events:none}
.rail__mark{
  position:absolute;
  top:-4px;
  width:1px;
  height:10px;
  background:var(--line);
}
.rail__pct{color:var(--sage);flex:none;min-width:4.2em;text-align:right}
@media(max-width:560px){.rail__pct{display:none}}

/* 5.14 form ---------------------------------------------------------------- */

.form{
  display:grid;
  gap:clamp(16px,2.2vw,24px);
  max-width:640px;
}
.field{display:grid;gap:8px}
.field > label{color:var(--sage)}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:.85em 1em;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--bone);
  font:inherit;
  font-size:var(--step-0);
  transition:border-color .22s var(--ease);
}
.field textarea{min-height:150px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--bone-dim)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--lamp);
  outline:2px solid var(--lamp);
  outline-offset:1px;
}
.field input:user-invalid,.field textarea:user-invalid{border-color:#ff6b5e}
.field__hint{color:var(--sage);font-size:var(--step--1)}
.hp{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.form__status{color:var(--bone-dim)}
.form__status[data-state="error"]{color:#ff8b7f}
.form__status[data-state="ok"]{color:var(--lamp)}

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

.foot{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:clamp(18px,4vw,56px);
  align-items:baseline;
  justify-content:space-between;
  padding:clamp(28px,4vw,44px) var(--gut);
  border-top:1px solid var(--line-soft);
  color:var(--sage);
}
.foot a{color:var(--bone-dim);transition:color .22s var(--ease)}
.foot a:hover{color:var(--lamp)}
.foot__social{display:flex;gap:clamp(2px,1vw,8px);align-items:center}
.social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  color:var(--bone-dim);
  transition:color .22s var(--ease);
}
.social:hover{color:var(--lamp)}
.social svg{width:17px;height:17px}

/* about intro */

.about-intro{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(22px,3.4vw,44px);
  padding:clamp(34px,4.6vw,58px) var(--gut);
  border-bottom:1px solid var(--line-soft);
}
@media(min-width:820px){
  .about-intro{
    grid-template-columns:minmax(240px,30%) 1fr;
    gap:clamp(32px,5vw,72px);
    align-items:start;
  }
}
.about-intro__media{margin:0}
.about-intro__media img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--line-soft);
  border-radius:2px;
}
.about-intro__title{
  font-family:"Archivo",Arial,sans-serif;
  font-weight:700;
  font-size:clamp(1.15rem,1.9vw,1.5rem);
  line-height:1.05;
  letter-spacing:-.02em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.about-intro__text > p{color:var(--bone-dim);max-width:62ch}
.about-intro__text > p + p{margin-top:1em}

/* 404 */

.lost{
  position:relative;
  z-index:2;
  min-height:calc(100vh - var(--rail) - 120px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(48px,8vw,110px) var(--gut);
}
.lost__code{
  color:var(--lamp);
  margin-bottom:clamp(16px,2.4vw,28px);
}
.lost__title{font-size:clamp(2.4rem,9vw,7rem);margin:0 0 clamp(18px,3vw,30px)}
.lost__note{color:var(--bone-dim);max-width:46ch;margin:0 0 clamp(26px,4vw,40px)}
.lost__links{display:flex;gap:12px;flex-wrap:wrap}

/* showcase: hero film, highlights, statement, categories ------------------ */

.hero--tight{
  padding-top:clamp(26px,4vw,54px);
  padding-bottom:clamp(26px,4vw,46px);
}

.feature{
  position:relative;
  z-index:2;
  border-top:1px solid var(--line-soft);
}
.feature__stage{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--ink-2) center/cover no-repeat;
}
.feature__stage video,
.feature__btn img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.feature__btn{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}
.feature__play{
  position:relative;
  display:grid;
  place-items:center;
  width:clamp(62px,7vw,94px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--lamp);
  color:#1a1206;
  transition:transform .22s var(--ease);
}
.feature__btn:hover .feature__play{transform:scale(1.06)}
.feature__play svg{width:34%;margin-left:6%}
.feature__bar{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:clamp(10px,2vw,26px);
  padding:clamp(14px,2vw,22px) var(--gut);
  border-bottom:1px solid var(--line-soft);
  color:var(--sage);
}
.feature__name{
  font-family:"Archivo",Arial,sans-serif;
  font-weight:700;
  font-size:clamp(1.15rem,2.4vw,1.9rem);
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--bone);
}
.feature__hint{margin-left:auto}

.hl,
.films{
  display:grid;
  gap:clamp(18px,2.4vw,32px);
  grid-template-columns:1fr;
  margin:0;
  padding:0;
  list-style:none;
}
@media(min-width:720px){.films{grid-template-columns:repeat(2,1fr)}}
@media(min-width:860px){.hl{grid-template-columns:repeat(3,1fr)}}

.hl__title,
.films__title{
  margin-top:10px;
  font-family:"Archivo",Arial,sans-serif;
  font-weight:600;
  font-size:clamp(.98rem,1.35vw,1.12rem);
  letter-spacing:-.01em;
  color:var(--bone);
}

.statement{
  position:relative;
  z-index:2;
  padding:clamp(46px,7vw,92px) var(--gut);
  border-top:1px solid var(--line-soft);
  overflow:hidden;
}
.statement__deco{
  position:absolute;
  right:-5%;
  top:50%;
  transform:translateY(-50%);
  width:min(40vw,470px);
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(255,160,40,.09);
  pointer-events:none;
}

/* three rings, drifting in and out of phase */
.fig{
  position:absolute;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--lamp);
  animation:figFloat 9s var(--ease) infinite alternate;
}
.fig--1{width:34%;left:4%;top:24%;opacity:1;animation-delay:-1s}
.fig--2{width:26%;left:38%;top:12%;opacity:.75;animation-delay:-3.6s}
.fig--3{width:19%;left:66%;top:38%;opacity:.5;animation-delay:-6.2s}

@keyframes figFloat{
  from{transform:translateY(0) scale(1)}
  to{transform:translateY(-18px) scale(1.04)}
}

@media(max-width:760px){
  .statement__deco{width:64vw;right:-24%;opacity:.8}
}
@media(prefers-reduced-motion:reduce){
  .fig{animation:none}
}
.statement__text mark{
  background:none;
  color:var(--lamp);
  text-transform:uppercase;
  letter-spacing:.01em;
}
.statement__text{
  font-family:"Archivo",Arial,sans-serif;
  font-weight:700;
  font-size:clamp(1.4rem,3.2vw,2.6rem);
  line-height:1.14;
  letter-spacing:-.02em;
  max-width:24ch;
  color:var(--bone);
}
.statement__sub{margin-top:clamp(16px,2.2vw,26px);color:var(--sage)}



/* assistant --------------------------------------------------------------- */

.chat{
  position:fixed;
  right:clamp(14px,2.4vw,26px);
  bottom:calc(var(--rail) + clamp(14px,2.4vw,22px));
  z-index:60;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
}
.chat__btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:.8em 1.15em;
  border-radius:999px;
  border:1px solid rgba(244,241,234,.14);
  background:rgba(21,23,29,.82);
  color:var(--bone);
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.95);
  transition:color .22s var(--ease),border-color .22s var(--ease);
}
.chat__btn:hover{color:var(--lamp);border-color:rgba(255,160,40,.4)}
.chat__btn svg{width:15px;height:15px}
.chat__btn img{
  display:block;
  width:20px;
  height:20px;
  object-fit:contain;
}

.chat__panel{
  width:min(360px,calc(100vw - 28px));
  max-height:min(520px,70vh);
  display:none;
  flex-direction:column;
  border:1px solid rgba(244,241,234,.12);
  border-radius:16px;
  background:rgba(15,17,21,.9);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 30px 80px -40px rgba(0,0,0,1);
  overflow:hidden;
}
.chat__panel[data-open="true"]{display:flex}
.chat__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid var(--line-soft);
  color:var(--sage);
}
.chat__close{
  border:0;
  background:none;
  color:var(--sage);
  cursor:pointer;
  font-size:18px;
  line-height:1;
  padding:2px 4px;
}
.chat__close:hover{color:var(--bone)}
.chat__log{
  flex:1;
  overflow-y:auto;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.msg{
  max-width:88%;
  padding:9px 12px;
  border-radius:12px;
  font-size:.92rem;
  line-height:1.45;
}
.msg--bot{
  align-self:flex-start;
  background:rgba(30,33,40,.9);
  color:var(--bone);
  border-bottom-left-radius:4px;
}
.msg--me{
  align-self:flex-end;
  background:var(--lamp);
  color:#1a1206;
  border-bottom-right-radius:4px;
}
.msg--note{
  align-self:stretch;
  max-width:100%;
  background:none;
  color:var(--sage);
  font-family:"JetBrains Mono",monospace;
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:0;
}
.chat__form{
  display:flex;
  gap:8px;
  padding:12px 14px;
  border-top:1px solid var(--line-soft);
}
.chat__input{
  flex:1;
  min-width:0;
  padding:.7em .9em;
  border-radius:8px;
  border:1px solid var(--line);
  background:rgba(13,14,17,.9);
  color:var(--bone);
  font:inherit;
  font-size:.92rem;
}
.chat__input:focus{outline:2px solid var(--lamp);outline-offset:1px;border-color:var(--lamp)}
.chat__send{
  border-radius:8px;
  border:1px solid var(--lamp);
  background:var(--lamp);
  color:#1a1206;
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.7em 1em;
  cursor:pointer;
}
.chat__send:disabled{opacity:.45;cursor:default}
.chat__email{color:var(--lamp);border-bottom:1px solid var(--lamp)}

/* faq + testimonials ------------------------------------------------------ */

.faqband{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(32px,5vw,72px);
  padding:clamp(46px,7vw,92px) var(--gut);
  border-top:1px solid var(--line-soft);
}
@media(min-width:900px){
  .faqband{grid-template-columns:1.05fr .95fr;align-items:start}
}
.faqband__col > .band__title{margin-bottom:clamp(18px,2.4vw,28px)}

.faq details{border-top:1px solid var(--line-soft)}
.faq details:last-child{border-bottom:1px solid var(--line-soft)}
.faq summary{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:baseline;
  padding:clamp(14px,1.8vw,20px) 0;
  cursor:pointer;
  list-style:none;
  color:var(--bone);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--lamp);font-size:1.15em;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--bone-dim);max-width:52ch;padding-bottom:clamp(14px,1.8vw,20px)}

.quotes{position:relative;min-height:clamp(220px,26vw,300px)}
.quote{display:none;margin:0}
.quote.is-on{display:block;animation:quoteIn .5s var(--ease)}
@keyframes quoteIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.quote p{color:var(--bone);font-size:var(--step-1);line-height:1.5;max-width:44ch}
.quote footer{margin-top:clamp(16px,2vw,24px);display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}
.quote__name{font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:1.05rem;color:var(--bone)}
.quote__role{color:var(--sage)}
.quotes__nav{display:flex;gap:10px;margin-top:clamp(20px,2.6vw,32px)}
@media(prefers-reduced-motion:reduce){
  .quote.is-on{animation:none}
}

/* glass panels ------------------------------------------------------------ */

.panel,
.meta-wrap{
  position:relative;
  z-index:3;
  background:rgba(15,17,21,.82);
  border:1px solid var(--line-soft);
  border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(244,241,234,.06),0 30px 70px -50px rgba(0,0,0,.95);
}
@media(min-width:861px){
  .panel,
  .meta-wrap{
    -webkit-backdrop-filter:blur(22px) saturate(140%);
    backdrop-filter:blur(22px) saturate(140%);
  }
}
.panel{padding:clamp(18px,2.6vw,30px)}

.meta-wrap{
  margin:clamp(20px,3vw,32px) var(--gut) 0;
  padding:clamp(4px,.8vw,8px) clamp(14px,2vw,22px);
}
@media(min-width:861px){
  .meta-wrap{margin-top:clamp(-38px,-2.6vw,-16px)}
}

.meta{background:transparent;border:0;gap:0}
.meta > div{
  background:transparent;
  border-left:1px solid var(--line-soft);
  padding:clamp(12px,1.6vw,18px) clamp(10px,1.4vw,18px);
}
.meta > div:first-child{border-left:0;padding-left:0}
@media(max-width:719px){
  .meta > div{border-left:0;border-top:1px solid var(--line-soft);padding-left:0}
  .meta > div:first-child{border-top:0}
}
.panel .meta{grid-template-columns:1fr}
.panel .meta > div{border-left:0;border-top:1px solid var(--line-soft);padding-left:0}
.panel .meta > div:first-child{border-top:0}

.ico-link{display:inline-flex;align-items:center;gap:9px}
.ico{display:inline-flex;color:var(--sage);transition:color .22s var(--ease)}
.ico svg{width:16px;height:16px}
.ico-link:hover .ico{color:var(--lamp)}

/* folder index ------------------------------------------------------------ */

@media(min-width:1080px){
  .grid--folders{grid-template-columns:repeat(2,1fr)}
}

/* campaign switcher ------------------------------------------------------- */

.campaigntabs{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(18px,2.4vw,28px);
}
.campaigntabs a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:.62em 1.05em;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--bone-dim);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:color .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease);
}
.campaigntabs a:hover{
  color:var(--lamp);
  border-color:rgba(255,160,40,.42);
  background:rgba(255,160,40,.05);
}

/* horizontal rail */

.band__tools{
  display:flex;
  align-items:center;
  gap:clamp(8px,1.2vw,14px);
}

.rr{
  display:none;
  align-items:center;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(21,23,29,.5);
  color:var(--bone);
  cursor:pointer;
  transition:color .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease);
}
.js .rr{display:inline-flex}
.rr:hover{color:var(--lamp);border-color:var(--bone-dim);background:rgba(21,23,29,.8)}
.rr:disabled{opacity:.3;cursor:default}
.rr svg{width:15px;height:15px}

.hscroll{
  margin:0 calc(var(--gut) * -1);
  scroll-padding-inline:var(--gut);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.hscroll::-webkit-scrollbar{display:none}
.hscroll:focus-visible{outline:2px solid var(--lamp);outline-offset:-4px}

.hscroll__track{
  display:flex;
  gap:clamp(14px,2vw,28px);
  margin:0;
  padding:0 var(--gut) 6px;
  list-style:none;
}
.hscroll__track > .grid__item{
  flex:0 0 clamp(248px,38vw,500px);
  scroll-snap-align:start;
  min-width:0;
}

/* 6. Motion ---------------------------------------------------------------- */

.js .rv{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.js .rv.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero__name .char{transform:none}
  .rv{opacity:1 !important;transform:none !important}
  .nav{transition:none}
}

/* 7. Print ----------------------------------------------------------------- */

@media print{
  body::before,.rail,.nav,.menu-btn{display:none}
  body{background:#fff;color:#000;padding-bottom:0}
  .band,.head,.prose,.close{border-color:#ccc}
}