:root {
  --black: #07080b;
  --charcoal: #11151b;
  --panel: #171c23;
  --paper: #fffaf0;
  --ink: #101114;
  --muted: rgba(245, 248, 255, .72);
  --line: rgba(245, 248, 255, .16);
  --dark-line: rgba(16, 17, 20, .16);
  --pink: #ff42c7;
  --cyan: #62f3ff;
  --orange: #ff7a30;
  --yellow: #ffe75a;
  --green: #74ff59;
  --blue: #47adff;
  --violet: #a45cff;
  --teal-metal: #2c8f9c;
  --hero-pride: url("https://acquasaunas.com/wp-content/uploads/2025/06/acqua-sauna-blackpool-pride.png");
  --offer: url("https://acquasaunas.com/wp-content/uploads/2026/06/acqua-sauna-blackpool-price-2026.jpg");
  --people-1: url("assets/acquasaunas.com-pride-2026-people-01.webp");
  --people-2: url("assets/acquasaunas.com-pride-2026-people-02.webp");
  --people-3: url("assets/acquasaunas.com-pride-2026-people-03.webp");
  --people-4: url("assets/acquasaunas.com-pride-2026-people-04.webp");
  --people-5: url("assets/acquasaunas.com-pride-2026-people-05.webp");
  --people-6: url("assets/acquasaunas.com-pride-2026-people-06.webp");
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--black); color: #f7fbff; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, a, strong { overflow-wrap: anywhere; }

