:root {
      --gc-gold: #c9a24b;
      --gc-gold-light: #e6cb8a;
      --gc-charcoal: #14110d;
      --gc-cream: #f7f2e9;
      --gc-sans: 'Inter', sans-serif;
      --gc-serif: var(--gc-sans);
      --gc-script: var(--gc-sans);
    }

    body {
      font-family: var(--gc-sans);
    }

    h1, h2, h3, h4, .heading_container h2 {
      font-family: var(--gc-sans);
      font-weight: 700;
    }

    /* global luxury CTA buttons — reused across hero, offers, popups */
    .btn-gold {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 15px 34px;
      background: linear-gradient(135deg, var(--gc-gold) 0%, #a3822f 100%);
      color: #1a1305 !important;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-size: 0.82rem;
      border-radius: 2px;
      border: 1px solid var(--gc-gold);
      transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
      box-shadow: 0 10px 26px rgba(201, 162, 75, 0.35);
      cursor: pointer;
    }

    .btn-gold:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 34px rgba(201, 162, 75, 0.5);
      color: #1a1305;
    }

    /* Header — fixed/sticky, transparent over the hero, frosted once scrolled */
    .header_section {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 500;
      background: transparent;
      transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
    }

    .header_section.is-scrolled {
      background: rgba(0, 0, 0, 0.42);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 2px 24px rgba(20, 15, 5, 0.08);
    }

    .header_section .custom_nav-container {
      padding: 22px 0;
      transition: padding 0.35s ease;
    }

    .header_section.is-scrolled .custom_nav-container {
      padding: 12px 0;
    }

    .navbar-brand img {
      height: 42px;
      width: auto;
      transition: height 0.35s ease;
    }

    .header_section.is-scrolled .navbar-brand img {
      height: 34px;
    }

    .custom_nav-container.navbar-expand-lg .navbar-nav .nav-item .nav-link {
      padding: 10px 20px !important;
      color: #fff;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      text-align: center;
      position: relative;
      transition: color 0.3s ease;
    }

    .header_section.is-scrolled .custom_nav-container.navbar-expand-lg .navbar-nav .nav-item .nav-link {
      color: #ffffff;
    }

    .custom_nav-container .navbar-nav .nav-item .nav-link::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 4px;
      width: 0;
      height: 1px;
      background: var(--gc-gold);
      transition: width 0.3s ease, left 0.3s ease;
    }

    .custom_nav-container .navbar-nav .nav-item:hover .nav-link::after,
    .custom_nav-container .navbar-nav .nav-item.active .nav-link::after {
      width: 24px;
      left: calc(50% - 12px);
    }

    .custom_nav-container .navbar-nav .nav-item .nav-link.selected {
      color: var(--gc-gold-light) !important;
      font-weight: 600 !important;
    }

    .header_section.is-scrolled .nav-link.selected {
      color: var(--gc-gold) !important;
    }

    .nav-cta-btn {
      display: inline-flex !important;
      align-items: center;
      gap: 8px;
      margin-left: 12px;
      padding: 11px 24px !important;
      border-radius: 2px;
      background: var(--gc-gold);
      color: #14110d !important;
      font-weight: 700 !important;
      transition: background 0.25s ease, transform 0.25s ease;
    }

    .nav-cta-btn::after {
      display: none !important;
    }

    .nav-cta-btn:hover {
      background: #fdfaf4;
      transform: translateY(-2px);
    }

    .custom_nav-container .navbar-toggler {
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 2px;
      padding: 8px 10px;
    }

    .header_section.is-scrolled .navbar-toggler {
      border-color: rgba(20, 15, 5, 0.25);
    }

    .custom_nav-container .navbar-toggler .navbar-toggler-icon {
      background-image: none;
      width: 20px;
      height: 14px;
      position: relative;
    }

    .custom_nav-container .navbar-toggler .navbar-toggler-icon,
    .custom_nav-container .navbar-toggler .navbar-toggler-icon::before,
    .custom_nav-container .navbar-toggler .navbar-toggler-icon::after {
      border-top: 1.5px solid #fff;
    }

    .header_section.is-scrolled .navbar-toggler .navbar-toggler-icon,
    .header_section.is-scrolled .navbar-toggler .navbar-toggler-icon::before,
    .header_section.is-scrolled .navbar-toggler .navbar-toggler-icon::after {
      border-top-color: #262019;
    }

    .custom_nav-container .navbar-toggler .navbar-toggler-icon::before,
    .custom_nav-container .navbar-toggler .navbar-toggler-icon::after {
      content: "";
      position: absolute;
      left: 0;
      width: 100%;
    }

    .custom_nav-container .navbar-toggler .navbar-toggler-icon::before {
      top: 5px;
    }

    .custom_nav-container .navbar-toggler .navbar-toggler-icon::after {
      top: 11px;
    }

    @media (max-width: 991px) {
      .header_section .collapse.navbar-collapse {
        background: rgba(20, 15, 5, 0.97);
        margin-top: 16px;
        padding: 10px 16px;
        border-radius: 4px;
      }

      /* the Bootstrap utility class "align-items-center" on the nav's
         wrapper div is meant for the desktop row layout (vertically
         centering horizontally-arranged items) — but on mobile, where
         this wrapper switches to a column layout, that same class
         horizontally centers the whole nav-links block as one unit
         instead of letting it sit flush left at full width */
      .custom_nav-container .collapse.navbar-collapse > .d-flex {
        align-items: stretch !important;
      }

      .custom_nav-container .navbar-nav,
      .custom_nav-container .nav-item {
        width: 100%;
      }

      .custom_nav-container.navbar-expand-lg .navbar-nav .nav-item .nav-link {
        text-align: left !important;
        padding: 14px 10px !important;
      }

      /* the mobile dropdown always has a dark background, regardless of
         whether the header itself is in its light "scrolled" state — so
         nav-link text must stay light here too, or it becomes unreadable
         dark-on-dark the moment the header has scrolled */
      .header_section.is-scrolled .custom_nav-container.navbar-expand-lg .navbar-nav .nav-item .nav-link {
        color: #fff;
      }

      .nav-cta-btn {
        margin: 10px 10px 4px !important;
        justify-content: center;
      }
    }

    .hero_area {
      position: relative;
      height: auto;
    }

    .slider_section {
      height: auto;
      display: block;
    }

    .hero_slider {
      position: relative;
      width: 100%;
      height: 100vh;
      height: 100svh;
      min-height: 640px;
      max-height: 950px;
      overflow: hidden;
    }

    .hero_slider .carousel-inner,
    .hero_slider .carousel-item {
      height: 100%;
    }

    .hero_slider .carousel-item {
      position: relative;
      /* override Bootstrap's default .6s linear slide timing with something
         slower and more deliberate — duration/easing only, never touching
         the transform/position/display Bootstrap's JS relies on */
      transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1) !important;
    }

    .hero_slide-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      transform: scale(1);
      transition: transform 8s ease-out;
      z-index: 1;
    }

    /* subtle Ken Burns zoom + fade-in while a slide is active */
    .hero_slider .carousel-item.active .hero_slide-bg {
      animation: heroImgFadeIn 1.5s ease-out forwards, heroKenBurns 9s ease-out forwards;
    }

    @keyframes heroKenBurns {
      0% { transform: scale(1); }
      100% { transform: scale(1.13); }
    }

    @keyframes heroImgFadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .hero_slide-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      background:
        radial-gradient(ellipse at center, rgba(8, 6, 3, 0.55) 0%, rgba(8, 6, 3, 0.3) 45%, rgba(8, 6, 3, 0.15) 75%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 30%);
    }

    /* thin vignette frame — subtle, not gold, to match the minimal look */
    .hero_slider .hero_frame {
      position: absolute;
      inset: 22px;
      z-index: 4;
      border: 1px solid rgba(255, 255, 255, 0.22);
      pointer-events: none;
    }

    .hero_slider .container {
      position: relative;
      z-index: 3;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .hero_slider .detail-box {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .hero_slider .detail-box .hero-h1,
    .hero_slider .detail-box p,
    .hero_slider .detail-box .eyebrow {
      opacity: 0;
    }

    .hero_slider .detail-box .eyebrow {
      transform: translateY(14px);
    }

    .hero_slider .detail-box .hero-h1 {
      filter: blur(14px);
      transform: translateY(26px);
    }

    .hero_slider .detail-box p {
      filter: blur(6px);
      transform: translateY(20px);
    }

    .hero_slider .carousel-item.active .detail-box .eyebrow {
      animation: heroTextFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0s both;
    }

    .hero_slider .carousel-item.active .detail-box .hero-h1 {
      animation: heroHeadlineReveal 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
    }

    .hero_slider .carousel-item.active .detail-box p {
      animation: heroTextFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
    }

    @keyframes heroHeadlineReveal {
      0% {
        opacity: 0;
        filter: blur(14px);
        transform: translateY(26px);
      }
      60% {
        filter: blur(0);
      }
      100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
      }
    }

    @keyframes heroTextFadeUp {
      from { opacity: 0; filter: blur(6px); transform: translateY(20px); }
      to { opacity: 1; filter: blur(0); transform: translateY(0); }
    }

    .hero_slider .detail-box .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-family: var(--gc-sans);
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gc-gold-light);
      margin-bottom: 18px;
    }

    .hero_slider .detail-box .eyebrow::before,
    .hero_slider .detail-box .eyebrow::after {
      content: "";
      width: 26px;
      height: 1px;
      background: var(--gc-gold-light);
      opacity: 0.7;
    }

    .hero_slider .detail-box .hero-h1 {
      font-family: var(--gc-sans);
      font-weight: 800;
      font-size: clamp(2.4rem, 9vw, 7rem);
      line-height: 1;
      color: #fdfaf4;
      letter-spacing: -0.02em;
      text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
      white-space: nowrap;
      text-align: center;
      width: 100%;
      margin: 0;
    }

    .hero_slider .detail-box .hero-h1 span {
      display: none;
    }

    .hero_slider .detail-box p {
      color: rgba(255, 255, 255, 0.92);
      font-size: 1.15rem;
      font-weight: 400;
      max-width: 520px;
      line-height: 1.5;
      margin: 22px auto 0;
      text-align: center;
    }

    /* nav submenu — "Our Branches" */
    .gc-dropdown .dropdown-toggle::after {
      margin-left: 6px;
      vertical-align: 2px;
      transition: transform 0.25s ease;
    }

    .gc-dropdown:hover .dropdown-toggle::after,
    .gc-dropdown.show .dropdown-toggle::after {
      transform: rotate(180deg);
    }

    .gc-dropdown .dropdown-menu {
      display: block;
      margin-top: 0;
      background: rgba(20, 17, 13, 0.97);
      border: 1px solid rgba(201, 162, 75, 0.3);
      border-radius: 4px;
      padding: 10px 0;
      min-width: 260px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    }

    .gc-dropdown:hover .dropdown-menu,
    .gc-dropdown.show .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .gc-dropdown .dropdown-item {
      color: rgba(255, 255, 255, 0.85);
      font-size: 0.88rem;
      padding: 10px 22px;
      transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
      border-left: 2px solid transparent;
    }

    .gc-dropdown .dropdown-item:hover,
    .gc-dropdown .dropdown-item:focus {
      background: rgba(201, 162, 75, 0.12);
      color: var(--gc-gold-light);
      padding-left: 28px;
      border-left-color: var(--gc-gold);
    }

    @media (max-width: 991px) {
      .gc-dropdown .dropdown-menu {
        display: none;
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: rgba(255, 255, 255, 0.04);
        box-shadow: none;
        min-width: 100%;
      }

      .gc-dropdown.show .dropdown-menu,
      .gc-dropdown .dropdown-menu.show {
        display: block;
      }
    }

    /* control cluster — vertical, docked to the right edge (out of the way of the text) */
    .hero_controls {
      position: absolute !important;
      top: 50% !important;
      right: 28px !important;
      left: auto !important;
      bottom: auto !important;
      transform: translateY(-50%);
      z-index: 6;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      width: auto !important;
    }

    .hero_slider .carousel-indicators {
      position: static !important;
      z-index: 5;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 0 !important;
      width: auto !important;
      height: auto !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      top: auto !important;
      transform: none !important;
    }

    /* the theme's own style.css draws a decorative center-line via this
       pseudo-element, positioned for its original absolute/200%-height
       layout — it no longer applies to our static/flex layout, so drop it */
    .hero_slider .carousel-indicators::before {
      display: none !important;
    }

    .hero_slider .carousel-indicators li {
      position: relative !important;
      width: 40px !important;
      height: 40px !important;
      border-radius: 50% !important;
      border: 1px solid rgba(255, 255, 255, 0.5) !important;
      background: rgba(0, 0, 0, 0.25) !important;
      color: #fff;
      display: flex !important;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      opacity: 1;
      margin: 6px 0 !important;
      text-indent: 0;
      flex: none !important;
      overflow: visible;
      transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    }

    .hero_slider .carousel-indicators li .indicator-ring {
      position: absolute;
      inset: -3px;
      width: 46px;
      height: 46px;
      transform: rotate(-90deg);
      pointer-events: none;
      opacity: 0;
    }

    .hero_slider .carousel-indicators li .indicator-ring circle {
      fill: none;
      stroke: #d4af6a;
      stroke-width: 1.5;
      stroke-dasharray: 126;
      stroke-dashoffset: 126;
    }

    .hero_slider .carousel-indicators li.active .indicator-ring {
      opacity: 1;
    }

    .hero_slider .carousel-indicators li.active .indicator-ring circle {
      animation: indicatorProgress 5s linear forwards;
    }

    @keyframes indicatorProgress {
      from { stroke-dashoffset: 126; }
      to { stroke-dashoffset: 0; }
    }

    .hero_slider .carousel-indicators li:hover {
      transform: scale(1.08);
      border-color: #fff;
    }

    .hero_slider .carousel-indicators li.active {
      background: #d4af6a;
      color: #1a1a1a;
      border-color: #d4af6a;
    }

    .hero_slider .hero_controls .carousel-control-prev,
    .hero_slider .hero_controls .carousel-control-next {
      position: relative !important;
      top: auto !important;
      bottom: auto !important;
      left: auto !important;
      right: auto !important;
      width: 44px !important;
      height: 44px !important;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.5);
      display: flex !important;
      align-items: center;
      justify-content: center;
      opacity: 1;
      background: rgba(0, 0, 0, 0.25);
      transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    }

    .hero_slider .hero_controls .carousel-control-prev {
      margin: 0 0 18px 0 !important;
    }

    .hero_slider .hero_controls .carousel-control-next {
      margin: 18px 0 0 0 !important;
    }

    .hero_slider .hero_controls .carousel-indicators {
      margin: 0 !important;
    }

    .hero_slider .hero_controls .carousel-indicators li {
      margin: 6px 0 !important;
    }

    .hero_slider .hero_controls a:hover {
      background: rgba(212, 175, 106, 0.9);
      border-color: #d4af6a;
      transform: translateY(-2px);
    }

    .hero_slider .hero_controls a::before {
      font-family: "FontAwesome";
      color: #fff;
      font-size: 15px;
    }

    .hero_slider .carousel-control-prev::before {
      content: "\f106";
    }

    .hero_slider .carousel-control-next::before {
      content: "\f107";
    }

    @media (max-width: 991px) {
      .hero_slider {
        height: 100vh;
        height: 100svh;
        min-height: 560px;
      }

      .hero_slider .detail-box p {
        font-size: 1.05rem;
      }
    }

    @media (max-width: 575px) {
      .hero_slider {
        min-height: 520px;
      }

      .hero_slider .detail-box .hero-h1 {
        white-space: normal;
        font-size: clamp(2.6rem, 16vw, 3.6rem);
        line-height: 1.05;
        padding: 0 8px;
      }

      .hero_slider .hero_frame {
        inset: 12px;
      }

      .hero_slider .detail-box p {
        font-size: 0.95rem;
        padding: 0 12px;
      }

      .hero_slider .detail-box .eyebrow {
        font-size: 0.7rem;
        letter-spacing: 0.15em;
        margin-bottom: 12px;
      }

      .hero_slider .detail-box .eyebrow::before,
      .hero_slider .detail-box .eyebrow::after {
        width: 16px;
      }

      .hero_controls {
        right: 12px !important;
      }

      .hero_slider .hero_controls .carousel-control-prev {
        margin: 0 0 10px 0 !important;
      }

      .hero_slider .hero_controls .carousel-control-next {
        margin: 10px 0 0 0 !important;
      }

      .hero_slider .hero_controls .carousel-indicators li {
        margin: 4px 0 !important;
      }

      .hero_slider .carousel-indicators li {
        width: 30px !important;
        height: 30px !important;
        font-size: 10px;
      }

      .hero_slider .carousel-indicators li .indicator-ring {
        inset: -3px;
        width: 36px;
        height: 36px;
      }

      .hero_slider .hero_controls .carousel-control-prev,
      .hero_slider .hero_controls .carousel-control-next {
        width: 34px !important;
        height: 34px !important;
      }
    }

    /* Check-availability / enquiry widget — permanent fixed bar at the bottom of the screen */
    body {
      padding-bottom: 102px;
    }

    .availability_widget-wrap {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 166px;
      z-index: 300;
      margin: 0;
      padding: 0 16px;
      display: flex;
      justify-content: center;
      transition: bottom 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .availability_widget-wrap.is-scrolled {
      bottom: 16px;
    }

    @media (max-width: 991px) {
      .availability_widget-wrap {
        bottom: 5%;
      }

      .availability_widget-wrap.is-scrolled {
        bottom: 5%;
      }

      .availability_widget-wrap.is-nav-open {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
      }
    }

    .lasala_widget {
      width: 100%;
      max-width: 1100px;
      margin: 0;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 14px 40px rgba(20, 15, 5, 0.22);
      animation: widgetRiseIn 0.6s ease-out;
      overflow: hidden;
		border: solid 2px #ffffff;
    }

    @keyframes widgetRiseIn {
      from { opacity: 0; transform: translateY(40px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .lasala_bar {
      display: flex;
      align-items: stretch;
      max-width: 1100px;
      margin: 0 auto;
		
    }

    @media (max-width: 767px) {
      .lasala_bar.is-compact .lasala_field,
      .lasala_bar.is-compact .lasala_divider {
        display: none;
      }

      .lasala_bar.is-compact .lasala_bar-btn {
        flex: 1 1 auto;
      }
    }

    .lasala_field {
      flex: 1 1 0;
      min-width: 0;
      padding: 14px 22px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .lasala_label {
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #a89f8c;
      margin-bottom: 5px;
    }

    .lasala_field select,
    .lasala_field input {
      border: none;
      background: transparent;
      padding: 0;
      font-family: var(--gc-sans);
      font-size: 0.95rem;
      font-weight: 500;
      color: #262019;
      width: 100%;
    }

    .lasala_field select:focus,
    .lasala_field input:focus {
      outline: none;
    }

    .lasala_field-dates {
      flex: 1.7 1 0;
      position: relative;
    }

    .lasala_date-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      width: 100%;
      border: none;
      background: transparent;
      padding: 0;
      font-family: var(--gc-sans);
      font-size: 0.95rem;
      font-weight: 500;
      color: #262019;
      cursor: pointer;
      text-align: left;
    }

    .lasala_date-trigger .placeholder {
      color: #a89f8c;
    }

    .lasala_date-trigger i {
      color: #cbbf9e;
      font-size: 0.9rem;
      flex: none;
    }

    /* ---- custom date-range popover ---- */
    .gc-daterange-popover {
      display: none;
      position: fixed;
      z-index: 600;
      width: 320px;
      max-width: calc(100vw - 32px);
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 20px 50px rgba(20, 15, 5, 0.25);
      padding: 18px;
      animation: heroTextFadeUp 0.25s ease-out both;
    }

    .gc-daterange-popover.is-open {
      display: block;
    }

    .gc-daterange-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .gc-daterange-header button {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid #e6dfd0;
      background: #fff;
      color: #262019;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .gc-daterange-header button:hover {
      background: #262019;
      color: #fff;
    }

    .gc-daterange-header button:disabled {
      opacity: 0.3;
      cursor: default;
      pointer-events: none;
    }

    .gc-daterange-header span {
      font-size: 0.88rem;
      font-weight: 700;
      color: #262019;
    }

    .gc-daterange-weekdays,
    .gc-daterange-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
    }

    .gc-daterange-weekdays span {
      text-align: center;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: #a89f8c;
      padding-bottom: 6px;
      text-transform: uppercase;
    }

    .gc-daterange-grid button {
      aspect-ratio: 1 / 1;
      border: none;
      background: transparent;
      font-size: 0.82rem;
      color: #262019;
      cursor: pointer;
      border-radius: 50%;
      transition: background 0.15s ease, color 0.15s ease;
    }

    .gc-daterange-grid button:disabled {
      color: #d8d2c4;
      cursor: default;
    }

    .gc-daterange-grid button:empty {
      cursor: default;
      pointer-events: none;
    }

    .gc-daterange-grid button:not(:disabled):hover {
      background: #f4efe1;
    }

    .gc-daterange-grid button.is-start,
    .gc-daterange-grid button.is-end {
      background: var(--gc-gold);
      color: #fff;
      font-weight: 700;
    }

    .gc-daterange-grid button.is-in-range {
      background: #f6ecd4;
      border-radius: 0;
    }

    .gc-daterange-grid button.is-start {
      border-top-left-radius: 50%;
      border-bottom-left-radius: 50%;
    }

    .gc-daterange-grid button.is-end {
      border-top-right-radius: 50%;
      border-bottom-right-radius: 50%;
    }

    .gc-daterange-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid #f0ebdf;
    }

    .gc-daterange-footer span {
      font-size: 0.76rem;
      color: #8a8072;
    }

    .gc-daterange-done {
      border: none;
      background: #14110d;
      color: #fff;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 9px 20px;
      border-radius: 20px;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .gc-daterange-done:disabled {
      background: #d8d2c4;
      cursor: default;
    }

    .gc-daterange-done:not(:disabled):hover {
      background: var(--gc-gold);
    }

    .lasala_call-btn {
      flex: 0.5 1 0;
      min-width: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f4efe1;
      color: #262019;
      font-size: 1.2rem;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .lasala_call-btn:hover {
      background: var(--gc-gold);
      color: #fff;
    }

    .lasala_divider {
      width: 1px;
      background: #ece6d8;
      flex: none;
    }

    .lasala_bar-btn {
      flex: 0 0 auto;
      border: none;
      background: #262019;
      color: #fff;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0 42px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: background 0.25s ease;
    }

    .lasala_bar-btn:hover {
      background: var(--gc-gold);
    }

    .lasala_bar-btn .fa-spinner {
      display: none;
    }

    .lasala_bar-btn.is-loading .fa-spinner {
      display: inline-block;
    }

    .lasala_bar-btn.is-loading .btn-label {
      display: none;
    }

    /* ---- gentle attention-getter on the primary "Check Availability" CTA:
       a soft breathing glow + a periodic light sweep. Both loop forever but
       stay slow/subtle since this sits on-screen permanently. ---- */
    #revealContactBtn {
      position: relative;
      overflow: hidden;
      animation: gcBtnBreathe 2.8s ease-in-out infinite;
    }

    #revealContactBtn::after {
      content: "";
      position: absolute;
      top: 0;
      left: -60%;
      width: 40%;
      height: 100%;
      background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.4), transparent);
      transform: skewX(-20deg);
      animation: gcBtnShimmer 3.6s ease-in-out infinite;
      pointer-events: none;
    }

    #revealContactBtn.is-loading,
    #revealContactBtn.is-loading::after {
      animation: none;
      box-shadow: none;
    }

    @keyframes gcBtnBreathe {
      0%, 100% {
        box-shadow: 0 0 0 0 rgba(201, 162, 75, 0.45);
      }
      50% {
        box-shadow: 0 0 0 9px rgba(201, 162, 75, 0);
      }
    }

    @keyframes gcBtnShimmer {
      0% {
        left: -60%;
      }
      35%, 100% {
        left: 130%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #revealContactBtn,
      #revealContactBtn::after {
        animation: none;
      }
    }

    .lasala_contact-panel {
      position: relative;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      border-top: 0px solid #ece6d8;
      transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, border-color 0.4s ease;
    }

    .lasala_contact-panel.is-open {
      max-height: 200px;
      opacity: 1;
      border-top-width: 1px;
    }

    .lasala_contact-close {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 24px;
      height: 24px;
      border: 1.5px solid #ece6d8;
      background: #fff;
      color: #262019;
      border-radius: 50%;
      font-size: 0.9rem;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3;
      box-shadow: 0 4px 10px rgba(20, 15, 5, 0.25);
      transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
    }

    .lasala_contact-close:hover {
      background: var(--gc-gold);
      color: #fff;
      border-color: var(--gc-gold);
      transform: scale(1.1);
    }

    .enquiry-feedback {
      display: none;
      margin: 0;
      padding: 16px 26px;
      font-size: 0.88rem;
      line-height: 1.5;
      border-top: 1px solid #ece6d8;
      max-width: 1100px;
      margin: 0 auto;
    }

    .enquiry-feedback.is-visible {
      display: block;
      animation: heroTextFadeUp 0.5s ease-out both;
    }

    .enquiry-feedback strong {
      display: block;
      font-size: 0.95rem;
      margin-bottom: 4px;
    }

    .enquiry-feedback a {
      color: inherit;
      font-weight: 700;
      text-decoration: underline;
    }

    .enquiry-feedback.feedback-success {
      background: #f2f8f0;
      color: #2f5a24;
    }

    .enquiry-feedback.feedback-error {
      background: #fdf3f0;
      color: #7a2e1c;
    }

    @media (max-width: 991px) {
      body {
        padding-bottom: 232px;
      }

      .lasala_bar {
        flex-wrap: wrap;
      }

      .lasala_field {
        flex: 1 1 40%;
      }

      .lasala_field-dates {
        flex: 1 1 100%;
      }

      .lasala_divider {
        display: none;
      }

      .lasala_bar-btn {
        flex: 1 1 78%;
        padding: 14px;
      }

      .lasala_call-btn {
        flex: 1 1 15%;
        min-width: 56px;
      }

      .lasala_contact-panel.is-open {
        max-height: 400px;
      }
    }

    @media (max-width: 575px) {
      body {
        padding-bottom: 190px;
      }

      .lasala_field {
        flex: 1 1 100%;
        padding: 9px 16px;
      }

      .lasala_label {
        font-size: 0.6rem;
        margin-bottom: 2px;
      }

      .lasala_field select,
      .lasala_field input,
      .lasala_date-trigger {
        font-size: 0.85rem;
      }

      .lasala_bar-btn {
        padding: 11px;
        font-size: 0.72rem;
      }

      .lasala_call-btn {
        min-width: 48px;
      }
    }


    /* reusable section labels */
    .section-eyebrow {
      display: inline-block;
      font-family: var(--gc-sans);
      font-style: normal;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 0.78rem;
      color: var(--gc-gold);
      margin-bottom: 4px;
    }

    .heading_container.text-center {
      display: block;
      text-align: center;
      max-width: 640px;
      margin: 0 auto 46px;
    }

    .heading_container.text-center h2 {
      display: block;
      letter-spacing: -1px;
    }

    .section-sub {
      color: #777;
      font-size: 1rem;
      margin-top: 10px;
    }

    /* scroll-reveal utility (used by testimonials + offers) */
    .gc-reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .gc-reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ---------------- Best Offer on Our Rooms ---------------- */
    .offers_section {
      padding: 85px 0;
      background: #fbf9f5;
    }

    .offer_tab-nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      list-style: none;
      padding: 0;
      margin: 0 0 42px;
    }

    .offer_tab-link {
      cursor: pointer;
      padding: 12px 26px;
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #6b5f4d;
      background: #fff;
      border: 1px solid #e6dfd0;
      border-radius: 30px;
      transition: all 0.3s ease;
    }

    .offer_tab-link:hover {
      border-color: var(--gc-gold);
      color: #8a6d3b;
    }

    .offer_tab-link.active {
      background: linear-gradient(135deg, var(--gc-gold), #a3822f);
      border-color: var(--gc-gold);
      color: #fff;
      box-shadow: 0 10px 24px rgba(201, 162, 75, 0.3);
    }

    .offer_panel {
      display: none;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      animation: heroTextFadeUp 0.6s ease-out both;
    }

    .offer_panel.active {
      display: grid;
    }

    .offer_panel-media {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 25px 50px rgba(20, 15, 5, 0.18);
    }

    .offer_panel-media img {
      width: 100%;
      display: block;
      transition: transform 0.6s ease;
    }

    .offer_panel-media:hover img {
      transform: scale(1.05);
    }

    .offer-badge {
      position: absolute;
      top: 18px;
      left: 18px;
      z-index: 2;
      background: linear-gradient(135deg, var(--gc-gold), #a3822f);
      color: #fff;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 7px 16px;
      border-radius: 20px;
      box-shadow: 0 8px 18px rgba(201, 162, 75, 0.35);
    }

    .offer_panel-content h3 {
      font-family: var(--gc-serif);
      font-size: 2rem;
      font-weight: 700;
      color: #262019;
      margin: 4px 0 16px;
    }

    .offer_panel-content p {
      color: #6b6459;
      line-height: 1.7;
      margin-bottom: 22px;
    }

    .offer_amenities {
      list-style: none;
      padding: 0;
      margin: 0 0 30px;
      display: flex;
      flex-wrap: wrap;
      gap: 14px 26px;
    }

    .offer_amenities li {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 0.88rem;
      color: #4b4436;
      font-weight: 600;
    }

    .offer_amenities li i {
      color: var(--gc-gold);
      font-size: 0.95rem;
    }

    .offer_cta {
      display: flex;
      align-items: center;
      gap: 26px;
      flex-wrap: wrap;
    }

    .offer_cta .btn-gold {
      position: static;
    }

    .offer-link {
      font-size: 0.85rem;
      font-weight: 600;
      color: #8a6d3b;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: gap 0.2s ease, color 0.2s ease;
    }

    .offer-link:hover {
      color: var(--gc-gold);
      gap: 12px;
    }

    @media (max-width: 767px) {
      .offer_panel.active {
        grid-template-columns: 1fr;
        gap: 26px;
      }
    }

    /* ---------------- Testimonials — modern card grid ---------------- */
    .testimonials_section {
      padding: 85px 0 95px;
      background: #faf8f3;
      overflow: hidden;
    }

    .testimonials_section .section-eyebrow {
      color: var(--gc-gold);
    }

    .testimonials_section h2 {
      color: #262019;
    }

    .testimonials_carousel {
      position: relative;
      margin-top: 20px;
    }

    .testimonial_grid {
      display: flex;
      gap: 28px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -ms-overflow-style: none;
      scrollbar-width: none;
      padding: 4px 4px 12px;
    }

    .testimonial_grid::-webkit-scrollbar {
      display: none;
    }

    .testimonial_card {
      flex: 0 0 calc(33.333% - 19px);
      scroll-snap-align: start;
      background: #fff;
      border: 1px solid #ece6d8;
      border-radius: 8px;
      padding: 32px 28px;
      transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    }

    .testimonial_card:hover {
      transform: translateY(-8px);
      border-color: var(--gc-gold);
      box-shadow: 0 25px 50px rgba(20, 15, 5, 0.08);
    }

    .testimonials_nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 5;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 1px solid #e2dac2;
      background: #fff;
      box-shadow: 0 8px 22px rgba(20, 15, 5, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #262019;
      font-size: 1rem;
      transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
    }

    #testimonialsPrev {
      left: -24px;
    }

    #testimonialsNext {
      right: -24px;
    }

    .testimonials_nav-btn:hover {
      background: #262019;
      border-color: #262019;
      color: #fff;
      transform: translateY(-50%) scale(1.08);
    }

    .testimonials_nav-btn:disabled {
      opacity: 0.3;
      cursor: default;
      pointer-events: none;
    }

    .testimonial_quote-icon {
      color: var(--gc-gold);
      font-size: 1.4rem;
      opacity: 0.9;
      margin-bottom: 14px;
    }

    .testimonial_stars {
      color: var(--gc-gold);
      font-size: 0.8rem;
      letter-spacing: 3px;
      margin-bottom: 16px;
    }

    .testimonial_text {
      color: #5c5646;
      font-size: 0.94rem;
      line-height: 1.7;
      min-height: 120px;
    }

    .testimonial_person {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 22px;
      padding-top: 20px;
      border-top: 1px solid #f0ebdf;
    }

    .testimonial_person img,
    .testimonial_person .avatar-fallback {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      object-fit: cover;
      border: 1.5px solid var(--gc-gold);
    }

    .testimonial_person .avatar-fallback {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f4efe1;
      color: var(--gc-gold);
      font-size: 1.1rem;
      flex: none;
    }

    .testimonial_person h4 {
      color: #262019;
      font-size: 0.94rem;
      margin: 0;
      font-weight: 600;
    }

    .testimonial_person span {
      color: #9a9182;
      font-size: 0.8rem;
    }

    @media (max-width: 991px) {
      .testimonial_card {
        flex: 0 0 calc(50% - 14px);
      }

      #testimonialsPrev {
        left: 4px;
      }

      #testimonialsNext {
        right: 4px;
      }
    }

    @media (max-width: 575px) {
      .testimonial_card {
        flex: 0 0 88%;
      }
    }

    .lasala_widget.gc-highlight {
      animation: gcBarHighlight 1.1s ease-out;
    }

    @keyframes gcBarHighlight {
      0% { box-shadow: 0 14px 40px rgba(20, 15, 5, 0.22); }
      30% { box-shadow: 0 14px 55px rgba(201, 162, 75, 0.6); }
      100% { box-shadow: 0 14px 40px rgba(20, 15, 5, 0.22); }
    }

    /* ---------------- Floating sticky CTA ---------------- */
    .gc-float-cta {
      position: fixed;
      right: 22px;
      bottom: 175px;
      z-index: 250;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 12px;
    }

    .gc-float-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #fff !important;
      text-decoration: none;
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .gc-float-btn:hover {
      transform: translateY(-3px) scale(1.03);
    }

    .gc-float-chat {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      justify-content: center;
      background: #25d366;
      font-size: 1.3rem;
    }

    @media (max-width: 991px) {
      .gc-float-cta {
        bottom: 210px;
      }
    }

    @media (max-width: 575px) {
      .gc-float-cta {
        right: 14px;
        bottom: 160px;
      }
    }

    .gc-float-cta.is-hidden {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }

    /* ---------------- Exit-intent offer ---------------- */
    .gc-exit-modal {
      position: fixed;
      inset: 0;
      z-index: 999;
      display: none;
      align-items: center;
      justify-content: center;
    }

    .gc-exit-modal.is-open {
      display: flex;
    }

    .gc-exit-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(10, 8, 4, 0.72);
      animation: heroImgFadeIn 0.3s ease-out both;
    }

    .gc-exit-modal-box {
      position: relative;
      z-index: 1;
      background: #fdfaf4;
      max-width: 440px;
      width: 90%;
      padding: 44px 38px;
      border-radius: 12px;
      text-align: center;
      box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
      animation: heroTextFadeUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
      border-top: 4px solid var(--gc-gold);
    }

    .gc-exit-modal-box h3 {
      font-family: var(--gc-serif);
      font-size: 1.6rem;
      color: #262019;
      margin: 6px 0 14px;
    }

    .gc-exit-modal-box p {
      color: #6b6459;
      font-size: 0.94rem;
      line-height: 1.6;
      margin-bottom: 24px;
    }

    .gc-exit-close {
      position: absolute;
      top: 14px;
      right: 16px;
      background: none;
      border: none;
      font-size: 1.6rem;
      line-height: 1;
      color: #a89f8c;
      cursor: pointer;
    }

    .gc-exit-close:hover {
      color: #262019;
    }

    .gc-exit-contact {
      margin-top: 18px;
      font-size: 0.85rem;
      color: #8a8072;
    }

    .gc-exit-contact a {
      color: #8a6d3b;
      font-weight: 700;
    }

    @media (max-width: 480px) {
      .gc-exit-modal-box {
        padding: 34px 24px;
      }

      .gc-exit-modal-box h3 {
        font-size: 1.35rem;
      }
    }

    /* ---------------- Our Branches — large-image carousel (nilsamsee style) ---------------- */
    .branches_section {
      position: relative;
      padding: 100px 0 80px;
      background: #faf8f3;
      overflow-x: hidden;
    }

    .branches_heading {
      text-align: center;
      max-width: 620px;
      margin: 0 auto 56px;
    }

    .branches_heading .section-eyebrow {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
    }

    .branches_heading .section-eyebrow::before,
    .branches_heading .section-eyebrow::after {
      content: "";
      width: 30px;
      height: 1px;
      background: var(--gc-gold);
      opacity: 0.6;
    }

    .branches_heading h2 {
      margin: 10px 0 12px;
      font-weight: 800;
      font-size: 2.8rem;
      letter-spacing: -0.02em;
    }

    .branches_carousel {
      position: relative;
      width: 100vw;
      left: 50%;
      padding: 40px 0;
      border-top: 1px solid #e6dfd0;
      border-bottom: 1px solid #e6dfd0;
    }

    /* .gc-reveal sets a bare `transform`, which would otherwise wipe out the
       translateX(-50%) full-bleed centering above — compose both explicitly */
    .branches_carousel.gc-reveal {
      transform: translateX(-50%) translateY(30px);
    }

    .branches_carousel.gc-reveal.is-visible {
      transform: translateX(-50%) translateY(0);
    }

    .branches_progress-track {
      max-width: 420px;
      margin: 28px auto 0;
      height: 1px;
      background: #e6dfd0;
      overflow: visible;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
    }

    .branches_progress-track .branches_counter {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: #a89f8c;
      white-space: nowrap;
      background: #faf8f3;
      padding: 0 6px;
      position: relative;
      z-index: 1;
    }

    .branches_progress-track .branches_counter .current {
      color: #262019;
    }

    .branches_progress-fill-wrap {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
    }

    .branches_progress-fill {
      height: 1px;
      width: 25%;
      background: var(--gc-gold);
      transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .branches_nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 5;
      width: 54px;
      height: 54px;
      border-radius: 50%;
      border: 1.5px solid rgba(38, 32, 25, 0.35);
      background: rgba(255, 255, 255, 0.35);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      box-shadow: 0 6px 18px rgba(20, 15, 5, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #262019;
      font-size: 1.1rem;
      transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    }

    #branchesPrev {
      left: 2%;
    }

    #branchesNext {
      right: 2%;
    }

    .branches_nav-btn:hover {
      background: #262019;
      border-color: #262019;
      color: #fff;
      transform: translateY(-50%) scale(1.1);
    }

    .branches_nav-btn:active {
      transform: translateY(-50%) scale(0.96);
    }

    .branches_nav-btn:disabled {
      opacity: 0.3;
      cursor: default;
      pointer-events: none;
    }

    .branches_track {
      display: flex;
      align-items: center;
      gap: 24px;
      overflow-x: auto;
      scroll-snap-type: x proximity;
      scroll-behavior: smooth;
      -ms-overflow-style: none;
      scrollbar-width: none;
      padding: 20px 16% 20px;
    }

    .branches_track::-webkit-scrollbar {
      display: none;
    }

    .branch_card {
      flex: 0 0 66%;
      scroll-snap-align: center;
      display: block;
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      opacity: 0.55;
      z-index: 1;
      transform: scale(0.86);
      transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease, box-shadow 0.8s ease;
    }

    .branch_card.is-active {
      transform: scale(1.12);
      opacity: 1;
      z-index: 2;
      box-shadow: 0 40px 80px rgba(20, 15, 5, 0.28);
    }

    .branch_card::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 3;
      border: 1px solid rgba(201, 162, 75, 0);
      transition: border-color 0.6s ease;
      pointer-events: none;
    }

    .branch_card.is-active::after {
      border-color: rgba(201, 162, 75, 0.55);
    }

    .branch_card-media {
      display: block;
      position: relative;
      width: 100%;
      padding-top: 50%;
      /* padding-top percentage (not the `aspect-ratio` property) sets the
         box height — works in every browser, no dependency on aspect-ratio
         support actually resolving in whatever is rendering this */
      overflow: hidden;
    }

    .branch_card-media img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      transform: scale(1);
      transition: transform 0.7s ease, filter 0.6s ease;
      filter: saturate(0.94) brightness(0.97);
    }

    .branch_card.is-active .branch_card-media img {
      filter: saturate(1.04) brightness(1);
    }

    .branch_card:hover .branch_card-media img {
      transform: scale(1.06);
    }

    /* slow continuous zoom while a card is the centered/active one — signature touch */
    .branch_card.is-active .branch_card-media img {
      animation: branchKenBurns 7s ease-in-out infinite alternate;
    }

    @keyframes branchKenBurns {
      from { transform: scale(1); }
      to { transform: scale(1.08); }
    }

    .branch_card-index {
      position: absolute;
      top: 24px;
      left: 28px;
      z-index: 2;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: rgba(255, 255, 255, 0.75);
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .branch_card.is-active .branch_card-index {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.05s;
    }

    .branch_card-index .num-current {
      color: var(--gc-gold-light);
      font-size: 0.95rem;
    }

    .branch_card-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, rgba(8, 6, 3, 0.82) 0%, rgba(8, 6, 3, 0.5) 55%, rgba(8, 6, 3, 0.05) 85%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 28px 28px 22px;
    }

    /* title, subtitle, and CTA are always visible and pinned together at
       the bottom of every card — active state only affects size/emphasis
       (via .branch_card.is-active elsewhere), not whether this text shows */
    .branch_card-overlay h3,
    .branch_card-overlay p,
    .branch_card-cta {
      opacity: 1;
      transform: none;
    }

    .branch_card-overlay h3 {
      color: #fdfaf4;
      font-size: 2.2rem;
      font-weight: 800;
      letter-spacing: -0.01em;
      line-height: 1.1;
      margin: 0 0 4px;
    }

    .branch_card-overlay h3 a {
      color: inherit;
    }

    .branch_card-overlay .branch_card-divider {
      width: 34px;
      height: 1px;
      background: var(--gc-gold);
      margin: 12px 0 14px;
    }

    .branch_card-overlay p {
      color: rgba(255, 255, 255, 0.82);
      font-size: 0.92rem;
      max-width: 300px;
      margin: 0;
      line-height: 1.55;
    }

    .branch_card-bottom-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
    }

    .branch_card-cta {
      display: flex;
      align-items: center;
      flex: none;
      gap: 12px;
    }

    .branch_card-enquire,
    .branch_card-book {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      font-size: 0.82rem;
      font-weight: 600;
      padding: 13px 28px;
      border-radius: 30px;
      transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
    }

    .branch_card-enquire {
      background: #14110d;
      color: #fff;
    }

    .branch_card-enquire:hover {
      background: var(--gc-gold);
      color: #fff;
      transform: translateY(-2px);
    }

    .branch_card-book {
      background: rgba(255, 255, 255, 0.92);
      color: #14110d;
    }

    .branch_card-book:hover {
      background: #fff;
      transform: translateY(-2px);
    }

    /* cursor-follow "Explore" hint — subtle premium browse cue on desktop */
    .branches_cursor-hint {
      position: fixed;
      top: 0;
      left: 0;
      width: 84px;
      height: 84px;
      border-radius: 50%;
      background: rgba(20, 15, 5, 0.88);
      color: #fdfaf4;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      pointer-events: none;
      z-index: 400;
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.7);
      transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .branches_cursor-hint.is-visible {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    @media (hover: none) {
      .branches_cursor-hint {
        display: none;
      }
    }

    @media (max-width: 767px) {
      .branch_card {
        flex: 0 0 84%;
        transform: scale(0.92);
      }

      .branch_card.is-active {
        transform: scale(1.05);
      }

      .branches_track {
        gap: 14px;
        padding: 16px 8% 16px;
      }

      .branches_nav-btn {
        width: 42px;
        height: 42px;
      }

      .branch_card-bottom-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
      }

      .branch_card-overlay p {
        max-width: none;
      }

      .branch_card-cta {
        align-self: flex-end;
      }
    }

