/* =====================================================================
   Dawson B Music — Site v21
   One appended stylesheet. Loaded AFTER css/styles.css on every page, so
   everything here is an override and nothing in the original file is lost.
   To turn the whole thing off, remove the one <link> tag — the site falls
   straight back to how it looked before.

   Contents
     0. Typefaces ........... Playfair Display / EB Garamond / Tenor Sans
     1. Palette tokens ...... ivory throughout, green + gold as accents
     2. Surfaces ............ one cream field, sprig dividers between sections
     3. CTAs, pills, discs .. nothing left filled with the page colour
     4. Gold linework ....... where the accent actually comes from
     5. Letterforms ......... scoped to light sections only
     6. Hero ................ home: vertical portrait
     7. Page banners ........ inner pages: the 16:9 shot
     8. Format cards ........ line icons, rounded corners
     9. Reels ............... full thumbnail, no clipping
   ===================================================================== */

/* @import must stay first in the file. The theme already preconnects to
   fonts.googleapis.com and fonts.gstatic.com, so this resolves fast. */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Tenor+Sans&display=swap");

/* ---------------------------------------------------------------
   0. TYPEFACES
   Headings: Playfair Display (the theme already asks for it — but the
   page never actually loaded it, so every heading was falling back to
   Georgia and every paragraph to the system sans).
   Body: EB Garamond — an old-style serif that reads like a printed
   programme rather than an app.
   UI: Tenor Sans, wide-tracked, for buttons, nav, eyebrows and tags.
   --------------------------------------------------------------- */
:root{
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'EB Garamond', Georgia, serif;
  --font-ui:      'Tenor Sans', 'Helvetica Neue', Arial, sans-serif;
}

body{
  font-family: var(--font-body) !important;
  font-size: 17.5px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}
p, li, blockquote, .service-detail__content, .faq-item, .testimonial{
  font-family: var(--font-body);
}
h1, h2, h3, h4,
.section-header h1, .section-header h2, .section-header h3,
.hero__content h1, .page-hero h1{
  font-family: var(--font-display) !important;
  font-weight: 500;
}

/* UI voice — this is where the "expensive" actually reads */
.btn, .btn-primary, .btn-outline, .btn-gold-outline, .nav__cta,
.nav__link, .eyebrow, .tag, .event-item__type, .breadcrumb,
.mt-more-btn, .ev-rail-note, .sticky-services-nav a, .footer__heading{
  font-family: var(--font-ui) !important;
  font-weight: 400 !important;
}
.btn, .btn-primary, .btn-outline, .btn-gold-outline, .nav__cta{
  letter-spacing: .2em !important;
  text-transform: uppercase;
  font-size: .78rem;
}
.nav__link{ letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; }
.eyebrow{ letter-spacing: .26em; }

/* EB Garamond sets small — the date blocks and prices need the extra size */
.event-item__date-day{ font-family: var(--font-display); }
.pricing-card__price{ font-family: var(--font-display); }

/* ---------------------------------------------------------------
   1. PALETTE — one cream field, green and gold as accents
   Overriding the theme's own tokens repaints the whole site from one
   place; every rule in styles.css already reads these.
   --------------------------------------------------------------- */
