/* Main stylesheet for Ukelele theme */
/*
Theme Name: Ukelele
Theme URI: https://BuildItDesign.com/
Author: BuildItDesign
Author URI: https://BuildItDesign.com/
Description: Ukelele emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ukelele
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/
body,
main {
  background-color: #000000;
  margin: 0;
}
.admin-bar header {
  margin-top: 48px;
}
/* Color variables (edit these to change the block palette) */
@font-face {
  font-family: 'Clash Display';
  src: url('assets/fonts/clash-display/ClashDisplay-Extralight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Clash Display';
  src: url('assets/fonts/clash-display/ClashDisplay-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Clash Display';
  src: url('assets/fonts/clash-display/ClashDisplay-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Clash Display';
  src: url('assets/fonts/clash-display/ClashDisplay-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Clash Display';
  src: url('assets/fonts/clash-display/ClashDisplay-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Clash Display';
  src: url('assets/fonts/clash-display/ClashDisplay-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Clash Display Variable';
  src: url('assets/fonts/clash-display/ClashDisplay-Variable.woff') format('woff');
  font-weight: 200 700;
  font-style: normal;
}
@font-face {
  font-family: 'Snell Roundhand';
  src: url('assets/fonts/snell-roundhand/Snell-Roundhand-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
caption,
figcaption,
p {
  text-wrap: pretty;
}
/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
 */
.more-link {
  display: block;
}
/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.1em;
}
/* Focus styles */
:where(.wp-site-blocks *:focus) {
  outline-width: 2px;
  outline-style: solid;
}
/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
  margin-bottom: 3px;
}
/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
  outline-offset: 4px;
}
/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  outline-offset: 0;
}
/* Logo */
.header-logo img {
  max-height: 40px;
  /* adjust size */
}
/* Navigation */
.main-navigation .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-navigation .menu li {
  display: inline-block;
  margin: 0 20px;
  /* spacing between links */
}
.main-navigation .menu li a {
  color: #f5f1d7;
  /* light beige/cream text */
  text-transform: uppercase;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 500;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 1px;
  transition: color 0.3s ease;
}
.main-navigation .menu li a:hover {
  color: #fff;
  /* bright white hover */
}
/* Hamburger menu */
.hamburger {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 20px;
  position: relative;
  width: 30px;
  height: 30px;
}
.hamburger-icon,
.close-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}
.hamburger-icon {
  display: flex;
  flex-direction: column;
  opacity: 1;
}
.hamburger.active .hamburger-icon {
  opacity: 0;
}
.close-icon {
  opacity: 0;
  font-size: 24px;
  color: #f5f1d7;
  line-height: 1;
}
.hamburger.active .close-icon {
  opacity: 1;
}
.hamburger-line {
  width: 25px;
  height: 3px;
  background: #f5f1d7;
  margin: 3px 0;
  transition: 0.3s;
}
.mobile-menu-header {
  display: none;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  border-bottom: 1px solid rgba(245, 241, 215, 0.2);
}
.mobile-menu-logo {
  text-align: left;
}
.mobile-menu-logo img {
  max-height: 40px;
}
.mobile-close {
  background: none;
  border: none;
  color: #f5f1d7;
  font-size: 32px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Mobile styles */
@media (max-width: 830px) {
  .hamburger {
    display: flex;
  }
  .main-navigation {
    display: none;
  }
  .mobile-menu-header {
    display: flex;
  }
  .main-navigation.mobile-open {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 1000;
    padding: 0;
    overflow-y: auto;
  }
  .main-navigation.mobile-open .menu {
    flex-direction: column;
    align-items: center;
    padding: 0px 0px 20px 0px;
  }
  .main-navigation.mobile-open .menu li {
    display: block;
    margin: 0;
  }
  .main-navigation.mobile-open .menu li a {
    display: block;
    padding: 20px 20px;
    font-size: 18px;
  }
  .main-navigation.mobile-open .menu li.current-menu-item a {
    background: #f5f1d7;
    color: #000;
  }
}
/* CTA Button */
.cta-button,
.jc2-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 367px;
  margin-top: 2.5rem;
  background-color: #D26000;
  color: #000000;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  border: none;
  border-radius: 5px;
  padding: 16px 32px;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  transition: all 0.25s ease;
  cursor: pointer;
  white-space: nowrap;
}
.cta-button:hover,
.jc2-button:hover {
  background-color: #C84E00;
  color: #000000;
  transform: translateY(-1px);
}
.cta-button:focus,
.jc2-button:focus,
.cta-button:active,
.jc2-button:active {
  outline: none;
  box-shadow: none;
  transform: scale(0.98);
}
@media (max-width: 992px) {
  .cta-button,
  .jc2-button {
    width: 40%;
    font-size: 0.8rem;
  }
}
@media (max-width: 768px) {
  .cta-button,
  .jc2-button {
    width: 50%;
  }
}
@media (max-width: 480px) {
  .cta-button,
  .jc2-button {
    width: 65%;
  }
}
/* Header styles for visibility */
.wp-block-group.alignwide {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #ffffff;
  color: #000000;
}
/* General header */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  /* Gradient background */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 100%);
  /* Padding for breathing space */
  padding: 20px 0;
}
.site-header .header-inner {
  max-width: 1200px;
  /* keeps content aligned like in screenshot */
  margin: 0 auto;
  /* centers container */
  padding: 0 40px;
  /* left/right spacing */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* Language Switcher Styles */
.language-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
}
.language-switcher .lang-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  border-radius: 20px;
  transition: all 0.25s ease;
  cursor: pointer;
  /* Minimalistic flag SVG styling */
  /* Hover state */
  /* Active state */
  /* Focus state for accessibility */
}
.language-switcher .lang-link svg {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transition: all 0.25s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}
.language-switcher .lang-link:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.08);
}
.language-switcher .lang-link:hover svg {
  transform: scale(1.1);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.language-switcher .lang-link.active {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.12);
  font-weight: 600;
}
.language-switcher .lang-link.active svg {
  transform: scale(1.05);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}
.language-switcher .lang-link:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}
/* Mobile Language Switcher (inside mobile menu) */
.mobile-language-switcher {
  display: none;
  /* Hidden by default, shown when mobile menu is open */
  align-items: center;
  gap: 6px;
}
.mobile-language-switcher .lang-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  border-radius: 20px;
  transition: all 0.25s ease;
  cursor: pointer;
}
.mobile-language-switcher .lang-link svg {
  transition: all 0.25s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}
.mobile-language-switcher .lang-link:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.08);
}
.mobile-language-switcher .lang-link:hover svg {
  transform: scale(1.1);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.mobile-language-switcher .lang-link.active {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.12);
  font-weight: 600;
}
.mobile-language-switcher .lang-link.active svg {
  transform: scale(1.05);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}
.mobile-language-switcher .lang-link:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}
/* Mobile Menu Header Layout */
.mobile-menu-header {
  display: none;
  /* Hidden on desktop */
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Mobile Responsive Styles */
@media (max-width: 768px) {
  /* Hide desktop language switcher on mobile */
  .language-switcher {
    display: none !important;
  }
  /* Show mobile menu header on mobile */
  .mobile-menu-header {
    display: flex;
  }
  /* Show mobile language switcher in mobile menu */
  .mobile-language-switcher {
    display: flex;
  }
  .site-header .header-inner {
    padding: 0 20px;
  }
}
@media (max-width: 480px) {
  .mobile-language-switcher .lang-link {
    padding: 4px 6px;
    gap: 2px;
    /* Hide text labels on very small screens, show only flags */
  }
  .mobile-language-switcher .lang-link .lang-label {
    display: none;
  }
}
/* Footer styles for Ukelele theme (updated for mobile layout) */
/* Outer footer */
.uk-footer {
  background: #000000;
  color: #FAEDCD;
  border-top: 2px solid #1a1a1a;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 0.95rem;
}
/* Main grid */
.uk-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3.5rem 2rem 2rem 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
  box-sizing: border-box;
}
/* Social section spans full width */
.uk-footer-social {
  grid-column: 1 / -1;
  order: 4;
  margin-top: 1rem;
}
/* Columns */
.uk-footer-col {
  position: relative;
}
/* Left column */
.uk-footer-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
/* logo */
.uk-footer-logo img {
  display: block;
  width: auto;
}
/* small script heading + big green headline */
.uk-footer-headline {
  margin-top: 0.25rem;
}
.uk-footer-script {
  display: block;
  font-family: 'Snell Roundhand', "Brush Script MT", cursive;
  color: #D26000;
  font-size: 2rem;
  letter-spacing: 0.6px;
}
.uk-footer-hero {
  margin: 0.4rem 0 0 0;
  font-size: 2.1rem;
  color: #80D75E;
  font-weight: 500;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* social links list with icons */
.uk-footer-social {
  margin-top: 0.5rem;
}
.uk-footer-social h4 {
  font-size: 0.9rem;
  font-weight: 400;
  color: #FAEDCD;
  margin: 0 0 1rem 0;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.uk-footer-social ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.uk-footer-social li {
  margin-bottom: 0.75rem;
}
.uk-footer-social li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #FAEDCD;
  text-decoration: none;
  opacity: 0.95;
  font-size: 0.9rem;
}
.uk-footer-social li a img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}
.uk-footer-social li a:hover {
  color: #D26000;
  opacity: 1;
}
/* Middle nav column */
.uk-footer-middle {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.uk-footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.8rem;
  text-align: left;
}
.uk-footer-menu li a {
  color: #FAEDCD;
  text-decoration: none;
  font-weight: 400;
  opacity: 0.95;
}
.uk-footer-menu li a:hover {
  color: #D26000;
}
/* Right column - contact */
.uk-footer-right {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: flex-end;
}
.uk-footer-col-title {
  font-size: 0.85rem;
  font-weight: 400;
  color: #FAEDCD;
  margin: 0 0 0.25rem 0;
  letter-spacing: 0.6px;
}
.uk-footer-contact {
  font-style: normal;
  text-align: right;
  line-height: 1.6;
}
.uk-footer-contact a {
  color: #FAEDCD;
  text-decoration: none;
  border-bottom: 1px dotted rgba(250, 237, 205, 0.06);
}
.uk-hours {
  margin-top: 0.4rem;
  color: rgba(250, 237, 205, 0.85);
  font-weight: 400;
}
/* bottom bar */
.uk-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  margin-top: 1.75rem;
  padding: 1rem 2rem;
  justify-items: center;
}
.uk-footer-bottom-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(250, 237, 205, 0.85);
  font-size: 0.85rem;
}
/* legal links */
.uk-footer-legal-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.25rem;
}
.uk-footer-legal-menu a {
  color: rgba(250, 237, 205, 0.65);
  text-decoration: none;
  font-size: 0.85rem;
}
.uk-footer-legal-menu a:hover {
  color: #FAEDCD;
}
/* ---------------------------
   Responsive / mobile tweaks
   (these are the important bits
   to match your first screenshot)
   --------------------------- */
