/*
Theme Name: Southsea Sound 2026
Theme URI: https://southseasound.co.uk/
Author: Southsea Sound
Description: Custom 2026 theme for Southsea Sound Recording & Rehearsal Studios, Portsmouth.
Version: 2.74.210
Text Domain: southseasound2026
*/

:root {
  --ss-ink: #10283a;
  --ss-ink-2: #173b52;
  --ss-sea: #2399bb;
  --ss-sky: #8fd2e5;
  --ss-foam: #f4f0e6;
  --ss-paper: #fffdf7;
  --ss-line: rgba(16, 40, 58, .18);
  --ss-max: 1440px;
  --ss-pad: clamp(20px, 4vw, 64px);
  --ss-radius: 0px;
  --ss-shadow: 0 24px 70px rgba(16, 40, 58, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ss-foam);
  color: var(--ss-ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, textarea, select { font: inherit; }
::selection { background: var(--ss-sky); color: var(--ss-ink); }

.ss-wrap { width: min(calc(100% - (var(--ss-pad) * 2)), var(--ss-max)); margin-inline: auto; }
.ss-section { padding: clamp(72px, 10vw, 150px) 0; position: relative; overflow: clip; }
.ss-eyebrow {
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: 12px;
  font-weight: 800;
}
.ss-display {
  margin: 0;
  font-size: clamp(58px, 10vw, 168px);
  line-height: .82;
  letter-spacing: -.065em;
  font-weight: 900;
  text-transform: uppercase;
}
.ss-heading {
  margin: 0;
  font-size: clamp(42px, 6vw, 94px);
  line-height: .9;
  letter-spacing: -.05em;
  font-weight: 900;
}
.ss-copy { max-width: 720px; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.45; }
.ss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 14px 22px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-ink);
  color: var(--ss-foam);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 800;
  font-size: 13px;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.ss-btn:hover, .ss-btn:focus-visible { transform: translateY(-2px); background: var(--ss-sea); color: var(--ss-ink); }
.ss-btn--ghost { background: transparent; color: var(--ss-ink); }
.ss-btn--ghost:hover, .ss-btn--ghost:focus-visible { background: var(--ss-ink); color: var(--ss-foam); }
.ss-arrow { font-size: 1.4em; line-height: 1; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 240, 230, .94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ss-line);
}
.admin-bar .site-header { top: 32px; }
.ss-header-inner {
  min-height: 96px;
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: center;
  gap: clamp(24px, 3vw, 54px);
}
.ss-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}
.ss-brand-logo {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 50%;
  transition: transform .25s ease;
}
.ss-brand:hover .ss-brand-logo { transform: rotate(-3deg) scale(1.025); }
.site-nav { justify-self: end; }
.site-nav ul { list-style: none; display: flex; align-items: center; justify-content: center; gap: clamp(15px, 1.6vw, 28px); margin: 0; padding: 0; }
.site-nav a { text-decoration: none; text-transform: uppercase; letter-spacing: .075em; font-size: 11px; font-weight: 850; position: relative; white-space: nowrap; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: var(--ss-sea); transition: right .2s ease; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { right: 0; }
.ss-menu-toggle { display: none; border: 0; background: none; padding: 10px; font-weight: 900; color: var(--ss-ink); }

.ss-hero {
  min-height: min(940px, calc(100svh - 96px));
  display: grid;
  align-items: stretch;
  background: var(--ss-foam);
  border-bottom: 1px solid var(--ss-line);
}
.ss-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  min-height: inherit;
}
.ss-hero-copy {
  padding: clamp(64px, 8vw, 120px) var(--ss-pad) clamp(70px, 8vw, 110px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.ss-hero-copy::after { content: none; }

.ss-hero-logo {
  width: clamp(220px, 25vw, 380px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  align-self: center;
  margin: 0 auto clamp(22px, 3vw, 38px);
  box-shadow: 0 20px 55px rgba(16, 40, 58, .14);
}

.ss-hero-title {
  margin: 0;
  font-size: clamp(58px, 7.8vw, 126px);
  line-height: .82;
  letter-spacing: -.06em;
  text-transform: uppercase;
  font-weight: 900;
  max-width: 760px;
}
.ss-hero-title span {
  color: var(--ss-sea);
  display: block;
}
.ss-hero-sub {
  max-width: 620px;
  margin: 32px 0;
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1.35;
}
.ss-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ss-hero-image {
  min-height: 560px;
  position: relative;
  overflow: hidden;
  background: var(--ss-ink);
}
.ss-hero-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.04); }
.ss-hero-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(16, 40, 58, .35));
  pointer-events: none;
}
.ss-stamp {
  position: absolute;
  right: clamp(18px, 3vw, 45px);
  bottom: clamp(18px, 3vw, 45px);
  width: clamp(120px, 12vw, 190px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ss-sky);
  color: var(--ss-ink);
  display: grid;
  place-items: center;
  text-align: center;
  z-index: 2;
  padding: 22px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-weight: 900;
  transform: rotate(-8deg);
  border: 2px solid var(--ss-ink);
}

.ss-wave {
  height: 110px;
  background: var(--ss-ink);
  overflow: hidden;
  position: relative;
}
.ss-wave svg { width: 110%; height: 100%; position: absolute; left: -5%; top: 0; }

.ss-choice { background: var(--ss-ink); color: var(--ss-foam); }
.ss-choice-head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 40px; margin-bottom: clamp(50px, 6vw, 90px); }
.ss-choice-head p { margin: 0 0 10px; max-width: 560px; justify-self: end; color: rgba(244,240,230,.8); }
.ss-service-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(244,240,230,.26); }
.ss-service-card { min-height: 520px; padding: clamp(32px, 5vw, 70px); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; }
.ss-service-card + .ss-service-card { border-left: 1px solid rgba(244,240,230,.26); }
.ss-service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(35,153,187,.18), transparent 60%);
  opacity: 0;
  transition: opacity .25s ease;
}
.ss-service-card:hover::before { opacity: 1; }
.ss-service-num { font-size: 12px; letter-spacing: .18em; font-weight: 800; opacity: .65; }
.ss-service-title { font-size: clamp(54px, 7vw, 110px); line-height: .84; letter-spacing: -.055em; margin: 0; text-transform: uppercase; }
.ss-service-foot { display: flex; align-items: end; justify-content: space-between; gap: 20px; position: relative; z-index: 1; }
.ss-service-foot p { max-width: 420px; margin: 0; color: rgba(244,240,230,.78); }
.ss-service-go { width: 64px; height: 64px; border: 2px solid var(--ss-foam); border-radius: 50%; display: grid; place-items: center; font-size: 30px; flex: 0 0 auto; }

.ss-manifesto { background: var(--ss-sky); color: var(--ss-ink); }
.ss-manifesto-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(50px, 8vw, 140px); align-items: end; }
.ss-manifesto blockquote { margin: 0; font-size: clamp(44px, 6.5vw, 104px); line-height: .93; letter-spacing: -.055em; font-weight: 900; }
.ss-manifesto-copy { max-width: 520px; }
.ss-manifesto-copy p:first-child { font-size: 22px; }

.ss-photo-strip { display: grid; grid-template-columns: 1.2fr .8fr; min-height: 680px; background: var(--ss-paper); }
.ss-photo-strip figure { margin: 0; min-height: 520px; }
.ss-photo-strip figure img { width: 100%; height: 100%; object-fit: cover; }
.ss-photo-copy { padding: clamp(50px, 7vw, 110px); display: flex; flex-direction: column; justify-content: center; }
.ss-photo-copy .ss-heading { font-size: clamp(45px, 5vw, 80px); }
.ss-photo-copy p { max-width: 570px; }

.ss-work { background: var(--ss-foam); }
.ss-work-top { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 30px; margin-bottom: 50px; }
.ss-work-list { border-top: 2px solid var(--ss-ink); }
.ss-work-row { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 30px; min-height: 102px; border-bottom: 1px solid var(--ss-line); text-decoration: none; }
.ss-work-row:hover .ss-work-name { transform: translateX(8px); color: var(--ss-sea); }
.ss-work-no { font-size: 12px; letter-spacing: .14em; opacity: .55; }
.ss-work-name { font-size: clamp(27px, 3vw, 50px); font-weight: 850; letter-spacing: -.03em; transition: transform .2s ease, color .2s ease; }
.ss-work-type { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; opacity: .65; }

.ss-latest { background: var(--ss-paper); }
.ss-latest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(55px, 8vw, 130px); }
.ss-list-head { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; padding-bottom: 16px; border-bottom: 2px solid var(--ss-ink); margin-bottom: 12px; }
.ss-list-head h2 { margin: 0; font-size: clamp(36px, 4vw, 64px); letter-spacing: -.04em; }
.ss-list-head a { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.ss-post-card { padding: 23px 0; border-bottom: 1px solid var(--ss-line); }
.ss-post-card a { text-decoration: none; }
.ss-post-meta { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; opacity: .6; margin-bottom: 8px; }
.ss-post-title { font-size: clamp(22px, 2vw, 34px); line-height: 1.05; letter-spacing: -.025em; font-weight: 800; }

.site-footer { background: var(--ss-ink); color: var(--ss-foam); overflow: hidden; }
.ss-footer-main { padding: clamp(70px, 9vw, 130px) 0 50px; }
.ss-footer-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 60px; }
.ss-footer-title { font-size: clamp(56px, 8vw, 130px); line-height: .84; letter-spacing: -.06em; text-transform: uppercase; margin: 0 0 36px; }
.ss-footer-title span { color: var(--ss-sea); }
.ss-footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-content: start; padding-top: 10px; }
.ss-footer-links ul { list-style: none; margin: 0; padding: 0; }
.ss-footer-links li { margin: 0 0 10px; }
.ss-footer-links a { text-decoration: none; }
.ss-footer-links a:hover { color: var(--ss-sky); }
.ss-footer-bottom { display: flex; justify-content: space-between; gap: 30px; padding: 24px 0; border-top: 1px solid rgba(244,240,230,.22); font-size: 11px; text-transform: uppercase; letter-spacing: .11em; color: rgba(244,240,230,.65); }

.ss-page-hero { padding: clamp(80px, 10vw, 150px) 0 clamp(50px, 7vw, 90px); border-bottom: 1px solid var(--ss-line); }
.ss-page-title { font-size: clamp(54px, 9vw, 144px); line-height: .85; letter-spacing: -.06em; text-transform: uppercase; margin: 0; }
.ss-content { padding: clamp(55px, 8vw, 110px) 0; }
.ss-content > * { max-width: 900px; margin-left: auto; margin-right: auto; }
.ss-content > .alignwide { max-width: 1200px; }
.ss-content > .alignfull { max-width: none; }
.ss-content h2 { font-size: clamp(38px, 5vw, 70px); letter-spacing: -.04em; line-height: .95; }
.ss-content h3 { font-size: clamp(28px, 3vw, 44px); letter-spacing: -.03em; }
.ss-content p, .ss-content li { font-size: clamp(17px, 1.5vw, 21px); }
.ss-content a { color: var(--ss-sea); }
.ss-content img { margin-top: 36px; margin-bottom: 36px; }

.ss-reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; }
.ss-reveal.is-visible { opacity: 1; transform: none; }


.ss-footer-logo {
  width: clamp(118px, 11vw, 176px);
  height: auto;
  margin: 0 0 34px;
}
.ss-btn--light {
  border-color: var(--ss-foam);
  color: var(--ss-foam);
}
.ss-btn--light:hover,
.ss-btn--light:focus-visible {
  background: var(--ss-foam);
  color: var(--ss-ink);
}

@media (max-width: 1050px) {
  .ss-header-inner { grid-template-columns: auto auto; justify-content: space-between; min-height: 84px; }
  .ss-brand-logo { width: 66px; height: 66px; }
  .site-nav { position: fixed; inset: 84px 0 auto; background: var(--ss-foam); border-bottom: 1px solid var(--ss-line); padding: 25px var(--ss-pad) 35px; display: none; }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: flex-start; gap: 22px; }
  .site-nav a { font-size: 18px; }
  .ss-menu-toggle { display: block; }
  .ss-header-cta { display: none; }
  .ss-hero-grid { grid-template-columns: 1fr; }
  .ss-hero-image { min-height: 56vw; max-height: 700px; }
  .ss-choice-head, .ss-manifesto-grid, .ss-latest-grid, .ss-footer-grid { grid-template-columns: 1fr; }
  .ss-choice-head p { justify-self: start; }
  .ss-photo-strip { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .admin-bar .site-header { top: 46px; }
  .ss-brand-logo { width: 58px; height: 58px; }
  .ss-service-grid { grid-template-columns: 1fr; }
  .ss-service-card { min-height: 430px; }
  .ss-service-card + .ss-service-card { border-left: 0; border-top: 1px solid rgba(244,240,230,.26); }
  .ss-photo-strip figure { min-height: 440px; }
  .ss-work-row { grid-template-columns: 42px 1fr; gap: 14px; padding: 18px 0; }
  .ss-work-type { grid-column: 2; }
  .ss-footer-links { grid-template-columns: 1fr; }
  .ss-footer-bottom { flex-direction: column; }
}

.ss-stamp { display:none !important; }

.ss-home-links {
  background: var(--ss-sky);
  color: var(--ss-ink);
}
.ss-home-links-grid {
  margin-top: clamp(34px, 5vw, 66px);
  border-top: 2px solid var(--ss-ink);
}
.ss-home-link-card {
  min-height: 170px;
  display: grid;
  grid-template-columns: 62px 1fr 70px;
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
  padding: 26px 0;
  border-bottom: 1px solid rgba(16,40,58,.32);
  text-decoration: none;
}
.ss-home-link-card h2 {
  margin: 0 0 5px;
  font-size: clamp(42px, 5vw, 76px);
  line-height: .9;
  letter-spacing: -.05em;
  text-transform: uppercase;
}
.ss-home-link-card p {
  margin: 0;
  max-width: 650px;
}
.ss-home-link-no {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .15em;
  opacity: .55;
}
.ss-home-link-arrow {
  width: 58px;
  height: 58px;
  border: 2px solid var(--ss-ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 27px;
  transition: transform .2s ease, background .2s ease;
}
.ss-home-link-card:hover .ss-home-link-arrow {
  transform: rotate(8deg) scale(1.06);
  background: var(--ss-ink);
  color: var(--ss-foam);
}
.ss-latest--blog {
  background: var(--ss-paper);
}
.ss-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 58px);
}
.ss-blog-grid .ss-post-card {
  border-top: 1px solid var(--ss-line);
}

@media (max-width: 800px) {
  .ss-hero-logo {
    width: clamp(210px, 62vw, 310px);
  }
  .ss-home-link-card {
    grid-template-columns: 40px 1fr 52px;
  }
  .ss-home-link-arrow {
    width: 46px;
    height: 46px;
    font-size: 22px;
  }
  .ss-blog-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1051px) {
  .ss-hero-copy {
    padding-top: clamp(54px, 6vw, 88px);
  }
}


/* v0.5 hero logo experiment: keep the bold off-left feel, but push it right
   and let it overlap toward the image divide slightly. */
@media (min-width: 1051px) {
  .ss-hero-copy {
    position: relative;
    padding-top: clamp(260px, 28vw, 360px);
  }

  .ss-hero-logo {
    position: absolute;
    top: clamp(54px, 5vw, 82px);
    left: clamp(26px, 3vw, 54px);
    width: clamp(240px, 24vw, 360px);
    margin: 0;
    transform: translateX(clamp(42px, 5vw, 92px));
    z-index: 3;
  }
}


/* v0.6 — force a genuine desktop overlap across the cream/photo divide. */
@media (min-width: 1051px) {
  .ss-hero-copy {
    position: relative;
    overflow: visible;
    z-index: 3;
    padding-top: clamp(315px, 29vw, 390px);
  }

  .ss-hero-logo {
    position: absolute;
    top: clamp(48px, 5vw, 78px);
    left: auto;
    right: -96px;
    width: clamp(245px, 22vw, 340px);
    margin: 0;
    transform: rotate(-2deg);
    z-index: 8;
  }

  .ss-hero-image {
    position: relative;
    z-index: 1;
  }
}

@media (min-width: 1051px) and (max-width: 1280px) {
  .ss-hero-logo {
    right: -64px;
    width: clamp(235px, 23vw, 315px);
  }

  .ss-hero-copy {
    padding-top: 310px;
  }
}

@media (max-width: 1050px) {
  .ss-hero-logo {
    position: static;
    width: clamp(210px, 58vw, 310px);
    transform: none;
    margin: 0 0 28px;
    align-self: flex-start;
  }
}


/* v0.7 — restore strong left alignment and reveal the small header logo on scroll. */

/* Header contents use the same viewport padding/alignment line as the hero text. */
.ss-header-inner {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--ss-pad);
}

/* Homepage: hide the small logo at the very top, then reveal it after scrolling. */
.home .site-header .ss-brand {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .38s ease, transform .38s ease;
}

.home .site-header.is-scrolled .ss-brand {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Inner pages keep the small header logo visible. */
body:not(.home) .site-header .ss-brand {
  opacity: 1;
  transform: none;
}

/* Desktop hero: large logo returns to the same left edge as the headline. */
@media (min-width: 1051px) {
  .ss-hero-copy {
    position: relative;
    overflow: visible;
    z-index: 3;
    padding-top: clamp(54px, 6vw, 88px);
  }

  .ss-hero-logo {
    position: static;
    width: clamp(235px, 23vw, 350px);
    margin: 0 0 clamp(24px, 3vw, 40px);
    transform: none;
    align-self: flex-start;
    z-index: auto;
  }

  .ss-hero-image {
    position: relative;
    z-index: 1;
  }
}

/* Tablet/mobile stays clean and left aligned. */
@media (max-width: 1050px) {
  .ss-hero-logo {
    position: static;
    width: clamp(210px, 58vw, 310px);
    transform: none;
    margin: 0 0 28px;
    align-self: flex-start;
  }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .home .site-header .ss-brand {
    transition: none;
    transform: none;
  }
}


/* v0.8 — three primary homepage routes: Rehearse / Record / Events. */
.ss-service-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ss-service-grid--three .ss-service-card {
  min-height: 500px;
  padding: clamp(28px, 3.5vw, 54px);
}

.ss-service-grid--three .ss-service-title {
  font-size: clamp(46px, 5.4vw, 82px);
}

.ss-service-grid--three .ss-service-card + .ss-service-card {
  border-left: 1px solid rgba(244,240,230,.26);
}

.ss-home-links-grid {
  max-width: 1100px;
}

@media (max-width: 1050px) {
  .ss-service-grid--three {
    grid-template-columns: 1fr;
  }

  .ss-service-grid--three .ss-service-card {
    min-height: 390px;
  }

  .ss-service-grid--three .ss-service-card + .ss-service-card {
    border-left: 0;
    border-top: 1px solid rgba(244,240,230,.26);
  }
}


/* v1.0 — consistent button interaction.
   All standard buttons use the Southsea blue hover/focus state. */
.ss-btn:hover,
.ss-btn:focus-visible,
.ss-btn--ghost:hover,
.ss-btn--ghost:focus-visible,
.ss-btn--light:hover,
.ss-btn--light:focus-visible {
  background: var(--ss-sea);
  border-color: var(--ss-sea);
  color: var(--ss-ink);
}


/* ==========================================================
   RECORD PAGE — /recording-premium/
   ========================================================== */

.ss-record-hero {
  background: var(--ss-foam);
  border-bottom: 1px solid var(--ss-line);
}
.ss-record-hero-grid {
  min-height: min(860px, calc(100svh - 96px));
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr);
}
.ss-record-hero-copy {
  padding: clamp(78px, 9vw, 135px) var(--ss-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ss-record-title {
  margin: 0;
  max-width: 850px;
  font-size: clamp(58px, 7.7vw, 126px);
  line-height: .84;
  letter-spacing: -.062em;
  text-transform: uppercase;
  font-weight: 900;
}
.ss-record-title span {
  color: var(--ss-sea);
}
.ss-record-intro {
  max-width: 660px;
  margin: 32px 0;
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1.38;
}
.ss-record-hero-image {
  margin: 0;
  min-height: 590px;
  position: relative;
  overflow: hidden;
  background: var(--ss-ink);
}
.ss-record-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ss-record-hero-image figcaption {
  position: absolute;
  right: 24px;
  bottom: 22px;
  padding: 7px 10px;
  background: var(--ss-foam);
  color: var(--ss-ink);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.ss-record-strip {
  overflow: hidden;
  background: var(--ss-sea);
  color: var(--ss-ink);
  border-bottom: 2px solid var(--ss-ink);
}
.ss-record-strip div {
  width: max-content;
  min-width: 100%;
  padding: 19px var(--ss-pad);
  text-align: center;
  font-size: clamp(17px, 2vw, 27px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ss-record-strip span {
  display: inline-block;
  margin: 0 clamp(12px, 2vw, 30px);
}

.ss-record-approach {
  background: var(--ss-paper);
}
.ss-record-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(350px, .95fr);
  gap: clamp(50px, 9vw, 150px);
  align-items: start;
}
.ss-record-prose {
  max-width: 660px;
  padding-top: 8px;
}
.ss-record-prose p {
  font-size: clamp(17px, 1.45vw, 21px);
}
.ss-record-lead {
  margin-top: 0;
  font-size: clamp(24px, 2.4vw, 36px) !important;
  line-height: 1.15;
  letter-spacing: -.025em;
  font-weight: 800;
}
.ss-text-link {
  display: inline-block;
  margin-top: 16px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
}

.ss-record-console {
  height: min(78vw, 820px);
  min-height: 520px;
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--ss-ink);
}
.ss-record-console img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ss-record-console::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(16,40,58,.72));
}
.ss-record-console-label {
  position: absolute;
  left: var(--ss-pad);
  bottom: clamp(35px, 6vw, 80px);
  z-index: 2;
  color: var(--ss-foam);
}
.ss-record-console-label span {
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: 11px;
  font-weight: 800;
}
.ss-record-console-label strong {
  display: block;
  font-size: clamp(44px, 7vw, 110px);
  line-height: .9;
  letter-spacing: -.05em;
}

.ss-record-rates {
  background: var(--ss-sky);
}
.ss-record-rates-head {
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: clamp(45px, 8vw, 120px);
  align-items: end;
  margin-bottom: clamp(44px, 6vw, 78px);
}
.ss-record-rates-head > p {
  margin: 0 0 8px;
}
.ss-rate-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--ss-ink);
  border-bottom: 2px solid var(--ss-ink);
}
.ss-rate-card {
  min-height: 290px;
  padding: clamp(27px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ss-rate-card + .ss-rate-card {
  border-left: 1px solid rgba(16,40,58,.32);
}
.ss-rate-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-weight: 850;
}
.ss-rate-price {
  display: block;
  font-size: clamp(70px, 8vw, 125px);
  line-height: .8;
  letter-spacing: -.07em;
}
.ss-rate-time {
  font-size: 16px;
}
.ss-record-price-detail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 36px 0 42px;
  border-bottom: 1px solid rgba(16,40,58,.32);
}
.ss-record-price-detail > div {
  padding: 5px clamp(20px, 3vw, 38px) 32px 0;
}
.ss-record-price-detail > div + div {
  padding-left: clamp(20px, 3vw, 38px);
  border-left: 1px solid rgba(16,40,58,.32);
}
.ss-record-price-detail strong {
  display: block;
  margin-top: 13px;
  font-size: clamp(27px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -.035em;
}
.ss-record-price-detail p {
  margin-bottom: 0;
}

.ss-record-gear {
  background: var(--ss-ink);
  color: var(--ss-foam);
}
.ss-record-gear-head {
  margin-bottom: 42px;
}
.ss-gear-list {
  border-top: 1px solid rgba(244,240,230,.3);
  margin-bottom: 42px;
}
.ss-gear-list > div {
  min-height: 104px;
  display: grid;
  grid-template-columns: minmax(110px, .28fr) 1fr;
  align-items: center;
  gap: 30px;
  border-bottom: 1px solid rgba(244,240,230,.22);
}
.ss-gear-list span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  opacity: .58;
}
.ss-gear-list strong {
  font-size: clamp(27px, 4vw, 62px);
  line-height: .95;
  letter-spacing: -.04em;
}

.ss-record-southsea {
  background: var(--ss-foam);
}
.ss-record-cta {
  background: var(--ss-sea);
  color: var(--ss-ink);
}
.ss-record-cta-title {
  margin: 0 0 28px;
  font-size: clamp(64px, 10vw, 160px);
  line-height: .82;
  letter-spacing: -.065em;
  text-transform: uppercase;
}
.ss-record-cta .ss-copy {
  margin-bottom: 35px;
}

@media (max-width: 1050px) {
  .ss-record-hero-grid,
  .ss-record-two-col,
  .ss-record-rates-head {
    grid-template-columns: 1fr;
  }

  .ss-record-hero-image {
    min-height: 58vw;
  }

  .ss-record-rates-head {
    gap: 28px;
  }

  .ss-rate-grid {
    grid-template-columns: 1fr;
  }

  .ss-rate-card {
    min-height: 220px;
  }

  .ss-rate-card + .ss-rate-card {
    border-left: 0;
    border-top: 1px solid rgba(16,40,58,.32);
  }

  .ss-record-price-detail {
    grid-template-columns: 1fr;
  }

  .ss-record-price-detail > div,
  .ss-record-price-detail > div + div {
    padding: 24px 0;
    border-left: 0;
    border-top: 1px solid rgba(16,40,58,.32);
  }
}

@media (max-width: 700px) {
  .ss-record-console {
    min-height: 480px;
    height: 72vh;
  }

  .ss-record-strip div {
    text-align: left;
  }

  .ss-gear-list > div {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 24px 0;
  }
}


/* v1.2 — expandable category-led equipment treatment. */
.ss-record-gear-head .ss-copy {
  margin-top: 24px;
  color: rgba(244,240,230,.72);
}

.ss-gear-accordion {
  margin: clamp(44px, 6vw, 78px) 0 42px;
  border-top: 2px solid var(--ss-foam);
}

.ss-gear-group {
  border-bottom: 1px solid rgba(244,240,230,.25);
}

.ss-gear-group summary {
  min-height: clamp(112px, 10vw, 160px);
  display: grid;
  grid-template-columns: 64px 1fr 72px;
  align-items: center;
  gap: clamp(14px, 2.5vw, 34px);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.ss-gear-group summary::-webkit-details-marker {
  display: none;
}

.ss-gear-group summary > span {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .16em;
  opacity: .46;
}

.ss-gear-group summary strong {
  font-size: clamp(42px, 6vw, 92px);
  line-height: .88;
  letter-spacing: -.05em;
  text-transform: uppercase;
  transition: color .2s ease, transform .2s ease;
}

.ss-gear-group summary i {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  justify-self: end;
  border: 2px solid var(--ss-foam);
  border-radius: 50%;
  font-style: normal;
  font-size: 30px;
  line-height: 1;
  transition: transform .25s ease, background .2s ease, color .2s ease;
}

.ss-gear-group summary:hover strong,
.ss-gear-group summary:focus-visible strong {
  color: var(--ss-sky);
  transform: translateX(8px);
}

.ss-gear-group summary:hover i,
.ss-gear-group summary:focus-visible i {
  background: var(--ss-sea);
  border-color: var(--ss-sea);
  color: var(--ss-ink);
}

.ss-gear-group[open] summary i {
  transform: rotate(45deg);
  background: var(--ss-sea);
  border-color: var(--ss-sea);
  color: var(--ss-ink);
}

.ss-gear-panel {
  padding: 0 72px clamp(38px, 5vw, 66px) 64px;
}

.ss-gear-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: clamp(30px, 6vw, 90px);
}

.ss-gear-panel li {
  break-inside: avoid;
  padding: 12px 0;
  border-bottom: 1px solid rgba(244,240,230,.12);
  font-size: clamp(16px, 1.4vw, 20px);
  color: rgba(244,240,230,.82);
}

@media (max-width: 700px) {
  .ss-gear-group summary {
    grid-template-columns: 34px 1fr 46px;
    min-height: 100px;
  }

  .ss-gear-group summary strong {
    font-size: clamp(34px, 11vw, 54px);
  }

  .ss-gear-group summary i {
    width: 42px;
    height: 42px;
    font-size: 23px;
  }

  .ss-gear-panel {
    padding: 0 0 36px 34px;
  }

  .ss-gear-panel ul {
    columns: 1;
  }
}


/* ==========================================================
   v1.3 — smoother, quieter equipment accordion
   ========================================================== */

.ss-gear-group summary {
  min-height: clamp(88px, 7vw, 118px);
}

.ss-gear-group summary strong {
  font-size: clamp(30px, 4vw, 58px);
  line-height: .95;
  letter-spacing: -.035em;
}

.ss-gear-panel {
  height: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  transition:
    height .42s cubic-bezier(.22, .61, .36, 1),
    opacity .28s ease;
}

.ss-gear-group.is-opening .ss-gear-panel,
.ss-gear-group[open] .ss-gear-panel {
  opacity: 1;
}

.ss-gear-panel-inner {
  padding: 4px 72px clamp(34px, 4vw, 52px) 64px;
}

@media (max-width: 700px) {
  .ss-gear-group summary {
    min-height: 82px;
  }

  .ss-gear-group summary strong {
    font-size: clamp(27px, 8vw, 40px);
  }

  .ss-gear-panel-inner {
    padding: 0 0 30px 34px;
  }
}


/* ==========================================================
   v1.4 — quieter category labels + cream expanded panels
   ========================================================== */

.ss-gear-group summary strong {
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1;
  letter-spacing: -.025em;
}

.ss-gear-group summary {
  min-height: clamp(74px, 6vw, 96px);
}

.ss-gear-panel-inner {
  margin: 0 calc(var(--ss-pad) * -1);
  padding: clamp(26px, 3.5vw, 44px) var(--ss-pad) clamp(30px, 4vw, 52px);
  background: var(--ss-foam);
  color: var(--ss-ink);
}

.ss-gear-panel li {
  color: var(--ss-ink);
  border-bottom: 1px solid rgba(16,40,58,.14);
}

.ss-gear-group[open] summary {
  border-bottom: 0;
}

.ss-gear-group[open] summary strong {
  color: var(--ss-sky);
}

@media (max-width: 700px) {
  .ss-gear-group summary strong {
    font-size: clamp(22px, 6.5vw, 32px);
  }

  .ss-gear-group summary {
    min-height: 70px;
  }

  .ss-gear-panel-inner {
    margin: 0 calc(var(--ss-pad) * -1);
    padding: 24px var(--ss-pad) 30px;
  }
}


/* ==========================================================
   EVENTS
   ========================================================== */

.ss-events-hero {
  padding: clamp(92px, 11vw, 165px) 0 clamp(65px, 8vw, 105px);
  background: var(--ss-foam);
  overflow: hidden;
}
.ss-events-title {
  margin: 0;
  font-size: clamp(90px, 16vw, 245px);
  line-height: .72;
  letter-spacing: -.075em;
  font-weight: 900;
  text-transform: uppercase;
}
.ss-events-title span {
  color: var(--ss-sea);
}
.ss-events-intro {
  max-width: 650px;
  margin: clamp(35px, 5vw, 62px) 0 0;
  font-size: clamp(20px, 2vw, 29px);
  line-height: 1.3;
}

.ss-events-strip {
  overflow: hidden;
  background: var(--ss-ink);
  color: var(--ss-sky);
}
.ss-events-strip > div {
  width: max-content;
  min-width: 100%;
  padding: 17px var(--ss-pad);
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(15px, 1.7vw, 22px);
  font-weight: 900;
  letter-spacing: .105em;
}
.ss-events-strip span {
  margin: 0 clamp(12px, 2vw, 30px);
  color: var(--ss-foam);
}

.ss-events-listing {
  background: var(--ss-paper);
}
.ss-event-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(48px, 7vw, 100px) clamp(28px, 5vw, 70px);
}
.ss-event-card {
  min-width: 0;
}
.ss-event-card--lead {
  grid-column: 1 / -1;
}
.ss-event-card-link {
  display: grid;
  grid-template-columns: 1fr;
  text-decoration: none;
}
.ss-event-card--lead .ss-event-card-link {
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
  gap: clamp(35px, 6vw, 90px);
  align-items: center;
}
.ss-event-art {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  background: var(--ss-sea);
  border: 2px solid var(--ss-ink);
}
.ss-event-card:not(.ss-event-card--lead) .ss-event-art {
  aspect-ratio: 1 / 1;
}
.ss-event-art img,
.ss-event-single-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.ss-event-card-link:hover .ss-event-art img {
  transform: scale(1.025);
}
.ss-event-art-fallback {
  width: 100%;
  height: 100%;
  min-height: 340px;
  display: grid;
  place-items: center;
  padding: 35px;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 14px, rgba(16,40,58,.17) 15px 17px),
    var(--ss-sky);
  color: var(--ss-ink);
}
.ss-event-art-fallback span {
  font-size: clamp(50px, 8vw, 120px);
  line-height: .78;
  letter-spacing: -.06em;
  text-transform: uppercase;
  font-weight: 900;
}
.ss-event-no {
  position: absolute;
  left: 18px;
  top: 18px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ss-foam);
  color: var(--ss-ink);
  font-size: 11px;
  font-weight: 900;
}
.ss-event-card-copy {
  padding-top: 24px;
}
.ss-event-card--lead .ss-event-card-copy {
  padding-top: 0;
}
.ss-event-meta {
  display: flex;
  gap: 14px;
  margin-bottom: 13px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 850;
  opacity: .62;
}
.ss-event-card-copy h2 {
  margin: 0;
  font-size: clamp(37px, 5vw, 78px);
  line-height: .88;
  letter-spacing: -.05em;
  text-transform: uppercase;
}
.ss-event-card:not(.ss-event-card--lead) .ss-event-card-copy h2 {
  font-size: clamp(30px, 3.6vw, 54px);
}
.ss-event-card-copy p {
  max-width: 590px;
}
.ss-event-more {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 11px;
  font-weight: 850;
}
.ss-event-more b {
  font-size: 18px;
}
.ss-event-card-link:hover .ss-event-more,
.ss-event-card-link:focus-visible .ss-event-more {
  color: var(--ss-sea);
}

.ss-events-empty h2 {
  margin: 0;
  font-size: clamp(70px, 12vw, 180px);
  line-height: .78;
  letter-spacing: -.065em;
  text-transform: uppercase;
}
.ss-events-empty p:last-child {
  max-width: 570px;
  font-size: 20px;
}
.ss-events-follow {
  background: var(--ss-sky);
}

/* Individual event */
.ss-event-single-hero {
  padding: clamp(70px, 9vw, 130px) 0;
  background: var(--ss-foam);
}
.ss-event-single-grid {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(440px,1.1fr);
  gap: clamp(45px, 8vw, 120px);
  align-items: center;
}
.ss-event-single-copy h1 {
  margin: 18px 0 36px;
  font-size: clamp(55px, 7.8vw, 125px);
  line-height: .84;
  letter-spacing: -.06em;
  text-transform: uppercase;
}
.ss-event-single-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 850;
}
.ss-event-single-art {
  width: min(100%, 460px);
  aspect-ratio: 1/1;
  justify-self: end;
  overflow: hidden;
  border: 2px solid var(--ss-ink);
  background: var(--ss-sky);
}
.ss-event-single-content {
  padding-top: clamp(60px, 8vw, 110px);
  padding-bottom: clamp(60px, 8vw, 110px);
}
.ss-event-single-content > * {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}
.ss-event-single-content h2 {
  font-size: clamp(36px, 5vw, 68px);
  line-height: .95;
  letter-spacing: -.04em;
}
.ss-event-single-content h3 {
  font-size: clamp(26px, 3vw, 42px);
}
.ss-event-single-content p,
.ss-event-single-content li {
  font-size: clamp(17px, 1.5vw, 21px);
}
.ss-event-single-content img,
.ss-event-single-content iframe {
  max-width: 100%;
}
.ss-event-single-footer {
  padding: 0 0 clamp(70px, 8vw, 110px);
}

@media (max-width: 1050px) {
  .ss-event-card--lead .ss-event-card-link,
  .ss-event-single-grid {
    grid-template-columns: 1fr;
  }

  .ss-event-card--lead .ss-event-card-copy {
    padding-top: 24px;
  }

  .ss-event-single-art {
    justify-self: start;
  }
}

@media (max-width: 700px) {
  .ss-event-grid {
    grid-template-columns: 1fr;
  }

  .ss-event-card--lead {
    grid-column: auto;
  }

  .ss-event-card:not(.ss-event-card--lead) .ss-event-art,
  .ss-event-art {
    aspect-ratio: 1 / 1;
  }
}


/* ==========================================================
   v1.10 — Events listings / upcoming + past
   ========================================================== */

.ss-events-hero--photo {
  padding: 0;
}

.ss-events-hero-grid {
  min-height: min(860px, calc(100svh - 96px));
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(470px, 1.18fr);
}

.ss-events-hero-copy {
  padding: clamp(80px, 9vw, 135px) var(--ss-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ss-foam);
}

.ss-events-hero--photo .ss-events-title {
  font-size: clamp(76px, 10.2vw, 158px);
  line-height: .74;
}

.ss-events-hero-photo {
  margin: 0;
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background: var(--ss-ink);
}

.ss-events-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.ss-events-hero-photo figcaption {
  position: absolute;
  right: 22px;
  bottom: 20px;
  padding: 7px 10px;
  background: var(--ss-foam);
  color: var(--ss-ink);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 10px;
  font-weight: 850;
}

.ss-events-listing {
  background: var(--ss-paper);
}

.ss-events-group {
  border-top: 2px solid var(--ss-ink);
}

.ss-events-group:last-child {
  border-bottom: 2px solid var(--ss-ink);
}

.ss-events-group > summary {
  min-height: clamp(105px, 10vw, 155px);
  display: grid;
  grid-template-columns: minmax(100px, .25fr) 1fr 70px;
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.ss-events-group > summary::-webkit-details-marker {
  display: none;
}

.ss-events-group-kicker {
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-weight: 850;
  opacity: .55;
}

.ss-events-group > summary strong {
  font-size: clamp(38px, 5.4vw, 76px);
  line-height: .9;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.ss-events-group > summary i {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  justify-self: end;
  border: 2px solid var(--ss-ink);
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
  font-style: normal;
  transition: transform .25s ease, background .2s ease, color .2s ease;
}

.ss-events-group[open] > summary i {
  transform: rotate(45deg);
  background: var(--ss-sea);
}

.ss-events-group > summary:hover strong,
.ss-events-group > summary:focus-visible strong {
  color: var(--ss-sea);
}

.ss-events-group-panel {
  padding-bottom: clamp(30px, 5vw, 65px);
}

.ss-events-group-inner {
  border-top: 1px solid rgba(16,40,58,.18);
}

.ss-event-row {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) minmax(180px, 260px);
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
  padding: clamp(28px, 4vw, 55px) 0;
  border-bottom: 1px solid rgba(16,40,58,.18);
}

.ss-event-thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: block;
  border: 1px solid rgba(16,40,58,.35);
  background: var(--ss-sky);
}

.ss-event-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.ss-event-thumb:hover img {
  transform: scale(1.025);
}

.ss-event-thumb-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 11px, rgba(16,40,58,.15) 12px 14px),
    var(--ss-sky);
}

.ss-event-thumb-fallback span {
  font-size: clamp(28px, 4vw, 50px);
  line-height: .78;
  letter-spacing: -.055em;
  text-transform: uppercase;
  font-weight: 900;
}

.ss-event-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 850;
  opacity: .58;
}

.ss-event-row-details h3 {
  margin: 0 0 16px;
  font-size: clamp(32px, 4.4vw, 62px);
  line-height: .9;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.ss-event-row-details h3 a {
  text-decoration: none;
}

.ss-event-row-details p {
  max-width: 680px;
  margin: 0 0 18px;
  font-size: clamp(15px, 1.35vw, 18px);
}

.ss-event-details-link {
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: 10px;
  font-weight: 850;
}

.ss-event-row-booking {
  min-height: 180px;
  padding-left: clamp(20px, 3vw, 40px);
  border-left: 1px solid rgba(16,40,58,.18);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.ss-event-booking-label {
  margin-bottom: 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-weight: 850;
  opacity: .55;
}

.ss-event-row-booking > strong {
  display: block;
  margin-bottom: 24px;
  font-size: clamp(25px, 3vw, 42px);
  line-height: .95;
  letter-spacing: -.035em;
}

.ss-event-row-booking .ss-btn {
  width: 100%;
  justify-content: center;
}

.ss-events-empty-inline {
  padding: 42px 0;
  font-size: 18px;
}

.ss-event-single-price {
  margin: 0 0 26px;
}

.ss-event-single-price span {
  display: block;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 10px;
  font-weight: 850;
  opacity: .55;
}

.ss-event-single-price strong {
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -.035em;
}

@media (max-width: 1050px) {
  .ss-events-hero-grid {
    grid-template-columns: 1fr;
  }

  .ss-events-hero-photo {
    min-height: 68vw;
  }

  .ss-event-row {
    grid-template-columns: 170px 1fr;
  }

  .ss-event-row-booking {
    grid-column: 2;
    min-height: 0;
    padding: 20px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(16,40,58,.18);
  }

  .ss-event-row-booking .ss-btn {
    width: auto;
  }
}

@media (max-width: 700px) {
  .ss-events-hero-photo {
    min-height: 92vw;
  }

  .ss-events-group > summary {
    grid-template-columns: 1fr 46px;
    gap: 14px;
    min-height: 96px;
  }

  .ss-events-group-kicker {
    display: none;
  }

  .ss-events-group > summary strong {
    font-size: clamp(31px, 9vw, 44px);
  }

  .ss-events-group > summary i {
    width: 42px;
    height: 42px;
    font-size: 22px;
  }

  .ss-event-row {
    grid-template-columns: 92px 1fr;
    gap: 18px;
    align-items: start;
  }

  .ss-event-row-details h3 {
    font-size: clamp(27px, 8vw, 38px);
  }

  .ss-event-row-details p {
    grid-column: 1 / -1;
  }

  .ss-event-row-booking {
    grid-column: 1 / -1;
    padding-top: 22px;
  }

  .ss-event-row-booking .ss-btn {
    width: 100%;
  }
}


/* ==========================================================
   v1.11 — smaller Events hero image + placeholder upcoming event
   ========================================================== */

.ss-events-hero-grid {
  min-height: 670px;
  grid-template-columns: minmax(0, 1.28fr) minmax(320px, .72fr);
  align-items: center;
  background: var(--ss-foam);
}

.ss-events-hero-copy {
  padding-top: clamp(78px, 8vw, 118px);
  padding-bottom: clamp(78px, 8vw, 118px);
}

.ss-events-hero-photo {
  width: min(88%, 520px);
  height: min(52vw, 520px);
  min-height: 390px;
  justify-self: center;
  align-self: center;
  border: 2px solid var(--ss-ink);
}

.ss-events-hero-photo img {
  object-position: 50% 42%;
}

.ss-event-row--placeholder {
  background: var(--ss-foam);
  padding-left: clamp(18px, 2vw, 30px);
  padding-right: clamp(18px, 2vw, 30px);
}

.ss-event-thumb--placeholder {
  pointer-events: none;
}

.ss-event-row--placeholder .ss-event-thumb-fallback {
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 10px, rgba(16,40,58,.15) 11px 13px),
    var(--ss-sky);
}

.ss-btn--disabled {
  opacity: .58;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 1050px) {
  .ss-events-hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-bottom: clamp(50px, 7vw, 80px);
  }

  .ss-events-hero-photo {
    width: min(82%, 560px);
    height: min(70vw, 560px);
    min-height: 360px;
  }
}

@media (max-width: 700px) {
  .ss-events-hero-photo {
    width: calc(100% - (var(--ss-pad) * 2));
    height: 88vw;
    min-height: 0;
  }

  .ss-event-row--placeholder {
    margin-left: calc(var(--ss-pad) * -0.3);
    margin-right: calc(var(--ss-pad) * -0.3);
  }
}


/* ==========================================================
   v1.12 — Events hero image as poster artwork
   ========================================================== */

.ss-events-hero-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr);
}

.ss-events-hero-art {
  width: min(86%, 500px);
  height: min(55vw, 545px);
  min-height: 410px;
  position: relative;
  justify-self: center;
  align-self: center;
}

.ss-events-hero-art-back {
  position: absolute;
  inset: 34px -22px -24px 32px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 18px 14px;
  background: var(--ss-sea);
  border: 2px solid var(--ss-ink);
  overflow: hidden;
}

.ss-events-hero-art-back span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--ss-ink);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ss-events-hero-photo {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  border: 2px solid var(--ss-ink);
  overflow: hidden;
  background: var(--ss-ink);
  transform: rotate(-1.25deg);
  transform-origin: 50% 50%;
  box-shadow: 8px 10px 0 rgba(16,40,58,.12);
}

.ss-events-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

.ss-events-hero-photo figcaption {
  display: none !important;
}

@media (max-width: 1050px) {
  .ss-events-hero-art {
    width: min(72%, 510px);
    height: min(72vw, 560px);
    margin: 0 auto 20px;
  }
}

@media (max-width: 700px) {
  .ss-events-hero-art {
    width: calc(100% - (var(--ss-pad) * 2.2));
    height: 96vw;
    min-height: 0;
    margin-bottom: 28px;
  }

  .ss-events-hero-art-back {
    inset: 24px -14px -18px 22px;
  }
}


/* ==========================================================
   SHOP — v1.13
   ========================================================== */

.ss-shop-hero {
  overflow: hidden;
  background: var(--ss-foam);
}

.ss-shop-hero-grid {
  min-height: min(780px, calc(100svh - 96px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr);
  gap: clamp(50px, 8vw, 120px);
  align-items: center;
  padding-top: clamp(75px, 8vw, 120px);
  padding-bottom: clamp(75px, 8vw, 120px);
}

.ss-shop-title {
  margin: 0;
  font-size: clamp(82px, 11.5vw, 180px);
  line-height: .75;
  letter-spacing: -.072em;
  text-transform: uppercase;
  font-weight: 900;
}

.ss-shop-title span {
  color: var(--ss-sea);
}

.ss-shop-intro {
  max-width: 610px;
  margin: clamp(30px, 4vw, 48px) 0;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.3;
}

.ss-shop-note {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.ss-shop-hero-mark {
  width: min(100%, 470px);
  aspect-ratio: 1 / 1;
  justify-self: end;
  display: grid;
  place-items: center;
  position: relative;
}

.ss-shop-hero-mark::before,
.ss-shop-hero-mark::after {
  content: "";
  position: absolute;
  border: 2px solid var(--ss-ink);
  border-radius: 50%;
}

.ss-shop-hero-mark::before {
  inset: 2%;
}

.ss-shop-hero-mark::after {
  inset: 10%;
  border-color: var(--ss-sea);
}

.ss-shop-hero-mark img {
  width: 78%;
  position: relative;
  z-index: 2;
  border-radius: 50%;
}

.ss-shop-strip {
  overflow: hidden;
  background: var(--ss-sea);
  color: var(--ss-ink);
  border-top: 2px solid var(--ss-ink);
  border-bottom: 2px solid var(--ss-ink);
}

.ss-shop-strip > div {
  width: max-content;
  min-width: 100%;
  padding: 17px var(--ss-pad);
  text-align: center;
  font-size: clamp(15px, 1.7vw, 22px);
  font-weight: 900;
  letter-spacing: .105em;
  text-transform: uppercase;
}

.ss-shop-strip span {
  margin: 0 clamp(12px, 2vw, 30px);
}

.ss-shop-products {
  background: var(--ss-paper);
}

.ss-shop-section-head {
  margin-bottom: clamp(45px, 7vw, 85px);
}

.ss-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(55px, 7vw, 100px) clamp(28px, 5vw, 72px);
}

.ss-shop-card {
  min-width: 0;
}

.ss-shop-art {
  aspect-ratio: 1 / 1.02;
  position: relative;
  display: block;
  overflow: hidden;
  border: 2px solid var(--ss-ink);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}

.ss-shop-art:hover,
.ss-shop-art:focus-visible {
  transform: translate(-5px, -5px);
  box-shadow: 9px 9px 0 var(--ss-ink);
}

.ss-shop-art--gttf {
  background: var(--ss-sky);
}

.ss-shop-art--metal {
  background: var(--ss-ink);
  color: var(--ss-foam);
}

.ss-shop-art--noise {
  background: var(--ss-foam);
}

.ss-shop-art--mug {
  background: var(--ss-sea);
}

.ss-shop-art-index {
  position: absolute;
  left: 20px;
  top: 18px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}

.ss-shop-art-type {
  position: absolute;
  inset: 0;
  padding: clamp(30px, 5vw, 70px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ss-shop-art-type span,
.ss-shop-art-type strong {
  display: block;
  font-size: clamp(42px, 7vw, 105px);
  line-height: .78;
  letter-spacing: -.065em;
  text-transform: uppercase;
  font-weight: 900;
}

.ss-shop-art--metal .ss-shop-art-type {
  text-align: center;
  transform: rotate(-5deg);
}

.ss-shop-art--metal .ss-shop-art-type span,
.ss-shop-art--metal .ss-shop-art-type strong {
  letter-spacing: -.035em;
}

.ss-shop-art--noise .ss-shop-art-type {
  justify-content: flex-end;
}

.ss-shop-art--mug .ss-shop-art-type {
  text-align: right;
}

.ss-shop-art-placeholder {
  position: absolute;
  right: 16px;
  bottom: 14px;
  padding: 5px 7px;
  border: 1px solid currentColor;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .55;
}

.ss-shop-card-copy {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: end;
  padding-top: 22px;
}

.ss-shop-kind {
  display: block;
  margin-bottom: 8px;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .55;
}

.ss-shop-card-copy h3 {
  margin: 0;
  max-width: 520px;
  font-size: clamp(27px, 3.5vw, 50px);
  line-height: .92;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.ss-shop-card-buy {
  min-width: 110px;
  text-align: right;
}

.ss-shop-card-buy strong {
  display: block;
  margin-bottom: 12px;
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1;
  letter-spacing: -.035em;
}

.ss-shop-buy-link {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ss-shop-voucher {
  background: var(--ss-sky);
}

.ss-shop-voucher-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(55px, 9vw, 145px);
  align-items: center;
}

.ss-shop-voucher-title {
  margin: 0;
  font-size: clamp(70px, 10vw, 155px);
  line-height: .79;
  letter-spacing: -.065em;
  text-transform: uppercase;
}

.ss-shop-voucher-copy strong {
  display: block;
  margin: 8px 0 24px;
  font-size: clamp(55px, 7vw, 105px);
  line-height: .9;
  letter-spacing: -.06em;
}

.ss-shop-voucher-copy p {
  max-width: 520px;
  margin-bottom: 32px;
  font-size: clamp(17px, 1.5vw, 21px);
}

.ss-shop-footer-cta {
  background: var(--ss-ink);
  color: var(--ss-foam);
}

.ss-shop-footer-title {
  margin: 0 0 28px;
  font-size: clamp(72px, 12vw, 190px);
  line-height: .78;
  letter-spacing: -.07em;
  text-transform: uppercase;
}

.ss-shop-footer-cta .ss-copy {
  max-width: 620px;
  margin-bottom: 34px;
  color: rgba(244,240,230,.78);
}

@media (max-width: 1050px) {
  .ss-shop-hero-grid,
  .ss-shop-voucher-grid {
    grid-template-columns: 1fr;
  }

  .ss-shop-hero-mark {
    width: min(58vw, 430px);
    justify-self: start;
  }
}

@media (max-width: 700px) {
  .ss-shop-grid {
    grid-template-columns: 1fr;
  }

  .ss-shop-card-copy {
    grid-template-columns: 1fr;
  }

  .ss-shop-card-buy {
    text-align: left;
  }

  .ss-shop-hero-mark {
    width: min(78vw, 390px);
  }
}


/* ==========================================================
   SHOP — v1.14 real product photography
   ========================================================== */

.ss-shop-photo {
  background: var(--ss-foam);
}

.ss-shop-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}

.ss-shop-photo:hover img,
.ss-shop-photo:focus-visible img {
  transform: scale(1.025);
}

/* Product-specific focal points so the uploaded photography crops well. */
.ss-shop-photo--gttf img {
  object-position: 54% 50%;
}

.ss-shop-photo--christophe img {
  object-position: 50% 40%;
}

.ss-shop-photo--noise img {
  object-position: 50% 42%;
}

.ss-shop-photo--mugs img {
  object-position: 50% 52%;
}

.ss-shop-photo .ss-shop-art-index {
  z-index: 2;
  padding: 7px 9px;
  background: var(--ss-foam);
  border: 1px solid var(--ss-ink);
  color: var(--ss-ink);
}

.ss-shop-voucher-grid {
  align-items: start;
}

.ss-shop-voucher-image {
  margin: clamp(32px, 5vw, 62px) 0 0;
  width: min(100%, 720px);
  overflow: hidden;
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
  transform: rotate(-.6deg);
  box-shadow: 8px 9px 0 rgba(16,40,58,.14);
}

.ss-shop-voucher-image img {
  width: 100%;
  height: auto;
  display: block;
}

.ss-shop-voucher-copy {
  position: sticky;
  top: 130px;
  padding-top: 12px;
}

@media (max-width: 1050px) {
  .ss-shop-voucher-copy {
    position: static;
    padding-top: 0;
  }
}


/* ==========================================================
   SHOP — v1.15 compact product grid + gift voucher card
   ========================================================== */

.ss-shop-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(38px, 5vw, 72px) clamp(22px, 3vw, 42px);
}

.ss-shop-card {
  max-width: 420px;
}

.ss-shop-art {
  aspect-ratio: 1 / 1;
}

.ss-shop-card-copy {
  grid-template-columns: 1fr;
  gap: 14px;
  padding-top: 17px;
}

.ss-shop-card-copy h3 {
  font-size: clamp(22px, 2.35vw, 36px);
  line-height: .95;
}

.ss-shop-card-buy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  text-align: left;
}

.ss-shop-card-buy strong {
  margin-bottom: 0;
  font-size: clamp(21px, 2.1vw, 30px);
}

.ss-shop-photo--voucher img {
  object-position: 50% 50%;
}

/* Retire the old oversized voucher feature if legacy CSS remains. */
.ss-shop-voucher {
  display: none;
}

@media (max-width: 1050px) {
  .ss-shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ss-shop-card {
    max-width: none;
  }
}

@media (max-width: 650px) {
  .ss-shop-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px 16px;
  }

  .ss-shop-card-copy h3 {
    font-size: clamp(19px, 6vw, 27px);
  }

  .ss-shop-card-buy {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .ss-shop-kind {
    margin-bottom: 5px;
  }
}

@media (max-width: 440px) {
  .ss-shop-grid {
    grid-template-columns: 1fr;
  }

  .ss-shop-card {
    max-width: 360px;
  }
}


/* ==========================================================
   SHOP — v1.16 clean hero logo
   ========================================================== */

.ss-shop-hero-mark {
  width: min(100%, 390px);
  aspect-ratio: auto;
  display: block;
  justify-self: end;
}

.ss-shop-hero-mark::before,
.ss-shop-hero-mark::after {
  display: none;
}

.ss-shop-hero-mark img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

@media (max-width: 1050px) {
  .ss-shop-hero-mark {
    width: min(52vw, 360px);
    justify-self: start;
  }
}

@media (max-width: 700px) {
  .ss-shop-hero-mark {
    width: min(70vw, 330px);
  }
}


/* ==========================================================
   v1.17 — inner-page header/logo + laptop hero spacing
   ========================================================== */

/*
 * Staging Shop/Events requests can still carry WordPress's "home" class.
 * These route classes deliberately override the homepage logo-hiding rule.
 */
body.ss26-shop-route .site-header .ss-brand,
body.ss26-events-route .site-header .ss-brand,
body.ss26-gttf-page .site-header .ss-brand {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Shop: align the hero mark with the headline rather than the full hero box. */
.ss-shop-hero-grid {
  align-items: start;
}

.ss-shop-hero-mark {
  align-self: start;
  justify-self: center;
  width: min(100%, 350px);
  margin-top: clamp(50px, 6vw, 84px);
}

/*
 * Short desktop/laptop viewports (e.g. MacBook Air):
 * remove excessive theatrical vertical whitespace on inner-page heroes.
 * Homepage remains untouched.
 */
@media (min-width: 1051px) and (max-height: 920px) {

  .ss-header-inner {
    min-height: 82px;
  }

  .ss-brand-logo {
    width: 60px;
    height: 60px;
  }

  /* Record */
  .ss-record-hero-grid {
    min-height: 650px;
  }

  .ss-record-hero-copy {
    justify-content: flex-start;
    padding-top: 46px;
    padding-bottom: 58px;
  }

  .ss-record-hero-image {
    min-height: 650px;
  }

  /* Events */
  .ss-events-hero-grid {
    min-height: 640px;
  }

  .ss-events-hero-copy {
    justify-content: flex-start;
    padding-top: 46px;
    padding-bottom: 58px;
  }

  .ss-events-hero-art {
    height: 470px;
    min-height: 0;
    margin-top: 45px;
  }

  /* Shop */
  .ss-shop-hero-grid {
    min-height: 620px;
    padding-top: 44px;
    padding-bottom: 58px;
    align-items: start;
  }

  .ss-shop-hero-mark {
    width: min(100%, 330px);
    margin-top: 54px;
    justify-self: center;
  }

  .ss-shop-intro {
    margin-top: 26px;
    margin-bottom: 28px;
  }
}

@media (min-width: 1051px) {
  /*
   * Keep the Shop mark visually aligned with the actual title block.
   * It sits slightly inward from the right edge rather than hugging it.
   */
  .ss-shop-hero-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, .58fr);
  }

  .ss-shop-hero-mark {
    justify-self: center;
  }
}


/* ==========================================================
   v1.18 — tighter homepage hero on desktop/laptop
   ========================================================== */

@media (min-width: 1051px) {
  .ss-hero {
    min-height: 0;
  }

  .ss-hero-grid {
    min-height: 690px;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    align-items: start;
  }

  .ss-hero-copy {
    justify-content: flex-start;
    padding-top: 34px;
    padding-bottom: 54px;
  }

  .ss-hero-logo {
    width: clamp(205px, 18vw, 285px);
    margin-bottom: 22px;
  }

  .ss-hero-title {
    font-size: clamp(58px, 7vw, 112px);
  }

  .ss-hero-sub {
    margin-top: 24px;
    margin-bottom: 26px;
  }

  .ss-hero-image {
    min-height: 0;
    height: 650px;
    margin: 20px var(--ss-pad) 20px 0;
    border: 2px solid var(--ss-ink);
  }
}

/* MacBook / shorter laptop screens get an even tighter first screen. */
@media (min-width: 1051px) and (max-height: 920px) {
  .ss-hero-grid {
    min-height: 620px;
  }

  .ss-hero-copy {
    padding-top: 28px;
    padding-bottom: 42px;
  }

  .ss-hero-logo {
    width: clamp(190px, 16.5vw, 255px);
    margin-bottom: 18px;
  }

  .ss-hero-title {
    font-size: clamp(56px, 6.5vw, 101px);
  }

  .ss-hero-sub {
    margin: 20px 0 22px;
  }

  .ss-hero-image {
    height: 580px;
    margin-top: 16px;
    margin-bottom: 16px;
  }
}


/* ==========================================================
   BLOG — v1.19
   ========================================================== */

body.ss26-blog-route .site-header .ss-brand {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.ss-blog-hero {
  padding: clamp(78px, 9vw, 135px) 0 clamp(65px, 7vw, 100px);
  background: var(--ss-foam);
}

.ss-blog-title {
  margin: 0;
  font-size: clamp(90px, 15vw, 230px);
  line-height: .72;
  letter-spacing: -.075em;
  font-weight: 900;
  text-transform: uppercase;
}

.ss-blog-title span {
  color: var(--ss-sea);
}

.ss-blog-intro {
  max-width: 700px;
  margin: clamp(34px, 5vw, 58px) 0 0;
  font-size: clamp(20px, 2vw, 29px);
  line-height: 1.3;
}

.ss-blog-strip {
  overflow: hidden;
  background: var(--ss-ink);
  color: var(--ss-sky);
}

.ss-blog-strip > div {
  width: max-content;
  min-width: 100%;
  padding: 17px var(--ss-pad);
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(15px, 1.7vw, 22px);
  font-weight: 900;
  letter-spacing: .105em;
}

.ss-blog-strip span {
  margin: 0 clamp(12px, 2vw, 30px);
  color: var(--ss-foam);
}

.ss-blog-listing {
  background: var(--ss-paper);
}

.ss-blog-group {
  border-top: 2px solid var(--ss-ink);
}

.ss-blog-group:last-child {
  border-bottom: 2px solid var(--ss-ink);
}

.ss-blog-group > summary {
  min-height: clamp(105px, 10vw, 150px);
  display: grid;
  grid-template-columns: minmax(120px, .25fr) 1fr 70px;
  gap: clamp(20px, 4vw, 55px);
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.ss-blog-group > summary::-webkit-details-marker {
  display: none;
}

.ss-blog-group-kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-weight: 850;
  opacity: .55;
}

.ss-blog-group > summary strong {
  font-size: clamp(38px, 5vw, 72px);
  line-height: .9;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.ss-blog-group > summary i {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  justify-self: end;
  border: 2px solid var(--ss-ink);
  border-radius: 50%;
  font-size: 28px;
  font-style: normal;
  line-height: 1;
  transition: transform .25s ease, background .2s ease;
}

.ss-blog-group[open] > summary i {
  transform: rotate(45deg);
  background: var(--ss-sea);
}

.ss-blog-group > summary:hover strong,
.ss-blog-group > summary:focus-visible strong {
  color: var(--ss-sea);
}

.ss-blog-group-panel {
  padding-bottom: clamp(40px, 6vw, 75px);
}

.ss-blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(45px, 6vw, 85px) clamp(28px, 4vw, 60px);
  padding-top: 10px;
}

.ss-blog-card--lead {
  grid-column: 1 / -1;
}

.ss-blog-card-link {
  display: grid;
  text-decoration: none;
}

.ss-blog-card--lead .ss-blog-card-link {
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  gap: clamp(36px, 6vw, 85px);
  align-items: center;
}

.ss-blog-art {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  background: var(--ss-sky);
  border: 2px solid var(--ss-ink);
}

.ss-blog-card:not(.ss-blog-card--lead) .ss-blog-art {
  aspect-ratio: 16 / 10;
}

.ss-blog-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.ss-blog-card-link:hover .ss-blog-art img {
  transform: scale(1.025);
}

.ss-blog-art-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 30px;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 12px, rgba(16,40,58,.14) 13px 15px),
    var(--ss-sky);
}

.ss-blog-art-fallback span {
  font-size: clamp(45px, 7vw, 105px);
  line-height: .8;
  letter-spacing: -.06em;
  text-transform: uppercase;
  font-weight: 900;
}

.ss-blog-date {
  position: absolute;
  left: 16px;
  bottom: 15px;
  padding: 7px 9px;
  background: var(--ss-foam);
  border: 1px solid var(--ss-ink);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ss-blog-card-copy {
  padding-top: 22px;
}

.ss-blog-card--lead .ss-blog-card-copy {
  padding-top: 0;
}

.ss-blog-category {
  display: block;
  margin-bottom: 10px;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .15em;
  opacity: .55;
}

.ss-blog-card-copy h2 {
  margin: 0;
  font-size: clamp(32px, 4.5vw, 68px);
  line-height: .9;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.ss-blog-card:not(.ss-blog-card--lead) .ss-blog-card-copy h2 {
  font-size: clamp(27px, 3.2vw, 46px);
}

.ss-blog-card-copy p {
  max-width: 610px;
}

.ss-blog-read {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  margin-top: 10px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.ss-blog-card-link:hover .ss-blog-read {
  color: var(--ss-sea);
}

.ss-blog-archive-list {
  border-top: 1px solid rgba(16,40,58,.18);
}

.ss-blog-archive-row {
  min-height: 90px;
  display: grid;
  grid-template-columns: 130px 1fr 42px;
  gap: 24px;
  align-items: center;
  border-bottom: 1px solid rgba(16,40,58,.18);
  text-decoration: none;
}

.ss-blog-archive-row > span {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
}

.ss-blog-archive-row > strong {
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1;
  letter-spacing: -.025em;
}

.ss-blog-archive-row > i {
  justify-self: end;
  font-style: normal;
  font-size: 20px;
}

.ss-blog-archive-row:hover strong,
.ss-blog-archive-row:focus-visible strong {
  color: var(--ss-sea);
}

.ss-blog-empty {
  padding: 35px 0;
}

.ss-blog-cta {
  background: var(--ss-sky);
}

/* Individual article */
.ss-blog-single-hero {
  padding: clamp(78px, 9vw, 130px) 0 clamp(55px, 7vw, 90px);
  background: var(--ss-foam);
}

.ss-blog-single-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-bottom: 24px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .58;
}

.ss-blog-single-hero h1 {
  max-width: 1200px;
  margin: 0;
  font-size: clamp(58px, 9vw, 145px);
  line-height: .83;
  letter-spacing: -.06em;
  text-transform: uppercase;
}

.ss-blog-single-deck {
  max-width: 760px;
  margin: 34px 0 0;
  font-size: clamp(21px, 2vw, 29px);
  line-height: 1.3;
}

.ss-blog-single-feature {
  width: min(1400px, calc(100% - (var(--ss-pad) * 2)));
  max-height: 760px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--ss-ink);
}

.ss-blog-single-feature img {
  width: 100%;
  height: 100%;
  max-height: 760px;
  object-fit: cover;
}

.ss-blog-single-content {
  padding-top: clamp(55px, 7vw, 95px);
  padding-bottom: clamp(60px, 8vw, 110px);
}

.ss-blog-single-content > * {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.ss-blog-single-content p,
.ss-blog-single-content li {
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.7;
}

.ss-blog-single-content h2 {
  margin-top: 1.4em;
  font-size: clamp(38px, 5vw, 68px);
  line-height: .95;
  letter-spacing: -.04em;
}

.ss-blog-single-content h3 {
  font-size: clamp(27px, 3vw, 42px);
}

.ss-blog-single-content img {
  max-width: 100%;
  height: auto;
}

.ss-blog-single-footer {
  padding: 0 0 clamp(70px, 8vw, 110px);
}

@media (min-width: 1051px) and (max-height: 920px) {
  .ss-blog-hero {
    padding-top: 48px;
    padding-bottom: 60px;
  }
}

@media (max-width: 1050px) {
  .ss-blog-card--lead .ss-blog-card-link {
    grid-template-columns: 1fr;
  }

  .ss-blog-card--lead .ss-blog-card-copy {
    padding-top: 22px;
  }
}

@media (max-width: 700px) {
  .ss-blog-grid {
    grid-template-columns: 1fr;
  }

  .ss-blog-card--lead {
    grid-column: auto;
  }

  .ss-blog-group > summary {
    grid-template-columns: 1fr 46px;
    min-height: 94px;
  }

  .ss-blog-group-kicker {
    display: none;
  }

  .ss-blog-group > summary strong {
    font-size: clamp(31px, 9vw, 44px);
  }

  .ss-blog-group > summary i {
    width: 42px;
    height: 42px;
    font-size: 22px;
  }

  .ss-blog-archive-row {
    grid-template-columns: 1fr 32px;
    gap: 12px;
    padding: 17px 0;
  }

  .ss-blog-archive-row > span {
    grid-column: 1 / -1;
  }
}


/* ==========================================================
   BLOG — v1.20 universal historical + future article system
   ========================================================== */

.ss-blog-count {
  margin: 20px 0 0;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .55;
}

/* Archive grouped by year. */
.ss-blog-years {
  border-top: 1px solid rgba(16,40,58,.18);
}

.ss-blog-year {
  padding: clamp(34px, 5vw, 62px) 0;
  border-bottom: 1px solid rgba(16,40,58,.22);
}

.ss-blog-year-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 20px;
}

.ss-blog-year-heading h3 {
  margin: 0;
  font-size: clamp(50px, 7vw, 100px);
  line-height: .8;
  letter-spacing: -.06em;
}

.ss-blog-year-heading span {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .5;
}

.ss-blog-year .ss-blog-archive-list {
  border-top: 1px solid rgba(16,40,58,.16);
}

.ss-blog-archive-row {
  grid-template-columns: 90px 1fr minmax(90px, .22fr) 36px;
}

.ss-blog-archive-row > em {
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .48;
}

/* ----------------------------------------------------------
   UNIVERSAL ARTICLE CONTENT
   Old Classic Editor HTML + newer block-editor content.
   ---------------------------------------------------------- */

.ss-blog-single {
  background: var(--ss-paper);
}

.ss-blog-single-hero {
  border-bottom: 1px solid rgba(16,40,58,.12);
}

/* Featured imagery: editorial, consistent, never distorted. */
.ss-blog-single-feature {
  width: min(1380px, calc(100% - (var(--ss-pad) * 2)));
  height: clamp(420px, 62vw, 760px);
  margin: clamp(30px, 4vw, 60px) auto 0;
  overflow: hidden;
  border: 2px solid var(--ss-ink);
  background: var(--ss-ink);
}

.ss-blog-single-feature img {
  width: 100%;
  height: 100% !important;
  max-height: none;
  object-fit: cover;
  display: block;
}

.ss-blog-single-content {
  padding-top: clamp(58px, 8vw, 105px);
  padding-bottom: clamp(58px, 8vw, 105px);
}

.ss-article-body {
  width: min(100%, 820px);
  margin: 0 auto;
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.72;
}

/*
 * Neutralise the most common legacy pasted typography without deleting
 * historic content or media.
 */
.ss-article-body p,
.ss-article-body li,
.ss-article-body td,
.ss-article-body th {
  font-family: inherit !important;
  color: var(--ss-ink) !important;
}

.ss-article-body p {
  margin: 0 0 1.35em;
  font-size: inherit !important;
  line-height: inherit !important;
}

.ss-article-body p:empty,
.ss-article-body br + br + br {
  display: none;
}

.ss-article-body a {
  color: var(--ss-ink);
  text-decoration-color: var(--ss-sea);
  text-decoration-thickness: 2px;
  text-underline-offset: .15em;
}

.ss-article-body a:hover,
.ss-article-body a:focus-visible {
  color: var(--ss-sea);
}

.ss-article-body h2,
.ss-article-body h3,
.ss-article-body h4,
.ss-article-body h5,
.ss-article-body h6 {
  font-family: inherit !important;
  color: var(--ss-ink) !important;
  text-wrap: balance;
}

.ss-article-body h2 {
  margin: 1.55em 0 .48em;
  font-size: clamp(40px, 5vw, 68px) !important;
  line-height: .96 !important;
  letter-spacing: -.045em !important;
  text-transform: uppercase;
}

.ss-article-body h3 {
  margin: 1.5em 0 .55em;
  font-size: clamp(28px, 3vw, 42px) !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
}

.ss-article-body h4 {
  margin: 1.4em 0 .55em;
  font-size: clamp(21px, 2vw, 29px) !important;
  line-height: 1.1 !important;
}

.ss-article-body ul,
.ss-article-body ol {
  margin: 0 0 1.6em;
  padding-left: 1.35em;
}

.ss-article-body li {
  margin-bottom: .55em;
  font-size: inherit !important;
  line-height: 1.6 !important;
}

.ss-article-body blockquote,
.ss-article-body .wp-block-quote {
  margin: clamp(45px, 7vw, 80px) calc(50% - 50vw);
  padding: clamp(38px, 6vw, 72px) max(var(--ss-pad), calc((100vw - 820px) / 2));
  border: 0;
  background: var(--ss-sky);
  color: var(--ss-ink);
}

.ss-article-body blockquote p,
.ss-article-body .wp-block-quote p {
  margin: 0;
  font-size: clamp(30px, 4.7vw, 64px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.04em;
  font-weight: 800;
}

.ss-article-body blockquote cite,
.ss-article-body .wp-block-quote cite {
  display: block;
  margin-top: 20px;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Images from old and new editors. */
.ss-article-body img {
  max-width: 100% !important;
  height: auto !important;
}

.ss-article-body figure,
.ss-article-body .wp-caption {
  max-width: 100% !important;
  margin-top: clamp(34px, 5vw, 58px);
  margin-bottom: clamp(34px, 5vw, 58px);
}

.ss-article-body figure img,
.ss-article-body .wp-caption img {
  display: block;
  width: 100%;
}

.ss-article-body figcaption,
.ss-article-body .wp-caption-text {
  margin-top: 10px;
  font-size: 10px !important;
  line-height: 1.4 !important;
  font-style: normal;
  letter-spacing: .04em;
  opacity: .62;
}

/* Classic Editor floated images still look intentional. */
.ss-article-body img.alignleft,
.ss-article-body .alignleft {
  float: left;
  max-width: 48% !important;
  margin: 8px 30px 20px 0;
}

.ss-article-body img.alignright,
.ss-article-body .alignright {
  float: right;
  max-width: 48% !important;
  margin: 8px 0 20px 30px;
}

.ss-article-body .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Wide/full Gutenberg media can break out elegantly. */
.ss-article-body .alignwide {
  width: min(1120px, calc(100vw - (var(--ss-pad) * 2)));
  max-width: none !important;
  margin-left: 50%;
  transform: translateX(-50%);
}

.ss-article-body .alignfull {
  width: 100vw;
  max-width: none !important;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Galleries. */
.ss-article-body .gallery,
.ss-article-body .wp-block-gallery {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(1120px, calc(100vw - (var(--ss-pad) * 2)));
  max-width: none !important;
  margin: clamp(42px, 6vw, 70px) 50%;
  transform: translateX(-50%);
}

.ss-article-body .gallery-item,
.ss-article-body .wp-block-gallery figure {
  width: auto !important;
  margin: 0 !important;
}

.ss-article-body .gallery img,
.ss-article-body .wp-block-gallery img {
  width: 100% !important;
  height: 100% !important;
  min-height: 260px;
  object-fit: cover;
  border: 0 !important;
}

/* Video/audio/embeds. */
.ss-article-body iframe,
.ss-article-body video,
.ss-article-body audio,
.ss-article-body .wp-block-embed {
  max-width: 100% !important;
}

.ss-article-body iframe {
  width: 100%;
}

.ss-article-body .wp-block-embed,
.ss-article-body .wp-video,
.ss-article-body .wp-audio-shortcode {
  margin: clamp(35px, 5vw, 58px) 0;
}

.ss-article-body .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
}

/* Tables, horizontal rules, code. */
.ss-article-body table {
  width: 100% !important;
  margin: 34px 0;
  border-collapse: collapse;
  font-size: .9em;
}

.ss-article-body th,
.ss-article-body td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(16,40,58,.2);
  text-align: left;
}

.ss-article-body hr {
  margin: clamp(42px, 6vw, 70px) 0;
  border: 0;
  border-top: 2px solid var(--ss-ink);
}

.ss-article-body pre {
  max-width: 100%;
  overflow: auto;
  padding: 22px;
  background: var(--ss-ink);
  color: var(--ss-foam);
}

.ss-article-body code {
  font-size: .88em;
}

/* WordPress buttons get the house button treatment. */
.ss-article-body .wp-block-button__link,
.ss-article-body a.wp-element-button {
  display: inline-flex;
  padding: 13px 18px;
  border: 2px solid var(--ss-ink);
  border-radius: 0;
  background: var(--ss-ink);
  color: var(--ss-foam);
  text-decoration: none;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ss-article-body .wp-block-button__link:hover,
.ss-article-body a.wp-element-button:hover {
  background: var(--ss-sea);
  border-color: var(--ss-sea);
  color: var(--ss-ink);
}

/* Clear old floated media before following content. */
.ss-article-body::after {
  content: "";
  display: table;
  clear: both;
}

.ss-article-pages {
  margin-top: 35px;
}

/* Filed-under strip. */
.ss-article-taxonomy {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 30px;
  align-items: start;
  padding-top: 26px;
  padding-bottom: 55px;
  border-top: 1px solid rgba(16,40,58,.18);
}

.ss-article-taxonomy-label {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .5;
}

.ss-article-taxonomy-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ss-article-taxonomy-items span {
  padding: 7px 9px;
  border: 1px solid rgba(16,40,58,.3);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Consistent article ending. */
.ss-article-more {
  background: var(--ss-foam);
}

.ss-article-more-title {
  margin: 0 0 clamp(38px, 5vw, 65px);
  font-size: clamp(55px, 8vw, 120px);
  line-height: .8;
  letter-spacing: -.06em;
  text-transform: uppercase;
}

.ss-article-more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--ss-ink);
  border-bottom: 2px solid var(--ss-ink);
}

.ss-article-more-card {
  min-height: 240px;
  padding: clamp(24px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.ss-article-more-card + .ss-article-more-card {
  border-left: 1px solid rgba(16,40,58,.25);
}

.ss-article-more-card > span,
.ss-article-more-card > i {
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
}

.ss-article-more-card > strong {
  margin: auto 0;
  font-size: clamp(25px, 3vw, 39px);
  line-height: .95;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.ss-article-more-card:hover strong,
.ss-article-more-card:focus-visible strong {
  color: var(--ss-sea);
}

.ss-blog-single-footer {
  padding-top: clamp(50px, 6vw, 80px);
  background: var(--ss-paper);
}

@media (max-width: 800px) {
  .ss-blog-archive-row {
    grid-template-columns: 68px 1fr 32px;
  }

  .ss-blog-archive-row > em {
    display: none;
  }

  .ss-article-body img.alignleft,
  .ss-article-body .alignleft,
  .ss-article-body img.alignright,
  .ss-article-body .alignright {
    float: none;
    max-width: 100% !important;
    margin: 30px 0;
  }

  .ss-article-more-grid {
    grid-template-columns: 1fr;
  }

  .ss-article-more-card + .ss-article-more-card {
    border-left: 0;
    border-top: 1px solid rgba(16,40,58,.25);
  }

  .ss-article-more-card {
    min-height: 180px;
  }

  .ss-article-taxonomy {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 600px) {
  .ss-article-body .gallery,
  .ss-article-body .wp-block-gallery {
    grid-template-columns: 1fr;
  }

  .ss-blog-single-feature {
    width: calc(100% - (var(--ss-pad) * 2));
    height: 66vw;
    min-height: 280px;
  }
}


/* ==========================================================
   STUDIO — v1.21
   ========================================================== */

body.ss26-studio-route .site-header .ss-brand {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.ss-studio-hero {
  background: var(--ss-foam);
  overflow: hidden;
}

.ss-studio-hero-grid {
  min-height: 720px;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(430px, .96fr);
  gap: clamp(45px, 7vw, 110px);
  align-items: center;
  padding-top: clamp(50px, 6vw, 85px);
  padding-bottom: clamp(50px, 6vw, 85px);
}

.ss-studio-title {
  margin: 0;
  font-size: clamp(72px, 9.5vw, 150px);
  line-height: .77;
  letter-spacing: -.07em;
  text-transform: uppercase;
  font-weight: 900;
}

.ss-studio-title span {
  color: var(--ss-sea);
}

.ss-studio-intro {
  max-width: 650px;
  margin: 30px 0 32px;
  font-size: clamp(19px, 1.8vw, 27px);
  line-height: 1.35;
}

.ss-studio-hero-image {
  width: 100%;
  aspect-ratio: 5 / 6;
  margin: 0;
  overflow: hidden;
  border: 2px solid var(--ss-ink);
  background: var(--ss-ink);
  transform: rotate(.5deg);
  box-shadow: 10px 12px 0 var(--ss-sea);
}

.ss-studio-hero-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 58% 50%;
}

.ss-studio-strip {
  overflow: hidden;
  background: var(--ss-ink);
  color: var(--ss-sky);
}

.ss-studio-strip > div {
  width: max-content;
  min-width: 100%;
  padding: 17px var(--ss-pad);
  text-align: center;
  font-size: clamp(15px, 1.7vw, 22px);
  font-weight: 900;
  letter-spacing: .105em;
  text-transform: uppercase;
}

.ss-studio-strip span {
  margin: 0 clamp(12px, 2vw, 30px);
  color: var(--ss-foam);
}

.ss-studio-introduction {
  background: var(--ss-paper);
}

.ss-studio-facts {
  padding: 0 var(--ss-pad);
  background: var(--ss-sky);
  border-top: 2px solid var(--ss-ink);
  border-bottom: 2px solid var(--ss-ink);
}

.ss-studio-facts-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ss-studio-facts-grid > div {
  min-height: 250px;
  padding: clamp(25px, 3vw, 42px);
  display: flex;
  flex-direction: column;
}

.ss-studio-facts-grid > div + div {
  border-left: 1px solid rgba(16,40,58,.3);
}

.ss-studio-facts-grid span {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .14em;
  opacity: .5;
}

.ss-studio-facts-grid strong {
  margin: auto 0 12px;
  font-size: clamp(36px, 4.2vw, 64px);
  line-height: .86;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

.ss-studio-facts-grid p {
  margin: 0;
  font-size: 14px;
}

.ss-studio-inside {
  background: var(--ss-foam);
}

.ss-studio-section-head {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: clamp(35px, 7vw, 100px);
  align-items: end;
  margin-bottom: clamp(45px, 7vw, 85px);
}

.ss-studio-section-head .ss-eyebrow {
  grid-column: 1 / -1;
  margin-bottom: -20px;
}

.ss-studio-section-head .ss-copy {
  margin: 0 0 8px;
}

.ss-studio-spaces {
  border-top: 2px solid var(--ss-ink);
}

.ss-studio-space {
  min-height: clamp(220px, 22vw, 330px);
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: clamp(25px, 5vw, 70px);
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 5vw, 65px);
  border-bottom: 1px solid rgba(16,40,58,.35);
}

.ss-studio-space::after {
  content: "";
  position: absolute;
  width: min(34vw, 480px);
  aspect-ratio: 1;
  right: -8%;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: .12;
  box-shadow:
    0 0 0 30px currentColor,
    0 0 0 31px currentColor,
    0 0 0 70px transparent,
    0 0 0 71px currentColor;
}

.ss-studio-space--control {
  background: var(--ss-paper);
}

.ss-studio-space--live {
  background: var(--ss-sky);
}

.ss-studio-space--rehearsal {
  background: var(--ss-sea);
}

.ss-studio-space-no {
  align-self: start;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .14em;
  opacity: .5;
}

.ss-studio-space > div {
  position: relative;
  z-index: 2;
  max-width: 850px;
}

.ss-studio-space-label {
  display: block;
  margin-bottom: 10px;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .55;
}

.ss-studio-space h3 {
  margin: 0;
  font-size: clamp(48px, 7vw, 105px);
  line-height: .82;
  letter-spacing: -.06em;
  text-transform: uppercase;
}

.ss-studio-space p {
  max-width: 600px;
  margin: 22px 0 0;
  font-size: clamp(16px, 1.4vw, 20px);
}

.ss-studio-photo-note {
  margin: 22px 0 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  opacity: .45;
}

.ss-studio-desk {
  padding: clamp(70px, 9vw, 130px) 0;
  overflow: hidden;
  background: var(--ss-ink);
  color: var(--ss-foam);
}

.ss-studio-desk-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: clamp(45px, 8vw, 120px);
  align-items: center;
}

.ss-studio-desk-copy h2 {
  margin: 0;
  font-size: clamp(62px, 8vw, 125px);
  line-height: .8;
  letter-spacing: -.065em;
  text-transform: uppercase;
}

.ss-studio-desk-copy h2 span {
  color: var(--ss-sky);
}

.ss-studio-desk-copy p {
  max-width: 600px;
  margin: 30px 0;
  font-size: clamp(17px, 1.5vw, 21px);
  color: rgba(244,240,230,.78);
}

.ss-studio-desk-type {
  min-height: 470px;
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid rgba(244,240,230,.22);
}

.ss-studio-desk-type::before,
.ss-studio-desk-type::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(143,210,229,.42);
}

.ss-studio-desk-type::before {
  width: 72%;
  aspect-ratio: 1;
}

.ss-studio-desk-type::after {
  width: 52%;
  aspect-ratio: 1;
}

.ss-studio-desk-type span,
.ss-studio-desk-type strong,
.ss-studio-desk-type em {
  position: absolute;
  z-index: 2;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.ss-studio-desk-type span {
  top: 13%;
  font-size: clamp(28px, 4vw, 58px);
  letter-spacing: .08em;
}

.ss-studio-desk-type strong {
  font-size: clamp(180px, 24vw, 360px);
  line-height: .7;
  color: var(--ss-sea);
  opacity: .78;
}

.ss-studio-desk-type em {
  bottom: 11%;
  font-size: clamp(24px, 3vw, 44px);
  letter-spacing: .16em;
}

.ss-studio-neighbourhood {
  background: var(--ss-paper);
}

.ss-studio-address {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(16,40,58,.25);
  font-style: normal;
  font-size: 16px;
  line-height: 1.5;
}

.ss-studio-history {
  background: var(--ss-sky);
}

.ss-studio-history-title {
  margin: 0;
  font-size: clamp(76px, 12vw, 190px);
  line-height: .76;
  letter-spacing: -.07em;
  text-transform: uppercase;
}

.ss-studio-history-line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  margin: clamp(45px, 7vw, 85px) 0 28px;
}

.ss-studio-history-line span {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ss-studio-history-line div {
  height: 2px;
  background: var(--ss-ink);
}

.ss-studio-history-copy {
  max-width: 780px;
  margin: 0;
  font-size: clamp(20px, 2vw, 29px);
  line-height: 1.3;
}

.ss-studio-cta {
  background: var(--ss-foam);
}

.ss-studio-cta-title {
  margin: 0 0 28px;
  font-size: clamp(75px, 12vw, 185px);
  line-height: .77;
  letter-spacing: -.07em;
  text-transform: uppercase;
}

.ss-studio-cta .ss-copy {
  max-width: 680px;
  margin-bottom: 34px;
}

@media (min-width: 1051px) and (max-height: 920px) {
  .ss-studio-hero-grid {
    min-height: 620px;
    padding-top: 38px;
    padding-bottom: 48px;
  }

  .ss-studio-title {
    font-size: clamp(66px, 8vw, 120px);
  }

  .ss-studio-hero-image {
    max-height: 540px;
  }
}

@media (max-width: 1050px) {
  .ss-studio-hero-grid,
  .ss-studio-section-head,
  .ss-studio-desk-grid {
    grid-template-columns: 1fr;
  }

  .ss-studio-hero-image {
    width: min(82%, 650px);
    aspect-ratio: 4 / 3;
  }

  .ss-studio-facts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ss-studio-facts-grid > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(16,40,58,.3);
  }

  .ss-studio-facts-grid > div:nth-child(4) {
    border-top: 1px solid rgba(16,40,58,.3);
  }

  .ss-studio-section-head .ss-eyebrow {
    grid-column: auto;
    margin-bottom: 0;
  }
}

@media (max-width: 700px) {
  .ss-studio-hero-image {
    width: 100%;
  }

  .ss-studio-facts-grid {
    grid-template-columns: 1fr;
  }

  .ss-studio-facts-grid > div {
    min-height: 190px;
  }

  .ss-studio-facts-grid > div + div,
  .ss-studio-facts-grid > div:nth-child(3),
  .ss-studio-facts-grid > div:nth-child(4) {
    border-left: 0;
    border-top: 1px solid rgba(16,40,58,.3);
  }

  .ss-studio-space {
    grid-template-columns: 42px 1fr;
    padding-left: 20px;
    padding-right: 20px;
  }

  .ss-studio-space::after {
    width: 80vw;
    right: -45%;
  }

  .ss-studio-space h3 {
    font-size: clamp(41px, 13vw, 65px);
  }

  .ss-studio-desk-type {
    min-height: 360px;
  }
}


/* ==========================================================
   STUDIO — v1.22 photo / facts / vocal booth refinements
   ========================================================== */

/* New wide control-room photograph works better as a landscape hero. */
.ss-studio-hero-image {
  aspect-ratio: 4 / 3;
}

.ss-studio-hero-image img {
  object-position: 50% 52%;
}

/* Quick Facts: genuinely centre the content in each panel. */
.ss-studio-facts-grid > div {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ss-studio-facts-grid span {
  align-self: stretch;
  text-align: left;
  margin-bottom: auto;
}

.ss-studio-facts-grid strong {
  width: 100%;
  margin: auto 0 12px;
  text-align: center;
}

.ss-studio-facts-grid p {
  width: 100%;
  text-align: center;
  margin-bottom: auto;
}

/* Vocal Booth gets its own tone between Recording Space and Rehearsal. */
.ss-studio-space--booth {
  background: var(--ss-foam);
}

@media (min-width: 1051px) and (max-height: 920px) {
  .ss-studio-hero-image {
    aspect-ratio: 4 / 3;
    max-height: 520px;
  }
}


/* ==========================================================
   STUDIO — v1.24 section photography refresh
   ========================================================== */

.ss-studio-space {
  grid-template-columns: 70px minmax(0, 1fr) minmax(260px, 34%);
}

.ss-studio-space-media {
  position: relative;
  z-index: 2;
  margin: 0;
  align-self: stretch;
  min-height: clamp(180px, 20vw, 260px);
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid var(--ss-ink);
  background: var(--ss-ink);
  box-shadow: 8px 10px 0 var(--ss-sea);
}

.ss-studio-space-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ss-studio-space--control .ss-studio-space-media img {
  object-position: 50% 50%;
}

.ss-studio-space--live .ss-studio-space-media img {
  object-position: 50% 55%;
}

.ss-studio-space--booth .ss-studio-space-media img {
  object-position: 50% 40%;
}

.ss-studio-space--rehearsal .ss-studio-space-media img {
  object-position: 50% 55%;
}

@media (max-width: 980px) {
  .ss-studio-space {
    grid-template-columns: 60px 1fr;
  }

  .ss-studio-space-media {
    grid-column: 2;
    min-height: 240px;
    margin-top: 14px;
  }
}

@media (max-width: 720px) {
  .ss-studio-space {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ss-studio-space-no {
    order: 0;
  }

  .ss-studio-space > div,
  .ss-studio-space-media {
    grid-column: auto;
  }

  .ss-studio-space-media {
    min-height: 220px;
    margin-top: 0;
  }
}


/* ==========================================================
   STUDIO — v1.25 smaller room images + landscape vocal booth
   ========================================================== */

.ss-studio-space {
  grid-template-columns: 70px minmax(0, 1fr) minmax(220px, 29%);
  gap: clamp(18px, 2.4vw, 34px);
}

.ss-studio-space-media {
  min-height: clamp(150px, 16vw, 210px);
  max-width: 360px;
  justify-self: end;
  border-radius: 16px;
}

.ss-studio-space-media img {
  aspect-ratio: 3 / 2;
}

.ss-studio-space--control .ss-studio-space-media img {
  object-position: 50% 50%;
}

.ss-studio-space--live .ss-studio-space-media img {
  object-position: 50% 54%;
}

.ss-studio-space--booth .ss-studio-space-media img {
  object-position: 50% 44%;
}

.ss-studio-space--rehearsal .ss-studio-space-media img {
  object-position: 50% 52%;
}

@media (max-width: 980px) {
  .ss-studio-space {
    grid-template-columns: 60px 1fr;
    gap: 14px 20px;
  }

  .ss-studio-space-media {
    max-width: 100%;
    min-height: 220px;
    justify-self: stretch;
  }
}

@media (max-width: 720px) {
  .ss-studio-space-media {
    min-height: 200px;
  }
}


/* ==========================================================
   STUDIO — v1.26 compact horizontal room bands
   ========================================================== */

.ss-studio-spaces {
  border-top: 2px solid var(--ss-ink);
}

.ss-studio-space {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(240px, 330px) minmax(0, 1fr) !important;
  gap: clamp(28px, 4vw, 60px) !important;
  align-items: center !important;
  padding: clamp(24px, 2.6vw, 36px) clamp(24px, 3vw, 42px) !important;
  border-bottom: 1px solid rgba(16,40,58,.32);
  overflow: hidden;
}

.ss-studio-space::after {
  display: none !important;
}

.ss-studio-space-media {
  width: 100% !important;
  max-width: 330px !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3;
  margin: 0 !important;
  justify-self: start !important;
  align-self: center !important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none;
  border: 1px solid rgba(16,40,58,.28);
}

.ss-studio-space-media img {
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  display: block;
  object-fit: cover;
}

.ss-studio-space-copy {
  max-width: 780px;
  padding: 0 !important;
  display: block;
}

.ss-studio-space-copy .ss-studio-space-no {
  display: inline-block;
  margin: 0 14px 12px 0;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .14em;
  opacity: .48;
}

.ss-studio-space-copy .ss-studio-space-label {
  display: inline-block;
  margin: 0 0 12px !important;
  font-size: 9px;
}

.ss-studio-space h3 {
  margin: 0 0 14px !important;
  font-size: clamp(38px, 4.8vw, 68px) !important;
  line-height: .88 !important;
  letter-spacing: -.05em !important;
}

.ss-studio-space p {
  max-width: 620px;
  margin: 0 !important;
  font-size: clamp(15px, 1.25vw, 18px) !important;
  line-height: 1.45;
}

/* Keep each uploaded image framed consistently. */
.ss-studio-space--control .ss-studio-space-media img {
  object-position: 50% 50%;
}

.ss-studio-space--live .ss-studio-space-media img {
  object-position: 50% 54%;
}

.ss-studio-space--booth .ss-studio-space-media img {
  object-position: 50% 44%;
}

.ss-studio-space--rehearsal .ss-studio-space-media img {
  object-position: 50% 52%;
}

@media (max-width: 760px) {
  .ss-studio-space {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding: 28px var(--ss-pad) 34px !important;
  }

  .ss-studio-space-media {
    width: min(100%, 390px) !important;
    max-width: 390px !important;
  }

  .ss-studio-space h3 {
    font-size: clamp(34px, 11vw, 52px) !important;
  }
}


/* ==========================================================
   STUDIO — v1.27 new Control Room / mic / CADAC photography
   ========================================================== */

.ss-studio-space--control .ss-studio-space-media img {
  object-position: 50% 48%;
}

.ss-studio-space--booth .ss-studio-space-media img {
  object-position: 50% 42%;
}

.ss-studio-desk-photo {
  width: 100%;
  max-width: 660px;
  aspect-ratio: 4 / 3;
  margin: 0;
  justify-self: end;
  overflow: hidden;
  border: 1px solid rgba(244,240,230,.35);
  background: var(--ss-paper);
}

.ss-studio-desk-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 52%;
}

.ss-studio-desk-type {
  display: none;
}

@media (max-width: 1050px) {
  .ss-studio-desk-photo {
    max-width: 620px;
    justify-self: start;
  }
}


/* ==========================================================
   STUDIO — v1.28 quick-facts rebalance
   ========================================================== */

.ss-studio-facts-grid > div {
  min-width: 0;
  min-height: 210px;
  padding: clamp(22px, 2.4vw, 34px);
  overflow: hidden;
}

.ss-studio-facts-grid strong {
  width: 100%;
  max-width: 100%;
  margin: auto 0 12px;
  font-size: clamp(32px, 3.25vw, 52px);
  line-height: .88;
  letter-spacing: -.045em;
  text-align: center;
}

.ss-studio-facts-grid p {
  max-width: 230px;
  margin: 0 auto auto;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
}

.ss-studio-facts-grid span {
  width: 100%;
  margin-bottom: auto;
}

/* On narrower laptops/tablets, 2x2 is cleaner than forcing four cramped cards. */
@media (max-width: 1200px) and (min-width: 701px) {
  .ss-studio-facts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ss-studio-facts-grid > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(16,40,58,.3);
  }

  .ss-studio-facts-grid > div:nth-child(4) {
    border-top: 1px solid rgba(16,40,58,.3);
  }
}


/* ==========================================================
   STUDIO — v1.29 achievements / values strip
   ========================================================== */

.ss-studio-facts-grid strong {
  font-size: clamp(28px, 2.8vw, 46px);
  line-height: .9;
}

.ss-studio-facts-grid p {
  max-width: 250px;
}


/* ==========================================================
   STUDIO — v1.30 desk-first page flow
   ========================================================== */

.ss-studio-desk {
  padding-top: clamp(78px, 9vw, 135px);
  padding-bottom: clamp(78px, 9vw, 135px);
}

.ss-studio-desk-photo {
  max-width: 760px;
}

@media (min-width: 1051px) {
  .ss-studio-desk-grid {
    grid-template-columns: minmax(0, .78fr) minmax(520px, 1.22fr);
  }
}


/* ==========================================================
   v1.31 — consistent hero image accent + smaller Record image
   ========================================================== */

/* Give the big top-of-page images the same blue offset accent used on Studio. */
.ss-hero-image,
.ss-record-hero-image,
.ss-events-hero-photo {
  border: 2px solid var(--ss-ink);
  box-shadow: 10px 12px 0 var(--ss-sea);
}

/* Homepage hero picture: keep the full-impact layout but add the accent. */
.ss-hero-image {
  width: calc(100% - clamp(18px, 2vw, 28px));
  margin: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 28px) clamp(28px, 3vw, 38px) 0;
}

/* Record hero: make the image feel a bit more considered and less oversized. */
.ss-record-hero-grid {
  align-items: center;
  gap: clamp(34px, 5vw, 74px);
}

.ss-record-hero-image {
  width: min(84%, 660px);
  min-height: 520px;
  justify-self: center;
  align-self: center;
}

.ss-record-hero-image img {
  object-position: center center;
}

/* Events hero already has the poster stack — just swap the grey shadow for brand blue. */
.ss-events-hero-photo {
  box-shadow: 10px 12px 0 var(--ss-sea);
}

@media (max-width: 1050px) {
  .ss-hero-image {
    width: 100%;
    margin: 0;
  }

  .ss-record-hero-image {
    width: min(100%, 760px);
    min-height: 460px;
  }
}

@media (max-width: 700px) {
  .ss-record-hero-image {
    width: 100%;
    min-height: 360px;
    box-shadow: 8px 10px 0 var(--ss-sea);
  }

  .ss-events-hero-photo,
  .ss-hero-image {
    box-shadow: 8px 10px 0 var(--ss-sea);
  }
}


/* ==========================================================
   v1.32 — lift Record hero image higher
   ========================================================== */

.ss-record-hero-grid {
  align-items: start;
}

.ss-record-hero-image {
  align-self: start;
  margin-top: clamp(78px, 8vw, 118px);
}

@media (max-width: 1050px) {
  .ss-record-hero-grid {
    align-items: unset;
  }

  .ss-record-hero-image {
    margin-top: 0;
  }
}


/* ==========================================================
   v1.33 — Record hero: useful content above the fold
   ========================================================== */

@media (min-width: 1051px) {
  .ss-record-hero-grid {
    min-height: 650px;
    grid-template-columns: minmax(0, 1.08fr) minmax(500px, .92fr);
    gap: clamp(36px, 4vw, 62px);
    align-items: start;
  }

  .ss-record-hero-copy {
    justify-content: flex-start;
    padding-top: 42px;
    padding-bottom: 48px;
  }

  .ss-record-title {
    max-width: 900px;
    font-size: clamp(58px, 5.45vw, 96px);
    line-height: .82;
  }

  .ss-record-intro {
    max-width: 620px;
    margin: 24px 0 24px;
    font-size: clamp(17px, 1.35vw, 22px);
  }

  .ss-record-hero-image {
    width: min(90%, 600px);
    min-height: 0;
    height: 500px;
    margin-top: 48px;
  }
}

/* MacBook / shorter laptop screens: make the CTA visible immediately. */
@media (min-width: 1051px) and (max-height: 920px) {
  .ss-record-hero-grid {
    min-height: 590px;
  }

  .ss-record-hero-copy {
    padding-top: 30px;
    padding-bottom: 36px;
  }

  .ss-record-title {
    font-size: clamp(54px, 4.75vw, 82px);
    line-height: .82;
  }

  .ss-record-intro {
    margin: 18px 0 20px;
    font-size: 18px;
  }

  .ss-record-hero-image {
    width: min(88%, 570px);
    height: 455px;
    margin-top: 34px;
  }
}

@media (max-width: 1050px) {
  .ss-record-title {
    font-size: clamp(52px, 10vw, 88px);
  }

  .ss-record-hero-image {
    height: auto;
  }
}


/* ==========================================================
   REHEARSALS — v1.34
   Functional first. No SimplyBook widget.
   ========================================================== */

body.ss26-rehearsals-route .site-header .ss-brand {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.ss-rehearsal-hero {
  background: var(--ss-foam);
}

.ss-rehearsal-hero-grid {
  min-height: 670px;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(460px, .94fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  padding-top: clamp(42px, 5vw, 70px);
  padding-bottom: clamp(42px, 5vw, 70px);
}

.ss-rehearsal-title {
  margin: 0;
  font-size: clamp(74px, 9vw, 140px);
  line-height: .77;
  letter-spacing: -.07em;
  text-transform: uppercase;
  font-weight: 900;
}

.ss-rehearsal-title span {
  color: var(--ss-sea);
}

.ss-rehearsal-intro {
  max-width: 620px;
  margin: 26px 0 24px;
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.35;
}

.ss-rehearsal-price {
  width: min(100%, 580px);
  margin: 0 0 26px;
  padding: 19px 0 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 24px;
  align-items: end;
  border-top: 2px solid var(--ss-ink);
  border-bottom: 2px solid var(--ss-ink);
}

.ss-rehearsal-price > span {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .55;
}

.ss-rehearsal-price > strong {
  grid-row: 1 / 3;
  grid-column: 2;
  justify-self: end;
  font-size: clamp(40px, 4vw, 64px);
  line-height: .85;
  letter-spacing: -.045em;
}

.ss-rehearsal-price > em {
  font-size: 12px;
  font-style: normal;
}

.ss-rehearsal-hero-image {
  width: min(100%, 610px);
  aspect-ratio: 4 / 3;
  justify-self: center;
  margin: 0;
  overflow: hidden;
  border: 2px solid var(--ss-ink);
  box-shadow: 10px 12px 0 var(--ss-sea);
  background: var(--ss-ink);
}

.ss-rehearsal-hero-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
}

.ss-rehearsal-strip {
  overflow: hidden;
  background: var(--ss-sea);
  color: var(--ss-ink);
  border-top: 2px solid var(--ss-ink);
  border-bottom: 2px solid var(--ss-ink);
}

.ss-rehearsal-strip > div {
  width: max-content;
  min-width: 100%;
  padding: 17px var(--ss-pad);
  text-align: center;
  font-size: clamp(15px, 1.6vw, 21px);
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ss-rehearsal-strip span {
  margin: 0 clamp(11px, 2vw, 28px);
}

.ss-rehearsal-essentials {
  background: var(--ss-paper);
}

.ss-rehearsal-section-head {
  display: grid;
  grid-template-columns: 1fr .75fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 70px);
}

.ss-rehearsal-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--ss-ink);
  border-bottom: 2px solid var(--ss-ink);
}

.ss-rehearsal-info-grid article {
  min-height: 210px;
  padding: clamp(24px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  background: var(--ss-sky);
}

.ss-rehearsal-info-grid article + article {
  border-left: 1px solid rgba(16,40,58,.28);
}

.ss-rehearsal-info-grid article > span {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .14em;
  opacity: .45;
}

.ss-rehearsal-info-grid article > strong {
  margin: auto 0 12px;
  font-size: clamp(32px, 3.8vw, 56px);
  line-height: .88;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.ss-rehearsal-info-grid article > p {
  margin: 0;
  font-size: 14px;
}

.ss-rehearsal-included {
  background: var(--ss-foam);
}

.ss-rehearsal-included-list {
  border-top: 2px solid var(--ss-ink);
}

.ss-rehearsal-included-list > div {
  display: grid;
  grid-template-columns: minmax(150px, .35fr) 1fr;
  gap: 30px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(16,40,58,.2);
}

.ss-rehearsal-included-list strong {
  font-size: clamp(23px, 2.5vw, 36px);
  text-transform: uppercase;
  letter-spacing: -.025em;
}

.ss-rehearsal-included-list p {
  margin: 0;
  align-self: center;
}

.ss-rehearsal-bring {
  padding: clamp(75px, 9vw, 125px) 0;
  background: var(--ss-ink);
  color: var(--ss-foam);
}

.ss-rehearsal-bring-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(50px, 8vw, 120px);
  align-items: center;
}

.ss-rehearsal-bring-title {
  margin: 0;
  font-size: clamp(62px, 8vw, 120px);
  line-height: .8;
  letter-spacing: -.065em;
  text-transform: uppercase;
}

.ss-rehearsal-bring-title span {
  color: var(--ss-sky);
}

.ss-rehearsal-bring-list {
  border-top: 1px solid rgba(244,240,230,.35);
}

.ss-rehearsal-bring-list > div {
  min-height: 82px;
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid rgba(244,240,230,.25);
}

.ss-rehearsal-bring-list span {
  font-size: 9px;
  letter-spacing: .14em;
  opacity: .48;
}

.ss-rehearsal-bring-list strong {
  font-size: clamp(21px, 2.4vw, 34px);
  line-height: 1;
  text-transform: uppercase;
}

.ss-rehearsal-room {
  background: var(--ss-paper);
}

.ss-rehearsal-room-grid {
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr);
  gap: clamp(45px, 8vw, 115px);
  align-items: center;
}

.ss-rehearsal-room-image {
  width: min(100%, 590px);
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border: 2px solid var(--ss-ink);
  box-shadow: 10px 12px 0 var(--ss-sea);
}

.ss-rehearsal-room-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ss-rehearsal-room-copy h2 {
  margin: 0;
  font-size: clamp(54px, 7vw, 105px);
  line-height: .82;
  letter-spacing: -.06em;
  text-transform: uppercase;
}

.ss-rehearsal-room-copy p {
  max-width: 600px;
  font-size: clamp(16px, 1.4vw, 20px);
}

.ss-rehearsal-book {
  background: var(--ss-sky);
}

.ss-rehearsal-book-head {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(45px, 8vw, 115px);
  align-items: end;
  margin-bottom: clamp(45px, 6vw, 72px);
}

.ss-rehearsal-book-title {
  margin: 0;
  font-size: clamp(60px, 8vw, 125px);
  line-height: .79;
  letter-spacing: -.065em;
  text-transform: uppercase;
}

.ss-rehearsal-book-placeholder {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
}

.ss-rehearsal-book-placeholder-copy {
  min-height: 320px;
  padding: clamp(32px, 5vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ss-rehearsal-book-placeholder-copy > span {
  margin-bottom: 12px;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .5;
}

.ss-rehearsal-book-placeholder-copy > strong {
  font-size: clamp(48px, 6vw, 88px);
  line-height: .86;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

.ss-rehearsal-book-placeholder-copy p {
  max-width: 560px;
}

.ss-rehearsal-book-placeholder-meta {
  border-left: 1px solid rgba(16,40,58,.25);
}

.ss-rehearsal-book-placeholder-meta > div {
  min-height: 106px;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.ss-rehearsal-book-placeholder-meta > div + div {
  border-top: 1px solid rgba(16,40,58,.25);
}

.ss-rehearsal-book-placeholder-meta span {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .5;
}

.ss-rehearsal-book-placeholder-meta strong {
  font-size: clamp(24px, 2.6vw, 36px);
  text-transform: uppercase;
}

.ss-rehearsal-book-fallback {
  margin-top: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}

.ss-rehearsal-book-fallback p {
  margin: 0;
}

.ss-rehearsal-location {
  background: var(--ss-foam);
}

@media (min-width: 1051px) and (max-height: 920px) {
  .ss-rehearsal-hero-grid {
    min-height: 590px;
    padding-top: 30px;
    padding-bottom: 42px;
  }

  .ss-rehearsal-title {
    font-size: clamp(64px, 7.4vw, 108px);
  }

  .ss-rehearsal-intro {
    margin: 18px 0;
  }

  .ss-rehearsal-hero-image {
    width: min(92%, 560px);
  }
}

@media (max-width: 1050px) {
  .ss-rehearsal-hero-grid,
  .ss-rehearsal-section-head,
  .ss-rehearsal-bring-grid,
  .ss-rehearsal-room-grid,
  .ss-rehearsal-book-head {
    grid-template-columns: 1fr;
  }

  .ss-rehearsal-hero-image {
    width: min(82%, 650px);
    justify-self: start;
  }

  .ss-rehearsal-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ss-rehearsal-info-grid article:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(16,40,58,.28);
  }

  .ss-rehearsal-info-grid article:nth-child(4) {
    border-top: 1px solid rgba(16,40,58,.28);
  }

  .ss-rehearsal-book-placeholder {
    grid-template-columns: 1fr;
  }

  .ss-rehearsal-book-placeholder-meta {
    border-left: 0;
    border-top: 1px solid rgba(16,40,58,.25);
  }
}

@media (max-width: 700px) {
  .ss-rehearsal-hero-image,
  .ss-rehearsal-room-image {
    width: 100%;
  }

  .ss-rehearsal-price {
    grid-template-columns: 1fr;
  }

  .ss-rehearsal-price > strong {
    grid-row: auto;
    grid-column: auto;
    justify-self: start;
    margin: 7px 0;
  }

  .ss-rehearsal-info-grid {
    grid-template-columns: 1fr;
  }

  .ss-rehearsal-info-grid article + article,
  .ss-rehearsal-info-grid article:nth-child(3),
  .ss-rehearsal-info-grid article:nth-child(4) {
    border-left: 0;
    border-top: 1px solid rgba(16,40,58,.28);
  }

  .ss-rehearsal-included-list > div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ss-rehearsal-book-placeholder-copy {
    min-height: 250px;
  }

  .ss-rehearsal-book-placeholder-meta > div {
    min-height: 88px;
  }

  .ss-rehearsal-book-fallback {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* ==========================================================
   REHEARSAL BOOKING PROTOTYPE — v1.35
   Derived from supplied southsea-sound-public-booking-v2-solo.html
   ========================================================== */

.ss-rehearsal-book--prototype {
  background: var(--ss-sky);
}

.ss-booking-prototype-note {
  max-width: 520px;
  padding: 18px 20px;
  border: 1px solid rgba(16,40,58,.35);
  background: rgba(255,253,247,.62);
}

.ss-booking-prototype-note strong {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ss-booking-prototype-note p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.ss-booking-prototype {
  --book-border: rgba(16,40,58,.22);
  --book-muted: rgba(16,40,58,.62);
  --book-paper: var(--ss-paper);
  color: var(--ss-ink);
}

.ss-booking-prototype [hidden] {
  display: none !important;
}

.ss-book-card {
  margin-bottom: 22px;
  padding: clamp(22px, 3.5vw, 38px);
  border: 2px solid var(--ss-ink);
  background: var(--book-paper);
}

.ss-book-step-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 24px;
}

.ss-book-step-number {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ss-ink);
  color: var(--ss-foam);
  font-size: 12px;
  font-weight: 900;
}

.ss-book-step-heading h3 {
  margin: 0;
  font-size: clamp(27px, 3vw, 42px);
  line-height: .95;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.ss-book-step-heading p {
  margin: 7px 0 0;
  color: var(--book-muted);
  font-size: 13px;
}

.ss-book-room-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.ss-booking-prototype .room-card {
  position: relative;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(16,40,58,.26);
  background: var(--ss-paper);
  color: var(--ss-ink);
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ss-booking-prototype .room-card:hover {
  transform: translateY(-2px);
  border-color: var(--ss-sea);
}

.ss-booking-prototype .room-card.selected {
  border-color: var(--ss-ink);
  box-shadow: 8px 9px 0 var(--ss-sea);
}

.ss-booking-prototype .room-card.selected::after {
  content: "✓";
  position: absolute;
  top: 13px;
  right: 13px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ss-sea);
  color: var(--ss-ink);
  font-weight: 900;
  z-index: 2;
}

.ss-book-room-photo {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ss-ink);
  border-bottom: 1px solid var(--book-border);
}

.ss-book-room-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ss-book-room-body {
  display: block;
  padding: 18px 20px 21px;
}

.ss-book-room-title,
.ss-book-room-price,
.ss-book-room-gear {
  display: block;
}

.ss-book-room-title {
  padding-right: 40px;
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 900;
  letter-spacing: -.025em;
}

.ss-book-room-dot {
  width: 9px;
  height: 9px;
  display: inline-block;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--ss-sea);
}

.ss-book-room-dot--navy {
  background: var(--ss-ink);
}

.ss-book-room-price {
  margin: 7px 0 12px;
  color: var(--ss-sea);
  font-size: 14px;
  font-weight: 900;
}

.ss-book-room-gear {
  color: var(--book-muted);
  font-size: 13px;
  line-height: 1.55;
}

.ss-book-session-choice {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--book-border);
}

.ss-booking-prototype label {
  display: block;
  margin: 14px 0 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .07em;
}

.ss-book-session-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.ss-booking-prototype .session-opt,
.ss-booking-prototype .pay-opt {
  padding: 14px 16px;
  border: 2px solid rgba(16,40,58,.24);
  background: #fff;
  color: var(--ss-ink);
  text-align: left;
  cursor: pointer;
}

.ss-booking-prototype .session-opt:hover,
.ss-booking-prototype .pay-opt:hover,
.ss-booking-prototype .session-opt.selected,
.ss-booking-prototype .pay-opt.selected {
  border-color: var(--ss-sea);
  background: rgba(143,210,229,.22);
}

.ss-booking-prototype .session-opt strong,
.ss-booking-prototype .session-opt span {
  display: block;
}

.ss-booking-prototype .session-opt strong {
  font-size: 16px;
}

.ss-booking-prototype .session-opt span {
  margin-top: 4px;
  color: var(--book-muted);
  font-size: 12px;
}

.ss-book-week-section {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--book-border);
}

.ss-book-week-toolbar {
  display: grid;
  grid-template-columns: 120px 1fr 120px;
  gap: 12px;
  align-items: center;
  margin-bottom: 13px;
}

.ss-book-week-label {
  text-align: center;
  font-size: 14px;
  font-weight: 900;
}

.ss-book-week-grid-wrap {
  overflow-x: auto;
  border: 2px solid var(--ss-ink);
  background: #fff;
}

.ss-booking-prototype .week-grid {
  width: 100%;
  min-width: 790px;
  border-collapse: collapse;
  font-size: 12px;
}

.ss-booking-prototype .week-grid th {
  padding: 11px 7px;
  background: var(--ss-ink);
  color: var(--ss-foam);
  text-align: center;
  font-size: 11px;
}

.ss-booking-prototype .week-grid th:not(:first-child) {
  background: var(--ss-ink-2);
}

.ss-booking-prototype .week-grid th.today {
  box-shadow: inset 0 -5px 0 var(--ss-sea);
}

.ss-booking-prototype .week-grid td {
  padding: 0;
  border: 1px solid rgba(16,40,58,.16);
  text-align: center;
}

.ss-booking-prototype .week-grid td.timecell {
  width: 140px;
  padding: 11px 8px;
  background: var(--ss-foam);
  color: var(--ss-ink);
  font-weight: 900;
  white-space: nowrap;
}

.ss-booking-prototype .slot-button {
  width: 100%;
  min-height: 50px;
  border: 0;
  background: #fff;
  color: var(--ss-sea);
  font-weight: 900;
  cursor: pointer;
}

.ss-booking-prototype .slot-button:hover {
  background: rgba(143,210,229,.2);
}

.ss-booking-prototype .slot-button.selected {
  background: var(--ss-sea);
  color: var(--ss-ink);
}

.ss-booking-prototype .slot-state {
  min-height: 50px;
  display: grid;
  place-items: center;
  background: #f2f0ea;
  color: rgba(16,40,58,.34);
}

.ss-book-availability-note,
.ss-book-muted {
  color: var(--book-muted);
  font-size: 12px;
}

.ss-book-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr);
  gap: 22px;
  align-items: start;
}

.ss-book-checkout-side {
  position: sticky;
  top: 105px;
}

.ss-book-extras-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.ss-booking-prototype .extra-row {
  min-height: 70px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  border: 1px solid var(--book-border);
  background: var(--ss-foam);
}

.ss-booking-prototype .extra-name {
  font-size: 14px;
  font-weight: 900;
}

.ss-booking-prototype .extra-price {
  margin-top: 3px;
  color: var(--book-muted);
  font-size: 11px;
}

.ss-booking-prototype .qty-control {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ss-booking-prototype .qty-control button {
  width: 31px;
  height: 31px;
  border: 1px solid var(--ss-ink);
  background: #fff;
  color: var(--ss-ink);
  font-weight: 900;
  cursor: pointer;
}

.ss-booking-prototype .qty-control button:hover {
  background: var(--ss-sea);
}

.ss-booking-prototype .qty-control span {
  min-width: 20px;
  text-align: center;
  font-weight: 900;
}

.ss-book-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.ss-booking-prototype input,
.ss-booking-prototype textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 12px;
  border: 1px solid rgba(16,40,58,.38);
  border-radius: 0;
  background: #fff;
  color: var(--ss-ink);
  font: inherit;
}

.ss-booking-prototype textarea {
  min-height: 95px;
  resize: vertical;
}

.ss-booking-prototype input:focus,
.ss-booking-prototype textarea:focus {
  outline: 3px solid rgba(35,153,187,.22);
  border-color: var(--ss-sea);
}

.ss-booking-prototype input[aria-invalid="true"] {
  border-color: #b53a2f;
  background: #fff2ef;
}

.ss-book-required::after {
  content: " *";
  color: #b53a2f;
}

.ss-book-pay-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin: 8px 0 17px;
}

.ss-booking-prototype .pay-opt {
  min-height: 46px;
  text-align: center;
  font-weight: 900;
}

.ss-book-summary {
  overflow: hidden;
  border: 1px solid rgba(16,40,58,.25);
  background: rgba(143,210,229,.22);
}

.ss-booking-prototype .summary-header {
  padding: 14px;
  border-bottom: 1px solid rgba(16,40,58,.18);
}

.ss-booking-prototype .summary-header strong,
.ss-booking-prototype .summary-header span {
  display: block;
}

.ss-booking-prototype .summary-header span {
  margin-top: 3px;
  color: var(--book-muted);
  font-size: 12px;
}

.ss-booking-prototype .summary-body {
  padding: 11px 14px;
}

.ss-booking-prototype .summary-line,
.ss-booking-prototype .summary-total {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.ss-booking-prototype .summary-line {
  padding: 5px 0;
  font-size: 12px;
}

.ss-booking-prototype .summary-total {
  margin-top: 7px;
  padding-top: 11px;
  border-top: 1px solid rgba(16,40,58,.2);
  font-size: 17px;
  font-weight: 900;
}

.ss-book-terms-box {
  margin-top: 15px;
  padding: 14px;
  border: 1px solid var(--book-border);
  background: var(--ss-foam);
}

.ss-book-terms-box p {
  margin: 0 0 11px;
  color: var(--book-muted);
  font-size: 11px;
  line-height: 1.5;
}

.ss-book-terms-check {
  display: flex !important;
  align-items: flex-start;
  gap: 9px;
  margin: 0 !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
}

.ss-book-terms-check input {
  width: auto;
  min-height: 0;
  margin-top: 2px;
}

.ss-book-btn {
  min-height: 42px;
  padding: 10px 15px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
  color: var(--ss-ink);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.ss-book-btn:hover,
.ss-book-btn:focus-visible {
  background: var(--ss-sea);
}

.ss-book-btn--primary {
  background: var(--ss-ink);
  color: var(--ss-foam);
}

.ss-book-btn--full {
  width: 100%;
  margin-top: 16px;
}

.ss-book-confirm-box {
  text-align: center;
}

.ss-book-confirm-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ss-sea);
  font-size: 29px;
  font-weight: 900;
}

.ss-book-confirm-box h3 {
  margin: 0;
  font-size: clamp(34px, 5vw, 65px);
  text-transform: uppercase;
  letter-spacing: -.04em;
}

.ss-book-confirm-details {
  max-width: 580px;
  margin: 22px auto;
  padding: 18px;
  background: var(--ss-foam);
  text-align: left;
  line-height: 1.7;
}

/* Never show a blank confirmation-summary bar if a browser/payment flow
   reaches the success panel without usable detail text. */
.ss-book-confirm-details:empty {
  display: none;
}

.ss-book-toast-holder {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999;
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.ss-booking-prototype .toast {
  max-width: min(420px, calc(100vw - 36px));
  padding: 12px 15px;
  background: var(--ss-ink);
  color: var(--ss-foam);
  font-size: 13px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

@media (max-width: 950px) {
  .ss-book-checkout-layout {
    grid-template-columns: 1fr;
  }

  .ss-book-checkout-side {
    position: static;
  }

  .ss-book-extras-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .ss-book-room-picker,
  .ss-book-session-picker,
  .ss-book-row {
    grid-template-columns: 1fr;
  }

  .ss-book-week-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .ss-book-week-label {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .ss-book-card {
    padding: 20px;
  }
}


/* ==========================================================
   v1.36 — Simplified Rehearsals page
   ========================================================== */

.ss-rehearsal-hero--simple .ss-rehearsal-hero-grid {
  min-height: 590px;
}

.ss-rehearsal-hero--simple .ss-rehearsal-title {
  font-size: clamp(72px, 8vw, 124px);
}

.ss-rehearsal-hero--simple .ss-rehearsal-intro {
  max-width: 650px;
}

.ss-rehearsal-strip--simple > div {
  font-size: clamp(13px, 1.35vw, 18px);
}

.ss-rehearsal-rooms-simple {
  background: var(--ss-paper);
}

.ss-rehearsal-simple-heading {
  display: grid;
  grid-template-columns: 1fr .72fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 62px);
}

.ss-rehearsal-room-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
}

.ss-rehearsal-room-card {
  border: 2px solid var(--ss-ink);
  background: var(--ss-foam);
}

.ss-rehearsal-room-card figure {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 2px solid var(--ss-ink);
}

.ss-rehearsal-room-card figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ss-rehearsal-room-card-body {
  padding: clamp(22px, 3vw, 34px);
}

.ss-rehearsal-room-card-head {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: flex-start;
}

.ss-rehearsal-room-card-head span {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .58;
}

.ss-rehearsal-room-card-head h3 {
  margin: 0;
  font-size: clamp(48px, 5vw, 76px);
  line-height: .85;
  letter-spacing: -.055em;
}

.ss-rehearsal-room-card-head > strong {
  padding-top: 5px;
  font-size: 12px;
  text-transform: uppercase;
  white-space: nowrap;
}

.ss-rehearsal-room-card-body > p {
  max-width: 560px;
  margin: 20px 0 0;
}

.ss-rehearsal-included-simple {
  margin-top: 26px;
  padding: 22px 25px;
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 24px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-sky);
}

.ss-rehearsal-included-simple span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ss-rehearsal-included-simple p {
  margin: 0;
  font-weight: 750;
}

.ss-rehearsal-extras-simple {
  background: var(--ss-foam);
}

.ss-rehearsal-extra-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 2px solid var(--ss-ink);
}

.ss-rehearsal-extra-cards article {
  min-height: 235px;
  padding: clamp(22px, 2.5vw, 32px);
  display: flex;
  flex-direction: column;
}

.ss-rehearsal-extra-cards article + article {
  border-left: 1px solid rgba(16,40,58,.28);
}

.ss-rehearsal-extra-cards span {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.ss-rehearsal-extra-cards strong {
  margin: auto 0 14px;
  color: var(--ss-sea);
  font-size: clamp(42px, 4vw, 62px);
  line-height: .85;
  letter-spacing: -.04em;
}

.ss-rehearsal-extra-cards p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.ss-rehearsal-facilities-simple {
  padding: 0;
  background: var(--ss-ink);
  color: var(--ss-foam);
}

.ss-rehearsal-facilities-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ss-rehearsal-facilities-grid > div {
  min-height: 135px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ss-rehearsal-facilities-grid > div + div {
  border-left: 1px solid rgba(244,240,230,.22);
}

.ss-rehearsal-facilities-grid strong {
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1;
  text-transform: uppercase;
}

.ss-rehearsal-facilities-grid span {
  margin-top: 7px;
  color: rgba(244,240,230,.68);
  font-size: 12px;
}

@media (max-width: 1050px) {
  .ss-rehearsal-simple-heading {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .ss-rehearsal-extra-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ss-rehearsal-extra-cards article:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(16,40,58,.28);
  }

  .ss-rehearsal-extra-cards article:nth-child(4) {
    border-top: 1px solid rgba(16,40,58,.28);
  }

  .ss-rehearsal-facilities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ss-rehearsal-facilities-grid > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(244,240,230,.22);
  }

  .ss-rehearsal-facilities-grid > div:nth-child(4) {
    border-top: 1px solid rgba(244,240,230,.22);
  }
}

@media (max-width: 700px) {
  .ss-rehearsal-room-cards,
  .ss-rehearsal-extra-cards,
  .ss-rehearsal-facilities-grid {
    grid-template-columns: 1fr;
  }

  .ss-rehearsal-extra-cards article + article,
  .ss-rehearsal-extra-cards article:nth-child(3),
  .ss-rehearsal-extra-cards article:nth-child(4),
  .ss-rehearsal-facilities-grid > div + div,
  .ss-rehearsal-facilities-grid > div:nth-child(3),
  .ss-rehearsal-facilities-grid > div:nth-child(4) {
    border-left: 0;
    border-top: 1px solid rgba(16,40,58,.28);
  }

  .ss-rehearsal-facilities-grid > div + div,
  .ss-rehearsal-facilities-grid > div:nth-child(3),
  .ss-rehearsal-facilities-grid > div:nth-child(4) {
    border-top-color: rgba(244,240,230,.22);
  }

  .ss-rehearsal-included-simple {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ss-rehearsal-extra-cards article {
    min-height: 180px;
  }
}


/* ==========================================================
   v1.37 — Rehearsal prototype payment methods
   Apple Pay / Google Pay / Card / PayPal visual mock
   ========================================================== */

.ss-book-payment-block {
  margin-top: 4px;
}

.ss-book-payment-label {
  display: block;
  margin: 0 0 9px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(16,40,58,.62);
}

.ss-book-wallet-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.ss-booking-prototype .wallet-opt {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 15px;
  border: 2px solid var(--ss-ink);
  border-radius: 7px;
  font: inherit;
  font-size: 18px;
  font-weight: 750;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.ss-booking-prototype .wallet-opt:hover {
  transform: translateY(-1px);
}

.ss-booking-prototype .wallet-opt--apple {
  background: #000;
  color: #fff;
}

.ss-booking-prototype .wallet-opt--google {
  background: #fff;
  color: #202124;
}

.ss-booking-prototype .wallet-opt.selected {
  border-color: var(--ss-sea);
  box-shadow: 0 0 0 3px rgba(35,153,187,.22);
}

.wallet-apple-mark {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 23px;
  line-height: 1;
}

.wallet-google-g {
  width: 25px;
  height: 25px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #4285f4;
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.ss-book-payment-divider {
  position: relative;
  margin: 18px 0 15px;
  text-align: center;
}

.ss-book-payment-divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid rgba(16,40,58,.2);
}

.ss-book-payment-divider span {
  position: relative;
  display: inline-block;
  padding: 0 11px;
  background: var(--ss-paper);
  color: rgba(16,40,58,.48);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ss-booking-prototype .ss-book-pay-options {
  margin-bottom: 9px;
}

.ss-booking-prototype .pay-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.payment-icon {
  font-size: 17px;
  line-height: 1;
}

.payment-paypal {
  font-weight: 900;
  letter-spacing: -.02em;
}

.ss-book-wallet-note {
  margin: 8px 0 17px;
  color: rgba(16,40,58,.5);
  font-size: 10px;
  line-height: 1.4;
}

@media (max-width: 430px) {
  .ss-book-wallet-options {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================
   v1.38 — Manager + Staff calendar prototypes
   ========================================================== */

body.ss26-manager-calendar-route .site-header .ss-brand,
body.ss26-staff-calendar-route .site-header .ss-brand {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.ss-staff-prototype {
  min-height: 80vh;
  padding: clamp(40px, 5vw, 70px) 0 clamp(80px, 9vw, 130px);
  background: var(--ss-foam);
}

.ss-staff-prototype-alert {
  margin-bottom: 28px;
  padding: 14px 17px;
  display: flex;
  gap: 15px;
  align-items: flex-start;
  border: 1px solid rgba(16,40,58,.35);
  background: #fff8e6;
  font-size: 12px;
}

.ss-staff-prototype-alert strong {
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ss-staff-prototype-head {
  margin-bottom: 34px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: flex-end;
}

.ss-staff-prototype-head h1 {
  margin: 0;
  font-size: clamp(68px, 9vw, 130px);
  line-height: .78;
  letter-spacing: -.065em;
  text-transform: uppercase;
}

.ss-staff-prototype-head p:not(.ss-eyebrow) {
  max-width: 700px;
  margin: 22px 0 0;
  font-size: clamp(16px, 1.4vw, 20px);
}

.ss-manager-prototype [hidden] {
  display: none !important;
}


.ss-manager-toolbar {
  display: grid;
  grid-template-columns: 130px 1fr 130px;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.ss-manager-nav-btn {
  min-height: 42px;
  padding: 10px 13px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
  color: var(--ss-ink);
  font-weight: 900;
  cursor: pointer;
}

.ss-manager-nav-btn:hover {
  background: var(--ss-sea);
}

.ss-manager-week-label {
  text-align: center;
  font-weight: 900;
  text-transform: uppercase;
}

.ss-manager-legend {
  margin-bottom: 17px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: 11px;
  font-weight: 800;
}

.ss-manager-legend span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}

.ss-manager-legend i {
  width: 11px;
  height: 11px;
  display: inline-block;
  border-radius: 50%;
}

.is-recording { --booking-accent: #d97652; }
.is-room1 { --booking-accent: var(--ss-sea); }
.is-room2 { --booking-accent: var(--ss-ink-2); }
.is-project { --booking-accent: #7758a6; }
.is-blocked { --booking-accent: #8c8b87; }

.ss-manager-legend .is-recording,
.ss-manager-legend .is-room1,
.ss-manager-legend .is-room2,
.ss-manager-legend .is-project,
.ss-manager-legend .is-blocked {
  background: var(--booking-accent);
}

.ss-manager-calendar-card,
.ss-manager-day-panel {
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
}

.ss-manager-calendar-card {
  margin-bottom: 28px;
}

.ss-manager-calendar-scroll {
  overflow-x: auto;
}

.ss-manager-week-grid {
  min-width: 980px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.ss-manager-day-column {
  min-height: 420px;
  padding: 0;
  border: 0;
  border-right: 1px solid rgba(16,40,58,.18);
  background: #fff;
  color: var(--ss-ink);
  text-align: left;
  cursor: pointer;
}

.ss-manager-day-column:last-child {
  border-right: 0;
}

.ss-manager-day-column:hover,
.ss-manager-day-column.selected {
  background: rgba(143,210,229,.14);
}

.ss-manager-day-name {
  display: block;
  padding: 13px 12px 0;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
}

.ss-manager-day-column > strong {
  display: block;
  padding: 0 12px 12px;
  font-size: 32px;
  line-height: 1;
}

.ss-manager-day-bookings {
  border-top: 1px solid rgba(16,40,58,.18);
}

.ss-manager-mini-booking {
  margin: 9px;
  padding: 9px 10px;
  display: block;
  border-left: 5px solid var(--booking-accent);
  background: var(--ss-foam);
}

.ss-manager-mini-booking b,
.ss-manager-mini-booking em,
.ss-manager-mini-booking small {
  display: block;
}

.ss-manager-mini-booking b {
  font-size: 10px;
}

.ss-manager-mini-booking em {
  margin-top: 4px;
  overflow: hidden;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-manager-mini-booking small {
  margin-top: 4px;
  opacity: .58;
}

.ss-manager-empty {
  display: block;
  padding: 18px 12px;
  color: rgba(16,40,58,.3);
  font-size: 10px;
}

.ss-manager-day-panel {
  padding: clamp(24px, 4vw, 42px);
}

.ss-manager-day-panel-head {
  margin-bottom: 18px;
}

.ss-manager-day-panel h2 {
  margin: 0;
  font-size: clamp(38px, 5vw, 68px);
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.ss-manager-booking-row {
  padding: 18px 0;
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 24px;
  align-items: center;
  border-top: 1px solid rgba(16,40,58,.18);
  border-left: 7px solid var(--booking-accent);
  padding-left: 18px;
}

.ss-manager-booking-time strong,
.ss-manager-booking-time span {
  display: block;
}

.ss-manager-booking-time strong {
  font-size: 24px;
}

.ss-manager-booking-time span {
  font-size: 11px;
  opacity: .5;
}

.ss-manager-booking-main > span {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .52;
}

.ss-manager-booking-main h3 {
  margin: 4px 0 6px;
  font-size: 24px;
}

.ss-manager-booking-main p {
  margin: 0;
  font-size: 13px;
}

.ss-manager-booking-meta {
  display: grid;
  gap: 7px;
  justify-items: end;
  font-size: 11px;
}

.ss-manager-status {
  padding: 4px 8px;
  border: 1px solid rgba(16,40,58,.25);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.ss-manager-empty-state {
  padding: 35px 0;
  color: rgba(16,40,58,.5);
}

.ss-manager-modal[hidden] {
  display: none !important;
}

.ss-manager-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 20px;
}

.ss-manager-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16,40,58,.72);
}

.ss-manager-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(780px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: clamp(26px, 4vw, 46px);
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
  box-shadow: 12px 14px 0 var(--ss-sea);
}

.ss-manager-modal-dialog h2 {
  margin: 0 0 24px;
  font-size: clamp(38px, 5vw, 62px);
  line-height: .88;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.ss-manager-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: transparent;
  font-size: 32px;
  cursor: pointer;
}

.ss-manager-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

.ss-manager-modal label {
  display: block;
  margin: 12px 0 5px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.ss-manager-modal input,
.ss-manager-modal select,
.ss-manager-modal textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid rgba(16,40,58,.38);
  background: #fff;
  color: var(--ss-ink);
  font: inherit;
}

.ss-manager-modal textarea {
  min-height: 80px;
  resize: vertical;
}

.ss-manager-modal-actions {
  margin-top: 22px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

body.ss-modal-open {
  overflow: hidden;
}

/* Staff shift view */

.ss-shift-head {
  align-items: flex-end;
}

.ss-shift-view-switch {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  border: 2px solid var(--ss-ink);
}

.ss-shift-view-switch button {
  min-width: 95px;
  min-height: 42px;
  border: 0;
  background: var(--ss-paper);
  color: var(--ss-ink);
  font-weight: 900;
  cursor: pointer;
}

.ss-shift-view-switch button + button {
  border-left: 1px solid var(--ss-ink);
}

.ss-shift-view-switch button.active {
  background: var(--ss-ink);
  color: var(--ss-foam);
}

.ss-shift-date-nav {
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  gap: 14px;
  align-items: center;
}

.ss-shift-date-nav button {
  width: 52px;
  height: 52px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
  font-size: 20px;
  cursor: pointer;
}

.ss-shift-date-nav > div {
  text-align: center;
}

.ss-shift-date-nav span,
.ss-shift-date-nav strong {
  display: block;
}

.ss-shift-date-nav span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
  opacity: .52;
}

.ss-shift-date-nav strong {
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1;
  text-transform: uppercase;
}

.ss-shift-timeline {
  border-top: 2px solid var(--ss-ink);
}

.ss-shift-booking {
  min-height: 165px;
  padding: 24px 0;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: clamp(25px, 5vw, 70px);
  border-bottom: 1px solid rgba(16,40,58,.22);
  border-left: 9px solid var(--booking-accent);
  padding-left: 22px;
}

.ss-shift-time strong,
.ss-shift-time span {
  display: block;
}

.ss-shift-time strong {
  font-size: clamp(38px, 5vw, 65px);
  line-height: .85;
  letter-spacing: -.04em;
}

.ss-shift-time span {
  margin-top: 5px;
  font-size: 12px;
  opacity: .5;
}

.ss-shift-booking-content > span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .55;
}

.ss-shift-booking-content h2 {
  margin: 5px 0 14px;
  font-size: clamp(32px, 4vw, 54px);
  line-height: .92;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.ss-shift-setup {
  padding: 13px 15px;
  background: var(--ss-paper);
}

.ss-shift-setup strong {
  display: block;
  margin-bottom: 3px;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ss-shift-setup p,
.ss-shift-staff {
  margin: 0;
  font-size: 13px;
}

.ss-shift-staff {
  margin-top: 10px;
}

.ss-shift-empty {
  padding: 60px 20px;
  text-align: center;
}

.ss-shift-empty strong,
.ss-shift-empty span {
  display: block;
}

.ss-shift-empty strong {
  font-size: 30px;
  text-transform: uppercase;
}

.ss-shift-empty span {
  margin-top: 5px;
  opacity: .5;
}

.ss-shift-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
  overflow-x: auto;
}

.ss-shift-week-day {
  min-width: 135px;
  border-right: 1px solid rgba(16,40,58,.2);
}

.ss-shift-week-day:last-child {
  border-right: 0;
}

.ss-shift-week-day-head {
  padding: 12px;
  background: var(--ss-ink);
  color: var(--ss-foam);
}

.ss-shift-week-day-head span,
.ss-shift-week-day-head strong {
  display: block;
}

.ss-shift-week-day-head span {
  font-size: 9px;
  text-transform: uppercase;
}

.ss-shift-week-day-head strong {
  font-size: 28px;
}

.ss-shift-week-day-body {
  min-height: 300px;
  padding: 8px;
}

.ss-shift-week-item {
  margin-bottom: 8px;
  padding: 9px;
  border-left: 5px solid var(--booking-accent);
  background: var(--ss-foam);
}

.ss-shift-week-item strong,
.ss-shift-week-item span,
.ss-shift-week-item small {
  display: block;
}

.ss-shift-week-item strong {
  font-size: 10px;
}

.ss-shift-week-item span {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 900;
}

.ss-shift-week-item small {
  margin-top: 3px;
  opacity: .55;
}

.ss-shift-week-none {
  display: block;
  padding: 12px;
  text-align: center;
  opacity: .25;
}

@media (max-width: 800px) {
  .ss-staff-prototype-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .ss-manager-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .ss-manager-week-label {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .ss-manager-booking-row {
    grid-template-columns: 85px 1fr;
  }

  .ss-manager-booking-meta {
    grid-column: 2;
    justify-items: start;
  }

  .ss-manager-form-grid {
    grid-template-columns: 1fr;
  }

  .ss-shift-booking {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}


/* ==========================================================
   v1.39 — Day / Week / Month calendar views
   ========================================================== */

.ss-calendar-head-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ss-calendar-head-actions .ss-shift-view-switch {
  grid-template-columns: repeat(3, 1fr);
}

.ss-shift-view-switch {
  grid-template-columns: repeat(3, 1fr);
}

.ss-shift-view-switch button {
  min-width: 78px;
}

/* Manager month */

.ss-manager-month-grid {
  min-width: 940px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.ss-manager-month-weekday {
  padding: 11px 10px;
  background: var(--ss-ink);
  color: var(--ss-foam);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}

.ss-manager-month-day {
  min-height: 145px;
  padding: 10px;
  border: 0;
  border-right: 1px solid rgba(16,40,58,.18);
  border-bottom: 1px solid rgba(16,40,58,.18);
  background: #fff;
  color: var(--ss-ink);
  text-align: left;
  cursor: pointer;
}

.ss-manager-month-day:hover,
.ss-manager-month-day.selected {
  background: rgba(143,210,229,.14);
}

.ss-manager-month-day.outside {
  background: #f3f1eb;
  color: rgba(16,40,58,.36);
}

.ss-manager-month-day > strong {
  display: block;
  margin-bottom: 9px;
  font-size: 18px;
}

.ss-manager-month-items {
  display: grid;
  gap: 5px;
}

.ss-manager-month-items > span {
  overflow: hidden;
  display: block;
  padding: 4px 5px;
  border-left: 4px solid var(--booking-accent);
  background: var(--ss-foam);
  font-size: 9px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-manager-month-items > span i {
  display: none;
}

.ss-manager-month-items > span b {
  margin-right: 3px;
}

.ss-manager-month-items > small {
  font-size: 9px;
  opacity: .5;
}

/* Staff month */

.ss-staff-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
  overflow-x: auto;
}

.ss-staff-month-weekday {
  min-width: 110px;
  padding: 11px 8px;
  background: var(--ss-ink);
  color: var(--ss-foam);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}

.ss-staff-month-day {
  min-width: 110px;
  min-height: 112px;
  padding: 10px;
  border: 0;
  border-right: 1px solid rgba(16,40,58,.18);
  border-bottom: 1px solid rgba(16,40,58,.18);
  background: #fff;
  color: var(--ss-ink);
  text-align: left;
  cursor: pointer;
}

.ss-staff-month-day:hover {
  background: rgba(143,210,229,.14);
}

.ss-staff-month-day.outside {
  background: #f3f1eb;
  color: rgba(16,40,58,.35);
}

.ss-staff-month-day > strong {
  display: block;
  font-size: 18px;
}

.ss-staff-month-day > span {
  display: block;
  margin-top: 8px;
  font-size: 9px;
  font-weight: 800;
  opacity: .55;
}

.ss-staff-month-dots {
  min-height: 20px;
  margin-top: 11px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ss-staff-month-dots i {
  width: 10px;
  height: 10px;
  display: block;
  border-radius: 50%;
  background: var(--booking-accent);
}

/* Week headings are buttons now in staff view */
button.ss-shift-week-day-head {
  width: 100%;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

button.ss-shift-week-day-head:hover {
  background: var(--ss-ink-2);
}

@media (max-width: 800px) {
  .ss-calendar-head-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .ss-manager-menu-primary,
  .ss-manager-menu-secondary {
    width: 100%;
    justify-content: flex-start;
  }

  .ss-calendar-head-actions .ss-btn {
    width: auto;
  }

  .ss-manager-menu-secondary .ss-btn,
  .ss-manager-menu-secondary .ss-portal-logout {
    flex: 1 1 auto;
    text-align: center;
  }

  .ss-shift-view-switch {
    width: 100%;
  }

  .ss-shift-view-switch button {
    min-width: 0;
  }
}


/* ==========================================================
   v1.40 — Staff week header contrast fix
   ========================================================== */

button.ss-shift-week-day-head {
  background: var(--ss-ink);
  color: var(--ss-foam) !important;
}

button.ss-shift-week-day-head span,
button.ss-shift-week-day-head strong {
  color: var(--ss-foam) !important;
  opacity: 1;
}

button.ss-shift-week-day-head span {
  color: rgba(244,240,230,.78) !important;
}

button.ss-shift-week-day-head:hover,
button.ss-shift-week-day-head:focus-visible {
  background: var(--ss-ink-2);
  color: var(--ss-paper) !important;
}

button.ss-shift-week-day-head:hover span,
button.ss-shift-week-day-head:hover strong,
button.ss-shift-week-day-head:focus-visible span,
button.ss-shift-week-day-head:focus-visible strong {
  color: var(--ss-paper) !important;
}


/* ==========================================================
   v1.41 — Manager booking rules + edit/cancel controls
   ========================================================== */

.ss-manager-form-wide {
  grid-column: 1 / -1;
}

.ss-manager-form-help {
  margin: 6px 0 0;
  color: rgba(16,40,58,.58);
  font-size: 10px;
  line-height: 1.4;
}

.ss-manager-source {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .56;
}

.ss-manager-row-actions {
  display: flex;
  gap: 6px;
  margin-top: 3px;
}

.ss-manager-row-actions button {
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid var(--ss-ink);
  background: var(--ss-paper);
  color: var(--ss-ink);
  font: inherit;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.ss-manager-row-actions .ss-manager-edit-btn:hover {
  background: var(--ss-sky);
}

.ss-manager-row-actions .ss-manager-cancel-btn:hover {
  background: var(--ss-ink);
  color: var(--ss-paper);
}

@media (max-width: 800px) {
  .ss-manager-form-wide {
    grid-column: auto;
  }

  .ss-manager-row-actions {
    flex-wrap: wrap;
  }
}


/* ==========================================================
   v1.42 — richer Week / Month calendar tiles + solo cut-off
   ========================================================== */

.ss-manager-mini-booking .ss-mini-detail {
  margin-top: 4px;
  font-size: 8px;
  line-height: 1.25;
  opacity: .58;
  white-space: normal;
}

.ss-manager-month-items > span {
  white-space: normal;
}

.ss-manager-month-items > span small {
  display: block;
  margin-top: 2px;
  font-size: 8px;
  opacity: .55;
}

.ss-shift-week-item {
  padding: 10px;
}

.ss-shift-week-item .ss-shift-week-detail {
  margin-top: 5px;
  font-size: 8px;
  line-height: 1.3;
  opacity: .56;
}

.ss-staff-month-day {
  min-height: 145px;
}

.ss-staff-month-items {
  margin-top: 8px;
  display: grid;
  gap: 5px;
}

.ss-staff-month-items > span {
  padding: 5px 6px;
  display: block;
  border-left: 4px solid var(--booking-accent);
  background: var(--ss-foam);
  line-height: 1.18;
}

.ss-staff-month-items > span b,
.ss-staff-month-items > span em,
.ss-staff-month-items > span small {
  display: block;
}

.ss-staff-month-items > span b {
  font-size: 9px;
}

.ss-staff-month-items > span em {
  margin-top: 2px;
  overflow: hidden;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-staff-month-items > span small {
  margin-top: 2px;
  font-size: 8px;
  opacity: .52;
}

.ss-staff-month-more {
  font-size: 8px;
  opacity: .5;
}

@media (max-width: 800px) {
  .ss-manager-mini-booking .ss-mini-detail,
  .ss-shift-week-item .ss-shift-week-detail {
    display: none;
  }
}


/* ==========================================================
   v1.43 — Booking contact details
   ========================================================== */

.ss-manager-contact-summary {
  margin: 9px 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 13px;
  font-size: 10px;
  line-height: 1.4;
  color: rgba(16,40,58,.7);
}

.ss-manager-contact-summary span {
  display: inline-block;
}

.ss-shift-contact {
  margin-top: 10px;
  padding: 13px 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 15px;
  align-items: center;
  border: 1px solid rgba(16,40,58,.18);
  background: var(--ss-sky);
}

.ss-shift-contact > strong {
  flex: 0 0 100%;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ss-shift-contact span,
.ss-shift-contact a {
  font-size: 13px;
  font-weight: 750;
  color: var(--ss-ink);
}

.ss-shift-contact a {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

@media (max-width: 620px) {
  .ss-shift-contact {
    align-items: flex-start;
    flex-direction: column;
  }

  .ss-shift-contact > strong {
    flex-basis: auto;
  }
}


/* ==========================================================
   v1.45 — Manager notification prototype
   ========================================================== */

.ss-manager-notification-box {
  margin-top: 20px;
  padding: 18px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-sky);
}

.ss-manager-notification-title {
  display: block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ss-manager-notification-box > div > p {
  margin: 4px 0 12px;
  font-size: 11px;
}

.ss-manager-check-row {
  margin: 8px 0 !important;
  display: flex !important;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
}

.ss-manager-check-row input {
  width: 18px !important;
  min-height: 18px !important;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
}

.ss-manager-check-row input:disabled + span {
  opacity: .48;
}

.ss-manager-notification-note {
  margin: 10px 0 0;
  font-size: 9px;
  opacity: .58;
}

.ss-manager-booking-ref {
  padding: 3px 6px;
  border: 1px solid rgba(16,40,58,.24);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
}

.ss-manager-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10000;
  width: min(390px, calc(100vw - 40px));
  padding: 17px 18px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
  color: var(--ss-ink);
  box-shadow: 8px 9px 0 var(--ss-sea);
}

.ss-manager-toast strong,
.ss-manager-toast span,
.ss-manager-toast small {
  display: block;
}

.ss-manager-toast strong {
  margin-bottom: 7px;
  font-size: 14px;
  text-transform: uppercase;
}

.ss-manager-toast span {
  font-size: 11px;
  line-height: 1.5;
}

.ss-manager-toast small {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(16,40,58,.15);
  font-size: 9px;
  opacity: .5;
}


/* ==========================================================
   v1.46 — Email template previews
   ========================================================== */

body.ss26-email-preview-route .site-header .ss-brand {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.ss-email-preview-page {
  padding: clamp(42px, 6vw, 78px) 0 clamp(90px, 10vw, 150px);
  background: var(--ss-foam);
}

.ss-email-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 35px;
  align-items: flex-end;
  margin-bottom: 36px;
}

.ss-email-preview-head h1 {
  margin: 0;
  font-size: clamp(66px, 9vw, 126px);
  line-height: .78;
  letter-spacing: -.065em;
  text-transform: uppercase;
}

.ss-email-preview-head p:not(.ss-eyebrow) {
  max-width: 700px;
  margin: 22px 0 0;
  font-size: clamp(16px, 1.4vw, 20px);
}

.ss-email-preview-controls {
  margin-bottom: 17px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.ss-email-preview-switch {
  display: inline-grid;
  grid-auto-flow: column;
  border: 2px solid var(--ss-ink);
}

.ss-email-preview-switch button {
  min-height: 42px;
  padding: 9px 18px;
  border: 0;
  border-right: 1px solid var(--ss-ink);
  background: var(--ss-paper);
  color: var(--ss-ink);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.ss-email-preview-switch button:last-child {
  border-right: 0;
}

.ss-email-preview-switch button.active {
  background: var(--ss-ink);
  color: var(--ss-foam);
}

.ss-email-preview-meta {
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
}

.ss-email-preview-meta > div {
  padding: 15px 18px;
}

.ss-email-preview-meta > div + div {
  border-left: 1px solid rgba(16,40,58,.2);
}

.ss-email-preview-meta span,
.ss-email-preview-meta strong {
  display: block;
}

.ss-email-preview-meta span {
  margin-bottom: 4px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .48;
}

.ss-email-preview-meta strong {
  font-size: 13px;
}

.ss-email-preview-stage {
  padding: clamp(18px, 4vw, 55px);
  background: var(--ss-ink);
}

.ss-email-preview-browser {
  max-width: 790px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  background: #e8e8e8;
  box-shadow: 13px 15px 0 var(--ss-sea);
}

.ss-email-preview-browserbar {
  min-height: 44px;
  padding: 0 14px;
  display: flex;
  gap: 7px;
  align-items: center;
  background: #d5d5d5;
  color: #555;
}

.ss-email-preview-browserbar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #999;
}

.ss-email-preview-browserbar span {
  margin-left: 8px;
  font-size: 10px;
}

.mail-shell {
  padding: 30px 14px;
  background: #ecebe7;
  color: #10283a;
  font-family: Arial, Helvetica, sans-serif;
}

.mail-inner {
  width: min(620px, 100%);
  margin: 0 auto;
  background: #fffdf7;
}

.mail-top {
  padding: 22px 28px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  background: #10283a;
  color: #f4f0e6;
}

.mail-logo {
  line-height: .84;
}

.mail-logo span,
.mail-logo strong {
  display: block;
}

.mail-logo span {
  font-size: 9px;
  letter-spacing: .16em;
}

.mail-logo strong {
  font-size: 24px;
  letter-spacing: -.05em;
}

.mail-kicker {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
}

.mail-hero {
  padding: 34px 28px 30px;
  background: #8fd2e5;
  border-bottom: 2px solid #10283a;
}

.mail-hero h2 {
  margin: 0;
  color: #10283a;
  font-size: clamp(34px, 6vw, 54px);
  line-height: .9;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.mail-inner > p,
.mail-inner > .mail-lead,
.mail-inner > .mail-booking-card,
.mail-inner > .mail-change,
.mail-inner > .mail-notice,
.mail-inner > .mail-internal {
  margin-left: 28px;
  margin-right: 28px;
}

.mail-inner > p {
  margin-top: 18px;
  margin-bottom: 18px;
  color: #304a5b;
  font-size: 14px;
  line-height: 1.6;
}

.mail-inner > .mail-lead {
  margin-top: 27px;
  margin-bottom: -3px;
  color: #10283a;
  font-size: 19px;
  font-weight: 800;
}

.mail-booking-card {
  width: calc(100% - 56px);
  margin-top: 25px;
  margin-bottom: 25px;
  border-collapse: collapse;
  border: 2px solid #10283a;
}

.mail-booking-card td {
  padding: 11px 13px;
  border-bottom: 1px solid #d9ddd9;
  vertical-align: top;
  font-size: 12px;
  line-height: 1.4;
}

.mail-booking-card tr:last-child td {
  border-bottom: 0;
}

.mail-booking-card td:first-child {
  width: 34%;
  color: #5d6e78;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.mail-booking-card td:last-child {
  font-weight: 750;
}

.mail-change {
  margin-top: 25px;
  margin-bottom: 25px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 2px solid #10283a;
}

.mail-change > div {
  padding: 18px;
}

.mail-change > div + div {
  border-left: 2px solid #10283a;
  background: #8fd2e5;
}

.mail-change span,
.mail-change strong,
.mail-change p {
  display: block;
}

.mail-change span {
  margin-bottom: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .55;
}

.mail-change strong {
  font-size: 15px;
}

.mail-change p {
  margin: 5px 0 0;
  font-size: 14px;
}

.mail-notice,
.mail-internal {
  margin-top: 24px;
  margin-bottom: 24px;
  padding: 15px 17px;
  border-left: 5px solid #2399bb;
  background: #f4f0e6;
}

.mail-internal {
  border-left-color: #7758a6;
}

.mail-notice strong,
.mail-internal span {
  display: block;
  margin-bottom: 5px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mail-notice p,
.mail-internal p {
  margin: 0;
  color: #304a5b;
  font-size: 12px;
  line-height: 1.5;
}

.mail-footer {
  margin-top: 32px;
  padding: 22px 28px;
  background: #10283a;
  color: #f4f0e6;
}

.mail-footer strong,
.mail-footer span,
.mail-footer small {
  display: block;
}

.mail-footer strong {
  font-size: 16px;
  text-transform: uppercase;
}

.mail-footer span {
  margin-top: 3px;
  font-size: 11px;
  opacity: .74;
}

.mail-footer small {
  margin-top: 13px;
  font-size: 9px;
  opacity: .45;
}

.ss-email-preview-rules {
  margin-top: 35px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.ss-email-preview-rules > div {
  padding: clamp(24px, 4vw, 38px);
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
}

.ss-email-preview-rules h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  line-height: .92;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.ss-email-preview-rules p:last-child {
  margin: 15px 0 0;
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 800px) {
  .ss-email-preview-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .ss-email-preview-controls,
  .ss-email-preview-switch {
    width: 100%;
  }

  .ss-email-preview-switch {
    grid-auto-flow: initial;
    grid-template-columns: repeat(3, 1fr);
  }

  .ss-email-preview-switch:last-child {
    grid-template-columns: repeat(2, 1fr);
  }

  .ss-email-preview-meta,
  .ss-email-preview-rules {
    grid-template-columns: 1fr;
  }

  .ss-email-preview-meta > div + div {
    border-left: 0;
    border-top: 1px solid rgba(16,40,58,.2);
  }

  .mail-change {
    grid-template-columns: 1fr;
  }

  .mail-change > div + div {
    border-left: 0;
    border-top: 2px solid #10283a;
  }
}


/* ==========================================================
   v1.47 — Real logo in email preview templates
   ========================================================== */

.mail-logo img {
  display: block;
  width: auto;
  max-width: 180px;
  max-height: 52px;
  height: auto;
}

.mail-top {
  align-items: center;
}

@media (max-width: 560px) {
  .mail-logo img {
    max-width: 145px;
    max-height: 44px;
  }
}


/* ==========================================================
   v1.48 — Website link in email footer
   ========================================================== */

.mail-footer-link {
  display: inline-block;
  margin-top: 8px;
  color: #8fd2e5;
  font-size: 11px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mail-footer-link:hover,
.mail-footer-link:focus {
  color: #fffdf7;
}


/* ==========================================================
   v1.49 — Staff Day payment status
   ========================================================== */

.ss-shift-operational-meta {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px 14px;
  align-items: center;
}

.ss-shift-payment-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--ss-ink);
  background: var(--ss-paper);
  color: var(--ss-ink);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.ss-shift-payment-status.is-paid {
  background: var(--ss-sky);
}

.ss-shift-payment-status.is-complimentary {
  background: var(--ss-foam);
}

.ss-shift-payment-status.is-unpaid {
  background: #fff4d7;
}

.ss-shift-payment-status.is-invoiced {
  background: var(--ss-paper);
}

.ss-shift-operational-meta .ss-shift-staff {
  margin: 0;
  font-size: 12px;
}


/* ==========================================================
   v1.50 — Persistent shared booking database
   ========================================================== */

.ss-calendar-login-card {
  max-width: 760px;
  padding: clamp(28px, 5vw, 52px);
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
  box-shadow: 10px 12px 0 var(--ss-sea);
}

.ss-calendar-login-card h1 {
  margin: 0;
  font-size: clamp(52px, 8vw, 96px);
  line-height: .85;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.ss-calendar-login-card p:not(.ss-eyebrow) {
  max-width: 620px;
  margin: 20px 0 26px;
  font-size: 16px;
  line-height: 1.55;
}

.ss-shift-booking-ref {
  display: block;
  margin-top: 12px;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .06em;
  opacity: .48;
}

.ss-manager-modal-actions button[disabled] {
  opacity: .55;
  cursor: wait;
}

.ss-manager-toast span {
  word-break: break-word;
}


/* ==========================================================
   v1.51 — Public calendar uses shared live availability
   ========================================================== */

.ss-live-availability-message {
  padding: 34px 18px !important;
  text-align: center !important;
  background: var(--ss-paper);
}

.ss-live-availability-message strong,
.ss-live-availability-message span {
  display: block;
}

.ss-live-availability-message strong {
  font-size: 13px;
  text-transform: uppercase;
}

.ss-live-availability-message span {
  margin-top: 5px;
  font-size: 11px;
  opacity: .55;
}


/* ==========================================================
   v1.52 — Manager Week navigation + clearer action labels
   ========================================================== */

.ss-manager-row-actions button {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .ss-manager-row-actions {
    justify-content: flex-start;
  }
}


/* ==========================================================
   v1.53 — Temporary online booking holds
   ========================================================== */

.ss-book-hold-status {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-sky);
  color: var(--ss-ink);
}

.ss-book-hold-status strong,
.ss-book-hold-status span {
  display: block;
}

.ss-book-hold-status strong {
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.ss-book-hold-status span {
  font-size: 12px;
  line-height: 1.45;
}

.ss-book-hold-status b {
  font-variant-numeric: tabular-nums;
}

.week-grid .slot-state.is-held {
  opacity: .72;
}

.week-grid .slot-state.is-held::after {
  content: ' · checkout';
  font-size: 8px;
  font-weight: 700;
  opacity: .7;
}


/* ==========================================================
   v1.55 — Manager Day blue strip
   ========================================================== */

.ss-manager-day-blue-strip {
  margin: 0 0 20px;
  padding: clamp(18px, 3vw, 28px);
  background: var(--ss-sky);
  color: var(--ss-ink);
  border: 2px solid var(--ss-ink);
}

.ss-manager-day-blue-strip .ss-eyebrow {
  margin: 0 0 5px;
  color: var(--ss-ink);
  opacity: .7;
}

.ss-manager-day-blue-strip h2 {
  margin: 0;
  color: var(--ss-ink);
  font-size: clamp(34px, 5vw, 58px);
  line-height: .9;
  letter-spacing: -.045em;
  text-transform: uppercase;
}


/* ==========================================================
   v1.56 — Stripe card test mode
   ========================================================== */

.ss-book-payment-block button.is-coming-next,
.ss-book-payment-block button:disabled.is-coming-next {
  cursor: not-allowed;
  opacity: .42;
  filter: grayscale(1);
}

.ss-stripe-test-panel {
  margin-top: 17px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
}

.ss-stripe-test-mode {
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  background: var(--ss-sky);
  border-bottom: 1px solid var(--ss-ink);
}

.ss-stripe-test-mode strong {
  flex: 0 0 auto;
  font-size: 9px;
  letter-spacing: .08em;
}

.ss-stripe-test-mode span {
  font-size: 10px;
  line-height: 1.35;
  text-align: right;
}

#stripePaymentWrap {
  padding: 15px 12px;
}

.ss-stripe-test-help {
  margin: 10px 0 0;
  font-size: 10px;
  line-height: 1.4;
  opacity: .62;
}

#stripePaymentElement {
  min-height: 42px;
}


/* ==========================================================
   v1.57 — Active checkout holds in Manager + Staff calendars
   ========================================================== */

.is-hold {
  --ss-hold-ink: #10283a;
}

.ss-manager-mini-booking.is-hold,
.ss-shift-week-item.is-hold,
.ss-staff-month-items .is-hold,
.ss-manager-month-items .is-hold {
  background: var(--ss-sky);
  color: var(--ss-ink);
  border-color: var(--ss-ink);
}

.ss-manager-booking-row.is-hold,
.ss-shift-booking.is-hold {
  border-left-color: var(--ss-sea);
  background: linear-gradient(90deg, rgba(143,210,229,.36), rgba(255,253,247,.96) 38%);
}

.ss-manager-status--held,
.ss-shift-payment-status.is-held {
  background: var(--ss-sky);
  color: var(--ss-ink);
}

.ss-hold-countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 900 !important;
}

.ss-manager-hold-note,
.ss-shift-hold-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 4px solid var(--ss-sea);
  background: rgba(143,210,229,.22);
}

.ss-manager-hold-note strong,
.ss-manager-hold-note span,
.ss-shift-hold-note strong,
.ss-shift-hold-note span,
.ss-shift-hold-note p {
  display: block;
}

.ss-manager-hold-note strong,
.ss-shift-hold-note strong {
  margin-bottom: 4px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.ss-manager-hold-note span,
.ss-shift-hold-note span,
.ss-shift-hold-note p {
  font-size: 11px;
  line-height: 1.45;
}

.ss-shift-hold-note p {
  margin: 5px 0 0;
  opacity: .68;
}


/* ==========================================================
   v1.58 — Stripe webhook status
   ========================================================== */

.ss-stripe-test-mode > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
}

.ss-stripe-test-mode small {
  display: block;
  font-size: 9px;
  line-height: 1.3;
  opacity: .66;
  text-align: right;
}


/* ==========================================================
   v1.60 — Stripe Apple Pay + Google Pay express checkout
   ========================================================== */

#stripeCheckoutWrap {
  margin-top: 14px;
}

.ss-stripe-wallet-wrap {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(16,40,58,.16);
  background: rgba(255,253,247,.72);
}

.ss-stripe-checkout-label {
  display: block;
  margin-bottom: 9px;
  color: var(--ss-ink);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#stripeExpressCheckoutElement {
  min-height: 50px;
}

.ss-stripe-wallet-help {
  margin: 8px 0 0;
  color: rgba(16,40,58,.65);
  font-size: 10px;
  line-height: 1.4;
}

#stripePaymentWrap {
  margin-top: 14px;
}

#stripeCardDivider[hidden],
#stripeExpressCheckoutWrap[hidden],
#stripeCheckoutWrap[hidden] {
  display: none !important;
}


/* ==========================================================
   v1.61 — availability retry + hold-expiry polish
   ========================================================== */
.ss-live-availability-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid var(--ss-ink);
  background: transparent;
  color: var(--ss-ink);
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}

.ss-live-availability-retry:hover,
.ss-live-availability-retry:focus-visible {
  background: var(--ss-ink);
  color: var(--ss-paper);
}


/* ==========================================================
   v1.62 — staging email safety
   ========================================================== */

.ss-manager-notification-note strong {
  color: var(--ss-ink);
}


/* ==========================================================
   v1.63 — Manager CRM / reporting
   ========================================================== */

.ss-manager-dashboard {
  margin-top: 18px;
}

.ss-manager-dashboard-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-end;
  padding: 26px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-sky);
}

.ss-manager-dashboard-head h2,
.ss-manager-report-head h3,
.ss-manager-customer-detail-head h3 {
  margin: 0;
  color: var(--ss-ink);
  line-height: .95;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.ss-manager-dashboard-head h2 {
  font-size: clamp(30px, 4vw, 48px);
}

.ss-manager-dashboard-head > div > p:last-child {
  max-width: 620px;
  margin: 10px 0 0;
  color: rgba(16,40,58,.68);
  font-size: 12px;
  line-height: 1.5;
}

.ss-manager-dashboard-loading {
  padding: 26px;
  border: 2px solid var(--ss-ink);
  border-top: 0;
  background: var(--ss-paper);
  color: var(--ss-ink);
  font-size: 12px;
  font-weight: 800;
}

.ss-manager-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  margin-top: 18px;
  border-left: 2px solid var(--ss-ink);
  border-bottom: 2px solid var(--ss-ink);
}

.ss-manager-kpi-card {
  min-width: 0;
  padding: 18px 15px;
  border-top: 2px solid var(--ss-ink);
  border-right: 2px solid var(--ss-ink);
  background: var(--ss-paper);
}

.ss-manager-kpi-card.is-primary {
  background: var(--ss-ink);
  color: var(--ss-foam);
}

.ss-manager-kpi-card > span {
  display: block;
  min-height: 22px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .07em;
  line-height: 1.25;
  text-transform: uppercase;
  opacity: .63;
}

.ss-manager-kpi-card > strong {
  display: block;
  margin-top: 8px;
  font-size: clamp(27px, 3vw, 42px);
  line-height: .9;
  letter-spacing: -.05em;
}

.ss-manager-kpi-card > small {
  display: block;
  margin-top: 9px;
  font-size: 8px;
  line-height: 1.35;
  opacity: .52;
}

.ss-manager-dashboard-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 18px;
  margin-top: 18px;
}

.ss-manager-report-card {
  min-width: 0;
  padding: 22px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
}

.ss-manager-report-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 20px;
}

.ss-manager-report-head span {
  display: block;
  margin-bottom: 5px;
  color: rgba(16,40,58,.54);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.ss-manager-report-head h3,
.ss-manager-customer-detail-head h3 {
  font-size: clamp(22px, 2.4vw, 32px);
}

.ss-manager-chart-legend {
  display: flex;
  gap: 12px;
}

.ss-manager-chart-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 8px;
}

.ss-manager-chart-legend i {
  width: 9px;
  height: 9px;
}

.ss-manager-chart-legend .is-revenue { background: var(--ss-sea); }
.ss-manager-chart-legend .is-bookings { background: var(--ss-ink); }

.ss-manager-trend-chart {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 7px;
  height: 245px;
  padding-top: 16px;
  border-top: 1px solid rgba(16,40,58,.13);
}

.ss-manager-trend-month {
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 0;
}

.ss-manager-trend-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  min-height: 0;
  border-bottom: 1px solid rgba(16,40,58,.16);
}

.ss-manager-trend-bars i {
  width: 32%;
  max-width: 17px;
  min-height: 2px;
}

.ss-manager-trend-bars .is-revenue { background: var(--ss-sea); }
.ss-manager-trend-bars .is-bookings { background: var(--ss-ink); }

.ss-manager-trend-month > span {
  padding-top: 7px;
  overflow: hidden;
  color: rgba(16,40,58,.56);
  font-size: 8px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.ss-manager-mix-list {
  display: grid;
  gap: 14px;
}

.ss-manager-mix-row > div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.ss-manager-mix-row strong,
.ss-manager-mix-row span {
  font-size: 10px;
}

.ss-manager-mix-row > b {
  display: block;
  height: 8px;
  background: rgba(16,40,58,.08);
}

.ss-manager-mix-row > b > i {
  display: block;
  height: 100%;
  background: var(--ss-sea);
}

.ss-manager-mix-source {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 5px;
  padding-top: 15px;
  border-top: 1px solid rgba(16,40,58,.13);
}

.ss-manager-mix-source > span {
  padding: 11px;
  background: var(--ss-foam);
  color: rgba(16,40,58,.6);
  font-size: 8px;
  text-transform: uppercase;
}

.ss-manager-mix-source strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ss-ink);
  font-size: 20px;
}

.ss-manager-top-customers,
.ss-manager-customer-results {
  border-top: 1px solid rgba(16,40,58,.13);
}

.ss-manager-top-customer,
.ss-manager-customer-result {
  width: 100%;
  display: grid;
  align-items: center;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid rgba(16,40,58,.11);
  background: transparent;
  color: var(--ss-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ss-manager-top-customer {
  grid-template-columns: 28px 1fr auto;
  padding: 12px 0;
}

.ss-manager-top-customer:hover,
.ss-manager-customer-result:hover {
  background: rgba(143,210,229,.18);
}

.ss-manager-top-rank {
  color: rgba(16,40,58,.36);
  font-size: 9px;
  font-weight: 900;
}

.ss-manager-top-name strong,
.ss-manager-customer-result strong {
  display: block;
  font-size: 11px;
}

.ss-manager-top-name small,
.ss-manager-customer-result small {
  display: block;
  margin-top: 3px;
  color: rgba(16,40,58,.52);
  font-size: 8px;
}

.ss-manager-top-customer > b {
  font-size: 14px;
}

.ss-manager-crm-search {
  display: block;
  margin-bottom: 12px;
}

.ss-manager-crm-search > span {
  display: block;
  margin-bottom: 6px;
  color: rgba(16,40,58,.55);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ss-manager-crm-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 2px solid var(--ss-ink);
  border-radius: 0;
  background: white;
  color: var(--ss-ink);
  font: inherit;
  font-size: 11px;
}

.ss-manager-customer-result {
  grid-template-columns: 1fr auto;
  padding: 10px 0;
}

.ss-manager-customer-result > span:last-child {
  text-align: right;
}

.ss-manager-crm-empty {
  color: rgba(16,40,58,.55);
  font-size: 10px;
}

.ss-manager-customer-detail {
  margin-top: 18px;
}

.ss-manager-customer-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: flex-end;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--ss-ink);
}

.ss-manager-customer-detail-head > div:first-child > span {
  color: rgba(16,40,58,.52);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ss-manager-customer-detail-head p {
  margin: 7px 0 0;
  color: rgba(16,40,58,.57);
  font-size: 9px;
}

.ss-manager-customer-detail-stats {
  display: flex;
  gap: 18px;
  text-align: right;
}

.ss-manager-customer-detail-stats span {
  color: rgba(16,40,58,.52);
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
}

.ss-manager-customer-detail-stats strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ss-ink);
  font-size: 14px;
  text-transform: none;
}

.ss-manager-customer-summary {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 1px;
  margin: 18px 0;
  background: var(--ss-ink);
  border: 1px solid var(--ss-ink);
}

.ss-manager-customer-summary span {
  padding: 12px;
  background: var(--ss-foam);
  color: rgba(16,40,58,.52);
  font-size: 7px;
  text-transform: uppercase;
}

.ss-manager-customer-summary strong {
  display: block;
  margin-top: 4px;
  color: var(--ss-ink);
  font-size: 9px;
  text-transform: none;
}

.ss-manager-customer-history {
  border-top: 1px solid rgba(16,40,58,.13);
}

.ss-manager-customer-history-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr .7fr;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(16,40,58,.11);
}

.ss-manager-customer-history-row > span:last-child {
  text-align: right;
}

.ss-manager-customer-history-row strong {
  display: block;
  font-size: 9px;
}

.ss-manager-customer-history-row small {
  display: block;
  margin-top: 3px;
  color: rgba(16,40,58,.5);
  font-size: 7px;
}

.ss-manager-report-footnote {
  margin: 13px 2px 0;
  color: rgba(16,40,58,.48);
  font-size: 8px;
  line-height: 1.4;
}

@media (max-width: 1100px) {
  .ss-manager-kpi-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 800px) {
  .ss-manager-dashboard-head,
  .ss-manager-customer-detail-head {
    flex-direction: column;
    align-items: stretch;
  }

  .ss-manager-kpi-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .ss-manager-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .ss-manager-customer-detail-stats {
    text-align: left;
    flex-wrap: wrap;
  }

  .ss-manager-customer-summary {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}


/* ==========================================================
   v1.64 — Manager menu tidy + Excel export
   ========================================================== */

.ss-calendar-head-actions {
  align-items: flex-end;
}

.ss-manager-menu-primary,
.ss-manager-menu-secondary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ss-manager-menu-primary {
  justify-content: flex-end;
}

.ss-manager-menu-secondary {
  justify-content: flex-end;
}

.ss-manager-menu-primary .ss-btn,
.ss-manager-menu-secondary .ss-btn {
  min-height: 46px;
  white-space: nowrap;
}

.ss-manager-promotions-button.active,
.ss-manager-dashboard-button.active {
  background: var(--ss-ink);
  color: var(--ss-foam);
}


/* Keep the calendar selector as one clean three-button control. */
.ss-calendar-head-actions .ss-shift-view-switch {
  grid-template-columns: repeat(3, minmax(78px, 1fr));
}

.ss-manager-dashboard-button {
  min-height: 46px;
}

.ss-manager-dashboard-button.active {
  background: var(--ss-ink);
  color: var(--ss-foam);
}

.ss-manager-dashboard-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#managerExcelExport {
  background: var(--ss-ink);
  color: var(--ss-foam);
}

#managerExcelExport:hover,
#managerExcelExport:focus-visible {
  background: var(--ss-ink-2);
  color: var(--ss-paper);
}

@media (min-width: 1101px) {
  .ss-calendar-head-actions {
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
  }

  .ss-manager-menu-primary,
  .ss-manager-menu-secondary {
    flex-wrap: nowrap;
  }

  .ss-manager-dashboard-button,
  .ss-manager-promotions-button,
  .ss-manager-email-preview-link,
  #managerAddBookingBtn {
    white-space: nowrap;
  }
}

@media (max-width: 800px) {
  .ss-manager-dashboard-actions {
    justify-content: flex-start;
  }

  .ss-manager-dashboard-actions .ss-btn {
    width: auto;
  }
}


/* ==========================================================
   v1.65 — Reporting period / year controls
   ========================================================== */

.ss-manager-dashboard-controls {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.ss-manager-dashboard-controls > label {
  display: grid;
  gap: 5px;
  min-width: 126px;
}

.ss-manager-dashboard-controls > label > span {
  color: rgba(16,40,58,.58);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.ss-manager-dashboard-controls select {
  min-height: 42px;
  padding: 0 32px 0 10px;
  border: 2px solid var(--ss-ink);
  border-radius: 0;
  background: var(--ss-paper);
  color: var(--ss-ink);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
}

.ss-manager-kpi-delta {
  display: block;
  min-height: 12px;
  margin-top: 8px;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.3;
}

.ss-manager-kpi-delta.is-up {
  color: #17714a;
}

.ss-manager-kpi-card.is-primary .ss-manager-kpi-delta.is-up {
  color: #8fd2e5;
}

.ss-manager-kpi-delta.is-down {
  color: #9d3e34;
}

.ss-manager-kpi-card.is-primary .ss-manager-kpi-delta.is-down {
  color: #f1b4aa;
}

.ss-manager-kpi-delta.is-flat {
  opacity: .48;
}

.ss-manager-trend-month > span small {
  display: block;
  margin-top: 1px;
  font-size: 6px;
  opacity: .65;
}

@media (max-width: 1000px) {
  .ss-manager-dashboard-head {
    align-items: stretch;
    flex-direction: column;
  }

  .ss-manager-dashboard-controls {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .ss-manager-dashboard-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .ss-manager-dashboard-controls > label:first-child {
    grid-column: 1 / -1;
  }

  .ss-manager-dashboard-actions {
    grid-column: 1 / -1;
  }
}


/* ==========================================================
   v1.66 — optional artist type
   ========================================================== */

.ss-book-artist-field {
  margin-top: 16px;
}

.ss-book-field-label {
  display: block;
  margin-bottom: 7px;
  color: var(--ss-ink);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ss-book-artist-options {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}

.ss-book-artist-options label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 12px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
  color: var(--ss-ink);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.ss-book-artist-options input {
  margin: 0;
}

.ss-book-clear-artist {
  min-height: 42px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: rgba(16,40,58,.58);
  font: inherit;
  font-size: 9px;
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 620px) {
  .ss-book-artist-options {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ss-book-clear-artist {
    justify-self: start;
    min-height: 28px;
    padding: 0;
  }
}


/* ==========================================================
   v1.67 — quieter optional artist-type field
   ========================================================== */

.ss-book-artist-field {
  margin-top: 14px;
  max-width: 280px;
}

.ss-book-artist-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--ss-ink);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ss-book-artist-field select {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  padding: 0 34px 0 11px;
  border: 1px solid rgba(16,40,58,.45);
  border-radius: 0;
  background: #fff;
  color: var(--ss-ink);
  font: inherit;
  font-size: 11px;
}

.ss-book-artist-options,
.ss-book-clear-artist {
  display: none !important;
}


/* ==========================================================
   v1.68 — Manager booking price
   ========================================================== */

.ss-manager-price-help {
  display: block;
  margin-top: 5px;
  color: rgba(16,40,58,.55);
  font-size: 8px;
  line-height: 1.35;
}

.ss-manager-booking-price {
  display: inline-block;
  margin-left: 7px;
  color: var(--ss-ink);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .03em;
}


/* ==========================================================
   v1.71 — Manager / Staff portal authentication
   ========================================================== */

.ss-portal-login-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 15%, rgba(35,153,187,.22), transparent 34%),
    var(--ss-foam);
}

.ss-portal-login-page #wpadminbar {
  display: none !important;
}

.ss-portal-login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 34px 18px;
}

.ss-portal-login-card {
  width: min(100%, 470px);
  box-sizing: border-box;
  padding: 34px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
  box-shadow: 12px 12px 0 var(--ss-sky);
}

.ss-portal-login-logo {
  display: block;
  width: 94px;
  margin-bottom: 24px;
}

.ss-portal-login-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.ss-portal-login-card h1 {
  margin: 4px 0 0;
  color: var(--ss-ink);
  font-size: clamp(46px, 9vw, 72px);
  line-height: .86;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.ss-portal-login-intro {
  max-width: 370px;
  margin: 18px 0 25px;
  color: rgba(16,40,58,.68);
  font-size: 12px;
  line-height: 1.55;
}

.ss-portal-login-error,
.ss-access-message {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 2px solid var(--ss-ink);
  background: #f2c7c1;
  color: var(--ss-ink);
  font-size: 11px;
  font-weight: 800;
}

.ss-portal-login-form {
  display: grid;
  gap: 8px;
}

.ss-portal-login-form > label:not(.ss-portal-remember),
.ss-access-account-card form > label {
  margin-top: 7px;
  color: var(--ss-ink);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.ss-portal-login-form input[type="text"],
.ss-portal-login-form input[type="password"],
.ss-access-account-card input[type="password"] {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 2px solid var(--ss-ink);
  border-radius: 0;
  background: #fff;
  color: var(--ss-ink);
  font: inherit;
}

.ss-portal-remember {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 7px 0;
  color: rgba(16,40,58,.68);
  font-size: 10px;
}

.ss-portal-login-submit {
  width: 100%;
  margin-top: 6px;
}

.ss-portal-login-help {
  margin: 20px 0 0;
  color: rgba(16,40,58,.48);
  font-size: 9px;
  line-height: 1.45;
}

.ss-portal-logout {
  white-space: nowrap;
}

.ss-staff-head-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ss-access-setup-page {
  padding: 55px 0 80px;
}

.ss-access-setup-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 26px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-sky);
}

.ss-access-setup-head h1 {
  margin: 0;
  color: var(--ss-ink);
  font-size: clamp(44px, 7vw, 80px);
  line-height: .86;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.ss-access-setup-head p:last-child {
  margin: 12px 0 0;
  color: rgba(16,40,58,.67);
  font-size: 12px;
}

.ss-access-message {
  margin-top: 18px;
}

.ss-access-message.is-success {
  background: var(--ss-sky);
}

.ss-access-account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  margin-top: 18px;
}

.ss-access-account-card {
  padding: 24px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
}

.ss-access-role {
  color: rgba(16,40,58,.54);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ss-access-account-card h2 {
  margin: 7px 0;
  color: var(--ss-ink);
  font-size: 28px;
  letter-spacing: -.035em;
}

.ss-access-account-card > p {
  min-height: 38px;
  color: rgba(16,40,58,.62);
  font-size: 10px;
  line-height: 1.5;
}

.ss-access-status {
  display: inline-block;
  margin: 6px 0 18px;
  padding: 5px 7px;
  background: #ead3cf;
  color: var(--ss-ink);
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.ss-access-status.is-ready {
  background: var(--ss-sky);
}

.ss-access-account-card form {
  display: grid;
  gap: 7px;
}

.ss-access-account-card form .ss-btn {
  margin-top: 10px;
}

.ss-access-links {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
  margin-top: 18px;
}

.ss-access-links > div {
  min-width: 0;
  padding: 16px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-foam);
}

.ss-access-links span {
  display: block;
  margin-bottom: 6px;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.ss-access-links code {
  display: block;
  overflow-wrap: anywhere;
  color: var(--ss-ink);
  font-size: 10px;
}

.ss-access-note {
  margin: 14px 2px 0;
  color: rgba(16,40,58,.55);
  font-size: 9px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .ss-access-account-grid,
  .ss-access-links {
    grid-template-columns: 1fr;
  }

  .ss-access-setup-head {
    align-items: stretch;
    flex-direction: column;
  }

  .ss-staff-head-actions {
    align-items: stretch;
    flex-direction: column;
  }
}


/* ==========================================================
   v1.74 — public rehearsal pricing / backline
   ========================================================== */

.ss-rehearsal-backline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  margin-top: 28px;
}

.ss-rehearsal-backline-card {
  padding: 24px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
}

.ss-rehearsal-backline-card--full {
  background: var(--ss-sky);
}

.ss-rehearsal-backline-card-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.ss-rehearsal-backline-card-head span,
.ss-rehearsal-option-strip span,
.ss-rehearsal-standard-note strong {
  display: block;
  color: var(--ss-ink);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ss-rehearsal-backline-card-head strong {
  display: block;
  margin-top: 5px;
  color: var(--ss-ink);
  font-size: 18px;
  line-height: 1.05;
}

.ss-rehearsal-backline-card-head em {
  flex: 0 0 auto;
  color: var(--ss-ink);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.ss-rehearsal-backline-card ul {
  margin: 0;
  padding-left: 18px;
  color: rgba(16,40,58,.78);
  font-size: 11px;
  line-height: 1.7;
}

.ss-rehearsal-standard-note {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-ink);
  color: var(--ss-paper);
}

.ss-rehearsal-standard-note strong {
  color: var(--ss-paper);
}

.ss-rehearsal-standard-note span {
  font-size: 11px;
  font-weight: 800;
}

.ss-rehearsal-option-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr;
  gap: 12px;
  margin-top: 12px;
}

.ss-rehearsal-option-strip > div {
  padding: 15px;
  border: 1px solid rgba(16,40,58,.55);
  background: var(--ss-foam);
}

.ss-rehearsal-option-strip strong {
  display: block;
  margin: 5px 0 3px;
  color: var(--ss-ink);
  font-size: 13px;
}

.ss-rehearsal-option-strip small {
  color: rgba(16,40,58,.6);
  font-size: 9px;
}

.ss-book-subchoice {
  margin-top: 18px;
}

.ss-book-subchoice > label {
  display: block;
  margin-bottom: 8px;
  color: var(--ss-ink);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .ss-rehearsal-backline-grid,
  .ss-rehearsal-option-strip {
    grid-template-columns: 1fr;
  }

  .ss-rehearsal-backline-card-head,
  .ss-rehearsal-standard-note {
    flex-direction: column;
  }

  .ss-rehearsal-backline-card-head em {
    text-align: left;
  }
}


/* ==========================================================
   v1.75 — compact expandable rehearsal backline section
   ========================================================== */

.ss-rehearsal-simple-heading--compact {
  align-items: end;
}

.ss-rehearsal-accordion-list {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.ss-rehearsal-accordion {
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
  overflow: hidden;
}

.ss-rehearsal-accordion--full {
  background: var(--ss-sky);
}

.ss-rehearsal-accordion summary {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
}

.ss-rehearsal-accordion summary::-webkit-details-marker {
  display: none;
}

.ss-rehearsal-accordion summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ss-ink);
  border-radius: 999px;
  color: var(--ss-ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.ss-rehearsal-accordion[open] summary::after {
  content: "–";
}

.ss-rehearsal-accordion summary > div {
  min-width: 0;
}

.ss-rehearsal-accordion summary span {
  display: block;
  color: var(--ss-ink);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ss-rehearsal-accordion summary strong {
  display: block;
  margin-top: 5px;
  color: var(--ss-ink);
  font-size: 18px;
  line-height: 1.05;
}

.ss-rehearsal-accordion summary em {
  flex: 0 0 auto;
  max-width: 240px;
  color: var(--ss-ink);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.ss-rehearsal-accordion-body {
  padding: 0 22px 20px;
  border-top: 1px solid rgba(16,40,58,.18);
}

.ss-rehearsal-accordion-body ul {
  margin: 14px 0 0;
  padding-left: 18px;
  color: rgba(16,40,58,.78);
  font-size: 11px;
  line-height: 1.7;
}

@media (max-width: 760px) {
  .ss-rehearsal-accordion summary {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .ss-rehearsal-accordion summary em {
    max-width: none;
    text-align: left;
  }
}


/* ==========================================================
   v1.76 — larger animated backline panels + remove repetition
   ========================================================== */

.ss-rehearsal-accordion-list {
  gap: 18px;
  margin-top: 34px;
}

.ss-rehearsal-accordion {
  position: relative;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background-color .22s ease;
}

.ss-rehearsal-accordion:hover {
  transform: translateY(-4px);
  box-shadow: 9px 9px 0 rgba(16,40,58,.16);
}

.ss-rehearsal-accordion--full:hover {
  box-shadow: 9px 9px 0 rgba(35,153,187,.24);
}

.ss-rehearsal-accordion summary {
  min-height: 112px;
  padding: 26px 30px;
  transition: padding .22s ease;
}

.ss-rehearsal-accordion[open] summary {
  padding-bottom: 22px;
}

.ss-rehearsal-accordion summary > div:first-child {
  max-width: 62%;
}

.ss-rehearsal-accordion summary span {
  font-size: 10px;
}

.ss-rehearsal-accordion summary strong {
  margin-top: 7px;
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: .98;
  letter-spacing: -.035em;
}

.ss-rehearsal-accordion-meta {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.ss-rehearsal-accordion-meta em {
  max-width: none;
  font-size: 12px;
  text-align: right;
}

.ss-rehearsal-accordion-meta small {
  color: rgba(16,40,58,.52);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.ss-rehearsal-accordion summary::after {
  width: 42px;
  height: 42px;
  margin-left: 8px;
  font-size: 25px;
  transition:
    transform .28s ease,
    background-color .2s ease,
    color .2s ease;
}

.ss-rehearsal-accordion:hover summary::after {
  background: var(--ss-ink);
  color: var(--ss-paper);
}

.ss-rehearsal-accordion[open] summary::after {
  content: "×";
  transform: rotate(90deg);
  background: var(--ss-ink);
  color: var(--ss-paper);
}

.ss-rehearsal-accordion-body {
  padding: 0 30px 28px;
  animation: ss26BacklineReveal .28s ease both;
}

.ss-rehearsal-accordion-body ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 4px 34px;
  margin-top: 19px;
  font-size: 12px;
  line-height: 1.62;
}

@keyframes ss26BacklineReveal {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ss-rehearsal-standard-note {
  margin-top: 20px;
  padding: 17px 20px;
}

.ss-rehearsal-option-strip {
  gap: 14px;
  margin-top: 14px;
}

.ss-rehearsal-option-strip > div {
  min-height: 92px;
  box-sizing: border-box;
  padding: 18px;
  transition:
    transform .18s ease,
    background-color .18s ease;
}

.ss-rehearsal-option-strip > div:hover {
  transform: translateY(-3px);
  background: var(--ss-paper);
}

@media (max-width: 760px) {
  .ss-rehearsal-accordion summary {
    min-height: 0;
    padding: 20px;
  }

  .ss-rehearsal-accordion summary > div:first-child {
    max-width: 100%;
  }

  .ss-rehearsal-accordion-meta {
    width: calc(100% - 56px);
    margin-left: 0;
    align-items: flex-start;
  }

  .ss-rehearsal-accordion-meta em {
    text-align: left;
  }

  .ss-rehearsal-accordion-body {
    padding: 0 20px 22px;
  }

  .ss-rehearsal-accordion-body ul {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-rehearsal-accordion,
  .ss-rehearsal-accordion summary::after,
  .ss-rehearsal-accordion-body,
  .ss-rehearsal-option-strip > div {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}


/* ==========================================================
   v1.77 — true smooth accordion open / close
   ========================================================== */

.ss-rehearsal-accordion-body {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    height .36s cubic-bezier(.22,.61,.36,1),
    opacity .24s ease,
    transform .32s ease;
  animation: none;
}

.ss-rehearsal-accordion[open] .ss-rehearsal-accordion-body {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .ss-rehearsal-accordion-body {
    height: auto;
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ==========================================================
   v1.79 — final mobile pass: Events / Shop / ticker strips
   ========================================================== */

/*
 * Desktop keeps the existing strip treatment. The duplicate copy exists only
 * so mobile can run a seamless ticker.
 */
.ss-mobile-ticker-track {
  width: max-content;
  min-width: 100%;
  padding: 17px var(--ss-pad);
  text-align: center;
  font-size: clamp(15px, 1.7vw, 22px);
  font-weight: 900;
  letter-spacing: .105em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ss-mobile-ticker-copy--repeat {
  display: none;
}

.ss-mobile-ticker-copy b {
  margin: 0 clamp(12px, 2vw, 30px);
  font-weight: inherit;
}

/* Neutralise the old direct-child strip spacing now that markup uses spans. */
.ss-shop-strip > div,
.ss-events-strip > div {
  padding: 0;
}

.ss-shop-strip > div {
  width: auto;
}

.ss-events-strip > div {
  width: auto;
}

@media (max-width: 700px) {

  /* ------------------------------
     Events hero
     ------------------------------ */

  .ss-events-hero-grid {
    display: grid;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    padding-bottom: 42px;
    overflow: hidden;
  }

  .ss-events-hero-copy {
    min-width: 0;
    padding: 52px var(--ss-pad) 34px !important;
    justify-content: flex-start;
  }

  .ss-events-hero--photo .ss-events-title {
    font-size: clamp(68px, 21vw, 98px);
    line-height: .76;
    max-width: 100%;
  }

  .ss-events-intro {
    max-width: 360px;
    margin-top: 25px;
    font-size: 18px;
    line-height: 1.32;
  }

  .ss-events-hero-art {
    width: min(calc(100% - (var(--ss-pad) * 2)), 360px) !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5;
    margin: 0 auto 18px !important;
    justify-self: center;
    align-self: auto;
  }

  .ss-events-hero-art-back {
    inset: 18px -10px -14px 18px !important;
  }

  .ss-events-hero-photo {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  .ss-events-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
  }

  /* ------------------------------
     Shop hero
     ------------------------------ */

  .ss-shop-hero-grid {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 28px;
    padding-top: 52px !important;
    padding-bottom: 44px !important;
    align-items: start;
  }

  .ss-shop-title {
    font-size: clamp(67px, 22vw, 98px);
    line-height: .78;
  }

  .ss-shop-intro {
    margin: 28px 0;
    font-size: 20px;
  }

  .ss-shop-note {
    gap: 9px 18px;
    font-size: 9px;
  }

  .ss-shop-hero-mark {
    width: min(46vw, 190px) !important;
    margin: 4px auto 0 !important;
    align-self: auto !important;
    justify-self: center !important;
  }

  .ss-shop-hero-mark img {
    width: 100%;
    height: auto;
  }

  /* ------------------------------
     Mobile ticker strips
     ------------------------------ */

  .ss-shop-strip,
  .ss-events-strip {
    overflow: hidden;
  }

  .ss-mobile-ticker-track {
    display: flex;
    width: max-content;
    min-width: 0;
    padding: 0;
    text-align: left;
    font-size: 16px;
    letter-spacing: .11em;
    animation: ss26MobileTicker 22s linear infinite;
    will-change: transform;
  }

  .ss-mobile-ticker-copy {
    display: block;
    flex: 0 0 auto;
    padding: 15px 0 15px 22px;
  }

  .ss-mobile-ticker-copy--repeat {
    display: block;
    padding-left: 34px;
    padding-right: 22px;
  }

  .ss-mobile-ticker-copy b {
    margin: 0 16px;
  }

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

@media (prefers-reduced-motion: reduce) and (max-width: 700px) {
  .ss-mobile-ticker-track {
    animation: none !important;
    overflow-x: auto;
    max-width: 100vw;
  }

  .ss-mobile-ticker-copy--repeat {
    display: none;
  }
}


/* ==========================================================
   v1.80 — reliable Events mobile poster + all public strips scroll
   ========================================================== */

@media (max-width: 700px) {

  /*
   * EVENTS IMAGE
   *
   * The desktop design layers an absolutely positioned photograph over a
   * second blue card. On narrow screens older rules were still competing for
   * the same figure dimensions. Mobile now has an explicit stacking model:
   * wrapper -> blue backing -> photo.
   */
  .ss-events-hero-art {
    position: relative !important;
    width: min(calc(100% - (var(--ss-pad) * 2)), 350px) !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1282 / 1323;
    margin: 0 auto 24px !important;
    overflow: visible !important;
    isolation: isolate;
  }

  .ss-events-hero-art-back {
    position: absolute !important;
    inset: 16px -10px -14px 16px !important;
    z-index: 0 !important;
    width: auto !important;
    height: auto !important;
  }

  .ss-events-hero-photo {
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: block !important;
    overflow: hidden !important;
    transform: rotate(-1deg) !important;
  }

  .ss-events-hero-photo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover !important;
    object-position: 50% 42% !important;
  }

  /*
   * ALL PUBLIC HORIZONTAL STRIPS
   *
   * One consistent slow marquee/ticker on mobile:
   * Record / Rehearse / Studio / Events / Shop / Blog.
   */
  .ss-record-strip,
  .ss-rehearsal-strip,
  .ss-studio-strip,
  .ss-events-strip,
  .ss-shop-strip,
  .ss-blog-strip {
    overflow: hidden !important;
  }

  .ss-record-strip > .ss-mobile-ticker-track,
  .ss-rehearsal-strip > .ss-mobile-ticker-track,
  .ss-studio-strip > .ss-mobile-ticker-track,
  .ss-events-strip > .ss-mobile-ticker-track,
  .ss-shop-strip > .ss-mobile-ticker-track,
  .ss-blog-strip > .ss-mobile-ticker-track {
    display: flex !important;
    width: max-content !important;
    min-width: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    animation: ss26AllMobileTicker 22s linear infinite !important;
    will-change: transform;
  }

  .ss-record-strip .ss-mobile-ticker-copy,
  .ss-rehearsal-strip .ss-mobile-ticker-copy,
  .ss-studio-strip .ss-mobile-ticker-copy,
  .ss-events-strip .ss-mobile-ticker-copy,
  .ss-shop-strip .ss-mobile-ticker-copy,
  .ss-blog-strip .ss-mobile-ticker-copy {
    display: block !important;
    flex: 0 0 auto;
    padding: 15px 24px !important;
  }

  .ss-record-strip .ss-mobile-ticker-copy--repeat,
  .ss-rehearsal-strip .ss-mobile-ticker-copy--repeat,
  .ss-studio-strip .ss-mobile-ticker-copy--repeat,
  .ss-events-strip .ss-mobile-ticker-copy--repeat,
  .ss-shop-strip .ss-mobile-ticker-copy--repeat,
  .ss-blog-strip .ss-mobile-ticker-copy--repeat {
    display: block !important;
  }

  .ss-record-strip .ss-mobile-ticker-copy b,
  .ss-rehearsal-strip .ss-mobile-ticker-copy b,
  .ss-studio-strip .ss-mobile-ticker-copy b,
  .ss-events-strip .ss-mobile-ticker-copy b,
  .ss-shop-strip .ss-mobile-ticker-copy b,
  .ss-blog-strip .ss-mobile-ticker-copy b {
    margin: 0 16px;
    font: inherit;
    color: inherit;
  }

  @keyframes ss26AllMobileTicker {
    from {
      transform: translate3d(0, 0, 0);
    }
    to {
      transform: translate3d(-50%, 0, 0);
    }
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 700px) {
  .ss-record-strip > .ss-mobile-ticker-track,
  .ss-rehearsal-strip > .ss-mobile-ticker-track,
  .ss-studio-strip > .ss-mobile-ticker-track,
  .ss-events-strip > .ss-mobile-ticker-track,
  .ss-shop-strip > .ss-mobile-ticker-track,
  .ss-blog-strip > .ss-mobile-ticker-track {
    animation: none !important;
    overflow-x: auto;
    max-width: 100vw;
  }

  .ss-record-strip .ss-mobile-ticker-copy--repeat,
  .ss-rehearsal-strip .ss-mobile-ticker-copy--repeat,
  .ss-studio-strip .ss-mobile-ticker-copy--repeat,
  .ss-events-strip .ss-mobile-ticker-copy--repeat,
  .ss-shop-strip .ss-mobile-ticker-copy--repeat,
  .ss-blog-strip .ss-mobile-ticker-copy--repeat {
    display: none !important;
  }
}


/* ==========================================================
   v1.81 — refined homepage route arrows
   ========================================================== */

/* Remove the old text/emoji treatment and use a proper line icon. */
.ss-service-go,
.ss-home-link-arrow {
  position: relative;
  overflow: hidden;
  color: inherit;
  background: transparent;
  transition:
    transform .24s cubic-bezier(.22,.61,.36,1),
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease;
}

.ss-service-go svg,
.ss-home-link-arrow svg {
  width: 25px;
  height: 25px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: square;
  stroke-linejoin: miter;
  transition: transform .24s cubic-bezier(.22,.61,.36,1);
}

.ss-service-card:hover .ss-service-go,
.ss-service-card:focus-visible .ss-service-go {
  background: var(--ss-sea);
  border-color: var(--ss-sea);
  color: var(--ss-ink);
  transform: scale(1.04);
}

.ss-service-card:hover .ss-service-go svg,
.ss-service-card:focus-visible .ss-service-go svg {
  transform: translate(2px, -2px);
}

.ss-home-link-card:hover .ss-home-link-arrow,
.ss-home-link-card:focus-visible .ss-home-link-arrow {
  background: var(--ss-ink);
  border-color: var(--ss-ink);
  color: var(--ss-foam);
  transform: scale(1.04);
}

.ss-home-link-card:hover .ss-home-link-arrow svg,
.ss-home-link-card:focus-visible .ss-home-link-arrow svg {
  transform: translate(2px, -2px);
}

@media (max-width: 700px) {
  .ss-service-go {
    width: 54px;
    height: 54px;
    border-width: 1.5px;
  }

  .ss-service-go svg {
    width: 22px;
    height: 22px;
  }

  .ss-home-link-arrow {
    border-width: 1.5px;
  }

  .ss-home-link-arrow svg {
    width: 20px;
    height: 20px;
  }

  /* Touch feedback without relying on desktop hover. */
  .ss-service-card:active .ss-service-go {
    background: var(--ss-sea);
    border-color: var(--ss-sea);
    color: var(--ss-ink);
    transform: scale(.96);
  }

  .ss-service-card:active .ss-service-go svg {
    transform: translate(2px, -2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-service-go,
  .ss-home-link-arrow,
  .ss-service-go svg,
  .ss-home-link-arrow svg {
    transition: none !important;
  }
}


/* ==========================================================
   v1.83 — rehearsal loyalty checkout
   ========================================================== */

.ss-booking-prototype .summary-line--loyalty {
  margin-top: 12px;
  padding: 13px 0;
  border-top: 1px solid rgba(16,40,58,.18);
  border-bottom: 1px solid rgba(16,40,58,.18);
  color: var(--ss-ink);
  font-weight: 850;
}

.ss-booking-prototype .summary-line--loyalty > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ss-booking-prototype .summary-line--loyalty small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  opacity: .62;
}

.ss-book-confirm-loyalty {
  display: inline-block;
  margin: 12px 0 5px;
  padding: 10px 12px;
  background: var(--ss-sky);
  border-left: 3px solid var(--ss-ink);
  line-height: 1.45;
}


/* ==========================================================
   v1.89 — full-bleed homepage video hero experiment
   ========================================================== */

.home .ss-hero--video {
  position: relative;
  isolation: isolate;
  min-height: clamp(680px, calc(100svh - 96px), 900px);
  overflow: hidden;
  display: block;
  background: var(--ss-ink);
  border-bottom: 0;
}

.home .ss-hero-video-layer,
.home .ss-hero-video-shade {
  position: absolute;
  inset: 0;
}

.home .ss-hero-video-layer {
  z-index: 0;
  background:
    url("assets/images/home-video-poster.jpg") center center / cover no-repeat,
    var(--ss-ink);
}

.home .ss-hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  filter: grayscale(1) contrast(1.07) brightness(.78);
  opacity: .88;
}

.home .ss-hero-video-shade {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(8, 23, 34, .84) 0%,
      rgba(8, 23, 34, .67) 40%,
      rgba(8, 23, 34, .38) 70%,
      rgba(8, 23, 34, .28) 100%),
    linear-gradient(180deg,
      rgba(16, 40, 58, .10) 0%,
      rgba(16, 40, 58, .18) 62%,
      rgba(16, 40, 58, .46) 100%);
}

.home .ss-hero-video-content {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: flex;
  align-items: center;
  width: 100%;
}

.home .ss-hero--video .ss-hero-copy {
  position: relative;
  width: min(900px, 78vw);
  padding: clamp(56px, 7vw, 100px) 0 clamp(64px, 8vw, 110px);
  color: var(--ss-foam);
  justify-content: center;
  overflow: visible;
}

.home .ss-hero--video .ss-hero-logo {
  position: static;
  width: clamp(210px, 20vw, 310px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 0;
  margin: 0 0 clamp(20px, 2.4vw, 34px);
  align-self: flex-start;
  transform: none;
  box-shadow: none;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.25));
}

.home .ss-hero--video .ss-eyebrow {
  color: rgba(244, 240, 230, .84);
}

.home .ss-hero--video .ss-hero-title {
  max-width: 900px;
  color: var(--ss-foam);
  font-size: clamp(70px, 9.4vw, 152px);
  line-height: .78;
  text-shadow: 0 8px 34px rgba(0, 0, 0, .25);
}

.home .ss-hero--video .ss-hero-title span {
  color: var(--ss-sky);
}

.home .ss-hero--video .ss-hero-sub {
  max-width: 600px;
  margin: clamp(24px, 3vw, 34px) 0 clamp(24px, 3vw, 34px);
  color: rgba(244, 240, 230, .9);
}

.home .ss-hero--video .ss-btn {
  border-color: var(--ss-foam);
  background: var(--ss-foam);
  color: var(--ss-ink);
}

.home .ss-hero--video .ss-btn:hover,
.home .ss-hero--video .ss-btn:focus-visible {
  border-color: var(--ss-sky);
  background: var(--ss-sky);
  color: var(--ss-ink);
}

.home .ss-hero--video .ss-btn--ghost {
  background: rgba(16, 40, 58, .16);
  color: var(--ss-foam);
  backdrop-filter: blur(4px);
}

.home .ss-hero--video .ss-btn--ghost:hover,
.home .ss-hero--video .ss-btn--ghost:focus-visible {
  background: var(--ss-foam);
  border-color: var(--ss-foam);
  color: var(--ss-ink);
}

@media (max-width: 1050px) {
  .home .ss-hero--video {
    min-height: clamp(650px, calc(100svh - 84px), 860px);
  }

  .home .ss-hero--video .ss-hero-copy {
    width: min(760px, 92vw);
    padding-top: 54px;
  }

  .home .ss-hero--video .ss-hero-logo {
    width: clamp(180px, 30vw, 260px);
    margin-bottom: 22px;
  }

  .home .ss-hero--video .ss-hero-title {
    font-size: clamp(64px, 11.5vw, 118px);
  }
}

@media (max-width: 700px) {
  .home .ss-hero--video {
    min-height: calc(100svh - 84px);
  }

  .home .ss-hero-video {
    object-position: 62% center;
    filter: grayscale(1) contrast(1.04) brightness(.70);
  }

  .home .ss-hero-video-shade {
    background:
      linear-gradient(180deg,
        rgba(8, 23, 34, .70) 0%,
        rgba(8, 23, 34, .59) 48%,
        rgba(8, 23, 34, .76) 100%);
  }

  .home .ss-hero--video .ss-hero-copy {
    width: 100%;
    padding: 38px 0 52px;
  }

  .home .ss-hero--video .ss-hero-logo {
    width: clamp(156px, 43vw, 205px);
    margin-bottom: 18px;
  }

  .home .ss-hero--video .ss-hero-title {
    font-size: clamp(58px, 18vw, 94px);
    line-height: .80;
  }

  .home .ss-hero--video .ss-hero-sub {
    max-width: 430px;
    margin: 21px 0 24px;
    font-size: 18px;
  }

  .home .ss-hero--video .ss-actions {
    align-items: stretch;
  }

  .home .ss-hero--video .ss-btn {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home .ss-hero-video {
    display: none;
  }
}


/* ==========================================================
   v1.90 — centre homepage video hero + clean CTA arrow
   ========================================================== */

.home .ss-hero--video .ss-hero-video-content {
  justify-content: center;
}

.home .ss-hero--video .ss-hero-copy {
  width: min(1000px, 92vw);
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

.home .ss-hero--video .ss-hero-logo {
  align-self: center;
  margin-left: auto;
  margin-right: auto;
}

.home .ss-hero--video .ss-hero-title,
.home .ss-hero--video .ss-hero-sub {
  margin-left: auto;
  margin-right: auto;
}

.home .ss-hero--video .ss-actions {
  justify-content: center;
}

.home .ss-hero--video .ss-btn {
  justify-content: center;
}

.ss-btn-line-arrow {
  width: 1.15em;
  height: 1.15em;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.ss-btn-line-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}

.ss-btn:hover .ss-btn-line-arrow svg,
.ss-btn:focus-visible .ss-btn-line-arrow svg {
  transform: translate(2px, -2px);
}

@media (max-width: 700px) {
  .home .ss-hero--video .ss-hero-copy {
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .home .ss-hero--video .ss-hero-sub {
    margin-left: auto;
    margin-right: auto;
  }

  .home .ss-hero--video .ss-actions {
    width: 100%;
    justify-content: center;
  }

  .home .ss-hero--video .ss-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-btn-line-arrow svg {
    transition: none;
  }

  .ss-btn:hover .ss-btn-line-arrow svg,
  .ss-btn:focus-visible .ss-btn-line-arrow svg {
    transform: none;
  }
}


/* ==========================================================
   v1.91 — matching transparent homepage hero buttons
   ========================================================== */

.home .ss-hero--video .ss-actions .ss-btn,
.home .ss-hero--video .ss-actions .ss-btn--ghost {
  background: transparent;
  color: var(--ss-foam);
  border-color: rgba(244,240,230,.82);
  box-shadow: none;
}

.home .ss-hero--video .ss-actions .ss-btn:hover,
.home .ss-hero--video .ss-actions .ss-btn:focus-visible,
.home .ss-hero--video .ss-actions .ss-btn--ghost:hover,
.home .ss-hero--video .ss-actions .ss-btn--ghost:focus-visible {
  background: var(--ss-sea);
  color: var(--ss-ink);
  border-color: var(--ss-sea);
}

.home .ss-hero--video .ss-actions .ss-btn:active,
.home .ss-hero--video .ss-actions .ss-btn--ghost:active {
  background: var(--ss-sea);
  color: var(--ss-ink);
  border-color: var(--ss-sea);
}


/* ==========================================================
   v1.92 — standardised public CTA arrows
   ========================================================== */

.ss-inline-arrow {
  display: inline-grid;
  place-items: center;
  width: 1.05em;
  height: 1.05em;
  margin-left: .22em;
  vertical-align: -.12em;
  flex: 0 0 auto;
}

.ss-inline-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}

a:hover .ss-inline-arrow--up svg,
button:hover .ss-inline-arrow--up svg,
a:focus-visible .ss-inline-arrow--up svg,
button:focus-visible .ss-inline-arrow--up svg {
  transform: translate(2px, -2px);
}

a:hover .ss-inline-arrow--right svg,
button:hover .ss-inline-arrow--right svg,
a:focus-visible .ss-inline-arrow--right svg,
button:focus-visible .ss-inline-arrow--right svg {
  transform: translateX(2px);
}

a:hover .ss-inline-arrow--left svg,
button:hover .ss-inline-arrow--left svg,
a:focus-visible .ss-inline-arrow--left svg,
button:focus-visible .ss-inline-arrow--left svg {
  transform: translateX(-2px);
}

a:hover .ss-inline-arrow--down svg,
button:hover .ss-inline-arrow--down svg,
a:focus-visible .ss-inline-arrow--down svg,
button:focus-visible .ss-inline-arrow--down svg {
  transform: translateY(2px);
}

.ss-blog-read .ss-inline-arrow,
.ss-blog-card-arrow .ss-inline-arrow,
.ss-blog-related-read .ss-inline-arrow {
  width: 1em;
  height: 1em;
}

.ss-blog-card-arrow,
.ss-blog-related-read {
  font-style: normal;
}

@media (max-width: 700px) {
  .ss-inline-arrow {
    width: 1.08em;
    height: 1.08em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-inline-arrow svg {
    transition: none;
  }

  a:hover .ss-inline-arrow svg,
  button:hover .ss-inline-arrow svg,
  a:focus-visible .ss-inline-arrow svg,
  button:focus-visible .ss-inline-arrow svg {
    transform: none;
  }
}


/* ==========================================================
   v1.93 — centred main-page hero typography
   ========================================================== */

/*
 * Keep the existing split-image/art direction on desktop, but make the
 * actual hero message feel deliberately centred rather than pinned to the
 * left edge of its column.
 */
.ss-record-hero-copy,
.ss-rehearsal-hero-copy,
.ss-studio-hero-copy,
.ss-events-hero-copy,
.ss-shop-hero-copy {
  text-align: center;
}

.ss-record-title,
.ss-rehearsal-title,
.ss-studio-title,
.ss-events-title,
.ss-shop-title,
.ss-blog-title {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.ss-record-intro,
.ss-rehearsal-intro,
.ss-studio-intro,
.ss-events-intro,
.ss-shop-intro,
.ss-blog-intro {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.ss-record-hero-copy .ss-eyebrow,
.ss-rehearsal-hero-copy .ss-eyebrow,
.ss-studio-hero-copy .ss-eyebrow,
.ss-events-hero-copy .ss-eyebrow,
.ss-shop-hero-copy .ss-eyebrow,
.ss-blog-hero .ss-eyebrow {
  text-align: center;
}

.ss-record-hero-copy .ss-actions,
.ss-rehearsal-hero-copy .ss-actions,
.ss-studio-hero-copy .ss-actions,
.ss-events-hero-copy .ss-actions,
.ss-shop-hero-copy .ss-actions {
  justify-content: center;
}

.ss-shop-note {
  justify-content: center;
}

/*
 * Rehearsals had an explicit left-anchored image once the layout collapsed.
 * Centre it too so the mobile hero now reads as one balanced composition.
 */
@media (max-width: 1050px) {
  .ss-rehearsal-hero-image {
    justify-self: center;
  }
}

@media (max-width: 700px) {
  .ss-record-hero-copy,
  .ss-rehearsal-hero-copy,
  .ss-studio-hero-copy,
  .ss-events-hero-copy,
  .ss-shop-hero-copy,
  .ss-blog-hero {
    text-align: center;
  }

  .ss-record-title,
  .ss-rehearsal-title,
  .ss-studio-title,
  .ss-events-title,
  .ss-shop-title,
  .ss-blog-title {
    margin-inline: auto;
    text-align: center;
  }

  .ss-record-intro,
  .ss-rehearsal-intro,
  .ss-studio-intro,
  .ss-events-intro,
  .ss-shop-intro,
  .ss-blog-intro {
    margin-left: auto;
    margin-right: auto;
  }

  .ss-record-hero-copy .ss-actions,
  .ss-rehearsal-hero-copy .ss-actions,
  .ss-studio-hero-copy .ss-actions,
  .ss-events-hero-copy .ss-actions,
  .ss-shop-hero-copy .ss-actions {
    justify-content: center;
  }

  .ss-shop-note {
    justify-content: center;
    text-align: center;
  }
}


/* ==========================================================
   v1.94 — consistent vertical hero rhythm
   ========================================================== */

/*
 * v1.93 centred the typography horizontally.
 * These overrides remove the older page-specific top anchoring so the
 * headline + image/artwork read as one vertically balanced hero block.
 *
 * Pages keep their own artwork proportions; this is deliberately NOT a
 * single fixed hero height.
 */

/* RECORDING */
.ss-record-hero-grid {
  min-height: auto;
  align-items: center;
  padding-top: clamp(48px, 5vw, 76px);
  padding-bottom: clamp(48px, 5vw, 76px);
}

.ss-record-hero-copy {
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

.ss-record-hero-image {
  align-self: center;
  margin-top: 0;
}

/* REHEARSALS */
.ss-rehearsal-hero-grid {
  min-height: auto;
  align-items: center;
}

/* STUDIO */
.ss-studio-hero-grid {
  min-height: auto;
  align-items: center;
}

/* EVENTS */
.ss-events-hero-grid {
  min-height: auto;
  align-items: center;
  padding-top: clamp(52px, 5.5vw, 82px);
  padding-bottom: clamp(52px, 5.5vw, 82px);
}

.ss-events-hero-copy {
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

.ss-events-hero-art {
  align-self: center;
  margin-top: 0;
}

/* SHOP */
.ss-shop-hero-grid {
  min-height: auto;
  align-items: center;
}

.ss-shop-hero-copy {
  align-self: center;
}

.ss-shop-hero-mark {
  align-self: center;
  margin-top: 0;
}

/*
 * Keep collapsed/mobile heroes compact. Their image/artwork follows the copy,
 * so no desktop-style vertical offset is needed.
 */
@media (max-width: 1050px) {
  .ss-record-hero-grid,
  .ss-events-hero-grid {
    padding-top: 42px;
    padding-bottom: 48px;
  }

  .ss-record-hero-image,
  .ss-events-hero-art,
  .ss-shop-hero-mark {
    margin-top: 0;
  }
}

@media (max-width: 700px) {
  .ss-record-hero-grid,
  .ss-rehearsal-hero-grid,
  .ss-studio-hero-grid,
  .ss-events-hero-grid,
  .ss-shop-hero-grid {
    min-height: 0 !important;
    align-items: center;
  }

  .ss-record-hero-grid,
  .ss-events-hero-grid {
    padding-top: 38px !important;
    padding-bottom: 42px !important;
  }

  .ss-record-hero-copy,
  .ss-events-hero-copy {
    padding-top: 0 !important;
    padding-bottom: 28px !important;
  }

  .ss-record-hero-image,
  .ss-events-hero-art,
  .ss-shop-hero-mark {
    margin-top: 0 !important;
  }
}


/* ==========================================================
   v1.95 — recording hero cluster + live Events cross-fade
   ========================================================== */

/* RECORDING
   Bring the copy and console image into the same centred visual cluster used
   by the Studio/Rehearsal pages instead of stretching them edge-to-edge.
*/
.ss-record-hero-grid {
  width: min(1220px, calc(100% - (var(--ss-pad) * 2)));
  margin-inline: auto;
  grid-template-columns: minmax(0, 1.08fr) minmax(410px, .92fr);
  gap: clamp(48px, 6vw, 82px);
  padding-left: 0;
  padding-right: 0;
  padding-top: clamp(52px, 5vw, 72px);
  padding-bottom: clamp(52px, 5vw, 72px);
}

.ss-record-hero-copy {
  padding-left: 0;
  padding-right: 0;
  align-items: center;
  text-align: center;
}

.ss-record-title {
  max-width: 660px;
  font-size: clamp(58px, 5.9vw, 104px);
  margin-inline: auto;
}

.ss-record-intro {
  max-width: 610px;
  margin-left: auto;
  margin-right: auto;
}

.ss-record-hero-image {
  width: min(100%, 500px);
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 3;
  justify-self: center;
  align-self: center;
  margin: 0;
}

.ss-record-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* EVENTS
   Remove the old skewed poster-card construction and use a clean live-photo
   panel matching the rest of the site.
*/
.ss-events-hero-grid {
  width: min(1180px, calc(100% - (var(--ss-pad) * 2)));
  margin-inline: auto;
  grid-template-columns: minmax(0, 1.05fr) minmax(400px, .95fr);
  gap: clamp(52px, 6vw, 88px);
  padding-left: 0;
  padding-right: 0;
  padding-top: clamp(52px, 5vw, 74px);
  padding-bottom: clamp(52px, 5vw, 74px);
}

.ss-events-hero-copy {
  padding-left: 0;
  padding-right: 0;
  align-items: center;
  text-align: center;
}

.ss-events-title {
  max-width: 620px;
  margin-inline: auto;
}

.ss-events-intro {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.ss-events-hero-art-back {
  display: none !important;
}

.ss-events-hero-art {
  position: relative !important;
  width: min(100%, 500px) !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
  margin: 0 !important;
  justify-self: center;
  align-self: center;
  overflow: visible !important;
  isolation: isolate;
}

.ss-events-hero-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  transform: none !important;
  border: 2px solid var(--ss-ink);
  box-shadow: 10px 12px 0 var(--ss-sea);
  overflow: hidden !important;
  background: var(--ss-ink);
}

.ss-events-live-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: opacity;
}

.ss-events-live-photo--one {
  object-position: 56% 50%;
  animation: ss26-events-photo-one 12s ease-in-out infinite;
}

.ss-events-live-photo--two {
  object-position: 50% 40%;
  animation: ss26-events-photo-two 12s ease-in-out infinite;
}

@keyframes ss26-events-photo-one {
  0%, 42%   { opacity: 1; }
  50%, 92%  { opacity: 0; }
  100%      { opacity: 1; }
}

@keyframes ss26-events-photo-two {
  0%, 42%   { opacity: 0; }
  50%, 92%  { opacity: 1; }
  100%      { opacity: 0; }
}

@media (max-width: 1050px) {
  .ss-record-hero-grid,
  .ss-events-hero-grid {
    width: min(760px, calc(100% - (var(--ss-pad) * 2)));
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .ss-record-hero-image,
  .ss-events-hero-art {
    width: min(82%, 560px) !important;
    justify-self: center;
  }
}

@media (max-width: 700px) {
  .ss-record-hero-grid,
  .ss-events-hero-grid {
    width: calc(100% - (var(--ss-pad) * 2));
    padding-top: 36px !important;
    padding-bottom: 42px !important;
    gap: 28px;
  }

  .ss-record-title {
    font-size: clamp(50px, 14vw, 78px);
  }

  .ss-record-hero-image,
  .ss-events-hero-art {
    width: 100% !important;
    max-width: 500px;
  }

  .ss-events-hero-copy {
    padding-bottom: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-events-live-photo {
    animation: none !important;
  }

  .ss-events-live-photo--one {
    opacity: 1;
  }

  .ss-events-live-photo--two {
    opacity: 0;
  }
}


/* ==========================================================
   v1.96 — shared internal-page hero frame
   ========================================================== */

/*
 * Record / Rehearse / Studio / Events now share one desktop hero geometry.
 * The purpose is visual continuity: when navigating between these pages the
 * image frame occupies the same physical slot rather than changing size or
 * drifting left/right/up/down from page to page.
 */
@media (min-width: 1051px) {
  .ss-record-hero-grid,
  .ss-rehearsal-hero-grid,
  .ss-studio-hero-grid,
  .ss-events-hero-grid {
    width: min(1240px, calc(100% - (var(--ss-pad) * 2))) !important;
    height: 600px !important;
    min-height: 600px !important;
    margin-inline: auto !important;
    padding: 54px 0 !important;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 500px !important;
    gap: 70px !important;
    align-items: center !important;
  }

  .ss-record-hero-copy,
  .ss-rehearsal-hero-copy,
  .ss-studio-hero-copy,
  .ss-events-hero-copy {
    min-width: 0;
    align-self: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center;
  }

  .ss-record-hero-image,
  .ss-rehearsal-hero-image,
  .ss-studio-hero-image,
  .ss-events-hero-art {
    width: 500px !important;
    height: 375px !important;
    min-width: 500px !important;
    min-height: 375px !important;
    max-width: 500px !important;
    max-height: 375px !important;
    aspect-ratio: 4 / 3 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
    transform: none !important;
  }

  .ss-record-hero-image,
  .ss-rehearsal-hero-image,
  .ss-studio-hero-image,
  .ss-events-hero-photo {
    border: 2px solid var(--ss-ink) !important;
    box-shadow: 10px 12px 0 var(--ss-sea) !important;
    overflow: hidden !important;
    background: var(--ss-ink);
  }

  .ss-record-hero-image img,
  .ss-rehearsal-hero-image img,
  .ss-studio-hero-image img,
  .ss-events-hero-photo img,
  .ss-events-live-photo {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: cover !important;
  }

  /* Events uses an outer crossfade holder, with the visible frame inside it. */
  .ss-events-hero-photo {
    position: absolute !important;
    inset: 0 !important;
    width: 500px !important;
    height: 375px !important;
    min-width: 500px !important;
    min-height: 375px !important;
    max-width: 500px !important;
    max-height: 375px !important;
    margin: 0 !important;
    transform: none !important;
  }
}

/* Tablet/mobile: keep the same 4:3 visual language even though the page
   naturally stacks vertically. */
@media (max-width: 1050px) {
  .ss-record-hero-image,
  .ss-rehearsal-hero-image,
  .ss-studio-hero-image,
  .ss-events-hero-art {
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    justify-self: center !important;
    align-self: center !important;
    margin-inline: auto !important;
    transform: none !important;
  }

  .ss-record-hero-image,
  .ss-rehearsal-hero-image,
  .ss-studio-hero-image,
  .ss-events-hero-photo {
    border: 2px solid var(--ss-ink) !important;
    box-shadow: 8px 10px 0 var(--ss-sea) !important;
  }

  .ss-events-hero-photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
  }
}


/* ==========================================================
   v1.97 — compact rehearsal loyalty strip
   ========================================================== */

.ss-rehearsal-loyalty {
  background: var(--ss-ink);
  color: var(--ss-foam);
  border-top: 1px solid rgba(244,240,230,.16);
  border-bottom: 1px solid rgba(244,240,230,.16);
}

.ss-rehearsal-loyalty-inner {
  min-height: 116px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding-top: 18px;
  padding-bottom: 18px;
}

.ss-rehearsal-loyalty-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
}

.ss-rehearsal-loyalty-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid rgba(244,240,230,.42);
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ss-sky);
}

.ss-rehearsal-loyalty-copy > strong {
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.ss-rehearsal-loyalty-rule {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
  font-size: 15px;
  color: rgba(244,240,230,.84);
}

.ss-rehearsal-loyalty-rule b {
  color: var(--ss-sky);
}

.ss-rehearsal-loyalty-rule i {
  font-style: normal;
  opacity: .45;
}

.ss-rehearsal-loyalty-copy small {
  flex-basis: 100%;
  margin-top: -2px;
  font-size: 12px;
  color: rgba(244,240,230,.56);
}

.ss-rehearsal-loyalty-stamps {
  display: grid;
  grid-template-columns: repeat(6, 30px);
  gap: 7px;
  align-items: center;
}

.ss-rehearsal-loyalty-stamps span {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(244,240,230,.38);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  color: rgba(244,240,230,.64);
  background: rgba(255,255,255,.025);
}

.ss-rehearsal-loyalty-stamps span.is-milestone {
  width: 34px;
  height: 34px;
  margin: -2px;
  border: 2px solid var(--ss-sky);
  background: var(--ss-sea);
  color: var(--ss-ink);
  box-shadow: 0 0 0 4px rgba(35,153,187,.10);
}

.ss-rehearsal-loyalty-stamps span.is-milestone b {
  font-size: 9px;
  line-height: 1;
}

@media (max-width: 850px) {
  .ss-rehearsal-loyalty-inner {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .ss-rehearsal-loyalty-copy {
    justify-content: center;
    text-align: center;
  }

  .ss-rehearsal-loyalty-stamps {
    justify-self: center;
  }
}

@media (max-width: 520px) {
  .ss-rehearsal-loyalty-inner {
    padding-top: 17px;
    padding-bottom: 17px;
  }

  .ss-rehearsal-loyalty-copy {
    gap: 7px 10px;
  }

  .ss-rehearsal-loyalty-copy > strong {
    flex-basis: 100%;
  }

  .ss-rehearsal-loyalty-rule {
    justify-content: center;
    width: 100%;
    font-size: 14px;
  }

  .ss-rehearsal-loyalty-copy small {
    line-height: 1.35;
  }

  .ss-rehearsal-loyalty-stamps {
    grid-template-columns: repeat(6, 27px);
    gap: 6px;
  }

  .ss-rehearsal-loyalty-stamps span {
    width: 27px;
    height: 27px;
    font-size: 8px;
  }

  .ss-rehearsal-loyalty-stamps span.is-milestone {
    width: 31px;
    height: 31px;
  }
}


/* ==========================================================
   v1.98 — physical loyalty-card treatment
   ========================================================== */

.ss-rehearsal-loyalty {
  background: var(--ss-foam);
  color: var(--ss-ink);
  border-top: 2px solid var(--ss-ink);
  border-bottom: 2px solid var(--ss-ink);
}

.ss-rehearsal-loyalty-inner {
  min-height: 122px;
  position: relative;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 4.5vw, 64px);
  padding-top: 20px;
  padding-bottom: 20px;
}

.ss-rehearsal-loyalty-inner::before {
  content: "";
  position: absolute;
  inset: 8px 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(16,40,58,.025) 0,
      rgba(16,40,58,.025) 1px,
      transparent 1px,
      transparent 4px
    );
  opacity: .7;
}

.ss-rehearsal-loyalty-copy,
.ss-rehearsal-loyalty-stamps {
  position: relative;
  z-index: 1;
}

.ss-rehearsal-loyalty-copy {
  gap: 8px 15px;
}

.ss-rehearsal-loyalty-kicker {
  min-height: 30px;
  padding: 5px 10px 4px;
  border: 2px solid var(--ss-ink);
  border-radius: 2px;
  color: var(--ss-ink);
  background: transparent;
  font-size: 10px;
  letter-spacing: .14em;
  transform: rotate(-2deg);
  box-shadow: 2px 2px 0 rgba(16,40,58,.12);
}

.ss-rehearsal-loyalty-copy > strong {
  color: var(--ss-ink);
  font-size: clamp(24px, 2.2vw, 34px);
  letter-spacing: -.03em;
}

.ss-rehearsal-loyalty-rule {
  color: rgba(16,40,58,.76);
  font-size: 15px;
}

.ss-rehearsal-loyalty-rule b {
  display: inline-block;
  color: var(--ss-sea);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.01em;
}

.ss-rehearsal-loyalty-rule i {
  color: rgba(16,40,58,.42);
}

.ss-rehearsal-loyalty-copy small {
  color: rgba(16,40,58,.58);
  font-size: 12px;
}

.ss-rehearsal-loyalty-stamps {
  grid-template-columns: repeat(6, 32px);
  gap: 8px;
  padding: 5px 4px;
}

.ss-rehearsal-loyalty-stamps span {
  position: relative;
  width: 32px;
  height: 32px;
  border: 2px solid rgba(16,40,58,.52);
  border-radius: 50%;
  color: var(--ss-ink);
  background: rgba(255,255,255,.25);
  box-shadow: inset 0 0 0 2px rgba(16,40,58,.035);
}

.ss-rehearsal-loyalty-stamps span:nth-child(3n+1) {
  transform: rotate(-4deg);
}

.ss-rehearsal-loyalty-stamps span:nth-child(3n+2) {
  transform: rotate(2deg);
}

.ss-rehearsal-loyalty-stamps span:nth-child(3n) {
  transform: rotate(-1deg);
}

.ss-rehearsal-loyalty-stamps span i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(16,40,58,.18);
  background: transparent;
}

.ss-rehearsal-loyalty-stamps span.is-milestone {
  width: 38px;
  height: 38px;
  margin: -3px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-sea);
  color: var(--ss-paper);
  box-shadow:
    3px 3px 0 var(--ss-ink),
    inset 0 0 0 2px rgba(255,255,255,.12);
  transform: rotate(-4deg);
}

.ss-rehearsal-loyalty-stamps span.is-milestone:last-child {
  transform: rotate(4deg);
}

.ss-rehearsal-loyalty-stamps span.is-milestone b {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: -.02em;
}

@media (max-width: 850px) {
  .ss-rehearsal-loyalty-inner {
    min-height: 0;
    gap: 16px;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .ss-rehearsal-loyalty-copy {
    max-width: 640px;
    margin-inline: auto;
  }
}

@media (max-width: 520px) {
  .ss-rehearsal-loyalty-inner {
    padding-top: 17px;
    padding-bottom: 17px;
  }

  .ss-rehearsal-loyalty-kicker {
    margin-bottom: 2px;
  }

  .ss-rehearsal-loyalty-copy > strong {
    font-size: 26px;
  }

  .ss-rehearsal-loyalty-rule {
    font-size: 13px;
    gap: 6px;
  }

  .ss-rehearsal-loyalty-stamps {
    grid-template-columns: repeat(6, 29px);
    gap: 7px;
  }

  .ss-rehearsal-loyalty-stamps span {
    width: 29px;
    height: 29px;
  }

  .ss-rehearsal-loyalty-stamps span.is-milestone {
    width: 34px;
    height: 34px;
  }
}


/* ==========================================================
   v1.99 — enquiry drawer + Contact page
   ========================================================== */

body.ss-enquiry-open {
  overflow: hidden;
}

.ss-enquiry-modal[hidden] {
  display: none !important;
}

.ss-enquiry-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  justify-items: end;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear .22s;
}

.ss-enquiry-modal.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.ss-enquiry-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,25,36,.72);
  opacity: 0;
  transition: opacity .22s ease;
}

.ss-enquiry-modal.is-open .ss-enquiry-modal-backdrop {
  opacity: 1;
}

.ss-enquiry-panel {
  position: relative;
  z-index: 1;
  width: min(620px, 92vw);
  height: 100%;
  overflow-y: auto;
  padding: clamp(42px, 5vw, 72px);
  background: var(--ss-foam);
  color: var(--ss-ink);
  border-left: 2px solid var(--ss-ink);
  box-shadow: -18px 0 60px rgba(0,0,0,.24);
  transform: translateX(105%);
  transition: transform .26s cubic-bezier(.22,.78,.27,1);
  outline: none;
}

.ss-enquiry-modal.is-open .ss-enquiry-panel {
  transform: translateX(0);
}

.ss-enquiry-close {
  position: absolute;
  right: 18px;
  top: 16px;
  width: 42px;
  height: 42px;
  border: 2px solid var(--ss-ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ss-ink);
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.ss-enquiry-close:hover,
.ss-enquiry-close:focus-visible {
  background: var(--ss-sea);
  transform: rotate(5deg);
}

.ss-enquiry-panel-head {
  padding-right: 44px;
  margin-bottom: 30px;
}

.ss-enquiry-panel-head h2 {
  margin: 4px 0 12px;
  font-size: clamp(48px, 6vw, 82px);
  line-height: .88;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.ss-enquiry-panel-head > p:last-child {
  max-width: 460px;
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
}

.ss-enquiry-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.ss-enquiry-field {
  display: grid;
  gap: 7px;
}

.ss-enquiry-field--wide {
  grid-column: 1 / -1;
}

.ss-enquiry-field label {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ss-enquiry-field label span {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  opacity: .55;
}

.ss-enquiry-field input,
.ss-enquiry-field select,
.ss-enquiry-field textarea {
  width: 100%;
  border: 1.5px solid rgba(16,40,58,.58);
  border-radius: 0;
  background: var(--ss-paper);
  color: var(--ss-ink);
  padding: 13px 14px;
  font: inherit;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ss-enquiry-field textarea {
  min-height: 135px;
  resize: vertical;
}

.ss-enquiry-field input:focus,
.ss-enquiry-field select:focus,
.ss-enquiry-field textarea:focus {
  border-color: var(--ss-sea);
  box-shadow: 0 0 0 3px rgba(35,153,187,.14);
}

.ss-enquiry-trap {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.ss-enquiry-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  padding-top: 2px;
}

.ss-enquiry-form-actions .ss-btn {
  border: 2px solid var(--ss-ink);
}

.ss-enquiry-form-status {
  flex: 1 1 220px;
  min-height: 1.4em;
  font-size: 13px;
  line-height: 1.4;
}

.ss-enquiry-form-status.is-success {
  color: #176b3b;
  font-weight: 700;
}

.ss-enquiry-form-status.is-error {
  color: #a72b2b;
  font-weight: 700;
}

.ss-enquiry-direct {
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(16,40,58,.2);
  font-size: 13px;
  color: rgba(16,40,58,.68);
}

.ss-enquiry-direct a {
  color: var(--ss-ink);
  font-weight: 800;
}

/* Contact page */
.ss-contact-page {
  background: var(--ss-foam);
}

.ss-contact-hero {
  padding: clamp(72px, 9vw, 132px) 0 clamp(54px, 6vw, 82px);
  background: var(--ss-ink);
  color: var(--ss-foam);
  text-align: center;
}

.ss-contact-hero-inner {
  max-width: 900px;
}

.ss-contact-title {
  margin: 8px 0 20px;
  font-size: clamp(72px, 10vw, 150px);
  line-height: .82;
  letter-spacing: -.065em;
  text-transform: uppercase;
}

.ss-contact-intro {
  max-width: 700px;
  margin: 0 auto;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.4;
  color: rgba(244,240,230,.8);
}

.ss-contact-main {
  background: var(--ss-foam);
}

.ss-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: start;
}

.ss-contact-form-card {
  padding: clamp(28px, 4vw, 54px);
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
  box-shadow: 10px 12px 0 var(--ss-sea);
}

.ss-contact-details {
  padding-top: 18px;
}

.ss-contact-details h2 {
  margin: 8px 0 28px;
  font-size: clamp(52px, 5.5vw, 82px);
  line-height: .88;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.ss-contact-details address {
  margin: 0 0 26px;
  font-style: normal;
  font-size: 18px;
  line-height: 1.55;
}

.ss-contact-methods {
  display: grid;
  gap: 7px;
  margin-bottom: 28px;
}

.ss-contact-methods a {
  color: var(--ss-ink);
  font-weight: 800;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.ss-contact-note {
  max-width: 360px;
  color: rgba(16,40,58,.68);
}

.ss-contact-noscript {
  margin-top: 20px;
  padding: 14px;
  background: rgba(35,153,187,.1);
  border-left: 3px solid var(--ss-sea);
}

.site-footer .ss-footer-links a {
  color: inherit;
}

@media (max-width: 820px) {
  .ss-enquiry-panel {
    width: min(680px, 100vw);
    padding: 54px var(--ss-pad) 42px;
  }

  .ss-contact-grid {
    grid-template-columns: 1fr;
  }

  .ss-contact-details {
    text-align: center;
  }

  .ss-contact-note {
    margin-inline: auto;
  }
}

@media (max-width: 560px) {
  .ss-enquiry-modal {
    align-items: end;
  }

  .ss-enquiry-panel {
    width: 100%;
    height: min(92svh, 820px);
    border-left: 0;
    border-top: 2px solid var(--ss-ink);
    transform: translateY(105%);
    padding-top: 58px;
  }

  .ss-enquiry-modal.is-open .ss-enquiry-panel {
    transform: translateY(0);
  }

  .ss-enquiry-form {
    grid-template-columns: 1fr;
  }

  .ss-enquiry-field,
  .ss-enquiry-field--wide {
    grid-column: 1;
  }

  .ss-enquiry-panel-head h2 {
    font-size: 54px;
  }

  .ss-contact-form-card {
    padding: 22px;
    box-shadow: 6px 7px 0 var(--ss-sea);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-enquiry-modal,
  .ss-enquiry-modal-backdrop,
  .ss-enquiry-panel,
  .ss-enquiry-close {
    transition: none !important;
  }
}


/* ==========================================================
   v2.00 — Studio hero video
   ========================================================== */

.ss-studio-hero-media {
  position: relative !important;
  isolation: isolate;
}

.ss-studio-hero-poster,
.ss-studio-hero-video {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover !important;
}

.ss-studio-hero-poster {
  z-index: 1;
}

.ss-studio-hero-video {
  z-index: 2;
  opacity: 0;
  transition: opacity .55s ease;
  background: var(--ss-ink);
}

.ss-studio-hero-video.is-ready {
  opacity: 1;
}

/* Phones use the still rather than loading/playing the hero video. */
@media (max-width: 700px) {
  .ss-studio-hero-video {
    display: none !important;
  }
}

/* Reduced motion always keeps the still image. */
@media (prefers-reduced-motion: reduce) {
  .ss-studio-hero-video {
    display: none !important;
    opacity: 0 !important;
    transition: none !important;
  }
}


/* ==========================================================
   v2.01 — full-bleed Studio video hero
   ========================================================== */

/*
 * Studio deliberately steps out of the shared internal-page photo-frame
 * system and uses the same cinematic language as the homepage.
 */
.ss-studio-hero--video {
  position: relative;
  isolation: isolate;
  min-height: clamp(650px, calc(100svh - 96px), 850px);
  overflow: hidden;
  display: block;
  background: var(--ss-ink);
  border-bottom: 0;
}

.ss-studio-video-layer,
.ss-studio-video-shade {
  position: absolute;
  inset: 0;
}

.ss-studio-video-layer {
  z-index: 0;
  background:
    url("assets/images/studio-hero-poster.jpg") center center / cover no-repeat,
    var(--ss-ink);
}

.ss-studio-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: grayscale(.72) contrast(1.05) brightness(.68);
  opacity: .92;
}

.ss-studio-video-shade {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(7,20,30,.50) 0%,
      rgba(7,20,30,.45) 44%,
      rgba(7,20,30,.70) 100%),
    linear-gradient(90deg,
      rgba(16,40,58,.22) 0%,
      rgba(16,40,58,.08) 50%,
      rgba(16,40,58,.22) 100%);
}

.ss-studio-video-content {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.ss-studio-hero--video .ss-studio-hero-copy {
  width: min(980px, 92vw);
  margin-inline: auto;
  padding: clamp(64px, 7vw, 100px) 0 clamp(72px, 8vw, 110px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ss-foam);
  text-align: center;
}

.ss-studio-hero--video .ss-eyebrow {
  color: rgba(244,240,230,.82);
  text-align: center;
}

.ss-studio-hero--video .ss-studio-title {
  max-width: 930px;
  margin: 8px auto 0;
  color: var(--ss-foam);
  font-size: clamp(72px, 9.2vw, 145px);
  line-height: .79;
  letter-spacing: -.06em;
  text-align: center;
  text-shadow: 0 8px 34px rgba(0,0,0,.28);
}

.ss-studio-hero--video .ss-studio-title span {
  color: var(--ss-sky);
}

.ss-studio-hero--video .ss-studio-intro {
  max-width: 650px;
  margin: clamp(24px, 3vw, 34px) auto;
  color: rgba(244,240,230,.90);
  font-size: clamp(18px, 1.65vw, 23px);
  line-height: 1.45;
  text-align: center;
}

.ss-studio-hero--video .ss-actions {
  justify-content: center;
}

.ss-studio-hero--video .ss-actions .ss-btn,
.ss-studio-hero--video .ss-actions .ss-btn--ghost {
  background: transparent;
  color: var(--ss-foam);
  border-color: rgba(244,240,230,.82);
  box-shadow: none;
}

.ss-studio-hero--video .ss-actions .ss-btn:hover,
.ss-studio-hero--video .ss-actions .ss-btn:focus-visible,
.ss-studio-hero--video .ss-actions .ss-btn--ghost:hover,
.ss-studio-hero--video .ss-actions .ss-btn--ghost:focus-visible,
.ss-studio-hero--video .ss-actions .ss-btn:active,
.ss-studio-hero--video .ss-actions .ss-btn--ghost:active {
  background: var(--ss-sea);
  color: var(--ss-ink);
  border-color: var(--ss-sea);
}

@media (max-width: 1050px) {
  .ss-studio-hero--video {
    min-height: clamp(620px, calc(100svh - 84px), 820px);
  }

  .ss-studio-hero--video .ss-studio-title {
    font-size: clamp(66px, 11.5vw, 112px);
  }
}

@media (max-width: 700px) {
  .ss-studio-hero--video {
    min-height: calc(100svh - 84px);
  }

  .ss-studio-video {
    object-position: center center;
    filter: grayscale(.75) contrast(1.04) brightness(.62);
  }

  .ss-studio-video-shade {
    background:
      linear-gradient(180deg,
        rgba(7,20,30,.62) 0%,
        rgba(7,20,30,.48) 45%,
        rgba(7,20,30,.76) 100%);
  }

  .ss-studio-hero--video .ss-studio-hero-copy {
    width: 100%;
    padding: 42px 0 54px;
  }

  .ss-studio-hero--video .ss-studio-title {
    font-size: clamp(58px, 17vw, 88px);
    line-height: .80;
  }

  .ss-studio-hero--video .ss-studio-intro {
    max-width: 430px;
    margin: 22px auto 25px;
    font-size: 17px;
  }

  .ss-studio-hero--video .ss-actions {
    width: 100%;
    align-items: stretch;
  }

  .ss-studio-hero--video .ss-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-studio-video {
    display: none;
  }
}


/* ==========================================================
   v2.02 — dedicated portrait Studio hero video on mobile
   ========================================================== */

/*
 * Desktop keeps the existing 1920x1080 landscape Studio clip.
 * Phones receive a separately encoded 720x1280 (9:16) centre crop so the
 * mobile hero no longer has to throw away most of a landscape frame.
 */
@media (max-width: 700px) {
  .ss-studio-video-layer {
    background:
      url("assets/images/studio-hero-mobile-poster.jpg") center center / cover no-repeat,
      var(--ss-ink);
  }

  .ss-studio-video {
    object-position: center center;
  }
}


/* ==========================================================
   v2.03 — shorter landscape Studio hero on mobile
   ========================================================== */

/*
 * Phones now keep the original landscape Studio video rather than switching
 * to a portrait crop. The hero is deliberately much shorter than a full
 * viewport so considerably more of the 16:9 frame remains visible.
 */
@media (max-width: 700px) {
  .ss-studio-hero--video {
    min-height: clamp(480px, 62svh, 555px) !important;
    height: auto;
  }

  .ss-studio-video-layer {
    background:
      url("assets/images/studio-hero-poster.jpg") center center / cover no-repeat,
      var(--ss-ink);
  }

  .ss-studio-video {
    object-fit: cover;
    object-position: center center;
  }

  .ss-studio-video-shade {
    background:
      linear-gradient(180deg,
        rgba(7,20,30,.56) 0%,
        rgba(7,20,30,.42) 43%,
        rgba(7,20,30,.68) 100%);
  }

  .ss-studio-video-content {
    min-height: clamp(480px, 62svh, 555px);
  }

  .ss-studio-hero--video .ss-studio-hero-copy {
    padding: 28px 0 32px;
  }

  .ss-studio-hero--video .ss-studio-title {
    font-size: clamp(48px, 14vw, 68px);
    line-height: .79;
  }

  .ss-studio-hero--video .ss-studio-intro {
    max-width: 390px;
    margin: 16px auto 18px;
    font-size: 15px;
    line-height: 1.38;
  }

  .ss-studio-hero--video .ss-actions {
    gap: 9px;
  }

  .ss-studio-hero--video .ss-btn {
    min-height: 42px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}


/* ==========================================================
   v2.04 — shared rotating hero photography
   ========================================================== */

.ss-rotating-hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  background: var(--ss-ink);
}

.ss-rotating-hero-image {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover !important;
  opacity: 0;
  transform: scale(1);
  will-change: opacity, transform;
}

.ss-record-hero-image.ss-rotating-hero .ss-rotating-hero-image {
  animation-duration: 21s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.ss-record-hero-image .ss-rotating-hero-image--1 {
  animation-name: ss26-three-photo-one;
  object-position: 50% 52% !important;
}

.ss-record-hero-image .ss-rotating-hero-image--2 {
  animation-name: ss26-three-photo-two;
  object-position: 50% 52% !important;
}

.ss-record-hero-image .ss-rotating-hero-image--3 {
  animation-name: ss26-three-photo-three;
  object-position: 50% 50% !important;
}

.ss-record-hero-image figcaption {
  position: absolute;
  z-index: 5;
}

.ss-rehearsal-hero-image.ss-rotating-hero .ss-rotating-hero-image {
  animation-duration: 16s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.ss-rehearsal-hero-image .ss-rotating-hero-image--1 {
  animation-name: ss26-two-photo-one;
  object-position: 50% 50% !important;
}

.ss-rehearsal-hero-image .ss-rotating-hero-image--2 {
  animation-name: ss26-two-photo-two;
  object-position: 50% 52% !important;
}

.ss-events-live-photo {
  transform: scale(1);
  will-change: opacity, transform;
  animation-duration: 21s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
}

.ss-events-live-photo--one {
  animation-name: ss26-three-photo-one !important;
}

.ss-events-live-photo--two {
  animation-name: ss26-three-photo-two !important;
}

.ss-events-live-photo--three {
  object-position: 50% 45%;
  animation-name: ss26-three-photo-three !important;
}

@keyframes ss26-three-photo-one {
  0%   { opacity: 1; transform: scale(1); }
  27%  { opacity: 1; transform: scale(1.025); }
  34%  { opacity: 0; transform: scale(1.03); }
  93%  { opacity: 0; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes ss26-three-photo-two {
  0%, 27% { opacity: 0; transform: scale(1); }
  34%     { opacity: 1; transform: scale(1); }
  60%     { opacity: 1; transform: scale(1.025); }
  67%     { opacity: 0; transform: scale(1.03); }
  100%    { opacity: 0; transform: scale(1); }
}

@keyframes ss26-three-photo-three {
  0%, 60% { opacity: 0; transform: scale(1); }
  67%     { opacity: 1; transform: scale(1); }
  93%     { opacity: 1; transform: scale(1.025); }
  100%    { opacity: 0; transform: scale(1.03); }
}

@keyframes ss26-two-photo-one {
  0%   { opacity: 1; transform: scale(1); }
  43%  { opacity: 1; transform: scale(1.025); }
  51%  { opacity: 0; transform: scale(1.03); }
  92%  { opacity: 0; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes ss26-two-photo-two {
  0%, 43% { opacity: 0; transform: scale(1); }
  51%     { opacity: 1; transform: scale(1); }
  92%     { opacity: 1; transform: scale(1.025); }
  100%    { opacity: 0; transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .ss-rotating-hero-image,
  .ss-events-live-photo {
    animation: none !important;
    transform: none !important;
  }

  .ss-rotating-hero-image--1,
  .ss-events-live-photo--one {
    opacity: 1 !important;
  }

  .ss-rotating-hero-image--2,
  .ss-rotating-hero-image--3,
  .ss-events-live-photo--two,
  .ss-events-live-photo--three {
    opacity: 0 !important;
  }
}


/* ==========================================================
   v2.05 — Meet the Team
   ========================================================== */

.ss-studio-team {
  background: var(--ss-paper);
}

.ss-studio-team-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: clamp(36px, 7vw, 110px);
  align-items: end;
  margin-bottom: clamp(34px, 5vw, 62px);
}

.ss-studio-team-head .ss-heading span {
  color: var(--ss-sea);
}

.ss-studio-team-head .ss-copy {
  max-width: 520px;
  margin: 0 0 6px auto;
}

.ss-studio-team-photo {
  position: relative;
  margin: 0 0 clamp(36px, 5vw, 58px);
  border: 2px solid var(--ss-ink);
  background: var(--ss-ink);
  box-shadow: 12px 14px 0 var(--ss-sea);
  overflow: hidden;
}

.ss-studio-team-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.ss-studio-team-bios {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.ss-team-card {
  border-top: 2px solid var(--ss-ink);
  border-bottom: 1px solid rgba(16,40,58,.22);
  background: transparent;
}

.ss-team-card summary {
  min-height: 102px;
  padding: 20px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  list-style: none;
  cursor: pointer;
}

.ss-team-card summary::-webkit-details-marker {
  display: none;
}

.ss-team-card summary span {
  display: grid;
  gap: 4px;
}

.ss-team-card summary strong {
  font-size: clamp(23px, 2.2vw, 32px);
  line-height: .98;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.ss-team-card summary small {
  font-size: 10px;
  line-height: 1.35;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ss-sea);
}

.ss-team-card summary i {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ss-ink);
  border-radius: 50%;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  transition: transform .22s ease, background .22s ease, color .22s ease;
}

.ss-team-card[open] summary i {
  transform: rotate(45deg);
  background: var(--ss-sea);
  color: var(--ss-ink);
}

.ss-team-card-body {
  padding: 0 0 24px;
  color: rgba(16,40,58,.82);
  font-size: 15px;
  line-height: 1.62;
}

.ss-team-card-body p {
  margin: 0 0 14px;
}

.ss-team-card-body p:last-child {
  margin-bottom: 0;
}

.ss-team-card-body a {
  color: var(--ss-ink);
  font-weight: 800;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .ss-studio-team-head {
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: center;
  }

  .ss-studio-team-head .ss-copy {
    margin-inline: auto;
  }

  .ss-studio-team-bios {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .ss-team-card summary {
    min-height: 86px;
  }
}

@media (max-width: 600px) {
  .ss-studio-team-photo {
    margin-inline: 0;
    box-shadow: 7px 8px 0 var(--ss-sea);
  }

  .ss-team-card summary strong {
    font-size: 25px;
  }

  .ss-team-card-body {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-team-card summary i {
    transition: none;
  }
}


/* ==========================================================
   v2.09 — Studio desk spacing + cleaner footer/contact route
   ========================================================== */

@media (min-width: 1051px) {
  .ss-studio-desk-grid {
    grid-template-columns: minmax(0, .88fr) minmax(500px, 1.12fr);
    gap: clamp(82px, 7vw, 130px);
  }

  .ss-studio-desk-copy {
    min-width: 0;
    padding-right: 12px;
  }

  .ss-studio-desk-copy h2 {
    max-width: 560px;
    font-size: clamp(62px, 5.8vw, 100px);
  }
}

.ss-footer-contact {
  margin: 0;
}

.ss-footer-contact-link {
  display: inline-block;
  color: var(--ss-foam);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.ss-footer-contact-link:hover,
.ss-footer-contact-link:focus-visible {
  color: var(--ss-sky);
}


/* ==========================================================
   v2.10 — full equipment accordion
   ========================================================== */

.ss-gear-group summary strong small {
  display: inline;
  font-size: .48em;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: none;
  opacity: .62;
}

.ss-gear-panel-inner--pa h4 {
  margin: 18px 0 8px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ss-sea);
}

.ss-gear-panel-inner--pa h4:first-child {
  margin-top: 0;
}

.ss-gear-panel-inner--pa ul + h4 {
  margin-top: 24px;
}


/* ==========================================================
   v2.11 — homepage cream transition + CTA cleanup
   ========================================================== */

/*
 * Bring the site's primary cream canvas in immediately after the cinematic
 * homepage hero. The video remains dark; the wave now acts as the transition
 * into cream, followed by a cream "What are you here for?" section.
 */
.home .ss-wave {
  background: var(--ss-foam);
}

.home .ss-choice {
  background: var(--ss-foam);
  color: var(--ss-ink);
}

.home .ss-choice-head p {
  color: rgba(16,40,58,.72);
}

.home .ss-service-grid {
  border-color: rgba(16,40,58,.30);
  background: transparent;
}

.home .ss-service-card {
  color: var(--ss-ink);
}

.home .ss-service-card + .ss-service-card {
  border-color: rgba(16,40,58,.30);
}

.home .ss-service-card::before {
  background:
    linear-gradient(135deg, rgba(35,153,187,.18), rgba(143,210,229,.04) 62%, transparent);
}

.home .ss-service-num {
  color: rgba(16,40,58,.68);
}

.home .ss-service-foot p {
  color: rgba(16,40,58,.76);
}

.home .ss-service-go {
  border-color: var(--ss-ink);
  color: var(--ss-ink);
}

.home .ss-service-card:hover .ss-service-go,
.home .ss-service-card:focus-visible .ss-service-go {
  background: var(--ss-sea);
  border-color: var(--ss-sea);
  color: var(--ss-ink);
}

/* On mobile the card dividers need the cream-version ink rule as well. */
@media (max-width: 700px) {
  .home .ss-service-card + .ss-service-card {
    border-left: 0;
    border-top-color: rgba(16,40,58,.30);
  }
}

/* Contact page explicit Home control. */
.ss-contact-hero {
  position: relative;
}

.ss-contact-home-link {
  position: absolute;
  top: clamp(22px, 3vw, 38px);
  left: var(--ss-pad);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(244,240,230,.84);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .18s ease;
}

.ss-contact-home-arrow {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
}

.ss-contact-home-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}

.ss-contact-home-link:hover,
.ss-contact-home-link:focus-visible {
  color: var(--ss-sky);
}

.ss-contact-home-link:hover .ss-contact-home-arrow svg,
.ss-contact-home-link:focus-visible .ss-contact-home-arrow svg {
  transform: translateX(-3px);
}

@media (max-width: 560px) {
  .ss-contact-home-link {
    top: 18px;
  }

  .ss-contact-hero {
    padding-top: 82px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-contact-home-link,
  .ss-contact-home-arrow svg {
    transition: none;
  }
}


/* ==========================================================
   v2.12 — cream intro + navy homepage service cards
   ========================================================== */

/*
 * Keep the "What are you here for?" heading area on the site's main cream
 * canvas, but restore the three Rehearse / Record / Events cards to the
 * darker blue treatment.
 */
.home .ss-choice {
  background: var(--ss-foam);
  color: var(--ss-ink);
}

.home .ss-choice-head p {
  color: rgba(16,40,58,.72);
}

.home .ss-service-grid {
  background: var(--ss-ink);
  border-color: rgba(244,240,230,.24);
}

.home .ss-service-card {
  color: var(--ss-foam);
  background: var(--ss-ink);
}

.home .ss-service-card + .ss-service-card {
  border-color: rgba(244,240,230,.24);
}

.home .ss-service-card::before {
  background: linear-gradient(135deg, rgba(35,153,187,.22), transparent 62%);
}

.home .ss-service-num {
  color: rgba(244,240,230,.66);
}

.home .ss-service-foot p {
  color: rgba(244,240,230,.78);
}

.home .ss-service-go {
  border-color: var(--ss-foam);
  color: var(--ss-foam);
}

.home .ss-service-card:hover .ss-service-go,
.home .ss-service-card:focus-visible .ss-service-go {
  background: var(--ss-sea);
  border-color: var(--ss-sea);
  color: var(--ss-ink);
}

@media (max-width: 700px) {
  .home .ss-service-card + .ss-service-card {
    border-left: 0;
    border-top-color: rgba(244,240,230,.24);
  }
}


/* ==========================================================
   v2.13 — "Made Here." compact media carousel
   ========================================================== */

.ss-made-here {
  background: var(--ss-paper);
  overflow: hidden;
}

.ss-made-here-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .65fr);
  gap: clamp(28px, 6vw, 90px);
  align-items: end;
  margin-bottom: clamp(34px, 5vw, 62px);
}

.ss-made-here-head .ss-heading {
  margin-bottom: 0;
}

.ss-made-here-head .ss-copy {
  margin: 0 0 6px;
  max-width: 500px;
  justify-self: end;
}

.ss-made-here-shell {
  position: relative;
}

.ss-made-here-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(290px, 31%);
  gap: clamp(18px, 2.2vw, 30px);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  padding: 0 max(var(--ss-pad), calc((100vw - 1400px) / 2)) 14px 0;
  cursor: grab;
}

.ss-made-here-track::-webkit-scrollbar {
  display: none;
}

.ss-made-here-track:active {
  cursor: grabbing;
}

.ss-made-here-track:focus-visible {
  outline: 2px solid var(--ss-sea);
  outline-offset: 8px;
}

.ss-project-card {
  scroll-snap-align: start;
  border: 2px solid var(--ss-ink);
  background: var(--ss-foam);
  min-width: 0;
}

.ss-project-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ss-ink);
}

.ss-project-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(16,40,58,.16));
  pointer-events: none;
}

.ss-project-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.9) contrast(1.03);
  transition: transform .65s cubic-bezier(.2,.75,.2,1), filter .3s ease;
}

.ss-project-card:hover .ss-project-media img {
  transform: scale(1.035);
  filter: saturate(1) contrast(1.04);
}

.ss-project-meta {
  min-height: 170px;
  padding: 22px 24px 24px;
}

.ss-project-type {
  display: block;
  margin-bottom: 12px;
  color: var(--ss-sea);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.ss-project-meta h3 {
  margin: 0 0 8px;
  font-size: clamp(28px, 2.5vw, 42px);
  line-height: .94;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.ss-project-meta p {
  margin: 0;
  color: rgba(16,40,58,.66);
  font-size: 13px;
  font-weight: 700;
}

.ss-made-here-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  color: rgba(16,40,58,.56);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ss-made-here-line {
  height: 1px;
  flex: 1;
  background: rgba(16,40,58,.22);
}

@media (max-width: 900px) {
  .ss-made-here-head {
    grid-template-columns: 1fr;
  }

  .ss-made-here-head .ss-copy {
    justify-self: start;
  }

  .ss-made-here-track {
    grid-auto-columns: minmax(260px, 58vw);
  }
}

@media (max-width: 600px) {
  .ss-made-here-track {
    grid-auto-columns: 82vw;
    gap: 16px;
    padding-right: var(--ss-pad);
  }

  .ss-project-meta {
    min-height: 148px;
    padding: 19px 20px 21px;
  }

  .ss-made-here-foot {
    margin-top: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-project-media img {
    transition: none;
  }
}


/* ==========================================================
   v2.14 — simplified "Made Here." project cards
   ========================================================== */

/* Projects read more like record sleeves: square artwork, then one short note. */
.ss-made-here-track {
  grid-auto-columns: minmax(250px, 28%);
}

.ss-project-media {
  aspect-ratio: 1 / 1;
}

.ss-project-meta {
  min-height: 132px;
  padding: 19px 21px 22px;
}

.ss-project-meta h3 {
  margin: 0 0 9px;
  font-size: clamp(24px, 2vw, 34px);
}

.ss-project-meta p {
  max-width: 34ch;
  line-height: 1.45;
  font-weight: 600;
}

/*
 * Prototype cards deliberately have no fake destinations.
 * When real projects are added, the article can become an <a> using the same
 * ss-project-card class and the whole square card can link externally.
 */
.ss-project-card--prototype {
  cursor: default;
}

@media (max-width: 900px) {
  .ss-made-here-track {
    grid-auto-columns: minmax(240px, 52vw);
  }
}

@media (max-width: 600px) {
  .ss-made-here-track {
    grid-auto-columns: 78vw;
  }
}


/* ==========================================================
   v2.15 — real Made Here project content
   ========================================================== */

.ss-project-card {
  display: block;
  color: var(--ss-ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease;
}

.ss-project-card:hover,
.ss-project-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--ss-sea);
}

.ss-project-card:focus-visible {
  outline: 3px solid rgba(35,153,187,.28);
  outline-offset: 4px;
}

.ss-project-meta h3 {
  text-transform: none;
}

.ss-project-meta p {
  color: rgba(16,40,58,.70);
}

@media (prefers-reduced-motion: reduce) {
  .ss-project-card {
    transition: none;
  }
}


/* ==========================================================
   v2.16 — premium "Made Here." record-sleeve carousel
   ========================================================== */

.ss-made-here {
  background: var(--ss-foam);
}

.ss-made-here-head {
  align-items: end;
}

.ss-made-here-head-side {
  display: grid;
  gap: 22px;
  justify-items: end;
}

.ss-made-here-head-side .ss-copy {
  margin: 0;
}

.ss-made-here-controls {
  display: flex;
  gap: 10px;
}

.ss-made-here-control {
  width: 48px;
  height: 48px;
  border: 2px solid var(--ss-ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ss-ink);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, opacity .18s ease;
}

.ss-made-here-control svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ss-made-here-control:hover,
.ss-made-here-control:focus-visible {
  background: var(--ss-sea);
  border-color: var(--ss-sea);
  transform: translateY(-2px);
}

.ss-made-here-control:disabled {
  opacity: .28;
  cursor: default;
  transform: none;
}

.ss-made-here-track {
  grid-auto-columns: minmax(270px, 30%);
  gap: clamp(12px, 1.45vw, 20px);
  padding-bottom: 8px;
  scroll-padding-inline: 0;
  touch-action: pan-y;
  user-select: none;
}

.ss-made-here-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.ss-project-card {
  position: relative;
  border: 0;
  background: var(--ss-ink);
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .3s cubic-bezier(.2,.75,.2,1);
}

.ss-project-card:hover,
.ss-project-card:focus-visible {
  transform: translateY(-6px);
  border-color: transparent;
}

.ss-project-card:focus-visible {
  outline: 3px solid var(--ss-sea);
  outline-offset: 4px;
}

.ss-project-media {
  aspect-ratio: 1 / 1;
  position: relative;
  isolation: isolate;
}

.ss-project-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg,
      rgba(16,40,58,.05) 0%,
      rgba(16,40,58,.06) 36%,
      rgba(16,40,58,.42) 62%,
      rgba(16,40,58,.95) 100%);
  transition: background .3s ease;
  pointer-events: none;
}

.ss-project-media::after {
  display: none;
}

.ss-project-media img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.04) brightness(.93);
  transform: scale(1.001);
  transition: transform .75s cubic-bezier(.2,.75,.2,1), filter .35s ease;
}

.ss-project-card:hover .ss-project-media img,
.ss-project-card:focus-visible .ss-project-media img {
  transform: scale(1.035);
  filter: saturate(1) contrast(1.04) brightness(1);
}

.ss-project-card:hover .ss-project-media::before,
.ss-project-card:focus-visible .ss-project-media::before {
  background:
    linear-gradient(180deg,
      rgba(16,40,58,0) 0%,
      rgba(16,40,58,.02) 34%,
      rgba(16,40,58,.34) 61%,
      rgba(16,40,58,.94) 100%);
}

.ss-project-open {
  position: absolute;
  z-index: 4;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(244,240,230,.94);
  color: var(--ss-ink);
  opacity: 0;
  transform: translate(-5px, 5px);
  transition: opacity .22s ease, transform .22s ease, background .18s ease;
}

.ss-project-open svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ss-project-card:hover .ss-project-open,
.ss-project-card:focus-visible .ss-project-open {
  opacity: 1;
  transform: translate(0, 0);
}

.ss-project-open:hover {
  background: var(--ss-sky);
}

.ss-project-overlay {
  position: absolute;
  z-index: 3;
  inset: auto 0 0;
  padding: clamp(22px, 2.3vw, 32px);
  color: var(--ss-foam);
}

.ss-project-genre {
  display: block;
  margin-bottom: 10px;
  color: var(--ss-sky);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ss-project-overlay h3 {
  margin: 0;
  color: var(--ss-foam);
  line-height: .94;
}

.ss-project-artist,
.ss-project-title {
  display: block;
}

.ss-project-artist {
  font-size: clamp(25px, 2vw, 35px);
  font-weight: 900;
  letter-spacing: -.035em;
}

.ss-project-title {
  margin-top: 4px;
  font-size: clamp(17px, 1.35vw, 23px);
  font-weight: 650;
  letter-spacing: -.02em;
  color: rgba(244,240,230,.9);
}

.ss-project-overlay p {
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding-top: 0;
  opacity: 0;
  transform: translateY(8px);
  color: rgba(244,240,230,.8);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 600;
  transition: max-height .32s ease, opacity .25s ease, transform .25s ease, padding-top .25s ease;
}

.ss-project-card:hover .ss-project-overlay p,
.ss-project-card:focus-visible .ss-project-overlay p {
  max-height: 68px;
  padding-top: 10px;
  opacity: 1;
  transform: translateY(0);
}

.ss-made-here-foot {
  gap: 22px;
  margin-top: 20px;
}

.ss-made-here-progress {
  position: relative;
  height: 3px;
  flex: 1;
  overflow: hidden;
  background: rgba(16,40,58,.16);
}

.ss-made-here-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  min-width: 12%;
  background: var(--ss-sea);
  transform-origin: left center;
  transition: width .2s ease;
  will-change: transform;
}

@media (min-width: 1180px) {
  .ss-made-here-track {
    grid-auto-columns: minmax(275px, 29%);
  }
}

@media (max-width: 900px) {
  .ss-made-here-head-side {
    justify-items: start;
  }

  .ss-made-here-track {
    grid-auto-columns: minmax(260px, 52vw);
  }
}

@media (max-width: 600px) {
  .ss-made-here-head-side {
    gap: 18px;
  }

  .ss-made-here-control {
    width: 44px;
    height: 44px;
  }

  .ss-made-here-track {
    grid-auto-columns: 79vw;
    gap: 12px;
  }

  .ss-project-open {
    opacity: 1;
    transform: none;
    width: 34px;
    height: 34px;
    top: 13px;
    right: 13px;
  }

  .ss-project-overlay {
    padding: 20px;
  }

  .ss-project-overlay p {
    max-height: 68px;
    padding-top: 9px;
    opacity: 1;
    transform: none;
  }

  .ss-made-here-foot > span:first-child {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-made-here-control,
  .ss-project-card,
  .ss-project-media img,
  .ss-project-open,
  .ss-project-overlay p,
  .ss-made-here-progress-bar {
    transition: none !important;
  }
}


/* ==========================================================
   v2.17 — compact homepage hero on shorter desktop screens
   ========================================================== */

/*
 * 13-inch laptops often have plenty of width but much less usable browser
 * height. Keep the full cinematic hero on taller desktops, but tighten and
 * lift the composition when the viewport is 900px high or less so both CTAs
 * remain visible without scrolling.
 */
@media (min-width: 1051px) and (max-height: 900px) {
  .home .ss-hero--video {
    min-height: calc(100svh - 96px);
  }

  .home .ss-hero-video-content {
    align-items: center;
  }

  .home .ss-hero--video .ss-hero-copy {
    padding-top: 28px;
    padding-bottom: 38px;
    transform: translateY(-24px);
  }

  .home .ss-hero--video .ss-hero-logo {
    width: clamp(175px, 15.5vw, 225px);
    margin-bottom: 16px;
  }

  .home .ss-hero--video .ss-eyebrow {
    margin-bottom: 10px;
  }

  .home .ss-hero--video .ss-hero-title {
    font-size: clamp(64px, 7.3vw, 112px);
    line-height: .79;
  }

  .home .ss-hero--video .ss-hero-sub {
    margin-top: 16px;
    margin-bottom: 18px;
    font-size: clamp(17px, 1.45vw, 21px);
  }
}

/* Extra insurance for particularly shallow laptop/browser windows. */
@media (min-width: 1051px) and (max-height: 760px) {
  .home .ss-hero--video .ss-hero-copy {
    transform: translateY(-30px);
    padding-top: 20px;
    padding-bottom: 26px;
  }

  .home .ss-hero--video .ss-hero-logo {
    width: clamp(150px, 13vw, 190px);
    margin-bottom: 12px;
  }

  .home .ss-hero--video .ss-hero-title {
    font-size: clamp(58px, 6.4vw, 94px);
  }

  .home .ss-hero--video .ss-hero-sub {
    margin: 12px auto 14px;
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home .ss-hero--video .ss-hero-copy {
    transition: none;
  }
}


/* ==========================================================
   v2.18 — Quick Question + legacy live-chat removal
   ========================================================== */

/* The old HubSpot visitor chat must not appear on the redesigned site. */
#hubspot-messages-iframe-container {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.ss-quick-question {
  position: fixed;
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 28px);
  z-index: 880;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 17px 8px 9px;
  border: 2px solid var(--ss-foam);
  border-radius: 999px;
  background: var(--ss-ink);
  color: var(--ss-foam);
  box-shadow: 0 8px 28px rgba(16,40,58,.18);
  font: inherit;
  cursor: pointer;
  transition:
    transform .18s ease,
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.ss-quick-question:hover,
.ss-quick-question:focus-visible {
  transform: translateY(-3px);
  background: var(--ss-sea);
  color: var(--ss-ink);
  border-color: var(--ss-sea);
  box-shadow: 0 10px 32px rgba(16,40,58,.24);
}

.ss-quick-question-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ss-sky);
  color: var(--ss-ink);
}

.ss-quick-question-icon svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.ss-quick-question-label {
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Hide the launcher while the enquiry panel itself is open. */
body.ss-enquiry-open .ss-quick-question {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

@media (max-width: 600px) {
  .ss-quick-question {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    min-height: 46px;
    padding: 7px 13px 7px 8px;
    gap: 8px;
  }

  .ss-quick-question-icon {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
  }

  .ss-quick-question-label {
    font-size: 10px;
    letter-spacing: .075em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-quick-question {
    transition: none;
  }
}


/* ==========================================================
   v2.19 — lighter mobile Quick Question control
   ========================================================== */

@media (max-width: 600px) {
  .ss-quick-question {
    width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    border-radius: 50%;
    gap: 0;
    justify-content: center;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  .ss-quick-question-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    background: transparent;
    color: var(--ss-sky);
  }

  .ss-quick-question-icon svg {
    width: 21px;
    height: 21px;
    stroke-width: 1.8;
  }

  .ss-quick-question-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .ss-quick-question:hover,
  .ss-quick-question:focus-visible {
    transform: translateY(-2px);
    background: var(--ss-sea);
    color: var(--ss-ink);
    border-color: var(--ss-sea);
  }

  .ss-quick-question:hover .ss-quick-question-icon,
  .ss-quick-question:focus-visible .ss-quick-question-icon {
    color: var(--ss-ink);
  }
}


/* ==========================================================
   v2.20 — shared equipment list on Studio + Recording
   ========================================================== */

.ss-studio-equipment-details {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: clamp(8px, 2vw, 28px);
  border-top: 2px solid var(--ss-foam);
  border-bottom: 1px solid rgba(244,240,230,.28);
}

.ss-studio-equipment-summary {
  list-style: none;
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 20px 0;
  color: var(--ss-foam);
  cursor: pointer;
  user-select: none;
}

.ss-studio-equipment-summary::-webkit-details-marker {
  display: none;
}

.ss-studio-equipment-summary span {
  display: grid;
  gap: 5px;
}

.ss-studio-equipment-summary small {
  color: var(--ss-sky);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.ss-studio-equipment-summary strong {
  font-size: clamp(27px, 3vw, 46px);
  line-height: .95;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.ss-studio-equipment-summary i {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 2px solid var(--ss-foam);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  transition:
    transform .25s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease;
}

.ss-studio-equipment-summary:hover i,
.ss-studio-equipment-summary:focus-visible i {
  background: var(--ss-sea);
  border-color: var(--ss-sea);
  color: var(--ss-ink);
}

.ss-studio-equipment-details[open] > .ss-studio-equipment-summary i {
  transform: rotate(45deg);
}

.ss-studio-equipment-body {
  padding: clamp(34px, 5vw, 70px) 0 clamp(44px, 6vw, 82px);
}

.ss-studio-equipment-intro {
  display: grid;
  grid-template-columns: minmax(180px, .55fr) minmax(280px, 1fr);
  gap: clamp(28px, 6vw, 90px);
  align-items: end;
  margin-bottom: clamp(30px, 4vw, 52px);
}

.ss-studio-equipment-intro p:last-child {
  margin: 0;
  max-width: 650px;
  color: rgba(244,240,230,.72);
}

/*
 * The shared gear component was originally styled for the light Recording
 * section. In Studio it sits inside the navy CADAC area, so invert just this
 * instance while leaving Recording unchanged.
 */
.ss-studio-equipment-body .ss-gear-accordion {
  border-top-color: rgba(244,240,230,.72);
}

.ss-studio-equipment-body .ss-gear-group {
  border-bottom-color: rgba(244,240,230,.26);
}

.ss-studio-equipment-body .ss-gear-group summary {
  color: var(--ss-foam);
}

.ss-studio-equipment-body .ss-gear-group summary > span {
  color: var(--ss-sky);
}

.ss-studio-equipment-body .ss-gear-group summary > i {
  color: var(--ss-foam);
}

.ss-studio-equipment-body .ss-gear-panel-inner {
  color: rgba(244,240,230,.84);
}

.ss-studio-equipment-body .ss-gear-panel-inner li {
  border-color: rgba(244,240,230,.17);
}

.ss-studio-equipment-body .ss-gear-panel-inner--pa h4 {
  color: var(--ss-sky);
}

@media (max-width: 700px) {
  .ss-studio-equipment-summary {
    min-height: 82px;
    gap: 18px;
  }

  .ss-studio-equipment-summary strong {
    font-size: clamp(25px, 8vw, 36px);
  }

  .ss-studio-equipment-summary i {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .ss-studio-equipment-intro {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-studio-equipment-summary i {
    transition: none;
  }
}


/* ==========================================================
   v2.21 — smoother Meet the Team biography reveal
   ========================================================== */

.ss-team-card-body {
  overflow: hidden;
  transition:
    height .42s cubic-bezier(.22,.61,.36,1),
    opacity .28s ease;
  will-change: height, opacity;
}

.ss-team-card summary i {
  transition: transform .3s ease;
}

.ss-team-card[open] summary i {
  transform: rotate(45deg);
}

.ss-team-card.is-opening summary i {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .ss-team-card-body,
  .ss-team-card summary i {
    transition: none !important;
  }
}


/* ==========================================================
   v2.22 — smoother / richer Studio equipment reveal
   ========================================================== */

.ss-studio-equipment-summary {
  position: relative;
  overflow: hidden;
}

.ss-studio-equipment-summary::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 3px;
  background: var(--ss-sea);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .38s cubic-bezier(.22,.61,.36,1);
}

.ss-studio-equipment-details[open] > .ss-studio-equipment-summary::after,
.ss-studio-equipment-details.is-opening > .ss-studio-equipment-summary::after {
  transform: scaleX(1);
}

.ss-studio-equipment-summary span {
  transition: transform .25s ease;
}

.ss-studio-equipment-summary:hover span,
.ss-studio-equipment-summary:focus-visible span {
  transform: translateX(5px);
}

.ss-studio-equipment-body {
  overflow: hidden;
  transform-origin: top center;
  transition:
    height .52s cubic-bezier(.22,.61,.36,1),
    opacity .34s ease,
    transform .42s cubic-bezier(.22,.61,.36,1);
  will-change: height, opacity, transform;
}

.ss-studio-equipment-details[open] > .ss-studio-equipment-summary i,
.ss-studio-equipment-details.is-opening > .ss-studio-equipment-summary i {
  transform: rotate(45deg);
  background: var(--ss-sea);
  border-color: var(--ss-sea);
  color: var(--ss-ink);
}

.ss-studio-equipment-details[open] .ss-studio-equipment-intro {
  animation: ss26EquipmentIntro .42s ease both;
}

@keyframes ss26EquipmentIntro {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-studio-equipment-summary::after,
  .ss-studio-equipment-summary span,
  .ss-studio-equipment-body,
  .ss-studio-equipment-summary i {
    transition: none !important;
  }

  .ss-studio-equipment-details[open] .ss-studio-equipment-intro {
    animation: none !important;
  }
}


/* ==========================================================
   v2.24 — definitive Recording hero height fix
   ========================================================== */

/*
 * v1.96 deliberately standardised the internal page hero image geometry,
 * but also fixed the entire desktop hero grid at 600px high. The Recording
 * headline + intro + buttons can be taller than the available content area,
 * especially on wide monitors, which caused the CTAs to overflow into the
 * turquoise service strip.
 *
 * Keep the shared fixed IMAGE geometry, but let the Recording HERO itself
 * size from its content.
 */
@media (min-width: 1051px) {
  .ss-record-hero-grid {
    height: auto !important;
    min-height: 680px !important;
    padding-top: 54px !important;
    padding-bottom: 54px !important;
    align-items: center !important;
  }

  .ss-record-hero-copy {
    align-self: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible;
  }

  .ss-record-hero-copy .ss-actions {
    position: static !important;
    margin-top: 0;
    flex-wrap: wrap;
  }

  .ss-record-hero-image {
    width: 500px !important;
    height: 375px !important;
    min-width: 500px !important;
    min-height: 375px !important;
    max-width: 500px !important;
    max-height: 375px !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
  }
}

/*
 * Short desktop/laptop windows already use the more compact Recording
 * typography. Give that composition a little less vertical padding while
 * still allowing natural height, rather than forcing it into 600px.
 */
@media (min-width: 1051px) and (max-height: 920px) {
  .ss-record-hero-grid {
    height: auto !important;
    min-height: 650px !important;
    padding-top: 38px !important;
    padding-bottom: 46px !important;
  }
}

/*
 * Wide monitors can make fluid type unhelpfully large. Cap the Recording
 * headline without changing its established line breaks.
 */
@media (min-width: 1500px) {
  .ss-record-title {
    font-size: clamp(76px, 4.7vw, 92px);
    line-height: .82;
  }

  .ss-record-intro {
    max-width: 640px;
    margin-top: 22px;
    margin-bottom: 22px;
  }
}

/* Extra-wide screens retain the same coherent content width. */
@media (min-width: 1900px) {
  .ss-record-hero-grid {
    width: min(1320px, calc(100% - (var(--ss-pad) * 2))) !important;
  }
}


/* ==========================================================
   v2.25 — collapsed Recording prices + Studio-style equipment
   ========================================================== */

/* Recording equipment now deliberately uses the same visual language as Studio. */
.ss-record-gear {
  padding-top: clamp(54px, 6vw, 86px);
  padding-bottom: clamp(54px, 6vw, 86px);
}

.ss-record-equipment-details {
  margin-top: 0;
}

.ss-record-equipment-body {
  transition:
    height .52s cubic-bezier(.22,.61,.36,1),
    opacity .34s ease,
    transform .42s cubic-bezier(.22,.61,.36,1);
}

/* Price list: same interaction, adapted for the light blue section. */
.ss-record-rates {
  padding-top: clamp(54px, 6vw, 86px);
  padding-bottom: clamp(54px, 6vw, 86px);
}

.ss-record-pricing-details {
  width: 100%;
  border-top: 2px solid var(--ss-ink);
  border-bottom: 1px solid rgba(16,40,58,.30);
}

.ss-record-pricing-summary {
  position: relative;
  overflow: hidden;
  list-style: none;
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 20px 0;
  color: var(--ss-ink);
  cursor: pointer;
  user-select: none;
}

.ss-record-pricing-summary::-webkit-details-marker {
  display: none;
}

.ss-record-pricing-summary span {
  display: grid;
  gap: 5px;
  transition: transform .25s ease;
}

.ss-record-pricing-summary small {
  color: rgba(16,40,58,.62);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.ss-record-pricing-summary strong {
  font-size: clamp(27px, 3vw, 46px);
  line-height: .95;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.ss-record-pricing-summary i {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 2px solid var(--ss-ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  transition:
    transform .25s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease;
}

.ss-record-pricing-summary::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 3px;
  background: var(--ss-ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .38s cubic-bezier(.22,.61,.36,1);
}

.ss-record-pricing-summary:hover span,
.ss-record-pricing-summary:focus-visible span {
  transform: translateX(5px);
}

.ss-record-pricing-summary:hover i,
.ss-record-pricing-summary:focus-visible i,
.ss-record-pricing-details[open] > .ss-record-pricing-summary i,
.ss-record-pricing-details.is-opening > .ss-record-pricing-summary i {
  background: var(--ss-ink);
  border-color: var(--ss-ink);
  color: var(--ss-sky);
}

.ss-record-pricing-details[open] > .ss-record-pricing-summary i,
.ss-record-pricing-details.is-opening > .ss-record-pricing-summary i {
  transform: rotate(45deg);
}

.ss-record-pricing-details[open] > .ss-record-pricing-summary::after,
.ss-record-pricing-details.is-opening > .ss-record-pricing-summary::after {
  transform: scaleX(1);
}

.ss-record-pricing-body {
  overflow: hidden;
  padding: clamp(38px, 5vw, 70px) 0 clamp(20px, 3vw, 38px);
  transform-origin: top center;
  transition:
    height .52s cubic-bezier(.22,.61,.36,1),
    opacity .34s ease,
    transform .42s cubic-bezier(.22,.61,.36,1);
  will-change: height, opacity, transform;
}

.ss-record-pricing-body .ss-record-rates-head {
  margin-bottom: clamp(38px, 5vw, 64px);
}

/* Make "Also available" read as a deliberate service block. */
.ss-record-also {
  padding-right: 0 !important;
}

.ss-record-also-list {
  list-style: none;
  margin: 18px 0 22px;
  padding: 0;
  border-top: 2px solid var(--ss-ink);
}

.ss-record-also-list li {
  padding: 11px 0;
  border-bottom: 1px solid rgba(16,40,58,.28);
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -.015em;
}

.ss-record-also-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ss-ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
}

.ss-record-also-link:hover,
.ss-record-also-link:focus-visible {
  color: rgba(16,40,58,.68);
}

@media (max-width: 700px) {
  .ss-record-pricing-summary {
    min-height: 82px;
    gap: 18px;
  }

  .ss-record-pricing-summary strong {
    font-size: clamp(25px, 8vw, 36px);
  }

  .ss-record-pricing-summary i {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .ss-record-pricing-body {
    padding-top: 32px;
  }

  .ss-record-also-list li {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-record-pricing-summary,
  .ss-record-pricing-summary span,
  .ss-record-pricing-summary i,
  .ss-record-pricing-summary::after,
  .ss-record-pricing-body,
  .ss-record-equipment-body {
    transition: none !important;
  }
}


/* ==========================================================
   v2.26 — visible prices restored / Recording equipment fix
   ========================================================== */

/*
 * Prices are deliberately visible again. v2.25 pricing-detail styles remain
 * harmlessly unused; this restores the stronger immediate commercial read.
 */
.ss-record-rates {
  padding-top: var(--ss-section);
  padding-bottom: var(--ss-section);
}

/* Retain the clearer "Also available" presentation from v2.25. */
.ss-record-also-list {
  list-style: none;
  margin: 18px 0 22px;
  padding: 0;
  border-top: 2px solid var(--ss-ink);
}

.ss-record-also-list li {
  padding: 11px 0;
  border-bottom: 1px solid rgba(16,40,58,.28);
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -.015em;
}

.ss-record-also-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ss-ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
}

.ss-record-also-link:hover,
.ss-record-also-link:focus-visible {
  color: rgba(16,40,58,.68);
}

/*
 * Recording equipment keeps the Studio-style outer reveal, but now has one
 * controlling JavaScript handler only.
 */
.ss-record-equipment-details {
  cursor: default;
}


/* ==========================================================
   v2.27 — Manager dashboard: actions / utilisation / service revenue
   ========================================================== */

.ss-manager-action-panel {
  margin: 0 0 clamp(24px, 3vw, 38px);
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
}

.ss-manager-action-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(22px, 3vw, 34px);
  background: var(--ss-ink);
  color: var(--ss-foam);
}

.ss-manager-action-head span {
  display: block;
  margin-bottom: 5px;
  color: var(--ss-sky);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.ss-manager-action-head h3 {
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  line-height: .95;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.ss-manager-action-head > strong {
  font-size: clamp(38px, 4vw, 58px);
  line-height: .8;
  color: var(--ss-sky);
}

.ss-manager-payment-review-alert {
  margin: 18px;
  border: 1px solid rgba(147, 54, 54, .34);
  background: rgba(147, 54, 54, .07);
}

.ss-manager-payment-review-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(147, 54, 54, .2);
}

.ss-manager-payment-review-head span,
.ss-manager-payment-review-reason > span {
  display: block;
  margin-bottom: 5px;
  color: #7b3434;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.ss-manager-payment-review-head h4 {
  margin: 0 0 6px;
  color: #6f2e2e;
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.05;
}

.ss-manager-payment-review-head p {
  max-width: 850px;
  margin: 0;
  color: rgba(16,40,58,.72);
  font-size: 12px;
  line-height: 1.55;
}

.ss-manager-payment-review-head > strong {
  min-width: 42px;
  color: #7b3434;
  font-size: 34px;
  line-height: 1;
  text-align: right;
}

.ss-manager-payment-review-list {
  padding: 0 20px;
}

.ss-manager-payment-review-item {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(280px, 1.4fr) auto;
  gap: 20px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(147, 54, 54, .16);
}

.ss-manager-payment-review-item:last-child {
  border-bottom: 0;
}

.ss-manager-payment-review-main,
.ss-manager-payment-review-reason,
.ss-manager-payment-review-value {
  display: grid;
  gap: 4px;
}

.ss-manager-payment-review-main > span,
.ss-manager-payment-review-main small,
.ss-manager-payment-review-reason small {
  color: rgba(16,40,58,.62);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.ss-manager-payment-review-reason strong {
  color: #6f2e2e;
  font-size: 12px;
  line-height: 1.4;
}

.ss-manager-payment-review-value {
  justify-items: end;
  min-width: 130px;
}

.ss-manager-payment-review-value > strong {
  color: #6f2e2e;
  font-size: 22px;
}

.ss-manager-payment-review-day {
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(16,40,58,.35);
  background: transparent;
  color: var(--ss-ink);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.ss-manager-payment-review-day:hover,
.ss-manager-payment-review-day:focus-visible {
  color: var(--ss-sea);
  border-bottom-color: currentColor;
}

@media (max-width: 820px) {
  .ss-manager-payment-review-item {
    grid-template-columns: 1fr auto;
  }

  .ss-manager-payment-review-reason {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 560px) {
  .ss-manager-payment-review-head,
  .ss-manager-payment-review-item {
    grid-template-columns: 1fr;
  }

  .ss-manager-payment-review-head {
    display: grid;
  }

  .ss-manager-payment-review-head > strong,
  .ss-manager-payment-review-value {
    justify-items: start;
    text-align: left;
  }

  .ss-manager-payment-review-reason {
    grid-column: auto;
    grid-row: auto;
  }
}

.ss-manager-action-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--ss-line);
}

.ss-manager-action-stat {
  appearance: none;
  width: 100%;
  padding: 20px clamp(16px, 2vw, 26px);
  border: 0;
  background: var(--ss-paper);
  color: var(--ss-ink);
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.ss-manager-action-stat + .ss-manager-action-stat {
  border-left: 1px solid var(--ss-line);
}

.ss-manager-action-stat:hover,
.ss-manager-action-stat:focus-visible {
  background: rgba(35,153,187,.08);
}

.ss-manager-action-stat.is-active {
  background: rgba(35,153,187,.12);
  box-shadow: inset 0 -4px 0 var(--ss-sea);
}

.ss-manager-action-stat.is-empty {
  cursor: default;
  opacity: .58;
}

.ss-manager-action-stat.is-empty:hover {
  background: var(--ss-paper);
}

.ss-manager-action-details[hidden] {
  display: none;
}

.ss-manager-action-stats span,
.ss-manager-action-stats small {
  display: block;
}

.ss-manager-action-stats span {
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .62;
}

.ss-manager-action-stats strong {
  display: block;
  margin-bottom: 4px;
  font-size: 30px;
  line-height: 1;
}

.ss-manager-action-stats small {
  font-size: 11px;
  opacity: .62;
}

.ss-manager-action-list {
  padding: 0 clamp(16px, 2vw, 26px);
}

.ss-manager-action-item {
  width: 100%;
  display: grid;
  grid-template-columns: 120px minmax(180px, 1fr) minmax(170px, auto) 90px;
  gap: 18px;
  align-items: center;
  padding: 17px 0;
  border: 0;
  border-bottom: 1px solid var(--ss-line);
  background: transparent;
  color: var(--ss-ink);
  text-align: left;
  cursor: pointer;
}

.ss-manager-action-item:hover,
.ss-manager-action-item:focus-visible {
  color: var(--ss-sea);
}

.ss-manager-action-date,
.ss-manager-action-main {
  display: grid;
  gap: 3px;
}

.ss-manager-action-date small,
.ss-manager-action-main small {
  color: rgba(16,40,58,.6);
  font-size: 11px;
}

.ss-manager-action-flags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.ss-manager-action-flags em {
  padding: 5px 7px;
  background: rgba(35,153,187,.12);
  border: 1px solid rgba(35,153,187,.35);
  color: var(--ss-ink);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.ss-manager-action-value {
  justify-self: end;
  font-weight: 900;
}

.ss-manager-action-clear {
  padding: 25px 0;
  display: grid;
  gap: 4px;
}

.ss-manager-action-clear span {
  color: rgba(16,40,58,.62);
  font-size: 12px;
}

.ss-manager-dashboard-grid--commercial {
  align-items: stretch;
}

.ss-manager-dashboard-grid--commercial > .ss-manager-report-card {
  min-height: 100%;
}

.ss-manager-card-note {
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--ss-line);
  color: rgba(16,40,58,.55);
  font-size: 10px;
  line-height: 1.45;
}

.ss-manager-utilisation {
  display: grid;
  gap: 24px;
}

.ss-manager-utilisation-row {
  display: grid;
  gap: 8px;
}

.ss-manager-utilisation-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
}

.ss-manager-utilisation-top strong {
  font-size: 18px;
}

.ss-manager-utilisation-top b {
  font-size: 23px;
  color: var(--ss-sea);
}

.ss-manager-utilisation-track {
  height: 9px;
  overflow: hidden;
  background: rgba(16,40,58,.12);
}

.ss-manager-utilisation-track i {
  display: block;
  height: 100%;
  background: var(--ss-sea);
}

.ss-manager-utilisation-row > small,
.ss-manager-utilisation-definition {
  color: rgba(16,40,58,.58);
  font-size: 10px;
  line-height: 1.4;
}

.ss-manager-utilisation-definition {
  margin: 2px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--ss-line);
}

.ss-manager-service-revenue {
  border-top: 2px solid var(--ss-ink);
}

.ss-manager-service-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 17px 0;
  border-bottom: 1px solid var(--ss-line);
}

.ss-manager-service-row > span {
  display: grid;
  gap: 3px;
}

.ss-manager-service-row > span:last-child {
  text-align: right;
}

.ss-manager-service-row strong {
  font-size: 17px;
}

.ss-manager-service-row > span:last-child strong {
  font-size: 21px;
  color: var(--ss-sea);
}

.ss-manager-service-row small {
  color: rgba(16,40,58,.58);
  font-size: 10px;
}

@media (max-width: 900px) {
  .ss-manager-action-stats {
    grid-template-columns: 1fr 1fr;
  }

  .ss-manager-action-stat:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--ss-line);
  }

  .ss-manager-action-stat:nth-child(4) {
    border-top: 1px solid var(--ss-line);
  }

  .ss-manager-action-item {
    grid-template-columns: 105px 1fr auto;
  }

  .ss-manager-action-flags {
    grid-column: 2;
    justify-content: flex-start;
  }

  .ss-manager-action-value {
    grid-row: 1 / 3;
    grid-column: 3;
  }
}

@media (max-width: 620px) {
  .ss-manager-action-head {
    align-items: center;
  }

  .ss-manager-action-stats {
    grid-template-columns: 1fr;
  }

  .ss-manager-action-stat + .ss-manager-action-stat,
  .ss-manager-action-stat:nth-child(3),
  .ss-manager-action-stat:nth-child(4) {
    border-left: 0;
    border-top: 1px solid var(--ss-line);
  }

  .ss-manager-action-item {
    grid-template-columns: 1fr auto;
    gap: 8px 14px;
  }

  .ss-manager-action-date {
    grid-column: 1;
  }

  .ss-manager-action-main {
    grid-column: 1 / -1;
  }

  .ss-manager-action-flags {
    grid-column: 1;
  }

  .ss-manager-action-value {
    grid-column: 2;
    grid-row: 1;
  }
}


/* ==========================================================
   v2.28 — aligned week headers + Manager loyalty snapshot
   ========================================================== */

/*
 * Week view now has one explicit header row. Booking columns contain bookings
 * only, so native button rendering can no longer vertically displace each
 * day's name/date.
 */
.ss-manager-week-head {
  min-width: 980px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid rgba(16,40,58,.18);
  background: var(--ss-paper);
}

.ss-manager-week-head-day {
  min-height: 78px;
  padding: 13px 12px 12px;
  display: block;
  border: 0;
  border-right: 1px solid rgba(16,40,58,.18);
  background: var(--ss-paper);
  color: var(--ss-ink);
  text-align: left;
  cursor: pointer;
}

.ss-manager-week-head-day:last-child {
  border-right: 0;
}

.ss-manager-week-head-day:hover,
.ss-manager-week-head-day:focus-visible,
.ss-manager-week-head-day.selected {
  background: rgba(143,210,229,.14);
}

.ss-manager-week-head-day span {
  display: block;
  margin-bottom: 2px;
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
}

.ss-manager-week-head-day strong {
  display: block;
  font-size: 32px;
  line-height: 1;
}

.ss-manager-day-column {
  display: block;
  min-height: 420px;
  vertical-align: top;
}

.ss-manager-day-bookings {
  min-height: 420px;
  border-top: 0;
  padding-top: 1px;
}

/* Legacy in-column day headings are no longer rendered. */
.ss-manager-day-column > .ss-manager-day-name,
.ss-manager-day-column > strong {
  display: none;
}

/* Loyalty snapshot */
.ss-manager-loyalty-card {
  margin-bottom: clamp(24px, 3vw, 38px);
}

.ss-manager-loyalty-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 20px;
  border-top: 2px solid var(--ss-ink);
  border-bottom: 1px solid var(--ss-line);
}

.ss-manager-loyalty-stats > div {
  padding: 19px clamp(14px, 2vw, 24px);
}

.ss-manager-loyalty-stats > div + div {
  border-left: 1px solid var(--ss-line);
}

.ss-manager-loyalty-stats span,
.ss-manager-loyalty-stats small {
  display: block;
}

.ss-manager-loyalty-stats span {
  margin-bottom: 6px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .58;
}

.ss-manager-loyalty-stats strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ss-sea);
  font-size: 30px;
  line-height: 1;
}

.ss-manager-loyalty-stats small {
  color: rgba(16,40,58,.58);
  font-size: 10px;
  line-height: 1.35;
}

.ss-manager-loyalty-body {
  padding-top: 24px;
}

.ss-manager-loyalty-label {
  display: block;
  margin-bottom: 8px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
}

.ss-manager-loyalty-list {
  border-top: 1px solid var(--ss-line);
}

.ss-manager-loyalty-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--ss-line);
}

.ss-manager-loyalty-row > span {
  display: grid;
  gap: 3px;
}

.ss-manager-loyalty-row > span:last-child {
  text-align: right;
}

.ss-manager-loyalty-row strong {
  font-size: 13px;
}

.ss-manager-loyalty-row small {
  color: rgba(16,40,58,.58);
  font-size: 10px;
}

.ss-manager-loyalty-row.is-ready > span:last-child strong {
  color: var(--ss-sea);
}

@media (max-width: 800px) {
  .ss-manager-loyalty-stats {
    grid-template-columns: 1fr 1fr;
  }

  .ss-manager-loyalty-stats > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--ss-line);
  }

  .ss-manager-loyalty-stats > div:nth-child(4) {
    border-top: 1px solid var(--ss-line);
  }
}

@media (max-width: 520px) {
  .ss-manager-loyalty-stats {
    grid-template-columns: 1fr;
  }

  .ss-manager-loyalty-stats > div + div,
  .ss-manager-loyalty-stats > div:nth-child(3),
  .ss-manager-loyalty-stats > div:nth-child(4) {
    border-left: 0;
    border-top: 1px solid var(--ss-line);
  }

  .ss-manager-loyalty-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ss-manager-loyalty-row > span:last-child {
    text-align: left;
  }
}


/* ==========================================================
   v2.29 — room-first week/month calendar availability
   ========================================================== */

/*
 * WEEK VIEW
 * Four fixed public rehearsal bands per day, with Room 1 / Room 2 side by
 * side. This deliberately favours operational clarity over fitting the full
 * week into a narrow laptop viewport; the calendar scrolls horizontally when
 * needed.
 */
.ss-room-week-head,
.ss-room-week-grid {
  min-width: 1400px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.ss-room-week-head {
  border-bottom: 1px solid rgba(16,40,58,.18);
  background: var(--ss-paper);
}

.ss-room-week-head-day {
  min-height: 76px;
  padding: 12px 12px 11px;
  border: 0;
  border-right: 1px solid rgba(16,40,58,.18);
  background: var(--ss-paper);
  color: var(--ss-ink);
  text-align: left;
  cursor: pointer;
}

.ss-room-week-head-day:last-child {
  border-right: 0;
}

.ss-room-week-head-day:hover,
.ss-room-week-head-day:focus-visible,
.ss-room-week-head-day.selected {
  background: rgba(143,210,229,.14);
}

.ss-room-week-head-day span {
  display: block;
  margin-bottom: 3px;
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .56;
}

.ss-room-week-head-day strong {
  display: block;
  font-size: 31px;
  line-height: 1;
}

.ss-room-week-day {
  min-width: 0;
  border-right: 1px solid rgba(16,40,58,.18);
  background: #fff;
}

.ss-room-week-day:last-child {
  border-right: 0;
}

.ss-room-week-day.selected {
  background: rgba(143,210,229,.07);
}

.ss-room-week-band {
  min-height: 150px;
  border-bottom: 1px solid rgba(16,40,58,.18);
}

.ss-room-week-band:last-child {
  border-bottom: 0;
}

.ss-room-week-band-label {
  min-height: 29px;
  padding: 6px 8px 5px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 7px;
  background: rgba(16,40,58,.045);
  border-bottom: 1px solid rgba(16,40,58,.12);
}

.ss-room-week-band-label strong {
  font-size: 11px;
  line-height: 1;
  letter-spacing: -.015em;
}

.ss-room-week-band-label span {
  font-size: 8px;
  line-height: 1;
  opacity: .46;
}

.ss-room-week-band-content {
  min-height: 120px;
}

.ss-room-slot-pair {
  min-height: 120px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.ss-room-slot-cell,
.ss-room-slot-whole {
  min-width: 0;
  min-height: 120px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--ss-ink);
  text-align: left;
  cursor: pointer;
}

.ss-room-slot-cell {
  position: relative;
}

.ss-room-slot-cell + .ss-room-slot-cell {
  border-left: 1px solid rgba(16,40,58,.16);
}

.ss-room-slot-cell.is-room1 {
  --room-slot-accent: var(--ss-sea);
}

.ss-room-slot-cell.is-room2 {
  --room-slot-accent: var(--ss-ink-2);
}

.ss-room-slot-cell::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 4px;
  background: var(--room-slot-accent);
}

.ss-room-slot-room {
  display: block;
  margin-left: 3px;
  margin-bottom: 7px;
  color: var(--room-slot-accent, var(--booking-accent, var(--ss-ink)));
  font-size: 8px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.ss-room-slot-cell.is-free {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(16,40,58,.018),
      rgba(16,40,58,.018) 6px,
      transparent 6px,
      transparent 12px
    );
}

.ss-room-slot-cell.is-free em {
  display: block;
  margin: 26px 0 0 3px;
  color: rgba(16,40,58,.28);
  font-size: 10px;
  line-height: 1;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .08em;
}

.ss-room-slot-cell:hover,
.ss-room-slot-cell:focus-visible,
.ss-room-slot-whole:hover,
.ss-room-slot-whole:focus-visible {
  background-color: rgba(143,210,229,.11);
}

.ss-room-slot-bookings {
  display: grid;
  gap: 6px;
}

.ss-room-slot-booking {
  min-width: 0;
  display: block;
  padding: 6px 6px 7px;
  border-left: 4px solid var(--booking-accent);
  background: var(--ss-foam);
}

.ss-room-slot-booking strong,
.ss-room-slot-booking b,
.ss-room-slot-booking small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-room-slot-booking strong {
  font-size: 8px;
  line-height: 1.15;
}

.ss-room-slot-booking b {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.12;
}

.ss-room-slot-booking small {
  margin-top: 4px;
  font-size: 8px;
  line-height: 1.2;
  opacity: .56;
}

.ss-room-slot-whole {
  width: 100%;
  position: relative;
  padding-left: 12px;
  background: rgba(217,118,82,.07);
  --room-slot-accent: var(--booking-accent);
}

.ss-room-slot-whole::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px 0;
  width: 5px;
  background: var(--booking-accent);
}

.ss-room-slot-whole .ss-room-slot-booking {
  margin-top: 6px;
}

.ss-room-slot-whole .ss-room-slot-room {
  color: var(--booking-accent);
}

/* Staff week container was previously itself a 7-column grid. */
#staffWeekGrid {
  display: block !important;
  overflow-x: auto;
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
}

/* Manager already has an overflow wrapper, but keep the generated grid clean. */
#managerCalendar {
  display: block;
}


/*
 * MONTH VIEW
 * Each day gets a tiny four-band x two-room availability matrix.
 * Empty track = free. Filled track = percentage of that 3-hour band occupied.
 * Whole-studio work fills both rooms in the Recording colour.
 */
.ss-manager-month-day--availability,
.ss-staff-month-day--availability {
  min-height: 166px;
  padding: 8px 8px 9px;
}

.ss-manager-month-day--availability > strong,
.ss-staff-month-day--availability > strong {
  display: block;
  margin-bottom: 5px;
  font-size: 20px;
  line-height: 1;
}

.ss-month-room-key,
.ss-month-room-row {
  display: grid;
  grid-template-columns: 22px 1fr 1fr;
  gap: 4px;
  align-items: center;
}

.ss-month-room-key {
  margin-bottom: 3px;
}

.ss-month-room-key b {
  font-size: 7px;
  line-height: 1;
  text-align: center;
  letter-spacing: .07em;
  opacity: .5;
}

.ss-month-room-grid {
  display: grid;
  gap: 4px;
}

.ss-month-room-row > span:first-child {
  font-size: 7px;
  line-height: 1;
  font-weight: 900;
  opacity: .48;
}

.ss-month-room-cell {
  position: relative;
  height: 12px;
  overflow: hidden;
  display: block;
  border: 1px solid rgba(16,40,58,.18);
  background: rgba(16,40,58,.025);
}

.ss-month-room-cell i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  height: 100%;
  min-width: 0;
}

.ss-month-room-cell.is-room1 i {
  background: var(--ss-sea);
}

.ss-month-room-cell.is-room2 i {
  background: var(--ss-ink-2);
}

.ss-month-room-cell.is-whole i {
  background: #d97652;
}

.ss-month-room-cell.is-free {
  border-style: dashed;
  border-color: rgba(16,40,58,.12);
}

.ss-month-room-count {
  display: block;
  margin-top: 6px;
  font-size: 7px;
  line-height: 1;
  opacity: .44;
}

/* Month day cells no longer need the old stacked booking cards. */
.ss-manager-month-day--availability .ss-manager-month-items,
.ss-staff-month-day--availability .ss-staff-month-items {
  display: none;
}

@media (max-width: 900px) {
  .ss-room-week-head,
  .ss-room-week-grid {
    min-width: 1260px;
  }
}

@media (max-width: 600px) {
  .ss-room-week-head,
  .ss-room-week-grid {
    min-width: 1190px;
  }

  .ss-room-week-band {
    min-height: 140px;
  }

  .ss-room-slot-pair,
  .ss-room-slot-cell,
  .ss-room-slot-whole,
  .ss-room-week-band-content {
    min-height: 111px;
  }
}


/* ==========================================================
   v2.30 — simpler visual Month availability
   ========================================================== */
.ss-month-availability-key {
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  padding:12px 14px; border-bottom:1px solid rgba(16,40,58,.18);
  background:rgba(16,40,58,.035); color:var(--ss-ink);
}
.ss-month-availability-key--staff { grid-column:1 / -1; border:1px solid rgba(16,40,58,.18); border-bottom:0; }
.ss-month-availability-key span { display:inline-flex; align-items:center; gap:6px; font-size:8px; line-height:1; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.ss-month-availability-key i { width:18px; height:8px; display:inline-block; border-radius:1px; background:var(--booking-accent); }
.ss-manager-month-day--availability, .ss-staff-month-day--availability { min-height:148px; padding:9px 9px 10px; }
.ss-manager-month-day--availability > strong, .ss-staff-month-day--availability > strong { margin-bottom:9px; font-size:22px; }
.ss-month-availability-bands { display:grid; gap:7px; }
.ss-month-availability-row { display:grid; grid-template-columns:31px minmax(0,1fr); gap:6px; align-items:center; }
.ss-month-availability-row > span { font-size:7px; line-height:1; font-weight:900; white-space:nowrap; opacity:.54; }
.ss-month-availability-pair { height:13px; display:grid; grid-template-columns:1fr 1fr; gap:3px; }
.ss-month-availability-pair > i, .ss-month-availability-whole { position:relative; overflow:hidden; display:block; height:13px; border:1px solid rgba(16,40,58,.16); background:rgba(16,40,58,.018); }
.ss-month-availability-pair > i.is-free { border-style:dashed; border-color:rgba(16,40,58,.14); background:transparent; }
.ss-month-availability-pair > i.is-booked em { position:absolute; inset:0 auto 0 0; display:block; height:100%; min-width:3px; }
.ss-month-availability-pair > i.is-room1.is-booked em { background:var(--ss-sea); }
.ss-month-availability-pair > i.is-room2.is-booked em { background:var(--ss-ink-2); }
.ss-month-availability-whole { width:100%; background:var(--booking-accent); border-color:var(--booking-accent); }
.ss-month-room-key, .ss-month-room-grid, .ss-month-room-count { display:none !important; }
@media (max-width:800px) { .ss-month-availability-key { gap:7px 12px; } .ss-month-availability-key span { font-size:7px; } }
@media (max-width:600px) {
  .ss-manager-month-day--availability, .ss-staff-month-day--availability { min-height:138px; padding:8px; }
  .ss-month-availability-row { grid-template-columns:29px minmax(0,1fr); gap:5px; }
  .ss-month-availability-pair, .ss-month-availability-pair > i, .ss-month-availability-whole { height:12px; }
}


/* ==========================================================
   v2.31 — Studio Bar + Garden Area
   ========================================================== */

.ss-studio-space--bar {
  background: var(--ss-sea);
}

.ss-studio-space--garden {
  background: var(--ss-sky);
}

.ss-studio-space--bar .ss-studio-space-media img {
  object-position: 50% 43%;
}

.ss-studio-space--garden .ss-studio-space-media img {
  object-position: 50% 58%;
}


/* ==========================================================
   v2.32 — Recording rates anchor + section breathing room
   ========================================================== */

/*
 * Give the in-page "See recording rates" jump a proper landing position.
 * The fixed/sticky site header should no longer cover or crowd the eyebrow.
 */
#record-rates {
  scroll-margin-top: 118px;
}

/*
 * The pricing section needs intentional internal breathing room rather than
 * relying on inherited section spacing. This keeps the "Recording rates"
 * eyebrow away from the top edge and the enquiry CTA away from the bottom.
 */
.ss-record-rates {
  padding-top: clamp(58px, 6vw, 88px) !important;
  padding-bottom: clamp(62px, 6.5vw, 96px) !important;
}

.ss-record-rates-head {
  margin-top: 0;
}

.ss-record-rates .ss-eyebrow {
  margin-top: 0;
}

.ss-record-rates > .ss-wrap > .ss-actions {
  margin-top: clamp(34px, 4vw, 54px);
  margin-bottom: 0;
}

@media (max-width: 700px) {
  #record-rates {
    scroll-margin-top: 88px;
  }

  .ss-record-rates {
    padding-top: 46px !important;
    padding-bottom: 56px !important;
  }

  .ss-record-rates > .ss-wrap > .ss-actions {
    margin-top: 30px;
  }
}


/* ==========================================================
   v2.33 — booking marketing preference
   ========================================================== */

.ss-book-marketing {
  margin-top: 20px;
  padding: 17px 18px;
  border: 1px solid rgba(16,40,58,.22);
  background: rgba(143,210,229,.10);
}

.ss-book-marketing-status {
  display: grid;
  gap: 4px;
  margin-bottom: 13px;
}

.ss-book-marketing-status strong {
  font-size: 13px;
}

.ss-book-marketing-status span,
.ss-book-marketing > small {
  color: rgba(16,40,58,.66);
  font-size: 10px;
  line-height: 1.45;
}

.ss-book-marketing-check {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 9px;
  align-items: start;
  margin: 0 0 10px;
  cursor: pointer;
}

.ss-book-marketing-check[hidden] {
  display: none !important;
}

.ss-book-marketing-check input {
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
}

.ss-book-marketing-check span {
  font-size: 11px;
  line-height: 1.45;
  font-weight: 750;
}

.ss-book-marketing.is-subscribed {
  border-color: rgba(35,153,187,.58);
  background: rgba(35,153,187,.10);
}

.ss-book-marketing.is-subscribed .ss-book-marketing-status strong {
  color: var(--ss-sea);
}

.ss-book-marketing.is-unsubscribed {
  background: rgba(244,240,230,.72);
}

.ss-book-marketing.is-cleaned {
  background: rgba(16,40,58,.045);
}

.ss-book-marketing.is-checking {
  opacity: .72;
}

@media (max-width: 620px) {
  .ss-book-marketing {
    padding: 15px;
  }
}


/* ==========================================================
   v2.34 — Manager Marketing Contacts overview
   ========================================================== */

.ss-manager-marketing-card {
  margin-bottom: clamp(24px, 3vw, 38px);
}

.ss-manager-marketing-total {
  color: var(--ss-sea);
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1;
}

.ss-manager-marketing-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 20px;
  border-top: 2px solid var(--ss-ink);
  border-bottom: 1px solid var(--ss-line);
}

.ss-manager-marketing-stats button {
  min-width: 0;
  padding: 17px 14px;
  border: 0;
  border-right: 1px solid var(--ss-line);
  background: transparent;
  color: var(--ss-ink);
  text-align: left;
  cursor: pointer;
}

.ss-manager-marketing-stats button:last-child {
  border-right: 0;
}

.ss-manager-marketing-stats button:hover,
.ss-manager-marketing-stats button:focus-visible,
.ss-manager-marketing-stats button.is-active {
  background: rgba(143,210,229,.16);
}

.ss-manager-marketing-stats button.is-active {
  box-shadow: inset 0 -4px 0 var(--ss-sea);
}

.ss-manager-marketing-stats span,
.ss-manager-marketing-stats strong {
  display: block;
}

.ss-manager-marketing-stats span {
  min-height: 25px;
  font-size: 8px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .58;
}

.ss-manager-marketing-stats strong {
  margin-top: 4px;
  font-size: 25px;
  line-height: 1;
}

.ss-manager-marketing-tools {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  padding: 22px 0 12px;
}

.ss-manager-marketing-tools label {
  width: min(420px, 100%);
}

.ss-manager-marketing-tools label > span {
  display: block;
  margin-bottom: 6px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .58;
}

.ss-manager-marketing-tools input {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  border: 1px solid rgba(16,40,58,.28);
  background: var(--ss-paper);
  color: var(--ss-ink);
  padding: 9px 11px;
  font: inherit;
}

.ss-manager-marketing-tools > span {
  font-size: 10px;
  font-weight: 900;
  opacity: .52;
}

.ss-manager-marketing-list {
  border-top: 1px solid var(--ss-line);
}

.ss-manager-marketing-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) minmax(180px, .8fr) minmax(130px, .55fr);
  gap: 22px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--ss-line);
}

.ss-manager-marketing-row > span {
  display: grid;
  gap: 3px;
}

.ss-manager-marketing-row small {
  color: rgba(16,40,58,.58);
  font-size: 9px;
  line-height: 1.3;
}

.ss-manager-marketing-status strong {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .035em;
}

.ss-manager-marketing-status.is-subscribed strong {
  color: var(--ss-sea);
}

.ss-manager-marketing-status.is-unsubscribed strong,
.ss-manager-marketing-status.is-cleaned strong {
  color: rgba(16,40,58,.62);
}

.ss-manager-marketing-source {
  text-align: right;
}

.ss-manager-marketing-source strong {
  font-size: 10px;
  text-transform: capitalize;
}

.ss-manager-marketing-more {
  margin: 0;
  padding: 15px 0 2px;
  color: rgba(16,40,58,.58);
  font-size: 10px;
}

@media (max-width: 900px) {
  .ss-manager-marketing-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .ss-manager-marketing-stats button {
    border-bottom: 1px solid var(--ss-line);
  }

  .ss-manager-marketing-stats button:nth-child(even) {
    border-right: 0;
  }

  .ss-manager-marketing-stats button:last-child {
    grid-column: 1 / -1;
    border-bottom: 0;
  }

  .ss-manager-marketing-row {
    grid-template-columns: 1fr 1fr;
  }

  .ss-manager-marketing-source {
    grid-column: 1 / -1;
    text-align: left;
  }
}

@media (max-width: 600px) {
  .ss-manager-marketing-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .ss-manager-marketing-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ss-manager-marketing-source {
    grid-column: auto;
  }
}


/* ==========================================================
   v2.35 — Manager Promotions
   ========================================================== */

.ss-manager-promotions[hidden] {
  display: none !important;
}

.ss-manager-promotions {
  padding: 6px 0 60px;
}

.ss-manager-promotions-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  padding: 26px 0 28px;
  border-bottom: 2px solid var(--ss-ink);
}

.ss-manager-promotions-head h2 {
  margin: 3px 0 8px;
  font-size: clamp(42px, 6vw, 78px);
  line-height: .9;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.ss-manager-promotions-head > div:first-child > p:last-child {
  max-width: 700px;
  margin: 0;
  opacity: .7;
}

.ss-manager-promotions-safety {
  max-width: 330px;
  padding: 14px 16px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-sky);
}

.ss-manager-promotions-safety strong,
.ss-manager-promotions-safety span {
  display: block;
}

.ss-manager-promotions-safety strong {
  font-size: 10px;
  letter-spacing: .09em;
}

.ss-manager-promotions-safety span {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.45;
}

.ss-manager-promotions-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 28px;
  margin-top: 28px;
}

.ss-promo-sidebar {
  align-self: start;
  position: sticky;
  top: 18px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
}

.ss-promo-sidebar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-bottom: 2px solid var(--ss-ink);
  background: var(--ss-foam);
}

.ss-promo-sidebar-head span {
  display: block;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .55;
}

.ss-promo-sidebar-head h3 {
  margin: 2px 0 0;
  font-size: 22px;
  text-transform: uppercase;
}

.ss-promo-campaign-list {
  max-height: 68vh;
  overflow: auto;
}

.ss-promo-campaign-item {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: stretch;
  border-bottom: 1px solid rgba(16,40,58,.18);
  background: transparent;
}

.ss-promo-campaign-item:hover,
.ss-promo-campaign-item.is-active {
  background: rgba(143,210,229,.18);
}

.ss-promo-campaign-item.is-active {
  box-shadow: inset 4px 0 0 var(--ss-sea);
}

.ss-promo-campaign-open {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 14px 12px 14px 15px;
  border: 0;
  background: transparent;
  color: var(--ss-ink);
  text-align: left;
  cursor: pointer;
}

.ss-promo-campaign-delete {
  align-self: stretch;
  padding: 0 10px;
  border: 0;
  border-left: 1px solid rgba(16,40,58,.16);
  background: transparent;
  color: rgba(16,40,58,.56);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

.ss-promo-campaign-delete:hover,
.ss-promo-campaign-delete:focus-visible {
  background: var(--ss-ink);
  color: var(--ss-foam);
}

.ss-promo-campaign-list strong {
  font-size: 11px;
}

.ss-promo-campaign-list span,
.ss-promo-campaign-list small {
  font-size: 8px;
  opacity: .58;
}

.ss-promo-workspace {
  min-width: 0;
  display: grid;
  gap: 22px;
}

.ss-promo-panel,
.ss-promo-actions-panel {
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
}

.ss-promo-panel {
  padding: 22px;
}

.ss-promo-panel-head {
  display: flex;
  align-items: start;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(16,40,58,.22);
}

.ss-promo-panel-head > span {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  background: var(--ss-ink);
  color: var(--ss-foam);
  font-size: 10px;
  font-weight: 900;
}

.ss-promo-panel-head h3 {
  margin: 0;
  font-size: 23px;
  text-transform: uppercase;
}

.ss-promo-panel-head p {
  margin: 3px 0 0;
  font-size: 10px;
  line-height: 1.45;
  opacity: .62;
}

.ss-promo-form-grid,
.ss-promo-audience-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.ss-promo-audience-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ss-promo-form-grid label,
.ss-promo-audience-grid label,
.ss-promo-block-fields label {
  display: grid;
  gap: 6px;
}

.ss-promo-form-grid label > span,
.ss-promo-audience-grid label > span,
.ss-promo-block-fields label > span {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .58;
}

.ss-promo-form-grid input,
.ss-promo-audience-grid input,
.ss-promo-audience-grid select,
.ss-promo-block-fields input,
.ss-promo-block-fields textarea {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  border: 1px solid rgba(16,40,58,.3);
  background: #fff;
  color: var(--ss-ink);
  padding: 9px 11px;
  font: inherit;
}

.ss-promo-block-fields textarea {
  min-height: 100px;
  resize: vertical;
}

.ss-promo-wide {
  grid-column: 1 / -1;
}

.ss-promo-input-suffix {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(16,40,58,.3);
  background: #fff;
}

.ss-promo-input-suffix input {
  min-width: 0;
  border: 0;
}

.ss-promo-input-suffix b {
  display: grid;
  place-items: center;
  padding: 0 10px;
  font-size: 9px;
  white-space: nowrap;
  background: var(--ss-foam);
}

.ss-promo-audience-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-top: 20px;
  padding: 18px;
  background: var(--ss-sky);
  border: 2px solid var(--ss-ink);
}

.ss-promo-audience-number {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  column-gap: 14px;
}

.ss-promo-audience-number > span {
  grid-column: 1 / -1;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ss-promo-audience-number strong {
  font-size: 46px;
  line-height: .9;
}

.ss-promo-audience-number small {
  align-self: center;
  max-width: 480px;
  font-size: 9px;
  line-height: 1.4;
}

.ss-promo-recipient-list {
  max-height: 380px;
  overflow: auto;
  border: 2px solid var(--ss-ink);
  border-top: 0;
}

.ss-promo-recipient-list[hidden] {
  display: none !important;
}

.ss-promo-recipient-list > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(16,40,58,.16);
}

.ss-promo-recipient-list > div > span {
  display: grid;
  gap: 2px;
}

.ss-promo-recipient-list > div > span:last-child {
  text-align: right;
}

.ss-promo-recipient-list strong {
  font-size: 10px;
}

.ss-promo-recipient-list small {
  font-size: 8px;
  opacity: .6;
}

.ss-promo-block-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}

.ss-promo-block-toolbar button,
.ss-promo-preview-switch button,
.ss-promo-block-head button {
  border: 1px solid var(--ss-ink);
  background: var(--ss-paper);
  color: var(--ss-ink);
  font: inherit;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
}

.ss-promo-block-toolbar button {
  padding: 8px 10px;
}

.ss-promo-block-toolbar button:hover,
.ss-promo-preview-switch button.is-active {
  background: var(--ss-sea);
  color: white;
}

.ss-promo-block-list {
  display: grid;
  gap: 11px;
  margin-top: 16px;
}

.ss-promo-block {
  border: 1px solid rgba(16,40,58,.28);
  background: rgba(244,240,230,.42);
}

.ss-promo-block-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(16,40,58,.2);
  background: var(--ss-foam);
}

.ss-promo-block-head > span {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ss-promo-block-head > div {
  display: flex;
  gap: 4px;
}

.ss-promo-block-head button {
  width: 28px;
  height: 26px;
}

.ss-promo-block-head button:disabled {
  opacity: .25;
}

.ss-promo-block-fields {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.ss-promo-divider-note {
  margin: 0;
  font-size: 9px;
  opacity: .55;
}

.ss-promo-preview-panel .ss-promo-panel-head {
  align-items: center;
}

.ss-promo-preview-switch {
  margin-left: auto;
  display: flex;
}

.ss-promo-preview-switch button {
  padding: 7px 9px;
}

.ss-promo-preview-stage {
  padding: 24px;
  background: #e7e7e3;
  margin-top: 18px;
  overflow: auto;
}

.ss-promo-email-shell {
  width: min(620px, 100%);
  margin: 0 auto;
  transition: width .25s ease;
}

.ss-promo-email-shell.is-mobile {
  width: min(360px, 100%);
}

.ss-promo-email-preview {
  overflow: hidden;
  background: var(--ss-paper);
  box-shadow: 0 10px 30px rgba(16,40,58,.15);
  font-family: Arial,Helvetica,sans-serif;
}

.ss-promo-preview-inbox {
  display: grid;
  gap: 3px;
  padding: 12px 18px;
  border-bottom: 1px solid #d9ddd9;
}

.ss-promo-preview-inbox > span {
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .1em;
  opacity: .5;
}

.ss-promo-preview-inbox strong {
  font-size: 11px;
}

.ss-promo-preview-inbox small {
  font-size: 8px;
  opacity: .58;
}

.ss-promo-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  background: var(--ss-ink);
  color: var(--ss-foam);
}

.ss-promo-preview-header img {
  width: 72px;
  height: auto;
}

.ss-promo-preview-header b {
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ss-promo-preview-hero {
  padding: 32px 26px 29px;
  background: var(--ss-sky);
  border-bottom: 2px solid var(--ss-ink);
}

.ss-promo-preview-hero h1 {
  margin: 0;
  color: var(--ss-ink);
  font-size: clamp(32px, 5.2vw, 44px);
  line-height: .92;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.ss-promo-preview-body {
  padding: 5px 28px 28px;
  color: #304a5b;
}

.ss-promo-preview-body h2 {
  margin: 28px 0 12px;
  color: var(--ss-ink);
  font-size: 27px;
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.ss-promo-preview-body > p {
  margin: 17px 0;
  font-size: 15px;
  line-height: 1.65;
}

.ss-promo-preview-offer {
  margin: 24px 0;
  padding: 20px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-foam);
}

.ss-promo-preview-offer strong {
  display: block;
  color: var(--ss-ink);
  font-size: 20px;
  line-height: 1.1;
  text-transform: uppercase;
}

.ss-promo-preview-offer p {
  margin: 9px 0 0;
  font-size: 13px;
  line-height: 1.55;
}

.ss-promo-preview-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 24px 0;
}

.ss-promo-preview-cta {
  display: inline-block;
  margin: 25px 0 28px;
  padding: 13px 19px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-sea);
  color: white;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ss-promo-preview-body hr {
  height: 2px;
  border: 0;
  margin: 28px 0;
  background: var(--ss-ink);
}

.ss-promo-preview-footer {
  display: grid;
  gap: 4px;
  padding: 22px 26px;
  background: var(--ss-ink);
  color: var(--ss-foam);
}

.ss-promo-preview-footer strong {
  font-size: 16px;
}

.ss-promo-preview-footer span {
  font-size: 10px;
  opacity: .8;
}

.ss-promo-preview-footer small {
  margin-top: 10px;
  font-size: 8px;
  opacity: .68;
}

.ss-promo-preview-footer a {
  margin-top: 3px;
  color: var(--ss-sky);
  font-size: 8px;
  text-decoration: underline;
}

.ss-promo-actions-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px 24px;
  align-items: center;
  padding: 19px 21px;
  background: var(--ss-ink);
  color: var(--ss-foam);
}

.ss-promo-actions-panel > div:first-child {
  display: grid;
  gap: 4px;
}

.ss-promo-actions-panel > div:first-child strong {
  font-size: 11px;
}

.ss-promo-actions-panel > div:first-child span {
  font-size: 9px;
  opacity: .68;
}

.ss-promo-test-email {
  display: grid;
  grid-template-columns: auto minmax(190px, 310px);
  gap: 8px 10px;
  align-items: center;
  margin-top: 7px;
}

.ss-promo-test-email > span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .76 !important;
}

.ss-promo-test-email input {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(244,240,230,.42);
  background: rgba(255,255,255,.08);
  color: var(--ss-foam);
  font-size: 11px;
}

.ss-promo-test-email input:focus {
  outline: 2px solid var(--ss-sky);
  outline-offset: 2px;
}

.ss-promo-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.ss-promo-actions-panel > p {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(244,240,230,.2);
  font-size: 9px;
  line-height: 1.5;
  opacity: .72;
}

.ss-promo-actions-panel .ss-btn,
.ss-promo-actions-panel .ss-btn--ghost {
  border-color: rgba(244,240,230,.72);
  color: var(--ss-foam);
}

.ss-promo-actions-panel .ss-btn--ghost {
  background: transparent;
}

.ss-promo-actions-panel .ss-btn--ghost:hover,
.ss-promo-actions-panel .ss-btn--ghost:focus-visible {
  background: rgba(244,240,230,.12);
  color: var(--ss-foam);
}

.ss-promo-actions-panel .ss-btn:not(.ss-btn--ghost) {
  background: var(--ss-sky);
  color: var(--ss-ink);
}

.ss-promo-actions-panel .ss-btn:not(.ss-btn--ghost):hover,
.ss-promo-actions-panel .ss-btn:not(.ss-btn--ghost):focus-visible {
  background: #b7e7f4;
  color: var(--ss-ink);
}

.ss-promo-actions #promoSendCampaign:disabled {
  opacity: .52;
  border-color: rgba(244,240,230,.34);
  background: transparent;
  color: rgba(244,240,230,.76);
  cursor: not-allowed;
}

@media (max-width: 1080px) {
  .ss-manager-promotions-layout {
    grid-template-columns: 1fr;
  }

  .ss-promo-sidebar {
    position: static;
  }

  .ss-promo-campaign-list {
    max-height: 260px;
  }
}

@media (max-width: 760px) {
  .ss-manager-promotions-head {
    align-items: stretch;
    flex-direction: column;
  }

  .ss-manager-promotions-safety {
    max-width: none;
  }

  .ss-promo-audience-grid,
  .ss-promo-form-grid {
    grid-template-columns: 1fr;
  }

  .ss-promo-wide {
    grid-column: auto;
  }

  .ss-promo-audience-result {
    align-items: stretch;
    flex-direction: column;
  }

  .ss-promo-recipient-list > div {
    grid-template-columns: 1fr;
  }

  .ss-promo-recipient-list > div > span:last-child {
    text-align: left;
  }

  .ss-promo-preview-stage {
    padding: 12px;
  }

  .ss-promo-actions-panel {
    grid-template-columns: 1fr;
  }

  .ss-promo-actions {
    justify-content: flex-start;
  }

  .ss-promo-test-email {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================
   v2.38 — collapsible Marketing Contacts
   ========================================================== */

.ss-manager-marketing-stats button {
  position: relative;
}

.ss-manager-marketing-stats button::after {
  content: "+";
  position: absolute;
  right: 10px;
  bottom: 11px;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  opacity: .34;
}

.ss-manager-marketing-stats button.is-active::after {
  content: "−";
  opacity: .75;
}

.ss-manager-marketing-expand[hidden] {
  display: none !important;
}

.ss-manager-marketing-expand {
  border-bottom: 1px solid var(--ss-line);
  animation: ssMarketingOpen .18s ease-out both;
}

@keyframes ssMarketingOpen {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ss-manager-marketing-expand-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  padding: 13px 14px;
  background: var(--ss-ink);
  color: var(--ss-foam);
}

.ss-manager-marketing-expand-head > div {
  display: grid;
  gap: 2px;
}

.ss-manager-marketing-expand-head span {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .68;
}

.ss-manager-marketing-expand-head strong {
  font-size: 14px;
}

.ss-manager-marketing-close {
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid rgba(244,240,230,.5);
  background: transparent;
  color: var(--ss-foam);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

.ss-manager-marketing-close:hover,
.ss-manager-marketing-close:focus-visible {
  background: var(--ss-foam);
  color: var(--ss-ink);
}

.ss-manager-marketing-expand .ss-manager-marketing-tools {
  padding-left: 14px;
  padding-right: 14px;
}

.ss-manager-marketing-expand .ss-manager-marketing-list {
  padding: 0 14px 14px;
}

@media (max-width: 600px) {
  .ss-manager-marketing-expand-head {
    align-items: flex-start;
  }

  .ss-manager-marketing-stats button::after {
    right: 8px;
    bottom: 10px;
  }
}


/* ==========================================================
   v2.39 — simplified public booking sequence
   Room → session → required setup/duration → date + time
   ========================================================== */

.ss-book-choice-help {
  margin: 5px 0 0;
  color: var(--book-muted);
  font-size: 11px;
  line-height: 1.45;
}

.ss-book-session-picker--integrated {
  align-items: start;
}

.ss-book-session-panel {
  overflow: hidden;
  border: 2px solid rgba(16,40,58,.24);
  background: #fff;
  transition:
    border-color .16s ease,
    background-color .16s ease,
    box-shadow .16s ease;
}

.ss-book-session-panel:hover {
  border-color: rgba(35,153,187,.6);
}

.ss-book-session-panel.is-active {
  border-color: var(--ss-sea);
  background: rgba(143,210,229,.08);
  box-shadow: inset 0 4px 0 var(--ss-sea);
}

.ss-booking-prototype .ss-book-session-panel > .ss-session-main {
  width: 100%;
  min-height: 82px;
  padding: 17px 18px;
  border: 0;
  background: transparent;
}

.ss-booking-prototype .ss-book-session-panel > .ss-session-main:hover,
.ss-booking-prototype .ss-book-session-panel > .ss-session-main.selected {
  border-color: transparent;
  background: rgba(143,210,229,.14);
}

.ss-book-inline-choice {
  padding: 0 14px 14px;
}

.ss-book-inline-choice[hidden] {
  display: none !important;
}

.ss-book-inline-choice-label {
  display: block;
  padding: 10px 3px 8px;
  border-top: 1px solid rgba(16,40,58,.18);
  color: rgba(16,40,58,.68);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.ss-book-inline-choice-label b {
  color: var(--ss-sea);
}

.ss-book-inline-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ss-booking-prototype .ss-book-inline-options .session-opt {
  min-height: 78px;
  padding: 11px 12px;
  border-width: 1px;
  background: var(--ss-paper);
}

.ss-booking-prototype .ss-book-inline-options .session-opt strong {
  font-size: 13px;
}

.ss-booking-prototype .ss-book-inline-options .session-opt span {
  font-size: 10px;
  line-height: 1.35;
}

.ss-booking-prototype .ss-book-inline-options .session-opt.selected {
  border-color: var(--ss-ink);
  background: var(--ss-sky);
  box-shadow: inset 0 -3px 0 var(--ss-sea);
}

.ss-book-week-intro {
  display: grid;
  gap: 2px;
  margin-bottom: 14px;
}

.ss-book-week-intro > span {
  color: var(--ss-sea);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.ss-book-week-intro > strong {
  color: var(--ss-ink);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.05;
}

.ss-book-week-intro > small {
  color: var(--book-muted);
  font-size: 10px;
}

@media (max-width: 760px) {
  .ss-book-session-picker--integrated {
    grid-template-columns: 1fr;
  }

  .ss-book-inline-options {
    grid-template-columns: 1fr 1fr;
  }

  .ss-booking-prototype .ss-book-session-panel > .ss-session-main {
    min-height: 72px;
  }
}

@media (max-width: 460px) {
  .ss-book-inline-options {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================
   v2.40 — staging-only booking/reset Danger Zone
   ========================================================== */

.ss-manager-danger-zone {
  margin-top: 38px;
  border: 2px solid #8e342d;
  background: #fff8f4;
}

.ss-manager-danger-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  padding: 20px;
}

.ss-manager-danger-head > div {
  max-width: 760px;
}

.ss-manager-danger-head span {
  color: #8e342d;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ss-manager-danger-head h3 {
  margin: 3px 0 5px;
  color: var(--ss-ink);
  font-size: 25px;
  text-transform: uppercase;
}

.ss-manager-danger-head p {
  margin: 0;
  color: rgba(16,40,58,.68);
  font-size: 10px;
  line-height: 1.5;
}

.ss-manager-danger-open,
.ss-manager-danger-delete {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 10px 14px;
  border: 2px solid #8e342d;
  background: transparent;
  color: #8e342d;
  font: inherit;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
  cursor: pointer;
}

.ss-manager-danger-open:hover,
.ss-manager-danger-open:focus-visible {
  background: #8e342d;
  color: #fff;
}

.ss-manager-danger-preserved {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid rgba(142,52,45,.24);
  background: rgba(244,240,230,.55);
}

.ss-manager-danger-preserved strong {
  margin-right: 4px;
  font-size: 8px;
  text-transform: uppercase;
}

.ss-manager-danger-preserved span {
  padding: 5px 7px;
  border: 1px solid rgba(16,40,58,.22);
  background: var(--ss-paper);
  font-size: 8px;
  font-weight: 800;
}

.ss-manager-danger-reset[hidden],
.ss-manager-danger-confirm[hidden] {
  display: none !important;
}

.ss-manager-danger-reset {
  padding: 20px;
  border-top: 2px solid #8e342d;
  background: #fff;
}

.ss-manager-danger-step {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}

.ss-manager-danger-step-number {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: #8e342d;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.ss-manager-danger-step strong {
  display: block;
  color: var(--ss-ink);
  font-size: 13px;
}

.ss-manager-danger-step p {
  margin: 3px 0 0;
  color: rgba(16,40,58,.66);
  font-size: 9px;
  line-height: 1.5;
}

.ss-manager-reset-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px;
  margin: 17px 0;
}

.ss-manager-reset-counts > div {
  padding: 12px;
  border: 1px solid rgba(16,40,58,.22);
  background: var(--ss-foam);
}

.ss-manager-reset-counts span,
.ss-manager-reset-counts strong {
  display: block;
}

.ss-manager-reset-counts span {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  opacity: .6;
}

.ss-manager-reset-counts strong {
  margin-top: 3px;
  font-size: 23px;
}

.ss-manager-reset-counts > span {
  grid-column: 1 / -1;
  font-size: 9px;
}

.ss-manager-reset-counts .is-error {
  color: #8e342d;
}

.ss-manager-danger-confirm {
  margin-top: 20px;
  padding: 18px;
  border: 2px solid #8e342d;
  background: #fff7f4;
}

.ss-manager-reset-check {
  display: flex !important;
  align-items: flex-start;
  gap: 9px;
  margin: 18px 0 15px !important;
  font-size: 10px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.ss-manager-reset-check input {
  width: auto;
  min-height: 0;
  margin-top: 2px;
}

.ss-manager-reset-phrase {
  display: grid !important;
  gap: 6px;
  margin: 0 !important;
}

.ss-manager-reset-phrase > span {
  font-size: 9px;
  font-weight: 900;
}

.ss-manager-reset-phrase input {
  max-width: 380px;
  min-height: 42px;
  padding: 9px 11px;
  border: 2px solid rgba(142,52,45,.5);
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.ss-manager-reset-final-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}

.ss-manager-danger-delete {
  background: #8e342d;
  color: #fff;
}

.ss-manager-danger-delete:hover,
.ss-manager-danger-delete:focus-visible {
  background: #68231e;
  border-color: #68231e;
}

.ss-manager-danger-delete:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.ss-manager-reset-final-note {
  margin: 8px 0 0;
  color: rgba(142,52,45,.8);
  font-size: 8px;
  font-weight: 800;
}

@media (max-width: 760px) {
  .ss-manager-danger-head {
    align-items: stretch;
    flex-direction: column;
  }

  .ss-manager-danger-open {
    align-self: flex-start;
  }

  .ss-manager-reset-counts {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}


/* ==========================================================
   v2.41 — Manager native Shop foundation
   ========================================================== */

.ss-manager-shop[hidden] {
  display: none !important;
}

.ss-manager-shop {
  margin-top: 18px;
}

.ss-manager-shop-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  padding: 24px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-sky);
}

.ss-manager-shop-head h2 {
  margin: 3px 0 6px;
  font-size: clamp(42px,5vw,70px);
  line-height: .9;
  text-transform: uppercase;
}

.ss-manager-shop-head p {
  max-width: 680px;
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
}

.ss-manager-shop-safety {
  flex: 0 0 225px;
  padding: 12px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-ink);
  color: var(--ss-foam);
}

.ss-manager-shop-safety strong,
.ss-manager-shop-safety span {
  display: block;
}

.ss-manager-shop-safety strong {
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ss-manager-shop-safety span {
  margin-top: 4px;
  font-size: 8px;
  line-height: 1.45;
  opacity: .75;
}

.ss-manager-shop-kpis {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  border: 2px solid var(--ss-ink);
  border-top: 0;
}

.ss-manager-shop-kpis > div {
  padding: 14px 15px;
  border-right: 1px solid rgba(16,40,58,.2);
  background: var(--ss-paper);
}

.ss-manager-shop-kpis > div:last-child {
  border-right: 0;
}

.ss-manager-shop-kpis span,
.ss-manager-shop-kpis strong {
  display: block;
}

.ss-manager-shop-kpis span {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .55;
}

.ss-manager-shop-kpis strong {
  margin-top: 4px;
  font-size: 24px;
}

.ss-manager-shop-layout {
  display: grid;
  grid-template-columns: 255px minmax(0,1fr);
  gap: 18px;
  margin-top: 18px;
}

.ss-shop-manager-sidebar,
.ss-shop-manager-editor {
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
}

.ss-shop-manager-sidebar-head,
.ss-shop-manager-editor-head,
.ss-shop-variant-head {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  padding: 14px 15px;
  border-bottom: 1px solid rgba(16,40,58,.18);
}

.ss-shop-manager-sidebar-head span,
.ss-shop-manager-editor-head span,
.ss-shop-variant-head span {
  display: block;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
  opacity: .55;
}

.ss-shop-manager-sidebar-head h3,
.ss-shop-manager-editor-head h3,
.ss-shop-variant-head h3 {
  margin: 2px 0 0;
  font-size: 18px;
}

.ss-shop-manager-product-button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 12px 13px;
  border: 0;
  border-bottom: 1px solid rgba(16,40,58,.15);
  background: transparent;
  color: var(--ss-ink);
  text-align: left;
  cursor: pointer;
}

.ss-shop-manager-product-button:hover,
.ss-shop-manager-product-button.is-active {
  background: rgba(143,210,229,.22);
}

.ss-shop-manager-product-button span,
.ss-shop-manager-product-button strong,
.ss-shop-manager-product-button small {
  display: block;
}

.ss-shop-manager-product-button strong {
  font-size: 10px;
}

.ss-shop-manager-product-button small {
  margin-top: 2px;
  font-size: 7px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .55;
}

.ss-shop-manager-product-button > b {
  font-size: 8px;
  white-space: nowrap;
}

.ss-shop-manager-empty-editor {
  min-height: 310px;
  display: grid;
  place-content: center;
  gap: 5px;
  padding: 30px;
  text-align: center;
}

.ss-shop-manager-empty-editor strong {
  font-size: 18px;
}

.ss-shop-manager-empty-editor span {
  max-width: 430px;
  color: rgba(16,40,58,.6);
  font-size: 10px;
  line-height: 1.45;
}

.ss-shop-manager-form-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  padding: 16px;
}

.ss-shop-manager-form-grid label {
  display: grid;
  gap: 5px;
}

.ss-shop-manager-form-grid label.is-wide {
  grid-column: 1 / -1;
}

.ss-shop-manager-form-grid label > span,
.ss-shop-variant-row label > span {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .6;
}

.ss-shop-manager-form-grid input,
.ss-shop-manager-form-grid select,
.ss-shop-manager-form-grid textarea,
.ss-shop-variant-row input {
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid rgba(16,40,58,.32);
  border-radius: 0;
  background: #fff;
  color: var(--ss-ink);
  font: inherit;
  font-size: 10px;
}

.ss-shop-manager-form-grid textarea {
  min-height: 90px;
  resize: vertical;
}

.ss-shop-variant-head {
  margin-top: 2px;
  border-top: 2px solid var(--ss-ink);
}

.ss-shop-variant-head p {
  max-width: 650px;
  margin: 3px 0 0;
  color: rgba(16,40,58,.6);
  font-size: 8px;
  line-height: 1.45;
}

.ss-shop-variant-empty {
  display: grid;
  gap: 4px;
  padding: 18px;
  background: var(--ss-foam);
}

.ss-shop-variant-empty strong {
  font-size: 11px;
}

.ss-shop-variant-empty span {
  color: rgba(16,40,58,.6);
  font-size: 9px;
}

.ss-shop-variant-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr .85fr .7fr .7fr .8fr auto;
  gap: 8px;
  align-items: end;
  padding: 12px;
  border-top: 1px solid rgba(16,40,58,.14);
}

.ss-shop-variant-row label {
  display: grid;
  gap: 4px;
}

.ss-shop-variant-row label span small {
  font-size: 7px;
  font-weight: 500;
  text-transform: none;
  opacity: .7;
}

.ss-shop-variant-row label > small {
  color: #8e342d;
  font-size: 7px;
}

.ss-shop-variant-checks {
  display: grid;
  gap: 6px;
  padding-bottom: 4px;
}

.ss-shop-variant-checks label {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ss-shop-variant-checks input {
  width: auto;
  min-height: 0;
}

.ss-shop-variant-checks span {
  font-size: 8px;
  font-weight: 800;
}

.ss-shop-variant-actions {
  display: grid;
  gap: 5px;
}

.ss-shop-variant-delete {
  border: 0;
  background: transparent;
  color: #8e342d;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}

.ss-manager-shop-button.active {
  background: var(--ss-ink) !important;
  color: var(--ss-foam) !important;
}

@media (max-width: 1100px) {
  .ss-shop-variant-row {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
}

@media (max-width: 820px) {
  .ss-manager-shop-head {
    flex-direction: column;
  }

  .ss-manager-shop-safety {
    flex-basis: auto;
  }

  .ss-manager-shop-kpis {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .ss-manager-shop-layout {
    grid-template-columns: 1fr;
  }

  .ss-shop-manager-form-grid,
  .ss-shop-variant-row {
    grid-template-columns: 1fr;
  }

  .ss-shop-manager-form-grid label.is-wide {
    grid-column: auto;
  }
}


/* ==========================================================
   NATIVE SHOP — v2.42 public product selection + cart
   ========================================================== */

.ss-shop-cart-jump {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 10px 14px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
  color: var(--ss-ink);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: 10px;
  font-weight: 900;
}

.ss-shop-cart-badge {
  min-width: 26px;
  min-height: 26px;
  padding: 3px 7px;
  display: inline-grid;
  place-items: center;
  background: var(--ss-ink);
  color: var(--ss-foam);
}

.ss-shop-product-description {
  max-width: 38ch;
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.45;
  opacity: .72;
}

.ss-shop-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 2px;
}

.ss-shop-option-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ss-shop-option-field > span {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .6;
}

.ss-shop-option-field select {
  width: 100%;
  min-height: 46px;
  padding: 10px 34px 10px 11px;
  border: 2px solid var(--ss-ink);
  border-radius: 0;
  background: var(--ss-paper);
  color: var(--ss-ink);
  font-size: 13px;
  font-weight: 750;
}

.ss-shop-option-field select:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.ss-shop-product-action {
  display: grid;
  gap: 10px;
  margin-top: 2px;
}

.ss-shop-stock-note {
  min-height: 20px;
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .68;
}

.ss-shop-add-button {
  width: 100%;
  min-height: 46px;
  padding-block: 10px;
  font-size: 11px;
}

.ss-shop-add-button:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none;
}

.ss-shop-public-empty {
  display: grid;
  gap: 8px;
  padding: clamp(34px, 6vw, 70px);
  border: 2px solid var(--ss-ink);
  background: var(--ss-foam);
}

.ss-shop-public-empty strong {
  font-size: clamp(26px, 4vw, 46px);
  line-height: 1;
  text-transform: uppercase;
}

.ss-shop-cart-section {
  background: var(--ss-sky);
  border-top: 2px solid var(--ss-ink);
}

.ss-shop-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(420px, 1.22fr);
  gap: clamp(44px, 8vw, 110px);
  align-items: start;
}

.ss-shop-cart-heading .ss-copy {
  margin: 28px 0 0;
  max-width: 520px;
  font-size: clamp(17px, 1.35vw, 21px);
}

.ss-shop-cart-panel {
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
  box-shadow: 10px 10px 0 var(--ss-ink);
}

.ss-shop-cart-empty {
  display: grid;
  gap: 8px;
  padding: clamp(30px, 5vw, 54px);
}

.ss-shop-cart-empty strong {
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1;
  text-transform: uppercase;
}

.ss-shop-cart-empty span {
  font-size: 14px;
  opacity: .68;
}

.ss-shop-cart-lines {
  padding: 0 clamp(18px, 3vw, 34px);
}

.ss-shop-cart-line {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--ss-line);
}

.ss-shop-cart-line > img {
  width: 78px;
  height: 78px;
  object-fit: cover;
  border: 1px solid var(--ss-ink);
}

.ss-shop-cart-line-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.ss-shop-cart-line-copy > strong {
  font-size: 16px;
  line-height: 1.1;
  text-transform: uppercase;
}

.ss-shop-cart-line-copy > span,
.ss-shop-cart-line-copy > small {
  font-size: 11px;
  line-height: 1.35;
  opacity: .67;
}

.ss-shop-cart-line-controls {
  min-width: 128px;
  display: grid;
  justify-items: end;
  gap: 7px;
}

.ss-shop-qty {
  display: inline-grid;
  grid-template-columns: 32px 34px 32px;
  align-items: stretch;
  border: 1px solid var(--ss-ink);
}

.ss-shop-qty button,
.ss-shop-qty span {
  min-height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--ss-ink);
  font-weight: 900;
}

.ss-shop-qty button {
  cursor: pointer;
}

.ss-shop-qty button:hover:not(:disabled),
.ss-shop-qty button:focus-visible:not(:disabled) {
  background: var(--ss-sky);
}

.ss-shop-qty button:disabled {
  opacity: .28;
  cursor: not-allowed;
}

.ss-shop-line-total {
  font-size: 15px;
}

.ss-shop-remove {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ss-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

.ss-shop-cart-footer {
  padding: clamp(20px, 3vw, 32px);
  border-top: 2px solid var(--ss-ink);
  background: var(--ss-foam);
}

.ss-shop-collection-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  cursor: pointer;
}

.ss-shop-collection-option input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--ss-ink);
}

.ss-shop-collection-option span {
  display: grid;
  gap: 2px;
}

.ss-shop-collection-option strong {
  font-size: 13px;
  text-transform: uppercase;
}

.ss-shop-collection-option small {
  font-size: 11px;
  opacity: .65;
}

.ss-shop-cart-total-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ss-line);
  font-weight: 900;
  text-transform: uppercase;
}

.ss-shop-cart-total-row strong {
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1;
}

.ss-shop-checkout-note {
  margin: 16px 0 0;
  font-size: 10px;
  line-height: 1.45;
  font-weight: 750;
  opacity: .62;
}

@media (max-width: 1000px) {
  .ss-shop-cart-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .ss-shop-options {
    grid-template-columns: 1fr;
  }

  .ss-shop-cart-line {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .ss-shop-cart-line > img {
    width: 62px;
    height: 62px;
  }

  .ss-shop-cart-line-controls {
    grid-column: 1 / -1;
    width: 100%;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-items: start;
  }

  .ss-shop-line-total {
    justify-self: center;
  }

  .ss-shop-remove {
    justify-self: end;
  }
}


/* ==========================================================
   NATIVE SHOP — v2.44 checkout/order + email layer
   ========================================================== */

@media (min-width: 821px) {
  .ss-manager-shop-kpis {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.ss-shop-manager-orders {
  margin-top: 18px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
}

.ss-shop-manager-orders-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid rgba(16,40,58,.18);
}

.ss-shop-manager-orders-head span {
  display: block;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .55;
}

.ss-shop-manager-orders-head h3 {
  margin: 2px 0 2px;
  font-size: 19px;
}

.ss-shop-manager-orders-head p {
  max-width: 680px;
  margin: 0;
  font-size: 8px;
  line-height: 1.45;
  opacity: .62;
}

.ss-shop-manager-order-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  background: var(--ss-foam);
}

.ss-shop-manager-order-empty {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  padding: 18px;
  background: var(--ss-paper);
  border: 1px solid rgba(16,40,58,.2);
}

.ss-shop-manager-order-empty strong {
  font-size: 11px;
}

.ss-shop-manager-order-empty span {
  font-size: 9px;
  opacity: .62;
}

.ss-shop-manager-order {
  border: 1px solid rgba(16,40,58,.32);
  background: var(--ss-paper);
}

.ss-shop-manager-order-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 13px;
  border-bottom: 1px solid rgba(16,40,58,.14);
}

.ss-shop-manager-order-top > div:first-child {
  display: grid;
  gap: 2px;
}

.ss-shop-manager-order-ref {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .58;
}

.ss-shop-manager-order-top strong {
  font-size: 12px;
}

.ss-shop-manager-order-top small {
  font-size: 8px;
  opacity: .58;
}

.ss-shop-manager-order-status {
  padding: 6px 8px;
  border: 1px solid var(--ss-ink);
  background: var(--ss-sky);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ss-shop-manager-order-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  padding: 9px 13px;
  border-bottom: 1px solid rgba(16,40,58,.14);
  font-size: 8px;
}

.ss-shop-manager-order-contact a,
.ss-shop-manager-order-contact span {
  color: var(--ss-ink);
}

.ss-shop-manager-order-items {
  padding: 0 13px;
}

.ss-shop-manager-order-item {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(16,40,58,.1);
}

.ss-shop-manager-order-item > div {
  display: grid;
  gap: 2px;
}

.ss-shop-manager-order-item > div:last-child {
  justify-items: end;
  white-space: nowrap;
}

.ss-shop-manager-order-item strong {
  font-size: 9px;
}

.ss-shop-manager-order-item span {
  font-size: 8px;
  opacity: .62;
}

.ss-shop-manager-order-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 13px;
  background: rgba(143,210,229,.18);
}

.ss-shop-manager-order-total span {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  opacity: .6;
}

.ss-shop-manager-order-total strong {
  font-size: 18px;
}

.ss-shop-checkout-box {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 2px solid var(--ss-ink);
}

.ss-shop-checkout-head {
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
}

.ss-shop-checkout-head > span {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
  opacity: .55;
}

.ss-shop-checkout-head > strong {
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1;
  text-transform: uppercase;
}

.ss-shop-checkout-head p {
  max-width: 55ch;
  margin: 3px 0 0;
  font-size: 11px;
  line-height: 1.45;
  opacity: .68;
}

.ss-shop-checkout-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ss-shop-checkout-form label {
  display: grid;
  gap: 5px;
}

.ss-shop-checkout-form label:nth-of-type(1),
.ss-shop-checkout-form label:nth-of-type(2) {
  grid-column: span 1;
}

.ss-shop-checkout-form label:nth-of-type(3) {
  grid-column: 1 / -1;
}

.ss-shop-checkout-form label > span {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ss-shop-checkout-form label > span small {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: .6;
}

.ss-shop-checkout-form input {
  width: 100%;
  min-height: 46px;
  padding: 10px 11px;
  border: 2px solid var(--ss-ink);
  border-radius: 0;
  background: #fff;
  color: var(--ss-ink);
  font: inherit;
  font-size: 13px;
}

.ss-shop-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.ss-shop-checkout-button {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 48px;
  margin-top: 2px;
}

.ss-shop-checkout-button:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none;
}

.ss-shop-checkout-message {
  grid-column: 1 / -1;
  min-height: 17px;
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 750;
  opacity: .65;
}

.ss-shop-checkout-message.is-error {
  color: #8e342d;
  opacity: 1;
}

.ss-shop-stripe-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 16px;
  margin-top: 4px;
  padding: 16px;
  border: 2px solid var(--ss-ink);
  background: #fff;
}

.ss-shop-stripe-panel[hidden],
.ss-shop-wallet-wrap[hidden],
.ss-shop-payment-divider[hidden] {
  display: none !important;
}

.ss-shop-stripe-mode {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  background: var(--ss-sky);
  border: 1px solid rgba(16,40,58,.18);
}

.ss-shop-stripe-mode strong,
.ss-shop-stripe-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.ss-shop-stripe-mode span,
.ss-shop-wallet-wrap p,
.ss-shop-card-wrap p {
  margin: 0;
  font-size: 10px;
  line-height: 1.45;
  opacity: .65;
}

.ss-shop-wallet-wrap,
.ss-shop-card-wrap {
  display: grid;
  gap: 8px;
}

.ss-shop-payment-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ss-ink);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .5;
}

.ss-shop-payment-divider::before,
.ss-shop-payment-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
}

#ssShopPaymentElement,
#ssShopExpressCheckoutElement {
  min-height: 44px;
}

.ss-shop-order-confirmation {
  display: grid;
  gap: 6px;
  margin-top: 24px;
  padding: 18px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-sky);
}

.ss-shop-order-confirmation[hidden] {
  display: none !important;
}

.ss-shop-order-confirmation-kicker {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .6;
}

.ss-shop-order-confirmation > strong {
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1;
  text-transform: uppercase;
}

.ss-shop-order-confirmation p,
.ss-shop-order-confirmation small {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
}

.ss-shop-order-confirmation small {
  opacity: .65;
}

@media (max-width: 1050px) {
  .ss-shop-manager-order-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .ss-shop-manager-orders-head,
  .ss-shop-manager-order-top {
    flex-direction: column;
    align-items: stretch;
  }

  .ss-shop-manager-order-status {
    align-self: flex-start;
  }

  .ss-shop-checkout-form {
    grid-template-columns: 1fr;
  }

  .ss-shop-checkout-form label:nth-of-type(1),
  .ss-shop-checkout-form label:nth-of-type(2),
  .ss-shop-checkout-form label:nth-of-type(3),
  .ss-shop-stripe-panel,
  .ss-shop-checkout-button,
  .ss-shop-checkout-message {
    grid-column: auto;
  }
}


/* v2.51 — Shop reservation expiry countdown */
.ss-shop-reservation-countdown {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--ss-line);
  background: rgba(255,255,255,.55);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.35;
}

/* v2.52 — Manager-only UK delivery settings foundation */
.ss-shop-manager-delivery {
  margin: 0 0 24px;
  padding: 22px;
  border: 1px solid rgba(24, 61, 82, .18);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
}

.ss-shop-manager-delivery-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.ss-shop-manager-delivery-head span,
.ss-shop-manager-delivery-fields label > span {
  display: block;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5d7380;
}

.ss-shop-manager-delivery-head h3 {
  margin: 4px 0 5px;
}

.ss-shop-manager-delivery-head p {
  max-width: 760px;
  margin: 0;
  color: #536b78;
}

.ss-shop-manager-delivery-fields {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(180px, .45fr) 1.3fr;
  gap: 16px;
  align-items: end;
}

.ss-shop-manager-delivery-fields label {
  margin: 0;
}

.ss-shop-manager-delivery-fields input[type="number"] {
  width: 100%;
  margin-top: 7px;
  padding: 11px 12px;
  border: 1px solid rgba(24,61,82,.2);
  border-radius: 10px;
  background: #fff;
  color: #173649;
}

.ss-shop-manager-delivery-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 11px 13px;
  border: 1px solid rgba(24,61,82,.16);
  border-radius: 10px;
  background: rgba(255,255,255,.7);
}

.ss-shop-manager-delivery-toggle input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.ss-shop-manager-delivery-toggle span {
  margin: 0;
}

.ss-shop-manager-delivery-fields small {
  align-self: center;
  color: #657b87;
  line-height: 1.45;
}

@media (max-width: 820px) {
  .ss-shop-manager-delivery-head {
    display: grid;
  }
  .ss-shop-manager-delivery-fields {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================
   NATIVE SHOP — v2.53 public UK delivery checkout
   ========================================================== */
.ss-shop-fulfilment-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ss-shop-fulfilment-option {
  min-height: 76px;
  padding: 14px;
  border: 2px solid var(--ss-line);
  background: rgba(255,255,255,.55);
}

.ss-shop-fulfilment-option:has(input:checked) {
  border-color: var(--ss-ink);
  background: var(--ss-paper);
}

.ss-shop-cart-totals {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--ss-line);
}

.ss-shop-cart-totals .ss-shop-cart-total-row {
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
}

.ss-shop-cart-totals .ss-shop-cart-total-row:first-child {
  margin-top: 0;
}

.ss-shop-cart-total-row--minor {
  align-items: baseline;
  font-size: 11px;
  opacity: .72;
}

.ss-shop-cart-total-row--minor strong {
  font-size: 16px;
}

.ss-shop-cart-total-row[hidden] {
  display: none !important;
}

.ss-shop-delivery-address {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 2px;
  padding: 16px;
  border: 1px solid var(--ss-line);
  background: rgba(143,210,229,.12);
}

.ss-shop-delivery-address[hidden] {
  display: none !important;
}

.ss-shop-delivery-address > strong {
  grid-column: 1 / -1;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ss-shop-delivery-address .ss-shop-address-wide {
  grid-column: 1 / -1;
}

.ss-shop-manager-order-address {
  flex-basis: 100%;
  line-height: 1.45;
  opacity: .72;
}

@media (max-width: 650px) {
  .ss-shop-fulfilment-options,
  .ss-shop-delivery-address {
    grid-template-columns: 1fr;
  }

  .ss-shop-delivery-address > strong,
  .ss-shop-delivery-address .ss-shop-address-wide {
    grid-column: auto;
  }
}


/* ==========================================================
   NATIVE SHOP — v2.59 delivery-only checkout + manual refund workflow
   ========================================================== */

.ss-shop-manager-order-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: end;
  padding: 11px 13px;
  border-top: 1px solid rgba(16,40,58,.1);
  background: rgba(255,255,255,.52);
}

.ss-shop-manager-order-actions label {
  display: grid;
  gap: 4px;
}

.ss-shop-manager-order-actions label > span,
.ss-shop-manager-order-actions small {
  font-size: 8px;
  line-height: 1.35;
}

.ss-shop-manager-order-actions label > span {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .58;
}

.ss-shop-manager-order-actions select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--ss-ink);
  border-radius: 0;
  background: var(--ss-paper);
  color: var(--ss-ink);
  padding: 6px 8px;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
}

.ss-shop-manager-order-actions .ss-btn {
  min-height: 34px;
  white-space: nowrap;
}

.ss-shop-manager-order-actions small {
  grid-column: 1 / -1;
  opacity: .55;
}

.ss-shop-manager-order-status.is-ready_for_collection,
.ss-shop-manager-order-status.is-dispatched {
  background: var(--ss-paper);
}

.ss-shop-manager-order-status.is-completed,
.ss-shop-manager-order-status.is-fulfilled {
  background: var(--ss-sky);
}

@media (max-width: 650px) {
  .ss-shop-manager-order-actions {
    grid-template-columns: 1fr;
  }

  .ss-shop-manager-order-actions small {
    grid-column: auto;
  }
}


/* v2.59 manual refund controls */
.ss-shop-manager-order-refund {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 11px 13px;
  border-top: 1px solid rgba(16,40,58,.1);
  background: rgba(255,248,239,.66);
}
.ss-shop-manager-order-refund strong {
  flex-basis: 100%;
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ss-shop-manager-order-refund small {
  flex-basis: 100%;
  font-size: 8px;
  line-height: 1.45;
  opacity: .7;
}
.ss-shop-manager-order-status.is-refund_required,
.ss-shop-manager-order-status.is-refunded_manual {
  border-color: currentColor;
}
.ss-shop-manager-order-status.is-refunded_manual {
  font-weight: 900;
}


/* v2.60 — Shop product removal + WordPress Media Library image picker */
.ss-shop-manager-product-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .65rem;
  flex-wrap: wrap;
}

.ss-shop-product-remove,
.ss-shop-image-clear {
  border: 0;
  background: transparent;
  color: #8f2f2f;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: .45rem .2rem;
}

.ss-shop-product-remove:disabled,
.ss-shop-image-clear:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.ss-shop-manager-image-field {
  display: grid;
  gap: .55rem;
}

.ss-shop-manager-image-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: .55rem;
  align-items: center;
}

.ss-shop-manager-image-preview {
  width: min(220px, 100%);
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,.06);
}

.ss-shop-manager-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 720px) {
  .ss-shop-manager-image-controls {
    grid-template-columns: 1fr;
  }

  .ss-shop-manager-product-actions {
    justify-content: flex-start;
  }
}

/* ==========================================================
   v2.61 — Shop Manager order organisation + quieter utilities
   ========================================================== */

.ss-shop-manager-order-list {
  display: block;
  padding: 14px;
  background: var(--ss-foam);
}

.ss-shop-manager-order-group {
  margin: 0 0 10px;
  border: 1px solid rgba(16,40,58,.2);
  background: rgba(255,255,255,.42);
}

.ss-shop-manager-order-group:last-child {
  margin-bottom: 0;
}

.ss-shop-manager-order-group > summary,
.ss-shop-manager-order > summary {
  list-style: none;
  cursor: pointer;
}

.ss-shop-manager-order-group > summary::-webkit-details-marker,
.ss-shop-manager-order > summary::-webkit-details-marker {
  display: none;
}

.ss-shop-manager-order-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 13px;
  background: rgba(255,255,255,.62);
}

.ss-shop-manager-order-group-head > span {
  display: grid;
  gap: 2px;
}

.ss-shop-manager-order-group-head strong {
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ss-shop-manager-order-group-head small {
  font-size: 8px;
  line-height: 1.35;
  opacity: .58;
}

.ss-shop-manager-order-group-head b {
  min-width: 24px;
  padding: 3px 7px;
  border: 1px solid rgba(16,40,58,.2);
  border-radius: 999px;
  text-align: center;
  font-size: 8px;
}

.ss-shop-manager-order-group-head::after {
  content: "▾";
  margin-left: 3px;
  font-size: 10px;
  opacity: .5;
  transform: rotate(-90deg);
  transition: transform .16s ease;
}

.ss-shop-manager-order-group[open] > .ss-shop-manager-order-group-head::after {
  transform: rotate(0deg);
}

.ss-shop-manager-order-group-head > b {
  margin-left: auto;
}

.ss-shop-manager-order-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  border-top: 1px solid rgba(16,40,58,.12);
}

.ss-shop-manager-order {
  align-self: start;
  overflow: hidden;
}

.ss-shop-manager-order-top {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border-bottom: 0;
}

.ss-shop-manager-order[open] > .ss-shop-manager-order-top {
  border-bottom: 1px solid rgba(16,40,58,.12);
}

.ss-shop-manager-order-summary-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.ss-shop-manager-order-summary-main > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.ss-shop-manager-order-summary-main > small {
  font-size: 8px;
  opacity: .55;
}

.ss-shop-manager-order-summary-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.ss-shop-manager-order-summary-total {
  font-size: 11px;
  white-space: nowrap;
}

.ss-shop-manager-order-chevron {
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  opacity: .45;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .16s ease;
}

.ss-shop-manager-order[open] .ss-shop-manager-order-chevron {
  transform: rotate(225deg) translate(-1px,-1px);
}

.ss-shop-manager-order-body {
  display: block;
}

/* Keep operational controls secondary to the order itself. */
.ss-shop-manager-order-actions {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 9px 12px;
  background: transparent;
  border-top: 1px solid rgba(16,40,58,.08);
}

.ss-shop-manager-order-actions select {
  min-height: 30px;
  border-color: rgba(16,40,58,.28);
  padding: 4px 7px;
  font-size: 8px;
  font-weight: 700;
}

.ss-shop-manager-order-refund {
  gap: 6px 10px;
  padding: 8px 12px;
  background: transparent;
  border-top: 1px solid rgba(16,40,58,.08);
}

.ss-shop-manager-order-refund strong {
  font-size: 8px;
  opacity: .72;
}

.ss-shop-manager-order-refund small,
.ss-shop-manager-order-actions small {
  font-size: 7px;
  opacity: .48;
}

.ss-shop-order-utility-btn,
.ss-shop-manager-order-actions .ss-shop-order-utility-btn,
.ss-shop-manager-order-refund .ss-shop-order-utility-btn {
  min-height: 0;
  padding: 3px 1px;
  border: 0;
  background: transparent;
  color: var(--ss-ink);
  font-size: 7px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: .58;
  box-shadow: none;
}

.ss-shop-order-utility-btn:hover,
.ss-shop-order-utility-btn:focus-visible,
.ss-shop-manager-order-actions .ss-shop-order-utility-btn:hover,
.ss-shop-manager-order-actions .ss-shop-order-utility-btn:focus-visible,
.ss-shop-manager-order-refund .ss-shop-order-utility-btn:hover,
.ss-shop-manager-order-refund .ss-shop-order-utility-btn:focus-visible {
  background: transparent;
  color: var(--ss-ink);
  opacity: 1;
}

/* Product/media removal links are intentionally quiet until hovered. */
.ss-shop-product-remove,
.ss-shop-image-clear,
.ss-shop-variant-delete {
  border: 0;
  background: transparent;
  color: var(--ss-ink);
  font-weight: 700;
  font-size: 7px;
  line-height: 1.25;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-transform: none;
  letter-spacing: 0;
  opacity: .5;
  cursor: pointer;
}

.ss-shop-product-remove:hover,
.ss-shop-product-remove:focus-visible,
.ss-shop-image-clear:hover,
.ss-shop-image-clear:focus-visible,
.ss-shop-variant-delete:hover,
.ss-shop-variant-delete:focus-visible {
  color: #8f2f2f;
  opacity: .95;
}

@media (max-width: 1050px) {
  .ss-shop-manager-order-group-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .ss-shop-manager-order-group-head,
  .ss-shop-manager-order-top {
    flex-direction: row;
    align-items: center;
  }

  .ss-shop-manager-order-summary-side {
    flex-wrap: wrap;
  }

  .ss-shop-manager-order-actions {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   v2.62 — Manager shell navigation + Shop revenue stream
   ========================================================== */

.ss-manager-menu-primary .ss-manager-calendar-button.active,
.ss-manager-menu-primary .ss-manager-dashboard-button.active,
.ss-manager-menu-primary .ss-manager-shop-button.active,
.ss-manager-menu-primary .ss-manager-events-button.active,
.ss-manager-menu-primary .ss-manager-promotions-button.active {
  background: var(--ss-ink) !important;
  color: var(--ss-foam) !important;
}

.ss-manager-toolbar {
  grid-template-columns: minmax(250px, auto) 130px minmax(220px, 1fr) 130px;
}

.ss-manager-toolbar .ss-manager-calendar-mode-switch {
  width: 100%;
  grid-template-columns: repeat(3, minmax(70px, 1fr));
}

@media (max-width: 900px) {
  .ss-manager-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .ss-manager-toolbar .ss-manager-calendar-mode-switch,
  .ss-manager-toolbar .ss-manager-week-label {
    grid-column: 1 / -1;
  }

  .ss-manager-toolbar .ss-manager-calendar-mode-switch {
    grid-row: auto;
  }

  .ss-manager-toolbar .ss-manager-week-label {
    grid-row: auto;
  }
}


/* ==========================================================
   v2.63 — Native Manager Events publishing
   ========================================================== */

.ss-manager-events {
  margin-top: 18px;
}

.ss-manager-events-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-end;
  padding: 22px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-sky);
}

.ss-manager-events-head h2 {
  margin: 0;
  font-size: clamp(34px, 5vw, 68px);
  line-height: .9;
  letter-spacing: -.045em;
}

.ss-manager-events-head p:not(.ss-eyebrow) {
  max-width: 720px;
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
}

.ss-manager-events-head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.ss-manager-events-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.ss-events-manager-sidebar,
.ss-events-manager-editor {
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
}

.ss-events-manager-sidebar-head,
.ss-events-manager-editor-head {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  padding: 14px 15px;
  border-bottom: 1px solid rgba(16,40,58,.18);
}

.ss-events-manager-sidebar-head span,
.ss-events-manager-editor-head span {
  display: block;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .55;
}

.ss-events-manager-sidebar-head h3,
.ss-events-manager-editor-head h3 {
  margin: 2px 0 0;
  font-size: 18px;
}

.ss-events-manager-list-group {
  border-bottom: 1px solid rgba(16,40,58,.18);
}

.ss-events-manager-list-group summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(143,210,229,.14);
  cursor: pointer;
  list-style: none;
  font-size: 9px;
  text-transform: uppercase;
}

.ss-events-manager-list-group summary::-webkit-details-marker {
  display: none;
}

.ss-events-manager-list-group summary span {
  min-width: 22px;
  text-align: right;
  opacity: .55;
}

.ss-events-manager-list-item {
  width: 100%;
  display: grid;
  gap: 2px;
  padding: 11px 12px;
  border: 0;
  border-top: 1px solid rgba(16,40,58,.11);
  background: transparent;
  color: var(--ss-ink);
  text-align: left;
  cursor: pointer;
}

.ss-events-manager-list-item:hover,
.ss-events-manager-list-item.active {
  background: rgba(143,210,229,.22);
}

.ss-events-manager-list-item strong {
  font-size: 11px;
  line-height: 1.25;
}

.ss-events-manager-list-item small,
.ss-events-manager-list-date {
  font-size: 8px;
  line-height: 1.35;
  opacity: .6;
}

.ss-events-manager-list-date {
  font-weight: 800;
  text-transform: uppercase;
}

.ss-events-manager-list-empty {
  margin: 0;
  padding: 10px 12px;
  font-size: 9px;
  opacity: .5;
}

.ss-events-manager-empty-editor {
  min-height: 420px;
  display: grid;
  place-content: center;
  gap: 5px;
  padding: 30px;
  text-align: center;
}

.ss-events-manager-empty-editor strong {
  font-size: 18px;
}

.ss-events-manager-empty-editor span {
  max-width: 430px;
  font-size: 10px;
  line-height: 1.45;
  opacity: .6;
}

.ss-events-manager-editor-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ss-events-manager-archive,
.ss-events-manager-delete,
.ss-events-image-clear {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ss-ink);
  font-size: 9px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .54;
  cursor: pointer;
}

.ss-events-manager-archive:hover,
.ss-events-manager-archive:focus-visible,
.ss-events-manager-delete:hover,
.ss-events-manager-delete:focus-visible,
.ss-events-image-clear:hover,
.ss-events-image-clear:focus-visible {
  color: #8f2f2f;
  opacity: .95;
}

.ss-events-manager-form-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  padding: 16px;
}

.ss-events-manager-form-grid label {
  display: grid;
  align-content: start;
  gap: 5px;
}

.ss-events-manager-form-grid label.is-wide {
  grid-column: 1 / -1;
}

.ss-events-manager-form-grid label > span {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .6;
}

.ss-events-manager-form-grid label > span small,
.ss-events-manager-form-grid label > small {
  font-size: 8px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: none;
  opacity: .66;
}

.ss-events-manager-form-grid input,
.ss-events-manager-form-grid select,
.ss-events-manager-form-grid textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(16,40,58,.32);
  border-radius: 0;
  background: #fff;
  color: var(--ss-ink);
  font: inherit;
  font-size: 11px;
}

.ss-events-manager-form-grid textarea {
  min-height: 180px;
  line-height: 1.5;
  resize: vertical;
}

.ss-events-image-field {
  display: grid;
  gap: 9px;
}

.ss-events-image-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.ss-events-image-preview {
  width: min(100%, 420px);
  border: 1px solid rgba(16,40,58,.2);
  background: var(--ss-foam);
}

.ss-events-image-preview img {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
}

.ss-events-manager-note {
  display: grid;
  gap: 4px;
  margin: 0 16px 16px;
  padding: 12px 14px;
  border-left: 3px solid var(--ss-sea);
  background: rgba(143,210,229,.13);
}

.ss-events-manager-note strong {
  font-size: 10px;
}

.ss-events-manager-note span {
  font-size: 9px;
  line-height: 1.45;
  opacity: .7;
}

@media (max-width: 900px) {
  .ss-manager-events-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .ss-manager-events-head-actions {
    justify-content: flex-start;
  }

  .ss-manager-events-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .ss-events-manager-form-grid {
    grid-template-columns: 1fr;
  }

  .ss-events-manager-form-grid label.is-wide {
    grid-column: auto;
  }

  .ss-events-manager-editor-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .ss-events-manager-editor-actions {
    width: 100%;
    justify-content: space-between;
  }
}

/* ==========================================================
   EVENTS — native Southsea Sound ticketing v2.64
   ========================================================== */
.ss-events-ticketing-fields{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  padding:18px;
  border:1px solid rgba(20,30,38,.14);
  background:rgba(255,255,255,.38);
}
.ss-events-ticketing-fields[hidden]{display:none!important}
.ss-events-ticketing-summary{grid-column:1/-1;display:flex;flex-direction:column;gap:4px;padding-top:4px}
.ss-events-ticketing-summary span{font-size:13px;opacity:.68}
.ss-event-ticket-availability{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.7}
.ss-event-soldout-pill{display:inline-flex;padding:9px 13px;border:1px solid currentColor;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:12px}
.ss-event-ticket-section{padding:72px 0;background:#f2eadc}
.ss-event-ticket-layout{display:grid;grid-template-columns:minmax(0,.75fr) minmax(360px,1fr);gap:56px;align-items:start}
.ss-event-ticket-intro h2{font-size:clamp(42px,6vw,82px);line-height:.88;margin:12px 0 24px}
.ss-event-ticket-intro>p:not(.ss-eyebrow){max-width:560px;font-size:18px;line-height:1.55}
.ss-event-ticket-statline{display:flex;align-items:baseline;gap:12px;margin-top:28px}
.ss-event-ticket-statline strong{font-size:42px;line-height:1}
.ss-event-ticket-statline span{font-weight:700}
.ss-event-ticket-panel{background:#fff;padding:28px;border:1px solid rgba(20,30,38,.13);box-shadow:0 16px 40px rgba(20,30,38,.07)}
.ss-event-ticket-form{display:grid;gap:16px}
.ss-event-ticket-form label{display:grid;gap:7px;font-weight:700}
.ss-event-ticket-form input,.ss-event-ticket-form select{width:100%;min-height:48px;border:1px solid rgba(20,30,38,.22);background:#fff;padding:10px 12px;font:inherit}
.ss-event-ticket-total-line{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:16px;border-bottom:1px solid rgba(20,30,38,.12)}
.ss-event-ticket-total-line strong{font-size:28px}
.ss-event-ticket-stripe{display:grid;gap:18px;padding:18px;border:1px solid rgba(20,30,38,.13);background:#faf8f3}
.ss-event-ticket-stripe[hidden]{display:none!important}
.ss-event-ticket-message{margin:0;font-size:13px;opacity:.74}
.ss-event-ticket-message.is-error{font-weight:700;opacity:1}
.ss-event-ticket-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.ss-event-ticket-soldout,.ss-event-ticket-confirmation{display:grid;gap:8px}
.ss-event-ticket-soldout strong,.ss-event-ticket-confirmation strong{font-size:30px}
.ss-event-ticket-confirmation>span{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
@media (max-width:800px){
  .ss-event-ticket-layout{grid-template-columns:1fr;gap:30px}
  .ss-events-ticketing-fields{grid-template-columns:1fr}
}
#eventsExternalTicketField[hidden],#eventsPriceLabelField[hidden]{display:none!important}


/* ==========================================================
   EVENTS — attendee / door list v2.65
   ========================================================== */
.ss-events-attendee-list{grid-column:1/-1;margin-top:8px;border-top:1px solid rgba(16,40,58,.16);padding-top:10px}
.ss-events-attendee-list[hidden]{display:none!important}
.ss-events-attendee-list summary{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;list-style:none;padding:8px 0;font-size:11px}
.ss-events-attendee-list summary::-webkit-details-marker{display:none}
.ss-events-attendee-list summary span{font-size:9px;font-weight:700;opacity:.58}
.ss-events-attendee-list-body{display:grid;border-top:1px solid rgba(16,40,58,.12)}
.ss-events-attendee-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(145px,.7fr) auto;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid rgba(16,40,58,.1)}
.ss-events-attendee-person,.ss-events-attendee-booking{display:grid;gap:3px;min-width:0}
.ss-events-attendee-person strong,.ss-events-attendee-booking strong{font-size:10px}
.ss-events-attendee-person span,.ss-events-attendee-booking span{font-size:9px;line-height:1.35;opacity:.62;overflow-wrap:anywhere}
.ss-events-attendee-mail{font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;opacity:.5;white-space:nowrap}
.ss-events-attendee-mail.is-sent{opacity:.68}
.ss-events-attendee-mail.is-failed{color:#8f2f2f;opacity:.9}
.ss-events-attendee-empty{margin:0;padding:12px 0;font-size:9px;opacity:.55}
@media(max-width:700px){.ss-events-attendee-row{grid-template-columns:1fr}.ss-events-attendee-mail{white-space:normal}}

/* Event cancellation + manual refunds — v2.67 */
.ss-events-manager-cancel {
  appearance:none;
  padding:0;
  border:0;
  background:none;
  color:#8f2f2f;
  font-size:9px;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
  opacity:.62;
  cursor:pointer;
}
.ss-events-manager-cancel:hover,.ss-events-manager-cancel:focus-visible{opacity:1}
.ss-events-cancellation-summary{grid-column:1/-1;display:grid;gap:4px;margin-top:6px;padding:11px 12px;border-left:3px solid #8f2f2f;background:rgba(143,47,47,.07)}
.ss-events-cancellation-summary[hidden]{display:none!important}
.ss-events-cancellation-summary strong{font-size:10px}
.ss-events-cancellation-summary span{font-size:9px;line-height:1.45;opacity:.72}
.ss-events-attendee-row{grid-template-columns:minmax(0,1.2fr) minmax(130px,.62fr) minmax(110px,.48fr) minmax(130px,.62fr)}
.ss-events-attendee-row.is-refunded{opacity:.58}
.ss-events-attendee-mail-stack,.ss-events-refund-controls{display:grid;gap:5px;justify-items:start}
.ss-events-refund-action{appearance:none;padding:0;border:0;background:none;color:var(--ss-ink);font-size:8px;font-weight:800;text-decoration:underline;text-underline-offset:3px;opacity:.62;cursor:pointer;text-align:left}
.ss-events-refund-action:hover,.ss-events-refund-action:focus-visible{opacity:1;color:#8f2f2f}
.ss-events-refund-state{display:inline-flex;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.ss-events-refund-state.is-required{color:#8f2f2f}
.ss-events-refund-state.is-refunded{opacity:.72}
.ss-event-cancelled-pill{display:inline-flex;padding:9px 13px;border:1px solid #8f2f2f;color:#8f2f2f;font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:12px}
.ss-event-ticket-section--cancelled .ss-event-ticket-panel{border-color:rgba(143,47,47,.35)}
@media(max-width:900px){.ss-events-attendee-row{grid-template-columns:1fr 1fr}.ss-events-refund-controls{justify-items:start}}
@media(max-width:700px){.ss-events-attendee-row{grid-template-columns:1fr}}

/* ==========================================================
   v2.68 — Native Manager Blog publishing
   ========================================================== */
.ss-manager-menu-primary .ss-manager-blog-button.active{
  background:var(--ss-ink)!important;
  color:var(--ss-foam)!important;
}
.ss-manager-blog{margin-top:18px}
.ss-manager-blog-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;padding:22px;border:2px solid var(--ss-ink);background:var(--ss-sky)}
.ss-manager-blog-head h2{margin:0;font-size:clamp(34px,5vw,68px);line-height:.9;letter-spacing:-.045em}
.ss-manager-blog-head p:not(.ss-eyebrow){max-width:720px;margin:10px 0 0;font-size:11px;line-height:1.5}
.ss-manager-blog-head-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px}
.ss-manager-blog-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px;margin-top:18px}
.ss-blog-manager-sidebar,.ss-blog-manager-editor{border:2px solid var(--ss-ink);background:var(--ss-paper)}
.ss-blog-manager-sidebar-head,.ss-blog-manager-editor-head{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:14px 15px;border-bottom:1px solid rgba(16,40,58,.18)}
.ss-blog-manager-sidebar-head span,.ss-blog-manager-editor-head span{display:block;font-size:8px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;opacity:.55}
.ss-blog-manager-sidebar-head h3,.ss-blog-manager-editor-head h3{margin:2px 0 0;font-size:18px}
.ss-blog-manager-list-group{border-bottom:1px solid rgba(16,40,58,.18)}
.ss-blog-manager-list-group summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;background:rgba(143,210,229,.14);cursor:pointer;list-style:none;font-size:9px;text-transform:uppercase}
.ss-blog-manager-list-group summary::-webkit-details-marker{display:none}
.ss-blog-manager-list-group summary span{min-width:22px;text-align:right;opacity:.55}
.ss-blog-manager-list-item{width:100%;display:grid;gap:2px;padding:11px 12px;border:0;border-top:1px solid rgba(16,40,58,.11);background:transparent;color:var(--ss-ink);text-align:left;cursor:pointer}
.ss-blog-manager-list-item:hover,.ss-blog-manager-list-item.active{background:rgba(143,210,229,.22)}
.ss-blog-manager-list-item strong{font-size:11px;line-height:1.25}
.ss-blog-manager-list-item small,.ss-blog-manager-list-date{font-size:8px;line-height:1.35;opacity:.6}
.ss-blog-manager-list-date{font-weight:800;text-transform:uppercase}
.ss-blog-manager-list-empty{margin:0;padding:10px 12px;font-size:9px;opacity:.5}
.ss-blog-manager-empty-editor{min-height:420px;display:grid;place-content:center;gap:5px;padding:30px;text-align:center}
.ss-blog-manager-empty-editor strong{font-size:18px}
.ss-blog-manager-empty-editor span{max-width:430px;font-size:10px;line-height:1.45;opacity:.6}
.ss-blog-manager-editor-actions{display:flex;align-items:center;gap:12px}
.ss-blog-manager-archive,.ss-blog-manager-delete,.ss-blog-image-clear{appearance:none;padding:0;border:0;background:none;color:var(--ss-ink);font-size:9px;font-weight:800;text-decoration:underline;text-underline-offset:3px;opacity:.54;cursor:pointer}
.ss-blog-manager-archive:hover,.ss-blog-manager-archive:focus-visible,.ss-blog-manager-delete:hover,.ss-blog-manager-delete:focus-visible,.ss-blog-image-clear:hover,.ss-blog-image-clear:focus-visible{color:#8f2f2f;opacity:.95}
.ss-blog-manager-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px}
.ss-blog-manager-form-grid label,.ss-blog-editor-field{display:grid;align-content:start;gap:5px}
.ss-blog-manager-form-grid .is-wide{grid-column:1/-1}
.ss-blog-manager-form-grid label>span,.ss-blog-editor-field>span{font-size:8px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;opacity:.6}
.ss-blog-manager-form-grid label>span small{font-size:8px;font-weight:500;line-height:1.4;text-transform:none;opacity:.66}
.ss-blog-manager-form-grid input,.ss-blog-manager-form-grid select,.ss-blog-manager-form-grid textarea{width:100%;min-height:40px;padding:8px 10px;border:1px solid rgba(16,40,58,.32);border-radius:0;background:#fff;color:var(--ss-ink);font:inherit;font-size:11px}
.ss-blog-manager-form-grid textarea{line-height:1.5;resize:vertical}
.ss-blog-image-field{display:grid;gap:9px}
.ss-blog-image-actions{display:flex;gap:12px;align-items:center}
.ss-blog-image-preview{width:min(100%,420px);border:1px solid rgba(16,40,58,.2);background:var(--ss-foam)}
.ss-blog-image-preview img{width:100%;max-height:260px;object-fit:cover}
.ss-blog-editor-field .wp-editor-wrap{width:100%}
.ss-blog-editor-field .wp-editor-container{border:1px solid rgba(16,40,58,.32)}
.ss-blog-editor-field .mce-tinymce,.ss-blog-editor-field .quicktags-toolbar{box-shadow:none!important;border:0!important}
.ss-blog-manager-note{display:grid;gap:4px;margin:0 16px 16px;padding:12px 14px;border-left:3px solid var(--ss-sea);background:rgba(143,210,229,.13)}
.ss-blog-manager-note strong{font-size:10px}.ss-blog-manager-note span{font-size:9px;line-height:1.45;opacity:.7}
@media(max-width:900px){.ss-manager-blog-head{align-items:flex-start;flex-direction:column}.ss-manager-blog-head-actions{justify-content:flex-start}.ss-manager-blog-layout{grid-template-columns:1fr}}
@media(max-width:650px){.ss-blog-manager-form-grid{grid-template-columns:1fr}.ss-blog-manager-form-grid .is-wide{grid-column:auto}.ss-blog-manager-editor-head{align-items:flex-start;flex-direction:column}.ss-blog-manager-editor-actions{width:100%;justify-content:space-between}}


/* =========================================================
   v2.68.1 — Blog imagery: show the full uploaded image
   Keep editorial frames tidy without cropping posters/photos.
   ========================================================= */
.ss-blog-art {
  background: var(--ss-foam);
}
.ss-blog-art img {
  object-fit: contain;
  background: var(--ss-foam);
}
.ss-blog-card-link:hover .ss-blog-art img {
  transform: none;
}
.ss-blog-single-feature {
  background: var(--ss-foam);
}
.ss-blog-single-feature img {
  object-fit: contain !important;
}
.ss-blog-image-preview {
  background: var(--ss-foam);
}
.ss-blog-image-preview img {
  height: auto;
  max-height: 320px;
  object-fit: contain;
  display: block;
}


/* ==========================================================
   v2.69 — Manager UX tidy
   ========================================================== */

/* The Manager shell is a compact app header, not another content hero. */
.ss-manager-prototype .ss-manager-staging-note {
  width: fit-content;
  max-width: 100%;
  margin-bottom: 16px;
  padding: 7px 10px;
  gap: 8px;
  align-items: center;
  border-color: rgba(16,40,58,.18);
  background: rgba(255,255,255,.48);
  color: rgba(16,40,58,.72);
  font-size: 9px;
}
.ss-manager-prototype .ss-manager-staging-note strong {
  font-size: 8px;
  color: #8f2f2f;
  letter-spacing: .08em;
}

.ss-manager-prototype .ss-manager-shell-head {
  margin-bottom: 22px;
  align-items: flex-end;
  gap: 26px;
}
.ss-manager-prototype .ss-manager-shell-head h1 {
  font-size: clamp(46px, 6vw, 78px);
  line-height: .82;
}
.ss-manager-prototype .ss-manager-shell-head p:not(.ss-eyebrow) {
  max-width: 620px;
  margin-top: 12px;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.45;
}
.ss-manager-shell-actions {
  display: grid;
  justify-items: end;
  gap: 9px;
}

/* Primary navigation reads as one quiet tab rail rather than seven CTAs. */
.ss-manager-menu-primary {
  gap: 0;
  padding: 3px;
  border: 1px solid rgba(16,40,58,.3);
  background: rgba(255,255,255,.45);
}
.ss-manager-menu-primary .ss-btn {
  min-height: 36px;
  padding: 8px 11px;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 9px;
  letter-spacing: .02em;
}
.ss-manager-menu-primary .ss-btn:hover,
.ss-manager-menu-primary .ss-btn:focus-visible {
  background: rgba(143,210,229,.24);
}
.ss-manager-menu-primary .ss-btn.active {
  background: var(--ss-ink) !important;
  color: var(--ss-foam) !important;
}

/* Contextual action + utility links. Email previews are useful, not a section. */
.ss-manager-menu-secondary {
  gap: 12px;
}
.ss-manager-menu-secondary #managerAddBookingBtn {
  min-height: 34px;
  padding: 7px 11px;
  font-size: 9px;
}
.ss-manager-utility-link {
  color: var(--ss-ink);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .52;
}
.ss-manager-utility-link:hover,
.ss-manager-utility-link:focus-visible {
  opacity: 1;
}
.ss-manager-email-preview-link::before {
  content: "Utility · ";
  font-weight: 500;
  opacity: .7;
}

/* Calendar controls only appear once Calendar is selected. */
.ss-manager-toolbar {
  margin-top: 4px;
}

@media (max-width: 1100px) {
  .ss-manager-prototype .ss-manager-shell-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .ss-manager-shell-actions,
  .ss-manager-menu-primary,
  .ss-manager-menu-secondary {
    width: 100%;
    justify-items: start;
    justify-content: flex-start;
  }
  .ss-manager-menu-primary {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .ss-manager-menu-primary .ss-btn {
    flex: 0 0 auto;
  }
}

@media (max-width: 650px) {
  .ss-manager-prototype .ss-manager-shell-head h1 {
    font-size: 48px;
  }
  .ss-manager-menu-primary {
    width: 100%;
  }
  .ss-manager-menu-secondary {
    align-items: center;
  }
}


/* Secondary refresh actions should not compete with create/save actions. */
.ss-manager-subtle-action,
.ss-manager-prototype button.ss-manager-subtle-action {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ss-ink);
  box-shadow: none;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .52;
  cursor: pointer;
}
.ss-manager-subtle-action:hover,
.ss-manager-subtle-action:focus-visible,
.ss-manager-prototype button.ss-manager-subtle-action:hover,
.ss-manager-prototype button.ss-manager-subtle-action:focus-visible {
  background: transparent;
  color: var(--ss-ink);
  opacity: 1;
}
@media (max-width: 800px) {
  .ss-manager-menu-secondary .ss-manager-utility-link {
    flex: 0 0 auto;
    text-align: left;
  }
}


/* ==========================================================
   v2.70 — Shop order group polish
   ========================================================== */

.ss-shop-manager-order-group {
  border-color: rgba(16,40,58,.16);
  border-radius: 3px;
  overflow: hidden;
}

.ss-shop-manager-order-group-head {
  min-height: 58px;
  padding: 14px 16px;
  background: rgba(255,255,255,.58);
}

.ss-shop-manager-order-group-head strong {
  font-size: 12px;
  letter-spacing: .035em;
}

.ss-shop-manager-order-group-head small {
  margin-top: 2px;
  font-size: 9.5px;
  line-height: 1.4;
  opacity: .62;
}

.ss-shop-manager-order-group-head b {
  min-width: 28px;
  padding: 4px 8px;
  font-size: 9.5px;
  background: rgba(255,255,255,.36);
}

.ss-shop-manager-order-group.is-attention {
  border-color: rgba(141,75,75,.22);
}
.ss-shop-manager-order-group.is-attention > .ss-shop-manager-order-group-head {
  background: rgba(171,101,101,.095);
}

.ss-shop-manager-order-group.is-current {
  border-color: rgba(71,105,126,.18);
}
.ss-shop-manager-order-group.is-current > .ss-shop-manager-order-group-head {
  background: rgba(91,126,148,.07);
}

.ss-shop-manager-order-group.is-dispatched {
  border-color: rgba(74,122,91,.19);
}
.ss-shop-manager-order-group.is-dispatched > .ss-shop-manager-order-group-head {
  background: rgba(91,137,105,.095);
}

.ss-shop-manager-order-group.is-refunded {
  border-color: rgba(80,88,94,.14);
}
.ss-shop-manager-order-group.is-refunded > .ss-shop-manager-order-group-head {
  background: rgba(86,94,100,.055);
}


/* ==========================================================
   v2.70.2 — Calendar action placement + event delete clarity
   ========================================================== */

.ss-manager-calendar-subhead {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-end;
  margin-top: 18px;
  padding: 22px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-sky);
}
.ss-manager-calendar-subhead[hidden] {
  display: none !important;
}
.ss-manager-calendar-subhead h2 {
  margin: 0;
  font-size: clamp(34px, 5vw, 68px);
  line-height: .9;
  letter-spacing: -.045em;
}
.ss-manager-calendar-subhead p:not(.ss-eyebrow) {
  max-width: 720px;
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
}

.ss-manager-promotions {
  padding-top: 18px;
}
.ss-manager-promotions-head {
  align-items: flex-end;
  padding: 22px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-sky);
}
.ss-manager-promotions-safety {
  background: var(--ss-ink);
  color: var(--ss-foam);
}

@media (max-width: 900px) {
  .ss-manager-calendar-subhead,
  .ss-manager-promotions-head {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* ==========================================================
   v2.70.2 — Calendar action placement + event delete clarity
   ========================================================== */
.ss-manager-calendar-subhead-actions {
  display: flex;
  align-items: center;
  align-self: center;
  flex: 0 0 auto;
}
.ss-manager-calendar-subhead-actions .ss-btn {
  white-space: nowrap;
}
.ss-events-manager-delete-hint {
  max-width: 180px;
  font-size: 9px;
  line-height: 1.35;
  font-weight: 700;
  opacity: .52;
}
@media (max-width: 900px) {
  .ss-manager-calendar-subhead-actions {
    align-self: flex-start;
  }
}


/* ==========================================================
   v2.71 — Booking manual refunds + cancelled booking admin
   ========================================================== */
.ss-manager-booking-refund {
  margin-top: 2px;
  display: grid;
  gap: 4px;
  justify-items: end;
}

.ss-manager-booking-refund > div {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ss-manager-booking-refund strong {
  font-size: 9px;
  text-transform: uppercase;
}

.ss-manager-booking-refund small {
  max-width: 260px;
  font-size: 9px;
  line-height: 1.3;
  opacity: .55;
}

.ss-manager-refund-btn {
  padding: 3px 1px;
  border: 0;
  border-bottom: 1px solid rgba(16,40,58,.28);
  background: transparent;
  color: rgba(16,40,58,.7);
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.ss-manager-refund-btn:hover {
  color: var(--ss-ink);
  border-bottom-color: var(--ss-ink);
}

.ss-manager-booking-refund.is-required strong,
.ss-manager-status--refund {
  color: #815048;
}

.ss-manager-booking-refund.is-refunded strong {
  color: #4f705a;
}

.ss-manager-booking-row.is-refunded {
  opacity: .72;
}

.ss-manager-booking-row.is-cancelled {
  --booking-accent: rgba(16,40,58,.25);
  background: rgba(16,40,58,.025);
}

.ss-manager-status--cancelled {
  color: rgba(16,40,58,.6);
  border-color: rgba(16,40,58,.16);
}

.ss-manager-cancelled-at {
  display: block;
  margin-top: 6px;
  font-size: 9px;
  opacity: .48;
}

.ss-manager-cancelled-bookings {
  margin-top: 26px;
  border-top: 1px solid rgba(16,40,58,.14);
}

.ss-manager-cancelled-bookings > summary {
  padding: 14px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  color: rgba(16,40,58,.66);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.ss-manager-cancelled-bookings > summary::-webkit-details-marker { display: none; }
.ss-manager-cancelled-bookings > summary::before { content: '＋'; margin-right: 7px; }
.ss-manager-cancelled-bookings[open] > summary::before { content: '−'; }
.ss-manager-cancelled-bookings > summary span {
  margin-left: auto;
  padding: 2px 7px;
  border: 1px solid rgba(16,40,58,.14);
  font-size: 9px;
}

@media (max-width: 900px) {
  .ss-manager-booking-refund,
  .ss-manager-booking-refund > div { justify-items: start; justify-content: flex-start; }
}


/* v2.72.4 — quiet database transaction health indicator */
.ss-manager-system-check{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:18px 0 12px;
  padding:9px 12px;
  border:1px solid rgba(20,55,70,.14);
  border-radius:10px;
  background:rgba(236,247,250,.42);
  font-size:.82rem;
  color:rgba(24,43,51,.72);
}
.ss-manager-system-check strong{font-weight:700;color:rgba(24,43,51,.88)}
.ss-manager-system-check.is-warning{
  border-color:rgba(150,82,55,.24);
  background:rgba(250,242,238,.55);
}
@media(max-width:700px){
  .ss-manager-system-check{align-items:flex-start;flex-direction:column;gap:3px}
}


/* v2.72.6 — runtime health: keep paired system checks compact */
.ss-manager-system-check + .ss-manager-system-check{
  margin-top:-6px;
}


/* ==========================================================
 * v2.72.8 — Grrls to the Front recurring-event feature
 * ========================================================== */
.ss-gttf-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(22px, 4vw, 56px);
  align-items: center;
  margin: 0 0 clamp(28px, 5vw, 56px);
  padding: clamp(24px, 4vw, 48px);
  color: var(--ss-foam);
  background:
    linear-gradient(115deg, rgba(16,40,58,.98), rgba(23,59,82,.95)),
    var(--ss-ink);
  border: 1px solid rgba(143,210,229,.42);
  text-decoration: none;
  box-shadow: 0 18px 48px rgba(16,40,58,.14);
  position: relative;
  overflow: hidden;
}
.ss-gttf-feature::after {
  content: "GTTF";
  position: absolute;
  right: clamp(18px, 4vw, 54px);
  bottom: -0.22em;
  font-size: clamp(74px, 13vw, 190px);
  line-height: .75;
  font-weight: 900;
  letter-spacing: -.07em;
  color: rgba(143,210,229,.075);
  pointer-events: none;
}
.ss-gttf-feature-copy,
.ss-gttf-feature-action { position: relative; z-index: 1; }
.ss-gttf-feature-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--ss-sky);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ss-gttf-feature h2 {
  margin: 0 0 10px;
  color: var(--ss-paper);
  font-size: clamp(30px, 4vw, 58px);
  line-height: .94;
  letter-spacing: -.04em;
}
.ss-gttf-feature p {
  max-width: 780px;
  margin: 0;
  color: rgba(255,253,247,.82);
  font-size: clamp(15px, 1.45vw, 19px);
  line-height: 1.55;
}
.ss-gttf-feature-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  color: var(--ss-paper);
  font-weight: 800;
  border-bottom: 2px solid var(--ss-sky);
  padding-bottom: 5px;
}
.ss-gttf-feature:hover .ss-gttf-feature-action,
.ss-gttf-feature:focus-visible .ss-gttf-feature-action { color: var(--ss-sky); }

.ss-gttf-page-hero {
  padding: clamp(72px, 10vw, 150px) 0 clamp(56px, 8vw, 110px);
  background: var(--ss-ink);
  color: var(--ss-paper);
  overflow: hidden;
  position: relative;
}
.ss-gttf-page-hero::after {
  content: "GTTF";
  position: absolute;
  right: -0.05em;
  bottom: -.17em;
  font-weight: 900;
  font-size: clamp(120px, 28vw, 430px);
  line-height: .75;
  letter-spacing: -.08em;
  color: rgba(143,210,229,.06);
  pointer-events: none;
}
.ss-gttf-page-hero .ss-wrap { position: relative; z-index: 1; }
.ss-gttf-page-hero .ss-eyebrow { color: var(--ss-sky); }
.ss-gttf-page-title {
  max-width: 1050px;
  margin: 0 0 24px;
  color: var(--ss-paper);
  font-size: clamp(58px, 10vw, 154px);
  line-height: .78;
  letter-spacing: -.065em;
}
.ss-gttf-page-lead {
  max-width: 850px;
  margin: 0;
  color: rgba(255,253,247,.84);
  font-size: clamp(19px, 2.2vw, 30px);
  line-height: 1.35;
}
.ss-gttf-page-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(34px, 7vw, 110px);
  align-items: start;
}
.ss-gttf-page-grid + .ss-gttf-page-grid { margin-top: clamp(56px, 8vw, 100px); }
.ss-gttf-page-number {
  display: block;
  margin-bottom: 10px;
  color: var(--ss-sea);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ss-gttf-page-grid h2 {
  margin: 0;
  font-size: clamp(34px, 5vw, 68px);
  line-height: .92;
  letter-spacing: -.045em;
}
.ss-gttf-page-copy p,
.ss-gttf-page-copy li {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
}
.ss-gttf-page-copy p:first-child { margin-top: 0; }
.ss-gttf-page-copy ul { padding-left: 1.2em; }
.ss-gttf-next {
  margin-top: clamp(60px, 9vw, 120px);
  padding: clamp(30px, 5vw, 62px);
  background: var(--ss-sky);
  border: 1px solid rgba(16,40,58,.14);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
}
.ss-gttf-next h2 {
  margin: 0 0 8px;
  font-size: clamp(30px, 4vw, 58px);
  line-height: .95;
  letter-spacing: -.04em;
}
.ss-gttf-next p { margin: 0; max-width: 720px; }

@media (max-width: 760px) {
  .ss-gttf-feature,
  .ss-gttf-next,
  .ss-gttf-page-grid { grid-template-columns: 1fr; }
  .ss-gttf-feature-action { justify-self: start; }
  .ss-gttf-page-title { font-size: clamp(54px, 20vw, 92px); }
}

/* ==========================================================
 * v2.72.9 — Grrls to the Front full current-theme page
 * ========================================================== */
.ss-gttf-page-hero--full {
  min-height: min(760px, 82vh);
  display: flex;
  align-items: flex-end;
  padding-top: clamp(110px, 13vw, 190px);
}
.ss-gttf-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin-top: 34px;
}
.ss-btn--light {
  background: var(--ss-paper);
  color: var(--ss-ink);
  border-color: var(--ss-paper);
}
.ss-btn--light:hover,
.ss-btn--light:focus-visible {
  background: var(--ss-sky);
  border-color: var(--ss-sky);
  color: var(--ss-ink);
}
.ss-gttf-text-link {
  color: var(--ss-paper);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,253,247,.52);
  padding-bottom: 3px;
}
.ss-gttf-facts {
  background: var(--ss-sky);
  border-bottom: 1px solid rgba(16,40,58,.18);
}
.ss-gttf-facts-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
}
.ss-gttf-facts-grid > div {
  padding: 22px clamp(12px, 2vw, 28px);
  border-right: 1px solid rgba(16,40,58,.18);
}
.ss-gttf-facts-grid > div:first-child { border-left: 1px solid rgba(16,40,58,.18); }
.ss-gttf-facts-grid span {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .72;
}
.ss-gttf-facts-grid strong {
  display: block;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.2;
}
.ss-gttf-page-copy--large p { font-size: clamp(18px, 1.75vw, 23px); }
.ss-gttf-dark-section {
  background: var(--ss-ink);
  color: var(--ss-paper);
}
.ss-gttf-dark-section .ss-gttf-page-number { color: var(--ss-sky); }
.ss-gttf-dark-section .ss-gttf-page-copy { color: rgba(255,253,247,.86); }
.ss-gttf-check-list {
  list-style: none;
  padding: 0 !important;
  margin: 28px 0 0;
}
.ss-gttf-check-list li {
  position: relative;
  padding: 15px 0 15px 32px;
  border-top: 1px solid rgba(255,253,247,.18);
}
.ss-gttf-check-list li:last-child { border-bottom: 1px solid rgba(255,253,247,.18); }
.ss-gttf-check-list li::before {
  content: "+";
  position: absolute;
  left: 4px;
  top: 13px;
  color: var(--ss-sky);
  font-size: 20px;
  font-weight: 900;
}
.ss-gttf-detail-card {
  margin-bottom: 28px;
  border-top: 2px solid var(--ss-ink);
}
.ss-gttf-detail-card dl { margin: 0; }
.ss-gttf-detail-card dl > div {
  display: grid;
  grid-template-columns: minmax(100px,.32fr) minmax(0,1fr);
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--ss-line);
}
.ss-gttf-detail-card dt {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ss-gttf-detail-card dd { margin: 0; }
.ss-gttf-el-section {
  background: var(--ss-paper) !important;
}
.ss-gttf-el-profile {
  display: grid;
  grid-template-columns: minmax(240px, 360px) minmax(0,1fr);
  gap: clamp(26px, 4vw, 44px);
  align-items: start;
}
.ss-gttf-el-photo-frame {
  position: relative;
  isolation: isolate;
  margin: 0 14px 14px 0;
}
.ss-gttf-el-photo-frame::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 12px;
  top: 12px;
  width: 100%;
  height: 100%;
  background: var(--ss-sea);
  pointer-events: none;
}
.ss-gttf-el-photo-frame img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 5px solid var(--ss-ink);
  box-shadow: none;
  background: #fff;
}
.ss-gttf-quotes-section {
  background: var(--ss-paper);
}
.ss-gttf-section-head {
  max-width: 900px;
  margin-bottom: clamp(36px, 6vw, 72px);
}
.ss-gttf-section-head h2 {
  margin: 0;
  font-size: clamp(42px, 7vw, 94px);
  line-height: .88;
  letter-spacing: -.055em;
}
.ss-gttf-quotes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  border-top: 1px solid var(--ss-line);
  border-left: 1px solid var(--ss-line);
}
.ss-gttf-quote {
  margin: 0;
  min-height: 220px;
  padding: clamp(26px, 4vw, 54px);
  display: flex;
  align-items: flex-end;
  border-right: 1px solid var(--ss-line);
  border-bottom: 1px solid var(--ss-line);
}
.ss-gttf-quote p {
  margin: 0;
  max-width: 600px;
  font-size: clamp(25px, 3.4vw, 48px);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 800;
}
.ss-gttf-award-strip {
  padding: clamp(54px, 8vw, 100px) 0;
  background: var(--ss-sea);
  color: var(--ss-paper);
}
.ss-gttf-award-grid {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: clamp(28px, 6vw, 80px);
  align-items: center;
}
.ss-gttf-award-mark {
  font-size: clamp(72px, 11vw, 150px);
  line-height: 1;
  color: var(--ss-sky);
}
.ss-gttf-award-grid .ss-gttf-page-number { color: var(--ss-paper); opacity: .72; }
.ss-gttf-award-grid h2 {
  margin: 0 0 12px;
  font-size: clamp(32px, 5vw, 68px);
  line-height: .92;
  letter-spacing: -.045em;
}
.ss-gttf-award-grid p {
  max-width: 820px;
  margin: 0;
  font-size: clamp(16px, 1.5vw, 20px);
}
.ss-gttf-social-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  margin-top: 28px;
  border-top: 1px solid var(--ss-line);
  border-left: 1px solid var(--ss-line);
}
.ss-gttf-social-grid a {
  min-height: 125px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--ss-line);
  border-bottom: 1px solid var(--ss-line);
  text-decoration: none;
  transition: background .2s ease;
}
.ss-gttf-social-grid a:hover,
.ss-gttf-social-grid a:focus-visible { background: var(--ss-sky); }
.ss-gttf-social-grid span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .68;
}
.ss-gttf-social-grid strong { font-size: clamp(16px, 1.6vw, 21px); }
.ss-gttf-inclusivity {
  padding: clamp(72px, 11vw, 160px) 0;
  background: var(--ss-ink);
  color: var(--ss-paper);
}
.ss-gttf-inclusivity-inner { max-width: 1040px; }
.ss-gttf-inclusivity .ss-gttf-page-number { color: var(--ss-sky); }
.ss-gttf-inclusivity h2 {
  margin: 0 0 22px;
  font-size: clamp(44px, 8vw, 108px);
  line-height: .86;
  letter-spacing: -.055em;
}
.ss-gttf-inclusivity p {
  max-width: 820px;
  color: rgba(255,253,247,.82);
  font-size: clamp(18px, 1.8vw, 24px);
}
.ss-gttf-inclusivity .ss-actions { margin-top: 34px; }

@media (max-width: 900px) {
  .ss-gttf-facts-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ss-gttf-facts-grid > div:nth-child(odd) { border-left: 1px solid rgba(16,40,58,.18); }
  .ss-gttf-quotes-grid,
  .ss-gttf-social-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .ss-gttf-page-hero--full { min-height: auto; }
  .ss-gttf-facts-grid { grid-template-columns: 1fr; }
  .ss-gttf-facts-grid > div { border-left: 1px solid rgba(16,40,58,.18); }
  .ss-gttf-detail-card dl > div { grid-template-columns: 1fr; gap: 4px; }
  .ss-gttf-award-grid { grid-template-columns: 1fr; }
  .ss-gttf-award-mark { font-size: 72px; }
  .ss-gttf-quote { min-height: 160px; }
}


/* ==========================================================
 * v2.72.10 — GTTF artwork-led Events banner + page hero
 * ========================================================== */
.ss-gttf-feature {
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, .72fr);
  gap: 0;
  min-height: clamp(330px, 30vw, 430px);
  padding: 0;
  background: #0d1012;
  border: 0;
  box-shadow: 0 20px 55px rgba(16,40,58,.16);
  isolation: isolate;
  transition: transform .22s ease, box-shadow .22s ease;
}
.ss-gttf-feature::after { display: none; }
.ss-gttf-feature:hover,
.ss-gttf-feature:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 26px 68px rgba(16,40,58,.21);
}
.ss-gttf-feature-art {
  position: relative;
  align-self: stretch;
  min-height: 100%;
  overflow: hidden;
  background: #090c0e;
}
.ss-gttf-feature-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 68%, rgba(9,12,14,.26) 100%);
  pointer-events: none;
}
.ss-gttf-feature-art img {
  width: 100%;
  height: 100%;
  min-height: clamp(330px, 30vw, 430px);
  object-fit: cover;
  object-position: 50% 61%;
  transition: transform .55s cubic-bezier(.2,.75,.25,1);
}
.ss-gttf-feature:hover .ss-gttf-feature-art img,
.ss-gttf-feature:focus-visible .ss-gttf-feature-art img { transform: scale(1.025); }
.ss-gttf-feature-panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: center;
  padding: clamp(28px, 4vw, 54px);
  background: #101316;
  color: #fffdf7;
}
.ss-gttf-feature-kicker { color: #ff1493; }
.ss-gttf-feature-title {
  display: block;
  margin: 0 0 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 4vw, 60px);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.045em;
}
.ss-gttf-feature-summary {
  display: block;
  margin: 0 0 28px;
  color: rgba(255,253,247,.78);
  font-size: clamp(14px, 1.25vw, 17px);
  line-height: 1.55;
}
.ss-gttf-feature-action {
  align-self: flex-start;
  margin-top: auto;
  color: #fffdf7;
  border-bottom-color: #ff1493;
}
.ss-gttf-feature:hover .ss-gttf-feature-action,
.ss-gttf-feature:focus-visible .ss-gttf-feature-action { color: #ff1493; }

.ss-gttf-page-hero--art {
  position: relative;
  min-height: clamp(620px, 67vw, 900px);
  display: flex;
  align-items: flex-end;
  padding: 0;
  background: #090c0e;
  overflow: hidden;
  color: var(--ss-paper);
}
.ss-gttf-page-hero--art::after { display: none; }
.ss-gttf-page-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.ss-gttf-page-hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(8,10,11,.05) 45%, rgba(8,10,11,.26) 68%, rgba(8,10,11,.88) 100%),
    linear-gradient(90deg, rgba(8,10,11,.22) 0%, transparent 44%);
  pointer-events: none;
}
.ss-gttf-page-hero-content {
  position: relative;
  z-index: 2;
  padding-top: clamp(360px, 49vw, 660px);
  padding-bottom: clamp(34px, 5vw, 66px);
}
.ss-gttf-page-hero--art .ss-eyebrow {
  margin-bottom: 10px;
  color: #ff1493;
  text-shadow: 0 1px 16px rgba(0,0,0,.45);
}
.ss-gttf-page-hero--art .ss-gttf-page-lead {
  max-width: 760px;
  color: #fffdf7;
  font-size: clamp(18px, 2vw, 26px);
  text-shadow: 0 1px 18px rgba(0,0,0,.55);
}
.ss-gttf-page-hero--art .ss-gttf-text-link {
  text-shadow: 0 1px 12px rgba(0,0,0,.55);
}

@media (max-width: 900px) {
  .ss-gttf-feature {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .ss-gttf-feature-art {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .ss-gttf-feature-art::after { display: none; }
  .ss-gttf-feature-art img {
    min-height: 0;
    object-fit: cover;
    object-position: center center;
  }
  .ss-gttf-feature-panel { min-height: 250px; }
}
@media (max-width: 620px) {
  .ss-gttf-feature-panel {
    min-height: 0;
    padding: 26px 22px 28px;
  }
  .ss-gttf-feature-summary { margin-bottom: 22px; }
  .ss-gttf-page-hero--art {
    min-height: 660px;
  }
  .ss-gttf-page-hero-image {
    object-position: 50% 50%;
  }
  .ss-gttf-page-hero-content {
    padding-top: 410px;
    padding-bottom: 34px;
  }
  .ss-gttf-page-hero-shade {
    background: linear-gradient(180deg, rgba(8,10,11,.02) 32%, rgba(8,10,11,.24) 58%, rgba(8,10,11,.94) 86%);
  }
}


/* ==========================================================
   v2.73 — shared promotion discount codes
   ========================================================== */

.ss-promo-discount-panel {
  border-top: 6px solid var(--ss-sky);
}

.ss-promo-discount-toggle {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(16,40,58,.22);
  background: rgba(143,210,229,.12);
}

.ss-promo-discount-panel select {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  border: 1px solid rgba(16,40,58,.3);
  background: #fff;
  color: var(--ss-ink);
  padding: 9px 11px;
  font: inherit;
}

.ss-promo-discount-scopes {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px 14px;
  margin-top: 18px;
  padding: 15px;
  border: 1px solid rgba(16,40,58,.22);
  background: var(--ss-foam);
}

.ss-promo-discount-scopes > strong {
  grid-column: 1 / -1;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ss-promo-discount-scopes label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  line-height: 1.35;
}

.ss-promo-discount-scopes input,
.ss-promo-discount-toggle input {
  accent-color: var(--ss-sea);
}

.ss-promo-discount-usage {
  margin-top: 15px;
  padding: 12px 14px;
  border-left: 4px solid var(--ss-sea);
  background: rgba(143,210,229,.17);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
}

.ss-promo-preview-discount {
  margin: 20px 0;
  padding: 18px;
  border: 2px dashed var(--ss-ink);
  background: #fff;
  text-align: center;
}

.ss-promo-preview-discount strong {
  display: block;
  margin: 5px 0;
  font-size: 24px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ss-book-promo-code {
  display: grid;
  gap: 7px;
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid rgba(16,40,58,.22);
  background: rgba(143,210,229,.12);
}

.ss-book-promo-code label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ss-book-promo-code input {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid rgba(16,40,58,.35);
  background: #fff;
  color: var(--ss-ink);
  padding: 10px 12px;
  font: inherit;
  text-transform: uppercase;
}

.ss-book-promo-code small,
.summary-line--promo-note {
  font-size: 10px;
  line-height: 1.45;
  opacity: .72;
}

.ss-shop-discount-row {
  color: var(--ss-sea);
  font-weight: 800;
}

.ss-event-ticket-discount {
  margin: -4px 0 10px;
  padding: 10px 12px;
  border-left: 4px solid var(--ss-sea);
  background: rgba(143,210,229,.16);
  color: var(--ss-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.ss-shop-manager-order-promotion {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(16,40,58,.18);
  background: rgba(143,210,229,.14);
  font-size: 9px;
  line-height: 1.4;
}

.ss-shop-manager-order-promotion span:last-child {
  text-align: right;
}

@media (max-width: 760px) {
  .ss-promo-discount-scopes {
    grid-template-columns: 1fr;
  }
  .ss-promo-discount-scopes > strong {
    grid-column: auto;
  }
  .ss-shop-manager-order-promotion {
    display: grid;
  }
  .ss-shop-manager-order-promotion span:last-child {
    text-align: left;
  }
}


/* ==========================================================
   v2.73.3 — GTTF CTA polish + homepage recognition
   ========================================================== */
.ss-gttf-social-grid strong {
  display: flex;
  align-items: center;
  gap: .2em;
}
.ss-gttf-social-grid strong .ss-inline-arrow {
  margin-left: 0;
}


/* ==========================================================
   v2.73.4 — homepage hero award line typography
   ========================================================== */
.home .ss-hero--video .ss-hero-sub {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(244, 240, 230, .84);
}


/* ==========================================================
   v2.73.6 — visible Studio room photo offset treatment
   ========================================================== */
.ss-studio-space-media {
  border: 2px solid var(--ss-ink) !important;
  box-shadow: 10px 12px 0 var(--ss-sea) !important;
}

@media (max-width: 900px) {
  .ss-gttf-el-profile {
    grid-template-columns: 1fr;
  }
  .ss-gttf-el-photo-frame {
    max-width: 420px;
  }
}


/* ==========================================================
   v2.74.1 — Instagram -> Blog automation
   ========================================================== */
.ss-blog-instagram-automation{
  margin-top:18px;
  padding:18px;
  border:2px solid var(--ss-ink);
  background:rgba(255,255,255,.5);
}
.ss-blog-instagram-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  padding-bottom:15px;
  border-bottom:1px solid rgba(16,40,58,.18);
}
.ss-blog-instagram-head>div:first-child{max-width:760px}
.ss-blog-instagram-head span,.ss-blog-instagram-settings label>span,.ss-blog-instagram-meta span{
  display:block;
  font-size:8px;
  font-weight:900;
  letter-spacing:.055em;
  text-transform:uppercase;
  opacity:.6;
}
.ss-blog-instagram-head h3{margin:4px 0 7px;font-size:clamp(20px,2.4vw,31px);line-height:1}
.ss-blog-instagram-head p{margin:0;font-size:10px;line-height:1.55;opacity:.72}
.ss-blog-instagram-status{
  flex:0 0 auto;
  padding:7px 9px;
  border:1px solid rgba(16,40,58,.24);
  background:rgba(16,40,58,.06);
  font-size:8px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.ss-blog-instagram-status.is-on{background:rgba(91,137,105,.14);border-color:rgba(74,122,91,.28)}
.ss-blog-instagram-status.is-paused{background:rgba(213,165,70,.12);border-color:rgba(150,113,44,.25)}
.ss-blog-instagram-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);gap:24px;padding:18px 0}
.ss-blog-instagram-settings{display:grid;gap:12px}
.ss-blog-instagram-settings label{display:grid;gap:5px}
.ss-blog-instagram-settings label small{text-transform:none;font-weight:500;letter-spacing:0;opacity:.72}
.ss-blog-instagram-settings input,.ss-blog-instagram-settings select{
  width:100%;min-height:40px;padding:8px 10px;border:1px solid rgba(16,40,58,.32);border-radius:0;background:#fff;color:var(--ss-ink);font:inherit;font-size:11px
}
.ss-blog-instagram-buttons{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.ss-blog-instagram-security{font-size:8px;line-height:1.45;opacity:.55}
.ss-blog-instagram-flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid rgba(16,40,58,.18);border-left:1px solid rgba(16,40,58,.18)}
.ss-blog-instagram-flow>div{min-height:88px;padding:12px;display:grid;align-content:space-between;border-right:1px solid rgba(16,40,58,.18);border-bottom:1px solid rgba(16,40,58,.18);background:rgba(143,210,229,.11)}
.ss-blog-instagram-flow strong{font-size:22px;line-height:1;color:var(--ss-sea)}
.ss-blog-instagram-flow span{font-size:9px;font-weight:800;line-height:1.35;text-transform:none;letter-spacing:0;opacity:.78}
.ss-blog-instagram-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(16,40,58,.18);border-left:1px solid rgba(16,40,58,.18)}
.ss-blog-instagram-meta>div{padding:10px 11px;border-right:1px solid rgba(16,40,58,.18);border-bottom:1px solid rgba(16,40,58,.18)}
.ss-blog-instagram-meta strong{display:block;margin-top:3px;font-size:10px;line-height:1.25}
.ss-blog-instagram-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-top:13px}
.ss-blog-instagram-actions .is-danger{color:#8f2f2f}
.ss-blog-instagram-actions>span{font-size:9px;opacity:.65}
.ss-blog-instagram-error{margin-top:12px;padding:10px 12px;border-left:3px solid #8f2f2f;background:rgba(143,47,47,.08);font-size:9px;line-height:1.45}
.ss-blog-instagram-note{margin:12px 0 0;padding-top:12px;border-top:1px solid rgba(16,40,58,.12);font-size:9px;line-height:1.5;opacity:.7}
@media(max-width:900px){
  .ss-blog-instagram-grid{grid-template-columns:1fr}
  .ss-blog-instagram-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  .ss-blog-instagram-head{flex-direction:column}
  .ss-blog-instagram-flow,.ss-blog-instagram-meta{grid-template-columns:1fr}
}

.ss-blog-instagram-setup{margin-top:12px;border-top:1px solid rgba(16,40,58,.12);padding-top:10px}
.ss-blog-instagram-setup summary{cursor:pointer;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.ss-blog-instagram-setup ol{margin:10px 0 0;padding-left:20px;font-size:9px;line-height:1.55;opacity:.72}


/* ==========================================================
   v2.74.4 — GTTF faded full-bleed video hero; desktop copy moved inward
   ========================================================== */
.ss-gttf-page-hero--video {
  position: relative;
  min-height: clamp(650px, 72vw, 900px);
  display: flex;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  background: #080b0d;
  color: var(--ss-paper);
}
.ss-gttf-page-hero--video::after { display: none; }
.ss-gttf-video-layer,
.ss-gttf-page-hero--video .ss-gttf-page-hero-shade {
  position: absolute;
  inset: 0;
}
.ss-gttf-video-layer {
  z-index: 0;
  overflow: hidden;
  background: #080b0d;
}
.ss-gttf-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: .50;
  filter: saturate(.88) contrast(.92);
}
.ss-gttf-hero-video--mobile { display: none; }
.ss-gttf-page-hero--video .ss-gttf-page-hero-shade {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(6,8,9,.28) 0%, rgba(6,8,9,.18) 38%, rgba(6,8,9,.62) 100%),
    linear-gradient(90deg, rgba(6,8,9,.48) 0%, rgba(6,8,9,.18) 72%, rgba(6,8,9,.12) 100%);
  pointer-events: none;
}
.ss-gttf-page-hero--video .ss-gttf-page-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: flex-end;
  padding-top: clamp(165px, 20vw, 290px);
  padding-bottom: clamp(48px, 7vw, 88px);
}
.ss-gttf-hero-copy {
  max-width: 760px;
}
.ss-gttf-page-hero--video .ss-eyebrow {
  margin-bottom: 14px;
  color: #ff1493;
  text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
.ss-gttf-video-title {
  margin: 0 0 24px;
  max-width: 780px;
  color: #fffdf7;
  font-size: clamp(68px, 10vw, 150px);
  font-weight: 900;
  line-height: .76;
  letter-spacing: -.065em;
  text-shadow: 0 3px 22px rgba(0,0,0,.42);
}
.ss-gttf-video-title span { color: #ff1493; }
.ss-gttf-page-hero--video .ss-gttf-page-lead {
  max-width: 650px;
  margin: 0;
  color: #fffdf7;
  font-size: clamp(18px, 1.8vw, 25px);
  line-height: 1.4;
  text-shadow: 0 2px 14px rgba(0,0,0,.58);
}
.ss-gttf-page-hero--video .ss-gttf-text-link {
  color: #fffdf7;
  text-shadow: 0 1px 12px rgba(0,0,0,.55);
}
@media (max-width: 620px) {
  .ss-gttf-page-hero--video { min-height: 760px; }
  .ss-gttf-hero-video--desktop { display: none; }
  .ss-gttf-hero-video--mobile {
    display: block;
    object-position: center center;
    opacity: .46;
  }
  .ss-gttf-page-hero--video .ss-gttf-page-hero-shade {
    background:
      linear-gradient(180deg, rgba(6,8,9,.22) 0%, rgba(6,8,9,.22) 38%, rgba(6,8,9,.74) 100%),
      linear-gradient(90deg, rgba(6,8,9,.24), rgba(6,8,9,.16));
  }
  .ss-gttf-page-hero--video .ss-gttf-page-hero-content {
    align-items: flex-end;
    padding-top: 260px;
    padding-bottom: 36px;
  }
  .ss-gttf-video-title {
    margin-bottom: 18px;
    font-size: clamp(58px, 18vw, 84px);
  }
  .ss-gttf-page-hero--video .ss-gttf-page-lead {
    font-size: 17px;
    line-height: 1.4;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ss-gttf-hero-video { display: none !important; }
  .ss-gttf-video-layer {
    background: #090c0e url('assets/images/gttf-video-poster.jpg') center center / cover no-repeat;
  }
}



/* ==========================================================
   v2.74.12 — Events artwork frame treatment
   Black border + offset brand-blue panel on listing thumbnails
   and individual Event detail artwork. Layout/sizing unchanged.
   ========================================================== */
.ss-event-thumb,
.ss-event-art,
.ss-event-single-art {
  border: 4px solid var(--ss-ink) !important;
  box-shadow: 9px 10px 0 var(--ss-sea) !important;
}

/* Give the compact mobile event thumbnails a slightly tighter offset
   so the frame stays crisp without crowding the event copy. */
@media (max-width: 700px) {
  .ss-event-thumb,
  .ss-event-art {
    border-width: 3px !important;
    box-shadow: 6px 7px 0 var(--ss-sea) !important;
  }

  .ss-event-single-art {
    border-width: 4px !important;
    box-shadow: 8px 9px 0 var(--ss-sea) !important;
  }
}


/* ==========================================================
   v2.74.13 — Cancel + refund workflow
   Keeps money movement manual while making cancellation/refund
   intent explicit and actionable from Manager → Needs attention.
   ========================================================== */
.ss-manager-row-actions .ss-manager-cancel-refund-btn {
  padding: 9px 12px;
  border: 1px solid #8f2f2f;
  background: #fff;
  color: #8f2f2f;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}

.ss-manager-row-actions .ss-manager-cancel-refund-btn:hover,
.ss-manager-row-actions .ss-manager-cancel-refund-btn:focus-visible {
  background: #8f2f2f;
  color: #fff;
}

.ss-manager-action-item.is-refund-action {
  cursor: default;
}

.ss-manager-action-item.is-refund-action:hover,
.ss-manager-action-item.is-refund-action:focus-within {
  color: var(--ss-ink);
}

.ss-manager-action-refund-controls {
  display: grid;
  justify-items: end;
  gap: 5px;
}

.ss-manager-action-refund-controls small {
  max-width: 190px;
  color: rgba(16,40,58,.58);
  font-size: 9px;
  line-height: 1.35;
  text-align: right;
  overflow-wrap: anywhere;
}

.ss-manager-action-refund-btn {
  padding: 8px 10px;
  border: 1px solid #8f2f2f;
  background: #fff;
  color: #8f2f2f;
  font: inherit;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

.ss-manager-action-refund-btn:hover,
.ss-manager-action-refund-btn:focus-visible {
  background: #8f2f2f;
  color: #fff;
}

@media (max-width: 900px) {
  .ss-manager-action-item.is-refund-action {
    grid-template-columns: 105px 1fr;
  }
  .ss-manager-action-item.is-refund-action .ss-manager-action-flags {
    grid-column: 2;
  }
  .ss-manager-action-item.is-refund-action .ss-manager-action-refund-controls {
    grid-column: 1 / -1;
    justify-items: start;
  }
  .ss-manager-action-item.is-refund-action .ss-manager-action-refund-controls small {
    text-align: left;
  }
}

@media (max-width: 620px) {
  .ss-manager-action-item.is-refund-action {
    grid-template-columns: 1fr;
  }
  .ss-manager-action-item.is-refund-action .ss-manager-action-date,
  .ss-manager-action-item.is-refund-action .ss-manager-action-main,
  .ss-manager-action-item.is-refund-action .ss-manager-action-flags,
  .ss-manager-action-item.is-refund-action .ss-manager-action-refund-controls {
    grid-column: 1;
  }
}

/* ==========================================================
   v2.74.14 — Refund queue reference + action layout polish
   Makes booking/order and Stripe references explicit, and gives
   the manual-refund action enough room to remain inside the row.
   ========================================================== */
.ss-manager-action-item.is-refund-action {
  grid-template-columns: 120px minmax(220px, 1fr) minmax(145px, auto) minmax(180px, 210px);
}

.ss-manager-action-item.is-refund-action .ss-manager-action-main {
  min-width: 0;
}

.ss-manager-action-reference {
  display: block;
  margin-top: 2px;
  color: rgba(16,40,58,.72) !important;
  font-size: 10px !important;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ss-manager-action-reference b {
  color: var(--ss-ink);
  font-weight: 900;
}

.ss-manager-action-reference.is-muted {
  opacity: .58;
}

.ss-manager-action-refund-controls {
  width: 100%;
  min-width: 0;
}

.ss-manager-action-refund-controls > strong {
  justify-self: end;
  font-size: 15px;
}

.ss-manager-action-refund-btn {
  width: 100%;
  max-width: 210px;
  min-height: 38px;
  line-height: 1.15;
  white-space: normal;
  text-align: center;
}

@media (max-width: 1050px) {
  .ss-manager-action-item.is-refund-action {
    grid-template-columns: 105px minmax(190px, 1fr) minmax(130px, auto) minmax(165px, 190px);
    gap: 14px;
  }
}

@media (max-width: 900px) {
  .ss-manager-action-item.is-refund-action {
    grid-template-columns: 105px minmax(0, 1fr);
  }

  .ss-manager-action-item.is-refund-action .ss-manager-action-refund-controls {
    width: auto;
  }

  .ss-manager-action-refund-controls > strong {
    justify-self: start;
  }

  .ss-manager-action-refund-btn {
    width: auto;
    max-width: none;
  }
}


/* ==========================================================
   v2.74.15 — Event ticket refunds use central Needs attention queue
   ========================================================== */
.ss-events-refund-note{font-size:8px;line-height:1.35;opacity:.58}
.ss-events-cancellation-summary .ss-events-refund-action{justify-self:start;margin-top:2px}


/* =========================================================
   v2.74.16 — Manager portal header simplification
   Public navigation and mobile menu are intentionally omitted
   by header.php on the Manager portal; the home logo remains.
   ========================================================= */


/* ==========================================================
   v2.74.19 — Multi-date Recording / Custom Project finance
   One project may occupy several calendar dates while its agreed
   value, deposit and balance are tracked only once.
   ========================================================== */
.ss-manager-project-finance-strip {
  margin: 18px 0 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
}

.ss-manager-project-finance-strip > div {
  min-width: 0;
  padding: 16px 18px;
}

.ss-manager-project-finance-strip > div + div {
  border-left: 1px solid var(--ss-line);
}

.ss-manager-project-finance-strip span,
.ss-manager-project-finance-strip strong,
.ss-manager-project-finance-strip small {
  display: block;
}

.ss-manager-project-finance-strip span {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .62;
}

.ss-manager-project-finance-strip strong {
  margin-top: 4px;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1;
}

.ss-manager-project-finance-strip small {
  margin-top: 5px;
  font-size: 9px;
  line-height: 1.35;
  opacity: .58;
}

.ss-manager-project-dates {
  margin-top: 4px;
  padding: 14px;
  border: 1px solid var(--ss-line);
  background: rgba(143,210,229,.08);
}

.ss-manager-project-dates-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 10px;
}

.ss-manager-project-dates-head label {
  margin-top: 0;
}

.ss-manager-add-project-date {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 12px;
}

.ss-manager-project-date-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--ss-line);
}

.ss-manager-project-date-row:first-child {
  border-top: 0;
}

.ss-manager-project-date-row > label {
  flex: 1 1 135px;
  min-width: 120px;
  margin: 0;
}

.ss-manager-project-date-number {
  flex: 0 0 26px;
  align-self: center;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--ss-ink);
  font-size: 10px;
  font-weight: 900;
}

.ss-manager-project-date-remove {
  flex: 0 0 36px;
  width: 36px;
  min-height: 44px;
  border: 1px solid rgba(143,47,47,.55);
  background: #fff;
  color: #8f2f2f;
  font: inherit;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
}

.ss-manager-project-date-remove:disabled {
  opacity: .25;
  cursor: not-allowed;
}

.ss-manager-project-finance-summary {
  align-self: end;
  padding: 12px 14px;
  border: 1px solid var(--ss-ink);
  background: var(--ss-paper);
}

.ss-manager-project-finance-summary > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
}

.ss-manager-project-finance-summary > span + span {
  margin-top: 5px;
}

.ss-manager-project-finance-summary > small {
  display: block;
  margin-top: 8px;
  font-size: 9px;
  line-height: 1.35;
  opacity: .62;
}

.ss-manager-project-day-note {
  margin: 7px 0 0;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
  opacity: .7;
}

.ss-manager-action-item.is-project-finance-action {
  cursor: default;
}

.ss-manager-action-item.is-project-finance-action:hover,
.ss-manager-action-item.is-project-finance-action:focus-within {
  color: var(--ss-ink);
}

.ss-manager-action-item.is-project-finance-action .ss-manager-action-refund-btn {
  border-color: var(--ss-ink);
  color: var(--ss-ink);
}

.ss-manager-action-item.is-project-finance-action .ss-manager-action-refund-btn:hover,
.ss-manager-action-item.is-project-finance-action .ss-manager-action-refund-btn:focus-visible {
  background: var(--ss-ink);
  color: #fff;
}

@media (max-width: 900px) {
  .ss-manager-project-finance-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ss-manager-project-finance-strip > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--ss-line);
  }
  .ss-manager-project-finance-strip > div:nth-child(4) {
    border-top: 1px solid var(--ss-line);
  }
  .ss-manager-action-item.is-project-finance-action {
    grid-template-columns: 105px minmax(0, 1fr);
  }
  .ss-manager-action-item.is-project-finance-action .ss-manager-action-flags,
  .ss-manager-action-item.is-project-finance-action .ss-manager-action-refund-controls {
    grid-column: 2;
    justify-items: start;
  }
}

@media (max-width: 620px) {
  .ss-manager-project-finance-strip {
    grid-template-columns: 1fr;
  }
  .ss-manager-project-finance-strip > div + div,
  .ss-manager-project-finance-strip > div:nth-child(3),
  .ss-manager-project-finance-strip > div:nth-child(4) {
    border-left: 0;
    border-top: 1px solid var(--ss-line);
  }
  .ss-manager-project-dates-head {
    align-items: stretch;
    flex-direction: column;
  }
  .ss-manager-add-project-date {
    width: 100%;
  }
  .ss-manager-project-date-row > label {
    flex-basis: calc(50% - 28px);
  }
  .ss-manager-action-item.is-project-finance-action,
  .ss-manager-action-item.is-project-finance-action .ss-manager-action-date,
  .ss-manager-action-item.is-project-finance-action .ss-manager-action-main,
  .ss-manager-action-item.is-project-finance-action .ss-manager-action-flags,
  .ss-manager-action-item.is-project-finance-action .ss-manager-action-refund-controls {
    grid-template-columns: 1fr;
    grid-column: 1;
  }
}


/* v2.74.21 — persistent paid Shop stock warnings */
.ss-shop-manager-order-warning{display:grid;gap:.45rem;padding:.8rem .9rem;border:1px solid currentColor;border-radius:10px;margin:.75rem 0}
.ss-shop-manager-order-warning strong{font-weight:800}
.ss-shop-manager-order-warning span,.ss-shop-manager-order-warning small{line-height:1.4}
.is-shop-stock-warning .ss-manager-action-reference{max-width:46rem}


/* ==========================================================
   v2.74.22 — compact Needs attention refund rows
   Keeps refund detail readable while fitting the complete action
   onto one desktop line; smaller screens retain the stacked layout.
   ========================================================== */
@media (min-width: 1101px) {
  .ss-manager-action-item.is-refund-action {
    grid-template-columns: minmax(165px, 190px) minmax(0, 1fr) max-content minmax(320px, 355px);
    gap: 16px;
    padding: 13px 0;
  }

  .ss-manager-action-item.is-refund-action .ss-manager-action-date {
    display: flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
  }

  .ss-manager-action-item.is-refund-action .ss-manager-action-date small {
    font-size: 10px;
  }

  .ss-manager-action-item.is-refund-action .ss-manager-action-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .ss-manager-action-item.is-refund-action .ss-manager-action-main > strong,
  .ss-manager-action-item.is-refund-action .ss-manager-action-main > small:not(.ss-manager-action-reference) {
    flex: 0 0 auto;
  }

  .ss-manager-action-item.is-refund-action .ss-manager-action-reference {
    display: inline-block;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 280px;
    margin-top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: baseline;
  }

  .ss-manager-action-item.is-refund-action .ss-manager-action-flags {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .ss-manager-action-item.is-refund-action .ss-manager-action-refund-controls {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr);
    align-items: center;
    gap: 12px;
  }

  .ss-manager-action-item.is-refund-action .ss-manager-action-refund-controls > strong {
    justify-self: end;
    white-space: nowrap;
  }

  .ss-manager-action-item.is-refund-action .ss-manager-action-refund-btn {
    width: 100%;
    max-width: none;
    min-height: 36px;
    white-space: nowrap;
  }
}

/* ==========================================================
   v2.74.23 — product-level Shop pre-orders
   ========================================================== */
.ss-shop-preorder-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 4px 7px;
  border: 1px solid var(--ss-ink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  vertical-align: middle;
}

.ss-shop-manager-preorder-field {
  grid-column: 1 / -1;
  padding: 13px 14px;
  border: 1px solid var(--ss-line);
  background: rgba(255,255,255,.34);
}

.ss-shop-manager-preorder-field > label {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0;
  cursor: pointer;
}

.ss-shop-manager-preorder-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex: 0 0 auto;
}

.ss-shop-manager-preorder-field > label > span {
  display: grid;
  gap: 3px;
  text-transform: none;
  letter-spacing: 0;
}

.ss-shop-manager-preorder-field strong {
  font-size: 13px;
}

.ss-shop-manager-preorder-field small {
  max-width: 760px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}


/* =========================================================
   v2.74.24 — Manager portal public navigation route fix
   Header navigation is suppressed using the Manager route detector,
   because the portal template is injected via template_include rather
   than necessarily being assigned as a WordPress page template.
   ========================================================= */


/* ==========================================================
   v2.74.25 — Unified Shop/Event manual refund queue
   Shop and Event refunds flagged "Requires refund" now feed the main Manager
   Needs attention queue. Refund-required Shop/Event sales are excluded from
   retained-revenue reporting immediately; completing/clearing the refund
   updates reporting accordingly. No automatic Stripe refund is performed.
   ========================================================== */

/* ==========================================================
   v2.74.26 — Shop + Event checkout marketing preference
   ========================================================== */

.ss-commerce-marketing {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 15px 16px;
  border: 1px solid rgba(16,40,58,.22);
  background: rgba(143,210,229,.10);
}

.ss-commerce-marketing-status {
  display: grid;
  gap: 3px;
}

.ss-commerce-marketing-status strong {
  font-size: 12px;
  line-height: 1.3;
}

.ss-commerce-marketing-status span,
.ss-commerce-marketing > small {
  color: rgba(16,40,58,.66);
  font-size: 10px;
  line-height: 1.45;
}

.ss-shop-checkout-form .ss-commerce-marketing-check,
.ss-event-ticket-form .ss-commerce-marketing-check {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  margin: 0;
  cursor: pointer;
  font-weight: 750;
}

.ss-shop-checkout-form .ss-commerce-marketing-check[hidden],
.ss-event-ticket-form .ss-commerce-marketing-check[hidden] {
  display: none !important;
}

.ss-shop-checkout-form .ss-commerce-marketing-check input[type="checkbox"],
.ss-event-ticket-form .ss-commerce-marketing-check input[type="checkbox"] {
  width: 17px;
  min-width: 17px;
  height: 17px;
  min-height: 0;
  margin: 1px 0 0;
  padding: 0;
}

.ss-shop-checkout-form .ss-commerce-marketing-check > span,
.ss-event-ticket-form .ss-commerce-marketing-check > span {
  font-size: 11px;
  line-height: 1.45;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}

.ss-commerce-marketing.is-subscribed {
  border-color: rgba(35,153,187,.58);
  background: rgba(35,153,187,.10);
}

.ss-commerce-marketing.is-subscribed .ss-commerce-marketing-status strong {
  color: var(--ss-sea);
}

.ss-commerce-marketing.is-unsubscribed {
  background: rgba(244,240,230,.72);
}

.ss-commerce-marketing.is-cleaned {
  background: rgba(16,40,58,.045);
}

@media (max-width: 620px) {
  .ss-commerce-marketing {
    padding: 14px;
  }
}


/* ==========================================================
   v2.74.31 — Homepage flow + visual latest-blog thumbnails
   ========================================================== */
.home .ss-home-awards {
  border-top: 0;
}
.home .ss-latest--blog {
  background: var(--ss-paper);
}
.home .ss-home-blog-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
  padding-top: 0;
}
.home .ss-home-blog-grid .ss-home-blog-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-width: 0;
  padding: 22px 0;
}
.home .ss-home-blog-thumb {
  display: block;
  width: 112px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ss-foam);
  border: 1px solid var(--ss-line);
  text-decoration: none;
}
.home .ss-home-blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}
.home .ss-home-blog-card:hover .ss-home-blog-thumb img {
  transform: scale(1.035);
}
.home .ss-home-blog-thumb-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--ss-sky);
  color: var(--ss-ink);
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -.05em;
}
.home .ss-home-blog-copy {
  min-width: 0;
}
.home .ss-home-blog-copy .ss-post-meta {
  margin-bottom: 7px;
}
.home .ss-home-blog-copy .ss-post-title {
  font-size: clamp(19px, 1.7vw, 28px);
  line-height: 1.06;
}
@media (max-width: 1050px) and (min-width: 801px) {
  .home .ss-home-blog-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .home .ss-home-blog-grid .ss-home-blog-card {
    grid-template-columns: 124px minmax(0, 1fr);
  }
  .home .ss-home-blog-thumb {
    width: 124px;
  }
}
@media (max-width: 800px) {
  .home .ss-home-blog-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .home .ss-home-blog-grid .ss-home-blog-card {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 15px;
    padding: 18px 0;
  }
  .home .ss-home-blog-thumb {
    width: 96px;
  }
  .home .ss-home-blog-copy .ss-post-title {
    font-size: clamp(19px, 5vw, 25px);
  }
}


/* =========================================================
   v2.74.32 — Shop refund workflow tidy
   - Shop order cards expose one initial refund action: Issue refund.
   - Issue refund sends paid orders to the main Needs attention queue.
   - Manual completion remains in Needs attention; Shop only allows clearing an accidental flag.
   ========================================================= */


/* ==========================================================
   v2.74.33 — Larger homepage Latest from the Blog cards
   More visual card treatment using the site's black frame +
   offset brand-blue accent. Cosmetic only.
   ========================================================== */
.home .ss-home-blog-grid {
  gap: clamp(30px, 3.5vw, 52px);
  padding: 12px 12px 18px 0;
  align-items: stretch;
}
.home .ss-home-blog-grid .ss-home-blog-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  padding: 0;
  background: var(--ss-foam);
  border: 4px solid var(--ss-ink);
  box-shadow: 9px 10px 0 var(--ss-sea);
  transition: transform .2s ease, box-shadow .2s ease;
}
.home .ss-home-blog-grid .ss-home-blog-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 11px 12px 0 var(--ss-sea);
}
.home .ss-home-blog-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-bottom: 2px solid var(--ss-ink);
  background: var(--ss-paper);
}
.home .ss-home-blog-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(20px, 2vw, 28px);
}
.home .ss-home-blog-copy .ss-post-meta {
  margin-bottom: 10px;
}
.home .ss-home-blog-copy .ss-post-title {
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.02;
}

@media (max-width: 1050px) and (min-width: 701px) {
  .home .ss-home-blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
  }
  .home .ss-home-blog-grid .ss-home-blog-card {
    display: flex;
  }
  .home .ss-home-blog-thumb {
    width: 100%;
  }
}

@media (max-width: 700px) {
  .home .ss-home-blog-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 8px 9px 14px 0;
  }
  .home .ss-home-blog-grid .ss-home-blog-card {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    align-items: stretch;
    border-width: 3px;
    box-shadow: 6px 7px 0 var(--ss-sea);
  }
  .home .ss-home-blog-grid .ss-home-blog-card:hover {
    transform: none;
    box-shadow: 6px 7px 0 var(--ss-sea);
  }
  .home .ss-home-blog-thumb {
    width: 116px;
    height: 100%;
    aspect-ratio: auto;
    border: 0;
    border-right: 2px solid var(--ss-ink);
    border-bottom: 0;
  }
  .home .ss-home-blog-copy {
    padding: 17px 16px;
  }
  .home .ss-home-blog-copy .ss-post-title {
    font-size: clamp(20px, 6vw, 26px);
  }
}


/* =========================================================
   v2.74.34 — Public footer social links
   ========================================================= */
.ss-footer-social {
  grid-column: 1 / -1;
  margin-top: 10px;
}
.ss-footer-social-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.ss-footer-social-grid a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid rgba(244, 240, 230, .34);
  color: var(--ss-foam);
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.ss-footer-social-grid a:hover,
.ss-footer-social-grid a:focus-visible {
  background: var(--ss-sea);
  border-color: var(--ss-sea);
  color: var(--ss-paper);
  transform: translate(-2px, -2px);
}
.ss-footer-social-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: block;
  color: currentColor;
}
@media (max-width: 520px) {
  .ss-footer-social-grid { grid-template-columns: 1fr; }
  .ss-footer-social-grid a {
    min-height: 50px;
    padding: 11px 14px;
  }
  .ss-footer-social-icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }
}

/* =========================================================
   v2.74.35 — Footer social brand marks
   Replace the generic external-link arrows with lightweight
   inline SVG platform marks on desktop and mobile.
   ========================================================= */


/* v2.74.36 — Paid Shop fulfilment added to Manager Needs attention. */

/* ==========================================================
   v2.74.37 — compact Shop fulfilment rows in Needs attention
   Matches the compact desktop rhythm of refund actions while
   retaining the existing stacked layout on smaller screens.
   ========================================================== */
@media (min-width: 1101px) {
  .ss-manager-action-item.is-shop-fulfilment {
    grid-template-columns: minmax(165px, 190px) minmax(0, 1fr) max-content minmax(225px, 255px);
    gap: 16px;
    padding: 13px 0;
    cursor: default;
  }

  .ss-manager-action-item.is-shop-fulfilment .ss-manager-action-date {
    display: flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
  }

  .ss-manager-action-item.is-shop-fulfilment .ss-manager-action-date small {
    font-size: 10px;
  }

  .ss-manager-action-item.is-shop-fulfilment .ss-manager-action-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .ss-manager-action-item.is-shop-fulfilment .ss-manager-action-main > strong,
  .ss-manager-action-item.is-shop-fulfilment .ss-manager-action-main > small:not(.ss-manager-action-reference) {
    flex: 0 0 auto;
  }

  .ss-manager-action-item.is-shop-fulfilment .ss-manager-action-reference {
    display: inline-block;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 260px;
    margin-top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: baseline;
  }

  .ss-manager-action-item.is-shop-fulfilment .ss-manager-action-flags {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .ss-manager-action-item.is-shop-fulfilment .ss-manager-action-refund-controls {
    display: grid;
    grid-template-columns: auto minmax(135px, 1fr);
    align-items: center;
    gap: 12px;
  }

  .ss-manager-action-item.is-shop-fulfilment .ss-manager-action-refund-controls > strong {
    justify-self: end;
    white-space: nowrap;
  }

  .ss-manager-action-item.is-shop-fulfilment .ss-manager-action-refund-btn {
    width: 100%;
    max-width: none;
    min-height: 36px;
    white-space: nowrap;
  }
}

/* ==========================================================
   v2.74.38 — clearer Manager Shop work areas
   Larger, stronger headers for Delivery, Orders and Products.
   Cosmetic only: no Shop/order/payment logic changes.
   ========================================================== */

/* Give the three main Shop work areas the same clear visual language. */
.ss-shop-manager-delivery,
.ss-shop-manager-orders,
.ss-shop-manager-sidebar {
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
}

.ss-shop-manager-delivery {
  margin: 0 0 24px;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
}

.ss-shop-manager-delivery-head,
.ss-shop-manager-orders-head,
.ss-shop-manager-sidebar-head {
  padding: 20px 22px;
  background: var(--ss-sky);
  border-bottom: 2px solid var(--ss-ink);
}

.ss-shop-manager-delivery-head {
  margin-bottom: 0;
}

.ss-shop-manager-delivery-head span,
.ss-shop-manager-orders-head span,
.ss-shop-manager-sidebar-head span {
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .08em;
  opacity: .72;
}

.ss-shop-manager-delivery-head h3,
.ss-shop-manager-orders-head h3,
.ss-shop-manager-sidebar-head h3 {
  margin: 4px 0 4px;
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.05;
}

.ss-shop-manager-delivery-head p,
.ss-shop-manager-orders-head p {
  max-width: 760px;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  opacity: .76;
  color: var(--ss-ink);
}

.ss-shop-manager-delivery-fields {
  padding: 20px 22px 22px;
}

.ss-shop-manager-orders {
  margin-top: 24px;
}

.ss-shop-manager-order-list {
  padding: 18px;
  gap: 14px;
}

.ss-manager-shop-layout {
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 22px;
  margin-top: 24px;
}

.ss-shop-manager-sidebar-head {
  min-height: 86px;
}

.ss-shop-manager-product-button {
  padding: 15px 16px;
}

@media (max-width: 980px) {
  .ss-manager-shop-layout {
    grid-template-columns: 270px minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  .ss-shop-manager-delivery-head,
  .ss-shop-manager-orders-head,
  .ss-shop-manager-sidebar-head {
    padding: 16px 18px;
  }

  .ss-shop-manager-delivery-head h3,
  .ss-shop-manager-orders-head h3,
  .ss-shop-manager-sidebar-head h3 {
    font-size: 24px;
  }

  .ss-shop-manager-delivery-fields {
    padding: 18px;
  }

  .ss-manager-shop-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}


/* ==========================================================
   v2.74.39 — clearer Event archive/delete controls
   ========================================================== */
.ss-events-manager-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(143, 47, 47, .6);
  background: rgba(143, 47, 47, .04);
  color: #8f2f2f;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.15;
  text-decoration: none;
  opacity: 1;
}
.ss-events-manager-delete:hover,
.ss-events-manager-delete:focus-visible {
  border-color: #8f2f2f;
  background: rgba(143, 47, 47, .09);
  color: #8f2f2f;
  opacity: 1;
}
.ss-events-manager-delete-hint {
  max-width: 250px;
  font-size: 10px;
  line-height: 1.35;
  opacity: .72;
}
@media (max-width: 760px) {
  .ss-events-manager-editor-actions {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .ss-events-manager-delete-hint {
    flex-basis: 100%;
    max-width: none;
  }
}


/* ==========================================================
   v2.74.41 — compact Manager project-balance rows
   Cosmetic only: align Manager finance actions with the compact
   Shop/refund Needs attention rows on wide desktop screens.
   ========================================================== */
@media (min-width: 1101px) {
  .ss-manager-action-item.is-project-finance-action {
    grid-template-columns: minmax(165px, 190px) minmax(0, 1fr) max-content minmax(225px, 255px);
    gap: 16px;
    padding: 13px 0;
    cursor: default;
  }

  .ss-manager-action-item.is-project-finance-action .ss-manager-action-date {
    display: flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
  }

  .ss-manager-action-item.is-project-finance-action .ss-manager-action-date small {
    font-size: 10px;
  }

  .ss-manager-action-item.is-project-finance-action .ss-manager-action-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .ss-manager-action-item.is-project-finance-action .ss-manager-action-main > strong,
  .ss-manager-action-item.is-project-finance-action .ss-manager-action-main > small:not(.ss-manager-action-reference) {
    flex: 0 0 auto;
  }

  .ss-manager-action-item.is-project-finance-action .ss-manager-action-reference {
    display: inline-block;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 430px;
    margin-top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: baseline;
  }

  .ss-manager-action-item.is-project-finance-action .ss-manager-action-flags {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .ss-manager-action-item.is-project-finance-action .ss-manager-action-refund-controls {
    display: grid;
    grid-template-columns: auto minmax(135px, 1fr);
    align-items: center;
    gap: 12px;
  }

  .ss-manager-action-item.is-project-finance-action .ss-manager-action-refund-controls > strong {
    justify-self: end;
    white-space: nowrap;
  }

  .ss-manager-action-item.is-project-finance-action .ss-manager-action-refund-btn {
    width: 100%;
    max-width: none;
    min-height: 36px;
    white-space: nowrap;
  }
}


/* ==========================================================
   v2.74.42 — compact footer booking terms
   ========================================================== */
.ss-footer-terms-link {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: rgba(244,240,230,.78);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .11em;
  line-height: 1.4;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}

.ss-footer-terms-link:hover,
.ss-footer-terms-link:focus-visible {
  color: var(--ss-sky);
}

.ss-booking-terms-panel {
  width: min(700px, 94vw);
}

.ss-booking-terms-panel .ss-enquiry-panel-head {
  margin-bottom: 22px;
}

.ss-booking-terms-panel .ss-enquiry-panel-head h2 {
  font-size: clamp(46px, 5.2vw, 72px);
}

.ss-booking-terms-copy {
  display: grid;
  gap: 0;
  border-top: 2px solid var(--ss-ink);
}

.ss-booking-terms-section {
  padding: 26px 0 24px;
  border-bottom: 1px solid rgba(16,40,58,.24);
}

.ss-booking-terms-section:last-child {
  border-bottom: 0;
}

.ss-booking-terms-section h3 {
  margin: 4px 0 12px;
  font-size: clamp(23px, 2.5vw, 32px);
  line-height: 1;
  letter-spacing: -.025em;
}

.ss-booking-terms-section p:not(.ss-eyebrow) {
  max-width: 590px;
  margin: 0 0 10px;
  color: rgba(16,40,58,.82);
  font-size: 15px;
  line-height: 1.55;
}

.ss-booking-terms-section p:last-child {
  margin-bottom: 0;
}

.ss-booking-terms-section--studio {
  margin-top: 8px;
  padding: 22px;
  background: rgba(35,153,187,.10);
  border: 1px solid rgba(16,40,58,.24);
}

@media (max-width: 560px) {
  .ss-footer-bottom {
    align-items: flex-start;
  }

  .ss-booking-terms-panel {
    height: min(92svh, 860px);
  }

  .ss-booking-terms-panel .ss-enquiry-panel-head h2 {
    font-size: 48px;
  }

  .ss-booking-terms-section {
    padding: 20px 0;
  }

  .ss-booking-terms-section--studio {
    padding: 18px;
  }
}

/* ==========================================================
 * v2.74.45 — Manager non-calendar Mix / Master / Edits workflow
 * ========================================================== */
.ss-manager-noncalendar-card {
  margin-top: 22px;
}

.ss-manager-noncalendar-head {
  margin-bottom: 16px;
}

.ss-manager-noncalendar-head p {
  max-width: 820px;
  margin: 7px 0 0;
  color: rgba(16,40,58,.72);
  font-size: .92rem;
  line-height: 1.45;
}

.ss-manager-noncalendar-form {
  display: grid;
  grid-template-columns: minmax(140px,.8fr) minmax(190px,1.25fr) minmax(220px,1.35fr) minmax(190px,1.1fr) minmax(120px,.65fr) auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  border: 1px solid rgba(16,40,58,.17);
  background: rgba(143,210,229,.12);
}

.ss-manager-noncalendar-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ss-manager-noncalendar-form label > span {
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(16,40,58,.68);
}

.ss-manager-noncalendar-form input,
.ss-manager-noncalendar-form select,
.ss-manager-noncalendar-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid rgba(16,40,58,.24);
  background: #fff;
  color: var(--ss-ink);
  font: inherit;
}

.ss-manager-noncalendar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}

.ss-manager-noncalendar-recent-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  margin-top: 20px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ss-ink);
}

.ss-manager-noncalendar-recent-head strong {
  font-size: 1.05rem;
}

.ss-manager-noncalendar-recent-head span {
  color: rgba(16,40,58,.65);
  font-size: .82rem;
}

.ss-manager-noncalendar-list {
  display: grid;
}

.ss-manager-noncalendar-row {
  display: grid;
  grid-template-columns: minmax(125px,.75fr) minmax(280px,2.2fr) minmax(110px,.8fr) minmax(80px,.55fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 2px;
  border-bottom: 1px solid rgba(16,40,58,.14);
}

.ss-manager-noncalendar-date,
.ss-manager-noncalendar-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ss-manager-noncalendar-date strong,
.ss-manager-noncalendar-main strong {
  font-size: .9rem;
}

.ss-manager-noncalendar-date small,
.ss-manager-noncalendar-main small {
  overflow: hidden;
  color: rgba(16,40,58,.66);
  font-size: .76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-manager-noncalendar-status {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid currentColor;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ss-manager-noncalendar-status.is-paid {
  background: rgba(74,151,92,.12);
}

.ss-manager-noncalendar-status.is-invoiced {
  background: rgba(239,183,58,.14);
}

.ss-manager-noncalendar-status.is-invoice_required {
  background: rgba(35,153,187,.12);
}

.ss-manager-noncalendar-cost {
  text-align: right;
  font-size: 1rem;
}

.ss-manager-noncalendar-row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.ss-manager-noncalendar-row-actions button {
  appearance: none;
  border: 1px solid rgba(16,40,58,.3);
  background: #fff;
  color: var(--ss-ink);
  padding: 7px 9px;
  font: inherit;
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
}

.ss-manager-noncalendar-row-actions button:hover,
.ss-manager-noncalendar-row-actions button:focus-visible {
  background: var(--ss-sky);
}

.ss-manager-noncalendar-row-actions button.is-danger {
  border-color: rgba(141,35,35,.4);
  color: #762424;
}

.ss-manager-action-item.is-noncalendar-finance-action {
  cursor: default;
}

.ss-manager-action-item.is-noncalendar-finance-action:hover,
.ss-manager-action-item.is-noncalendar-finance-action:focus-within {
  background: rgba(143,210,229,.1);
}

@media (max-width: 1200px) {
  .ss-manager-noncalendar-form {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
  .ss-manager-noncalendar-actions {
    grid-column: span 3;
  }
}

@media (max-width: 800px) {
  .ss-manager-noncalendar-form {
    grid-template-columns: 1fr 1fr;
  }
  .ss-manager-noncalendar-actions {
    grid-column: span 2;
  }
  .ss-manager-noncalendar-row {
    grid-template-columns: 1fr auto;
    gap: 8px 14px;
    padding: 14px 0;
  }
  .ss-manager-noncalendar-date,
  .ss-manager-noncalendar-main {
    grid-column: 1;
  }
  .ss-manager-noncalendar-status,
  .ss-manager-noncalendar-cost,
  .ss-manager-noncalendar-row-actions {
    grid-column: 2;
    justify-self: end;
  }
  .ss-manager-noncalendar-status { grid-row: 1; }
  .ss-manager-noncalendar-cost { grid-row: 2; }
  .ss-manager-noncalendar-row-actions { grid-row: 3; }

  .ss-manager-action-item.is-noncalendar-finance-action {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .ss-manager-noncalendar-form {
    grid-template-columns: 1fr;
  }
  .ss-manager-noncalendar-actions {
    grid-column: auto;
    flex-wrap: wrap;
  }
  .ss-manager-noncalendar-row {
    grid-template-columns: 1fr;
  }
  .ss-manager-noncalendar-date,
  .ss-manager-noncalendar-main,
  .ss-manager-noncalendar-status,
  .ss-manager-noncalendar-cost,
  .ss-manager-noncalendar-row-actions {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
    text-align: left;
  }
  .ss-manager-noncalendar-row-actions { justify-content: flex-start; }
}


/* ==========================================================
 * v2.74.46 — Event postpone / reschedule workflow
 * ========================================================== */
.ss-events-manager-reschedule {
  border: 1px solid #10283a;
  background: #dceff5;
  color: #10283a;
  padding: 10px 14px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.ss-events-reschedule-panel {
  margin: 0 0 22px;
  padding: 18px;
  border: 2px solid #10283a;
  background: #edf7fa;
}
.ss-events-reschedule-copy { display:grid; gap:5px; margin-bottom:14px; }
.ss-events-reschedule-copy > span { font-size:11px; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
.ss-events-reschedule-copy > strong { font-size:17px; }
.ss-events-reschedule-copy > small { max-width:760px; color:#425a69; line-height:1.45; }
.ss-events-reschedule-fields { display:grid; grid-template-columns:minmax(180px,1.2fr) minmax(130px,.8fr) minmax(130px,.8fr); gap:12px; }
.ss-events-reschedule-fields label { display:grid; gap:6px; }
.ss-events-reschedule-fields label > span { font-size:11px; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.ss-events-reschedule-fields input,
.ss-events-reschedule-fields select { width:100%; min-width:0; border:1px solid #8295a1; background:#fff; padding:10px 11px; font:inherit; }
.ss-events-reschedule-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:14px; flex-wrap:wrap; }
.ss-events-reschedule-last { margin-top:14px; padding-top:12px; border-top:1px solid rgba(16,40,58,.22); display:flex; gap:10px 14px; align-items:center; flex-wrap:wrap; }
.ss-events-reschedule-last > strong { font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.ss-events-reschedule-last > span { font-size:12px; color:#425a69; flex:1 1 360px; }
.ss-event-rescheduled-pill { display:inline-flex; align-items:center; width:max-content; padding:5px 9px; border:1px solid #10283a; background:#dceff5; color:#10283a; font-size:10px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.ss-event-rescheduled-notice { margin-top:24px; padding:14px 18px; border-left:5px solid #5bb7d2; background:#edf7fa; display:flex; gap:8px 14px; align-items:baseline; flex-wrap:wrap; color:#10283a; }
.ss-event-rescheduled-notice strong { font-size:14px; }
.ss-event-rescheduled-notice span { font-size:13px; color:#425a69; }
@media (max-width:760px) {
  .ss-events-reschedule-fields { grid-template-columns:1fr; }
  .ss-events-reschedule-actions { justify-content:stretch; }
  .ss-events-reschedule-actions button { flex:1 1 160px; }
}


/* ==========================================================
 * v2.74.47 — non-calendar notes + dashboard placement / action tidy
 * ========================================================== */
.ss-manager-noncalendar-notes {
  grid-column: 1 / -1;
}

.ss-manager-noncalendar-form textarea {
  min-height: 76px;
  resize: vertical;
  line-height: 1.4;
}

.ss-manager-noncalendar-note {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: italic;
}

@media (min-width: 1101px) {
  .ss-manager-action-item.is-noncalendar-finance-action {
    grid-template-columns: minmax(165px, 190px) minmax(0, 1fr) max-content minmax(225px, 255px);
    gap: 16px;
    padding: 13px 0;
    cursor: default;
  }

  .ss-manager-action-item.is-noncalendar-finance-action .ss-manager-action-date {
    display: flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
  }

  .ss-manager-action-item.is-noncalendar-finance-action .ss-manager-action-date small {
    font-size: 10px;
  }

  .ss-manager-action-item.is-noncalendar-finance-action .ss-manager-action-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .ss-manager-action-item.is-noncalendar-finance-action .ss-manager-action-main > strong,
  .ss-manager-action-item.is-noncalendar-finance-action .ss-manager-action-main > small:not(.ss-manager-action-reference) {
    flex: 0 0 auto;
  }

  .ss-manager-action-item.is-noncalendar-finance-action .ss-manager-action-reference {
    display: inline-block;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 430px;
    margin-top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: baseline;
  }

  .ss-manager-action-item.is-noncalendar-finance-action .ss-manager-action-flags {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .ss-manager-action-item.is-noncalendar-finance-action .ss-manager-action-refund-controls {
    display: grid;
    grid-template-columns: auto minmax(135px, 1fr);
    align-items: center;
    gap: 12px;
  }

  .ss-manager-action-item.is-noncalendar-finance-action .ss-manager-action-refund-controls > strong {
    justify-self: end;
    white-space: nowrap;
  }

  .ss-manager-action-item.is-noncalendar-finance-action .ss-manager-action-refund-btn {
    width: 100%;
    max-width: none;
    min-height: 36px;
    white-space: nowrap;
  }
}
.ss-manager-noncalendar-form > .ss-manager-noncalendar-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
}
@media (max-width: 520px) {
  .ss-manager-noncalendar-form > .ss-manager-noncalendar-actions {
    justify-content: flex-start;
  }
}


/* ==========================================================
 * v2.74.49 — collapsible Mix / Master panel + Events UI tidy
 * ========================================================== */

/* Whole non-calendar section is optional Manager workspace. */
.ss-manager-noncalendar-panel {
  padding: 0;
  overflow: hidden;
}

.ss-manager-noncalendar-panel > summary.ss-manager-noncalendar-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.ss-manager-noncalendar-panel > summary.ss-manager-noncalendar-summary::-webkit-details-marker {
  display: none;
}

.ss-manager-noncalendar-panel > summary.ss-manager-noncalendar-summary p {
  margin-bottom: 0;
}

.ss-manager-noncalendar-panel-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 78px;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid rgba(16,40,58,.32);
  background: #fffdf7;
  color: #10283a;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase;
  opacity: 1 !important;
}

.ss-manager-noncalendar-panel[open] .ss-manager-noncalendar-panel-toggle::before {
  content: "Close";
}
.ss-manager-noncalendar-panel[open] .ss-manager-noncalendar-panel-toggle {
  font-size: 0 !important;
}
.ss-manager-noncalendar-panel[open] .ss-manager-noncalendar-panel-toggle::before {
  font-size: 10px;
}

.ss-manager-noncalendar-body {
  padding: 0 22px 22px;
  border-top: 1px solid rgba(16,40,58,.14);
}

/* Recent history stays independently collapsible inside the main panel. */
.ss-manager-noncalendar-recent {
  margin-top: 22px;
  border-top: 1px solid rgba(16, 40, 58, .18);
}

.ss-manager-noncalendar-recent > summary.ss-manager-noncalendar-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0 10px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.ss-manager-noncalendar-recent > summary.ss-manager-noncalendar-recent-head::-webkit-details-marker {
  display: none;
}

.ss-manager-noncalendar-recent > summary.ss-manager-noncalendar-recent-head::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 1px solid rgba(16, 40, 58, .28);
  background: #fffdf7;
  color: #10283a;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.ss-manager-noncalendar-recent[open] > summary.ss-manager-noncalendar-recent-head::after {
  content: "−";
}

.ss-manager-noncalendar-recent > summary.ss-manager-noncalendar-recent-head strong {
  font-size: 15px;
}

.ss-manager-noncalendar-recent > summary.ss-manager-noncalendar-recent-head span {
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #425a69;
}

.ss-manager-noncalendar-recent[open] .ss-manager-noncalendar-list {
  padding-top: 4px;
}

/* Events list: give each lifecycle bucket a restrained visual identity. */
.ss-events-manager-list-group summary {
  border-left: 5px solid transparent;
  padding-left: 11px;
}
.ss-events-manager-list-group.is-upcoming summary {
  border-left-color: #2399bb;
  background: rgba(143,210,229,.30);
}
.ss-events-manager-list-group.is-cancelled summary {
  border-left-color: #9a4444;
  background: rgba(154,68,68,.12);
  color: #6f2e2e;
}
.ss-events-manager-list-group.is-draft summary {
  border-left-color: #b28a3e;
  background: rgba(205,177,111,.17);
}
.ss-events-manager-list-group.is-past summary {
  border-left-color: #7a8992;
  background: rgba(16,40,58,.07);
  color: #425a69;
}

/* Event editor: separate lifecycle actions from work actions. */
.ss-events-manager-editor-head {
  align-items: flex-start;
  padding: 16px 18px;
}

.ss-events-manager-editor-title {
  min-width: 190px;
}

.ss-events-manager-editor-title .ss-events-manager-delete-hint {
  display: block;
  max-width: 390px;
  margin-top: 6px;
  color: #5b6d78;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
  opacity: .9;
}

.ss-events-manager-editor-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.ss-events-manager-lifecycle-actions,
.ss-events-manager-primary-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ss-events-manager-lifecycle-actions {
  padding-right: 14px;
  border-right: 1px solid rgba(16,40,58,.18);
}

.ss-events-manager-archive,
.ss-events-manager-cancel,
.ss-events-manager-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid rgba(16,40,58,.28);
  background: transparent;
  color: #425a69;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.15;
  text-decoration: none;
  opacity: 1;
  cursor: pointer;
}

.ss-events-manager-archive:hover,
.ss-events-manager-archive:focus-visible {
  border-color: #10283a;
  background: rgba(143,210,229,.13);
  color: #10283a;
}

.ss-events-manager-cancel,
.ss-events-manager-delete {
  border-color: rgba(143,47,47,.42);
  color: #8f2f2f;
}
.ss-events-manager-cancel:hover,
.ss-events-manager-cancel:focus-visible,
.ss-events-manager-delete:hover,
.ss-events-manager-delete:focus-visible {
  border-color: #8f2f2f;
  background: rgba(143,47,47,.08);
  color: #8f2f2f;
}

.ss-events-manager-reschedule {
  min-height: 40px;
  padding: 9px 13px;
  border: 1px solid #10283a;
  background: #dceff5;
  color: #10283a;
  font-size: 10px;
  font-weight: 900;
}

.ss-events-manager-primary-actions .ss-btn {
  min-height: 40px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .ss-events-manager-editor-head {
    flex-direction: column;
  }
  .ss-events-manager-editor-actions {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }
}

@media (max-width: 650px) {
  .ss-manager-noncalendar-panel > summary.ss-manager-noncalendar-summary {
    align-items: flex-start;
    padding: 17px 16px;
  }
  .ss-manager-noncalendar-panel-toggle {
    min-width: 64px;
  }
  .ss-manager-noncalendar-body {
    padding: 0 16px 18px;
  }
  .ss-events-manager-editor-actions,
  .ss-events-manager-lifecycle-actions,
  .ss-events-manager-primary-actions {
    width: 100%;
  }
  .ss-events-manager-lifecycle-actions {
    padding-right: 0;
    padding-bottom: 10px;
    border-right: 0;
    border-bottom: 1px solid rgba(16,40,58,.18);
  }
  .ss-events-manager-primary-actions {
    justify-content: stretch;
  }
  .ss-events-manager-primary-actions > * {
    flex: 1 1 145px;
  }
}


/* ==========================================================
 * v2.74.50 — Staff close-down checklist + Manager records
 * ========================================================== */

.ss-staff-close-down {
  margin: 26px 0 34px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
}
.ss-staff-close-down > summary {
  list-style: none;
}
.ss-staff-close-down > summary::-webkit-details-marker { display: none; }
.ss-staff-close-down-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  cursor: pointer;
  background: rgba(143,210,229,.22);
}
.ss-staff-close-down-summary > div {
  display: grid;
  gap: 2px;
}
.ss-staff-close-down-summary span:first-child {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #536b79;
}
.ss-staff-close-down-summary strong {
  font-size: 22px;
  line-height: 1.05;
}
.ss-staff-close-down-summary small {
  font-size: 12px;
  color: #536b79;
}
.ss-staff-close-down-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  padding: 7px 10px;
  border: 1px solid var(--ss-ink);
  background: var(--ss-paper);
  color: var(--ss-ink) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase;
}
.ss-staff-close-down[open] .ss-staff-close-down-open::before { content: "Close"; }
.ss-staff-close-down[open] .ss-staff-close-down-open { font-size: 0 !important; }
.ss-staff-close-down[open] .ss-staff-close-down-open::before { font-size: 10px; }
.ss-staff-close-down-form { padding: 20px; }
.ss-staff-close-down-person {
  display: grid;
  grid-template-columns: minmax(220px,1fr) minmax(220px,1fr) minmax(180px,.7fr);
  gap: 12px;
  margin-bottom: 18px;
}
.ss-staff-close-down-person > label,
.ss-staff-close-down-timestamp {
  display: grid;
  gap: 5px;
  align-content: start;
}
.ss-staff-close-down-person label > span,
.ss-staff-close-down-timestamp > span {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #536b79;
}
.ss-staff-close-down-person select,
.ss-staff-close-down-person input {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid rgba(16,40,58,.38);
  background: #fff;
  color: var(--ss-ink);
}
.ss-staff-close-down-timestamp {
  padding: 9px 11px;
  border: 1px solid rgba(16,40,58,.18);
  background: rgba(16,40,58,.035);
}
.ss-staff-close-down-timestamp strong { font-size: 15px; }
.ss-staff-close-down-timestamp small { color: #61737e; font-size: 10px; }
.ss-staff-close-down-section {
  margin-top: 14px;
  border: 1px solid rgba(16,40,58,.2);
}
.ss-staff-close-down-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(143,210,229,.17);
  border-bottom: 1px solid rgba(16,40,58,.2);
}
.ss-staff-close-down-section-head h2 {
  margin: 0;
  font-size: 15px;
  line-height: 1.1;
  text-transform: uppercase;
}
.ss-staff-close-down-all-yes {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--ss-ink);
  background: var(--ss-paper);
  color: var(--ss-ink);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}
.ss-staff-close-down-question {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px 16px;
  align-items: center;
  padding: 9px 11px;
  border-top: 1px solid rgba(16,40,58,.1);
}
.ss-staff-close-down-question:first-child { border-top: 0; }
.ss-staff-close-down-question.is-no { background: rgba(154,68,68,.08); }
.ss-staff-close-down-question.needs-answer { outline: 3px solid rgba(154,68,68,.45); outline-offset: -3px; }
.ss-staff-close-down-question-label { font-size: 13px; font-weight: 650; line-height: 1.25; }
.ss-staff-close-down-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ss-staff-close-down-choice label { position: relative; cursor: pointer; }
.ss-staff-close-down-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ss-staff-close-down-choice span {
  display: grid;
  place-items: center;
  min-width: 56px;
  min-height: 38px;
  padding: 6px 9px;
  border: 1px solid rgba(16,40,58,.35);
  background: #fff;
  color: var(--ss-ink);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.ss-staff-close-down-choice input[value="yes"]:checked + span {
  background: #dfeee4;
  border-color: #557b60;
  color: #244d31;
}
.ss-staff-close-down-choice input[value="no"]:checked + span {
  background: #f4dddd;
  border-color: #9a4444;
  color: #762f2f;
}
.ss-staff-close-down-comment {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 150px minmax(0,1fr);
  align-items: center;
  gap: 10px;
}
.ss-staff-close-down-comment[hidden] { display: none !important; }
.ss-staff-close-down-comment span {
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #762f2f;
}
.ss-staff-close-down-comment input {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(154,68,68,.45);
  background: #fff;
}
.ss-staff-close-down-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 2px solid var(--ss-ink);
}
.ss-staff-close-down-submit > div { display: grid; gap: 2px; }
.ss-staff-close-down-submit strong { font-size: 13px; }
.ss-staff-close-down-submit small { color: #60727d; font-size: 10px; }
.ss-staff-close-down-result {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 4px solid var(--ss-sea);
  background: rgba(143,210,229,.14);
  font-size: 12px;
  font-weight: 700;
}
.ss-staff-close-down-result.is-warning,
.ss-staff-close-down-result.is-error { border-left-color: #9a4444; background: rgba(154,68,68,.08); }
.ss-staff-close-down-result.is-success { border-left-color: #557b60; background: rgba(85,123,96,.09); }

.ss-manager-close-down-panel {
  padding: 0;
  overflow: hidden;
}
.ss-manager-close-down-panel > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ss-manager-close-down-panel > summary::-webkit-details-marker { display: none; }
.ss-manager-close-down-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
}
.ss-manager-close-down-summary p { margin-bottom: 0; }
.ss-manager-close-down-count {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid rgba(16,40,58,.25);
  background: rgba(143,210,229,.16);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ss-manager-close-down-body {
  padding: 0 20px 20px;
  border-top: 1px solid rgba(16,40,58,.14);
}
.ss-manager-close-down-settings {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 10px 14px;
  align-items: end;
  padding: 16px 0;
  border-bottom: 1px solid rgba(16,40,58,.14);
}
.ss-manager-close-down-settings label { display: grid; gap: 6px; }
.ss-manager-close-down-settings label > span { font-size: 11px; font-weight: 850; }
.ss-manager-close-down-settings label small { color: #60727d; font-weight: 600; }
.ss-manager-close-down-settings textarea {
  width: 100%;
  min-height: 88px;
  padding: 9px 10px;
  border: 1px solid rgba(16,40,58,.32);
  background: #fff;
  resize: vertical;
  font-size: 12px;
}
.ss-manager-close-down-settings > small {
  grid-column: 1 / -1;
  color: #60727d;
  font-size: 10px;
}
.ss-manager-close-down-list { display: grid; gap: 8px; padding-top: 14px; }
.ss-manager-close-down-record {
  border: 1px solid rgba(16,40,58,.22);
  background: #fffdf7;
}
.ss-manager-close-down-record.is-attention { border-left: 5px solid #9a4444; }
.ss-manager-close-down-record.is-actioned { border-left: 5px solid #557b60; }
.ss-manager-close-down-record.is-clear { border-left: 5px solid #8fd2e5; }
.ss-manager-close-down-record > summary {
  display: grid;
  grid-template-columns: 120px minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  list-style: none;
  cursor: pointer;
}
.ss-manager-close-down-record > summary::-webkit-details-marker { display: none; }
.ss-manager-close-down-record-date,
.ss-manager-close-down-record-main { display: grid; gap: 1px; }
.ss-manager-close-down-record-date strong,
.ss-manager-close-down-record-main strong { font-size: 13px; }
.ss-manager-close-down-record-date small,
.ss-manager-close-down-record-main small { color: #60727d; font-size: 9px; }
.ss-manager-close-down-record-status {
  padding: 5px 7px;
  border: 1px solid rgba(16,40,58,.22);
  background: rgba(16,40,58,.04);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.ss-manager-close-down-record.is-attention .ss-manager-close-down-record-status { color: #762f2f; background: rgba(154,68,68,.08); border-color: rgba(154,68,68,.3); }
.ss-manager-close-down-record-body { padding: 12px; border-top: 1px solid rgba(16,40,58,.12); }
.ss-manager-close-down-issues { display: grid; gap: 6px; margin-bottom: 10px; }
.ss-manager-close-down-issues p {
  display: grid;
  grid-template-columns: 120px minmax(0,1fr);
  gap: 2px 10px;
  margin: 0;
  padding: 8px 9px;
  background: rgba(154,68,68,.07);
}
.ss-manager-close-down-issues p strong { font-size: 10px; text-transform: uppercase; }
.ss-manager-close-down-issues p span { font-size: 11px; font-weight: 700; }
.ss-manager-close-down-issues p em { grid-column: 2; font-size: 11px; font-style: normal; color: #762f2f; }
.ss-manager-close-down-clear-copy { margin: 0 0 10px; font-size: 11px; color: #536b79; }
.ss-manager-close-down-record-action { min-height: 34px; padding: 7px 10px; font-size: 10px; }
.ss-manager-close-down-actioned-at { display: block; color: #557b60; font-size: 10px; font-weight: 750; }
.ss-manager-close-down-full { margin-top: 12px; border-top: 1px solid rgba(16,40,58,.12); padding-top: 10px; }
.ss-manager-close-down-full > summary { cursor: pointer; font-size: 10px; font-weight: 850; text-transform: uppercase; }
.ss-manager-close-down-full > div { display: grid; gap: 2px; margin-top: 8px; }
.ss-manager-close-down-full p {
  display: grid;
  grid-template-columns: 105px minmax(0,1fr) 36px;
  gap: 8px;
  align-items: start;
  margin: 0;
  padding: 5px 6px;
  font-size: 9px;
  border-bottom: 1px solid rgba(16,40,58,.07);
}
.ss-manager-close-down-full p > span { color: #60727d; }
.ss-manager-close-down-full p > b { text-align: right; }
.ss-manager-close-down-full p > em { grid-column: 2 / -1; color: #762f2f; font-style: normal; }
.ss-manager-close-down-full p.is-no { background: rgba(154,68,68,.06); }
.ss-manager-action-item.is-close-down-action { grid-template-columns: 165px minmax(0,1fr) auto minmax(250px,auto); }
.ss-manager-close-down-action-controls { gap: 8px; }
.ss-manager-action-secondary-btn {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid rgba(16,40,58,.34);
  background: #fffdf7;
  color: #10283a;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 760px) {
  .ss-staff-close-down-form { padding: 14px; }
  .ss-staff-close-down-person { grid-template-columns: 1fr; }
  .ss-staff-close-down-question { grid-template-columns: 1fr; }
  .ss-staff-close-down-choice { grid-template-columns: 1fr 1fr; }
  .ss-staff-close-down-choice span { min-height: 44px; }
  .ss-staff-close-down-comment { grid-template-columns: 1fr; }
  .ss-staff-close-down-submit { align-items: stretch; flex-direction: column; }
  .ss-staff-close-down-submit .ss-btn { width: 100%; }
  .ss-manager-close-down-settings { grid-template-columns: 1fr; }
  .ss-manager-close-down-settings > small { grid-column: auto; }
  .ss-manager-close-down-record > summary { grid-template-columns: 1fr auto; }
  .ss-manager-close-down-record-main { grid-column: 1; }
  .ss-manager-close-down-record-status { grid-column: 2; grid-row: 1 / span 2; }
  .ss-manager-close-down-issues p { grid-template-columns: 1fr; }
  .ss-manager-close-down-issues p em { grid-column: 1; }
  .ss-manager-close-down-full p { grid-template-columns: 1fr 34px; }
  .ss-manager-close-down-full p > span { grid-column: 1; }
  .ss-manager-close-down-full p > strong { grid-column: 1; }
  .ss-manager-close-down-full p > b { grid-column: 2; grid-row: 1 / span 2; }
  .ss-manager-close-down-full p > em { grid-column: 1 / -1; }
  .ss-manager-action-item.is-close-down-action { grid-template-columns: 1fr; }
}


/* ==========================================================
   v2.74.51 — Staff close-down placement + compact action row
   - Staff checklist sits below the calendar and collapses after submit.
   - Manager close-down issues match the compact Needs attention rhythm.
   ========================================================== */
.ss-staff-close-down {
  margin-top: 28px;
}

@media (min-width: 1101px) {
  .ss-manager-action-item.is-close-down-action {
    grid-template-columns: minmax(165px, 190px) minmax(0, 1fr) max-content minmax(250px, 285px);
    gap: 16px;
    padding: 13px 0;
    cursor: default;
  }

  .ss-manager-action-item.is-close-down-action .ss-manager-action-date {
    display: flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
  }

  .ss-manager-action-item.is-close-down-action .ss-manager-action-date small {
    font-size: 10px;
  }

  .ss-manager-action-item.is-close-down-action .ss-manager-action-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .ss-manager-action-item.is-close-down-action .ss-manager-action-main > strong,
  .ss-manager-action-item.is-close-down-action .ss-manager-action-main > small:not(.ss-manager-action-reference) {
    flex: 0 0 auto;
  }

  .ss-manager-action-item.is-close-down-action .ss-manager-action-reference {
    display: inline-block;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 560px;
    margin-top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: baseline;
  }

  .ss-manager-action-item.is-close-down-action .ss-manager-action-flags {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .ss-manager-action-item.is-close-down-action .ss-manager-close-down-action-controls {
    display: grid;
    grid-template-columns: minmax(82px, .7fr) minmax(135px, 1fr);
    align-items: center;
    gap: 8px;
  }

  .ss-manager-action-item.is-close-down-action .ss-manager-action-secondary-btn,
  .ss-manager-action-item.is-close-down-action .ss-manager-action-refund-btn {
    width: 100%;
    max-width: none;
    min-height: 36px;
    white-space: nowrap;
  }
}


/* =========================================================
   v2.74.52 — Staff portal rotating Chuck Norris line
   ========================================================= */
.ss-staff-chuck {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: -4px 0 16px;
  padding: 7px 10px;
  border-left: 3px solid #51a9d6;
  background: rgba(81,169,214,.07);
  color: #24343d;
  font-size: 11px;
  line-height: 1.35;
}
.ss-staff-chuck span {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #54707f;
}
.ss-staff-chuck strong { font-weight: 650; }
@media (max-width: 700px) {
  .ss-staff-chuck {
    display: grid;
    gap: 3px;
    margin-bottom: 12px;
    padding: 7px 9px;
  }
}

/* ==========================================================
   v2.74.53 — Website enquiries in Manager Needs attention
   ========================================================== */
.ss-manager-action-item.is-website-enquiry-action {
  grid-template-columns: 165px minmax(0,1fr) auto minmax(260px,auto);
}
.ss-manager-enquiry-action-controls { gap: 8px; }

@media (min-width: 1180px) {
  .ss-manager-action-item.is-website-enquiry-action {
    align-items: center;
    min-height: 68px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .ss-manager-action-item.is-website-enquiry-action .ss-manager-action-main {
    min-width: 0;
  }
  .ss-manager-action-item.is-website-enquiry-action .ss-manager-action-main > strong,
  .ss-manager-action-item.is-website-enquiry-action .ss-manager-action-main > small:not(.ss-manager-action-reference) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ss-manager-action-item.is-website-enquiry-action .ss-manager-action-reference {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .ss-manager-action-item.is-website-enquiry-action .ss-manager-action-flags,
  .ss-manager-action-item.is-website-enquiry-action .ss-manager-enquiry-action-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
}

@media (max-width: 1179px) {
  .ss-manager-action-item.is-website-enquiry-action { grid-template-columns: 1fr; }
  .ss-manager-action-item.is-website-enquiry-action .ss-manager-action-flags,
  .ss-manager-action-item.is-website-enquiry-action .ss-manager-enquiry-action-controls {
    justify-content: flex-start;
  }
}


/* ==========================================================
   v2.74.54 — Needs attention category colour cues
   Cosmetic only: subtle row tinting improves scanability while
   retaining the existing compact layouts and action workflow.
   ========================================================== */
.ss-manager-action-item.is-booking-attention,
.ss-manager-action-item.is-website-enquiry-action,
.ss-manager-action-item.is-refund-action,
.ss-manager-action-item.is-shop-fulfilment,
.ss-manager-action-item.is-shop-stock-warning,
.ss-manager-action-item.is-project-finance-action,
.ss-manager-action-item.is-noncalendar-finance-action,
.ss-manager-action-item.is-close-down-action {
  padding-left: 12px;
  padding-right: 12px;
}

/* General booking / calendar action: restrained neutral blue. */
.ss-manager-action-item.is-booking-attention {
  background: rgba(16,40,58,.035);
  box-shadow: inset 4px 0 0 rgba(16,40,58,.35);
}

/* New website lead: brand blue. */
.ss-manager-action-item.is-website-enquiry-action {
  background: rgba(143,210,229,.16);
  box-shadow: inset 4px 0 0 rgba(35,153,187,.72);
}

/* Money to return: muted red. */
.ss-manager-action-item.is-refund-action {
  background: rgba(154,68,68,.07);
  box-shadow: inset 4px 0 0 rgba(143,47,47,.68);
}

/* Paid order waiting to be sent: muted green. */
.ss-manager-action-item.is-shop-fulfilment {
  background: rgba(85,123,96,.09);
  box-shadow: inset 4px 0 0 rgba(85,123,96,.68);
}

/* Stock exception: warm amber so it is distinct from an ordinary fulfilment. */
.ss-manager-action-item.is-shop-stock-warning {
  background: rgba(190,142,48,.10);
  box-shadow: inset 4px 0 0 rgba(168,119,31,.68);
}

/* Invoice / payment actions: soft cream-gold. */
.ss-manager-action-item.is-project-finance-action,
.ss-manager-action-item.is-noncalendar-finance-action {
  background: rgba(208,172,73,.09);
  box-shadow: inset 4px 0 0 rgba(166,130,39,.58);
}

/* Staff operational issue: muted violet-grey, separate from finance/refunds. */
.ss-manager-action-item.is-close-down-action {
  background: rgba(108,92,132,.075);
  box-shadow: inset 4px 0 0 rgba(108,92,132,.58);
}

/* Website enquiry actions: secondary Spam stays left; primary response stays right. */
.ss-manager-enquiry-action-controls {
  display: grid !important;
  grid-template-columns: minmax(72px,.65fr) minmax(132px,1fr);
  align-items: center;
  gap: 8px;
}
.ss-manager-enquiry-action-controls .ss-manager-action-secondary-btn,
.ss-manager-enquiry-action-controls .ss-manager-action-refund-btn {
  width: 100%;
  max-width: none;
  min-height: 36px;
  white-space: nowrap;
}

@media (max-width: 1179px) {
  .ss-manager-enquiry-action-controls {
    justify-content: start !important;
    width: min(100%, 330px);
  }
}

@media (max-width: 620px) {
  .ss-manager-action-item.is-booking-attention,
  .ss-manager-action-item.is-website-enquiry-action,
  .ss-manager-action-item.is-refund-action,
  .ss-manager-action-item.is-shop-fulfilment,
  .ss-manager-action-item.is-shop-stock-warning,
  .ss-manager-action-item.is-project-finance-action,
  .ss-manager-action-item.is-noncalendar-finance-action,
  .ss-manager-action-item.is-close-down-action {
    padding-left: 10px;
    padding-right: 10px;
  }
  .ss-manager-enquiry-action-controls {
    width: 100%;
    grid-template-columns: minmax(72px,.7fr) minmax(132px,1.3fr);
  }
}


/* =========================================================
   v2.74.55 — CRM hybrid customer identity
   Customer History / Top Customers / Unique / Returning use a supplied
   band-client label when present, otherwise fall back to booking email.
   Marketing Contacts and loyalty remain email based.
   ========================================================= */

/* ==========================================================
   v2.74.56 — CRM email identity + band/client search
   Customer totals remain keyed to email; supplied band/client labels are
   retained only as searchable/display metadata on the customer record.
   ========================================================== */


/* ==========================================================
   v2.74.57 — uniform Manager Needs attention rows
   Cosmetic/interaction-only: action rows share one desktop rhythm;
   long supporting detail can expand in place when required.
   ========================================================== */
@media (min-width: 1180px) {
  .ss-manager-action-item.is-website-enquiry-action,
  .ss-manager-action-item.is-close-down-action,
  .ss-manager-action-item.is-project-finance-action,
  .ss-manager-action-item.is-noncalendar-finance-action,
  .ss-manager-action-item.is-refund-action,
  .ss-manager-action-item.is-shop-fulfilment,
  .ss-manager-action-item.is-shop-stock-warning {
    grid-template-columns: minmax(220px, 245px) minmax(0, 1fr) max-content minmax(300px, 340px);
    gap: 14px;
    align-items: center;
    min-height: 76px;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: default;
  }

  .ss-manager-action-item.is-website-enquiry-action .ss-manager-action-date,
  .ss-manager-action-item.is-close-down-action .ss-manager-action-date,
  .ss-manager-action-item.is-project-finance-action .ss-manager-action-date,
  .ss-manager-action-item.is-noncalendar-finance-action .ss-manager-action-date,
  .ss-manager-action-item.is-refund-action .ss-manager-action-date,
  .ss-manager-action-item.is-shop-fulfilment .ss-manager-action-date,
  .ss-manager-action-item.is-shop-stock-warning .ss-manager-action-date {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-width: 0;
    white-space: nowrap;
  }

  .ss-manager-action-item.is-website-enquiry-action .ss-manager-action-main,
  .ss-manager-action-item.is-close-down-action .ss-manager-action-main,
  .ss-manager-action-item.is-project-finance-action .ss-manager-action-main,
  .ss-manager-action-item.is-noncalendar-finance-action .ss-manager-action-main,
  .ss-manager-action-item.is-refund-action .ss-manager-action-main,
  .ss-manager-action-item.is-shop-fulfilment .ss-manager-action-main,
  .ss-manager-action-item.is-shop-stock-warning .ss-manager-action-main {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .ss-manager-action-item.is-website-enquiry-action .ss-manager-action-main > strong,
  .ss-manager-action-item.is-close-down-action .ss-manager-action-main > strong,
  .ss-manager-action-item.is-project-finance-action .ss-manager-action-main > strong,
  .ss-manager-action-item.is-noncalendar-finance-action .ss-manager-action-main > strong,
  .ss-manager-action-item.is-refund-action .ss-manager-action-main > strong,
  .ss-manager-action-item.is-shop-fulfilment .ss-manager-action-main > strong,
  .ss-manager-action-item.is-shop-stock-warning .ss-manager-action-main > strong,
  .ss-manager-action-item .ss-manager-action-main > small:not(.ss-manager-action-reference),
  .ss-manager-action-detail-toggle {
    flex: 0 0 auto;
  }

  .ss-manager-action-item .ss-manager-action-reference {
    display: inline-block;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 520px;
    margin-top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: baseline;
  }

  .ss-manager-action-item .ss-manager-action-flags {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .ss-manager-action-item .ss-manager-action-refund-controls {
    min-width: 0;
    width: 100%;
  }

  .ss-manager-action-item .ss-manager-action-refund-btn,
  .ss-manager-action-item .ss-manager-action-secondary-btn {
    min-height: 40px;
  }

  .ss-manager-action-detail-toggle {
    appearance: none;
    border: 0;
    border-bottom: 1px solid rgba(16,40,58,.38);
    padding: 0 0 1px;
    background: transparent;
    color: rgba(16,40,58,.62);
    font: inherit;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 1.2;
    text-transform: uppercase;
    cursor: pointer;
  }

  .ss-manager-action-detail-toggle:hover,
  .ss-manager-action-detail-toggle:focus-visible {
    color: var(--ss-sea);
    border-bottom-color: currentColor;
  }

  .ss-manager-action-item.is-expanded {
    align-items: start;
    min-height: 76px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .ss-manager-action-item.is-expanded .ss-manager-action-date,
  .ss-manager-action-item.is-expanded .ss-manager-action-flags,
  .ss-manager-action-item.is-expanded .ss-manager-action-refund-controls {
    padding-top: 3px;
  }

  .ss-manager-action-item.is-expanded .ss-manager-action-main {
    flex-wrap: wrap;
    overflow: visible;
    white-space: normal;
  }

  .ss-manager-action-item.is-expanded .ss-manager-action-reference {
    flex: 1 0 100%;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.45;
  }
}

@media (max-width: 1179px) {
  .ss-manager-action-detail-toggle {
    display: none;
  }
}

/* ==========================================================
   v2.74.61 — close-down history + transactional email attention
   ========================================================== */
.ss-staff-close-down-person {
  grid-template-columns: minmax(220px,1fr) minmax(180px,.7fr);
}

.ss-manager-close-down-filters {
  grid-template-columns: minmax(170px,.7fr) minmax(170px,.7fr) auto;
  align-items: end;
}
.ss-manager-close-down-filters input[type="date"] {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(16,40,58,.32);
  background: #fff;
  color: var(--ss-ink);
  font: inherit;
  font-size: 12px;
}
.ss-manager-close-down-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ss-manager-close-down-filter-actions button { min-height: 42px; }
.ss-manager-close-down-load-more {
  display: flex;
  justify-content: center;
  padding: 14px 0 2px;
}
.ss-manager-close-down-load-more[hidden] { display: none !important; }

/* Customer transactional email failure: pale rose/orange, distinct from refund. */
.ss-manager-action-item.is-email-failure-action {
  padding-left: 12px;
  padding-right: 12px;
  background: rgba(184,103,65,.085);
  box-shadow: inset 4px 0 0 rgba(164,86,51,.65);
  cursor: default;
}
.ss-manager-action-item.is-email-failure-action:hover,
.ss-manager-action-item.is-email-failure-action:focus-within { color: var(--ss-ink); }
.ss-manager-email-action-controls {
  display: grid !important;
  grid-template-columns: minmax(105px,.8fr) minmax(110px,1fr);
  gap: 8px;
  align-items: center;
}
.ss-manager-email-action-controls .ss-manager-action-secondary-btn,
.ss-manager-email-action-controls .ss-manager-action-refund-btn {
  width: 100%;
  max-width: none;
  min-height: 36px;
  white-space: nowrap;
}

@media (min-width: 1180px) {
  .ss-manager-action-item.is-email-failure-action {
    grid-template-columns: minmax(220px,245px) minmax(0,1fr) max-content minmax(300px,340px);
    gap: 14px;
    align-items: center;
    min-height: 76px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .ss-manager-action-item.is-email-failure-action .ss-manager-action-date {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-width: 0;
    white-space: nowrap;
  }
  .ss-manager-action-item.is-email-failure-action .ss-manager-action-main {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }
  .ss-manager-action-item.is-email-failure-action .ss-manager-action-main > strong,
  .ss-manager-action-item.is-email-failure-action .ss-manager-action-main > small:not(.ss-manager-action-reference) {
    flex: 0 0 auto;
  }
  .ss-manager-action-item.is-email-failure-action .ss-manager-action-reference {
    display: inline-block;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 1179px) {
  .ss-manager-action-item.is-email-failure-action { grid-template-columns: 1fr; }
  .ss-manager-action-item.is-email-failure-action .ss-manager-action-flags,
  .ss-manager-action-item.is-email-failure-action .ss-manager-email-action-controls {
    justify-self: start;
  }
  .ss-manager-email-action-controls { width: min(100%, 320px); }
}

@media (max-width: 620px) {
  .ss-staff-close-down-person { grid-template-columns: 1fr; }
  .ss-manager-close-down-filters { grid-template-columns: 1fr; }
  .ss-manager-close-down-filters > small { grid-column: auto; }
  .ss-manager-close-down-filter-actions { width: 100%; }
  .ss-manager-close-down-filter-actions button { flex: 1 1 0; }
  .ss-manager-action-item.is-email-failure-action {
    padding-left: 10px;
    padding-right: 10px;
  }
  .ss-manager-email-action-controls { width: 100%; }
}

/* ==========================================================
   v2.74.62 — Manager live/reporting performance split
   ========================================================== */

/* ==========================================================
   v2.74.63 — hero video performance pass
   Home, Studio and GTTF hero MP4 assets are web-optimised with
   lighter H.264 encodes and fast-start metadata. No layout or
   functional behaviour changed.
   ========================================================== */

/* =========================================================
   v2.74.64 — public-facing copy cleanup
   Removed internal payment/stock/Manager terminology from customer checkout UI.
   ========================================================= */


/* ==========================================================
 * v2.74.66 — public privacy notice and just-in-time links
 * ========================================================== */
.ss-footer-policy-links {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.ss-privacy-panel {
  width: min(760px, 94vw);
}

.ss-privacy-copy a {
  color: inherit;
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ss-privacy-microcopy {
  margin: 10px 0 0;
  color: rgba(16,40,58,.70);
  font-size: 12px;
  line-height: 1.45;
}

.ss-privacy-microcopy strong {
  color: rgba(16,40,58,.88);
}

.ss-privacy-microcopy button {
  appearance: none;
  margin: 0 0 0 3px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ss-privacy-microcopy button:hover,
.ss-privacy-microcopy button:focus-visible {
  color: var(--ss-sea);
}

@media (max-width: 560px) {
  .ss-footer-policy-links {
    gap: 10px 14px;
  }

  .ss-privacy-panel {
    height: min(92svh, 900px);
  }
}

.ss-privacy-modal {
  z-index: 100001;
}


/* ==========================================================
 * v2.74.67 — public performance pass
 * Public images now use intrinsic sizing/lazy decoding where appropriate;
 * Studio/GTTF hero video loading is device-aware.
 * ========================================================== */


/*
 * v2.74.68 — controlled staging email routing test
 * Adds optional SS26_EMAIL_LIVE_ROUTING_TEST wp-config switch so real-recipient
 * email routing can be tested without turning off the site's staging environment.
 */

/* v2.74.78 — Manager landing pages */
.ss-manager-landings { margin-top: 28px; }
.ss-manager-landings-head,
.ss-landing-manager-editor-head,
.ss-landing-manager-sidebar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.ss-manager-landings-head { margin-bottom: 18px; }
.ss-manager-landings-head h2 { margin: 4px 0 8px; font-size: clamp(30px, 4vw, 48px); }
.ss-manager-landings-head p { max-width: 760px; margin: 0; }
.ss-manager-landings-head-actions,
.ss-landing-manager-editor-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.ss-landing-manager-note {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--ss-line);
  background: rgba(255,255,255,.54);
}
.ss-landing-manager-note strong { flex: 0 0 auto; }
.ss-landing-manager-note code { font-size: .92em; }
.ss-manager-landings-layout {
  display: grid;
  grid-template-columns: minmax(240px, 330px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.ss-landing-manager-sidebar,
.ss-landing-manager-editor {
  border: 1px solid var(--ss-line);
  background: var(--ss-paper);
  box-shadow: 9px 9px 0 rgba(35,153,187,.18);
}
.ss-landing-manager-sidebar { position: sticky; top: 18px; }
.ss-landing-manager-sidebar-head,
.ss-landing-manager-editor-head { padding: 18px; border-bottom: 1px solid var(--ss-line); }
.ss-landing-manager-sidebar-head span,
.ss-landing-manager-editor-head span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  opacity: .65;
}
.ss-landing-manager-sidebar-head h3,
.ss-landing-manager-editor-head h3 { margin: 3px 0 0; font-size: 21px; }
.ss-landing-manager-empty-editor { padding: 36px 22px; display: grid; gap: 7px; }
.ss-landing-manager-empty-editor strong { font-size: 20px; }
.ss-landing-manager-list-item {
  width: 100%;
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--ss-line);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.ss-landing-manager-list-item:hover,
.ss-landing-manager-list-item.active { background: rgba(35,153,187,.09); }
.ss-landing-manager-list-item.active { box-shadow: inset 4px 0 0 var(--ss-sea); }
.ss-landing-manager-list-title { font-weight: 800; font-size: 15px; }
.ss-landing-manager-list-item > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .7; }
.ss-landing-manager-list-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 3px; }
.ss-landing-manager-list-meta b {
  padding: 3px 7px;
  border: 1px solid currentColor;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ss-landing-manager-list-meta b.is-published { color: #24693e; }
.ss-landing-manager-list-meta b.is-draft { color: #6a5a27; }
.ss-landing-manager-list-meta b.is-expired { color: #8a3434; }
.ss-landing-manager-list-meta em { font-size: 11px; font-style: normal; opacity: .68; }
.ss-landing-manager-delete {
  border: 0;
  background: none;
  color: #8a3434;
  font-weight: 800;
  cursor: pointer;
  padding: 10px 8px;
}
.ss-landing-manager-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 20px;
}
.ss-landing-manager-form-grid > .is-wide { grid-column: 1 / -1; }
.ss-landing-manager-form-grid > label > span,
.ss-landing-manager-image-field > span,
.ss-landing-editor-field > span {
  display: block;
  margin-bottom: 7px;
  font-weight: 800;
  font-size: 13px;
}
.ss-landing-manager-form-grid input[type="text"],
.ss-landing-manager-form-grid input[type="date"],
.ss-landing-manager-form-grid input[type="time"],
.ss-landing-manager-form-grid select,
.ss-landing-manager-form-grid textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--ss-line);
  background: #fff;
  color: inherit;
  padding: 10px 11px;
  font: inherit;
}
.ss-landing-slug-field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; }
.ss-landing-slug-field small {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--ss-line);
  border-right: 0;
  background: rgba(16,40,58,.05);
  white-space: nowrap;
}
.ss-landing-manager-image-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.ss-landing-manager-image-preview { margin-top: 10px; max-width: 460px; border: 1px solid var(--ss-line); padding: 6px; background: #fff; }
.ss-landing-manager-image-preview img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.ss-landing-editor-field .wp-editor-wrap { background: #fff; }
.ss-landing-indexing-field {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--ss-line);
  background: rgba(16,40,58,.035);
}
.ss-landing-indexing-field input { margin-top: 4px; }
.ss-landing-indexing-field span { margin: 0 !important; }
.ss-landing-indexing-field small { display: block; margin-top: 3px; font-weight: 400; opacity: .75; }
.ss-landing-share-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  margin: 0 20px 20px;
  padding: 16px;
  border: 1px solid var(--ss-line);
  background: rgba(35,153,187,.07);
}
.ss-landing-share-panel > div { min-width: 0; }
.ss-landing-share-panel span { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.ss-landing-share-panel code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.ss-manager-landings .ss-landing-manager-note:last-child { margin: 0 20px 20px; }


.ss-landing-manager-cta-field { border: 1px solid var(--ss-line); background: rgba(16,40,58,.025); padding: 14px; }
.ss-landing-manager-cta-head { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 10px; }
.ss-landing-manager-cta-head > span > strong { display: block; font-size: 13px; }
.ss-landing-manager-cta-head > span > small { display: block; margin-top: 3px; opacity: .72; font-weight: 400; }
.ss-landing-manager-cta-rows { display: grid; gap: 10px; }
.ss-landing-manager-cta-row { display: grid; grid-template-columns: minmax(150px,.8fr) minmax(220px,1.4fr) 120px auto; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--ss-line); background: #fff; }
.ss-landing-manager-cta-row label > span { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .72; }
.ss-landing-manager-cta-row input, .ss-landing-manager-cta-row select { width: 100%; min-height: 42px; border: 1px solid var(--ss-line); background: #fff; color: inherit; padding: 9px 10px; font: inherit; }
.ss-landing-manager-cta-row .landingCtaRemove { min-height: 42px; }

.ss-landing-manager-social-field { border: 1px solid var(--ss-line); background: rgba(16,40,58,.025); padding: 14px; }
.ss-landing-manager-social-head { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 10px; }
.ss-landing-manager-social-head > span > strong { display: block; font-size: 13px; }
.ss-landing-manager-social-head > span > small { display: block; margin-top: 3px; opacity: .72; font-weight: 400; }
.ss-landing-manager-social-rows { display: grid; gap: 10px; }
.ss-landing-manager-social-row { display: grid; grid-template-columns: minmax(130px,.6fr) minmax(160px,.8fr) minmax(240px,1.4fr) auto; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--ss-line); background: #fff; }
.ss-landing-manager-social-row label > span { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .72; }
.ss-landing-manager-social-row input, .ss-landing-manager-social-row select { width: 100%; min-height: 42px; border: 1px solid var(--ss-line); background: #fff; color: inherit; padding: 9px 10px; font: inherit; }
.ss-landing-manager-social-row .landingSocialRemove { min-height: 42px; }

/* Standalone /go/ landing pages */
body.ss26-landing-page { min-height: 100vh; background: var(--ss-foam); }
.ss-landing-preview-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  gap: 10px 18px;
  padding: 9px var(--ss-pad);
  background: #10283a;
  color: #fff;
  font-size: 13px;
}
.ss-landing-preview-bar strong { text-transform: uppercase; letter-spacing: .08em; }
.ss-landing-shell { width: min(1120px, calc(100% - 36px)); margin: 0 auto; padding: 28px 0 54px; }
.ss-landing-brand { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 24px; }
.ss-landing-brand a { display: inline-flex; align-items: center; }
.ss-landing-brand img { display: block; width: 88px; max-width: 24vw; height: auto; }
.ss-landing-card {
  overflow: hidden;
  border: 1px solid var(--ss-ink);
  background: var(--ss-paper);
  box-shadow: 14px 14px 0 var(--ss-sea);
}
.ss-landing-hero { aspect-ratio: 16 / 7; background: var(--ss-ink); overflow: hidden; }
.ss-landing-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ss-landing-copy { max-width: 880px; margin: 0 auto; padding: clamp(30px, 6vw, 72px); }
.ss-landing-copy h1,
.ss-landing-expired h1 { margin: 7px 0 18px; font-size: clamp(40px, 7vw, 78px); line-height: .98; letter-spacing: -.04em; }
.ss-landing-intro { margin: 0 0 32px; font-size: clamp(20px, 2.7vw, 28px); line-height: 1.35; font-weight: 600; }
.ss-landing-body { font-size: 18px; line-height: 1.65; }
.ss-landing-body > :first-child { margin-top: 0; }
.ss-landing-body > :last-child { margin-bottom: 0; }
.ss-landing-body h2 { margin-top: 1.6em; font-size: clamp(28px, 4vw, 42px); line-height: 1.05; }
.ss-landing-body h3 { margin-top: 1.5em; font-size: 26px; }
.ss-landing-body img { max-width: 100%; height: auto; }
.ss-landing-cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.ss-landing-cta .ss-btn { display: inline-flex; font-size: 17px; padding: 14px 20px; }

.ss-landing-socials { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.ss-landing-social-link { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1px solid currentColor; color: inherit; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.ss-landing-social-link:hover, .ss-landing-social-link:focus-visible { transform: translateY(-2px); box-shadow: 4px 4px 0 var(--ss-sky); }
.ss-landing-social-platform { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.ss-landing-social-link strong { font-size: 15px; overflow-wrap: anywhere; }
.ss-landing-text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.ss-landing-secondary { margin: 42px 0 0; }
.ss-landing-secondary img { display: block; width: 100%; height: auto; border: 1px solid var(--ss-ink); box-shadow: 8px 8px 0 var(--ss-sky); }
.ss-landing-expired {
  max-width: 760px;
  margin: 70px auto;
  padding: clamp(30px, 6vw, 64px);
  border: 1px solid var(--ss-ink);
  background: var(--ss-paper);
  box-shadow: 12px 12px 0 var(--ss-sea);
  text-align: center;
}
.ss-landing-expired p:not(.ss-eyebrow) { font-size: 20px; }

@media (max-width: 880px) {
  .ss-manager-landings-layout { grid-template-columns: 1fr; }
  .ss-landing-manager-sidebar { position: static; }
  .ss-manager-landings-head { display: grid; }
  .ss-manager-landings-head-actions { justify-content: flex-start; }
}
@media (max-width: 680px) {
  .ss-landing-manager-form-grid { grid-template-columns: 1fr; padding: 15px; }
  .ss-landing-manager-form-grid > .is-wide { grid-column: auto; }
  .ss-landing-manager-image-controls,
  .ss-landing-share-panel { grid-template-columns: 1fr; }
  .ss-landing-manager-cta-head { display: grid; }
  .ss-landing-manager-cta-row { grid-template-columns: 1fr; }
  .ss-landing-manager-social-head { display: grid; }
  .ss-landing-manager-social-row { grid-template-columns: 1fr; }
  .ss-landing-slug-field { grid-template-columns: 1fr; }
  .ss-landing-slug-field small { border-right: 1px solid var(--ss-line); border-bottom: 0; padding: 8px 10px; }
  .ss-landing-manager-editor-head { display: grid; }
  .ss-landing-manager-editor-actions { justify-content: flex-start; }
  .ss-landing-manager-note { display: grid; }
  .ss-landing-preview-bar { display: grid; gap: 2px; text-align: center; }
  .ss-landing-shell { width: min(100% - 24px, 1120px); padding-top: 18px; }
  .ss-landing-copy { padding: 28px 22px 34px; }
  .ss-landing-card { box-shadow: 8px 8px 0 var(--ss-sea); }
}
.ss-landing-status-field {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--ss-line);
  background: rgba(16,40,58,.035);
}
.ss-landing-status-field > span { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.ss-landing-status-field strong { display: block; font-size: 16px; }
.ss-landing-status-field small { display: block; margin-top: 2px; opacity: .7; }


/* v2.74.82 — visual-first Manager landing pages */
.ss-landing-manager-gallery-field {
  border: 1px solid var(--ss-line);
  background: rgba(16,40,58,.025);
  padding: 14px;
}
.ss-landing-manager-gallery-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}
.ss-landing-manager-gallery-head > span > strong { display: block; font-size: 13px; }
.ss-landing-manager-gallery-head > span > small { display: block; margin-top: 3px; opacity: .72; font-weight: 400; }
.ss-landing-manager-media-rows,
.ss-landing-manager-tile-rows { display: grid; gap: 10px; }
.ss-landing-manager-media-row {
  display: grid;
  grid-template-columns: 92px minmax(220px,1fr) auto auto;
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--ss-line);
  background: #fff;
}
.ss-landing-manager-media-row label > span,
.ss-landing-manager-tile-row label > span {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .72;
}
.ss-landing-manager-media-row input,
.ss-landing-manager-tile-row input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--ss-line);
  background: #fff;
  color: inherit;
  padding: 9px 10px;
  font: inherit;
}
.ss-landing-manager-row-thumb {
  width: 92px;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--ss-line);
  background: rgba(16,40,58,.06);
}
.ss-landing-manager-row-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ss-landing-manager-row-thumb--tile { width: 112px; height: 88px; }
.ss-landing-manager-tile-row {
  display: grid;
  grid-template-columns: 112px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--ss-line);
  background: #fff;
}
.ss-landing-manager-tile-fields {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 8px;
}
.ss-landing-manager-tile-actions { display: grid; gap: 8px; align-content: center; }
.ss-landing-manager-media-row .ss-btn,
.ss-landing-manager-media-row .ss-manager-subtle-action,
.ss-landing-manager-tile-actions .ss-btn,
.ss-landing-manager-tile-actions .ss-manager-subtle-action { min-height: 42px; white-space: nowrap; }

/* Visual public landing-page layout */
body.ss26-landing-page--visual { background: #0b1720; }
.ss-landing-visual-shell { min-height: 100vh; background: var(--ss-foam); }
.ss-landing-hero-stage {
  position: relative;
  min-height: min(88vh, 920px);
  height: clamp(620px, 88vh, 920px);
  overflow: hidden;
  background: #10283a;
  color: #fff;
}
.ss-landing-hero-stage.is-no-image {
  background:
    radial-gradient(circle at 72% 22%, rgba(35,153,187,.42), transparent 35%),
    linear-gradient(145deg, #10283a 0%, #173b52 55%, #0c1c28 100%);
}
.ss-landing-hero-slides,
.ss-landing-hero-shade {
  position: absolute;
  inset: 0;
}
.ss-landing-hero-slide {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 1.15s ease, transform 7s ease;
}
.ss-landing-hero-slide.is-active { opacity: 1; transform: scale(1.045); }
.ss-landing-hero-shade {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(5,16,24,.72) 0%, rgba(5,16,24,.34) 52%, rgba(5,16,24,.18) 100%),
    linear-gradient(0deg, rgba(5,16,24,.62) 0%, transparent 45%);
}
.ss-landing-brand--overlay {
  position: absolute;
  z-index: 5;
  top: clamp(18px,3vw,36px);
  left: clamp(18px,4vw,56px);
  margin: 0;
}
.ss-landing-brand--overlay a,
.ss-landing-brand--overlay > img {
  display: inline-flex;
  padding: 9px 10px;
  background: rgba(255,253,247,.93);
  box-shadow: 0 8px 30px rgba(0,0,0,.16);
  backdrop-filter: blur(8px);
}
.ss-landing-brand--overlay img {
  display: block;
  width: clamp(68px,7vw,92px);
  max-width: none;
  height: auto;
}
.ss-landing-brand--overlay > img { width: clamp(88px,9vw,112px); }
.ss-landing-brand--overlay > img { object-fit: contain; }
.ss-landing-brand--overlay a img { padding: 0; background: transparent; box-shadow: none; }
.ss-landing-hero-copy {
  position: absolute;
  z-index: 4;
  left: clamp(22px,7vw,108px);
  right: clamp(22px,8vw,130px);
  bottom: clamp(62px,11vh,130px);
  max-width: 1050px;
}
.ss-landing-hero-eyebrow {
  margin: 0 0 12px;
  font-size: clamp(12px,1.2vw,15px);
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.ss-landing-hero-copy h1 {
  margin: 0;
  max-width: 1000px;
  color: #fff;
  font-size: clamp(52px,9.2vw,138px);
  line-height: .86;
  letter-spacing: -.055em;
  text-wrap: balance;
  text-shadow: 0 3px 24px rgba(0,0,0,.34);
}
.ss-landing-hero-subheading {
  max-width: 820px;
  margin: clamp(18px,2.4vw,30px) 0 0;
  color: #fff;
  font-size: clamp(20px,2.3vw,32px);
  line-height: 1.24;
  font-weight: 650;
  text-shadow: 0 2px 18px rgba(0,0,0,.38);
}
.ss-landing-slide-dots {
  position: absolute;
  z-index: 5;
  right: clamp(22px,4vw,58px);
  bottom: clamp(24px,4vw,48px);
  display: flex;
  gap: 7px;
}
.ss-landing-slide-dots span {
  width: 22px;
  height: 3px;
  background: rgba(255,255,255,.42);
  transition: width .35s ease, background .35s ease;
}
.ss-landing-slide-dots span.is-active { width: 42px; background: #fff; }

.ss-landing-after-hero {
  padding: clamp(28px,5vw,72px) clamp(16px,4vw,58px) clamp(50px,7vw,96px);
  background: var(--ss-foam);
}
.ss-landing-tile-grid {
  width: min(1500px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(12px,1.8vw,26px);
}
.ss-landing-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid rgba(16,40,58,.75);
  background: #10283a;
  color: #fff;
  text-decoration: none;
  transform: translateY(0);
  box-shadow: 0 0 0 rgba(16,40,58,0);
  transition: transform .28s ease, box-shadow .28s ease;
}
.ss-landing-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}
.ss-landing-tile-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5,16,24,.72) 0%, rgba(5,16,24,.08) 52%, transparent 76%);
  opacity: .25;
  transition: opacity .3s ease;
}
.ss-landing-tile-caption {
  position: absolute;
  z-index: 2;
  left: clamp(14px,2vw,24px);
  right: clamp(14px,2vw,24px);
  bottom: clamp(14px,2vw,22px);
  color: #fff;
  font-size: clamp(17px,1.5vw,23px);
  font-weight: 800;
  line-height: 1.05;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .28s ease, transform .28s ease;
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
}
.ss-landing-tile:hover,
.ss-landing-tile:focus-visible {
  transform: translateY(-6px);
  box-shadow: 9px 9px 0 var(--ss-sea);
}
.ss-landing-tile:hover img,
.ss-landing-tile:focus-visible img { transform: scale(1.055); }
.ss-landing-tile:hover .ss-landing-tile-shade,
.ss-landing-tile:focus-visible .ss-landing-tile-shade { opacity: 1; }
.ss-landing-tile:hover .ss-landing-tile-caption,
.ss-landing-tile:focus-visible .ss-landing-tile-caption {
  opacity: 1;
  transform: translateY(0);
}
.ss-landing-lower-content {
  width: min(980px, 100%);
  margin: clamp(42px,7vw,88px) auto 0;
  padding: clamp(28px,5vw,64px);
  border: 1px solid var(--ss-ink);
  background: var(--ss-paper);
  box-shadow: 12px 12px 0 var(--ss-sea);
}
.ss-landing-lower-content .ss-landing-body { font-size: 18px; line-height: 1.65; }
.ss-landing-lower-content .ss-landing-cta { margin-top: 30px; }
.ss-landing-shell--expired { padding-top: 28px; }
.ss-landing-brand--expired { margin-bottom: 24px; }

@media (max-width: 1080px) {
  .ss-landing-tile-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .ss-landing-manager-tile-fields { grid-template-columns: 1fr 1fr; }
  .ss-landing-manager-tile-fields .is-image { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .ss-landing-manager-gallery-head { display: grid; }
  .ss-landing-manager-media-row,
  .ss-landing-manager-tile-row { grid-template-columns: 1fr; align-items: stretch; }
  .ss-landing-manager-row-thumb,
  .ss-landing-manager-row-thumb--tile { width: 100%; height: 160px; }
  .ss-landing-manager-tile-fields { grid-template-columns: 1fr; }
  .ss-landing-manager-tile-fields .is-image { grid-column: auto; }
  .ss-landing-manager-tile-actions { grid-template-columns: 1fr auto; }
  .ss-landing-hero-stage {
    min-height: 78svh;
    height: 78svh;
  }
  .ss-landing-hero-copy { bottom: 58px; }
  .ss-landing-hero-copy h1 { font-size: clamp(46px,15vw,86px); }
  .ss-landing-hero-subheading { font-size: clamp(18px,5.2vw,25px); }
  .ss-landing-tile-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 480px) {
  .ss-landing-tile-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ss-landing-tile-caption { font-size: 16px; }
  .ss-landing-after-hero { padding-left: 10px; padding-right: 10px; }
  .ss-landing-lower-content { margin-top: 36px; padding: 24px 18px; box-shadow: 7px 7px 0 var(--ss-sea); }
}
@media (hover: none), (pointer: coarse) {
  .ss-landing-tile-shade { opacity: .72; }
  .ss-landing-tile-caption { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-landing-hero-slide,
  .ss-landing-tile,
  .ss-landing-tile img,
  .ss-landing-tile-shade,
  .ss-landing-tile-caption { transition: none !important; }
  .ss-landing-hero-slide { transform: none; }
  .ss-landing-hero-slide.is-active { transform: none; }
}

/* v2.74.83 — landing tiles overlay the hero + transparent studio mark */
.ss-landing-hero-stage.has-overlay-tiles {
  min-height: min(94vh, 1040px);
  height: clamp(760px, 94vh, 1040px);
}
.ss-landing-brand--overlay a,
.ss-landing-brand--overlay > img {
  padding: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.ss-landing-brand--overlay img {
  width: clamp(72px, 7vw, 98px);
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.5));
}
.ss-landing-brand--overlay > img { width: clamp(72px, 7vw, 98px); }

.ss-landing-hero-copy.has-overlay-tiles {
  top: clamp(150px, 18vh, 205px);
  bottom: auto;
  max-width: 1050px;
}
.ss-landing-hero-copy.has-overlay-tiles h1 {
  font-size: clamp(46px, 7.5vw, 112px);
}
.ss-landing-hero-copy.has-overlay-tiles .ss-landing-hero-subheading {
  max-width: 760px;
  font-size: clamp(18px, 2vw, 28px);
}

.ss-landing-hero-tiles {
  position: absolute;
  z-index: 5;
  left: clamp(18px, 3vw, 48px);
  right: clamp(18px, 3vw, 48px);
  bottom: clamp(24px, 3.2vw, 42px);
}
.ss-landing-tile-grid.ss-landing-tile-grid--overlay {
  width: min(1320px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, 96px);
  justify-content: center;
  gap: 10px;
}
.ss-landing-tile.ss-landing-tile--overlay {
  width: 96px;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 5px 18px rgba(0,0,0,.22);
  background: #10283a;
}
.ss-landing-tile.ss-landing-tile--overlay .ss-landing-tile-caption {
  left: 8px;
  right: 8px;
  bottom: 8px;
  font-size: 12px;
  line-height: 1.05;
  letter-spacing: -.01em;
}
.ss-landing-tile.ss-landing-tile--overlay:hover,
.ss-landing-tile.ss-landing-tile--overlay:focus-visible {
  transform: translateY(-5px) scale(1.035);
  box-shadow: 5px 5px 0 var(--ss-sea), 0 10px 24px rgba(0,0,0,.3);
}
.ss-landing-hero-stage.has-overlay-tiles .ss-landing-slide-dots {
  top: clamp(26px, 3vw, 42px);
  bottom: auto;
}

/* If there is no text/buttons/secondary image there is deliberately no block beneath the hero. */
.ss-landing-after-hero { position: relative; z-index: 1; }

@media (max-width: 1080px) {
  .ss-landing-hero-stage.has-overlay-tiles {
    min-height: 820px;
    height: 92svh;
    max-height: 940px;
  }
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay {
    grid-template-columns: repeat(auto-fit, 84px);
    gap: 8px;
  }
  .ss-landing-tile.ss-landing-tile--overlay { width: 84px; }
  .ss-landing-hero-copy.has-overlay-tiles {
    top: clamp(130px, 16vh, 170px);
  }
}

@media (max-width: 760px) {
  .ss-landing-hero-stage.has-overlay-tiles {
    min-height: 82svh;
    height: 82svh;
    max-height: none;
  }
  .ss-landing-brand--overlay img,
  .ss-landing-brand--overlay > img { width: 68px; }
  .ss-landing-hero-copy.has-overlay-tiles {
    top: 118px;
    left: 20px;
    right: 20px;
  }
  .ss-landing-hero-copy.has-overlay-tiles h1 {
    font-size: clamp(42px, 13vw, 74px);
  }
  .ss-landing-hero-copy.has-overlay-tiles .ss-landing-hero-subheading {
    font-size: clamp(17px, 4.8vw, 23px);
  }
  .ss-landing-hero-tiles {
    left: 0;
    right: 0;
    bottom: 18px;
    padding: 0 16px 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay {
    width: max-content;
    margin: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 88px;
    grid-template-columns: none;
    justify-content: start;
    gap: 9px;
  }
  .ss-landing-tile.ss-landing-tile--overlay { width: 88px; }
  .ss-landing-tile.ss-landing-tile--overlay .ss-landing-tile-caption {
    font-size: 11px;
  }
  .ss-landing-hero-stage.has-overlay-tiles .ss-landing-slide-dots {
    top: 28px;
    right: 20px;
  }
}

@media (max-width: 480px) {
  .ss-landing-hero-stage.has-overlay-tiles {
    min-height: 78svh;
    height: 78svh;
  }
  .ss-landing-hero-copy.has-overlay-tiles { top: 108px; }
  .ss-landing-hero-tiles { bottom: 14px; }
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay { grid-auto-columns: 80px; }
  .ss-landing-tile.ss-landing-tile--overlay { width: 80px; }
}

/* Keep enough vertical breathing room when a desktop landing page uses many overlay tiles. */
@media (min-width: 761px) {
  .ss-landing-hero-stage.has-overlay-tiles {
    min-height: 900px;
    height: max(94vh, 900px);
    max-height: 1100px;
  }
}


/* v2.74.84 — centred visual landing page + all mobile tiles visible */
@media (min-width: 761px) {
  .ss-landing-hero-stage.has-overlay-tiles {
    min-height: 940px;
    height: max(96vh, 940px);
    max-height: none;
  }
  .ss-landing-hero-copy.has-overlay-tiles {
    top: clamp(118px, 14vh, 170px);
    left: 50%;
    right: auto;
    width: min(1180px, calc(100% - 96px));
    max-width: 1180px;
    transform: translateX(-50%);
    text-align: center;
  }
  .ss-landing-hero-copy.has-overlay-tiles h1 {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
  .ss-landing-hero-copy.has-overlay-tiles .ss-landing-hero-subheading {
    margin-left: auto;
    margin-right: auto;
  }
  .ss-landing-hero-copy.has-overlay-tiles .ss-landing-hero-eyebrow {
    text-align: center;
  }
  .ss-landing-hero-tiles {
    left: 50%;
    right: auto;
    bottom: clamp(34px, 4vh, 54px);
    width: min(1500px, calc(100% - 72px));
    transform: translateX(-50%);
  }
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay {
    width: 100%;
    grid-template-columns: repeat(auto-fit, 122px);
    justify-content: center;
    gap: 14px;
  }
  .ss-landing-tile.ss-landing-tile--overlay {
    width: 122px;
  }
  .ss-landing-tile.ss-landing-tile--overlay .ss-landing-tile-caption {
    left: 10px;
    right: 10px;
    bottom: 10px;
    font-size: 14px;
  }
}

@media (max-width: 1080px) and (min-width: 761px) {
  .ss-landing-hero-stage.has-overlay-tiles {
    min-height: 980px;
    height: auto;
  }
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay {
    grid-template-columns: repeat(auto-fit, 112px);
    gap: 11px;
  }
  .ss-landing-tile.ss-landing-tile--overlay { width: 112px; }
}

@media (max-width: 760px) {
  /* The backdrop fills the complete content area; title + every tile sit centrally over it. */
  .ss-landing-hero-stage.has-overlay-tiles {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100svh;
    height: auto;
    max-height: none;
    padding: 108px 14px 28px;
    overflow: hidden;
  }
  .ss-landing-hero-shade {
    background:
      linear-gradient(0deg, rgba(5,16,24,.58) 0%, rgba(5,16,24,.28) 55%, rgba(5,16,24,.42) 100%),
      linear-gradient(90deg, rgba(5,16,24,.18), rgba(5,16,24,.18));
  }
  .ss-landing-hero-copy.has-overlay-tiles {
    position: relative;
    z-index: 4;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: min(100%, 620px);
    max-width: none;
    margin: 0 auto;
    text-align: center;
  }
  .ss-landing-hero-copy.has-overlay-tiles .ss-landing-hero-eyebrow {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .ss-landing-hero-copy.has-overlay-tiles h1 {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(44px, 13vw, 76px);
    line-height: .9;
  }
  .ss-landing-hero-copy.has-overlay-tiles .ss-landing-hero-subheading {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(17px, 4.7vw, 23px);
  }
  .ss-landing-hero-tiles {
    position: relative;
    z-index: 5;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 430px;
    margin: 30px auto 0;
    padding: 0;
    overflow: visible;
  }
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: center;
    gap: 10px;
  }
  .ss-landing-tile.ss-landing-tile--overlay {
    width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;
  }
  .ss-landing-tile.ss-landing-tile--overlay .ss-landing-tile-caption {
    left: 8px;
    right: 8px;
    bottom: 8px;
    font-size: clamp(11px, 3.2vw, 14px);
  }
  .ss-landing-hero-stage.has-overlay-tiles .ss-landing-slide-dots {
    top: 28px;
    right: 18px;
  }
}

@media (max-width: 390px) {
  .ss-landing-hero-stage.has-overlay-tiles { padding-left: 10px; padding-right: 10px; }
  .ss-landing-hero-tiles { max-width: 370px; }
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay { gap: 8px; }
}

/* v2.74.85 — keep landing-page tile editor compact after media upload */
.ss-landing-manager-tile-row {
  grid-template-columns: minmax(150px, 180px) minmax(180px, 1fr) minmax(180px, 1fr) auto;
  align-items: end;
}
.ss-landing-manager-tile-image {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.ss-landing-manager-tile-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .72;
}
.ss-landing-manager-tile-image .ss-landing-manager-row-thumb--tile {
  width: 100%;
  height: 96px;
}
.ss-landing-manager-tile-image .landingTileChoose {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding-left: 10px;
  padding-right: 10px;
}
.ss-landing-manager-tile-row > label {
  min-width: 0;
}
.ss-landing-manager-tile-row > label input {
  min-width: 0;
}
.ss-landing-manager-tile-actions {
  min-width: max-content;
}
.ss-landing-manager-tile-actions .landingTileRemove {
  min-height: 42px;
}
@media (max-width: 1080px) {
  .ss-landing-manager-tile-row {
    grid-template-columns: minmax(150px, 180px) minmax(0, 1fr) minmax(0, 1fr);
  }
  .ss-landing-manager-tile-actions {
    grid-column: 2 / -1;
    justify-self: end;
  }
}
@media (max-width: 760px) {
  .ss-landing-manager-tile-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .ss-landing-manager-tile-image .ss-landing-manager-row-thumb--tile {
    height: 160px;
  }
  .ss-landing-manager-tile-actions {
    grid-column: auto;
    justify-self: stretch;
  }
  .ss-landing-manager-tile-actions .landingTileRemove {
    width: 100%;
  }
}


/* v2.74.86 — larger, higher centred landing tiles + transparent logo tiles */
.ss-landing-tile.ss-landing-tile--overlay {
  background: transparent;
}

@media (min-width: 761px) {
  /* Let the hero act as a full backdrop while the heading and tiles flow naturally over it. */
  .ss-landing-hero-stage.has-overlay-tiles {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    height: auto;
    max-height: none;
    padding: clamp(102px, 10vh, 132px) clamp(28px, 4vw, 58px) clamp(48px, 6vh, 74px);
  }
  .ss-landing-hero-copy.has-overlay-tiles {
    position: relative;
    z-index: 4;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: min(1180px, 100%);
    max-width: 1180px;
    transform: none;
    margin: 0 auto;
    text-align: center;
  }
  .ss-landing-hero-copy.has-overlay-tiles h1 {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
  .ss-landing-hero-copy.has-overlay-tiles .ss-landing-hero-subheading,
  .ss-landing-hero-copy.has-overlay-tiles .ss-landing-hero-eyebrow {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .ss-landing-hero-tiles {
    position: relative;
    z-index: 5;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: min(1500px, 100%);
    transform: none;
    margin: clamp(26px, 3.2vh, 38px) auto 0;
  }
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay {
    width: 100%;
    grid-template-columns: repeat(auto-fit, 150px);
    justify-content: center;
    gap: clamp(12px, 1.15vw, 17px);
  }
  .ss-landing-tile.ss-landing-tile--overlay {
    width: 150px;
  }
  .ss-landing-tile.ss-landing-tile--overlay .ss-landing-tile-caption {
    left: 11px;
    right: 11px;
    bottom: 11px;
    font-size: 15px;
  }
}

@media (max-width: 1080px) and (min-width: 761px) {
  .ss-landing-hero-stage.has-overlay-tiles {
    min-height: 100vh;
    height: auto;
    padding-top: 104px;
  }
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay {
    grid-template-columns: repeat(auto-fit, 136px);
    gap: 12px;
  }
  .ss-landing-tile.ss-landing-tile--overlay { width: 136px; }
}

@media (max-width: 760px) {
  /* Two larger columns: every tile remains on the page, with no sideways carousel. */
  .ss-landing-hero-stage.has-overlay-tiles {
    padding-top: 100px;
  }
  .ss-landing-hero-tiles {
    max-width: 500px;
    margin-top: 24px;
  }
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }
  .ss-landing-tile.ss-landing-tile--overlay {
    width: 100%;
  }
  .ss-landing-tile.ss-landing-tile--overlay .ss-landing-tile-caption {
    font-size: clamp(13px, 3.8vw, 16px);
  }
}

@media (max-width: 390px) {
  .ss-landing-hero-tiles { max-width: 380px; }
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay { gap: 9px; }
}

/* Transparent artwork should float over the hero rather than sitting on a dark card. */
.ss-landing-tile.ss-landing-tile--overlay .ss-landing-tile-shade {
  opacity: 0;
}
.ss-landing-tile.ss-landing-tile--overlay:hover .ss-landing-tile-shade,
.ss-landing-tile.ss-landing-tile--overlay:focus-visible .ss-landing-tile-shade {
  opacity: .9;
}
@media (hover: none), (pointer: coarse) {
  .ss-landing-tile.ss-landing-tile--overlay .ss-landing-tile-shade { opacity: 0; }
  .ss-landing-tile.ss-landing-tile--overlay .ss-landing-tile-caption {
    text-shadow: 0 2px 12px rgba(0,0,0,.8);
  }
}

/* v2.74.87 — scene-wall landing page: hero statement + mixed promoter tiles */
body.ss26-landing-page--visual { background: #09131a; }

/* Manager: image + destination + caption + size + remove. */
.ss-landing-manager-tile-row {
  grid-template-columns: minmax(150px, 180px) minmax(170px, .9fr) minmax(220px, 1.2fr) minmax(118px, 140px) auto;
  align-items: end;
}
.ss-landing-manager-tile-row select { width: 100%; min-height: 42px; }

/* The photograph/slideshow is atmosphere; the content is the scene wall. */
.ss-landing-hero-stage.has-overlay-tiles {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  height: auto;
  max-height: none;
  padding: clamp(112px, 11vh, 148px) clamp(24px, 4vw, 60px) clamp(56px, 7vh, 88px);
  overflow: hidden;
}
.ss-landing-hero-shade {
  background:
    radial-gradient(circle at 50% 30%, rgba(5,16,24,.12) 0%, rgba(5,16,24,.28) 43%, rgba(5,16,24,.58) 100%),
    linear-gradient(0deg, rgba(5,16,24,.58) 0%, rgba(5,16,24,.18) 55%, rgba(5,16,24,.38) 100%);
}
.ss-landing-brand--overlay {
  top: clamp(18px, 2.7vw, 34px);
  left: clamp(18px, 3.4vw, 48px);
}
.ss-landing-brand--overlay img,
.ss-landing-brand--overlay > img {
  width: clamp(72px, 6.2vw, 94px);
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.56));
}
.ss-landing-hero-copy.has-overlay-tiles {
  position: relative;
  z-index: 5;
  inset: auto;
  width: min(1180px, 100%);
  max-width: 1180px;
  transform: none;
  margin: 0 auto;
  text-align: center;
}
.ss-landing-hero-copy.has-overlay-tiles .ss-landing-hero-eyebrow {
  margin: 0 auto 12px;
  text-align: center;
  font-size: clamp(12px, 1.1vw, 15px);
  letter-spacing: .18em;
}
.ss-landing-hero-copy.has-overlay-tiles h1 {
  max-width: 1120px;
  margin: 0 auto;
  font-size: clamp(54px, 7.4vw, 116px);
  line-height: .88;
  letter-spacing: -.052em;
  text-align: center;
}
.ss-landing-hero-copy.has-overlay-tiles .ss-landing-hero-subheading {
  max-width: 850px;
  margin: clamp(16px, 2vw, 26px) auto 0;
  font-size: clamp(18px, 1.8vw, 27px);
  line-height: 1.25;
  text-align: center;
}

.ss-landing-hero-tiles {
  position: relative;
  z-index: 5;
  inset: auto;
  width: min(1320px, 100%);
  max-width: 1320px;
  transform: none;
  margin: clamp(34px, 4.6vh, 58px) auto 0;
}
.ss-landing-tile-grid.ss-landing-tile-grid--overlay {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-auto-rows: clamp(88px, 7.7vw, 112px);
  grid-auto-flow: dense;
  gap: clamp(10px, 1.15vw, 16px);
  align-items: stretch;
  justify-content: center;
}
.ss-landing-tile.ss-landing-tile--overlay {
  width: auto;
  min-width: 0;
  height: auto;
  aspect-ratio: auto;
  grid-column: span 2;
  grid-row: span 2;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  isolation: isolate;
}
.ss-landing-tile.ss-landing-tile--overlay.ss-landing-tile--wide {
  grid-column: span 4;
  grid-row: span 2;
}
.ss-landing-tile.ss-landing-tile--overlay.ss-landing-tile--featured {
  grid-column: span 4;
  grid-row: span 4;
}
.ss-landing-tile.ss-landing-tile--overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.58);
  box-shadow: 0 9px 28px rgba(0,0,0,.28);
  transform: scale(1.001);
  transition: transform .42s cubic-bezier(.2,.7,.2,1), filter .32s ease, box-shadow .32s ease;
}
.ss-landing-tile.ss-landing-tile--overlay .ss-landing-tile-shade {
  inset: 0;
  opacity: 0;
  background: linear-gradient(0deg, rgba(3,10,15,.86) 0%, rgba(3,10,15,.18) 58%, rgba(3,10,15,.02) 100%);
  transition: opacity .28s ease;
}
.ss-landing-tile.ss-landing-tile--overlay .ss-landing-tile-caption {
  left: clamp(12px, 1.5vw, 20px);
  right: clamp(12px, 1.5vw, 20px);
  bottom: clamp(12px, 1.5vw, 18px);
  font-size: clamp(15px, 1.3vw, 20px);
  line-height: 1.08;
  opacity: 0;
  transform: translateY(10px);
  text-shadow: 0 2px 14px rgba(0,0,0,.7);
}
.ss-landing-tile.ss-landing-tile--overlay:hover,
.ss-landing-tile.ss-landing-tile--overlay:focus-visible {
  z-index: 8;
  transform: translateY(-7px) scale(1.025) rotate(-.25deg);
  box-shadow: none;
}
.ss-landing-tile.ss-landing-tile--overlay:nth-child(2n):hover,
.ss-landing-tile.ss-landing-tile--overlay:nth-child(2n):focus-visible {
  transform: translateY(-7px) scale(1.025) rotate(.25deg);
}
.ss-landing-tile.ss-landing-tile--overlay:hover img,
.ss-landing-tile.ss-landing-tile--overlay:focus-visible img {
  transform: scale(1.025);
  box-shadow: 0 18px 42px rgba(0,0,0,.42);
  filter: saturate(1.05) contrast(1.03);
}
.ss-landing-tile.ss-landing-tile--overlay:hover .ss-landing-tile-shade,
.ss-landing-tile.ss-landing-tile--overlay:focus-visible .ss-landing-tile-shade { opacity: 1; }
.ss-landing-tile.ss-landing-tile--overlay:hover .ss-landing-tile-caption,
.ss-landing-tile.ss-landing-tile--overlay:focus-visible .ss-landing-tile-caption {
  opacity: 1;
  transform: translateY(0);
}
.ss-landing-hero-stage.has-overlay-tiles .ss-landing-slide-dots {
  top: clamp(28px, 3vw, 42px);
  right: clamp(20px, 3.2vw, 48px);
  bottom: auto;
}

@media (max-width: 1080px) and (min-width: 761px) {
  .ss-landing-manager-tile-row {
    grid-template-columns: minmax(150px, 180px) minmax(0, 1fr) minmax(0, 1fr) minmax(118px, 140px);
  }
  .ss-landing-manager-tile-actions { grid-column: 2 / -1; justify-self: end; }
  .ss-landing-hero-stage.has-overlay-tiles { padding-top: 112px; }
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-auto-rows: 92px;
    gap: 11px;
  }
}

@media (max-width: 760px) {
  .ss-landing-manager-tile-row { grid-template-columns: 1fr; }
  .ss-landing-manager-tile-actions { grid-column: auto; justify-self: stretch; }

  .ss-landing-hero-stage.has-overlay-tiles {
    min-height: 100svh;
    height: auto;
    padding: 94px 12px 34px;
  }
  .ss-landing-hero-copy.has-overlay-tiles { width: min(100%, 620px); }
  .ss-landing-hero-copy.has-overlay-tiles h1 {
    font-size: clamp(46px, 13.5vw, 78px);
    line-height: .9;
  }
  .ss-landing-hero-copy.has-overlay-tiles .ss-landing-hero-subheading {
    max-width: 560px;
    font-size: clamp(17px, 4.8vw, 23px);
  }
  .ss-landing-hero-tiles {
    width: min(100%, 560px);
    max-width: 560px;
    margin-top: 28px;
  }
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 10px;
  }
  .ss-landing-tile.ss-landing-tile--overlay,
  .ss-landing-tile.ss-landing-tile--overlay.ss-landing-tile--wide,
  .ss-landing-tile.ss-landing-tile--overlay.ss-landing-tile--featured {
    width: auto;
    grid-row: auto;
  }
  .ss-landing-tile.ss-landing-tile--overlay { grid-column: span 1; aspect-ratio: 1 / 1; }
  .ss-landing-tile.ss-landing-tile--overlay.ss-landing-tile--wide { grid-column: span 2; aspect-ratio: 2.05 / 1; }
  .ss-landing-tile.ss-landing-tile--overlay.ss-landing-tile--featured { grid-column: span 2; aspect-ratio: 1.45 / 1; }
  .ss-landing-tile.ss-landing-tile--overlay .ss-landing-tile-caption {
    left: 10px;
    right: 10px;
    bottom: 10px;
    font-size: clamp(13px, 3.7vw, 17px);
  }
}

@media (hover: none), (pointer: coarse) {
  .ss-landing-tile.ss-landing-tile--overlay .ss-landing-tile-shade {
    opacity: .48;
    background: linear-gradient(0deg, rgba(3,10,15,.76) 0%, rgba(3,10,15,.05) 54%, transparent 100%);
  }
  .ss-landing-tile.ss-landing-tile--overlay .ss-landing-tile-caption {
    opacity: 1;
    transform: none;
  }
}

/* Keep transparent promoter artwork genuinely floating: no permanent card/border behind it. */
.ss-landing-tile.ss-landing-tile--overlay img {
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.28));
}
.ss-landing-tile.ss-landing-tile--overlay .ss-landing-tile-shade,
.ss-landing-tile.ss-landing-tile--overlay:hover .ss-landing-tile-shade,
.ss-landing-tile.ss-landing-tile--overlay:focus-visible .ss-landing-tile-shade {
  opacity: 0;
}
.ss-landing-tile.ss-landing-tile--overlay .ss-landing-tile-caption {
  width: fit-content;
  max-width: calc(100% - 20px);
  right: auto;
  padding: 7px 9px;
  background: rgba(3,10,15,.78);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.ss-landing-tile.ss-landing-tile--overlay:hover img,
.ss-landing-tile.ss-landing-tile--overlay:focus-visible img {
  box-shadow: none;
  filter: drop-shadow(0 15px 26px rgba(0,0,0,.42)) saturate(1.06) contrast(1.03);
}
@media (hover: none), (pointer: coarse) {
  .ss-landing-tile.ss-landing-tile--overlay .ss-landing-tile-shade { opacity: 0; }
}


/* v2.74.88 — tighter scene wall + luminous hover + fresh preview presentation */
@media (min-width: 1081px) {
  .ss-landing-hero-stage.has-overlay-tiles {
    padding-top: clamp(94px, 9vh, 122px);
  }
  .ss-landing-hero-copy.has-overlay-tiles h1 {
    font-size: clamp(48px, 6.1vw, 94px);
  }
  .ss-landing-hero-tiles {
    width: min(1120px, 92vw);
    max-width: 1120px;
    margin-top: clamp(24px, 3vh, 38px);
  }
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: clamp(56px, 5.15vw, 74px);
    gap: clamp(8px, .8vw, 12px);
  }
  .ss-landing-tile.ss-landing-tile--overlay {
    grid-column: span 2;
    grid-row: span 2;
  }
  .ss-landing-tile.ss-landing-tile--overlay.ss-landing-tile--wide {
    grid-column: span 4;
    grid-row: span 2;
  }
  .ss-landing-tile.ss-landing-tile--overlay.ss-landing-tile--featured {
    grid-column: span 4;
    grid-row: span 4;
  }
}

/* Give linked artwork an unmistakable interactive state without adding a permanent card. */
.ss-landing-tile.ss-landing-tile--overlay {
  transition: transform .34s cubic-bezier(.2,.75,.2,1), filter .34s ease;
}
.ss-landing-tile.ss-landing-tile--overlay::before,
.ss-landing-tile.ss-landing-tile--overlay::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease, transform .38s ease;
}
.ss-landing-tile.ss-landing-tile--overlay::before {
  border: 1px solid rgba(143,210,229,.82);
  box-shadow:
    0 0 10px rgba(35,153,187,.58),
    0 0 26px rgba(35,153,187,.42),
    inset 0 0 16px rgba(143,210,229,.16);
  transform: scale(.94);
}
.ss-landing-tile.ss-landing-tile--overlay::after {
  inset: -14px;
  background: radial-gradient(ellipse at center, rgba(35,153,187,.24) 0%, rgba(35,153,187,.08) 48%, transparent 72%);
  filter: blur(8px);
  z-index: -1;
  transform: scale(.9);
}
.ss-landing-tile.ss-landing-tile--overlay:hover::before,
.ss-landing-tile.ss-landing-tile--overlay:focus-visible::before,
.ss-landing-tile.ss-landing-tile--overlay:hover::after,
.ss-landing-tile.ss-landing-tile--overlay:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}
.ss-landing-tile.ss-landing-tile--overlay:hover,
.ss-landing-tile.ss-landing-tile--overlay:focus-visible {
  transform: translateY(-5px) scale(1.035);
  filter: brightness(1.08);
}
.ss-landing-tile.ss-landing-tile--overlay:nth-child(2n):hover,
.ss-landing-tile.ss-landing-tile--overlay:nth-child(2n):focus-visible {
  transform: translateY(-5px) scale(1.035);
}
.ss-landing-tile.ss-landing-tile--overlay:hover img,
.ss-landing-tile.ss-landing-tile--overlay:focus-visible img {
  transform: scale(1.035);
  filter:
    drop-shadow(0 11px 20px rgba(0,0,0,.38))
    drop-shadow(0 0 10px rgba(143,210,229,.54))
    saturate(1.1)
    contrast(1.04);
}

@media (max-width: 1080px) and (min-width: 761px) {
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-auto-rows: 66px;
    gap: 9px;
  }
}

@media (max-width: 760px) {
  .ss-landing-hero-stage.has-overlay-tiles {
    padding: 84px 10px 28px;
  }
  .ss-landing-hero-copy.has-overlay-tiles h1 {
    font-size: clamp(38px, 11.2vw, 60px);
  }
  .ss-landing-hero-copy.has-overlay-tiles .ss-landing-hero-subheading {
    font-size: clamp(15px, 4.1vw, 19px);
  }
  .ss-landing-hero-tiles {
    width: min(100%, 520px);
    margin-top: 20px;
  }
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }
  .ss-landing-tile.ss-landing-tile--overlay,
  .ss-landing-tile.ss-landing-tile--overlay.ss-landing-tile--wide,
  .ss-landing-tile.ss-landing-tile--overlay.ss-landing-tile--featured {
    grid-row: auto;
  }
  .ss-landing-tile.ss-landing-tile--overlay {
    grid-column: span 1;
    aspect-ratio: 1 / 1;
  }
  .ss-landing-tile.ss-landing-tile--overlay.ss-landing-tile--wide {
    grid-column: span 2;
    aspect-ratio: 2.05 / 1;
  }
  .ss-landing-tile.ss-landing-tile--overlay.ss-landing-tile--featured {
    grid-column: span 2;
    aspect-ratio: 1.15 / 1;
  }
  .ss-landing-tile.ss-landing-tile--overlay .ss-landing-tile-caption {
    left: 5px;
    bottom: 5px;
    max-width: calc(100% - 10px);
    padding: 4px 5px;
    font-size: clamp(9px, 2.55vw, 12px);
    line-height: 1.05;
  }
  .ss-landing-tile.ss-landing-tile--overlay::before,
  .ss-landing-tile.ss-landing-tile--overlay::after {
    display: none;
  }
}

@media (max-width: 380px) {
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay {
    gap: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-landing-tile.ss-landing-tile--overlay,
  .ss-landing-tile.ss-landing-tile--overlay img,
  .ss-landing-tile.ss-landing-tile--overlay::before,
  .ss-landing-tile.ss-landing-tile--overlay::after {
    transition: none !important;
  }
}


/* v2.74.89 — uncropped promoter logos + main-site heading treatment + denser scene wall */
.ss-landing-hero-copy.has-overlay-tiles h1 {
  color: var(--ss-foam);
  text-transform: uppercase;
  font-weight: 900;
  text-shadow: 0 8px 34px rgba(0,0,0,.28);
}
.ss-landing-hero-copy.has-overlay-tiles h1 .ss-landing-title-accent {
  color: var(--ss-sky);
}
.ss-landing-hero-copy.has-overlay-tiles .ss-landing-hero-eyebrow {
  color: rgba(244,240,230,.84);
  text-transform: uppercase;
}
.ss-landing-hero-copy.has-overlay-tiles .ss-landing-hero-subheading {
  color: rgba(244,240,230,.92);
}

/* Promoter artwork is treated as artwork/logo, never as a crop. */
.ss-landing-tile.ss-landing-tile--overlay img {
  object-fit: contain;
  object-position: center;
  max-width: 100%;
  max-height: 100%;
}

/* A more energetic hover: clean cyan aura plus a short light sweep. */
.ss-landing-tile.ss-landing-tile--overlay::before {
  inset: -5px;
  border-radius: 10px;
  border: 1px solid rgba(143,210,229,.92);
  box-shadow:
    0 0 8px rgba(143,210,229,.72),
    0 0 18px rgba(35,153,187,.62),
    0 0 34px rgba(35,153,187,.34);
}
.ss-landing-tile.ss-landing-tile--overlay:hover img,
.ss-landing-tile.ss-landing-tile--overlay:focus-visible img {
  transform: scale(1.055);
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,.42))
    drop-shadow(0 0 7px rgba(244,240,230,.55))
    drop-shadow(0 0 15px rgba(143,210,229,.75))
    saturate(1.08)
    contrast(1.04);
}

@media (min-width: 1081px) {
  .ss-landing-hero-copy.has-overlay-tiles h1 {
    font-size: clamp(46px, 5.7vw, 88px);
  }
  .ss-landing-hero-tiles {
    width: min(1100px, 90vw);
    max-width: 1100px;
    margin-top: clamp(20px, 2.6vh, 32px);
  }
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: clamp(68px, 6.2vw, 86px);
    gap: clamp(7px, .7vw, 10px);
  }
  .ss-landing-tile.ss-landing-tile--overlay {
    grid-column: span 1;
    grid-row: span 1;
  }
  .ss-landing-tile.ss-landing-tile--overlay.ss-landing-tile--wide {
    grid-column: span 2;
    grid-row: span 1;
  }
  .ss-landing-tile.ss-landing-tile--overlay.ss-landing-tile--featured {
    grid-column: span 2;
    grid-row: span 2;
  }
}

@media (max-width: 1080px) and (min-width: 761px) {
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-auto-rows: 72px;
    gap: 8px;
  }
  .ss-landing-tile.ss-landing-tile--overlay { grid-column: span 1; grid-row: span 1; }
  .ss-landing-tile.ss-landing-tile--overlay.ss-landing-tile--wide { grid-column: span 2; grid-row: span 1; }
  .ss-landing-tile.ss-landing-tile--overlay.ss-landing-tile--featured { grid-column: span 2; grid-row: span 2; }
}

@media (max-width: 760px) {
  .ss-landing-hero-copy.has-overlay-tiles h1 {
    font-size: clamp(34px, 10.3vw, 54px);
  }
  .ss-landing-hero-tiles {
    width: min(100%, 430px);
    max-width: 430px;
    margin-top: 17px;
  }
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }
  .ss-landing-tile.ss-landing-tile--overlay {
    grid-column: span 1;
    grid-row: auto;
    aspect-ratio: 1 / 1;
  }
  .ss-landing-tile.ss-landing-tile--overlay.ss-landing-tile--wide {
    grid-column: span 2;
    grid-row: auto;
    aspect-ratio: 2.05 / 1;
  }
  .ss-landing-tile.ss-landing-tile--overlay.ss-landing-tile--featured {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: 1 / 1;
  }
  .ss-landing-tile.ss-landing-tile--overlay .ss-landing-tile-caption {
    padding: 3px 4px;
    font-size: clamp(8px, 2.2vw, 10px);
  }
}

@media (max-width: 380px) {
  .ss-landing-hero-tiles { width: min(100%, 350px); }
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay { gap: 4px; }
}


/* v2.74.90 — larger desktop scene wall + mobile labels + focus-hover interaction */
@media (hover: hover) and (pointer: fine) {
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay {
    isolation: isolate;
  }
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay .ss-landing-tile.ss-landing-tile--overlay {
    transition:
      transform .38s cubic-bezier(.18,.8,.2,1),
      opacity .34s ease,
      filter .34s ease;
    will-change: transform, opacity, filter;
  }
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay:has(.ss-landing-tile:hover) .ss-landing-tile.ss-landing-tile--overlay:not(:hover),
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay:has(.ss-landing-tile:focus-visible) .ss-landing-tile.ss-landing-tile--overlay:not(:focus-visible) {
    opacity: .28;
    filter: saturate(.45) brightness(.72) blur(.35px);
    transform: scale(.94);
  }
  .ss-landing-hero-stage:has(.ss-landing-tile:hover) .ss-landing-hero-slide.is-active,
  .ss-landing-hero-stage:has(.ss-landing-tile:focus-visible) .ss-landing-hero-slide.is-active {
    filter: brightness(.68) saturate(.78);
  }
  .ss-landing-hero-slide {
    transition: opacity 1.2s ease, filter .4s ease;
  }
  .ss-landing-tile.ss-landing-tile--overlay:hover,
  .ss-landing-tile.ss-landing-tile--overlay:focus-visible,
  .ss-landing-tile.ss-landing-tile--overlay:nth-child(2n):hover,
  .ss-landing-tile.ss-landing-tile--overlay:nth-child(2n):focus-visible {
    z-index: 30;
    transform: translateY(-10px) scale(1.15);
    filter: brightness(1.12) saturate(1.12);
  }
  .ss-landing-tile.ss-landing-tile--overlay:hover::before,
  .ss-landing-tile.ss-landing-tile--overlay:focus-visible::before {
    opacity: 1;
    transform: scale(1.04);
    box-shadow:
      0 0 10px rgba(244,240,230,.72),
      0 0 24px rgba(143,210,229,.92),
      0 0 48px rgba(35,153,187,.64),
      0 0 78px rgba(35,153,187,.30);
  }
  .ss-landing-tile.ss-landing-tile--overlay:hover::after,
  .ss-landing-tile.ss-landing-tile--overlay:focus-visible::after {
    opacity: 1;
    transform: scale(1.12);
  }
  .ss-landing-tile.ss-landing-tile--overlay:hover img,
  .ss-landing-tile.ss-landing-tile--overlay:focus-visible img {
    transform: scale(1.08);
    filter:
      drop-shadow(0 18px 30px rgba(0,0,0,.48))
      drop-shadow(0 0 9px rgba(244,240,230,.65))
      drop-shadow(0 0 20px rgba(143,210,229,.92))
      saturate(1.12)
      contrast(1.05);
  }
  .ss-landing-tile.ss-landing-tile--overlay:hover .ss-landing-tile-caption,
  .ss-landing-tile.ss-landing-tile--overlay:focus-visible .ss-landing-tile-caption {
    opacity: 1;
    transform: translateY(0) scale(1.02);
  }
}

@media (min-width: 1081px) {
  .ss-landing-hero-tiles {
    width: min(1200px, 94vw);
    max-width: 1200px;
  }
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-auto-rows: clamp(86px, 7.4vw, 108px);
    gap: clamp(9px, .9vw, 13px);
  }
  .ss-landing-tile.ss-landing-tile--overlay {
    grid-column: span 1;
    grid-row: span 1;
  }
  .ss-landing-tile.ss-landing-tile--overlay.ss-landing-tile--wide {
    grid-column: span 2;
    grid-row: span 1;
  }
  .ss-landing-tile.ss-landing-tile--overlay.ss-landing-tile--featured {
    grid-column: span 2;
    grid-row: span 2;
  }
}

@media (max-width: 760px) {
  .ss-landing-hero-tiles {
    width: min(100%, 390px);
    max-width: 390px;
    margin-top: 14px;
  }
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
  }
  .ss-landing-tile.ss-landing-tile--overlay {
    grid-column: span 1;
    grid-row: auto;
    aspect-ratio: 1 / 1;
  }
  .ss-landing-tile.ss-landing-tile--overlay.ss-landing-tile--wide {
    grid-column: span 2;
    grid-row: auto;
    aspect-ratio: 2.05 / 1;
  }
  .ss-landing-tile.ss-landing-tile--overlay.ss-landing-tile--featured {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: 1 / 1;
  }
  /* Touch has no hover: keep the Manager's label visible at all times. */
  .ss-landing-tile.ss-landing-tile--overlay .ss-landing-tile-caption {
    display: block;
    opacity: 1 !important;
    transform: none !important;
    left: 3px;
    bottom: 3px;
    max-width: calc(100% - 6px);
    padding: 2px 3px;
    font-size: clamp(7px, 1.9vw, 9px);
    line-height: 1.05;
    background: rgba(3,10,15,.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
}

@media (max-width: 380px) {
  .ss-landing-hero-tiles { width: min(100%, 340px); }
  .ss-landing-tile-grid.ss-landing-tile-grid--overlay { gap: 3px; }
}


/* v2.74.91 — smooth scene carousel: permanent captions + swipe/arrow navigation */
.ss-landing-hero-stage.has-overlay-tiles {
  overflow: hidden;
}
.ss-landing-carousel {
  position: relative;
  width: min(1380px, 100%);
  max-width: 1380px;
  margin-top: clamp(26px, 3.6vh, 44px);
  padding: 0 clamp(42px, 4.2vw, 66px);
  overflow: visible;
}
.ss-landing-tile-rail {
  display: flex;
  align-items: flex-start;
  gap: clamp(15px, 1.45vw, 22px);
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  padding: 18px 10px 26px;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.ss-landing-tile-rail::-webkit-scrollbar { display: none; }
.ss-landing-tile.ss-landing-tile--carousel {
  position: relative;
  flex: 0 0 clamp(142px, 12vw, 178px);
  width: clamp(142px, 12vw, 178px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: var(--ss-foam);
  text-decoration: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  scroll-snap-align: center;
  transform-origin: center center;
  transition: transform .34s cubic-bezier(.18,.8,.2,1), opacity .3s ease, filter .3s ease;
}
.ss-landing-tile.ss-landing-tile--carousel.ss-landing-tile--wide {
  flex-basis: clamp(190px, 16vw, 240px);
  width: clamp(190px, 16vw, 240px);
}
.ss-landing-tile.ss-landing-tile--carousel.ss-landing-tile--featured {
  flex-basis: clamp(220px, 19vw, 282px);
  width: clamp(220px, 19vw, 282px);
}
.ss-landing-tile--carousel .ss-landing-tile-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 3px;
  background: transparent;
  border-radius: 10px;
  isolation: isolate;
  transition: transform .34s cubic-bezier(.18,.8,.2,1), filter .32s ease;
}
.ss-landing-tile--carousel.ss-landing-tile--wide .ss-landing-tile-art { aspect-ratio: 1.35 / 1; }
.ss-landing-tile--carousel.ss-landing-tile--featured .ss-landing-tile-art { aspect-ratio: 1.15 / 1; }
.ss-landing-tile--carousel .ss-landing-tile-art::before,
.ss-landing-tile--carousel .ss-landing-tile-art::after {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: -1;
  border-radius: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .34s ease;
}
.ss-landing-tile--carousel .ss-landing-tile-art::before {
  border: 1px solid rgba(244,240,230,.88);
  box-shadow: 0 0 12px rgba(244,240,230,.42), 0 0 28px rgba(143,210,229,.76), 0 0 58px rgba(35,153,187,.48);
}
.ss-landing-tile--carousel .ss-landing-tile-art::after {
  inset: 8%;
  background: radial-gradient(circle, rgba(143,210,229,.34) 0%, rgba(35,153,187,.10) 48%, transparent 74%);
  filter: blur(12px);
}
.ss-landing-tile--carousel .ss-landing-tile-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border: 0;
  box-shadow: none;
  background: transparent;
  transform: none;
  filter: drop-shadow(0 9px 17px rgba(0,0,0,.36));
  transition: transform .34s cubic-bezier(.18,.8,.2,1), filter .32s ease;
}
.ss-landing-tile--carousel .ss-landing-tile-caption {
  position: static;
  display: block;
  width: 100%;
  min-height: 2.3em;
  padding: 0 4px;
  opacity: 1;
  transform: none;
  color: var(--ss-foam);
  background: transparent;
  font-size: clamp(12px, .95vw, 14px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: .03em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,.72);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ss-landing-carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 20;
  width: 40px;
  height: 56px;
  transform: translateY(-65%);
  border: 1px solid rgba(244,240,230,.46);
  background: rgba(5,16,24,.42);
  color: var(--ss-foam);
  font: 700 36px/1 Arial, sans-serif;
  cursor: pointer;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition: background .2s ease, border-color .2s ease, opacity .2s ease, transform .2s ease;
}
.ss-landing-carousel-arrow:hover,
.ss-landing-carousel-arrow:focus-visible {
  background: rgba(35,153,187,.72);
  border-color: rgba(143,210,229,.95);
  transform: translateY(-65%) scale(1.05);
}
.ss-landing-carousel-arrow:disabled { opacity: .18; cursor: default; }
.ss-landing-carousel-arrow--prev { left: 2px; }
.ss-landing-carousel-arrow--next { right: 2px; }

@media (hover: hover) and (pointer: fine) {
  .ss-landing-tile-rail:has(.ss-landing-tile--carousel:hover) .ss-landing-tile--carousel:not(:hover),
  .ss-landing-tile-rail:has(.ss-landing-tile--carousel:focus-visible) .ss-landing-tile--carousel:not(:focus-visible) {
    opacity: .36;
    filter: saturate(.55) brightness(.76);
    transform: scale(.94);
  }
  .ss-landing-hero-stage:has(.ss-landing-tile--carousel:hover) .ss-landing-hero-slide.is-active,
  .ss-landing-hero-stage:has(.ss-landing-tile--carousel:focus-visible) .ss-landing-hero-slide.is-active {
    filter: brightness(.68) saturate(.78);
  }
  .ss-landing-tile.ss-landing-tile--carousel:hover,
  .ss-landing-tile.ss-landing-tile--carousel:focus-visible {
    z-index: 12;
    transform: translateY(-8px) scale(1.11);
    filter: brightness(1.08) saturate(1.08);
  }
  .ss-landing-tile--carousel:hover .ss-landing-tile-art::before,
  .ss-landing-tile--carousel:focus-visible .ss-landing-tile-art::before,
  .ss-landing-tile--carousel:hover .ss-landing-tile-art::after,
  .ss-landing-tile--carousel:focus-visible .ss-landing-tile-art::after {
    opacity: 1;
    transform: scale(1.03);
  }
  .ss-landing-tile--carousel:hover .ss-landing-tile-art img,
  .ss-landing-tile--carousel:focus-visible .ss-landing-tile-art img {
    transform: scale(1.055);
    filter: drop-shadow(0 14px 24px rgba(0,0,0,.44)) drop-shadow(0 0 10px rgba(143,210,229,.70));
  }
  .ss-landing-tile--carousel:hover .ss-landing-tile-caption,
  .ss-landing-tile--carousel:focus-visible .ss-landing-tile-caption {
    color: var(--ss-sky);
  }
}

@media (max-width: 760px) {
  .ss-landing-hero-stage.has-overlay-tiles {
    min-height: 100svh;
    padding-left: 0;
    padding-right: 0;
  }
  .ss-landing-carousel {
    width: 100%;
    max-width: none;
    padding: 0;
    margin-top: 18px;
  }
  .ss-landing-tile-rail {
    gap: 12px;
    padding: 12px 18px 24px;
    scroll-padding-inline: 18px;
    scroll-snap-type: x mandatory;
  }
  .ss-landing-tile.ss-landing-tile--carousel,
  .ss-landing-tile.ss-landing-tile--carousel.ss-landing-tile--wide,
  .ss-landing-tile.ss-landing-tile--carousel.ss-landing-tile--featured {
    flex-basis: 108px;
    width: 108px;
  }
  .ss-landing-tile--carousel .ss-landing-tile-art,
  .ss-landing-tile--carousel.ss-landing-tile--wide .ss-landing-tile-art,
  .ss-landing-tile--carousel.ss-landing-tile--featured .ss-landing-tile-art {
    aspect-ratio: 1 / 1;
  }
  .ss-landing-tile--carousel .ss-landing-tile-caption {
    min-height: 2.4em;
    padding: 0 2px;
    font-size: 10px;
    line-height: 1.12;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .ss-landing-carousel-arrow { display: none; }
}

@media (max-width: 390px) {
  .ss-landing-tile-rail { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .ss-landing-tile.ss-landing-tile--carousel,
  .ss-landing-tile.ss-landing-tile--carousel.ss-landing-tile--wide,
  .ss-landing-tile.ss-landing-tile--carousel.ss-landing-tile--featured {
    flex-basis: 96px;
    width: 96px;
  }
  .ss-landing-tile--carousel .ss-landing-tile-caption { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-landing-tile-rail { scroll-behavior: auto; }
  .ss-landing-tile.ss-landing-tile--carousel,
  .ss-landing-tile--carousel .ss-landing-tile-art,
  .ss-landing-tile--carousel .ss-landing-tile-art::before,
  .ss-landing-tile--carousel .ss-landing-tile-art::after,
  .ss-landing-tile--carousel .ss-landing-tile-art img {
    transition: none !important;
  }
}

/* ==========================================================
   v2.74.92 — landing pages use the proven "Made Here" carousel
   ========================================================== */

/* Hero becomes a clean visual statement again; scene links live in their own
   record-sleeve carousel immediately below it. */
.ss-landing-hero-stage.has-scene-links {
  min-height: clamp(520px, 72vh, 760px);
  height: clamp(520px, 72vh, 760px);
  max-height: 760px;
}
.ss-landing-hero-stage.has-scene-links .ss-landing-hero-shade {
  background:
    radial-gradient(circle at 50% 46%, rgba(5,16,24,.12) 0%, rgba(5,16,24,.30) 55%, rgba(5,16,24,.58) 100%),
    linear-gradient(0deg, rgba(5,16,24,.34), rgba(5,16,24,.28));
}
.ss-landing-hero-copy.has-scene-links {
  left: 50%;
  right: auto;
  bottom: 50%;
  width: min(1180px, calc(100% - 64px));
  max-width: 1180px;
  transform: translate(-50%, 50%);
  text-align: center;
}
.ss-landing-hero-copy.has-scene-links h1 {
  max-width: none;
  margin: 0 auto;
  color: var(--ss-foam);
  font-size: clamp(52px, 7vw, 104px);
  line-height: .88;
  font-weight: 900;
  letter-spacing: -.052em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 8px 34px rgba(0,0,0,.30);
}
.ss-landing-hero-copy.has-scene-links .ss-landing-title-accent { color: var(--ss-sky); }
.ss-landing-hero-copy.has-scene-links .ss-landing-hero-eyebrow {
  margin-left: auto;
  margin-right: auto;
  color: rgba(244,240,230,.84);
  text-align: center;
}
.ss-landing-hero-copy.has-scene-links .ss-landing-hero-subheading {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(244,240,230,.94);
  text-align: center;
}

.ss-landing-scene-links {
  background: var(--ss-foam);
  padding-top: clamp(42px, 5vw, 72px);
  padding-bottom: clamp(44px, 5.5vw, 82px);
}
.ss-landing-scene-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(22px, 3vw, 34px);
}
.ss-landing-scene-toolbar > span {
  color: var(--ss-ink);
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Use the same square record-sleeve behaviour as the Record page while
   treating uploaded promoter art as artwork/logos rather than a forced crop. */
.ss-landing-scene-links .ss-made-here-track {
  grid-auto-columns: minmax(275px, 29%);
  gap: clamp(12px, 1.45vw, 20px);
  padding-bottom: 8px;
  touch-action: pan-y;
  user-select: none;
}
.ss-landing-scene-links .ss-project-card {
  background: var(--ss-ink);
  border: 0;
  overflow: hidden;
}
.ss-landing-scene-links .ss-project-media {
  aspect-ratio: 1 / 1;
  background: var(--ss-ink);
}
.ss-landing-scene-links .ss-project-media img {
  object-fit: contain;
  object-position: center;
  padding: clamp(8px, 1vw, 14px);
  background: var(--ss-ink);
  filter: saturate(.92) contrast(1.02) brightness(.96);
}
.ss-landing-scene-links .ss-project-media::before {
  background:
    linear-gradient(180deg,
      rgba(16,40,58,.01) 0%,
      rgba(16,40,58,.02) 52%,
      rgba(16,40,58,.28) 68%,
      rgba(16,40,58,.94) 100%);
}
.ss-landing-scene-links .ss-project-overlay {
  padding: clamp(20px, 2.1vw, 28px);
}
.ss-landing-scene-links .ss-project-overlay h3 { margin: 0; }
.ss-landing-scene-links .ss-project-artist {
  font-size: clamp(24px, 2vw, 34px);
  line-height: .94;
  text-transform: uppercase;
}
.ss-landing-scene-links .ss-project-card:hover .ss-project-media img,
.ss-landing-scene-links .ss-project-card:focus-visible .ss-project-media img {
  transform: scale(1.035);
  filter: saturate(1.06) contrast(1.04) brightness(1.02);
}
.ss-landing-scene-foot {
  margin-top: 20px;
}

@media (max-width: 900px) {
  .ss-landing-scene-links .ss-made-here-track {
    grid-auto-columns: minmax(260px, 52vw);
  }
}

@media (max-width: 600px) {
  .ss-landing-hero-stage.has-scene-links {
    min-height: 60svh;
    height: 60svh;
    max-height: 620px;
  }
  .ss-landing-hero-copy.has-scene-links {
    width: calc(100% - 36px);
  }
  .ss-landing-hero-copy.has-scene-links h1 {
    font-size: clamp(42px, 13vw, 70px);
  }
  .ss-landing-scene-links {
    padding-top: 30px;
    padding-bottom: 40px;
  }
  .ss-landing-scene-toolbar {
    margin-bottom: 18px;
  }
  .ss-landing-scene-toolbar > span {
    font-size: 14px;
  }
  .ss-landing-scene-links .ss-made-here-track {
    grid-auto-columns: 79vw;
    gap: 12px;
  }
  .ss-landing-scene-links .ss-project-open {
    opacity: 1;
    transform: none;
  }
  .ss-landing-scene-links .ss-project-overlay {
    padding: 20px;
  }
  .ss-landing-scene-links .ss-project-artist {
    font-size: clamp(25px, 8vw, 34px);
  }
  /* Unlike the Record page, keep this cue visible: landing-page visitors may
     have no prior reason to know the row is swipeable. */
  .ss-landing-scene-foot > span:first-child {
    display: inline !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-landing-scene-links .ss-project-card,
  .ss-landing-scene-links .ss-project-media img,
  .ss-landing-scene-links .ss-project-open,
  .ss-landing-scene-links .ss-made-here-progress-bar {
    transition: none !important;
  }
}

/* Landing-page scene cards are equal record sleeves; the experimental
   Standard/Wide/Featured control is intentionally retired from the Manager. */
.ss-landing-manager-tile-row {
  grid-template-columns: minmax(150px, 180px) minmax(190px, 1fr) minmax(220px, 1.15fr) auto;
}
@media (max-width: 1080px) {
  .ss-landing-manager-tile-row {
    grid-template-columns: minmax(150px, 180px) minmax(0, 1fr) minmax(0, 1fr);
  }
  .ss-landing-manager-tile-actions { grid-column: 2 / -1; }
}
@media (max-width: 760px) {
  .ss-landing-manager-tile-row { grid-template-columns: 1fr; }
  .ss-landing-manager-tile-actions { grid-column: auto; }
}


/* ==========================================================
   v2.74.93 — landing card name + real hover/description text
   ========================================================== */
.ss-landing-scene-links .ss-landing-scene-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px;
}
.ss-landing-scene-links .ss-landing-scene-description {
  margin: 0;
  max-width: 92%;
  color: var(--ss-foam);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: .01em;
  text-transform: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .24s ease, transform .24s ease;
  text-shadow: 0 2px 14px rgba(0,0,0,.52);
}
.ss-landing-scene-links .ss-project-card:hover .ss-landing-scene-description,
.ss-landing-scene-links .ss-project-card:focus-visible .ss-landing-scene-description {
  opacity: 1;
  transform: translateY(0);
}

/* The Manager now has destination + name + description as distinct fields. */
.ss-landing-manager-tile-row {
  grid-template-columns: minmax(145px, 175px) minmax(170px, .9fr) minmax(170px, .8fr) minmax(210px, 1.15fr) auto;
}
@media (max-width: 1250px) {
  .ss-landing-manager-tile-row {
    grid-template-columns: minmax(145px, 175px) repeat(2, minmax(0, 1fr));
  }
  .ss-landing-manager-tile-row > label:nth-of-type(3) { grid-column: 2 / -1; }
  .ss-landing-manager-tile-actions { grid-column: 2 / -1; }
}
@media (max-width: 760px) {
  .ss-landing-manager-tile-row { grid-template-columns: 1fr; }
  .ss-landing-manager-tile-row > label:nth-of-type(3),
  .ss-landing-manager-tile-actions { grid-column: auto; }
}

/* Touch devices do not have a dependable hover state: keep the description
   readable beneath the permanent name. */
@media (hover: none), (pointer: coarse) {
  .ss-landing-scene-links .ss-landing-scene-description {
    opacity: 1;
    transform: none;
    font-size: clamp(13px, 3.6vw, 16px);
  }
  .ss-landing-scene-links .ss-project-media::before {
    background:
      linear-gradient(180deg,
        rgba(16,40,58,.01) 0%,
        rgba(16,40,58,.04) 46%,
        rgba(16,40,58,.42) 65%,
        rgba(16,40,58,.96) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-landing-scene-links .ss-landing-scene-description { transition: none !important; }
}


/* ==========================================================
   v2.74.94 — landing card Genres + Other details
   ========================================================== */
/* Name remains permanent; the two information sections reveal together on
   desktop hover/focus and use deliberately different colours. */
.ss-landing-scene-links .ss-landing-scene-meta {
  display: grid;
  gap: 7px;
  width: min(94%, 430px);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .24s ease, transform .24s ease;
}
.ss-landing-scene-links .ss-landing-scene-meta-row {
  display: grid;
  gap: 2px;
  margin: 0;
  line-height: 1.22;
  text-shadow: 0 2px 14px rgba(0,0,0,.56);
}
.ss-landing-scene-links .ss-landing-scene-meta-label {
  display: block;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .88;
}
.ss-landing-scene-links .ss-landing-scene-meta-value {
  display: block;
  font-size: clamp(13px, .95vw, 16px);
  font-weight: 750;
  letter-spacing: .005em;
}
.ss-landing-scene-links .ss-landing-scene-genres {
  color: var(--ss-sky);
}
.ss-landing-scene-links .ss-landing-scene-details {
  color: var(--ss-foam);
}
.ss-landing-scene-links .ss-project-card:hover .ss-landing-scene-meta,
.ss-landing-scene-links .ss-project-card:focus-visible .ss-landing-scene-meta,
.ss-landing-scene-links .ss-project-card:focus-within .ss-landing-scene-meta {
  opacity: 1;
  transform: translateY(0);
}
/* Retire the v2.74.93 single-description renderer if an old cached template
   happens to output it during a rolling deploy. */
.ss-landing-scene-links .ss-landing-scene-description { display: none; }

/* Manager rows now carry Destination + Name + Genres + Other details. */
.ss-landing-manager-tile-row {
  grid-template-columns: minmax(140px, 165px) minmax(150px, .9fr) minmax(150px, .8fr) minmax(165px, .85fr) minmax(210px, 1.15fr) auto;
}
@media (max-width: 1360px) {
  .ss-landing-manager-tile-row {
    grid-template-columns: minmax(140px, 165px) repeat(2, minmax(0, 1fr));
  }
  .ss-landing-manager-tile-row > label:nth-of-type(3),
  .ss-landing-manager-tile-row > label:nth-of-type(4) { grid-column: auto; }
  .ss-landing-manager-tile-row > label:nth-of-type(4) { grid-column: 2 / -1; }
  .ss-landing-manager-tile-actions { grid-column: 2 / -1; }
}
@media (max-width: 760px) {
  .ss-landing-manager-tile-row { grid-template-columns: 1fr; }
  .ss-landing-manager-tile-row > label:nth-of-type(3),
  .ss-landing-manager-tile-row > label:nth-of-type(4),
  .ss-landing-manager-tile-actions { grid-column: auto; }
}

/* Touch has no dependable hover: keep both sections readable. */
@media (hover: none), (pointer: coarse) {
  .ss-landing-scene-links .ss-landing-scene-meta {
    opacity: 1;
    transform: none;
    gap: 5px;
  }
  .ss-landing-scene-links .ss-landing-scene-meta-label { font-size: 8px; }
  .ss-landing-scene-links .ss-landing-scene-meta-value {
    font-size: clamp(11px, 3.1vw, 14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-landing-scene-links .ss-landing-scene-meta { transition: none !important; }
}


/* v2.74.95 — Studio team order/content update (Tim → El → Andy). */


/* ==========================================================
   v2.74.96 — landing scene carousel floats over the hero
   ========================================================== */
/* One continuous visual surface: the slideshow is atmosphere, while the
   promoter carousel floats over it instead of becoming a second site section. */
.ss-landing-hero-stage.has-scene-links {
  min-height: clamp(800px, 100svh, 980px);
  height: auto;
  max-height: none;
  overflow: hidden;
}
.ss-landing-hero-stage.has-scene-links .ss-landing-hero-slide {
  filter: saturate(.74) brightness(.80) contrast(1.02);
}
.ss-landing-hero-stage.has-scene-links .ss-landing-hero-shade {
  background:
    radial-gradient(circle at 50% 28%, rgba(5,16,24,.12) 0%, rgba(5,16,24,.30) 45%, rgba(5,16,24,.54) 100%),
    linear-gradient(180deg, rgba(5,16,24,.20) 0%, rgba(5,16,24,.32) 55%, rgba(5,16,24,.56) 100%);
}
.ss-landing-hero-copy.has-scene-links {
  top: clamp(128px, 17vh, 190px);
  bottom: auto;
  transform: translateX(-50%);
  width: min(1120px, calc(100% - 64px));
  z-index: 5;
}
.ss-landing-hero-copy.has-scene-links h1 {
  font-size: clamp(50px, 6.4vw, 94px);
}

/* Overlay the proven carousel component inside the hero. */
.ss-landing-hero-stage > .ss-landing-scene-links {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: clamp(28px, 4.5vh, 58px);
  padding: 0;
  background: transparent;
  overflow: visible;
  color: var(--ss-foam);
}
.ss-landing-hero-stage > .ss-landing-scene-links .ss-wrap {
  width: min(calc(100% - (var(--ss-pad) * 2)), 1500px);
}
.ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-toolbar {
  margin-bottom: 12px;
}
.ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-toolbar > span {
  color: rgba(244,240,230,.82);
  font-size: 11px;
}
.ss-landing-hero-stage > .ss-landing-scene-links .ss-made-here-control {
  width: 42px;
  height: 42px;
  border-color: rgba(244,240,230,.62);
  color: var(--ss-foam);
  background: rgba(5,16,24,.10);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.ss-landing-hero-stage > .ss-landing-scene-links .ss-made-here-control:hover,
.ss-landing-hero-stage > .ss-landing-scene-links .ss-made-here-control:focus-visible {
  color: var(--ss-ink);
  background: var(--ss-sky);
  border-color: var(--ss-sky);
}

/* Transparent promoter artwork: no ink/blue card panel behind PNG logos. */
.ss-landing-hero-stage > .ss-landing-scene-links .ss-made-here-track {
  grid-auto-columns: minmax(205px, 18.5%);
  gap: clamp(16px, 1.8vw, 28px);
  padding: 10px 6px 16px;
}
.ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card {
  background: transparent;
  overflow: visible;
  border: 0;
  box-shadow: none;
}
.ss-landing-hero-stage > .ss-landing-scene-links .ss-project-media {
  background: transparent;
  overflow: hidden;
  border-radius: 14px;
}
.ss-landing-hero-stage > .ss-landing-scene-links .ss-project-media img {
  padding: clamp(10px, 1vw, 16px);
  background: transparent;
  object-fit: contain;
  filter: saturate(.96) contrast(1.02) brightness(1.02)
          drop-shadow(0 8px 18px rgba(0,0,0,.24));
}
/* Only the copy area receives a local fade; the tile itself remains transparent. */
.ss-landing-hero-stage > .ss-landing-scene-links .ss-project-media::before {
  background: linear-gradient(180deg,
    rgba(5,16,24,0) 0%,
    rgba(5,16,24,0) 45%,
    rgba(5,16,24,.16) 62%,
    rgba(5,16,24,.70) 100%);
}
.ss-landing-hero-stage > .ss-landing-scene-links .ss-project-overlay {
  padding: 18px;
}
.ss-landing-hero-stage > .ss-landing-scene-links .ss-project-artist {
  font-size: clamp(19px, 1.45vw, 27px);
  text-shadow: 0 3px 16px rgba(0,0,0,.72);
}
.ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-meta {
  width: 100%;
}
.ss-landing-hero-stage > .ss-landing-scene-links .ss-project-open {
  background: rgba(244,240,230,.90);
}

/* Make exploration feel spatial without turning the artwork back into cards. */
@media (hover: hover) and (pointer: fine) {
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card {
    transition: transform .28s cubic-bezier(.2,.75,.2,1), opacity .24s ease, filter .24s ease;
  }
  .ss-landing-hero-stage > .ss-landing-scene-links:has(.ss-project-card:hover) .ss-project-card:not(:hover),
  .ss-landing-hero-stage > .ss-landing-scene-links:has(.ss-project-card:focus-visible) .ss-project-card:not(:focus-visible) {
    opacity: .48;
    filter: saturate(.72) brightness(.78);
  }
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card:hover,
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card:focus-visible {
    transform: translateY(-8px) scale(1.055);
    filter: drop-shadow(0 0 10px rgba(143,210,229,.44))
            drop-shadow(0 0 26px rgba(35,153,187,.30));
  }
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card:hover .ss-project-media img,
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card:focus-visible .ss-project-media img {
    transform: scale(1.025);
    filter: saturate(1.08) contrast(1.04) brightness(1.08)
            drop-shadow(0 10px 24px rgba(0,0,0,.26));
  }
}

.ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-foot {
  margin-top: 8px;
  color: rgba(244,240,230,.70);
}
.ss-landing-hero-stage > .ss-landing-scene-links .ss-made-here-progress {
  background: rgba(244,240,230,.22);
}
.ss-landing-hero-stage > .ss-landing-scene-links .ss-made-here-progress-bar {
  background: var(--ss-sky);
}
.ss-landing-hero-stage.has-scene-links .ss-landing-slide-dots {
  bottom: 18px;
  z-index: 7;
}

@media (max-width: 900px) {
  .ss-landing-hero-stage.has-scene-links {
    min-height: max(780px, 100svh);
  }
  .ss-landing-hero-copy.has-scene-links {
    top: 112px;
    width: calc(100% - 36px);
  }
  .ss-landing-hero-copy.has-scene-links h1 {
    font-size: clamp(42px, 12vw, 70px);
  }
  .ss-landing-hero-stage > .ss-landing-scene-links {
    bottom: 26px;
  }
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-wrap {
    width: calc(100% - 24px);
  }
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-made-here-track {
    grid-auto-columns: 64vw;
    gap: 14px;
    padding-inline: 2px;
  }
}

@media (max-width: 600px) {
  .ss-landing-hero-stage.has-scene-links {
    min-height: max(720px, 100svh);
    height: auto;
    max-height: none;
  }
  .ss-landing-hero-copy.has-scene-links {
    top: 96px;
  }
  .ss-landing-hero-copy.has-scene-links h1 {
    font-size: clamp(38px, 11.5vw, 62px);
  }
  .ss-landing-hero-copy.has-scene-links .ss-landing-hero-subheading {
    font-size: 15px;
  }
  .ss-landing-hero-stage > .ss-landing-scene-links {
    bottom: 20px;
  }
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-toolbar {
    margin-bottom: 6px;
  }
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-toolbar > span {
    display: none;
  }
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-made-here-track {
    grid-auto-columns: 67vw;
    gap: 12px;
  }
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-project-overlay {
    padding: 16px;
  }
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-project-artist {
    font-size: clamp(22px, 7vw, 29px);
  }
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-meta-value {
    font-size: 12px;
  }
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-foot {
    margin-top: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-landing-hero-stage.has-scene-links .ss-landing-hero-slide {
    filter: saturate(.82) brightness(.82);
  }
}


/* ==========================================================
   v2.74.97 — landing-card information drawer below artwork
   ========================================================== */
/* Keep promoter artwork pristine. Names and metadata now live below the
   square media rather than sitting over logos/photography. */
.ss-landing-hero-stage > .ss-landing-scene-links .ss-project-media::before {
  display: none;
}
.ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card {
  display: flex;
  flex-direction: column;
  align-self: start;
  text-decoration: none;
  color: var(--ss-foam);
}
.ss-landing-hero-stage > .ss-landing-scene-links .ss-project-media {
  flex: 0 0 auto;
}
.ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-info {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 7px;
  padding: 10px 8px 0;
  text-align: left;
  color: var(--ss-foam);
  text-shadow: 0 2px 12px rgba(0,0,0,.78);
}
.ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-info h3 {
  margin: 0;
  line-height: 1;
}
.ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-info .ss-project-artist {
  display: block;
  font-size: clamp(17px, 1.25vw, 23px);
  line-height: 1;
  text-transform: uppercase;
}
.ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-info .ss-landing-scene-meta {
  display: grid;
  gap: 6px;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  transition: max-height .28s ease, opacity .22s ease, transform .28s ease;
}
.ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card:hover .ss-landing-scene-info .ss-landing-scene-meta,
.ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card:focus-visible .ss-landing-scene-info .ss-landing-scene-meta,
.ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card:focus-within .ss-landing-scene-info .ss-landing-scene-meta {
  max-height: 150px;
  opacity: 1;
  transform: translateY(0);
}
.ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-info .ss-landing-scene-meta-row {
  text-shadow: 0 2px 12px rgba(0,0,0,.78);
}
/* With copy no longer layered over the media, give the track room to grow
   upward from its bottom-anchored hero position when a drawer opens. */
.ss-landing-hero-stage > .ss-landing-scene-links .ss-made-here-track {
  align-items: start;
  padding-bottom: 10px;
}

@media (hover: none), (pointer: coarse) {
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-info {
    padding-top: 8px;
  }
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-info .ss-landing-scene-meta {
    max-height: none;
    opacity: 1;
    overflow: visible;
    transform: none;
    gap: 4px;
  }
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-info .ss-project-artist {
    font-size: clamp(17px, 5.2vw, 22px);
  }
}

@media (max-width: 600px) {
  .ss-landing-hero-stage.has-scene-links {
    min-height: max(760px, 100svh);
  }
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-info {
    padding-inline: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-info .ss-landing-scene-meta {
    transition: none !important;
  }
}


/* ==========================================================
   v2.74.98 — smooth landing-card focus / no hover reflow
   ========================================================== */
/* Desktop: reserve the information drawer footprint at all times. The
   metadata now fades/slides inside a fixed area instead of changing card
   height, so moving between carousel items cannot reflow the track. */
@media (hover: hover) and (pointer: fine) {
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-info {
    grid-template-rows: auto 96px;
    min-height: 130px;
    align-content: start;
  }

  .ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-info .ss-landing-scene-meta {
    max-height: none;
    height: 96px;
    min-height: 96px;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(5px);
    pointer-events: none;
    transition: opacity .24s ease, transform .30s cubic-bezier(.2,.75,.2,1), visibility 0s linear .24s;
  }

  .ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card:hover .ss-landing-scene-info .ss-landing-scene-meta,
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card:focus-visible .ss-landing-scene-info .ss-landing-scene-meta,
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card:focus-within .ss-landing-scene-info .ss-landing-scene-meta {
    max-height: none;
    height: 96px;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }

  /* Keep the theatrical focus effect, but make the hand-off between cards
     calmer so the pointer does not appear to chase a moving target. */
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card {
    transform-origin: 50% 0;
    transition: transform .34s cubic-bezier(.2,.72,.2,1), opacity .30s ease, filter .30s ease;
  }

  .ss-landing-hero-stage > .ss-landing-scene-links:has(.ss-project-card:hover) .ss-project-card:not(:hover),
  .ss-landing-hero-stage > .ss-landing-scene-links:has(.ss-project-card:focus-visible) .ss-project-card:not(:focus-visible) {
    opacity: .62;
    filter: saturate(.80) brightness(.86);
  }

  .ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card:hover,
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card:focus-visible {
    transform: translateY(-6px) scale(1.035);
  }
}

/* Touch layouts keep metadata naturally in-flow and permanently readable. */
@media (hover: none), (pointer: coarse) {
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-info {
    min-height: 0;
  }
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-info .ss-landing-scene-meta {
    height: auto;
    min-height: 0;
    visibility: visible;
    pointer-events: auto;
  }
}


/* ==========================================================
   v2.74.99 — protected hero heading / carousel spacing
   ========================================================== */
/* Keep the heading and promoter carousel in normal vertical flow inside the
   same visual hero. This preserves the single-backdrop composition while
   guaranteeing that the fixed metadata footprint introduced in v2.74.98 can
   never pull the carousel upward across the title/subheading. */
.ss-landing-hero-stage.has-scene-links {
  height: auto;
  min-height: max(900px, 100svh);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-top: clamp(126px, 16vh, 182px);
  padding-bottom: clamp(30px, 4vh, 48px);
}
.ss-landing-hero-copy.has-scene-links {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  transform: none;
  flex: 0 0 auto;
  width: min(1120px, calc(100% - 64px));
  margin: 0 auto;
}
.ss-landing-hero-stage > .ss-landing-scene-links {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  flex: 0 0 auto;
  width: 100%;
  margin-top: clamp(50px, 6.5vh, 76px);
}
.ss-landing-hero-stage.has-scene-links .ss-landing-slide-dots {
  bottom: 14px;
}

@media (max-width: 900px) {
  .ss-landing-hero-stage.has-scene-links {
    min-height: max(820px, 100svh);
    padding-top: 112px;
    padding-bottom: 30px;
  }
  .ss-landing-hero-copy.has-scene-links {
    width: calc(100% - 36px);
  }
  .ss-landing-hero-stage > .ss-landing-scene-links {
    margin-top: 42px;
  }
}

@media (max-width: 600px) {
  .ss-landing-hero-stage.has-scene-links {
    min-height: max(760px, 100svh);
    padding-top: 96px;
    padding-bottom: 26px;
  }
  .ss-landing-hero-copy.has-scene-links {
    width: calc(100% - 30px);
  }
  .ss-landing-hero-stage > .ss-landing-scene-links {
    margin-top: 32px;
  }
}


/* ==========================================================
   v2.74.101 — subtler landing carousel focus glow
   ========================================================== */
/* Keep the focus treatment on the artwork itself rather than the rectangular
   card footprint. This is especially important for transparent promoter logos,
   where a box-shaped glow makes the otherwise transparent tile obvious. */
@media (hover: hover) and (pointer: fine) {
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-project-media {
    overflow: visible;
    border-radius: 0;
  }

  .ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card:hover,
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card:focus-visible {
    /* No card-level drop-shadow: that follows the square carousel cell. */
    filter: none;
  }

  .ss-landing-hero-stage > .ss-landing-scene-links .ss-project-media img {
    transition:
      transform .58s cubic-bezier(.2,.72,.2,1),
      filter .38s ease;
  }

  .ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card:hover .ss-project-media img,
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card:focus-visible .ss-project-media img {
    transform: scale(1.018);
    filter:
      saturate(1.05)
      contrast(1.025)
      brightness(1.06)
      drop-shadow(0 8px 20px rgba(0,0,0,.22))
      drop-shadow(0 0 7px rgba(143,210,229,.24))
      drop-shadow(0 0 15px rgba(35,153,187,.13));
  }

  /* Keep the depth cue, but don't make the rest of the carousel disappear. */
  .ss-landing-hero-stage > .ss-landing-scene-links:has(.ss-project-card:hover) .ss-project-card:not(:hover),
  .ss-landing-hero-stage > .ss-landing-scene-links:has(.ss-project-card:focus-visible) .ss-project-card:not(:focus-visible) {
    opacity: .76;
    filter: saturate(.88) brightness(.92);
  }
}


/* v2.74.103 · Recording pre-production forms */
.ss-manager-preproduction-option span small{display:block;margin-top:.22rem;color:rgba(16,40,58,.64);font-size:.78rem;line-height:1.35;font-weight:500}
.ss-manager-preproduction-panel{margin-top:1rem}
.ss-manager-preproduction-body{padding:0 1.15rem 1.15rem}
.ss-manager-preproduction-list{display:grid;gap:.7rem}
.ss-manager-preproduction-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:1rem;align-items:center;padding:.9rem 0;border-top:1px solid rgba(16,40,58,.14)}
.ss-manager-preproduction-row:first-child{border-top:0}
.ss-manager-preproduction-main{display:grid;gap:.18rem;min-width:0}
.ss-manager-preproduction-main strong{color:#10283a}
.ss-manager-preproduction-main small{color:rgba(16,40,58,.68);overflow-wrap:anywhere}
.ss-manager-preproduction-submitted{display:grid;gap:.12rem;text-align:right;white-space:nowrap;color:#10283a}
.ss-manager-preproduction-submitted small{text-transform:uppercase;letter-spacing:.06em;color:rgba(16,40,58,.56);font-size:.68rem;font-weight:800}
.ss-manager-preproduction-actions{display:flex;gap:.45rem;align-items:center}
.ss-manager-preproduction-actions .ss-btn{white-space:nowrap}
@media (max-width:820px){.ss-manager-preproduction-row{grid-template-columns:1fr}.ss-manager-preproduction-submitted{text-align:left}.ss-manager-preproduction-actions{flex-wrap:wrap}}


/* ==========================================================
   v2.74.104 — project-level pre-production send / resend
   ========================================================== */
.ss-manager-project-preproduction {
  display: grid;
  gap: 6px;
  width: 100%;
  margin-top: 5px;
  padding: 8px 9px;
  border: 1px solid rgba(16,40,58,.2);
  background: rgba(143,210,229,.14);
}
.ss-manager-project-preproduction > strong {
  font-size: 9px;
  line-height: 1.3;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.ss-manager-project-preproduction > div,
.ss-manager-preproduction-project-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ss-manager-project-preproduction button,
.ss-manager-project-preproduction a,
.ss-manager-preproduction-project-buttons button,
.ss-manager-preproduction-project-buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid var(--ss-ink);
  background: var(--ss-paper);
  color: var(--ss-ink);
  font: inherit;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.ss-manager-project-preproduction button:hover,
.ss-manager-project-preproduction a:hover,
.ss-manager-preproduction-project-buttons button:hover,
.ss-manager-preproduction-project-buttons a:hover { background: var(--ss-sky); }
.ss-manager-project-preproduction.is-complete { background: rgba(244,240,230,.82); }
.ss-manager-preproduction-project-actions {
  display: grid;
  gap: 10px;
  margin: 10px 0 0;
  padding: 12px 13px;
  border: 1px solid rgba(16,40,58,.22);
  background: rgba(143,210,229,.12);
}
.ss-manager-preproduction-project-actions[hidden] { display: none !important; }
.ss-manager-preproduction-project-actions strong {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
}
.ss-manager-preproduction-project-actions small {
  display: block;
  margin-top: 3px;
  line-height: 1.4;
  opacity: .68;
}

/* ==========================================================
   v2.74.110 — Website enquiry flood controls
   Keep the live Needs attention payload bounded while giving the
   Manager a quick way to clear a batch of obvious spam.
   ========================================================== */
.ss-manager-enquiry-bulk {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  margin: 14px 0 4px;
  padding: 12px 14px;
  border: 1px solid rgba(35,153,187,.24);
  background: rgba(143,210,229,.12);
}

.ss-manager-enquiry-bulk-summary {
  display: grid;
  gap: 2px;
}

.ss-manager-enquiry-bulk-summary strong {
  font-size: 13px;
}

.ss-manager-enquiry-bulk-summary span {
  font-size: 11px;
  color: rgba(16,40,58,.62);
}

.ss-manager-enquiry-select-all,
.ss-manager-enquiry-select-one {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 750;
  color: rgba(16,40,58,.72);
  cursor: pointer;
}

.ss-manager-enquiry-select-all input,
.ss-manager-enquiry-select-one input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ss-sea);
}

.ss-manager-enquiry-select-one {
  margin-bottom: 3px;
}

.ss-manager-enquiry-bulk-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.ss-manager-enquiry-bulk-actions button {
  min-height: 36px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .ss-manager-enquiry-bulk {
    grid-template-columns: 1fr auto;
  }
  .ss-manager-enquiry-bulk-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }
  .ss-manager-enquiry-bulk-actions button {
    flex: 1 1 0;
  }
}

@media (max-width: 560px) {
  .ss-manager-enquiry-bulk {
    grid-template-columns: 1fr;
  }
  .ss-manager-enquiry-bulk-actions {
    grid-column: auto;
    display: grid;
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   v2.74.111 — Shop/Event paid-finalisation safety net
   ============================================================ */


/* ============================================================
   v2.74.112 — resolvable paid-payment review queue
   ============================================================ */
.ss-manager-payment-review-resolve {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 4px;
}

.ss-manager-payment-review-resolve button {
  padding: 6px 9px;
  border: 1px solid rgba(16,40,58,.22);
  border-radius: 4px;
  background: rgba(255,255,255,.58);
  color: var(--ss-ink);
  font: inherit;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}

.ss-manager-payment-review-resolve button:hover,
.ss-manager-payment-review-resolve button:focus-visible {
  border-color: var(--ss-sea);
  color: var(--ss-sea);
}

.ss-manager-payment-review-resolve button:disabled {
  cursor: wait;
  opacity: .5;
}

@media (max-width: 560px) {
  .ss-manager-payment-review-resolve {
    justify-content: flex-start;
  }
}


/* ==========================================================
   v2.74.113 — destructive staging reset second safety lock
   - Reset now requires both the normal staging environment check and a real
     server-side /stg_12345/ filesystem marker.
   - A mistakenly enabled staging constant on live cannot unlock reset alone.
   - Normal staging reset workflow is otherwise unchanged.
   ========================================================== */

/* ==========================================================
   v2.74.114 — server-issued Shop/Event checkout tokens
   ========================================================== */


/* ==========================================================
   v2.74.115 — Manager/public booking race hardening
   - Manager single-booking saves now re-check conflicts while holding the
     same per-date advisory lock used by public checkout.
   - Multi-date Manager projects acquire their unique dates in stable order
     and repeat conflict validation under those locks before database writes.
   - No customer-facing or Manager workflow change.
   ========================================================== */


/* ==========================================================
   v2.74.116 — bounded Manager operational booking fallback
   - Manager calendar requests remain scoped to the visible day/week/month.
   - Non-calendar Manager refreshes now load only the last 90 days plus all
     future bookings instead of the complete booking archive.
   - Reporting/CRM continues to use full history when explicitly requested.
   - No booking records are deleted or hidden from reporting.
   ========================================================== */


/* ==========================================================
   v2.74.117 — indexed CRM/customer all-time roll-up
   - Confirmed booking history is indexed once by customer identity.
   - Selected-period customer summaries now use direct all-time history
     lookups instead of re-scanning the entire confirmed archive per customer.
   - CRM/reporting figures, filters, customer history and sorting are unchanged.
   ========================================================== */


/* ==========================================================
   v2.74.118 — Manager Recording project Promotions (M-6)
   - Recording-scoped campaign codes can now be previewed/applied from the
     Manager multi-date Recording project workflow.
   - Validation, limits, one-per-email and discount arithmetic stay server-side.
   - Promotion audit lives once at project level; Custom Projects remain out of
     scope, and the final agreed project value remains Manager-editable later.
   ========================================================== */
.ss-manager-promotion-entry {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.ss-manager-promotion-entry input { min-width: 0; flex: 1 1 auto; }
.ss-manager-promotion-entry .ss-btn { flex: 0 0 auto; padding-inline: 14px; }
@media (max-width: 560px) {
  .ss-manager-promotion-entry { align-items: stretch; }
}

/* ==========================================================
   v2.74.119 — refund/revenue consistency (M-9)
   - Refund required is now an operational reminder only and does not remove
     paid Shop, Event or Recording/Custom Project cash from reporting.
   - Revenue is removed only when the Manager records the repayment as
     Refunded manually, matching the existing Rehearsal/Solo behaviour.
   - Promotion revenue reporting follows the same rule.
   - No refund is issued automatically and Needs attention behaviour is unchanged.
   ========================================================== */



/* ==========================================================
   v2.74.120 — pre-launch SEO foundations
   - Staging now fails closed with robots + X-Robots-Tag noindex/nofollow and
     its native WordPress sitemap disabled.
   - Adds tailored titles/descriptions, canonical + Open Graph/Twitter metadata
     for the main public routes and dynamic posts/events.
   - Adds LocalBusiness/WebSite/WebPage JSON-LD plus Event and BlogPosting
     structured data where the stored content supports it.
   - Preserves established old URLs with explicit launch-time 301 redirects.
   - Grrls to the Front keeps the established /grrls-to-the-front/ canonical URL.
   ========================================================== */

/* ==========================================================
   v2.74.121 — homepage supporting SEO copy
   ========================================================== */

/*
 * Keep the established three-route homepage composition intact and add the
 * plain-English studio description beneath it as a quiet supporting panel.
 */
.home .ss-home-seo-note {
  margin-top: clamp(22px, 3vw, 38px);
  padding: clamp(20px, 2.4vw, 30px) clamp(22px, 3vw, 38px);
  border: 1px solid rgba(16,40,58,.16);
  background: rgba(255,253,247,.58);
}

.home .ss-home-seo-note p {
  max-width: 980px;
  margin: 0;
  color: rgba(16,40,58,.78);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65;
}



/* ==========================================================
   v2.74.122 — Recording page visible SEO refinements
   - Strengthens the opening recording-page copy with a natural
     Recording Studio + Southsea, Portsmouth location signal.
   - Links “See the rooms” directly to the Studio page.
   - No layout, pricing, booking or payment behaviour changed.
   ========================================================== */

/* ==========================================================
   v2.74.123 — Rehearsal page visible SEO refinement
   - Strengthens the opening rehearsal-page copy with a natural
     two rooms + Southsea, Portsmouth location signal.
   - No layout, pricing, booking or payment behaviour changed.
   ========================================================== */


/* ==========================================================
   v2.74.124 — Made Here link and project refresh
   - Replaces fragile/incorrect project links with the supplied
     direct release/track destinations.
   - Corrects Swiss Jazz, Forever from the Grave and Fallen Sanctuary titles.
   - Adds Grand Pop – Drop Trow, Lost Ships – Tom Calls Joan,
     and Lame Daze – Ticket Man with supplied artwork.
   - No recording-page layout or booking/payment behaviour changed.
   ========================================================== */


/* ==========================================================
   v2.74.125 — Launch-safe customer confirmation wording
   - Rehearsal and Shop successful payment/booking confirmation screens
     now always use final customer-facing copy, including on staging.
   - Pre-payment staging/test indicators remain unchanged for safe testing.
   - Event paid confirmation was already customer-facing and is unchanged.
   ========================================================== */


/* ==========================================================
   v2.74.126 — Optional root URLs for Manager landing pages
   - Landing pages normally remain under /go/{slug}/.
   - Manager can opt a campaign into a root URL such as /pompey-promoters/.
   - A published root landing temporarily overrides an older WordPress page at
     that same slug; unpublish/delete reveals the older page again.
   - Core Southsea Sound and private/system route slugs are protected.
   - Existing standard landing pages remain backwards compatible.
   ========================================================== */


/* ==========================================================
   v2.74.127 — Manager final usability polish
   - Staging email warnings now match the actual configuration: emails are
     active and sent to the addresses entered, so test addresses should be used.
   - + Add booking is available globally from the Manager header.
   - Calendar gains a one-click Today control.
   - Needs Attention stays in its established dashboard position but switches
     to a dark red visual state whenever outstanding actions exist.
   ========================================================== */

.ss-manager-action-panel.has-attention {
  border-color: #6f2e2e;
  box-shadow: 0 10px 30px rgba(111,46,46,.08);
}

.ss-manager-action-panel.has-attention .ss-manager-action-head {
  background: #6f2e2e;
}

.ss-manager-action-panel.has-attention .ss-manager-action-head span {
  color: #f0c7c7;
}

.ss-manager-action-panel.has-attention .ss-manager-action-head > strong {
  color: var(--ss-paper);
}

.ss-manager-today-btn {
  font-weight: 900;
}


/* Five-part calendar toolbar: view switch, previous, today, period, next. */
.ss-manager-toolbar {
  grid-template-columns: minmax(250px, auto) 130px 90px minmax(220px, 1fr) 130px;
}

@media (max-width: 900px) {
  .ss-manager-toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ss-manager-toolbar .ss-manager-calendar-mode-switch,
  .ss-manager-toolbar .ss-manager-week-label {
    grid-column: 1 / -1;
  }
}


/* ==========================================================
   v2.74.128 — Landing-page card link click fix
   - Carousel pointer capture now begins only after a real drag gesture passes
     the movement threshold, so an ordinary click remains targeted at the
     linked card and follows its destination normally.
   - Actual swipe/drag gestures still scroll the carousel and suppress the
     accidental link activation at the end of the drag.
   ========================================================== */


/* ==========================================================
   v2.74.129 — landing tile details dialog + crisper artwork
   ========================================================== */
/* Cards now act as a clean preview. Full Genres / Other details live in the
   click/tap dialog, so longer copy is never forced into a fixed-height hover
   drawer and can never be cropped. */
.ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-info {
  grid-template-rows: none !important;
  min-height: 0 !important;
  align-content: start;
  gap: 5px;
  padding: 10px 5px 0;
}
.ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-info .ss-landing-scene-meta {
  display: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
.ss-landing-scene-cue {
  display: block;
  color: rgba(244,240,230,.72);
  font-size: 9px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ss-landing-scene-card[data-landing-card] {
  cursor: pointer;
}

/* WordPress attachment tiles now receive responsive srcset/sizes in the
   template. Avoid sub-pixel image zoom and CSS filters here: both can soften
   thin white lines in transparent promoter artwork. */
.ss-landing-hero-stage > .ss-landing-scene-links .ss-project-media img,
.ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card:hover .ss-project-media img,
.ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card:focus-visible .ss-project-media img {
  transform: none !important;
  filter: none !important;
  image-rendering: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card:hover,
.ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card:focus-visible {
  transform: translateY(-4px) !important;
  filter: none !important;
}
.ss-landing-hero-stage > .ss-landing-scene-links:has(.ss-project-card:hover) .ss-project-card:not(:hover),
.ss-landing-hero-stage > .ss-landing-scene-links:has(.ss-project-card:focus-visible) .ss-project-card:not(:focus-visible) {
  opacity: .82;
  filter: none !important;
}
.ss-landing-details-icon {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
}

/* The details dialog deliberately uses a native <dialog>: Escape closes it,
   focus is constrained correctly by the browser, and the original card link
   still works as progressive fallback if dialog support is unavailable. */
.ss-landing-dialog {
  width: min(760px, calc(100% - 32px));
  max-width: 760px;
  max-height: min(86svh, 820px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--ss-ink);
  overflow: visible;
}
.ss-landing-dialog::backdrop {
  background: rgba(5,16,24,.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ss-landing-dialog-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr);
  max-height: min(86svh, 820px);
  overflow: hidden;
  border: 1px solid rgba(244,240,230,.28);
  border-radius: 18px;
  background: var(--ss-foam);
  box-shadow: 0 34px 90px rgba(0,0,0,.42);
}
.ss-landing-dialog-close {
  position: absolute;
  z-index: 5;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(16,40,58,.18);
  border-radius: 50%;
  background: rgba(244,240,230,.94);
  color: var(--ss-ink);
  cursor: pointer;
  box-shadow: 0 5px 18px rgba(0,0,0,.12);
}
.ss-landing-dialog-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.ss-landing-dialog-close:hover,
.ss-landing-dialog-close:focus-visible {
  background: var(--ss-sky);
  outline: none;
}
.ss-landing-dialog-media {
  min-height: 360px;
  display: grid;
  place-items: center;
  padding: clamp(26px, 4vw, 48px);
  background: var(--ss-ink);
}
.ss-landing-dialog-media[hidden] { display: none !important; }
.ss-landing-dialog-media img {
  width: 100%;
  max-width: 390px;
  max-height: 390px;
  object-fit: contain;
  transform: none !important;
  filter: none !important;
}
.ss-landing-dialog-content {
  min-width: 0;
  overflow-y: auto;
  padding: clamp(34px, 5vw, 58px) clamp(28px, 4.6vw, 52px) clamp(30px, 4vw, 46px);
}
.ss-landing-dialog-kicker {
  margin: 0 0 12px;
  color: var(--ss-sea);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ss-landing-dialog-content h2 {
  margin: 0 42px 28px 0;
  color: var(--ss-ink);
  font-size: clamp(30px, 4vw, 46px);
  line-height: .95;
  font-weight: 900;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.ss-landing-dialog-section {
  padding: 17px 0;
  border-top: 1px solid rgba(16,40,58,.16);
}
.ss-landing-dialog-section[hidden] { display: none !important; }
.ss-landing-dialog-section > span {
  display: block;
  margin-bottom: 6px;
  color: rgba(16,40,58,.58);
  font-size: 9px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.ss-landing-dialog-section p {
  margin: 0;
  color: var(--ss-ink);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.ss-landing-dialog-link {
  display: inline-flex;
  margin-top: 22px;
  text-decoration: none;
}
.ss-landing-dialog-link[hidden] { display: none !important; }

@media (max-width: 680px) {
  .ss-landing-dialog {
    width: min(94vw, 560px);
    max-height: 90svh;
  }
  .ss-landing-dialog-card {
    grid-template-columns: 1fr;
    max-height: 90svh;
    overflow-y: auto;
  }
  .ss-landing-dialog-media {
    min-height: 0;
    aspect-ratio: 1 / .76;
    padding: 28px 52px;
  }
  .ss-landing-dialog-media img {
    max-width: 300px;
    max-height: 260px;
  }
  .ss-landing-dialog-content {
    overflow: visible;
    padding: 28px 24px 30px;
  }
  .ss-landing-dialog-content h2 {
    margin-right: 36px;
    margin-bottom: 22px;
  }
  .ss-landing-dialog-close {
    top: 12px;
    right: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card {
    transition: none !important;
  }
}


/* ==========================================================
   v2.74.134 — original landing artwork + smaller mobile tiles
   ========================================================== */
/* The landing template now serves the original uploaded tile file directly
   (without srcset), avoiding WordPress-generated image derivatives for this
   small, line-heavy artwork. On phones, make the carousel tiles deliberately
   more compact so more of the promoter set is visible at once. */
@media (max-width: 600px) {
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-made-here-track {
    grid-auto-columns: min(48vw, 190px);
    gap: 10px;
  }
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-project-media img {
    padding: 7px;
  }
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-info {
    padding-top: 6px;
  }
}


/* ==========================================================
   v2.74.137 — Studio room section alignment
   Keep restored photography on the same page grid/gutters and
   use the compact image + copy structure expected by v1.26 CSS.
   ========================================================== */
.ss-studio-inside .ss-studio-spaces {
  width: min(calc(100% - (var(--ss-pad) * 2)), var(--ss-max));
  margin-inline: auto;
}

.ss-studio-inside .ss-studio-space {
  padding-inline: 0 !important;
}

@media (max-width: 760px) {
  .ss-studio-inside .ss-studio-space {
    padding: 26px 0 32px !important;
  }
}


/* v2.74.139 — Studio Bar/Garden photography refresh; optimized Lame Daze Recorded Here image. */


/* ==========================================================
   v2.74.142 — Manager + Staff calendar booking-tile contrast
   ========================================================== */
/* Keep free/available cells light, but make occupied bookings read
   immediately as distinct cards in the shared Manager/Staff week view. */
.ss-room-slot-booking {
  background: #cdbb9e;
  box-shadow: inset 0 0 0 2px rgba(16,40,58,.22);
}

.ss-room-slot-booking strong {
  font-weight: 900;
}

.ss-room-slot-booking b {
  font-weight: 900;
}

.ss-room-slot-booking small {
  opacity: .82;
}

/* Manager month view uses the same stronger occupied-card treatment. */
.ss-manager-month-items > span {
  background: #cdbb9e;
  box-shadow: inset 0 0 0 2px rgba(16,40,58,.20);
  font-weight: 800;
}

.ss-manager-month-items > span small {
  opacity: .78;
}


/* ==========================================================
   v2.74.145 — Stripe reconciliation + stronger booked-calendar cards
   ========================================================== */
/* New public rehearsal Stripe descriptions include both the primary
   contact and artist/band when available. Calendar booked-card contrast
   is stronger in shared Manager/Staff views; FREE cells are unchanged. */


/* ==========================================================
   v2.74.146 — Landing-page logo visibility control
   ========================================================== */
/* The existing landing-page logo checkbox now acts as a simple
   show/hide switch. When shown, the logo remains linked home. */


/* ==========================================================
   v2.74.147 — iPhone/WebKit public-page width + ticker hardening
   ========================================================== */

/*
 * iOS Safari and iOS Chrome both use WebKit. Prevent automatic text
 * inflation and make the main public-page grid items genuinely shrinkable.
 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 700px) {

  /* The three routes reported on iPhone must never create page-level
     horizontal overflow. Component widths are fixed below; this is the
     final route-level safety net. */
  body.ss26-rehearsals-route,
  body.ss26-studio-route,
  body.ss26-blog-route {
    max-width: 100%;
    overflow-x: hidden;
  }

  body.ss26-rehearsals-route .ss-wrap,
  body.ss26-studio-route .ss-wrap,
  body.ss26-blog-route .ss-wrap,
  .ss-rehearsal-hero-grid,
  .ss-studio-hero-grid,
  .ss-rehearsal-hero-copy,
  .ss-studio-hero-copy {
    min-width: 0 !important;
    max-width: 100%;
  }

  /*
   * The older desktop-first title rules have large fixed minimum font sizes.
   * On iOS those can become the min-content width of a one-column grid and
   * make the whole page wider than the visual viewport. These mobile sizes
   * preserve the same visual weight without allowing the headline to dictate
   * document width.
   */
  body.ss26-rehearsals-route .ss-rehearsal-hero--simple .ss-rehearsal-title {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: clamp(52px, 16vw, 66px) !important;
  }

  body.ss26-studio-route .ss-studio-title {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: clamp(52px, 16vw, 66px) !important;
  }

  body.ss26-blog-route .ss-blog-title {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: clamp(58px, 19vw, 76px) !important;
  }

  body.ss26-rehearsals-route .ss-rehearsal-intro,
  body.ss26-studio-route .ss-studio-intro,
  body.ss26-blog-route .ss-blog-intro,
  body.ss26-rehearsals-route .ss-actions,
  body.ss26-studio-route .ss-actions {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.ss26-rehearsals-route .ss-btn,
  body.ss26-studio-route .ss-btn {
    max-width: 100%;
  }

  /*
   * Keep full/wide article media inside the mobile viewport. Desktop keeps
   * the existing breakout treatment.
   */
  .ss-article-body .alignwide,
  .ss-article-body .alignfull,
  .ss-article-body .gallery,
  .ss-article-body .wp-block-gallery {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  /*
   * All moving public strips are clipped by their own box, not by the page.
   * This avoids max-content width leaking into WebKit's document width.
   */
  .ss-record-strip,
  .ss-rehearsal-strip,
  .ss-studio-strip,
  .ss-events-strip,
  .ss-shop-strip,
  .ss-blog-strip {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden !important;
    contain: layout paint;
  }

  .ss-record-strip > .ss-mobile-ticker-track,
  .ss-rehearsal-strip > .ss-mobile-ticker-track,
  .ss-studio-strip > .ss-mobile-ticker-track,
  .ss-events-strip > .ss-mobile-ticker-track,
  .ss-shop-strip > .ss-mobile-ticker-track,
  .ss-blog-strip > .ss-mobile-ticker-track {
    display: inline-flex !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: nowrap !important;
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .ss-record-strip .ss-mobile-ticker-copy,
  .ss-rehearsal-strip .ss-mobile-ticker-copy,
  .ss-studio-strip .ss-mobile-ticker-copy,
  .ss-events-strip .ss-mobile-ticker-copy,
  .ss-shop-strip .ss-mobile-ticker-copy,
  .ss-blog-strip .ss-mobile-ticker-copy {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}

/* Run the marquee explicitly when the device allows motion. */
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .ss-record-strip > .ss-mobile-ticker-track,
  .ss-rehearsal-strip > .ss-mobile-ticker-track,
  .ss-studio-strip > .ss-mobile-ticker-track,
  .ss-events-strip > .ss-mobile-ticker-track,
  .ss-shop-strip > .ss-mobile-ticker-track,
  .ss-blog-strip > .ss-mobile-ticker-track {
    animation: ss26IphoneTicker 22s linear infinite !important;
    animation-play-state: running !important;
    will-change: transform;
  }

  @keyframes ss26IphoneTicker {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }
}

/*
 * If the user has iOS Reduce Motion enabled, do not force an animation.
 * Instead show one complete, wrapped strip so nothing is cut off.
 */
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .ss-record-strip > .ss-mobile-ticker-track,
  .ss-rehearsal-strip > .ss-mobile-ticker-track,
  .ss-studio-strip > .ss-mobile-ticker-track,
  .ss-events-strip > .ss-mobile-ticker-track,
  .ss-shop-strip > .ss-mobile-ticker-track,
  .ss-blog-strip > .ss-mobile-ticker-track {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    animation: none !important;
    transform: none !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .ss-record-strip .ss-mobile-ticker-copy,
  .ss-rehearsal-strip .ss-mobile-ticker-copy,
  .ss-studio-strip .ss-mobile-ticker-copy,
  .ss-events-strip .ss-mobile-ticker-copy,
  .ss-shop-strip .ss-mobile-ticker-copy,
  .ss-blog-strip .ss-mobile-ticker-copy {
    display: block !important;
    width: 100%;
    padding: 14px 20px !important;
    white-space: normal !important;
    text-align: center;
    line-height: 1.45;
  }

  .ss-record-strip .ss-mobile-ticker-copy--repeat,
  .ss-rehearsal-strip .ss-mobile-ticker-copy--repeat,
  .ss-studio-strip .ss-mobile-ticker-copy--repeat,
  .ss-events-strip .ss-mobile-ticker-copy--repeat,
  .ss-shop-strip .ss-mobile-ticker-copy--repeat,
  .ss-blog-strip .ss-mobile-ticker-copy--repeat {
    display: none !important;
  }
}


/* ==========================================================
   v2.74.148 — narrow-phone loyalty + reduced-motion ticker polish
   ========================================================== */

/*
 * The v1.98 physical loyalty-card rules are later in the cascade than the
 * original v1.97 mobile stacking rule. Reassert the intended one-column
 * layout on tablet/phone widths so copy and stamps never compete for width.
 */
@media (max-width: 850px) {
  .ss-rehearsal-loyalty-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  .ss-rehearsal-loyalty-copy {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-content: center;
    text-align: center;
  }

  .ss-rehearsal-loyalty-kicker {
    margin-inline: auto;
  }

  .ss-rehearsal-loyalty-copy > strong {
    flex-basis: 100%;
    text-align: center;
  }

  .ss-rehearsal-loyalty-rule {
    width: 100%;
    justify-content: center;
  }

  .ss-rehearsal-loyalty-copy small {
    flex-basis: 100%;
    width: 100%;
    text-align: center;
  }

  .ss-rehearsal-loyalty-stamps {
    justify-self: center !important;
    width: max-content;
    max-width: 100%;
  }
}

@media (max-width: 520px) {
  .ss-rehearsal-loyalty-inner {
    padding-top: 20px;
    padding-bottom: 21px;
  }

  .ss-rehearsal-loyalty-copy {
    gap: 9px 10px;
  }

  .ss-rehearsal-loyalty-stamps {
    grid-template-columns: repeat(6, 29px) !important;
    gap: 7px !important;
    padding-inline: 0;
  }
}

/*
 * Respect Reduce Motion without turning the ticker into a multi-line block.
 * It remains static, single-line and manually swipeable. When Reduce Motion
 * is off, v2.74.147's normal animated marquee remains unchanged.
 */
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .ss-record-strip,
  .ss-rehearsal-strip,
  .ss-studio-strip,
  .ss-events-strip,
  .ss-shop-strip,
  .ss-blog-strip {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .ss-record-strip::-webkit-scrollbar,
  .ss-rehearsal-strip::-webkit-scrollbar,
  .ss-studio-strip::-webkit-scrollbar,
  .ss-events-strip::-webkit-scrollbar,
  .ss-shop-strip::-webkit-scrollbar,
  .ss-blog-strip::-webkit-scrollbar {
    display: none;
  }

  .ss-record-strip > .ss-mobile-ticker-track,
  .ss-rehearsal-strip > .ss-mobile-ticker-track,
  .ss-studio-strip > .ss-mobile-ticker-track,
  .ss-events-strip > .ss-mobile-ticker-track,
  .ss-shop-strip > .ss-mobile-ticker-track,
  .ss-blog-strip > .ss-mobile-ticker-track {
    display: inline-flex !important;
    width: max-content !important;
    max-width: none !important;
    min-width: 100% !important;
    animation: none !important;
    transform: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  .ss-record-strip .ss-mobile-ticker-copy,
  .ss-rehearsal-strip .ss-mobile-ticker-copy,
  .ss-studio-strip .ss-mobile-ticker-copy,
  .ss-events-strip .ss-mobile-ticker-copy,
  .ss-shop-strip .ss-mobile-ticker-copy,
  .ss-blog-strip .ss-mobile-ticker-copy {
    display: block !important;
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 15px 24px !important;
    white-space: nowrap !important;
    text-align: left !important;
    line-height: inherit !important;
  }

  .ss-record-strip .ss-mobile-ticker-copy--repeat,
  .ss-rehearsal-strip .ss-mobile-ticker-copy--repeat,
  .ss-studio-strip .ss-mobile-ticker-copy--repeat,
  .ss-events-strip .ss-mobile-ticker-copy--repeat,
  .ss-shop-strip .ss-mobile-ticker-copy--repeat,
  .ss-blog-strip .ss-mobile-ticker-copy--repeat {
    display: none !important;
  }
}


/* ==========================================================
   v2.74.149 — Rehearsal booking next-step guidance
   ========================================================== */

.ss-book-room-next {
  margin: 18px 0 14px;
  padding: 12px 15px;
  border-left: 4px solid var(--ss-sea);
  background: rgba(126, 187, 194, .14);
  color: var(--ss-ink);
  font-size: 13px;
  letter-spacing: .035em;
  text-transform: uppercase;
  scroll-margin-top: 18px;
}

.ss-book-room-next[hidden] {
  display: none !important;
}

.ss-book-room-next strong {
  font-weight: 900;
}

.ss-book-room-next span {
  display: inline-block;
  margin-left: 7px;
  font-size: 17px;
  line-height: 1;
}

.ss-book-room-next.is-emphasised {
  animation: ss26NextStepCue .7s ease-out 1;
}

@keyframes ss26NextStepCue {
  0%   { background: rgba(126, 187, 194, .34); }
  100% { background: rgba(126, 187, 194, .14); }
}

@media (max-width: 900px) {
  .ss-book-room-next {
    margin-top: 16px;
    padding: 13px 15px;
    border: 1px solid rgba(16,40,58,.18);
    border-left: 5px solid var(--ss-sea);
    font-size: 13px;
    scroll-margin-top: 14px;
  }

  .ss-book-session-choice {
    scroll-margin-top: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-book-room-next.is-emphasised {
    animation: none;
  }
}


/* ==========================================================
   v2.74.150 — gentler rehearsal next-step progression
   ========================================================== */
/* JS-only behaviour refinement: room selection now scrolls only when the
   next-step cue is genuinely below the viewport, after a short pause, and
   uses the minimum necessary scroll distance. */


/* ==========================================================
   v2.74.151 — confirmed calendar tiles: blue + white
   ========================================================== */

/*
 * Confirmed Manager/Staff booking tiles use the darker Southsea Sound blue
 * with white text for stronger at-a-glance contrast. The booking-type/room
 * accent strip remains in place. Active checkout holds deliberately keep
 * their existing light-blue treatment so they cannot be mistaken for a
 * confirmed booking.
 */
.ss-room-slot-booking:not(.is-hold) {
  background: var(--ss-ink-2);
  color: var(--ss-paper);
  box-shadow: inset 0 0 0 2px rgba(16,40,58,.28);
}

.ss-room-slot-booking:not(.is-hold) strong,
.ss-room-slot-booking:not(.is-hold) b,
.ss-room-slot-booking:not(.is-hold) small {
  color: var(--ss-paper);
}

.ss-room-slot-booking:not(.is-hold) small {
  opacity: .82;
}

/* Manager month tiles */
.ss-manager-month-items > span:not(.is-hold) {
  background: var(--ss-ink-2);
  color: var(--ss-paper);
  box-shadow: inset 0 0 0 2px rgba(16,40,58,.24);
  font-weight: 800;
}

.ss-manager-month-items > span:not(.is-hold) b,
.ss-manager-month-items > span:not(.is-hold) em,
.ss-manager-month-items > span:not(.is-hold) small {
  color: var(--ss-paper);
}

.ss-manager-month-items > span:not(.is-hold) small {
  opacity: .80;
}

/* Staff month tiles */
.ss-staff-month-items > span:not(.is-hold) {
  background: var(--ss-ink-2);
  color: var(--ss-paper);
  box-shadow: inset 0 0 0 2px rgba(16,40,58,.24);
}

.ss-staff-month-items > span:not(.is-hold) b,
.ss-staff-month-items > span:not(.is-hold) em,
.ss-staff-month-items > span:not(.is-hold) small {
  color: var(--ss-paper);
}

.ss-staff-month-items > span:not(.is-hold) small {
  opacity: .80;
}

/* Preserve the established visual distinction for temporary checkout holds. */
.ss-room-slot-booking.is-hold,
.ss-manager-month-items > span.is-hold,
.ss-staff-month-items > span.is-hold {
  background: var(--ss-sky);
  color: var(--ss-ink);
  box-shadow: inset 0 0 0 1px rgba(16,40,58,.22);
}

.ss-room-slot-booking.is-hold strong,
.ss-room-slot-booking.is-hold b,
.ss-room-slot-booking.is-hold small,
.ss-manager-month-items > span.is-hold b,
.ss-manager-month-items > span.is-hold em,
.ss-manager-month-items > span.is-hold small,
.ss-staff-month-items > span.is-hold b,
.ss-staff-month-items > span.is-hold em,
.ss-staff-month-items > span.is-hold small {
  color: var(--ss-ink);
}


/* ==========================================================
   v2.74.152 — Manager + Staff mobile portal optimisation
   ========================================================== */

@media (max-width: 760px) {

  /* --------------------------------------------------------
     Shared portal shell
     -------------------------------------------------------- */
  body.ss26-manager-calendar-route,
  body.ss26-staff-calendar-route {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body.ss26-manager-calendar-route .ss-wrap,
  body.ss26-staff-calendar-route .ss-wrap {
    width: min(100% - 24px, var(--ss-wrap, 1180px));
    min-width: 0;
  }

  .ss-staff-prototype {
    padding-top: 24px;
    padding-bottom: 70px;
  }

  .ss-staff-prototype-alert {
    margin-bottom: 18px;
    padding: 11px 12px;
    gap: 9px;
    flex-direction: column;
  }

  .ss-manager-prototype .ss-manager-shell-head,
  .ss-staff-prototype-head {
    margin-bottom: 20px;
    gap: 16px;
  }

  .ss-manager-prototype .ss-manager-shell-head h1,
  .ss-staff-prototype-head h1 {
    font-size: clamp(46px, 15vw, 60px);
    line-height: .84;
  }

  .ss-manager-prototype .ss-manager-shell-head p:not(.ss-eyebrow),
  .ss-staff-prototype-head p:not(.ss-eyebrow) {
    margin-top: 9px;
    font-size: 14px;
    line-height: 1.45;
  }

  /* --------------------------------------------------------
     Manager section navigation
     -------------------------------------------------------- */
  .ss-manager-shell-actions,
  .ss-calendar-head-actions {
    width: 100%;
    min-width: 0;
  }

  .ss-manager-menu-primary {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: nowrap !important;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .ss-manager-menu-primary::-webkit-scrollbar {
    display: none;
  }

  .ss-manager-menu-primary .ss-btn {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 9px 13px;
    font-size: 10px;
    scroll-snap-align: start;
  }

  .ss-manager-menu-secondary {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
  }

  .ss-manager-menu-secondary #managerAddBookingBtn {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 48px;
    font-size: 12px;
  }

  .ss-manager-menu-secondary .ss-manager-utility-link {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    font-size: 9px;
  }

  /* --------------------------------------------------------
     Calendar controls
     -------------------------------------------------------- */
  .ss-manager-calendar-subhead {
    margin-top: 14px;
    padding: 16px;
  }

  .ss-manager-calendar-subhead h2 {
    font-size: 42px;
  }

  .ss-manager-toolbar {
    margin-top: 12px;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .ss-manager-toolbar .ss-manager-calendar-mode-switch,
  .ss-manager-toolbar .ss-manager-week-label {
    grid-column: 1 / -1;
  }

  .ss-manager-toolbar .ss-manager-calendar-mode-switch {
    order: -2;
    width: 100%;
  }

  .ss-manager-toolbar .ss-manager-calendar-mode-switch button,
  .ss-shift-view-switch button {
    min-height: 46px;
    min-width: 0;
    font-size: 11px;
  }

  .ss-manager-toolbar .ss-manager-week-label {
    order: -1;
    padding: 4px 0;
    font-size: 12px;
    line-height: 1.35;
  }

  .ss-manager-nav-btn {
    width: 100%;
    min-height: 46px;
  }

  #managerToday {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .ss-manager-legend {
    gap: 8px 12px;
    font-size: 10px;
  }

  /* Clear cue before deliberately wide Week / Month views. */
  #managerWeekView::before,
  #managerMonthView::before,
  #staffWeekView::before,
  #staffMonthView::before {
    content: "Swipe to see more →";
    display: block;
    padding: 8px 10px;
    background: rgba(143,210,229,.18);
    color: rgba(16,40,58,.72);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
    text-align: right;
    text-transform: uppercase;
  }

  .ss-manager-calendar-scroll,
  .ss-shift-week-grid,
  .ss-staff-month-grid {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* --------------------------------------------------------
     Manager Day view: readable booking cards
     -------------------------------------------------------- */
  .ss-manager-day-panel {
    padding: 16px 12px;
  }

  .ss-manager-day-panel h2 {
    font-size: clamp(34px, 11vw, 46px);
  }

  .ss-manager-booking-row {
    margin: 12px 0;
    padding: 15px 12px 15px 14px;
    grid-template-columns: 1fr;
    gap: 9px;
    border: 1px solid rgba(16,40,58,.18);
    border-left: 6px solid var(--booking-accent);
    background: rgba(255,255,255,.56);
  }

  .ss-manager-booking-time {
    display: flex;
    gap: 10px;
    align-items: baseline;
  }

  .ss-manager-booking-time strong {
    font-size: 26px;
  }

  .ss-manager-booking-main h3 {
    font-size: 22px;
    line-height: 1.05;
  }

  .ss-manager-booking-main p {
    font-size: 13px;
    line-height: 1.45;
  }

  .ss-manager-booking-meta {
    grid-column: auto;
    justify-items: start;
    gap: 8px;
  }

  .ss-manager-booking-meta .ss-btn,
  .ss-manager-booking-meta button,
  .ss-manager-booking-meta a {
    min-height: 42px;
  }

  .ss-manager-booking-refund {
    justify-items: start;
  }

  .ss-manager-booking-refund > div {
    justify-content: flex-start;
  }

  /* --------------------------------------------------------
     Manager Dashboard / attention cards
     -------------------------------------------------------- */
  .ss-manager-dashboard-head {
    padding: 17px;
  }

  .ss-manager-dashboard-head h2 {
    font-size: 36px;
  }

  .ss-manager-kpi-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    margin-top: 12px;
  }

  .ss-manager-kpi-card {
    padding: 14px 11px;
  }

  .ss-manager-kpi-card > strong {
    font-size: 30px;
  }

  .ss-manager-dashboard-controls {
    grid-template-columns: 1fr !important;
  }

  .ss-manager-dashboard-controls > label,
  .ss-manager-dashboard-controls > label:first-child,
  .ss-manager-dashboard-actions {
    grid-column: 1 !important;
    width: 100%;
  }

  .ss-manager-dashboard-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ss-manager-dashboard-actions .ss-btn {
    width: 100%;
    min-height: 44px;
  }

  .ss-manager-action-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .ss-manager-action-stats {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ss-manager-action-item {
    grid-template-columns: 1fr !important;
    gap: 8px;
    padding: 13px 12px;
  }

  .ss-manager-action-date,
  .ss-manager-action-main,
  .ss-manager-action-flags,
  .ss-manager-action-value {
    grid-column: auto !important;
    text-align: left !important;
    justify-content: flex-start !important;
    justify-items: start !important;
  }

  /* --------------------------------------------------------
     Forms/modals: usable with one hand and no iOS field zoom
     -------------------------------------------------------- */
  .ss-manager-modal {
    padding: 8px;
    place-items: center;
  }

  .ss-manager-modal-dialog {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 16px);
    padding: 24px 15px 18px;
    border-width: 1px;
    box-shadow: 5px 6px 0 var(--ss-sea);
  }

  .ss-manager-modal-dialog h2 {
    padding-right: 34px;
    margin-bottom: 17px;
    font-size: 38px;
  }

  .ss-manager-modal-close {
    top: 7px;
    right: 9px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    font-size: 30px;
  }

  .ss-manager-form-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ss-manager-prototype input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .ss-manager-prototype select,
  .ss-manager-prototype textarea,
  .ss-staff-prototype input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .ss-staff-prototype select,
  .ss-staff-prototype textarea {
    min-height: 46px;
    font-size: 16px !important;
  }

  .ss-manager-modal-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ss-manager-modal-actions .ss-btn,
  .ss-manager-modal-actions button {
    width: 100%;
    min-height: 46px;
  }

  /* --------------------------------------------------------
     Staff portal
     -------------------------------------------------------- */
  .ss-staff-head-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .ss-staff-head-actions .ss-shift-view-switch {
    width: 100%;
  }

  .ss-staff-head-actions .ss-portal-logout {
    align-self: flex-start;
    min-height: 40px;
  }

  .ss-shift-date-nav {
    grid-template-columns: 48px 1fr 48px;
    gap: 8px;
  }

  .ss-shift-date-nav button {
    width: 48px;
    height: 48px;
  }

  .ss-shift-date-nav strong {
    font-size: clamp(24px, 8vw, 34px);
  }

  .ss-shift-booking {
    min-height: 0;
    margin: 12px 0;
    padding: 15px 12px 15px 14px;
    grid-template-columns: 1fr;
    gap: 10px;
    border: 1px solid rgba(16,40,58,.18);
    border-left: 7px solid var(--booking-accent);
    background: rgba(255,255,255,.55);
  }

  .ss-shift-time {
    display: flex;
    gap: 10px;
    align-items: baseline;
  }

  .ss-shift-time strong {
    font-size: 35px;
  }

  .ss-shift-time span {
    margin-top: 0;
  }

  .ss-shift-booking-content h2 {
    margin: 4px 0 10px;
    font-size: clamp(27px, 9vw, 38px);
  }

  .ss-shift-setup {
    padding: 11px 12px;
  }

  .ss-staff-close-down-summary {
    padding: 14px 12px;
  }

  .ss-staff-close-down-summary > div {
    min-width: 0;
  }

  /* --------------------------------------------------------
     General Manager content panels: don't force desktop width
     -------------------------------------------------------- */
  .ss-manager-prototype *,
  .ss-staff-prototype * {
    min-width: 0;
  }

  .ss-manager-prototype img,
  .ss-staff-prototype img {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 390px) {
  .ss-manager-menu-secondary {
    grid-template-columns: 1fr 1fr;
  }

  .ss-manager-menu-secondary #managerAddBookingBtn {
    grid-column: 1 / -1;
  }

  .ss-manager-menu-secondary .ss-manager-utility-link {
    justify-content: center;
    text-align: center;
  }

  .ss-manager-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* ==========================================================
   v2.74.153 — mobile Manager/Staff Week agenda
   ========================================================== */

@media (max-width: 760px) {

  /* Week is now a native vertical agenda on phones, so remove the
     wide-grid swipe cue and horizontal scroll treatment from Week only. */
  #managerWeekView::before,
  #staffWeekView::before {
    display: none !important;
  }

  #managerWeekView .ss-manager-calendar-scroll,
  #staffWeekView .ss-shift-week-grid {
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
  }

  .ss-mobile-week-agenda {
    display: grid;
    gap: 12px;
    width: 100%;
    min-width: 0;
  }

  .ss-mobile-week-day {
    overflow: hidden;
    border: 1px solid rgba(16,40,58,.16);
    border-radius: 14px;
    background: rgba(255,255,255,.54);
    box-shadow: 0 2px 0 rgba(16,40,58,.05);
  }

  .ss-mobile-week-day.selected {
    border-color: rgba(18,147,180,.62);
    box-shadow: inset 0 0 0 1px rgba(18,147,180,.22);
  }

  .ss-mobile-week-day-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 13px 10px;
    background: rgba(143,210,229,.12);
    border-bottom: 1px solid rgba(16,40,58,.10);
  }

  .ss-mobile-week-date {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
  }

  .ss-mobile-week-date span {
    color: var(--ss-sea);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
  }

  .ss-mobile-week-date strong {
    color: var(--ss-ink);
    font-size: 34px;
    line-height: .9;
    font-weight: 900;
  }

  .ss-mobile-week-day-head > small {
    color: rgba(16,40,58,.68);
    font-size: 11px;
    line-height: 1.25;
    font-weight: 800;
    text-align: right;
  }

  .ss-mobile-week-table {
    padding: 10px;
  }

  .ss-mobile-week-table-head {
    display: grid;
    grid-template-columns: 78px minmax(0,1fr) minmax(0,1fr);
    gap: 6px;
    align-items: center;
    padding: 0 2px 6px;
    color: rgba(16,40,58,.76);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .045em;
    text-transform: uppercase;
  }

  .ss-mobile-week-table-head span:not(:first-child) {
    text-align: center;
  }

  .ss-mobile-week-row {
    display: grid;
    grid-template-columns: 78px minmax(0,1fr);
    gap: 6px;
    align-items: stretch;
    margin-top: 6px;
  }

  .ss-mobile-week-time {
    display: flex;
    align-items: center;
    color: var(--ss-ink);
    font-size: 11px;
    line-height: 1.15;
    font-weight: 800;
    white-space: nowrap;
  }

  .ss-mobile-week-rooms {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 6px;
    min-width: 0;
  }

  .ss-mobile-week-slot {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 7px 6px;
    border: 1px solid rgba(16,40,58,.10);
    border-radius: 7px;
    font: inherit;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
  }

  .ss-mobile-week-slot.is-free {
    background: rgba(143,210,229,.14);
    color: rgba(16,40,58,.55);
    font-size: 12px;
    font-weight: 700;
  }

  .ss-mobile-week-slot.is-booked {
    border-left: 4px solid var(--booking-accent);
    background: var(--ss-ink-2);
    color: var(--ss-paper);
  }

  .ss-mobile-week-slot.is-hold {
    border-left: 4px solid var(--ss-sea);
    background: var(--ss-sky);
    color: var(--ss-ink);
  }

  .ss-mobile-week-slot.is-whole {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 7px;
    align-items: center;
    text-align: left;
    padding-inline: 9px;
  }

  .ss-mobile-week-slot.is-whole > small {
    color: inherit;
    opacity: .75;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .ss-mobile-week-booking {
    display: block;
    min-width: 0;
  }

  .ss-mobile-week-booking b {
    display: block;
    overflow-wrap: anywhere;
    color: inherit;
    font-size: 12px;
    line-height: 1.15;
    font-weight: 900;
  }

  .ss-mobile-week-slot:focus-visible {
    outline: 3px solid rgba(18,147,180,.35);
    outline-offset: 2px;
  }
}

@media (max-width: 390px) {
  .ss-mobile-week-table-head {
    grid-template-columns: 70px minmax(0,1fr) minmax(0,1fr);
  }

  .ss-mobile-week-row {
    grid-template-columns: 70px minmax(0,1fr);
  }

  .ss-mobile-week-time {
    font-size: 10px;
  }

  .ss-mobile-week-slot {
    padding-inline: 4px;
  }

  .ss-mobile-week-booking b {
    font-size: 11px;
  }
}


/* ==========================================================
   v2.74.154 — mobile calendar transition + compact navigation
   ========================================================== */

@media (max-width: 760px) {

  /* Give programmatic Week -> Day navigation a clean landing point. */
  #managerDayView,
  #staffDayView {
    scroll-margin-top: 12px;
  }

  /* Manager: Previous / Today / Next as a compact three-button row. */
  body.ss26-manager-calendar-route .ss-manager-toolbar {
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    align-items: center;
    column-gap: 7px;
    row-gap: 8px;
  }

  body.ss26-manager-calendar-route .ss-manager-toolbar .ss-manager-calendar-mode-switch {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
  }

  body.ss26-manager-calendar-route .ss-manager-toolbar .ss-manager-week-label {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    padding: 2px 0 4px;
    text-align: center;
  }

  body.ss26-manager-calendar-route #managerPrevPeriod {
    grid-column: 1;
    grid-row: 3;
  }

  body.ss26-manager-calendar-route #managerToday {
    grid-column: 2;
    grid-row: 3;
  }

  body.ss26-manager-calendar-route #managerNextPeriod {
    grid-column: 3;
    grid-row: 3;
  }

  body.ss26-manager-calendar-route #managerPrevPeriod,
  body.ss26-manager-calendar-route #managerToday,
  body.ss26-manager-calendar-route #managerNextPeriod {
    width: auto;
    min-width: 0;
    min-height: 36px;
    padding: 7px 11px;
    font-size: 9px;
    line-height: 1;
    white-space: nowrap;
  }

  /* Staff Week/Month navigation is also deliberately compact on phones. */
  body.ss26-staff-calendar-route #staffWeekView .ss-manager-toolbar,
  body.ss26-staff-calendar-route #staffMonthView .ss-manager-toolbar {
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: 7px;
    align-items: center;
  }

  body.ss26-staff-calendar-route #staffWeekView .ss-manager-week-label,
  body.ss26-staff-calendar-route #staffMonthView .ss-manager-week-label {
    grid-column: 2;
    grid-row: 1;
    padding: 0 4px;
    text-align: center;
  }

  body.ss26-staff-calendar-route #staffPrevWeek,
  body.ss26-staff-calendar-route #staffNextWeek,
  body.ss26-staff-calendar-route #staffPrevMonth,
  body.ss26-staff-calendar-route #staffNextMonth {
    width: auto;
    min-width: 0;
    min-height: 36px;
    padding: 7px 9px;
    font-size: 9px;
    line-height: 1;
    white-space: nowrap;
  }
}


/* ==========================================================
   v2.74.155 — Manager Week FREE-slot booking shortcut
   ========================================================== */

/* Make FREE Manager Week slots feel intentionally actionable without
   changing their existing pale/free visual language. */
body.ss26-manager-calendar-route .ss-room-slot-cell.is-free,
body.ss26-manager-calendar-route .ss-mobile-week-slot.is-free {
  cursor: pointer;
}

body.ss26-manager-calendar-route .ss-room-slot-cell.is-free:hover,
body.ss26-manager-calendar-route .ss-room-slot-cell.is-free:focus-visible,
body.ss26-manager-calendar-route .ss-mobile-week-slot.is-free:hover,
body.ss26-manager-calendar-route .ss-mobile-week-slot.is-free:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(18,147,180,.30);
}

@media (hover: hover) and (pointer: fine) {
  body.ss26-manager-calendar-route .ss-room-slot-cell.is-free em::after {
    content: " · BOOK";
    font-style: normal;
    opacity: .68;
  }
}


/* ==========================================================
   v2.74.156 — mobile Recording / Custom Project time fields
   ========================================================== */

@media (max-width: 760px) {
  /*
   * Recording and Custom Project use the flexible Start / End selectors.
   * Keep each on its own full-width row on phones so native iOS selects
   * and larger accessibility text can never crowd or overlap.
   */
  #managerCustomStartWrap,
  #managerCustomEndWrap,
  #managerFlexibleStartWrap {
    grid-column: 1 / -1 !important;
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
  }

  #managerCustomStartWrap select,
  #managerCustomEndWrap select,
  #managerFlexibleStartWrap select {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
}


/* ==========================================================
   v2.74.157 — Singing / Tuition Lesson Manager booking type
   ========================================================== */
/* No new layout system is required: tuition bookings use the existing
   room-based calendar accent and the established confirmed blue tile style. */


/* ==========================================================
   v2.74.158 — mobile project/recording Booked Dates layout
   ========================================================== */

@media (max-width: 760px) {

  /*
   * Recording / Custom Project dates are dynamically generated and do not
   * use the single-booking Start/End wrappers. Give the actual project-date
   * row a native mobile layout instead of allowing the old flex rules to
   * squeeze Date / Start / End / Rate beside one another.
   */
  .ss-manager-project-date-row {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px 8px;
    align-items: end;
    padding: 14px 0;
  }

  .ss-manager-project-date-row > .ss-manager-project-date-number {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    width: 38px;
    height: 46px;
    margin: 0;
  }

  /* Date remains alongside the little date number. */
  .ss-manager-project-date-row > label:first-of-type {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0 !important;
  }

  /* Session / Start / End / Rate each receive their own full-width row. */
  .ss-manager-project-date-row > label:not(:first-of-type) {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0 !important;
    margin: 0;
  }

  .ss-manager-project-date-row > label input,
  .ss-manager-project-date-row > label select {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* Keep remove available but unobtrusive beneath the fields. */
  .ss-manager-project-date-row > .ss-manager-project-date-remove {
    grid-column: 2;
    justify-self: end;
    width: 46px;
    min-width: 46px;
    min-height: 42px;
    margin: 0;
  }
}


/* ==========================================================
   v2.74.159 — landing-page mobile carousel performance
   ========================================================== */

/*
 * Mobile browsers are much smoother when they own the swipe/momentum scroll.
 * Desktop still keeps mouse grab-to-drag through the existing JavaScript.
 */
@media (max-width: 900px) {
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-made-here-track,
  .ss-landing-scene-links .ss-made-here-track {
    touch-action: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }

  /* Touchscreens do not need hover animation/compositing while the row moves. */
  @media (hover: none), (pointer: coarse) {
    .ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card,
    .ss-landing-hero-stage > .ss-landing-scene-links .ss-project-media img {
      transition: none !important;
    }

    .ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card:hover,
    .ss-landing-hero-stage > .ss-landing-scene-links .ss-project-card:focus-visible {
      transform: none !important;
    }
  }
}


/* ==========================================================
   v2.74.160 — mobile landing dialog / carousel close fix
   ========================================================== */

@media (max-width: 900px) and (hover: none), (max-width: 900px) and (pointer: coarse) {

  /*
   * iOS restores focus to the control that launched a native dialog.
   * Do not render the desktop keyboard focus/tap rectangle on a touch-only
   * carousel; keyboard/fine-pointer focus styling remains unchanged.
   */
  .ss-landing-scene-links .ss-made-here-track,
  .ss-landing-scene-links .ss-project-card {
    -webkit-tap-highlight-color: transparent;
  }

  .ss-landing-scene-links .ss-made-here-track:focus,
  .ss-landing-scene-links .ss-made-here-track:focus-visible,
  .ss-landing-scene-links .ss-project-card:focus,
  .ss-landing-scene-links .ss-project-card:focus-visible {
    outline: none !important;
    box-shadow: none;
  }

  /*
   * backdrop-filter across a full-screen native dialog is expensive on iOS
   * when the page beneath contains a large image carousel. A plain translucent
   * backdrop gives the same visual separation without the extra compositor work.
   */
  .ss-landing-dialog::backdrop {
    background: rgba(5,16,24,.82);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}


/* ==========================================================
   v2.74.161 — calendar loading optimisation
   ========================================================== */
/* No presentation change. Manager/Staff calendar reads no longer wait for
   expired rehearsal-hold Stripe housekeeping before returning bookings. */


/* ==========================================================
   v2.74.162 — add-next controls follow long editable lists
   ========================================================== */

.ss-manager-add-after-list {
  display: flex;
  justify-content: flex-start;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(16,40,58,.10);
}

@media (max-width: 760px) {
  .ss-manager-add-after-list .ss-btn {
    width: 100%;
    min-height: 44px;
  }
}


/* ==========================================================
   v2.74.163 — landing mobile dialog stability + hero rotation
   ========================================================== */

@media (max-width: 680px) {
  /*
   * Keep the artwork stable at the top of the mobile details card.
   * Long Genres / Other details scroll only in the lower text panel instead
   * of making the complete dialog (including artwork/headings) shift upward.
   */
  .ss-landing-dialog-card {
    height: min(90svh, 760px);
    max-height: min(90svh, 760px);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(190px, 34svh) minmax(0, 1fr);
    overflow: hidden !important;
  }

  .ss-landing-dialog-media {
    grid-row: 1;
    min-height: 0;
    height: 100%;
    aspect-ratio: auto;
    padding: 24px 48px;
    overflow: hidden;
  }

  .ss-landing-dialog-media img {
    width: 100%;
    height: 100%;
    max-width: 300px;
    max-height: 100%;
    object-fit: contain;
  }

  .ss-landing-dialog-content {
    grid-row: 2;
    min-height: 0;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding: 24px 24px 30px;
  }

  .ss-landing-dialog-content h2 {
    margin-top: 0;
  }

  /* Keep the close control attached to the card rather than the scrolling copy. */
  .ss-landing-dialog-close {
    position: absolute;
  }
}

/*
 * On Reduce Motion devices, continue showing every hero image but remove
 * the crossfade and slow Ken-Burns-style scale. Each 5.5s change is an
 * instantaneous cut.
 */
@media (prefers-reduced-motion: reduce) {
  .ss-landing-hero-slide {
    transition: none !important;
    transform: none !important;
  }

  .ss-landing-hero-slide.is-active {
    transform: none !important;
  }
}


/* ==========================================================
   v2.74.164 — mobile landing logo artwork fit
   ========================================================== */

@media (max-width: 680px) {
  /*
   * Give square / circular promoter logos a little more vertical room than
   * v2.74.163 while keeping the text panel independently scrollable.
   */
  .ss-landing-dialog-card {
    grid-template-rows: minmax(230px, 40svh) minmax(0, 1fr);
  }

  .ss-landing-dialog-media {
    box-sizing: border-box;
    padding: 30px 44px;
    overflow: hidden;
  }

  /*
   * Size from the artwork's intrinsic ratio rather than forcing both width
   * and height to 100%. This guarantees the complete circle/square stays
   * visible with breathing room on all mobile aspect ratios.
   */
  .ss-landing-dialog-media img {
    width: auto !important;
    height: auto !important;
    max-width: min(78vw, 310px) !important;
    max-height: calc(100% - 20px) !important;
    object-fit: contain !important;
    object-position: center center;
  }
}


/* ==========================================================
   v2.74.165 — mobile landing artwork auto-fit
   ========================================================== */

@media (max-width: 680px) {
  /*
   * Do not force the artwork into a fixed-height grid row. Let the media
   * panel size itself from the contained image, while the text panel takes
   * the remaining dialog height and scrolls independently.
   */
  .ss-landing-dialog-card {
    height: min(90svh, 760px);
    max-height: min(90svh, 760px);
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  .ss-landing-dialog-media {
    grid-row: 1;
    height: auto !important;
    min-height: 0;
    max-height: none !important;
    padding: 22px 42px 18px;
    display: grid;
    place-items: center;
    overflow: visible !important;
  }

  .ss-landing-dialog-media img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: min(76vw, 300px) !important;
    max-height: 31svh !important;
    margin: 0 auto;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    clip-path: none !important;
  }

  .ss-landing-dialog-content {
    grid-row: 2;
    min-height: 0;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
}


/* ==========================================================
   v2.74.166 — landing-page image delivery optimisation
   ========================================================== */
/* No visual CSS change. Landing hero/tile markup now uses responsive
   WordPress image candidates instead of forcing full-size originals. */


/* ==========================================================
   v2.74.167 — landing-page image payload pass 2
   ========================================================== */
/* No visual CSS change. Tile delivery and corner-logo assets are lighter. */


/* ==========================================================
   v2.74.168 — landing-page WebP delivery
   ========================================================== */

/* <picture> is delivery-only; preserve the existing absolutely positioned
   hero-slide layout exactly. */
.ss-landing-hero-slides > .ss-landing-hero-picture {
  display: contents;
}


/* ==========================================================
   v2.74.169 — landing mobile carousel arrows align right
   ========================================================== */

@media (max-width: 600px) {
  .ss-landing-hero-stage > .ss-landing-scene-links .ss-landing-scene-toolbar {
    justify-content: flex-end;
  }

  .ss-landing-hero-stage > .ss-landing-scene-links .ss-made-here-controls {
    margin-left: auto;
  }
}


/* ==========================================================
   v2.74.171 — Manager landing-page aggregate view stats
   ========================================================== */

.ss-landing-stats-panel {
  border: 1px solid rgba(16,40,58,.14);
  background: rgba(143,210,229,.10);
  padding: 16px;
}

.ss-landing-stats-panel[hidden] {
  display: none !important;
}

.ss-landing-stats-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 13px;
}

.ss-landing-stats-head > span {
  display: grid;
  gap: 3px;
}

.ss-landing-stats-head strong {
  font-size: 14px;
}

.ss-landing-stats-head small,
.ss-landing-stats-note {
  color: rgba(16,40,58,.65);
  font-size: 11px;
  line-height: 1.4;
}

.ss-landing-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 9px;
}

.ss-landing-stats-grid > div {
  padding: 12px;
  border: 1px solid rgba(16,40,58,.10);
  background: rgba(255,255,255,.55);
}

.ss-landing-stats-grid span {
  display: block;
  margin-bottom: 4px;
  color: rgba(16,40,58,.65);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.ss-landing-stats-grid strong {
  color: var(--ss-ink);
  font-size: 27px;
  line-height: 1;
}

.ss-landing-stats-note {
  display: block;
  margin-top: 10px;
}

@media (max-width: 760px) {
  .ss-landing-stats-head {
    display: grid;
    gap: 7px;
  }

  .ss-landing-stats-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}


/* ==========================================================
   v2.74.177 — Manager pre-production form editor
   ========================================================== */

.ss-manager-preproduction-template-card {
  margin-bottom: 20px;
  border: 1px solid rgba(16,40,58,.16);
  background: rgba(143,210,229,.08);
}

.ss-manager-preproduction-template-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
}

.ss-manager-preproduction-template-head > div {
  display: grid;
  gap: 4px;
}

.ss-manager-preproduction-template-head > div > span,
.ss-manager-pp-template-section-head > span,
.ss-manager-pp-preview-head > span {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .62;
}

.ss-manager-preproduction-template-head > div > strong {
  font-size: 16px;
}

.ss-manager-preproduction-template-head small,
.ss-manager-preproduction-completed-head small {
  color: rgba(16,40,58,.65);
  line-height: 1.45;
}

.ss-manager-preproduction-template-editor {
  border-top: 1px solid rgba(16,40,58,.14);
  padding: 16px;
  background: rgba(255,255,255,.46);
}

.ss-manager-preproduction-template-editor[hidden],
.ss-manager-preproduction-template-preview[hidden] {
  display: none !important;
}

.ss-manager-pp-template-section {
  margin-bottom: 16px;
  padding: 15px;
  border: 1px solid rgba(16,40,58,.14);
  background: #fff;
}

.ss-manager-pp-template-section-head {
  display: grid;
  gap: 3px;
  margin-bottom: 13px;
}

.ss-manager-pp-template-section-head strong {
  font-size: 17px;
}

.ss-manager-pp-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

.ss-manager-pp-template-input {
  display: grid;
  gap: 5px;
  align-content: start;
}

.ss-manager-pp-template-input > span,
.ss-manager-pp-question-list-title {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(16,40,58,.72);
}

.ss-manager-pp-template-input input,
.ss-manager-pp-template-input textarea {
  width: 100%;
  border: 1px solid rgba(16,40,58,.28);
  background: #fff;
  padding: 9px 10px;
  color: var(--ss-ink);
  font: inherit;
  border-radius: 0;
}

.ss-manager-pp-template-input textarea {
  resize: vertical;
  min-height: 62px;
}

.ss-manager-pp-template-input small {
  color: rgba(16,40,58,.58);
  font-size: 10px;
  line-height: 1.4;
}

.ss-manager-pp-template-rich {
  grid-column: 1 / -1;
}

.ss-manager-pp-template-rich .wp-editor-wrap {
  width: 100%;
  background: #fff;
}

.ss-manager-pp-template-rich .wp-editor-container {
  border: 1px solid rgba(16,40,58,.28);
}

.ss-manager-pp-template-rich .mce-toolbar-grp,
.ss-manager-pp-template-rich .quicktags-toolbar {
  background: rgba(244,240,230,.48);
}

.ss-manager-pp-question-list {
  display: grid;
  gap: 8px;
  margin-top: 15px;
}

.ss-manager-pp-question {
  border: 1px solid rgba(16,40,58,.14);
  background: rgba(244,240,230,.42);
}

.ss-manager-pp-question > summary,
.ss-manager-pp-static-copy > summary,
.ss-manager-preproduction-template-history > summary {
  cursor: pointer;
  list-style: none;
}

.ss-manager-pp-question > summary::-webkit-details-marker,
.ss-manager-pp-static-copy > summary::-webkit-details-marker,
.ss-manager-preproduction-template-history > summary::-webkit-details-marker {
  display: none;
}

.ss-manager-pp-question > summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
}

.ss-manager-pp-question > summary > span:first-child {
  display: grid;
  gap: 2px;
}

.ss-manager-pp-question > summary small {
  color: rgba(16,40,58,.58);
  font-size: 10px;
}

.ss-manager-pp-question-state {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .65;
}

.ss-manager-pp-question-body {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid rgba(16,40,58,.12);
}

.ss-manager-pp-question-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
}

.ss-manager-pp-template-check {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
}

.ss-manager-pp-template-check input {
  margin-top: 2px;
}

.ss-manager-pp-template-check span {
  display: grid;
  gap: 2px;
}

.ss-manager-pp-template-check small {
  font-weight: 500;
  color: rgba(16,40,58,.58);
}

.ss-manager-pp-question-move {
  margin-left: auto;
  display: flex;
  gap: 5px;
}

.ss-manager-pp-question-move button {
  min-width: 36px;
}

.ss-manager-pp-static-copy {
  margin-top: 13px;
  border: 1px solid rgba(16,40,58,.14);
  background: rgba(143,210,229,.08);
}

.ss-manager-pp-static-copy > summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
}

.ss-manager-pp-static-copy > summary span {
  font-size: 10px;
  color: rgba(16,40,58,.58);
}

.ss-manager-pp-static-copy > .ss-manager-pp-template-grid {
  padding: 12px;
  border-top: 1px solid rgba(16,40,58,.12);
}

.ss-manager-pp-preview-help {
  flex: 1 0 100%;
  margin: 0 0 2px;
  text-align: right;
  color: rgba(16,40,58,.62);
  font-size: 10px;
  line-height: 1.4;
}

.ss-manager-preproduction-template-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px -16px -16px;
  padding: 12px 16px;
  border-top: 1px solid rgba(16,40,58,.14);
  background: rgba(255,253,247,.96);
  backdrop-filter: blur(7px);
}

.ss-manager-preproduction-template-preview {
  margin-top: 28px;
  padding: 16px;
  border: 2px solid var(--ss-ink);
  background: #fffdf7;
}

.ss-manager-pp-preview-head {
  padding: 18px;
  background: var(--ss-sky);
  border: 1px solid rgba(16,40,58,.18);
}

.ss-manager-pp-preview-head strong {
  display: block;
  margin: 6px 0;
  font-size: 24px;
  text-transform: uppercase;
  line-height: 1;
}

.ss-manager-pp-preview-head p,
.ss-manager-pp-template-preview section > p {
  color: rgba(16,40,58,.72);
  line-height: 1.5;
}

.ss-manager-preproduction-template-preview > section {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(16,40,58,.14);
}

.ss-manager-preproduction-template-preview > section > span {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .58;
}

.ss-manager-preproduction-template-preview h4 {
  margin: 4px 0 6px;
  font-size: 18px;
  text-transform: uppercase;
}

.ss-manager-pp-preview-question {
  margin-top: 7px;
  padding: 8px 9px;
  border: 1px solid rgba(16,40,58,.12);
  font-size: 11px;
  font-weight: 800;
}

.ss-manager-pp-preview-question.is-required::after {
  content: "Required";
  float: right;
  font-size: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .56;
}

.ss-manager-pp-preview-question small {
  display: block;
  margin-top: 3px;
  font-weight: 500;
  opacity: .62;
}

.ss-manager-pp-preview-callout {
  margin-top: 10px;
  padding: 10px 11px;
  border-left: 4px solid var(--ss-sea);
  background: var(--ss-foam);
  font-size: 11px;
  line-height: 1.45;
}

.ss-manager-pp-preview-callout strong {
  display: block;
  margin-bottom: 3px;
}

.ss-manager-preproduction-template-history {
  margin-top: 16px;
  border: 1px solid rgba(16,40,58,.14);
}

.ss-manager-preproduction-template-history > summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
}

.ss-manager-preproduction-template-history > summary span {
  font-size: 10px;
  opacity: .58;
}

.ss-manager-pp-version-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-top: 1px solid rgba(16,40,58,.10);
}

.ss-manager-pp-version-row > span {
  display: grid;
  gap: 2px;
}

.ss-manager-pp-version-row small {
  color: rgba(16,40,58,.58);
  font-size: 10px;
}

.ss-manager-pp-version-row b {
  font-size: 9px;
  letter-spacing: .07em;
  color: var(--ss-sea);
}

.ss-manager-preproduction-completed-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 12px;
}

.ss-manager-preproduction-completed-head > div {
  display: grid;
  gap: 3px;
}

@media (max-width: 760px) {
  .ss-manager-preproduction-template-head {
    display: grid;
  }

  .ss-manager-preproduction-template-head .ss-btn {
    justify-self: start;
  }

  .ss-manager-pp-template-grid {
    grid-template-columns: 1fr;
  }

  .ss-manager-pp-question-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .ss-manager-pp-question-move {
    margin-left: 0;
  }

  .ss-manager-preproduction-template-actions {
    justify-content: stretch;
  }

  .ss-manager-preproduction-template-actions button {
    flex: 1 1 100%;
  }
}


/* v2.74.183 · Promotions main-text rich editor */
.ss-promo-rich-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.ss-promo-rich-field > span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--ss-ink);
}
.ss-promo-rich-field > small {
  color: rgba(16, 40, 58, .7);
  font-size: 11px;
  line-height: 1.45;
}
.ss-promo-rich-field .wp-editor-wrap { width: 100%; }
.ss-promo-rich-field .wp-editor-container { background: #fff; }
.ss-promo-preview-rich h2 { margin: 25px 0 10px; font-size: 26px; line-height: 1.1; }
.ss-promo-preview-rich h3 { margin: 22px 0 9px; font-size: 21px; line-height: 1.2; }
.ss-promo-preview-rich h4 { margin: 19px 0 8px; font-size: 17px; line-height: 1.25; }
.ss-promo-preview-rich p { margin: 14px 0; }
.ss-promo-preview-rich ul,
.ss-promo-preview-rich ol { margin: 14px 0 18px; padding-left: 24px; }
.ss-promo-preview-rich li { margin: 5px 0; }
.ss-promo-preview-rich blockquote { margin: 18px 0; padding-left: 15px; border-left: 3px solid var(--ss-sea); }
.ss-promo-preview-rich a { color: #167f9d; font-weight: 700; text-decoration: underline; }

/* v2.74.188 — SimplyBook historical preview + controlled import */
.ss-manager-history-preview-card { margin-top: 22px; }
.ss-manager-preview-only-badge { display:inline-flex; align-items:center; padding:7px 10px; border:1px solid rgba(16,40,58,.28); font-size:11px; letter-spacing:.08em; }
.ss-manager-history-upload { display:flex; gap:12px; align-items:end; flex-wrap:wrap; margin-top:18px; }
.ss-manager-history-upload label { flex:1 1 360px; display:grid; gap:7px; }
.ss-manager-history-upload input[type="file"] { width:100%; border:1px solid rgba(16,40,58,.22); background:#fff; padding:11px; }
.ss-manager-history-status { min-height:24px; margin-top:12px; font-size:13px; }
.ss-manager-history-results { display:grid; gap:18px; margin-top:10px; }
.ss-manager-history-banner { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; padding:12px 14px; border-left:4px solid var(--ss-sea); background:rgba(35,153,187,.08); }
.ss-manager-history-banner span { font-size:13px; }
.ss-manager-history-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.ss-manager-history-match-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.ss-manager-history-kpis > div, .ss-manager-history-match-grid > div { border:1px solid rgba(16,40,58,.14); background:rgba(255,255,255,.55); padding:13px; display:grid; gap:5px; }
.ss-manager-history-kpis span, .ss-manager-history-match-grid span { font-size:12px; }
.ss-manager-history-kpis strong, .ss-manager-history-match-grid strong { font-size:22px; }
.ss-manager-history-kpis small, .ss-manager-history-match-grid small { font-size:11px; opacity:.72; line-height:1.35; }
.ss-manager-history-details { border:1px solid rgba(16,40,58,.14); background:rgba(255,255,255,.42); }
.ss-manager-history-details summary { cursor:pointer; padding:13px 14px; font-weight:700; }
.ss-manager-history-table-wrap { overflow:auto; border-top:1px solid rgba(16,40,58,.12); }
.ss-manager-history-table { width:100%; border-collapse:collapse; font-size:13px; min-width:640px; }
.ss-manager-history-table th, .ss-manager-history-table td { padding:10px 12px; border-bottom:1px solid rgba(16,40,58,.1); text-align:left; vertical-align:top; }
.ss-manager-history-table th { font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.ss-manager-history-table small { opacity:.7; }
.ss-manager-history-candidate + .ss-manager-history-candidate { margin-top:8px; padding-top:8px; border-top:1px solid rgba(16,40,58,.1); }
.ss-manager-history-review-choice { display:flex; gap:8px; align-items:flex-start; cursor:pointer; }
.ss-manager-history-review-choice input { margin-top:3px; flex:0 0 auto; }
.ss-manager-history-review-choice.is-separate { opacity:.85; }
.ss-manager-history-review-progress { padding:10px 14px; border-top:1px solid rgba(16,40,58,.1); font-size:12px; font-weight:700; }
.ss-manager-match-note { display:block; margin-top:2px; font-weight:700; color:#4c8a65; opacity:1 !important; }
.ss-manager-match-note { display:block; margin-top:3px; font-weight:700; }
.ss-manager-history-warning, .ss-manager-history-ok { display:grid; gap:5px; padding:12px 14px; border:1px solid rgba(16,40,58,.16); }
.ss-manager-history-warning { border-left:4px solid #c57a1a; }
.ss-manager-history-ok { border-left:4px solid #4c8a65; }
.ss-manager-history-import-actions { display:grid; gap:8px; padding:14px; border:1px solid rgba(16,40,58,.16); border-left:4px solid #4c8a65; background:rgba(76,138,101,.06); }
.ss-manager-history-import-actions p { margin:0; font-size:12px; line-height:1.45; }
.ss-manager-history-import-actions .ss-btn { justify-self:start; }
.ss-manager-history-notes { font-size:12px; opacity:.8; }
.ss-manager-history-notes p { margin:.3em 0; }
@media (max-width: 980px) {
  .ss-manager-history-kpis, .ss-manager-history-match-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .ss-manager-history-kpis, .ss-manager-history-match-grid { grid-template-columns:1fr; }
  .ss-manager-history-upload { align-items:stretch; }
  .ss-manager-history-upload .ss-btn { width:100%; }
}


/* v2.74.190: read-only SimplyBook history inside Manager customer records. */
.ss-manager-customer-history-row.is-historical {
  background: rgba(35,153,187,.035);
}
.ss-manager-customer-history-row.is-cancelled {
  opacity: .58;
}
.ss-manager-customer-history-row em {
  display: inline-block;
  margin-left: 5px;
  padding: 2px 5px;
  border: 1px solid rgba(16,40,58,.24);
  font-size: 6px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* v2.74.193: combined SimplyBook + current rehearsal analytics. */
.ss-manager-history-analytics { margin-top: 24px; display:grid; gap:16px; }
.ss-manager-history-analytics-head { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.ss-manager-history-analytics-head span { display:block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; opacity:.66; }
.ss-manager-history-analytics-head h2 { margin:4px 0 5px; font-size:28px; }
.ss-manager-history-analytics-head p { margin:0; max-width:760px; font-size:13px; line-height:1.5; opacity:.78; }
.ss-manager-history-filters { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; padding:14px; border:1px solid rgba(16,40,58,.14); background:rgba(255,255,255,.48); }
.ss-manager-history-filters label { display:grid; gap:6px; }
.ss-manager-history-filters label > span { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.ss-manager-history-filters select { width:100%; min-height:42px; border:1px solid rgba(16,40,58,.24); background:#fff; padding:8px 10px; color:var(--ss-ink); }
.ss-manager-history-analytics-status { min-height:22px; font-size:13px; }
.ss-manager-history-analytics-grid { margin-top:0; }
.ss-manager-history-bars { display:grid; gap:11px; }
.ss-manager-history-bar-row { display:grid; gap:5px; }
.ss-manager-history-bar-row > div { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.ss-manager-history-bar-row strong { font-size:13px; }
.ss-manager-history-bar-row small { font-size:11px; opacity:.7; text-align:right; }
.ss-manager-history-bar-row > span { display:block; height:8px; background:rgba(16,40,58,.08); overflow:hidden; }
.ss-manager-history-bar-row > span i { display:block; height:100%; background:var(--ss-sea); }
.ss-manager-history-trend { min-height:220px; display:flex; gap:8px; align-items:stretch; overflow-x:auto; padding:8px 2px 2px; }
.ss-manager-history-trend-col { min-width:58px; flex:1 0 58px; display:grid; grid-template-rows:160px auto auto; gap:5px; text-align:center; align-items:end; }
.ss-manager-history-trend-col > span { height:160px; display:flex; align-items:flex-end; justify-content:center; background:rgba(16,40,58,.035); }
.ss-manager-history-trend-col i { display:block; width:62%; min-height:3px; background:var(--ss-sea); }
.ss-manager-history-trend-col small { font-size:10px; white-space:nowrap; }
.ss-manager-history-trend-col b { font-size:11px; }
.ss-manager-history-list { display:grid; gap:0; }
.ss-manager-history-list-row { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; padding:10px 0; border-bottom:1px solid rgba(16,40,58,.1); }
.ss-manager-history-list-row:last-child { border-bottom:0; }
.ss-manager-history-list-row > div { min-width:0; display:grid; gap:2px; }
.ss-manager-history-list-row strong { font-size:13px; overflow-wrap:anywhere; }
.ss-manager-history-list-row small { font-size:11px; opacity:.68; overflow-wrap:anywhere; }
.ss-manager-history-list-row > span { flex:0 0 auto; text-align:right; font-size:12px; font-weight:700; }
.ss-manager-history-list--columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px; }
@media (max-width:980px) {
  .ss-manager-history-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ss-manager-history-list--columns { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .ss-manager-history-filters { grid-template-columns:1fr; }
  .ss-manager-history-analytics-head h2 { font-size:24px; }
  .ss-manager-history-trend-col { min-width:52px; flex-basis:52px; }
}

/* v2.74.194: actionable rehearsal customer analytics. */
.ss-manager-history-inline-filter { display:grid; gap:5px; min-width:150px; }
.ss-manager-history-inline-filter > span { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; opacity:.72; }
.ss-manager-history-inline-filter select { min-height:38px; border:1px solid rgba(16,40,58,.24); background:#fff; color:var(--ss-ink); padding:7px 9px; }
.ss-manager-report-head--lapsed { align-items:end; }
.ss-manager-history-customer.is-clickable {
  width:100%;
  border:0;
  border-bottom:1px solid rgba(16,40,58,.1);
  border-radius:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.ss-manager-history-customer.is-clickable:last-child { border-bottom:0; }
.ss-manager-history-customer.is-clickable:hover,
.ss-manager-history-customer.is-clickable:focus-visible { background:rgba(35,153,187,.06); outline:none; }
.ss-manager-history-customer.is-clickable:focus-visible { box-shadow:inset 0 0 0 2px rgba(35,153,187,.42); }
.ss-manager-history-marketing { display:inline-block; width:max-content; margin-top:2px; padding:2px 5px; border:1px solid rgba(16,40,58,.15); font-size:9px !important; font-weight:800; letter-spacing:.025em; text-transform:uppercase; opacity:1 !important; }
.ss-manager-history-marketing.is-subscribed { border-color:rgba(35,153,187,.45); }
.ss-manager-history-marketing.is-not-subscribed { opacity:.64 !important; }
.ss-manager-history-marketing.is-unknown { opacity:.52 !important; }
@media (max-width:600px) {
  .ss-manager-report-head--lapsed { display:grid; }
  .ss-manager-history-inline-filter { width:100%; min-width:0; }
}


/* v2.74.195: separate Recording/Dry hire, Parties, Tuition and Other analytics. */
.ss-manager-service-analytics { margin-top:32px; padding-top:24px; border-top:1px solid rgba(16,40,58,.16); }
.ss-manager-service-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.ss-manager-service-tabs button { border:1px solid rgba(16,40,58,.2); background:rgba(255,255,255,.55); color:var(--ss-ink); padding:9px 12px; font-size:12px; font-weight:800; cursor:pointer; }
.ss-manager-service-tabs button:hover, .ss-manager-service-tabs button:focus-visible { border-color:rgba(35,153,187,.55); outline:none; }
.ss-manager-service-tabs button.is-active { background:var(--ss-ink); color:#fff; border-color:var(--ss-ink); }
.ss-manager-service-filters { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:980px) { .ss-manager-service-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .ss-manager-service-tabs { display:grid; grid-template-columns:1fr 1fr; } .ss-manager-service-tabs button { width:100%; } .ss-manager-service-filters { grid-template-columns:1fr; } }

/* ==========================================================
   v2.74.197 — Manager finance tidy + post-production analytics
   ========================================================== */
.ss-manager-finance-heading {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-left: 4px solid var(--ss-sea);
  background: rgba(143,210,229,.10);
}
.ss-manager-finance-heading span {
  display:block;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.62;
}
.ss-manager-finance-heading h3 { margin:4px 0 0; font-size:20px; }
.ss-manager-finance-heading p { margin:5px 0 0; max-width:900px; font-size:11px; line-height:1.45; opacity:.7; }
.ss-manager-kpi-grid.ss-manager-kpi-grid--finance { grid-template-columns: minmax(0,2fr) minmax(220px,1fr); }
.ss-manager-project-finance-strip.ss-manager-project-finance-strip--compact { grid-template-columns: repeat(3,minmax(0,1fr)); }
.ss-manager-cash-stream-card { margin-top:18px; }
.ss-manager-history-kpis { grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); }

@media (max-width: 720px) {
  .ss-manager-kpi-grid.ss-manager-kpi-grid--finance { grid-template-columns:1fr; }
  .ss-manager-project-finance-strip.ss-manager-project-finance-strip--compact { grid-template-columns:1fr; }
  .ss-manager-project-finance-strip.ss-manager-project-finance-strip--compact > div + div {
    border-left:0;
    border-top:1px solid var(--ss-line);
  }
}


/* ==========================================================
   v2.74.198 — Shop & Ticket Sales analytics
   ========================================================== */
.ss-manager-sales-analytics { margin-top:32px; padding-top:24px; border-top:1px solid rgba(16,40,58,.16); }
.ss-manager-sales-filters { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:760px) { .ss-manager-sales-filters { grid-template-columns:1fr; } }

/* ==========================================================
   v2.74.199 — Manager collapsible dashboard sections
   ========================================================== */
.ss-manager-collapsible-summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding-right: 44px;
  user-select: none;
}
.ss-manager-collapsible-summary::-webkit-details-marker { display: none; }
.ss-manager-collapsible-summary::marker { content: ""; }
.ss-manager-collapsible-summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(16,40,58,.28);
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
  font-weight: 500;
  background: rgba(255,255,255,.58);
  color: var(--ss-ink);
}
details[open] > .ss-manager-collapsible-summary::after { content: "−"; }
.ss-manager-collapsible-summary:hover::after { border-color: rgba(35,153,187,.62); }
.ss-manager-collapsible-summary:focus-visible {
  outline: 3px solid rgba(35,153,187,.42);
  outline-offset: 4px;
}
.ss-manager-collapsible-card:not([open]) > .ss-manager-collapsible-summary { margin-bottom: 0; }
.ss-manager-collapsible-card[open] > .ss-manager-collapsible-summary { margin-bottom: 20px; }

/* Top-level analytics are compact title boxes until opened. */
.ss-manager-analytics-collapsible {
  padding-top: 0;
  border-top: 0;
}
.ss-manager-analytics-collapsible > .ss-manager-analytics-summary {
  padding: 18px 20px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-paper);
  align-items: center;
}
.ss-manager-analytics-collapsible > .ss-manager-analytics-summary::after { right: 18px; }
.ss-manager-analytics-collapsible > .ss-manager-analytics-summary > div { padding-right: 34px; }
.ss-manager-analytics-collapsible:not([open]) > .ss-manager-analytics-summary p { margin-bottom: 0; }
.ss-manager-analytics-collapsible[open] > .ss-manager-analytics-summary { margin-bottom: 0; }

.ss-manager-history-inline-filter--inside {
  width: min(260px, 100%);
  margin: 0 0 16px;
}

@media (max-width: 600px) {
  .ss-manager-collapsible-summary { padding-right: 38px; }
  .ss-manager-collapsible-summary::after { width: 28px; height: 28px; }
  .ss-manager-analytics-collapsible > .ss-manager-analytics-summary { padding: 15px 16px; }
  .ss-manager-analytics-collapsible > .ss-manager-analytics-summary::after { right: 14px; }
  .ss-manager-analytics-collapsible > .ss-manager-analytics-summary > div { padding-right: 26px; }
}

/* ==========================================================
   v2.74.200 — Manager dashboard visual polish + customer return
   ========================================================== */

/* Gentle visual grouping: finance, CRM and each analytics family remain
   clearly distinct without sacrificing contrast. */
.ss-manager-action-panel,
.ss-manager-cash-stream-card {
  background: #eef7f9;
}
.ss-manager-loyalty-card {
  background: #f7f4ea;
}
.ss-manager-marketing-card,
.ss-manager-find-customer-card,
.ss-manager-customer-detail {
  background: #f8f7f2;
}

#managerHistoricalAnalytics { --ss-analytics-tint: #eef8f8; }
#managerServiceAnalytics { --ss-analytics-tint: #f8f4eb; }
#managerSalesAnalytics { --ss-analytics-tint: #f3f2f8; }

.ss-manager-analytics-collapsible > .ss-manager-analytics-summary {
  background: var(--ss-analytics-tint, var(--ss-paper));
}
.ss-manager-analytics-collapsible[open] {
  padding: 0 18px 18px;
  border: 2px solid var(--ss-ink);
  background: var(--ss-analytics-tint, rgba(255,255,255,.5));
}
.ss-manager-analytics-collapsible[open] > .ss-manager-analytics-summary {
  margin: 0 -18px;
  border: 0;
  border-bottom: 2px solid var(--ss-ink);
}

/* Give each analytics block breathing room so cards/tables do not visually
   collide when a section is expanded. */
#historicalAnalyticsContent:not([hidden]),
#serviceAnalyticsContent:not([hidden]),
#salesAnalyticsContent:not([hidden]) {
  display: grid;
  gap: 18px;
  min-width: 0;
}
.ss-manager-history-analytics-grid {
  gap: 18px;
  margin: 0;
}
.ss-manager-history-kpis {
  gap: 12px;
  margin: 0;
}
.ss-manager-history-kpis > div {
  min-width: 0;
}
.ss-manager-history-table-wrap,
.ss-manager-report-card table {
  max-width: 100%;
}
.ss-manager-history-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Customer record can now be dismissed without losing the manager's place. */
.ss-manager-customer-detail-head {
  align-items: flex-start;
}
.ss-manager-customer-detail-side {
  display: grid;
  justify-items: end;
  gap: 14px;
  min-width: min(420px, 48%);
}
.ss-manager-customer-detail-close {
  border: 1px solid rgba(16,40,58,.28);
  background: rgba(255,255,255,.75);
  color: var(--ss-ink);
  padding: 8px 11px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.ss-manager-customer-detail-close:hover {
  border-color: rgba(35,153,187,.72);
  background: #fff;
}
.ss-manager-customer-detail-close:focus-visible {
  outline: 3px solid rgba(35,153,187,.42);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .ss-manager-analytics-collapsible[open] { padding: 0 12px 12px; }
  .ss-manager-analytics-collapsible[open] > .ss-manager-analytics-summary { margin: 0 -12px; }
  .ss-manager-customer-detail-head { display: grid; gap: 16px; }
  .ss-manager-customer-detail-side { width: 100%; min-width: 0; justify-items: stretch; }
  .ss-manager-customer-detail-close { justify-self: start; }
  .ss-manager-customer-detail-stats { text-align: left; flex-wrap: wrap; }
}

/* v2.74.201 — analytics-specific Excel exports */
.ss-manager-history-filters .ss-manager-analytics-export {
  align-self:end;
  justify-self:stretch;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:nowrap;
}


/* ==========================================================
   v2.74.202 — Manager spacing + lower-priority tools
   ========================================================== */
/* Major dashboard cards should read as separate sections, never as one
   continuous outlined block. */
.ss-manager-cash-stream-card,
.ss-manager-loyalty-card {
  margin-top: 22px;
  margin-bottom: 0;
}
.ss-manager-cash-stream-card + .ss-manager-loyalty-card {
  margin-top: 22px;
}

/* Give the report controls their own visual breathing room while keeping
   the same filters and behaviour. */
.ss-manager-dashboard-head {
  margin-bottom: 22px;
  background: rgba(143,210,229,.72);
}
.ss-manager-dashboard-controls {
  padding: 14px;
  border: 1px solid rgba(16,40,58,.18);
  background: rgba(255,253,247,.34);
}

/* Lower-priority CRM / maintenance tools live after the analytics so the
   everyday operational path is shorter. */
.ss-manager-dashboard-lower-tools {
  display: grid;
  gap: 22px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid rgba(16,40,58,.16);
}
.ss-manager-dashboard-lower-tools .ss-manager-marketing-card,
.ss-manager-dashboard-lower-tools .ss-manager-maintenance-card {
  margin: 0;
}
.ss-manager-maintenance-card {
  background: #f8f7f2;
}
.ss-manager-maintenance-card[open] > .ss-manager-maintenance-summary {
  margin-bottom: 18px;
}
.ss-manager-maintenance-body {
  display: grid;
  gap: 14px;
}
.ss-manager-maintenance-summary p {
  margin: 5px 0 0;
  max-width: 850px;
  font-size: 10px;
  line-height: 1.45;
  color: rgba(16,40,58,.66);
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 760px) {
  .ss-manager-dashboard-head { margin-bottom: 16px; }
  .ss-manager-dashboard-controls { padding: 10px; }
  .ss-manager-cash-stream-card,
  .ss-manager-cash-stream-card + .ss-manager-loyalty-card { margin-top: 16px; }
  .ss-manager-dashboard-lower-tools { gap: 16px; margin-top: 26px; padding-top: 18px; }
}


/* ==========================================================
   v2.74.203 — consistent top-level Manager dashboard spacing
   ========================================================== */
/* Use one parent-level rhythm for all major dashboard sections. This prevents
   adjacent outlined cards (for example Loyalty Snapshot → Find a Customer)
   from visually merging, regardless of each component's own margins. */
#managerDashboardContent:not([hidden]) {
  display: grid;
  gap: 24px;
}
#managerDashboardContent:not([hidden]) > * {
  margin-top: 0;
  margin-bottom: 0;
}
/* Lower-priority tools keep their internal spacing, but the parent grid owns
   the space above the group. */
#managerDashboardContent:not([hidden]) > .ss-manager-dashboard-lower-tools {
  margin-top: 10px;
}

@media (max-width: 760px) {
  #managerDashboardContent:not([hidden]) { gap: 18px; }
  #managerDashboardContent:not([hidden]) > .ss-manager-dashboard-lower-tools { margin-top: 6px; }
}


/* ==========================================================
   v2.74.204 — collapsible Find a Customer
   ========================================================== */
.ss-manager-find-customer-card[open] > .ss-manager-collapsible-summary {
  margin-bottom: 20px;
}

/* v2.74.205 — Marketing contact import + audience tags */
.ss-manager-marketing-actions {
  display: flex;
  justify-content: flex-end;
  margin: 14px 0 16px;
}

.ss-manager-marketing-import[hidden] { display: none !important; }
.ss-manager-marketing-import {
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid rgba(16,40,58,.16);
  background: rgba(255,255,255,.68);
}

.ss-manager-marketing-import-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.ss-manager-marketing-import-head > div {
  display: grid;
  gap: 4px;
}

.ss-manager-marketing-import-head strong { font-size: 1.02rem; }
.ss-manager-marketing-import-head small { color: rgba(16,40,58,.72); }

.ss-manager-marketing-import-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr);
  gap: 14px;
  margin-bottom: 16px;
}

.ss-manager-marketing-import-grid label,
.ss-manager-marketing-import-tags > label {
  display: grid;
  gap: 7px;
  font-weight: 700;
}

.ss-manager-marketing-import-grid label > span,
.ss-manager-marketing-import-tags > label > span {
  font-size: .8rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.ss-manager-marketing-import input[type="file"],
.ss-manager-marketing-import input[type="text"],
.ss-manager-marketing-import input[type="email"],
.ss-manager-marketing-import select {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(16,40,58,.25);
  background: #fff;
  color: var(--ss-ink);
  padding: 9px 11px;
  font: inherit;
}

.ss-manager-marketing-import-file small,
.ss-manager-marketing-import-tags > small {
  color: rgba(16,40,58,.66);
  font-weight: 500;
}

.ss-manager-marketing-import-tags {
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid rgba(16,40,58,.12);
}

.ss-manager-marketing-import-tags legend {
  padding: 0 6px;
  font-weight: 800;
}

.ss-manager-marketing-import-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.ss-manager-marketing-import-tag-list label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(16,40,58,.16);
  background: rgba(143,210,229,.14);
  cursor: pointer;
}

.ss-manager-marketing-import-tag-list input { margin: 0; }

.ss-manager-marketing-import-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 14px;
  padding: 12px 14px;
  border-left: 4px solid var(--ss-sea);
  background: rgba(143,210,229,.16);
  font-weight: 700;
}

.ss-manager-marketing-import-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.ss-manager-marketing-import-buttons > span {
  color: rgba(16,40,58,.75);
  font-size: .9rem;
}

.ss-manager-marketing-import-preview {
  margin-top: 16px;
  border-top: 1px solid rgba(16,40,58,.14);
  padding-top: 16px;
}

.ss-manager-marketing-import-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.ss-manager-marketing-import-summary span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(16,40,58,.12);
  background: rgba(255,255,255,.72);
  font-size: .74rem;
  color: rgba(16,40,58,.7);
}

.ss-manager-marketing-import-summary b {
  font-size: 1.15rem;
  color: var(--ss-ink);
}

.ss-manager-marketing-import-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(16,40,58,.12);
}

.ss-manager-marketing-import-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  background: rgba(255,255,255,.76);
}

.ss-manager-marketing-import-table th,
.ss-manager-marketing-import-table td {
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(16,40,58,.1);
  font-size: .84rem;
}

.ss-manager-marketing-import-table th {
  background: rgba(16,40,58,.06);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ss-manager-marketing-import-table td b {
  display: inline-block;
  margin: 0 4px 3px 0;
  padding: 3px 6px;
  background: rgba(35,153,187,.11);
  font-size: .72rem;
  font-weight: 700;
}

.ss-manager-marketing-import-table tr.is-invalid td,
.ss-manager-marketing-import-table tr.is-duplicate_file td {
  background: rgba(170,55,55,.05);
}

.ss-manager-marketing-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
  font-style: normal;
}

.ss-manager-marketing-tags b {
  padding: 2px 6px;
  background: rgba(35,153,187,.1);
  border: 1px solid rgba(35,153,187,.14);
  font-size: .67rem;
  line-height: 1.4;
}

@media (max-width: 780px) {
  .ss-manager-marketing-import-grid { grid-template-columns: 1fr; }
  .ss-manager-marketing-import-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ss-manager-marketing-import-head { align-items: stretch; }
}


/* v2.74.206 — private Manager Blog preview */
.ss-blog-private-preview-bar {
  position: relative;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 10px var(--ss-pad);
  background: var(--ss-ink);
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
}
.ss-blog-private-preview-bar strong {
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ss-blog-private-preview-bar span { opacity: .82; }
@media (max-width: 700px) {
  .ss-blog-private-preview-bar { display: grid; gap: 2px; }
}

/* v2.74.210 — selected-recipient resend for sent Promotions campaigns */
.ss-promo-selected-resend {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 18px;
  border: 1px solid rgba(16, 40, 58, .18);
  background: rgba(255, 253, 247, .72);
}
.ss-promo-selected-resend[hidden] { display: none !important; }
.ss-promo-selected-resend-head { margin-bottom: 14px; }
.ss-promo-selected-resend-head strong {
  display: block;
  color: var(--ss-ink);
  font-size: 15px;
}
.ss-promo-selected-resend-head span {
  display: block;
  margin-top: 4px;
  color: rgba(16, 40, 58, .72);
  font-size: 12px;
  line-height: 1.5;
}
.ss-promo-selected-resend label > span {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ss-ink);
}
.ss-promo-selected-resend textarea {
  width: 100%;
  min-height: 104px;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid rgba(16, 40, 58, .28);
  background: #fff;
  color: var(--ss-ink);
  font: inherit;
}
.ss-promo-selected-resend label small {
  display: block;
  margin-top: 6px;
  color: rgba(16, 40, 58, .68);
  line-height: 1.45;
}
.ss-promo-selected-resend-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.ss-promo-selected-resend-summary {
  margin-top: 14px;
  padding: 12px;
  border-left: 3px solid var(--ss-sea);
  background: rgba(143, 210, 229, .16);
  color: var(--ss-ink);
  font-size: 12px;
  line-height: 1.55;
}
.ss-promo-selected-resend-summary strong,
.ss-promo-selected-resend-summary span { display: block; }
.ss-promo-selected-resend-summary span { margin-top: 7px; }
.ss-promo-selected-excluded { color: #7a2d2d; }