:root{
  --ivory:      #F6F0E6;
  --champagne:  #F1E8D6;   /* cards — a half-step deeper than the page */
  --green-deep: #2F4A38;   /* headings */
  --green:      #3A5A40;   /* primary buttons */
  --sage:       #A3B18A;
  --ink:        #23211D;

  --gold:       #A8884A;
  --gold-deep:  #7E6433;
  --gold-pale:  #E4D3A8;
  --gold-line:  rgba(168,136,74,.55);
  --gold-hair:  rgba(168,136,74,.30);
  --gold-wash:  rgba(168,136,74,.14);
  --gold-wash2: rgba(168,136,74,.22);
  --gold-leaf:  linear-gradient(120deg,#7E6433 0%,#A8884A 22%,#EFE0B4 46%,#A8884A 68%,#7E6433 100%);

  /* the theme's own tokens, repointed */
  --bg-primary:    #F6F0E6;
  --bg-secondary:  #F6F0E6;
  --bg-dark:       #211F1B;   /* only ever seen behind the banner photos */
  --text-primary:  #23211D;
  --text-secondary:#565247;
  --text-light:    #857F73;
  --accent:        #A8884A;
  --accent-dark:   #7E6433;
  --accent-light:  #E4D3A8;
  --border:        #E0D6C3;
  --border-dark:   #CFC2A9;
}

body{ background: var(--ivory); }

/* ---------------------------------------------------------------
   2. SURFACES — cream everywhere, separated by a hairline
   No dark bands anywhere on the page. Sections are told apart by a
   1px rule with a small botanical sprig sitting on it — one hairline,
   one exact detail, and a lot of air around both.
   --------------------------------------------------------------- */
.section,
.section--gray,
.section--dark,
.section--ink,
.section--champagne,
.signup-section{
  background: var(--ivory) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
}
.section--dark h1,.section--dark h2,.section--dark h3,
.section--ink h1,.section--ink h2,.section--ink h3,
.signup-section h1,.signup-section h2,.signup-section h3{
  color: var(--green-deep) !important;
}
.section--dark p,.section--ink p,.signup-section p{
  color: var(--text-secondary) !important;
}
.section--dark .eyebrow,.section--ink .eyebrow,.signup-section .eyebrow{
  color: var(--gold-deep) !important;
}
/* the theme's 2px gold slab across the top of the signup band */
.signup-section::before{ display: none !important; }

/* cards keep their half-step of warmth so they still read as objects */
.service-card,
.pricing-card,
.testimonial,
.event-item,
.faq-item{ background: var(--champagne) !important; }

.section--dark .pricing-card,.section--dark .service-card,
.section--ink .pricing-card,.section--ink .service-card,
.section--ink .faq-item{ background: var(--champagne) !important; }
.section--ink .pricing-card h3,.section--ink .service-card h3,
.section--dark .pricing-card h3,.section--dark .service-card h3{ color: var(--ink) !important; }
.section--ink .pricing-card__price,.section--ink .pricing-card__note,
.section--dark .pricing-card__price,.section--dark .pricing-card__note{ color: var(--gold-deep) !important; }

/* ---- the divider: a hairline with a small botanical sprig on it ----
   Original line art, drawn as SVG: sage stems, gold blossoms. */
.section{ position: relative; }
.section + .section::before,
.section + .signup-section::before,
.signup-section + .section::before{
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1040px, calc(100% - 96px));
  height: 1px;
  background: var(--gold-hair);
  display: block !important;
}
.section + .section::after,
.section + .signup-section::after,
.signup-section + .section::after{
  content: "";
  position: absolute;
  top: -30px; left: 50%;
  transform: translateX(-50%);
  width: 300px; height: 60px;
  background: var(--ivory) url("../images/ornament-sprig.svg") center/contain no-repeat;
}
@media (min-resolution: 2dppx){
  .section + .section::before{ height: .5px; }
}
@media (max-width: 700px){
  .section + .section::after,
  .section + .signup-section::after,
  .signup-section + .section::after{ width: 210px; height: 42px; top: -21px; }
}

/* ---- the old dark bands are just cream sections now ----
   No wreath, no slab: the booking band sits on the same field as everything
   else and is told apart by the sprig divider like any other section. */
.signup-section,
.section--ink,
.section--dark{
  background-image: none !important;
  padding-top: 92px !important;
  padding-bottom: 92px !important;
}

/* footer stays the soft black — it anchors the page and gives the gold
   somewhere rich to sit. A warm near-black, not the theme's flat #0A0A0A. */