@media (max-width: 992px) {
  .uk-footer-inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 3.5rem 3rem 0rem 3rem;
    text-align: left !important;
    /* ensure overall left text */
  }
  /* columns: left-align everything and remove center alignment */
  .uk-footer-left,
  .uk-footer-middle,
  .uk-footer-right {
    align-items: flex-start !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }
  /* force the middle nav wrapper to take full width and be left aligned */
  .uk-footer-nav {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left !important;
    display: block;
  }
  /* ensure the menu uses block layout and left text */
  .uk-footer-menu {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    text-align: left !important;
    list-style: none;
    gap: 0.6rem;
  }
  /* each menu item full width and left */
  .uk-footer-menu li {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding-top: 12px;
  }
  .uk-footer-menu li a {
    display: inline-block;
    width: 100%;
    text-align: left;
    padding-left: 0;
  }
  /* contact column left align */
  .uk-footer-contact {
    text-align: left !important;
  }
  /* headline / script left align */
  .uk-footer-hero {
    font-size: 1.8rem;
    margin-top: 0.25rem;
    margin-bottom: 2.25rem;
    line-height: 0.3;
    text-align: left !important;
  }
  .uk-footer-script {
    font-size: 1.5rem;
    text-align: left !important;
  }
  /* bottom area stack and left align */
  .uk-footer-bottom-inner {
    flex-direction: column;
    text-align: left;
  }
  .uk-footer-social,
  .uk-footer-right,
  .uk-footer-middle {
    margin-top: 1.5rem;
  }
}
/* small phones — tighten paddings and make headline compact */
@media (max-width: 600px) {
  .uk-footer-inner {
    padding: 3.5rem 2.5rem 0rem 2.5rem;
  }
  .uk-footer-logo img {
    height: auto;
  }
  /* slightly bigger on small phones like your screenshot */
  .uk-footer-hero {
    font-size: 1.4rem;
    /* compact, matches first screenshot */
    letter-spacing: 0.6px;
  }
  .uk-footer-script {
    font-size: 1.5rem;
  }
  .uk-footer-bottom {
    padding: 0.75rem 1rem;
  }
  .uk-footer-bottom-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
/* Components / Blocks */
/* Hero Banner Section */
.hero-banner {
  position: relative;
  width: 100%;
  min-height: 98vh;
  /* full screen height like in screenshot */
  display: flex;
  align-items: flex-end;
  /* text sits lower */
  justify-content: flex-start;
  /* align text left */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}
/* Overlay - dark gradient for blending */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.85) 100%);
}
/* Hero Content */
.hero-content {
  position: relative;
  z-index: 1;
  padding: 4rem 3rem;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  text-align: left;
}
/* Accent Script (orange, cursive style) */
.accent-script {
  font-family: 'Snell Roundhand', "Brush Script MT", cursive;
  font-weight: 500;
  font-style: normal;
  font-size: 90px;
  leading-trim: none;
  line-height: 18px;
  color: #D26000;
  margin-bottom: 0.5rem;
  display: block;
  position: relative;
  left: -5px;
  top: 7px;
  z-index: 1;
}
/* Hero Title */
.hero-title {
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 80px;
  leading-trim: none;
  line-height: 70px;
  letter-spacing: 1px;
  margin: 0;
  text-transform: uppercase;
  color: #80D75E;
  text-align: left;
  position: relative;
  z-index: 2;
}
/* Responsive */
@media (max-width: 1200px) {
  .hero-title {
    font-size: 4rem;
  }
  .accent-script {
    font-size: 2.5rem;
  }
}
@media (max-width: 992px) {
  .hero-title {
    font-size: 3rem;
  }
  .accent-script {
    font-size: 4rem;
  }
}
@media (max-width: 768px) {
  .hero-banner {
    min-height: 70vh;
  }
  .hero-content {
    padding: 1.25rem 2rem 1.15rem 2rem;
  }
  .hero-title {
    font-size: 3.5rem;
    line-height: 1;
  }
  .accent-script {
    font-size: 4rem;
    line-height: 1;
  }
}
@media (max-width: 480px) {
  .hero-banner {
    min-height: 65vh;
  }
  .hero-content {
    padding: 1.25rem 2rem 1.15rem 2rem;
  }
  .hero-title {
    font-size: 3.3rem;
    line-height: 1.2;
  }
  .accent-script {
    font-size: 3.9rem;
    line-height: 1;
  }
}
@media (max-width: 390px) {
  .hero-banner {
    min-height: 60vh;
  }
  .hero-content {
    padding: 1.25rem 2rem 1.15rem 2rem;
  }
  .hero-title {
    font-size: 3rem;
    line-height: 1.2;
  }
  .accent-script {
    font-size: 3.2rem;
    line-height: 1;
  }
}
.wp-block-ukelele-quote-with-image {
  position: relative;
  background: #000000;
  /* solid black background */
  color: #FAEDCD;
  padding: 4rem 2rem 10rem 2rem;
  /* kept as fixed values per your request */
  overflow: visible;
  /* ensure text is crisp and above the graphic */
  /* ---- Media breakpoints driven by variables ---- */
  /* Large screens — reduce overlap slightly at @bp-desktop */
  /* Desktop -> laptop */
  /* Tablet -> mobile: hide/stack and use more compact spacing */
  /* Extra small phones */
}
.wp-block-ukelele-quote-with-image .quote-text {
  max-width: 600px;
  margin-left: auto;
  margin-right: 0;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: 1.5px;
  z-index: 2;
  position: relative;
}
.wp-block-ukelele-quote-with-image .quote-text em {
  color: #D26000;
  font-family: 'Snell Roundhand', "Brush Script MT", cursive;
  font-weight: 500;
  font-style: normal;
  font-size: 64px;
  line-height: 0.45;
  letter-spacing: 0;
  position: relative;
  z-index: 0;
  display: inline-block;
  margin-left: 0.35rem;
}
.wp-block-ukelele-quote-with-image .image-section {
  position: absolute;
  top: -100px;
  /* overlap previous section (desktop) */
  right: 0;
  z-index: 0;
  pointer-events: none;
  /* optional hover lift for a little motion when parent hovered */
}
.wp-block-ukelele-quote-with-image .image-section img {
  width: 240px;
  max-width: 240px;
  opacity: 0.25;
  display: block;
  transition: transform 0.6s ease, opacity 0.4s ease;
  transform-origin: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
.wp-block-ukelele-quote-with-image .image-section:hover img,
.wp-block-ukelele-quote-with-image:hover .wp-block-ukelele-quote-with-image .image-section img {
  transform: translateY(-6px) scale(1.02);
  opacity: 0.32;
}
.wp-block-ukelele-quote-with-image .quote-text,
.wp-block-ukelele-quote-with-image .quote-text em {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 1200px) {
  .wp-block-ukelele-quote-with-image {
    /* padding kept the same but you can change directly here if needed */
  }
  .wp-block-ukelele-quote-with-image .image-section {
    top: -80px;
  }
  .wp-block-ukelele-quote-with-image .image-section img {
    width: 220px;
    max-width: 220px;
    opacity: 0.22;
  }
  .wp-block-ukelele-quote-with-image .quote-text {
    font-size: 32px;
  }
  .wp-block-ukelele-quote-with-image .quote-text em {
    font-size: 56px;
    line-height: 0.5;
  }
}
@media (max-width: 992px) {
  .wp-block-ukelele-quote-with-image .image-section {
    top: -60px;
  }
  .wp-block-ukelele-quote-with-image .image-section img {
    width: 200px;
    max-width: 200px;
    opacity: 0.2;
  }
  .wp-block-ukelele-quote-with-image .quote-text {
    max-width: 100%;
    margin-left: 0;
    /* center text flow on narrower layouts */
    margin-right: 0;
    font-size: 28px;
    line-height: 1.15;
  }
  .wp-block-ukelele-quote-with-image .quote-text em {
    font-size: 48px;
    line-height: 0.6;
  }
}
@media (max-width: 768px) {
  .wp-block-ukelele-quote-with-image {
    padding: 3.25rem 2rem 3.15rem 2rem;
  }
  .wp-block-ukelele-quote-with-image .image-section {
    display: none;
  }
  .wp-block-ukelele-quote-with-image .quote-text {
    margin: 0 auto;
    text-align: left;
    font-size: 34px;
    line-height: 1.25;
    letter-spacing: 0.6px;
    padding-right: 0.5rem;
  }
  .wp-block-ukelele-quote-with-image .quote-text em {
    font-size: 49px;
    line-height: 0.8;
    display: inline-block;
  }
}
@media (max-width: 480px) {
  .wp-block-ukelele-quote-with-image {
    padding: 3.25rem 2rem 3.15rem 2rem;
  }
  .wp-block-ukelele-quote-with-image .quote-text {
    font-size: 34px;
    line-height: 1.3;
    letter-spacing: 0.4px;
    max-width: 100%;
    text-align: left;
  }
  .wp-block-ukelele-quote-with-image .quote-text br {
    display: none;
  }
  .wp-block-ukelele-quote-with-image .quote-text em {
    font-size: 49px;
    line-height: 0.9;
  }
  .wp-block-ukelele-quote-with-image .image-section {
    display: none;
  }
}
.wp-block-ukelele-split-quote-image {
  position: relative;
  background: #000000;
  color: #FAEDCD;
  padding: 6rem 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Background logo watermark */
  /* Container */
  /* Quote Section */
  /* Author Styling */
  /* Image Section */
  /* Responsive */
}
.wp-block-ukelele-split-quote-image::before {
  content: "";
  position: absolute;
  left: 46%;
  top: 50%;
  transform: translate(-50%, -40%);
  width: 1300px;
  height: 600px;
  background: url('assets/images/ukelele_logo.png') no-repeat center;
  background-size: contain;
  z-index: 0;
  pointer-events: none;
  filter: brightness(0.8);
}
.wp-block-ukelele-split-quote-image .split-quote-image-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8rem;
  max-width: 1300px;
  width: 100%;
  position: relative;
  z-index: 2;
}
.wp-block-ukelele-split-quote-image .quote-content {
  flex: 3;
  position: relative;
  z-index: 2;
  margin-left: 40px;
}
.wp-block-ukelele-split-quote-image .quote-text {
  font-size: 1.24rem;
  letter-spacing: 1px;
  line-height: 1.9;
  margin-bottom: 2rem;
  font-weight: 400;
  color: #FAEDCD;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  margin-left: 0;
}
.wp-block-ukelele-split-quote-image .author-info {
  margin-top: 0.5rem;
  font-size: 1.1rem;
}
.wp-block-ukelele-split-quote-image .author-name {
  color: #D26000;
  font-weight: 400;
  margin-right: 0.5rem;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.wp-block-ukelele-split-quote-image .author-role {
  font-family: 'Snell Roundhand', "Brush Script MT", cursive;
  color: #D26000;
  font-size: 2rem;
  font-weight: 400;
}
.wp-block-ukelele-split-quote-image .image-section {
  flex: 1.5;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.wp-block-ukelele-split-quote-image .image-section img {
  width: 420px;
  height: 505px;
  border-radius: 0;
  object-fit: cover;
  filter: brightness(0.95);
  transition: all 0.5s ease;
  transform: scale(1);
  display: block;
}
.wp-block-ukelele-split-quote-image .image-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(180deg, rgba(0, 0, 0, 0) 15.27%, #000000 100%);
  opacity: 1;
  pointer-events: none;
  transition: all 0.4s ease;
}
.wp-block-ukelele-split-quote-image .image-section:hover img {
  transform: scale(1.06);
  filter: brightness(1);
}
@media (max-width: 1200px) {
  .wp-block-ukelele-split-quote-image {
    padding: 5rem 2.5rem;
  }
  .wp-block-ukelele-split-quote-image .split-quote-image-container {
    gap: 6rem;
  }
  .wp-block-ukelele-split-quote-image .image-section img {
    width: 380px;
    height: 460px;
  }
  .wp-block-ukelele-split-quote-image .quote-text {
    font-size: 1.2rem;
  }
}
@media (max-width: 992px) {
  .wp-block-ukelele-split-quote-image .split-quote-image-container {
    flex-direction: column;
    text-align: center;
    gap: 3rem;
  }
  .wp-block-ukelele-split-quote-image .quote-content {
    text-align: left;
    margin-left: 0px;
  }
  .wp-block-ukelele-split-quote-image .image-section {
    order: -1;
    margin-top: 2rem;
    text-align: center;
    justify-content: center;
  }
  .wp-block-ukelele-split-quote-image .image-section img {
    width: 340px;
    height: 430px;
  }
  .wp-block-ukelele-split-quote-image .image-section::after {
    opacity: 1;
  }
  .wp-block-ukelele-split-quote-image::before {
    width: 1250px;
    height: 398px;
    top: 33%;
    left: 90%;
  }
}
@media (max-width: 768px) {
  .wp-block-ukelele-split-quote-image {
    padding: 4rem 2rem;
  }
  .wp-block-ukelele-split-quote-image .split-quote-image-container {
    gap: 4rem;
  }
  .wp-block-ukelele-split-quote-image .image-section {
    order: -1;
  }
  .wp-block-ukelele-split-quote-image .image-section img {
    width: 320px;
    height: 400px;
  }
  .wp-block-ukelele-split-quote-image .quote-text {
    font-size: 1.15rem;
  }
  .wp-block-ukelele-split-quote-image .author-role {
    font-size: 1.8rem;
  }
}
@media (max-width: 480px) {
  .wp-block-ukelele-split-quote-image .quote-text {
    font-size: 1.3rem;
  }
  .wp-block-ukelele-split-quote-image .author-role {
    font-size: 1.8rem;
  }
  .wp-block-ukelele-split-quote-image .cta-button {
    padding: 0.8rem 1.5rem;
  }
  .wp-block-ukelele-split-quote-image .image-section {
    order: -1;
  }
}
.wp-block-ukelele-story-pair {
  box-sizing: border-box;
  background: #FAEDCD;
  padding: 6rem 3rem;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #FAEDCD;
  /* Background logo watermark */
}
.wp-block-ukelele-story-pair::before {
  content: "";
  position: absolute;
  transform: translate(200%, 85%);
  width: 30%;
  height: 221px;
  background: url('assets/images/Group 49.png') no-repeat center;
  background-size: contain;
  pointer-events: none;
}
.wp-block-ukelele-story-pair .story-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto 5rem;
  position: relative;
  z-index: 1;
}
.wp-block-ukelele-story-pair .story-row--image-left .story-text {
  text-align: left;
}
.wp-block-ukelele-story-pair .story-row--image-left .story-image::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, #000000 100%);
  pointer-events: none;
  opacity: 0.9;
}
.wp-block-ukelele-story-pair .story-row--image-right .story-text {
  text-align: left;
}
.wp-block-ukelele-story-pair .story-row--image-right .story-text .story-title-right {
  color: #000000;
  font-size: 4rem;
  font-weight: 500;
}
.wp-block-ukelele-story-pair .story-row--image-right .story-text .story-title-right strong {
  font-weight: 500 !important;
  letter-spacing: 1.5px;
  position: relative;
  z-index: 2;
  color: #80D75E;
}
.wp-block-ukelele-story-pair .story-row--image-right .story-text .story-title-right em {
  color: #D26000;
  letter-spacing: -2.5px;
  font-size: 5rem;
  position: relative;
  top: -35px;
}
.wp-block-ukelele-story-pair .story-row--image-right .story-image::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, #000000 100%);
  pointer-events: none;
  opacity: 0.9;
}
.wp-block-ukelele-story-pair .story-row--image-right .story-image {
  max-width: 480px;
  height: 580px;
}
.wp-block-ukelele-story-pair .story-row--image-right .story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wp-block-ukelele-story-pair .story-image {
  position: relative;
  flex: 1 1 45%;
  min-width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wp-block-ukelele-story-pair .story-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border: 0;
}
.wp-block-ukelele-story-pair .story-text {
  flex: 1 1 45%;
  max-width: 560px;
}
.wp-block-ukelele-story-pair .story-text h3 {
  margin: 0 0 0.5rem 0;
  font-size: 2.2rem;
  line-height: 1.05;
  font-weight: 400;
  color: #000000;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.wp-block-ukelele-story-pair .story-text h3 em {
  font-family: 'Snell Roundhand', "Brush Script MT", cursive;
  font-style: italic;
  color: #D26000;
  font-size: 1.05em;
  font-weight: 400;
  display: inline-block;
  vertical-align: baseline;
  margin-left: 0.25rem;
}
.wp-block-ukelele-story-pair .story-text .story-desc-left,
.wp-block-ukelele-story-pair .story-text .story-desc-right {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #000000;
  font-weight: 400;
}
.wp-block-ukelele-story-pair .story-text .story-desc-left strong,
.wp-block-ukelele-story-pair .story-text .story-desc-right strong {
  color: #D26000;
  font-weight: 400;
}
.wp-block-ukelele-story-pair blockquote,
.wp-block-ukelele-story-pair .story-text:before,
.wp-block-ukelele-story-pair .story-text:after {
  content: none;
}
@media (max-width: 1200px) {
  .wp-block-ukelele-story-pair {
    padding: 5rem 2.5rem;
  }
  .wp-block-ukelele-story-pair .story-row {
    gap: 2.5rem;
  }
  .wp-block-ukelele-story-pair .story-text h3 {
    font-size: 2.1rem;
  }
}
@media (max-width: 992px) {
  .wp-block-ukelele-story-pair .story-row {
    flex-direction: column;
    margin-bottom: 3rem;
  }
  .wp-block-ukelele-story-pair .story-image {
    min-width: 100%;
  }
  .wp-block-ukelele-story-pair .story-image img {
    max-height: 420px;
    object-fit: cover;
  }
  .wp-block-ukelele-story-pair .story-text {
    max-width: 100%;
    text-align: center;
  }
  .wp-block-ukelele-story-pair .story-text h3 {
    font-size: 2rem;
  }
}
@media (max-width: 768px) {
  .wp-block-ukelele-story-pair {
    padding: 4rem 2rem;
  }
  .wp-block-ukelele-story-pair .story-row {
    gap: 2rem;
  }
  .wp-block-ukelele-story-pair .story-text h3 {
    font-size: 1.8rem;
  }
  .wp-block-ukelele-story-pair .story-desc-left,
  .wp-block-ukelele-story-pair .story-desc-right {
    font-size: 0.98rem;
  }
}
@media (max-width: 480px) {
  .wp-block-ukelele-story-pair {
    padding: 3rem 1rem;
  }
  .wp-block-ukelele-story-pair .story-row--image-right .story-text .story-title-right strong {
    font-size: 3rem;
  }
  .wp-block-ukelele-story-pair .story-row--image-right .story-text .story-title-right em {
    font-size: 4rem;
  }
  .wp-block-ukelele-story-pair .story-text h3 {
    font-size: 1.4rem;
  }
  .wp-block-ukelele-story-pair .story-text h3 em {
    font-size: 1.1em;
  }
  .wp-block-ukelele-story-pair .story-text .story-desc-left,
  .wp-block-ukelele-story-pair .story-text .story-desc-right {
    font-size: 0.95rem;
  }
  .wp-block-ukelele-story-pair .story-row--image-right .story-image {
    order: -1;
  }
  .wp-block-ukelele-story-pair .story-row--image-right .story-text {
    order: 1;
  }
}
.wp-block-ukelele-feature-trio {
  background: #000000;
  color: #FAEDCD;
  padding: 4rem 2rem;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Each card */
  /* Responsive */
  /* Tablet adjustments */
}
.wp-block-ukelele-feature-trio .feature-trio-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: start;
}
.wp-block-ukelele-feature-trio .feature-card {
  display: flex;
  flex-direction: column;
  position: relative;
  /* Image area */
  /* Hover zoom and highlight */
  /* Copy block */
  /* Title */
  /* Description */
  /* Divider under image */
}
.wp-block-ukelele-feature-trio .feature-card .feature-image {
  width: 100%;
  height: 483px;
  overflow: hidden;
  position: relative;
  background: #000000;
  /* Gradient overlay */
}
.wp-block-ukelele-feature-trio .feature-card .feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease, filter 0.3s ease;
  filter: brightness(0.95);
}
.wp-block-ukelele-feature-trio .feature-card .feature-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, #000000 100%);
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.wp-block-ukelele-feature-trio .feature-card:hover .feature-image img {
  transform: scale(1.05);
  filter: brightness(1);
}
.wp-block-ukelele-feature-trio .feature-card .feature-copy {
  background: transparent;
  padding: 1.25rem 0 0 0;
}
.wp-block-ukelele-feature-trio .feature-card .feature-title {
  margin: 0 0 0.5rem 0;
  color: #FAEDCD;
  font-size: 2rem;
  line-height: 0.6;
  font-weight: 500;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-transform: none;
}
.wp-block-ukelele-feature-trio .feature-card .feature-title em {
  font-family: 'Snell Roundhand', "Brush Script MT", cursive;
  color: #D26000;
  font-style: italic;
  font-size: 3.4rem;
  font-weight: 400;
  display: inline-block;
  margin-left: 6px;
  transform: translateY(1px);
}
.wp-block-ukelele-feature-trio .feature-card .feature-desc {
  margin-top: 0.75rem;
  color: rgba(250, 237, 205, 0.95);
  font-size: 0.95rem;
  line-height: 1.7;
}
.wp-block-ukelele-feature-trio .feature-card::after {
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  margin-top: 0.75rem;
  background: rgba(255, 255, 255, 0.02);
}
@media (max-width: 992px) {
  .wp-block-ukelele-feature-trio {
    padding: 4rem 2rem 0rem 2rem;
  }
  .wp-block-ukelele-feature-trio .feature-trio-inner {
    grid-template-columns: 1fr;
  }
  .wp-block-ukelele-feature-trio .feature-card .feature-image {
    height: 360px;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .wp-block-ukelele-feature-trio .feature-trio-inner {
    gap: 28px;
  }
  .wp-block-ukelele-feature-trio .feature-card .feature-image {
    height: 420px;
  }
}
.wp-block-ukelele-claim-hero {
  position: relative;
  overflow: hidden;
  background: #000000;
  color: #80D75E;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  padding: 20rem 7rem 7rem 7rem;
  /* Main headline lines */
  /* Accent line */
  /* Optional inline <em> styles for emphasis */
  /* --- Arepa watermark (CSS-driven image on the right) --- */
  /* --- Responsive adjustments --- */
}
.wp-block-ukelele-claim-hero .claim-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1300px;
  margin: 0 auto;
}
.wp-block-ukelele-claim-hero .claim-title-top,
.wp-block-ukelele-claim-hero .claim-title-middle {
  font-size: 4rem;
  line-height: 1;
  font-weight: 500;
  color: #80D75E;
  margin: 0 0 10px 0;
  letter-spacing: -0.5px;
}
.wp-block-ukelele-claim-hero .claim-accent {
  font-family: 'Snell Roundhand', "Brush Script MT", cursive;
  color: #D26000;
  font-size: 4.5rem;
  margin-top: 12px;
  font-style: italic;
  line-height: 0;
  display: block;
}
.wp-block-ukelele-claim-hero .claim-title-top em,
.wp-block-ukelele-claim-hero .claim-title-middle em {
  font-family: 'Snell Roundhand', "Brush Script MT", cursive;
  color: #D26000;
  font-style: italic;
  font-weight: 400;
  margin-left: 6px;
  display: inline-block;
  vertical-align: baseline;
}
.wp-block-ukelele-claim-hero.claim-hero-arepa::before {
  content: "";
  position: absolute;
  right: 0%;
  top: -2%;
  width: 480px;
  height: 415px;
  background: url('assets/images/Modo_de_aislamiento.png') no-repeat center;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 1200px) {
  .wp-block-ukelele-claim-hero {
    padding: 14rem 5rem 4rem 5rem;
  }
  .wp-block-ukelele-claim-hero .claim-title-top,
  .wp-block-ukelele-claim-hero .claim-title-middle {
    font-size: 64px;
  }
  .wp-block-ukelele-claim-hero .claim-accent {
    font-size: 48px;
  }
  .wp-block-ukelele-claim-hero.claim-hero-arepa::before {
    width: 460px;
    height: 400px;
    top: 0%;
    right: 0%;
  }
}
@media (max-width: 992px) {
  .wp-block-ukelele-claim-hero {
    padding: 10rem 3rem 3rem 3rem;
  }
  .wp-block-ukelele-claim-hero .claim-hero-inner {
    margin: 0 auto;
  }
  .wp-block-ukelele-claim-hero .claim-title-top,
  .wp-block-ukelele-claim-hero .claim-title-middle {
    font-size: 52px;
    line-height: 1.1;
    margin-bottom: 0;
  }
  .wp-block-ukelele-claim-hero .claim-accent {
    font-size: 2.45rem;
  }
  .wp-block-ukelele-claim-hero.claim-hero-arepa::before {
    width: 280px;
    height: 250px;
    top: 0%;
  }
}
@media (max-width: 768px) {
  .wp-block-ukelele-claim-hero {
    padding: 8rem 2.5rem 2.5rem 2.5rem;
  }
  .wp-block-ukelele-claim-hero .claim-title-top,
  .wp-block-ukelele-claim-hero .claim-title-middle {
    font-size: 3rem;
  }
  .wp-block-ukelele-claim-hero .claim-accent {
    font-size: 2.45rem;
  }
  .wp-block-ukelele-claim-hero.claim-hero-arepa::before {
    width: 280px;
    height: 250px;
    top: 0%;
  }
}
@media (max-width: 480px) {
  .wp-block-ukelele-claim-hero {
    padding: 2rem 1.5rem 2rem 1.5rem;
  }
  .wp-block-ukelele-claim-hero .claim-hero-inner {
    margin: 0;
    text-align: left;
  }
  .wp-block-ukelele-claim-hero .claim-title-top,
  .wp-block-ukelele-claim-hero .claim-title-middle {
    font-size: 2.5rem;
  }
  .wp-block-ukelele-claim-hero .claim-accent {
    font-size: 2rem;
  }
  .wp-block-ukelele-claim-hero.claim-hero-arepa::before {
    width: 225px;
    height: 190px;
    top: 0%;
  }
}
.wp-block-ukelele-timeline {
  background: #FAEDCD;
  color: #FAEDCD;
  padding: 8rem 3rem 1rem 3rem;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  position: relative;
  box-sizing: border-box;
  overflow: visible;
  /* decorative svg behind header */
  /* header */
  /* main container that holds items and center line */
  /* each testimonial block (stacked: image above, text below) */
  /* odd = right, even = left - only control which half the block occupies */
  /* portrait image */
  /* Starting from the second item, lift the image more (-340px) */
  /* black gradient overlay at bottom of each image (subtle) */
  /* text block under image (always under the image inside the same .timeline-side) */
  /* helper spacing so timeline items don't stick exactly on top of one another */
  /* responsive: stack everything vertically, centered */
}
.wp-block-ukelele-timeline::before {
  content: "";
  position: absolute;
  top: 125px;
  left: 51%;
  transform: translateX(-50%);
  width: 385px;
  height: 280px;
  background: url('assets/images/Vector.png') no-repeat center;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}
