/* ============ Chris Carter — shared styles ============
   Base system adapted from the Stateline build: same grain, same mono/sans
   pairing, same locked hero. Differences: warmer ground, tally-red accent,
   and a drift/collage layer carried over from hichriscarter.com.
   ======================================================== */
:root{
  --bg:#101211;
  --bg-2:#181B19;
  --line:rgba(237,233,224,.16);
  --line-2:rgba(237,233,224,.09);
  --fg:#EDE9E0;
  --fg-dim:#95998F;
  --accent-2:#8C9A82;
  --accent:#4E7DF5;
  --gut:clamp(20px,4.6vw,72px);
  --navw:clamp(118px,12vw,190px);
  --navpad:clamp(20px,2.2vw,34px);
  --lockfade:560px;
  --scan:.13;
  --sel-bg:#4E7DF5;
  --sel-fg:#101211;
  --cyan:#00E5C4;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:transparent;color:var(--fg);
  font-family:"Archivo",system-ui,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
}
main{flex:1}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
:focus-visible{outline:1px solid var(--accent);outline-offset:4px}

.mono{font-family:"Azeret Mono",monospace;font-size:11.5px;font-weight:400;
  letter-spacing:.19em;text-transform:uppercase;color:var(--fg-dim)}

/* ---------------- nav (fixed left rail, no backdrop) ---------------- */
.nav{
  position:fixed;left:0;top:0;bottom:0;width:var(--navw);
  z-index:50;background:none;
  display:flex;flex-direction:column;align-items:flex-start;
  padding:30px 0 36px var(--navpad);
}
.mark{display:block;color:var(--fg);line-height:0}
.mark .logo{display:block;width:clamp(78px,9vw,140px);height:auto}
.mark:hover{color:var(--accent)}

.nav__links{position:absolute;top:50%;left:var(--navpad);transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(26px,3.4vh,44px)}
.nav__links a{
  font-family:"Azeret Mono",monospace;font-size:13px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fg);
  writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);
}
.nav__links a:hover{color:var(--accent)}
.nav__links a.is-current{color:var(--fg-dim)}

/* content clears the rail */
main,.foot{margin-left:var(--navw)}

@media (max-width:820px){
  .nav{position:sticky;left:auto;bottom:auto;width:auto;
    flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap;
    background:var(--bg);padding:20px var(--gut) 18px}
  .mark{margin-right:auto}
  .mark .logo{width:132px}
  .mark svg{height:24px;width:12px}
  .nav__links{position:static;transform:none;flex-direction:row;gap:18px}
  .nav__links a{writing-mode:horizontal-tb;transform:none;font-size:12.5px}
  main,.foot{margin-left:0}
}

/* ---------------- page head ---------------- */
.phead{padding:clamp(44px,9vh,120px) var(--gut) clamp(26px,4vh,44px)}
.phead__title{display:flex;align-items:flex-start;gap:12px}
.phead h1{font-size:clamp(38px,7vw,92px);font-weight:700;
  letter-spacing:-.035em;line-height:.95}
.dot{width:9px;height:9px;border-radius:50%;background:var(--accent);
  margin-top:.5em;flex:0 0 auto}

/* ---------------- section shell ---------------- */
.sec{padding:clamp(50px,9vh,120px) var(--gut);border-top:1px solid var(--line-2)}
.sec--flush{border-top:0;padding-top:0}
.split{display:grid;gap:clamp(26px,5vw,80px)}
@media (min-width:900px){.split{grid-template-columns:minmax(190px,24%) 1fr}}
.split__title{display:flex;align-items:flex-start;gap:12px}
.split__title h2{font-size:clamp(26px,3.6vw,44px);font-weight:700;
  letter-spacing:-.03em;line-height:1.02}
@media (min-width:900px){.split__title{position:sticky;top:44px}}

.lede{font-size:clamp(19px,2.15vw,28px);line-height:1.36;font-weight:500;
  letter-spacing:-.015em;max-width:27ch}
.body p{max-width:56ch;color:var(--fg-dim);font-size:16.5px;margin-top:20px}
.body p:first-child{margin-top:0}

/* ---------------- home hero ---------------- */
.hero{padding:clamp(30px,6vh,64px) var(--gut) 0}
.hero__eyebrow{white-space:pre-line;line-height:1.9}
.rule{margin-top:26px;height:18px}
.rule svg{width:100%;height:18px;display:block;overflow:visible}
.rule path{fill:none;stroke:var(--line);stroke-width:1}

/* ---------------- work grid (staggered) ---------------- */
.wgrid{padding:0 var(--gut);display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(18px,2.4vw,34px);
  row-gap:clamp(44px,5.5vw,86px)}
@media (max-width:760px){
  .wgrid{grid-template-columns:1fr;row-gap:38px}
}

.witem{display:block}
.witem__frame{position:relative;aspect-ratio:16/9;background:var(--bg-2);
  overflow:hidden;border:1px solid var(--line-2)}
.witem__frame video,.witem__frame img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s ease,filter .5s ease}
.witem:hover .witem__frame video,.witem:hover .witem__frame img{transform:scale(1.02)}
.witem__ph{position:absolute;inset:0;display:grid;place-items:center;
  font-family:"Azeret Mono",monospace;font-size:10.5px;letter-spacing:.19em;
  color:rgba(237,233,224,.28);text-transform:uppercase;pointer-events:none}
.witem__title{margin-top:15px;font-size:16px;font-weight:500;letter-spacing:-.005em}
.witem__credits{margin-top:5px;display:flex;flex-wrap:wrap;gap:0 18px;
  font-size:14px;color:rgba(149,153,143,.72);transition:color .3s ease}
.witem:hover .witem__credits{color:var(--fg-dim)}


/* ---------------- services list ---------------- */
.svc{border-top:1px solid var(--line-2)}
.svc__row{display:grid;grid-template-columns:64px 1fr;gap:0 8px;
  padding:32px 0;border-bottom:1px solid var(--line-2)}
@media (max-width:640px){.svc__row{grid-template-columns:44px 1fr}}
.svc__n{font-family:"Azeret Mono",monospace;font-size:13px;color:var(--fg-dim);padding-top:7px}
.svc__row h3{font-size:clamp(21px,2.5vw,30px);font-weight:700;letter-spacing:-.02em}
.svc__row p{color:var(--fg-dim);max-width:54ch;margin-top:10px;font-size:16.5px}
.svc__tags{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.svc__tags span{font-family:"Azeret Mono",monospace;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent-2);border:1px solid var(--line);padding:5px 10px}