/* ---------------- shared inner-page banner (About, Contact, branch pages) ---------------- */
.page_banner {
  position: relative;
  height: 52vh;
  min-height: 380px;
  max-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: #fdfaf4;
}

.page_banner .hero_slide-bg,
.page_banner .hero_slide-overlay {
  position: absolute;
  inset: 0;
}

.page_banner .hero_slide-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  animation: heroImgFadeIn 1s ease-out both;
}

.page_banner .hero_slide-overlay {
  z-index: 2;
  background:
    radial-gradient(ellipse at center, rgba(8, 6, 3, 0.62) 0%, rgba(8, 6, 3, 0.4) 45%, rgba(8, 6, 3, 0.2) 75%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 30%);
}

.page_banner .page_banner-content {
  position: relative;
  z-index: 3;
  padding: 0 24px;
}

.page_banner .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--gc-sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gc-gold-light);
  margin-bottom: 16px;
  animation: heroTextFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page_banner .eyebrow::before,
.page_banner .eyebrow::after {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gc-gold-light);
  opacity: 0.7;
}

.page_banner h1 {
  font-family: var(--gc-sans);
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
  animation: heroHeadlineReveal 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.page_banner p.page_banner-sub {
  max-width: 560px;
  margin: 18px auto 0;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  animation: heroTextFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

.page_banner .breadcrumb-trail {
  position: relative;
  z-index: 3;
  margin-top: 22px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
  animation: heroTextFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}

.page_banner .breadcrumb-trail a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page_banner .breadcrumb-trail a:hover {
  color: #fff;
}

@media (max-width: 575px) {
  .page_banner {
    height: 42vh;
    min-height: 320px;
  }
}

/* ---------------- generic inner-page content sections ---------------- */
.page_section {
  padding: 90px 0;
}

.page_section.bg-cream {
  background: #faf8f3;
}

.page_section .page_section-eyebrow {
  display: block;
  text-align: center;
  margin-bottom: 8px;
}

.page_section h2.page_section-title {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 18px;
}

.page_section p.page_section-lead {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 50px;
  color: #6b6459;
  font-size: 1.05rem;
  line-height: 1.6;
}

.value_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.value_card {
  text-align: center;
  padding: 36px 26px;
  background: #fff;
  border: 1px solid #ece6d8;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.value_card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px rgba(20, 15, 5, 0.08);
  border-color: var(--gc-gold);
}

.value_card i {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gc-gold), #a3822f);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin: 0 auto 20px;
}

.value_card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.value_card p {
  color: #6b6459;
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

.about_story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.about_story-grid img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 30px 60px rgba(20, 15, 5, 0.15);
}

.about_story-grid .section-eyebrow {
  display: block;
}

.about_story-grid h2 {
  margin: 6px 0 20px;
}

.about_story-grid p {
  color: #6b6459;
  line-height: 1.7;
  margin-bottom: 16px;
}

.contact_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 60px;
}

