/* ═══════════════════════════════════════════════════════════════
   NEON PARISH — void, sodium, cyan, magenta
   Display  Anybody      (variable width — pushed wide for headings)
   Body     Chivo
   Data     Chivo Mono
   Glass    Yellowtail   (the script that behaves like bent tube)
   ═══════════════════════════════════════════════════════════════ */

:root{
  --void:    #08070C;
  --asphalt: #100F17;
  --bruise:  #1B1626;
  --edge:    rgba(237,233,245,.14);
  --chalk:   #EDE9F5;
  --chalk-d: #8B85A0;
  --cyan:    #48E8FF;
  --magenta: #FF3DA5;
  --sodium:  #FFB347;

  /* live tube colour — the builder writes to this */
  --tube: #48E8FF;

  --pad: clamp(1.25rem, 5vw, 6rem);
  --maxw: 1560px;

  --f-disp:"Anybody", Impact, sans-serif;
  --f-body:"Chivo", system-ui, sans-serif;
  --f-mono:"Chivo Mono", ui-monospace, monospace;
  --f-glass:"Yellowtail", cursive;

  --ease: cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
section[id],footer[id]{ scroll-margin-top:5rem; }

body{
  margin:0;
  background:var(--void);
  color:var(--chalk);
  font-family:var(--f-body);
  font-size:clamp(1rem,.95rem + .28vw,1.1rem);
  line-height:1.68;
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0; }
ul,ol,dl,dd,figure,fieldset{ margin:0; padding:0; list-style:none; border:0; }
legend{ padding:0; }
a{ color:inherit; }

::selection{ background:var(--magenta); color:var(--void); }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }

.skip{
  position:fixed; top:-100px; left:1rem; z-index:200;
  background:var(--cyan); color:var(--void);
  padding:.7rem 1.1rem; font-family:var(--f-mono); font-size:.8rem; text-decoration:none;
}
.skip:focus{ top:1rem; }

/* ── shared ────────────────────────────────────────────────── */
.label{
  font-family:var(--f-mono); font-size:.7rem;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--magenta); margin-bottom:1.4rem;
}
.title{
  font-family:var(--f-disp);
  font-variation-settings:"wdth" 128, "wght" 800;
  font-size:clamp(2.2rem,5.4vw,4.6rem);
  line-height:.98; letter-spacing:-.02em;
  text-transform:uppercase;
  margin-bottom:1.4rem;
  max-width:16ch;
}
.lede{ color:var(--chalk-d); max-width:52ch; }
.sec-head{ margin-bottom:clamp(2.6rem,5.5vw,4.5rem); }

.btn{
  display:inline-block; margin-top:1.2rem;
  font-family:var(--f-mono); font-size:.74rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--void); background:var(--chalk);
  padding:1rem 1.7rem; border:0; cursor:pointer; text-decoration:none;
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover{ background:var(--cyan); box-shadow:0 0 30px rgba(72,232,255,.45); }
.btn--full{ width:100%; }