/* ---------------- process ---------------- */
.step{display:grid;grid-template-columns:56px 1fr;gap:0 8px;
  padding:24px 0;border-bottom:1px solid var(--line-2)}
.step:first-of-type{border-top:1px solid var(--line-2)}
@media (max-width:640px){.step{grid-template-columns:40px 1fr}}
.step__n{font-family:"Azeret Mono",monospace;font-size:12px;color:var(--fg-dim);padding-top:6px}
.step h3{font-size:19px;font-weight:600;letter-spacing:-.01em}
.step p{color:var(--fg-dim);max-width:58ch;margin-top:6px;font-size:16px}

/* ---------------- team ---------------- */
.team{display:grid;gap:clamp(26px,4vw,56px)}
@media (min-width:760px){.team{grid-template-columns:1fr 1fr}}
.person__frame{aspect-ratio:4/5;background:var(--bg-2);border:1px solid var(--line-2);
  display:grid;place-items:center;overflow:hidden}
.person__frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.9)}
.person__ph{font-family:"Azeret Mono",monospace;font-size:10.5px;letter-spacing:.19em;
  color:rgba(237,233,224,.3);text-transform:uppercase}
.person h3{margin-top:18px;font-size:21px;font-weight:700;letter-spacing:-.02em}
.person .mono{margin-top:5px;display:block}
.person p{color:var(--fg-dim);margin-top:12px;max-width:44ch;font-size:16px}

/* ---------------- forms + buttons ---------------- */
.field{margin-bottom:34px}
.field label{display:block;margin-bottom:12px}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--fg);font-family:"Archivo",sans-serif;font-size:17px;padding:8px 0 12px}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0;border-bottom-color:var(--accent)}
.field select option{background:var(--bg);color:var(--fg)}
.btn{display:inline-block;font-family:"Azeret Mono",monospace;font-size:11.5px;
  letter-spacing:.19em;text-transform:uppercase;border:1px solid var(--line);
  border-radius:100px;padding:15px 40px;transition:.25s ease}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.contact__direct a.email{font-size:19px;border-bottom:1px solid var(--line)}
.contact__direct a.email:hover{color:var(--accent);border-color:var(--accent)}
.contact__links{margin-top:30px;display:grid;gap:7px}

/* ---------------- footer ---------------- */
.foot{padding:56px var(--gut) 60px;border-top:1px solid var(--line-2);
  display:flex;gap:28px 40px;flex-wrap:wrap;align-items:flex-end;
  margin-top:clamp(60px,10vh,130px)}
.badge{width:96px;height:96px;flex:0 0 auto}
.badge svg{width:100%;height:100%;color:var(--fg-dim)}
.badge__ring{transform-box:view-box;transform-origin:50% 50%;
  animation:spin 34s linear infinite}
.badge__core{transform-box:view-box;transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.badge__ring{animation:none}}
.foot__meta{margin-left:auto;text-align:right;line-height:1.85}

/* ================= grain overlay ================= */
.grain{
  position:fixed;inset:0;
  pointer-events:none;
  z-index:-1;
  background-repeat:repeat;
  background-size:440px 440px;
  image-rendering:pixelated;
  opacity:1;
}
/* the grain texture is a desktop-only nicety: phones never request the file */
@media (min-width:761px){
  .grain{background-image:url("assets/noise.gif")}
}
@media (prefers-reduced-motion:reduce){
  .grain{opacity:.68}
}

/* ================= custom cursor ================= */
.has-cursor,
.has-cursor a,
.has-cursor button,
.has-cursor input,
.has-cursor textarea,
.has-cursor select,
.has-cursor label,
.has-cursor [role="button"]{cursor:none}

.cursor{
  position:fixed;top:0;left:0;z-index:10000;pointer-events:none;
  opacity:0;transition:opacity .25s ease;
  will-change:transform;
  backface-visibility:hidden;
  transform:translateZ(0);
}
.cursor.is-on{opacity:1}
.cursor__dot,.cursor__core{position:absolute;top:0;left:0;display:block}
.cursor__core{opacity:0;transition:opacity .25s ease}
.cursor__dot{
  width:9px;height:9px;background:var(--fg);
  transform:translate(-50%,-50%) rotate(45deg);
  transition:width .32s cubic-bezier(.2,.8,.2,1),
             height .32s cubic-bezier(.2,.8,.2,1),
             transform .32s cubic-bezier(.2,.8,.2,1),
             background .25s ease;
}
.cursor.is-big .cursor__dot{
  width:34px;height:34px;
  transform:translate(-50%,-50%) rotate(45deg);
}
.cursor.is-down .cursor__dot{background:var(--accent)}
/* over the nav: three counter-turning layers on a survey-mark motif */
@keyframes turnA{
  from{transform:translate(-50%,-50%) rotate(45deg)}
  to{transform:translate(-50%,-50%) rotate(405deg)}
}
@keyframes corePulse{
  0%,100%{transform:translate(-50%,-50%) rotate(45deg) scale(1);opacity:1}
  50%    {transform:translate(-50%,-50%) rotate(45deg) scale(1.9);opacity:.5}
}

.cursor.is-nav .cursor__dot{
  width:28px;height:28px;
  background:transparent;
  border:1.5px solid var(--fg);
  animation:turnA 2.2s cubic-bezier(.45,0,.55,1) infinite;
}
.cursor.is-nav .cursor__core{
  opacity:1;width:5px;height:5px;
  background:var(--accent);
  animation:corePulse 1.15s ease-in-out infinite;
}
.cursor.is-nav.is-down .cursor__dot{background:var(--accent);border-color:var(--accent)}
body.bars .cursor.is-nav .cursor__dot{background:transparent;border-color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  .cursor.is-nav .cursor__dot,
  .cursor.is-nav .cursor__core{animation:none;transform:translate(-50%,-50%) rotate(45deg)}
}

/* over light surfaces (the project slate) the white dot vanishes */
body.bars .cursor__dot{background:var(--accent)}
body.bars .cursor.is-down .cursor__dot{background:var(--fg)}
@media (prefers-reduced-motion:reduce){
  .cursor__dot{transition:width .1s linear,height .1s linear}
}

