/* Tony Pre: site-wide header and footer. Brand tokens from the Tony Pre design system. */
:root {
  --tp-pink: #D90898;
  --tp-pink-300: #F274C3;
  --tp-violet: #7B2BFF;
  --tp-ink-950: #0B0710;
  --tp-ink-900: #14101B;
  --tp-ink-400: #938CA1;
  --tp-ink-300: #BDB6C7;
  --tp-white: #FFFFFF;
  --tp-header-h: 72px;
  --tp-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.tp-header *, .tp-footer *, .tp-menu * { box-sizing: border-box; }

/* ================= Header ================= */
.tp-header {
  position: sticky; top: 0; z-index: 9000;
  height: var(--tp-header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 clamp(16px, 4vw, 44px);
  background: #0B0710;
  font-family: var(--tp-font);
  box-sizing: border-box;
  transition: background .3s ease, height .3s ease;
}
.tp-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(217,8,152,.8) 25%, rgba(123,43,255,.55) 65%, transparent 100%);
}
.tp-header.is-scrolled { --tp-header-h: 62px; background: #0B0710; }

.tp-logo { display: inline-flex; align-items: center; flex: 0 0 auto; line-height: 0; }
.tp-logo img { height: 28px; width: auto; display: block; }

/* Everything except the logo sits together on the right */
.tp-right { display: flex; align-items: center; gap: clamp(22px, 2.6vw, 34px); margin-left: auto; }
.tp-nav { display: flex; align-items: center; gap: clamp(22px, 2.6vw, 34px); }
.tp-navlink {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  color: rgba(255,255,255,.78); text-decoration: none;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1;
  padding: 10px 0; transition: color .2s ease;
}
.tp-navlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--tp-pink); box-shadow: 0 0 10px var(--tp-pink);
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.tp-navlink:hover, .tp-drop:hover > .tp-navlink, .tp-drop:focus-within > .tp-navlink { color: var(--tp-white); }
.tp-navlink:hover::after, .tp-navlink.is-active::after, .tp-navlink[aria-current="page"]::after { transform: scaleX(1); }
.tp-navlink.is-active, .tp-navlink[aria-current="page"] { color: var(--tp-pink-300); }
.tp-caret { transition: transform .2s ease; opacity: .8; }
.tp-drop:hover .tp-caret, .tp-drop:focus-within .tp-caret { transform: rotate(180deg); }

/* Experiences dropdown */
.tp-drop { position: relative; }
.tp-drop-menu {
  position: absolute; top: 100%; left: 50%; min-width: 210px;
  padding: 10px; margin-top: 10px; border-radius: 12px;
  background: rgba(14, 9, 20, 0.97); border: 1px solid rgba(217,8,152,.35);
  box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 30px rgba(217,8,152,.18);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.tp-drop-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* hover bridge */
.tp-drop:hover .tp-drop-menu, .tp-drop:focus-within .tp-drop-menu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity .18s ease, transform .18s ease;
}
.tp-drop-menu a {
  display: block; padding: 11px 14px; border-radius: 8px;
  color: rgba(255,255,255,.82); text-decoration: none; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  transition: background .15s ease, color .15s ease;
}
.tp-drop-menu a:hover { background: rgba(217,8,152,.14); color: var(--tp-white); }
.tp-drop-menu a[aria-current="page"] { color: var(--tp-pink-300); }

/* Check Availability button */
.tp-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 42px; padding: 0 20px; border-radius: 8px;
  background: rgba(11,7,16,.6); border: 1.5px solid var(--tp-pink);
  color: var(--tp-pink-300); text-decoration: none; white-space: nowrap;
  font-family: var(--tp-font); font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 0 18px rgba(217,8,152,.35), inset 0 0 12px rgba(217,8,152,.12);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tp-cta:hover { background: var(--tp-pink); color: var(--tp-white); box-shadow: 0 0 28px rgba(217,8,152,.75); transform: translateY(-1px); }
.tp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tp-pink); box-shadow: 0 0 8px var(--tp-pink); animation: tp-pulse 1.8s ease-in-out infinite; flex: 0 0 auto; }
.tp-cta:hover .tp-dot { background: var(--tp-white); box-shadow: 0 0 8px var(--tp-white); }
@keyframes tp-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.75); } }

/* Menu button (phones and small tablets) */
.tp-burger {
  display: none; width: 44px; height: 44px; border-radius: 8px; flex: 0 0 auto;
  background: transparent; border: 1px solid rgba(255,255,255,.18); cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 6px; padding: 0;
}
.tp-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--tp-white); transition: transform .3s ease; }
.tp-burger span:nth-child(2) { width: 14px; align-self: center; transform: translateX(3px); background: var(--tp-pink); box-shadow: 0 0 8px var(--tp-pink); }
.tp-menu-open .tp-burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.tp-menu-open .tp-burger span:nth-child(2) { width: 20px; transform: translateY(-4px) rotate(-45deg); }

