/* 41 Waves landing page. World: the stage.
   Brand navy ground, every photo a navy duotone of the artist, glass only where it sits over a photo. */

@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/BricolageGrotesque-var.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Onest"; src: url("../fonts/Onest-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #000e29;            /* the floor: the brand navy, one page ground */
  --navy: #000e29;
  --panel: #0c2a63;         /* the surface: every card, panel and the form */
  --panel-2: #163f8a;       /* surface, lifted (gradient end) */
  --bg-2: var(--panel);
  --deep: #00071a;          /* the deep: field wells and the hero's darkest edge */
  --accent: #6cc4ff;
  --accent-ink: #001a3a;
  --accent-soft: rgba(108, 196, 255, 0.18);
  --ink: #f2f3f5;
  --muted: rgba(242, 243, 245, 0.74);
  --faint: rgba(242, 243, 245, 0.6);
  --line: rgba(242, 243, 245, 0.16);
  --line-hi: rgba(242, 243, 245, 0.45);
  --glass-2: rgba(255, 255, 255, 0.1);
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Onest", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --r: 22px;
  --gutter: clamp(18px, 4.5vw, 64px);
  --nav-h: 72px;
  --wrap: 1240px;
  --section: clamp(5rem, 10vw, 9rem);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--body); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
  accent-color: var(--accent); caret-color: var(--accent);
  scrollbar-color: rgba(242, 243, 245, 0.28) var(--bg);
}
::selection { background: var(--accent); color: var(--accent-ink); }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; font-stretch: 92%; letter-spacing: -0.02em; line-height: 1; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); margin-bottom: 0.9em; }
h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.55em; }
p { margin: 0 0 1em; max-width: 62ch; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: var(--gutter); top: -4rem; z-index: 100; background: var(--ink); color: var(--bg); padding: 0.55rem 1rem; border-radius: 999px; font-weight: 600; }
.skip:focus { top: 0.75rem; }

/* Buttons: pills, one solid, one glass */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 52px; padding: 0 1.6rem; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--display); font-weight: 600; font-size: 1.02rem; text-decoration: none;
  white-space: nowrap; cursor: pointer; position: relative; isolation: isolate; overflow: hidden;
  transition: transform 0.6s var(--ease), background-color 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.6s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn-solid { background: var(--accent); color: var(--accent-ink); box-shadow: 0 14px 34px -14px rgba(108, 196, 255, 0.6); }
.btn-solid::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120px 60px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.35), transparent 70%); opacity: 0; transition: opacity 0.4s var(--ease); }
.btn-solid:hover { transform: translateY(-1px); box-shadow: 0 18px 44px -16px rgba(108, 196, 255, 0.8); }
.btn-solid:hover::after { opacity: 1; }
.btn-glass { background: rgba(0, 14, 41, 0.35); color: var(--ink); border-color: rgba(242, 243, 245, 0.45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.btn-glass:hover { background: rgba(242, 243, 245, 0.1); border-color: var(--ink); transform: translateY(-1px); }
.btn-sm { min-height: 42px; padding: 0 1.15rem; font-size: 0.95rem; }

/* Panels and cards: deep blue surface with a light blue edge glow; they lift and bloom on hover */
.pane {
  position: relative; isolation: isolate; border-radius: var(--r);
  background: linear-gradient(160deg, var(--panel-2), var(--panel) 70%);
  border: 1px solid rgba(108, 196, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(108, 196, 255, 0.1), 0 18px 50px -26px rgba(108, 196, 255, 0.55);
  overflow: hidden;
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease), border-color 0.5s var(--ease);
}
.pane:hover { transform: translateY(-5px); border-color: rgba(108, 196, 255, 0.7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(108, 196, 255, 0.28), 0 30px 70px -26px rgba(108, 196, 255, 0.8); }
/* pointer spotlight on the edge */
.pane::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 3; opacity: 0; transition: opacity 0.6s var(--ease);
  background: radial-gradient(320px 320px at var(--mx, 50%) var(--my, 50%), rgba(108, 196, 255, 0.95), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
/* sheen that sweeps across on hover */
.pane::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; background: linear-gradient(105deg, transparent 38%, rgba(108, 196, 255, 0.14) 50%, transparent 62%); transform: translateX(-120%); transition: transform 1.1s var(--ease); }
@media (hover: hover) {
  .pane:hover::after { opacity: 1; }
  .pane:hover::before { transform: translateX(120%); }
}
.card .card-body, .card .card-media { position: relative; z-index: 1; }
.btn-line { background: transparent; color: var(--ink); border-color: rgba(242, 243, 245, 0.4); }
.btn-line:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--ink); transform: translateY(-1px); }
.card { position: relative; isolation: isolate; border-radius: var(--r); overflow: hidden; }
/* Split cards: the photo has its own area beside or above the text, so the artist is never under the copy */
.card-media { position: relative; display: block; overflow: hidden; }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.6s var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }
.card-body { position: relative; z-index: 2; }

