/* ============================================================
   G-VEGAS TEE'S - shared stylesheet
   Palette, type and every motif element derive from the shop's
   "Welcome to Fabulous G-Vegas" sign artwork (uploads/main-design.jpg).
   ============================================================ */

:root{
  /* palette - named off the sign */
  --night:      #0d1230;   /* midnight sky */
  --night-2:    #141b46;   /* panel navy */
  --night-3:    #0a0e26;   /* deepest navy: header, ticker, footer */
  --night-line: #262e63;   /* hairline rules on navy */
  --felt:       #11382b;   /* shop green */
  --cream:      #f5ead0;   /* sign board */
  --paper:      #fbf4e2;   /* lighter board / inputs */
  --cream-edge: #dcc99b;   /* board rim shading */
  --red:        #d93a2b;   /* sign red */
  --red-deep:   #b3271c;   /* red for links on cream (contrast-safe) */
  --red-neon:   #ff5544;   /* lit neon red */
  --gold:       #e8b04b;   /* metal trim */
  --bulb:       #ffd97c;   /* lit marquee bulb */
  --bulb-dim:   #866d33;   /* unlit bulb */
  --denim:      #24407c;   /* navy lettering on cream */
  --milk:       #f2ecdb;   /* body text on navy */
  --milk-dim:   #c9c2ad;   /* muted text on navy */
  --ink-cream:  #3a3560;   /* body text on cream */

  --font-display: "Bungee Shade", "Arial Black", sans-serif;
  --font-sign:    "Bungee", "Arial Black", sans-serif;
  --font-script:  "Yellowtail", "Brush Script MT", cursive;
  --font-body:    "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-cond:    "Barlow Condensed", "Arial Narrow", sans-serif;

  --container: 1180px;
  --radius: 16px;
  --shadow-card: 0 3px 8px rgba(4, 7, 24, .35), 0 18px 44px rgba(4, 7, 24, .5);
}

/* ---------- base ---------- */
*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  scrollbar-color: var(--gold) var(--night-3);
  scrollbar-width: thin;
  overflow-x: clip; /* clip, not hidden: hidden would break the sticky header */
}
::-webkit-scrollbar{ width: 13px; }
::-webkit-scrollbar-track{ background: var(--night-3); }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--bulb), var(--gold) 45%, #b5802e);
  border-radius: 8px;
  border: 3px solid var(--night-3);
}
::-webkit-scrollbar-thumb:hover{ background: var(--bulb); }

body{
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--milk);
  background-color: var(--night);
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(101, 74, 197, .16), transparent 60%),
    radial-gradient(900px 500px at 10% 12%, rgba(38, 52, 132, .25), transparent 60%);
  overflow-x: clip;
}

::selection{ background: var(--red); color: var(--paper); }

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

a{ color: var(--bulb); }
a:hover{ color: #ffe6a6; }

:focus-visible{
  outline: 3px dashed var(--bulb);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container{
  width: min(var(--container), calc(100% - 2.5rem));
  margin-inline: auto;
}

section{ position: relative; }
.section-pad{ padding: 5.5rem 0; }

/* ---------- shared type ---------- */
.eyebrow{
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--red-neon);
  text-shadow: 0 0 18px rgba(255, 85, 68, .45);
  display: block;
  margin: 0 0 .35rem;
  transform: rotate(-2deg);
}
.on-cream .eyebrow{ color: var(--red); text-shadow: none; }
.eyebrow-neon{
  color: var(--red-neon);
  -webkit-text-stroke: 1px var(--red-deep);
  text-shadow: 0 0 14px rgba(255, 85, 68, .75), 0 0 34px rgba(255, 85, 68, .35);
  animation: eyebrow-flicker 5.8s linear infinite;
}
@keyframes eyebrow-flicker{
  0%, 88%, 97%, 100%{ color: var(--red-neon); text-shadow: 0 0 14px rgba(255, 85, 68, .75), 0 0 34px rgba(255, 85, 68, .35); }
  90%, 91%{ color: var(--red-deep); text-shadow: none; }
  92.5%{ color: var(--red); text-shadow: 0 0 8px rgba(217, 58, 43, .55), 0 0 18px rgba(217, 58, 43, .25); }
  94%{ color: var(--red-neon); text-shadow: 0 0 20px rgba(255, 85, 68, .95), 0 0 48px rgba(255, 85, 68, .5); }
}
.on-cream .eyebrow-neon{
  color: var(--red);
  -webkit-text-stroke: 1px var(--red-deep);
  text-shadow: 0 0 12px rgba(217, 58, 43, .35);
  animation: eyebrow-flicker-cream 5.8s linear infinite;
}
@keyframes eyebrow-flicker-cream{
  0%, 88%, 97%, 100%{ color: var(--red); text-shadow: 0 0 12px rgba(217, 58, 43, .35); }
  90%, 91%{ color: var(--red-deep); text-shadow: none; }
  92.5%{ color: var(--red-deep); text-shadow: 0 0 8px rgba(179, 39, 28, .4); }
  94%{ color: var(--red); text-shadow: 0 0 18px rgba(217, 58, 43, .6), 0 0 34px rgba(217, 58, 43, .32); }
}

h2{
  font-family: var(--font-sign);
  font-weight: 400;
  font-size: clamp(1.65rem, 3.6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: .01em;
  margin: 0 0 1rem;
  color: var(--paper);
  text-wrap: balance;
}
.on-cream h2{ color: var(--denim); }

.lede{
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--milk-dim);
  max-width: 60ch;
}
.on-cream .lede{ color: var(--ink-cream); }

/* ---------- buttons ---------- */
.btn{
  display: inline-block;
  font-family: var(--font-sign);
  font-size: .95rem;
  letter-spacing: .03em;
  text-decoration: none;
  padding: .95rem 1.7rem;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn-primary{
  background: linear-gradient(180deg, #ef4a37, var(--red) 55%, #b52c1f);
  color: var(--paper);
  box-shadow: inset 0 0 0 2px rgba(251, 244, 226, .35), 0 10px 24px rgba(217, 58, 43, .35);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 2px rgba(251, 244, 226, .5), 0 0 28px rgba(255, 85, 68, .55);
  color: #fff;
}
.btn-ghost{
  background: transparent;
  color: var(--bulb);
  box-shadow: inset 0 0 0 2px var(--gold);
}
.btn-ghost:hover{
  background: rgba(232, 176, 75, .12);
  transform: translateY(-2px);
  color: var(--bulb);
}
.btn-denim{
  background: linear-gradient(180deg, #2e4f96, var(--denim) 60%, #1a2f5e);
  color: var(--paper);
  box-shadow: inset 0 0 0 2px rgba(251, 244, 226, .3), 0 10px 22px rgba(21, 34, 70, .35);
}
.btn-denim:hover{ transform: translateY(-2px); color: #fff; }
.btn:active{ transform: translateY(0) scale(.985); }

/* ---------- bulb rule divider (pure CSS chase glow) ---------- */
.bulb-rule{
  position: relative;
  height: 14px;
  background-image: radial-gradient(circle 3px at 8px 7px, var(--bulb-dim) 0 3px, transparent 3.5px);
  background-size: 26px 14px;
  background-position: center;
  background-repeat: repeat-x;
}
.bulb-rule::after{
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle 3px at 8px 7px, var(--bulb) 0 3px, rgba(255, 217, 124, .35) 5px, transparent 7px);
  background-size: 26px 14px;
  background-position: center;
  background-repeat: repeat-x;
  animation: bulb-breathe 1.1s steps(2, jump-none) infinite;
}
@keyframes bulb-breathe{
  0%{ opacity: 1; } 100%{ opacity: .12; }
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--night-3);              /* opaque at every width, always */
  border-bottom: 2px solid var(--night-line);
}
.site-header::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(232, 176, 75, .55) 18% 82%, transparent);
  pointer-events: none;
}
.site-header.scrolled{ box-shadow: 0 10px 30px rgba(3, 5, 18, .6); }

.header-bar{
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: .8rem 0;
}

.brand{
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  margin-right: auto;
}
.brand-logo{ height: 72px; width: auto; max-width: 300px; object-fit: contain; flex: none; }
.footer-brand .brand-logo{ height: 58px; }
.mobile-panel-top .brand-logo{ height: 42px; }
.brand-name{
  font-family: var(--font-sign);
  font-size: 1.05rem;
  color: var(--paper);
  line-height: 1.05;
}
.brand-name .brand-red{ color: var(--red-neon); }
.brand-sub{
  display: block;
  font-family: var(--font-cond);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--gold);
  text-transform: uppercase;
}