.footer{
  background: #211F1B !important;
  color: rgba(245,239,226,.68) !important;
  border-top: 1px solid var(--gold-line);
}
.footer h1,.footer h2,.footer h3,.footer h4,.footer strong{ color: #F5EFE2 !important; }
.footer__heading{ color: var(--gold-pale) !important; letter-spacing: .18em; }
.footer a{ color: rgba(245,239,226,.72) !important; }
.footer a:hover{ color: var(--gold-pale) !important; }
.footer__bottom,.footer__legal,.footer small{ color: rgba(245,239,226,.45) !important; }
.footer hr,.footer__divider{
  border-color: rgba(168,136,74,.35) !important;
  background: rgba(168,136,74,.35) !important;
}
.footer .social-link{ border-color: rgba(168,136,74,.6) !important; color: var(--gold-pale) !important; }
.footer .social-link:hover{ background: var(--gold-wash2) !important; color: #FFF6DF !important; }

/* nav: ivory once it leaves the hero, never stark white */
.nav.scrolled,
.nav.nav--dark-page.scrolled{ background: rgba(246,240,230,.97) !important; }

/* ---------------------------------------------------------------
   3. CTAs, PILLS, DISCS
   Rule: nothing is left filled with the page colour — every button
   and pill gets a green fill or a champagne wash so its lettering
   reads clearly.
   --------------------------------------------------------------- */
.btn-primary{
  background: var(--green) !important;
  background-image: none !important;
  color: #F6F0E6 !important;
  border: 1.5px solid var(--gold) !important;
  border-radius: 4px;
  box-shadow: none !important;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn-primary:hover{
  background: var(--green-deep) !important;
  color: #FFF6DF !important;
  border-color: var(--gold-pale) !important;
}

/* Base is the LIGHT case, so the pill can never come out invisible on cream;
   the pale lettering is switched on only while the nav sits over a photo. */
.nav__cta{
  background: var(--gold-wash) !important;
  background-image: none !important;
  color: var(--gold-deep) !important;
  border: 1.5px solid var(--gold) !important;
  border-radius: 4px;
  box-shadow: none !important;
}
.nav:not(.scrolled):not(.nav--light) .nav__cta{ color: var(--gold-pale) !important; }
.nav__cta:hover{ background: var(--gold-wash2) !important; border-color: var(--gold-deep) !important; }

/* Secondary buttons.
   .btn-outline-white was built for the dark bands — white lettering, white
   hairline. Those bands are cream now, so it was white-on-cream and effectively
   invisible ("Watch Performances First" on the services page). And a 14% gold
   wash on a cream field is barely a step, so the fill is deeper too: a button
   should never be the same colour as the page behind it. */
.btn-outline,
.btn-gold-outline,
.btn-outline-white{
  background: var(--gold-wash2) !important;
  background-image: none !important;
  color: var(--gold-deep) !important;
  border: 1.5px solid var(--gold) !important;
  border-radius: 4px;
}
.btn-outline:hover,
.btn-gold-outline:hover,
.btn-outline-white:hover{
  background: rgba(168,136,74,.30) !important;
  background-image: none !important;
  border-color: var(--gold-deep) !important;
  color: var(--gold-deep) !important;
}

/* over a photo it keeps the light treatment — there the page behind it is dark */
.hero .btn-outline,
.hero .btn-outline-white,
.hero .btn-gold-outline,
.page-hero .btn-outline,
.page-hero .btn-outline-white,
.page-hero .btn-gold-outline{
  background: rgba(255,255,255,.12) !important;
  color: #F6F0E6 !important;
  border-color: rgba(246,240,230,.8) !important;
}
.hero .btn-outline:hover,
.hero .btn-outline-white:hover,
.page-hero .btn-outline:hover,
.page-hero .btn-outline-white:hover{
  background: rgba(255,255,255,.2) !important;
  color: #FFF6DF !important;
  border-color: #FFF6DF !important;
}

.tag,
.event-item__type,
.sticky-services-nav .tag{
  background: var(--gold-wash) !important;
  background-image: none !important;
  color: var(--gold-deep) !important;
  border: 1px solid var(--gold-line) !important;
  border-radius: 999px;
  text-transform: uppercase; letter-spacing: .14em;
  font-size: .68rem;
}
.tag:hover,
.event-item__type:hover,
.sticky-services-nav .tag:hover{ background: var(--gold-wash2) !important; border-color: var(--gold) !important; }

/* The services jump-nav pills are the main way round that page, so they get
   a real target size rather than the small pill treatment the tags use. */
.sticky-services-nav .tag{
  font-size: .82rem !important;
  letter-spacing: .12em !important;
  padding: 11px 20px !important;
  border-radius: 999px !important;
  line-height: 1.1;
}
@media (max-width: 899px){
  .sticky-services-nav .tag{
    font-size: .78rem !important;
    padding: 10px 16px !important;
  }
}

.contact-info-item__icon,
.testimonial__avatar{
  background: var(--gold-wash2) !important;
  background-image: none !important;
  color: var(--gold-deep) !important;
  border: 1.5px solid var(--gold) !important;
}

.video-embed__play,
.reel-card__play{
  background: rgba(35,33,29,.78) !important;
  background-image: none !important;
  color: var(--gold-pale) !important;
  border: 1.5px solid var(--gold) !important;
}

.social-link{ border: 1px solid var(--gold-line) !important; border-radius: 999px; }
.social-link:hover,
.social-link--dark:hover{
  background: var(--gold-wash2) !important;
  background-image: none !important;
  color: var(--gold-deep) !important;
  border-color: var(--gold) !important;
}

/* ---------------------------------------------------------------
   4. GOLD LINEWORK
   --------------------------------------------------------------- */
.service-card,
.pricing-card,
.event-item,
.testimonial,
.faq-item{
  border: 1px solid var(--gold-line) !important;
  border-radius: 14px;
}
.faq-item{ border-width: 0 0 1px 0 !important; border-radius: 0; background: transparent !important; }

.pricing-card--featured{
  border: 2px solid var(--gold) !important;
  box-shadow: 0 10px 34px rgba(35,33,29,.08) !important;
}

.divider,
.nav__link::after,
.pricing-card--featured::before{
  background-image: var(--gold-leaf) !important;
  background-color: var(--gold) !important;
}
.divider{ height: 3px !important; border-radius: 2px; }

.section-header{ position: relative; }
.section-header::after{
  content:""; display:block; width:110px; height:1px; margin:18px auto 0;
  background-image: var(--gold-leaf); opacity:.7;
}
.section-header--left::after,
.service-detail__content .section-header::after{ margin-left:0; }

/* ---------------------------------------------------------------
   5. LETTERFORMS
   Scoped deliberately: a blanket "h1,h2,h3 { color: green }" turns the
   hero headline green over the photo, which is why this only ever
   touches headings inside sections.
   --------------------------------------------------------------- */
.eyebrow{ color: var(--gold-deep) !important; text-transform: uppercase; }
.nav__logo-title{ color: var(--gold) !important; }
.pricing-card__price{ color: var(--gold-deep) !important; }
.pricing-card__note{ color: var(--gold-deep) !important; opacity:.85; }

.section .section-header h2,
.section .section-header h3{ color: var(--green-deep) !important; }

/* ---------------------------------------------------------------
   6. HERO — home page, vertical solo portrait
   The crop keeps his hair, face and the whole saxophone in frame
   (~120px of headroom above the hair; it crops from mid-torso down).
   The copy sits LEFT so it never lands on his face.
   --------------------------------------------------------------- */
.hero__bg{
  background-image: url("../images/hero-dawson.jpg") !important;
  background-size: cover !important;
  background-position: center 3% !important;
  background-repeat: no-repeat !important;
}
.hero{ background-image: none !important; }

.hero__overlay{
  background:
    linear-gradient(95deg,
      rgba(24,28,22,.78) 0%,
      rgba(24,28,22,.64) 26%,
      rgba(24,28,22,.36) 46%,
      rgba(24,28,22,.10) 64%,
      rgba(24,28,22,.02) 100%),
    linear-gradient(180deg,
      rgba(24,28,22,.28) 0%,
      rgba(24,28,22,0)   22%,
      rgba(24,28,22,0)   68%,
      rgba(24,28,22,.40) 100%) !important;
}

/* The hero eyebrow is .hero__eyebrow — NOT .eyebrow — so it misses the UI-font
   rule above, and the theme paints it in the dark text gold, which is close to
   unreadable on a bright photo. Pale gold and a shadow instead. */
.hero__eyebrow{
  font-family: var(--font-ui) !important;
  font-weight: 400 !important;
  color: var(--gold-pale) !important;
  text-shadow: 0 1px 3px rgba(16,20,14,.8);
}

@media (max-width: 899px){
  .hero__eyebrow{
    font-size: .74rem !important;
    letter-spacing: .16em !important;
    line-height: 1.6;
  }
  /* Matching the headline to desktop is not a matter of copying the numbers:
     the theme's mobile stroke (0.6px under a ~36px face) is proportionally the
     same as 1.5px under 88px, but a sub-pixel gold outline simply vanishes at
     that size. It is set heavier on purpose so it READS the same. */
  .hero__title{
    -webkit-text-stroke-width: 1px !important;
    text-stroke-width: 1px !important;
    paint-order: stroke fill;
    text-shadow: 0 1px 3px rgba(16,20,14,.6), 0 2px 16px rgba(16,20,14,.7) !important;
  }
}

/* the theme's hard-edged 42%-black panel behind the headline */
.hero__textwrap::before{ display: none !important; content: none !important; }

.hero__content h1{ text-shadow: 0 2px 26px rgba(20,24,18,.55) !important; }
.hero__content p { text-shadow: 0 1px 14px rgba(20,24,18,.60) !important; }

@media (min-width: 900px){
  .hero{ justify-content: flex-start !important; }
  .hero__content{
    width: 660px !important;
    max-width: 660px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 86px !important;
    text-align: left !important;
    transform: translateY(34px) !important;
  }
  .hero__content .eyebrow,
  .hero__content h1,
  .hero__content p{ text-align: left !important; }
  .hero__actions{ justify-content: flex-start !important; }
}

@media (max-width: 899px){
  .hero__bg{ background-position: 58% 6% !important; }
  .hero__overlay{
    background: linear-gradient(180deg,
      rgba(24,28,22,.34) 0%,
      rgba(24,28,22,.18) 30%,
      rgba(24,28,22,.66) 100%) !important;
  }
}

/* ---------------------------------------------------------------
   7. PAGE BANNERS — bio / events / media / services / contact
   --------------------------------------------------------------- */
.page-hero{
  position: relative;
  text-align: left !important;
  padding-top: calc(var(--nav-height, 76px) + 46px) !important;
  padding-bottom: 46px !important;
  min-height: 318px !important;
  background: #211F1B !important;   /* only shows if the photo fails */
}
.page-hero::before{
  background-image: url("../images/banner-dawson.jpg") !important;
  background-position: center top !important;
  background-size: cover !important;
}
/* Banner legibility: a fine dark outline on the letterforms PLUS a light
   wash over the photo — about 60% of the original scrim. Half alone left
   the subtitle struggling where it crosses the bright brass; the outline
   alone did not fix that either. Together they hold, and at this strength
   the wash still reads as light on the picture, not a panel over it. */
.page-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(95deg,
      rgba(24,28,22,.46) 0%,
      rgba(24,28,22,.35) 30%,
      rgba(24,28,22,.18) 52%,
      rgba(24,28,22,.06) 72%,
      rgba(24,28,22,.02) 100%),
    linear-gradient(180deg,
      rgba(24,28,22,.21) 0%,
      rgba(24,28,22,.04) 40%,
      rgba(24,28,22,.21) 100%);
}
/* .page-hero__content is also the page's .container — leave its centring
   alone or the copy slides out to the raw viewport edge. */
.page-hero__content{ position: relative; z-index: 2; text-align: left !important; }
.page-hero h1{
  text-align: left !important;
  margin-bottom: .28em !important;
  color: #F6F0E6 !important;
  -webkit-text-stroke: .75px rgba(20,24,16,.62);
  paint-order: stroke fill;
  text-shadow: 0 1px 3px rgba(16,20,14,.55);
}
.page-hero p{
  text-align: left !important;
  margin-left: 0 !important; margin-right: 0 !important;
  max-width: 560px !important;
  color: #FFFFFF !important;
  -webkit-text-stroke: .4px rgba(20,24,16,.5);
  paint-order: stroke fill;
  text-shadow: 0 1px 3px rgba(16,20,14,.6);
}
.page-hero .breadcrumb,
.page-hero .breadcrumb a{
  justify-content: flex-start !important;
  text-align: left !important;
  color: rgba(255,255,255,.88) !important;
  text-shadow: 0 1px 3px rgba(16,20,14,.8);
}
/* the nav sits on the photo on these pages — same treatment, no wash */
.page-hero ~ * .nav__link{}
body:has(.page-hero) .nav:not(.scrolled) .nav__link,
body:has(.page-hero) .nav:not(.scrolled) .nav__logo-title,
body:has(.page-hero) .nav:not(.scrolled) .nav__logo-name{
  text-shadow: 0 1px 3px rgba(16,20,14,.75);
}
.page-hero .eyebrow{ color: var(--gold-pale) !important; }

/* ---------------------------------------------------------------
   8. FORMAT CARDS — line icons instead of emoji, rounded corners
   site-tweaks.js swaps the emoji for an SVG per format; this is the
   frame around it.
   --------------------------------------------------------------- */
.service-card{
  border-radius: 14px;
  padding: 26px 24px !important;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.service-card:hover{
  border-color: var(--gold) !important;
  box-shadow: 0 10px 30px rgba(35,33,29,.07);
  transform: translateY(-2px);
}
.service-card__icon{
  width: 42px !important;
  height: 42px !important;
  margin-bottom: 16px !important;
  background: none !important;
  border: 0 !important;
  color: var(--gold) !important;
  display: block;
}
.service-card__icon svg{ width: 100%; height: 100%; display: block; }
.service-card h3{ font-family: var(--font-display) !important; font-weight: 500; }
/* second line of a card title — same display face, a shade smaller and gold */
.service-card__subtitle{
  display: block;
  /* EB Garamond italic, medium. Chosen over Playfair's italic because Playfair's
     J carries a heavy ball terminal at the top left, and that blob plus the
     horizontal entry reads as the crossbar of an f or t at this size. EB
     Garamond's J has only a small angled serif, so the letter is unmistakable,
     and the two are close cousins — both old-style serifs with the same warmth.
     It costs no extra font request either: EB Garamond italic is already loaded
     as the site's body face. Sized up because it sets smaller than Playfair. */
  font-family: var(--font-body) !important;
  font-weight: 500;
  font-style: italic;
  font-size: 1.16em;
  letter-spacing: .01em;
  color: var(--green-deep);
  margin-top: .14em;
}
/* the same botanical sprig used between sections, in miniature */
.service-card__subtitle::after{
  content: "";
  display: block;
  width: 152px;
  height: 27px;
  margin: 8px auto 0;
  background: url("../images/ornament-sprig.svg") center/contain no-repeat;
}
/* Performance formats: the whole card is centred — icon, pill, title and copy.
   Scoped to #formats so the event-type cards on the home page keep their own
   left-aligned layout. */
#formats .service-card{ text-align: center; }
#formats .service-card .service-card__icon{ margin-left: auto !important; margin-right: auto !important; }
#formats .service-card .tag{ display: inline-block; }
#formats .service-card h3,
#formats .service-card p,
#formats .service-card .service-card__subtitle{ text-align: center; }

/* the tag sits under the icon, above the title */
.service-card .tag{ margin-bottom: 10px; display: inline-block; }

/* ---------------------------------------------------------------
   8b. THE "NOT SURE WHICH PACKAGE?" CARD
   It shipped with inline styles — a dark fill and white lettering. This
   stylesheet repaints every .service-card champagne with !important, which
   beats a plain inline rule, so the white text was left sitting on cream and
   effectively vanished. The installer strips those inline styles and tags the
   card .service-card--cta; these rules are also written to hold even if the
   HTML patch could not be applied.
   --------------------------------------------------------------- */
.service-card--cta h3,
.service-card[style*="--bg-dark"] h3,
.service-card[style*="bg-dark"] h3{
  color: var(--green-deep) !important;
}
.service-card--cta p,
.service-card[style*="--bg-dark"] p,
.service-card[style*="bg-dark"] p{
  color: var(--text-secondary) !important;
}
.service-card--cta .service-card__icon,
.service-card[style*="--bg-dark"] .service-card__icon{
  background: none !important;
  border: 0 !important;
  color: var(--gold) !important;
}

/* Desktop: it is a closing line, not a sixth option — so it loses the box and
   lies across the full width under the grid, with the button centred beneath
   the sentence. The five event types are condensed to fit one row, so the
   section is a single row of cards plus a closing line instead of two rows. */
/* the title block over the event cards — a little more air beneath it than a
   normal section header, so the row of cards reads as one framed group */
#services .section-header{ margin-bottom: 34px; }
#services .section-header p:last-child{
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-secondary);
}

/* ---- event-type cards: bigger, and obviously clickable ----
   They carry a real anchor, and it is stretched over the whole card so the
   whole thing is the hit target rather than just the words. */
#services .services-grid > .service-card:not(.service-card--cta){
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
#services .services-grid > .service-card:not(.service-card--cta):hover{
  transform: translateY(-4px);
  border-color: var(--gold) !important;
  border-width: 1.5px !important;
  box-shadow: 0 14px 34px rgba(35,33,29,.11);
  background: #F5EEDD !important;
}
#services .services-grid > .service-card:not(.service-card--cta) .service-card__icon{
  transition: transform .2s ease;
}
#services .services-grid > .service-card:not(.service-card--cta):hover .service-card__icon{
  transform: scale(1.08);
}
.service-card__link{
  display: inline-block;
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--font-ui) !important;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep) !important;
  text-decoration: none;
  white-space: nowrap;
}
.service-card__link span{
  display: inline-block;
  transition: transform .2s ease;
  margin-left: 2px;
}
.service-card:hover .service-card__link{ color: var(--green-deep) !important; }
.service-card:hover .service-card__link span{ transform: translateX(4px); }
/* the stretched hit area — the whole card is the link */
.service-card__link::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

