/* ---------- tokens (Static45 brand) ---------- */
:root{
  --ink:#111111;
  --paper:#F2EFE6;
  --paper-dim:#E4E0D2;
  --accent:#E8FF00;
  --accent-alt:#FF4D00;
  --neutral:#8A8A85;
  --rail-w:84px;
  --bar-h:56px;
  --pad-hero:56px;
  --pad-card:32px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;}
html,body{
  margin:0; padding:0; height:100%;
  background:var(--paper); color:var(--ink);
  font-family:'Inter',sans-serif;
  overscroll-behavior:none;
}
body{ overflow:hidden; cursor:none; }
body.is-touch{ cursor:auto; }

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; background:none; border:none; color:inherit; cursor:inherit;}

mark{
  background:var(--accent); color:var(--ink); position:relative;
  padding:0 10px; display:inline-block; font-style:normal;
  transform:rotate(-1deg);
}

::selection{ background:var(--accent); color:var(--ink); }

/* desktop/touch label swapping */
.sh-touch{ display:none; }
body.is-touch .sh-desktop{ display:none; }
body.is-touch .sh-touch{ display:inline; }

/* ---------- grain overlay ---------- */
.grain{
  position:fixed; inset:0; z-index:80; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- custom cursor ---------- */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; z-index:90;
  pointer-events:none; border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot{ width:7px; height:7px; background:var(--ink); }
.cursor-ring{
  width:38px; height:38px; border:2px solid var(--ink);
  transition:width .25s var(--ease), height .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
  display:flex; align-items:center; justify-content:center;
}
.cursor-ring.is-hover{
  width:84px; height:84px; background:var(--accent); border-color:var(--accent);
  mix-blend-mode:difference;
}
.cursor-label{
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:1px;
  color:var(--ink); opacity:0; transition:opacity .2s;
}
.cursor-ring.is-hover .cursor-label{ opacity:1; }
@media (pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }

/* ---------- rail ---------- */
.rail{
  position:fixed; top:0; left:0; bottom:0; width:var(--rail-w); z-index:70;
  background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; align-items:center;
  padding:20px 0 26px;
  border-right:2px solid var(--ink);
}
.rail-logo{ width:46px; margin-bottom:8px; }
.rail-logo img{ width:100%; }

.hamburger{
  flex:1 0 auto; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px;
}
.hamburger span{
  width:22px; height:2px; background:currentColor;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.rail-bottom{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.rail-social{ display:flex; flex-direction:column; gap:10px; }
.rail-social a{ font-size:11px; letter-spacing:1px; opacity:.6; transition:opacity .2s,color .2s; font-family:'Space Mono',monospace; }
.rail-social a:hover{ opacity:1; color:var(--accent); }

.rail-cta{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:11px; letter-spacing:3px; padding:14px 8px;
  border:1px solid rgba(242,239,230,.35);
  font-family:'Space Mono',monospace;
  transition:all .2s var(--ease);
}
.rail-cta:hover{ background:var(--accent); border-color:var(--accent); color:var(--ink); }

/* ---------- section drawer menu ---------- */
.nav-backdrop{
  position:fixed; inset:0; z-index:60; background:rgba(17,17,17,.4);
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
.nav-backdrop.is-open{ opacity:1; pointer-events:auto; }

.nav-drawer{
  position:fixed; top:0; left:var(--rail-w); bottom:0; width:340px; max-width:80vw;
  z-index:65; background:var(--paper); color:var(--ink);
  border-right:2px solid var(--ink);
  padding:100px 8px 40px;
  transform:translateX(-115%);
  transition:transform .4s var(--ease);
  overflow-y:auto;
}
.nav-drawer.is-open{ transform:translateX(0); }
.nav-drawer ul{ list-style:none; margin:0; padding:0; }
.nav-drawer li{ border-bottom:1px solid rgba(17,17,17,.15); }
.nav-drawer li:first-child{ border-top:1px solid rgba(17,17,17,.15); }
.nav-drawer button{
  width:100%; display:flex; align-items:baseline; gap:16px;
  padding:20px 20px; text-align:left;
}
.nd-num{ font-family:'Space Mono',monospace; font-size:12px; opacity:.5; }
.nd-label{
  font-family:'Anton',sans-serif; font-size:22px; text-transform:uppercase;
  letter-spacing:.5px; transition:background-color .2s var(--ease), transform .2s var(--ease);
  display:inline-block; padding:0 2px;
}
.nav-drawer button:hover .nd-label{ background:var(--accent); transform:translateX(4px); }
.nav-drawer li.is-active .nd-label{ background:var(--accent); }
.nav-drawer li.is-active .nd-num{ opacity:1; }

/* ---------- progress + index ---------- */
.progress-track{
  position:fixed; left:var(--rail-w); right:0; bottom:0; height:3px; z-index:70;
  background:rgba(17,17,17,.12);
}
.progress-fill{ height:100%; width:0%; background:var(--accent); }
.panel-index{
  position:fixed; top:20px; right:28px; z-index:70;
  font-size:12px; letter-spacing:2px; font-family:'Space Mono',monospace;
}

/* ---------- track / panels ---------- */
.track{
  position:fixed; top:0; left:0;
  height:100vh; height:100svh;   /* svh = viewport with browser chrome showing */
  display:flex; will-change:transform;
  padding-left:var(--rail-w);
}
.panel{
  position:relative;
  height:100vh; height:100svh; flex:0 0 auto;
  display:flex; flex-direction:column; justify-content:center;
  border-right:2px solid var(--ink);
  overflow:hidden;
}
.panel--half{ width:50vw; padding:0 var(--pad-hero); }
.panel--quarter{ width:25vw; padding:0 var(--pad-card); }

.panel-tag{
  position:absolute; top:34px; left:var(--pad-card);
  font-size:11px; letter-spacing:2px; opacity:.6; font-family:'Space Mono',monospace;
}
.panel--half .panel-tag{ left:var(--pad-hero); font-size:12px; letter-spacing:3px; }

.halftone{
  position:absolute; right:-120px; top:-120px; width:520px; height:520px;
  background-image:radial-gradient(var(--ink) 30%, transparent 31%);
  background-size:14px 14px; opacity:.08; border-radius:50%;
  pointer-events:none;
}
.halftone--contact{ background-image:radial-gradient(var(--accent) 30%, transparent 31%); opacity:.18; }

/* ---------- hero ---------- */
.panel--hero{ background:var(--paper); }

.brand-lockup{
  display:block; background:var(--ink);
  /* pull out past the panel padding so the bar runs the full width of the card */
  margin:0 calc(var(--pad-hero) * -1) 26px;
  padding:16px var(--pad-hero);
}
.brand-lockup img{ height:clamp(38px,4.4vw,64px); width:auto; }

.eyebrow{
  font-size:11px; letter-spacing:3px; margin:0 0 16px; opacity:.7;
  font-family:'Space Mono',monospace;
}
.hero-title{
  font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase;
  line-height:.92; margin:0; font-size:clamp(34px,6.4vw,100px);
}
.hero-title .line{ display:block; }
.hero-title .l2 mark{ font-style:normal; }
.hero-sub{ max-width:440px; font-size:15px; line-height:1.6; margin:22px 0 0; }
.scroll-hint{
  position:absolute; bottom:40px; left:var(--pad-hero); display:flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:3px; font-family:'Space Mono',monospace;
}
.scroll-hint svg{ animation:nudge 1.4s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{transform:translateX(0);} 50%{transform:translateX(8px);} }

.strike{ position:relative; color:var(--accent); }
.section-title{
  font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(24px,3.4vw,46px); line-height:1.08; margin:60px 0 26px;
}

/* ---------- the wall (interactive spray paint card) ---------- */
.panel--wall{
  padding:0;
  background-image:url('../assets/wall.jpg');
  background-size:cover; background-position:center;
  overflow:hidden;
}
.panel--wall .panel-tag{
  z-index:4; color:var(--paper); background:var(--ink);
  padding:6px 10px; opacity:1; top:26px;
}
.spray-canvas{ position:absolute; inset:0; z-index:2; width:100%; height:100%; display:block; }
.wall-hint{
  position:absolute; z-index:3; left:50%; top:50%;
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none; text-align:center;
  transition:opacity .6s var(--ease);
}
.wall-hint.is-gone{ opacity:0; }
.wall-hint-kicker{
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:3px;
  color:var(--ink); opacity:.55;
}
.wall-hint-line{
  font-family:'Anton',sans-serif; text-transform:uppercase;
  font-size:clamp(20px,2.4vw,34px); letter-spacing:1px;
  color:var(--ink); opacity:.4;
}
.wall-clear{
  position:absolute; z-index:4; right:22px; bottom:22px;
  font-family:'Space Mono',monospace; font-weight:700;
  font-size:10px; letter-spacing:1.5px;
  color:var(--paper); background:var(--ink);
  border:2px solid var(--ink); padding:9px 13px;
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), background-color .2s, color .2s;
}
.wall-clear.is-visible{ opacity:.85; pointer-events:auto; }
.wall-clear:hover{ background:var(--accent); color:var(--ink); opacity:1; }

.cursor-ring.is-spraying{
  width:26px; height:26px;
  background:transparent; border-color:var(--accent); border-width:2px;
  mix-blend-mode:normal;
}
.cursor-ring.is-spraying .cursor-label{ opacity:0; }
.cursor-dot.is-spraying{ background:var(--accent); }

/* ---------- service cards ---------- */
.panel--card{ cursor:none; justify-content:flex-start; padding-bottom:0; }
.panel--card-a{ background:var(--ink); color:var(--paper); }
.panel--card-b{ background:var(--paper); color:var(--ink); }
.panel--card-c{ background:var(--accent); color:var(--ink); }
.panel--card-d{ background:var(--paper-dim); color:var(--ink); }
.panel--card-e{ background:var(--ink); color:var(--paper); }

.card-face{
  position:relative; z-index:2;
  padding-top:88px;
  transition:transform .45s var(--ease);
}
.card-icon{ width:38px; height:38px; margin-bottom:16px; }
.card-title{
  font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase;
  line-height:.98; margin:0 0 14px; font-size:clamp(22px,2.6vw,38px);
  word-break:break-word;
}
.card-hook{ font-size:13px; line-height:1.55; margin:0; opacity:.85; }

/* reveal panel — height is set by JS so it rises to just under the card text */
.card-reveal{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:24px var(--pad-card) 26px;
  transform:translateY(100%);
  transition:transform .45s var(--ease);
  border-top:2px solid currentColor;
  display:flex; flex-direction:column;
}
.panel--card-a .card-reveal{ background:var(--accent); color:var(--ink); }
.panel--card-e .card-reveal{ background:var(--paper-dim); color:var(--ink); }
.panel--card-b .card-reveal{ background:var(--ink); color:var(--paper); }
.panel--card-c .card-reveal{ background:var(--ink); color:var(--paper); }
.panel--card-d .card-reveal{ background:var(--accent); color:var(--ink); }

.panel--card:hover .card-reveal,
.panel--card:focus-within .card-reveal,
.panel--card.is-revealed .card-reveal{ transform:translateY(0); }

.cr-lead{
  font-family:'Anton',sans-serif; text-transform:uppercase;
  font-size:clamp(15px,1.5vw,20px); letter-spacing:.5px;
  margin:0 0 14px; line-height:1.1;
}
.card-reveal ul{ margin:0 0 18px; padding-left:16px; font-size:12.5px; line-height:1.65; }
.card-reveal li{ margin-bottom:9px; }
.card-cta{
  font-family:'Space Mono',monospace; font-weight:700; font-size:11px; letter-spacing:1.5px;
  border:2px solid currentColor; padding:11px 14px; display:inline-block;
  margin-top:auto; align-self:flex-start;
  transition:background-color .2s, color .2s;
}
.card-cta:hover{ background:var(--accent); color:var(--ink); border-color:var(--accent); }
.panel--card-a .card-cta:hover,.panel--card-d .card-cta:hover{ background:var(--ink); color:var(--accent); border-color:var(--ink); }

/* ---------- contact ---------- */
.panel--contact{ background:var(--ink); color:var(--paper); border-right:none; }
.contact-title{ color:var(--paper); font-size:clamp(30px,4.2vw,64px); }
.contact-title .strike{ color:var(--accent); }
.contact-email{
  font-family:'Anton',sans-serif; font-size:clamp(16px,2vw,28px);
  border-bottom:3px solid var(--accent); display:inline-block; width:fit-content;
  padding:4px 6px 6px; margin-top:8px; margin-left:-6px; word-break:break-all;
  touch-action:manipulation;
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.contact-email:hover,.contact-email:focus-visible{ background:var(--accent); color:var(--ink); }
.contact-email:active{ background:var(--accent); color:var(--ink); }
.contact-footer{
  position:absolute; bottom:34px; left:var(--pad-hero); right:var(--pad-hero);
  display:flex; flex-direction:column; gap:6px;
  font-size:10px; letter-spacing:1.5px; opacity:.7; font-family:'Space Mono',monospace;
}
.contact-footer .rail-social a{ opacity:1; }

/* =========================================================
   MOBILE / TOUCH — horizontal swipe pager, one panel per screen
   ========================================================= */
@media (max-width:900px), (pointer:coarse){
  body{ overflow:hidden; cursor:auto; }

  /* rail becomes a fixed top bar */
  .rail{
    top:0; left:0; right:0; bottom:auto; width:100%; height:var(--bar-h);
    flex-direction:row; align-items:center; justify-content:space-between;
    padding:0 14px; border-right:none; border-bottom:2px solid var(--ink);
  }
  .rail-logo{ width:34px; margin:0; order:1; }
  .hamburger{ flex:0 0 auto; width:40px; height:40px; order:0; gap:5px; }
  .rail-bottom{ flex-direction:row; align-items:center; gap:14px; order:2; }
  .rail-social{ flex-direction:row; gap:10px; }
  .rail-cta{
    writing-mode:horizontal-tb; transform:none;
    padding:9px 12px; font-size:10px; letter-spacing:2px;
  }

  .nav-drawer{
    top:var(--bar-h); left:0; width:100%; max-width:none;
    padding:12px 8px 40px; border-right:none;
    transform:translateX(-105%);
  }
  .nav-drawer button{ padding:16px 18px; }
  .nd-label{ font-size:20px; }

  /* keep the track horizontal — swipe drives it, same as desktop wheel */
  .track{
    position:fixed; top:var(--bar-h); left:0;
    height:calc(100vh - var(--bar-h));
    height:calc(100svh - var(--bar-h));
    flex-direction:row; padding-left:0;
    touch-action:pan-y;
  }
  .panel,
  .panel--half,
  .panel--quarter{
    width:100vw;
    height:calc(100vh - var(--bar-h));
    height:calc(100svh - var(--bar-h));
    padding:30px 24px calc(34px + env(safe-area-inset-bottom, 0px));
    border-right:2px solid var(--ink); border-bottom:none;
  }
  .panel--wall{ padding:0; }

  .panel-tag,
  .panel--half .panel-tag{ left:24px; top:20px; font-size:11px; letter-spacing:2px; }
  .panel--wall .panel-tag{ top:16px; left:16px; }

  .progress-track{ left:0; height:4px; }
  .panel-index{ display:none; }

  /* hero scales down so it never overflows a phone screen */
  .brand-lockup{ margin:0 -24px 18px; padding:12px 24px; }
  .brand-lockup img{ height:34px; }
  .hero-title{ font-size:clamp(38px,12.5vw,66px); }
  .hero-sub{ font-size:14px; margin-top:18px; max-width:none; }
  .eyebrow{ font-size:10px; letter-spacing:2px; }
  .scroll-hint{ left:24px; bottom:calc(22px + env(safe-area-inset-bottom, 0px)); }

  /* cards: reveal is always present and slides up when the panel becomes active */
  .panel--card{ cursor:auto; padding-bottom:0; }
  .card-face{ padding-top:56px; transform:none !important; }
  .card-title{ font-size:clamp(30px,8.5vw,46px); }
  .card-hook{ font-size:14px; }

  .card-reveal{
    padding:22px 24px calc(24px + env(safe-area-inset-bottom, 0px));
    transform:translateY(100%);
    transition:transform .55s var(--ease);
  }
  .panel.is-active .card-reveal{ transform:translateY(0); transition-delay:.18s; }
  .cr-lead{ font-size:18px; }
  .card-reveal ul{ font-size:13.5px; }
  .card-reveal li{ margin-bottom:8px; }
  .card-cta{ font-size:11px; padding:12px 16px; }

  .contact-title{ font-size:clamp(28px,8vw,44px); }
  .contact-email{ font-size:clamp(15px,4.4vw,22px); }
  .contact-footer{
    position:relative; left:0; right:0; bottom:auto;
    margin-top:28px; gap:8px;
  }
  .wall-clear{ right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); }
  .wall-hint-line{ font-size:22px; }
}

/* very short phones — claw back vertical space */
@media (max-height:680px) and (pointer:coarse){
  .card-face{ padding-top:44px; }
  .card-title{ font-size:30px; }
  .hero-title{ font-size:clamp(32px,10vw,48px); }
  .brand-lockup img{ height:28px; }
}