.main-nav{ display: flex; align-items: center; gap: 1.35rem; }
.main-nav a{
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--milk);
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover{ color: var(--bulb); border-bottom-color: var(--bulb); }

.header-phone{
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .05em;
  color: var(--bulb);
  text-decoration: none;
  white-space: nowrap;
}
.header-phone:hover{ color: #ffe6a6; }
.header-cta{ white-space: nowrap; padding: .7rem 1.15rem; font-size: .82rem; }

/* hamburger */
.nav-toggle{
  display: none;
  background: none;
  border: 2px solid var(--gold);
  border-radius: 10px;
  padding: .5rem .6rem;
  cursor: pointer;
}
.nav-toggle .bars{ display: block; width: 22px; height: 2px; background: var(--bulb); position: relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after{
  content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--bulb);
}
.nav-toggle .bars::before{ top: -7px; }
.nav-toggle .bars::after{ top: 7px; }

/* mobile panel - solid, fully opaque */
.mobile-panel{
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--night-3);
  display: none;
  flex-direction: column;
  padding: 1rem 1.4rem 2rem;
  overflow-y: auto;
}
.mobile-panel.open{ display: flex; }
.mobile-panel-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: .9rem;
  border-bottom: 2px solid var(--night-line);
  margin-bottom: .4rem;
}
.panel-close{
  background: none;
  border: 2px solid var(--gold);
  border-radius: 10px;
  color: var(--bulb);
  font-size: 1.5rem;
  line-height: 1;
  width: 44px;
  height: 44px;
  padding: 0 0 .15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  font-family: var(--font-body);
}
.mobile-panel nav{ display: flex; flex-direction: column; }
.mobile-panel nav a{
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--milk);
  text-decoration: none;
  padding: 1rem .2rem;
  border-bottom: 1px solid var(--night-line);
}
.mobile-panel nav a:hover{ color: var(--bulb); }
.mobile-panel .panel-phone{
  margin-top: 1.4rem;
  font-family: var(--font-sign);
  font-size: 1.3rem;
  color: var(--bulb);
  text-decoration: none;
}
.mobile-panel .panel-note{
  color: var(--milk-dim);
  font-family: var(--font-cond);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .9rem;
  margin-top: .4rem;
}
.mobile-panel .btn{ margin-top: 1.2rem; align-self: flex-start; }

@media (max-width: 1023px){
  .main-nav, .header-phone, .header-cta{ display: none; }
  .nav-toggle{ display: inline-block; padding-top: .8rem; padding-bottom: .8rem; }
}

/* ============================================================
   HERO - the living sign
   ============================================================ */
