/* Extracted inline <style> blocks from index.php (page fixes/overrides). Loaded last so they win over the framework CSS. */

.projects-faq-section {
      margin: 0 auto;
      background: #fff;
      padding: 40px;
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    }

    .projects-faq-section .section-title {
      text-align: center;
      margin-bottom: 30px;
      font-size: 24px;
      font-weight: bold;
      color: #333;
      border-bottom: 2px solid #e0e0e0;
      padding-bottom: 10px;
      display: inline-block;
    }

    /* --- 2. Accordion Styling --- */
    .projects-faq-section details {
      margin-bottom: 10px;
      border: 1px solid #eee;
      border-radius: 5px;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .projects-faq-section summary {
      padding: 15px;
      cursor: pointer;
      font-weight: 600;
      background-color: #fff;
      list-style: none;
      /* Hide default triangle */
      position: relative;
      color: #2c3e50;
    }

    /* Custom Plus/Minus Icons */

    /* Hide default marker in Webkit */
    .projects-faq-section summary::-webkit-details-marker {
      display: none;
    }

    /* Content inside details */
    .projects-faq-section details p,
    .projects-faq-section details div {
      padding: 20px;
      line-height: 1.6;
      color: #555;
      border-top: 1px solid #eee;
    }

    /* --- 3. Load More Button Styling --- */
    .projects-faq-section .btn-container {
      text-align: center;
      margin-top: 30px;
    }

    .projects-faq-section #loadMoreBtn {
      background-color: #baa06c;
      color: white;
      border: none;
      padding: 12px 30px;
      font-size: 16px;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .projects-faq-section #loadMoreBtn:hover {
      background-color: #ba8a4b;
    }

    /* Logic: Class to hide elements */
    .projects-faq-section .faq-hidden {
      display: none;
    }

    .projects-faq-section summary::marker,
    summary::-webkit-details-marker {
      display: none;
    }

    .projects-faq-section details>summary:after {
      content: '';
      width: var(--chevron-size);
      height: var(--chevron-size);
      border: solid currentColor;
      border-width: 0 0 var(--border-width) var(--border-width);
      transform: rotate(-45deg) translateY(-30%);
      transition: transform 0.3s;
      flex-shrink: 0;
    }

    .projects-faq-section details[open] summary:after {
      transform: rotate(45deg);
    }

    .projects-faq-section summary {
      list-style: none;
      display: flex;
      gap: 1rem;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      padding: var(--padding);
      font-weight: bold;
      background-color: #aa8a4b;
      color: #fff;
      border-radius: var(--radius);
      margin: calc(var(--padding) * -1);

    }

    .projects-faq-section details {
      --border-width: 0.1rem;
      --padding: 0.75rem;
      --chevron-size: 0.8rem;
      --radius: 0.5rem;
      font-family: system-ui;
      font-size: 1rem;
      margin-bottom: 1rem;
      border-radius: 0.5rem;
      box-shadow: 0 0 0.5rem 0 gray;
      padding: var(--padding);
      text-align: left;
    }

    .projects-faq-section details[open] summary {
      margin-bottom: var(--padding);
      border-radius: var(--radius) var(--radius) 0 0;
    }