/* ── the neon treatment ────────────────────────────────────── */
/* an unlit glass tube sits behind every lit sign */
.tube,.stage__tube{
  position:absolute; inset:0;
  font-family:var(--f-glass);
  color:rgba(237,233,245,.10);
  text-shadow:0 1px 0 rgba(255,255,255,.10), 0 -1px 0 rgba(0,0,0,.5);
  pointer-events:none;
}
.lit,.stage__lit{
  position:relative;
  font-family:var(--f-glass);
  /* the hot core still carries a little of its own gas, or bright
     tubes wash out to plain white */
  color:color-mix(in srgb, var(--tube) 24%, #fff);
  text-shadow:
    0 0 2px  color-mix(in srgb, var(--tube) 30%, #fff),
    0 0 8px  var(--tube),
    0 0 18px var(--tube),
    0 0 36px var(--tube),
    0 0 72px var(--tube),
    0 0 128px var(--tube);
  animation:hum 5.5s steps(1,end) infinite;
}
@keyframes hum{
  0%,96%,100%{ opacity:1; }
  96.6%{ opacity:.42; }
  97.2%{ opacity:1; }
  97.8%{ opacity:.55; }
  98.4%{ opacity:1; }
}

/* ── nav ───────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05rem var(--pad);
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s;
}
.nav.is-stuck{
  background:rgba(8,7,12,.86);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--edge);
}
.nav__mark{
  font-family:var(--f-disp);
  font-variation-settings:"wdth" 115, "wght" 800;
  font-size:1.1rem; letter-spacing:.02em; text-transform:uppercase;
  text-decoration:none;
}
.nav__glow{
  color:var(--magenta);
  text-shadow:0 0 8px var(--magenta), 0 0 22px rgba(255,61,165,.6);
}
.nav__links{ display:flex; gap:2rem; }
.nav__links a,.nav__phone{
  font-family:var(--f-mono); font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--chalk-d); text-decoration:none;
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.nav__links a:hover{ color:var(--chalk); border-bottom-color:var(--cyan); }
.nav__phone{ color:var(--cyan); }

/* ── hero ──────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:7rem var(--pad) 2rem;
  overflow:hidden; isolation:isolate;
}
.hero__bg{
  position:absolute; inset:0; z-index:-3;
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.62) saturate(1.25) contrast(1.1);
}
.hero__dark{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(70% 50% at 50% 38%, rgba(8,7,12,0) 0%, rgba(8,7,12,.55) 62%, rgba(8,7,12,.9) 100%),
    linear-gradient(to bottom, rgba(8,7,12,.7) 0%, transparent 30%, rgba(8,7,12,.85) 88%, var(--void) 100%);
}
.hero__stage{
  position:relative; text-align:center;
  margin-bottom:clamp(2rem,5vw,3.5rem);
}
.hero__halo{
  position:absolute; left:50%; top:44%;
  width:min(88vw,900px); height:340px;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,
    color-mix(in srgb, var(--hero-tube,var(--magenta)) 32%, transparent),
    transparent 72%);
  filter:blur(24px); z-index:-1;
  animation:breathe 6s ease-in-out infinite;
  transition:background 1s var(--ease);
}
@keyframes breathe{ 0%,100%{ opacity:.82; } 50%{ opacity:1; } }
.hero__sign{
  position:relative; display:inline-block;
  font-size:clamp(3.4rem,13vw,12rem);
  line-height:1.06;
  padding:0 .12em .12em;
}
.hero__sign .tube,.hero__sign .lit{ --tube:var(--hero-tube,var(--magenta)); }
.hero__sign .lit{ transition:text-shadow 1s var(--ease); }
/* floats under the sign — must not take layout height */
.hero__reflect{
  position:absolute; left:0; right:0; top:100%;
  margin-top:-.34em;
  font-family:var(--f-glass);
  font-size:clamp(3.4rem,13vw,12rem);
  line-height:1.06;
  color:color-mix(in srgb, var(--hero-tube,var(--magenta)) 48%, transparent);
  transition:color 1s var(--ease);
  /* flip about the top edge, then push the flipped copy back down below it */
  transform:scaleY(-.62) translateY(-100%);
  transform-origin:top;
  filter:blur(5px);
  /* after the flip, local-bottom is the edge nearest the sign */
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.9), transparent 62%);
  mask-image:linear-gradient(to top, rgba(0,0,0,.9), transparent 62%);
  pointer-events:none; user-select:none;
}
.hero__copy{ max-width:640px; }
.hero__line{
  font-family:var(--f-disp);
  font-variation-settings:"wdth" 120, "wght" 700;
  font-size:clamp(1.15rem,2.2vw,1.7rem);
  text-transform:uppercase; letter-spacing:-.01em;
  line-height:1.16; margin-bottom:.9rem;
}
.hero__sub{ color:var(--chalk-d); }
.hero__foot{
  margin-top:auto; padding-top:2.4rem;
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1.5rem; flex-wrap:wrap;
  border-top:1px solid var(--edge);
}
.hero__cta{
  font-family:var(--f-mono); font-size:.8rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan); text-decoration:none;
  transition:text-shadow .3s var(--ease);
}
.hero__cta:hover{ text-shadow:0 0 18px var(--cyan); }
.hero__meta{
  font-family:var(--f-mono); font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--chalk-d);
}