/* Nav: one floating glass pill */
.nav { position: fixed; top: 14px; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; padding-inline: var(--gutter); pointer-events: none; }
.pill { pointer-events: auto; display: flex; align-items: center; gap: 1.6rem; padding: 7px 8px 7px 16px; border-radius: 999px; background: rgba(0, 14, 41, 0.5); border: 1px solid var(--line); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 20px 50px -30px rgba(0, 0, 0, 0.8); transition: background-color 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.nav.is-scrolled .pill { background: rgba(0, 14, 41, 0.82); }
.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 40px; width: auto; }
.nav-links { display: flex; gap: 1.5rem; }
.nav-links a { text-decoration: none; color: var(--muted); font-size: 0.95rem; transition: color 0.4s var(--ease); position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px; background: var(--accent); transition: right 0.5s var(--ease); }
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { right: 0; }
.menu-btn { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 999px; background: var(--glass-2); padding: 0; position: relative; cursor: pointer; flex: none; }
.menu-btn span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--ink); top: 17px; transition: transform 0.5s var(--ease), top 0.5s var(--ease); }
.menu-btn span + span { top: 24px; }
.menu-btn[aria-expanded="true"] span { top: 20px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span + span { transform: rotate(-45deg); }
.sheet { display: none; }

/* Hero: the stage */
.hero { position: relative; min-height: 100dvh; display: grid; align-items: center; padding: 120px 0 120px; overflow: hidden; }
.hero-photo { position: absolute; inset: 0; z-index: 0; -webkit-mask-image: linear-gradient(90deg, transparent 13%, #000 34%); mask-image: linear-gradient(90deg, transparent 13%, #000 34%); }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transform: translateX(21%) scale(1.26); transform-origin: 50% 40%; animation: push 16s linear forwards; }
.hero-photo.has-water { -webkit-mask-image: none; mask-image: none; }
.hero-photo.has-water img { visibility: hidden; }
.hero-photo .water { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.note { position: absolute; left: 0; top: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; color: #ffffff; opacity: 0; pointer-events: none; z-index: 1; filter: drop-shadow(0 0 10px rgba(108, 196, 255, 0.95)); }
.note svg { width: 100%; height: 100%; }
.note.is-falling { animation: note 0.9s cubic-bezier(0.45, 0, 0.9, 0.6) forwards; }
@keyframes note {
  0% { opacity: 0; transform: translate(var(--x), calc(var(--y) - var(--fall))) rotate(-14deg) scale(0.85); }
  20% { opacity: 1; }
  55% { transform: translate(calc(var(--x) + 5px), calc(var(--y) - var(--fall) * 0.5)) rotate(9deg) scale(1); }
  94% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(-4deg) scale(1); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.25, 0.45); }
}
@keyframes push { to { transform: translateX(21%) scale(1.18); } }
@keyframes push-m { to { transform: scale(1); } }
.hero-photo::after { content: ""; position: absolute; inset: 0; background:
    linear-gradient(90deg, rgba(0, 14, 41, 0.38) 0%, rgba(0, 14, 41, 0.18) 34%, rgba(0, 14, 41, 0) 56%),
    linear-gradient(180deg, rgba(0, 14, 41, 0.28), rgba(0, 14, 41, 0) 22%, rgba(0, 14, 41, 0) 68%, var(--bg) 100%); }
.sweep { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, 0.09) 50%, transparent 68%); transform: translateX(-110%); animation: sweep 2.8s var(--ease) 0.5s forwards; }
@keyframes sweep { to { transform: translateX(110%); } }
.hero-copy { position: relative; z-index: 2; }
.hero-copy > * { max-width: 640px; }
.hero-title { max-width: 820px; }
.hero-title { font-size: clamp(2.5rem, 6.2vw, 5.8rem); letter-spacing: -0.03em; line-height: 0.94; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero-title .w { display: block; transform: translateY(110%); opacity: 0; filter: blur(10px); animation: rise 1.3s var(--ease) forwards; animation-delay: 0.25s; }
.hero-title .line:nth-child(2) .w { animation-delay: 0.42s; }
@keyframes rise { to { transform: none; opacity: 1; filter: blur(0); } }
.hero-sub { font-size: clamp(1.08rem, 1.5vw, 1.25rem); color: var(--muted); max-width: 54ch; margin: 1.5rem 0 2.1rem; opacity: 0; filter: blur(8px); transform: translateY(14px); animation: settle 1.2s var(--ease) 0.75s forwards; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; opacity: 0; filter: blur(8px); transform: translateY(14px); animation: settle 1.2s var(--ease) 0.95s forwards; }
@keyframes settle { to { opacity: 1; filter: blur(0); transform: none; } }
.band { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: rgba(0, 14, 41, 0.62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.band::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: linear-gradient(90deg, var(--accent), rgba(242, 243, 245, 0.35) 40%, rgba(242, 243, 245, 0.18)); transform: scaleX(0); transform-origin: left; animation: rule 1.4s var(--ease) 1.05s forwards; }
@keyframes rule { to { transform: scaleX(1); } }
.band-inner { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 0; }
/* Chips: pill buttons that fill with sky blue from the left on hover */
.chip { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0 1.05rem 0 1.1rem; border-radius: 999px; border: 1px solid rgba(242, 243, 245, 0.28); color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 0.94rem; white-space: nowrap; background: rgba(0, 14, 41, 0.3); transition: color 0.45s var(--ease), border-color 0.45s var(--ease), transform 0.6s var(--ease); opacity: 0; transform: translateY(10px); filter: blur(6px); animation: chip 0.9s var(--ease) forwards; animation-delay: calc(1.15s + var(--i, 0) * 90ms); }
@keyframes chip { to { opacity: 1; transform: none; filter: blur(0); } }
.chip::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); border-radius: inherit; }
.chip:hover, .chip:focus-visible { color: var(--accent-ink); border-color: var(--accent); }
.chip:hover::before, .chip:focus-visible::before { transform: scaleX(1); }
.chip:active { transform: scale(0.97); }
.chip-arrow { width: 16px; height: 16px; opacity: 0.7; transition: transform 0.5s var(--ease), opacity 0.4s var(--ease); }
.chip:hover .chip-arrow { transform: translateX(3px); opacity: 1; }
.chip-ig { width: 19px; height: 19px; border-radius: 5px; }
.chip-social::before { transform-origin: right; }
.chip-social { padding-left: 0.85rem; }
/* The handle sits in the hero's bottom right corner */
.chip.band-ig { position: absolute; z-index: 1; right: max(var(--gutter), calc((100% - var(--wrap)) / 2)); bottom: 28px; margin: 0; background: var(--bg); border-color: rgba(108, 196, 255, 0.45); box-shadow: 0 10px 30px -14px rgba(108, 196, 255, 0.6); }

/* Sections */
section { padding-block: var(--section); position: relative; }
section > .wrap { position: relative; z-index: 1; }
.about-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.about-copy p { font-size: 1.1rem; color: var(--muted); }
.about-copy p:first-of-type { color: var(--ink); font-size: 1.28rem; line-height: 1.5; }
.photo { margin: 0; }
.photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border-radius: var(--r); border: 1px solid rgba(108, 196, 255, 0.3); background: var(--panel); box-shadow: 0 0 0 1px rgba(108, 196, 255, 0.1), 0 18px 50px -26px rgba(108, 196, 255, 0.55); transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease), border-color 0.5s var(--ease); }
.photo:hover img { transform: translateY(-5px); border-color: rgba(108, 196, 255, 0.7); box-shadow: 0 0 0 1px rgba(108, 196, 255, 0.28), 0 30px 70px -26px rgba(108, 196, 255, 0.8); }
.photo figcaption { font-size: 0.86rem; color: var(--faint); padding: 0.9rem 0.2rem 0; font-family: var(--display); }

