/* ============================================
   FRANKIE FOTI - SERVICE PAGE TEMPLATE
   Shared by the five event-type pages:
   corporate-events, weddings, trade-shows,
   bachelorette-parties, private-parties.

   Every class here is prefixed `svc-` so nothing
   collides with common.css or pages.css.
   Colors and type come from the :root tokens
   already defined in common.css.
   ============================================ */

body.svc-page {
  background: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.svc-page h1,
.svc-page h2,
.svc-page h3 {
  font-family: var(--font-heading);
  font-weight: 300;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0;
}

.svc-page p {
  margin: 0;
  text-wrap: pretty;
}

.svc-page :focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
}

/* --- shared atoms --- */

.svc-eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--accent-color);
  display: block;
}

.svc-eyebrow-ruled {
  position: relative;
  padding-left: 50px;
  display: inline-block;
}

.svc-eyebrow-ruled::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 35px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-color), transparent);
}

.svc-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-decoration: none;
  padding: 18px 40px;
  white-space: nowrap;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1), box-shadow .45s, background-position .5s, border-color .3s, color .3s;
}

.svc-btn-gold {
  color: #000;
  background: linear-gradient(135deg, #d4af37 0%, #f5e6a3 40%, #d4af37 80%, #b8962e 100%);
  background-size: 300% 100%;
  border: none;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

.svc-btn-gold:hover {
  background-position: 100% 0;
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(212, 175, 55, .45);
}

.svc-btn-ghost {
  color: var(--text-color);
  border: 1px solid rgba(212, 175, 55, .35);
  background: transparent;
}

.svc-btn-ghost:hover {
  border-color: var(--accent-color);
  color: var(--accent-light);
  transform: translateY(-3px);
}

.svc-section {
  padding: var(--section-padding-y) var(--section-padding-x);
}

.svc-ruled {
  border-top: 1px solid rgba(212, 175, 55, 0.1);
}

.svc-wrap {
  max-width: 1180px;
  margin: 0 auto;
}

.svc-wrap-narrow {
  max-width: 900px;
  margin: 0 auto;
}

.svc-head {
  margin-bottom: clamp(32px, 4.5vw, 56px);
}

.svc-head .svc-eyebrow {
  margin-bottom: 16px;
}

.svc-head h2 {
  font-size: clamp(2.1rem, 1.7rem + 2vw, 3.3rem);
  color: var(--text-color);
}

.svc-head h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent-color);
}

.svc-lede {
  font-size: clamp(1.08rem, 1rem + 0.4vw, 1.28rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  max-width: 68ch;
}

.svc-prose p {
  color: rgba(255, 255, 255, 0.72);
  max-width: 68ch;
}

.svc-prose p + p {
  margin-top: 1.25em;
}

.svc-rule {
  width: 35px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-color), transparent);
  margin-bottom: 22px;
}

.svc-head-ruled::before {
  content: '';
  display: block;
  width: 35px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-color), transparent);
  margin-bottom: 24px;
}

/* --- hero --- */

.svc-hero {
  position: relative;
  min-height: min(88vh, 860px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: calc(var(--section-padding-y) + 90px) var(--section-padding-x) var(--section-padding-y);
}

/* A hero carrying only a headline still needs presence: keep the plate tall
   and let the headline run larger, since nothing sits beneath it. */
.svc-hero-lean {
  min-height: min(72vh, 680px);
}

.svc-hero-lean .svc-hero-copy {
  /* px, not ch: `ch` here resolves against the body font size, not the h1's. */
  max-width: 1020px;
}

.svc-hero-lean h1 {
  font-size: clamp(2.35rem, 1.7rem + 3.9vw, 5.1rem);
  line-height: 1.04;
  letter-spacing: -0.005em;
}

/* The gold line is a qualifier, not a second headline. Setting it well below
   the H1's size gives the block one clear voice, and lets the phrase sit on a
   single line instead of orphaning the ampersand. */
.svc-hero-lean h1 em {
  font-size: 0.44em;
  line-height: 1.18;
  letter-spacing: 0.005em;
  margin-top: 0.5em;
  text-wrap: balance;
}

.svc-hero-plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 68% 18%, rgba(212, 175, 55, .22), transparent 62%),
    radial-gradient(ellipse 90% 70% at 30% 100%, rgba(120, 92, 24, .16), transparent 70%),
    linear-gradient(178deg, #121110 0%, #0a0a0a 55%, #050505 100%);
}

