/*
 Theme Name:   GeneratePress Child — Scott Randall Lindberg
 Theme URI:    https://generatepress.com
 Description:  Upload-ready Bootstrap-style design system for the Scott Randall Lindberg GeneratePress child theme.
 Author:       Scott Randall Lindberg Website Project
 Template:     generatepress
 Version:      3.2.8
*/

@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,600;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,600;0,700;1,400;1,600&display=swap");

/* =========================================================
   VERSION 3.1 — CLEAN GLOBAL DESIGN SYSTEM

   This stylesheet does not require the Bootstrap library.
   It uses Bootstrap-style variables, utilities, containers,
   buttons, cards, grids, spacing, and responsive breakpoints
   while preserving the existing SRL page-specific classes.

   GeneratePress Customizer bridge:
   --contrast   = primary / heading color
   --contrast-2 = body text color
   --contrast-3 = muted text color
   --base-2     = light background
   --base-3     = surface / card background
   --accent     = gold accent / CTA color
========================================================= */

:root {
  --srl-primary: var(--contrast, #17365d);
  --srl-primary-rgb: 23, 54, 93;
  --srl-body-color: var(--contrast-2, #3e4753);
  --srl-muted: var(--contrast-3, #6b7280);
  --srl-accent: var(--accent, #d8a629);
  --srl-accent-light: #ffd76a;
  --srl-light: var(--base-2, #fbf8f2);
  --srl-white: var(--base-3, #ffffff);
  --srl-border-color: rgba(var(--srl-primary-rgb), 0.16);

  /* Compatibility aliases used by legacy SRL page sections. */
  --srl-color-primary: var(--srl-primary);
  --srl-color-text: var(--srl-body-color);
  --srl-color-muted: var(--srl-muted);
  --srl-color-accent: var(--srl-accent);
  --srl-color-accent-light: var(--srl-accent-light);
  --srl-color-bg: var(--srl-light);
  --srl-color-light: var(--srl-light);
  --srl-color-white: var(--srl-white);
  --srl-color-border: var(--srl-border-color);

  --srl-font-body: "Lato", Arial, Helvetica, sans-serif;
  --srl-font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --srl-font-button: "Lato", Arial, Helvetica, sans-serif;

  --srl-container: 1200px;
  --srl-gutter: 24px;
  --srl-section-space: 90px;

  --srl-spacer: 1rem;
  --srl-radius-sm: 5px;
  --srl-radius: 8px;
  --srl-radius-lg: 14px;
  --srl-shadow-sm: 0 8px 20px rgba(var(--srl-primary-rgb), 0.08);
  --srl-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  --srl-transition: 0.25s ease;

  --srl-btn-height: 52px;
  --srl-btn-padding-y: 14px;
  --srl-btn-padding-x: 30px;
  --srl-btn-font-size: 18px;
  --srl-btn-font-weight: 600;
  --srl-btn-radius: 7px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--srl-body-color);
  font-family: var(--srl-font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.srl-kicker,
.srl-section-kicker,
.srl-review-label {
  color: #17365D !important;
  font-family: var(--srl-font-heading);
}

img,
svg {
  max-width: 100%;
}

a {
  text-underline-offset: 0.16em;
}

/* Bootstrap-style container */
.srl-container,
.srl-container-fluid,
.srl-hero-inner,
.srl-footer-inner,
.srl-meet-inner,
.srl-music-types-inner,
.srl-music-approach-inner,
.srl-music-learn-inner,
.srl-music-includes-inner,
.srl-gallery-final-cta-inner,
.srl-lullaby-about-inner,
.srl-lullaby-praise-inner,
.srl-lullaby-author-inner,
.srl-lullaby-illustrator-inner,
.srl-heart-about-inner,
.srl-offers-container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--srl-gutter);
  padding-left: var(--srl-gutter);
}

.srl-container,
.srl-hero-inner,
.srl-footer-inner,
.srl-meet-inner,
.srl-music-types-inner,
.srl-music-approach-inner,
.srl-music-learn-inner,
.srl-music-includes-inner,
.srl-gallery-final-cta-inner,
.srl-lullaby-about-inner,
.srl-lullaby-praise-inner,
.srl-lullaby-author-inner,
.srl-lullaby-illustrator-inner,
.srl-heart-about-inner,
.srl-offers-container {
  max-width: var(--srl-container);
}

/* Bootstrap-style row and columns for future sections */
.srl-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(var(--srl-gutter) * -0.5);
  margin-left: calc(var(--srl-gutter) * -0.5);
}

.srl-row > * {
  width: 100%;
  padding-right: calc(var(--srl-gutter) * 0.5);
  padding-left: calc(var(--srl-gutter) * 0.5);
}

.srl-col { flex: 1 0 0%; }
.srl-col-12 { flex: 0 0 auto; width: 100%; }
.srl-col-6 { flex: 0 0 auto; width: 50%; }
.srl-col-4 { flex: 0 0 auto; width: 33.333333%; }
.srl-col-3 { flex: 0 0 auto; width: 25%; }

/* Reusable section and card utilities */
.srl-section {
  padding-top: var(--srl-section-space);
  padding-bottom: var(--srl-section-space);
}

.srl-bg-light { background-color: var(--srl-light); }
.srl-bg-white { background-color: var(--srl-white); }
.srl-text-primary { color: var(--srl-primary) !important; }
.srl-text-accent { color: var(--srl-accent) !important; }
.srl-text-muted { color: var(--srl-muted) !important; }
.srl-text-center { text-align: center !important; }
.srl-w-100 { width: 100% !important; }

.srl-card {
  background: var(--srl-white);
  border: 1px solid var(--srl-border-color);
  border-radius: var(--srl-radius-lg);
  box-shadow: var(--srl-shadow-sm);
}

/* Unified button system */


.srl-btn-primary, .srl-contact-email{
  background: var(--srl-primary);
  border-color: var(--srl-primary);
  color: var(--srl-white);
}

.srl-btn-secondary, .srl-contact-phone{
  background: var(--srl-accent);
  border-color: var(--srl-accent);
  color: var(--srl-primary);
}

.srl-btn-outline {
  background: transparent;
  border-color: var(--srl-primary);
  color: var(--srl-primary);
}

.srl-footer a:focus-visible, .srl-social-links a:focus-visible{
  outline: 3px solid var(--srl-accent-light);
  outline-offset: 3px;
}

/* Simple spacing utilities */
.srl-m-0 { margin: 0 !important; }
.srl-mt-0 { margin-top: 0 !important; }
.srl-mb-0 { margin-bottom: 0 !important; }
.srl-mb-1 { margin-bottom: calc(var(--srl-spacer) * 0.25) !important; }
.srl-mb-2 { margin-bottom: calc(var(--srl-spacer) * 0.5) !important; }
.srl-mb-3 { margin-bottom: var(--srl-spacer) !important; }
.srl-mb-4 { margin-bottom: calc(var(--srl-spacer) * 1.5) !important; }
.srl-mb-5 { margin-bottom: calc(var(--srl-spacer) * 3) !important; }
.srl-p-0 { padding: 0 !important; }

@media (max-width: 1024px) {
  :root {
    --srl-gutter: 22px;
    --srl-section-space: 70px;
  }
}

@media (max-width: 767px) {
  :root {
    --srl-gutter: 18px;
    --srl-section-space: 50px;
    --srl-btn-height: 52px;
  }

  .srl-col,
  .srl-col-6,
  .srl-col-4,
  .srl-col-3 {
    flex: 0 0 auto;
    width: 100%;
  }
}

/*Mobile Global Settings*/

/* Mobile Logo Size */

@media (max-width: 768px) {

    .navigation-branding img,
    .site-logo.mobile-header-logo img {
        height: 80px !important;
        width: auto;
    }

}

/* Larger Mobile Hamburger Menu */

@media (max-width: 768px) {

    .menu-toggle {
        width: 64px;
        height: 64px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .menu-toggle .gp-icon {
        width: 34px;
        height: 34px;
    }

    .menu-toggle svg {
        width: 34px;
        height: 34px;
    }

}


/*Top Bar - Social Media Icons*/

/* ==========================================
   Front Page Header Social Icons
   Desktop Only
========================================== */

.home .srl-header-social {

    position: absolute;

    top: 10px;

  right: calc((100vw - 1180px) / 2 + 50px);

    display: flex;
    align-items: center;
    gap: 20px;

    z-index: 9999;
}

.home .srl-header-social a {

    color: var(--srl-color-white);
    font-size: 30px;
    line-height: 1;

    text-decoration: none;

    transition: color .25s ease, transform .25s ease;
}

.home .srl-header-social a:hover {

    color: #FFD76A !important;
    transform: translateY(-3px);

}

/* Hide on Tablet & Mobile */

@media (max-width: 1024px) {

    .home .srl-header-social {
        display: none;
    }

}

/* Hide only on mobile */
@media (max-width: 640px) {
    .srl-hide-mobile {
        display: none !important;
    }
}

/*Footer - Global Settings*/

.srl-footer {
  background: #17365d !important;
  color: var(--srl-color-white);
  padding: 34px 24px;
}

.srl-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.35fr .85fr 1.15fr .85fr;
  gap: 38px;
  align-items: center;
}

.srl-footer h3 {
  margin: 0 0 12px;
  color: var(--srl-color-white);
  font-size: 17px;
  font-weight: 700;
}

.srl-footer a {
  color: var(--srl-color-white);
  text-decoration: none;
}

.srl-footer a:hover {
  color: var(--srl-color-accent-light);
}

.srl-footer-logo img {
  width: 100%;
  max-width: 350px;
  height: auto;
  display: block;
}
/* Social Media Icons */

.srl-social-links {
    display: flex;
    gap: 20px;
    align-items: center;
}

.srl-social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--srl-color-white);
    font-size: 30px;
    line-height: 1;
    text-decoration: none;

    transition: color .25s ease, transform .25s ease;
}

.srl-social-links a:hover {
    color: #FFD76A !important;
    transform: translateY(-3px);
}

.srl-footer p {
  margin: 0 0 8px;
  color: var(--srl-color-white);
  font-size: 15px;
}

.srl-footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.srl-footer-menu li {
  margin-bottom: 7px;
}

.srl-footer-menu a {
  font-size: 15px;
}

/* Tablet */

@media (max-width: 1024px) {
  .srl-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 34px;
  }
}

/* Mobile */

@media (max-width: 640px) {
  .srl-footer {
    padding: 38px 22px;
    text-align: center;
  }

  .srl-footer-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .srl-footer-logo img {
    margin: 0 auto;
    max-width: 300px;
  }

  .srl-social-links {
    justify-content: center;
  }
}



/* Front Page: Section 1 - Scott Randall Lindberg Homepage Hero */

.srl-hero {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  padding: 90px 24px 50px;

  background:
    var(--srl-color-bg)
    url("https://scottrlindberg.com/wp-content/uploads/2026/06/scott-lindberg-hero-background-v2.png")
    center 38% / cover no-repeat;

  border-bottom: 1px solid rgba(216, 166, 41, 0.25);
}

.srl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(15, 32, 58, 0.42);
}

.srl-hero-inner {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: minmax(300px, 42%) minmax(420px, 1fr);
  align-items: center;
  gap: 36px;

  width: 100%;
  max-width: var(--srl-container);
  margin: 0 auto;
}

.srl-hero-book img {
  display: block;
  width: 100%;
  max-width: 430px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--srl-radius);
}

.srl-hero-content {
  width: 100%;
  max-width: 650px;
  padding: 40px 0 0;
}

.srl-kicker {
  margin: 0 0 10px;
  color: var(--srl-color-accent);
  font-family: var(--srl-font-body);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.srl-hero-content h1 {
  margin: 0 0 18px;
  color: #ffffff !important;
  font-family: var(--srl-font-heading);
  font-size: 52px;
  font-weight: 700;
  line-height: 1.15;
  text-shadow:
    0 3px 8px rgba(0, 0, 0, 0.55),
    0 8px 24px rgba(0, 0, 0, 0.42);
}

.srl-hero-content .srl-h1-sub {
  display: block;
  margin-top: 4px;
  color: var(--srl-color-white);
  font-family: var(--srl-font-heading);
  font-size: 42px;
  font-weight: 700;
  line-height: 1.15;
}

.srl-subtitle {
  max-width: 620px;
  margin: 0 0 24px;
  color: var(--srl-color-white);
  font-family: var(--srl-font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.55),
    0 6px 18px rgba(0, 0, 0, 0.35);
}

.srl-learn-more,
.srl-learn-more:visited {
  color: var(--srl-color-accent-light);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--srl-transition);
}

.srl-learn-more:hover,
.srl-learn-more:focus {
  color: var(--srl-color-white);
  text-decoration: underline;
}

.srl-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 24px;
}

/*
  Front-page purchase buttons use the global standard:
  blue background, white text, gold hover, blue hover text.
*/

.srl-hero .srl-btn-primary, .srl-hero .srl-btn-primary:visited, .srl-hero .srl-btn-secondary, .srl-hero .srl-btn-secondary:visited{
  min-height: var(--srl-btn-height);
  padding: var(--srl-btn-padding-y) var(--srl-btn-padding-x);
  border: 2px solid var(--srl-color-primary);
  border-radius: var(--srl-btn-radius);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  background: var(--srl-color-primary);
  color: var(--srl-color-white);

  font-family: var(--srl-font-button);
  font-size: var(--srl-btn-font-size);
  font-weight: var(--srl-btn-font-weight);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  text-transform: none;

  box-shadow: var(--srl-shadow);

  transition:
    background-color var(--srl-transition),
    border-color var(--srl-transition),
    color var(--srl-transition),
    box-shadow var(--srl-transition),
    transform var(--srl-transition);
}

.srl-hero .srl-btn-primary:hover, .srl-hero .srl-btn-primary:focus, .srl-hero .srl-btn-secondary:hover, .srl-hero .srl-btn-secondary:focus{
  background: var(--srl-color-accent);
  border-color: var(--srl-color-accent);
  color: var(--srl-color-primary);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.20);
}



.srl-review-card {
  width: 100%;
  max-width: 540px;
  padding: 18px 22px;

  background: #FFFFFF;
  border: 1px solid rgba(216, 166, 41, 0.45);
  border-radius: var(--srl-radius-lg);

  color: var(--srl-color-text);
  font-family: var(--srl-font-body);
  font-size: 18px;
  line-height: 1.55;

  box-shadow: 0 10px 24px rgba(15, 36, 60, 0.16);
}

.srl-review-label {
  margin: 0 0 4px;
  color: var(--srl-color-primary);
  font-family: var(--srl-font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.srl-stars {
  margin: 0 0 8px;
  color: var(--srl-color-accent);
  font-size: 20px;
  line-height: 1;
  letter-spacing: 3px;
}

.srl-review-card blockquote {
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  color: var(--srl-color-text);
  font-family: var(--srl-font-body);
  font-size: 18px;
  font-style: italic;
  line-height: 1.55;
}

.srl-review-author {
  margin: 8px 0 0;
  color: var(--srl-color-primary);
  font-family: var(--srl-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}

.srl-hero a:focus-visible {
  outline: 3px solid var(--srl-color-accent-light);
  outline-offset: 3px;
}

/* Tablet */

@media (max-width: 1024px) {
  .srl-hero {
    min-height: auto;
    padding: 70px 22px 48px;
  }

  .srl-hero-inner {
    grid-template-columns: minmax(260px, 40%) minmax(360px, 1fr);
    gap: 30px;
  }

  .srl-hero-content {
    padding-top: 20px;
  }

  .srl-hero-content h1 {
    font-size: 42px;
  }

  .srl-hero-content .srl-h1-sub {
    font-size: 36px;
  }

  .srl-subtitle {
    font-size: 19px;
  }

  .srl-hero-book img {
    max-width: 360px;
  }
}

/* Mobile */

@media (max-width: 860px) {
  .srl-hero {
    padding: 50px 18px;
    background-position: center center;
  }

  .srl-hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

  .srl-hero-book img {
    max-width: 285px;
  }

  .srl-hero-content {
    max-width: 680px;
    margin: 0 auto;
    padding-top: 0;
  }

  .srl-hero-content h1 {
    font-size: 36px;
  }

  .srl-hero-content .srl-h1-sub {
    font-size: 32px;
  }

  .srl-subtitle {
    max-width: 620px;
    margin-right: auto;
    margin-left: auto;
    font-size: 18px;
  }

  .srl-buttons {
    justify-content: center;
  }

  .srl-review-card {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
}

/* Small Mobile */

@media (max-width: 600px) {
  .srl-hero {
    padding: 46px 16px;
  }

  .srl-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .srl-hero .srl-btn-primary, .srl-hero .srl-btn-secondary{
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: 14px 24px;
    font-size: 17px;
  }

  .srl-review-card {
    padding: 17px 18px;
  }
}

/*Front Page: Section #2 - Meet Scott */

.srl-meet {
  background: #FBF8F2;
  padding: 70px 24px;
border-bottom: 0 solid rgba(216,178,74,.25);
}

.srl-meet-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 48% 52%;
  gap: 54px;
  align-items: center;
}

.srl-meet-image img {
  width: 100%;
  display: block;
  border-radius: 4px;
  box-shadow: 0 18px 42px rgba(23,54,93,.16);
}

.srl-meet-content {
  max-width: 560px;
}

.srl-section-kicker {
  margin: 0 0 4px;
  color: var(--srl-color-primary);
  font-family: var(--srl-font-heading);
  font-size: 22px;
  line-height: 1;
}

.srl-meet-content h2 {
  margin: 0 0 18px;
  color: #17365d;
  font-family: var(--srl-font-heading);
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1.08;
  font-weight: 700;
}

.srl-meet-content p {
  margin: 0 0 16px;
  color: var(--srl-color-text);
  font-size: 18px;
  line-height: 1.7;
}

.srl-meet-content .srl-btn {
  margin-top: 10px;
}

/* Tablet */

@media (max-width: 1024px) {
  .srl-meet {
    padding: 60px 22px;
  }

  .srl-meet-inner {
    grid-template-columns: 45% 55%;
    gap: 36px;
  }

  .srl-meet-content p {
    font-size: 17px;
    line-height: 1.6;
  }
}

/* Mobile */

@media (max-width: 760px) {
  .srl-meet {
    padding: 48px 20px;
  }

  .srl-meet-inner {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }

  .srl-meet-content {
    max-width: 100%;
  }

  .srl-meet-content p {
    font-size: 17px;
	  	  text-align: left;
  }

  
}

/*Front Page: Section #3 -  SCOTT IN THE NEWS */


/* ==========================================
   SCOTT IN THE NEWS - HOMEPAGE
========================================== */

.srl-news-feature {
  width: 100%;
}

.srl-news-feature .srl-meet-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(30px, 5vw, 70px);
}

.srl-news-feature .srl-meet-image {
  width: 100%;
  min-width: 0;
}

.srl-news-feature .srl-meet-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.srl-news-feature .srl-meet-content {
  min-width: 0;
}

.srl-news-feature .srl-meet-content h2 {
  overflow-wrap: break-word;
}

.srl-news-feature .srl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  min-height: 48px;
  padding: 12px 28px;
  box-sizing: border-box;
  text-align: center;
  white-space: normal;
}

/* TABLET: 768px - 1024px */

@media (min-width: 768px) and (max-width: 1024px) {

  .srl-news-feature .srl-meet-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
  }

  .srl-news-feature .srl-meet-image img {
    width: 100%;
    height: auto;
  }

}

/* MOBILE: UP TO 767px */

@media (max-width: 767px) {

  .srl-news-feature .srl-meet-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 25px;
  }

  .srl-news-feature .srl-meet-image,
  .srl-news-feature .srl-meet-content {
    width: 100%;
    max-width: 100%;
  }

  .srl-news-feature .srl-meet-image {
    order: 1;
  }

  .srl-news-feature .srl-meet-content {
    order: 2;
  }

  .srl-news-feature .srl-meet-image img {
    width: 100%;
    height: auto;
  }

  .srl-news-feature .srl-btn {
    max-width: 100%;
  }

}




/* ==========================================================
   FRONT PAGE MUSIC LESSONS SECTION
   Desktop/Tablet: Copy Left | Image Right
   Mobile: Image First | Copy Second
========================================================== */

/* Desktop and tablet */
.srl-meet-reverse .srl-meet-content {
  order: 1;
}

.srl-meet-reverse .srl-meet-image {
  order: 2;
}

/* Mobile */
@media (max-width: 860px) {

  .srl-meet-reverse .srl-meet-image {
    order: 1;
  }

  .srl-meet-reverse .srl-meet-content {
    order: 2;
  }
}



/* ==========================================
   Front - SECTION GRID LAYOUT FIX
========================================== */

/* BOTH SECTIONS: MATCH IMAGE DIMENSIONS */

.srl-news-feature .srl-meet-image img,
.srl-music-lessons .srl-meet-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

/* DESKTOP & TABLET */

@media (min-width: 768px) {

  /* Music Lessons: Image LEFT, Text RIGHT */

  .srl-music-lessons .srl-meet-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(28px, 5vw, 70px);
  }

  .srl-music-lessons .srl-meet-image {
    grid-column: 1;
    grid-row: 1;
  }

  .srl-music-lessons .srl-meet-content {
    grid-column: 2;
    grid-row: 1;
  }

  /* Scott in the News: Text LEFT, Image RIGHT */

  .srl-news-feature .srl-meet-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(28px, 5vw, 70px);
  }

  .srl-news-feature .srl-meet-content {
    grid-column: 1;
    grid-row: 1;
  }

  .srl-news-feature .srl-meet-image {
    grid-column: 2;
    grid-row: 1;
  }

}

/* MOBILE: IMAGE ABOVE TEXT */

@media (max-width: 767px) {

  .srl-news-feature .srl-meet-inner,
  .srl-music-lessons .srl-meet-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 25px;
  }

  .srl-news-feature .srl-meet-image,
  .srl-music-lessons .srl-meet-image {
    order: 1;
    width: 100%;
  }

  .srl-news-feature .srl-meet-content,
  .srl-music-lessons .srl-meet-content {
    order: 2;
    width: 100%;
  }

}




/* ======================================
   Meet Scott Page
====================================== */

/*Meet Scott Page - Hero Section*/
.srl-meet-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            ellipse at center,
            rgba(0,0,0,0) 45%,
            rgba(0,0,0,.10) 100%
        ),
        linear-gradient(
            112deg,
            rgba(9,22,42,.82) 0%,
            rgba(16,35,61,.68) 28%,
            rgba(20,43,72,.42) 52%,
            rgba(23,54,93,.18) 72%,
            rgba(23,54,93,0) 100%
        );
}