/* ── builder ───────────────────────────────────────────────── */
.build{
  padding:clamp(5rem,10vw,9rem) var(--pad);
  max-width:var(--maxw); margin-inline:auto;
}
.build__wrap{
  display:grid; gap:clamp(2rem,4vw,4rem);
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  align-items:start;
}

.stage{
  position:relative;
  background:
    radial-gradient(120% 90% at 50% 10%, #14121C 0%, #0A0910 70%);
  border:1px solid var(--edge);
  padding:clamp(2rem,5vw,4rem) 1.5rem clamp(3rem,6vw,5rem);
  min-height:clamp(340px,42vw,520px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden;
}
.stage__halo{
  position:absolute; left:50%; top:42%;
  width:82%; height:52%;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, color-mix(in srgb, var(--tube) 34%, transparent), transparent 74%);
  filter:blur(26px);
  transition:background .5s var(--ease);
}
.stage__panel{
  position:relative;
  padding:1.4rem 1.8rem;
  border:1px solid rgba(237,233,245,.10);
  border-radius:4px;
  background:rgba(255,255,255,.012);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.stage__panel.is-black{ background:#050409; border-color:rgba(237,233,245,.14); }
.stage__panel.is-steel{
  background:linear-gradient(160deg,#2A2A31,#15151A 55%,#23232A);
  border-color:rgba(237,233,245,.22);
}
.stage__tube,.stage__lit{
  font-size:var(--sign-size,4.4rem);
  line-height:1.24;
  white-space:nowrap;
  transition:font-size .3s var(--ease);
}
.stage__tube{ position:absolute; inset:1.4rem 1.8rem; }
.stage__reflect{
  position:absolute; left:0; right:0; top:100%;
  margin-top:-.26em;
  text-align:center; display:block;
  font-family:var(--f-glass);
  font-size:var(--sign-size,4.4rem);
  line-height:1.24; white-space:nowrap;
  color:color-mix(in srgb, var(--tube) 50%, transparent);
  transform:scaleY(-.55) translateY(-100%);
  transform-origin:top;
  filter:blur(4px);
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.85), transparent 60%);
  mask-image:linear-gradient(to top, rgba(0,0,0,.85), transparent 60%);
  user-select:none; pointer-events:none;
}
.stage__cord{
  position:absolute; right:clamp(1.5rem,4vw,3rem); top:0;
  width:1px; height:clamp(2rem,5vw,4rem);
  background:linear-gradient(to bottom, transparent, rgba(237,233,245,.3));
}
.stage__cord::after{
  content:""; position:absolute; bottom:-3px; left:-2px;
  width:5px; height:5px; background:rgba(237,233,245,.35); border-radius:50%;
}
.stage__note{
  position:absolute; left:0; bottom:0;
  padding:.7rem 1rem;
  font-family:var(--f-mono); font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--chalk-d);
}

/* controls */
.ctrl{ display:flex; flex-direction:column; gap:1.9rem; }
.ctrl__row{ display:block; }
.ctrl__lab{
  display:block;
  font-family:var(--f-mono); font-size:.7rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--chalk-d);
  margin-bottom:.85rem;
}
.ctrl__in{
  width:100%;
  background:var(--asphalt); color:var(--chalk);
  border:1px solid var(--edge); border-radius:2px;
  padding:.95rem 1rem;
  font-family:var(--f-glass); font-size:1.5rem;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ctrl__in:focus{
  outline:none;
  border-color:var(--tube);
  box-shadow:0 0 0 1px var(--tube), 0 0 22px color-mix(in srgb, var(--tube) 40%, transparent);
}
.ctrl__hint{
  margin-top:.6rem;
  font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.1em; color:var(--chalk-d);
}

.swatches{ display:flex; flex-wrap:wrap; gap:.7rem; }
.sw{
  width:2.6rem; height:2.6rem; border-radius:50%;
  border:1px solid rgba(237,233,245,.2);
  background:var(--c); cursor:pointer; padding:0;
  position:relative;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.sw:hover{ transform:scale(1.09); }
.sw.is-on{
  transform:scale(1.12);
  box-shadow:0 0 0 1px var(--void), 0 0 0 3px var(--c), 0 0 26px var(--c);
}

.segs{ display:flex; gap:.5rem; flex-wrap:wrap; }
.segs--stack{ flex-direction:column; }
.seg{
  flex:1 1 auto;
  background:none; cursor:pointer;
  border:1px solid var(--edge); border-radius:2px;
  color:var(--chalk-d);
  font-family:var(--f-mono); font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.75rem .85rem;
  display:flex; justify-content:space-between; gap:.8rem;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.seg:hover{ border-color:rgba(237,233,245,.34); color:var(--chalk); }
.seg.is-on{ border-color:var(--tube); color:var(--chalk); background:rgba(255,255,255,.035); }
.seg em{ font-style:normal; opacity:.6; }

.quote{
  border-top:1px solid var(--edge);
  padding-top:1.5rem;
}
.quote__lines{ margin-bottom:1.1rem; }
.quote__lines div{
  display:flex; justify-content:space-between; gap:1rem;
  font-family:var(--f-mono); font-size:.74rem;
  letter-spacing:.06em; color:var(--chalk-d);
  padding:.34rem 0;
}
.quote__total{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:.9rem 0 1.2rem;
  border-top:1px solid var(--edge);
  font-family:var(--f-mono); font-size:.74rem;
  letter-spacing:.18em; text-transform:uppercase;
}
.quote__total strong{
  font-family:var(--f-disp);
  font-variation-settings:"wdth" 120, "wght" 800;
  font-size:2.2rem; letter-spacing:-.01em;
  color:var(--chalk);
}
.quote__fine{
  margin-top:.9rem;
  font-family:var(--f-mono); font-size:.66rem;
  letter-spacing:.06em; line-height:1.7; color:#6C6683;
}

/* ── stock ─────────────────────────────────────────────────── */
.stock{
  padding:clamp(4rem,9vw,8rem) var(--pad);
  max-width:var(--maxw); margin-inline:auto;
  border-top:1px solid var(--edge);
}
.stock__grid{
  display:grid; gap:1.4rem;
  grid-template-columns:repeat(auto-fill,minmax(370px,1fr));
}
.piece{
  border:1px solid var(--edge);
  background:linear-gradient(170deg,#100F18,#0A0910);
  padding:1.4rem;
  display:flex; flex-direction:column;
  transition:border-color .4s var(--ease);
}
.piece:hover{ border-color:color-mix(in srgb, var(--c) 55%, transparent); }
.piece__win{
  position:relative;
  aspect-ratio:5/3; margin-bottom:1.3rem;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(80% 70% at 50% 50%, #16141F, #08070C 78%);
  border:1px solid rgba(237,233,245,.07);
  overflow:hidden;
}
.piece__glow{
  position:absolute; inset:0;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--c) 30%, transparent), transparent 72%);
  filter:blur(18px);
}
.piece__word{
  position:relative;
  font-family:var(--f-glass);
  font-size:clamp(1.9rem,3.2vw,2.9rem);
  color:color-mix(in srgb, var(--c) 24%, #fff); text-align:center; padding:0 1rem;
  text-shadow:0 0 2px color-mix(in srgb, var(--c) 30%, #fff),
              0 0 9px var(--c), 0 0 20px var(--c), 0 0 44px var(--c);
}
.piece__name{
  font-family:var(--f-disp);
  font-variation-settings:"wdth" 118, "wght" 700;
  font-size:1.24rem; text-transform:uppercase; letter-spacing:-.005em;
  margin-bottom:.45rem;
}
.piece__desc{ color:var(--chalk-d); font-size:.92rem; margin-bottom:1rem; }
.piece__spec{
  display:flex; flex-wrap:wrap; gap:.3rem .9rem;
  font-family:var(--f-mono); font-size:.66rem;
  letter-spacing:.08em; color:#6C6683;
  margin-bottom:auto; padding-bottom:1.1rem;
}
.piece__buy{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-top:1.1rem; border-top:1px solid var(--edge);
}
.piece__price{
  font-family:var(--f-disp);
  font-variation-settings:"wdth" 118, "wght" 800;
  font-size:1.4rem;
}
.piece__add{
  font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase;
  background:none; border:1px solid var(--edge); color:var(--chalk);
  padding:.6rem .9rem; cursor:pointer;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.piece__add:hover{ background:var(--c); border-color:var(--c); color:var(--void); }
.piece.is-sold .piece__add{ opacity:.4; pointer-events:none; }

/* ── restoration ───────────────────────────────────────────── */
.rescue{
  padding:clamp(4rem,9vw,8rem) var(--pad);
  border-top:1px solid var(--edge);
  background:var(--asphalt);
}
.rescue__grid{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; gap:clamp(2rem,5vw,5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
}
.rescue__fig img{ width:100%; aspect-ratio:4/5; object-fit:cover; filter:contrast(1.06) saturate(.92); }
.rescue__list{ margin:2rem 0 1.6rem; }
.rescue__list li{
  display:flex; justify-content:space-between; gap:1.2rem;
  padding:.85rem 0; border-top:1px solid var(--edge);
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.05em;
}
.rescue__list li span:last-child{ color:#6C6683; text-align:right; }
.rescue__note{ color:var(--chalk-d); font-size:.95rem; max-width:46ch; }

/* ── the glass ─────────────────────────────────────────────── */
.glass{
  padding:clamp(4rem,9vw,8rem) var(--pad);
  max-width:var(--maxw); margin-inline:auto;
}
.gstep{
  display:grid; gap:clamp(1.5rem,4vw,4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  padding:clamp(2rem,4vw,3.5rem) 0;
  border-top:1px solid var(--edge);
}
.gstep:nth-child(even) figure{ order:2; }
.gstep img{ width:100%; aspect-ratio:3/2; object-fit:cover; filter:contrast(1.05) saturate(1.15); }
.gstep__n{
  font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--magenta);
  margin-bottom:.8rem;
}
.gstep h3{
  font-family:var(--f-disp);
  font-variation-settings:"wdth" 125, "wght" 800;
  font-size:clamp(1.8rem,3.4vw,2.8rem); text-transform:uppercase;
  line-height:1; margin-bottom:.9rem;
}
.gstep p{ color:var(--chalk-d); max-width:46ch; }

/* ── footer ────────────────────────────────────────────────── */
.foot{
  padding:clamp(4rem,8vw,7rem) var(--pad) 2rem;
  border-top:1px solid var(--edge);
  background:var(--asphalt);
}
.foot__grid{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.foot__p{ color:var(--chalk-d); margin-bottom:.85rem; }
.foot__p a{ color:var(--cyan); text-decoration:none; }
.foot__p a:hover{ text-shadow:0 0 14px var(--cyan); }
.foot__mark{
  max-width:var(--maxw); margin:clamp(3rem,7vw,5.5rem) auto 0;
  font-family:var(--f-glass);
  font-size:clamp(3rem,12vw,11rem);
  line-height:1; color:transparent;
  -webkit-text-stroke:1px rgba(237,233,245,.16);
  user-select:none;
}
.foot__legal{
  max-width:var(--maxw); margin:1.6rem auto 0; padding-top:1.3rem;
  border-top:1px solid var(--edge);
  font-family:var(--f-mono); font-size:.66rem;
  letter-spacing:.1em; color:#5D5872;
}

/* ── reveal ────────────────────────────────────────────────── */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }

/* ── responsive ────────────────────────────────────────────── */
@media (max-width:1080px){
  .build__wrap{ grid-template-columns:1fr; }
  .rescue__grid{ grid-template-columns:1fr; }
  .gstep{ grid-template-columns:1fr; }
  .gstep:nth-child(even) figure{ order:0; }
}
@media (max-width:820px){
  .nav{ flex-wrap:wrap; row-gap:.75rem; padding-bottom:.85rem; }
  .nav__links{ order:3; width:100%; gap:1.4rem; overflow-x:auto; scrollbar-width:none; }
  .nav__links::-webkit-scrollbar{ display:none; }
  .nav__links a{ white-space:nowrap; }
  .nav__phone{ display:none; }
  .hero{ padding-top:8.5rem; }
  .stage__tube,.stage__lit,.stage__reflect{ white-space:normal; text-align:center; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition-duration:.001ms !important; }
  .rv{ opacity:1; transform:none; }
}