.svc-hero-plate picture {
  position: absolute;
  inset: 0;
  display: block;
}

.svc-hero-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slightly above centre: keeps heads in frame and the table of cards visible
     along the bottom edge. */
  object-position: 50% 42%;
  display: block;
}

.svc-hero-plate::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

.svc-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(92deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .55) 52%, rgba(0, 0, 0, .62) 100%),
    linear-gradient(180deg, rgba(5, 5, 5, .55) 0%, transparent 32%, rgba(5, 5, 5, .97) 100%);
}

.svc-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.svc-hero-copy {
  max-width: 840px;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .72), 0 1px 2px rgba(0, 0, 0, .5);
}

.svc-hero .svc-eyebrow {
  margin-bottom: 22px;
}

.svc-hero h1 {
  font-size: clamp(2.6rem, 1.9rem + 4vw, 5rem);
  margin-bottom: 22px;
  color: var(--text-color);
}

.svc-hero h1 em {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: var(--accent-color);
  text-shadow: 0 4px 30px rgba(0, 0, 0, .72), 0 0 40px rgba(212, 175, 55, .3);
}

.svc-hero .svc-lede {
  color: rgba(255, 255, 255, .8);
  max-width: 620px;
}

.svc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 38px;
}

.svc-facts {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: clamp(48px, 6vw, 76px) auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(212, 175, 55, 0.18);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

.svc-fact dt {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
  margin-bottom: 8px;
}

.svc-fact dd {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.32rem;
  font-weight: 400;
  color: var(--text-color);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

/* --- body + sticky booking rail --- */

.svc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

.svc-rail {
  position: sticky;
  top: 110px;
  background: linear-gradient(180deg, #101011, #0b0b0c);
  border: 1px solid rgba(212, 175, 55, 0.18);
  padding: 32px 30px;
}

.svc-rail h2 {
  font-size: 1.75rem;
  margin-bottom: 12px;
  color: var(--text-color);
}

.svc-rail p {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.7;
}

.svc-rail-list {
  list-style: none;
  padding: 0;
  margin: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.svc-rail-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.86rem;
}

.svc-rail-list span:first-child {
  color: rgba(255, 255, 255, 0.48);
}

.svc-rail-list span:last-child {
  color: var(--text-color);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.svc-rail .svc-btn {
  width: 100%;
  justify-content: center;
  padding: 16px 24px;
  font-size: 0.9rem;
}

.svc-rail p.svc-rail-note {
  margin-top: 16px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.48);
  text-align: center;
}

/* --- formats --- */

.svc-formats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(212, 175, 55, 0.18);
  border: 1px solid rgba(212, 175, 55, 0.18);
}

/* Pages with four formats go 2x2 rather than orphaning one in a 3-col row. */
.svc-formats-four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.svc-format {
  background: var(--bg-color);
  padding: 38px 32px 42px;
  transition: background .4s;
}

.svc-format:hover {
  background: #0b0b0c;
}

.svc-format-mark {
  width: 40px;
  height: 40px;
  margin-bottom: 24px;
  color: var(--accent-color);
}

.svc-format-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.svc-format h3 {
  font-size: 1.65rem;
  font-weight: 400;
  margin-bottom: 10px;
  color: var(--text-color);
}

/* `.svc-format p` outranks a bare `.svc-format-meta`, so this label has to
   match on the element too or it inherits the body copy's size. */
.svc-format p.svc-format-meta {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 16px;
}

/* Each segment stays whole, so a range like "30-40 min" never splits across
   lines, and the nbsp after each separator carries the dot onto the next line
   with its segment rather than stranding it at the end of the previous one. */
.svc-format p.svc-format-meta span {
  white-space: nowrap;
}

.svc-format p {
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.72);
}

/* Photo at the top of a format card, in place of the line icon. */
.svc-format.has-photo {
  padding-top: 0;
  display: flex;
  flex-direction: column;
}

.svc-format-photo {
  display: block;
  width: calc(100% + 64px);
  /* height:auto, or the width/height attributes win over aspect-ratio and the
     photo renders portrait-cropped. */
  height: auto;
  margin: 0 -32px 26px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Full-width band under the opening copy. */
.svc-band {
  margin: 0;
  padding: 0 var(--section-padding-x) var(--section-padding-y);
  background: var(--bg-color);
}

.svc-band img {
  display: block;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid rgba(212, 175, 55, 0.18);
}

.svc-band figcaption {
  max-width: 1180px;
  margin: 14px auto 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.48);
}

/* --- run of show --- */

.svc-timeline {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(212, 175, 55, 0.18);
}

.svc-step {
  display: grid;
  grid-template-columns: 120px 220px minmax(0, 1fr);
  gap: 32px;
  align-items: baseline;
  padding: 30px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.svc-step-time {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--accent-color);
  font-variant-numeric: tabular-nums;
}

.svc-step h3 {
  font-size: 1.28rem;
  font-weight: 400;
  color: var(--text-color);
}

.svc-step p {
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.72);
}