.contact_card {
  text-align: center;
  padding: 34px 26px;
  background: #fff;
  border: 1px solid #ece6d8;
  border-radius: 10px;
}

.contact_card i {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gc-gold), #a3822f);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin: 0 auto 18px;
}

.contact_card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.contact_card p,
.contact_card a {
  color: #6b6459;
  font-size: 0.92rem;
  line-height: 1.6;
}

.contact_map {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(20, 15, 5, 0.1);
  border: 1px solid #ece6d8;
}

.contact_map iframe {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
}

/* branch page specific */
.branch_hero-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 60px;
}

.branch_hero-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.branch_hero-gallery .branch_hero-main {
  aspect-ratio: 16 / 10;
}

.branch_amenities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.branch_amenity {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid #ece6d8;
  border-radius: 10px;
}

.branch_amenity i {
  color: var(--gc-gold);
  font-size: 1.15rem;
  flex: none;
}

.branch_amenity span {
  font-size: 0.92rem;
  font-weight: 600;
  color: #262019;
}

.branch_cta-band {
  text-align: center;
  padding: 70px 24px;
  background: var(--gc-charcoal);
  color: #fdfaf4;
}

.branch_cta-band h2 {
  color: #fdfaf4;
  margin-bottom: 14px;
}

.branch_cta-band p {
  color: rgba(255, 255, 255, 0.75);
  max-width: 480px;
  margin: 0 auto 30px;
}