.wp-block-ukelele-timeline .timeline-header {
  text-align: center;
  margin-bottom: 12rem;
  position: relative;
  z-index: 2;
}
.wp-block-ukelele-timeline .timeline-header .small-title {
  color: #80D75E;
  font-size: 2.4rem;
  font-weight: 500;
}
.wp-block-ukelele-timeline .timeline-header .big-title {
  font-family: 'Snell Roundhand', "Brush Script MT", cursive;
  color: #D26000;
  font-size: 5.1rem;
  line-height: 0.7;
  margin-bottom: 0.5rem;
  font-weight: 400;
  position: relative;
  top: -20px;
}
.wp-block-ukelele-timeline .timeline-header .subtitle {
  max-width: 640px;
  margin: 2rem auto 0;
  font-size: 1.1rem;
  color: #000000;
  line-height: 1;
  font-weight: 400;
}
.wp-block-ukelele-timeline .timeline-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: block;
  z-index: 2;
  /* vertical center line */
}
.wp-block-ukelele-timeline .timeline-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 107.4%;
  background: #000000;
  z-index: 1;
}
.wp-block-ukelele-timeline .timeline-item {
  position: relative;
  width: 100%;
  margin-bottom: 6.5rem;
  z-index: 2;
}
.wp-block-ukelele-timeline .timeline-side {
  width: 48%;
  box-sizing: border-box;
  position: relative;
  min-height: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wp-block-ukelele-timeline .timeline-item:nth-child(odd) .timeline-side {
  margin-left: 52%;
  margin-right: 0;
  text-align: left;
}
.wp-block-ukelele-timeline .timeline-item:nth-child(even) .timeline-side {
  margin-right: 52%;
  margin-left: 0;
  text-align: left;
}
.wp-block-ukelele-timeline .timeline-thumb {
  width: 100%;
  max-width: 340px;
  /* portrait width */
  height: 440px;
  overflow: hidden;
  background: #000000;
  box-shadow: none;
  /* removed per request */
  margin: 0 auto 1rem;
  /* default lift */
  display: block;
  position: relative;
  transition: transform 0.45s ease;
}
.wp-block-ukelele-timeline .timeline-item:nth-child(n+2) .timeline-thumb {
  margin-top: -340px;
  margin-bottom: 1rem;
}
.wp-block-ukelele-timeline .timeline-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease, filter 0.35s ease;
  filter: brightness(0.95);
}
.wp-block-ukelele-timeline .timeline-thumb:hover img {
  transform: scale(1.07);
  /* smooth zoom on hover */
  filter: brightness(1);
}
.wp-block-ukelele-timeline .timeline-thumb::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  opacity: 0.35;
}
.wp-block-ukelele-timeline .timeline-content {
  width: 100%;
  max-width: 340px;
  /* match the thumb width so the text aligns exactly under the image */
  margin: 0 auto;
  /* center under the thumb */
  display: block;
  text-align: left;
  /* left-aligned text inside the bounded content box */
  padding-top: 0.5rem;
}
.wp-block-ukelele-timeline .timeline-name {
  font-size: 1.15rem;
  font-weight: 500;
  color: #000000;
  margin-bottom: 0.5rem;
}
.wp-block-ukelele-timeline .timeline-quote {
  font-size: 1rem;
  line-height: 1.7;
  color: #000000;
  margin: 0;
  font-weight: 400;
}
.wp-block-ukelele-timeline .timeline-item + .timeline-item {
  margin-top: 2rem;
}
@media (max-width: 1200px) {
  .wp-block-ukelele-timeline {
    padding: 7rem 2.5rem;
  }
  .wp-block-ukelele-timeline .timeline-header {
    margin-bottom: 10rem;
  }
  .wp-block-ukelele-timeline .timeline-header .small-title {
    font-size: 2.2rem;
  }
  .wp-block-ukelele-timeline .timeline-header .big-title {
    font-size: 4.8rem;
  }
  .wp-block-ukelele-timeline .timeline-header .subtitle {
    font-size: 1rem;
  }
  .wp-block-ukelele-timeline .timeline-item {
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
  }
}
@media (max-width: 992px) {
  .wp-block-ukelele-timeline {
    padding: 6rem 2rem;
    /* Convert to horizontal scroll container with scroll-snap */
    /* Remove uplift on mobile for carousel */
  }
  .wp-block-ukelele-timeline .timeline-inner::before {
    display: none;
  }
  .wp-block-ukelele-timeline .timeline-inner {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    max-width: 100%;
    margin: 0 -2rem;
    /* extend to screen edges */
    padding: 0 2rem;
    /* Hide scrollbar but keep functionality */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
  }
  .wp-block-ukelele-timeline .timeline-inner::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
  }
  .wp-block-ukelele-timeline .timeline-item {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    margin-bottom: 0;
    padding: 0 1rem;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  .wp-block-ukelele-timeline .timeline-side {
    width: 100% !important;
    max-width: 500px;
    margin: 0 !important;
    text-align: center !important;
    align-items: center !important;
  }
  .wp-block-ukelele-timeline .timeline-thumb {
    max-width: 420px;
    height: 520px;
    margin: 0 auto 1.25rem;
  }
  .wp-block-ukelele-timeline .timeline-item:nth-child(n+2) .timeline-thumb {
    margin-top: 0;
  }
  .wp-block-ukelele-timeline .timeline-content {
    max-width: 420px;
    margin: 0 auto 2rem;
    text-align: center !important;
    padding-top: 0.5rem;
  }
}
@media (max-width: 768px) {
  .wp-block-ukelele-timeline {
    padding: 5rem 1.75rem;
  }
  .wp-block-ukelele-timeline .timeline-inner {
    margin: 0 -1.75rem;
    padding: 0 1.75rem;
  }
  .wp-block-ukelele-timeline .timeline-thumb {
    max-width: 380px;
    height: 480px;
  }
  .wp-block-ukelele-timeline .timeline-content {
    max-width: 380px;
  }
  .wp-block-ukelele-timeline .timeline-name {
    font-size: 1.1rem;
  }
  .wp-block-ukelele-timeline .timeline-quote {
    font-size: 0.98rem;
  }
  .wp-block-ukelele-timeline .timeline-header .big-title {
    line-height: 0.7;
  }
}
@media (max-width: 480px) {
  .wp-block-ukelele-timeline {
    padding: 4rem 1.5rem 0.5rem 1.5rem;
  }
  .wp-block-ukelele-timeline .timeline-inner {
    margin: 0 -1.5rem;
    padding: 0 1.5rem;
  }
  .wp-block-ukelele-timeline .timeline-item {
    padding: 0 0.5rem;
  }
  .wp-block-ukelele-timeline .timeline-thumb {
    height: 420px;
    max-width: 100%;
    margin-top: 0;
  }
  .wp-block-ukelele-timeline .timeline-content {
    max-width: 100%;
  }
  .wp-block-ukelele-timeline .timeline-name {
    font-size: 1.05rem;
  }
  .wp-block-ukelele-timeline .timeline-quote {
    font-size: 0.95rem;
  }
  .wp-block-ukelele-timeline .timeline-header .small-title {
    font-size: 2rem;
  }
  .wp-block-ukelele-timeline .timeline-header .big-title {
    font-size: 4.2rem;
  }
}
@media (max-width: 390px) {
  .wp-block-ukelele-timeline .timeline-header .small-title {
    font-size: 1.5rem;
  }
  .wp-block-ukelele-timeline .timeline-header .big-title {
    font-size: 3.5rem;
    line-height: 1;
    position: relative;
    top: 0;
  }
}
/* Food Spotlight - single image + top/bottom gradients (Figma specs) */
.wp-block-ukelele-food-spotlight {
  position: relative;
  width: 100%;
  /* Figma height is 1350px - we use that on large screens, scale down responsively */
  height: 1350px;
  min-height: 420px;
  overflow: hidden;
  background-color: #000;
  /* fallback if no image */
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: scroll;
  display: block;
}
/* No extra pseudo overlays here — gradients are stacked in background-image */
.wp-block-ukelele-food-spotlight::before,
.wp-block-ukelele-food-spotlight::after {
  content: "";
  display: none;
}
/* Responsive scaling */
@media (max-width: 1440px) {
  .wp-block-ukelele-food-spotlight {
    height: 1000px;
  }
}
@media (max-width: 1200px) {
  .wp-block-ukelele-food-spotlight {
    height: 850px;
  }
}
@media (max-width: 992px) {
  .wp-block-ukelele-food-spotlight {
    height: 620px;
    background-position: center top;
  }
}
@media (max-width: 768px) {
  .wp-block-ukelele-food-spotlight {
    height: 520px;
    background-position: center top;
  }
}
@media (max-width: 480px) {
  .wp-block-ukelele-food-spotlight {
    height: 420px;
    background-position: center top;
  }
}
/* Dual Testimonial - styles scoped to the block (LESS) */
.wp-block-ukelele-dual-testimonial {
  background: #000000;
  color: #FAEDCD;
  padding: 12rem 3rem;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Layout container */
  /* Left column: small image on top, quote beneath */
  /* Image wrappers */
  /* Quote styling */
  /* Author */
  /* Small screens: stack and make images full width-ish */
  /* Tablet and smaller: hide right image */
}
.wp-block-ukelele-dual-testimonial .dt-row {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 486px;
  /* left column flexible, right column 486px (Figma) */
  gap: 48px;
  align-items: start;
}
.wp-block-ukelele-dual-testimonial .dt-left-column {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.wp-block-ukelele-dual-testimonial .dt-image {
  position: relative;
  overflow: hidden;
  display: block;
  background: #000000;
}
.wp-block-ukelele-dual-testimonial .dt-image--left {
  width: 486px;
  height: 306px;
  flex: 0 0 auto;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
  align-self: start;
}
.wp-block-ukelele-dual-testimonial .dt-image--right {
  width: 486px;
  height: 573px;
  justify-self: end;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}
.wp-block-ukelele-dual-testimonial .dt-image::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, #000000 100%);
  z-index: 2;
}
.wp-block-ukelele-dual-testimonial .dt-image:hover {
  z-index: 5;
}
.wp-block-ukelele-dual-testimonial .dt-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center center;
  transition: transform 300ms cubic-bezier(0.2, 0.9, 0.2, 1), filter 300ms ease, box-shadow 300ms ease;
}
.wp-block-ukelele-dual-testimonial .dt-image:hover img {
  transform: scale(1.08);
  filter: brightness(1);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}