/* Offset anchor jumps so the fixed 62px header doesn't cut section headings */
    [id^="section-"] {
      scroll-margin-top: 80px;
    }

    /* Mobile: keep the Enquire Now / Brochure buttons fixed (like desktop) as a bottom bar,
   instead of the non-fixed in-banner buttons the theme showed on phones */
    @media screen and (max-width: 575px) {
      .banner_btns {
        display: block !important;
      }

      .banner-btns {
        display: none !important;
      }

      /* remove the bottom Home/Projects/About/Contact sticky nav + the floating bottom menu toggle */
      body .responsive-bottom-sticky-menu {
        display: none !important;
      }

      body .responsive-menu-toggle {
        display: none !important;
      }

      .banner_btns .sticky-btn-enquire,
      .banner_btns .sticky-btn-enquire:not(.sticky-brochure),
      .banner_btns .sticky-btn-enquire.sticky-brochure {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        transform: none !important;
        z-index: 1000 !important;
        width: 50% !important;
        padding: 12px 0 !important;
        text-align: center;
      }

      .banner_btns .sticky-btn-enquire:not(.sticky-brochure) {
        left: 0 !important;
        right: auto !important;
      }

      .banner_btns .sticky-btn-enquire.sticky-brochure {
        right: 0 !important;
        left: auto !important;
        border-left: 1px solid #fff;
      }
    }

    /* Mobile header: remove the Enquire Now button, show a hamburger menu that opens the navbar */
    @media screen and (max-width: 991px) {

      .col-header .responsive-enquire-btn,
      .column .responsive-enquire-btn {
        display: none !important;
      }

      .col-header .responsive-theme-menu {
        position: relative;
        min-height: 44px;
      }

      .theme-menu-wrapper {
        position: static;
      }

      #menu-trigger.main-screen-toggle {
        display: inline-block !important;
        position: absolute !important;
        top: 50% !important;
        right: 12px !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        width: 34px;
        height: 34px;
      }

      /* hide the loading overlay that shares the header wrapper on mobile */
      .responsive-theme-menu .page-loader {
        display: none !important;
      }

      /* navbar opens as a full-width dropdown below the fixed header */
      .theme-menu-wrapper.menu-open .theme-menu {
        display: block !important;
        position: fixed !important;
        top: 52px !important;
        left: 0 !important;
        right: 0 !important;
        background: #fff !important;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
        padding: 8px 20px !important;
        z-index: 998;
        max-height: calc(100vh - 52px);
        /* only scroll vertically — a stray few px of width was showing a horizontal
           scrollbar (the "slider") along the bottom of the menu */
        overflow-x: hidden;
        overflow-y: auto;
        width: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
      }

      .theme-menu-wrapper.menu-open .theme-menu .menu-item {
        display: block !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid #eee;
        text-align: left;
      }

      .theme-menu-wrapper.menu-open .theme-menu .menu-item .menu-link {
        font-size: 16px;
        display: block;
        text-align: left;
      }
    }

/* Budget dropdown: cap the open list height so extra options scroll instead of overflowing */
    .select2-container--default .select2-results > .select2-results__options {
      max-height: 170px;
      overflow-y: auto;
    }

    /* intl-tel-input: let it own the full width of the mobile field */
    .mobile-with-country .iti,
    .mobile-with-country-code .iti {
      width: 100%;
    }
    /* the plugin sets its own left padding for the flag/dial code — don't fight it */
    .mobile-with-country .iti input.form-control {
      padding-left: 0;
    }
    /* keep the flag dropdown above the sticky bottom bar and modals */
    .iti__dropdown-content {
      z-index: 10000;
    }
    /* sticky bottom bar uses borderless underline inputs — match the plugin to it */
    .sticky-bottom-form .iti {
      width: 100%;
    }
    .sticky-bottom-form .iti__selected-country {
      background: transparent;
    }

