:root {
  --bg: #060608;
  --bg2: #0d0d14;
  --card: #12121c;
  --line: rgba(255, 255, 255, 0.08);
  --fg: #f5f7fa;
  --muted: rgba(245, 247, 250, 0.72);

  /* Sampled from the badge PNG itself (images/logo.png), not eyeballed: the two
     dominant non-neutral colors are #009CA8 teal and #E4306C pink. Both are used
     as-is for fills. On the near-black bg they measure 6.1:1 and 4.8:1 — above the
     4.5:1 body-text floor, so they're also safe as text. */
  --teal: #009ca8;
  --pink: #e4306c;
  /* Lifted variants for small text and hairline glows, where the flat brand
     values sit a touch dark against #060608. */
  --teal-lift: #22c3d0;
  --pink-lift: #ff4d85;
  --radius: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand {
  font-family: "Anton", Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
}

h1 { font-size: clamp(2.8rem, 8vw, 5.5rem); }
h2 { font-size: clamp(1.9rem, 4.5vw, 3.2rem); margin-bottom: 2.5rem; }
h3 { font-size: 1.35rem; margin-bottom: 0.6rem; letter-spacing: 0.04em; }

p { color: var(--muted); }

.section-lead { max-width: 640px; margin: -1.2rem 0 2.4rem; font-size: 1.05rem; line-height: 1.55; color: var(--muted); }

a { color: var(--teal); text-decoration: none; }

.accent-teal { color: var(--teal); }
.accent-pink { color: var(--pink); }

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  border: 1px solid rgba(0, 156, 168, 0.35);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  margin-bottom: 1.2rem;
  background: rgba(0, 156, 168, 0.06);
}

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(6, 6, 8, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

/* Skip link (WCAG 2.4.1): parked off-screen, revealed top-left on focus */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
  background: var(--accent-1, var(--teal, #0aa));
  color: #06090a;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 6px;
}
.skip-link:focus { left: 8px; top: 8px; }

.nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0.9rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Nav is a type-set wordmark using the badge's own color split: PUP teal,
   HOUSE pink, FITNESS teal underneath. The badge itself carries the hero. */
.brand {
  display: flex;
  flex-direction: column;
  line-height: 0.9;
  font-family: "Anton", Impact, sans-serif;
  letter-spacing: 0.02em;
}

.brand-top { font-size: 1.5rem; }
.brand-pup { color: var(--teal-lift); }
.brand-house { color: var(--pink); }

/* FITNESS centred under PUP HOUSE, flanked by the pink strokes the badge uses.
   The flex row spans the full width of the wordmark, so centring here centres
   against the line above it. */
.brand-fit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  color: var(--teal-lift);
  font-size: 0.82rem;
}

/* flex-basis 0 means the strokes contribute nothing to the row's intrinsic
   width, so PUP HOUSE above stays the widest element and sets the lockup width.
   The strokes then grow into whatever space is left, never past it. */
.brand-fit::before,
.brand-fit::after {
  content: "";
  flex: 1 1 0;
  min-width: 0;
  height: 2px;
  background: var(--pink);
  border-radius: 2px;
}

/* Tracking is deliberately tighter than the badge's: the strokes can only use
   the width FITNESS leaves behind, and at 0.42em they were squeezed to stubs.
   Trailing letter-space pads the right edge only, so the matching left pad
   keeps the word optically centred between them. */
.fit-word { letter-spacing: 0.26em; padding-left: 0.26em; }

/* Footer closes on the complete badge — it's the end-credit mark, not chrome. */
.footer .brand-logo { height: 132px; width: auto; display: block; margin: 0 auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

/* :not(.btn): .nav-links a (0,1,1) out-specifies .btn-primary (0,1,0), so the
   nav CTA rendered muted text on the accent fill — axe measured it under
   4.5:1 (a11y pass 2026-07-25). All nav links also get a 24px hit area
   (SC 2.5.8; they measured 23.5px). */
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.nav-links a:not(.btn) {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.92rem;
}

.nav-links a:not(.btn):hover { color: var(--fg); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
}

.nav-toggle span {
  width: 24px; height: 2px;
  background: var(--fg);
  display: block;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 1rem;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--teal);
  color: #04161a;
  box-shadow: 0 0 24px rgba(0, 156, 168, 0.35);
}

.btn-primary:hover { box-shadow: 0 0 36px rgba(0, 156, 168, 0.55); }

.btn-outline {
  border-color: var(--pink);
  color: var(--fg);
  background: rgba(228, 48, 108, 0.08);
}

.btn-outline:hover { box-shadow: 0 0 24px rgba(228, 48, 108, 0.35); }

.btn-ghost {
  border-color: var(--line);
  color: var(--fg);
}

.btn-sm { padding: 0.55rem 1.2rem; font-size: 0.9rem; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 7rem 1.4rem 4rem;
}

.hero-glow {
  position: absolute;
  width: 55vw; height: 55vw;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.22;
  pointer-events: none;
}

.hero-glow-teal { background: var(--teal); top: -18vw; right: -12vw; }
.hero-glow-pink { background: var(--pink); bottom: -22vw; left: -14vw; }

.hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero-shot { position: relative; }

/* The badge sits directly on the page — no frame, no crop. A photo would get a
   card treatment here; a logo with its own white keyline must not. */
.hero-shot img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));
}