.wrap { width: min(1180px, calc(100% - 28px)); margin: 0 auto; }
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 8, 11, .82);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.top__inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 950; }
.brand span {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  background: linear-gradient(90deg, var(--pink), var(--orange), var(--yellow), var(--green), var(--cyan), var(--violet));
}
.top nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.top nav a, .btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  padding: 10px 13px;
  font-size: 13px;
  font-weight: 900;
}
.btn-rainbow {
  border: 0;
  color: #08090d;
  background: linear-gradient(90deg, var(--pink), var(--orange), var(--yellow), var(--green), var(--cyan), var(--violet));
}
.btn-light { background: #fff; color: #09090d; border-color: #fff; }
.btn-dark { background: #09090d; color: #fff; border-color: #09090d; }
.eyebrow {
  margin: 0 0 12px;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  font-weight: 950;
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.lede { color: var(--muted); font-size: clamp(18px, 2.2vw, 24px); line-height: 1.35; }

.variant-nav { padding: 28px 0 46px; }
.variant-nav__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.variant-nav a {
  min-height: 92px;
  border: 1px solid currentColor;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(255,255,255,.055);
  font-weight: 950;
}
.variant-nav small { color: var(--muted); font-weight: 900; }

/* Index */
.index { background: #0b0d12; }
.index-hero { padding: clamp(34px, 8vw, 86px) 0 28px; }
.index h1 { margin: 0; max-width: 900px; font-size: clamp(54px, 10vw, 132px); line-height: .84; letter-spacing: 0; }
.index p { max-width: 780px; color: var(--muted); font-size: clamp(18px, 2.2vw, 24px); line-height: 1.38; }
.index-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); }
.index-grid a {
  min-height: 370px;
  padding: 16px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.index-grid a:last-child { border-right: 0; }
.index-grid a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.78)); }
.index-grid a > * { position: relative; z-index: 1; }
.index-grid span { width: max-content; background: #fff; color: #08090d; padding: 7px 9px; font-size: 12px; font-weight: 950; }
.index-grid h2 { margin: 0 0 8px; font-size: clamp(28px, 3vw, 42px); line-height: .92; }
.index-grid p { margin: 0; font-size: 14px; line-height: 1.32; }
.bg-house { background-image: var(--hero-pride); }
.bg-neon { background-image: var(--people-6); }
.bg-bulletin { background-image: var(--offer); }
.bg-collage { background-image: var(--people-3); }
.bg-velvet { background-image: var(--people-2); }

/* 1 House layout */
.house {
  --acqua-bg: #07090c;
  --acqua-text: #f8fbff;
  --acqua-muted: rgba(248,251,255,.74);
  --acqua-line: rgba(248,251,255,.16);
  background: var(--acqua-bg);
}
.acqua-redesign { background: var(--acqua-bg); color: var(--acqua-text); }
.acqua-shell { width: min(1160px, calc(100% - 36px)); margin: 0 auto; }
.acqua-hero {
  min-height: min(720px, calc(100vh - 72px));
  display: grid;
  align-items: end;
  padding: clamp(118px, 10vw, 156px) 0 clamp(34px, 6vw, 72px);
  background: linear-gradient(90deg, rgba(7,9,12,.96), rgba(7,9,12,.78) 46%, rgba(7,9,12,.18)), var(--hero-pride) center top / cover no-repeat;
}
.acqua-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: clamp(26px, 5vw, 64px); align-items: end; }
.acqua-redesign h1 { max-width: 820px; margin: 0 0 22px; font-size: clamp(44px, 7vw, 88px); line-height: 1.04; }
.acqua-redesign h2 { margin: 0 0 18px; font-size: clamp(32px, 4.6vw, 58px); line-height: 1.04; }
.acqua-redesign h3 { margin: 0 0 10px; font-size: 23px; line-height: 1.04; }
.acqua-kicker { margin: 0 0 14px; color: var(--cyan); font-size: 13px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.acqua-redesign p, .acqua-lede { color: var(--acqua-muted); font-size: 18px; line-height: 1.7; }
.acqua-lede { max-width: 720px; font-size: clamp(18px, 1.7vw, 22px); }
.acqua-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.acqua-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 1px solid var(--acqua-line);
  border-radius: 6px;
  color: var(--acqua-text);
  font-weight: 900;
}
.acqua-button--primary {
  border: 0;
  color: #050506;
  background: linear-gradient(90deg, var(--pink), var(--orange), var(--yellow), var(--green), var(--cyan), var(--violet));
  box-shadow: 0 0 28px rgba(98,243,255,.16);
}
.acqua-quick-card, .acqua-card {
  border: 1px solid var(--acqua-line);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
}
.acqua-quick-card {
  padding: 22px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(44,143,156,.28), rgba(14,20,27,.62));
  backdrop-filter: blur(14px) saturate(115%);
}
.acqua-card-label { margin: 0; color: var(--cyan); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 950; }
.acqua-quick-card strong { display: block; margin: 8px 0 12px; font-size: clamp(58px, 5vw, 72px); line-height: 1; }
.acqua-quick-card span, .acqua-card span { color: var(--cyan); font-weight: 900; }
.acqua-band { padding: clamp(58px, 7vw, 100px) 0; background: var(--acqua-bg); }
.acqua-band--dark { background: linear-gradient(180deg, #0a1118, #081018); }
.acqua-highlight { background: linear-gradient(135deg, rgba(255,66,199,.12), rgba(98,243,255,.12), rgba(164,92,255,.10)), #081018; border-block: 1px solid var(--acqua-line); }
.acqua-signup-band { background: linear-gradient(135deg, rgba(255,66,199,.12), rgba(255,231,90,.09), rgba(98,243,255,.12)), #081018; border-block: 1px solid var(--acqua-line); }
.acqua-signup-band .acqua-shell { padding: clamp(28px, 4vw, 46px); border: 1px solid var(--acqua-line); border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)); }
.acqua-card-grid { display: grid; gap: 18px; }
.acqua-card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.acqua-card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.acqua-card { display: block; min-width: 0; padding: 24px; border-radius: 8px; }
.acqua-card p { margin-bottom: 0; font-size: 16px; }
.acqua-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: clamp(28px, 5vw, 62px); align-items: center; }
.acqua-proof { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--acqua-line); background: #0c1117; }
.acqua-proof div { padding: 26px 18px; text-align: center; border-right: 1px solid var(--acqua-line); }
.acqua-proof div:last-child { border-right: 0; }
.acqua-proof strong { display: block; color: var(--cyan); font-size: clamp(30px, 3.2vw, 48px); line-height: 1; text-shadow: 0 0 22px rgba(98,243,255,.28); }
.acqua-proof span { display: block; margin-top: 8px; color: var(--acqua-muted); font-weight: 900; }
.acqua-list { display: grid; gap: 12px; }
.acqua-list div { padding: 18px; border: 1px solid rgba(255,255,255,.24); border-radius: 8px; background: rgba(0,0,0,.12); }
.acqua-list strong, .acqua-list span { display: block; }
.acqua-list strong { margin-bottom: 4px; color: var(--cyan); font-size: 20px; }
.acqua-pride-offer { margin-top: 26px; border: 1px solid var(--acqua-line); border-radius: 8px; overflow: hidden; background: #050506; }
.acqua-home-venues { background: #090d12; }
.acqua-home-venues__panel { min-height: 340px; padding: clamp(32px, 4.5vw, 54px); border: 1px solid rgba(244,249,255,.16); border-radius: 8px; background: linear-gradient(90deg, rgba(7,9,12,.95), rgba(7,9,12,.72) 48%, rgba(7,9,12,.28)), var(--hero-pride) center top / cover no-repeat; }

/* 2 Neon Afterglow */
.neon { background: #07080b; }
.neon-stage { min-height: calc(100svh - 64px); display: grid; grid-template-columns: minmax(0, .82fr) minmax(420px, 1fr); border-bottom: 1px solid var(--line); }
.neon-copy { padding: clamp(24px, 5vw, 64px); display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(circle at 0 0, rgba(255,66,199,.18), transparent 34%), #07080b; }
.neon h1 { margin: 0; font-size: clamp(64px, 8vw, 128px); line-height: .82; letter-spacing: 0; }
.neon-image { min-height: 680px; background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.62)), var(--people-6) center / cover no-repeat; position: relative; }
.neon-image::after { content: "Open till 6am Fri & Sat"; position: absolute; left: 24px; right: 24px; bottom: 24px; border: 1px solid var(--line); padding: 16px; color: var(--cyan); background: rgba(7,8,11,.72); font-size: clamp(30px, 4vw, 62px); font-weight: 950; line-height: .9; }
.neon-rail { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
.neon-rail div { padding: 20px; border-right: 1px solid var(--line); }
.neon-rail div:last-child { border-right: 0; }
.neon-rail strong { display: block; color: var(--cyan); font-size: clamp(34px, 4vw, 64px); line-height: .9; }
.neon-sequence { padding: clamp(34px, 7vw, 80px) 0; }
.neon-steps { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.neon-steps a { min-height: 220px; padding: 18px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; }
.neon-steps a:last-child { border-right: 0; }

/* 3 Weekend Bulletin */
.bulletin { background: #f7f1e5; color: var(--ink); }
.bulletin .top { background: rgba(247,241,229,.86); color: var(--ink); border-color: var(--dark-line); }
.bulletin-board { padding: clamp(18px, 4vw, 42px) 0; }
.bulletin-grid { display: grid; grid-template-columns: 1.2fr .8fr 1fr; grid-auto-rows: minmax(180px, auto); gap: 10px; }
.notice {
  border: 2px solid var(--ink);
  background: #fffdf7;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 8px 8px 0 rgba(16,17,20,.12);
}
.notice.hero { grid-column: span 2; min-height: 420px; background: linear-gradient(135deg, rgba(255,66,199,.11), rgba(98,243,255,.12)), #fffdf7; }
.notice.image { background: var(--offer) center / cover no-repeat; min-height: 420px; }
.notice.people { background: linear-gradient(180deg, transparent, rgba(0,0,0,.62)), var(--people-5) center / cover no-repeat; color: #fff; }
.notice h1, .notice h2 { margin: 0; font-size: clamp(38px, 6vw, 92px); line-height: .84; letter-spacing: 0; }
.notice h3 { margin: 0; font-size: clamp(28px, 4vw, 54px); line-height: .9; }
.notice p { color: inherit; line-height: 1.35; }
.stamp { width: max-content; max-width: 100%; border: 2px solid currentColor; padding: 8px 10px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; }

/* 4 Collage Noir */
.collage { background: #fffdf7; color: #151514; }
.collage-stage { min-height: calc(100svh - 64px); padding: clamp(14px, 3vw, 34px) 0; }
.collage-frame {
  min-height: 760px;
  border: 12px solid #050505;
  background: linear-gradient(90deg, rgba(255,255,255,.94), rgba(255,255,255,.7)), var(--people-3) center / cover no-repeat;
  position: relative;
  overflow: hidden;
}
.collage-frame::before {
  content: "";
  position: absolute;
  width: 46%;
  height: 62%;
  right: -8%;
  top: 6%;
  background: var(--people-4) center / cover no-repeat;
  filter: grayscale(1) contrast(1.08);
  transform: rotate(-2deg);
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 86%);
  opacity: .92;
}
.collage-frame::after {
  content: "";
  position: absolute;
  width: 45%;
  height: 34%;
  left: -4%;
  bottom: -3%;
  background: var(--offer) center / cover no-repeat;
  transform: rotate(-5deg);
  clip-path: polygon(0 12%, 100% 0, 92% 100%, 7% 92%);
}
.collage-copy { position: relative; z-index: 5; min-height: 760px; padding: clamp(24px, 5vw, 62px); display: flex; flex-direction: column; justify-content: space-between; }
.collage h1 { margin: 0; max-width: 7ch; font-size: clamp(64px, 10vw, 142px); line-height: .76; font-weight: 950; text-transform: uppercase; }
.collage h1 span { display: block; color: transparent; -webkit-text-stroke: 2px #111; }
.collage p { max-width: 620px; color: #303033; font-size: clamp(18px, 2.2vw, 25px); line-height: 1.32; }
.brush { position: absolute; z-index: 4; pointer-events: none; opacity: .92; color: var(--orange); }
.brush-heart { width: 78px; height: 58px; transform: rotate(-12deg); }
.brush-heart::before, .brush-heart::after { content: ""; position: absolute; width: 38px; height: 58px; border-radius: 38px 38px 0 0; background: currentColor; }
.brush-heart::before { left: 38px; transform: rotate(-45deg); transform-origin: 0 100%; }
.brush-heart::after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; }
.brush-line { width: 220px; height: 14px; border-radius: 999px; background: currentColor; transform: rotate(-14deg); }
.brush-line::after { content: ""; position: absolute; inset: 24px 0 auto; height: 14px; border-radius: 999px; background: currentColor; }
.brush-1 { left: 7%; top: 9%; color: #ffae28; }
.brush-2 { right: 5%; bottom: 22%; color: #80a142; transform: rotate(18deg); }
.brush-3 { right: 25%; bottom: 14%; color: #db342d; }
.brush-4 { left: 18%; top: 5%; color: #6faeb7; }
.brush-5 { right: -4%; top: 17%; color: #ed6e22; width: 300px; }
.collage-note { width: min(100%, 520px); border: 3px solid #111; padding: 16px; background: rgba(255,255,255,.82); transform: rotate(-1deg); }
.collage-note strong { display: block; font-size: clamp(28px, 5vw, 54px); line-height: .9; }

/* 5 Velvet Promenade */
.velvet { background: radial-gradient(circle at 75% 10%, rgba(255,66,199,.18), transparent 36%), linear-gradient(180deg, #100d14, #050506); }
.velvet-hero {
  min-height: calc(100svh - 64px);
  display: grid;
  align-items: end;
  padding: clamp(34px, 8vw, 96px) 0;
  background: linear-gradient(180deg, rgba(5,5,6,.22), rgba(5,5,6,.9)), var(--people-2) center / cover no-repeat;
}
.velvet h1 { margin: 0; max-width: 850px; font-size: clamp(58px, 9vw, 128px); line-height: .84; }
.velvet-panel {
  margin-top: -42px;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid var(--line);
  background: rgba(15, 13, 20, .92);
  backdrop-filter: blur(18px);
}
.velvet-panel div { padding: 20px; border-right: 1px solid var(--line); }
.velvet-panel div:last-child { border-right: 0; }
.velvet-panel strong { display: block; color: var(--cyan); font-size: clamp(28px, 4vw, 56px); line-height: .9; }
.velvet-section { padding: clamp(50px, 8vw, 96px) 0; }
.velvet-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .7fr); gap: clamp(24px, 5vw, 58px); align-items: center; }
.velvet-card { border: 1px solid var(--line); padding: clamp(22px, 4vw, 42px); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); }
.velvet-offer { min-height: 420px; background: var(--offer) center / contain no-repeat, #07080b; border: 1px solid var(--line); }

@media (max-width: 980px) {
  .top__inner { align-items: flex-start; flex-direction: column; padding: 12px 0; }
  .top nav, .top nav a, .btn { width: 100%; }
  .variant-nav__grid, .index-grid, .acqua-hero__grid, .acqua-split, .acqua-card-grid--4, .acqua-card-grid--3, .neon-stage, .neon-rail, .neon-steps, .bulletin-grid, .velvet-panel, .velvet-split { grid-template-columns: 1fr; }
  .index-grid a, .neon-rail div, .neon-steps a, .velvet-panel div { border-right: 0; border-bottom: 1px solid var(--line); }
  .acqua-hero { min-height: auto; padding-top: 92px; padding-bottom: 52px; }
  .acqua-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acqua-proof div:nth-child(2) { border-right: 0; }
  .neon-image { min-height: 420px; }
  .notice.hero, .notice.image { grid-column: auto; min-height: 300px; }
  .collage-frame { min-height: auto; }
  .collage-frame::before { width: 78%; height: 340px; right: -18%; top: 24%; opacity: .34; }
  .collage-frame::after { width: 72%; height: 220px; opacity: .62; }
  .collage-copy { min-height: 720px; }
}

@media (max-width: 540px) {
  .wrap { width: min(100% - 18px, 1180px); }
  .actions, .acqua-actions { flex-direction: column; }
  .btn, .acqua-button { width: 100%; }
  .acqua-shell { width: min(100% - 28px, 1160px); }
  .acqua-redesign h1 { font-size: 42px; }
  .acqua-redesign h2 { font-size: 32px; }
  .acqua-proof div { padding: 20px 12px; }
  .collage-frame { border-width: 8px; }
  .collage-copy { padding: 20px; }
  .collage h1 { font-size: clamp(54px, 18vw, 82px); }
  .brush-4, .brush-5 { width: 150px; }
}