/* ================= perimeter marquee =================
   Four independent strips. The band (--mqband) is taller than the glyphs,
   so each strip is pulled in by --mqinset at BOTH ends. That inset equals
   half the difference between the band and the cap height, which lands every
   line exactly on the perpendicular line's cap height / baseline instead of
   running past it into the other band. */
.witem__box{position:relative;padding:var(--mqband);
  --mqband:26px;
  --mqcap:12px;                                   /* glyph height at 10.5px mono */
  --mqinset:calc((var(--mqband) - var(--mqcap)) / 2);
}
@media (max-width:760px){.witem__box{--mqband:20px;--mqcap:10px}}

.mq{
  position:absolute;overflow:hidden;pointer-events:none;
  font-family:"Azeret Mono",monospace;font-size:10.5px;font-weight:500;
  letter-spacing:.16em;color:var(--fg);line-height:var(--mqband);
  opacity:0;transition:opacity .3s ease;white-space:nowrap;
}
.witem:hover .mq,.witem:focus-visible .mq{opacity:1}

.mq__inner{display:inline-block;will-change:transform}
.witem:hover .mq__inner{animation:mqx 105s linear infinite}
.witem:hover .mq--r .mq__inner,
.witem:hover .mq--l .mq__inner{animation:mqy 105s linear infinite}

.mq--t{top:0;left:var(--mqinset);right:var(--mqinset);height:var(--mqband)}
.mq--b{bottom:0;left:var(--mqinset);right:var(--mqinset);height:var(--mqband);
  transform:rotate(180deg)}
.mq--r{right:0;top:var(--mqinset);bottom:var(--mqinset);width:var(--mqband);
  writing-mode:vertical-rl;text-orientation:mixed}
.mq--l{left:0;top:var(--mqinset);bottom:var(--mqinset);width:var(--mqband);
  writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg)}

@keyframes mqx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqy{from{transform:translateY(0)}to{transform:translateY(-50%)}}

@media (prefers-reduced-motion:reduce){
  .witem:hover .mq__inner{animation:none}
}

/* ================= scroll-locked hero ================= */
.lock{position:relative;height:calc(100vh + var(--lockfade));height:calc(100dvh + var(--lockfade))}
.lock__inner{position:sticky;top:0;height:100vh;height:100dvh;display:flex;
  align-items:center;justify-content:center;padding:0 var(--gut)}
.lock__stage{width:100%;max-width:1180px;will-change:opacity}
.lock__stage .logo{display:block;width:100%;height:auto;color:var(--fg)}
.lock__sub{
  margin-top:clamp(16px,2.2vh,28px);
  font-family:"Azeret Mono",monospace;
  font-size:clamp(11px,1.05vw,15px);
  letter-spacing:.06em;color:var(--fg-dim);
}
.lock__arrow{display:inline-block;margin-left:.5em;color:var(--fg)}

@media (max-width:680px){
  .lock{height:calc(100vh + 300px);height:calc(100dvh + 300px)}
  .lock__sub{font-size:11px;line-height:1.7}
}
@media (prefers-reduced-motion:reduce){
  .lock{height:100vh;height:100dvh}
  .lock__stage{opacity:1 !important}
}

/* ================= page transitions + intro sequence ================= */
/* Only the content area fades. The nav, wordmark and bars switch are
   identical on every page, so leaving them alone makes them read as
   persistent instead of reloading. */
.js body main{opacity:0}
.js body.is-ready main{opacity:1;transition:opacity .38s ease}
.js body.is-leaving main{opacity:0;transition:opacity .24s ease}

@keyframes riseIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
.js:not(.seen) .nav{opacity:0;animation:riseIn .7s cubic-bezier(.2,.8,.2,1) .12s forwards}
/* the wordmark takes its time; nav and subheader stay quick */
@keyframes bloomIn{
  from{opacity:0;transform:translateY(20px) scale(.988)}
  to{opacity:1;transform:none}
}
.js:not(.seen) .lock__stage .logo{opacity:0;animation:bloomIn 3.8s cubic-bezier(.16,1,.3,1) .45s forwards}
.js:not(.seen) .lock__sub{opacity:0;animation:bloomIn 4.1s cubic-bezier(.16,1,.3,1) .75s forwards}

@media (prefers-reduced-motion:reduce){
  .js body main,.js .nav,.js .lock__stage .logo,.js .lock__sub{opacity:1;animation:none}
}

/* ================= project page ================= */
.pmeta{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-end;
  padding:clamp(28px,5vh,54px) var(--gut) clamp(18px,3vh,30px)}
.pmeta__col{display:flex;flex-direction:column;gap:8px}
.pmeta__col--right{margin-left:auto;text-align:right}
.pmeta__val{font-size:clamp(19px,2vw,26px);font-weight:700;letter-spacing:-.02em}

/* the slate that stands in for the player until you hit play */
.player{margin:0 var(--gut);position:relative;aspect-ratio:16/9;
  background:#DFE3D6;overflow:hidden}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:680px){
  }

.pintro{padding:clamp(26px,4vh,46px) var(--gut) 0}
.pintro h2{font-size:clamp(22px,3vw,38px);font-weight:500;letter-spacing:-.02em}
.pintro h2 span{color:var(--fg-dim)}
.pintro__file{margin-top:10px;font-size:15px;color:var(--fg-dim)}
.pintro__file b{color:var(--fg);font-weight:600}

.pcols{display:grid;gap:clamp(24px,4vw,60px);
  padding:clamp(34px,6vh,72px) var(--gut) 0}
@media (min-width:820px){.pcols{grid-template-columns:1fr 1fr}}
.pcol{display:grid;grid-template-columns:minmax(70px,22%) 1fr;gap:clamp(14px,2vw,28px)}
.pcol p{color:var(--fg-dim);font-size:15.5px;max-width:46ch}
.pcol ul{list-style:none;display:grid;gap:7px}
.pcol li{display:flex;gap:11px;align-items:baseline;font-size:15.5px}
.pcol li::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--accent);flex:0 0 auto}

.pstills{padding:clamp(44px,7vh,96px) var(--gut) 0;
  display:flex;flex-direction:column;gap:clamp(12px,1.6vw,22px)}
.pstills__row{display:grid;gap:clamp(12px,1.6vw,22px)}
.pstills__row--pair{grid-template-columns:1fr 1fr}
@media (max-width:680px){.pstills__row--pair{grid-template-columns:1fr}}
.pstill{aspect-ratio:16/9;background:var(--bg-2);border:1px solid var(--line-2);
  overflow:hidden;display:grid;place-items:center}