.srl-meet-hero {
  background-image: url("https://scottrlindberg.com/wp-content/uploads/2026/07/Scott-Randall-Lindberg-Meet-Scott.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 650px;
  display: flex;
  align-items: center;
}

.srl-meet-hero .srl-hero-inner {
  display: block;
  width: 100%;
}

.srl-meet-hero .srl-hero-content {
  max-width: 650px;
  padding-top: 70px;
  padding-bottom: 80px;
}

.srl-meet-hero .srl-buttons {
  margin-top: 26px;
}

.srl-meet-hero .srl-btn-primary {
  background: #17365d;
  color: var(--srl-color-white);
}

/* Tablet */

@media (max-width: 1024px) {
  .srl-meet-hero {
    min-height: 580px;
    background-position: center center;
  }

  .srl-meet-hero .srl-hero-content {
    max-width: 600px;
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/* Mobile */

@media (max-width: 768px) {
  .srl-meet-hero {
    min-height: 560px;
    padding: 70px 22px 50px;
    background-position: center center;
  }

  .srl-meet-hero .srl-hero-content {
    max-width: 100%;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .srl-meet-hero .srl-buttons {
    justify-content: center;
  }

  .srl-meet-hero .srl-btn {
  width: 100%;
  max-width: 260px;
}
}

/* ======================================
   Meet Scott Page: Section 2
====================================== */

.srl-meet-page-intro {
  background: var(--srl-color-bg);
}

.srl-meet-page-intro .srl-meet-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  gap: 54px;
  align-items: center;
}

.srl-meet-page-intro .srl-meet-image img {
  width: 100%;
  height: auto;
  display: block;
}

.srl-meet-page-intro .srl-buttons {
  margin-top: 22px;
}

/* Tablet */
@media (max-width: 1024px) {
  .srl-meet-page-intro .srl-meet-inner {
    grid-template-columns: 1fr;
    gap: 34px;
    text-align: center;
  }

  .srl-meet-page-intro .srl-meet-content {
    max-width: 760px;
    margin: 0 auto;
	  text-align: left;
  }

  .srl-meet-page-intro .srl-buttons {
    justify-content: center;
  }

  .srl-meet-page-intro .srl-meet-image {
    max-width: 760px;
    margin: 0 auto;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .srl-meet-page-intro {
    padding: 46px 20px;
  }

  .srl-meet-page-intro .srl-meet-content h2 {
    font-size: 34px;
  }

  .srl-meet-page-intro .srl-meet-content p {
    font-size: 17px;
    line-height: 1.6;
	  text-align: left;
  }

  .srl-meet-page-intro .srl-buttons {
    flex-direction: column;
    align-items: center;
  }

  .srl-meet-page-intro .srl-btn {
  width: 100%;
  max-width: 260px;
}
}


/* ======================================
   Meet Scott Page: Section 3
====================================== */

.srl-meet-creative-roles {
  background: var(--srl-color-bg);
  padding: 10px 24px 70px;
}

.srl-creative-roles-inner {
  max-width: 1180px;
  margin: 0 auto;
  background: #fffaf0;
  border: 1px solid rgba(216,166,41,.35);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.srl-creative-role {
  padding: 42px 32px;
  text-align: center;
  position: relative;
}

.srl-creative-role:not(:last-child) {
  border-right: 2px dotted var(--srl-color-accent);
}

.srl-role-icon {
  color: var(--srl-color-accent);
  font-size: 42px;
  line-height: 1;
  margin-bottom: 18px;
}

.srl-role-icon i {
  color: var(--srl-color-accent);
}

.srl-creative-role h3 {
  margin: 0 0 16px;
  color: var(--srl-color-primary);
  font-family: var(--srl-font-heading);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
}

.srl-creative-role p {
  margin: 0;
  color: var(--srl-color-text);
  font-size: 16px;
  line-height: 1.6;
}

/* Tablet */

@media (max-width: 1024px) {
  .srl-creative-roles-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .srl-creative-role:nth-child(2) {
    border-right: none;
  }

  .srl-creative-role:nth-child(1),
  .srl-creative-role:nth-child(2) {
    border-bottom: 2px dotted var(--srl-color-accent);
  }
}

/* Mobile */

@media (max-width: 640px) {
  .srl-meet-creative-roles {
    padding: 0 20px 50px;
  }

  .srl-creative-roles-inner {
    grid-template-columns: 1fr;
    gap: 18px;
    background: transparent;
    border: none;
  }

  .srl-creative-role {
    padding: 34px 24px;
    background: #fffaf0;
    border: 2px dotted var(--srl-color-accent) !important;
  }

  .srl-creative-role:not(:last-child) {
    border-right: 2px dotted var(--srl-color-accent) !important;
    border-bottom: 2px dotted var(--srl-color-accent) !important;
  }

  .srl-creative-role h3 {
    font-size: 26px;
  }

  .srl-creative-role p {
    text-align: center;
  }
}

/* ======================================
   Meet Scott Page: Section 4
====================================== */

.srl-author-stories {
  background: var(--srl-color-bg);
  padding: 0 24px;
  margin: 0;
}

.srl-author-stories-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 42% 58%;
  gap: 48px;
  align-items: center;
}

.srl-author-content h2 {
  margin: 0 0 18px;
  color: #17365d;
  font-family: var(--srl-font-heading);
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1.08;
  font-weight: 700;
}

.srl-author-content p {
  margin: 0 0 16px;
  color: var(--srl-color-text);
  font-size: 18px;
  line-height: 1.7;
}

.srl-gold-divider {
  position: relative;

  width: 100%;
  max-width: 100%;
  height: 1px;
  margin: 0 0 28px;

  background: #FFD76A !important;
  color: #FFD76A !important;
}

.srl-gold-divider::after {
  content: "★";

  position: absolute;
  top: 50%;
  left: 50%;

  padding: 0 10px;

  background: var(--srl-color-bg);
  color: #FFD76A !important;

  font-family: var(--srl-font-body);
  font-size: 20px;
  line-height: 1;

  transform: translate(-50%, -50%);
}

.srl-books-display {
  position: relative;
  padding: 0 20px 42px;
  text-align: center;
}

.srl-books-row {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 42px;
}

.srl-book-item {
  text-align: center;
}

.srl-book-cover {
  height: 325px;
  width: auto !important;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  position: relative;
  top: -48px;
  /*background: #fff;*/
  border-radius: 4px 8px 8px 4px;
  /*border-left: 7px solid #d7d7d7;*/
  /*box-shadow: 6px 10px 16px rgba(0,0,0,.18);*/
  filter: contrast(1.05) saturate(1.03);
}

.srl-lullaby-cover {
  max-width: 245px;
  transform: perspective(900px) rotateY(-4deg);
}

.srl-heart-cover {
  max-width: 150px !important;
  transform: perspective(900px) rotateY(4deg);
}

.srl-book-item h3 {
  margin: 38px 0 12px;
  color: var(--srl-color-primary);
  font-family: var(--srl-font-heading);
  font-size: 23px;
  line-height: 1.2;
}

.srl-book-btn {
  width: 185px;
}

.srl-book-shelf {
  position: absolute;
  left: 50%;
  bottom: 118px;
  transform: translateX(-50%);
  z-index: 1;
  width: 100%;
  max-width: 690px;
  height: auto;
}

.srl-mobile-book-summary {
  display: none;
}

/* Tablet */

@media (max-width: 1024px) {
  .srl-author-stories-inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .srl-author-content {
    max-width: 760px;
    margin: 0 auto;
    text-align: left;
  }

  .srl-author-content h2,
  .srl-gold-divider {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .srl-books-display {
    max-width: 760px;
    margin: 0 auto;
  }
}

/* Mobile */

@media (max-width: 640px) {
  .srl-author-stories {
    padding: 0 20px;
  }

  .srl-author-content h2 {
    font-size: 34px;
    text-align: center;
  }

  .srl-author-content p {
    font-size: 17px;
    line-height: 1.6;
    text-align: left;
  }

  .srl-books-row {
    flex-direction: column;
    align-items: center;
    gap: 42px;
  }

  .srl-book-shelf {
    display: none;
  }

  .srl-books-display {
    padding-bottom: 0;
  }

  .srl-book-cover {
    top: 0;
    height: auto;
    max-height: 320px;
  }

  .srl-lullaby-cover {
    max-width: 220px;
  }

  .srl-heart-cover {
    max-width: 135px !important;
  }

  .srl-book-item h3 {
    margin: 0 0 14px;
  }
	
	
@media (max-width:640px){

    .srl-book-btn{
  margin-top: 28px;
}

}

  .srl-mobile-book-summary {
    display: block;
    margin: 0 auto 18px;
    max-width: 340px;
    color: var(--srl-color-text);
    font-size: 17px;
    line-height: 1.6;
    text-align: left;
  }

  .srl-book-btn {
  width: 220px;
}
}

/* Hide duplicate book summaries on mobile */

@media (max-width:640px){

    .srl-author-content p:nth-of-type(2),
    .srl-author-content p:nth-of-type(3){
        display:none;
    }

}

/* ======================================
   Meet Scott Page : Section 5
====================================== */

.srl-yellow-springs{
    background:var(--srl-color-bg);
    padding:0 24px 70px;
    margin:0;
}

.srl-yellow-inner{

    max-width:1180px;
    margin:0 auto;

    display:grid;
    grid-template-columns:42% 58%;
    gap:58px;
    align-items:center;

}

.srl-yellow-photo{

    position:relative;
    padding:22px;

}

/* Background duplicate image */

.srl-yellow-photo::before{

    content:"";

    position:absolute;

    left:46px;
    top:34px;

    width:100%;
    height:100%;

    background-image:url("https://scottrlindberg.com/wp-content/uploads/2026/07/Yellow-Springs-Ohio-Meet-Scott.jpg");
    background-size:cover;
    background-position:center;

    border:10px solid var(--srl-color-white);

    box-shadow:0 16px 34px rgba(0,0,0,.10);

    transform:rotate(6deg);

    z-index:1;

}

.srl-yellow-photo img{

    position:relative;
    z-index:2;

    display:block;

    width:100%;

    border:10px solid var(--srl-color-white);

    box-shadow:0 18px 42px rgba(23,54,93,.16);

    transform:rotate(-4deg);

}

.srl-yellow-content h2{

    margin:0 0 18px;

    color:var(--srl-color-primary);

    font-family:var(--srl-font-heading);

    font-size:clamp(34px,4vw,46px);

    line-height:1.08;

    font-weight:700;

}

.srl-yellow-content p{

    margin:0 0 18px;

    color:var(--srl-color-text);

    font-size:18px;

    line-height:1.7;

}

.srl-yellow-content .srl-buttons{

    margin-top:24px;

}

/* Tablet */

@media (max-width:1024px){

.srl-yellow-inner{

grid-template-columns:1fr;

gap:40px;

}

.srl-yellow-photo{

max-width:720px;

margin:0 auto;

}

.srl-yellow-content{

max-width:760px;

margin:0 auto;

}

.srl-yellow-content h2{

text-align:center;

}

.srl-yellow-content .srl-gold-divider{

margin-left:auto;
margin-right:auto;

}

.srl-yellow-content .srl-buttons{

justify-content:center;

}

}

/* Mobile */

@media (max-width:640px){

.srl-yellow-springs{

padding:50px 20px 50px;

}

.srl-yellow-photo{

padding:10px;

}

.srl-yellow-photo::before{

left:20px;
top:18px;

border-width:8px;

}

.srl-yellow-photo img{

border-width:8px;

}

.srl-yellow-content h2{

font-size:34px;

text-align:center;

}

.srl-yellow-content p{

font-size:17px;

line-height:1.6;

text-align:left;

}

.srl-yellow-content .srl-buttons{

flex-direction:column;

align-items:center;

}

.srl-yellow-content .srl-btn{
  width: 100%;
  max-width: 250px;
}

}

/* Remove duplicate back image */
.srl-yellow-photo::before {
    display: none;
}

/* Keep only main image */
.srl-yellow-photo img {
    transform: rotate(-4deg);
}

/* Make gold divider full width of headline/content area */
.srl-yellow-content .srl-gold-divider {
    max-width: 100%;
    width: 100%;
}

/* Mobile only: center button text */
@media (max-width: 640px) {
    
}

/* =========================================================
   MEET SCOTT – CREATIVE ROLE ICONS
========================================================= */

.srl-creative-role .srl-role-icon,
.srl-creative-role .fa-music,
.srl-creative-role .fa-graduation-cap,
.srl-creative-role .fa-paintbrush,
.srl-creative-role .fa-book-open,
.srl-creative-role i {
    color: #FFD76A !important;
    fill: #FFD76A !important;
}


/* =========================================================
   MUSIC LESSONS PAGE: HERO SECTION
========================================================= */

.srl-music-lessons-hero {
  position: relative;
  min-height: 570px;
  overflow: hidden;

  background-image:
    url("https://scottrlindberg.com/wp-content/uploads/2026/07/Music-Lessons-By-Scott-Randall-Lindberg.jpg");

  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;

  padding: 64px 24px 38px;

  display: flex;
  align-items: center;

  border-bottom: 1px solid rgba(216, 178, 74, 0.25);
}

/* =========================================================
   BACKGROUND OVERLAY
========================================================= */

.srl-music-lessons-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(10, 31, 55, 0.96) 0%,
      rgba(12, 40, 69, 0.91) 26%,
      rgba(15, 47, 79, 0.71) 46%,
      rgba(15, 47, 79, 0.36) 64%,
      rgba(15, 47, 79, 0.08) 82%,
      rgba(15, 47, 79, 0.01) 100%
    );
}

/* =========================================================
   INNER CONTAINER
   Matches the Meet Scott page alignment
========================================================= */

.srl-music-lessons-hero .srl-hero-inner {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1180px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: minmax(300px, 46%) minmax(420px, 1fr);
  gap: 18px;
  align-items: center;
}

/* No negative margin.
   This places the copy at the same left alignment as Meet Scott. */

.srl-music-lessons-hero .srl-hero-content {
  width: 100%;
  max-width: 620px;
  margin: 0;
  padding-top: 0;
}

/* =========================================================
   HEADING
========================================================= */

.srl-music-lessons-hero .srl-hero-content h1 {
  max-width: 610px;
  margin: 0 0 14px;

  color: var(--srl-color-white);
  font-family: var(--srl-font-heading);
  font-size: clamp(40px, 4vw, 58px);
  font-weight: 700;
  line-height: 1.04;

  text-shadow:
    0 3px 8px rgba(0, 0, 0, 0.55),
    0 8px 24px rgba(0, 0, 0, 0.45);
}

/* =========================================================
   HERO COPY
========================================================= */

.srl-music-lessons-hero .srl-subtitle {
  max-width: 550px;
  margin: 0 0 15px;

  color: #f8f5ee;
  font-size: 17px;
  line-height: 1.45;

  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.55),
    0 6px 18px rgba(0, 0, 0, 0.40);
}

.srl-music-lessons-hero .srl-music-lessons-lead {
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 500;
}

.srl-music-lessons-highlight {
  max-width: 550px;
  margin: 0 0 15px;

  color: var(--srl-color-accent-light);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;

  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.55),
    0 6px 18px rgba(0, 0, 0, 0.40);
}

/* =========================================================
   BUTTONS
========================================================= */

.srl-music-lessons-hero .srl-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  margin-top: 21px;
  margin-bottom: 0;
}


/* Contact Scott Button */

.srl-music-lessons-hero .srl-btn-secondary,
.srl-music-lessons-hero .srl-btn-secondary:visited {
  color: var(--srl-color-white);
  background: var(--srl-color-accent);
  border-color: var(--srl-color-accent);
}

.srl-music-lessons-hero .srl-btn-secondary:hover,
.srl-music-lessons-hero .srl-btn-secondary:focus {
  color: var(--srl-color-primary);
  background: var(--srl-color-white);
  border-color: var(--srl-color-white);
  opacity: 1;
  transform: translateY(-2px);
}

/* Upcoming Events Button */

.srl-music-lessons-hero .srl-btn-primary,
.srl-music-lessons-hero .srl-btn-primary:visited {
  color: var(--srl-color-white);
  background: rgba(23, 54, 93, 0.76);
  border-color: rgba(255, 255, 255, 0.82);
}

.srl-music-lessons-hero .srl-btn-primary:hover,
.srl-music-lessons-hero .srl-btn-primary:focus {
  color: var(--srl-color-primary);
  background: var(--srl-color-white);
  border-color: var(--srl-color-white);
  opacity: 1;
  transform: translateY(-2px);
}

/* =========================================================
   FEATURE ROW
========================================================= */

.srl-music-lessons-features {
  width: 100%;
  max-width: 590px;

  margin-top: 24px;
  padding-top: 18px;

  border-top: 1px solid rgba(255, 255, 255, 0.28);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 24px;
}

.srl-music-lessons-feature {
  position: relative;

  min-height: 39px;

  display: flex;
  align-items: center;
  gap: 9px;

  color: var(--srl-color-white);
}

.srl-music-lessons-feature:not(:last-child)::after {
  content: "";

  width: 1px;
  height: 37px;
  margin-left: 14px;

  background: rgba(255, 255, 255, 0.25);
}

.srl-music-lessons-feature i {
  min-width: 25px;

  color: var(--srl-color-accent-light);
  font-size: 21px;
  line-height: 1;
  text-align: center;
}

.srl-music-lessons-feature span {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;

  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.50);
}

/* =========================================================
   SMALLER DESKTOP / LAPTOP
========================================================= */

@media (max-width: 1280px) and (min-width: 1101px) {

  .srl-music-lessons-hero {
    min-height: 550px;
    padding-top: 58px;
    padding-bottom: 34px;

    background-position: 57% center;
  }

  .srl-music-lessons-hero .srl-hero-inner {
    max-width: 1100px;
    grid-template-columns: minmax(300px, 48%) 1fr;
  }

  .srl-music-lessons-hero .srl-hero-content {
    max-width: 570px;
  }

  .srl-music-lessons-hero .srl-hero-content h1 {
    max-width: 560px;
    font-size: clamp(39px, 4vw, 54px);
  }

  .srl-music-lessons-hero .srl-subtitle,
  .srl-music-lessons-highlight {
    max-width: 525px;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) and (min-width: 861px) {

  .srl-music-lessons-hero {
    min-height: 530px;
    padding: 52px 24px 30px;

    background-position: 63% center;
  }

  .srl-music-lessons-hero::before {
    background:
      linear-gradient(
        90deg,
        rgba(10, 31, 55, 0.97) 0%,
        rgba(12, 40, 69, 0.93) 31%,
        rgba(15, 47, 79, 0.69) 55%,
        rgba(15, 47, 79, 0.24) 81%,
        rgba(15, 47, 79, 0.03) 100%
      );
  }

  .srl-music-lessons-hero .srl-hero-inner {
    max-width: 960px;

    grid-template-columns: minmax(0, 500px) 1fr;
    gap: 18px;

    text-align: left;
  }

  .srl-music-lessons-hero .srl-hero-content {
    max-width: 500px;
    margin: 0;
    padding-top: 0;
  }

  .srl-music-lessons-hero .srl-hero-content h1 {
    max-width: 500px;
    margin-left: 0;
    margin-right: 0;

    font-size: clamp(36px, 4.7vw, 49px);
  }

  .srl-music-lessons-hero .srl-subtitle,
  .srl-music-lessons-highlight {
    max-width: 480px;
    margin-left: 0;
    margin-right: 0;

    font-size: 16px;
  }

  .srl-music-lessons-hero .srl-music-lessons-lead {
    font-size: 17px;
  }

  .srl-music-lessons-hero .srl-buttons {
    justify-content: flex-start;
    margin-top: 18px;
  }

  .srl-music-lessons-features {
    max-width: 500px;
    margin-top: 20px;
    padding-top: 15px;
    gap: 14px 18px;
  }

  .srl-music-lessons-feature {
    gap: 7px;
  }

  .srl-music-lessons-feature:not(:last-child)::after {
    display: none;
  }

  .srl-music-lessons-feature i {
    font-size: 19px;
  }

  .srl-music-lessons-feature span {
    font-size: 11px;
  }
}

/* =========================================================
   MOBILE / SMALL TABLET
========================================================= */

@media (max-width: 860px) {

  .srl-music-lessons-hero {
    min-height: auto;

    /* Reduced top spacing moves the copy and buttons upward */
    padding: 245px 20px 44px;

    align-items: flex-end;

    /* Moves the visible background image upward */
    background-position: 73% 12%;
  }

  .srl-music-lessons-hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(10, 31, 55, 0.08) 0%,
        rgba(10, 31, 55, 0.18) 18%,
        rgba(10, 31, 55, 0.55) 36%,
        rgba(10, 31, 55, 0.88) 55%,
        rgba(10, 31, 55, 0.97) 75%,
        rgba(10, 31, 55, 0.99) 100%
      );
  }

  .srl-music-lessons-hero .srl-hero-inner {
    display: block;
    max-width: 100%;
    text-align: center;
  }

  .srl-music-lessons-hero .srl-hero-content {
    max-width: 680px;
    margin: 0 auto;
    padding-top: 0;
    transform: translateY(-12px);
  }

  .srl-music-lessons-hero .srl-hero-content h1 {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;

    font-size: clamp(38px, 8.5vw, 52px);
    line-height: 1.06;
  }

  .srl-music-lessons-hero .srl-subtitle,
  .srl-music-lessons-highlight {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }

  .srl-music-lessons-hero .srl-buttons {
    justify-content: center;
    margin-top: 18px;
  }

  .srl-music-lessons-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;

    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }

  .srl-music-lessons-feature {
    min-width: 0;

    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;

    text-align: center;
  }

  .srl-music-lessons-feature:not(:last-child)::after {
    display: none;
  }

  .srl-music-lessons-feature i {
    min-width: 0;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .srl-music-lessons-hero {
    /* Moves the entire copy area higher */
    padding: 205px 18px 38px;

    /* Raises the background image within the hero */
    background-position: 75% 8%;
  }

  .srl-music-lessons-hero .srl-hero-content {
    transform: translateY(-14px);
  }

  .srl-music-lessons-hero .srl-hero-content h1 {
    font-size: clamp(35px, 10.5vw, 47px);
  }

  .srl-music-lessons-hero .srl-subtitle,
  .srl-music-lessons-highlight {
    font-size: 16px;
    line-height: 1.5;
  }

  .srl-music-lessons-hero .srl-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;

    margin-top: 16px;
  }

  .srl-music-lessons-hero .srl-btn {
  width: 100%;
}

  .srl-music-lessons-features {
    gap: 10px;
    padding-top: 18px;
  }

  .srl-music-lessons-feature i {
    font-size: 21px;
  }

  .srl-music-lessons-feature span {
    font-size: 11px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .srl-music-lessons-hero {
    padding-top: 180px;
    background-position: 76% 5%;
  }

  .srl-music-lessons-hero .srl-hero-content {
    transform: translateY(-16px);
  }

  .srl-music-lessons-hero .srl-buttons {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  

  .srl-music-lessons-features {
    padding-top: 16px;
  }

  .srl-music-lessons-feature span {
    font-size: 10px;
  }
}


/* =========================================================
   MUSIC LESSONS PAGE: SECTION #2
   MUSIC LESSONS AVAILABLE
========================================================= */

.srl-music-types-section {
  position: relative;
  width: 100%;
  padding: 62px 24px 68px;
  overflow: hidden;

  background: var(--srl-color-bg);
  border-bottom: 1px solid rgba(216, 166, 41, 0.22);
}

.srl-music-types-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

/* =========================================================
   SECTION HEADING
========================================================= */

.srl-music-types-heading {
  margin-bottom: 34px;
  text-align: center;
}

.srl-music-types-heading h2 {
  margin: 0;

  color: var(--srl-color-primary);
  font-family: var(--srl-font-heading);
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1.12;
}

.srl-music-types-divider {
  width: 100%;
  max-width: 350px;
  margin: 14px auto 0;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  color: var(--srl-color-accent);
}

.srl-music-types-divider span {
  width: 100%;
  height: 1px;
  background: rgba(216, 166, 41, 0.68);
}

.srl-music-types-divider i {
  flex: 0 0 auto;
  font-size: 14px;
}

/* =========================================================
   LESSON CARDS
========================================================= */

.srl-music-types-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

.srl-music-type-card {
  min-height: 178px;
  padding: 25px 14px 22px;

  background: var(--srl-color-white);
  border: 1px solid rgba(23, 54, 93, 0.10);
  border-radius: 7px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  box-shadow:
    0 8px 20px rgba(23, 54, 93, 0.06);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.srl-music-type-card:hover {
  transform: translateY(-5px);

  border-color: rgba(216, 166, 41, 0.50);

  box-shadow:
    0 13px 27px rgba(23, 54, 93, 0.12);
}

.srl-music-type-icon {
  width: 76px;
  height: 76px;
  margin-bottom: 17px;

  border: 1px solid rgba(216, 166, 41, 0.32);
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--srl-color-accent);
  background: var(--srl-color-bg);

  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.srl-music-type-card:hover .srl-music-type-icon {
  color: var(--srl-color-white);
  background: var(--srl-color-accent);
  border-color: var(--srl-color-accent);
}

.srl-music-type-icon i {
  font-size: 34px;
  line-height: 1;
}

.srl-music-type-card h3 {
  margin: 0;

  color: var(--srl-color-primary);
  font-family: var(--srl-font-heading);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .srl-music-types-section {
    padding: 54px 22px 58px;
  }

  .srl-music-types-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .srl-music-type-card {
    min-height: 170px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .srl-music-types-section {
    padding: 44px 18px 48px;
  }

  .srl-music-types-heading {
    margin-bottom: 27px;
  }

  .srl-music-types-heading h2 {
    font-size: clamp(30px, 8vw, 39px);
  }

  .srl-music-types-divider {
    max-width: 270px;
    margin-top: 12px;
  }

  .srl-music-types-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
  }

  .srl-music-type-card {
    min-height: 146px;
    padding: 20px 10px 18px;
  }

  .srl-music-type-icon {
    width: 62px;
    height: 62px;
    margin-bottom: 13px;
  }

  .srl-music-type-icon i {
    font-size: 27px;
  }

  .srl-music-type-card h3 {
    font-size: 18px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

  .srl-music-types-grid {
    gap: 10px;
  }

  .srl-music-type-card {
    min-height: 136px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .srl-music-type-icon {
    width: 56px;
    height: 56px;
  }

  .srl-music-type-icon i {
    font-size: 24px;
  }

  .srl-music-type-card h3 {
    font-size: 17px;
  }
}

/* =========================================================
   CUSTOM PIANO KEYBOARD SVG
========================================================= */

.srl-music-type-icon--piano {
  color: var(--srl-color-accent);
}

.srl-piano-keyboard-svg {
  display: block;
  width: 48px;
  height: auto;
  overflow: visible;
}

/* Keep the SVG visible when the card icon circle changes
   to gold on hover. */

.srl-music-type-card:hover .srl-music-type-icon--piano {
  color: var(--srl-color-white);
}

.srl-music-type-card:hover .srl-piano-keyboard-svg {
  color: var(--srl-color-white);
}

/* Tablet */

@media (max-width: 1100px) {

  .srl-piano-keyboard-svg {
    width: 46px;
  }
}

/* Mobile */

@media (max-width: 767px) {

  .srl-piano-keyboard-svg {
    width: 39px;
  }
}

/* Small Mobile */

@media (max-width: 400px) {

  .srl-piano-keyboard-svg {
    width: 35px;
  }
}


/* =========================================================
   SECTION #3 – MORE THAN MUSIC LESSONS
========================================================= */


.srl-music-about-section {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    overflow: hidden;
    background: var(--srl-color-bg);
    box-shadow: none;
}

/*
Removes a possible line or spacing created between
Section #2 and Section #3.
*/

.srl-music-types-section + .srl-music-about-section,
.srl-music-lessons-section + .srl-music-about-section {
    margin-top: 0;
    border-top: 0;
}

.srl-music-about-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    max-width: none;
    min-height: 540px;
    margin: 0;
    padding: 0;
    gap: 0;
    border: 0;
}

/* =========================================================
   IMAGE – FULL LEFT COLUMN
========================================================= */

.srl-music-about-image {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 540px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--srl-color-bg);
}

.srl-music-about-image img {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    object-position: center center;
    box-shadow: none;
}

/*
Right-edge gradient blend.

The image remains fully visible across most of the left column.
Only the right side blends into the cream content background.
*/

.srl-music-about-image::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    right: -1px;
    bottom: 0;
    width: clamp(90px, 12vw, 190px);
    pointer-events: none;
    background: linear-gradient(
        to right,
        rgba(251, 248, 242, 0) 0%,
        rgba(251, 248, 242, 0.08) 22%,
        rgba(251, 248, 242, 0.32) 52%,
        rgba(251, 248, 242, 0.72) 78%,
        var(--srl-color-bg) 100%
    );
}

/* =========================================================
   CONTENT
========================================================= */

.srl-music-about-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-width: 0;
    min-height: 540px;
    margin: 0;
    padding: 55px clamp(42px, 5vw, 82px);
    color: var(--srl-color-text);
    background: var(--srl-color-bg);
}