/* Phone menu */
.tp-menu {
  position: fixed; inset: 0; z-index: 8999;
  padding: calc(var(--tp-header-h) + 28px) clamp(20px, 6vw, 44px) 32px;
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(217,8,152,.28), transparent 60%),
    radial-gradient(90% 50% at 0% 100%, rgba(123,43,255,.20), transparent 60%),
    var(--tp-ink-950);
  font-family: var(--tp-font);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
  overflow-y: auto;
}
.tp-menu-open .tp-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s ease; }
.tp-menu ul { list-style: none; margin: 0; padding: 0; }
.tp-menu-links a {
  display: block; padding: 12px 0; text-decoration: none;
  font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em; line-height: 1;
  font-size: clamp(30px, 9vw, 46px); color: var(--tp-white);
}
.tp-menu-sub { margin: 4px 0 0 !important; padding: 8px 0 0 !important; border-top: 1px solid rgba(255,255,255,.08); }
.tp-menu-sub a {
  display: block; padding: 11px 0; text-decoration: none;
  color: rgba(255,255,255,.8); font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.tp-menu-sub a[aria-current="page"], .tp-menu-links a:hover, .tp-menu-sub a:hover { color: var(--tp-pink-300); }
.tp-menu-bottom { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.tp-menu-bottom .tp-cta { width: 100%; height: 54px; font-size: 12.5px; background: var(--tp-pink); color: var(--tp-white); }
.tp-menu-bottom .tp-cta .tp-dot { background: var(--tp-white); box-shadow: 0 0 8px var(--tp-white); }
.tp-menu-row { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.tp-menu-row a { color: rgba(255,255,255,.7); text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

@media (max-width: 900px) {
  .tp-nav, .tp-right > .tp-cta { display: none; }
  .tp-burger { display: inline-flex; }
  .tp-logo img { height: 24px; }
  :root { --tp-header-h: 62px; }
}
body.tp-lock { overflow: hidden !important; }

/* ================= Footer ================= */
.tp-footer {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--tp-ink-950); color: var(--tp-ink-300);
  font-family: var(--tp-font); font-size: 16px; line-height: 1.5;
}
.tp-footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 90% at 100% 100%, rgba(217,8,152,.14), transparent 70%);
}

/* Marquee band */
.tp-marquee {
  border-top: 1px solid rgba(217,8,152,.4); border-bottom: 1px solid rgba(255,255,255,.07);
  overflow: hidden; white-space: nowrap; padding: 14px 0;
}
.tp-marquee-track { display: inline-flex; animation: tp-scroll 40s linear infinite; }
.tp-marquee span {
  display: inline-flex; align-items: center; gap: 22px; padding-right: 22px;
  font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em; line-height: 1;
  font-size: clamp(20px, 3vw, 36px); color: var(--tp-white);
}
.tp-marquee span.tp-outline { color: transparent; -webkit-text-stroke: 1.2px var(--tp-pink); }
.tp-marquee i { width: 9px; height: 9px; border-radius: 50%; background: var(--tp-pink); box-shadow: 0 0 10px var(--tp-pink); display: inline-block; }
@keyframes tp-scroll { to { transform: translateX(-50%); } }

.tp-footer-main {
  position: relative; max-width: 1200px; margin: 0 auto;
  padding: 40px clamp(20px, 4vw, 44px) 28px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; align-items: start;
}
.tp-footer-brand img { height: 32px; width: auto; display: block; margin-bottom: 14px; }
.tp-footer-tagline {
  margin: 0 0 14px; max-width: 26ch; color: var(--tp-white);
  font-weight: 800; font-stretch: 112%; text-transform: uppercase; letter-spacing: .01em; line-height: 1.2;
  font-size: 18px;
}
.tp-footer-tagline em { font-style: normal; color: var(--tp-pink-300); }
.tp-pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(217,8,152,.45); background: rgba(217,8,152,.07);
  color: var(--tp-pink-300); font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
}
.tp-pill .tp-dot { width: 6px; height: 6px; }
.tp-col h3 {
  margin: 2px 0 14px; color: var(--tp-pink-300);
  font-size: 12.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; line-height: 1.2;
}
.tp-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.tp-col a {
  color: var(--tp-ink-300); text-decoration: none;
  font-size: 16px; font-weight: 500; letter-spacing: .01em; line-height: 1.3;
  transition: color .2s ease;
}
.tp-col a:hover { color: var(--tp-white); }