.other_branches-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.other_branches-strip a {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
}

.other_branches-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.other_branches-strip a:hover img {
  transform: scale(1.06);
}

.other_branches-strip span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
  background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
}

@media (max-width: 991px) {
  .about_story-grid,
  .contact_grid,
  .value_grid,
  .branch_amenities-grid,
  .other_branches-strip {
    grid-template-columns: 1fr 1fr;
  }

  .about_story-grid {
    grid-template-columns: 1fr;
  }

  .branch_hero-gallery {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .value_grid,
  .contact_grid,
  .branch_amenities-grid,
  .other_branches-strip {
    grid-template-columns: 1fr;
  }

  .page_section {
    padding: 60px 0;
  }
}

/* ---------------- Quick enquiry / "get in touch" form — modern split panel ---------------- */
.quick_enquiry {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 35px 70px rgba(20, 15, 5, 0.12);
}

.quick_enquiry-side {
  position: relative;
  background: var(--gc-charcoal);
  background-image: radial-gradient(circle at 15% 15%, rgba(201, 162, 75, 0.18), transparent 55%);
  padding: 46px 40px;
  color: #fdfaf4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.quick_enquiry-side::before {
  content: "\f10d";
  font-family: FontAwesome;
  position: absolute;
  top: -10px;
  right: 10px;
  font-size: 6rem;
  color: rgba(201, 162, 75, 0.1);
  line-height: 1;
}

.quick_enquiry-side .section-eyebrow {
  color: var(--gc-gold-light);
}

.quick_enquiry-side h3 {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 10px 0 14px;
}

.quick_enquiry-side p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 30px;
  max-width: 320px;
}