.srl-music-about-eyebrow {
    margin: 0 0 10px;
    color: var(--srl-color-primary);
    font-family: var(--srl-font-heading);
    font-size: 1.12rem;
    line-height: 1.4;
}

/* =========================================================
   HEADING
========================================================= */

.srl-music-about-heading {
    display: table;
    width: auto;
    max-width: 100%;
    margin: 0 0 23px;
}

.srl-music-about-heading h2,
.srl-music-about-content h2 {
    margin: 0;
    padding: 0;
    color: var(--srl-color-primary);
    font-family: var(--srl-font-heading);
    font-size: clamp(2.15rem, 3.2vw, 3.15rem);
    font-weight: 700;
    line-height: 1.12;
}

/* =========================================================
   DIVIDER – FULL WIDTH OF HEADING
========================================================= */

.srl-music-about-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin: 17px 0 0;
    gap: 11px;
    color: var(--srl-color-accent);
}

.srl-music-about-divider-line,
.srl-music-about-divider span {
    display: block;
    flex: 1 1 auto;
    min-width: 20px;
    height: 2px;
    background: var(--srl-color-accent);
}

.srl-music-about-divider i {
    flex: 0 0 auto;
    color: var(--srl-color-accent);
    font-size: 13px;
    line-height: 1;
}

/* =========================================================
   COPY
========================================================= */

.srl-music-about-copy {
    width: 100%;
    max-width: 620px;
}

.srl-music-about-content p:not(.srl-music-about-eyebrow) {
    margin: 0 0 16px;
    font-size: 1.02rem;
    line-height: 1.65;
}

.srl-music-about-content p:last-of-type {
    margin-bottom: 24px;
}

/* =========================================================
   MEET SCOTT BUTTON
========================================================= */


/* =========================================================
   LAPTOP
========================================================= */

@media only screen and (min-width: 1025px) and (max-height: 850px) {

    .srl-music-about-inner,
    .srl-music-about-image,
    .srl-music-about-content {
        min-height: 500px;
    }

    .srl-music-about-content {
        padding-top: 42px;
        padding-bottom: 42px;
    }

    .srl-music-about-eyebrow {
        margin-bottom: 7px;
        font-size: 1.05rem;
    }

    .srl-music-about-heading {
        margin-bottom: 18px;
    }

    .srl-music-about-divider {
        margin-top: 14px;
    }

    .srl-music-about-content p:not(.srl-music-about-eyebrow) {
        margin-bottom: 13px;
        font-size: 0.98rem;
        line-height: 1.55;
    }

    .srl-music-about-content p:last-of-type {
        margin-bottom: 20px;
    }

}

/* =========================================================
   LARGE DESKTOP
========================================================= */

@media only screen and (min-width: 1500px) {

    .srl-music-about-inner,
    .srl-music-about-image,
    .srl-music-about-content {
        min-height: 570px;
    }

    .srl-music-about-content {
        padding-left: 82px;
        padding-right: max(82px, calc((100vw - 1440px) / 2));
    }

}

/* =========================================================
   TABLET
========================================================= */

@media only screen and (max-width: 1024px) {

    .srl-music-about-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        min-height: 500px;
    }

    .srl-music-about-image {
        min-height: 500px;
    }

    .srl-music-about-content {
        min-height: 500px;
        padding: 44px 36px;
    }

    .srl-music-about-image::after {
        width: 125px;
    }

    .srl-music-about-heading h2,
    .srl-music-about-content h2 {
        font-size: clamp(1.9rem, 3.8vw, 2.55rem);
    }

    .srl-music-about-content p:not(.srl-music-about-eyebrow) {
        margin-bottom: 14px;
        font-size: 0.96rem;
        line-height: 1.58;
    }

    .srl-music-about-content p:last-of-type {
        margin-bottom: 21px;
    }

}

/* =========================================================
   SMALL TABLET – STACKED LAYOUT
========================================================= */

@media only screen and (max-width: 850px) {

    .srl-music-about-inner {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .srl-music-about-image {
        order: 1;
        min-height: 440px;
    }

    /*
    The right-edge blend is removed when the image and
    content stack vertically.
    */

    .srl-music-about-image::after {
        display: none;
    }

    .srl-music-about-content {
        order: 2;
        width: 100%;
        max-width: none;
        min-height: 0;
        padding: 58px 40px 66px;
    }

    .srl-music-about-copy {
        max-width: 720px;
    }

}

/* =========================================================
   MOBILE
========================================================= */

@media only screen and (max-width: 767px) {

    .srl-music-about-image {
        position: relative;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .srl-music-about-image img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .srl-music-about-content {
        min-height: 0;
        padding: 50px 18px 60px;
    }

    .srl-music-about-eyebrow {
        margin-bottom: 8px;
        font-size: 1.05rem;
    }

    .srl-music-about-heading {
        margin-bottom: 22px;
    }

    .srl-music-about-heading h2,
    .srl-music-about-content h2 {
        font-size: clamp(2rem, 9vw, 2.55rem);
        line-height: 1.15;
    }

    .srl-music-about-divider {
        margin-top: 15px;
        gap: 10px;
    }

    .srl-music-about-divider i {
        font-size: 12px;
    }

    .srl-music-about-content p:not(.srl-music-about-eyebrow) {
        margin-bottom: 17px;
        font-size: 1rem;
        line-height: 1.65;
    }

    .srl-music-about-content p:last-of-type {
        margin-bottom: 25px;
    }

    

}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media only screen and (max-width: 420px) {

    .srl-music-about-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .srl-music-about-heading h2,
    .srl-music-about-content h2 {
        font-size: 2rem;
    }

    .srl-music-about-button {
  width: 100%;
}

}

/* =========================================================
   SECTION #4 – LESSON APPROACH
========================================================= */

.srl-music-approach-section {
    width: 100%;
    margin: 0;
    padding: 0;
    background:
        linear-gradient(
            90deg,
            #edf6fc 0%,
            #f5f9fc 50%,
            #edf6fc 100%
        );
}

.srl-music-approach-inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 46px 20px;
}

/* =========================================================
   INDIVIDUAL ITEMS
========================================================= */

.srl-music-approach-item {
    position: relative;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    min-width: 0;
    padding: 8px 38px;
}

/* Vertical divider lines */

.srl-music-approach-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: rgba(23, 54, 93, 0.22);
}

/* =========================================================
   ICONS
========================================================= */

.srl-music-approach-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--srl-color-primary);
    color: var(--srl-color-white);
    box-shadow: 0 8px 22px rgba(23, 54, 93, 0.14);
}

.srl-music-approach-icon i {
    font-size: 31px;
    line-height: 1;
}

/* Slightly larger heart icon */

.srl-music-approach-item:last-child .srl-music-approach-icon i {
    font-size: 34px;
}

/* =========================================================
   CONTENT
========================================================= */

.srl-music-approach-content {
    min-width: 0;
}

.srl-music-approach-content h3 {
    margin: 0 0 10px;
    color: var(--srl-color-primary);
    font-family: var(--srl-font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
}

.srl-music-approach-content p {
    margin: 0;
    color: var(--srl-color-text);
    font-size: 0.98rem;
    line-height: 1.62;
}

/* =========================================================
   DESKTOP HOVER EFFECT
========================================================= */

@media only screen and (min-width: 1025px) {

    .srl-music-approach-icon {
        transition:
            background-color 0.25s ease,
            color 0.25s ease,
            transform 0.25s ease,
            box-shadow 0.25s ease;
    }

    .srl-music-approach-item:hover .srl-music-approach-icon {
        background: var(--srl-color-accent);
        color: var(--srl-color-primary);
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(23, 54, 93, 0.18);
    }

}

/* =========================================================
   TABLET
========================================================= */

@media only screen and (max-width: 1024px) {

    .srl-music-approach-inner {
        padding: 42px 18px;
    }

    .srl-music-approach-item {
        grid-template-columns: 66px minmax(0, 1fr);
        gap: 16px;
        padding: 6px 24px;
    }

    .srl-music-approach-icon {
        width: 60px;
        height: 60px;
    }

    .srl-music-approach-icon i {
        font-size: 26px;
    }

    .srl-music-approach-item:last-child .srl-music-approach-icon i {
        font-size: 29px;
    }

    .srl-music-approach-content h3 {
        margin-bottom: 8px;
        font-size: 1.15rem;
    }

    .srl-music-approach-content p {
        font-size: 0.92rem;
        line-height: 1.55;
    }

}

/* =========================================================
   SMALL TABLET
========================================================= */

@media only screen and (max-width: 850px) {

    .srl-music-approach-inner {
        grid-template-columns: 1fr;
        max-width: 720px;
        padding: 45px 28px;
    }

    .srl-music-approach-item {
        grid-template-columns: 74px minmax(0, 1fr);
        gap: 20px;
        padding: 28px 0;
    }

    .srl-music-approach-item:first-child {
        padding-top: 0;
    }

    .srl-music-approach-item:last-child {
        padding-bottom: 0;
    }

    .srl-music-approach-item:not(:last-child)::after {
        top: auto;
        right: 0;
        bottom: 0;
        width: calc(100% - 94px);
        height: 1px;
    }

    .srl-music-approach-icon {
        width: 66px;
        height: 66px;
    }

    .srl-music-approach-icon i {
        font-size: 28px;
    }

    .srl-music-approach-content h3 {
        font-size: 1.25rem;
    }

    .srl-music-approach-content p {
        font-size: 0.98rem;
        line-height: 1.6;
    }

}

/* =========================================================
   MOBILE
========================================================= */

@media only screen and (max-width: 767px) {

    .srl-music-approach-inner {
        padding: 38px 18px;
    }

    .srl-music-approach-item {
        grid-template-columns: 62px minmax(0, 1fr);
        gap: 16px;
        padding: 24px 0;
    }

    .srl-music-approach-item:not(:last-child)::after {
        width: calc(100% - 78px);
    }

    .srl-music-approach-icon {
        width: 56px;
        height: 56px;
    }

    .srl-music-approach-icon i {
        font-size: 24px;
    }

    .srl-music-approach-item:last-child .srl-music-approach-icon i {
        font-size: 27px;
    }

    .srl-music-approach-content h3 {
        margin-bottom: 7px;
        font-size: 1.15rem;
    }

    .srl-music-approach-content p {
        font-size: 0.94rem;
        line-height: 1.58;
    }

}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media only screen and (max-width: 420px) {

    .srl-music-approach-inner {
        padding-left: 15px;
        padding-right: 15px;
    }

    .srl-music-approach-item {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 14px;
    }

    .srl-music-approach-icon {
        width: 50px;
        height: 50px;
    }

    .srl-music-approach-icon i {
        font-size: 21px;
    }

    .srl-music-approach-item:last-child .srl-music-approach-icon i {
        font-size: 24px;
    }

    .srl-music-approach-item:not(:last-child)::after {
        width: calc(100% - 68px);
    }

}

/* =========================================================
   SECTION #5 – WHAT YOU'LL LEARN
========================================================= */

.srl-music-learn-section {
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--srl-color-bg);
}

.srl-music-learn-inner {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 48px 20px;
}

/* =========================================================
   SECTION HEADING
========================================================= */

.srl-music-learn-heading {
    width: 100%;
    min-width: 0;
}

.srl-music-learn-heading h2 {
    margin: 0;
    color: var(--srl-color-primary);
    font-family: var(--srl-font-heading);
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.08;
}

/* =========================================================
   HEADING DIVIDER
========================================================= */

.srl-music-learn-divider {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 165px;
    margin: 18px 0 0;
    gap: 9px;
    color: var(--srl-color-accent);
}

.srl-music-learn-divider span {
    flex: 1;
    height: 2px;
    background: var(--srl-color-accent);
}

.srl-music-learn-divider i {
    flex: 0 0 auto;
    font-size: 12px;
    line-height: 1;
}

/* =========================================================
   TOPIC GRID
========================================================= */

.srl-music-learn-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
}

/* =========================================================
   INDIVIDUAL TOPICS
========================================================= */

.srl-music-learn-item {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    min-width: 0;
    min-height: 82px;
    padding: 14px 18px;
    border-right: 1px dotted rgba(23, 54, 93, 0.24);
    border-bottom: 1px dotted rgba(23, 54, 93, 0.24);
}

/* Remove the right border from every fourth item */

.srl-music-learn-item:nth-child(4n) {
    border-right: 0;
}

/* Remove bottom borders from the last row */

.srl-music-learn-item:nth-child(n + 5) {
    border-bottom: 0;
}

/* =========================================================
   ICONS
========================================================= */

.srl-music-learn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1.5px solid var(--srl-color-accent);
    border-radius: 50%;
    background: transparent;
    color: var(--srl-color-accent);
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.srl-music-learn-icon i {
    font-size: 21px;
    line-height: 1;
}

/* Stage microphone angle */

.srl-music-learn-icon .fa-microphone {
    transform: rotate(-15deg);
}

/* =========================================================
   TOPIC TITLES
========================================================= */

.srl-music-learn-item h3 {
    margin: 0;
    color: var(--srl-color-primary);
    font-family: var(--srl-font-heading);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

/* =========================================================
   DESKTOP HOVER EFFECT
========================================================= */

@media only screen and (min-width: 1025px) {

    .srl-music-learn-item:hover .srl-music-learn-icon {
        background: var(--srl-color-accent);
        color: var(--srl-color-white);
        transform: translateY(-2px);
        box-shadow: 0 7px 18px rgba(23, 54, 93, 0.14);
    }

    .srl-music-learn-item:hover .fa-microphone {
        transform: rotate(-15deg);
    }

}

/* =========================================================
   TABLET
========================================================= */

@media only screen and (max-width: 1024px) {

    .srl-music-learn-inner {
        grid-template-columns: 170px minmax(0, 1fr);
        gap: 28px;
        padding: 44px 22px;
    }

    .srl-music-learn-heading h2 {
        font-size: clamp(2rem, 4.5vw, 2.6rem);
    }

    .srl-music-learn-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .srl-music-learn-item {
        min-height: 74px;
        padding: 12px 16px;
    }

    .srl-music-learn-item:nth-child(4n) {
        border-right: 1px dotted rgba(23, 54, 93, 0.24);
    }

    .srl-music-learn-item:nth-child(2n) {
        border-right: 0;
    }

    .srl-music-learn-item:nth-child(n + 5) {
        border-bottom: 1px dotted rgba(23, 54, 93, 0.24);
    }

    .srl-music-learn-item:nth-child(n + 7) {
        border-bottom: 0;
    }

    .srl-music-learn-icon {
        width: 43px;
        height: 43px;
    }

    .srl-music-learn-icon i {
        font-size: 19px;
    }

    .srl-music-learn-item h3 {
        font-size: 0.96rem;
    }

}

/* =========================================================
   SMALL TABLET
========================================================= */

@media only screen and (max-width: 850px) {

    .srl-music-learn-inner {
        grid-template-columns: 1fr;
        gap: 30px;
        max-width: 720px;
        padding: 48px 28px;
    }

    .srl-music-learn-heading {
        text-align: center;
    }

    .srl-music-learn-heading h2 {
        font-size: 2.5rem;
        line-height: 1.12;
    }

    .srl-music-learn-heading h2 br {
        display: none;
    }

    .srl-music-learn-divider {
        max-width: 260px;
        margin-left: auto;
        margin-right: auto;
    }

}

/* =========================================================
   MOBILE
========================================================= */

@media only screen and (max-width: 767px) {

    .srl-music-learn-inner {
        gap: 26px;
        padding: 42px 18px 48px;
    }

    .srl-music-learn-heading h2 {
        font-size: clamp(2rem, 9vw, 2.45rem);
    }

    .srl-music-learn-divider {
        max-width: 230px;
        margin-top: 15px;
    }

    .srl-music-learn-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .srl-music-learn-item {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 10px;
        min-height: 76px;
        padding: 12px 10px;
    }

    .srl-music-learn-icon {
        width: 40px;
        height: 40px;
    }

    .srl-music-learn-icon i {
        font-size: 18px;
    }

    .srl-music-learn-item h3 {
        font-size: 0.9rem;
        line-height: 1.25;
    }

}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media only screen and (max-width: 420px) {

    .srl-music-learn-inner {
        padding-left: 15px;
        padding-right: 15px;
    }

    .srl-music-learn-grid {
        grid-template-columns: 1fr;
    }

    .srl-music-learn-item {
        grid-template-columns: 50px minmax(0, 1fr);
        min-height: 68px;
        padding: 12px 4px;
        border-right: 0;
        border-bottom: 1px dotted rgba(23, 54, 93, 0.24);
    }

    .srl-music-learn-item:nth-child(2n),
    .srl-music-learn-item:nth-child(4n) {
        border-right: 0;
    }

    .srl-music-learn-item:nth-child(n + 7) {
        border-bottom: 1px dotted rgba(23, 54, 93, 0.24);
    }

    .srl-music-learn-item:last-child {
        border-bottom: 0;
    }

    .srl-music-learn-icon {
        width: 44px;
        height: 44px;
    }

    .srl-music-learn-item h3 {
        font-size: 1rem;
    }

}

/* =========================================================
   SECTION #6 – MUSIC LESSONS INCLUDE
========================================================= */

.srl-music-includes-section {
    width: 100%;
    margin: 0;
    padding: 0;
    background:
        radial-gradient(
            circle at center top,
            rgba(36, 84, 128, 0.34) 0%,
            rgba(23, 54, 93, 0.1) 34%,
            rgba(6, 39, 70, 0) 65%
        ),
        linear-gradient(
            135deg,
            #082d50 0%,
            #0b365f 48%,
            #052746 100%
        );
    color: var(--srl-color-white);
}

.srl-music-includes-inner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 58px 20px 48px;
}

/* =========================================================
   SECTION HEADING
========================================================= */

.srl-music-includes-heading {
    display: table;
    max-width: 100%;
    margin: 0 auto 34px;
    text-align: center;
}

.srl-music-includes-heading h2 {
    margin: 0;
    color: var(--srl-color-white);
    font-family: var(--srl-font-heading);
    font-size: clamp(2.1rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
}

/* =========================================================
   HEADING DIVIDER
========================================================= */

.srl-music-includes-divider {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 18px 0 0;
    gap: 10px;
    color: var(--srl-color-accent);
}

.srl-music-includes-divider span {
    flex: 1;
    height: 2px;
    background: var(--srl-color-accent);
}

.srl-music-includes-divider i {
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 1;
}

/* =========================================================
   INFORMATION GRID
========================================================= */

.srl-music-includes-grid {
    display: grid;
    grid-template-columns:
        1fr
        1.15fr
        1fr;
}

/* =========================================================
   INFORMATION ITEMS
========================================================= */

.srl-music-includes-item {
    position: relative;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    min-width: 0;
    padding: 8px 34px;
}


/* Align all headings consistently */

.srl-music-includes-copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 4px;
}
.srl-music-includes-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 0;
    bottom: 4px;
    width: 1px;
    background: rgba(216, 166, 41, 0.34);
}

/* =========================================================
   ICONS
========================================================= */

.srl-music-includes-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    color: var(--srl-color-accent);
}

.srl-music-includes-icon i {
    font-size: 39px;
    line-height: 1;
}

.srl-music-includes-item--instruments .srl-music-includes-icon i {
    font-size: 42px;
}

/* =========================================================
   ITEM COPY
========================================================= */

.srl-music-includes-copy {
    min-width: 0;
}

.srl-music-includes-copy h3 {
    margin: 0 0 6px;
    color: var(--srl-color-accent);
    font-family: var(--srl-font-heading);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
}

.srl-music-includes-copy p {
    margin: 0;
    color: var(--srl-color-white);
    font-size: 0.98rem;
    line-height: 1.55;
}

/* =========================================================
   INSTRUMENT LISTS
========================================================= */

.srl-music-instrument-lists {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 30px;
}

.srl-music-instrument-lists ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.srl-music-instrument-lists li {
    position: relative;
    margin: 0 0 4px;
    padding-left: 14px;
    color: var(--srl-color-white);
    font-size: 0.96rem;
    line-height: 1.35;
}

.srl-music-instrument-lists li::before {
    content: "•";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--srl-color-white);
}

/* =========================================================
   CTA
========================================================= */

.srl-music-includes-cta {
    margin: 0 auto 28px;
    text-align: center;
}

.srl-music-includes-cta p {
    margin: 0 0 12px;
    color: var(--srl-color-accent);
    font-family: var(--srl-font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
}


/* =========================================================
   CONTACT ROW
========================================================= */

.srl-music-includes-contact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.srl-music-includes-contact-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    min-width: 0;
    padding: 24px 26px 2px;
    color: var(--srl-color-white);
    font-family: var(--srl-font-heading);
    font-size: 1.25rem;
    line-height: 1.35;
    text-decoration: none;

    white-space: nowrap;
}

.srl-music-includes-contact-item:first-child::after {
    content: "";
    position: absolute;
    top: 20px;
    right: 0;
    bottom: 0;
    width: 1px;
    background: rgba(216, 166, 41, 0.34);
}

.srl-music-includes-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border: 2px solid var(--srl-color-accent);
    border-radius: 50%;
    color: var(--srl-color-accent);
}

.srl-music-includes-contact-icon i {
    font-size: 23px;
    line-height: 1;
}

.srl-music-includes-contact-item:hover,
.srl-music-includes-contact-item:focus {
    color: var(--srl-color-accent);
    text-decoration: none;
}

.srl-music-includes-contact-item:visited {
    color: var(--srl-color-white);
}

.srl-music-includes-contact-item:visited:hover,
.srl-music-includes-contact-item:visited:focus {
    color: var(--srl-color-accent);
}

/* =========================================================
   DESKTOP HOVER EFFECTS
========================================================= */

@media only screen and (min-width: 1025px) {

    .srl-music-includes-icon {
        transition:
            color 0.25s ease,
            transform 0.25s ease;
    }

    .srl-music-includes-item:hover .srl-music-includes-icon {
        color: var(--srl-color-white);
        transform: translateY(-3px);
    }

}

/* =========================================================
   TABLET
========================================================= */

@media only screen and (max-width: 1024px) {

    .srl-music-includes-inner {
        padding: 52px 22px 44px;
    }

    .srl-music-includes-grid {
        max-width: 900px;
    }

    .srl-music-includes-item {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 13px;
        padding: 8px 22px;
    }

    .srl-music-includes-icon {
        width: 48px;
        height: 48px;
    }

    .srl-music-includes-icon i {
        font-size: 33px;
    }

    .srl-music-includes-item--instruments .srl-music-includes-icon i {
        font-size: 36px;
    }

    .srl-music-includes-copy h3 {
        font-size: 1rem;
    }

    .srl-music-includes-copy p,
    .srl-music-instrument-lists li {
        font-size: 0.9rem;
    }

    .srl-music-instrument-lists {
        gap: 6px 18px;
    }

    .srl-music-includes-contact-item {
        font-size: 1.08rem;
    }

}

/* =========================================================
   SMALL TABLET
========================================================= */

@media only screen and (max-width: 850px) {

    .srl-music-includes-inner {
        max-width: 720px;
        padding: 50px 28px 44px;
    }

    .srl-music-includes-grid {
        grid-template-columns: 1fr;
        max-width: 620px;
        margin-bottom: 31px;
    }

    .srl-music-includes-item {
        grid-template-columns: 62px minmax(0, 1fr);
        padding: 24px 0;
    }

    .srl-music-includes-item:first-child {
        padding-top: 0;
    }

    .srl-music-includes-item:last-child {
        padding-bottom: 0;
    }

    .srl-music-includes-item:not(:last-child)::after {
        top: auto;
        right: 0;
        bottom: 0;
        left: 78px;
        width: auto;
        height: 1px;
    }

    .srl-music-includes-icon {
        width: 56px;
        height: 56px;
    }

    .srl-music-includes-icon i {
        font-size: 37px;
    }

    .srl-music-includes-item--instruments .srl-music-includes-icon i {
        font-size: 40px;
    }

    .srl-music-instrument-lists {
        max-width: 360px;
    }

    .srl-music-includes-contact {
        grid-template-columns: 1fr;
        max-width: 620px;
    }

    .srl-music-includes-contact-item {
        justify-content: flex-start;
        padding: 22px 0;
    }

    .srl-music-includes-contact-item:first-child::after {
        top: auto;
        right: 0;
        bottom: 0;
        left: 69px;
        width: auto;
        height: 1px;
    }

}

/* =========================================================
   MOBILE
========================================================= */

@media only screen and (max-width: 767px) {

    .srl-music-includes-inner {
        padding: 44px 18px 38px;
    }

    .srl-music-includes-heading {
        margin-bottom: 28px;
    }

    .srl-music-includes-heading h2 {
        font-size: clamp(2rem, 9vw, 2.55rem);
    }

    .srl-music-includes-divider {
        margin-top: 15px;
    }

    .srl-music-includes-grid {
        margin-bottom: 27px;
    }

    .srl-music-includes-item {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 14px;
        padding: 21px 0;
    }

    .srl-music-includes-item:not(:last-child)::after {
        left: 66px;
    }

    .srl-music-includes-icon {
        width: 48px;
        height: 48px;
    }

    .srl-music-includes-icon i {
        font-size: 31px;
    }

    .srl-music-includes-item--instruments .srl-music-includes-icon i {
        font-size: 34px;
    }

    .srl-music-includes-copy h3 {
        margin-bottom: 5px;
        font-size: 1rem;
    }

    .srl-music-includes-copy p,
    .srl-music-instrument-lists li {
        font-size: 0.92rem;
    }

    .srl-music-includes-cta p {
        font-size: 1.05rem;
    }

    .srl-music-includes-button {
  width: 100%;
  max-width: 420px;
}

    .srl-music-includes-contact-item {
        gap: 14px;
        padding: 19px 0;
        font-size: 1rem;
    }

    .srl-music-includes-contact-icon {
        width: 46px;
        height: 46px;
    }

    .srl-music-includes-contact-icon i {
        font-size: 20px;
    }

    .srl-music-includes-contact-item:first-child::after {
        left: 60px;
    }

}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media only screen and (max-width: 420px) {

    .srl-music-includes-inner {
        padding-left: 15px;
        padding-right: 15px;
    }

    .srl-music-includes-heading h2 {
        font-size: 2rem;
    }

    .srl-music-instrument-lists {
        grid-template-columns: 1fr;
        gap: 0;
    }

    

    .srl-music-includes-contact-item {
        align-items: flex-start;
        font-size: 0.94rem;
    }

}