.hero{
  position: relative;
  padding: 4.2rem 0 0;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 50% -8%, #2a2f6d 0%, rgba(42, 47, 109, 0) 62%),
    radial-gradient(900px 460px at 12% 34%, rgba(101, 74, 197, .18), transparent 65%),
    radial-gradient(900px 460px at 88% 28%, rgba(52, 86, 180, .2), transparent 65%),
    linear-gradient(180deg, #090d26 0%, #10173e 46%, #1d2358 78%, #2d2c6a 100%);
}

/* dusk light-dome the skyline cuts against */
.city-glow{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  pointer-events: none;
  background: radial-gradient(62% 95% at 50% 102%,
    rgba(255, 170, 92, .32) 0%,
    rgba(214, 98, 150, .2) 34%,
    rgba(126, 74, 168, .14) 58%,
    transparent 78%);
}

/* star field: two layers, second twinkles */
.stars{ position: absolute; inset: 0; pointer-events: none; }
.stars-a{
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff9ea 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 64%, #efe7cf 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 43% 12%, #fff9ea 50%, transparent 51%),
    radial-gradient(1px 1px at 61% 38%, #efe7cf 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 76% 16%, #fff9ea 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 55%, #efe7cf 50%, transparent 51%),
    radial-gradient(1px 1px at 7% 48%, #efe7cf 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 94% 30%, #fff9ea 50%, transparent 51%);
  opacity: .8;
}
.stars-b{
  background-image:
    radial-gradient(2px 2px at 18% 34%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 35% 48%, #ffedbe 50%, transparent 51%),
    radial-gradient(2px 2px at 55% 20%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 60%, #ffedbe 50%, transparent 51%),
    radial-gradient(2px 2px at 83% 40%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 22% 8%, #ffedbe 50%, transparent 51%),
    radial-gradient(2px 2px at 66% 8%, #fff 50%, transparent 51%);
  animation: twinkle 3.8s ease-in-out infinite alternate;
}
@keyframes twinkle{
  from{ opacity: .25; }
  to{ opacity: .95; }
}

/* a comet crosses the sky now and then */
.comet{
  position: absolute;
  top: 16%;
  left: -12%;
  width: 130px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 249, 230, .95));
  transform: rotate(9deg);
  opacity: 0;
  animation: comet 11s linear infinite 3s;
  pointer-events: none;
}
@keyframes comet{
  0%, 87%{ opacity: 0; transform: rotate(9deg) translateX(0); }
  89%{ opacity: .9; }
  96%{ opacity: .9; }
  100%{ opacity: 0; transform: rotate(9deg) translateX(125vw); }
}

.hero-inner{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* --- the sign assembly --- */
.sign-wrap{
  position: relative;
  width: min(660px, 94%);
  margin-top: 3.4rem; /* room for the starburst */
}

/* starburst crown */
.starburst{
  position: absolute;
  top: -3.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(96px, 24%, 150px);
  z-index: 3;
  filter: drop-shadow(0 0 17px rgba(255, 85, 68, .85));
}
.starburst .rays{
  transform-origin: 80px 80px;
  animation: star-pulse 2.4s ease-in-out infinite alternate;
}
@keyframes star-pulse{
  from{ transform: scale(.96); }
  to{ transform: scale(1.05); }
}
@keyframes star-flicker{
  0%, 6.9%, 8.2%, 44%, 45.4%, 78%, 79.2%, 100%{ opacity: 1; }
  7%, 8%{ opacity: .45; }
  44.6%, 45.2%{ opacity: .55; }
  78.4%, 79%{ opacity: .5; }
}

.sign{
  position: relative;
  width: 100%;
  aspect-ratio: 640 / 420;
  container-type: inline-size;
}
.sign-svg{ position: absolute; inset: 0; width: 100%; height: 100%; }

.sign-board{
  fill: var(--cream);
  stroke: var(--gold);
  stroke-width: 6;
  filter: drop-shadow(0 18px 34px rgba(3, 5, 20, .65));
}
.sign-board-inner{
  fill: none;
  stroke: var(--denim);
  stroke-width: 2;
  stroke-dasharray: 1 0;
  opacity: .5;
}
.sign-glow{ fill: rgba(255, 214, 130, .16); }

/* marquee bulbs: steady lit, no chase */
.blb{ fill: var(--bulb); filter: drop-shadow(0 0 5px rgba(255, 217, 124, .95)); }
.b0, .b1, .b2{ animation: none; }
@keyframes bulb-chase{
  0%{ fill: var(--bulb); filter: drop-shadow(0 0 5px rgba(255, 217, 124, .95)); }
  33.4%{ fill: var(--bulb-dim); filter: none; }
  100%{ fill: var(--bulb-dim); filter: none; }
}

.sign-face{
  position: absolute;
  inset: 10.5% 13% 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5cqw;
}

/* WELCOME silver-dollar coins */
.coins{
  display: flex;
  gap: 1.5cqw;
  margin-bottom: .9cqw;
}
.coin{
  width: 7.8cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fffbe9 0%, #efe0ba 55%, #d9c191 100%);
  box-shadow:
    inset 0 0 0 .45cqw #cbb17e,
    inset 0 -.6cqw 1cqw rgba(120, 95, 45, .35),
    0 .4cqw .9cqw rgba(60, 44, 12, .3);
  display: grid;
  place-items: center;
  font-family: var(--font-sign);
  font-size: 3.9cqw;
  color: var(--red);
  text-shadow: 0 0 .9cqw rgba(255, 90, 70, .65);
}
.coin:nth-child(1){ transform: translateY(4.6cqw) rotate(-14deg); }
.coin:nth-child(2){ transform: translateY(2.1cqw) rotate(-9deg); }
.coin:nth-child(3){ transform: translateY(.5cqw) rotate(-4deg); }
.coin:nth-child(4){ transform: translateY(0); }
.coin:nth-child(5){ transform: translateY(.5cqw) rotate(4deg); }
.coin:nth-child(6){ transform: translateY(2.1cqw) rotate(9deg); }
.coin:nth-child(7){ transform: translateY(4.6cqw) rotate(14deg); }

.sign-title{ margin: 0; display: flex; flex-direction: column; align-items: center; gap: .2cqw; }

.sign-script{
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 8.4cqw;
  line-height: 1;
  color: var(--red-neon);
  -webkit-text-stroke: 1px var(--red-deep);
  text-shadow:
    0 0 1.2cqw rgba(255, 85, 68, .8),
    0 0 3.4cqw rgba(255, 85, 68, .45);
  transform: rotate(-2.5deg);
}
@keyframes sign-script-flicker{
  0%, 88%, 97%, 100%{ color: var(--red-neon); text-shadow: 0 0 1.2cqw rgba(255, 85, 68, .8), 0 0 3.4cqw rgba(255, 85, 68, .45); }
  90%, 91%{ color: var(--red-deep); text-shadow: none; }
  92.5%{ color: var(--red); text-shadow: 0 0 .8cqw rgba(217, 58, 43, .55), 0 0 1.8cqw rgba(217, 58, 43, .25); }
  94%{ color: var(--red-neon); text-shadow: 0 0 1.6cqw rgba(255, 85, 68, .95), 0 0 4.2cqw rgba(255, 85, 68, .5); }
}

.sign-name{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 12.4cqw;
  line-height: .95;
  color: var(--red);
  letter-spacing: .01em;
}

.sign-tees{
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  font-family: var(--font-sign);
  font-size: 6.4cqw;
  line-height: 1;
  color: var(--denim);
}
.sign-tees::before, .sign-tees::after{
  content: "";
  width: 7cqw;
  height: .9cqw;
  background:
    linear-gradient(180deg, var(--denim) 33%, transparent 33% 66%, var(--denim) 66%);
}

.sign-custom{
  font-family: var(--font-script);
  font-size: 7.6cqw;
  line-height: 1.05;
  color: var(--denim);
  transform: rotate(-2deg);
  margin-top: .4cqw;
}

.sign-loc{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8cqw;
  width: max-content;
  max-width: 92%;
  margin-top: .6cqw;
  padding: .9cqw 3cqw;
  background: var(--paper);
  border: .4cqw solid var(--denim);
  border-radius: 999px;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 2.4cqw;
  letter-spacing: .5cqw;
  line-height: 1;
  color: #6f5a2c;
  white-space: nowrap;
}
.sign-loc-star{
  color: var(--red);
  font-size: 2.2cqw;
  line-height: 1;
}

/* fanned tee deck sliding out from behind the sign */
.sign{ z-index: 2; }
.tee-deck{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.tee-card{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 55%;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  filter: drop-shadow(0 16px 22px rgba(3,5,20,.55));
  opacity: 0;
  transform: translate(-50%,-50%) translate(0,6%) rotate(0deg) scale(.72);
  animation: tee-fan 1.15s cubic-bezier(.2,.7,.25,1) forwards;
}
.tee-card img{
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.tee-l1{ --sx: -83%; --sy: 0%; --rot: -11deg; z-index: 3; animation-delay: .25s; }
.tee-l2{ --sx: -115%; --sy: -4%; --rot: -19deg; z-index: 2; animation-delay: .4s; }
.tee-l3{ --sx: -143%; --sy: -9%; --rot: -27deg; z-index: 1; animation-delay: .55s; }
.tee-r1{ --sx: 83%; --sy: 0%; --rot: 11deg; z-index: 3; animation-delay: .25s; }
.tee-r2{ --sx: 115%; --sy: -4%; --rot: 19deg; z-index: 2; animation-delay: .4s; }
.tee-r3{ --sx: 143%; --sy: -9%; --rot: 27deg; z-index: 1; animation-delay: .55s; }
@keyframes tee-fan{
  from{ opacity: 0; transform: translate(-50%,-50%) translate(0,6%) rotate(0deg) scale(.72); }
  to{ opacity: 1; transform: translate(-50%,-50%) translate(var(--sx),var(--sy)) rotate(var(--rot)) scale(1); }
}
@media (max-width: 1023px){
  .tee-card{ width: 48%; }
  .tee-l1{ --sx: -108%; --sy: 0%; --rot: -10deg; }
  .tee-l2{ --sx: -142%; --sy: -3%; --rot: -17deg; }
  .tee-l3{ --sx: -176%; --sy: -7%; --rot: -24deg; }
  .tee-r1{ --sx: 108%; --sy: 0%; --rot: 10deg; }
  .tee-r2{ --sx: 142%; --sy: -3%; --rot: 17deg; }
  .tee-r3{ --sx: 176%; --sy: -7%; --rot: 24deg; }
}
/* tablet: whole sign assembly 30% smaller */
@media (min-width: 641px) and (max-width: 1023px){
  .sign-wrap{ width: min(462px, 66%); margin-top: 2.4rem; }
  .starburst{ top: -2.5rem; width: clamp(67px, 24%, 105px); }
}
/* mobile: tee deck becomes a spread grid below the sign, not a side fan */
@media (max-width: 640px){
  .sign-wrap{ display: flex; flex-direction: column; }
  .sign-wrap .sign{ order: 1; }
  .tee-deck{ position: relative; inset: auto; order: 2; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; margin-top: 1.3rem; }
  .tee-card{ position: relative; left: auto; top: auto; width: 100%; opacity: 1; animation: tee-rise .7s ease both; transform: rotate(var(--rot)); }
  .tee-l3{ --rot: -7deg; animation-delay: 0s; }
  .tee-l2{ --rot: 7deg; animation-delay: .08s; }
  .tee-l1{ --rot: -5deg; animation-delay: .16s; }
  .tee-r1{ --rot: 5deg; animation-delay: .24s; }
  .tee-r2{ --rot: -7deg; animation-delay: .32s; }
  .tee-r3{ --rot: 7deg; animation-delay: .4s; }
}
@keyframes tee-rise{
  from{ opacity: 0; transform: translateY(14px) rotate(var(--rot)); }
  to{ opacity: 1; transform: translateY(0) rotate(var(--rot)); }
}
@media (prefers-reduced-motion: reduce){
  .tee-card{ animation: none; opacity: 1; transform: translate(-50%,-50%) translate(var(--sx),var(--sy)) rotate(var(--rot)) scale(1); }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce){
  .tee-card{ animation: none; transform: rotate(var(--rot)); }
}

/* copy under the sign */
.hero-lede{
  max-width: 56ch;
  margin: 2.2rem auto 0;
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  color: var(--milk-dim);
  padding: 0 1.25rem;
}
.hero-lede strong{ color: var(--bulb); font-weight: 600; }

.hero-ctas{
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  justify-content: center;
  margin-top: 1.6rem;
}

.hero-chips{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem .6rem;
  padding: 0 1.25rem;
  margin: 1.7rem 0 0;
}
.hero-chips li{
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--milk);
  border: 1.5px solid rgba(232, 176, 75, .38);
  background: rgba(10, 14, 38, .65);
  border-radius: 999px;
  padding: .38rem .95rem;
}
.hero-chips li b{ color: var(--bulb); font-weight: 700; }

/* skyline silhouette (Gardner: palms *and* the giant chair) */
.skyline{
  position: relative;
  z-index: 1;
  margin-top: 2.6rem;
  display: block;
  width: 100%;
  height: clamp(90px, 14vw, 170px);
}
.skyline svg{ width: 100%; height: 100%; display: block; }
.win{ fill: var(--bulb); }
.win-neon{ fill: #ff6a5c; }
.win-teal{ fill: #4fd8cd; }
.w1{ animation: twinkle 2.9s ease-in-out infinite alternate; }
.w2{ animation: twinkle 3.7s ease-in-out infinite alternate .8s; }
.w3{ animation: twinkle 3.2s ease-in-out infinite alternate 1.6s; }

/* ============================================================
   TICKER BELT
   ============================================================ */
.ticker{
  background: linear-gradient(180deg, #0c1131, #080c22);
  border-block: 2px solid var(--night-line);
  overflow: hidden;
  padding: .78rem 0;
}
.ticker-track{
  display: flex;
  width: max-content;
  animation: belt 34s linear infinite;
}
.ticker:hover .ticker-track{ animation-play-state: paused; }
.ticker-copy{ display: flex; align-items: center; flex: none; }
.tk{
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--milk);
  padding: 0 1.15rem;
  white-space: nowrap;
}
.tk-sep{
  color: var(--gold);
  font-size: .9rem;
  padding: 0 .15rem;
  text-shadow: 0 0 10px rgba(232, 176, 75, .8);
}
@keyframes belt{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ============================================================
   WHY G-VEGAS
   ============================================================ */
.why-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}
.why-card{
  position: relative;
  background: linear-gradient(180deg, var(--paper), var(--cream));
  border: 2px solid var(--cream-edge);
  border-radius: var(--radius);
  padding: 1.5rem 1.35rem 1.4rem;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.why-card::after{
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(36, 64, 124, .16);
  border-radius: calc(var(--radius) - 6px);
  pointer-events: none;
}
.why-card:hover{
  transform: translateY(-4px);
  border-color: var(--bulb);
  box-shadow: 0 3px 8px rgba(4, 7, 24, .35), 0 22px 48px rgba(4, 7, 24, .55), 0 0 26px rgba(255, 217, 124, .2);
}
.why-card svg{
  width: 56px; height: 56px;
  padding: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fffdf4, #f3e3ba 70%, #e4cd98);
  border: 2px solid var(--gold);
  box-shadow: 0 4px 10px rgba(110, 80, 25, .26), inset 0 -3px 6px rgba(120, 90, 30, .18);
  margin-bottom: .85rem;
}
.why-card h3{
  font-family: var(--font-sign);
  font-weight: 400;
  font-size: 1.02rem;
  color: var(--denim);
  margin: 0 0 .45rem;
}
.why-card p{ margin: 0; font-size: .98rem; color: var(--ink-cream); }

/* ============================================================
   CATEGORIES - the racks
   ============================================================ */
.felt{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M34 12 48 30 34 48 20 30Z' fill-opacity='.05'/%3E%3Cpath d='M60 132c-8-7-12-11-12-16 0-4 3-6 6-6 3 0 5 2 6 4 1-2 3-4 6-4s6 2 6 6c0 5-4 9-12 16z' fill-opacity='.04'/%3E%3Cpath d='M128 118l2.5 5.5 5.5 2.5-5.5 2.5-2.5 5.5-2.5-5.5-5.5-2.5 5.5-2.5z' fill-opacity='.06'/%3E%3C/g%3E%3Ccircle cx='118' cy='44' r='12' fill='none' stroke='%23ffffff' stroke-opacity='.055' stroke-width='3' stroke-dasharray='5 6'/%3E%3C/svg%3E"),
    radial-gradient(120% 95% at 50% 45%, transparent 52%, rgba(4, 18, 12, .55) 100%),
    radial-gradient(900px 420px at 50% 0%, rgba(30, 92, 68, .6), transparent 70%),
    linear-gradient(180deg, #0d2c22, var(--felt) 40%, #0c2a20 100%);
  background-size: 160px 160px, auto, auto, auto;
  border-block: 3px solid var(--gold);
}
.cat-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
  margin-top: 2.2rem;
}
.cat-card{
  background: var(--cream);
  border: 3px solid var(--gold);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cat-card:hover{
  transform: translateY(-5px);
  border-color: var(--bulb);
  box-shadow: 0 18px 40px rgba(3, 6, 20, .55), 0 0 26px rgba(255, 217, 124, .28);
}
.cat-card figure{ margin: 0; overflow: hidden; }
.cat-card img{
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.cat-card:hover img{ transform: scale(1.055); }
.cat-body{ padding: 1.1rem 1.2rem 1.25rem; }
.cat-body h3{
  font-family: var(--font-sign);
  font-weight: 400;
  font-size: 1.08rem;
  color: var(--denim);
  margin: 0 0 .4rem;
}
.cat-body p{ margin: 0; font-size: .96rem; color: var(--ink-cream); }

/* coming soon placeholder for racks without photos yet */
.coming-soon{
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 4;
  background: linear-gradient(180deg, #1a2153, var(--night-2));
  border-bottom: 2px solid var(--night-line);
}
.coming-soon span{
  font-family: var(--font-sign);
  font-size: 1.05rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bulb);
  border: 2px dashed var(--gold);
  border-radius: 10px;
  padding: .7rem 1.2rem;
}
.rack-card .coming-soon{ aspect-ratio: 16 / 10; }
.rack-card .coming-soon span{ font-size: 1.2rem; }

/* wide "your design here" card */
.cat-custom{
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  background:
    radial-gradient(500px 190px at 12% 50%, rgba(255, 85, 68, .18), transparent 70%),
    linear-gradient(180deg, #171f52, var(--night-2));
  border: 3px dashed var(--gold);
  border-radius: var(--radius);
  padding: 1.7rem 1.9rem;
}
.cat-custom-head{
  font-family: var(--font-sign);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  color: var(--paper);
  margin: 0 0 .3rem;
}
.cat-custom-head .neon{
  color: var(--red-neon);
  -webkit-text-stroke: 1px var(--red-deep);
  text-shadow: 0 0 14px rgba(255, 85, 68, .75), 0 0 34px rgba(255, 85, 68, .35);
  animation: eyebrow-flicker 5.8s linear infinite;
}
.cat-custom p{ margin: 0; color: var(--milk-dim); max-width: 52ch; }
.felt-note{
  margin: 1.6rem 0 0;
  text-align: center;
  font-family: var(--font-cond);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .95rem;
  color: #cfe4d4;
}
.felt-note a{ color: var(--bulb); }
.rack-showcase{
  margin-top: 1.6rem;
  background: rgba(10, 14, 38, .55);
  border: 2px solid var(--night-line);
  border-radius: var(--radius);
  padding: 1.6rem 1.6rem 1.7rem;
}
.rack-showcase h3{
  font-family: var(--font-sign);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--paper);
  margin: 0 0 .3rem;
}
.rack-showcase p{ margin: 0 0 1.2rem; color: var(--milk-dim); }
.rack-photos{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .9rem;
}
.rack-photos figure{
  margin: 0;
  background: var(--paper);
  border-radius: 10px;
  padding: .5rem .5rem .55rem;
  box-shadow: var(--shadow-card);
}
.rack-photos img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
}
.rack-photos figcaption{
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--denim);
  text-align: center;
  padding-top: .4rem;
}
.rack-photos figure a{
  display: block;
  text-decoration: none;
  border-radius: 6px;
}
.rack-photos figure a:hover img{ outline: 3px solid var(--gold); outline-offset: 2px; }
.rack-photos figure a:hover figcaption{ color: var(--red-deep); }
@media (max-width: 1023px){ .rack-photos{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px){
  .rack-photos{ grid-template-columns: repeat(2, 1fr); }
  .rack-showcase{ padding: 1.2rem 1rem 1.3rem; }
}

/* ============================================================
   OFF THE PRESS - gallery
   ============================================================ */
.press-grid{
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 2.6rem;
  align-items: center;
}
.press-copy .btn{ margin-top: 1.4rem; }
.press-note{
  margin-top: 1.3rem;
  font-size: .92rem;
  color: var(--milk-dim);
  border-left: 3px solid var(--gold);
  padding-left: .9rem;
  max-width: 46ch;
}
.press-photos{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem;
}
#press{
  background: radial-gradient(720px 460px at 80% 42%, rgba(217, 58, 43, .12), transparent 66%);
}
.press-photos figure{
  margin: 0;
  background: var(--paper);
  border-radius: 12px;
  padding: .65rem .65rem .7rem;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.press-photos figure:nth-child(odd){ transform: rotate(-1.1deg); }
.press-photos figure:nth-child(even){ transform: rotate(1.1deg); }
.press-photos figure:hover{ transform: rotate(0) scale(1.03); box-shadow: 0 4px 10px rgba(3, 6, 20, .4), 0 26px 54px rgba(3, 6, 20, .6); }
.press-photos img{ width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 7px; }
.press-photos figcaption{
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5c5477;
  padding-top: .55rem;
  text-align: center;
}

/* ============================================================
   SAME DAY - rays + print reels
   ============================================================ */
.sameday{
  background:
    repeating-conic-gradient(from -90deg at 50% 118%, rgba(232, 176, 75, .07) 0 5deg, transparent 5deg 10deg),
    linear-gradient(180deg, var(--night-2), #101538);
  border-block: 2px solid var(--night-line);
  text-align: center;
}
.sameday-display{
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6.5vw, 4.6rem);
  line-height: 1;
  color: var(--bulb);
  text-shadow: 0 0 30px rgba(255, 217, 124, .5), 0 0 72px rgba(255, 140, 66, .28), 0 3px 0 rgba(58, 40, 8, .35);
  margin: .6rem 0 .9rem;
}
.reels{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin: 2rem 0 1rem;
}
.reel{
  width: clamp(150px, 21vw, 200px);
  height: 62px;
  background: linear-gradient(180deg, #efe3c4, var(--paper) 30% 70%, #e6d7b2);
  border: 3px solid var(--gold);
  border-radius: 12px;
  box-shadow: inset 0 6px 10px rgba(84, 62, 20, .22), inset 0 -6px 10px rgba(84, 62, 20, .22), var(--shadow-card);
  overflow: hidden;
}
.reel-strip{ display: flex; flex-direction: column; animation: reel-spin 7.5s cubic-bezier(.65, 0, .35, 1) infinite; }
.reel:nth-child(3) .reel-strip{ animation-delay: -2.5s; }
.reel:nth-child(5) .reel-strip{ animation-delay: -5s; }
.reel-strip span{
  height: 56px;
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--font-sign);
  font-size: 1.25rem;
  color: var(--denim);
}
@keyframes reel-spin{
  0%, 21%{ transform: translateY(0); }
  25%, 46%{ transform: translateY(-20%); }
  50%, 71%{ transform: translateY(-40%); }
  75%, 96%{ transform: translateY(-60%); }
  100%{ transform: translateY(-80%); }
}
.reel-star{
  font-size: 1.5rem;
  color: var(--red-neon);
  text-shadow: 0 0 12px rgba(255, 85, 68, .8);
}
.sameday .lede{ margin-inline: auto; }
.sameday-facts{
  list-style: none;
  padding: 0;
  margin: 1.9rem 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
}
.sameday-facts li{
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--milk);
  border: 1.5px solid rgba(232, 176, 75, .38);
  border-radius: 999px;
  padding: .42rem 1rem;
  background: rgba(10, 14, 38, .55);
}

/* ============================================================
   HOW CUSTOM WORKS - cream board
   ============================================================ */
.on-cream{
  background: linear-gradient(180deg, var(--paper), var(--cream) 30%, #efe1c0);
  color: var(--ink-cream);
  border-block: 3px solid var(--gold);
}
.steps-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  margin-top: 2.3rem;
  counter-reset: step;
}
.step{
  background: #fffaf0;
  border: 2px solid var(--cream-edge);
  border-radius: var(--radius);
  padding: 1.4rem 1.25rem 1.35rem;
  box-shadow: 0 10px 22px rgba(120, 96, 45, .16);
  color: var(--ink-cream); /* cards stay readable on navy sections too */
}
.step-chip{
  counter-increment: step;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ef4a37, var(--red) 60%, #a52619);
  box-shadow: inset 0 0 0 4px #fffaf0, inset 0 0 0 6px var(--red), 0 4px 10px rgba(120, 40, 25, .4);
  display: grid;
  place-items: center;
  margin-bottom: .9rem;
}
.step-chip::before{
  content: counter(step);
  font-family: var(--font-sign);
  font-size: 1.35rem;
  color: var(--paper);
}
.step h3{
  font-family: var(--font-sign);
  font-weight: 400;
  font-size: 1rem;
  color: var(--denim);
  margin: 0 0 .4rem;
}
.step p{ margin: 0; font-size: .96rem; }
.step p a{ color: var(--red-deep); }

.audience-row{
  margin-top: 2.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .8rem;
}
.audience-row .aud{
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--denim);
  border-radius: 8px;
  padding: .5rem 1.1rem;
  box-shadow: 0 6px 14px rgba(36, 64, 124, .35);
}
.audience-row .aud-star{ color: var(--red); font-size: 1.2rem; }

/* ============================================================
   CUSTOM REQUEST FORM
   ============================================================ */
.form-wrap{
  display: grid;
  grid-template-columns: .9fr 1.35fr;
  gap: 2.6rem;
  align-items: start;
}
.form-side .neon-open{
  display: inline-block;
  font-family: var(--font-script);
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  color: var(--red-neon);
  -webkit-text-stroke: 1px var(--red-deep);
  text-shadow: 0 0 16px rgba(255, 85, 68, .7), 0 0 42px rgba(255, 85, 68, .35);
  border: 3px solid rgba(255, 85, 68, .55);
  border-radius: 14px;
  padding: .5rem 1.4rem .8rem;
  box-shadow: 0 0 22px rgba(255, 85, 68, .28), inset 0 0 18px rgba(255, 85, 68, .18);
  transform: rotate(-2deg);
  animation: neon-open-flicker 5.8s linear infinite;
  margin-bottom: 1.3rem;
}
@keyframes neon-open-flicker{
  0%, 88%, 97%, 100%{ color: var(--red-neon); text-shadow: 0 0 16px rgba(255, 85, 68, .7), 0 0 42px rgba(255, 85, 68, .35); border-color: rgba(255, 85, 68, .55); box-shadow: 0 0 22px rgba(255, 85, 68, .28), inset 0 0 18px rgba(255, 85, 68, .18); }
  90%, 91%{ color: var(--red-deep); text-shadow: none; border-color: var(--red-deep); box-shadow: none; }
  92.5%{ color: var(--red); text-shadow: 0 0 8px rgba(217, 58, 43, .55), 0 0 18px rgba(217, 58, 43, .25); border-color: rgba(217, 58, 43, .6); box-shadow: 0 0 10px rgba(217, 58, 43, .25), inset 0 0 10px rgba(217, 58, 43, .15); }
  94%{ color: var(--red-neon); text-shadow: 0 0 22px rgba(255, 85, 68, .95), 0 0 54px rgba(255, 85, 68, .5); border-color: rgba(255, 85, 68, .8); box-shadow: 0 0 32px rgba(255, 85, 68, .45), inset 0 0 26px rgba(255, 85, 68, .3); }
}
.form-side ul{
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
  color: var(--milk-dim);
}
.form-side li{
  padding: .45rem 0 .45rem 1.7rem;
  position: relative;
}
.form-side li::before{
  content: "★";
  position: absolute;
  left: 0;
  color: var(--gold);
}
.custom-form{
  background: var(--cream);
  border: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.9rem 1.9rem 2.1rem;
  box-shadow: var(--shadow-card);
  color: var(--ink-cream);
}
.custom-form h3{
  font-family: var(--font-sign);
  font-weight: 400;
  color: var(--denim);
  font-size: 1.15rem;
  margin: 0 0 1.2rem;
}
.f-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .95rem 1.1rem;
}
.f-field{ display: flex; flex-direction: column; gap: .3rem; }
.f-wide{ grid-column: 1 / -1; }
.f-field label{
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--denim);
}
.f-field input[type="text"],
.f-field input[type="email"],
.f-field input[type="tel"],
.f-field select,
.f-field textarea{
  font-family: var(--font-body);
  font-size: 1rem;
  color: #2c2747;
  background: var(--paper);
  border: 2px solid var(--cream-edge);
  border-radius: 10px;
  padding: .7rem .85rem;
  width: 100%;
  box-shadow: inset 0 1px 3px rgba(120, 96, 45, .14);
}
.f-field textarea{ resize: vertical; min-height: 108px; }
.f-field input:focus, .f-field select:focus, .f-field textarea:focus{
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(217, 58, 43, .18);
}
.f-upload{
  border: 2px dashed var(--denim);
  border-radius: 12px;
  background: rgba(36, 64, 124, .05);
  padding: 1.2rem;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease;
}
.f-upload:hover{ background: rgba(36, 64, 124, .1); }
.f-upload strong{ color: var(--denim); }
.f-upload .f-up-sub{ display: block; font-size: .88rem; color: #554d73; margin-top: .25rem; }
.f-upload input{ position: absolute; width: 1px; height: 1px; opacity: 0; }
.f-filelist{
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  font-size: .9rem;
  color: var(--denim);
  font-weight: 600;
}
.f-filelist li{ padding: .12rem 0; }
.f-check{
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .95rem;
}
.f-check input{ width: 18px; height: 18px; accent-color: var(--red); }
.f-actions{
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: .4rem;
}
.f-hint{ font-size: .9rem; color: #554d73; max-width: 34ch; margin: 0; }
.form-note{
  grid-column: 1 / -1;
  background: #fdf1d7;
  border: 2px solid var(--gold);
  border-radius: 10px;
  padding: .9rem 1.1rem;
  font-size: .95rem;
  color: #5d4a1f;
}
.form-note[hidden]{ display: none; }

/* ============================================================
   COLORS & HALFTONES
   ============================================================ */
#colors{
  background: radial-gradient(640px 420px at 88% 24%, rgba(93, 58, 142, .2), transparent 65%);
}
.colors-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 2.6rem;
  align-items: center;
}
.swatches{
  list-style: none;
  padding: 0;
  margin: 1.7rem 0 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(64px, 1fr));
  gap: 1rem .6rem;
  max-width: 480px;
}
.swatches li{ text-align: center; }
.sw{
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  margin: 0 auto .35rem;
  border: 3px solid rgba(242, 236, 219, .25);
  box-shadow: 0 4px 10px rgba(3, 6, 20, .5);
}
.sw-custom{
  background: conic-gradient(#d93a2b, #e8b04b, #1f7a3d, #24407c, #5d3a8e, #e79ec1, #d93a2b);
  border-color: #f2ecdb;
  background-clip: padding-box;
}
.swatches span{
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--milk-dim);
}
.colors-close{
  margin: 0;
  background: var(--paper);
  border-radius: 12px;
  padding: .7rem .7rem .8rem;
  box-shadow: var(--shadow-card);
  transform: rotate(1.2deg);
}
.colors-close img{ border-radius: 7px; width: 100%; }
.colors-close figcaption{
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5c5477;
  padding-top: .55rem;
  text-align: center;
}
.colors-promise{
  margin-top: 1.6rem;
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  color: var(--red-neon);
  -webkit-text-stroke: 1px var(--red-deep);
  text-shadow: 0 0 16px rgba(255, 85, 68, .6);
  transform: rotate(-1.5deg);
  animation: eyebrow-flicker 5.8s linear infinite;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{
  display: grid;
  grid-template-columns: .95fr 1.2fr;
  gap: 3rem;
  align-items: center;
}
.about-figure{
  margin: 0;
  background: #fffaf0;
  border: 2px solid var(--cream-edge);
  padding: .9rem .9rem 1rem;
  border-radius: 10px;
  box-shadow: 0 18px 38px rgba(110, 86, 38, .32);
  transform: rotate(-1.6deg);
  max-width: 430px;
}
.about-figure img{ border-radius: 5px; }
.about-figure figcaption{
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6d6140;
  padding-top: .6rem;
  text-align: center;
}
.about-copy p{ max-width: 58ch; }
.about-sign{
  font-family: var(--font-script);
  font-size: 2.1rem;
  color: var(--red);
  margin: 1.1rem 0 0;
  transform: rotate(-2deg);
}
.about-contact-line{
  font-family: var(--font-cond);
  font-weight: 700;
  letter-spacing: .06em;
  font-size: 1.05rem;
  color: var(--denim);
}
.about-contact-line a{ color: var(--red-deep); text-decoration: none; }
.about-contact-line a:hover{ text-decoration: underline; }

#about{ isolation: isolate; }
#about::before{
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; right: 0;
  width: min(46%, 470px);
  height: 400px;
  background-image: radial-gradient(circle 2.6px at 2.6px 2.6px, rgba(36, 64, 124, .26) 0 2.6px, transparent 3.4px);
  background-size: 19px 19px;
  -webkit-mask-image: radial-gradient(520px 420px at 100% 0%, #000 30%, transparent 96%);
  mask-image: radial-gradient(520px 420px at 100% 0%, #000 30%, transparent 96%);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-section{ background: linear-gradient(180deg, var(--night-2), var(--night)); border-top: 2px solid var(--night-line); }
.faq-list{ max-width: 780px; margin: 2.2rem auto 0; }
.faq-list details{
  position: relative;
  background: var(--cream);
  border: 2px solid var(--cream-edge);
  border-radius: 12px;
  margin-bottom: .8rem;
  overflow: hidden;
  interpolate-size: allow-keywords;
  transition: border-color .25s ease;
}
.faq-list details::before{
  content: "";
  position: absolute;
  left: 15px; top: 9px; bottom: 9px;
  width: 0;
  border-left: 2px dashed rgba(36, 64, 124, .3);
}
.faq-list summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .8rem;
  font-weight: 700;
  font-size: 1.04rem;
  color: var(--denim);
  padding: 1rem 1.2rem 1rem 2rem;
}
.faq-list summary::-webkit-details-marker{ display: none; }
.faq-list summary::before{
  content: "★";
  color: var(--red);
  flex: none;
  transition: transform .25s ease;
}
.faq-list details[open] summary::before{ transform: rotate(72deg) scale(1.15); color: var(--gold); }
.faq-list details p{
  margin: 0;
  padding: 0 1.2rem 1.1rem 3.8rem;
  color: var(--ink-cream);
  font-size: .99rem;
}
.faq-list details a{ color: var(--red-deep); }
.faq-list details::details-content{
  height: 0;
  overflow: clip;
  transition: height .35s ease, content-visibility .35s ease allow-discrete;
}
.faq-list details[open]::details-content{ height: auto; }
.faq-list details[open] > p{ animation: faq-in .35s ease both; }
@keyframes faq-in{
  from{ opacity: 0; transform: translateY(-8px); }
  to{ opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .faq-list details, .faq-list details::details-content{ transition: none; }
  .faq-list details[open] > p{ animation: none; }
}

/* ============================================================
   AREA SERVED / MAP + CONTACT
   ============================================================ */
.area-grid{
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 2.4rem;
  align-items: stretch;
  margin-top: 2.2rem;
}
.contact-card{
  background: var(--cream);
  border: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.8rem 1.8rem 1.9rem;
  box-shadow: var(--shadow-card);
  color: var(--ink-cream);
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.contact-card .c-label{
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6d6140;
  margin: 0;
}
.contact-phone{
  font-family: var(--font-sign);
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  color: var(--red);
  text-decoration: none;
  line-height: 1.1;
}
.contact-phone:hover{ color: #b52c1f; }
.contact-card a.mail{ color: var(--denim); font-weight: 600; word-break: break-all; }
.contact-card p{ margin: 0; font-size: .98rem; }
.contact-card p a{ color: var(--red-deep); }
.pay-row{
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
}
.pay-chip{
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--paper);
  background: var(--denim);
  border-radius: 6px;
  padding: .28rem .6rem;
}
.pay-chip.venmo{ background: #3c637f; }
.map-frame{
  border: 3px solid var(--gold);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--night-3);
  height: 100%;
  min-height: 360px;
}
.map-frame iframe{
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  filter: saturate(.82) hue-rotate(-8deg) contrast(1.02);
}

#contact{ isolation: isolate; }
.area-wm{
  position: absolute;
  z-index: -1;
  top: 1.4rem; right: 2%;
  font-family: var(--font-script);
  font-size: clamp(4rem, 8.5vw, 7.2rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(242, 236, 219, .13);
  transform: rotate(-5deg);
  pointer-events: none;
  white-space: nowrap;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta{
  background:
    repeating-conic-gradient(from -90deg at 50% 130%, rgba(232, 176, 75, .06) 0 6deg, transparent 6deg 12deg),
    linear-gradient(180deg, var(--night), var(--night-3));
  text-align: center;
  border-top: 2px solid var(--night-line);
}
.final-cta .hero-ctas{ margin-top: 1.8rem; }

/* the phone number in a bulb marquee frame */
.marquee-frame{
  display: inline-block;
  margin-top: 2.4rem;
  padding: 14px;
  border-radius: 18px;
  background-image: radial-gradient(circle 3.5px at 9px 9px, var(--bulb-dim) 0 3.5px, transparent 4px);
  background-size: 18px 18px;
  position: relative;
}
.marquee-frame::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background-image: radial-gradient(circle 3.5px at 9px 9px, var(--bulb) 0 3.5px, rgba(255, 217, 124, .3) 5.5px, transparent 7px);
  background-size: 18px 18px;
  animation: bulb-breathe 1.15s steps(2, jump-none) infinite;
}
.marquee-inner{
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #1a2153, var(--night-2));
  border: 2px solid var(--gold);
  border-radius: 10px;
  padding: .9rem 2rem 1rem;
}
.marquee-inner .m-label{
  display: block;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .15rem;
}
.marquee-inner a{
  font-family: var(--font-sign);
  font-size: clamp(1.5rem, 4.2vw, 2.3rem);
  color: var(--paper);
  text-decoration: none;
  text-shadow: 0 0 22px rgba(255, 217, 124, .5);
}
.marquee-inner a:hover{ color: var(--bulb); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background: #070b20;
  border-top: 2px solid var(--night-line);
  padding: 3.4rem 0 0;
  font-size: .97rem;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 2.2rem;
  padding-bottom: 2.4rem;
}
.footer-brand .brand{ margin: 0 0 .8rem; }
.footer-brand p{ color: var(--milk-dim); max-width: 34ch; margin: 0; }
.footer-tag{
  margin-top: .9rem !important;
  font-family: var(--font-cond);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold) !important;
  font-size: .85rem;
}
.site-footer h4{
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: .2rem 0 .9rem;
}
.site-footer ul{ list-style: none; margin: 0; padding: 0; }
.site-footer ul li{ padding: .22rem 0; color: var(--milk-dim); }
.site-footer ul a{ color: var(--milk); text-decoration: none; }
.site-footer ul a:hover{ color: var(--bulb); }
.footer-bottom{
  border-top: 1px solid var(--night-line);
  padding: 1.1rem 0 1.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  justify-content: space-between;
  font-family: var(--font-cond);
  letter-spacing: .06em;
  font-size: .92rem;
  color: var(--milk-dim);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1023px){
  .section-pad{ padding: 4.2rem 0; }
  .area-wm{ display: none; }
  .why-grid{ grid-template-columns: 1fr 1fr; }
  .cat-grid{ grid-template-columns: 1fr 1fr; }
  .steps-grid{ grid-template-columns: 1fr 1fr; }
  .press-grid, .colors-grid, .about-grid, .form-wrap, .area-grid{ grid-template-columns: 1fr; }
  .press-grid{ gap: 2rem; }
  .about-figure{ margin-inline: auto; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  body{ font-size: 1rem; }
  .section-pad{ padding: 3.4rem 0; }
  .why-grid, .cat-grid, .steps-grid, .press-photos, .f-grid{ grid-template-columns: 1fr; }
  .f-wide{ grid-column: auto; }
  .f-actions, .form-note{ grid-column: auto; }
  .footer-grid{ grid-template-columns: 1fr; }
  .hero{ padding-top: 3rem; }
  .sign-wrap{ margin-top: 2.6rem; }
  .starburst{ top: -2.6rem; }
  .swatches{ grid-template-columns: repeat(4, 1fr); }
  .map-frame, .map-frame iframe{ min-height: 260px; height: 260px; }
  .cat-custom{ padding: 1.4rem 1.3rem; }
  .reels{ flex-wrap: nowrap; gap: .45rem; margin: 1.6rem 0 .8rem; }
  .reel{ width: auto; flex: 1 1 0; min-width: 0; height: 54px; border-width: 2px; }
  .reel-strip span{ height: 50px; font-size: .8rem; white-space: nowrap; }
  .reel-star{ font-size: 1rem; flex: none; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .b0, .b1, .b2{ animation: none; fill: var(--bulb); }
  .starburst, .starburst .rays,
  .sign-script, .eyebrow-neon, .cat-custom-head .neon, .neon-open, .colors-promise,
  .stars-b, .comet, .bulb-rule::after, .marquee-frame::before,
  .reel-strip, .w1, .w2, .w3{ animation: none !important; }
  .comet{ display: none; }
  .ticker-track{ animation: none; }
  .btn, .cat-card, .press-photos figure{ transition: none; }
}

/* ============================================================
   SUB-PAGES (designs, design template, custom, about, faq, contact)
   ============================================================ */

/* the 7-item nav needs breathing room between 1024 and 1280 */
@media (min-width: 1024px) and (max-width: 1279px){
  .main-nav{ gap: .9rem; }
  .main-nav a{ font-size: .9rem; letter-spacing: .06em; }
  .header-phone{ display: none; }
  .header-cta{ font-size: .74rem; padding: .6rem .85rem; }
  .brand-name{ font-size: .95rem; }
  .header-bar{ gap: 1rem; }
}

.main-nav a[aria-current="page"]{ color: var(--bulb); border-bottom-color: var(--gold); }
.mobile-panel nav a[aria-current="page"]{ color: var(--bulb); }

/* --- page marquee hero --- */
.page-hero{
  background:
    repeating-conic-gradient(from -90deg at 50% -45%, rgba(232, 176, 75, .05) 0 5deg, transparent 5deg 10deg),
    radial-gradient(900px 400px at 50% -70%, #2a2f6d, transparent 72%),
    linear-gradient(180deg, #0a0e28, #131a44);
  padding: 4.1rem 0 3.5rem;
  border-bottom: 2px solid var(--night-line);
  text-align: center;
}
.page-hero .eyebrow{ margin-bottom: .1rem; }
.page-title{
  font-family: var(--font-sign);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.8vw, 3.3rem);
  line-height: 1.08;
  color: var(--paper);
  margin: .15rem 0 .9rem;
  text-wrap: balance;
}
.page-title .glow{ color: var(--bulb); text-shadow: 0 0 26px rgba(255, 217, 124, .4); }
.page-hero .lede{ margin-inline: auto; }
.page-hero .hero-chips{ margin-top: 1.5rem; padding: 0; }

.crumbs{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--milk-dim);
  margin: 0 0 1.1rem;
}
.crumbs a{ color: var(--gold); text-decoration: none; }
.crumbs a:hover{ color: var(--bulb); text-decoration: underline; }
.crumbs .star{ color: var(--red-neon); }

/* --- designs page: rack cards --- */
.rack-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  margin-top: 2.4rem;
}
.rack-card{
  position: relative;
  background: var(--cream);
  border: 3px solid var(--gold);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rack-card:hover{
  transform: translateY(-5px);
  border-color: var(--bulb);
  box-shadow: 0 3px 8px rgba(3, 6, 20, .4), 0 22px 48px rgba(3, 6, 20, .55), 0 0 26px rgba(255, 217, 124, .25);
}
.rack-card figure{ margin: 0; overflow: hidden; }
.rack-card img{
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.rack-card:hover img{ transform: scale(1.05); }
.rack-body{
  padding: 1.35rem 1.45rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  flex: 1;
}
.rack-body h2{
  font-family: var(--font-sign);
  font-size: 1.25rem;
  color: var(--denim);
  margin: 0;
}
.rack-body p{ margin: 0; color: var(--ink-cream); font-size: .99rem; }
.meta-chips{ display: flex; flex-wrap: wrap; gap: .4rem; }
.meta-chips span{
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--denim);
  border: 1.5px solid rgba(36, 64, 124, .35);
  border-radius: 999px;
  padding: .18rem .62rem;
  background: rgba(36, 64, 124, .06);
}
.meta-chips .warm{
  color: #7c430f;
  border-color: rgba(178, 98, 28, .45);
  background: rgba(232, 176, 75, .16);
}
.rack-actions{
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  padding-top: .55rem;
}
.rack-actions .btn{ padding: .7rem 1.1rem; font-size: .8rem; }
.link-plain{
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red-deep);
}
.cat-link{ color: inherit; text-decoration: none; }
.cat-link:hover{ color: var(--red-deep); }
.cat-link::after{ content: ""; position: absolute; inset: 0; }
.cat-card{ position: relative; }
/* links on cream cards keep a readable red hover, never pale yellow */
.link-plain:hover,
.step p a:hover,
.contact-card a.mail:hover,
.contact-card p a:hover,
.faq-list details a:hover,
.about-contact-line a:hover,
.on-cream a:not(.btn):hover,
.why-card a:not(.btn):hover,
.cat-card a:not(.btn):hover,
.rack-body a:not(.btn):hover,
.buy-card a:not(.btn):hover,
.custom-form a:not(.btn):hover{ color: var(--red-deep); }

/* --- design template page --- */
.shirt-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 2.6rem;
  align-items: start;
  margin-top: 2.3rem;
}
.shirt-photo{
  margin: 0;
  background: var(--paper);
  border-radius: 14px;
  padding: .8rem .8rem .9rem;
  box-shadow: var(--shadow-card);
  transform: rotate(-1deg);
}
.shirt-photo img{ border-radius: 8px; width: 100%; }
.shirt-photo figcaption{
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5c5477;
  padding-top: .55rem;
  text-align: center;
}
.spec-list{
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.1rem 1.3rem;
  background: rgba(10, 14, 38, .55);
  border: 1.5px solid var(--night-line);
  border-radius: 12px;
  display: grid;
  gap: .45rem;
}
.spec-list li{ font-size: .95rem; color: var(--milk-dim); padding-left: 1.4rem; position: relative; }
.spec-list li::before{ content: "★"; position: absolute; left: 0; top: .1rem; color: var(--gold); font-size: .8rem; }

.buy-card{
  background: var(--cream);
  border: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.7rem 1.7rem 1.9rem;
  box-shadow: var(--shadow-card);
  color: var(--ink-cream);
}
.buy-card h1{
  font-family: var(--font-sign);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.12;
  color: var(--denim);
  margin: 0 0 .35rem;
}
.rack-tag{
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red-deep);
  margin: 0 0 .2rem;
}
.price-line{
  font-family: var(--font-cond);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 1rem;
  color: #6d6140;
  margin: .2rem 0 .4rem;
}
.opt-group{ margin: 1.15rem 0 0; }
.opt-label{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--denim);
  margin-bottom: .45rem;
}
.opt-label em{ font-style: normal; color: #7c430f; font-size: .76rem; letter-spacing: .08em; }
.opt-chips{ display: flex; flex-wrap: wrap; gap: .45rem; }
.chip-btn{
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--denim);
  background: var(--paper);
  border: 2px solid var(--cream-edge);
  border-radius: 9px;
  padding: .5rem .85rem;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.chip-btn:hover{ border-color: var(--denim); }
.chip-btn[aria-pressed="true"]{
  background: var(--denim);
  border-color: var(--denim);
  color: var(--paper);
  box-shadow: 0 4px 10px rgba(36, 64, 124, .35);
}
.chip-btn .dot{
  display: inline-block;
  width: 13px; height: 13px;
  border-radius: 50%;
  margin-right: .4rem;
  vertical-align: -2px;
  border: 1.5px solid rgba(0, 0, 0, .28);
}
.qty-input{
  font-family: var(--font-body);
  font-size: 1rem;
  color: #2c2747;
  background: var(--paper);
  border: 2px solid var(--cream-edge);
  border-radius: 9px;
  padding: .5rem .7rem;
  width: 92px;
  box-shadow: inset 0 1px 3px rgba(120, 96, 45, .14);
}
.qty-input:focus{ outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(217, 58, 43, .18); }
.od-input{
  font-family: var(--font-body);
  font-size: 1rem;
  color: #2c2747;
  background: var(--paper);
  border: 2px solid var(--cream-edge);
  border-radius: 9px;
  padding: .6rem .75rem;
  width: 100%;
  box-shadow: inset 0 1px 3px rgba(120, 96, 45, .14);
}
.od-input:focus{ outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(217, 58, 43, .18); }
.pick-summary{
  margin-top: 1.35rem;
  background: var(--paper);
  border: 2px dashed var(--cream-edge);
  border-radius: 10px;
  padding: .8rem 1rem;
  font-size: .96rem;
  color: #554d73;
}
.buy-ctas{ display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.25rem; }
.buy-note{ font-size: .88rem; color: #554d73; margin: .95rem 0 0; }

.related-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2rem;
}
.template-note{
  max-width: 840px;
  margin: 0 auto;
  border: 2px dashed var(--gold);
  border-radius: 12px;
  padding: 1rem 1.3rem;
  color: var(--milk-dim);
  font-size: .94rem;
  background: rgba(10, 14, 38, .5);
}
.template-note b{ color: var(--bulb); }

/* --- FAQ page groups --- */
.faq-group{ margin-top: 2.7rem; }
.faq-group .group-title{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-family: var(--font-cond);
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-size: .92rem;
  color: var(--gold);
  margin: 0 0 1.15rem;
}
.group-title::before, .group-title::after{
  content: "";
  height: 1px;
  width: 62px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.group-title::after{ background: linear-gradient(90deg, var(--gold), transparent); }
.board-navy{
  background: linear-gradient(180deg, #181f52, var(--night-2));
  border: 2px solid var(--night-line);
  border-radius: var(--radius);
  padding: 2.4rem 2.4rem 2.6rem;
  margin-top: 2.6rem;
}

/* --- small cta strip between sections --- */
.strip-cta{
  background:
    repeating-conic-gradient(from -90deg at 50% 145%, rgba(232, 176, 75, .05) 0 6deg, transparent 6deg 12deg),
    linear-gradient(180deg, var(--night-2), var(--night-3));
  border-block: 2px solid var(--night-line);
  text-align: center;
  padding: 3.6rem 0;
}
.strip-cta h2{ margin-bottom: 1.5rem; }
.strip-cta .hero-ctas{ margin-top: 0; }

/* --- sub-page responsive --- */
@media (max-width: 1023px){
  .rack-grid{ grid-template-columns: 1fr; }
  .shirt-grid{ grid-template-columns: 1fr; }
  .related-grid{ grid-template-columns: 1fr 1fr; }
  .board-navy{ padding: 1.8rem 1.4rem 2rem; }
}
@media (max-width: 640px){
  .page-hero{ padding: 3.2rem 0 2.8rem; }
  .related-grid{ grid-template-columns: 1fr; }
  .buy-card{ padding: 1.4rem 1.2rem 1.6rem; }
}