.quick_enquiry-side-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.quick_enquiry-side-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.92);
}

.quick_enquiry-side-list li a {
  color: inherit;
}

.quick_enquiry-side-list i {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: rgba(201, 162, 75, 0.16);
  border: 1px solid rgba(201, 162, 75, 0.4);
  color: var(--gc-gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.quick_enquiry-form-wrap {
  background: #fff;
  padding: 46px 44px;
}

.quick_enquiry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 26px;
}

.quick_enquiry-field {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 22px;
}

.quick_enquiry-field.full {
  grid-column: 1 / -1;
}

.quick_enquiry-field label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a89f8c;
  margin-bottom: 9px;
  transition: color 0.2s ease;
}

.quick_enquiry-field .field-icon {
  position: absolute;
  left: 0;
  bottom: 11px;
  color: #cbbf9e;
  font-size: 0.9rem;
  pointer-events: none;
  transition: color 0.2s ease;
}

.quick_enquiry-field input,
.quick_enquiry-field textarea {
  border: none;
  border-bottom: 1.5px solid #e2ddd3;
  border-radius: 0;
  padding: 6px 4px 10px 24px;
  font-family: var(--gc-sans);
  font-size: 0.98rem;
  color: #262019;
  background: transparent;
  transition: border-color 0.25s ease;
  width: 100%;
}