/* =========================================================
   GALLERY PAGE: HERO SECTION
========================================================= */

.srl-gallery-hero {
  position: relative;
  min-height: 570px;
  overflow: hidden;

  background-image:
    url("https://scottrlindberg.com/wp-content/uploads/2026/08/gallery-scott-randall-lindberg-bg.jpg");

  background-position: center 28%;
  background-size: cover;
  background-repeat: no-repeat;

  padding: 64px 24px 38px;

  display: flex;
  align-items: center;

  border-bottom: 1px solid rgba(216, 178, 74, 0.25);
}

/* =========================================================
   BACKGROUND OVERLAY
========================================================= */

.srl-gallery-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(7, 24, 43, 0.97) 0%,
      rgba(10, 35, 61, 0.93) 27%,
      rgba(13, 43, 73, 0.74) 48%,
      rgba(13, 43, 73, 0.42) 68%,
      rgba(13, 43, 73, 0.15) 86%,
      rgba(13, 43, 73, 0.04) 100%
    );
}


.srl-gallery-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.10) 0%,
      rgba(0, 0, 0, 0.02) 42%,
      rgba(0, 0, 0, 0.18) 100%
    );
}

/* =========================================================
   INNER CONTAINER
========================================================= */

.srl-gallery-hero .srl-hero-inner {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1180px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: minmax(300px, 48%) minmax(400px, 1fr);
  gap: 18px;
  align-items: center;
}

.srl-gallery-hero .srl-hero-content {
  width: 100%;
  max-width: 625px;
  margin: 0;
  padding-top: 0;
}

/* =========================================================
   EYEBROW TEXT
========================================================= */

.srl-gallery-eyebrow {
  margin: 0 0 12px;

  color: var(--srl-color-accent-light);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.13em;
  text-transform: uppercase;

  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.60),
    0 6px 18px rgba(0, 0, 0, 0.38);
}

/* =========================================================
   HEADING
========================================================= */

.srl-gallery-hero .srl-hero-content h1 {
  max-width: 610px;
  margin: 0 0 14px;

  color: var(--srl-color-white);
  font-family: var(--srl-font-heading);
  font-size: clamp(52px, 5.5vw, 76px);
  font-weight: 700;
  line-height: 1;

  text-shadow:
    0 3px 8px rgba(0, 0, 0, 0.60),
    0 8px 24px rgba(0, 0, 0, 0.48);
}

/* =========================================================
   HERO COPY
========================================================= */

.srl-gallery-hero .srl-subtitle {
  max-width: 565px;
  margin: 0 0 15px;

  color: #f8f5ee;
  font-size: 17px;
  line-height: 1.5;

  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.60),
    0 6px 18px rgba(0, 0, 0, 0.42);
}

.srl-gallery-hero .srl-gallery-lead {
  margin-bottom: 7px;
  font-family: var(--srl-font-heading);
  font-size: 19px;
  line-height: 1.5;
}

.srl-gallery-highlight {
  max-width: 560px;
  margin: 0 0 15px;

  color: var(--srl-color-accent-light);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;

  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.60),
    0 6px 18px rgba(0, 0, 0, 0.40);
}

/* =========================================================
   BUTTONS
========================================================= */

.srl-gallery-hero .srl-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  margin-top: 22px;
  margin-bottom: 0;
}


/* Meet Scott Button */

.srl-gallery-hero .srl-btn-secondary,
.srl-gallery-hero .srl-btn-secondary:visited {
  color: var(--srl-color-primary);
  background: #e4b73e;
  border-color: #e4b73e;
}

.srl-gallery-hero .srl-btn-secondary:hover,
.srl-gallery-hero .srl-btn-secondary:focus {
  color: var(--srl-color-primary);
  background: var(--srl-color-white);
  border-color: var(--srl-color-white);
  opacity: 1;
  transform: translateY(-2px);

  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

/* Upcoming Events Button */

.srl-gallery-hero .srl-btn-primary,
.srl-gallery-hero .srl-btn-primary:visited {
  color: var(--srl-color-white);
  background: rgba(23, 54, 93, 0.76);
  border-color: rgba(255, 255, 255, 0.85);
}

.srl-gallery-hero .srl-btn-primary:hover,
.srl-gallery-hero .srl-btn-primary:focus {
  color: var(--srl-color-primary);
  background: var(--srl-color-white);
  border-color: var(--srl-color-white);
  opacity: 1;
  transform: translateY(-2px);

  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

/* =========================================================
   FEATURE ROW
========================================================= */

.srl-gallery-features {
  width: 100%;
  max-width: 590px;

  margin-top: 25px;
  padding-top: 18px;

  border-top: 1px solid rgba(255, 255, 255, 0.28);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 24px;
}

.srl-gallery-feature {
  position: relative;

  min-height: 39px;

  display: flex;
  align-items: center;
  gap: 9px;

  color: var(--srl-color-white);
}

.srl-gallery-feature:not(:last-child)::after {
  content: "";

  width: 1px;
  height: 37px;
  margin-left: 14px;

  background: rgba(255, 255, 255, 0.25);
}

.srl-gallery-feature i {
  min-width: 25px;

  color: var(--srl-color-accent-light);
  font-size: 21px;
  line-height: 1;
  text-align: center;
}

.srl-gallery-feature span {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;

  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.52);
}

/* =========================================================
   SMALLER DESKTOP / LAPTOP
========================================================= */

@media (max-width: 1280px) and (min-width: 1101px) {

  .srl-gallery-hero {
    min-height: 550px;
    padding-top: 58px;
    padding-bottom: 34px;

    /*
     Keeps the horizontal framing while showing more of
     the upper portion of the photograph.
    */
    background-position: 55% 27%;
  }

  .srl-gallery-hero .srl-hero-inner {
    max-width: 1100px;
    grid-template-columns: minmax(300px, 49%) 1fr;
  }

  .srl-gallery-hero .srl-hero-content {
    max-width: 575px;
  }

  .srl-gallery-hero .srl-hero-content h1 {
    font-size: clamp(50px, 5.4vw, 70px);
  }

  .srl-gallery-hero .srl-subtitle,
  .srl-gallery-highlight {
    max-width: 530px;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) and (min-width: 861px) {

  .srl-gallery-hero {
    min-height: 530px;
    padding: 52px 24px 30px;

    /*
     Moves the background image downward on tablet so
     the performers' heads are not cropped.
    */
    background-position: 61% 24%;
  }

  .srl-gallery-hero::before {
    background:
      linear-gradient(
        90deg,
        rgba(7, 24, 43, 0.98) 0%,
        rgba(10, 35, 61, 0.94) 33%,
        rgba(13, 43, 73, 0.72) 58%,
        rgba(13, 43, 73, 0.29) 82%,
        rgba(13, 43, 73, 0.05) 100%
      );
  }

  .srl-gallery-hero .srl-hero-inner {
    max-width: 960px;

    grid-template-columns: minmax(0, 510px) 1fr;
    gap: 18px;

    text-align: left;
  }

  .srl-gallery-hero .srl-hero-content {
    max-width: 510px;
    margin: 0;
  }

  .srl-gallery-eyebrow {
    font-size: 12px;
  }

  .srl-gallery-hero .srl-hero-content h1 {
    max-width: 500px;
    margin-left: 0;
    margin-right: 0;

    font-size: clamp(48px, 6.3vw, 62px);
  }

  .srl-gallery-hero .srl-subtitle,
  .srl-gallery-highlight {
    max-width: 485px;
    margin-left: 0;
    margin-right: 0;

    font-size: 16px;
  }

  .srl-gallery-hero .srl-gallery-lead {
    font-size: 18px;
  }

  .srl-gallery-hero .srl-buttons {
    justify-content: flex-start;
    margin-top: 19px;
  }

  .srl-gallery-features {
    max-width: 500px;
    margin-top: 21px;
    padding-top: 15px;
    gap: 14px 18px;
  }

  .srl-gallery-feature {
    gap: 7px;
  }

  .srl-gallery-feature:not(:last-child)::after {
    display: none;
  }

  .srl-gallery-feature i {
    font-size: 19px;
  }

  .srl-gallery-feature span {
    font-size: 11px;
  }
}

/* =========================================================
   MOBILE / SMALL TABLET
========================================================= */

@media (max-width: 860px) {

  .srl-gallery-hero {
    min-height: auto;

    /*
     Creates a large visual area for the performance image
     above the hero copy.
    */
    padding: 300px 20px 44px;

    align-items: flex-end;

    /*
     Mobile positioning remains unchanged.
    */
    background-position: 34% top;
  }

  .srl-gallery-hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(7, 24, 43, 0.05) 0%,
        rgba(7, 24, 43, 0.10) 17%,
        rgba(7, 24, 43, 0.38) 34%,
        rgba(7, 24, 43, 0.78) 50%,
        rgba(7, 24, 43, 0.95) 67%,
        rgba(7, 24, 43, 0.99) 100%
      );
  }

  .srl-gallery-hero::after {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.06) 0%,
        rgba(0, 0, 0, 0.02) 36%,
        rgba(0, 0, 0, 0.15) 100%
      );
  }

  .srl-gallery-hero .srl-hero-inner {
    display: block;
    max-width: 100%;
    text-align: center;
  }

  .srl-gallery-hero .srl-hero-content {
    max-width: 680px;
    margin: 0 auto;
    padding-top: 0;
  }

  .srl-gallery-eyebrow {
    margin-bottom: 10px;
    font-size: 12px;
    letter-spacing: 0.11em;
  }

  .srl-gallery-hero .srl-hero-content h1 {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;

    font-size: clamp(52px, 11vw, 70px);
    line-height: 1;
  }

  .srl-gallery-hero .srl-subtitle,
  .srl-gallery-highlight {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }

  .srl-gallery-hero .srl-buttons {
    justify-content: center;
    margin-top: 19px;
  }

  .srl-gallery-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;

    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }

  .srl-gallery-feature {
    min-width: 0;

    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;

    text-align: center;
  }

  .srl-gallery-feature:not(:last-child)::after {
    display: none;
  }

  .srl-gallery-feature i {
    min-width: 0;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .srl-gallery-hero {
    padding: 245px 18px 38px;

    background-position: 35% top;
  }

  .srl-gallery-eyebrow {
    font-size: 11px;
    line-height: 1.5;
  }

  .srl-gallery-hero .srl-hero-content h1 {
    margin-bottom: 13px;
    font-size: clamp(49px, 15vw, 64px);
  }

  .srl-gallery-hero .srl-subtitle,
  .srl-gallery-highlight {
    font-size: 16px;
    line-height: 1.5;
  }

  .srl-gallery-hero .srl-gallery-lead {
    font-size: 17px;
  }

  .srl-gallery-hero .srl-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;

    margin-top: 17px;
  }

  .srl-gallery-hero .srl-btn {
  width: 100%;
}

  .srl-gallery-features {
    gap: 10px;
    padding-top: 18px;
  }

  .srl-gallery-feature i {
    font-size: 21px;
  }

  .srl-gallery-feature span {
    font-size: 11px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .srl-gallery-hero {
    padding: 215px 16px 36px;
    background-position: 35% top;
  }

  .srl-gallery-eyebrow {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }

  .srl-gallery-hero .srl-hero-content h1 {
    font-size: clamp(46px, 16vw, 59px);
  }

  .srl-gallery-hero .srl-buttons {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  

  .srl-gallery-features {
    padding-top: 16px;
  }

  .srl-gallery-feature span {
    font-size: 10px;
  }
}



/* =========================================================
   GALLERY PAGE – FINAL CTA SECTION
========================================================= */

.srl-gallery-final-cta {
    width: 100%;
    margin: 0;
    padding: 0;

    background:
        radial-gradient(
            circle at center top,
            rgba(36, 84, 128, 0.34) 0%,
            rgba(23, 54, 93, 0.1) 34%,
            rgba(6, 39, 70, 0) 65%
        ),
        linear-gradient(
            135deg,
            #082d50 0%,
            #0b365f 48%,
            #052746 100%
        );

    color: var(--srl-color-white);
}

.srl-gallery-final-cta-inner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 54px 20px 50px;

    text-align: center;
}

/* =========================================================
   DECORATIVE DIVIDER
========================================================= */

.srl-gallery-final-cta-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(330px, 100%);
    margin: 0 auto 23px;
    gap: 13px;

    color: var(--srl-color-accent);
}

.srl-gallery-final-cta-divider span {
    flex: 1;
    height: 2px;
    background: var(--srl-color-accent);
}

.srl-gallery-final-cta-divider i {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
}

/* =========================================================
   CTA COPY
========================================================= */

.srl-gallery-final-cta-copy {
    max-width: 880px;
    margin: 0 auto 27px;

    color: var(--srl-color-white);

    font-family: var(--srl-font-heading);
    font-size: clamp(1.35rem, 2.35vw, 1.85rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.55;
}

/* =========================================================
   CTA BUTTON
========================================================= */


/* =========================================================
   TABLET
========================================================= */

@media only screen and (max-width: 1024px) {

    .srl-gallery-final-cta-inner {
        padding: 50px 24px 46px;
    }

    .srl-gallery-final-cta-copy {
        max-width: 760px;
        font-size: clamp(1.3rem, 3vw, 1.7rem);
    }

}

/* =========================================================
   MOBILE
========================================================= */

@media only screen and (max-width: 767px) {

    .srl-gallery-final-cta-inner {
        padding: 43px 18px 40px;
    }

    .srl-gallery-final-cta-divider {
        width: min(260px, 100%);
        margin-bottom: 20px;
    }

    .srl-gallery-final-cta-copy {
        max-width: 570px;
        margin-bottom: 24px;

        font-size: clamp(1.2rem, 5.8vw, 1.48rem);
        line-height: 1.5;
    }

    .srl-gallery-final-cta-button {
  width: 100%;
  max-width: 360px;
}

}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media only screen and (max-width: 420px) {

    .srl-gallery-final-cta-inner {
        padding-left: 15px;
        padding-right: 15px;
    }

    .srl-gallery-final-cta-copy {
        font-size: 1.18rem;
    }

    

}


/* =========================================================
   EVENTS PAGE -  HERO SECTION
========================================================= */

.srl-events-hero{

    position:relative;

    min-height:590px;

    overflow:hidden;

    background-image:
    url("https://scottrlindberg.com/wp-content/uploads/2026/07/Upcoming-Events.jpg");

    background-size:cover;

    background-repeat:no-repeat;

    background-position:center 28%;

    display:flex;

    align-items:center;

    padding:64px 24px 38px;

    border-bottom:1px solid rgba(216,178,74,.25);

}

/*=========================================================*/

.srl-events-hero:before{

    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    background:

    linear-gradient(

        90deg,

        rgba(5,18,33,.97) 0%,

        rgba(8,27,47,.93) 28%,

        rgba(12,39,66,.72) 48%,

        rgba(12,39,66,.42) 70%,

        rgba(12,39,66,.15) 88%,

        rgba(12,39,66,.03) 100%

    );

}

/*=========================================================*/

.srl-events-hero:after{

    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;

    background:

    linear-gradient(

        180deg,

        rgba(0,0,0,.08) 0%,

        rgba(0,0,0,.02) 45%,

        rgba(0,0,0,.18) 100%

    );

}

/*=========================================================*/

.srl-events-hero .srl-hero-inner{

    position:relative;

    z-index:2;

    width:100%;

    max-width:1180px;

    margin:auto;

    display:grid;

    grid-template-columns:minmax(300px,48%) 1fr;

    align-items:center;

}

.srl-events-hero .srl-hero-content{

    max-width:625px;

}

/*=========================================================*/

.srl-events-eyebrow{

    color:var(--srl-color-accent-light);

    font-size:13px;

    font-weight:700;

    letter-spacing:.13em;

    text-transform:uppercase;

    margin:0 0 12px;

    text-shadow:0 2px 6px rgba(0,0,0,.65);

}

/*=========================================================*/

.srl-events-hero h1{

    color:#fff;

    margin:0 0 14px;

    font-family:var(--srl-font-heading);

    font-size:clamp(56px,5.7vw,78px);

    line-height:1;

    text-shadow:0 3px 8px rgba(0,0,0,.65);

}

/*=========================================================*/

.srl-events-hero .srl-subtitle{

    color:#f5f4ef;

    max-width:565px;

    font-size:18px;

    line-height:1.55;

    margin-bottom:12px;

    text-shadow:0 2px 6px rgba(0,0,0,.60);

}

.srl-events-lead{

    font-family:var(--srl-font-heading);

    font-size:20px;

}

.srl-events-highlight{

    color:var(--srl-color-accent-light);

    font-size:17px;

    font-weight:700;

    line-height:1.5;

    margin-bottom:18px;

    text-shadow:0 2px 6px rgba(0,0,0,.55);

}

/*=========================================================*/

.srl-events-hero .srl-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:20px;

}

/*=========================================================*/



/*=========================================================*/

.srl-events-hero .srl-btn-secondary{

    background:#e4b73e;

    color:var(--srl-color-primary);

    border-color:#e4b73e;

}

.srl-events-hero .srl-btn-secondary:hover{

    background:#fff;

    border-color:#fff;

    transform:translateY(-2px);

}

/*=========================================================*/

.srl-events-hero .srl-btn-primary{

    color:#fff;

    background:rgba(23,54,93,.75);

    border-color:rgba(255,255,255,.85);

}

.srl-events-hero .srl-btn-primary:hover{

    background:#fff;

    color:var(--srl-color-primary);

    border-color:#fff;

    transform:translateY(-2px);

}

/*=========================================================*/

.srl-events-features{

    display:flex;

    flex-wrap:wrap;

    gap:24px;

    margin-top:26px;

    padding-top:18px;

    border-top:1px solid rgba(255,255,255,.28);

}

.srl-events-feature{

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

}

.srl-events-feature i{

    color:var(--srl-color-accent-light);

    font-size:22px;

    width:24px;

    text-align:center;

}

.srl-events-feature span{

    font-size:12px;

    font-weight:700;

    line-height:1.3;

}

/*=========================================================*/
/* TABLET */
/*=========================================================*/

@media(max-width:1100px){

.srl-events-hero{

background-position:62% 28%;

min-height:540px;

padding:55px 24px 32px;

}

.srl-events-hero .srl-hero-inner{

grid-template-columns:1fr;

}

.srl-events-hero .srl-hero-content{

max-width:520px;

}

}

/*=========================================================*/
/* MOBILE */
/*=========================================================*/

@media(max-width:860px){

.srl-events-hero{

padding:310px 20px 42px;

min-height:auto;

align-items:flex-end;

background-position:44% top;

}

.srl-events-hero:before{

background:

linear-gradient(

180deg,

rgba(6,20,35,.05) 0%,

rgba(6,20,35,.10) 20%,

rgba(6,20,35,.42) 38%,

rgba(6,20,35,.80) 56%,

rgba(6,20,35,.96) 72%,

rgba(6,20,35,.99) 100%

);

}

.srl-events-hero .srl-hero-inner{

display:block;

text-align:center;

}

.srl-events-hero .srl-hero-content{

margin:auto;

max-width:680px;

}

.srl-events-hero h1{

font-size:clamp(52px,11vw,70px);

}

.srl-events-hero .srl-buttons{

justify-content:center;

}

.srl-events-features{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:18px;

text-align:center;

}

.srl-events-feature{

flex-direction:column;

}

}

/*=========================================================*/
/* SMALL MOBILE */
/*=========================================================*/

@media(max-width:600px){

.srl-events-hero{

padding:250px 18px 38px;

}

.srl-events-hero .srl-buttons{

display:grid;

grid-template-columns:1fr 1fr;

gap:10px;

}

.srl-events-hero .srl-btn{
  width: 100%;
}

}

@media(max-width:420px){

.srl-events-hero{

padding:220px 16px 34px;

}

.srl-events-hero .srl-buttons{

grid-template-columns:1fr;

}

.srl-events-features{

grid-template-columns:1fr;

}

}



/* =========================================================
   BLOG PAGE - HERO SECTION
========================================================= */

.srl-blog-hero {

    position: relative;

    min-height: 590px;

    overflow: hidden;

    background-image:
        url("https://scottrlindberg.com/wp-content/uploads/2026/07/Scott-Randall-Lindberg-Blog.jpg");

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center 46%;

    display: flex;

    align-items: center;

    padding: 64px 24px 38px;

    border-bottom: 1px solid rgba(216, 178, 74, .25);

}

/* =========================================================
   DARK LEFT-SIDE OVERLAY
========================================================= */

.srl-blog-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(5, 18, 33, .98) 0%,
            rgba(8, 27, 47, .94) 28%,
            rgba(12, 39, 66, .74) 48%,
            rgba(12, 39, 66, .43) 70%,
            rgba(12, 39, 66, .16) 88%,
            rgba(12, 39, 66, .04) 100%
        );

}

/* =========================================================
   SUBTLE TOP-TO-BOTTOM SHADING
========================================================= */

.srl-blog-hero::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .08) 0%,
            rgba(0, 0, 0, .02) 45%,
            rgba(0, 0, 0, .20) 100%
        );

}

/* =========================================================
   INNER CONTENT AREA
========================================================= */

.srl-blog-hero .srl-hero-inner {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1180px;

    margin: auto;

    display: grid;

    grid-template-columns: minmax(300px, 48%) 1fr;

    align-items: center;

}

.srl-blog-hero .srl-hero-content {

    max-width: 625px;

}

/* =========================================================
   EYEBROW TEXT
========================================================= */

.srl-blog-eyebrow {

    color: var(--srl-color-accent-light);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .13em;

    text-transform: uppercase;

    margin: 0 0 12px;

    text-shadow: 0 2px 6px rgba(0, 0, 0, .65);

}

/* =========================================================
   HERO HEADING
========================================================= */

.srl-blog-hero h1 {

    color: #fff;

    margin: 0 0 14px;

    font-family: var(--srl-font-heading);

    font-size: clamp(56px, 5.7vw, 78px);

    line-height: 1;

    text-shadow: 0 3px 8px rgba(0, 0, 0, .65);

}

/* =========================================================
   HERO INTRODUCTION
========================================================= */

.srl-blog-hero .srl-subtitle {

    color: #f5f4ef;

    max-width: 565px;

    font-size: 18px;

    line-height: 1.55;

    margin: 0 0 12px;

    text-shadow: 0 2px 6px rgba(0, 0, 0, .60);

}

.srl-blog-lead {

    font-family: var(--srl-font-heading);

    font-size: 20px;

}

/* =========================================================
   BUTTON CONTAINER
========================================================= */

.srl-blog-hero .srl-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 20px;

}

/* =========================================================
   BUTTON BASE
========================================================= */



/* =========================================================
   MEET SCOTT BUTTON
========================================================= */

.srl-blog-hero .srl-btn-secondary {

    background: #e4b73e;

    color: var(--srl-color-primary);

    border-color: #e4b73e;

}

.srl-blog-hero .srl-btn-secondary:hover,
.srl-blog-hero .srl-btn-secondary:focus {

    background: #fff;

    color: var(--srl-color-primary);

    border-color: #fff;

    transform: translateY(-2px);

}

/* =========================================================
   CONTACT SCOTT BUTTON
========================================================= */

.srl-blog-hero .srl-btn-primary {

    color: #fff;

    background: rgba(23, 54, 93, .75);

    border-color: rgba(255, 255, 255, .85);

}

.srl-blog-hero .srl-btn-primary:hover,
.srl-blog-hero .srl-btn-primary:focus {

    background: #fff;

    color: var(--srl-color-primary);

    border-color: #fff;

    transform: translateY(-2px);

}

/* =========================================================
   BLOG FEATURE ROW
========================================================= */

.srl-blog-features {

    display: flex;

    flex-wrap: wrap;

    gap: 24px;

    margin-top: 26px;

    padding-top: 18px;

    border-top: 1px solid rgba(255, 255, 255, .28);

}

.srl-blog-feature {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #fff;

}

.srl-blog-feature i {

    color: var(--srl-color-accent-light);

    font-size: 22px;

    width: 24px;

    text-align: center;

}

.srl-blog-feature span {

    font-size: 12px;

    font-weight: 700;

    line-height: 1.3;

}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .srl-blog-hero {

        min-height: 540px;

        padding: 55px 24px 32px;

        background-position: 58% center;

    }

    .srl-blog-hero .srl-hero-inner {

        grid-template-columns: 1fr;

    }

    .srl-blog-hero .srl-hero-content {

        max-width: 520px;

    }

}

/* =========================================================
   MOBILE / SMALL TABLET
========================================================= */

@media (max-width: 860px) {

    .srl-blog-hero {

        min-height: auto;

        padding: 310px 20px 42px;

        align-items: flex-end;

        background-position: 44% top;

    }

    .srl-blog-hero::before {

        background:
            linear-gradient(
                180deg,
                rgba(6, 20, 35, .04) 0%,
                rgba(6, 20, 35, .10) 20%,
                rgba(6, 20, 35, .42) 38%,
                rgba(6, 20, 35, .81) 56%,
                rgba(6, 20, 35, .96) 72%,
                rgba(6, 20, 35, .99) 100%
            );

    }

    .srl-blog-hero .srl-hero-inner {

        display: block;

        text-align: center;

    }

    .srl-blog-hero .srl-hero-content {

        max-width: 680px;

        margin: auto;

    }

    .srl-blog-hero h1 {

        font-size: clamp(52px, 11vw, 70px);

    }

    .srl-blog-hero .srl-subtitle {

        margin-left: auto;

        margin-right: auto;

    }

    .srl-blog-hero .srl-buttons {

        justify-content: center;

    }

    .srl-blog-features {

        display: grid;

        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 18px;

        text-align: center;

    }

    .srl-blog-feature {

        flex-direction: column;

        justify-content: flex-start;

    }

}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 600px) {

    .srl-blog-hero {

        padding: 250px 18px 38px;

        background-position: 43% top;

    }

    .srl-blog-hero .srl-buttons {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 10px;

    }

    .srl-blog-hero .srl-btn {
  width: 100%;
}

}

