/* Chakolas Residence - WPBakery Page Builder Addon Styles */

*, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    :root {
      --color-dark: #191714;
      --color-cream: #F7F2EA;
      --color-white: #FFFCFC;
      --color-gold: #B4934A;
      --color-gold-light: #D2B36D;
      --color-muted: #6F675E;
      --color-border: #DDD3C6;
      --color-deep-dark: #11100F;
      --font-serif: "Playfair Display", Georgia, serif;
      --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      --font-body: "Georgia", serif;
      --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    html {
      scroll-behavior: smooth;
      font-size: 16px;
      color: var(--color-dark);
      background-color: var(--color-white);
    }

    body {
      font-family: var(--font-body);
      line-height: 1.65;
      overflow-x: hidden;
    }

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button, input, textarea, select {
      font-family: inherit;
    }

    /* Typography Utilities */
    .eyebrow {
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 2px;
      line-height: 1.2;
      text-transform: uppercase;
      color: var(--color-gold);
      margin-bottom: 12px;
    }

    .eyebrow-light {
      color: var(--color-gold-light);
    }

    .section-title {
      font-family: var(--font-serif);
      font-size: 42px;
      font-weight: 600;
      letter-spacing: -0.8px;
      line-height: 1.08;
      color: var(--color-dark);
      margin-bottom: 16px;
    }

    .section-desc {
      font-family: var(--font-body);
      font-size: 15px;
      line-height: 1.65;
      color: var(--color-muted);
    }

    /* Interactive Buttons & Transitions */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 13px 22px;
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 1.2px;
      line-height: 1;
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer;
      background: transparent;
      border-radius: 0px;
      transition: color 0.15s var(--ease), background-color 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.2s var(--ease);
    }

    .btn svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      transition: transform 0.2s var(--ease);
    }

    .btn:hover svg {
      transform: translateX(4px);
    }

    .btn:active {
      transform: scale(0.98);
    }

    .btn-inverse {
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.78);
      background-color: transparent;
    }

    .btn-inverse:hover {
      background-color: #000000;
      color: #ffffff;
      border-color: #000000;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    }

    .btn-inverse:hover svg,
    .btn-inverse:hover svg path {
      stroke: #ffffff;
    }

    .btn-outline {
      color: var(--color-dark);
      border: 1px solid var(--color-dark);
    }

    .btn-outline:hover {
      background-color: var(--color-dark);
      color: #ffffff;
      box-shadow: 0 4px 14px rgba(25, 23, 20, 0.15);
    }

    .btn-outline:hover svg {
      stroke: #ffffff;
    }

    .btn-primary-form {
      width: 100%;
      padding: 16px 24px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1.1px;
      color: var(--color-dark);
      border: 2px solid var(--color-dark);
      background-color: transparent;
      justify-content: center;
    }

    .btn-primary-form:hover {
      background-color: var(--color-dark);
      color: #ffffff;
      box-shadow: 0 6px 18px rgba(25, 23, 20, 0.2);
    }

    .btn-primary-form:hover svg {
      stroke: #ffffff;
    }

    /* Scroll Reveal & Entrance Animations */
    @keyframes heroFadeIn {
      from {
        opacity: 0;
        transform: translateY(22px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes heroBgZoom {
      from {
        opacity: 0;
        transform: scale(1.05);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .reveal-item {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity, transform;
    }

    .reveal-from-right {
      opacity: 0;
      transform: translateX(36px);
      transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity, transform;
    }

    .reveal-item.is-visible,
    .reveal-from-right.is-visible {
      opacity: 1;
      transform: translate(0, 0);
    }

    /* 1. HERO SECTION */
    .hero-section {
      position: relative;
      width: 100%;
      height: 720px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }

    .hero-bg-wrapper {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .hero-bg-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      animation: heroBgZoom 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.64) 46%, rgba(10, 10, 10, 0.15) 80%);
      z-index: 1;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 1200px;
      padding: 56px 40px;
      display: flex;
      flex-direction: column;
      gap: 22px;
      animation: heroFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .hero-title {
      font-family: var(--font-serif);
      font-size: 64px;
      font-weight: 600;
      letter-spacing: -1.8px;
      line-height: 1.02;
      color: #FFFFFF;
      max-width: 650px;
    }

    .hero-desc {
      font-family: var(--font-body);
      font-size: 15px;
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.82);
      max-width: 560px;
    }

    .hero-btn-row {
      display: flex;
      flex-direction: row;
      gap: 12px;
      align-items: center;
      margin-top: 4px;
    }

    .hero-stats {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      border-top: 1px solid rgba(255, 255, 255, 0.34);
      padding-top: 22px;
      margin-top: 8px;
      max-width: 720px;
    }

    .hero-stat-item {
      flex: 1;
      padding-right: 28px;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .hero-stat-num {
      font-family: var(--font-serif);
      font-size: 30px;
      font-weight: 600;
      line-height: 1;
      color: var(--color-gold-light);
    }

    .hero-stat-label {
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 1.3px;
      line-height: 1.3;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.78);
    }

    /* 2. ABOUT THE RESIDENCE */
    .about-section {
      background-color: var(--color-white);
      padding: 104px 40px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .about-grid {
      display: flex;
      flex-direction: row;
      gap: 72px;
      align-items: center;
      width: 100%;
      max-width: 1120px;
    }

    .about-image-col {
      flex: 1;
      height: 560px;
      position: relative;
      overflow: hidden;
    }

    .about-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      transition: transform 0.6s var(--ease);
    }

    .about-image-col:hover img {
      transform: scale(1.02);
    }

    .about-content-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 22px;
    }

    .features-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding-top: 10px;
    }

    .feature-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 16px;
    }

    .feature-icon {
      width: 26px;
      height: 26px;
      flex-shrink: 0;
      color: var(--color-gold);
      transition: transform 0.2s var(--ease);
    }

    .feature-item:hover .feature-icon {
      transform: scale(1.1);
    }

    .feature-text {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .feature-title {
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.3;
      color: var(--color-dark);
    }

    .feature-subtitle {
      font-family: var(--font-sans);
      font-size: 12px;
      line-height: 1.5;
      color: var(--color-muted);
    }

    /* 3. AMENITIES SECTION */
    .amenities-section {
      background-color: var(--color-cream);
      padding: 92px 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 46px;
    }

    .amenities-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      max-width: 760px;
      gap: 14px;
    }

    .amenities-header .eyebrow,
    .amenities-header .section-title {
      margin-bottom: 0;
    }

    .amenities-grid {
      width: 100%;
      max-width: 1120px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border: 1px solid var(--color-border);
      background-color: var(--color-white);
    }

    .amenity-card {
      position: relative;
      background-color: var(--color-white);
      height: 206px;
      padding: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 20px;
      border-right: 1px solid var(--color-border);
      border-bottom: 1px solid var(--color-border);
      transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), outline 0.2s var(--ease);
    }

    .amenity-card:nth-child(3),
    .amenity-card:nth-child(6) {
      border-right: none;
    }

    .amenity-card:nth-child(4),
    .amenity-card:nth-child(5),
    .amenity-card:nth-child(6) {
      border-bottom: none;
    }

    .amenity-card:hover {
      z-index: 5;
      transform: translateY(-4px);
      box-shadow: 0 0 0 1px var(--color-border), 0 14px 36px rgba(25, 23, 20, 0.08);
      background-color: var(--color-white);
    }

    .amenity-icon {
      width: 26px;
      height: 26px;
      color: var(--color-gold);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .amenity-icon svg {
      width: 26px;
      height: 26px;
      display: block;
    }

    .amenity-card:hover .amenity-icon {
      transform: translateY(-2px) scale(1.12);
    }

    .amenity-title {
      font-family: var(--font-serif);
      font-size: 20px;
      font-weight: 600;
      letter-spacing: -0.8px;
      line-height: 1.2;
      color: var(--color-dark);
      margin: 0;
    }

    .amenity-desc {
      font-family: var(--font-sans);
      font-size: 12px;
      letter-spacing: 1.6px;
      line-height: 1.5;
      text-transform: uppercase;
      color: var(--color-muted);
      margin: 0;
    }

    /* 4. ROOMS SECTION */
    .rooms-section {
      background-color: var(--color-white);
      padding: 104px 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 44px;
    }

    .rooms-header {
      width: 100%;
      max-width: 1120px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-end;
      gap: 24px;
    }

    .rooms-header-left {
      max-width: 680px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .rooms-grid {
      width: 100%;
      max-width: 1120px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }

    .room-card {
      background-color: var(--color-white);
      border: 1px solid var(--color-border);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .room-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 22px 45px rgba(25, 23, 20, 0.12);
    }

    .room-img-wrapper {
      width: 100%;
      height: 390px;
      overflow: hidden;
      position: relative;
    }

    .room-img-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      transition: transform 0.4s var(--ease);
    }

    .room-card:hover .room-img-wrapper img {
      transform: scale(1.03);
    }

    .room-info {
      padding: 28px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .room-title {
      font-family: var(--font-serif);
      font-size: 28px;
      font-weight: 600;
      letter-spacing: -0.04em;
      line-height: 1.2;
      color: var(--color-dark);
    }

    .room-specs {
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1.2px;
      line-height: 1.35;
      text-transform: uppercase;
      color: var(--color-gold);
    }

    .room-desc {
      font-family: var(--font-body);
      font-size: 15px;
      line-height: 1.65;
      color: var(--color-muted);
    }

    .room-info .btn {
      align-self: flex-start;
      margin-top: 4px;
    }

    /* 5. DINING SECTION */
    .dining-section {
      background-color: var(--color-white);
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
    }

    .dining-grid {
      width: 100%;
      max-width: 1200px;
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .dining-img-col {
      flex: 1;
      height: 580px;
      position: relative;
      overflow: hidden;
    }

    .dining-img-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      transition: transform 0.6s var(--ease);
    }

    .dining-img-col:hover img {
      transform: scale(1.02);
    }

    .dining-content-col {
      flex: 1;
      height: 580px;
      padding: 72px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 22px;
      background-color: var(--color-white);
    }

    .dining-bullets {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-top: 6px;
    }

    .dining-bullet {
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 1.6px;
      line-height: 1.3;
      text-transform: uppercase;
      color: var(--color-dark);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .dining-content-col.reveal-from-right .dining-bullet {
      opacity: 0;
      transform: translateX(18px);
    }

    .dining-content-col.reveal-from-right.is-visible .dining-bullet {
      opacity: 1;
      transform: translateX(0);
    }

    .dining-content-col.reveal-from-right.is-visible .dining-bullet:nth-child(1) {
      transition-delay: 0.15s;
    }

    .dining-content-col.reveal-from-right.is-visible .dining-bullet:nth-child(2) {
      transition-delay: 0.25s;
    }

    .dining-content-col.reveal-from-right.is-visible .dining-bullet:nth-child(3) {
      transition-delay: 0.35s;
    }

    /* 6. LOCATION AND ACCESS */
    .location-section {
      background-color: var(--color-cream);
      padding: 104px 40px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .location-grid {
      width: 100%;
      max-width: 1120px;
      display: flex;
      flex-direction: row;
      gap: 56px;
      align-items: center;
    }

    .location-content-col {
      flex: 0.8;
      display: flex;
      flex-direction: column;
      gap: 24px;
      padding: 18px 0;
    }

    .location-points {
      display: flex;
      flex-direction: column;
      gap: 22px;
      padding-top: 14px;
    }

    .location-point {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 16px;
    }

    .location-icon {
      width: 24px;
      height: 24px;
      color: var(--color-gold);
      flex-shrink: 0;
      transition: transform 0.2s var(--ease);
    }

    .location-point:hover .location-icon {
      transform: scale(1.12);
    }

    .location-point-text {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .location-point-title {
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.3;
      color: var(--color-dark);
    }

    .location-point-subtitle {
      font-family: var(--font-sans);
      font-size: 12px;
      line-height: 1.5;
      color: var(--color-muted);
    }

    .location-image-col {
      flex: 1.2;
      height: 620px;
      position: relative;
      overflow: hidden;
    }

    .location-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }

    .location-floating-card {
      position: absolute;
      bottom: 28px;
      left: 28px;
      width: 320px;
      background-color: var(--color-deep-dark);
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      z-index: 2;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    }

    .location-card-eyebrow {
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1.8px;
      color: var(--color-gold-light);
      text-transform: uppercase;
    }

    .location-card-title {
      font-family: var(--font-serif);
      font-size: 28px;
      font-weight: 600;
      letter-spacing: -0.5px;
      line-height: 1.12;
      color: #FFFFFF;
    }

    /* 7. GUEST RATING SNAPSHOT */
    .rating-section {
      background-color: var(--color-white);
      border-top: 1px solid var(--color-border);
      border-bottom: 1px solid var(--color-border);
      padding: 92px 40px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .rating-grid {
      width: 100%;
      max-width: 1120px;
      display: flex;
      flex-direction: row;
      gap: 72px;
      align-items: center;
    }

    .rating-left {
      flex: 1;
      display: flex;
      flex-direction: row;
      gap: 24px;
      align-items: center;
    }

    .rating-big-num {
      font-family: var(--font-serif);
      font-size: 92px;
      font-weight: 600;
      letter-spacing: -3px;
      line-height: 0.9;
      color: var(--color-gold);
    }

    .rating-left-text {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .rating-verdict {
      font-family: var(--font-serif);
      font-size: 32px;
      font-weight: 600;
      letter-spacing: -0.5px;
      line-height: 1.08;
      color: var(--color-dark);
    }

    .rating-caption {
      font-family: var(--font-sans);
      font-size: 12px;
      line-height: 1.5;
      color: var(--color-muted);
    }

    .rating-right {
      flex: 1;
      display: flex;
      flex-direction: row;
    }

    .rating-metric-col {
      flex: 1;
      padding: 24px;
      border-left: 1px solid var(--color-border);
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: background-color 0.2s var(--ease);
    }

    .rating-metric-col:hover {
      background-color: #FAF6F0;
    }

    .metric-num {
      font-family: var(--font-serif);
      font-size: 32px;
      font-weight: 600;
      line-height: 1;
      color: var(--color-dark);
    }

    .metric-label {
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1.2px;
      line-height: 1.3;
      text-transform: uppercase;
      color: var(--color-muted);
    }

    /* 8. FAQS SECTION */
    .faqs-section {
      background-color: var(--color-cream);
      padding: 96px 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 46px;
    }

    .faqs-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 14px;
      max-width: 760px;
    }

    .faqs-grid {
      width: 100%;
      max-width: 1120px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 48px;
    }

    .faq-col {
      display: flex;
      flex-direction: column;
    }

    .faq-item {
      border-top: 1px solid var(--color-border);
      padding: 26px 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
      transition: transform 0.2s var(--ease);
    }

    .faq-item:hover {
      transform: translateX(4px);
    }

    .faq-question {
      font-family: var(--font-serif);
      font-size: 20px;
      font-weight: 600;
      letter-spacing: -0.04em;
      line-height: 1.2;
      color: var(--color-dark);
    }

    .faq-answer {
      font-family: var(--font-body);
      font-size: 15px;
      line-height: 1.65;
      color: var(--color-muted);
    }

    /* 9. ENQUIRY SECTION */
    .enquiry-section {
      background-color: var(--color-white);
      padding: 104px 40px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .enquiry-grid {
      width: 100%;
      max-width: 1120px;
      display: flex;
      flex-direction: row;
      gap: 56px;
      align-items: flex-start;
    }

    .enquiry-image-card {
      flex: 0.9;
      height: 760px;
      position: relative;
      overflow: hidden;
    }

    .enquiry-image-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }

    .enquiry-img-gradient {
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, rgba(17, 16, 15, 0.88) 0%, rgba(17, 16, 15, 0.05) 60%);
      z-index: 1;
    }

    .enquiry-img-badge {
      position: absolute;
      bottom: 36px;
      left: 36px;
      width: 360px;
      z-index: 2;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .enquiry-img-title {
      font-family: var(--font-serif);
      font-size: 38px;
      font-weight: 600;
      letter-spacing: -0.8px;
      line-height: 1.08;
      color: #FFFFFF;
    }

    .enquiry-form-col {
      flex: 1.1;
      display: flex;
      flex-direction: column;
      gap: 28px;
      padding: 20px 0;
    }

    .enquiry-header {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .enquiry-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 100%;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      width: 100%;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
    }

    .form-label {
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.4px;
      color: var(--color-dark);
    }

    .form-input, .form-select, .form-textarea {
      width: 100%;
      padding: 12px 14px;
      font-family: var(--font-sans);
      font-size: 14px;
      color: var(--color-dark);
      background-color: #FFFFFF;
      border: 1px solid var(--color-border);
      border-radius: 0px;
      outline: none;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .form-input::placeholder, .form-textarea::placeholder {
      color: #9E9890;
      font-size: 13px;
    }

    .form-input:focus, .form-select:focus, .form-textarea:focus {
      border-color: var(--color-gold);
      box-shadow: 0 0 0 3px rgba(180, 147, 74, 0.12);
    }

    .form-textarea {
      min-height: 100px;
      resize: vertical;
    }

    .form-select {
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23191714' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 36px;
    }

    .cr-form-status {
      padding: 12px 14px;
      font-size: 13px;
      font-family: var(--font-sans);
      border: 1px solid var(--color-border);
      display: none;
    }

    .cr-form-status.is-success {
      background-color: #f3f8f2;
      border-color: #72a679;
      color: #1f5127;
      display: block;
    }

    .cr-form-status.is-error {
      background-color: #fdf2f2;
      border-color: #e59898;
      color: #8c2323;
      display: block;
    }

    .enquiry-cf7-form,
    .enquiry-form-shortcode-wrapper {
      width: 100%;
    }

    .enquiry-cf7-form .wpcf7-form,
    .enquiry-form-shortcode-wrapper .wpcf7-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 100%;
    }

    .enquiry-cf7-form .wpcf7-form p,
    .enquiry-form-shortcode-wrapper .wpcf7-form p {
      margin: 0;
      width: 100%;
    }

    .enquiry-cf7-form .wpcf7-form-control-wrap,
    .enquiry-form-shortcode-wrapper .wpcf7-form-control-wrap {
      display: block;
      width: 100%;
    }

    .enquiry-cf7-form input[type="text"],
    .enquiry-cf7-form input[type="tel"],
    .enquiry-cf7-form input[type="email"],
    .enquiry-cf7-form input[type="date"],
    .enquiry-cf7-form input[type="number"],
    .enquiry-cf7-form select,
    .enquiry-cf7-form textarea,
    .enquiry-form-shortcode-wrapper input[type="text"],
    .enquiry-form-shortcode-wrapper input[type="tel"],
    .enquiry-form-shortcode-wrapper input[type="email"],
    .enquiry-form-shortcode-wrapper input[type="date"],
    .enquiry-form-shortcode-wrapper input[type="number"],
    .enquiry-form-shortcode-wrapper select,
    .enquiry-form-shortcode-wrapper textarea {
      width: 100%;
      padding: 12px 14px;
      font-family: var(--font-sans);
      font-size: 14px;
      color: var(--color-dark);
      background-color: #FFFFFF;
      border: 1px solid var(--color-border);
      border-radius: 0px;
      outline: none;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
      box-sizing: border-box;
    }

    .enquiry-cf7-form input:focus,
    .enquiry-cf7-form select:focus,
    .enquiry-cf7-form textarea:focus,
    .enquiry-form-shortcode-wrapper input:focus,
    .enquiry-form-shortcode-wrapper select:focus,
    .enquiry-form-shortcode-wrapper textarea:focus {
      border-color: var(--color-gold);
      box-shadow: 0 0 0 3px rgba(180, 147, 74, 0.12);
    }

    .enquiry-cf7-form textarea,
    .enquiry-form-shortcode-wrapper textarea {
      min-height: 100px;
      resize: vertical;
    }

    .enquiry-cf7-form input[type="submit"],
    .enquiry-cf7-form .wpcf7-submit,
    .enquiry-form-shortcode-wrapper input[type="submit"],
    .enquiry-form-shortcode-wrapper .wpcf7-submit {
      width: 100%;
      padding: 16px 24px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1.1px;
      color: var(--color-dark);
      border: 2px solid var(--color-dark);
      background-color: transparent;
      cursor: pointer;
      text-transform: uppercase;
      transition: color 0.15s var(--ease), background-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
      margin-top: 4px;
    }

    .enquiry-cf7-form input[type="submit"]:hover,
    .enquiry-cf7-form .wpcf7-submit:hover,
    .enquiry-form-shortcode-wrapper input[type="submit"]:hover,
    .enquiry-form-shortcode-wrapper .wpcf7-submit:hover {
      background-color: var(--color-dark);
      color: #ffffff;
      box-shadow: 0 6px 18px rgba(25, 23, 20, 0.2);
    }

    .enquiry-cf7-form .wpcf7-not-valid-tip,
    .enquiry-form-shortcode-wrapper .wpcf7-not-valid-tip {
      font-size: 12px;
      color: #b00020;
      margin-top: 4px;
      font-family: var(--font-sans);
    }

    .enquiry-cf7-form .wpcf7-response-output,
    .enquiry-form-shortcode-wrapper .wpcf7-response-output {
      margin: 8px 0 0 0 !important;
      padding: 12px 14px !important;
      font-size: 13px !important;
      font-family: var(--font-sans) !important;
      border-radius: 0px !important;
    }

    .cf7-missing-notice {
      padding: 16px 18px;
      background-color: #f7f2ea;
      border: 1px solid var(--color-border);
      font-family: var(--font-sans);
      font-size: 14px;
      color: var(--color-muted);
    }

    .cf7-missing-notice code {
      background: rgba(25, 23, 20, 0.08);
      padding: 2px 6px;
      font-size: 13px;
    }

    .enquiry-contact-links {
      display: flex;
      flex-direction: row;
      gap: 28px;
      border-top: 1px solid var(--color-border);
      padding-top: 24px;
      margin-top: 8px;
    }

    .contact-link-item {
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      color: inherit;
      transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
    }

    .contact-link-item:hover {
      opacity: 0.8;
      transform: translateY(-2px);
    }

    .contact-icon {
      width: 24px;
      height: 24px;
      color: var(--color-gold);
      flex-shrink: 0;
    }

    .contact-texts {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .contact-tag {
      font-family: var(--font-sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--color-muted);
    }

    .contact-val {
      font-family: var(--font-body);
      font-size: 15px;
      line-height: 1.3;
      color: var(--color-dark);
    }

    /* 10. CLOSING CTA SECTION */
    .closing-cta-section {
      position: relative;
      width: 100%;
      height: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .closing-bg-wrapper {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .closing-bg-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }

    .closing-overlay {
      position: absolute;
      inset: 0;
      background-color: rgba(17, 16, 15, 0.72);
      z-index: 1;
    }

    .closing-card {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 720px;
      background-color: rgba(255, 253, 252, 0.96);
      padding: 44px 64px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 16px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    }

    .closing-title {
      font-family: var(--font-serif);
      font-size: 38px;
      font-weight: 600;
      letter-spacing: -0.8px;
      line-height: 1.1;
      color: var(--color-dark);
    }

    .closing-btn-row {
      display: flex;
      flex-direction: row;
      gap: 12px;
      align-items: center;
      margin-top: 4px;
    }

    /* RESPONSIVE STYLES (MATCHING FRAMER BREAKPOINTS) */
    @media (min-width: 810px) and (max-width: 1199.98px) {
      .hero-section {
        height: 660px;
      }
      .hero-content {
        padding: 48px 32px;
      }
      .hero-title {
        width: 100%;
        max-width: 620px;
      }
      .about-section, .rooms-section, .location-section, .enquiry-section {
        padding: 80px 32px;
      }
      .about-grid {
        gap: 40px;
      }
      .about-image-col {
        height: 520px;
      }
      .amenities-section, .faqs-section {
        padding: 76px 32px;
      }
      .rooms-header {
        flex-direction: column;
        align-items: flex-start;
      }
      .room-img-wrapper {
        height: 300px;
      }
      .dining-grid {
        flex-direction: column;
      }
      .dining-img-col {
        width: 100%;
        height: 460px;
      }
      .dining-content-col {
        width: 100%;
        height: auto;
        padding: 64px 40px;
      }
      .location-grid {
        flex-direction: column;
        gap: 40px;
      }
      .location-content-col, .location-image-col {
        width: 100%;
      }
      .location-image-col {
        height: 520px;
      }
      .rating-section {
        padding: 72px 32px;
      }
      .rating-grid {
        flex-direction: column;
        gap: 36px;
        align-items: flex-start;
      }
      .rating-left {
        width: 100%;
      }
      .rating-right {
        width: 100%;
      }
      .enquiry-grid {
        flex-direction: column;
        gap: 44px;
      }
      .enquiry-image-card {
        width: 100%;
        height: 560px;
      }
      .enquiry-form-col {
        width: 100%;
        padding: 0;
      }
      .closing-card {
        width: 680px;
        padding: 40px 48px;
      }
    }

    @media (max-width: 809.98px) {
      .hero-section {
        height: auto;
        min-height: 600px;
      }
      .hero-content {
        padding: 46px 20px;
        gap: 18px;
      }
      .hero-title {
        font-size: 38px;
        letter-spacing: -1px;
      }
      .hero-desc {
        width: 100%;
      }
      .hero-btn-row {
        flex-direction: column;
        width: 100%;
      }
      .hero-btn-row .btn {
        width: 100%;
      }
      .hero-stats {
        flex-direction: column;
        gap: 14px;
        width: 100%;
        padding-top: 18px;
      }
      .hero-stat-item {
        padding: 0;
        width: 100%;
      }
      .about-section {
        padding: 64px 20px;
      }
      .about-grid {
        flex-direction: column;
        gap: 36px;
      }
      .about-image-col {
        height: 420px;
        width: 100%;
      }
      .section-title {
        font-size: 32px;
      }
      .amenities-section {
        padding: 60px 20px;
        gap: 34px;
      }
      .amenities-grid {
        grid-template-columns: 1fr;
      }
      .amenity-card {
        height: 176px;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
      }
      .amenity-card:last-child {
        border-bottom: none;
      }
      .rooms-section {
        padding: 64px 20px;
      }
      .rooms-header {
        flex-direction: column;
        align-items: flex-start;
      }
      .rooms-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      .room-img-wrapper {
        height: 290px;
      }
      .room-info {
        padding: 22px;
      }
      .room-info .btn {
        width: 100%;
      }
      .dining-grid {
        flex-direction: column;
      }
      .dining-img-col {
        width: 100%;
        height: 360px;
      }
      .dining-content-col {
        width: 100%;
        height: auto;
        padding: 48px 20px;
      }
      .location-section {
        padding: 64px 20px;
      }
      .location-grid {
        flex-direction: column;
        gap: 34px;
      }
      .location-image-col {
        width: 100%;
        height: 430px;
      }
      .location-floating-card {
        left: 16px;
        bottom: 16px;
        width: calc(100% - 32px);
        max-width: 300px;
        padding: 20px;
      }
      .location-card-title {
        font-size: 24px;
      }
      .rating-section {
        padding: 56px 20px;
      }
      .rating-grid {
        flex-direction: column;
        gap: 28px;
      }
      .rating-left {
        flex-direction: row;
        align-items: center;
        width: 100%;
      }
      .rating-big-num {
        font-size: 72px;
      }
      .rating-verdict {
        font-size: 26px;
      }
      .rating-right {
        flex-direction: column;
        width: 100%;
      }
      .rating-metric-col {
        border-left: none;
        border-top: 1px solid var(--color-border);
        padding: 16px 0;
      }
      .faqs-section {
        padding: 60px 20px;
        gap: 32px;
      }
      .faqs-grid {
        grid-template-columns: 1fr;
        gap: 0;
      }
      .enquiry-section {
        padding: 64px 20px;
      }
      .enquiry-grid {
        flex-direction: column;
        gap: 36px;
      }
      .enquiry-image-card {
        width: 100%;
        height: 460px;
      }
      .enquiry-img-badge {
        left: 20px;
        bottom: 20px;
        width: calc(100% - 40px);
      }
      .enquiry-img-title {
        font-size: 28px;
      }
      .enquiry-form-col {
        width: 100%;
        padding: 0;
      }
      .form-row {
        grid-template-columns: 1fr;
      }
      .enquiry-contact-links {
        flex-direction: column;
        gap: 18px;
      }
      .closing-cta-section {
        height: 520px;
      }
      .closing-card {
        width: calc(100% - 32px);
        max-width: 350px;
        padding: 34px 20px;
      }
      .closing-title {
        font-size: 28px;
      }
      .closing-btn-row {
        flex-direction: column;
        width: 100%;
      }
      .closing-btn-row .btn {
        width: 100%;
      }
    }