.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.svc { padding: clamp(1.6rem, 3vw, 2.6rem); }
.svc p { color: var(--muted); margin: 0; }
/* Booking and Artist management each get a full-width row, with the photo on opposite sides */
.svc-booking, .svc-mgmt { grid-column: 1 / 4; padding: 0; display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(380px, 34vw, 460px); }
.svc-booking .card-body, .svc-mgmt .card-body { padding: clamp(1.8rem, 4vw, 3.5rem); display: flex; flex-direction: column; justify-content: center; }
.svc-booking h3, .svc-mgmt h3 { font-size: clamp(1.9rem, 3.2vw, 2.8rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.5em; }
.svc.svc-booking p, .svc.svc-mgmt p { font-size: clamp(1.05rem, 1.35vw, 1.18rem); max-width: 46ch; }
.svc-booking .card-media, .svc-mgmt .card-media { min-height: 280px; }
.svc-booking .card-media img { object-position: 50% 20%; }
.svc-booking .card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--panel), transparent 28%); pointer-events: none; }
.svc-mgmt { grid-template-columns: 1fr 1fr; }
.svc-mgmt .card-media { order: -1; }
.svc-mgmt .card-media img { object-position: 42% 40%; }
.svc-mgmt .card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, var(--panel), transparent 28%); pointer-events: none; }
.mini { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.8rem 1.6rem; }
.mini li { display: flex; align-items: center; gap: 0.55rem; font-family: var(--display); font-weight: 700; font-size: 1.02rem; }
.mini-ic { width: 26px; height: 26px; flex: none; color: var(--accent); }
/* Festivals, shows, events and gigs: the sentence, larger and centered, then four icon tiles */
.svc-events { grid-column: 1 / 4; }
.svc-events p { color: var(--ink); font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.4; text-align: center; text-wrap: balance; max-width: 34em; margin: clamp(1.8rem, 3.5vw, 3rem) auto clamp(1.4rem, 2.6vw, 2.2rem); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.tile { display: grid; gap: 1.5rem; padding: clamp(1.3rem, 2.2vw, 1.8rem); }
.tile span { position: relative; z-index: 1; font-family: var(--display); font-weight: 800; font-stretch: 92%; font-size: clamp(1.35rem, 2.2vw, 1.9rem); letter-spacing: -0.02em; line-height: 1; }
.tile-ic { position: relative; z-index: 1; width: clamp(38px, 3.6vw, 48px); height: clamp(38px, 3.6vw, 48px); color: var(--accent); transition: transform 0.7s var(--ease); }
@media (hover: hover) { .tile:hover .tile-ic { transform: translateY(-3px) scale(1.12) rotate(-5deg); } }
/* One at a time as the row arrives */
.has-tiles .tile { opacity: 0; }
.tiles-on .tile { animation: tile-rise 0.9s var(--ease) both; animation-delay: calc(0.2s + var(--c, 0) * 130ms); }
@keyframes tile-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.door { padding: 0; display: grid; grid-template-rows: 320px auto; }
.door .card-body { padding: clamp(1.8rem, 3.4vw, 3rem); display: flex; flex-direction: column; }
.door .card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--panel)); pointer-events: none; }
.door-musicians .card-media img { object-position: 50% 28%; }
.door-organizers .card-media img { object-position: 50% 16%; }
.door h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 0.6em; }
.door p { color: var(--muted); margin-bottom: 1.6rem; max-width: 48ch; }
.door .btn { align-self: flex-start; }