/* --- proof --- */

.svc-proof {
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(212, 175, 55, .07), transparent 70%),
    #0b0b0c;
}

.svc-proof blockquote {
  margin: 0;
  max-width: 900px;
}

.svc-proof blockquote p {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.4rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.35;
  color: var(--text-color);
}

.svc-quote-mark {
  font-family: var(--font-heading);
  font-size: 5rem;
  line-height: 0.6;
  color: var(--accent-color);
  opacity: .55;
  display: block;
  margin-bottom: 18px;
}

.svc-proof figcaption {
  margin-top: 28px;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}

.svc-proof figcaption strong {
  color: var(--accent-color);
  font-weight: 500;
}

/* --- logistics --- */

.svc-spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(32px, 5vw, 72px);
}

.svc-spec dl {
  margin: 0;
}

.svc-spec-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  align-items: baseline;
}

.svc-spec-row dt {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}

.svc-spec-row dd {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
}

/* --- service area --- */

.svc-venues {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.svc-venue {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(212, 175, 55, 0.18);
  padding: 9px 18px;
  transition: color .3s, border-color .3s;
}

/* These chips are spans, not links. A hover state promised a click target
   that does not exist, so only real anchors get one. */
a.svc-venue:hover {
  color: var(--accent-light);
  border-color: var(--accent-color);
}

/* --- FAQ --- */

.svc-faq {
  border-top: 1px solid rgba(212, 175, 55, 0.18);
}

.svc-faq details {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.svc-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 26px 48px 26px 0;
  position: relative;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem);
  font-weight: 400;
  color: var(--text-color);
  transition: color .3s;
}

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

.svc-faq summary:hover {
  color: var(--accent-light);
}

.svc-faq summary::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 13px;
  height: 13px;
  border-right: 1px solid var(--accent-color);
  border-bottom: 1px solid var(--accent-color);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .35s ease;
}

.svc-faq details[open] summary::after {
  transform: translateY(-20%) rotate(-135deg);
}

.svc-faq-body {
  padding: 0 clamp(0px, 4vw, 60px) 28px 0;
  font-size: 0.96rem;
  color: rgba(255, 255, 255, 0.72);
  max-width: 68ch;
}

/* --- closing CTA --- */

.svc-close {
  position: relative;
  text-align: center;
  overflow: hidden;
  /* The uplight is clipped at the section box, so it met the footer as a hard
     horizontal line. The first layer settles it back into the page ground
     before the edge. */
  background:
    linear-gradient(180deg, transparent 55%, var(--bg-color) 96%),
    radial-gradient(ellipse 58% 115% at 50% 104%, rgba(212, 175, 55, .18), transparent 66%),
    var(--bg-color);
  border-top: 1px solid rgba(212, 175, 55, 0.18);
}

.svc-close h2 {
  font-size: clamp(2.2rem, 1.7rem + 2.4vw, 3.6rem);
  margin-bottom: 20px;
  color: var(--text-color);
}

.svc-close h2 em {
  font-style: italic;
  color: var(--accent-color);
  font-weight: 400;
}

.svc-close .svc-lede {
  margin: 0 auto;
  text-align: center;
}