/* =========================================================
   EXTRA-SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .srl-blog-hero {

        padding: 220px 16px 34px;

        background-position: 42% top;

    }

    .srl-blog-hero .srl-buttons {

        grid-template-columns: 1fr;

    }

    .srl-blog-features {

        grid-template-columns: 1fr;

        gap: 15px;

    }

    .srl-blog-feature {

        flex-direction: row;

        justify-content: center;

    }

}



/* ======================================
   Lullaby Book Page: Hero Section
====================================== */

.srl-lullaby-hero {
  min-height: calc(100vh - 110px);
  padding: 58px 24px 30px;

  display: flex;
  align-items: center;

  background:
    var(--srl-color-primary)
    url("https://scottrlindberg.com/wp-content/uploads/2026/07/Lullaby-A-Bedtime-Story.png")
    center center / cover no-repeat;

  border-bottom: 1px solid rgba(216, 166, 41, .35);
}

.srl-lullaby-hero::before {
  background: rgba(9, 22, 42, .28);
}

.srl-lullaby-hero .srl-hero-inner {
  grid-template-columns: minmax(300px, 42%) minmax(420px, 1fr);
  align-items: center;
  gap: 46px;
}

.srl-lullaby-hero .srl-hero-book img {
  max-width: 430px;
  margin-top: 0;
  border-radius: 8px;
}

.srl-lullaby-hero .srl-hero-content {
  width: 100%;
  max-width: 620px;
  margin-top: -64px;
  padding-top: 0;
}

.srl-lullaby-hero .srl-hero-content h1 {
  margin-bottom: 8px;

  color: var(--srl-color-white);
  font-family: var(--srl-font-heading);
  font-size: clamp(46px, 6vw, 82px);
  font-weight: 700;
  line-height: .95;
}

.srl-lullaby-hero .srl-h1-sub {
  display: block;
  margin-top: 8px;

  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 700;
  line-height: 1.05;
}

/* Decorative divider */

.srl-lullaby-divider {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 520px;
  margin: 22px 0 28px;

  color: #FFD76A !important;
}

.srl-lullaby-divider::before,
.srl-lullaby-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #FFD76A !important;
}

.srl-lullaby-divider::before {
  margin-right: 28px;
}

.srl-lullaby-divider::after {
  margin-left: 28px;
}

.srl-lullaby-divider span {
  position: relative;
  z-index: 2;

  display: inline-block;

  color: #FFD76A !important;
  font-family: var(--srl-font-body);
  font-size: 24px;
  line-height: 1;
}

.srl-lullaby-hero .srl-subtitle {
  max-width: 540px;
  margin-bottom: 28px;

  font-size: 21px;
  line-height: 1.55;
}

/* Buttons */

.srl-lullaby-hero .srl-buttons {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;

  gap: 18px;
  margin-bottom: 24px;
}

.srl-lullaby-hero .srl-lullaby-btn {
  width: auto;
  min-width: 185px;
  padding: 14px 30px;
  white-space: nowrap;
}

.srl-lullaby-hero .srl-buttons .srl-btn-secondary {
  min-width: 270px;
}

/*
  Lullaby hero button enforcement.
  These selectors override the global SRL button system only
  inside the Lullaby hero.
*/

body .srl-lullaby-hero .srl-buttons > a.srl-btn,
body .srl-lullaby-hero .srl-buttons > a.srl-btn:link,
body .srl-lullaby-hero .srl-buttons > a.srl-btn:visited,
body .srl-lullaby-hero .srl-buttons > a.srl-btn.srl-btn-primary,
body .srl-lullaby-hero .srl-buttons > a.srl-btn.srl-btn-primary:visited,
body .srl-lullaby-hero .srl-buttons > a.srl-btn.srl-btn-secondary,
body .srl-lullaby-hero .srl-buttons > a.srl-btn.srl-btn-secondary:visited {
  background: #17365D !important;
  background-color: #17365D !important;
  border-color: #17365D !important;
  color: #FFFFFF !important;

  font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
  font-size: 20px !important;
  font-weight: 700;
}

body .srl-lullaby-hero .srl-buttons > a.srl-btn:hover,
body .srl-lullaby-hero .srl-buttons > a.srl-btn:focus,
body .srl-lullaby-hero .srl-buttons > a.srl-btn.srl-btn-primary:hover,
body .srl-lullaby-hero .srl-buttons > a.srl-btn.srl-btn-primary:focus,
body .srl-lullaby-hero .srl-buttons > a.srl-btn.srl-btn-secondary:hover,
body .srl-lullaby-hero .srl-buttons > a.srl-btn.srl-btn-secondary:focus {
  background: #FFD76A !important;
  background-color: #FFD76A !important;
  border-color: #FFD76A !important;
  color: #17365D !important;
}

/* ======================================
   Lullaby Book Page: Hero Info Row
====================================== */

.srl-lullaby-info-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);

  max-width: 610px;
  margin-top: 24px;
  gap: 10px;
}

.srl-lullaby-info-card {
  padding: 12px 8px;

  background: #FFFFFF !important;
  border: 1px solid rgba(216, 166, 41, .35);
  border-radius: 10px;

  text-align: center;

  box-shadow: 0 8px 18px rgba(0, 0, 0, .08);

  transition:
    transform .25s ease,
    border-color .25s ease;
}

.srl-lullaby-info-card:hover {
  transform: translateY(-3px);
  border-color: #FFD76A;
}

.srl-lullaby-info-card i {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;
  margin: 0 auto 10px;

  color: #FFD76A !important;
  font-size: 26px;
}

.srl-lullaby-info-card strong {
  display: block;
  margin-bottom: 5px;

  color: var(--srl-color-primary);
  font-family: var(--srl-font-heading);
  font-size: 14px;
  line-height: 1.2;
}

.srl-lullaby-info-card span {
  display: block;

  color: var(--srl-color-text);
  font-size: 13px;
  line-height: 1.3;
}

/* Smaller desktop and laptop */

@media (max-width: 1280px) and (min-width: 1025px) {
  .srl-lullaby-hero {
    min-height: calc(100vh - 105px);
    padding-top: 48px;
    padding-bottom: 24px;
  }

  .srl-lullaby-hero .srl-hero-content {
    margin-top: -50px;
  }

  .srl-lullaby-hero .srl-hero-book img {
    max-width: 400px;
  }
}

/* Tablet */

@media (max-width: 1024px) {
  .srl-lullaby-hero {
    min-height: auto;
    padding: 54px 22px 42px;
  }

  .srl-lullaby-hero .srl-hero-inner {
    grid-template-columns: minmax(260px, 38%) minmax(360px, 1fr);
    gap: 34px;
  }

  .srl-lullaby-hero .srl-hero-book img {
    max-width: 360px;
  }

  .srl-lullaby-hero .srl-hero-content {
    margin-top: -28px;
  }

  .srl-lullaby-hero .srl-buttons {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .srl-lullaby-hero .srl-lullaby-btn,
  .srl-lullaby-hero .srl-buttons .srl-btn-secondary {
    width: auto;
    min-width: 270px;
  }

  .srl-lullaby-info-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 460px;
    gap: 10px;
  }
}

/* Mobile */

@media (max-width: 860px) {
  .srl-lullaby-hero {
    min-height: auto;
    padding: 55px 20px 48px;
    background-position: center center;
  }

  .srl-lullaby-hero .srl-hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .srl-lullaby-hero .srl-hero-book img {
    max-width: 285px;
    margin: 0 auto;
  }

  .srl-lullaby-hero .srl-hero-content {
    margin-top: 0;
  }

  .srl-lullaby-divider {
    margin-left: auto;
    margin-right: auto;
  }

  .srl-lullaby-hero .srl-buttons {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .srl-lullaby-hero .srl-lullaby-btn,
  .srl-lullaby-hero .srl-buttons .srl-btn-secondary {
    width: 100%;
    min-width: 0;
    max-width: 330px;
  }

  /* Hide the hero information row completely on mobile. */
  .srl-lullaby-info-grid {
    display: none;
  }
}

/* Small Mobile */

@media (max-width: 600px) {
  body .srl-lullaby-hero .srl-buttons > a.srl-btn {
    width: 100%;
    max-width: 330px;
    padding: 14px 20px;
    font-size: 19px !important;
  }
}



/* ======================================
   Lullaby Book Page: Section 2 - About the Book
====================================== */


.srl-lullaby-about-book {
    background: #425B99;
    padding: 70px 24px;
}

.srl-lullaby-about-inner {
    max-width: 1180px;
    margin: 0 auto;
}

.srl-lullaby-about-card {

    max-width: 900px;   /* Same as Praise section */

    width: 100%;

    margin: 0 auto;

    background: #fffaf0;

    border: 1px solid rgba(216,166,41,.35);

    border-radius: 14px;

    padding: 48px 56px;

    box-shadow: 0 14px 34px rgba(23,54,93,.08);

    box-sizing: border-box;

}
/* Heading */

.srl-lullaby-about-card h2 {
    margin: 0;
    color: var(--srl-color-primary);
    font-family: var(--srl-font-heading);
    font-size: clamp(34px,4vw,46px);
    line-height: 1.1;
    text-align: center;
}

.srl-lullaby-about-card h2 span{
    display:block;
    margin-top:8px;
    font-size:clamp(24px,3vw,34px);
    font-weight:400;
}

/* Divider */

.srl-lullaby-about-card .srl-gold-divider{
    width:75%;
    margin:22px auto 34px;
}


/* Lullaby card divider star background */
.srl-lullaby-about-card .srl-gold-divider::after,
.srl-lullaby-praise-card .srl-gold-divider::after,
.srl-lullaby-author-card .srl-gold-divider::after,
.srl-lullaby-illustrator-card .srl-gold-divider::after {
  background: #FFFAF0;
  color: #FFD76A !important;
}

/* Paragraphs */

.srl-lullaby-about-card p{
    margin:0 0 18px;
    color:var(--srl-color-text);
    font-size:18px;
    line-height:1.75;
}

.srl-lullaby-about-card p:last-of-type{
    margin-bottom:0;
}

/* ======================================
   Buttons
====================================== */

.srl-lullaby-about-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    margin-top:36px;
    flex-wrap:nowrap;
}

/* Button Size */

.srl-lullaby-about-buttons .srl-lullaby-btn{
  width: 185px;
}

/* Amazon Button */

.srl-lullaby-about-buttons .srl-btn-primary{
	background:var(--srl-color-accent);
    color:var(--srl-color-white);
    border:1px solid rgba(255,255,255,.18);
    transition:.25s;
}

.srl-lullaby-about-buttons .srl-btn-primary:hover{
    background:#102846;
}

/* Barnes & Noble Button */

.srl-lullaby-about-buttons .srl-btn-secondary{
	background:var(--srl-color-primary);
    color:var(--srl-color-white);
    border:none;
    transition:.25s;
}

.srl-lullaby-about-buttons .srl-btn-secondary:hover{
    background:#c6961e;
}

/* ======================================
   Tablet
====================================== */

@media (max-width:1024px){

    .srl-lullaby-about-book{
        padding:0 22px 60px;
    }

    .srl-lullaby-about-card{
        max-width:900px;
        width:100%;
        padding:42px 38px;
    }

}

/* ======================================
   Mobile
====================================== */

@media (max-width:640px){

    .srl-lullaby-about-book{
        padding:0 20px 48px;
    }

    .srl-lullaby-about-card{
        max-width:900px;
        width:100%;
        padding:34px 24px;
    }

}


/* ======================================
   Lullaby Book Page
   Section 3 - Praise
====================================== */

.srl-lullaby-praise{
    background: #425B99;
    padding:0 24px 70px;
}

.srl-lullaby-praise-inner{
    max-width:1180px;
    margin:0 auto;
}

.srl-lullaby-praise-card{

    max-width:900px;

    margin:0 auto;

    background:#fffaf0;

    border:1px solid rgba(216,166,41,.35);

    border-radius:14px;

    padding:48px 56px;

    box-shadow:0 14px 34px rgba(23,54,93,.08);

}

.srl-lullaby-praise-card h2{

    margin:0;

    text-align:center;

    color:var(--srl-color-primary);

    font-family:var(--srl-font-heading);

    font-size:clamp(34px,4vw,46px);

    line-height:1.1;

}

.srl-lullaby-praise-card h2 span{

    display:block;

    margin-top:8px;

    font-size:clamp(24px,3vw,34px);

    font-weight:400;

}

.srl-lullaby-praise-card .srl-gold-divider{

    width:75%;

    margin:22px auto 38px;

}

/* Individual Review */

.srl-praise-item{

    display:flex;

    gap:20px;

    align-items:flex-start;

    padding:22px 0;

}

.srl-praise-item:not(:last-child){

    border-bottom:1px solid rgba(216,166,41,.30);

}

.srl-praise-star{

    flex:0 0 34px;

    text-align:center;

}

.srl-praise-star i{

    color: #425B99 !important;

    font-size:24px;

    margin-top:2px;

}

.srl-praise-content{

    flex:1;

}

.srl-praise-content blockquote{

    margin:0;

    border:none;

    padding:0;

    color:var(--srl-color-text);

    font-size:20px;

    line-height:1.75;

    font-style:italic;

}

.srl-praise-author{

    margin:14px 0 0;

    color:var(--srl-color-primary);

    font-size:17px;

    line-height:1.55;

    font-weight:600;

}

/* ======================================
   Section 3 Button Spacing
====================================== */

.srl-lullaby-praise-card .srl-lullaby-about-buttons {
    margin-top: 40px;
    justify-content: center;
}


/* Tablet */

@media (max-width:1024px){

    .srl-lullaby-praise{

        padding:0 22px 60px;

    }

    .srl-lullaby-praise-card{

        padding:42px 38px;

    }

}

/* Mobile */

@media (max-width:640px){

    .srl-lullaby-praise{

        padding:0 20px 48px;

    }

    .srl-lullaby-praise-card{

        padding:34px 24px;

    }

    .srl-praise-item{

        flex-direction:column;

        gap:12px;

    }

    .srl-praise-star{

        width:100%;

        text-align:center;

    }

    .srl-praise-content blockquote{

        font-size:18px;

        line-height:1.65;

    }

    .srl-praise-author{

        font-size:16px;

    }

}

/* ======================================
   Lullaby Page - Section 4
   About the Author
====================================== */

.srl-lullaby-author{
    background: #425B99;
    padding:0 24px 70px;
}

.srl-lullaby-author-inner{
    max-width:1180px;
    margin:0 auto;
}

.srl-lullaby-author-card{

    max-width:900px;
    margin:0 auto;

    background:#fffaf0;

    border:1px solid rgba(216,166,41,.35);

    border-radius:14px;

    padding:48px 56px;

    box-shadow:0 14px 34px rgba(23,54,93,.08);

    overflow:hidden;
}

.srl-lullaby-author-card h2{

    margin:0;

    text-align:center;

    color:var(--srl-color-primary);

    font-family:var(--srl-font-heading);

    font-size:clamp(34px,4vw,46px);

    line-height:1.1;

}

.srl-lullaby-author-card .srl-gold-divider{

    width:75%;

    margin:22px auto 38px;

}

/* Floating Image */

.srl-author-photo{

    float:left;

    width:260px;

    margin:0 34px 22px 0;

    border-radius:10px;

    box-shadow:0 14px 28px rgba(23,54,93,.16);

}

.srl-lullaby-author-card p{

    color:var(--srl-color-text);

    font-size:18px;

    line-height:1.75;

    margin:0 0 18px;

}

/* Button */

.srl-lullaby-author-buttons{

    clear:both;

    display:flex;

    justify-content:center;

    margin-top:35px;

}

/* Tablet */

@media (max-width:1024px){

.srl-lullaby-author{

padding:0 22px 60px;

}

.srl-lullaby-author-card{

padding:42px 38px;

}

.srl-author-photo{

width:220px;

margin:0 28px 18px 0;

}

}

/* Mobile */

@media (max-width:640px){

.srl-lullaby-author{

padding:0 20px 48px;

}

.srl-lullaby-author-card{

padding:34px 24px;

}

.srl-author-photo{

float:none;

display:block;

width:240px;

max-width:100%;

margin:0 auto 28px;

}

.srl-lullaby-author-card h2{

font-size:34px;

}

.srl-lullaby-author-card p{

font-size:17px;

line-height:1.65;

text-align:left;

}

.srl-lullaby-author-buttons{

justify-content:center;

}

}

/* ======================================
   Lullaby Page - Section 5
   About the Illustrator
====================================== */

.srl-lullaby-illustrator {
    background: #425B99;
    padding: 0 24px 70px;
}

.srl-lullaby-illustrator-inner {
    max-width: 1180px;
    margin: 0 auto;
}

.srl-lullaby-illustrator-card {
    max-width: 900px;
    margin: 0 auto;
    background: #fffaf0;
    border: 1px solid rgba(216,166,41,.35);
    border-radius: 14px;
    padding: 48px 56px;
    box-shadow: 0 14px 34px rgba(23,54,93,.08);
    overflow: hidden;
    box-sizing: border-box;
}

.srl-lullaby-illustrator-card h2 {
    margin: 0;
    text-align: center;
    color: var(--srl-color-primary);
    font-family: var(--srl-font-heading);
    font-size: clamp(34px,4vw,46px);
    line-height: 1.1;
}

.srl-lullaby-illustrator-card .srl-gold-divider {
    width: 75%;
    margin: 22px auto 38px;
}

.srl-illustrator-photo {
    float: left;
    width: 260px;
    margin: 0 34px 22px 0;
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(23,54,93,.16);
}

.srl-lullaby-illustrator-card p {
    color: var(--srl-color-text);
    font-size: 18px;
    line-height: 1.75;
    margin: 0 0 18px;
}

.srl-lullaby-illustrator-buttons {
    clear: both;
    display: flex;
    justify-content: center;
    margin-top: 35px;
    margin-bottom: 0;
}

.srl-lullaby-illustrator-buttons .srl-btn-primary {
    background: var(--srl-color-accent);
    color: var(--srl-color-white);
}

/* Tablet */

@media (max-width:1024px) {
    .srl-lullaby-illustrator {
        padding: 0 22px 60px;
    }

    .srl-lullaby-illustrator-card {
        padding: 42px 38px;
    }

    .srl-illustrator-photo {
        width: 220px;
        margin: 0 28px 18px 0;
    }
}

/* Mobile */

@media (max-width:640px) {
    .srl-lullaby-illustrator {
        padding: 0 20px 48px;
    }

    .srl-lullaby-illustrator-card {
        padding: 34px 24px;
    }

    .srl-illustrator-photo {
        float: none;
        display: block;
        width: 240px;
        max-width: 100%;
        margin: 0 auto 28px;
    }

    .srl-lullaby-illustrator-card h2 {
        font-size: 34px;
    }

    .srl-lullaby-illustrator-card p {
        font-size: 17px;
        line-height: 1.65;
        text-align: left;
    }

    .srl-lullaby-illustrator-buttons {
        justify-content: center;
    }
}


/* ======================================
   The Heart Speaks: Hero Section
====================================== */

.srl-heart-hero {
  position: relative;
  overflow: hidden;

  min-height: 680px;

  padding: 58px 24px 46px;

  background:
    var(--srl-color-primary)
    url("https://scottrlindberg.com/wp-content/uploads/2026/07/The-Heart-Speaks.jpg")
    center center / cover no-repeat;

  border-bottom: 1px solid rgba(216, 166, 41, .35);
}

.srl-heart-hero::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 1;

  background: rgba(7, 29, 22, .42);
}

.srl-heart-hero .srl-hero-inner {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: minmax(250px, 35%) minmax(420px, 1fr);
  align-items: start;

  width: 100%;
  max-width: 1200px;

  margin: 0 auto;

  gap: 38px;
}


/* ======================================
   Book Image
====================================== */

.srl-heart-book {
  display: flex;
  justify-content: center;
  align-items: flex-start;

  transform: translateY(-24px);
}

.srl-heart-book img {
  display: block;

  width: auto;
  height: auto;

  /*
   Approximately 75% of the previous
   430px maximum width.
  */
  max-width: 322px;
  max-height: 560px;

  margin: 0 auto;

  object-fit: contain;

  border-radius: 0;

  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .28));
}


/* ======================================
   Hero Copy
====================================== */

.srl-heart-content {
  width: 100%;
  max-width: 620px;

  padding-top: 0;

  transform: translateY(-22px);
}

.srl-heart-content h1 {
  margin: 0 0 4px;

  color: var(--srl-color-white);

  font-family: var(--srl-font-heading);
  font-size: clamp(46px, 5.5vw, 76px);
  font-weight: 700;
  line-height: 1;
}


/* ======================================
   Decorative Divider
====================================== */

.srl-heart-divider {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 520px;

  margin: 16px 0 20px;
}

.srl-heart-divider::before,
.srl-heart-divider::after {
  content: "";

  flex: 1;

  height: 1px;

  background: var(--srl-color-accent);
}

.srl-heart-divider::before {
  margin-right: 24px;
}

.srl-heart-divider::after {
  margin-left: 24px;
}

.srl-heart-divider span {
  display: inline-block;

  position: relative;
  z-index: 2;

  color: var(--srl-color-accent);

  font-family: var(--srl-font-body);
  font-size: 22px;
  line-height: 1;
}


/* ======================================
   Subtitle
====================================== */

.srl-heart-hero .srl-subtitle {
  max-width: 540px;

  margin: 0 0 20px;

  color: var(--srl-color-white);

  font-size: 20px;
  line-height: 1.5;
}


/* ======================================
   Amazon Button
====================================== */

.srl-heart-hero .srl-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  margin: 0 0 19px;
}

.srl-heart-btn {
  width: 185px;
  white-space: nowrap;
}


/* ======================================
   Book Information Row
====================================== */

.srl-heart-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  width: 100%;
  max-width: 500px;

  margin-top: 0;

  gap: 10px;
}

.srl-heart-info-card {
  padding: 10px 7px;

  background: rgba(251, 248, 242, .80);

  border: 1px solid rgba(216, 166, 41, .35);
  border-radius: 10px;

  text-align: center;

  box-shadow: 0 8px 18px rgba(0, 0, 0, .08);

  backdrop-filter: blur(2px);

  transition:
    transform .25s ease,
    border-color .25s ease;
}

.srl-heart-info-card:hover {
  transform: translateY(-3px);

  border-color: var(--srl-color-accent);
}

.srl-heart-info-card i {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  margin: 0 auto 7px;

  color: var(--srl-color-accent);

  font-size: 23px;
}

.srl-heart-info-card strong {
  display: block;

  margin-bottom: 4px;

  color: var(--srl-color-primary);

  font-family: var(--srl-font-heading);
  font-size: 13px;
  line-height: 1.2;
}

.srl-heart-info-card span {
  display: block;

  color: var(--srl-color-text);

  font-size: 12px;
  line-height: 1.3;
}


/* ======================================
   Amazon Review
====================================== */

.srl-heart-review {
  width: 100%;
  max-width: 540px;

  margin-top: 16px;
  padding: 16px 20px;

  background: rgba(251, 248, 242, .88);

  border: 1px solid rgba(216, 166, 41, .55);
  border-radius: 10px;

  box-shadow: 0 8px 18px rgba(0, 0, 0, .12);

  backdrop-filter: blur(2px);
}

.srl-heart-review-stars {
  display: flex;
  align-items: center;

  margin-bottom: 5px;

  gap: 3px;

  color: var(--srl-color-accent);

  font-size: 16px;
}

.srl-heart-review-title {
  display: block;

  margin-bottom: 5px;

  color: var(--srl-color-primary);

  font-family: var(--srl-font-heading);
  font-size: 17px;
  font-style: italic;
  line-height: 1.3;
}

.srl-heart-review p {
  margin: 0 0 6px;

  color: var(--srl-color-text);

  font-size: 14px;
  font-style: italic;
  line-height: 1.45;
}

.srl-heart-review-author {
  display: block;

  color: var(--srl-color-primary);

  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}


/* ======================================
   Tablet
====================================== */

@media only screen and (max-width: 1024px) {

  .srl-heart-hero {
    min-height: 650px;

    padding: 55px 24px 42px;
  }

  .srl-heart-hero .srl-hero-inner {
    grid-template-columns: minmax(230px, 34%) minmax(350px, 1fr);

    gap: 30px;
  }

  .srl-heart-book {
    transform: translateY(-16px);
  }

  .srl-heart-book img {
    max-width: 285px;
    max-height: 500px;
  }

  .srl-heart-content {
    transform: translateY(-16px);
  }

  .srl-heart-content h1 {
    font-size: clamp(44px, 6vw, 66px);
  }

  .srl-heart-hero .srl-subtitle {
    font-size: 18px;
  }

}


/* ======================================
   Mobile
====================================== */

@media only screen and (max-width: 860px) {

  .srl-heart-hero {
    min-height: auto;

    padding: 34px 20px 38px;

    background-position: center center;
  }

  .srl-heart-hero .srl-hero-inner {
    grid-template-columns: 1fr;

    gap: 16px;

    text-align: center;
  }

  .srl-heart-book {
    transform: translateY(-8px);
  }

  .srl-heart-book img {
    max-width: 230px;
    max-height: 400px;
  }

  .srl-heart-content {
    max-width: 620px;

    margin: 0 auto;

   /* transform: translateY(-8px);*/
  }

  .srl-heart-content h1 {
    font-size: clamp(40px, 12vw, 56px);
  }

  .srl-heart-divider {
    max-width: 400px;

    margin: 15px auto 18px;
  }

  .srl-heart-hero .srl-subtitle {
    max-width: 540px;

    margin-right: auto;
    margin-bottom: 19px;
    margin-left: auto;

    font-size: 18px;
  }

  .srl-heart-hero .srl-buttons {
    justify-content: center;
  }

  .srl-heart-info-grid {
    display: none;
  }

  .srl-heart-review {
    max-width: 540px;

    margin: 15px auto 0;

    text-align: left;
  }

}