.artist { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 0; text-decoration: none; background: linear-gradient(160deg, var(--panel-2), var(--panel)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 30px 80px -40px rgba(0, 0, 0, 0.9); }
.artist-media { position: relative; min-height: 380px; overflow: hidden; }
.artist-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform 1.6s var(--ease); }
.artist:hover .artist-photo { transform: scale(1.04); }
.artist-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.8rem, 4vw, 3.5rem); gap: 1.8rem; }
.artist-top { display: grid; gap: 0.9rem; }
.artist-name { font-family: var(--display); font-weight: 800; font-stretch: 92%; font-size: clamp(2.4rem, 5vw, 4.6rem); letter-spacing: -0.03em; line-height: 0.96; }
.artist-line { color: var(--muted); max-width: 40ch; font-size: clamp(1.08rem, 1.4vw, 1.25rem); }
.artist-link { align-self: flex-start; }
.artist:hover .artist-link { background: rgba(255, 255, 255, 0.08); border-color: var(--ink); }
.artist-link svg { width: 20px; height: 20px; transition: transform 0.6s var(--ease); }
.artist:hover .artist-link svg { transform: translate(3px, -3px); }

.steps { list-style: none; margin: 0; padding: 0; position: relative; max-width: 760px; }
.steps::before { content: ""; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(180deg, transparent, var(--line-hi) 12%, var(--line-hi) 88%, transparent); }
.steps.has-rail::before { display: none; }
.rail { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.rail-base { fill: rgba(242, 243, 245, 0.2); }
.rail-on { fill: #ffffff; }
.rail-drop { fill: var(--accent); filter: drop-shadow(0 0 6px rgba(108, 196, 255, 0.95)); transition: opacity 0.4s var(--ease); }
.step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 1.6rem; padding: 1.4rem 0; align-items: start; }
.step-n { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 999px; background: var(--panel); border: 1px solid var(--line-hi); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 1.15rem; position: relative; z-index: 1; transition: background-color 0.6s var(--ease), color 0.6s var(--ease), border-color 0.6s var(--ease), box-shadow 0.8s var(--ease); }
.step-n::before, .step-n::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--accent); opacity: 0; pointer-events: none; }
.step.is-on .step-n { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 0 26px -4px rgba(108, 196, 255, 0.75); }
.step.is-on .step-n::before { animation: step-ring 1.5s var(--ease) forwards; }
.step.is-on .step-n::after { animation: step-ring 1.5s var(--ease) 0.28s forwards; }
@keyframes step-ring { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.8); } }
.step h3 { margin-bottom: 0.3em; }
.step p { color: var(--muted); margin: 0; }
.step div { padding-top: 0.75rem; }