.svc-close .svc-actions {
  justify-content: center;
}

/* --- corporate page: editorial refinement --- */

.svc-page--corporate-magician-nashville {
  --section-padding-y: clamp(64px, 6.5vw, 96px);
}

.svc-page--corporate-magician-nashville .svc-hero-lean {
  min-height: min(70vh, 650px);
  padding-bottom: clamp(62px, 7vw, 92px);
}

.svc-page--corporate-magician-nashville .svc-hero-lean .svc-hero-copy {
  max-width: 930px;
}

.svc-page--corporate-magician-nashville .svc-hero-lean h1 {
  font-size: clamp(2.6rem, 1.85rem + 3.25vw, 4.7rem);
  line-height: 1.01;
  letter-spacing: -0.018em;
}

.svc-page--corporate-magician-nashville .svc-hero-lean h1 em {
  margin-top: 0.58em;
  font-size: 0.45em;
  letter-spacing: 0;
}

.svc-page--corporate-magician-nashville .svc-intro .svc-wrap {
  display: grid;
  grid-template-columns: minmax(330px, 0.98fr) minmax(0, 1.02fr);
  gap: clamp(56px, 7vw, 100px);
  align-items: start;
}

.svc-page--corporate-magician-nashville .svc-intro .svc-head {
  margin: 0;
  position: sticky;
  top: 118px;
}