/* Tony Pre "O" record, small and subtle */
.tp-vinyl {
  position: absolute; z-index: -1; pointer-events: none;
  width: 120px; height: 157px; right: clamp(10px, 2vw, 28px); bottom: 58px;
  background: linear-gradient(160deg, var(--tp-pink) 0%, #9A5CFF 100%);
  -webkit-mask: url("/_site/tp-o-white.png") center / contain no-repeat;
  mask: url("/_site/tp-o-white.png") center / contain no-repeat;
  opacity: .16; transform-origin: 50% 50%;
  animation: tp-sway 9s ease-in-out infinite alternate;
}
@keyframes tp-sway { from { transform: rotate(-8deg); } to { transform: rotate(6deg); } }

.tp-footer-bar {
  max-width: 1200px; margin: 0 auto; padding: 16px clamp(20px, 4vw, 44px) 22px;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
  font-size: 14px; color: var(--tp-ink-400);
}
.tp-footer-bar a { color: var(--tp-ink-300); text-decoration: none; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: 12px; }
.tp-footer-bar a:hover { color: var(--tp-pink-300); }

@media (max-width: 900px) {
  .tp-footer-main { grid-template-columns: repeat(3, 1fr); }
  .tp-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .tp-footer-main { grid-template-columns: 1fr 1fr; gap: 26px 20px; padding-top: 32px; }
  .tp-col:last-of-type { grid-column: 1 / -1; }
  .tp-vinyl { width: 90px; height: 118px; bottom: 70px; right: 12px; }
  .tp-footer-bar { flex-direction: column; align-items: flex-start; }
}

.tp-header a:focus-visible, .tp-footer a:focus-visible, .tp-menu a:focus-visible, .tp-burger:focus-visible {
  outline: 2px solid var(--tp-pink-300); outline-offset: 3px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .tp-marquee-track, .tp-vinyl, .tp-dot { animation: none; }
  .tp-header, .tp-menu, .tp-navlink::after, .tp-drop-menu { transition: none; }
}

/* The Claude Design runtime sizes its root to the viewport and lets content overflow.
   Let it grow with its content so the footer sits after the page instead of on top of it. */
#dc-root { height: auto !important; min-height: calc(100vh - var(--tp-header-h)); }

/* Anchor links land below the sticky header */
[id] { scroll-margin-top: calc(var(--tp-header-h) + 8px); }

/* Home hero: Check Availability + Pick Your Experience side by side */
.tp-hero-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; }
@media (max-width: 560px) { .tp-hero-row { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; } .tp-hero-row > a { width: 100%; } }

/* Home hero: experience tags under the headline */
.tp-hero-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0 2px; }
.tp-hero-tags a {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(11,7,16,.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: rgba(255,255,255,.9); text-decoration: none;
  font-family: var(--tp-font); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  transition: border-color .2s ease, color .2s ease, box-shadow .2s ease, background .2s ease;
}
.tp-hero-tags a:hover { border-color: var(--tp-pink); color: var(--tp-white); background: rgba(217,8,152,.18); box-shadow: 0 0 18px rgba(217,8,152,.45); }
@media (max-width: 560px) { .tp-hero-tags { gap: 8px; } .tp-hero-tags a { height: 32px; padding: 0 12px; font-size: 10.5px; } }

/* Home hero headline: kicker + big two-line statement, with a neon flicker on NIGHTLIFE. */
#top h1 .tp-kicker {
  font-size: clamp(14px, 1.9cqw, 26px) !important; letter-spacing: .2em !important; line-height: 1.1 !important;
  margin-bottom: clamp(4px, .8cqw, 12px);
}
#top h1 .tp-kicker > span { color: #F274C3 !important; text-shadow: 0 0 22px rgba(217,8,152,.55) !important; }
#top h1 .tp-neon { animation: tp-flicker 2.4s ease-out .4s 1 both, tp-glow 3.6s ease-in-out 2.8s infinite alternate; }
@keyframes tp-flicker {
  0% { opacity: .15; } 8% { opacity: 1; } 12% { opacity: .3; } 18% { opacity: 1; } 22% { opacity: .55; } 30%, 100% { opacity: 1; }
}
@keyframes tp-glow {
  from { text-shadow: 0 0 30px rgba(217,8,152,.45), 0 0 60px rgba(217,8,152,.25); }
  to   { text-shadow: 0 0 46px rgba(217,8,152,.85), 0 0 110px rgba(217,8,152,.45); }
}
@media (prefers-reduced-motion: reduce) { #top h1 .tp-neon { animation: none; } }

/* Card descriptions that Claude Design clamps to 2 lines get cut off on phones and tablets; show the full text there. */
@media (max-width: 1023px) {
  [style*="-webkit-line-clamp: 2"], [style*="-webkit-line-clamp:2"] { -webkit-line-clamp: unset !important; line-clamp: unset !important; display: block !important; overflow: visible !important; }
}

/* Check My Availability: on narrow two-column screens, show only the first add-on note so the card never outgrows the form beside it. */
@media (min-width: 769px) and (max-width: 1099px) {
  .tp-addon-notes > span:last-child { display: none; }
}

/* Phones: the small dot separators in label rows (for example under the Home hero) end up dangling at line ends.
   Hide them and stack the labels on their own centered lines instead. */
@media (max-width: 767px) {
  [style*="width: 5px; height: 5px"] { display: none !important; }
  div:has(> [style*="width: 5px; height: 5px"]) { flex-direction: column !important; align-items: center !important; row-gap: 8px !important; }
}