/* Brand-tinted glow anchored to the photo, not floating decoration. */
.hero-shot::after {
  content: "";
  position: absolute;
  inset: -14% -10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 156, 168, 0.35), transparent 75%);
  filter: blur(38px);
}

.hero-sub {
  max-width: 560px;
  font-size: 1.15rem;
  margin: 1.4rem 0 2.2rem;
}

.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-badges {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  list-style: none;
  margin-top: 2.4rem;
}

.hero-badges li {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  background: rgba(255, 255, 255, 0.03);
}

/* ---------- marquee ---------- */
.marquee {
  overflow: hidden;
  background: var(--pink);
  transform: rotate(-1.2deg);
  margin: 0 -2vw;
  width: 104vw;
}

.marquee-track {
  display: inline-block;
  white-space: nowrap;
  font-family: "Anton", Impact, sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  color: #1a0410;
  padding: 0.55rem 0;
  animation: marquee 28s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- sections ---------- */
.section { padding: 5.5rem 1.4rem; }
.section-alt { background: var(--bg2); }
.section-inner { max-width: 1180px; margin: 0 auto; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.card:hover { border-color: rgba(0, 156, 168, 0.35); transform: translateY(-3px); }

.steps, .grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}

.step-num {
  font-family: "Anton", Impact, sans-serif;
  font-size: 2.4rem;
  display: block;
  margin-bottom: 0.8rem;
  opacity: 0.9;
}

/* ---------- pack ---------- */
.pack-inner { text-align: center; }
.pack-sub { max-width: 480px; margin: 0 auto 1.8rem; }

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 2.5rem 0;
  text-align: left;
}

.shot { position: relative; overflow: hidden; border-radius: var(--radius); }

.shot img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.03);
  transition: transform 0.4s ease;
}

/* Media scales inside a fixed frame; the frame itself never moves. */
.shot:hover img { transform: scale(1.04); }

.shot figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 0.9rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--fg);
  background: linear-gradient(to top, rgba(6, 6, 8, 0.92) 35%, transparent);
}

/* ---------- service area ---------- */
.area-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  max-width: 760px;
}

.city-list {
  list-style: none;
  columns: 2;
  margin-top: 0.6rem;
}

.city-list li {
  color: var(--muted);
  padding: 0.25rem 0;
  font-weight: 500;
}

.area-note { margin-top: 1.6rem; font-size: 0.95rem; }

/* ---------- packages ---------- */
.pkg { display: flex; flex-direction: column; gap: 0.7rem; }
.pkg .btn { align-self: flex-start; margin-top: auto; }
.pkg-tag {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.pkg-featured {
  border-color: rgba(228, 48, 108, 0.5);
  box-shadow: 0 0 40px rgba(228, 48, 108, 0.12);
}

.pkg-price { margin: 0.2rem 0 0.4rem; }

.price {
  font-family: "Anton", Impact, sans-serif;
  font-size: 2.6rem;
  color: var(--fg);
  line-height: 1;
}

.price-note {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pink-lift);
  vertical-align: super;
}

.pack-list { list-style: none; margin: 0.2rem 0 0.4rem; }

.pack-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.95rem;
}

.pack-list li:last-child { border-bottom: 0; }
.pack-list b { color: var(--fg); font-size: 1.15rem; font-weight: 800; }

.pack-list em {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-lift);
}