.svc-page--corporate-magician-nashville .svc-intro .svc-head h2 {
  font-size: clamp(2.65rem, 2rem + 1.65vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.018em;
}

/* Optical alignment for the rail sections.
   The heading column opens with the gold rule and its 24px margin, so a
   top-aligned content column started a full line above the H2 and the two
   columns read as unrelated blocks. These offsets drop the first line of
   content onto the first line of the heading. Tuned by measurement, not
   derived: the H2 sets on a 1.02 line-height and the body on 1.72, so the
   half-leading each carries above its cap differs. */
.svc-page--corporate-magician-nashville .svc-intro .svc-prose {
  padding-top: 16px;
}

.svc-page--corporate-magician-nashville .svc-spec-section .svc-spec {
  padding-top: 14px;
}

.svc-page--corporate-magician-nashville .svc-area-section .svc-prose {
  padding-top: 17px;
}

.svc-page--corporate-magician-nashville .svc-intro .svc-prose p {
  max-width: 61ch;
  line-height: 1.72;
}

.svc-page--corporate-magician-nashville .svc-intro .svc-prose p:first-child {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.08em;
}

.svc-page--corporate-magician-nashville .svc-intro .svc-prose p + p {
  margin-top: 1.55em;
}

.svc-page--corporate-magician-nashville .svc-band {
  padding-bottom: clamp(72px, 7vw, 104px);
}

.svc-page--corporate-magician-nashville .svc-band figcaption {
  margin-top: 18px;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.svc-page--corporate-magician-nashville .svc-formats-section {
  padding-top: clamp(72px, 7vw, 104px);
}

.svc-page--corporate-magician-nashville .svc-formats-section .svc-rule {
  margin-bottom: 32px;
}

.svc-page--corporate-magician-nashville .svc-formats {
  gap: 20px;
  border: 0;
  background: transparent;
}

.svc-page--corporate-magician-nashville .svc-format {
  padding: 30px 28px 34px;
  border: 1px solid rgba(212, 175, 55, 0.16);
  background: #080808;
}

.svc-page--corporate-magician-nashville .svc-format.has-photo {
  padding-top: 0;
}

.svc-page--corporate-magician-nashville .svc-format-photo {
  width: calc(100% + 56px);
  margin: 0 -28px 27px;
}

.svc-page--corporate-magician-nashville .svc-format h3 {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.svc-page--corporate-magician-nashville .svc-format p.svc-format-meta {
  min-height: 1.45em;
  margin-bottom: 20px;
  line-height: 1.45;
}

.svc-page--corporate-magician-nashville .svc-format > p:last-child {
  line-height: 1.68;
}

.svc-page--corporate-magician-nashville .svc-spec-section .svc-wrap,
.svc-page--corporate-magician-nashville .svc-area-section .svc-wrap,
.svc-page--corporate-magician-nashville .svc-faq-section .svc-wrap {
  display: grid;
  grid-template-columns: minmax(250px, 0.38fr) minmax(0, 0.62fr);
  column-gap: clamp(54px, 8vw, 120px);
  align-items: start;
}

.svc-page--corporate-magician-nashville .svc-spec-section .svc-head,
.svc-page--corporate-magician-nashville .svc-area-section .svc-head,
.svc-page--corporate-magician-nashville .svc-faq-section .svc-head {
  margin: 0;
}

.svc-page--corporate-magician-nashville .svc-spec-section .svc-head h2,
.svc-page--corporate-magician-nashville .svc-area-section .svc-head h2,
.svc-page--corporate-magician-nashville .svc-faq-section .svc-head h2 {
  font-size: clamp(2.35rem, 1.9rem + 1.3vw, 3.15rem);
  line-height: 1.04;
}

/* Side-by-side label/value split the content track a third time, leaving each
   value a ~172px ribbon that wrapped every entry to three lines. Stacking the
   label over its value hands the value the full column and keeps this section
   on the same left rail as the rest of the page. */
.svc-page--corporate-magician-nashville .svc-spec {
  gap: 0 40px;
}

.svc-page--corporate-magician-nashville .svc-spec-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.svc-page--corporate-magician-nashville .svc-spec-row {
  padding: 16px 0;
}

/* The two lists are different lengths; closing rules left one hanging well
   below the other. Let each list end on its last value instead. */
.svc-page--corporate-magician-nashville .svc-spec-row:last-child {
  border-bottom: 0;
}

.svc-page--corporate-magician-nashville .svc-spec-row:first-child {
  padding-top: 4px;
}

.svc-page--corporate-magician-nashville .svc-spec-row dt {
  letter-spacing: 0.13em;
}

.svc-page--corporate-magician-nashville .svc-area-section .svc-prose,
.svc-page--corporate-magician-nashville .svc-area-section .svc-venues {
  grid-column: 2;
}

.svc-page--corporate-magician-nashville .svc-area-section .svc-prose p {
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.78);
}

.svc-page--corporate-magician-nashville .svc-area-section .svc-venues {
  margin-top: 26px;
  gap: 8px;
}

.svc-page--corporate-magician-nashville .svc-venue {
  padding: 8px 14px;
  font-size: 0.76rem;
}

.svc-page--corporate-magician-nashville .svc-faq {
  margin-top: 4px;
}

.svc-page--corporate-magician-nashville .svc-faq summary {
  padding-block: 23px;
}

/* Pulls the first question's cap onto the H2's cap in the rail beside it. */
.svc-page--corporate-magician-nashville .svc-faq details:first-child summary {
  padding-top: 12px;
}

.svc-page--corporate-magician-nashville .svc-close {
  padding-block: clamp(78px, 8vw, 112px);
}

/* --- cross-links to the other service pages --- */

.svc-siblings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: rgba(212, 175, 55, 0.18);
  border: 1px solid rgba(212, 175, 55, 0.18);
}

.svc-sibling {
  background: var(--bg-color);
  padding: 26px 24px;
  text-decoration: none;
  display: block;
  transition: background .35s;
}

.svc-sibling:hover {
  background: #0b0b0c;
}

.svc-sibling span {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
  margin-bottom: 10px;
}

.svc-sibling strong {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--text-color);
  transition: color .3s;
}

.svc-sibling:hover strong {
  color: var(--accent-light);
}

/* --- client-review banner (removed when these pages go public) --- */

.svc-preview-flag {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  padding: 10px 20px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #050505;
  background: var(--accent-color);
}

/* Grid items default to `min-width: auto` (= min-content), which lets a card
   inflate past its track on a narrow screen. Pin the floor to 0 everywhere. */
.svc-grid > *,
.svc-formats > *,
.svc-siblings > *,
.svc-facts > *,
.svc-spec > *,
.svc-step > * {
  min-width: 0;
}

/* --- responsive --- */

@media (max-width: 1080px) {
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-rail { position: static; max-width: 520px; }
  .svc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-formats { grid-template-columns: minmax(0, 1fr); }
  .svc-siblings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-step { grid-template-columns: 100px minmax(0, 1fr); }
  .svc-step p { grid-column: 2; }
  .svc-spec { grid-template-columns: minmax(0, 1fr); }
}