@media (min-width: 900px){
  #services .services-grid{
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 16px !important;
  }
  #services .services-grid > .service-card{
    padding: 30px 20px !important;
  }
  #services .services-grid > .service-card .service-card__icon{
    width: 46px !important; height: 46px !important; margin-bottom: 18px !important;
  }
  #services .services-grid > .service-card h3{ font-size: 1.16rem; margin-bottom: 10px; }
  #services .services-grid > .service-card p{ font-size: .95rem; line-height: 1.6; }

  .services-grid > .service-card--cta,
  .services-grid > .service-card[style*="bg-dark"]{
    grid-column: 1 / -1;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--gold-hair) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 26px 2px 4px !important;
    text-align: center;
  }
  .services-grid > .service-card--cta:hover,
  .services-grid > .service-card[style*="bg-dark"]:hover{ transform: none; box-shadow: none; }
  .services-grid > .service-card--cta .service-card__icon,
  .services-grid > .service-card[style*="bg-dark"] .service-card__icon{
    width: 30px !important; height: 30px !important; margin: 0 auto 8px !important;
  }
  .services-grid > .service-card--cta h3,
  .services-grid > .service-card[style*="bg-dark"] h3{
    margin: 0 !important; font-size: 1.15rem;
  }
  .services-grid > .service-card--cta p,
  .services-grid > .service-card[style*="bg-dark"] p{
    margin: 8px auto 0 !important; max-width: 620px; font-size: 1rem;
  }
  .services-grid > .service-card--cta .btn,
  .services-grid > .service-card[style*="bg-dark"] .btn{
    margin-top: 18px !important;
  }
}