.pstill img{width:100%;height:100%;object-fit:cover}
.pstill span{font-family:"Azeret Mono",monospace;font-size:10.5px;
  letter-spacing:.19em;text-transform:uppercase;color:rgba(237,233,224,.28)}

.pcredits{padding:clamp(44px,7vh,96px) var(--gut) 0;
  display:flex;gap:28px 40px;flex-wrap:wrap;align-items:flex-start}
.pcredits__list{display:grid;gap:9px;font-size:16px}
.pcredits__list b{font-weight:600}
.pcredits__list span{color:var(--fg-dim)}
.pnext{margin-left:auto;display:flex;align-items:center;gap:14px;
  font-size:clamp(19px,2.4vw,30px);font-weight:500;letter-spacing:-.02em}
.pnext i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);font-style:normal;transition:.25s ease}
.pnext:hover i{background:var(--accent);color:var(--bg);border-color:var(--accent)}

/* ================= bars / tone easter egg ================= */
.switch{position:fixed;left:var(--navpad);bottom:30px;z-index:60;
  display:flex;align-items:center}
.switch__btn{padding:0}
/* invisible 44px hit area around the 26px pill */
.switch__btn::before{content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:60px;height:44px}
@media (max-width:820px){
  .switch{left:var(--gut);bottom:16px}
  .foot{padding-bottom:86px}
}
.switch__btn{width:52px;height:26px;border-radius:100px;
  border:1px solid #FFFFFF;position:relative;transition:.3s ease;flex:0 0 auto}
.switch__btn::after{content:"";position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;background:var(--cyan);
  transition:.3s cubic-bezier(.2,.8,.2,1)}
body.bars .switch__btn{border-color:var(--cyan)}
body.bars .switch__btn::after{transform:translateX(26px);background:var(--cyan)}

body.bars{
  --scan:.22;
  --bg:#07090A;
  --bg-2:#101617;
  --fg:#FFFFFF;
  --fg-dim:#9FB0B4;
  --line:rgba(255,255,255,.3);
  --line-2:rgba(255,255,255,.16);
  --accent:#00E5C4;
  --accent-2:#FF4FD8;
}
body.bars .grain{
  opacity:.17;
  image-rendering:auto;
  background-size:100% 26%,100% 74%;
  background-position:left bottom,left top;
  background-repeat:no-repeat,no-repeat;
  background-image:
    linear-gradient(90deg,
      #0B0F5C 0 14.28%, #FFFFFF 14.28% 28.57%, #2D0B5C 28.57% 42.86%,
      #101617 42.86% 57.14%, #0A0A0A 57.14% 71.43%,
      #1A1A1A 71.43% 85.71%, #0A0A0A 85.71% 100%),
    linear-gradient(90deg,
      #C0C0C0 0 14.28%, #C0C000 14.28% 28.57%, #00C0C0 28.57% 42.86%,
      #00C000 42.86% 57.14%, #C000C0 57.14% 71.43%,
      #C00000 71.43% 85.71%, #0000C0 85.71% 100%);
}
/* scrim keeps everything readable on top of the bars */
body.bars::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:rgba(7,9,10,.62);
}

body.bars .lock__stage .logo{color:#FFFFFF}
body.bars body.bars .player{background:#C0C0C0}


/* ================= skip link ================= */
.skip{position:absolute;left:-9999px;top:0;z-index:10001;
  background:var(--fg);color:var(--bg);padding:12px 20px;
  font-family:"Azeret Mono",monospace;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase}
.skip:focus{left:8px;top:8px}

/* ================= mobile pass ================= */
@media (max-width:760px){
  /* no hover on touch, so the marquee band is dead space — reclaim it */
  .witem__box{padding:0}
  .mq{display:none}

  /* tighter vertical rhythm so pages aren't endless scrolls */
  .wgrid{gap:38px}
  .witem__title{margin-top:12px;font-size:15px}
  .witem__credits{font-size:13.5px;gap:0 12px}

  .sec{padding-top:44px;padding-bottom:44px}
  .phead{padding-top:32px;padding-bottom:20px}
  .split{gap:20px}
  .lede{font-size:19px}
  .body p{font-size:16px}


  /* services + process: stack the number above the text */
  .svc__row,.step{grid-template-columns:1fr;gap:6px}
  .svc__n,.step__n{padding-top:0}

  /* footer stops trying to be a single row */
  .foot{gap:20px}
  .foot__meta{margin-left:0;text-align:left}

  /* form controls need thumb-sized targets and 16px to stop iOS zooming */
  .field input,.field textarea,.field select{font-size:16px;padding:10px 0 14px}
  .field{margin-bottom:26px}
  .btn{padding:15px 32px;display:block;text-align:center}
}

/* ---- project pages on small screens ---- */
@media (max-width:760px){
  .pmeta{padding-top:26px;gap:16px}
  .pmeta__col--right{margin-left:0;text-align:left}
  .pmeta__val{font-size:19px}

  /* the slate is a dense desktop layout; strip it to name + play */
  .player{margin:0 var(--gut);aspect-ratio:16/10}
  .pintro{padding-top:24px}
  .pintro h2{font-size:20px}
  .pcols{padding-top:32px;gap:24px}
  .pcol{grid-template-columns:1fr;gap:8px}
  .pstills{padding-top:36px;gap:10px}
  .pcredits{padding-top:36px;gap:22px}
  .pnext{margin-left:0;font-size:20px}
  .pnext i{width:36px;height:36px}
}

/* ---- the locked hero has to earn its height on a phone ---- */
@media (max-width:680px){
  .lock__sub{font-size:11px;line-height:1.75;max-width:30ch}
}

/* ---- touch devices: kill sticky hover states left behind after a tap ---- */
@media (hover:none){
  .witem:hover .witem__frame img,
  .witem:hover .witem__frame video{transform:none}
  .proj:hover .proj__frame::after{opacity:0}
  .tile:hover img{filter:grayscale(.5) brightness(.6);transform:none}
}

.formnote{margin-top:18px;color:var(--fg-dim);letter-spacing:.1em;
  text-transform:none;line-height:1.7}


/* ================= scanlines ================= */
/* Always on. --scan sets the strength: .13 normally, .22 under bars. */
body::after{
  content:"";position:fixed;inset:0;z-index:8999;pointer-events:none;
  background:repeating-linear-gradient(180deg,
    #000 0 1px, rgba(0,0,0,0) 1px 3px);
  opacity:var(--scan);
}


/* ================= text selection ================= */
::selection{background:var(--sel-bg);color:var(--sel-fg);text-shadow:none}
::-moz-selection{background:var(--sel-bg);color:var(--sel-fg);text-shadow:none}

/* ================= video sits above the scanlines ================= */
/* Thumbnails and stills keep the CRT treatment; the player must not, so the
   cut is judged on its own. body::after sits at 8999. */
.player{position:relative;z-index:9500;isolation:isolate}


/* ================= visually hidden ================= */
/* Present for search engines and screen readers, invisible on screen. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0}

/* ================================================================
   ADDITIONS FOR THIS SITE
   ================================================================ */

/* ---------------- wordmark (text, not SVG) ---------------- */
.mark{font-family:"Archivo",sans-serif;font-weight:800;letter-spacing:-.035em;
  line-height:.86;font-size:clamp(17px,1.5vw,22px);text-transform:uppercase;
  display:block;color:var(--fg)}
.mark span{display:block}
.mark i{display:inline-block;width:6px;height:6px;background:var(--accent);
  border-radius:50%;vertical-align:.28em;margin-left:.28em;font-style:normal}
.mark:hover{color:var(--accent)}
@media (max-width:820px){
  .mark{font-size:16px;line-height:1}
  .mark span{display:inline}
  .mark span+span::before{content:" "}
}

/* ---------------- locked hero, typographic ---------------- */
.lock__name{font-family:"Archivo",sans-serif;font-weight:800;
  font-size:clamp(46px,13.2vw,190px);line-height:.84;letter-spacing:-.045em;
  text-transform:uppercase;color:var(--fg)}
.lock__name em{font-style:normal;display:block}
.lock__name b{color:var(--accent);font-weight:800}
/* the ambient reel loop sits behind the name at low opacity */
.lock__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.lock__bg iframe{position:absolute;top:50%;left:50%;width:177.78vh;height:56.25vw;
  min-width:100%;min-height:100%;transform:translate(-50%,-50%);border:0;
  opacity:1;filter:saturate(.92) contrast(1.03)}
/* just enough scrim to keep the type legible, top and bottom only */
.lock__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(16,18,17,.66) 0%, rgba(16,18,17,.28) 34%,
    rgba(16,18,17,.34) 62%, rgba(16,18,17,.86) 100%)}
.lock__stage{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.lock__bg{display:none}}

/* ---------------- reveal system (from hichriscarter.com) ---------------- */
.rv,.rv-left,.rv-right,.rv-scale{will-change:opacity,transform}
.rv{opacity:0;transform:translateY(30px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.visible{opacity:1;transform:translateY(0)}
.rv-left{opacity:0;transform:translateX(-50px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv-left.visible{opacity:1;transform:translateX(0)}
.rv-right{opacity:0;transform:translateX(50px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv-right.visible{opacity:1;transform:translateX(0)}
.rv-scale{opacity:0;transform:scale(.92);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv-scale.visible{opacity:1;transform:scale(1)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}
.d4{transition-delay:.4s}.d5{transition-delay:.5s}.d6{transition-delay:.6s}
@media (prefers-reduced-motion:reduce){
  .rv,.rv-left,.rv-right,.rv-scale{opacity:1!important;transform:none!important}
}

/* ---------------- drift: off-grid parallax frames ---------------- */
.band{position:relative}
.drift{position:absolute;z-index:1;pointer-events:none;overflow:hidden;
  opacity:0;transition:opacity .8s ease;will-change:transform;
  border:1px solid var(--line-2)}
.drift.visible{opacity:.72}
.drift img,.drift video{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){.drift{display:none}}
@media (prefers-reduced-motion:reduce){.drift{display:none}}

/* ---------------- collage: the scattered stack ---------------- */
.collage{position:relative;margin:clamp(30px,6vh,70px) 0;
  padding:0 var(--gut);z-index:5}
.collage__stage{position:relative;width:100%}
.ci{position:absolute;overflow:hidden;background:var(--bg-2);will-change:transform;
  transition:transform .5s var(--ease)}
.ci img,.ci video{width:100%;height:100%;object-fit:cover;display:block}
.ci:not(.ci--ba):hover{transform:scale(1.03) rotate(0deg)!important}
.ci__cap{position:absolute;left:0;bottom:-19px;font-family:"Azeret Mono",monospace;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(149,153,143,.72);white-space:nowrap}
/* below 900 the absolute stack collapses into a plain scroller */
@media (max-width:900px){
  .collage__stage{height:auto!important;display:flex;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .ci{position:relative!important;inset:auto!important;
    transform:none!important;flex:0 0 76%;height:auto!important;
    aspect-ratio:4/3;scroll-snap-align:start}
  .ci--tall{aspect-ratio:3/4}
  .ci__cap{display:none}
}

/* ---------------- client list ---------------- */
.clients{display:flex;flex-wrap:wrap;gap:0}
.clients li{list-style:none;font-family:"Archivo",sans-serif;font-weight:700;
  font-size:clamp(20px,3.1vw,40px);letter-spacing:-.03em;line-height:1.24;
  padding-right:clamp(18px,2.4vw,34px);color:var(--fg)}
.clients li+li::before{content:"";display:inline-block;width:5px;height:5px;
  background:var(--accent);border-radius:50%;vertical-align:.34em;
  margin-right:clamp(18px,2.4vw,34px)}

/* ---------------- capability rows ---------------- */
.cap{border-top:1px solid var(--line-2)}
.cap__row{display:grid;grid-template-columns:1fr auto;gap:10px 24px;
  align-items:baseline;padding:30px 0;border-bottom:1px solid var(--line-2);
  transition:padding-left .35s var(--ease)}
a.cap__row:hover{padding-left:12px}
.cap__row h3{font-size:clamp(22px,3.4vw,40px);font-weight:700;letter-spacing:-.03em}
a.cap__row:hover h3{color:var(--accent)}
.cap__row p{grid-column:1/-1;color:var(--fg-dim);max-width:56ch;
  margin-top:8px;font-size:16.5px}
.cap__go{font-family:"Azeret Mono",monospace;font-size:11px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--fg-dim)}
a.cap__row:hover .cap__go{color:var(--accent)}
.tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;grid-column:1/-1}
.tags span{font-family:"Azeret Mono",monospace;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent-2);border:1px solid var(--line);
  padding:5px 10px}

/* ---------------- before / after slider ---------------- */
.ba{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line-2);
  background:var(--bg-2);cursor:ew-resize;touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__after{position:absolute;inset:0;width:100%;height:100%;
  clip-path:inset(0 0 0 50%)}
.ba__handle{position:absolute;top:0;bottom:0;left:50%;width:1px;
  background:var(--fg);transform:translateX(-.5px);pointer-events:none}
.ba__handle::after{content:"";position:absolute;top:50%;left:50%;width:11px;height:11px;
  transform:translate(-50%,-50%) rotate(45deg);border:1px solid var(--fg);
  background:var(--fg)}
.ba__lab{position:absolute;bottom:12px;font-family:"Azeret Mono",monospace;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg);background:rgba(16,18,17,.6);padding:5px 9px;pointer-events:none}
.ba__lab--a{left:12px}
.ba__lab--b{right:12px}

/* ---------------- portrait ---------------- */
.portrait{aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line-2);
  background:var(--bg-2)}
.portrait img{width:100%;height:100%;object-fit:cover}

/* ---------------- inline contact strip ---------------- */
.strip{display:grid;gap:26px 40px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.strip__item .mono{display:block;margin-bottom:7px}
.strip__item a,.strip__item span{font-size:clamp(17px,1.7vw,21px);font-weight:500;
  letter-spacing:-.015em}
.strip__item a:hover{color:var(--accent)}

/* ---------------- big text link ---------------- */
.biglink{display:inline-flex;align-items:center;gap:16px;
  font-size:clamp(26px,4.6vw,60px);font-weight:700;letter-spacing:-.035em}
.biglink i{display:grid;place-items:center;width:clamp(38px,4vw,52px);
  height:clamp(38px,4vw,52px);border-radius:50%;border:1px solid var(--line);
  font-style:normal;font-size:16px;transition:.25s ease}
.biglink:hover i{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.biglink:hover{color:var(--accent)}

/* ---------------- footer emblem ---------------- */
/* outlined CC mark: the lettering ring turns, the centre stays put */
.badge svg path{fill:currentColor}
.badge__mark path{fill:var(--fg)}
.collage__stage{max-width:1120px;margin:0 auto}

/* ---- mobile nav: four labels will not fit on one line at 390px ---- */
@media (max-width:820px){
  .nav{padding-bottom:14px}
  .nav__links{flex-wrap:wrap;width:100%;gap:10px 18px;margin-top:2px}
  .nav__links a{font-size:11.5px;letter-spacing:.14em}
}

/* ---- before/after: the graded layer is clipped from the right ---- */
/* both layers are the same full-size element, stacked. only the clip moves. */
.ba__after img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---- hero runs full bleed, underneath the nav rail ---- */
@media (min-width:821px){
  .lock{margin-left:calc(var(--navw) * -1);width:calc(100% + var(--navw))}
  .lock__inner{padding-left:calc(var(--navw) + var(--gut))}
}


/* ---- play reel button ---- */
.reelbtn{margin-top:clamp(20px,3.2vh,36px);display:inline-flex;align-items:center;
  gap:13px;font-family:"Azeret Mono",monospace;font-size:12px;font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;color:var(--fg);
  border:1px solid var(--line);border-radius:100px;padding:14px 28px 14px 22px;
  background:rgba(16,18,17,.34);-webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);transition:.25s ease;cursor:pointer}
.reelbtn:hover{border-color:var(--accent);color:var(--accent);
  background:rgba(16,18,17,.6)}
.reelbtn u{display:block;width:9px;height:9px;border-radius:50%;
  background:var(--accent);text-decoration:none;flex:0 0 auto;
  animation:tally 1.9s ease-in-out infinite}
.reelbtn small{color:var(--fg-dim);letter-spacing:.16em;font-size:11px}
@keyframes tally{0%,100%{opacity:1}50%{opacity:.34}}
@media (prefers-reduced-motion:reduce){.reelbtn u{animation:none}}

/* ---- reel lightbox ---- */
.lb{position:fixed;inset:0;z-index:12000;background:rgba(7,8,8,.95);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;
  padding:clamp(14px,4vw,64px)}
.lb.is-open{display:flex}
.lb__stage{position:relative;width:min(1320px,100%);aspect-ratio:16/9;
  background:#000;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.lb__stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  opacity:0;transition:opacity .45s ease;background:#000}
.lb__stage iframe.is-in{opacity:1}
/* sits inside the video frame, top left, clear of Vimeo's own controls */
.lb__close{position:absolute;top:12px;left:12px;z-index:3;
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:rgba(10,11,11,.55);-webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);color:#EDE9E0;transition:.22s ease;padding:0}
.lb__close svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.7;
  fill:none;stroke-linecap:round}
.lb__close:hover{background:rgba(10,11,11,.85);color:var(--accent)}
.lb__close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body.lb-open{overflow:hidden}
/* the ambient loop steps out of the way while the reel is up */
body.lb-open .lock__bg{opacity:0}
.lock__bg{transition:opacity .4s ease}
@media (max-width:680px){
  .lb{padding:0;align-items:center}
  .lb__stage{width:100%}
}

/* ---- portrait sits off-grid like the collage frames ---- */
.portrait--tilt{transform:rotate(-1.5deg);transition:transform .5s var(--ease)}
.portrait--tilt:hover{transform:rotate(0deg)}
.portrait img{object-position:center 22%}

/* ================================================================
   V2 — single page, solid hero, clean reel, light theme
   These rules come last and intentionally supersede the locked-hero
   block above. The .lock styles are left in place in case you want
   to go back to the scroll-locked version.
   ================================================================ */

/* ---------------- hero: solid ground, name, one action ---------------- */
.top{min-height:calc(100vh - var(--navh,0px));
  min-height:calc(100dvh - var(--navh,0px));display:flex;flex-direction:column;
  justify-content:center;padding:clamp(70px,12vh,120px) var(--gut) clamp(40px,7vh,70px)}
.top__name{font-family:"Archivo",sans-serif;font-weight:800;
  font-size:clamp(46px,13vw,178px);line-height:.84;letter-spacing:-.045em;
  text-transform:uppercase;color:var(--fg)}
.top__name em{font-style:normal;display:block}
.top__name b{color:var(--accent);font-weight:800}
.top__sub{margin-top:clamp(16px,2.4vh,26px);font-family:"Azeret Mono",monospace;
  font-size:clamp(11px,1.05vw,14.5px);letter-spacing:.06em;color:var(--fg-dim);
  line-height:1.85;max-width:68ch}
.js:not(.seen) .top__name{opacity:0;animation:bloomIn 2.6s cubic-bezier(.16,1,.3,1) .2s forwards}
.js:not(.seen) .top__sub{opacity:0;animation:bloomIn 2.9s cubic-bezier(.16,1,.3,1) .45s forwards}
.js:not(.seen) .top .reelbtn{opacity:0;animation:bloomIn 3s cubic-bezier(.16,1,.3,1) .7s forwards}
@media (prefers-reduced-motion:reduce){
  .js:not(.seen) .top__name,.js:not(.seen) .top__sub,
  .js:not(.seen) .top .reelbtn{opacity:1;animation:none}
}

/* ---------------- the reel: full bleed, nothing on top of it ------------ */
.reel{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;
  cursor:pointer;display:block;width:100%;border:0;padding:0}
@media (min-width:821px){
  .reel{margin-left:calc(var(--navw) * -1);width:calc(100% + var(--navw))}
}
.reel iframe{position:absolute;top:50%;left:50%;width:177.78vh;height:56.25vw;
  min-width:100%;min-height:100%;transform:translate(-50%,-50%);border:0;
  pointer-events:none}
.reel__ph{position:absolute;inset:0;background:var(--bg-2)}
.reel__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:14px;
  font-family:"Azeret Mono",monospace;font-size:12.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:#EDE9E0;
  border:1px solid rgba(237,233,224,.5);border-radius:100px;
  padding:16px 34px 16px 28px;background:rgba(10,11,11,.42);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:.28s ease;white-space:nowrap}
.reel__play u{display:block;width:9px;height:9px;border-radius:50%;
  background:var(--accent);text-decoration:none;flex:0 0 auto;
  animation:tally 1.9s ease-in-out infinite}
.reel:hover .reel__play{background:rgba(10,11,11,.72);
  border-color:var(--accent);color:#fff}
.reel:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
/* corner ticks so the frame reads as a monitor, not a stock video block */
.reel__tick{position:absolute;width:16px;height:16px;border:1px solid rgba(237,233,224,.45);
  pointer-events:none}
.reel__tick--tl{top:16px;left:16px;border-right:0;border-bottom:0}
.reel__tick--tr{top:16px;right:16px;border-left:0;border-bottom:0}
.reel__tick--bl{bottom:16px;left:16px;border-right:0;border-top:0}
.reel__tick--br{bottom:16px;right:16px;border-left:0;border-top:0}
@media (max-width:680px){
  .reel{aspect-ratio:16/10}
  .reel__play{font-size:11px;padding:13px 24px 13px 20px}
  .reel__tick{display:none}
}
/* the reel is the one thing that should not wear the CRT treatment */
.reel{z-index:9500;isolation:isolate}

/* ---------------- theme toggle button in the rail ---------------- */


/* ================================================================
   LIGHT THEME
   ================================================================ */
:root[data-theme="light"]{
  --bg:#F3F1EC;
  --bg-2:#E5E2DA;
  --line:rgba(20,21,19,.22);
  --line-2:rgba(20,21,19,.11);
  --fg:#141513;
  --fg-dim:#5E615A;
  --accent:#2B58D6;
  --accent-2:#6E7A64;
  --scan:.035;
  --sel-bg:#2B58D6;
  --sel-fg:#F3F1EC;
}
:root[data-theme="light"] .grain{opacity:.14;mix-blend-mode:multiply}
:root[data-theme="light"] body::after{opacity:.03}
/* the slate flips to dark so it still reads as a separate object */
:root[data-theme="light"] .lb__stage{background:#141513}
:root[data-theme="light"] :root[data-theme="light"] :root[data-theme="light"] :root[data-theme="light"]

:root[data-theme="light"] .lb{background:rgba(243,241,236,.95)}
:root[data-theme="light"] .lb__close{background:rgba(243,241,236,.8);color:#141513}


:root[data-theme="light"] .switch__btn{border-color:#141513}
:root[data-theme="light"] .cursor__dot{background:#141513}
:root[data-theme="light"] .cursor.is-nav .cursor__dot{border-color:#141513}
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field textarea,
:root[data-theme="light"] .field select{color:#141513}
:root[data-theme="light"] .person__frame img,
:root[data-theme="light"] .ci img,
:root[data-theme="light"] .ci video{filter:none}

/* ---------------- anchor nav needs offset for the sticky mobile bar ---- */
:target{scroll-margin-top:96px}

/* the reel sits above the scanlines, so the rail and the bars switch
   have to sit above the reel or they vanish behind it */
.nav{z-index:9600}
.switch{z-index:9600}


/* keep the rail's contents above its own scrim */
.nav > .mark,.nav > .nav__links{position:relative;z-index:1}


/* light-theme corrections */
:root[data-theme="light"] .reelbtn{background:rgba(20,21,19,.04)}
:root[data-theme="light"] .reelbtn:hover{background:rgba(20,21,19,.07)}
:root[data-theme="light"] .badge svg{color:var(--fg-dim)}
:root[data-theme="light"] .ci{background:var(--bg-2)}

/* ---- grade sliders living inside the collage ---- */
.ci--ba{cursor:ew-resize;background:#000}
.ci--ba .ba{position:absolute;inset:0;width:100%;height:100%;
  aspect-ratio:auto;border:0}
.ci--ba .ba__lab{font-size:9px;letter-spacing:.14em;padding:4px 7px;bottom:8px}
.ci--ba .ba__lab--a{left:8px}
.ci--ba .ba__lab--b{right:8px}
.ci--ba .ba__handle::after{width:9px;height:9px}

/* ---- stop the browser treating a slider drag as an image drag ---- */
.ba,.ba img{-webkit-user-select:none;user-select:none;
  -webkit-user-drag:none;-webkit-touch-callout:none}
.ba img{pointer-events:none}

/* ---- hero actions ---- */
.herolinks{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);flex-wrap:wrap}
.textlink{font-family:"Azeret Mono",monospace;font-size:12px;font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;color:var(--fg-dim);
  display:inline-flex;align-items:center;gap:9px;padding:14px 2px;
  border-bottom:1px solid transparent;transition:.25s ease}
.textlink i{font-style:normal;transition:transform .25s var(--ease)}
.textlink:hover{color:var(--accent);border-bottom-color:var(--accent)}
.textlink:hover i{transform:translateX(4px)}
/* the button carries the top margin on its own elsewhere; in the hero row the
   wrapper owns it so both items sit on the same line */
.herolinks{margin-top:clamp(20px,3.2vh,36px)}
.herolinks .reelbtn{margin-top:0}

/* ---- client logos: single-colour masks, so they follow the theme ---- */
.logos{display:flex;flex-wrap:wrap;align-items:center;list-style:none;
  gap:clamp(20px,2.8vw,44px);font-size:clamp(10px,1.05vw,13.5px)}
.logos li{list-style:none;line-height:0}
/* the files are solid white on transparent. the light theme inverts them to
   black, which keeps one set of assets working on both grounds. */
.logos .logo{display:block;width:auto;opacity:.68;transition:opacity .3s ease}
.logos li:hover .logo{opacity:1}
:root[data-theme="light"] .logos .logo{filter:invert(1)}
@media (max-width:760px){
  .logos{gap:18px 22px;font-size:9px}
}

/* ---- location bug ---- */
.bug{display:inline-block;border:1px solid var(--line);padding:7px 13px;
  font-family:"Azeret Mono",monospace;font-size:10.5px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--fg-dim);
  margin-top:clamp(20px,2.8vh,30px);line-height:1}
.js:not(.seen) .top .bug{opacity:0;animation:bloomIn 2.8s cubic-bezier(.16,1,.3,1) .35s forwards}
@media (prefers-reduced-motion:reduce){.js:not(.seen) .top .bug{opacity:1;animation:none}}
@media (max-width:760px){.bug{font-size:9.5px;padding:6px 11px;letter-spacing:.18em}}
/* the bug also sits under a page heading */
.phead .bug{margin-top:clamp(14px,2vh,20px)}
/* held to roughly the paragraph width above, so seven marks fall into two
   tidy rows instead of one long line that runs past the text */
.logos{max-width:560px}

/* inline links inside body copy need to look like links */
.body a{color:var(--fg);border-bottom:1px solid var(--line);
  padding-bottom:1px;transition:.25s ease}
.body a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* poster frame behind the reel loop, so the block is never an empty rectangle */
.reel__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* tighter between the two logo rows than between the marks themselves */
.logos{gap:15px clamp(20px,2.8vw,44px)}
@media (max-width:760px){.logos{gap:13px 22px}}
/* the contact link sits on its own line under the bio, not trailing the copy */
.body .body__cta{margin-top:14px}

/* ---- contact form ---- */
/* bait field: bots fill it, people never see it */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.formstatus{margin-top:18px;font-size:12.5px;letter-spacing:.05em;
  color:var(--fg-dim);min-height:1em}
.formstatus.is-bad{color:var(--accent)}
.formstatus a{color:inherit;border-bottom:1px solid currentColor}
.form-done{margin-top:clamp(34px,5vh,56px);border-top:1px solid var(--line-2);
  padding-top:clamp(26px,4vh,40px)}
.form-done h3{font-size:clamp(21px,2.6vw,32px);font-weight:700;letter-spacing:-.03em}
.form-done p{margin-top:12px;color:var(--fg-dim);max-width:48ch;font-size:16.5px}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ---- hero scroll treatment ----
   The name fades and splits as the section leaves. No scroll is stolen: this
   rides the hero's normal exit, so the reel still starts at the fold.
   overflow:hidden clips the slide at the hero's left edge, which on desktop is
   exactly the nav rail boundary, so the type never runs under the nav labels. */
.top{overflow:hidden}
.top__name em{will-change:transform}
@media (prefers-reduced-motion:reduce){
  .top{opacity:1!important}
  .top__name em{transform:none!important}
}

/* ================= mobile pass =================
   Things that cost bandwidth or attention on a phone without earning either. */

/* The grade sliders are drag-to-compare. Inside the horizontal collage
   scroller they compete with the swipe gesture (touch-action:pan-y stops the
   scroller moving), and at ~280px wide the retouch detail is not legible
   anyway. Hidden below 900px, which also means their six images never load. */
@media (max-width:900px){
  .ci--ba{display:none!important}
}

/* Scanlines are a full-screen fixed overlay repainting on every scroll frame.
   At phone size they are invisible at .13 opacity and cost a composited layer. */
@media (max-width:760px){
  body::after{display:none}
}

/* A still frame stands in for each clip on phones; keep it filling the frame
   exactly as the video would. */
.ci img.loopclip,.drift img.loopclip{width:100%;height:100%;object-fit:cover;display:block}

/* Touch targets. The nav row rendered 34x18, below the 24px minimum and hard
   to hit with a thumb. Padding is added inside the existing row rather than
   with invisible overlays, so nothing can mis-capture a neighbouring tap. */
@media (max-width:820px){
  .nav__links{gap:4px 10px}
  .nav__links a{padding:11px 8px;margin:-11px -8px}
  .mark{padding:6px 0}
}
/* Footer links sat at 14px tall. */
.foot__meta a{display:inline-block;padding:5px 0}
@media (max-width:760px){
  .foot__meta a{padding:8px 0}
}

/* The bars toggle is an easter egg. Pinned to the viewport it sits on top of
   body copy for the whole scroll and eats thumb space, so on phones it drops
   into the footer where it belongs and stops covering anything. */
@media (max-width:760px){
  .switch{position:static;margin:0;align-self:flex-end}
  .foot{padding-bottom:56px}
}

/* The nav is sticky on phones, so anchor jumps need to clear it. */
#reel,#work,#services,#contact,#gear{scroll-margin-top:16px}
@media (max-width:820px){
  #reel,#work,#services,#contact,#gear{scroll-margin-top:112px}
}

/* ---- hero outline trail ----
   Stroke-only clones of each half, parked along the travel path. Built by
   site.js on wide screens only, so there is nothing to render otherwise. */
.top__name{position:relative}
.top__name em{position:relative;z-index:1}
.top__ghost{
  position:absolute;left:0;white-space:nowrap;pointer-events:none;
  opacity:0;color:transparent;
  -webkit-text-stroke:1.5px var(--fg);
  will-change:transform,opacity;
}
.top__ghost b{color:transparent}