.wp-block-ukelele-dual-testimonial .dt-quote-wrap {
  margin-top: 20px;
  max-width: 560px;
}
.wp-block-ukelele-dual-testimonial .dt-quote {
  font-size: 1.25rem;
  line-height: 1.8;
  color: rgba(250, 237, 205, 0.95);
  margin: 0 0 18px 0;
}
.wp-block-ukelele-dual-testimonial .dt-author {
  font-size: 1rem;
  color: #D26000;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.wp-block-ukelele-dual-testimonial .dt-author-name {
  font-weight: 400;
  color: #D26000;
}
.wp-block-ukelele-dual-testimonial .dt-author-role {
  font-family: 'Snell Roundhand', "Brush Script MT", cursive;
  font-style: italic;
  color: #D26000;
  font-size: 2.4rem;
  margin-left: 6px;
}
@media (max-width: 992px) {
  .wp-block-ukelele-dual-testimonial {
    padding: 3rem 1.5rem;
  }
  .wp-block-ukelele-dual-testimonial .dt-image--right {
    display: none;
  }
  .wp-block-ukelele-dual-testimonial .dt-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .wp-block-ukelele-dual-testimonial .dt-image--left,
  .wp-block-ukelele-dual-testimonial .dt-image--right {
    width: 100%;
    height: 320px;
  }
  .wp-block-ukelele-dual-testimonial .dt-quote-wrap {
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  .wp-block-ukelele-dual-testimonial .dt-image--right {
    display: none;
  }
  .wp-block-ukelele-dual-testimonial .dt-image--left {
    height: 220px;
  }
  .wp-block-ukelele-dual-testimonial .dt-quote {
    font-size: 1.25rem;
  }
  .wp-block-ukelele-dual-testimonial .dt-author-name {
    font-size: 1.4rem;
  }
  .wp-block-ukelele-dual-testimonial .dt-author-role {
    font-size: 2rem;
  }
}
/* cta-split.less — mobile-image and desktop-image variant */
/* Uses your theme variables: @color-bg, @color-text, @color-accent, @color-accent-2, @font-display, @font-script */
.wp-block-ukelele-cta-split {
  box-sizing: border-box;
  position: relative;
  background: #000000;
  color: #FAEDCD;
  padding: 9rem 3rem;
  overflow: hidden;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
  /* watermark pseudo elements (desktop only) */
  /* ---------- inner flex layout ---------- */
  /* LEFT */
  /* end cta-left */
  /* RIGHT (desktop image) */
  /* MOBILE-ONLY IMAGE wrapper (initially hidden on desktop via CSS) */
  /* large view tweak */
  /* ---------- RESPONSIVE: show mobile image and hide desktop image ---------- */
  /* ultra-small tweak */
}
.wp-block-ukelele-cta-split::before,
.wp-block-ukelele-cta-split::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}
.wp-block-ukelele-cta-split::before {
  background-image: url('assets/images/Capa_1 (1).png');
  width: 420px;
  height: 340px;
  transform: translate(-18%, 80%);
  opacity: 0.9;
}
.wp-block-ukelele-cta-split::after {
  background-image: url('assets/images/Capa_1.png');
  width: 1500px;
  height: 325px;
  transform: translate(53%, -180%);
}
.wp-block-ukelele-cta-split .cta-split-inner {
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  gap: 48px;
  align-items: center;
  justify-content: space-between;
  padding-left: 2rem;
  padding-right: 2rem;
  position: relative;
  z-index: 2;
}
.wp-block-ukelele-cta-split .cta-left {
  flex: 1 1 60%;
  z-index: 3;
  min-width: 280px;
}
.wp-block-ukelele-cta-split .cta-left .cta-title {
  margin: 0 0 0.75rem 0;
  font-size: 3.6rem;
  color: #80D75E;
  line-height: 1;
  font-weight: 500;
}
.wp-block-ukelele-cta-split .cta-left .cta-title em {
  font-family: 'Snell Roundhand', "Brush Script MT", cursive;
  color: #D26000;
  font-style: italic;
  margin-left: 0.3rem;
  font-size: 1.05em;
  display: inline-block;
  transform: translateY(-10px);
}
.wp-block-ukelele-cta-split .cta-left .cta-subtitle {
  margin: 0 0 1.4rem 0;
  color: #FAEDCD;
  font-size: 1rem;
  max-width: 640px;
  line-height: 1.6;
}
.wp-block-ukelele-cta-split .cta-left .cta-subtitle strong {
  font-weight: 600;
  color: #FAEDCD;
}
.wp-block-ukelele-cta-split .cta-left .cta-bullets {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 1.5rem 0;
  display: grid;
  gap: 1rem;
  font-size: 1rem;
}
.wp-block-ukelele-cta-split .cta-left .cta-bullets li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.wp-block-ukelele-cta-split .cta-left .cta-bullets li .cta-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  margin-top: 2px;
}
.wp-block-ukelele-cta-split .cta-left .cta-bullets li strong {
  min-width: 110px;
  font-weight: 700;
  color: #FAEDCD;
  font-size: 0.95rem;
}
.wp-block-ukelele-cta-split .cta-left .cta-bullets li .cta-bullet-desc {
  color: rgba(250, 237, 205, 0.92);
  font-size: 0.95rem;
  line-height: 1.6;
}
.wp-block-ukelele-cta-split .cta-left .cta-actions {
  margin-top: 1.4rem;
  display: flex;
  gap: 12px;
  justify-content: flex-start;
}
.wp-block-ukelele-cta-split .cta-left .cta-button {
  display: inline-block;
  min-width: 220px;
  background: #D26000;
  color: #111;
  padding: 0.9rem 1.6rem;
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
}
.wp-block-ukelele-cta-split .cta-right-column {
  flex: 0 0 480px;
  max-width: 480px;
  z-index: 2;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}