/* ======================================
   Small Mobile
====================================== */

@media only screen and (max-width: 480px) {

  .srl-heart-hero {
    padding: 28px 16px 32px;
  }

  .srl-heart-book img {
    max-width: 205px;
  }

  .srl-heart-content h1 {
    font-size: 42px;
  }

  .srl-heart-divider::before {
    margin-right: 17px;
  }

  .srl-heart-divider::after {
    margin-left: 17px;
  }

  .srl-heart-review {
    padding: 15px 16px;
  }

  .srl-heart-review p {
    font-size: 13px;
  }

}


/* ======================================
   The Heart Speaks: Section #2
====================================== */

.srl-heart-about-section {
  width: 100%;
  padding: 75px 24px;

  background: #dfe8d8;
}

.srl-heart-about-inner {
  width: 100%;
  max-width: 1160px;

  margin: 0 auto;
}

.srl-heart-about-box {
  width: 100%;
  padding: 55px 65px;

  background: #fffaf0;

  border: 1px solid rgba(216, 166, 41, .22);
  border-radius: 12px;

  box-shadow: 0 10px 28px rgba(23, 54, 93, .10);
}

.srl-heart-about-box h2 {
  margin: 0;

  color: var(--srl-color-primary);

  font-family: var(--srl-font-heading);
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 700;
  line-height: 1.15;

  text-align: center;
}


/* Decorative Divider */

.srl-heart-section-divider {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 520px;

  margin: 20px auto 30px;

  color: var(--srl-color-accent);
}

.srl-heart-section-divider::before,
.srl-heart-section-divider::after {
  content: "";

  flex: 1;

  height: 1px;

  background: var(--srl-color-accent);
}

.srl-heart-section-divider::before {
  margin-right: 20px;
}

.srl-heart-section-divider::after {
  margin-left: 20px;
}

.srl-heart-section-divider span {
  color: var(--srl-color-accent);

  font-size: 24px;
  line-height: 1;

 /* transform: rotate(45deg);*/
}


/* About Copy */

.srl-heart-about-copy {
  width: 100%;
  max-width: 900px;

  margin: 0 auto;
}

.srl-heart-about-copy p {
  margin: 0;

  color: var(--srl-color-text);

  font-size: 18px;
  line-height: 1.8;
}


/* Amazon Button */

.srl-heart-about-buttons {
  display: flex;
  justify-content: center;

  margin-top: 30px;
}

.srl-heart-amazon-btn {
  min-width: 185px;
}


/* ======================================
   Tablet
====================================== */

@media only screen and (max-width: 1024px) {

  .srl-heart-about-section {
    padding: 60px 24px;
  }

  .srl-heart-about-box {
    padding: 48px 45px;
  }

  .srl-heart-about-copy p {
    font-size: 17px;
    line-height: 1.75;
  }

}


/* ======================================
   Mobile
====================================== */

@media only screen and (max-width: 767px) {

  .srl-heart-about-section {
    padding: 42px 18px;
  }

  .srl-heart-about-box {
    padding: 38px 24px;

    border-radius: 10px;
  }

  .srl-heart-about-box h2 {
    font-size: 34px;
  }

  .srl-heart-section-divider {
    margin-top: 17px;
    margin-bottom: 24px;
  }

  .srl-heart-about-copy p {
    font-size: 16px;
    line-height: 1.7;
  }

  .srl-heart-about-buttons {
    margin-top: 25px;
  }

}


/* ======================================
   Small Mobile
====================================== */

@media only screen and (max-width: 420px) {

  .srl-heart-about-section {
    padding-right: 14px;
    padding-left: 14px;
  }

  .srl-heart-about-box {
    padding: 32px 19px;
  }

  .srl-heart-about-box h2 {
    font-size: 30px;
  }

  .srl-heart-section-divider::before {
    margin-right: 15px;
  }

  .srl-heart-section-divider::after {
    margin-left: 15px;
  }

}



/* ======================================
   The Heart Speaks: Section #3
   About the Author
====================================== */

.srl-heart-author-section {
  padding-top: 0;
}

.srl-heart-author-layout {
  display: grid;
  grid-template-columns: 275px minmax(0, 1fr);
  align-items: start;

  max-width: 900px;
  margin: 0 auto;

  gap: 36px;
}

.srl-heart-author-image img {
  display: block;

  width: 100%;
  height: auto;

  border-radius: 10px;

  box-shadow: 0 12px 28px rgba(23, 54, 93, .14);
}

.srl-heart-author-copy p {
  margin: 0;

  color: var(--srl-color-text);

  font-size: 18px;
  line-height: 1.8;
}

.srl-heart-author-buttons {
  display: flex;
  justify-content: center;

  margin-top: 34px;
}

.srl-heart-author-btn {
  min-width: 185px;
}


/* ======================================
   Tablet
====================================== */

@media only screen and (max-width: 1024px) {

  .srl-heart-author-layout {
    grid-template-columns: 245px minmax(0, 1fr);

    max-width: 820px;

    gap: 30px;
  }

  .srl-heart-author-copy p {
    font-size: 17px;
    line-height: 1.75;
  }

}


/* ======================================
   Mobile
====================================== */

@media only screen and (max-width: 767px) {

  .srl-heart-author-layout {
    grid-template-columns: 1fr;

    max-width: 540px;

    gap: 26px;
  }

  .srl-heart-author-image {
    display: flex;
    justify-content: center;
  }

  .srl-heart-author-image img {
    width: 100%;
    max-width: 300px;
  }

  .srl-heart-author-copy p {
    font-size: 16px;
    line-height: 1.7;
  }

  .srl-heart-author-buttons {
    margin-top: 27px;
  }

}


/* ======================================
   Small Mobile
====================================== */

@media only screen and (max-width: 420px) {

  .srl-heart-author-image img {
    max-width: 260px;
  }

}


/* ======================================
   The Heart Speaks: Section #4
   About the Editor
====================================== */

.srl-heart-editor-section {
    padding-top: 0;
}

.srl-heart-editor-copy{
    max-width:980px;
    margin:0 auto;
}

.srl-heart-editor-photo{

    float:right;

    width:340px;

    margin:0 0 24px 34px;

    border-radius:10px;

    box-shadow:0 12px 28px rgba(23,54,93,.14);

}

.srl-heart-editor-copy p{
    margin:0 0 22px;
}

.srl-heart-editor-copy p:last-child{
    margin-bottom:0;
}


/* Tablet */

@media (max-width:1024px){

    .srl-heart-editor-photo{

        width:280px;

        margin-left:28px;

    }

}


/* Mobile */

@media (max-width:767px){

    .srl-heart-editor-photo{

        float:none;

        display:block;

        width:100%;
        max-width:300px;

        margin:0 auto 24px;

    }

}

/* ======================================
   Contact Page - Hero Section
====================================== */
.srl-contact-hero {
    position: relative;
    min-height: 590px;
    overflow: hidden;
    background: url("https://scottrlindberg.com/wp-content/uploads/2026/07/Contact-Scott-Randall-Lindberg-Yellow-Springs-Ohio.jpg") center center / cover no-repeat;
    display: flex;
    align-items: center;
}

.srl-contact-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0,0,0,.68) 0%,
        rgba(0,0,0,.46) 42%,
        rgba(0,0,0,.12) 100%
    );
    z-index: 1;
}

.srl-contact-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 60px 0 0 6%;
    gap: 30px;
}

.srl-contact-hero-content {
    max-width: 540px;
    padding-bottom: 45px;
    z-index: 3;
}

.srl-contact-hero-content h1 {
    margin: 0;
    color: #fff;
    font-family: var(--srl-font-heading);
    font-size: clamp(3rem,4.8vw,4.75rem);
    line-height: 1.1;
    font-weight: 700;
    white-space: nowrap;
}

.srl-contact-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 420px;
    margin: 26px 0 24px;
    color: var(--srl-color-accent);
}

.srl-contact-divider span{
    flex:1;
    height:2px;
    background:var(--srl-color-accent);
}

.srl-contact-divider em{
    width:14px;
    height:14px;
    border:2px solid var(--srl-color-accent);
    transform:rotate(45deg);
    display:block;
    flex:0 0 14px;
}

.srl-contact-hero-content p{
    color:#fff;
    font-size:1.18rem;
    line-height:1.55;
    margin:0 0 30px;
}

.srl-contact-buttons{
    display:flex;
    flex-direction:column;
    gap:16px;
    max-width:440px;
}


.srl-contact-phone{
    background:var(--srl-color-accent);
    color:#111;
}

.srl-contact-email{
    background:rgba(18,58,35,.82);
    color:#fff;
    border:2px solid rgba(255,255,255,.42);
}



.srl-contact-hero-image{
    flex:1;
    display:flex;
    justify-content:flex-end;
    align-items:flex-end;
    margin-right:-35px;
    pointer-events:none;
}

.srl-contact-hero-image img{
    width:100%;
    max-width:430px;
    height:auto;
    display:block;

    filter:drop-shadow(-20px 0 28px rgba(0,0,0,.28));

    mask-image:linear-gradient(
        90deg,
        transparent 0%,
        rgba(0,0,0,.12) 8%,
        #000 20%,
        #000 100%
    );

    -webkit-mask-image:linear-gradient(
        90deg,
        transparent 0%,
        rgba(0,0,0,.12) 8%,
        #000 20%,
        #000 100%
    );
}

/* ===========================
   TABLET
=========================== */

@media (max-width:1024px){

.srl-contact-hero{
    min-height:540px;
}

.srl-contact-hero-inner{
    padding:50px 0 0 4%;
}

.srl-contact-hero-content{
    max-width:430px;
}

.srl-contact-hero-content h1{
    font-size:3.1rem;
}

.srl-contact-hero-content p{
    font-size:1.05rem;
}



.srl-contact-hero-image{
    justify-content:flex-end;
    align-items:flex-end;
    margin-right:-65px;
}

.srl-contact-hero-image img{
    max-width:355px;
}

}

/* ===========================
   MOBILE
=========================== */

@media (max-width:767px){

.srl-contact-hero{
    min-height:auto;
}

.srl-contact-hero-overlay{
    background:rgba(0,0,0,.62);
}

.srl-contact-hero-inner{
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
    padding:50px 0 0 22px;
}

.srl-contact-hero-content{
    width:calc(100% - 22px);
    max-width:100%;
    padding-bottom:10px;
}

.srl-contact-hero-content h1{
    font-size:2.8rem;
}

.srl-contact-divider{
    margin:22px 0;
}

.srl-contact-buttons{
    width:calc(100% - 22px);
    max-width:none;
}

.srl-contact-btn{
  width: 100%;
}

.srl-contact-hero-image{
    width:100%;
    justify-content:flex-end;
    align-items:flex-end;
    margin-right:-35px;
}

.srl-contact-hero-image img{
    max-width:250px;
    margin:20px 0 0 auto;
}

}

/* =====================================================
   WHAT SCOTT OFFERS
===================================================== */

.srl-offers-section{
    width:100%;
    background:var(--srl-color-bg);
    padding:100px 25px;
}

.srl-offers-container{
    max-width:1200px;
    margin:auto;
}

.srl-section-heading{
    text-align:center;
    max-width:760px;
    margin:0 auto 70px;
}

.srl-section-heading h2{
    font-size:3.5rem;
    color:#19351F;
    margin:25px 0;
    line-height:1.15;
}

.srl-section-heading p{
    font-size:1.2rem;
    line-height:1.8;
    color:#444;
}

.srl-heading-divider{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    margin-bottom:10px;
}

.srl-heading-divider span{
    width:70px;
    height:2px;
    background:var(--srl-color-accent);
}

.srl-heading-divider em{
    width:14px;
    height:14px;
    border:2px solid var(--srl-color-accent);
    transform:rotate(45deg);
    display:block;
}

.srl-offers-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px 60px;
}

.srl-offer-card{
    display:flex;
    align-items:flex-start;
    gap:28px;
    background:#FBF8F2;
    padding:28px;
    border-radius:18px;
    box-shadow:0 12px 28px rgba(0,0,0,.05);
    transition:.3s;
}

.srl-offer-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.srl-offer-icon{
    width:100px;
    height:100px;
    min-width:100px;
    border-radius:50%;
    background:#19351F;
    display:flex;
    justify-content:center;
    align-items:center;
}

.srl-offer-icon i{
    color:#d8a629;
    font-size:2.7rem;
}

.srl-offer-content h3{
    color:#19351F;
    margin:5px 0 15px;
    font-size:2rem;
}

.srl-offer-content p{
    color:#444;
    line-height:1.75;
    margin:0;
    font-size:1.08rem;
}

.srl-offers-bottom{
    text-align:center;
    margin-top:80px;
}

.srl-offers-bottom p{
    margin-top:25px;
    font-size:1.35rem;
    color:#333;
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
    line-height:1.7;
}

/* =======================
   Tablet
======================= */

@media(max-width:991px){

.srl-offers-grid{
    grid-template-columns:1fr;
    gap:30px;
}

.srl-section-heading h2{
    font-size:3rem;
}

}

/* =======================
   Mobile
======================= */

@media(max-width:767px){

.srl-offers-section{
    padding:70px 20px;
}

.srl-offer-card{
    flex-direction:column;
    text-align:center;
    align-items:center;
}

.srl-offer-content h3{
    font-size:1.8rem;
}

.srl-offer-icon{
    width:90px;
    height:90px;
    min-width:90px;
}

.srl-offer-icon i{
    font-size:2.4rem;
}

.srl-section-heading h2{
    font-size:2.5rem;
}

.srl-offers-bottom p{
    font-size:1.15rem;
}

}

/* =========================================================
   VERSION 2 — FINAL NORMALIZATION
   This layer keeps legacy page sections visually consistent.
========================================================= */

[class^="srl-"] h1,
[class^="srl-"] h2,
[class^="srl-"] h3,
[class^="srl-"] h4,
[class*=" srl-"] h1,
[class*=" srl-"] h2,
[class*=" srl-"] h3,
[class*=" srl-"] h4 {
  font-family: var(--srl-font-heading);
}

[class^="srl-"] p,
[class^="srl-"] li,
[class^="srl-"] blockquote,
[class*=" srl-"] p,
[class*=" srl-"] li,
[class*=" srl-"] blockquote {
  font-family: var(--srl-font-body);
}



.srl-btn-primary:hover, .srl-btn-primary:focus, .srl-contact-email:hover, .srl-contact-email:focus{
  background: var(--srl-accent);
  border-color: var(--srl-accent);
  color: var(--srl-primary);
}

.srl-btn-secondary:hover, .srl-btn-secondary:focus, .srl-contact-phone:hover, .srl-contact-phone:focus{
  background: var(--srl-accent);
  border-color: var(--srl-accent);
  color: var(--srl-primary);
}

@media (max-width: 600px) {
  .srl-btn,
  .srl-book-btn,
  .srl-lullaby-btn,
  .srl-heart-btn,
  .srl-heart-amazon-btn,
  .srl-heart-author-btn,
  .srl-music-about-button,
  .srl-music-includes-button,
  .srl-gallery-final-cta-button,
  .srl-contact-btn {
  width: 100%;
  max-width: 360px;
}
}