.quick_enquiry-field textarea {
  resize: vertical;
  min-height: 70px;
  padding-left: 24px;
}

.quick_enquiry-field::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--gc-gold), #a3822f);
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.quick_enquiry-field:focus-within::after {
  width: 100%;
}

.quick_enquiry-field:focus-within label {
  color: var(--gc-gold);
}

.quick_enquiry-field:focus-within .field-icon {
  color: var(--gc-gold);
}

.quick_enquiry-field input:focus,
.quick_enquiry-field textarea:focus {
  outline: none;
  border-color: transparent;
}

.quick_enquiry-submit {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.quick_enquiry-submit button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: linear-gradient(135deg, var(--gc-gold), #a3822f);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 15px 36px;
  border-radius: 30px;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  box-shadow: 0 10px 24px rgba(201, 162, 75, 0.3);
}

.quick_enquiry-submit button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(201, 162, 75, 0.42);
}

.quick_enquiry-submit button:active {
  transform: translateY(0);
}

.quick_enquiry-submit button:disabled {
  opacity: 0.65;
  cursor: default;
  transform: none;
}

.quick_enquiry-submit .fa-spinner {
  display: none;
}

.quick_enquiry-submit button.is-loading .fa-spinner {
  display: inline-block;
}

.quick_enquiry-submit button.is-loading .btn-label {
  display: none;
}