/* ---------------------------------------------------------------
   9. REELS — show the whole thumbnail
   Instagram's embed renders a ~52px header and then the media at its
   own width. A fixed iframe height cut the picture in half; a padding
   box sized from the card's OWN WIDTH scales with the carousel.
   --------------------------------------------------------------- */
.ig-reel{
  background: var(--champagne) !important;
  border: 1px solid var(--gold-line);
  border-radius: 14px;
  overflow: hidden;
}
/* The embed draws a white header bar with the username above the picture, and
   its background cannot be restyled from here — it is a cross-origin iframe, so
   no CSS of ours reaches inside it. Colour-matching it to the cream is therefore
   impossible; the header is cropped out instead by pulling the iframe up by its
   own height and hiding the overflow. The reel title still sits underneath in
   .ig-reel__caption, so nothing is lost. It also gives back ~52px per card.
   The box is sized from its own WIDTH, so the picture keeps its proportions at
   every carousel size — a fixed pixel height is what cut them off before. */
.ig-reel__frame{
  position: relative;
  width: 100%;
  height: 0;
  /* 125% is Instagram's tallest media box (4:5). At 104% the two tall posts
     were cropped and their play button — which sits at the middle of the
     picture — fell below the window. Posts whose media is square simply show
     a little of Instagram's white action bar underneath, which the mask below
     covers. */
  padding-top: 125%;
  overflow: hidden;
}
.ig-reel__frame iframe{
  position: absolute !important;
  left: 0;
  top: -52px;                     /* crops the username bar */
  width: 100% !important;
  height: calc(100% + 52px) !important;
  border: 0;
  display: block;
  background: #000;
}
/* the cream panel over the foot of the frame: it hides Instagram's white
   action bar on the square posts, and trims a sliver off the tall ones */
