/* Remove body gradient */
  body {
    background: #ffffff !important;
  }

  /* Wrapper for hero and service cards sections */
  .hero-premium-wrapper {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background-image: url('/assets/images/hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 90vh;
  }

  /* Dark overlay for both sections */
  .hero-premium-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 0;
  }

  /* Full-width Hero Section */
  .hero-fullwidth {
    position: relative;
    height: 50.4vh !important;
    max-height: 50.4vh !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -80px;
    padding: 80px 0 0 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border-bottom: none;
    z-index: 1;
  }
  
  /* Remove individual hero overlay since wrapper overlay covers both sections */
  .hero-overlay {
    display: none;
  }

  .hero-content {
    position: absolute;
    top: calc(80px + 50%);
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    max-width: 1200px;
    width: 100%;
    padding: 0 2rem;
    text-align: center;
    color: #ffffff;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-text-panel {
    --hero-panel-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 200' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M18,48 Q18,18 48,18 Q 64.20,14.75 80.40,18 Q 96.60,21.25 112.80,18 Q 129.00,14.75 145.20,18 Q 161.40,21.25 177.60,18 Q 193.80,14.75 210.00,18 Q 226.20,21.25 242.40,18 Q 258.60,14.75 274.80,18 Q 291.00,21.25 307.20,18 Q 323.40,14.75 339.60,18 Q 355.80,21.25 372.00,18 Q402,18 402,48 Q 402.95,61.00 402,74.00 Q 401.05,87.00 402,100.00 Q 402.95,113.00 402,126.00 Q 401.05,139.00 402,152.00 Q402,182 372,182 Q 355.80,185.25 339.60,182 Q 323.40,178.75 307.20,182 Q 291.00,185.25 274.80,182 Q 258.60,178.75 242.40,182 Q 226.20,185.25 210.00,182 Q 193.80,178.75 177.60,182 Q 161.40,185.25 145.20,182 Q 129.00,178.75 112.80,182 Q 96.60,185.25 80.40,182 Q 64.20,178.75 48.00,182 Q18,182 18,152 Q 17.05,139.00 18,126.00 Q 18.95,113.00 18,100.00 Q 17.05,87.00 18,74.00 Q 18.95,61.00 18,48.00 Z'/%3E%3C/svg%3E");
    position: relative;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    border: none;
    border-radius: 2.1rem 2.65rem 2.35rem 2.5rem / 2.45rem 2.15rem 2.6rem 2.25rem;
    padding: 4.5rem 5.75rem;
    display: inline-block;
    max-width: 52rem;
    overflow: hidden;
    box-shadow: none;
    -webkit-mask-image: var(--hero-panel-wave);
    mask-image: var(--hero-panel-wave);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.16)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.1));
  }

  .hero-text-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
      radial-gradient(ellipse 92% 28% at 50% 0%, rgba(255, 255, 255, 0.14), transparent 72%),
      radial-gradient(ellipse 55% 22% at 0% 100%, rgba(255, 255, 255, 0.06), transparent 68%),
      radial-gradient(ellipse 55% 22% at 100% 0%, rgba(255, 255, 255, 0.06), transparent 68%);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.07),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  .hero-text-panel > * {
    position: relative;
    z-index: 1;
  }
  

  .hero-title {
    font-family: 'Playfair Display', 'Times New Roman', Times, serif;
    font-size: clamp(30px, 4.25vw, 44px);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 1.25rem 0;
    color: #f4ebc9;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    letter-spacing: 0.01em;
    opacity: 0;
    animation: slideInFromLeft 0.8s ease forwards;
  }

  .hero-subtitle {
    font-size: clamp(22px, 2.85vw, 30px);
    color: #f8f4e6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    margin: 0;
    padding: 0;
    opacity: 0;
    animation: slideInFromLeft 0.8s ease 0.5s forwards;
  }

  @keyframes slideInFromLeft {
    0% {
      opacity: 0;
      transform: translateX(-50px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }


  /* Homepage — three service pillars: intro + clickable pillar cards */
  .premium-gold-section-wrapper {
    background: transparent;
    padding: 40px 1.5rem;
    margin: 0;
    width: 100%;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
  }

  @media (max-width: 768px) {
    .premium-gold-section-wrapper {
      padding: 20px 0;
    }
  }

  .premium-gold-section {
    --premium-glass-stop-1: rgba(255, 252, 242, 0.58);
    --premium-glass-stop-2: rgba(246, 230, 195, 0.52);
    --premium-glass-stop-3: rgba(229, 199, 128, 0.46);
    --premium-glass-stop-4: rgba(218, 180, 104, 0.42);
    --premium-glass-blur: blur(22px) saturate(160%);
    --premium-title-stop-1: rgba(255, 255, 255, 0.24);
    --premium-title-stop-2: rgba(255, 255, 255, 0.18);
    --premium-title-stop-3: rgba(255, 255, 255, 0.14);
    --premium-title-stop-4: rgba(255, 255, 255, 0.1);
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 2.85rem);
    box-sizing: border-box;
    background:
      linear-gradient(
        152deg,
        var(--premium-glass-stop-1) 0%,
        var(--premium-glass-stop-2) 38%,
        var(--premium-glass-stop-3) 72%,
        var(--premium-glass-stop-4) 100%
      );
    backdrop-filter: var(--premium-glass-blur);
    -webkit-backdrop-filter: var(--premium-glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 28px;
    box-shadow:
      0 22px 56px rgba(70, 45, 14, 0.18),
      0 4px 20px rgba(184, 130, 40, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      inset 0 -1px 0 rgba(160, 110, 48, 0.14);
    overflow: visible;
  }

  .home-services-intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(2rem, 5vw, 2.75rem);
    padding: 0 clamp(0.25rem, 3vw, 1rem);
  }

  .home-services-kicker {
    display: inline-block;
    margin: 0 0 0.65rem 0;
    padding: 0.35rem 1rem;
    font-family: 'Source Serif Pro', Georgia, serif;
    font-size: clamp(0.72rem, 1.55vw, 0.82rem);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5c4818;
    background: linear-gradient(135deg, rgba(252, 244, 220, 0.92), rgba(230, 200, 120, 0.55));
    border: 1px solid rgba(196, 160, 70, 0.55);
    border-radius: 999px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.75),
      0 4px 14px rgba(120, 80, 20, 0.12);
  }

  .home-services-title {
    color: #2f2618;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  }

  .home-services-lead {
    font-family: 'Source Serif Pro', Georgia, serif;
    font-size: clamp(0.97rem, 2vw, 1.125rem);
    line-height: 1.62;
    color: rgba(55, 45, 28, 0.88);
    margin: 0;
  }

  .home-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 3.5vw, 2rem);
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
  }

  .home-pillars-grid.home-pillars-grid--dual {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 920px;
    margin-inline: auto;
  }

  /* Lift / glow only when a real link inside is hovered or focused (body text stays inert). */
  .home-pillar-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    min-width: 0;
    color: inherit;
    border-radius: 22px;
    overflow: visible;
    background: rgba(255, 255, 255, 0.97);
    border: 2px solid rgba(255, 253, 245, 0.88);
    box-shadow:
      0 14px 40px rgba(62, 44, 16, 0.14),
      0 0 0 1px rgba(200, 160, 80, 0.18);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
    outline: none;
  }

  .home-pillar-card:focus-within,
  .home-pillar-card:has(.home-pillar-media-link:hover),
  .home-pillar-card:has(.home-pillar-cta-link:hover) {
    transform: translateY(-6px);
    border-color: rgba(212, 175, 55, 0.75);
    box-shadow:
      0 22px 54px rgba(92, 64, 20, 0.16),
      0 0 0 1px rgba(184, 140, 52, 0.22);
  }

  .home-pillar-media-link:focus-visible,
  .home-pillar-cta-link:focus-visible {
    outline: 3px solid #d4af37;
    outline-offset: 3px;
  }

  .home-pillar-media-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 20px 20px 0 0;
    cursor: pointer;
  }

  .home-pillar-cta-link {
    display: block;
    width: 100%;
    margin-top: auto;
    padding-top: 0.5rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }

  .home-pillar-cta {
    display: flex;
    align-items: center;
    gap: clamp(0.65rem, 2.2vw, 1rem);
    width: 100%;
    box-sizing: border-box;
    min-height: 3.1rem;
    padding: 0.65rem 0.7rem 0.65rem 1.1rem;
    border-radius: 14px;
    font-family: 'Source Serif Pro', Georgia, serif;
    font-size: clamp(0.95rem, 1.7vw, 1.06rem);
    font-weight: 700;
    color: #f4ebd4;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, background 0.28s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .home-pillar-card.massage .home-pillar-cta {
    background: linear-gradient(145deg, #2d6e5f 0%, #255e50 38%, #1e4a3d 100%);
    box-shadow:
      0 12px 28px rgba(37, 94, 80, 0.35),
      0 1px 0 rgba(255, 255, 255, 0.14) inset;
  }

  .home-pillar-card.pedicure .home-pillar-cta {
    background: linear-gradient(145deg, #d4632a 0%, #c05621 38%, #7c2410 100%);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow:
      0 12px 28px rgba(192, 86, 33, 0.35),
      0 1px 0 rgba(255, 255, 255, 0.14) inset;
  }

  .home-pillar-card.aromatherapy .home-pillar-cta {
    background: linear-gradient(145deg, #b8941f 0%, #a6851c 40%, #7a6315 100%);
    color: #fef9e7;
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow:
      0 12px 30px rgba(122, 99, 21, 0.38),
      0 1px 0 rgba(255, 255, 255, 0.12) inset;
  }

  .home-pillar-card.massage .home-pillar-cta-link:hover .home-pillar-cta {
    background: linear-gradient(145deg, #2d6e5f 0%, #255e50 38%, #1e4a3d 100%);
    box-shadow:
      0 16px 38px rgba(37, 94, 80, 0.42),
      0 1px 0 rgba(255, 255, 255, 0.16) inset;
  }

  .home-pillar-card.pedicure .home-pillar-cta-link:hover .home-pillar-cta {
    background: linear-gradient(145deg, #d4632a 0%, #c05621 38%, #7c2410 100%);
    box-shadow:
      0 16px 38px rgba(192, 86, 33, 0.42),
      0 1px 0 rgba(255, 255, 255, 0.16) inset;
  }

  .home-pillar-card.aromatherapy .home-pillar-cta-link:hover .home-pillar-cta {
    background: linear-gradient(145deg, #c9a52f 0%, #b8941f 40%, #7a6315 100%);
    box-shadow:
      0 16px 38px rgba(122, 99, 21, 0.42),
      0 1px 0 rgba(255, 255, 255, 0.16) inset;
  }

  .home-pillar-cta-label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    line-height: 1.38;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
    white-space: normal;
    padding-block: 0.12rem;
  }

  /* Chevron capsule — anchored to RHS inside same pill */
  .home-pillar-cta-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 11px;
    background: rgba(0, 0, 0, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.26);
    color: rgba(252, 248, 235, 0.98);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), background 0.28s ease, border-color 0.28s ease;
  }

  .home-pillar-cta-arrow svg {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
  }

  .home-pillar-card .home-pillar-cta-link:hover .home-pillar-cta {
    transform: translateY(-2px);
  }

  .home-pillar-card .home-pillar-cta-link:hover .home-pillar-cta-arrow {
    transform: translateX(4px);
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.34);
  }

  .home-pillar-card.aromatherapy .home-pillar-cta-link:hover .home-pillar-cta-arrow {
    background: rgba(255, 255, 255, 0.14);
  }

  .home-pillar-media {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    border-radius: 20px 20px 0 0;
    overflow: visible;
  }

  /* Identical photo frame on both cards (same as massage: 16:10) */
  .home-pillar-media-crop {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    background: #3f3020;
  }

  .home-pillar-media-crop .home-pillar-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transform: scale(1.015);
    transition: transform 0.45s ease;
  }

  .home-pillar-card:has(.home-pillar-media-link:hover) .home-pillar-media-crop .home-pillar-img,
  .home-pillar-card:has(.home-pillar-cta-link:hover) .home-pillar-media-crop .home-pillar-img,
  .home-pillar-card:has(.home-pillar-media-link:focus-visible) .home-pillar-media-crop .home-pillar-img,
  .home-pillar-card:has(.home-pillar-cta-link:focus-visible) .home-pillar-media-crop .home-pillar-img {
    transform: scale(1.06);
  }

  .home-pillar-card .service-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 4;
    background: linear-gradient(135deg, #f4ebc9 0%, #d4af37 100%);
    color: #1a3d33;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-family: 'Playfair Display', serif;
    font-size: clamp(0.78rem, 1.4vw, 0.92rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    pointer-events: none;
  }

  .home-pillar-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0.65rem;
    padding: clamp(1.15rem, 3vw, 1.55rem);
    padding-top: 1.05rem;
  }

  .home-pillar-chip {
    align-self: flex-start;
    font-size: clamp(0.68rem, 1.35vw, 0.76rem);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 0.28rem 0.72rem;
    border-radius: 6px;
  }

  .home-pillar-card.massage .home-pillar-chip {
    background: rgba(37, 94, 80, 0.12);
    color: #1e5a48;
    border: 1px solid rgba(37, 94, 80, 0.22);
  }

  .home-pillar-card.pedicure .home-pillar-chip {
    background: rgba(192, 86, 33, 0.12);
    color: #7c2410;
    border: 1px solid rgba(192, 86, 33, 0.22);
  }

  .home-pillar-card.aromatherapy .home-pillar-chip {
    background: rgba(166, 133, 28, 0.12);
    color: #7a6315;
    border: 1px solid rgba(166, 133, 28, 0.22);
  }

  .home-pillar-heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.25rem, 2.65vw, 1.52rem);
    font-weight: 700;
    line-height: 1.22;
    color: #14322a;
    margin: 0;
    letter-spacing: -0.02em;
  }

  .home-pillar-text {
    font-family: 'Source Serif Pro', Georgia, serif;
    font-size: clamp(0.92rem, 1.85vw, 1.035rem);
    line-height: 1.62;
    color: #374a44;
    margin: 0 0 0.55rem;
    flex: 1 1 auto;
    min-height: 0;
  }

  @media (max-width: 768px) {
    .premium-gold-section {
      margin-left: clamp(0.75rem, 4vw, 1rem);
      margin-right: clamp(0.75rem, 4vw, 1rem);
      padding: clamp(1.5rem, 6vw, 2rem);
    }

    .home-pillars-grid,
    .home-pillars-grid.home-pillars-grid--dual {
      grid-template-columns: 1fr;
      gap: 1.35rem;
    }

    .home-pillar-media-crop {
      aspect-ratio: 5 / 3;
    }

    .home-pillar-cta {
      padding: 0.62rem 0.58rem 0.62rem 0.95rem;
      gap: 0.55rem;
    }

    .home-pillar-cta-arrow {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 10px;
    }

    .home-pillar-cta-arrow svg {
      width: 1.05rem;
      height: 1.05rem;
    }

  }

  /* Descriptive Section with White Background */
  .descriptive-section {
    background: #ffffff;
    padding: 5rem 0;
    margin: 0;
    position: relative;
    overflow: hidden;
    z-index: 10;
  }

  .descriptive-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    color: #1a3d33;
  }

  .descriptive-intro {
    font-size: 1.3rem;
    line-height: 1.9;
    color: #2d4a3e;
    margin: 0 0 3rem 0;
    text-align: center;
  }

  .descriptive-block {
    background: #f5f5f5;
    border-radius: 16px;
    padding: 2.5rem;
    margin-bottom: 2rem;
    border: 1px solid #e5e7eb;
  }

  .descriptive-block h3 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    margin: 0 0 1.5rem 0;
    color: #1a3d33;
    border-bottom: 2px solid #255e50;
    padding-bottom: 1rem;
  }

  .descriptive-block p {
    font-size: 1.1rem;
    line-height: 1.9;
    color: #374151;
    margin: 0 0 1rem 0;
  }

  /* Philosophy background: css/home-sections.css */

  .philosophy-inner {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }

  .philosophy-header {
    text-align: center;
  }

  .philosophy-quote-card {
    margin: 0 auto clamp(2.25rem, 5vw, 2.75rem);
    max-width: 680px;
    text-align: center;
  }

  .philosophy-quote-card p {
    margin: 0;
    font-family: 'Source Serif Pro', Georgia, 'Times New Roman', serif;
    font-size: clamp(1.04rem, 1.72vw, 1.26rem);
    font-weight: 500;
    line-height: 1.73;
    color: rgba(26, 40, 36, 0.92);
    letter-spacing: 0.011em;
    max-width: 52ch;
    margin-left: auto;
    margin-right: auto;
    font-variant-ligatures: common-ligatures;
  }

  .philosophy-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.75rem, 6vw, 4.75rem);
    align-items: stretch;
    margin-top: 0.35rem;
  }

  .philosophy-tile {
    --philosophy-tile-bg: linear-gradient(
      152deg,
      #d8ebe2 0%,
      #c8e0d4 48%,
      #b8d6c8 100%
    );
    --philosophy-tile-shine:
      radial-gradient(ellipse 95% 38% at 50% 0%, rgba(255, 255, 255, 0.5), transparent 72%),
      radial-gradient(ellipse 65% 30% at 0% 100%, rgba(180, 220, 200, 0.35), transparent 68%),
      radial-gradient(ellipse 65% 30% at 100% 0%, rgba(120, 180, 150, 0.22), transparent 68%);
    --philosophy-tile-icon-color: #1a5c48;
    --philosophy-tile-text: #1a3d32;
    --wavy-panel-safe-inline: clamp(2.75rem, 7vw, 4.25rem);
    --wavy-panel-bg-outset-inline: clamp(1.5rem, 4vw, 2.25rem);
    position: relative;
    isolation: isolate;
    padding: clamp(2.75rem, 5.5vw, 3.5rem) var(--wavy-panel-safe-inline) clamp(2.75rem, 5.5vw, 3.5rem);
    border: none;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    transition: transform 0.28s ease, filter 0.28s ease;
  }

  .philosophy-tile::after {
    content: '';
    position: absolute;
    inset: -0.35rem calc(-1 * var(--wavy-panel-bg-outset-inline));
    pointer-events: none;
    z-index: -2;
    background: var(--philosophy-tile-bg);
    -webkit-mask-image: var(--home-title-panel-wave);
    mask-image: var(--home-title-panel-wave);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .philosophy-tile::before {
    content: '';
    position: absolute;
    inset: -0.35rem calc(-1 * var(--wavy-panel-bg-outset-inline));
    pointer-events: none;
    z-index: -1;
    background: var(--philosophy-tile-shine);
    -webkit-mask-image: var(--home-title-panel-wave);
    mask-image: var(--home-title-panel-wave);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .philosophy-tile:nth-child(2) {
    --philosophy-tile-bg: linear-gradient(
      152deg,
      #f8dcc8 0%,
      #f0c4a8 48%,
      #e8b090 100%
    );
    --philosophy-tile-shine:
      radial-gradient(ellipse 95% 38% at 50% 0%, rgba(255, 255, 255, 0.48), transparent 72%),
      radial-gradient(ellipse 65% 30% at 0% 100%, rgba(255, 210, 170, 0.4), transparent 68%),
      radial-gradient(ellipse 65% 30% at 100% 0%, rgba(220, 140, 90, 0.25), transparent 68%);
    --philosophy-tile-icon-color: #9c3d1e;
    --philosophy-tile-text: #5c2a12;
  }

  .philosophy-tile:hover {
    transform: translateY(-3px);
    filter: drop-shadow(0 14px 28px rgba(37, 94, 80, 0.14));
  }

  .philosophy-tile:nth-child(2):hover {
    filter: drop-shadow(0 14px 28px rgba(180, 90, 40, 0.18));
  }

  .philosophy-tile-icon {
    position: relative;
    z-index: 1;
    float: left;
    width: clamp(4.75rem, 11vw, 6.25rem);
    height: clamp(4.75rem, 11vw, 6.25rem);
    margin: 0.85rem 1.15rem 0.75rem 0;
    display: grid;
    place-items: center;
    background: none;
    color: var(--philosophy-tile-icon-color, #255e50);
    box-shadow: none;
    shape-outside: margin-box;
  }

  .philosophy-tile-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .philosophy-tile-body {
    position: relative;
    z-index: 1;
  }

  .philosophy-tile-body::after {
    content: '';
    display: table;
    clear: both;
  }

  .philosophy-tile-body p {
    margin: 0;
    font-size: clamp(0.975rem, 1.35vw, 1.065rem);
    line-height: 1.74;
    color: var(--philosophy-tile-text, #2d463d);
    font-weight: 400;
    letter-spacing: 0.01em;
  }

  @media (max-width: 900px) {
    .philosophy-columns {
      grid-template-columns: 1fr;
    }

    .philosophy-quote-card p {
      font-size: clamp(1rem, 3.55vw, 1.14rem);
      line-height: 1.71;
    }
  }

  /* Smooth scroll animations for text elements */
  .descriptive-section h2,
  .philosophy-quote-card,
  .philosophy-tile,
  .descriptive-section .descriptive-block,
  .about-content h2,
  .about-content p,
  .about-content ul,
  .about-content .about-actions {
    will-change: opacity, transform;
  }

  .descriptive-block ul {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
  }

  .descriptive-block ul li {
    padding: 0.75rem 0;
    padding-left: 2rem;
    position: relative;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #374151;
  }

  .descriptive-block ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #255e50;
    font-weight: bold;
    font-size: 1.2rem;
  }

  .vip-button {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 14px 36px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    color: #ffffff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.3);
  }

  .vip-button:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  }

  /* Responsive Design */
  @media (max-width: 968px) {
    .hero-fullwidth {
      height: 43.2vh !important;
      max-height: 43.2vh !important;
    }


    .descriptive-section {
      padding: 4rem 1.5rem;
    }
  }

  @media (min-width: 769px) {
    .hero-fullwidth {
      padding: 0;
      padding-top: 80px;
      display: block;
    }

    .hero-content {
      position: absolute;
      top: 160px; /* 80px header + 80px negative-margin offset */
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 0 2rem;
      transform: none;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
    }
  }

  @media (min-width: 969px) {
    .hero-fullwidth {
      height: 56vh !important;
      max-height: 56vh !important;
    }
  }

  @media (max-width: 768px) {
    .hero-fullwidth {
      height: 46.8vh !important;
      max-height: 46.8vh !important;
      margin-top: -70px;
      padding: 70px 16px 0 16px;
      align-items: center;
      overflow: visible;
    }
    
    .hero-content {
      padding: 0 1.5rem !important;
      position: absolute !important;
      top: calc(90px + 50%) !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
    }

    .hero-text-panel {
      padding: 2.75rem 3.25rem 2.5rem;
      border-radius: 1.75rem 2.15rem 1.9rem 2rem / 2rem 1.8rem 2.1rem 1.85rem;
    }

    .hero-title {
      font-size: clamp(26px, 5vw, 36px) !important;
    }

    .hero-subtitle {
      font-size: clamp(19px, 4vw, 26px) !important;
    }


    .descriptive-section {
      padding: 3rem 0;
      margin: 0;
    }
    
    .descriptive-content {
      padding: 0 20px;
    }

    .philosophy-inner {
      max-width: 100%;
    }

    .philosophy-tile {
      padding-top: clamp(2.35rem, 6vw, 3rem);
      padding-bottom: clamp(2.35rem, 6vw, 3rem);
    }

    .philosophy-tile-icon {
      width: clamp(3.85rem, 16vw, 4.75rem);
      height: clamp(3.85rem, 16vw, 4.75rem);
      margin-top: 0.65rem;
      margin-right: 0.9rem;
      margin-bottom: 0.55rem;
    }

    .descriptive-block {
      padding: 1.5rem;
      margin-left: 1rem;
      margin-right: 1rem;
    }

    .descriptive-intro {
      margin-left: 1rem;
      margin-right: 1rem;
      font-size: 1.1rem;
    }
  }

  /* Homepage section title size and vertical rhythm (canonical: css/home-sections.css) */
  :root {
    --home-section-py: clamp(4.5rem, 9vw, 6rem);
    --home-section-title-size: clamp(2.15rem, 4.2vw, 3rem);
    --home-section-title-gap-before: clamp(0.75rem, 2vw, 1.25rem);
    --home-section-title-gap-after: clamp(3rem, 5.5vw, 3.75rem);
    --home-section-title-color: #1a4a3e;
  }

  #philosophy.philosophy-section,
  #about.about,
  #home-blog.home-blog,
  #gallery.home-gallery,
  .contact--pro {
    padding-top: var(--home-section-py) !important;
    padding-bottom: var(--home-section-py) !important;
  }

  .home-section-title,
  .home-services-title {
    font-family: 'Source Serif Pro', 'Times New Roman', Times, serif !important;
    font-size: var(--home-section-title-size) !important;
    font-weight: 600 !important;
    line-height: 1.12 !important;
    letter-spacing: 0.03em !important;
    font-variant-ligatures: common-ligatures;
    text-rendering: optimizeLegibility;
    margin: var(--home-section-title-gap-before) auto var(--home-section-title-gap-after) !important;
    text-align: center;
    color: var(--home-section-title-color) !important;
  }

  .home-services-title.home-section-title {
    margin-bottom: 1rem !important;
  }

  #about .home-section-title {
    color: #1a1a1a !important;
  }

  @media (min-width: 901px) {
    #about .home-section-title {
      text-align: left;
      margin-left: 0 !important;
      margin-right: auto !important;
    }
  }

  @media (max-width: 900px) {
    #about .home-section-title {
      text-align: center;
    }
  }

  #about .about-content p,
  #about .about-content li {
    color: #1a1a1a;
  }

  .philosophy-header {
    margin-bottom: 0 !important;
    display: flow-root;
  }

  #contact .contact-pro__header {
    margin-bottom: var(--home-section-title-gap-after) !important;
  }

  #contact .contact-pro__header .home-section-title {
    margin-bottom: 0 !important;
  }

  .home-blog #home-blog-container,
  .home-blog .cards {
    margin-top: 0 !important;
  }

  #gallery .home-gallery-wrap,
  #gallery .home-gallery-empty {
    margin-top: 0 !important;
  }

  /* Alternating section backgrounds (canonical: css/home-sections.css) */
  #philosophy.philosophy-section {
    background-color: #fdfaf6;
    background-image:
      radial-gradient(ellipse 95% 62% at 50% -8%, rgba(212, 175, 55, 0.12), transparent 58%),
      radial-gradient(ellipse 72% 52% at 0% 100%, rgba(196, 150, 80, 0.08), transparent 54%),
      linear-gradient(168deg, #fffffe 0%, #fdfaf6 24%, #faf6ef 48%, #f7f2ea 62%, #fdfaf7 100%);
  }

  #about.about {
    background-color: #ecf4f0;
    background-image:
      radial-gradient(ellipse 86% 56% at 50% -6%, rgba(61, 122, 106, 0.26), transparent 58%),
      radial-gradient(ellipse 70% 50% at 100% 100%, rgba(37, 94, 80, 0.2), transparent 56%),
      radial-gradient(ellipse 60% 44% at 0% 42%, rgba(26, 64, 53, 0.14), transparent 52%),
      linear-gradient(175deg, #f8fcfa 0%, #ecf4f0 20%, #d4e8df 42%, #bdd9ce 58%, #d8e8e1 78%, #f2f8f5 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  #home-blog.home-blog {
    background-color: #faf8f4;
    background-image:
      radial-gradient(ellipse 98% 64% at 50% -14%, rgba(255, 253, 248, 0.98), transparent 56%),
      radial-gradient(ellipse 72% 54% at 100% 88%, rgba(212, 175, 55, 0.1), transparent 54%),
      linear-gradient(165deg, #fffffe 0%, #fdfaf5 26%, #faf4ec 48%, #f6efe6 62%, #fcfaf6 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(160, 120, 60, 0.04);
  }

  #gallery.home-gallery {
    background-color: #e4f0eb;
    background-image:
      radial-gradient(ellipse 90% 58% at 50% -8%, rgba(45, 122, 106, 0.3), transparent 56%),
      radial-gradient(ellipse 64% 52% at 100% 58%, rgba(30, 74, 61, 0.22), transparent 56%),
      radial-gradient(ellipse 56% 46% at 0% 90%, rgba(37, 94, 80, 0.18), transparent 50%),
      linear-gradient(168deg, #f6fbf8 0%, #e8f2ed 24%, #d0e4db 46%, #b8d4c8 62%, #cce0d6 78%, #eef6f2 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.75),
      inset 0 -1px 0 rgba(26, 64, 53, 0.06);
  }
  /* Ensure about modal close button always has golden border */
  #aboutModal .modal-close {
    border: 1.5px solid #F4E4BC !important;
  }
  
  #aboutModal .modal-close:hover {
    border-color: #F4E4BC !important;
  }
  
  #aboutModal .modal-close:active {
    border-color: #F4E4BC !important;
  }