/* Between the phone crop and full desktop the hero box turns nearly square,
   which would throw away almost half the wide photo. Shorten it so the box
   stays closer to the crop's own proportions. */
@media (min-width: 768px) and (max-width: 1100px) {
  .svc-hero-lean {
    min-height: min(58vh, 520px);
  }
}

@media (max-width: 767px) {
  .svc-hero-lean {
    min-height: min(68vh, 600px);
  }

  /* "Corporate Magician" is the longest unbreakable phrase; at the previous
     size it cleared the content edge by 2px. Give it real margin. */
  .svc-hero-lean h1 {
    font-size: clamp(2rem, 1.45rem + 3vw, 2.7rem);
  }

  .svc-hero-lean .svc-hero-plate img {
    object-position: 50% 45%;
  }
}

@media (max-width: 640px) {
  .svc-band { padding-bottom: var(--section-padding-y); }

  .svc-btn {
    white-space: normal;
    text-align: center;
    letter-spacing: 0.16em;
  }

  .svc-format p.svc-format-meta { letter-spacing: 0.1em; }
  .svc-facts { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .svc-siblings { grid-template-columns: minmax(0, 1fr); }
  .svc-step { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .svc-step p { grid-column: 1; }
  .svc-spec-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .svc-btn { padding: 16px 28px; font-size: 0.88rem; }
}

@media (max-width: 900px) {
  .svc-page--corporate-magician-nashville .svc-intro .svc-wrap,
  .svc-page--corporate-magician-nashville .svc-spec-section .svc-wrap,
  .svc-page--corporate-magician-nashville .svc-area-section .svc-wrap,
  .svc-page--corporate-magician-nashville .svc-faq-section .svc-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .svc-page--corporate-magician-nashville .svc-intro .svc-head,
  .svc-page--corporate-magician-nashville .svc-spec-section .svc-head,
  .svc-page--corporate-magician-nashville .svc-area-section .svc-head,
  .svc-page--corporate-magician-nashville .svc-faq-section .svc-head {
    position: static;
    margin-bottom: clamp(28px, 6vw, 42px);
  }

  .svc-page--corporate-magician-nashville .svc-area-section .svc-prose,
  .svc-page--corporate-magician-nashville .svc-area-section .svc-venues {
    grid-column: 1;
  }
}

@media (max-width: 640px) {
  .svc-page--corporate-magician-nashville {
    --section-padding-y: 56px;
  }

  .svc-page--corporate-magician-nashville .svc-hero-lean {
    min-height: 560px;
    padding-bottom: 58px;
  }

  .svc-page--corporate-magician-nashville .svc-hero-lean h1 {
    font-size: clamp(2.1rem, 9.6vw, 2.75rem);
    line-height: 1.04;
  }

  .svc-page--corporate-magician-nashville .svc-hero-lean h1 em {
    font-size: 0.56em;
    line-height: 1.25;
  }

  .svc-page--corporate-magician-nashville .svc-intro .svc-head h2 {
    font-size: clamp(2.25rem, 10vw, 2.9rem);
  }

  .svc-page--corporate-magician-nashville .svc-intro .svc-prose p {
    line-height: 1.68;
  }

  .svc-page--corporate-magician-nashville .svc-band {
    padding-bottom: 64px;
  }

  .svc-page--corporate-magician-nashville .svc-formats-section {
    padding-top: 64px;
  }

  .svc-page--corporate-magician-nashville .svc-formats {
    gap: 14px;
  }

  .svc-page--corporate-magician-nashville .svc-format p.svc-format-meta {
    min-height: 0;
  }

  .svc-page--corporate-magician-nashville .svc-spec-row:first-child {
    padding-top: 12px;
  }
}

/* Between the 3-column floor and full width the cards are narrow enough that
   a long meta label takes two lines. Reserve both so the three card headings
   stay on one line as a row. */
@media (min-width: 1081px) and (max-width: 1200px) {
  .svc-page--corporate-magician-nashville .svc-format p.svc-format-meta {
    min-height: 2.9em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-page * {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}