.ig-reel__frame::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 52px;
  background: var(--champagne);
  z-index: 1;
  pointer-events: none;
}

/* A transparent sheet over the picture, so a drag that starts on the thumbnail
   is ours to handle instead of disappearing into the iframe. Clicking a reel
   lifts the sheet for that one card (.is-live) so the next click reaches
   Instagram's player; moving off the card puts it back, which keeps every other
   card draggable by its picture. */
.ig-reel__grab{
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: grab;
  background: transparent;
}
.ig-reel.is-live .ig-reel__grab{ pointer-events: none; }
.mt-dragging .ig-reel__grab{ cursor: grabbing; }
.ig-reel__caption{
  margin: 0;
  padding: 10px 14px;
  font-family: var(--font-ui);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--text-secondary);
  text-align: center;
}

/* ---------------------------------------------------------------
   16. RATES — no price list
   The tiered cards read as a menu, and the work isn't sold that way.
   One statement, centred, with the ask underneath. The grid is hidden
   here as well as removed in JS so the "$X" cards never flash first.
   --------------------------------------------------------------- */
#pricing .pricing-grid{ display: none !important; }
/* the theme's sub-line under the heading described the packages that are gone;
   hidden here as well as removed in JS so it can't flash before the script runs */
#pricing .section-header p:not(.eyebrow),
#pricing .section-header .section-subtitle,
#pricing .section-header .lead{ display: none !important; }