.quick_enquiry-feedback {
  display: none;
  margin: 0;
  padding: 16px 20px;
  font-size: 0.88rem;
  line-height: 1.55;
}

.quick_enquiry-feedback.is-visible {
  display: block;
  animation: heroTextFadeUp 0.4s ease-out both;
  margin: -46px 44px 20px;
  border-radius: 8px;
  position: relative;
  z-index: 2;
}

.quick_enquiry-feedback.feedback-success {
  background: #f2f8f0;
  color: #2f5a24;
}

.quick_enquiry-feedback.feedback-error {
  background: #fdf3f0;
  color: #7a2e1c;
}

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

  .quick_enquiry-side {
    padding: 36px 32px;
  }

  .quick_enquiry-form-wrap {
    padding: 36px 26px;
  }

  .quick_enquiry-grid {
    grid-template-columns: 1fr;
  }

  .quick_enquiry-feedback.is-visible {
    margin: -20px 26px 20px;
  }
}

/* ---------------- location map + "guide me there" directions ---------------- */
.location_section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.location_section .contact_map {
  margin: 0;
}

.location_section .contact_map iframe {
  height: 380px;
}

.location_info h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.location_info p {
  color: #6b6459;
  line-height: 1.7;
  margin-bottom: 24px;
}

.directions_btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #14110d;
  color: #fff !important;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: 30px;
  transition: background 0.25s ease, transform 0.25s ease;
}

.directions_btn:hover {
  background: var(--gc-gold);
  color: #fff;
  transform: translateY(-2px);
}

.directions_btn i {
  font-size: 0.95rem;
}

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

/* ---------------- Rooms & Suites / Service page components ---------------- */
.room_type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.room_type-card {
  background: #fff;
  border: 1px solid #ece6d8;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.room_type-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px rgba(20, 15, 5, 0.1);
}