#section-projects-connectivity .neighbourhood-cols {
            display: block !important;
            column-count: 2 !important;
            column-gap: 0px !important;
            margin: 0 -12px !important;
          }

          #section-projects-connectivity .neighbourhood-col {
            display: inline-block !important;
            width: 100% !important;
            float: none !important;
            flex: none !important;
            padding: 0 12px 24px 12px !important;
            break-inside: avoid !important;
          }

          #section-projects-connectivity .neighbourhood-block {
            background: linear-gradient(135deg, #ffffff 0%, #fcfbfa 100%) !important;
            border: 1px solid rgba(170, 138, 75, 0.15) !important;
            border-radius: 12px !important;
            padding: 30px !important;
            box-shadow: 0 8px 24px rgba(170, 138, 75, 0.04) !important;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
            position: relative !important;
            overflow: hidden !important;
            text-align: left !important;
            height: auto !important;
          }

          #section-projects-connectivity .neighbourhood-block:hover {
            transform: translateY(-5px) !important;
            box-shadow: 0 16px 36px rgba(170, 138, 75, 0.12) !important;
            border-color: rgba(170, 138, 75, 0.35) !important;
          }

          #section-projects-connectivity .neighbourhood-block::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #aa8a4b 0%, #d4b96c 100%) !important;
            opacity: 0.8;
          }

          #section-projects-connectivity .neighbourhood-block h5 {
            color: #aa8a4b !important;
            font-family: 'Jost', sans-serif !important;
            font-size: 20px !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            letter-spacing: 1px !important;
            margin-bottom: 25px !important;
            padding-bottom: 12px !important;
            border-bottom: 1px solid rgba(170, 138, 75, 0.1) !important;
            position: relative !important;
          }

          #section-projects-connectivity .neighbourhood-block h5::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -1px;
            width: 50px;
            height: 2px;
            background-color: #aa8a4b !important;
          }

          #section-projects-connectivity .neighbourhood-inner {
            margin-bottom: 22px !important;
            padding: 12px 15px !important;
            background: rgba(170, 138, 75, 0.02) !important;
            border-radius: 8px !important;
            border: 1px solid rgba(170, 138, 75, 0.05) !important;
            transition: all 0.3s ease !important;
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            width: calc(50% - 10px) !important;
            flex: 0 0 auto !important;
          }

          #section-projects-connectivity .neighbourhood-inner:hover {
            background: rgba(170, 138, 75, 0.06) !important;
            border-color: rgba(170, 138, 75, 0.15) !important;
            transform: translateX(3px) !important;
          }

          #section-projects-connectivity .neighbourhood-inner p {
            font-family: 'Jost', sans-serif !important;
            font-size: 15px !important;
            font-weight: 600 !important;
            color: #333 !important;
            margin: 0 !important;
            line-height: 1.3 !important;
          }

          #section-projects-connectivity .neighbourhood-inner span {
            font-family: 'Jost', sans-serif !important;
            font-size: 13px !important;
            font-weight: 700 !important;
            color: #aa8a4b !important;
            background-color: rgba(170, 138, 75, 0.08) !important;
            padding: 4px 10px !important;
            border-radius: 50px !important;
            white-space: nowrap !important;
          }

          @media screen and (max-width: 768px) {
            #section-projects-connectivity .neighbourhood-cols {
              column-count: 1 !important;
            }

            #section-projects-connectivity .neighbourhood-inner {
              width: 100% !important;
            }
          }

@media (max-width:1024px) {
      .theme-menu-wrapper .theme-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
        padding: 10px 16px;
        z-index: 999;
      }

      .theme-menu-wrapper.menu-open .theme-menu {
        display: block;
      }

      .theme-menu-wrapper.menu-open .theme-menu .menu-item {
        display: block;
        padding: 8px 0;
      }
    }