/* Contact: the form on plain navy */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.contact-copy p { color: var(--muted); font-size: 1.15rem; }
.instagram { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); margin-top: 0.6rem; font-family: var(--display); font-weight: 600; }
.instagram svg { width: 22px; height: 22px; }
.instagram:hover { text-decoration: underline; }
.form { padding: clamp(1.6rem, 3vw, 2.4rem); display: grid; gap: 1.15rem; }
.roles { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.roles legend { font-family: var(--display); font-weight: 600; font-size: 0.95rem; margin-bottom: 0.7rem; }
.role { position: relative; }
.role input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.role span { display: inline-flex; min-height: 42px; align-items: center; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--muted); transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease); }
.role input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.role input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.field { display: grid; gap: 0.45rem; }
.field label { font-family: var(--display); font-weight: 600; font-size: 0.95rem; }
.field input, .field textarea { width: 100%; background: rgba(0, 7, 26, 0.55); border: 1px solid var(--line); border-radius: 14px; color: var(--ink); padding: 0.85rem 1rem; font: inherit; line-height: 1.4; transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease); }
.field textarea { resize: vertical; min-height: 130px; }
.field .opt { font-family: var(--body); font-weight: 400; color: var(--muted); }
.field input:hover, .field textarea:hover { border-color: rgba(242, 243, 245, 0.28); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: rgba(0, 7, 26, 0.7); }
.field.is-bad input, .field.is-bad textarea { border-color: var(--ink); }
.err { margin: 0; font-size: 0.9rem; color: var(--ink); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn-submit { justify-self: start; min-width: 190px; }
.btn-submit .btn-wait { display: none; }
.form.is-sending .btn-submit { pointer-events: none; opacity: 0.7; }
.form.is-sending .btn-label { display: none; }
.form.is-sending .btn-wait { display: inline; }
.form-note { margin: 0; color: var(--muted); font-size: 0.98rem; min-height: 1.4em; }
.form-note:empty { display: none; }
.form.is-sent .roles, .form.is-sent .field, .form.is-sent .btn-submit { display: none; }
.form.is-sent .form-note { color: var(--ink); font-size: 1.15rem; line-height: 1.5; }

.foot { padding: 3.5rem 0 3rem; border-top: 1px solid var(--line); position: relative; z-index: 1; background: linear-gradient(180deg, var(--panel), var(--deep)); }
.foot-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.foot-logo { height: 64px; width: auto; }
.foot-links { display: flex; gap: 1.6rem; }
.foot-links a { text-decoration: none; color: var(--muted); font-size: 0.95rem; }
.foot-links a:hover { color: var(--ink); }
.foot-copy { color: var(--faint); font-size: 0.9rem; }

/* Reveal: the glass settles. Blur to sharp, once. */
.focus { opacity: 0; filter: blur(12px); transform: translateY(26px); transition: opacity 1.1s var(--ease), filter 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); will-change: opacity, filter, transform; }
.focus.in { opacity: 1; filter: blur(0); transform: none; will-change: auto; }