.mt-rates__note{
  max-width: 660px;
  margin: 0 auto;
  text-align: center;
}
.mt-rates__note p{
  font-family: var(--font-body) !important;
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin: 0 0 16px;
}
.mt-rates__note p:first-child{
  font-size: 1.2rem;
  color: var(--ink);
}
.mt-rates__note .btn{ margin-top: 14px; }

@media (max-width: 700px){
  .mt-rates__note p{ font-size: 1rem; }
  .mt-rates__note p:first-child{ font-size: 1.1rem; }
}

/* ---------------------------------------------------------------
   17. TITLE BLOCK OVER THE EVENT-TYPE BUTTONS (services page)
   Sits above the sticky bar, so it scrolls away and the buttons
   still stick to the top of the window.
   --------------------------------------------------------------- */
.svc-nav-head{
  padding: 40px 24px 6px;
  background: var(--ivory);
}
.svc-nav-head .section-header{ margin-bottom: 0; }
.svc-nav-head .section-header h2{ margin-bottom: 8px; }
.svc-nav-head .section-header p:last-child{
  max-width: 520px;
  margin: 0 auto;
  color: var(--text-secondary);
}
.svc-nav-head .section-header::after{ margin-top: 16px; }
@media (max-width: 700px){
  .svc-nav-head{ padding: 28px 20px 4px; }
}
/* the header colour rules are scoped to .section, and this block sits outside one */
.svc-nav-head .section-header h2{ color: var(--green-deep) !important; }
.svc-nav-head .eyebrow{ color: var(--gold-deep) !important; }