/* Theme default is #1d57a3 (generic boilerplate) on a dark bar. Site palette:
       cream #f1e8d5 (Configuration section) with the gold #aa8a4b accent. */
    .sticky-bottom-form,
    .sticky-bottom-form .sticky-bottom-form-inner {
      background: #f1e8d5;
    }

    /* The bar is position:fixed, so it sits on top of the footer. Theme reserves room
       via "#home #footer{padding:20px 0 80px}", but this page's body has no id="home",
       so that never applies — reserve the space here instead. Heights differ because
       >1024px is one row, and <=1024px stacks into the taller slide-up panel. */
    @media screen and (min-width: 1025px) {
      #footer {
        padding-bottom: 90px;
      }
    }

    /* measured: bar is 48px wide-screen (62px showing errors), and 200px once it
       stacks at <=1024px (240px showing errors) — allow for the taller error state */
    @media screen and (min-width: 576px) and (max-width: 1024px) {
      #footer {
        padding-bottom: 250px;
      }
    }

    .sticky-bottom-form {
      border: 0;
      border-top: 3px solid #aa8a4b;
    }

    .sticky-bottom-form form {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    /* Theme ships 20% columns (5 up): Name, Mobile, Email, Budget, Submit. */
    .sticky-bottom-form .col-form {
      width: 20%;
      float: none;
      margin: 0 0 6px !important;
    }

    .sticky-bottom-form .col-form .sm-form-control {
      width: 100%;
      background: transparent;
      border: 0;
      border-bottom: 1px solid #c9b992;
      outline: 0;
      border-radius: 0;
      font-size: 15px;
      /* theme forces #fff here for the dark bar — unreadable on cream */
      color: #444;
      padding: 6px 10px 6px 0;
      line-height: 19px;
    }

    /* global rule is ::placeholder{color:#d2d2d2!important}, so !important is required */
    .sticky-bottom-form .col-form .sm-form-control::placeholder {
      color: #8a8a8a !important;
    }

    .sticky-bottom-form .col-form .sm-form-control::-webkit-input-placeholder {
      color: #8a8a8a !important;
    }

    .sticky-bottom-form .col-form .sm-form-control:-ms-input-placeholder {
      color: #8a8a8a !important;
    }

    .sticky-bottom-form .col-form .sm-form-control:focus {
      border-bottom-color: #aa8a4b;
    }

    /* Mobile + country code — same structure as the enquire-now form, but the code
       select stays native (see the markup comment). Theme already styles bare
       `select` with its own arrow, so it still matches the rest of the site. */
    .sticky-bottom-form .form-group.mobile-with-country-code {
      margin: 0;
    }

    /* Width is set from the selected label by sizeCountryCode() in the script below —
       a fixed width wide enough for "+44-1624" left a big gap on short codes like
       "+213". flex-basis auto so it just uses that width. */
    .sticky-bottom-form .country-code {
      flex: 0 0 auto;
      width: 52px;
    }

    .sticky-bottom-form .sticky-country-select {
      width: 100%;
      background-color: transparent;
      background-position: right 4px center;
      border: 0;
      border-bottom: 1px solid #c9b992;
      border-radius: 0;
      outline: 0;
      color: #444;
      font-size: 15px;
      font-family: Jost;
      line-height: 19px;
      padding: 6px 22px 6px 0;
      cursor: pointer;
      text-overflow: ellipsis;
    }

    .sticky-bottom-form .sticky-country-select:focus {
      border-bottom-color: #aa8a4b;
    }

    /* Closed state. Theme greys the rendered label to #d2d2d2 until .form-group gets
       .focused; this one always shows a real value, so keep it readable. */
    .sticky-bottom-form .country-code .select2-container--default .select2-selection--single {
      height: auto;
      border: 0;
      border-bottom: 1px solid #c9b992;
      background: transparent;
    }

    .sticky-bottom-form .country-code .select2-selection__rendered {
      color: #444 !important;
      font-size: 15px;
      line-height: 32px !important;
      padding-left: 0;
      /* matches the arrow allowance sizeCountryCode() adds to the measured label */
      padding-right: 22px;
    }

    /* theme parks the arrow 15px in from the right, which ate into the label */
    .sticky-bottom-form .country-code .select2-selection__arrow {
      height: 32px;
      right: 0;
    }

    .sticky-bottom-form .country-code .select2-container--open .select2-selection--single {
      border-bottom-color: #aa8a4b;
    }

    /* select2 works out above/below from document offsets, which are meaningless
       inside this position:fixed bar — it always decided "below" and dropped the
       list ~240px off the bottom of the screen. The bar is pinned to the viewport
       bottom, so the list must always open upward: pin it rather than trust that
       maths. :has() picks the dropdown container (the selection container is a
       sibling with the same classes). */
    .sticky-bottom-form .country-code .select2-container:has(.select2-dropdown) {
      top: auto !important;
      bottom: 100% !important;
      left: 0 !important;
      width: 210px !important;
    }

    /* The container above is a zero-height anchor sitting on top of the field (its
       dropdown child is absolutely positioned, so it contributes no height). Anchor
       the list to that box's bottom so it grows upward instead of back down over
       the bar. Overrides the theme's top:8px on the --above variant too. */
    .sticky-bottom-form .country-code .select2-dropdown {
      width: 100% !important;
      top: auto !important;
      bottom: 0 !important;
      border: 1px solid #e0d8c4;
      box-shadow: 0 -4px 18px rgb(0 0 0 / 12%);
    }

    /* Budget dropdown in the bar: same select2 dropdown as the Enquire Now / modal
       budgets, styled onto the underline field and forced to open UPWARD (the bar is
       pinned to the viewport bottom, so a normal downward list would fall off-screen). */
    .sticky-bottom-form .col-form {
      position: relative;
    }
    .sticky-bottom-form .select2-container {
      width: 100% !important;
    }
    .sticky-bottom-form .select2-container--default .select2-selection--single {
      height: 33px;
      background: transparent;
      border: 0;
      border-bottom: 1px solid #c9b992;
      border-radius: 0;
    }
    .sticky-bottom-form .select2-container--default .select2-selection--single .select2-selection__rendered {
      color: #444;
      font-size: 15px;
      line-height: 33px;
      padding-left: 0;
      padding-right: 22px;
    }
    .sticky-bottom-form .select2-container--default .select2-selection--single .select2-selection__placeholder {
      color: #8a8a8a;
    }
    .sticky-bottom-form .select2-container--default .select2-selection--single .select2-selection__arrow {
      height: 31px;
      right: 2px;
    }
    .sticky-bottom-form .select2-container--open .select2-selection--single {
      border-bottom-color: #aa8a4b;
    }
    /* the open dropdown lives inside .col-form (dropdownParent); pin it above the field */
    .sticky-bottom-form .col-form .select2-container:has(.select2-dropdown) {
      top: auto !important;
      bottom: 100% !important;
      left: 0 !important;
      width: 100% !important;
    }
    .sticky-bottom-form .col-form .select2-dropdown {
      width: 100% !important;
      top: auto !important;
      bottom: 4px !important;
      border: 1px solid #e0d8c4;
      box-shadow: 0 -6px 20px rgb(0 0 0 / 14%);
    }

    /* intl-tel-input on the bar's mobile field: run the underline across the whole
       control (flag + input) instead of just under the input, and match the flag /
       dial code to the other underline fields (same size, weight, baseline). */
    .sticky-bottom-form .mobile-with-country .iti {
      display: flex;
      align-items: stretch;
      border-bottom: 1px solid #c9b992;
    }
    .sticky-bottom-form .mobile-with-country .iti:focus-within {
      border-bottom-color: #aa8a4b;
    }
    .sticky-bottom-form .mobile-with-country .iti input.sm-form-control {
      border-bottom: 0;
      padding-left: 6px;
    }
    .sticky-bottom-form .iti__selected-country {
      background: transparent;
      padding-left: 0;
    }
    .sticky-bottom-form .iti__selected-dial-code {
      font-size: 15px;
      font-weight: 400;
      color: #444;
    }
    .sticky-bottom-form .iti__flag {
      margin-right: 2px;
    }
    /* The bar is pinned to the viewport bottom, so the country list must open
       UPWARD — iti's own drop-up detection misfires inside a position:fixed bar. */
    .sticky-bottom-form .iti__dropdown-content {
      top: auto !important;
      bottom: 100% !important;
      margin-bottom: 6px;
      box-shadow: 0 -6px 20px rgb(0 0 0 / 14%);
    }

    /* theme-btn is a gold outline button — low contrast on cream, so fill it */
    .sticky-bottom-form .col-form.col-form-btn .theme-btn {
      width: 100%;
      margin: 0;
      padding: 8px 15px;
      background: #aa8a4b;
      border: 1px solid #aa8a4b;
      display: block;
      text-align: center;
    }

    .sticky-bottom-form .col-form.col-form-btn .theme-btn span {
      color: #fff;
    }

    /* Theme slides a gold ::before fill up on hover and turns the label white. This
       button is already gold, so that would be gold-on-gold — darken the fill instead
       and keep the label white. */
    .sticky-bottom-form .col-form.col-form-btn .theme-btn:hover::before {
      background-color: #8f7239;
    }

    .sticky-bottom-form .col-form.col-form-btn .theme-btn:hover span {
      color: #fff;
    }

    .sticky-bottom-form .sm-form-control.input-error {
      border-bottom-color: #d33;
    }

    /* keep the row aligned when only one column grows an error message */
    .sticky-bottom-form form {
      align-items: flex-start;
    }

    .sticky-bottom-form .col-form {
      padding-top: 4px;
    }

    /* Per-field validation messages (modal forms; the sticky bar uses one shared line) */
    .field-error {
      display: block;
      color: #d33;
      font-size: 12px;
      line-height: 16px;
      margin-top: 4px;
    }

    .form-control.input-error {
      border-bottom-color: #d33 !important;
    }

    @media screen and (max-width: 1024px) {
      /* Theme parks the panel at bottom:-165px and slides it up with .open (driven by
         the close/toggle button). No toggle now, so keep it docked and always visible. */
      .sticky-bottom-form .sticky-bottom-form-inner {
        bottom: 0;
        padding: 6px 15px 0;
        border-top: 3px solid #aa8a4b;
      }

      /* outer becomes position:inherit here, so the gold rule moves to the inner panel */
      .sticky-bottom-form {
        border-top: 0;
      }

      .sticky-bottom-form .col-form {
        width: 50%;
      }

      .sticky-bottom-form .col-form.col-form-btn {
        width: 100%;
      }
    }

    /* Budget dropdowns (Enquire Now, modal form, sticky bar) are two fixed options,
       so select2's search field is never useful — minimumResultsForSearch already
       drops it; this is the safety net if select2 re-inits with its defaults. */
    .select2-container .select2-search--hide {
      display: none !important;
    }