/* ---------- faq ---------- */
.faq-inner { max-width: 760px; }

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  margin-bottom: 0.8rem;
  padding: 1.1rem 1.4rem;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 1.05rem;
  list-style: none;
  position: relative;
  padding-right: 2rem;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 0;
  color: var(--teal);
  font-size: 1.3rem;
  font-weight: 400;
}

.faq-item[open] summary::after { content: "\2212"; }

.faq-item p { margin-top: 0.8rem; }

/* ---------- cta / form ---------- */
.cta-section { padding-bottom: 6.5rem; }

.cta-card {
  text-align: center;
  padding: 3rem 2rem;
  border-color: rgba(0, 156, 168, 0.25);
  box-shadow: 0 0 60px rgba(0, 156, 168, 0.08);
  position: relative;
}

.cta-card:hover { transform: none; }

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.6rem 0 2.4rem;
}

.lead-form {
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.lead-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
}

.lead-form input, .lead-form textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  color: var(--fg);
  font-family: inherit;
  font-size: 1rem;
}

.lead-form input:focus, .lead-form textarea:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: transparent;
}

.lead-form .btn { align-self: center; margin-top: 0.4rem; }

.form-note { font-size: 0.85rem; text-align: center; }
.form-error { font-size: 0.92rem; text-align: center; font-weight: 700; color: #ff6b6b; margin-top: 0.7rem; }
.form-error:empty { display: none; }

.toast {
  position: absolute;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%) translateY(20px);
  background: var(--teal);
  color: #04161a;
  font-weight: 800;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding: 3rem 1.4rem;
  background: var(--bg2);
}

.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  align-items: center;
  text-align: center;
}

.footer-tag {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink);
  font-weight: 800;
  margin-top: 0.3rem;
}

.footer-links { display: flex; gap: 1.6rem; flex-wrap: wrap; justify-content: center; }
.footer-links a { color: var(--muted); font-weight: 700; }
.footer-links a:hover { color: var(--teal); }

.footer-legal { font-size: 0.8rem; color: rgba(245, 247, 250, 0.5); }

/* ---------- sticky mobile cta ---------- */
.sticky-cta {
  position: fixed;
  left: 50%;
  bottom: -80px;
  transform: translateX(-50%);
  z-index: 40;
  background: var(--pink);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(228, 48, 108, 0.45);
  transition: bottom 0.3s ease;
  display: none;
}

.sticky-cta.show { bottom: 1rem; }

/* ---------- reveal ----------
   Hidden state only applies once JS has tagged <html class="js"> — a no-JS visit
   (or a crawler) sees the full page with zero reveal animation. */
html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

html.js .reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  /* Photo drops below the copy before the two columns get too narrow to read. */
  .hero-inner { grid-template-columns: 1fr; }
  .hero-shot { max-width: 460px; }
  .hero { padding-top: 6rem; }
}

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .steps, .grid-3 { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .nav-toggle { display: flex; }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    background: rgba(6, 6, 8, 0.97);
    padding: 1.4rem;
    border-bottom: 1px solid var(--line);
    gap: 1.1rem;
  }

  .nav-links.open { display: flex; }

  .hero { min-height: 80vh; }
  .grid-4, .area-cols, .form-row { grid-template-columns: 1fr; }
  .city-list { columns: 2; }
  .sticky-cta { display: block; }
  .section { padding: 4rem 1.2rem; }
  .brand-top { font-size: 1.2rem; }
  .brand-fit { font-size: 0.66rem; }
  .fit-word { letter-spacing: 0.22em; padding-left: 0.22em; }
  .footer .brand-logo { height: 104px; }
  .hero-shot { max-width: none; }
  .pack-list li { grid-template-columns: 1fr auto; }
  /* "save 10%" wraps under its row on a phone rather than squeezing the price. */
  .pack-list em { grid-column: 2; }
}

/* ---------- COMP BADGE — DELETE AT LAUNCH ---------- */
.comp-badge{
  position:fixed; top:0; left:0; z-index:9999;
  display:flex; align-items:baseline; gap:6px;
  padding:6px 12px 7px;
  background:#f5f7fa; color:#060608;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  border-bottom-right-radius:10px;
  pointer-events:none;
}
.comp-badge span{ font-weight:500; letter-spacing:.06em; opacity:.62; }
@media (max-width:720px){
  .comp-badge{ font-size:9.5px; padding:5px 9px 6px; top:auto; bottom:0; border-bottom-right-radius:0; border-top-right-radius:10px; }
}
/* ---------- /COMP BADGE ---------- */