/* Wavy edge: on every pill the drawn path replaces the border and flat background */
.wavy.btn, .wavy.btn:hover, .wavy.chip, .wavy.chip:hover, .wavy.chip.band-ig, .role .wavy { border: 0; background: none; overflow: visible; }
.wavy.btn { transition: transform 0.6s var(--ease), color 0.45s var(--ease); }
.role .wavy { position: relative; isolation: isolate; }
.wavy.chip::before, .wavy.btn-solid::after { display: none; }
.wavy > .chip-edge { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; z-index: -1; pointer-events: none; transform: none !important; transition: none; }
.chip-edge path { fill: rgba(0, 14, 41, 0.3); stroke: rgba(242, 243, 245, 0.32); stroke-width: 1; transition: fill 0.45s var(--ease), stroke 0.45s var(--ease); }
.chip-social > .chip-edge path { fill: var(--bg); stroke: rgba(108, 196, 255, 0.5); }
.btn-solid > .chip-edge path { fill: var(--accent); stroke: var(--accent); }
.btn-glass > .chip-edge path, .btn-line > .chip-edge path { fill: rgba(0, 14, 41, 0.35); stroke: rgba(242, 243, 245, 0.45); }
.role .chip-edge path { fill: rgba(255, 255, 255, 0.04); stroke: rgba(242, 243, 245, 0.2); }
.role input:checked + .wavy { background: none; border: 0; }
.role input:checked + .wavy > .chip-edge path { fill: var(--accent); stroke: var(--accent); }
.role input:focus-visible + .wavy { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 999px; }
/* At rest a plain thin outline. On hover the white brush line, like the logo's, fades in with the swell */
.chip-edge .edge-line { fill: #ffffff !important; stroke: none !important; opacity: 0; transition: opacity 0.45s var(--ease); }
.wavy.is-wave .edge-line, .artist.is-wave .edge-line, .role.is-wave .edge-line, .wavy:focus-visible .edge-line, .role input:focus-visible + .wavy .edge-line { opacity: 1; }
@media (hover: hover) { .wavy:hover .edge-line, .artist:hover .wavy .edge-line, .role:hover .wavy .edge-line { opacity: 1; } }
/* The swell's fill: secondary pills fill sky blue; sky blue pills keep their colour so the white line shows */
.chip.is-wave, .btn-glass.is-wave, .btn-line.is-wave, .wavy.chip:focus-visible, .wavy.btn-glass:focus-visible { color: var(--accent-ink); }
.chip.is-wave > .chip-edge path, .btn-glass.is-wave > .chip-edge path, .btn-line.is-wave > .chip-edge path, .wavy.chip:focus-visible > .chip-edge path, .wavy.btn-glass:focus-visible > .chip-edge path, .artist.is-wave .btn-line > .chip-edge path { fill: var(--accent); stroke: var(--accent); }
.artist.is-wave .btn-line { color: var(--accent-ink); }
.role.is-wave input:not(:checked) + .wavy > .chip-edge path { fill: rgba(108, 196, 255, 0.2); stroke: var(--accent); }
.role.is-wave input:not(:checked) + .wavy { color: var(--ink); }
@media (hover: hover) {
  .wavy.btn-glass:hover, .artist:hover .wavy.btn-line, .wavy.btn-line:hover { color: var(--accent-ink); }
  .chip:hover > .chip-edge path, .btn-glass:hover > .chip-edge path, .btn-line:hover > .chip-edge path, .artist:hover .btn-line > .chip-edge path { fill: var(--accent); stroke: var(--accent); }
  .role:hover input:not(:checked) + .wavy { color: var(--ink); }
  .role:hover input:not(:checked) + .wavy > .chip-edge path { fill: rgba(108, 196, 255, 0.2); stroke: var(--accent); }
}
@media (hover: none) { .wavy.chip:hover:not(.is-wave), .wavy.btn-glass:hover:not(.is-wave) { color: var(--ink); } }

/* Responsive */
@media (max-width: 1240px) {
  .hero-photo img { transform: translateX(24%) scale(1.32); }
  @keyframes push { to { transform: translateX(24%) scale(1.24); } }
}
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .menu-btn { display: block; }
  .pill { gap: 0.75rem; width: 100%; justify-content: space-between; }
  .sheet { display: grid; position: absolute; top: calc(var(--nav-h) + 4px); left: var(--gutter); right: var(--gutter); padding: 0.6rem; border-radius: var(--r); background: rgba(0, 14, 41, 0.9); border: 1px solid var(--line); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 30px 80px -30px rgba(0, 0, 0, 0.9); transform-origin: top; animation: sheet 0.6s var(--ease); pointer-events: auto; }
  .sheet[hidden] { display: none; }
  .sheet a { text-decoration: none; padding: 0.95rem 1.1rem; border-radius: 14px; font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
  .sheet a:hover { background: var(--glass-2); }
  @keyframes sheet { from { opacity: 0; transform: translateY(-8px) scale(0.98); filter: blur(8px); } }
  .band-inner { gap: 0.5rem; overflow-x: auto; scrollbar-width: none; padding-right: 1rem; }
  .band-inner::-webkit-scrollbar { display: none; }
}
@media (max-width: 900px) {
  .about-grid, .contact-grid, .doors { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .svc-booking, .svc-mgmt, .svc-events { grid-column: auto; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .svc-booking, .svc-mgmt { grid-template-columns: 1fr; min-height: 0; }
  .svc-booking .card-media, .svc-mgmt .card-media { order: -1; min-height: 300px; }
  .svc-booking .card-media::after, .svc-mgmt .card-media::after { background: linear-gradient(180deg, transparent 55%, var(--panel)); }
  .door { grid-template-rows: 280px auto; }
  .artist { grid-template-columns: 1fr; }
  .artist-media { min-height: 0; aspect-ratio: 4 / 3; }
  .artist-photo { object-position: 50% 15%; }
  .artist-body { gap: 1.4rem; }
  .photo img { aspect-ratio: 4 / 3.4; }
  .hero-photo { -webkit-mask-image: none; mask-image: none; }
  .hero-photo img { object-position: 60% 15%; transform: scale(1.08); animation-name: push-m; }
  .hero { align-items: end; }
  .hero-photo::after { background: linear-gradient(180deg, rgba(0, 14, 41, 0.3), rgba(0, 14, 41, 0) 28%, rgba(0, 14, 41, 0.72) 62%, var(--bg) 100%); }
}
@media (max-width: 560px) {
  .brand-logo { height: 34px; }
  .nav-cta { min-height: 38px; padding: 0 0.9rem; font-size: 0.9rem; }
  .hero { padding-bottom: 92px; }
  .hero-actions .btn { width: 100%; }
  .band-inner { flex-wrap: wrap; gap: 0.5rem; overflow: visible; padding: 0.8rem 0; }
  .chip { font-size: 0.88rem; min-height: 38px; padding: 0 0.9rem; }
  .chip.band-ig { bottom: 20px; }
  .steps::before { left: 21px; }
  .step { grid-template-columns: 44px 1fr; gap: 1rem; }
  .step-n { width: 44px; height: 44px; font-size: 1rem; }
  .step div { padding-top: 0.45rem; }
  .btn-submit { justify-self: stretch; }
}

/* Fallbacks */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pill, .sheet, .menu-btn, .band { background: rgba(0, 14, 41, 0.94); }
}
@media (prefers-reduced-transparency: reduce) {
  .pill, .sheet, .menu-btn, .band { background: rgba(0, 14, 41, 0.96); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-title .w, .hero-sub, .hero-actions, .hero-photo img, .sweep, .sheet, .chip, .band::before { animation: none; }
  .chip { opacity: 1; transform: none; filter: none; }
  .band::before { transform: none; }
  .hero-title .w { transform: none; opacity: 1; filter: none; }
  .hero-sub, .hero-actions { opacity: 1; filter: none; transform: none; }
  .hero-photo img { transform: translateX(21%) scale(1.18); }
  .hero-photo .water, .note { display: none; }
  .sweep { display: none; }
  .focus { opacity: 1; filter: none; transform: none; transition: none; }
  .btn, .card-media img, .artist-photo, .artist-link svg, .pane, .photo img { transition: none; }
  .pane:hover, .photo:hover img { transform: none; }
  .pane::before, .pane::after { display: none; }
  .tile-ic { transition: none; }
  .step-n, .rail-drop { transition: none; }
  .step-n::before, .step-n::after { animation: none !important; }
  .rail-drop { display: none; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .hero-photo img { transform: none; }
}