.wp-block-ukelele-cta-split .cta-image-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  overflow: hidden;
}
.wp-block-ukelele-cta-split .cta-image {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 0;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
  transition: transform 0.35s ease, filter 0.35s ease;
  margin: 0 auto;
}
.wp-block-ukelele-cta-split .cta-image:hover {
  transform: scale(1.02);
  filter: brightness(1);
}
.wp-block-ukelele-cta-split .cta-image-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
  pointer-events: none;
  z-index: 4;
}
.wp-block-ukelele-cta-split .cta-image-mobile-wrap {
  display: none;
  /* shown on mobile via media queries */
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
  z-index: 3;
}
.wp-block-ukelele-cta-split .cta-image-mobile {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
  margin: 0 auto 1.2rem;
}
@media (min-width: 1400px) {
  .wp-block-ukelele-cta-split .cta-image {
    height: 520px;
  }
  .wp-block-ukelele-cta-split .cta-right-column {
    flex-basis: 540px;
    max-width: 540px;
  }
  .wp-block-ukelele-cta-split .cta-split-inner {
    gap: 68px;
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-width: 1099px) {
  .wp-block-ukelele-cta-split {
    padding: 4rem 1.5rem;
    /* show mobile-only image first (DOM already places it before .cta-split-inner) */
    /* hide desktop image on small screens to avoid doubling */
    /* mobile image slight taller feel */
  }
  .wp-block-ukelele-cta-split .cta-split-inner {
    flex-direction: column;
    /* vertical flow on mobile */
    gap: 28px;
    align-items: stretch;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .wp-block-ukelele-cta-split .cta-image-mobile-wrap {
    display: block;
  }
  .wp-block-ukelele-cta-split .cta-image {
    display: none !important;
  }
  .wp-block-ukelele-cta-split .cta-left {
    order: 0;
    text-align: left;
    /* center CTA on mobile */
  }
  .wp-block-ukelele-cta-split .cta-left .cta-title {
    font-size: 2.4rem;
  }
  .wp-block-ukelele-cta-split .cta-left .cta-subtitle {
    display: block;
    max-width: 100%;
  }
  .wp-block-ukelele-cta-split .cta-left .cta-actions {
    justify-content: center;
  }
  .wp-block-ukelele-cta-split .cta-right-column {
    display: none;
    /* desktop-only right column hidden on mobile */
    order: 1;
  }
  .wp-block-ukelele-cta-split .cta-image-mobile {
    height: 360px;
    max-width: calc(100% - 3rem);
  }
  .wp-block-ukelele-cta-split::before,
  .wp-block-ukelele-cta-split::after {
    display: none;
    /* hide heavy decorations on mobile */
  }
}
@media (max-width: 520px) {
  .wp-block-ukelele-cta-split {
    padding: 3rem 0.8rem;
  }
  .wp-block-ukelele-cta-split .cta-image-mobile {
    height: 480px;
    max-width: calc(100% - 2rem);
  }
  .wp-block-ukelele-cta-split .cta-title {
    font-size: 2rem;
  }
  .wp-block-ukelele-cta-split .cta-split-inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
/* Journey CTA block - frontend styles, scoped to .wp-block-ukelele-journey-cta */
.wp-block-ukelele-journey-cta {
  box-sizing: border-box;
  width: 100%;
  background: #FAEDCD;
  padding: 15rem 3rem 10rem 3rem;
  position: relative;
  overflow: visible;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #000000;
  overflow: hidden;
  /* background decorative SVG (megaphone or glyph), on the right */
  /* inner container: keep content centered */
  /* Left column - headline & subtitle */
  /* Right column - CTA button */
  /* option to hide background graphic */
  /* RESPONSIVE */
}
.wp-block-ukelele-journey-cta::before {
  content: "";
  position: absolute;
  right: -2%;
  top: 22%;
  width: 480px;
  height: 480px;
  background-image: url('assets/images/plane.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}
.wp-block-ukelele-journey-cta .journey-cta-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2rem;
  position: relative;
  z-index: 2;
  justify-content: space-between;
  flex-wrap: nowrap;
  /* keep two columns on large screens */
}
.wp-block-ukelele-journey-cta .journey-cta-left {
  flex: 1 1 65%;
  min-width: 420px;
}
.wp-block-ukelele-journey-cta .journey-headline {
  margin: 0 0 0.6rem 0;
  font-size: 2.2rem;
  line-height: 1.06;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #111;
}
.wp-block-ukelele-journey-cta .journey-headline em {
  font-family: 'Snell Roundhand', "Brush Script MT", cursive;
  color: #D26000;
  font-style: italic;
  font-weight: 400;
  font-size: 3.5rem;
  display: inline-block;
  vertical-align: baseline;
  margin-left: 0.25rem;
  line-height: 0;
}
.wp-block-ukelele-journey-cta .journey-subtitle {
  margin-top: 0.65rem;
  font-size: 1rem;
  color: #000000;
  max-width: 46ch;
  line-height: 1.6;
}
.wp-block-ukelele-journey-cta .journey-cta-right {
  flex: 0 0 28%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 240px;
}
.wp-block-ukelele-journey-cta .journey-cta-button-wrap {
  display: inline-block;
}
.wp-block-ukelele-journey-cta .journey-cta-button {
  display: inline-block;
  padding: 14px 36px;
  background-color: #D26000;
  color: #000000;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.4px;
  border-radius: 6px;
  box-shadow: none;
  transition: transform 0.18s ease, background-color 0.18s ease;
  text-transform: uppercase;
}
.wp-block-ukelele-journey-cta .journey-cta-button:hover,
.wp-block-ukelele-journey-cta .journey-cta-button:focus {
  transform: translateY(-3px);
  background-color: #C84E00;
  color: #000000;
}
.wp-block-ukelele-journey-cta.no-bg::before {
  display: none;
}
@media (max-width: 1200px) {
  .wp-block-ukelele-journey-cta {
    padding: 14rem 2.5rem 9rem 2.5rem;
  }
  .wp-block-ukelele-journey-cta .journey-headline {
    font-size: 2rem;
    text-align: left;
  }
  .wp-block-ukelele-journey-cta .journey-headline em {
    line-height: 0.8;
  }
  .wp-block-ukelele-journey-cta .journey-cta-left {
    min-width: 400px;
  }
  .wp-block-ukelele-journey-cta .journey-cta-right {
    flex-basis: 28%;
    min-width: 220px;
  }
}
@media (max-width: 992px) {
  .wp-block-ukelele-journey-cta .journey-headline {
    font-size: 36px;
  }
  .wp-block-ukelele-journey-cta .journey-cta-left {
    min-width: 360px;
  }
  .wp-block-ukelele-journey-cta .journey-cta-right {
    flex-basis: 30%;
    min-width: 200px;
    justify-content: left;
  }
}
@media (max-width: 768px) {
  .wp-block-ukelele-journey-cta {
    padding: 3rem 1.25rem;
  }
  .wp-block-ukelele-journey-cta .journey-cta-inner {
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
  }
  .wp-block-ukelele-journey-cta .journey-cta-left {
    min-width: auto;
    width: 100%;
  }
  .wp-block-ukelele-journey-cta .journey-headline {
    font-size: 2rem;
  }
  .wp-block-ukelele-journey-cta .journey-cta-right {
    width: 100%;
    justify-content: left;
  }
  .wp-block-ukelele-journey-cta .journey-cta-button {
    width: 280px;
    max-width: 100%;
  }
  .wp-block-ukelele-journey-cta::before {
    display: none;
  }
}
@media (max-width: 480px) {
  .wp-block-ukelele-journey-cta .journey-headline {
    font-size: 22px;
    line-height: 1.08;
  }
  .wp-block-ukelele-journey-cta .journey-subtitle {
    font-size: 0.95rem;
  }
  .wp-block-ukelele-journey-cta .journey-cta-button {
    padding: 10px 22px;
    font-size: 0.85rem;
    width: auto;
  }
}
/* Front-end styles for Journey CTA 2 */
/* Targets both the WP wrapper and the saved class */
.wp-block-ukelele-journey-cta-2,
.journey-cta-2 {
  box-sizing: border-box;
  width: 100%;
  display: block;
  position: relative;
  background: #000000;
  /* black hero */
  color: #FAEDCD;
  padding: 6rem 3rem;
  overflow: hidden;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
/* central content area */
.journey-cta-2 {
  /* main headline (Clash Display) */
  /* accent line in cursive */
  /* actions */
  /* decorative subtle overlay that fades toward bottom */
  /* responsive sizes */
}
.journey-cta-2 .jc2-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  position: relative;
  z-index: 2;
  padding-left: 6%;
}
.journey-cta-2 .jc2-title {
  margin: 0;
  color: #FAEDCD;
  font-weight: 500;
  font-size: 64px;
  /* large desktop */
  line-height: 60px;
  letter-spacing: -0.02em;
  text-wrap: balance;
  word-break: break-word;
  width: 55%;
}
.journey-cta-2 .jc2-accent {
  margin-top: 0.35rem;
  color: #D26000;
  font-family: 'Snell Roundhand', "Brush Script MT", cursive;
  font-size: 80px;
  line-height: 60px;
  font-weight: 400;
  margin-bottom: 1.25rem;
  transform-origin: left center;
  width: 50%;
}
.journey-cta-2 .jc2-actions {
  margin-top: 1.6rem;
  z-index: 3;
}
.journey-cta-2 .jc2-button {
  width: 15rem;
}
.journey-cta-2:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.75) 100%);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 1200px) {
  .journey-cta-2 {
    padding: 5.5rem 2.5rem;
  }
  .journey-cta-2 .jc2-content {
    padding-left: 4%;
  }
  .journey-cta-2 .jc2-title {
    font-size: 56px;
  }
  .journey-cta-2 .jc2-accent {
    font-size: 40px;
  }
}
@media (max-width: 992px) {
  .journey-cta-2 {
    padding: 4rem 1.5rem;
  }
  .journey-cta-2 .jc2-content {
    padding-left: 0%;
    max-width: 95%;
  }
  .journey-cta-2 .jc2-title {
    font-size: 40px;
    text-align: left;
  }
  .journey-cta-2 .jc2-accent {
    font-size: 34px;
  }
  .journey-cta-2 .jc2-button {
    padding: 0.7rem 1.6rem;
  }
  .journey-cta-2 .jc2-actions,
  .journey-cta-2 .jc2-button {
    margin-top: 0;
  }
}
@media (max-width: 768px) {
  .journey-cta-2 {
    padding: 3.5rem 1.25rem;
  }
  .journey-cta-2 .jc2-title {
    font-size: 36px;
    width: 90%;
  }
  .journey-cta-2 .jc2-accent {
    font-size: 30px;
    width: 90%;
  }
}
@media (max-width: 480px) {
  .journey-cta-2 {
    padding: 2.5rem 1rem;
  }
  .journey-cta-2 .jc2-title {
    font-size: 3rem;
    line-height: 1.08;
  }
  .journey-cta-2 .jc2-accent {
    font-size: 3.4rem;
    margin-bottom: 0.8rem;
  }
  .journey-cta-2 .jc2-content {
    padding-left: 0%;
    align-items: flex-start;
  }
  .journey-cta-2 .jc2-button {
    width: auto;
    display: inline-block;
  }
}
/* Hero Banner 2 - updated sizes and overlay gradient
   - Added larger breakpoints including a 4K breakpoint (>=2560px) with min-height: 1400px.
   - Added the requested two-layer gradient to the overlay (kept the top-heavy dark fade beneath it).
*/
.wp-block-ukelele-hero-banner-2,
.hero-banner-2 {
  box-sizing: border-box;
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  min-height: 860px;
  color: #FAEDCD;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background-color: #000000;
  /* fallback */
  /* hero overlay:
     - first we apply the two-layer gradient you provided
     - then a top-heavy dark gradient underneath to ensure the nav blends well
     (order matters: the first listed background is painted on top)
  */
  /* content should sit above the overlay */
  /* fallback pseudo when no inline image is present on the block root */
  /* --- Breakpoints & larger-monitor adjustments --- */
  /* Large desktop */
  /* Extra-large screens (wide desktops) */
  /* very large wide monitors */
  /* 4K monitors and similar ultra-wide/very-high-res screens
     user requested final height of 1400px for 4K: applying at >=2560px
  */
  /* Tablet / small desktop fallback */
  /* Tablet / large phone */
  /* Mobile */
}
.wp-block-ukelele-hero-banner-2 .hero-overlay,
.hero-banner-2 .hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* requested gradient (two layers) on top, then the stronger top-to-bottom fade */
  background: linear-gradient(359.09deg, rgba(0, 0, 0, 0) 53.79%, #000000 99.67%), linear-gradient(180deg, rgba(0, 0, 0, 0) 52.38%, #000000 95.25%), linear-gradient(180deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.72) 10%, rgba(0, 0, 0, 0.48) 25%, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0.06) 62%, rgba(0, 0, 0, 0) 80%);
  background-blend-mode: overlay, overlay, normal;
}
.wp-block-ukelele-hero-banner-2 .hero-content,
.hero-banner-2 .hero-content {
  position: absolute;
  left: 6%;
  bottom: 6%;
  z-index: 2;
  max-width: 55%;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: #FAEDCD;
  text-rendering: optimizeLegibility;
}
.wp-block-ukelele-hero-banner-2 .accent-script,
.hero-banner-2 .accent-script {
  font-family: 'Snell Roundhand', "Brush Script MT", cursive;
  color: #D26000;
  font-size: 3.5rem;
  line-height: 1;
  margin-bottom: -0.65rem;
  width: 82%;
}
.wp-block-ukelele-hero-banner-2 .hero-title,
.hero-banner-2 .hero-title {
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #80D75E;
  font-weight: 500;
  margin: 0;
  /* base font-size kept large, scales in breakpoints below */
  font-size: 4rem;
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.wp-block-ukelele-hero-banner-2:not([style*="background-image"])::before,
.hero-banner-2:not([style*="background-image"])::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: transparent;
  pointer-events: none;
}
@media (min-width: 1200px) {
  .wp-block-ukelele-hero-banner-2,
  .hero-banner-2 {
    min-height: 1000px;
  }
  .wp-block-ukelele-hero-banner-2 .hero-content,
  .hero-banner-2 .hero-content {
    max-width: 52%;
    left: 5.5%;
    bottom: 6%;
  }
}
@media (min-width: 1400px) {
  .wp-block-ukelele-hero-banner-2,
  .hero-banner-2 {
    min-height: 920px;
  }
  .wp-block-ukelele-hero-banner-2 .hero-content,
  .hero-banner-2 .hero-content {
    max-width: 65%;
    left: 5%;
    bottom: 6%;
  }
}
@media (min-width: 2000px) {
  .wp-block-ukelele-hero-banner-2,
  .hero-banner-2 {
    min-height: 1200px;
  }
  .wp-block-ukelele-hero-banner-2 .hero-content,
  .hero-banner-2 .hero-content {
    max-width: 48%;
    left: 6%;
    bottom: 6%;
  }
}
@media (min-width: 2560px) {
  .wp-block-ukelele-hero-banner-2,
  .hero-banner-2 {
    min-height: 1400px;
  }
  .wp-block-ukelele-hero-banner-2 .hero-content,
  .hero-banner-2 .hero-content {
    max-width: 42%;
    left: 6%;
    bottom: 7%;
  }
}
@media (max-width: 1200px) and (min-width: 992px) {
  .wp-block-ukelele-hero-banner-2,
  .hero-banner-2 {
    min-height: 820px;
  }
  .wp-block-ukelele-hero-banner-2 .hero-title,
  .hero-banner-2 .hero-title {
    font-size: 48px;
  }
  .wp-block-ukelele-hero-banner-2 .hero-content,
  .hero-banner-2 .hero-content {
    max-width: 62%;
    left: 5%;
    bottom: 5%;
  }
}
@media (max-width: 992px) {
  .wp-block-ukelele-hero-banner-2,
  .hero-banner-2 {
    min-height: 620px;
  }
  .wp-block-ukelele-hero-banner-2 .hero-content,
  .hero-banner-2 .hero-content {
    max-width: 90%;
    left: 0;
    bottom: 6%;
  }
  .wp-block-ukelele-hero-banner-2 .hero-title,
  .hero-banner-2 .hero-title {
    font-size: 36px;
  }
  .wp-block-ukelele-hero-banner-2 .accent-script,
  .hero-banner-2 .accent-script {
    font-size: 1rem;
  }
}
@media (max-width: 768px) {
  .wp-block-ukelele-hero-banner-2,
  .hero-banner-2 {
    min-height: 70vh;
  }
  .wp-block-ukelele-hero-banner-2 .hero-title,
  .hero-banner-2 .hero-title {
    font-size: 3rem;
    line-height: 1;
  }
  .wp-block-ukelele-hero-banner-2 .accent-script,
  .hero-banner-2 .accent-script {
    font-size: 3.5rem;
    line-height: 1;
  }
}
@media (max-width: 480px) {
  .wp-block-ukelele-hero-banner-2,
  .hero-banner-2 {
    min-height: 65vh;
    padding: 1rem 0;
  }
  .wp-block-ukelele-hero-banner-2 .hero-content,
  .hero-banner-2 .hero-content {
    left: 0%;
    bottom: 6%;
    max-width: 92%;
  }
  .wp-block-ukelele-hero-banner-2 .hero-title,
  .hero-banner-2 .hero-title {
    font-size: 2rem;
    line-height: 1.2;
  }
  .wp-block-ukelele-hero-banner-2 .accent-script,
  .hero-banner-2 .accent-script {
    font-size: 3rem;
    line-height: 1;
  }
}
@media (max-width: 390px) {
  min-height: 60vh;
  .hero-content {
    left: 4%;
  }
  .hero-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
  .accent-script {
    font-size: 2.8rem;
    line-height: 1;
  }
}
@media (max-width: 390px) and (max-width: 480px) {
  .accent-script .wp-block-ukelele-hero-banner-2 .hero-overlay,
  .accent-script .hero-banner-2 .hero-overlay {
    background: linear-gradient(359.09deg, rgba(0, 0, 0, 0) 45%, #000000 99.67%), linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, #000000 95.25%), linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.8) 10%, rgba(0, 0, 0, 0.6) 25%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.1) 62%, rgba(0, 0, 0, 0) 85%);
    background-blend-mode: overlay, overlay, normal;
  }
}
/* Helper: ensure background applied to inner .hero-bg (if theme places image on inner element)
   matches the root behaviour. This avoids visual differences across templates.
*/
.hero-banner-2 .hero-bg,
.wp-block-ukelele-hero-banner-2 .hero-bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: -1;
}
/* frontend styles for Immersive Split Story */
/* Targets both the WP block wrapper and the saved .immersive-split-story */
.wp-block-ukelele-immersive-split-story,
.immersive-split-story {
  box-sizing: border-box;
  width: 100%;
  background: #000000;
  color: #FAEDCD;
  padding: 4rem 2rem;
  position: relative;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
/* inner container to center content */
.immersive-split-story {
  /* decorative double outline frames (matching the magenta/red guides) */
  /* decorative background only behind image-right section */
  /* image column styles */
  /* second image should appear a bit more landscape */
  /* text column styles */
  /* allow <em> inside titles to be styled with the cursive font */
  /* Alternating layout helpers */
  /* Make sure the decorative outlines don't overflow too much on mobile */
}
.immersive-split-story .iss-row {
  max-width: 1200px;
  margin: 0 auto 3.25rem;
  display: flex;
  gap: 2.5rem;
  align-items: center;
  position: relative;
  padding: 24px;
}
.immersive-split-story .iss-row::before,
.immersive-split-story .iss-row::after {
  content: '';
  position: absolute;
  inset: 10px;
  pointer-events: none;
  z-index: 0;
}
.immersive-split-story .iss-row--image-right {
  position: relative;
  overflow: visible;
}
.immersive-split-story .iss-row--image-right::before {
  content: "";
  position: absolute;
  top: -60px;
  left: 56%;
  transform: translateX(-50%);
  width: 395px;
  height: 300px;
  background: url('assets/images/Capa_1.png') no-repeat center;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}
.immersive-split-story .iss-image {
  position: relative;
  flex: 1 1 48%;
  min-width: 280px;
  overflow: hidden;
  z-index: 2;
  /* gradient overlay */
  /* hover effect */
}
.immersive-split-story .iss-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  transition: transform 0.6s ease, filter 0.6s ease;
  filter: brightness(0.95);
}
.immersive-split-story .iss-image::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 45%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, #000000 100%);
  pointer-events: none;
  z-index: 3;
}
.immersive-split-story .iss-image:hover img {
  transform: scale(1.06);
  filter: brightness(1);
}
.immersive-split-story .iss-image--right img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.immersive-split-story .iss-text {
  flex: 1 1 48%;
  z-index: 2;
  padding: 14px 28px;
  color: #FAEDCD;
}
.immersive-split-story .iss-text h3 {
  margin: 0 0 10px 0;
  font-size: 34px;
  line-height: 1.02;
  color: #FAEDCD;
  font-weight: 700;
}
.immersive-split-story .iss-text h3 em {
  font-family: 'Snell Roundhand', "Brush Script MT", cursive;
  color: #D26000;
  font-style: italic;
  font-weight: 400;
  display: inline-block;
  font-size: 1.02em;
  vertical-align: baseline;
}
.immersive-split-story .iss-text h3.iss-title2 {
  color: #80D75E;
  font-weight: 500;
}
.immersive-split-story .iss-text .iss-desc1,
.immersive-split-story .iss-text .iss-desc2 {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.7;
  color: #FAEDCD;
  max-width: 46ch;
}
.immersive-split-story .iss-row--image-left .iss-image {
  order: 0;
}
.immersive-split-story .iss-row--image-left .iss-text {
  order: 1;
  text-align: left;
}
.immersive-split-story .iss-row--image-right .iss-image {
  order: 1;
}
.immersive-split-story .iss-row--image-right .iss-text {
  order: 0;
  text-align: left;
}
@media (max-width: 1200px) {
  .immersive-split-story {
    padding: 3.5rem 1.75rem;
  }
  .immersive-split-story .iss-row {
    gap: 2rem;
  }
  .immersive-split-story .iss-text h3 {
    font-size: 32px;
  }
}
@media (max-width: 992px) {
  .immersive-split-story .iss-row {
    flex-direction: column;
    padding: 18px;
  }
  .immersive-split-story .iss-row::before,
  .immersive-split-story .iss-row::after {
    display: none;
  }
  .immersive-split-story .iss-image,
  .immersive-split-story .iss-text {
    width: 100%;
  }
  .immersive-split-story .iss-text {
    padding: 12px 6px;
    text-align: center;
  }
  .immersive-split-story .iss-text h3 {
    font-size: 24px;
  }
  .immersive-split-story .iss-text .iss-desc1,
  .immersive-split-story .iss-text .iss-desc2 {
    max-width: 60ch;
  }
  .immersive-split-story .iss-row--image-right .iss-image {
    order: 0;
  }
  .immersive-split-story .iss-row--image-right .iss-text {
    order: 1;
  }
}
@media (max-width: 768px) {
  .immersive-split-story {
    padding: 3rem 1.5rem;
  }
  .immersive-split-story .iss-text h3 {
    font-size: 22px;
  }
  .immersive-split-story .iss-text .iss-desc1,
  .immersive-split-story .iss-text .iss-desc2 {
    font-size: 14.5px;
  }
}
@media (max-width: 480px) {
  .immersive-split-story {
    padding: 2.25rem 1rem;
  }
  .immersive-split-story .iss-text h3 {
    font-size: 1.5em;
  }
  .immersive-split-story .iss-text h3 em {
    font-size: 1.7em;
  }
  .immersive-split-story .iss-text .iss-desc1,
  .immersive-split-story .iss-text .iss-desc2 {
    font-size: 1.3rem;
  }
}
/* Front-end styling for Alternating Feature Grid (portrait layout) */
.wp-block-ukelele-alternating-feature-grid,
.alternating-feature-grid {
  box-sizing: border-box;
  width: 100%;
  padding: 4rem 2rem;
  background: #FAEDCD;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #000000;
}
/* Main container */
.alternating-feature-grid {
  /* Image container */
  /* Text block */
  /* Alternating direction (start with image on right) */
  /* Responsive adjustments */
}
.alternating-feature-grid .afg-row {
  max-width: 1200px;
  margin: 0 auto 3.25rem;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  position: relative;
  z-index: 1;
  padding: 32px 18px;
}
.alternating-feature-grid .afg-image {
  position: relative;
  flex: 1 1 46%;
  min-width: 280px;
  overflow: hidden;
  z-index: 2;
  /* Gradient overlay */
  /* Hover zoom effect */
}
.alternating-feature-grid .afg-image img {
  display: block;
  width: 100%;
  height: 600px;
  /* more portrait proportion */
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  transition: transform 0.6s ease, filter 0.6s ease;
  filter: brightness(0.95);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.alternating-feature-grid .afg-image::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 45%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, #000000 100%);
  pointer-events: none;
  z-index: 3;
}
.alternating-feature-grid .afg-image:hover img {
  transform: scale(1.06);
  filter: brightness(1);
}
.alternating-feature-grid .afg-text {
  flex: 1 1 46%;
  z-index: 2;
  padding: 0 1.25rem;
}
.alternating-feature-grid .afg-title {
  margin: 0 0 8px 0;
  font-size: 32px;
  line-height: 1.02;
  color: #80D75E;
  font-weight: 500;
}
.alternating-feature-grid .afg-title em {
  font-family: 'Snell Roundhand', "Brush Script MT", cursive;
  color: #D26000;
  font-style: italic;
  font-weight: 400;
  font-size: 0.8em;
}
.alternating-feature-grid .afg-desc {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.75;
  max-width: 56ch;
  font-weight: 400;
  color: #000000;
}
.alternating-feature-grid .afg-row:nth-child(odd) {
  flex-direction: row-reverse;
}
.alternating-feature-grid .afg-row:nth-child(odd) .afg-text {
  text-align: left;
}
.alternating-feature-grid .afg-row:nth-child(even) {
  flex-direction: row;
}
.alternating-feature-grid .afg-row:nth-child(even) .afg-text {
  text-align: left;
}
@media (max-width: 1200px) {
  .alternating-feature-grid {
    padding: 3.5rem 1.75rem;
  }
  .alternating-feature-grid .afg-title {
    font-size: 30px;
  }
}
@media (max-width: 992px) {
  .alternating-feature-grid {
    padding: 2.5rem 1rem;
    font-size: 1rem;
  }
  .alternating-feature-grid .afg-row {
    flex-direction: column !important;
    padding: 18px 0;
  }
  .alternating-feature-grid .afg-image,
  .alternating-feature-grid .afg-text {
    width: 100%;
  }
  .alternating-feature-grid .afg-image img {
    height: auto;
  }
  .alternating-feature-grid .afg-title {
    font-size: 1.85rem;
    text-align: left;
  }
  .alternating-feature-grid .afg-title em {
    font-size: 1.85rem;
  }
  .alternating-feature-grid .afg-text {
    text-align: left;
    padding: 0;
  }
  .alternating-feature-grid .afg-desc {
    margin: 0;
    max-width: 64ch;
  }
}
@media (max-width: 768px) {
  .alternating-feature-grid {
    padding: 2rem 1.25rem;
  }
  .alternating-feature-grid .afg-title {
    font-size: 1.1rem;
  }
  .alternating-feature-grid .afg-desc {
    font-size: 0.98rem;
  }
}
@media (max-width: 480px) {
  .alternating-feature-grid {
    padding: 1.5rem 0.75rem;
  }
  .alternating-feature-grid .afg-title {
    font-size: 1.5rem;
  }
  .alternating-feature-grid .afg-title em {
    font-size: 2rem;
  }
  .alternating-feature-grid .afg-desc {
    font-size: 1rem;
    line-height: 1.6;
  }
}
/* Front-end styles for Feature Statement block */
.wp-block-ukelele-feature-statement,
.feature-statement {
  box-sizing: border-box;
  width: 100%;
  background: #000000;
  color: #FAEDCD;
  padding: 4.25rem 3rem;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* row container */
  /* image column (portrait style) */
  /* text column */
  /* accent line */
  /* main title */
  /* description */
  /* Responsive layout */
}
.wp-block-ukelele-feature-statement .fs-row,
.feature-statement .fs-row {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 3rem;
  position: relative;
  z-index: 1;
}
.wp-block-ukelele-feature-statement .fs-image,
.feature-statement .fs-image {
  position: relative;
  flex: 0 0 42%;
  overflow: hidden;
  z-index: 2;
  /* gradient overlay */
  /* hover zoom + brightness */
}
.wp-block-ukelele-feature-statement .fs-image img,
.feature-statement .fs-image img {
  display: block;
  width: 100%;
  height: 620px;
  /* more portrait look */
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  transition: transform 0.6s ease, filter 0.6s ease;
  filter: brightness(0.95);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
.wp-block-ukelele-feature-statement .fs-image::after,
.feature-statement .fs-image::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 45%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, #000000 100%);
  pointer-events: none;
  z-index: 3;
}
.wp-block-ukelele-feature-statement .fs-image:hover img,
.feature-statement .fs-image:hover img {
  transform: scale(1.06);
  filter: brightness(1);
}
.wp-block-ukelele-feature-statement .fs-text,
.feature-statement .fs-text {
  flex: 1 1 58%;
  z-index: 3;
  position: relative;
}
.wp-block-ukelele-feature-statement .fs-accent,
.feature-statement .fs-accent {
  display: block;
  color: #D26000;
  font-family: 'Snell Roundhand', "Brush Script MT", cursive;
  font-size: 40px;
  line-height: 0;
  position: relative;
  z-index: 3;
}
.wp-block-ukelele-feature-statement .fs-title,
.feature-statement .fs-title {
  margin: 0 0 60px 0;
  color: #FAEDCD;
  font-size: 40px;
  line-height: 1.04;
  font-weight: 500;
  position: relative;
  z-index: 2;
  /* optional <em> highlight inside title */
}
.wp-block-ukelele-feature-statement .fs-title em,
.feature-statement .fs-title em {
  font-family: 'Snell Roundhand', "Brush Script MT", cursive;
  color: #D26000;
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;
  margin-left: 6px;
  vertical-align: baseline;
}
.wp-block-ukelele-feature-statement .fs-desc,
.feature-statement .fs-desc {
  color: #FAEDCD;
  font-size: 16px;
  line-height: 20px;
  max-width: 48ch;
}
@media (max-width: 992px) {
  .wp-block-ukelele-feature-statement,
  .feature-statement {
    padding: 3rem 1.5rem;
  }
  .wp-block-ukelele-feature-statement .fs-row,
  .feature-statement .fs-row {
    flex-direction: column;
    gap: 1.5rem;
  }
  .wp-block-ukelele-feature-statement .fs-image,
  .feature-statement .fs-image,
  .wp-block-ukelele-feature-statement .fs-text,
  .feature-statement .fs-text {
    width: 100%;
  }
  .wp-block-ukelele-feature-statement .fs-image img,
  .feature-statement .fs-image img {
    height: 480px;
    /* slightly smaller portrait for tablets */
  }
  .wp-block-ukelele-feature-statement .fs-accent,
  .feature-statement .fs-accent {
    font-size: 2.8rem;
  }
  .wp-block-ukelele-feature-statement .fs-title,
  .feature-statement .fs-title {
    font-size: 2.5rem;
    margin-bottom: 10px;
  }
  .wp-block-ukelele-feature-statement .fs-desc,
  .feature-statement .fs-desc {
    max-width: 100%;
  }
}
@media (max-width: 480px) {
  .wp-block-ukelele-feature-statement,
  .feature-statement {
    padding: 2rem 1rem;
  }
  .wp-block-ukelele-feature-statement .fs-image img,
  .feature-statement .fs-image img {
    height: 380px;
  }
  .wp-block-ukelele-feature-statement .fs-title,
  .feature-statement .fs-title {
    font-size: 2rem;
  }
  .wp-block-ukelele-feature-statement .fs-accent,
  .feature-statement .fs-accent {
    font-size: 2.2rem;
    line-height: 0.8;
  }
  .wp-block-ukelele-feature-statement .fs-desc,
  .feature-statement .fs-desc {
    font-size: 1rem;
    line-height: 1.6;
  }
}
/* Front-end styles for Cultural Claim Banner */
.wp-block-ukelele-cultural-claim-banner,
.cultural-claim-banner {
  box-sizing: border-box;
  width: 100%;
  position: relative;
  background: #000000;
  color: #FAEDCD;
  overflow: hidden;
  padding: 10rem 3rem 22rem 3rem;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Text container */
  /* Accent line (orange cursive) */
  /* Main headline (green) */
  /* Watermark image (passport icon or art) */
  /* Bottom gradient fade */
  /* Responsive adjustments */
}
.wp-block-ukelele-cultural-claim-banner .ccb-inner,
.cultural-claim-banner .ccb-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 6%;
  position: relative;
  z-index: 3;
  /* ensure text stays above watermark */
}
.wp-block-ukelele-cultural-claim-banner .ccb-accent,
.cultural-claim-banner .ccb-accent {
  font-family: 'Snell Roundhand', "Brush Script MT", cursive;
  color: #D26000;
  font-size: 80px;
  line-height: 0.5;
  font-weight: 400;
}
.wp-block-ukelele-cultural-claim-banner .ccb-headline,
.cultural-claim-banner .ccb-headline {
  margin: 0;
  color: #80D75E;
  font-size: 75px;
  line-height: 1.1;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
.wp-block-ukelele-cultural-claim-banner::before,
.cultural-claim-banner::before {
  content: "";
  position: absolute;
  right: 30%;
  top: 32%;
  width: 395px;
  height: 430px;
  background-image: url("assets/images/Group 54.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}
.wp-block-ukelele-cultural-claim-banner::after,
.cultural-claim-banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.8) 100%);
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 1200px) {
  .wp-block-ukelele-cultural-claim-banner,
  .cultural-claim-banner {
    padding: 5rem 2rem;
  }
  .wp-block-ukelele-cultural-claim-banner .ccb-accent,
  .cultural-claim-banner .ccb-accent {
    font-size: 38px;
  }
  .wp-block-ukelele-cultural-claim-banner .ccb-headline,
  .cultural-claim-banner .ccb-headline {
    font-size: 44px;
  }
  .wp-block-ukelele-cultural-claim-banner::before,
  .cultural-claim-banner::before {
    width: 400px;
    height: 400px;
    right: 4%;
    top: 10%;
    opacity: 0.08;
  }
}
@media (max-width: 768px) {
  .wp-block-ukelele-cultural-claim-banner,
  .cultural-claim-banner {
    padding: 5rem 1.25rem;
  }
  .wp-block-ukelele-cultural-claim-banner .ccb-inner,
  .cultural-claim-banner .ccb-inner {
    padding-left: 0;
  }
  .wp-block-ukelele-cultural-claim-banner .ccb-accent,
  .cultural-claim-banner .ccb-accent {
    font-size: 3.5rem;
  }
  .wp-block-ukelele-cultural-claim-banner .ccb-headline,
  .cultural-claim-banner .ccb-headline {
    font-size: 2.8rem;
  }
  .wp-block-ukelele-cultural-claim-banner::before,
  .cultural-claim-banner::before {
    display: none;
    /* hide heavy art on small screens */
  }
}
@media (max-width: 480px) {
  .wp-block-ukelele-cultural-claim-banner .ccb-accent,
  .cultural-claim-banner .ccb-accent {
    font-size: 3.5rem;
    line-height: 0.8;
  }
  .wp-block-ukelele-cultural-claim-banner .ccb-headline,
  .cultural-claim-banner .ccb-headline {
    font-size: 2.5rem;
  }
}
/* Front-end styles for Experience Callout block
   Decorative background images are set via ::before and ::after.
   Adjust asset paths if needed.
*/
.wp-block-ukelele-experience-callout,
.experience-callout {
  box-sizing: border-box;
  width: 100%;
  position: relative;
  background: #FAEDCD;
  color: #000000;
  overflow: hidden;
  padding: 15rem 3rem;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* inner container aligns content on the left and centers layout */
  /* accent (cursive) */
  /* headline (Clash Display) */
  /* description */
  /* actions (button) */
  /* decorative image left (example path: assets/images/bread_2.png) */
  /* decorative image right */
  /* responsive */
}
.wp-block-ukelele-experience-callout .ec-inner,
.experience-callout .ec-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 6%;
  z-index: 2;
  position: relative;
  /* small fade */
}
.wp-block-ukelele-experience-callout .ec-inner:after,
.experience-callout .ec-inner:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 12%;
  pointer-events: none;
}
.wp-block-ukelele-experience-callout .ec-accent,
.experience-callout .ec-accent {
  font-family: 'Snell Roundhand', "Brush Script MT", cursive;
  color: #D26000;
  font-size: 5rem;
  line-height: 0.6;
  font-weight: 400;
}
.wp-block-ukelele-experience-callout .ec-title,
.experience-callout .ec-title {
  margin: 0;
  color: #000;
  font-size: 5rem;
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.wp-block-ukelele-experience-callout .ec-desc,
.experience-callout .ec-desc {
  margin-top: 1rem;
  color: #000000;
  font-size: 16px;
  line-height: 1.7;
  max-width: 70ch;
  font-weight: 400;
}
.wp-block-ukelele-experience-callout .ec-actions,
.experience-callout .ec-actions {
  width: 800px;
}
.wp-block-ukelele-experience-callout a.ec-button.cta-button.jc2-button,
.experience-callout a.ec-button.cta-button.jc2-button {
  width: 290px;
  float: right;
}
.wp-block-ukelele-experience-callout::before,
.experience-callout::before {
  content: "";
  position: absolute;
  left: 0%;
  top: 70%;
  transform: translateY(-50%);
  width: 400px;
  height: 300px;
  background-image: url("assets/images/bread_2.png");
  /* change if necessary */
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}
.wp-block-ukelele-experience-callout::after,
.experience-callout::after {
  content: "";
  position: absolute;
  right: 0;
  top: 5%;
  width: 420px;
  height: 420px;
  background-image: url("assets/images/Modo_de_aislamiento.png");
  /* same asset, shifted — use different file if desired */
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 1200px) {
  .wp-block-ukelele-experience-callout,
  .experience-callout {
    padding: 5rem 2.5rem;
  }
  .wp-block-ukelele-experience-callout .ec-title,
  .experience-callout .ec-title {
    font-size: 3.5rem;
  }
  .wp-block-ukelele-experience-callout .ec-accent,
  .experience-callout .ec-accent {
    font-size: 3rem;
  }
  .wp-block-ukelele-experience-callout::before,
  .experience-callout::before,
  .wp-block-ukelele-experience-callout::after,
  .experience-callout::after {
    width: 320px;
    height: 320px;
    opacity: 0.12;
  }
}
@media (max-width: 992px) {
  .wp-block-ukelele-experience-callout .ec-actions,
  .experience-callout .ec-actions {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .wp-block-ukelele-experience-callout,
  .experience-callout {
    padding: 3rem 1.25rem;
    text-align: left;
  }
  .wp-block-ukelele-experience-callout .ec-inner,
  .experience-callout .ec-inner {
    padding-left: 0%;
    max-width: 95%;
  }
  .wp-block-ukelele-experience-callout .ec-title,
  .experience-callout .ec-title {
    font-size: 3rem;
  }
  .wp-block-ukelele-experience-callout .ec-accent,
  .experience-callout .ec-accent {
    font-size: 3rem;
  }
  .wp-block-ukelele-experience-callout::before,
  .experience-callout::before,
  .wp-block-ukelele-experience-callout::after,
  .experience-callout::after {
    display: none;
    /* hide decorative images on small screens */
  }
}
@media (max-width: 480px) {
  .wp-block-ukelele-experience-callout .ec-title,
  .experience-callout .ec-title {
    font-size: 2.5rem !important;
  }
  .wp-block-ukelele-experience-callout .ec-accent,
  .experience-callout .ec-accent {
    font-size: 2.8rem;
  }
  .wp-block-ukelele-experience-callout .ec-desc,
  .experience-callout .ec-desc {
    font-size: 1rem !important;
  }
  .wp-block-ukelele-experience-callout .ec-actions,
  .experience-callout .ec-actions {
    width: 85%;
  }
  .wp-block-ukelele-experience-callout .ec-actions .cta-button,
  .experience-callout .ec-actions .cta-button,
  .wp-block-ukelele-experience-callout .ec-actions .jc2-button,
  .experience-callout .ec-actions .jc2-button {
    width: 70% !important;
  }
}
/* Reservation Panel — portrait images + hover/gradient (scoped) */
.wp-block-ukelele-reservation-panel {
  box-sizing: border-box;
  width: 100%;
  background: #000000;
  color: #FAEDCD;
  padding: 10rem 3rem;
  position: relative;
  overflow: hidden;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Centered row */
  /* Image column (portrait + effects) */
  /* Content column */
  /* Accent (cursive) */
  /* Headline */
  /* Bullets */
  /* Availability */
  /* Variants (place on the block: .wp-block-ukelele-reservation-panel.rp-image-right/left) */
  /* Responsive */
}
.wp-block-ukelele-reservation-panel .rp-row {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
.wp-block-ukelele-reservation-panel .rp-image {
  position: relative;
  flex: 0 0 44%;
  overflow: hidden;
  z-index: 1;
  /* Bottom gradient overlay */
  /* Hover zoom + brightness */
}
.wp-block-ukelele-reservation-panel .rp-image img {
  display: block;
  width: 100%;
  height: 600px;
  /* <<< portrait look on desktop */
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  filter: brightness(0.95);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  transition: transform 0.6s ease, filter 0.6s ease;
}
.wp-block-ukelele-reservation-panel .rp-image::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 45%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, #000000 100%);
  pointer-events: none;
  z-index: 2;
}
.wp-block-ukelele-reservation-panel .rp-image:hover img {
  transform: scale(1.06);
  filter: brightness(1);
}
.wp-block-ukelele-reservation-panel .rp-content {
  flex: 1 1 56%;
  z-index: 2;
}
.wp-block-ukelele-reservation-panel .rp-content-body {
  font-size: 16px;
}
.wp-block-ukelele-reservation-panel .rp-accent {
  display: block;
  font-family: 'Snell Roundhand', "Brush Script MT", cursive;
  color: #D26000;
  font-size: 5rem;
  margin-bottom: 8px;
  line-height: 1;
  font-weight: 400;
}
.wp-block-ukelele-reservation-panel .rp-headline {
  margin: 0 0 18px 0;
  color: #FAEDCD;
  font-size: 2re;
  line-height: 1.06;
  font-weight: 500;
}
.wp-block-ukelele-reservation-panel .rp-bullets {
  margin: 0 0 18px 0;
  padding-left: 1.25rem;
  color: rgba(255, 255, 255, 0.95);
  font-size: 15px;
  line-height: 1.7;
}
.wp-block-ukelele-reservation-panel .rp-availability {
  margin: 12px 0 18px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 1.6;
}
.wp-block-ukelele-reservation-panel .rp-cta-wrap {
  margin-top: 12px;
}
.wp-block-ukelele-reservation-panel.rp-image-right .rp-image {
  order: 2;
}
.wp-block-ukelele-reservation-panel.rp-image-right .rp-content {
  order: 1;
}
.wp-block-ukelele-reservation-panel.rp-image-left .rp-image {
  order: 1;
}
.wp-block-ukelele-reservation-panel.rp-image-left .rp-content {
  order: 2;
}
@media (max-width: 1200px) {
  .wp-block-ukelele-reservation-panel {
    padding: 8rem 2.5rem;
  }
  .wp-block-ukelele-reservation-panel .rp-image img {
    height: 550px;
  }
  .wp-block-ukelele-reservation-panel .rp-headline {
    font-size: 2.5rem;
  }
  .wp-block-ukelele-reservation-panel .rp-accent {
    font-size: 4.5rem;
  }
}
@media (max-width: 992px) {
  .wp-block-ukelele-reservation-panel {
    padding: 3rem 1.5rem;
    /* portrait for tablets */
  }
  .wp-block-ukelele-reservation-panel .rp-row {
    flex-direction: column;
    gap: 1.5rem;
  }
  .wp-block-ukelele-reservation-panel .rp-image,
  .wp-block-ukelele-reservation-panel .rp-content {
    width: 100%;
  }
  .wp-block-ukelele-reservation-panel.rp-image-right .rp-image {
    order: 1;
  }
  .wp-block-ukelele-reservation-panel.rp-image-right .rp-content {
    order: 2;
  }
  .wp-block-ukelele-reservation-panel.rp-image-left .rp-image {
    order: 1;
  }
  .wp-block-ukelele-reservation-panel.rp-image-left .rp-content {
    order: 2;
  }
  .wp-block-ukelele-reservation-panel .rp-image img {
    height: 460px;
  }
  .wp-block-ukelele-reservation-panel .rp-headline {
    font-size: 28px;
  }
  .wp-block-ukelele-reservation-panel .rp-accent {
    font-size: 28px;
  }
  .wp-block-ukelele-reservation-panel .rp-bullets {
    font-size: 14px;
  }
}
@media (max-width: 768px) {
  .wp-block-ukelele-reservation-panel {
    padding: 4rem 2rem;
  }
  .wp-block-ukelele-reservation-panel .rp-row {
    gap: 2rem;
  }
  .wp-block-ukelele-reservation-panel .rp-image img {
    height: 500px;
  }
  .wp-block-ukelele-reservation-panel .rp-headline {
    font-size: 2rem;
  }
  .wp-block-ukelele-reservation-panel .rp-accent {
    font-size: 3.5rem;
  }
  .wp-block-ukelele-reservation-panel .rp-bullets {
    font-size: 15px;
  }
}
@media (max-width: 480px) {
  .wp-block-ukelele-reservation-panel {
    padding: 2rem 1rem;
    /* portrait for phones */
  }
  .wp-block-ukelele-reservation-panel .rp-image img {
    height: 360px;
  }
  .wp-block-ukelele-reservation-panel .rp-headline {
    font-size: 20px;
  }
  .wp-block-ukelele-reservation-panel .rp-accent {
    font-size: 20px;
  }
  .wp-block-ukelele-reservation-panel .cta-button {
    padding: 10px 18px;
    font-size: 14px;
  }
}
/* blocks/contact-panel/contact-panel.less
   Contact Panel - front-end styles (heading above two columns)
   Make sure asset paths match your repo (assets/images/...).
*/
.wp-block-ukelele-contact-panel {
  box-sizing: border-box;
  position: relative;
  background: #FAEDCD;
  padding: 12rem 3rem;
  overflow: hidden;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #000000;
  /* left decorative background */
  /* right decorative background */
  /* Heading sits above the columns */
  /* columns container under heading */
  /* small rule on wide screens to visually separate columns */
  /* responsive: stack columns under heading on smaller screens */
}
.wp-block-ukelele-contact-panel::before {
  content: "";
  position: absolute;
  left: 6%;
  top: 30%;
  width: 560px;
  height: 360px;
  background: url('assets/images/contact-left.svg') no-repeat center;
  background-size: contain;
  opacity: 0.12;
  pointer-events: none;
  transform: translateY(-20%);
  z-index: 0;
}
.wp-block-ukelele-contact-panel::after {
  content: "";
  position: absolute;
  right: 4%;
  bottom: 6%;
  width: 420px;
  height: 420px;
  background: url('assets/images/contact-right.svg') no-repeat center;
  background-size: contain;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}
.wp-block-ukelele-contact-panel .cp-inner {
  position: relative;
  z-index: 2;
  max-width: 1300px;
  margin: 0 auto;
  display: block;
}
.wp-block-ukelele-contact-panel .cp-heading {
  margin: 0 0 2.25rem 0;
  font-size: 4rem;
  line-height: 0.8;
  font-weight: 500;
  color: #000000;
  font-family: 'Clash Display', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* keep heading visually prominent but slightly centered on wide layout */
  text-align: left;
  width: 50%;
}
.wp-block-ukelele-contact-panel .cp-heading span {
  line-height: 1.2;
}
.wp-block-ukelele-contact-panel .cp-heading em {
  font-family: 'Snell Roundhand', "Brush Script MT", cursive;
  color: #D26000;
  font-style: italic;
  font-weight: 400;
  margin-left: 0.25rem;
  font-size: 5rem;
  line-height: 0;
}
.wp-block-ukelele-contact-panel .cp-columns {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
  justify-content: space-between;
}
.wp-block-ukelele-contact-panel .cp-left,
.wp-block-ukelele-contact-panel .cp-right {
  flex: 1 1 48%;
  min-width: 260px;
}
.wp-block-ukelele-contact-panel .cp-left-body {
  margin-top: 0;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  color: #000000;
}
.wp-block-ukelele-contact-panel .cp-right-body {
  font-size: 0.98rem;
  line-height: 1.6;
  font-weight: 400;
  color: #000000;
}
@media (min-width: 1200px) {
  .wp-block-ukelele-contact-panel .cp-left {
    padding-right: 1.5rem;
  }
  .wp-block-ukelele-contact-panel .cp-right {
    padding-left: 1.5rem;
  }
}
@media (max-width: 992px) {
  .wp-block-ukelele-contact-panel {
    padding: 4rem 2rem;
  }
  .wp-block-ukelele-contact-panel::before {
    left: 50%;
    top: 8%;
    transform: translateX(-50%);
    width: 420px;
    height: 300px;
    opacity: 0.08;
  }
  .wp-block-ukelele-contact-panel::after {
    display: none;
  }
  .wp-block-ukelele-contact-panel .cp-heading {
    font-size: 2rem;
    text-align: left;
    margin-bottom: 1.25rem;
    width: 90%;
  }
  .wp-block-ukelele-contact-panel .cp-heading em {
    font-size: 2.7rem;
  }
  .wp-block-ukelele-contact-panel .cp-columns {
    flex-direction: column;
    gap: 1.5rem;
  }
  .wp-block-ukelele-contact-panel .cp-left,
  .wp-block-ukelele-contact-panel .cp-right {
    padding: 0;
    min-width: 0;
  }
  .wp-block-ukelele-contact-panel .cp-left-body,
  .wp-block-ukelele-contact-panel .cp-right-body {
    text-align: left;
  }
}
@media (max-width: 768px) {
  .wp-block-ukelele-contact-panel {
    padding: 3rem 1.5rem;
  }
  .wp-block-ukelele-contact-panel .cp-heading {
    font-size: 1.8rem;
  }
  .wp-block-ukelele-contact-panel .cp-left-body,
  .wp-block-ukelele-contact-panel .cp-right-body {
    font-size: 0.96rem;
  }
}
@media (max-width: 480px) {
  .wp-block-ukelele-contact-panel {
    padding: 2rem 1rem;
  }
  .wp-block-ukelele-contact-panel .cp-heading {
    font-size: 2rem;
  }
  .wp-block-ukelele-contact-panel .cp-heading em {
    font-size: 3rem;
    line-height: 0.8;
  }
  .wp-block-ukelele-contact-panel .cp-left-body,
  .wp-block-ukelele-contact-panel .cp-right-body {
    font-size: 0.95rem;
  }
}