/* SRL kicker standard */
.srl-kicker,
.srl-section-kicker,
.srl-gallery-eyebrow,
.srl-events-eyebrow,
.srl-blog-eyebrow {
  color: #d8a629 !important;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Exact button standard applied to every SRL button type */


/* Default and visited states */


/* Hover and focus states */


/* Button icons inherit the button copy color */


/* Visible keyboard focus */


/* Mobile */
@media (max-width: 600px) {
  .srl-btn,
  .srl-book-btn,
  .srl-lullaby-btn,
  .srl-heart-btn,
  .srl-heart-amazon-btn,
  .srl-heart-author-btn,
  .srl-music-about-button,
  .srl-music-includes-button,
  .srl-gallery-final-cta-button,
  .srl-contact-btn,
  .wp-block-button__link {
  width: 100%;
  max-width: 360px;
}
}

/* =========================================================
   VERSION 3.0 — MASTER KICKER AND BUTTON SYSTEM

   This is the single visual source of truth for SRL kickers
   and buttons. Page-specific rules may control only layout,
   such as width, margin, wrapping, and placement.
========================================================= */

/* SRL kicker standard */
.srl-kicker,
.srl-section-kicker,
.srl-gallery-eyebrow,
.srl-events-eyebrow,
.srl-blog-eyebrow {
  color: #D8A629;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Master SRL button standard */
body .srl-btn,
body .srl-book-btn,
body .srl-lullaby-btn,
body .srl-heart-btn,
body .srl-heart-amazon-btn,
body .srl-heart-author-btn,
body .srl-music-about-button,
body .srl-music-includes-button,
body .srl-gallery-final-cta-button,
body .srl-contact-btn,
body .wp-block-button__link,
body button,
body input[type="button"],
body input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;

  min-height: 52px;
  padding: 14px 30px;

  background-color: #17365D;
  border: 2px solid #17365D;
  border-radius: 7px;
  color: #FFFFFF;

  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  text-transform: none;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  cursor: pointer;

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

/* Visited buttons retain the default standard */
body .srl-btn:visited,
body .srl-book-btn:visited,
body .srl-lullaby-btn:visited,
body .srl-heart-btn:visited,
body .srl-heart-amazon-btn:visited,
body .srl-heart-author-btn:visited,
body .srl-music-about-button:visited,
body .srl-music-includes-button:visited,
body .srl-gallery-final-cta-button:visited,
body .srl-contact-btn:visited,
body .wp-block-button__link:visited {
  background-color: #17365D;
  border-color: #17365D;
  color: #FFFFFF;
}

/* Exact hover and focus standard */
body .srl-btn:hover,
body .srl-btn:focus,
body .srl-book-btn:hover,
body .srl-book-btn:focus,
body .srl-lullaby-btn:hover,
body .srl-lullaby-btn:focus,
body .srl-heart-btn:hover,
body .srl-heart-btn:focus,
body .srl-heart-amazon-btn:hover,
body .srl-heart-amazon-btn:focus,
body .srl-heart-author-btn:hover,
body .srl-heart-author-btn:focus,
body .srl-music-about-button:hover,
body .srl-music-about-button:focus,
body .srl-music-includes-button:hover,
body .srl-music-includes-button:focus,
body .srl-gallery-final-cta-button:hover,
body .srl-gallery-final-cta-button:focus,
body .srl-contact-btn:hover,
body .srl-contact-btn:focus,
body .wp-block-button__link:hover,
body .wp-block-button__link:focus,
body button:hover,
body button:focus,
body input[type="button"]:hover,
body input[type="button"]:focus,
body input[type="submit"]:hover,
body input[type="submit"]:focus {
  background-color: #FFD76A;
  border-color: #FFD76A;
  color: #17365D;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* Icons always follow the button text color */
body .srl-btn i,
body .srl-btn svg,
body .srl-book-btn i,
body .srl-book-btn svg,
body .srl-lullaby-btn i,
body .srl-lullaby-btn svg,
body .srl-heart-btn i,
body .srl-heart-btn svg,
body .srl-heart-amazon-btn i,
body .srl-heart-amazon-btn svg,
body .srl-heart-author-btn i,
body .srl-heart-author-btn svg,
body .srl-music-about-button i,
body .srl-music-about-button svg,
body .srl-music-includes-button i,
body .srl-music-includes-button svg,
body .srl-gallery-final-cta-button i,
body .srl-gallery-final-cta-button svg,
body .srl-contact-btn i,
body .srl-contact-btn svg {
  color: inherit;
  fill: currentColor;
}

/* Accessible keyboard focus */
body .srl-btn:focus-visible,
body .srl-book-btn:focus-visible,
body .srl-lullaby-btn:focus-visible,
body .srl-heart-btn:focus-visible,
body .srl-heart-amazon-btn:focus-visible,
body .srl-heart-author-btn:focus-visible,
body .srl-music-about-button:focus-visible,
body .srl-music-includes-button:focus-visible,
body .srl-gallery-final-cta-button:focus-visible,
body .srl-contact-btn:focus-visible,
body .wp-block-button__link:focus-visible,
body button:focus-visible,
body input[type="button"]:focus-visible,
body input[type="submit"]:focus-visible {
  outline: 3px solid #FFD76A;
  outline-offset: 3px;
}

/* Mobile buttons maintain the same typography and colors */
@media (max-width: 600px) {
  body .srl-btn,
  body .srl-book-btn,
  body .srl-lullaby-btn,
  body .srl-heart-btn,
  body .srl-heart-amazon-btn,
  body .srl-heart-author-btn,
  body .srl-music-about-button,
  body .srl-music-includes-button,
  body .srl-gallery-final-cta-button,
  body .srl-contact-btn,
  body .wp-block-button__link {
    width: 100%;
    max-width: 360px;
    padding: 14px 24px;
    font-size: 18px;
  }
}

/* =========================================================
   VERSION 3.1 — FRONT PAGE HERO BUTTON ENFORCEMENT

   The selector intentionally includes the WordPress home
   body class, hero container, button wrapper, anchor element,
   and button classes. The limited !important declarations
   prevent GeneratePress or cached button-color rules from
   replacing the approved SRL colors.
========================================================= */

body.home .srl-hero .srl-buttons > a.srl-btn,
body.home .srl-hero .srl-buttons > a.srl-btn.srl-btn-primary,
body.home .srl-hero .srl-buttons > a.srl-btn.srl-btn-secondary,
body.home .srl-hero .srl-buttons > a.srl-btn:link,
body.home .srl-hero .srl-buttons > a.srl-btn:visited {
  background: #17365D !important;
  background-color: #17365D !important;
  border-color: #17365D !important;
  color: #FFFFFF !important;
}

body.home .srl-hero .srl-buttons > a.srl-btn:hover,
body.home .srl-hero .srl-buttons > a.srl-btn:focus,
body.home .srl-hero .srl-buttons > a.srl-btn.srl-btn-primary:hover,
body.home .srl-hero .srl-buttons > a.srl-btn.srl-btn-primary:focus,
body.home .srl-hero .srl-buttons > a.srl-btn.srl-btn-secondary:hover,
body.home .srl-hero .srl-buttons > a.srl-btn.srl-btn-secondary:focus {
  background: #FFD76A !important;
  background-color: #FFD76A !important;
  border-color: #FFD76A !important;
  color: #17365D !important;
}

body.home .srl-hero .srl-buttons > a.srl-btn i,
body.home .srl-hero .srl-buttons > a.srl-btn svg {
  color: inherit !important;
  fill: currentColor !important;
}

/*Upcoming Events Page - Settings*/
.srl-current-month-events-heading {
    text-align: center;
    margin: 0 0 1.5rem;
}


/* =========================================================
   VERSION 3.1.4 — LULLABY CONTENT SECTION ENFORCEMENT
========================================================= */

/* Section backgrounds */
.srl-lullaby-about-book,
.srl-lullaby-praise,
.srl-lullaby-author,
.srl-lullaby-illustrator {
  background: #425B99 !important;
}

/* Gold star divider */
.srl-lullaby-about-card .srl-gold-divider,
.srl-lullaby-praise-card .srl-gold-divider,
.srl-lullaby-author-card .srl-gold-divider,
.srl-lullaby-illustrator-card .srl-gold-divider {
  background: #FFD76A !important;
  color: #FFD76A !important;
}

.srl-lullaby-about-card .srl-gold-divider::after,
.srl-lullaby-praise-card .srl-gold-divider::after,
.srl-lullaby-author-card .srl-gold-divider::after,
.srl-lullaby-illustrator-card .srl-gold-divider::after {
  content: "★";
  background: #FFFAF0;
  color: #FFD76A !important;
}

/* Praise review stars */
.srl-praise-star,
.srl-praise-star i,
.srl-praise-star .fa-solid,
.srl-praise-star .fa-star {
  color: #425B99 !important;
}

/* Lullaby content-section button containers */
.srl-lullaby-about-buttons,
.srl-lullaby-author-buttons,
.srl-lullaby-illustrator-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* Lullaby content-section buttons */
body .srl-lullaby-about-buttons > a.srl-btn,
body .srl-lullaby-author-buttons > a.srl-btn,
body .srl-lullaby-illustrator-buttons > a.srl-btn,
body .srl-lullaby-about-buttons > a.srl-btn:link,
body .srl-lullaby-about-buttons > a.srl-btn:visited,
body .srl-lullaby-author-buttons > a.srl-btn:link,
body .srl-lullaby-author-buttons > a.srl-btn:visited,
body .srl-lullaby-illustrator-buttons > a.srl-btn:link,
body .srl-lullaby-illustrator-buttons > a.srl-btn:visited {
  width: auto;
  min-width: 230px;
  max-width: 100%;
  padding: 14px 30px;

  background: #17365D !important;
  background-color: #17365D !important;
  border-color: #17365D !important;
  color: #FFFFFF !important;

  font-family: "Lato", Arial, Helvetica, sans-serif !important;
  font-size: 20px !important;
  font-weight: 600;
  white-space: nowrap;
}

body .srl-lullaby-about-buttons > a.srl-btn:hover,
body .srl-lullaby-about-buttons > a.srl-btn:focus,
body .srl-lullaby-author-buttons > a.srl-btn:hover,
body .srl-lullaby-author-buttons > a.srl-btn:focus,
body .srl-lullaby-illustrator-buttons > a.srl-btn:hover,
body .srl-lullaby-illustrator-buttons > a.srl-btn:focus {
  background: #FFD76A !important;
  background-color: #FFD76A !important;
  border-color: #FFD76A !important;
  color: #17365D !important;
}

@media (max-width: 640px) {
  .srl-lullaby-about-buttons,
  .srl-lullaby-author-buttons,
  .srl-lullaby-illustrator-buttons {
    flex-direction: column;
  }

  body .srl-lullaby-about-buttons > a.srl-btn,
  body .srl-lullaby-author-buttons > a.srl-btn,
  body .srl-lullaby-illustrator-buttons > a.srl-btn {
    width: 100%;
    min-width: 0;
    max-width: 360px;
    white-space: normal;
  }
}


/* =========================================================
   VERSION 3.1.5 — THE HEART SPEAKS PAGE ENFORCEMENT
========================================================= */

/* Hero height and layout */
.srl-heart-hero {
  min-height: calc(100vh - 110px) !important;
  max-height: 760px;
  padding: 40px 24px 28px !important;
  display: flex;
  align-items: center;
}

.srl-heart-hero .srl-hero-inner {
  grid-template-columns: minmax(250px, 32%) minmax(560px, 1fr);
  align-items: center;
  gap: 32px;
}

.srl-heart-content {
  width: 100%;
  max-width: 760px !important;
  transform: translateY(-12px);
}

.srl-heart-content h1 {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(50px, 5.2vw, 72px);
}

.srl-heart-book {
  transform: translateY(-10px);
}

.srl-heart-book img {
  max-width: 300px;
  max-height: 500px;
}

/* Hero button */
body .srl-heart-hero .srl-buttons > a.srl-btn,
body .srl-heart-hero .srl-buttons > a.srl-btn:link,
body .srl-heart-hero .srl-buttons > a.srl-btn:visited,
body .srl-heart-hero .srl-buttons > a.srl-btn.srl-btn-primary,
body .srl-heart-hero .srl-buttons > a.srl-btn.srl-btn-primary:visited,
body .srl-heart-hero .srl-buttons > a.srl-lullaby-btn,
body .srl-heart-hero .srl-buttons > a.srl-heart-btn {
  width: auto;
  min-width: 220px;
  max-width: 100%;
  padding: 14px 30px;

  background: #17365D !important;
  background-color: #17365D !important;
  border-color: #17365D !important;
  color: #FFFFFF !important;

  font-family: "Lato", Arial, Helvetica, sans-serif !important;
  font-size: 20px !important;
  font-weight: 600;
  white-space: nowrap;
}

body .srl-heart-hero .srl-buttons > a.srl-btn:hover,
body .srl-heart-hero .srl-buttons > a.srl-btn:focus,
body .srl-heart-hero .srl-buttons > a.srl-btn.srl-btn-primary:hover,
body .srl-heart-hero .srl-buttons > a.srl-btn.srl-btn-primary:focus,
body .srl-heart-hero .srl-buttons > a.srl-lullaby-btn:hover,
body .srl-heart-hero .srl-buttons > a.srl-lullaby-btn:focus,
body .srl-heart-hero .srl-buttons > a.srl-heart-btn:hover,
body .srl-heart-hero .srl-buttons > a.srl-heart-btn:focus {
  background: #FFD76A !important;
  background-color: #FFD76A !important;
  border-color: #FFD76A !important;
  color: #17365D !important;
}

/* Heart Speaks information cards — 75% transparent */
.srl-heart-info-card,
.srl-heart-hero .srl-lullaby-info-card {
  background: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Review stars */
.srl-heart-review-stars,
.srl-heart-review-stars i,
.srl-heart-review-stars .fa-solid,
.srl-heart-review-stars .fa-star {
  color: #FFD76A !important;
}

/* Section divider and icon */
.srl-heart-section-divider,
.srl-heart-section-divider span,
.srl-heart-section-divider i {
  color: #FFD76A !important;
}

.srl-heart-section-divider::before,
.srl-heart-section-divider::after {
  background: #FFD76A !important;
}

/* About and author button containers */
.srl-heart-about-buttons,
.srl-heart-author-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* About and author buttons */
body .srl-heart-about-buttons > a.srl-btn,
body .srl-heart-author-buttons > a.srl-btn,
body .srl-heart-about-buttons > a.srl-btn:link,
body .srl-heart-about-buttons > a.srl-btn:visited,
body .srl-heart-author-buttons > a.srl-btn:link,
body .srl-heart-author-buttons > a.srl-btn:visited,
body .srl-heart-about-buttons > a.srl-heart-amazon-btn,
body .srl-heart-author-buttons > a.srl-heart-author-btn {
  width: auto;
  min-width: 220px;
  max-width: 100%;
  padding: 14px 30px;

  background: #17365D !important;
  background-color: #17365D !important;
  border-color: #17365D !important;
  color: #FFFFFF !important;

  font-family: "Lato", Arial, Helvetica, sans-serif !important;
  font-size: 20px !important;
  font-weight: 600;
  white-space: nowrap;
}

body .srl-heart-about-buttons > a.srl-btn:hover,
body .srl-heart-about-buttons > a.srl-btn:focus,
body .srl-heart-author-buttons > a.srl-btn:hover,
body .srl-heart-author-buttons > a.srl-btn:focus,
body .srl-heart-about-buttons > a.srl-heart-amazon-btn:hover,
body .srl-heart-about-buttons > a.srl-heart-amazon-btn:focus,
body .srl-heart-author-buttons > a.srl-heart-author-btn:hover,
body .srl-heart-author-buttons > a.srl-heart-author-btn:focus {
  background: #FFD76A !important;
  background-color: #FFD76A !important;
  border-color: #FFD76A !important;
  color: #17365D !important;
}

/* Smaller desktop and laptop */
@media (max-width: 1280px) and (min-width: 1025px) {
  .srl-heart-hero {
    min-height: calc(100vh - 105px) !important;
    padding-top: 34px !important;
    padding-bottom: 24px !important;
  }

  .srl-heart-hero .srl-hero-inner {
    grid-template-columns: minmax(230px, 31%) minmax(520px, 1fr);
  }

  .srl-heart-content {
    max-width: 700px !important;
    transform: translateY(-8px);
  }

  .srl-heart-content h1 {
    font-size: clamp(48px, 5vw, 66px);
  }

  .srl-heart-book img {
    max-width: 280px;
    max-height: 470px;
  }
}

/* Tablet */
@media (max-width: 1024px) and (min-width: 861px) {
  .srl-heart-hero {
    min-height: auto !important;
    max-height: none;
    padding: 42px 22px 34px !important;
  }

  .srl-heart-hero .srl-hero-inner {
    grid-template-columns: minmax(220px, 32%) minmax(450px, 1fr);
    gap: 26px;
  }

  .srl-heart-content {
    max-width: 620px !important;
    transform: translateY(-6px);
  }

  .srl-heart-content h1 {
    font-size: clamp(44px, 6vw, 60px);
    white-space: nowrap;
  }

  .srl-heart-book img {
    max-width: 260px;
    max-height: 440px;
  }
}

/* Mobile */
@media (max-width: 860px) {
  .srl-heart-hero {
    min-height: auto !important;
    max-height: none;
    padding: 32px 20px 38px !important;
  }

  .srl-heart-content {
    max-width: 680px !important;
    transform: none;
  }

  .srl-heart-content h1 {
    white-space: normal;
  }

  body .srl-heart-hero .srl-buttons > a.srl-btn,
  body .srl-heart-about-buttons > a.srl-btn,
  body .srl-heart-author-buttons > a.srl-btn {
    width: 100%;
    min-width: 0;
    max-width: 360px;
    white-space: normal;
  }
}


/* =========================================================
   VERSION 3.1.6 — THE HEART SPEAKS HERO FINAL ENFORCEMENT
========================================================= */

/*
  The Heart Speaks uses the shared Lullaby hero classes.
  These selectors are intentionally placed at the end of
  the stylesheet so they override the earlier shared rules.
*/

/* Desktop hero dimensions and alignment */
@media (min-width: 1025px) {

  .srl-heart-hero {
    min-height: calc(100vh - 110px) !important;
    max-height: 760px;
    padding: 36px 24px 26px !important;
    display: flex;
    align-items: center;
  }

  .srl-heart-hero .srl-hero-inner {
    width: 100%;
    max-width: 1450px !important;
    padding-right: 24px;
    padding-left: 24px;

    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
    align-items: center;
    gap: 52px !important;
  }

  .srl-heart-hero .srl-hero-book {
    transform: translateY(-6px);
  }

  .srl-heart-hero .srl-hero-book img {
    width: auto;
    max-width: 330px;
    max-height: 520px;
  }

  .srl-heart-hero .srl-hero-content,
  .srl-heart-hero .srl-heart-content {
    width: 100%;
    max-width: 940px !important;
    min-width: 0;
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: translateY(18px);
  }

  .srl-heart-hero .srl-hero-content h1,
  .srl-heart-hero .srl-heart-content h1 {
    display: block;
    width: max-content;
    max-width: 100% !important;
    margin: 0 0 6px;

    color: #FFFFFF !important;
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: clamp(58px, 5vw, 78px) !important;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;

    white-space: nowrap !important;
    overflow-wrap: normal;
    word-break: normal;
  }

  .srl-heart-hero .srl-lullaby-divider {
    max-width: 610px;
    margin-top: 18px;
    margin-bottom: 24px;
  }

  .srl-heart-hero .srl-subtitle {
    max-width: 700px;
    margin-bottom: 22px;
  }

  .srl-heart-hero .srl-lullaby-info-grid,
  .srl-heart-hero .srl-heart-info-grid {
    max-width: 640px;
  }

  .srl-heart-hero .srl-heart-review {
    max-width: 640px;
  }
}

/* Smaller desktop and laptop */
@media (min-width: 1025px) and (max-width: 1400px) {

  .srl-heart-hero .srl-hero-inner {
    max-width: 1240px !important;
    grid-template-columns: minmax(270px, 320px) minmax(0, 1fr) !important;
    gap: 40px !important;
  }

  .srl-heart-hero .srl-hero-book img {
    max-width: 300px;
    max-height: 490px;
  }

  .srl-heart-hero .srl-hero-content,
  .srl-heart-hero .srl-heart-content {
    max-width: 820px !important;
    transform: translateY(14px);
  }

  .srl-heart-hero .srl-hero-content h1,
  .srl-heart-hero .srl-heart-content h1 {
    font-size: clamp(52px, 5vw, 68px) !important;
  }
}

/*
  Information cards:
  90% white opacity, which equals 10% transparency.
*/
.srl-heart-hero .srl-lullaby-info-card,
.srl-heart-hero .srl-heart-info-card {
  background: rgba(255, 255, 255, 0.90) !important;
  background-color: rgba(255, 255, 255, 0.90) !important;

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Keep card copy readable */
.srl-heart-hero .srl-lullaby-info-card strong,
.srl-heart-hero .srl-heart-info-card strong {
  color: #17365D !important;
}

.srl-heart-hero .srl-lullaby-info-card span,
.srl-heart-hero .srl-heart-info-card span {
  color: #3E4753 !important;
}

/* Tablet */
@media (min-width: 861px) and (max-width: 1024px) {

  .srl-heart-hero {
    min-height: auto !important;
    max-height: none;
    padding: 42px 22px 34px !important;
  }

  .srl-heart-hero .srl-hero-inner {
    max-width: 980px !important;
    grid-template-columns: minmax(230px, 290px) minmax(0, 1fr) !important;
    gap: 30px !important;
  }

  .srl-heart-hero .srl-hero-content,
  .srl-heart-hero .srl-heart-content {
    max-width: 650px !important;
    margin-top: 0 !important;
    transform: none;
  }

  .srl-heart-hero .srl-hero-content h1,
  .srl-heart-hero .srl-heart-content h1 {
    width: max-content;
    max-width: 100% !important;
    font-size: clamp(44px, 5.8vw, 58px) !important;
    white-space: nowrap !important;
  }

  .srl-heart-hero .srl-hero-book img {
    max-width: 270px;
    max-height: 450px;
  }
}

/* Mobile */
@media (max-width: 860px) {

  .srl-heart-hero .srl-hero-content,
  .srl-heart-hero .srl-heart-content {
    max-width: 680px !important;
    margin-top: 0 !important;
    transform: none;
  }

  .srl-heart-hero .srl-hero-content h1,
  .srl-heart-hero .srl-heart-content h1 {
    width: auto;
    max-width: 100% !important;
    white-space: normal !important;
  }
}


/* =========================================================
   VERSION 3.1.7 — MEET SCOTT PAGE ENFORCEMENT
========================================================= */

/*
  Keeps the Meet Scott hero within the initial desktop
  viewport while preserving the existing background image,
  overlay, content alignment, and responsive behavior.
*/

/* Desktop */
@media (min-width: 1025px) {

  .srl-hero.srl-meet-hero {
    min-height: calc(100vh - 110px) !important;
    max-height: 720px;
    padding: 34px 24px 26px !important;

    display: flex;
    align-items: center;
  }

  .srl-meet-hero .srl-hero-inner {
    width: 100%;
    max-width: 1200px;
  }

  .srl-meet-hero .srl-hero-content {
    width: 100%;
    max-width: 680px;

    margin: 0;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .srl-meet-hero .srl-buttons {
    margin-top: 22px;
    margin-bottom: 0;
  }
}

/* Shorter desktop and laptop screens */
@media (min-width: 1025px) and (max-height: 850px) {

  .srl-hero.srl-meet-hero {
    min-height: calc(100vh - 105px) !important;
    max-height: 660px;
    padding-top: 26px !important;
    padding-bottom: 22px !important;
  }

  .srl-meet-hero .srl-hero-content {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .srl-meet-hero .srl-buttons {
    margin-top: 18px;
  }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {

  .srl-hero.srl-meet-hero {
    min-height: calc(100vh - 100px) !important;
    max-height: 650px;
    padding: 40px 22px 30px !important;
  }

  .srl-meet-hero .srl-hero-content {
    max-width: 620px;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {

  .srl-hero.srl-meet-hero {
    min-height: auto !important;
    max-height: none;
    padding: 52px 20px 44px !important;
  }

  .srl-meet-hero .srl-hero-content {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

/* =========================================================
   MEET SCOTT PAGE BUTTON CONTAINERS
========================================================= */

.srl-meet-hero .srl-buttons,
.srl-meet-page-intro .srl-buttons,
.srl-author-stories .srl-buttons,
.srl-books-display .srl-buttons,
.srl-yellow-springs .srl-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* =========================================================
   MEET SCOTT PAGE BUTTONS
========================================================= */

/*
  Applies to:
  .srl-btn.srl-btn-primary
  .srl-book-btn
  and other SRL buttons appearing within Meet Scott sections.
*/

body .srl-meet-hero .srl-buttons > a.srl-btn,
body .srl-meet-page-intro .srl-buttons > a.srl-btn,
body .srl-author-stories a.srl-btn,
body .srl-author-stories a.srl-book-btn,
body .srl-books-display a.srl-btn,
body .srl-books-display a.srl-book-btn,
body .srl-yellow-springs .srl-buttons > a.srl-btn,
body .srl-meet-hero .srl-buttons > a.srl-btn:link,
body .srl-meet-hero .srl-buttons > a.srl-btn:visited,
body .srl-meet-page-intro .srl-buttons > a.srl-btn:link,
body .srl-meet-page-intro .srl-buttons > a.srl-btn:visited,
body .srl-author-stories a.srl-btn:link,
body .srl-author-stories a.srl-btn:visited,
body .srl-author-stories a.srl-book-btn:link,
body .srl-author-stories a.srl-book-btn:visited,
body .srl-books-display a.srl-btn:link,
body .srl-books-display a.srl-btn:visited,
body .srl-books-display a.srl-book-btn:link,
body .srl-books-display a.srl-book-btn:visited,
body .srl-yellow-springs .srl-buttons > a.srl-btn:link,
body .srl-yellow-springs .srl-buttons > a.srl-btn:visited {
  width: auto;
  min-width: 220px;
  max-width: 100%;
  padding: 14px 30px;

  background: #17365D !important;
  background-color: #17365D !important;
  border: 2px solid #17365D !important;
  border-color: #17365D !important;
  color: #FFFFFF !important;

  font-family: "Lato", Arial, Helvetica, sans-serif !important;
  font-size: 20px !important;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* Hover and keyboard focus */
body .srl-meet-hero .srl-buttons > a.srl-btn:hover,
body .srl-meet-hero .srl-buttons > a.srl-btn:focus,
body .srl-meet-page-intro .srl-buttons > a.srl-btn:hover,
body .srl-meet-page-intro .srl-buttons > a.srl-btn:focus,
body .srl-author-stories a.srl-btn:hover,
body .srl-author-stories a.srl-btn:focus,
body .srl-author-stories a.srl-book-btn:hover,
body .srl-author-stories a.srl-book-btn:focus,
body .srl-books-display a.srl-btn:hover,
body .srl-books-display a.srl-btn:focus,
body .srl-books-display a.srl-book-btn:hover,
body .srl-books-display a.srl-book-btn:focus,
body .srl-yellow-springs .srl-buttons > a.srl-btn:hover,
body .srl-yellow-springs .srl-buttons > a.srl-btn:focus {
  background: #FFD76A !important;
  background-color: #FFD76A !important;
  border-color: #FFD76A !important;
  color: #17365D !important;
}

/* Button icons inherit the current text color */
body .srl-meet-hero .srl-btn i,
body .srl-meet-hero .srl-btn svg,
body .srl-meet-page-intro .srl-btn i,
body .srl-meet-page-intro .srl-btn svg,
body .srl-author-stories .srl-btn i,
body .srl-author-stories .srl-btn svg,
body .srl-author-stories .srl-book-btn i,
body .srl-author-stories .srl-book-btn svg,
body .srl-yellow-springs .srl-btn i,
body .srl-yellow-springs .srl-btn svg {
  color: inherit !important;
  fill: currentColor !important;
}

/* Mobile buttons */
@media (max-width: 640px) {

  .srl-meet-hero .srl-buttons,
  .srl-meet-page-intro .srl-buttons,
  .srl-author-stories .srl-buttons,
  .srl-books-display .srl-buttons,
  .srl-yellow-springs .srl-buttons {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  body .srl-meet-hero .srl-buttons > a.srl-btn,
  body .srl-meet-page-intro .srl-buttons > a.srl-btn,
  body .srl-author-stories a.srl-btn,
  body .srl-author-stories a.srl-book-btn,
  body .srl-books-display a.srl-btn,
  body .srl-books-display a.srl-book-btn,
  body .srl-yellow-springs .srl-buttons > a.srl-btn {
    width: 100%;
    min-width: 0;
    max-width: 360px;
    padding: 14px 22px;
    white-space: normal;
  }
}

/* =========================================================
   VERSION 3.1.8 — MUSIC LESSONS PAGE ENFORCEMENT
========================================================= */

/* Music Lessons page standard buttons: About Scott and related primary CTAs */
body .srl-music-about-button,
body .srl-music-about-button:link,
body .srl-music-about-button:visited,
body .srl-buttons > .srl-btn.srl-btn-primary.srl-music-about-button,
body .srl-buttons > .srl-btn.srl-btn-primary.srl-music-about-button:visited {
  width: auto;
  min-width: max-content;
  max-width: 100%;
  padding: 14px 30px;
  white-space: nowrap;

  background: #17365D !important;
  background-color: #17365D !important;
  border-color: #17365D !important;
  color: #FFFFFF !important;

  font-family: "Lato", Arial, Helvetica, sans-serif !important;
  font-size: 20px !important;
  font-weight: 600;
}

body .srl-music-about-button:hover,
body .srl-music-about-button:focus,
body .srl-buttons > .srl-btn.srl-btn-primary.srl-music-about-button:hover,
body .srl-buttons > .srl-btn.srl-btn-primary.srl-music-about-button:focus {
  background: #FFD76A !important;
  background-color: #FFD76A !important;
  border-color: #FFD76A !important;
  color: #17365D !important;
}

/* Music Lessons Includes CTA button: gold default, blue hover */
body .srl-music-includes-button,
body .srl-music-includes-button:link,
body .srl-music-includes-button:visited,
body .srl-buttons > .srl-btn.srl-btn-primary.srl-music-includes-button,
body .srl-buttons > .srl-btn.srl-btn-primary.srl-music-includes-button:visited {
  width: auto;
  min-width: max-content;
  max-width: 100%;
  padding: 14px 30px;
  white-space: nowrap;

  background: #FFD76A !important;
  background-color: #FFD76A !important;
  border-color: #FFD76A !important;
  color: #FFFFFF !important;

  font-family: "Lato", Arial, Helvetica, sans-serif !important;
  font-size: 20px !important;
  font-weight: 600;
}

body .srl-music-includes-button:hover,
body .srl-music-includes-button:focus,
body .srl-buttons > .srl-btn.srl-btn-primary.srl-music-includes-button:hover,
body .srl-buttons > .srl-btn.srl-btn-primary.srl-music-includes-button:focus {
  background: #17365D !important;
  background-color: #17365D !important;
  border-color: #17365D !important;
  color: #FFFFFF !important;
}

/* Music lesson and instrument icons */
.srl-music-types-section .fa-solid,
.srl-music-types-section .fa-music,
.srl-music-types-section .fa-guitar,
.srl-music-types-section .srl-piano-keyboard-svg,
.srl-music-types-section .srl-piano-keyboard-svg *,
.srl-music-learn-section .fa-solid,
.srl-music-learn-section .fa-music,
.srl-music-learn-section .fa-guitar,
.srl-music-learn-section .fa-microphone,
.srl-music-type-icon,
.srl-music-type-icon i,
.srl-music-learn-icon,
.srl-music-learn-icon i {
  color: #FFD76A !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Preserve gold icon color during card/item hover */
.srl-music-type-card:hover .srl-music-type-icon,
.srl-music-type-card:hover .srl-music-type-icon i,
.srl-music-type-card:hover .srl-piano-keyboard-svg,
.srl-music-type-card:hover .srl-piano-keyboard-svg *,
.srl-music-learn-item:hover .srl-music-learn-icon,
.srl-music-learn-item:hover .srl-music-learn-icon i {
  color: #FFD76A !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* More Than Music Lessons eyebrow and divider */
.srl-music-about-eyebrow {
  color: #FFD76A !important;
}

.srl-music-about-divider,
.srl-music-about-divider i,
.srl-music-about-divider .fa-solid,
.srl-music-about-divider .fa-music {
  color: #FFD76A !important;
}

.srl-music-about-divider-line,
.srl-music-about-divider span {
  background: #FFD76A !important;
}

/* Lesson approach icon circles */
.srl-music-approach-icon,
.srl-music-approach-item:hover .srl-music-approach-icon {
  background: #17365D !important;
  background-color: #17365D !important;
}

/* What You'll Learn divider */
.srl-music-learn-divider,
.srl-music-learn-divider i,
.srl-music-learn-divider .fa-solid,
.srl-music-learn-divider .fa-music {
  color: #FFD76A !important;
}

.srl-music-learn-divider span {
  background: #FFD76A !important;
}

/* Music Lessons Include heading, divider, CTA, and icons */
.srl-music-includes-heading,
.srl-music-includes-heading h2 {
  color: #FFFFFF !important;
}

.srl-music-includes-divider,
.srl-music-includes-divider i,
.srl-music-includes-divider .fa-solid,
.srl-music-includes-divider .fa-music {
  color: #FFD76A !important;
}

.srl-music-includes-divider span {
  background: #FFD76A !important;
}

.srl-music-includes-icon,
.srl-music-includes-icon i,
.srl-music-includes-icon .fa-solid,
.srl-music-includes-icon .fa-people-group,
.srl-music-includes-contact-icon,
.srl-music-includes-contact-icon i,
.srl-music-includes-contact-icon .fa-solid,
.srl-music-includes-contact-icon .fa-regular,
.srl-music-includes-contact-icon .fa-calendar-days,
.srl-music-includes-contact-icon .fa-envelope,
.srl-music-includes-contact-icon .fa-phone {
  color: #FFD76A !important;
}

.srl-music-includes-item:hover .srl-music-includes-icon,
.srl-music-includes-item:hover .srl-music-includes-icon i {
  color: #FFD76A !important;
}

.srl-music-includes-cta,
.srl-music-includes-cta p {
  color: #FFFFFF !important;
}

@media (max-width: 600px) {
  body .srl-music-about-button,
  body .srl-music-includes-button {
    width: 100%;
    min-width: 0;
    max-width: 420px;
    padding: 14px 22px;
    white-space: normal;
  }
}

/* =========================================================
   VERSION 3.1.9 — MUSIC LESSONS PAGE UPDATES
========================================================= */

/* Hero buttons: primary and secondary use the approved SRL format. */
body .srl-music-lessons-hero .srl-buttons > a.srl-btn,
body .srl-music-lessons-hero .srl-buttons > a.srl-btn:link,
body .srl-music-lessons-hero .srl-buttons > a.srl-btn:visited,
body .srl-music-lessons-hero .srl-buttons > a.srl-btn.srl-btn-primary,
body .srl-music-lessons-hero .srl-buttons > a.srl-btn.srl-btn-primary:visited,
body .srl-music-lessons-hero .srl-buttons > a.srl-btn.srl-btn-secondary,
body .srl-music-lessons-hero .srl-buttons > a.srl-btn.srl-btn-secondary:visited {
  width: auto;
  min-width: max-content;
  max-width: 100%;
  padding: 14px 30px;

  background: #17365D !important;
  background-color: #17365D !important;
  border-color: #17365D !important;
  color: #FFFFFF !important;

  font-family: "Lato", Arial, Helvetica, sans-serif !important;
  font-size: 20px !important;
  font-weight: 600;
  white-space: nowrap;
}

body .srl-music-lessons-hero .srl-buttons > a.srl-btn:hover,
body .srl-music-lessons-hero .srl-buttons > a.srl-btn:focus,
body .srl-music-lessons-hero .srl-buttons > a.srl-btn.srl-btn-primary:hover,
body .srl-music-lessons-hero .srl-buttons > a.srl-btn.srl-btn-primary:focus,
body .srl-music-lessons-hero .srl-buttons > a.srl-btn.srl-btn-secondary:hover,
body .srl-music-lessons-hero .srl-buttons > a.srl-btn.srl-btn-secondary:focus {
  background: #FFD76A !important;
  background-color: #FFD76A !important;
  border-color: #FFD76A !important;
  color: #17365D !important;
}

/* Music lesson cards */
.srl-music-type-card {
  background: #FBF8F2 !important;
  background-color: #FBF8F2 !important;
}

/* Music Lessons Include headings */
.srl-music-includes-copy h3 {
  color: #FFFFFF !important;
}

/* Music Lessons Include contact links */
.srl-music-includes-contact-item:hover,
.srl-music-includes-contact-item:focus,
.srl-music-includes-contact-item:visited:hover,
.srl-music-includes-contact-item:visited:focus {
  color: #FFD76A !important;
}

@media (max-width: 600px) {
  body .srl-music-lessons-hero .srl-buttons > a.srl-btn {
    width: 100%;
    min-width: 0;
    max-width: 360px;
    white-space: normal;
  }
}

/* =========================================================
   VERSION 3.2.0 — GALLERY PAGE UPDATES
========================================================= */

/* Gallery hero buttons */
body .srl-gallery-hero .srl-buttons > a.srl-btn,
body .srl-gallery-hero .srl-buttons > a.srl-btn:link,
body .srl-gallery-hero .srl-buttons > a.srl-btn:visited,
body .srl-gallery-hero .srl-buttons > a.srl-btn.srl-btn-primary,
body .srl-gallery-hero .srl-buttons > a.srl-btn.srl-btn-primary:visited,
body .srl-gallery-hero .srl-buttons > a.srl-btn.srl-btn-secondary,
body .srl-gallery-hero .srl-buttons > a.srl-btn.srl-btn-secondary:visited {
  width: auto;
  min-width: max-content;
  max-width: 100%;
  padding: 14px 30px;

  background: #17365D !important;
  background-color: #17365D !important;
  border-color: #17365D !important;
  color: #FFFFFF !important;

  font-family: "Lato", Arial, Helvetica, sans-serif !important;
  font-size: 20px !important;
  font-weight: 600;
  white-space: nowrap;
}

body .srl-gallery-hero .srl-buttons > a.srl-btn:hover,
body .srl-gallery-hero .srl-buttons > a.srl-btn:focus,
body .srl-gallery-hero .srl-buttons > a.srl-btn.srl-btn-primary:hover,
body .srl-gallery-hero .srl-buttons > a.srl-btn.srl-btn-primary:focus,
body .srl-gallery-hero .srl-buttons > a.srl-btn.srl-btn-secondary:hover,
body .srl-gallery-hero .srl-buttons > a.srl-btn.srl-btn-secondary:focus {
  background: #FFD76A !important;
  background-color: #FFD76A !important;
  border-color: #FFD76A !important;
  color: #17365D !important;
}

/* Gallery final CTA divider and palette icon */
.srl-gallery-final-cta-divider,
.srl-gallery-final-cta-divider i,
.srl-gallery-final-cta-divider .fa-solid,
.srl-gallery-final-cta-divider .fa-palette {
  color: #FFD76A !important;
  fill: #FFD76A !important;
}

.srl-gallery-final-cta-divider span {
  background: #FFD76A !important;
  background-color: #FFD76A !important;
}

/* Gallery final CTA button */
body a.srl-gallery-final-cta-button,
body a.srl-gallery-final-cta-button:link,
body a.srl-gallery-final-cta-button:visited,
body .srl-gallery-final-cta a.srl-gallery-final-cta-button,
body .srl-gallery-final-cta a.srl-gallery-final-cta-button:visited {
  width: auto;
  min-width: max-content;
  max-width: 100%;
  padding: 14px 30px;

  background: #FFD76A !important;
  background-color: #FFD76A !important;
  border-color: #FFD76A !important;
  color: #FFFFFF !important;

  font-family: "Lato", Arial, Helvetica, sans-serif !important;
  font-size: 20px !important;
  font-weight: 600;
  white-space: nowrap;
}

body a.srl-gallery-final-cta-button:hover,
body a.srl-gallery-final-cta-button:focus,
body .srl-gallery-final-cta a.srl-gallery-final-cta-button:hover,
body .srl-gallery-final-cta a.srl-gallery-final-cta-button:focus {
  background: #17365D !important;
  background-color: #17365D !important;
  border-color: #17365D !important;
  color: #FFFFFF !important;
}

@media (max-width: 600px) {
  body .srl-gallery-hero .srl-buttons > a.srl-btn,
  body a.srl-gallery-final-cta-button {
    width: 100%;
    min-width: 0;
    max-width: 360px;
    white-space: normal;
  }
}

/* =========================================================
   VERSION 3.2.1 — BLOG PAGE AND FOOTER UPDATES
========================================================= */

/* Footer headings */
.srl-footer h3 {
  color: #FFFFFF !important;
}

/* Blog hero feature order:
   1. Stories & Reflections
   2. Artwork & Creativity
   3. Music & Performances

   This assumes the current HTML order is:
   Music, Artwork, Stories.
*/
.srl-blog-features .srl-blog-feature:nth-child(1) {
  order: 3;
}

.srl-blog-features .srl-blog-feature:nth-child(2) {
  order: 2;
}

.srl-blog-features .srl-blog-feature:nth-child(3) {
  order: 1;
}

/* Blog hero buttons */
body .srl-blog-hero .srl-buttons > a.srl-btn,
body .srl-blog-hero .srl-buttons > a.srl-btn:link,
body .srl-blog-hero .srl-buttons > a.srl-btn:visited,
body .srl-blog-hero .srl-buttons > a.srl-btn.srl-btn-primary,
body .srl-blog-hero .srl-buttons > a.srl-btn.srl-btn-primary:visited,
body .srl-blog-hero .srl-buttons > a.srl-btn.srl-btn-secondary,
body .srl-blog-hero .srl-buttons > a.srl-btn.srl-btn-secondary:visited {
  width: auto;
  min-width: max-content;
  max-width: 100%;
  padding: 14px 30px;

  background: #17365D !important;
  background-color: #17365D !important;
  border-color: #17365D !important;
  color: #FFFFFF !important;

  font-family: "Lato", Arial, Helvetica, sans-serif !important;
  font-size: 20px !important;
  font-weight: 600;
  white-space: nowrap;
}

body .srl-blog-hero .srl-buttons > a.srl-btn:hover,
body .srl-blog-hero .srl-buttons > a.srl-btn:focus,
body .srl-blog-hero .srl-buttons > a.srl-btn.srl-btn-primary:hover,
body .srl-blog-hero .srl-buttons > a.srl-btn.srl-btn-primary:focus,
body .srl-blog-hero .srl-buttons > a.srl-btn.srl-btn-secondary:hover,
body .srl-blog-hero .srl-buttons > a.srl-btn.srl-btn-secondary:focus {
  background: #FFD76A !important;
  background-color: #FFD76A !important;
  border-color: #FFD76A !important;
  color: #17365D !important;
}

/* Explicit primary-button font size */
body .srl-blog-hero .srl-btn.srl-btn-primary {
  font-size: 20px !important;
}

/* =========================================================
   BLOG SEARCH ICON — CROSS-BROWSER ENFORCEMENT
========================================================= */

body .srl-blog-search .dashicons,
body .srl-blog-search .dashicons-search,
body .srl-blog-search button .dashicons,
body .srl-blog-search button .dashicons-search {
  color: #FFD76A !important;
  fill: #FFD76A !important;
  -webkit-text-fill-color: #FFD76A !important;
}

/* =========================================================
   BLOG SEARCH BUTTON — CROSS-BROWSER ENFORCEMENT
========================================================= */

body .srl-blog-search button,
body .srl-blog-search button:link,
body .srl-blog-search button:visited,
body .srl-blog-search button:hover,
body .srl-blog-search button:focus,
body .srl-blog-search button:focus-visible,
body .srl-blog-search button:active {
  color: #17365D !important;
  -webkit-text-fill-color: #17365D !important;
}

@media (max-width: 600px) {
  body .srl-blog-hero .srl-buttons > a.srl-btn {
    width: 100%;
    min-width: 0;
    max-width: 360px;
    white-space: normal;
  }
}

/* =========================================================
   VERSION 3.2.3 — SINGLE BLOG POST PAGE UPDATES
   Applies only to individual WordPress blog post pages.
========================================================= */

/* Individual blog post page background */
body.single-post,
body.single-post .site,
body.single-post .site-content,
body.single-post .content-area,
body.single-post .site-main {
  background-color: #FBF8F2 !important;
}

/* Latest Posts block links */
body.single-post .wp-block-latest-posts,
body.single-post .wp-block-latest-posts__list {
  color: #17365D !important;
}

body.single-post .wp-block-latest-posts a,
body.single-post .wp-block-latest-posts__list a,
body.single-post .wp-block-latest-posts a:link,
body.single-post .wp-block-latest-posts__list a:link,
body.single-post .wp-block-latest-posts a:visited,
body.single-post .wp-block-latest-posts__list a:visited {
  color: #17365D !important;
  -webkit-text-fill-color: #17365D !important;
  text-decoration: none;
}

body.single-post .wp-block-latest-posts a:hover,
body.single-post .wp-block-latest-posts__list a:hover,
body.single-post .wp-block-latest-posts a:focus,
body.single-post .wp-block-latest-posts__list a:focus,
body.single-post .wp-block-latest-posts a:focus-visible,
body.single-post .wp-block-latest-posts__list a:focus-visible {
  color: #FFD76A !important;
  -webkit-text-fill-color: #FFD76A !important;
}

/* Search block button */
body.single-post .wp-block-search__button,
body.single-post .wp-block-search__button.wp-element-button,
body.single-post button.wp-block-search__button {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background-color: #17365D !important;
  border-color: #17365D !important;
}

body.single-post .wp-block-search__button:hover,
body.single-post .wp-block-search__button:focus,
body.single-post .wp-block-search__button:focus-visible,
body.single-post .wp-block-search__button:active,
body.single-post .wp-block-search__button.wp-element-button:hover,
body.single-post .wp-block-search__button.wp-element-button:focus,
body.single-post .wp-block-search__button.wp-element-button:focus-visible,
body.single-post .wp-block-search__button.wp-element-button:active {
  color: #17365D !important;
  -webkit-text-fill-color: #17365D !important;
  background-color: #FFD76A !important;
  border-color: #FFD76A !important;
}

/* Previous and next post navigation */
body.single-post .nav-previous,
body.single-post .nav-next,
body.single-post .nav-previous a,
body.single-post .nav-next a,
body.single-post .nav-previous a:link,
body.single-post .nav-next a:link,
body.single-post .nav-previous a:visited,
body.single-post .nav-next a:visited {
  color: #232323 !important;
  -webkit-text-fill-color: #232323 !important;
}

/* =========================================================
   VERSION 3.2.4 — UPCOMING EVENTS PAGE BUTTON ENFORCEMENT
========================================================= */

/*
  Applies the approved button styling to both primary and
  secondary buttons inside the Upcoming Events page hero.
  Buttons remain wide enough for their copy on desktop and
  become full-width within the existing mobile layout.
*/

body .srl-events-hero .srl-buttons > a.srl-btn,
body .srl-events-hero .srl-buttons > a.srl-btn:link,
body .srl-events-hero .srl-buttons > a.srl-btn:visited,
body .srl-events-hero .srl-buttons > a.srl-btn.srl-btn-primary,
body .srl-events-hero .srl-buttons > a.srl-btn.srl-btn-primary:visited,
body .srl-events-hero .srl-buttons > a.srl-btn.srl-btn-secondary,
body .srl-events-hero .srl-buttons > a.srl-btn.srl-btn-secondary:visited {
  width: auto;
  min-width: max-content;
  max-width: 100%;
  padding: 14px 30px;

  background: #17365D !important;
  background-color: #17365D !important;
  border-color: #17365D !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;

  font-family: "Lato", Arial, Helvetica, sans-serif !important;
  font-size: 20px !important;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

body .srl-events-hero .srl-buttons > a.srl-btn:hover,
body .srl-events-hero .srl-buttons > a.srl-btn:focus,
body .srl-events-hero .srl-buttons > a.srl-btn:focus-visible,
body .srl-events-hero .srl-buttons > a.srl-btn:active,
body .srl-events-hero .srl-buttons > a.srl-btn.srl-btn-primary:hover,
body .srl-events-hero .srl-buttons > a.srl-btn.srl-btn-primary:focus,
body .srl-events-hero .srl-buttons > a.srl-btn.srl-btn-primary:focus-visible,
body .srl-events-hero .srl-buttons > a.srl-btn.srl-btn-primary:active,
body .srl-events-hero .srl-buttons > a.srl-btn.srl-btn-secondary:hover,
body .srl-events-hero .srl-buttons > a.srl-btn.srl-btn-secondary:focus,
body .srl-events-hero .srl-buttons > a.srl-btn.srl-btn-secondary:focus-visible,
body .srl-events-hero .srl-buttons > a.srl-btn.srl-btn-secondary:active {
  background: #FFD76A !important;
  background-color: #FFD76A !important;
  border-color: #FFD76A !important;
  color: #17365D !important;
  -webkit-text-fill-color: #17365D !important;
  text-decoration: none;
}

body .srl-events-hero .srl-buttons > a.srl-btn i,
body .srl-events-hero .srl-buttons > a.srl-btn svg {
  color: inherit !important;
  fill: currentColor !important;
}

@media (max-width: 600px) {
  body .srl-events-hero .srl-buttons > a.srl-btn {
    width: 100%;
    min-width: 0;
    max-width: 360px;
    margin-right: auto;
    margin-left: auto;
    padding: 14px 24px;
    white-space: normal;
  }
}

/* =========================================================
   VERSION 3.2.5 — CONTACT SCOTT PAGE UPDATES
========================================================= */

/* Contact hero heading */
body .srl-contact-hero .srl-contact-hero-content h1 {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Contact-page decorative dividers and diamond icons */
body .srl-contact-divider,
body .srl-contact-divider .fa-solid,
body .srl-contact-divider .fa-diamond,
body .srl-contact-divider i,
body .srl-heading-divider,
body .srl-heading-divider .fa-solid,
body .srl-heading-divider .fa-diamond,
body .srl-heading-divider i,
body .srl-heading-divider em {
  color: #FFD76A !important;
  border-color: #FFD76A !important;
}

body .srl-contact-divider span,
body .srl-heading-divider span {
  background-color: #FFD76A !important;
}

/* Contact phone and email buttons */
body .srl-contact-buttons > a.srl-contact-btn,
body .srl-contact-buttons > a.srl-contact-btn:link,
body .srl-contact-buttons > a.srl-contact-btn:visited,
body .srl-contact-buttons > a.srl-contact-phone,
body .srl-contact-buttons > a.srl-contact-phone:link,
body .srl-contact-buttons > a.srl-contact-phone:visited,
body .srl-contact-buttons > a.srl-contact-email,
body .srl-contact-buttons > a.srl-contact-email:link,
body .srl-contact-buttons > a.srl-contact-email:visited {
  width: max-content;
  min-width: 300px;
  max-width: 100%;
  padding: 14px 30px;

  background: #17365D !important;
  background-color: #17365D !important;
  border: 2px solid #17365D !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;

  font-family: "Lato", Arial, Helvetica, sans-serif !important;
  font-size: 20px !important;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  white-space: nowrap;
}

body .srl-contact-buttons > a.srl-contact-btn:hover,
body .srl-contact-buttons > a.srl-contact-btn:focus,
body .srl-contact-buttons > a.srl-contact-btn:focus-visible,
body .srl-contact-buttons > a.srl-contact-phone:hover,
body .srl-contact-buttons > a.srl-contact-phone:focus,
body .srl-contact-buttons > a.srl-contact-phone:focus-visible,
body .srl-contact-buttons > a.srl-contact-email:hover,
body .srl-contact-buttons > a.srl-contact-email:focus,
body .srl-contact-buttons > a.srl-contact-email:focus-visible {
  background: #FFD76A !important;
  background-color: #FFD76A !important;
  border-color: #FFD76A !important;
  color: #17365D !important;
  -webkit-text-fill-color: #17365D !important;
  text-decoration: none !important;
}

body .srl-contact-buttons > a.srl-contact-btn i,
body .srl-contact-buttons > a.srl-contact-btn svg,
body .srl-contact-buttons > a.srl-contact-phone i,
body .srl-contact-buttons > a.srl-contact-phone svg,
body .srl-contact-buttons > a.srl-contact-email i,
body .srl-contact-buttons > a.srl-contact-email svg {
  color: inherit !important;
  fill: currentColor !important;
}

/* What Scott Offers section */
body .srl-offers-section {
  background: #DFE8D8 !important;
  background-color: #DFE8D8 !important;
}

@media (max-width: 600px) {
  body .srl-contact-buttons > a.srl-contact-btn,
  body .srl-contact-buttons > a.srl-contact-phone,
  body .srl-contact-buttons > a.srl-contact-email {
    width: 100%;
    min-width: 0;
    max-width: 440px;
    white-space: normal;
  }
}

/* =========================================================
   VERSION 3.2.7 — CONTACT SCOTT PAGE ADDITIONAL UPDATES
========================================================= */

/* Hero contact buttons: side by side on desktop and tablet. */
@media (min-width: 768px) {
  .srl-contact-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 16px;
    width: auto;
    max-width: none;
  }

  body .srl-contact-buttons > .srl-contact-btn,
  body .srl-contact-buttons > a.srl-contact-btn {
    width: auto !important;
    max-width: none !important;
    min-width: max-content;
    white-space: nowrap;
  }
}

/* Mobile retains vertically stacked full-width contact buttons. */
@media (max-width: 767px) {
  .srl-contact-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px;
  }

  body .srl-contact-buttons > .srl-contact-btn,
  body .srl-contact-buttons > a.srl-contact-btn {
    width: 100% !important;
    max-width: 360px !important;
    white-space: normal;
  }
}

/* What Scott Offers: Learn More links. */
.srl-offer-learn-more,
.srl-offer-learn-more:link,
.srl-offer-learn-more:visited {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  color: #17365D !important;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.25s ease, transform 0.25s ease;
}

.srl-offer-learn-more::after {
  content: "\2192";
  line-height: 1;
  transition: transform 0.25s ease;
}

.srl-offer-learn-more:hover,
.srl-offer-learn-more:focus {
  color: #D8A629 !important;
  text-decoration: none;
}

.srl-offer-learn-more:hover::after,
.srl-offer-learn-more:focus::after {
  transform: translateX(4px);
}

.srl-offer-learn-more:focus-visible {
  outline: 3px solid #FFD76A;
  outline-offset: 3px;
  border-radius: 3px;
}

@media (max-width: 767px) {
  .srl-offer-learn-more {
    justify-content: center;
  }
}

/* =========================================================
   VERSION 3.2.8 — THE HEART SPEAKS HERO RESPONSIVE FIX

   Corrects the shared Lullaby/Heart Speaks hero layout for
   tablet and mobile using the classes in the current HTML:
   .srl-hero-book, .srl-hero-content, .srl-lullaby-divider,
   .srl-heart-info-grid, and .srl-heart-review.
========================================================= */

/* Tablet: keep a balanced two-column composition without
   squeezing or overflowing the book, heading, cards, or review. */
@media (min-width: 768px) and (max-width: 1024px) {
  body .srl-heart-hero {
    min-height: auto !important;
    max-height: none !important;
    padding: 52px 22px 48px !important;
    background-position: center center !important;
  }

  body .srl-heart-hero .srl-hero-inner {
    display: grid !important;
    grid-template-columns: minmax(220px, 34%) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 30px !important;
    width: 100%;
    max-width: 980px !important;
    padding-right: 0;
    padding-left: 0;
    text-align: left;
  }

  body .srl-heart-hero .srl-hero-book {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    transform: none !important;
  }

  body .srl-heart-hero .srl-hero-book img {
    display: block;
    width: 100%;
    max-width: 270px !important;
    max-height: 450px !important;
    margin: 0 auto;
    object-fit: contain;
  }

  body .srl-heart-hero .srl-hero-content,
  body .srl-heart-hero .srl-heart-content {
    width: 100%;
    max-width: 620px !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  body .srl-heart-hero .srl-hero-content h1,
  body .srl-heart-hero .srl-heart-content h1 {
    width: auto;
    max-width: 100% !important;
    margin: 0 0 6px;
    font-size: clamp(43px, 5.8vw, 58px) !important;
    line-height: 1.04;
    white-space: normal !important;
    overflow-wrap: normal;
    word-break: normal;
  }

  body .srl-heart-hero .srl-lullaby-divider {
    width: 100%;
    max-width: 500px;
    margin: 16px 0 20px;
  }

  body .srl-heart-hero .srl-subtitle {
    max-width: 570px;
    margin: 0 0 20px;
    font-size: 18px;
    line-height: 1.5;
  }

  body .srl-heart-hero .srl-buttons {
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  body .srl-heart-hero .srl-heart-info-grid,
  body .srl-heart-hero .srl-lullaby-info-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: 570px;
    gap: 9px;
  }

  body .srl-heart-hero .srl-lullaby-info-card {
    min-width: 0;
    padding: 10px 6px;
  }

  body .srl-heart-hero .srl-heart-review {
    width: 100%;
    max-width: 570px;
    margin: 14px 0 0;
  }
}

/* Mobile and small tablet: stack the cover above the copy,
   center the hero, and prevent inherited desktop sizing. */
@media (max-width: 767px) {
  body .srl-heart-hero {
    min-height: auto !important;
    max-height: none !important;
    padding: 38px 18px 42px !important;
    align-items: flex-start;
    background-position: center center !important;
  }

  body .srl-heart-hero .srl-hero-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 24px !important;
    width: 100%;
    max-width: 680px !important;
    padding-right: 0;
    padding-left: 0;
    text-align: center;
  }

  body .srl-heart-hero .srl-hero-book {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    transform: none !important;
  }

  body .srl-heart-hero .srl-hero-book img {
    display: block;
    width: auto;
    max-width: min(245px, 72vw) !important;
    max-height: none !important;
    margin: 0 auto;
    object-fit: contain;
  }

  body .srl-heart-hero .srl-hero-content,
  body .srl-heart-hero .srl-heart-content {
    width: 100%;
    max-width: 620px !important;
    min-width: 0;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
  }

  body .srl-heart-hero .srl-hero-content h1,
  body .srl-heart-hero .srl-heart-content h1 {
    width: auto;
    max-width: 100% !important;
    margin: 0 0 5px;
    font-size: clamp(40px, 11vw, 54px) !important;
    line-height: 1.05;
    white-space: normal !important;
    overflow-wrap: normal;
    word-break: normal;
  }

  body .srl-heart-hero .srl-lullaby-divider {
    width: 100%;
    max-width: 430px;
    margin: 15px auto 19px;
  }

  body .srl-heart-hero .srl-subtitle {
    max-width: 560px;
    margin: 0 auto 20px;
    font-size: 18px;
    line-height: 1.55;
  }

  body .srl-heart-hero .srl-buttons {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 0 18px;
  }

  body .srl-heart-hero .srl-buttons > a.srl-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 330px !important;
  }

  /* The information cards remain hidden on phones so the
     principal hero content stays readable and compact. */
  body .srl-heart-hero .srl-heart-info-grid,
  body .srl-heart-hero .srl-lullaby-info-grid {
    display: none !important;
  }

  body .srl-heart-hero .srl-heart-review {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 16px 18px;
    text-align: left;
  }
}

/* Narrow phones */
@media (max-width: 480px) {
  body .srl-heart-hero {
    padding: 30px 15px 36px !important;
  }

  body .srl-heart-hero .srl-hero-inner {
    gap: 20px !important;
  }

  body .srl-heart-hero .srl-hero-book img {
    max-width: min(215px, 68vw) !important;
  }

  body .srl-heart-hero .srl-hero-content h1,
  body .srl-heart-hero .srl-heart-content h1 {
    font-size: clamp(38px, 12vw, 46px) !important;
  }

  body .srl-heart-hero .srl-lullaby-divider::before {
    margin-right: 16px;
  }

  body .srl-heart-hero .srl-lullaby-divider::after {
    margin-left: 16px;
  }

  body .srl-heart-hero .srl-subtitle {
    font-size: 17px;
  }

  body .srl-heart-hero .srl-heart-review {
    padding: 15px 16px;
  }
}

/*Sitemap Page - Settings*/




/*Privacy Page - Settings*/
.srl-privacy-email {
  unicode-bidi: plaintext;
}

/* CookieYes Consent Banner Background & Text */
.cky-consent-container .cky-consent-bar {
    background-color: #17365D !important;
}

.cky-consent-container .cky-title,
.cky-consent-container .cky-notice-des {
    color: #ffffff !important;
}

/* CookieYes - Accept All & Reject All Buttons */
.cky-consent-container .cky-btn-accept,
.cky-consent-container .cky-btn-reject {
    background-color: #d8a629 !important;
    border: 1px solid #d8a629 !important;
    color: #17365D !important;
}

/* Button Hover Effect */
.cky-consent-container .cky-btn-accept:hover,
.cky-consent-container .cky-btn-reject:hover {
    background-color: #c29422 !important;
    border-color: #c29422 !important;
    color: #17365D !important;
}

/* CookieYes - White Button Text */
.cky-consent-container .cky-btn-customize,
.cky-consent-container .cky-btn-reject,
.cky-consent-container .cky-btn-accept {
    color: #ffffff !important;
}

/* Keep Button Text White on Hover */
.cky-consent-container .cky-btn-customize:hover,
.cky-consent-container .cky-btn-reject:hover,
.cky-consent-container .cky-btn-accept:hover {
    color: #ffffff !important;
}

/* CookieYes - Button Border Radius */
.cky-consent-container .cky-btn-customize,
.cky-consent-container .cky-btn-reject,
.cky-consent-container .cky-btn-accept {
    border-radius: 7px !important;
}