.room_type-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.room_type-card-body {
  padding: 24px;
}

.room_type-card-body h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.room_type-card-body p {
  color: #6b6459;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 14px;
}

.room_type-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.room_type-tags span {
  font-size: 0.72rem;
  font-weight: 600;
  color: #8a6d3b;
  background: #f6ecd4;
  padding: 5px 12px;
  border-radius: 20px;
}

.service_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.service_card {
  text-align: center;
  padding: 32px 22px;
  background: #fff;
  border: 1px solid #ece6d8;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.service_card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px rgba(20, 15, 5, 0.08);
  border-color: var(--gc-gold);
}

.service_card i {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gc-gold), #a3822f);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin: 0 auto 18px;
}

.service_card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.service_card p {
  color: #6b6459;
  font-size: 0.86rem;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 991px) {
  .room_type-grid,
  .service_grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 575px) {
  .room_type-grid,
  .service_grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------- Branch page: horizontal-row photo gallery + lightbox
   (referenced from nilsamsee.at's room-detail layout) ---------------- */
.branch_gallery-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 8px;
}

.branch_gallery-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #14110d;
  aspect-ratio: 4 / 3;
}

.branch_gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
}

.branch_gallery-item:hover img {
  transform: scale(1.06);
  filter: brightness(0.85);
}

.branch_gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 40%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.branch_gallery-item:hover::after {
  opacity: 1;
}

.branch_gallery-expand {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #14110d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.branch_gallery-item:hover .branch_gallery-expand {
  opacity: 1;
  transform: translateY(0);
}

/* the last visible tile, when there are more photos than tiles shown,
   gets a "+N More" overlay — matches the reference site's pattern */
.branch_gallery-item.is-more::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 3, 0.6);
  z-index: 1;
}

.branch_gallery-item.is-more .more-count {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  color: #fff;
  text-align: center;
}

.branch_gallery-item.is-more .more-count strong {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
}

.branch_gallery-item.is-more .more-count span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

.branch_gallery-item.is-more:hover .more-count {
  transform: scale(1.05);
}

@media (max-width: 767px) {
  .branch_gallery-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .branch_gallery-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .branch_gallery-item.is-more .more-count strong {
    font-size: 1.4rem;
  }
}

/* lightbox */
.gc-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(6, 5, 3, 0.96);
  align-items: center;
  justify-content: center;
}

.gc-lightbox.is-open {
  display: flex;
  animation: heroImgFadeIn 0.25s ease-out both;
}

.gc-lightbox-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 90px 100px;
}

.gc-lightbox-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  animation: heroTextFadeUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gc-lightbox-close,
.gc-lightbox-prev,
.gc-lightbox-next {
  position: absolute;
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background 0.2s ease, transform 0.2s ease;
}

.gc-lightbox-close:hover,
.gc-lightbox-prev:hover,
.gc-lightbox-next:hover {
  background: rgba(255, 255, 255, 0.18);
}

.gc-lightbox-close {
  top: 24px;
  right: 24px;
}

.gc-lightbox-prev {
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.gc-lightbox-next {
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.gc-lightbox-prev:hover,
.gc-lightbox-next:hover {
  transform: translateY(-50%) scale(1.08);
}

.gc-lightbox-counter {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.gc-lightbox-caption {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.95rem;
  text-align: center;
  max-width: 600px;
}

@media (max-width: 767px) {
  .gc-lightbox-stage {
    padding: 70px 20px;
  }

  .gc-lightbox-prev,
  .gc-lightbox-next {
    width: 42px;
    height: 42px;
  }

  .gc-lightbox-prev {
    left: 10px;
  }

  .gc-lightbox-next {
    right: 10px;
  }

  .gc-lightbox-close {
    top: 14px;
    right: 14px;
  }
}

/* ---------------- "Why This Branch?" section ---------------- */
.why_branch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.why_branch-card {
  position: relative;
  padding: 34px 26px;
  background: #fff;
  border: 1px solid #ece6d8;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.why_branch-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gc-gold), #a3822f);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.why_branch-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(20, 15, 5, 0.1);
  border-color: transparent;
}

.why_branch-card:hover::before {
  transform: scaleX(1);
}

.why_branch-card .why_branch-num {
  font-family: var(--gc-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gc-gold);
  margin-bottom: 16px;
  display: block;
}

.why_branch-card i {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #f6ecd4;
  color: var(--gc-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 18px;
  transition: background 0.3s ease, color 0.3s ease;
}

.why_branch-card:hover i {
  background: linear-gradient(135deg, var(--gc-gold), #a3822f);
  color: #fff;
}

.why_branch-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.why_branch-card p {
  color: #6b6459;
  font-size: 0.88rem;
  line-height: 1.65;
  margin: 0;
}

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

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

/* ---------------- Branches listing page ---------------- */
.branches_list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
}

.branches_list-card {
  background: #fff;
  border: 1px solid #ece6d8;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

.branches_list-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 40px 70px rgba(20, 15, 5, 0.14);
}

.branches_list-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.branches_list-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.branches_list-card:hover .branches_list-media img {
  transform: scale(1.08);
}

.branches_list-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(20, 15, 5, 0.75);
  color: #fdfaf4;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 20px;
}

.branches_list-body {
  padding: 30px 32px 32px;
}

.branches_list-body h3 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.branches_list-body h3 a {
  color: #262019;
}

.branches_list-body h3 a:hover {
  color: var(--gc-gold);
}

.branches_list-body p {
  color: #6b6459;
  line-height: 1.6;
  margin-bottom: 18px;
}

.branches_list-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.branches_list-tags span {
  font-size: 0.72rem;
  font-weight: 600;
  color: #8a6d3b;
  background: #f6ecd4;
  padding: 6px 13px;
  border-radius: 20px;
}

.branches_list-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #262019;
  transition: gap 0.2s ease, color 0.2s ease;
}

.branches_list-cta:hover {
  gap: 12px;
  color: var(--gc-gold);
}

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

/* ---------------- FAQ section ---------------- */
.faq_section {
  padding: 90px 0 100px;
  background: #faf8f3;
}

.faq_list {
  max-width: 780px;
  margin: 0 auto;
}

.faq_item {
  background: #fff;
  border: 1px solid #ece6d8;
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq_item[open] {
  border-color: var(--gc-gold);
  box-shadow: 0 20px 40px rgba(20, 15, 5, 0.08);
}

.faq_item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 54px 20px 24px;
  font-family: var(--gc-sans);
  font-weight: 700;
  font-size: 1rem;
  color: #262019;
  position: relative;
  transition: color 0.2s ease;
}

.faq_item summary::-webkit-details-marker {
  display: none;
}

.faq_item summary::after {
  content: "\f107";
  font-family: FontAwesome;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gc-gold);
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

.faq_item[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
}

.faq_item[open] summary {
  color: var(--gc-gold);
}

.faq_item summary:hover {
  color: var(--gc-gold);
}

.faq_item p {
  margin: 0;
  padding: 0 24px 22px;
  color: #6b6459;
  line-height: 1.65;
  font-size: 0.94rem;
  animation: heroTextFadeUp 0.3s ease-out both;
}

@media (max-width: 575px) {
  .faq_section {
    padding: 60px 0 70px;
  }

  .faq_item summary {
    padding: 16px 46px 16px 18px;
    font-size: 0.92rem;
  }

  .faq_item summary::after {
    right: 18px;
  }

  .faq_item p {
    padding: 0 18px 18px;
  }
}

/* ---------------- WhatsApp CTA inside success feedback messages ---------------- */
.feedback-whatsapp {
  margin-top: 12px;
}

.feedback-whatsapp a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #25d366;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 10px 20px;
  border-radius: 30px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.feedback-whatsapp a:hover {
  background: #1ebe57;
  color: #fff;
  transform: translateY(-1px);
}

.feedback-whatsapp a i {
  font-size: 1rem;
}