/* ==========================================================================
   Base CSS Reset/Normalize & Variables (SHARED)
   ========================================================================== */
   html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }
  
  body {
    margin: 0;
  }
  
  article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
  }
  
  audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline;
  }
  
  audio:not([controls]) {
    display: none;
    height: 0;
  }
  
  [hidden], template {
    display: none;
  }
  
  a {
    background-color: transparent;
  }
  
  a:active, a:hover {
    outline: 0;
  }
  
  abbr[title] {
    border-bottom: 1px dotted;
  }
  
  b, strong {
    font-weight: bold;
  }
  
  dfn {
    font-style: italic;
  }
  
  h1 {
    font-size: 2em; /* Base, overridden below */
    margin: 0.67em 0;
  }
  
  mark {
    background: #ff0;
    color: #000;
  }
  
  small {
    font-size: 80%;
  }
  
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  
  sup {
    top: -0.5em;
  }
  
  sub {
    bottom: -0.25em;
  }
  
  img {
    border: 0;
    max-width: 100%;
    vertical-align: middle;
    display: inline-block;
  }
  
  svg:not(:root) {
    overflow: hidden;
  }
  
  figure {
    margin: 1em 40px; /* Base, overridden below */
  }
  
  hr {
    box-sizing: content-box;
    height: 0;
  }
  
  pre {
    overflow: auto;
  }
  
  code, kbd, pre, samp {
    font-family: monospace, monospace;
    font-size: 1em;
  }
  
  button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
  }
  
  button {
    overflow: visible;
  }
  
  button, select {
    text-transform: none;
  }
  
  button, html input[type="button"], input[type="reset"] {
    -webkit-appearance: button;
    appearance: button;
    cursor: pointer;
  }
  
  button[disabled], html input[disabled] {
    cursor: default;
  }
  
  button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
  }
  
  input {
    line-height: normal;
  }
  
  input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
  }
  
  input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
    height: auto;
  }
  
  input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
  }
  
  input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
  }
  
  legend {
    border: 0;
    padding: 0;
  }
  
  textarea {
    overflow: auto;
  }
  
  optgroup {
    font-weight: bold;
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  td, th {
    padding: 0;
  }
  
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  html {
    height: 100%;
  }
  
  /* Variables */
  :root {
    --color-primary: #1a1a1a;
    --color-accent: #d1496f;
    --color-accent-dark: #b33d5f;
    --color-accent-light-bg: rgba(209, 73, 111, 0.05);
    --color-accent-shadow: rgba(209, 73, 111, 0.1);
    --color-text: #333333;
    --color-text-dark: #202020;
    --color-text-light: #666666;
    --color-text-medium: #b3afaf;
    --color-text-medium-light: #b1b2b3;
    --color-text-white: #ffffff;
    --color-text-placeholder: #999999;
    --color-background: #f6f1ed;
    --color-background-alt: #dfdff1;
    --color-background-alt-light: #f6f6ff;
    --color-background-subtle: rgba(0, 0, 0, 0.03);
    --color-white: #ffffff;
    --color-black: #000000;
    --color-dark-grey: #1b1b1b;
    --color-darker-grey: #222222;
    --color-grey-light: #dddddd;
    --color-grey-medium: #c8c8c8;
    --color-grey-medium-dark: #e5e5e5;
    --color-grey-lighter: #eeeeee;
    --color-grey-hover: #f5f5f5;
    --color-grey-background: #f0f0f0;
    --color-border: #e0e0e0;
    --color-border-medium: #cccccc;
    --color-border-dark: rgba(0, 0, 0, 0.15);
    --color-border-light: rgba(0, 0, 0, 0.1);
    --color-border-subtle: rgba(0, 0, 0, 0.05);
    --color-separator-dark: rgba(0, 0, 0, 0.5);
    --color-separator-light: hsla(0, 0%, 100%, 0.8);
    --color-overlay-dark: rgba(0, 0, 0, 0.8);
    --color-overlay-medium: rgba(0, 0, 0, 0.7);
    --color-overlay-medium-dark: rgba(0, 0, 0, 0.75);
    --color-overlay-light: rgba(0, 0, 0, 0.4);
    --color-overlay-heavy: rgba(0, 0, 0, 0.9);
    --color-success: #28a745;
    --color-error: #dc3545;
    --color-error-bg: #ffdede;
    --color-blue: #3898ec;
    --color-blue-light: #0082f3;
  
    --font-primary: 'Open Sans', sans-serif;
    --font-secondary: 'Playfair Display', serif;
  
    --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 6px 12px 1px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-nav-scrolled: 0 2px 10px rgba(0, 0, 0, 0.1);
  
    --transition-fast: all 0.3s ease;
    --transition-medium: all 0.4s ease-out;
    --transition-bezier: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
    --transition-animation: opacity 800ms ease, transform 800ms ease;
    --transition-animation-bounce: opacity 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 12px;
    --border-radius-xl: 16px;
    --border-radius-round: 50%;
    --border-radius-card: 12px;
    --border-radius-form: 8px;
    --border-radius-tag: 8px;
    --border-radius-artist: 32px;
    --border-radius-artist-img: 10px;
    --border-radius-artist-details: 10px;
    --border-radius-offer-info: 40px;
    --border-radius-offer-info-text: 20px;
  
     /* Animation */
    --animation-distance: 100px;
    --animation-duration: 800ms;
    --animation-easing: ease;
    --animation-easing-bounce: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  
  /* ==========================================================================
       Base Styles (SHARED)
       ========================================================================== */
  body {
    margin: 0;
    min-height: 100%;
    background-color: var(--color-background);
    font-family: var(--font-primary);
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text);
  }
  
  .my-inline-block {
    max-width: 100%;
    display: inline-block;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  h1 {
    margin-top: 20px;
    margin-bottom: 40px;
    font-family: var(--font-secondary);
    font-size: 90px;
    line-height: 88px;
    font-weight: 400;
  }
  
  h2 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: var(--font-secondary);
    color: var(--color-text-dark);
    font-size: 85px;
    line-height: 85px;
    font-weight: 400;
  }
  
  h3 {
    margin-top: 0px;
    margin-bottom: 20px;
    font-family: var(--font-secondary);
    color: var(--color-text-dark);
    font-size: 48px;
    line-height: 55px;
    font-weight: 400;
  }
  
  h4 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: var(--font-primary);
    color: var(--color-text-dark);
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
  }
  
  h5 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: var(--font-primary);
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
  }
  
  h6 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: var(--font-primary);
    font-size: 20px;
    line-height: 25px;
    font-weight: 700;
  }
  
  p {
    margin-top: 0;
    margin-bottom: 20px;
    font-family: var(--font-primary);
    font-size: 18px;
    line-height: 32px;
    text-align: left;
  }
  
  a {
    display: inline-block;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-family: var(--font-primary);
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
  }
  
  ul, ol {
    margin-top: 0;
    margin-bottom: 10px;
    padding-left: 40px;
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 35px;
    font-weight: 600;
  }
  
  li {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 35px;
    font-weight: 600;
  }
  
  strong {
    font-weight: bold;
  }
  
  em {
    font-style: italic;
  }
  
  blockquote {
    margin: 0 0 10px 0;
    padding: 10px 20px;
    border-left: 5px solid #e2e2e2;
    font-size: 18px;
    line-height: 22px;
    font-family: var(--font-primary);
  }
  
  figure {
    margin: 0;
    margin-bottom: 10px;
  }
  
  figcaption {
    margin-top: 5px;
    text-align: center;
    font-family: var(--font-primary);
  }
  
  /* Font Loading */
  @font-face {
    font-family: 'Font awesome 5 free 400';
    src: url('https://assets.website-files.com/6066c80e0cdb4594c5306503/6066c80e0cdb45739930651b_Font%20Awesome%205%20Free-Regular-400.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Font awesome 5 brands 400';
    src: url('https://assets.website-files.com/6066c80e0cdb4594c5306503/6066c80e0cdb453d0d30651a_Font%20Awesome%205%20Brands-Regular-400.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Font awesome 5 free solid 900';
    src: url('https://assets.website-files.com/6066c80e0cdb4594c5306503/6066c80e0cdb45db0330651c_Font%20Awesome%205%20Free-Solid-900.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  /* ==========================================================================
       Layout & Structure (SHARED)
       ========================================================================== */
  .page-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  
  .wrapper {
    width: 100%;
    max-width: 1234px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 32px;
    padding-left: 32px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  
  .wrapper.artist { /* Specific variation */
    position: relative;
    max-width: 890px;
  }
  
  .wrapper.footer { /* Specific variation */
    max-width: 100%;
  }
  
  .section {
    position: relative;
    padding-top: 144px;
    padding-bottom: 144px;
    background-color: var(--color-background);
  }
  
  .section.artists { /* Specific variation */
    padding-top: 150px;
    background-color: var(--color-background-alt);
  }
  
  .section.about { /* Specific variation */
    padding-top: 0px;
    padding-bottom: 0px;
  }
  
  .section.offer-section { /* Specific variation */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 200px 32px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: var(--color-black);
  }
  
  .section.bg-white { /* Specific variation */
    background-color: var(--color-white);
  }
  
  .section.no-padding-top { /* Specific variation */
    padding-top: 0px;
  }
  
  .section.artists-page { /* Specific variation */
    padding-top: 0px;
    padding-bottom: 150px;
    background-color: var(--color-background-alt);
  }
  
  .section.margin-top { /* Specific variation */
    margin-top: 96px;
  }
  
  .section.color-2 { /* Specific variation */
    background-color: var(--color-background-alt);
  }
  
  .my-layout-grid {
    display: -ms-grid;
    display: grid;
    grid-auto-columns: 1fr;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: auto auto;
    grid-template-rows: auto auto;
    grid-row-gap: 16px;
    grid-column-gap: 16px;
  }
  
  .my-layout-grid.pricing-table { /* Specific variation */
    width: 100%;
    margin-bottom: 40px;
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    grid-auto-rows: auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
  
  /* ==========================================================================
       Navigation Bar (SHARED)
       ========================================================================== */
  .nav-bar {
    position: fixed;
    left: 0%; top: 0%; right: 0%; bottom: auto;
    display: flex;
    width: 100%;
    height: 100px;
    padding: 0 48px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid transparent;
    background-color: transparent;
    transition: var(--transition-medium);
    z-index: 1000;
  }
  
  .navigation {
    display: flex;
    width: 100%;
    align-items: center;
  }
  
  .brand {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: var(--color-text);
  }
  
  .brand.my--current {
    flex: 0 0 auto;
  }
  
  .logo-white {
    position: relative;
    z-index: 1;
    height: 100px;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    opacity: 1;
    visibility: visible;
  }
  
  .logo-black {
    position: absolute;
    left: 0%;
    top: 0%;
    right: auto;
    bottom: auto;
    z-index: 0;
    height: 100px;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
    opacity: 0;
    visibility: hidden;
  }
  
  .nav-menu {
    position: relative;
    float: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1;
  }
  
  .nav-link {
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-decoration: none;
    text-align: left;
    margin-left: 32px;
    color: var(--color-text-white);
    padding: 20px;
    transition: color var(--transition-medium);
  }
  
  .nav-link.black {
    color: var(--color-text-dark);
  }
  
  .nav-link.mobile-only {
    display: none;
  }
  
  /* Current page link indication */
  .nav-link.my--current > div:first-child {
      color: var(--color-accent); /* Highlight text on current page */
  }
  /* Highlight hover line for current page */
  .nav-link.my--current .hover-line {
      background-color: var(--color-accent);
      opacity: 1;
      transform: scaleX(1);
  }
  /* Keep highlighting consistent when nav bar scrolls */
  .nav-bar.scrolled .nav-link.my--current > div:first-child {
       color: var(--color-accent);
  }
  .nav-bar.scrolled .nav-link.my--current .hover-line {
      background-color: var(--color-accent);
  }
  /* Special handling for white nav bar */
  .nav-bar.nav-bar-white .nav-link.my--current > div:first-child {
       color: var(--color-accent);
  }
  .nav-bar.nav-bar-white .nav-link.my--current .hover-line {
        background-color: var(--color-accent);
  }
  
  .hover-line {
    height: 1px;
    margin-top: 3px;
    background-color: var(--color-grey-light);
    opacity: 0;
    transform: scaleX(0);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
  }
  
  .hover-line.black {
    background-color: var(--color-text-light);
  }
  
  .nav-link:hover .hover-line {
    opacity: 1;
    transform: scaleX(1);
  }
  
  .nav-button-wrapper {
    display: flex;
    padding: 0 40px;
    justify-content: center;
    align-items: center;
  }
  
  /* Nav Bar Scrolled State */
  .nav-bar.scrolled {
    background-color: var(--color-white);
    box-shadow: var(--shadow-nav-scrolled);
  }
  .nav-bar.scrolled .nav-link div { color: var(--color-black); }
  .nav-bar.scrolled .logo-white { opacity: 0; visibility: hidden; }
  .nav-bar.scrolled .logo-black { opacity: 1; visibility: visible; }
  .nav-bar.scrolled .social-icon { opacity: 0; visibility: hidden; }
  .nav-bar.scrolled .social-icon-black { opacity: 1; visibility: visible; }
  
  /* Nav Bar White State (Contact/Booking Page) */
  .nav-bar.nav-bar-white {
    height: 96px;
    border-bottom-color: var(--color-border-light);
    background-color: var(--color-white);
    box-shadow: var(--shadow-nav-scrolled);
  }
  .nav-bar.nav-bar-white .nav-link div { color: var(--color-black); }
  .nav-bar.nav-bar-white .logo-white { opacity: 0; visibility: hidden; }
  .nav-bar.nav-bar-white .logo-black { opacity: 1; visibility: visible; }
  .nav-bar.nav-bar-white .social-icon { opacity: 0; visibility: hidden; }
  .nav-bar.nav-bar-white .social-icon-black { opacity: 1; visibility: visible; }
  .nav-bar-white .hover-line.black { display: none; }
  
  /* Mobile Menu Button */
  .menu-button {
    position: relative;
    float: right;
    padding: 18px;
    font-size: 24px;
    display: none;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
    z-index: 1050; /* Ensure it's above nav content */
  }
  .menu-button:focus { outline: 0; }
  .menu-button.active .menu-icon-line-top { transform: translateY(6px) rotate(45deg); }
  .menu-button.active .menu-icon-line-middle { opacity: 0; }
  .menu-button.active .menu-icon-line-bottom { transform: translateY(-6px) rotate(-45deg); }
  .menu-button.active .menu-icon { background-color: transparent; } /* Make bg transparent when active */
  
  .menu-icon {
    width: 40px;
    padding: 13px 8px;
    border-radius: 2px;
    background-color: var(--color-white);
    transition: background-color 0.3s ease;
  }
  /* Change icon lines color when nav is scrolled */
  .nav-bar.scrolled .menu-icon-line-top,
  .nav-bar.scrolled .menu-icon-line-middle,
  .nav-bar.scrolled .menu-icon-line-bottom {
      background-color: var(--color-text-dark);
  }
  /* Change icon lines color for white nav bar */
  .nav-bar.nav-bar-white .menu-icon-line-top,
  .nav-bar.nav-bar-white .menu-icon-line-middle,
  .nav-bar.nav-bar-white .menu-icon-line-bottom {
      background-color: var(--color-text-dark);
  }
  .nav-bar.scrolled .menu-icon { background-color: transparent; }
  .nav-bar.nav-bar-white .menu-icon { background-color: transparent; }
  
  
  .menu-icon-line-top, .menu-icon-line-middle, .menu-icon-line-bottom {
    height: 2px;
    background-color: var(--color-black); /* Default to black */
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
  }
  .menu-icon-line-middle { margin: 4px 0; }
  
  /* ==========================================================================
       General Content Sections (Info, Intro, Separator, Text Label) (SHARED)
       ========================================================================== */
  .info {
    position: relative;
    z-index: 9;
    display: flex;
    max-width: 970px;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Animation Base State */
    opacity: 0;
    transform: translateY(var(--animation-distance));
    transition: var(--transition-animation);
    will-change: opacity, transform;
    visibility: hidden;
  }
  .info.slide-in-visible { /* Animation End State */
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
  
  .info.margin-bottom { margin-bottom: 72px; }
  .info.margin-top { margin-top: 100px; }
  
  .intro {
    display: flex;
    margin-bottom: 40px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  
  .separator {
    width: 120px;
    height: 1px;
    background-color: var(--color-separator-light); /* Default for hero */
  }
  .separator.dark {
    margin: 0 30px;
    background-color: var(--color-separator-dark);
  }
  .separator.dark.vertical-dark {
    width: 1px;
    height: 120px;
    margin: 0 auto;
    background-color: var(--color-text-dark);
  }
  .separator.intro-separator {
    background-color: var(--color-separator-dark);
  }
  .separator.star {
    width: 40px;
    margin: 0 10px;
    background-color: var(--color-separator-dark);
  }
  .separator.vertical {
    width: 1px;
    height: 120px;
    margin-top: 50px;
    background-color: var(--color-separator-light); /* Default light text */
  }
  
  .text-label {
    margin: 0 24px;
    flex: 0 0 auto;
    font-family: var(--font-primary);
    color: var(--color-text-white); /* Default for hero */
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
  }
  .text-label.services {
    margin: 0;
    color: var(--color-text-dark);
    font-weight: 700;
  }
  .text-label.artist-label {
    margin: 0 16px 0 0;
    color: var(--color-text-dark);
    font-weight: 700;
    letter-spacing: 2px;
  }
  .text-label.price-label {
    margin: 0;
    color: var(--color-text-dark);
    font-size: 14px;
    letter-spacing: 0px;
    text-transform: none;
  }
  .text-label.price-colored {
    margin: 0 0 0 5px;
    color: var(--color-accent);
    font-size: 14px;
    letter-spacing: 0px;
    text-transform: none;
  }
  .text-label.black {
    color: var(--color-text-dark);
  }
  .text-label.footer {
    margin: 0 0 10px 0;
    color: var(--color-text-dark);
    font-weight: 700;
    letter-spacing: 2px;
  }
  
  .section-heading {
    margin-top: 0px;
    margin-bottom: 40px;
    color: var(--color-text-dark);
    text-align: center;
    font-family: var(--font-secondary);
    font-size: 85px;
    line-height: 85px;
    font-weight: 400;
  }
  .section-heading.white {
    color: var(--color-text-white);
  }
  
  .paragraph-dark {
    color: var(--color-text-dark);
    text-align: center;
    font-family: var(--font-primary);
    font-size: 18px;
    line-height: 32px;
    margin-bottom: 20px;
  }
  .paragraph-white {
    width: 100%;
    max-width: 980px;
    color: var(--color-text-white);
    text-align: center;
    font-family: var(--font-primary);
    font-size: 18px;
    line-height: 32px;
    margin-bottom: 20px;
  }
  
  
  /* ==========================================================================
       Buttons & Links (SHARED)
       ========================================================================== */
  .button {
    display: inline-flex; /* Use inline-flex for better alignment */
    padding: 19px 24px;
    justify-content: center;
    align-items: center;
    border: 1px solid transparent;
    background-color: var(--color-accent);
    transition: color 350ms ease-in-out, background-color 350ms ease-in-out, padding 350ms ease-in-out;
    font-family: var(--font-primary);
    color: var(--color-text-white);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: 0;
  }
  .button:hover { background-color: var(--color-text-dark); }
  
  .button.margin-bottom {
    margin-bottom: 50px;
    border-color: var(--color-text-dark);
    background-color: var(--color-text-dark);
    color: var(--color-background);
  }
  .button.margin-bottom:hover { padding: 19px 32px; } /* Adjust padding on hover */
  
  .button.v2 {
    margin-top: 20px;
    background-color: var(--color-white);
    color: var(--color-text-dark);
  }
  .button.v2:hover { padding: 19px 32px; background-color: var(--color-white); color: var(--color-text-dark);} /* Adjust padding, keep colors */
  
  .button.nav-button {
    flex: 0 0 auto;
    background-color: var(--color-accent);
  }
  .button.nav-button:hover { background-color: var(--color-text-dark); }
  
  .button.contact-form-button { width: 100%; }
  
  .button.white {
    background-color: var(--color-white);
    color: var(--color-text-dark);
  }
  .button.white:hover { background-color: var(--color-accent); color: var(--color-text-white); }
  
  .link {
    margin-left: 0px;
    color: var(--color-text-dark);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: inline-flex; /* Use inline-flex */
    flex-direction: column;
    justify-content: space-between;
    font-family: var(--font-primary);
    text-decoration: none;
    position: relative; /* Needed for hover line */
  }
  /* Generic link hover line */
  .link .hover-line {
      height: 1px;
      background-color: currentColor; /* Use text color for line */
      opacity: 0;
      transform: scaleX(0);
      transition: opacity var(--transition-fast), transform var(--transition-fast);
      position: absolute;
      bottom: -2px; /* Adjust position */
      left: 0;
      width: 100%;
  }
  .link:hover .hover-line {
      opacity: 1;
      transform: scaleX(1);
  }
  
  
  .link.footer {
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-accent);
      transition: color 0.3s ease;
  }
  .link.footer:hover { color: var(--color-accent-dark); }
  .link.footer .hover-line.black { background-color: var(--color-accent); } /* Override for footer */
  .link.footer:hover .hover-line.black { opacity: 1; transform: scaleX(1); }
  
  .text-link {
    color: var(--color-accent);
    display: inline-block;
    font-family: var(--font-primary);
    font-weight: 600;
    text-decoration: none;
  }
  .text-link:hover { text-decoration: underline; }
  
  .artist-link {
    margin-left: 0px;
    color: var(--color-accent);
    text-decoration: underline;
    display: inline-block;
    font-family: var(--font-primary);
    font-weight: 600;
  }
  
  .privacy-link {
    display: inline-block;
    color: var(--color-accent);
    text-decoration: underline;
    font-family: var(--font-primary);
    font-weight: 600;
  }
  
  .footer-link-span {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: underline;
    display: inline-block;
    font-family: var(--font-primary);
  }
  
  /* ==========================================================================
       Forms & Inputs (SHARED)
       ========================================================================== */
  .my-form { margin: 0 0 15px; }
  .my-form-done { display: none; padding: 20px; text-align: center; background-color: var(--color-grey-light); }
  .my-form-fail { display: none; margin-top: 10px; padding: 10px; background-color: var(--color-error-bg); }
  
  label { display: block; margin-bottom: 5px; font-weight: bold; }
  
  /* Base Input/Text Field Style */
  .my-input, .text-field {
    display: block;
    width: 100%;
    height: 38px;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.42857143;
    color: var(--color-text);
    background-color: var(--color-white);
    border: 1px solid var(--color-border-medium);
  }
  .my-input:-moz-placeholder, .text-field:-moz-placeholder { color: var(--color-text-placeholder); }
  .my-input::-moz-placeholder, .text-field::-moz-placeholder { color: var(--color-text-placeholder); opacity: 1; }
  .my-input:-ms-input-placeholder, .text-field:-ms-input-placeholder { color: var(--color-text-placeholder); }
  .my-input::-webkit-input-placeholder, .text-field::-webkit-input-placeholder { color: var(--color-text-placeholder); }
  .my-input:focus, .text-field:focus { border-color: var(--color-accent); outline: 0; }
  .my-input[disabled], .my-input[readonly], fieldset[disabled] .my-input,
  .text-field[disabled], .text-field[readonly], fieldset[disabled] .text-field { cursor: not-allowed; background-color: var(--color-grey-lighter); }
  textarea.my-input, textarea.text-field { height: auto; }
  
  /* Newsletter Specific Inputs */
  .text-field { /* From original */
    height: 60px;
    margin-bottom: 0px;
    padding: 0 20px;
    border: 1px solid var(--color-border-dark);
    font-family: var(--font-primary);
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .text-field.subscribe-field { border-color: transparent; } /* Specific override */
  
  .form { display: flex; flex-direction: row; align-items: flex-start; }
  
  .submit-button {
    position: relative;
    z-index: 3;
    height: 60px;
    margin-left: -1px;
    padding: 0 50px;
    border: 1px solid transparent;
    background-color: var(--color-text-dark);
    transition: border-color var(--transition-bezier), background-color var(--transition-bezier);
    font-family: var(--font-primary);
    color: var(--color-background);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
  }
  .submit-button:hover { background-color: var(--color-accent); }
  
  /* Checkbox */
  .my-checkbox { display: block; margin-bottom: 5px; padding-left: 20px; }
  .my-checkbox::before, .my-checkbox::after { content: ' '; display: table; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; }
  .my-checkbox::after { clear: both; }
  .my-checkbox-input { float: left; margin: 4px 0 0 -20px; line-height: normal; margin-top: 3px; }
  .my-form-label { display: inline-block; cursor: pointer; font-weight: normal; margin-bottom: 0; }
  .checkbox-field { margin-top: 15px; }
  .checkbox-label { margin-bottom: 0px; font-family: var(--font-primary); font-size: 12px; font-weight: 400; }
  
  /* ==========================================================================
       Components (SHARED STYLES)
       ========================================================================== */
  
  /* Services Section Component (Used on Index, Services) */
  .services {
    display: grid;
    margin: 0 auto;
    grid-auto-columns: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 128px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .service { /* listitem */ }
  .service-card {
    position: relative;
    width: 100%;
    max-width: 1234px;
    margin: 0 auto 40px auto;
  }
  .service-details {
    position: relative;
    width: 100%;
    max-width: 1100px;
    padding: 80px 80px 80px 500px;
    float: right;
    background-color: var(--color-white);
  }
  .service-info {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Animation Base State */
    opacity: 0;
    transform: translateX(var(--animation-distance));
    transition: var(--transition-animation-bounce);
    will-change: opacity, transform;
    visibility: hidden;
  }
  .service-info.slide-in-visible { /* Animation End State */
      opacity: 1;
      transform: translateX(0);
      visibility: visible;
  }
  .service-heading {
    margin: 30px 0;
    font-family: var(--font-secondary);
    color: var(--color-text-dark);
    font-size: 48px;
    line-height: 55px;
    font-weight: 400;
  }
  .services-description {
    max-width: 980px;
    margin-bottom: 40px;
    color: var(--color-text-light);
    text-align: left;
    font-family: var(--font-primary);
    font-size: 18px;
    line-height: 32px;
  }
  .service-image {
    position: absolute;
    left: 0%; top: 100px; right: auto; bottom: auto;
    width: 100%;
    max-width: 480px;
    /* Animation Base State */
    opacity: 0;
    transform: translateX(calc(-1 * var(--animation-distance)));
    transition: var(--transition-animation-bounce);
    will-change: opacity, transform;
    visibility: hidden;
  }
  .service-image.slide-in-visible { /* Animation End State */
      opacity: 1;
      transform: translateX(0);
      visibility: visible;
  }
  .service-number-wrapper { display: flex; }
  .service-info .link { color: var(--color-accent); }
  .service-info .link .hover-line { background-color: var(--color-accent-dark); }
  
  /* Pricing Table (within Service Card) */
  .table-title {
    display: flex;
    padding: 10px 0 10px 30px;
    justify-content: flex-start;
    align-items: center;
    border: 1px solid var(--color-border-light);
    background-color: var(--color-background-subtle);
    font-family: var(--font-primary);
    color: var(--color-text-light);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .table-content {
    display: flex;
    padding: 10px 0 10px 30px;
    align-items: center;
    border-style: none solid solid;
    border-width: 1px;
    border-color: var(--color-border-light);
    font-family: var(--font-primary);
    color: var(--color-text-dark);
    font-size: 16px;
  }
  .table-content.bold {
    border-top-style: none;
    border-left-style: none;
    font-size: 14px;
    font-weight: 600;
  }
  
  /* Artists List Component (Used on Index, Artists) */
  .artists-list {
    display: grid;
    width: 100%;
    max-width: 970px;
    margin: 0 auto;
    grid-auto-columns: 1fr;
    grid-column-gap: 60px;
    grid-row-gap: 72px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .artist-card { /* listitem */ display: flex; justify-content: center; }
  .artist-details-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    overflow: hidden;
    width: 100%;
    padding-top: 32px;
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--border-radius-artist);
    background-color: var(--color-white);
    box-shadow: var(--shadow-medium);
  }
  .artist-intro {
    display: flex;
    padding: 0 24px;
    justify-content: space-between;
    align-items: center;
  }
  .pricing-tag {
    display: flex;
    padding: 9px 12px;
    align-items: center;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-tag);
    background-color: var(--color-background-alt-light);
    font-family: var(--font-primary);
    color: var(--color-text-dark);
  }
  .artist-info {
    margin-top: 32px;
    padding: 24px;
    flex: 1;
    border-radius: var(--border-radius-artist);
    background-color: var(--color-background-alt-light);
  }
  .artist-image { border-radius: var(--border-radius-artist-img); }
  .artist-details-text-content {
    margin-top: 15px;
    padding: 15px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-artist-details);
    background-color: var(--color-white);
  }
  .artist-heading {
    margin: 0 3px 5px 0;
    font-family: var(--font-primary);
    color: var(--color-text-medium);
    font-weight: 600;
  }
  .artist-availlabity {
    display: flex;
    margin-bottom: 20px;
    justify-content: flex-start;
    align-items: center;
  }
  .paragraph.availability {
    width: auto;
    color: var(--color-text-dark);
    font-size: 15px;
    line-height: 25px;
    font-weight: 600;
    text-align: left;
    margin-bottom: 0;
  }
  .paragraph.availability.colored { color: var(--color-accent); }
  .colon {
    margin: 0 2px;
    font-family: var(--font-primary);
    color: var(--color-text-dark);
    font-size: 15px;
    line-height: 25px;
    font-weight: 600;
  }
  .artist-heading-wrapper { display: flex; align-items: center; }
  .artist-description {
    margin-bottom: 0px;
    color: var(--color-text-dark);
    font-size: 15px;
    line-height: 25px;
    text-align: left;
  }
  
  /* Reviews List Component (Used on Index, About) */
  .reviews-list {
    position: relative;
    z-index: 9;
    display: grid;
    width: 100%;
    margin: 0 auto;
    justify-content: space-between;
    grid-auto-columns: 1fr;
    grid-column-gap: 40px;
    grid-row-gap: 60px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .review { /* listitem */
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    flex: 0 0 auto;
  }
  .review-block {
    width: 100%;
    background-color: var(--color-white);
    box-shadow: var(--shadow-medium);
  }
  .review-rating-block {
    display: flex;
    padding: 24px 32px;
    align-items: center;
    border-bottom: 1px solid var(--color-border-light);
  }
  .review-rating-block.second {
    padding: 24px 32px; /* Reset padding */
    border-top: 1px solid var(--color-border-light);
    border-bottom-style: none;
  }
  .star-icon {
    width: 18px;
    margin-right: 5px;
    flex: 0 0 auto;
  }
  .review-text {
    font-family: var(--font-primary);
    color: var(--color-text-dark);
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
  }
  .review-text.colored { margin-left: 4px; color: var(--color-accent); }
  .client-review {
    margin: 28px 32px;
    color: var(--color-text-dark);
    font-size: 15px;
    line-height: 28px;
    text-align: left;
  }
  .review-avatar {
    width: 50px; /* Increased size slightly */
    height: 50px; /* Added fixed height */
    margin: 0;
    border-radius: 50%; /* Explicitly set 50% */
    object-fit: cover; /* Prevent image distortion */
    object-position: top; /* Position image from the top */
  }
  .review-info { padding-left: 16px; flex: 1; }
  .review-text-wrapper { display: flex; margin-top: -4px; padding-top: 4px; flex-wrap: wrap; }
  
  /* Offer Section Component (Used Everywhere Except Booking) */
  .offer-section .info-offer { /* Container for image and text block */
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
  }
  .offer-block {
    position: relative;
    z-index: 9;
    display: flex;
    width: 100%;
    max-width: 760px;
    flex-direction: column;
    align-items: flex-start;
  }
  .offer-heading {
    margin: 0 0 40px 0;
    color: var(--color-text-white);
    text-align: left;
    font-family: var(--font-secondary);
    font-size: 85px;
    line-height: 85px;
    font-weight: 400;
  }
  .offer-info {
    display: flex;
    margin-bottom: 20px;
    padding: 8px 20px 8px 8px;
    justify-content: flex-start;
    align-items: center;
    border-radius: var(--border-radius-offer-info);
    background-color: var(--color-dark-grey);
  }
  .offer-info-text {
    padding: 5px 12px;
    border-radius: var(--border-radius-offer-info-text);
    background-color: var(--color-accent);
    font-family: var(--font-primary);
    color: var(--color-text-white);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .offer-info-text.right {
    margin-left: 16px;
    padding: 0px;
    border-radius: 0px;
    background-color: transparent;
    color: var(--color-text-medium-light);
    letter-spacing: 0px;
    text-transform: none;
  }
  .offer-image {
    position: absolute;
    right: 0px;
    width: 100%;
    max-width: 550px;
  }
  .newsletter {
    width: 100%;
    max-width: 550px;
    margin: 0 0 15px;
  }
  .newsletter-description {
    margin-bottom: 0px;
    color: var(--color-text-dark); /* Default */
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
    text-align: left;
  }
  .newsletter-description.white {
    max-width: 450px;
    color: var(--color-background);
    font-weight: 400;
  }
  
  /* ==========================================================================
       Footer (SHARED)
       ========================================================================== */
  .footer-section {
    padding: 75px 40px;
    background-color: var(--color-background);
  }
  .footer-nav-wrapper {
    display: flex;
    margin-bottom: 48px;
    padding-bottom: 64px;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--color-border-light);
    /* Footer Animation Base */
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    visibility: hidden;
  }
  .footer-nav-wrapper.animate-in { /* Footer Animation End */
      opacity: 1;
      transform: translateY(0);
      visibility: visible;
  }
  .footer-about {
    display: flex;
    width: 100%;
    max-width: 560px;
    padding-right: 40px;
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-description {
    margin: 10px 0 24px 0;
    color: var(--color-text-dark);
    font-size: 14px;
    line-height: 25px;
    font-weight: 600;
    text-align: left;
  }
  .footer-links { display: flex; justify-content: space-between; align-items: flex-start; }
  .footer-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-nav.margin-right { margin: 0 80px 0 0; }
  .footer-content-inner-wrapper {
    display: flex;
    width: 100%;
    max-width: 270px;
    flex-direction: column;
    align-items: flex-start;
  }
  .paragraph.address {
    width: auto;
    max-width: 980px;
    margin: 10px 0;
    color: var(--color-text-dark);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    text-align: left;
  }
  .footer-nav-link {
    margin-top: 10px;
    color: var(--color-text-dark);
    display: inline-flex; /* Use inline-flex */
    flex-direction: column;
    justify-content: space-between;
    font-family: var(--font-primary);
    font-weight: 600;
    text-decoration: none;
    position: relative; /* For hover line */
  }
  .footer-nav-link .hover-line { background-color: var(--color-black); } /* Footer specific hover */
  .footer-nav-link:hover .hover-line { opacity: 1; transform: scaleX(1); }
  
  .footer-content-outer-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    /* Footer Animation Base */
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out 0.2s, transform 0.6s ease-out 0.2s; /* Delay this one */
    visibility: hidden;
  }
  .footer-content-outer-wrapper.animate-in { /* Footer Animation End */
      opacity: 1;
      transform: translateY(0);
      visibility: visible;
  }
  .footer-newsletter-block {
    display: flex;
    width: 100%;
    max-width: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
  }
  .footer-text {
    margin: 0;
    font-family: var(--font-primary);
    color: var(--color-text-dark);
    font-size: 12px;
    text-align: left;
  }
  .footer-text:last-child { text-align: right; }
  .footer-text-span {
    margin: 0 5px;
    font-family: 'Font awesome 5 free solid 900', sans-serif;
    color: var(--color-accent);
  }
  .footer-text-link {
    display: inline-block;
    margin-left: 5px;
    color: var(--color-text-dark);
    font-weight: 600;
    font-family: var(--font-primary);
    text-decoration: none;
  }
  .footer-text-link:hover { text-decoration: underline; }
  
  /* ==========================================================================
       Social Icons (SHARED)
       ========================================================================== */
  .social-links {
    display: flex;
    margin: 0 -16px 0 -20px;
    padding: 0 8px;
    align-items: center;
    flex: 0 0 auto;
  }
  .social-link {
    position: relative;
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    text-decoration: none;
  }
  .social-link:hover { color: var(--color-text-white); }
  .social-icon {
    position: relative;
    z-index: 2;
    width: 18px;
    opacity: 1;
    visibility: visible;
    transition: opacity var(--transition-medium), visibility var(--transition-medium);
  }
  .social-icon-black {
    position: absolute;
    left: 0%; top: 0%; right: 0%; bottom: 0%;
    z-index: 1;
    width: 18px;
    margin: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-medium), visibility var(--transition-medium);
  }
  .social-icon-bg {
    position: absolute;
    left: 0%; top: 0%; right: 0%; bottom: 0%;
    z-index: 1;
    display: none;
    border-radius: var(--border-radius-round);
    background-color: rgba(0, 0, 0, 0.09);
    opacity: 0;
  }
  
  /* ==========================================================================
       Lightbox (SHARED - Using default styles)
       ========================================================================== */
  .my-lightbox-backdrop { background: var(--color-overlay-heavy); color: var(--color-white); }
  .my-lightbox-caption { background: var(--color-overlay-light); }
  .my-lightbox-thumbnail { background: var(--color-darker-grey); }
  .my-lightbox-spinner { border: 5px solid var(--color-overlay-light); }
  .my-lightbox-spinner:after { border-bottom-color: var(--color-white); }
  
  /* ==========================================================================
       Utilities & Helpers (SHARED)
       ========================================================================== */
  .my-dyn-items { }
  .my-dyn-item { }
  .my-dyn-bind-empty { display: none !important; }
  
  /* Toast Notification Styles (SHARED) */
  #toast-container {
    position: fixed;
    top: 20px; right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }
  .toast {
    background-color: #333;
    color: white;
    padding: 15px 25px;
    border-radius: 4px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.5s ease, transform 0.5s ease;
    font-family: var(--font-primary);
    font-size: 14px;
    max-width: 300px;
    word-wrap: break-word;
  }
  .toast.show { opacity: 1; transform: translateX(0); }
  .toast.success { background-color: var(--color-success); }
  .toast.error { background-color: var(--color-error); }
  
  /* ==========================================================================
     Media Queries (SHARED - Base Structure)
     ========================================================================== */
  
/* ==========================================================================
   PREMIUM MOBILE FOOTER REFINEMENTS v5.1 (CORRECTED) by World's No. 1 Designer
   Restores: Copyright section.
   Adds: Separator below Footer About section for consistency when stacked.
   Maintains: Separator below Contact, Single separator above copyright, Spacing, Text jump fix.
   ========================================================================== */

   @media screen and (max-width: 991px) {
    /* --- Tablet Footer Adjustments (Base for Mobile) --- */
    h1 { font-size: 70px; line-height: 70px; }
    h2, .section-heading, .offer-heading { font-size: 70px; line-height: 70px; }
    p { font-size: 16px; line-height: 28px; }

    /* Mobile Nav Menu Styles (Unchanged) */
    .nav-menu {
        position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 300px; padding-top: 80px; border-left: 1px solid var(--color-border-light); background-color: var(--color-white); overflow-y: auto; transform: translateX(100%); opacity: 0; visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; z-index: 1040; /* Lower than menu button */ box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    }
    .nav-menu[my-nav-menu-open] { transform: translateX(0); opacity: 1; visibility: visible; }
    .nav-menu > div:first-child { display: flex; flex-direction: column; align-items: center; width: 100%; flex: 1; min-height: 0; } /* Allows scrolling */
    .nav-link { display: block; width: 100%; margin-bottom: 0px; margin-left: 0px; padding: 15px 0; font-family: var(--font-primary); color: var(--color-text-dark) !important; font-size: 18px; line-height: 24px; text-align: center; opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease; }
    .nav-menu[my-nav-menu-open] .nav-link { opacity: 1; transform: translateY(0); }
    .nav-link div { color: var(--color-text-dark) !important; transition: color 0.3s ease; }
    .nav-link + .nav-link { margin-top: 10px; }
    .nav-link.mobile-only { display: block; }
    .hover-line { display: block !important; background-color: var(--color-black) !important; transform-origin: center; transition: transform 0.7s ease; }
    .nav-link:hover .hover-line { background-color: var(--color-accent) !important; transform: scaleX(1); }
    .hover-line.black { display: block !important; } /* Ensure black line shows */
    .button.nav-button { width: auto; margin-bottom: 30px; }
    .nav-button-wrapper { padding-top: 40px; padding-right: 0; padding-left: 0; width: 100%; display: flex; justify-content: center; }
    .social-links { position: static; margin-top: auto; padding: 30px 0; width: 100%; display: flex; justify-content: center; gap: 25px; margin-right: 0; margin-left: 0; }
    .social-link { margin: 0; padding: 8px; display: flex; align-items: center; justify-content: center; }
    .social-icon { display: none !important; } /* Hide white */
    .social-icon-black { display: block !important; opacity: 1 !important; visibility: visible !important; position: static !important; width: 20px !important; height: 20px !important; } /* Show black, ensure size */
    .menu-button { display: block; margin-right: -8px; padding: 8px; z-index: 1050; /* Above menu */}

    /* Other styles (Unchanged) */
    .info.margin-bottom { margin-bottom: 60px; }
    .info.margin-top { margin-top: 80px; }
    .section { padding: 100px 0; }
    .section.offer-section { padding: 120px 15px; }
    .section.margin-top { margin-top: 64px; }
    .service-card { display: flex; padding: 48px; flex-direction: column-reverse; background-color: var(--color-white); }
    .service-details { padding: 0px; }
    .service-info { padding-top: 48px; padding-bottom: 8px; }
    .service-image { position: static; max-width: 100%; }
    .artist-intro { flex-wrap: wrap; }
    .text-label.artist-label { margin-top: 10px; margin-bottom: 10px; }
    .text-label.price-label { font-size: 13px; }
    .text-label.price-colored { font-size: 13px; }

    /* --- FOOTER REFINEMENTS @ 991px --- */
    .footer-section {
        padding: 70px 30px 50px 30px;
    }

    /* Wrapper for About + Links */
    .footer-nav-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Ensure children align left */
        padding-bottom: 40px; /* Space before the bottom border */
        margin-bottom: 40px; /* Space after the bottom border */
        border-bottom: 1px solid var(--color-border-light); /* Separator above copyright */
        width: 100%;
    }

    .footer-about {
        max-width: none;
        padding-right: 0;
        width: 100%;
        /* ADD separator below */
        padding-bottom: 40px; /* Space before new separator */
        margin-bottom: 0; /* Remove old margin */
        border-bottom: 1px solid var(--color-border-light); /* NEW separator */
    }

    /* Container for Contact + Explore columns */
    .footer-links {
        display: flex;
        flex-direction: row; /* Keep side-by-side */
        width: 100%;
        justify-content: flex-start;
        gap: 60px; /* Horizontal space */
        padding-top: 40px; /* Space AFTER the separator from .footer-about */
    }

    /* Individual column (Contact or Explore) */
    .footer-nav {
        margin: 0;
        padding: 0;
        border: none;
        /* No separator needed when side-by-side */
    }
     .footer-nav .paragraph.address:last-child {
        margin-bottom: 0;
     }

    /* --- Copyright / Credits Area (Restored) --- */
    .footer-content-outer-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        width: 100%;
    }

    .footer-newsletter-block {
        /* Contains copyright/credits text */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        margin-bottom: 0;
    }

    .footer-text {
        margin: 0;
        line-height: 1.5;
        padding: 1px 0;
        text-align: left !important;
    }
    .footer-text:first-child {
         margin-bottom: 0;
     }
     .footer-text:last-child {
         text-align: right !important;
     }

    /* --- Newsletter (if present - Restored) --- */
    .footer-content-outer-wrapper .newsletter {
        width: 100%;
        max-width: 450px;
        align-self: flex-start;
        margin-bottom: 15px;
    }
    .footer-content-outer-wrapper .newsletter .form {
       flex-direction: row;
       align-items: stretch;
    }
    /* --- End Footer Refinements @ 991px --- */


    /* Rest of 991px styles (Unchanged) */
    .wrapper { padding-right: 15px; padding-left: 15px; }
    .wrapper.artist { padding: 0; }
    .wrapper.footer { padding: 0; }
    .service-heading { margin-top: 0px; }
    .services-description { font-size: 16px; line-height: 28px; }
    .footer-description { max-width: 560px; }
    .paragraph-dark { font-size: 16px; line-height: 28px; }
    .review-rating-block.second { align-items: flex-start; }
    .reviews-list { max-width: 570px; grid-template-columns: 1fr; }
    .review { min-height: auto; }
    .newsletter-description { max-width: 500px; }
    .newsletter-description.white { max-width: 90%; text-align: center; margin: 0 auto; }
    .section.offer-section .wrapper .info-offer { display: block !important; width: 100%; max-width: 600px; margin: 0 auto; }
    html body .page-wrapper .section.offer-section .wrapper .info-offer .offer-image { position: static !important; display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 auto 48px auto !important; right: auto !important; }
    .section.offer-section .wrapper .info-offer .offer-block { max-width: none; margin: 0; align-items: center; text-align: center; }
    .offer-heading { text-align: center; }
    .offer-block .offer-info { justify-content: center; }
    .offer-block .newsletter { margin: 0 auto; max-width: 470px; }
    .offer-block .newsletter .form { justify-content: center; }
    .nav-bar { height: 96px; padding: 0 20px; }
    .nav-bar.nav-bar-white { height: 64px; }

} /* End 991px */


@media screen and (max-width: 767px) {
    /* --- Mobile Footer Adjustments (Large Phones / Small Tablets) --- */
    h1 { font-size: 50px; line-height: 50px; }
    h2, .section-heading, .offer-heading { font-size: 50px; line-height: 50px; }
    h3, .service-heading { font-size: 37px; line-height: 45px; }
    p, .paragraph-dark, .services-description { font-size: 14px; line-height: 25px; }
    ul, ol, li { font-size: 14px; line-height: 30px; }

    /* Other styles (Unchanged) */
    .button.margin-bottom { margin-bottom: 30px; }
    .info.margin-bottom { margin-bottom: 48px; }
    .separator.intro-separator { width: 80px; }
    .section { padding: 80px 0; }
    .section.artists { padding: 80px 0; }
    .section.offer-section { padding: 64px 15px; }
    .section.no-padding-top { padding-bottom: 30px; }
    .service-card { padding: 30px; }
    .artist-card { max-width: 100%; }
    .wrapper { padding: 0 15px; }
    
    /* Reduce gap between services on mobile */
    .services { grid-row-gap: 40px; }

    /* --- FOOTER REFINEMENTS @ 767px --- */
    .footer-section {
        padding: 60px 20px 40px 20px;
    }

    /* Wrapper for About + Links */
    .footer-nav-wrapper {
        /* flex-direction: column inherited */
        align-items: stretch; /* Let children take width */
        padding-bottom: 30px; /* Space before border */
        margin-bottom: 30px; /* Space after border */
        border-bottom: 1px solid var(--color-border-light); /* Separator above copyright */
    }

    .footer-about {
        /* ADD separator below */
        padding-bottom: 30px; /* Space before new separator */
        margin-bottom: 0; /* Remove old margin */
        border-bottom: 1px solid var(--color-border-light); /* NEW separator */
        width: 100%;
    }

    /* Container for stacked Contact and Explore */
    .footer-links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 0; /* Use padding/margin for spacing */
        border: none;
        padding-top: 30px; /* Space AFTER the separator from .footer-about */
    }

    /* Individual column (Contact or Explore) */
    .footer-nav {
        width: 100%;
        margin: 0;
        border: none;
        padding-bottom: 30px; /* Space within the section */
    }
    /* Add Separator below the CONTACT section */
     .footer-links .footer-nav:first-child {
         border-bottom: 1px solid var(--color-border-light); /* Separator */
         /* padding-bottom remains 30px */
         margin-bottom: 30px; /* Space AFTER this separator */
     }
     /* Remove padding/margin from LAST block (Explore) */
     .footer-links .footer-nav:last-child {
         padding-bottom: 0;
         margin-bottom: 0;
     }
     .footer-nav .paragraph.address:last-child {
        margin-bottom: 0 !important;
     }

    /* Titles/links styles (Unchanged) */
    .footer-nav .text-label.footer { margin-bottom: 15px; font-weight: 700; letter-spacing: 1.5px; }
    .footer-nav-link { margin-top: 12px; padding: 5px 0; font-size: 15px; }
    .footer-nav-link .hover-line { display: none; }
    .paragraph.address { font-size: 14px; line-height: 24px; font-weight: 400; }
    .paragraph.address strong { font-weight: 600; }

    /* --- Copyright / Credits Area (Restored) --- */
    .footer-content-outer-wrapper {
        display: flex; /* Ensure flex context */
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        width: 100%; /* Ensure it takes full width */
    }

    .footer-newsletter-block {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        margin-bottom: 0;
    }

    .footer-text {
        text-align: left !important;
        font-size: 12px;
        width: auto;
        line-height: 1.5;
        padding: 1px 0;
        margin: 0;
    }
    .footer-text:first-child {
        margin-bottom: 5px;
    }
     .footer-text:last-child {
         text-align: left !important;
     }

    /* --- Newsletter (if present - Restored) --- */
     .footer-content-outer-wrapper .newsletter {
        max-width: none;
        width: 100%;
        margin-bottom: 15px;
     }
    .footer-content-outer-wrapper .newsletter .form {
        flex-direction: column;
        align-items: stretch;
    }
    .footer-content-outer-wrapper .newsletter .text-field,
    .footer-content-outer-wrapper .newsletter .submit-button {
        width: 100%;
        max-width: 100%;
        margin: 0 0 10px 0;
        height: 50px;
        font-size: 14px;
     }
    .footer-content-outer-wrapper .newsletter .submit-button {
         margin-bottom: 0;
         padding: 0 30px;
     }
    .newsletter-description.white {
          font-size: 12px;
          line-height: 1.5;
          margin-bottom: 15px;
          text-align: left;
          max-width: none;
      }
    /* --- End Footer Refinements @ 767px --- */

    /* Original rules from 767px (Unchanged) */
    .reviews-list { max-width: 470px; margin-bottom: 70px; grid-template-columns: 1fr; }
    .review { width: 100%; }
    .newsletter-description.white { max-width: 100%; }

} /* End 767px */


@media screen and (max-width: 479px) {
    /* --- Small Mobile Footer Fine-tuning --- */
    h1 { margin-bottom: 20px; font-size: 40px; line-height: 40px; }
    h2, .section-heading, .offer-heading { font-size: 40px; line-height: 40px; }
    h3, .service-heading { font-size: 26px; line-height: 35px; }

    /* Other styles (Unchanged) */
    .nav-menu { max-width: none; padding-top: 110px; }
    .intro { margin-bottom: 20px; }
    .separator { width: 0px; }
    .separator.dark { margin: 0 20px 0 0; }
    .text-label.artist-label { margin-top: 0px; margin-bottom: 12px; }
    .service-card { padding: 20px; }
    .service-details { padding: 20px 0 0 0; }
    .service-info { padding: 30px 0 0 0; }
    .table-title { padding-left: 10px; }
    .table-content { padding-left: 10px; font-size: 13px; line-height: 17px; }
    .artist-details-wrapper { border-radius: var(--border-radius-xl); }
    .artist-intro { flex-direction: column; justify-content: flex-start; align-items: flex-start; }
    .artist-info { margin-top: 24px; padding: 16px; border-radius: var(--border-radius-xl); }
    .artist-card { padding: 0; }
    
    /* Further reduce gap between services on small mobile */
    .services { grid-row-gap: 30px; }

    /* --- FOOTER REFINEMENTS @ 479px --- */
    .footer-section {
        padding: 50px 15px 30px 15px;
    }

    /* Wrapper for About + Links */
    .footer-nav-wrapper {
        /* flex-direction: column inherited */
        align-items: stretch; /* Let children take width */
        padding-bottom: 25px; /* Space before border */
        margin-bottom: 25px; /* Space after border */
        border-bottom: 1px solid var(--color-border-subtle); /* Lighter border above copyright */
    }

    .footer-about {
        /* ADD separator below */
        padding-bottom: 25px; /* Space before new separator */
        margin-bottom: 0; /* Remove old margin */
        border-bottom: 1px solid var(--color-border-subtle); /* NEW Lighter separator */
        width: 100%;
    }
    .footer-description {
        font-size: 13px;
        line-height: 22px;
    }

    /* Container for stacked Contact and Explore */
    .footer-links {
        /* flex-direction: column inherited */
        align-items: flex-start; /* Keep left aligned */
        gap: 0; /* Use padding/margin */
        border: none;
        padding-top: 25px; /* Space AFTER the separator from .footer-about */
    }

    /* Individual column (Contact or Explore) */
    .footer-nav {
        /* width: 100% inherited */
        border: none;
        margin: 0;
        padding-bottom: 25px; /* Space within section */
    }
     /* Add Separator below the CONTACT section */
     .footer-links .footer-nav:first-child {
         border-bottom: 1px solid var(--color-border-subtle); /* Lighter separator */
         /* padding-bottom remains 25px */
         margin-bottom: 25px; /* Space AFTER separator */
     }
     /* Remove padding/margin from LAST block (Explore) */
     .footer-links .footer-nav:last-child {
         padding-bottom: 0;
         margin-bottom: 0;
     }
     .footer-nav .paragraph.address:last-child {
        margin-bottom: 0 !important;
     }

     /* Titles/Links styles (Unchanged) */
     .footer-nav .text-label.footer { font-size: 11px; letter-spacing: 1px; margin-bottom: 12px; }
     .footer-nav-link { margin-top: 10px; font-size: 14px; padding: 4px 0; }
     .paragraph.address { font-size: 13px; line-height: 22px; }

    /* --- Copyright / Credits Area (Restored) --- */
    .footer-content-outer-wrapper {
        display: flex; /* Ensure flex */
        flex-direction: column;
        align-items: center; /* Center the whole block */
        gap: 15px;
        width: 100%; /* Ensure full width */
    }

    .footer-newsletter-block {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center the stacked lines */
        width: 100%;
        margin-bottom: 0;
    }

    .footer-text {
        text-align: center !important;
        font-size: 11px;
        width: auto;
        line-height: 1.4;
        padding: 1px 0;
        margin: 0;
    }
    .footer-text:first-child {
        margin-bottom: 4px;
    }
    .footer-text:last-child {
        text-align: center !important;
    }

    /* --- Newsletter (if present - Restored) --- */
    .footer-content-outer-wrapper .newsletter {
         /* max-width: none inherited */
         width: 100%;
         margin-bottom: 15px;
         align-self: stretch; /* Take width even when parent centered */
     }
    .footer-content-outer-wrapper .newsletter .form {
        /* flex-direction: column, align-items: stretch inherited */
    }
    .footer-content-outer-wrapper .newsletter .text-field,
    .footer-content-outer-wrapper .newsletter .submit-button {
        /* width: 100%, max-width: 100% inherited */
        margin: 0 0 10px 0;
        height: 48px;
     }
    .footer-content-outer-wrapper .newsletter .submit-button {
        margin-bottom: 0;
     }
    .newsletter-description.white {
          font-size: 11px;
          text-align: center;
          line-height: 1.5;
          margin-bottom: 12px;
      }
    /* --- End Footer Refinements @ 479px --- */


    /* Original rules from 479px (Unchanged) */
    .services-description { font-size: 14px; line-height: 22px; }
    .reviews-list { grid-row-gap: 32px; }
    .review { padding: 0; }
    .newsletter .form { flex-direction: column; align-items: stretch; }
    .newsletter .text-field, .newsletter .submit-button { width: 100%; max-width: 100%; margin: 0 0 10px 0; }
    .newsletter .submit-button { margin-bottom: 0; }
    .footer-content-inner-wrapper { margin-bottom: 0px; }
    .text-label.services { flex: 0 auto; }
    /* Offer section adjustments (Unchanged) */
    .offer-info { padding: 8px; justify-content: center; flex-wrap: wrap; gap: 5px; }
    .offer-info-text { font-size: 11px; padding: 4px 10px; }
    .offer-info-text.right { margin-left: 0; }
    .offer-block .newsletter .form { flex-direction: column; align-items: stretch; }
    .offer-block .newsletter .text-field, .offer-block .newsletter .submit-button { width: 100%; max-width: 100%; margin-left: 0; margin-bottom: 10px; }
    .offer-block .newsletter .submit-button { margin-bottom: 0; }

} /* End 479px */