/* ---------------------------------------------------------------
   18. LOCAL PAGES — palm-beach-saxophonist.html, nantucket-saxophonist.html
   Built from the site's own pieces (banner, format cards, sprig dividers),
   so they read as part of the site. Neither is in the menu; they're reached
   from Google and from the one footer line below.
   --------------------------------------------------------------- */
.mt-local .service-detail{
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
  text-align: left;
}
.mt-local .service-detail__image{ margin: 0 !important; }
.mt-local__photo img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(35,33,29,.10);
}
.mt-local__photo--portrait img{ aspect-ratio: 4 / 5; object-position: center 12%; }
.mt-local__photo--landscape img{ aspect-ratio: 4 / 3.4; object-position: center 70%; }
.mt-local .service-detail__content h2{
  color: var(--green-deep) !important;
  font-size: 2.1rem;
  margin: .25em 0 .3em;
}
.mt-local .service-detail__content .divider{ width: 64px; margin: 0 0 22px; }
.mt-local .service-detail__content p{ font-size: 1.06rem; line-height: 1.75; color: var(--text-secondary); margin: 0 0 14px; }

.mt-towns{
  font-family: var(--font-ui) !important;
  font-size: .72rem !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 2 !important;
  color: var(--gold-deep) !important;
  margin: 20px 0 6px;
}
.mt-local__actions{ display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 22px; }
.mt-local__actions--center{ justify-content: center; margin-top: 34px; }
.mt-local__tel{
  font-family: var(--font-ui) !important;
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--gold-deep) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--gold-hair);
}
.mt-local__tel:hover{ border-bottom-color: var(--gold); }

/* the four format cards, one row */
.mt-local .services-grid.mt-local__grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
.mt-local__grid .service-card{ text-align: center; padding: 30px 22px !important; }
.mt-local__grid .service-card__icon{ margin-left: auto !important; margin-right: auto !important; }
.mt-local__more{
  text-align: center;
  margin-top: 26px;
  font-size: 1rem;
  color: var(--text-secondary);
}
.mt-local__more a{
  color: var(--gold-deep) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--gold-hair);
}
.mt-local__more a:hover{ border-bottom-color: var(--gold); }

/* "Good to know" — three short facts, no boxes */
.mt-facts{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}
.mt-fact h3{
  font-family: var(--font-ui) !important;
  font-size: .8rem !important;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep) !important;
  margin: 0 0 12px;
}
.mt-fact h3::after{
  content: ""; display: block; width: 36px; height: 1px;
  margin: 12px auto 0; background: var(--gold-line);
}
.mt-fact p{ font-size: 1.04rem; line-height: 1.7; color: var(--text-secondary); margin: 0; }

@media (max-width: 980px){
  .mt-local .services-grid.mt-local__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px){
  .mt-local .service-detail{ grid-template-columns: 1fr; gap: 28px; }
  .mt-local__photo--portrait img{ aspect-ratio: 4 / 3; object-position: center 18%; }
  .mt-local .service-detail__content h2{ font-size: 1.7rem; }
  .mt-facts{ grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 520px){
  .mt-local .services-grid.mt-local__grid{ grid-template-columns: 1fr !important; }
}

/* the one footer line that links the two local pages */
.footer__areas{
  clear: both;
  text-align: center;
  padding: 18px 16px 4px;
  font-family: var(--font-ui) !important;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(245,239,226,.5);
}
.footer__areas a{ color: var(--gold-pale) !important; text-decoration: none; white-space: nowrap; }
.footer__areas a:hover{ color: #FFF6DF !important; }
.footer__areas span[aria-hidden]{ margin: 0 .6em; color: var(--gold-pale); opacity: .8; }