/*-------------- Fonts -----------------*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Squada+One&display=swap');
@import url("https://db.onlinewebfonts.com/c/96c724a45a1e05ada0f2b6cd1d186d09?family=Gilmer+Medium");
/*-------------- Fonts -----------------*/

/*-------------- Start Global Rules -----------------*/
:root {
  --mainColor: #e60012;
  --secondColor: #DAAA77;
  --white: #fff;
  --black: #121212;
  --textColor: #595959;
  --textColor2: #474747;
  --lightBg: #f9f8f8;
  --smallSize: 12px;
  --mdSize: 14px;
  --mdSize2: 16px;
  --mdSize3: 18px;
  --lgSize: 20px;
  --lightFont: 100;
  --light2Font: 300;
  --mdFont: 600;
  --lgFont: 800;
  --paddingY: 60px;
  --paddingX: 100px;
  --Squada: "Squada One", sans-serif;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

*,
::before,
::after {
  transition: 0.3s;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Montserrat", sans-serif;
  font-size: var(--mdSize);
  overflow-x: hidden;
  background-color: #000;
  color: #fff;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}

ul,
ol {
  padding: 0;
  margin: 0;
}

a {
  color: #fff;
}

a,
a:hover {
  text-decoration: none;
}

a:hover {
  color: #DAAA77;
}

@media (min-width: 1200px) {
  .container {
    max-width: 94% !important;
    width: 94%;
  }
}

/*-------------- End Global Rules -----------------*/

/*-------------- Header Style -----------------*/
header .myRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

header .myRow::after,
header .myRow::before {
  display: none;
}

.siteHeader {
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 9;
  width: 100%;
}

/* Position header_right to far right using absolute positioning */
.siteHeader .header_right,
.header_right {
  position: absolute !important;
  right: 3% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  z-index: 10 !important;
}

.header_right a {
  border-radius: 50px;
  border: 1px solid #FFF;
  padding: 10px 27px;
  color: #FFF;
  font-family: "Squada One", sans-serif;
  font-size: 15.63px;
  font-weight: 400;
  line-height: 22.867px;
}

.header_right a:hover {
  background-color: #fff;
  color: #000;
}

/*===========================================
  SWIPER NAVIGATION BUTTONS - SHARED BASE
  Used by: slider, resturantMenu, ourmenupage, aboutuspage
  Consolidated from 4 duplicate declarations
============================================*/

/* Hide default Swiper arrows across all sections */
.slider .swiper-button-next::after,
.slider .swiper-button-prev::after,
.resturantMenu .swiper-button-next::after,
.resturantMenu .swiper-button-prev::after,
.ourmenupage .swiper-button-next::after,
.ourmenupage .swiper-button-prev::after,
.aboutuspage .swiper-button-next::after,
.aboutuspage .swiper-button-prev::after {
  display: none;
}

/* Shared swiper button base styles */
.slider .swiper-button-next,
.slider .swiper-button-prev,
.resturantMenu .swiper-button-next,
.resturantMenu .swiper-button-prev,
.ourmenupage .swiper-button-next,
.ourmenupage .swiper-button-prev {
  width: 38px;
  height: 38px;
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("../images/VectorLeft.svg") center no-repeat;
  background-size: 12px;
  transition: filter 0.3s, background-color 0.3s;
}

/* Right arrow uses different icon */
.slider .swiper-button-next,
.resturantMenu .swiper-button-next,
.ourmenupage .swiper-button-next {
  background-image: url("../images/VectorRight.svg");
}

/* Shared hover effect */
.slider .swiper-button-next:hover,
.slider .swiper-button-prev:hover,
.resturantMenu .swiper-button-next:hover,
.resturantMenu .swiper-button-prev:hover,
.ourmenupage .swiper-button-next:hover,
.ourmenupage .swiper-button-prev:hover {
  filter: invert(100%);
  background-color: black;
}


div#block-backyard-slidertitle {
  position: absolute;
  top: 50%;
  right: 20%;
  z-index: 2;
  width: max-content;
}

div#block-backyard-slidertitle p {
  color: #FFF;
  font-size: 15.63px;
  font-style: normal;
  font-weight: 500;
  line-height: 152.9%;
  /* 23.898px */
}

div#block-backyard-slidertitle p strong {
  color: #FFF;
  font-family: var(--Squada);
  font-size: 31.63px;
  font-weight: 400;
}

#block-backyard-slidertitle>div>p>strong:nth-child(3) {
  display: block;
  margin-bottom: -5px;
  margin-top: 5px;
}

div#block-backyard-slidertitle a {
  display: flex;
  width: 219px;
  height: 50px;
  padding: 18px 0 18px 25px;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #000;
  margin-top: 35px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  font-size: 13.63px;
  font-weight: 600;
  letter-spacing: 1.09px;
  font-family: "Gilmer Medium";
}

div#block-backyard-slidertitle a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -94%;
  width: 100%;
  height: 100%;
  background: var(--secondColor);
  z-index: -1;
  transition: 0.3s ease;
}

div#block-backyard-slidertitle a::after {
  content: "";
  width: 30px;
  height: 1px;
  background-color: #fff;
  order: -1;
  transform: translateY(-50%);
  opacity: 0;
  margin-left: -30px;
}

div#block-backyard-slidertitle a:hover {
  padding-left: 30px;
  color: #fff;
}

div#block-backyard-slidertitle a:hover::after {
  opacity: 1;
  margin-left: 0;
}

div#block-backyard-slidertitle a:hover::before {
  left: 0;
}

.slider .swiper-button-next {
  right: 14%;
  top: 67%;
}

.slider .swiper-button-prev {
  right: 16.5%;
  top: 67%;
  left: auto;
}

@media(max-width: 1550px) {
  .slider .swiper-button-next {
    right: 14%;
    top: 71%;
  }

  .slider .swiper-button-prev {
    right: 17.5%;
    top: 71%;
    left: auto;
  }
}

footer .container {
  max-width: 1197px !important;
}

footer .row.no-padding.no-margin.topRow {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

footer .row.no-padding.no-margin.topRow::after,
footer .row.no-padding.no-margin.topRow::before {
  display: none;
}

footer nav#block-backyard-sociallinks ul:not(.contextual-links) {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 20px;
}

footer nav#block-backyard-sociallinks ul a {
  font-size: 32px;
}

.footerbottomRow .footer_menus {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 50%;
  gap: 10px;
}

.footerbottomRow .footer_menus h2 {
  color: #FFF;
  font-family: var(--Squada);
  font-size: 20.63px;
  font-style: normal;
  font-weight: 400;
  line-height: 181.9%;
  /* 37.526px */
  margin-bottom: 22px;
}

.footerbottomRow .footer_menus ul a {
  color: #E5E5E5;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 19px;
  /* 135.714% */
  display: block;
  width: 100%;
  margin-bottom: 15px;
}

.footerbottomRow .footer_menus ul a:hover {
  color: var(--secondColor);
}

div#block-backyard-subscribetoournewsletter {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  justify-content: flex-end;
  max-width: 69%;
  margin-left: auto;
}

div#block-backyard-subscribetoournewsletter h2 {
  color: #FFF;
  font-family: var(--Squada);
  font-size: 20.63px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
  margin-bottom: 22px;
}

.footerbottomRow .footer_menus ul:not(.contextual-links) {
  display: flex;
  flex-direction: column;
}

.col-md-12.site_logo {
  padding: 0 !important;
}

.row.no-padding.no-margin.topRow {
  padding-bottom: 60px;
  border-bottom: 1px solid #313131;
  margin-bottom: 60px;
}

.row.copyRight .col-md-12 {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
}

nav#block-backyard-bottommenu ul:not(.contextual-links) {
  display: flex;
  gap: 30px;
}

div#block-backyard-subscribetoournewsletter p {
  color: #FFF;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

section.locations .makeReservation {
  max-width: 1138px;
  margin: 0px auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

section.locations {
  padding: 70px;
  background: #0B0B0B;
  margin-top: -10px;
  position: relative;
  z-index: 2;
}

section.locations .makeReservation .views-field-title {
  display: none;
}

section.locations .makeReservation .views-field-field-sub-title {
  color: #FFF;
  font-family: var(--Squada);
  font-size: 31.63px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

section.locations .makeReservation .views-field-field-location-phone-number {
  color: #BFBFBF;
  font-size: 14.63px;
  font-style: normal;
  font-weight: 400;
  line-height: 152.9%;
  /* 22.369px */
  max-width: 270px;
  margin-top: 10px;
}

section.resturantMenu {
  display: inline-block;
  width: 100%;
  background: url("../images/menuBg.svg") no-repeat center;
  background-size: cover;
}

div#block-backyard-menuvideo {
  width: 38.7%;
  float: right;
}

div#block-backyard-menuvideo video {
  width: 100%;
}

div#block-backyard-views-block-menu-slider-block-1 {
  float: left;
  width: 55%;
  padding: 58px 70px;
  padding-bottom: 0;
  padding-right: 0;
}

/* resturantMenu swiper buttons - position overrides only (base in shared section) */
.resturantMenu .swiper-button-next,
.resturantMenu .swiper-button-prev {
  top: 70px;
  right: 40px;
}

.resturantMenu .swiper-button-prev {
  right: 90px;
  left: auto;
}

.makeReservation .views-field.views-field-field-reservations-link a {
  display: flex;
  width: max-content;
  padding-top: 20px;
  padding-right: 30px;
  position: relative;
  border-bottom: 1px solid transparent;

}

.makeReservation .views-field.views-field-field-reservations-link a::after {
  content: "";
  width: 25px;
  height: 25px;
  background: url("../images/moreLink.svg") no-repeat right;
  background-size: auto;
}

.makeReservation .views-field.views-field-field-reservations-link a:hover {
  /* margin-top: -10px; */
  text-decoration: underline;
  border-color: #fff;
  color: #fff;
}

.makeReservation .views-field.views-field-field-reservations-link a:hover::after {
  transform: rotate(45deg) translateY(-5px);
}

#block-backyard-makeareservation>div>div:nth-child(1)>div>div>div:nth-child(2)>img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 450px;
  object-fit: contain;
}

#block-backyard-makeareservation>div>div:nth-child(2)>div>div>div:nth-child(2)>img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

section.reservation {
  position: relative;
  height: 682px;
}

section.reservation {
  padding-top: 330px;
}

div#block-backyard-makeareservation h2 {
  margin: 0;
  text-align: center;
  margin-top: -210px;
  font-family: var(--Squada);
  font-weight: 400;
  font-size: 31.63px;
  line-height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

div#block-backyard-views-block-make-a-reservation-block-1 {
  max-width: 1138px;
  margin: 0 auto;
  margin-top: -90px;
}

section.reservation .makeReservation {
  display: inline-block;
  width: 100%;
}

section.reservation .makeReservation .views-row {
  float: left;
  clear: left;
  max-width: 270px;
  margin-bottom: 100px;
}

section.reservation .makeReservation .views-row:nth-child(2) {
  float: right;
  clear: unset;
}

section.reservation .makeReservation .views-row:nth-child(3) {
  margin-bottom: 0;
}

section.reservation .makeReservation .views-row .views-field-field-sub-title {
  color: #FFF;
  font-family: var(--Squada);
  font-size: 31.63px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

section.reservation .makeReservation .views-row .views-field-field-location-phone-number {
  color: #BFBFBF;
  font-size: 14.63px;
  font-style: normal;
  font-weight: 400;
  line-height: 152.9%;
  /* 22.369px */
}


/*********** popup menu **********/
.logo {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo-main {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.logo-sub {
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 3px;
}



/* Mobile Menu Button - Always Visible */
.menu-toggle {
  display: block;
  /* Always visible as requested */
  background: none;
  border: none;
  color: white;
  font-size: 1.8rem;
  cursor: pointer;
  width: 30px;
  height: 30px;
  background: url("../images/menuBarsIcon.svg") center no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  z-index: 9;
  left: 4%;
  transform: translateY(-50%);
  z-index: 9;
}

/* Main Content */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
  background-size: cover;
  background-position: center;
  height: 400px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  margin-bottom: 3rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero p {
  font-size: 1.3rem;
  max-width: 700px;
  margin-bottom: 2rem;
}

.content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.card {
  background-color: white;
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.card:hover {
  transform: translateY(-5px);
}

.card h2 {
  color: #1a472a;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #c5b358;
}

/* New Menu Overlay Styles */
/* New Menu Overlay Styles - Curtain Effect */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0.6s ease,
    opacity 0.6s ease;
}

.menu-overlay.active {
  visibility: visible;
  opacity: 1;
}

.menu-overlay.fade-out {
  visibility: hidden;
  opacity: 0;
}

/* تأثير انتقال للعناصر الداخلية */
.menu-overlay .menu-container {
  transition:
    transform 0.6s ease,
    opacity 0.6s ease;
}

.menu-overlay.active .menu-container {
  transform: scale(1);
  opacity: 1;
}


.menu-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 100%;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

/* Column Layouts */
.menu-col-left,
.menu-col-center,
.menu-col-right {
  background-color: #c33118;
  height: 100%;
  padding: 4rem 8rem;
  position: relative;
  overflow: hidden;
}

/* White wipe overlay effect */
.menu-col-left::before,
.menu-col-center::before,
.menu-col-right::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  transform: translateX(0);
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 10;
}

/* Staggered wipe animation - white slides out to the right */
.menu-overlay.active .menu-col-left::before {
  transform: translateX(100%);
  transition-delay: 0.1s;
}

.menu-overlay.active .menu-col-center::before {
  transform: translateX(100%);
  transition-delay: 0.25s;
}

.menu-overlay.active .menu-col-right::before {
  transform: translateX(100%);
  transition-delay: 0.4s;
}




/* Column Layouts */
.menu-col-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.menu-col-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Align menu items to top/center as needed */
  padding-top: 4rem;
}

.menu-col-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Center vertically */
  align-items: flex-start;
  padding-left: 2rem;
}

/* Left Column Elements */
.menu-logo {
  color: white;
}

.menu-logo .logo-main {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.menu-logo .logo-sub {
  font-size: 1.2rem;
  letter-spacing: 2px;
  font-weight: 300;
}

.close-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 1rem;
  margin-left: -1rem;
  /* Visual alignment */
}

.x-icon {
  width: 40px;
  height: 40px;
  position: relative;
}

.x-icon span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: white;
  transform-origin: center;
  transition: transform 0.3s;
}

.x-icon span:first-child {
  transform: rotate(45deg);
}

.x-icon span:last-child {
  transform: rotate(-45deg);
}

.close-menu-btn:hover .x-icon span {
  background-color: #f0f0f0;
  transform: rotate(135deg);
  /* Spin effect */
}

.close-menu-btn:hover .x-icon span:last-child {
  transform: rotate(45deg);
}

.menu-lang-toggle {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
}

.lang-active {
  color: white;
}

.lang-inactive {
  color: rgba(255, 255, 255, 0.6);
}

/* Center Column - Primary Nav */
.primary-nav {
  list-style: none;
  width: 100%;
}

.primary-nav>li {
  margin-bottom: 1.5rem;
}

.primary-nav>li>a,
.menu-item-wrapper>a {
  color: white;
  text-decoration: none;
  font-size: 3rem;
  /* Large font size */
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  display: inline-block;
  transition: transform 0.2s;
}

.primary-nav>li>a:hover,
.menu-item-wrapper>a:hover {
  transform: translateX(10px);
}

.menu-item-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.menu-arrow {
  font-size: 1.5rem;
  margin-left: 1rem;
  opacity: 0.8;
  transition: transform 0.3s;
}

.has-child.active .menu-arrow {
  transform: rotate(180deg);
}

/* Sub Menu */
.sub-menu {
  list-style: none;
  padding-left: 0.5rem;
  margin-top: 0.5rem;
  display: none;
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  margin-left: 10px;
}

.has-child.active .sub-menu {
  display: block;
  animation: fadeIn 0.3s;
}

.sub-menu li {
  margin-bottom: 0.5rem;
}

.sub-menu a {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 400;
  display: block;
  padding: 0.2rem 1rem;
}

.sub-menu a:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Right Column - Secondary Nav */
.secondary-nav {
  list-style: none;
  margin-bottom: 4rem;
}

.secondary-nav li {
  margin-bottom: 1.5rem;
}

.secondary-nav a {
  color: white;
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.secondary-nav a:hover {
  opacity: 0.8;
}

.menu-social {
  display: flex;
  gap: 2rem;
}

.menu-social a {
  color: white;
  font-size: 1.5rem;
  transition: transform 0.3s;
  background: white;
  color: #c33118;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  /* Slightly rounded squares from image?? or just text icons? 
                                   Images show just icons or small squares. Let's stick to text icons for now 
                                   unless image 4 suggests boxes. Image 4 shows simple icons. */
  background: transparent;
  color: white;
  width: auto;
  height: auto;
}

/* Correcting social icons based on image (just white icons) */
.menu-social a {
  font-size: 1.5rem;
}

.menu-social a:hover {
  transform: translateY(-3px);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 992px) {
  .menu-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    overflow-y: auto;
    padding: 2rem;
    gap: 2rem;
  }

  .menu-col-left {
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin-bottom: 1rem;
  }

  .menu-logo {
    order: 1;
  }

  .close-menu-btn {
    order: 0;
    margin-left: 0;
    margin-right: 1rem;
  }

  .menu-lang-toggle {
    order: 2;
  }

  .menu-col-center {
    padding-top: 0;
  }

  .primary-nav>li>a,
  .menu-item-wrapper>a {
    font-size: 2.2rem;
  }

  .menu-col-right {
    padding-left: 0;
  }

  .secondary-nav a {
    font-size: 1.4rem;
  }
}

/*********** popup menu **********/

.menu-container nav ul:not(.contextual-links) {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.menu-container nav ul:not(.contextual-links) a {
  color: #FFF;
  font-family: var(--Squada);
  font-size: 40.36px;
  font-style: normal;
  font-weight: 400;
  line-height: 146.3%;
  /* 59.047px */
}

.menu-container .menu-col-right nav#block-backyard-sociallinks-2 ul:not(.contextual-links) a {
  font-size: 31px;
}

.menu-container .menu-col-right nav#block-backyard-sociallinks-2 ul:not(.contextual-links) {
  gap: 29px;
}

.menu-container nav#block-backyard-sociallinks-2 ul:not(.contextual-links) {
  flex-direction: row;
  margin-top: 40px;
}

.inner {
  position: relative;
  height: 700px;
}

.inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/inerGridLines.svg") no-repeat center;
  background-size: auto;
  z-index: 0;
  opacity: 0.7;
}

.inner #block-backyard-views-block-inner-image-block-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.inner #block-backyard-views-block-inner-image-block-1 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.inner #block-backyard-views-block-inner-image-block-1 .views-field.views-field-title {
  display: none;
}

/* ============================================
   Branches Listing Page HERO - Full Width Image
   ============================================ */

/* Hero container */
.page-node-branches .inner {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: block !important;
  /* Default height for desktop */
  height: 700px;
}

/* Ensure no padding/margin interferes */
.page-node-branches .inner #block-backyard-views-block-inner-image-block-1,
.page-node-branches .inner .views-row,
.page-node-branches .inner .views-col,
.page-node-branches .inner .contextual-region {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}

/* Hero image - fill container */
.page-node-branches .inner #block-backyard-views-block-inner-image-block-1 {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Image Object Fit */
.page-node-branches .inner #block-backyard-views-block-inner-image-block-1 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 0 !important;
  max-width: none !important;
}

/* Dark overlay */
.page-node-branches .inner #block-backyard-views-block-inner-image-block-1::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.4) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* "Branches" Text - EXACT FIGMA SPECS */
.page-node-branches .inner #block-backyard-views-block-inner-image-block-1::after {
  content: "Branches" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10 !important;
  /* Figma: width 727px, height 309px, centered */
  width: 727px !important;
  max-width: 90% !important;
  height: auto !important;
  text-align: center !important;
  /* Figma Typography */
  font-family: var(--Squada), 'Squada One', sans-serif !important;
  font-weight: 400 !important;
  font-size: 211.27px !important;
  line-height: 146.3% !important;
  letter-spacing: 0 !important;
  /* Figma: #E3E3E3 at 60% opacity */
  color: rgba(227, 227, 227, 0.6) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  text-transform: none !important;
}

/* Responsive: Tablet */
@media (max-width: 1024px) {
  .page-node-branches .inner #block-backyard-views-block-inner-image-block-1::after {
    font-size: clamp(80px, 15vw, 150px) !important;
    width: auto !important;
    max-width: 90% !important;
  }
}

/* Responsive: Mobile */
@media (max-width: 767px) {
  .page-node-branches .inner #block-backyard-views-block-inner-image-block-1::after {
    font-size: clamp(48px, 14vw, 100px) !important;
  }
}

/* Responsive: Small Mobile */
@media (max-width: 480px) {
  .page-node-branches .inner #block-backyard-views-block-inner-image-block-1::after {
    font-size: clamp(36px, 12vw, 70px) !important;
  }
}

/* Hide existing subtitle if present to avoid duplication */
.page-node-branches .inner #block-backyard-views-block-inner-image-block-1 .views-field.views-field-field-sub-title {
  display: none !important;
}

/* Tablet: 768px - 1024px */
@media (max-width: 1024px) {
  .page-node-branches .inner {
    height: 500px !important;
  }
}

/* Mobile: 481px - 767px */
@media (max-width: 767px) {
  .page-node-branches .inner {
    height: 400px !important;
  }
}

/* Mobile Portrait: 360px - 480px */
@media (max-width: 480px) {
  .page-node-branches .inner {
    height: 350px !important;
  }
}

/* Extra Small: below 360px */
@media (max-width: 360px) {
  .page-node-branches .inner {
    height: 300px !important;
  }
}

/* Hide unwanted fields on branches listing page */
.page-node-branches .inner #block-backyard-views-block-inner-image-block-1 .views-field.views-field-field-body {
  display: none !important;
}

.page-node-branches .inner #block-backyard-views-block-inner-image-block-1 .views-field.views-field-title {
  display: none !important;
}

/* ============================================
   End Branches Hero Banner Styles
   ============================================ */

.inner #block-backyard-views-block-inner-image-block-1 .views-field.views-field-field-sub-title {
  position: absolute;
  top: 45%;
  left: 165px;
  transform: translateY(-50%);
  color: #FFF;
  font-family: var(--Squada);
  font-size: 54.63px;
  font-style: normal;
  font-weight: 400;
  line-height: 61px;
  /* 111.66% */
  max-width: 650px;
}

.aboutuspage .inner #block-backyard-views-block-inner-image-block-1 .views-field.views-field-field-sub-title {
  top: 50%;
}

.inner #block-backyard-views-block-inner-image-block-1 .views-field.views-field-body {
  position: absolute;
  bottom: 77px;
  right: 150px;
  color: #FFF;
  font-weight: 400;
  font-size: 15.63px;
  line-height: 23px;
  letter-spacing: 0%;
  max-width: 500px;

}

.inner #block-backyard-views-block-inner-image-block-1 .views-field.views-field-body strong {
  font-weight: 400;
  color: #FFF;
  font-family: var(--Squada);
  font-size: 56.63px;
  line-height: 56px;
}

.contactuspage .inner #block-backyard-views-block-inner-image-block-1 {
  background: url("../images/ContactUs.png") no-repeat center;
  background-size: 50%;
}

.inner-space .container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0;
}

.ourmenupage div#content-wrap {
  display: inline-block;
  width: 100%;
  background: #101010;
}

.ourmenupage div#block-backyard-views-block-menu-slider-block-5,
.ourmenupage div#block-backyard-views-block-menu-slider-block-4,
.ourmenupage div#block-backyard-views-block-menu-slider-block-1-3,
.ourmenupage div#block-backyard-views-block-menu-slider-block-1-2 {
  float: left;
  width: 55%;
  padding: 58px 70px;
  padding-bottom: 0;
  padding-right: 0;
}

.ourmenupage div#block-backyard-menuvideo-2 video {
  width: 100%;
}

.ourmenupage div#block-backyard-menuvideo-2 {
  width: 38.7%;
  float: right;
}

/* ourmenupage swiper buttons - position overrides only (base in shared section) */
.ourmenupage .swiper-button-next,
.ourmenupage .swiper-button-prev {
  top: 35px;
  right: 40px;
}

.ourmenupage .swiper-button-prev {
  right: 90px;
  left: auto;
}

div#block-backyard-ourmenubottomtext {
  text-align: center !important;
  font-weight: 400;
  font-size: 21.63px;
  line-height: 35px;
  color: #D0D0D0;
  padding-top: 70px;
  padding-bottom: 220px;
  background: #101010;
  position: relative;
  max-width: 715px;
  margin: 0 auto;
  width: 100%;
  float: none;
  clear: both;
}

div#block-backyard-ourmenubottomtext img {
  max-width: 370px;
  object-fit: contain;
  position: absolute;
  bottom: -220px;
  left: 50%;
  transform: translateX(-50%);
}

footer .container {
  padding-top: 70px;
}

div#block-backyard-contactustext {
  position: relative;
  text-align: center;
  height: 350px;
  padding: 70px 10px;
  z-index: 1;
}

div#block-backyard-contactustext img {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  left: 0;
  top: 0;
}

div#block-backyard-contactustext p {
  max-width: 690px;
  color: #fff;
  margin: 0 auto;
  font-family: var(--Squada);
  font-weight: 400;
  font-size: 38.63px;
  line-height: 47px;
  letter-spacing: 0%;
  text-align: center;
  position: relative;
  z-index: 1;
}

div#block-backyard-views-block-make-a-reservation-block-2 {
  max-width: 95%;
  margin: 0 auto;
  margin-top: -100px;
  position: relative;
  z-index: 2;
}

div#block-backyard-views-block-make-a-reservation-block-2 .makeReservation {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

div#block-backyard-views-block-make-a-reservation-block-2 .makeReservation .views-row .views-field.views-field-title {
  font-family: Squada One;
  font-weight: 400;
  font-size: 34.8px;
  line-height: 38.84px;
  vertical-align: middle;
  color: #fff;
  margin-top: 20px;
  position: relative;
  padding-bottom: 20px !important;
  margin-bottom: 20px;
}

div#block-backyard-views-block-make-a-reservation-block-2 .makeReservation .views-row {
  background: #232323;
}

div#block-backyard-views-block-make-a-reservation-block-2 .makeReservation .views-field {
  padding: 15px;
}

div#block-backyard-views-block-make-a-reservation-block-2 .makeReservation .views-field.views-field-field-map-iframe p {
  margin-bottom: 0;
}

div#block-backyard-views-block-make-a-reservation-block-2 .makeReservation iframe {
  width: 100%;
  height: 450px;
}

div#block-backyard-views-block-make-a-reservation-block-2 .makeReservation .views-row .views-field.views-field-title::before {
  content: "";
  position: absolute;
  left: 15px;
  bottom: 0;
  background: #383838;
  width: 39.54512405395508px;
  height: 1.5818047523498535px;
}

div#block-backyard-views-block-make-a-reservation-block-2 .makeReservation .views-row .views-field.views-field-field-description {
  font-weight: 400;
  font-size: 12.65px;
  line-height: 18.98px;
  vertical-align: middle;
  color: #B5B5B5;
}

.contactuspage div#block-backyard-views-block-make-a-reservation-block-2 .makeReservation .views-row .views-field.views-field-field-description {
  font-size: 16.65px;
  line-height: 27.98px;
}

div#block-backyard-views-block-make-a-reservation-block-2 .makeReservation .views-row .views-field.views-field-field-description strong {
  color: #fff;
  font-weight: 400;
}

div#block-backyard-views-block-make-a-reservation-block-2 .makeReservation .views-row .views-field.views-field-field-email a {
  padding: 15px 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-weight: 700;
  font-size: 11.07px;
  line-height: 100%;
  letter-spacing: 0.79px;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid #fff;
  width: max-content;
  margin-bottom: 40px;
}

div#block-backyard-views-block-make-a-reservation-block-2 .makeReservation .views-row .views-field.views-field-field-email a::after,
div#block-backyard-views-block-make-a-reservation-block-2 .makeReservation .views-row .views-field.views-field-field-email a::before {
  content: "";
  display: inline-block;
  width: 14.23624324798584px;
  height: 0.7909023761749268px;
  background: #fff;
}

div#block-backyard-views-block-make-a-reservation-block-2 .makeReservation .views-row .views-field.views-field-field-description {
  min-height: 180px;
}


div#block-backyard-views-block-make-a-reservation-block-2 .makeReservation .views-field.views-field-field-map-iframe {
  padding: 0 !important;
}

div#block-backyard-webform {
  max-width: 660px;
  margin: 130px auto 0;
  padding-bottom: 110px;
}

div#block-backyard-webform h2 {
  color: #fff;
  font-weight: 400;
  font-size: 21.1px;
  line-height: 31.05px;
  letter-spacing: 0%;
  text-align: center;
  margin-bottom: 70px;
}

.webform-submission-form select,
.webform-submission-form textarea,
.webform-submission-form input {
  background: transparent;
  width: 100%;
  height: 55px;
  border: none;
  border-bottom: 1px solid #fff;
  border-radius: 0;
  margin-bottom: 20px;
}

.webform-submission-form select option {
  background-color: #222;
}

.webform-submission-form textarea {
  height: auto;
}

.webform-submission-form label {
  color: #fff;
  font-weight: 400;
  font-size: 18.9px;
  line-height: 27px;
  letter-spacing: 0%;
}

.webform-submission-form input.form-submit {
  margin-top: 70px;
  border: 1px solid #fff;
  border-radius: 135px;
  font-weight: 400;
  font-size: 22.6px;
  line-height: 25.92px;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  font-family: "Montserrat", sans-serif;
}

.webform-submission-form input.form-submit:hover {
  background: #fff;
  color: #222;
}

div#content-wrap {
  background: #101010;
}


/* Hide submenus by default */
#block-backyard-mainnavigation ul ul {
  display: none;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out;
}

/* Show submenu when parent has active class */
#block-backyard-mainnavigation li.menu-open>ul {
  display: block;
  max-height: 500px;
  /* Adjust based on your content */
  transition: max-height 0.4s ease-in;
}

/* Parent menu item */
#block-backyard-mainnavigation>ul>li {
  position: relative;
}

/* Style for parent items with submenus */
#block-backyard-mainnavigation li.has-submenu>a {
  position: relative;
  padding-right: 20px;
}

/* Optional: Add arrow indicator for parent items */
#block-backyard-mainnavigation li.has-submenu>a::after {
  content: '';
  width: 20px;
  height: 20px;
  background: url("../images/menuArrow.svg") no-repeat center;
  background-size: contain;
  font-size: 10px;
  transition: transform 0.3s;
  display: inline-block;
  margin-left: 15px;
  margin-bottom: 3px;
}

#block-backyard-mainnavigation li.menu-open>a::after {
  transform: rotate(90deg);
}

/* Submenu items styling */
#block-backyard-mainnavigation ul ul li {
  display: block;
}

#block-backyard-mainnavigation ul ul li:last-child {
  border-bottom: none;
}

#block-backyard-mainnavigation ul ul a {
  padding: 10px 0px;
  display: block;
  font-size: 31px;
}

.careerpage div#content-wrap {
  display: flex;
  align-items: start;
  gap: 20px;
}

.careerpage div#content-wrap div#block-backyard-content {
  display: none;
}

.careerpage div#content-wrap div#block-backyard-joinourteamimage {
  position: relative;
}

.careerpage div#content-wrap div#block-backyard-joinourteamimage img {
  max-height: 1100px;
}

.careerpage div#content-wrap div#block-backyard-joinourteamimage::before {
  content: "";
  position: absolute;
  top: 100px;
  right: -150px;
  width: 250px;
  height: 100%;
  background: url(../images/careerBefore.png) no-repeat center;
  background-size: 100% 100%;
}

.careerpage div#content-wrap div#block-backyard-webform-2 {
  position: relative;
  z-index: 2;
  padding-top: 100px;
}

div#block-backyard-webform-2 h2 {
  font-family: Squada One;
  font-weight: 400;
  font-size: 31.63px;
  line-height: 100%;
  margin-bottom: 75px;
}

div#block-backyard-webform-2 div#edit-title {
  font-family: Squada One;
  font-weight: 400;
  font-size: 26.63px;
  line-height: 100%;
  margin-bottom: 35px;
}

.careerpage .webform-submission-form select,
.careerpage .webform-submission-form textarea,
.careerpage .webform-submission-form input {
  background: #181717;
  border: 1px solid #fff !important;
  border-radius: 10px;
  height: 45px;
  padding: 5px 10px;
}

.careerpage .webform-submission-form textarea {
  height: auto;
}

.careerpage .webform-submission-form .description {
  display: none;
}

/* .careerpage .webform-submission-form input#edit-attach-resume-upload{
  width: max-content;
  background: #FF4438;
  color: #fff;
} */
/* Hide the actual file input */
.careerpage input[type="file"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Style the label as your custom button */
.careerpage label[for="edit-attach-resume-upload"] {
  display: inline-block;
  color: #fff;
  cursor: pointer;
  font-weight: 400;
  font-size: 19px;
  font-family: "Montserrat";
}

/* .careerpage label[for="edit-attach-resume-upload"]:hover {
    background-color: #FF4438;
} */
.careerpage .webform-submission-form input.form-submit {
  border: 1px solid #fff;
  border-radius: 135px;
  font-weight: 400;
  font-size: 15.6px;
  line-height: 25.92px;
  text-align: center;
  vertical-align: middle;
  width: max-content;
  padding: 5px 60px 5px 15px !important;
  border-radius: 100px !important;
  background: url("../images/submitArrow.svg") 93% center no-repeat;
  background-size: auto;
  margin-top: 35px;
}

.careerpage .webform-submission-form input.form-submit:hover {
  color: #fff;
}

.franchingpage div#content-wrap {
  display: grid;
  align-items: start;
  gap: 115px;
  grid-template-columns: repeat(2, 11fr);
  position: relative;
}

.franchingpage div#content-wrap::after,
.franchingpage div#content-wrap::before {
  content: "";
  position: absolute;
  top: 155px;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
  opacity: 0.9;
  z-index: 2;
}

.cateringpage div#block-backyard-webform-4 {
  position: relative;
}

.cateringpage div#block-backyard-webform-4::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
  opacity: 0.5;
}

.franchingpage div#content-wrap::after {
  top: 235px;
}

.franchingpage div#content-wrap form#webform-submission-for-franchising-inquiry-node-14-add-form {
  max-width: 475px;
  margin: 0 auto;
}

.franchingpage div#content-wrap div#block-backyard-content {
  display: none;
}

.franchingpage div#content-wrap div#block-backyard-franchising {
  position: relative;
}

.franchingpage div#content-wrap div#block-backyard-franchising h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-family: var(--Squada);
  font-weight: 400;
  font-size: 56.68px;
  line-height: 37.1px;
  letter-spacing: -0.3px;
  vertical-align: middle;
  color: #E1DAD0;
}

.franchingpage div#block-backyard-webform-3 {
  padding: 85px 130px 85px 0;
}

.franchingpage div#edit-title {
  font-weight: 400;
  font-size: 15.63px;
  line-height: 23px;
  letter-spacing: 0%;
  margin-bottom: 53px;
}

.franchingpage .webform-submission-form input {
  height: 30px;
  margin-bottom: 20px;
}

.franchingpage .webform-submission-form input.form-submit {
  margin-top: 53px;
  height: 43px;
}

.cateringpage div#content-wrap,
.franchingpage div#content-wrap {
  background: #000;
}

.franchingpage .webform-submission-form label {
  font-size: 14.9px;
}

.cateringpage div#content-wrap div#block-backyard-content {
  display: none;
}

.cateringpage div#block-backyard-webform-4 {
  max-width: 660px;
  margin: 100px auto 60px auto;
}

.cateringpage div#edit-title {
  font-weight: 400;
  font-size: 21.1px;
  line-height: 31.05px;
  margin-bottom: 60px;
}

.cateringpage div#block-backyard-catering {
  display: flex;
  flex-direction: row-reverse;
  position: relative;
  justify-content: flex-end;
}

.cateringpage div#block-backyard-catering h2 {
  position: absolute;
  top: 150px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--Squada);
  font-weight: 400;
  font-size: 82.68px;
  line-height: 37.1px;
  letter-spacing: -0.3px;
  text-align: center;
  color: #E1DAD0;
}

.cateringpage #block-backyard-catering>div:nth-child(3)>div:nth-child(1)>div>div>div:nth-child(2)>img {
  position: absolute;
  top: 250px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 261px;
  height: 346.2244873046875px;
}

.cateringpage div#block-backyard-catering>div:nth-child(3)>div:nth-child(2)>div>div>div:nth-child(2)>img {
  max-width: 100%;
}

.cateringpage #block-backyard-catering>div:nth-child(2) {
  padding-top: 30px;
  padding-left: 210px;
}

.cateringpage #block-backyard-catering>div:nth-child(2) h3 {
  font-family: var(--Squada);
  font-weight: 100;
  font-size: 98.15px;
  line-height: 86.46px;
  color: #fff;
  opacity: 0.2;
  margin-left: -210px;
  margin-bottom: 70px;
}

.cateringpage #block-backyard-catering>div:nth-child(2) p {
  font-weight: 400;
  font-size: 17.63px;
  line-height: 37px;
  margin-bottom: 0;
}

.cateringpage #block-backyard-catering>div:nth-child(2),
.cateringpage #block-backyard-catering>div:nth-child(3) {
  width: 50%;
}

.aboutuspage div#block-backyard-views-block-about-image-gallery-block-1 {
  padding: 100px 70px 200px 70px;
  position: relative;
  background: url("../images/sliderBg.png") no-repeat center right;
  background-size: contain;
}

.aboutuspage div#block-backyard-views-block-about-image-gallery-block-1::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -220px;
  background: url("../images/sliderBottom.png") no-repeat center;
  background-size: contain;
  width: 370px;
  height: 555px;
  transform: translateX(-50%);
}

.aboutuspage .swiper-outer-wrapper {
  position: relative;
}

.aboutuspage .swiper.gallery-swiper.swiper-initialized.swiper-horizontal.swiper-backface-hidden {
  max-width: 1150px;
  margin: 0 auto;
}

.aboutuspage .swiper-button-prev::after,
.aboutuspage .swiper-button-next::after {
  display: none;
}

.aboutuspage .swiper-button-prev,
.aboutuspage .swiper-button-next {
  width: 50px;
  height: 50px;
  background: url("../images/leftGallery.svg") no-repeat center;
  background-size: auto;
}

.aboutuspage .swiper-button-prev {
  background-image: url("../images/rightGallery.svg");
}

div#block-backyard-welcometothebackyardsmokehouse {
  display: inline-block;
  width: 100%;
  background: url("../images/aboutBg.png") no-repeat center;
  background-size: contain;
  padding: 40px 130px;
}

#block-backyard-welcometothebackyardsmokehouse>div:nth-child(2),
div#block-backyard-welcometothebackyardsmokehouse h2 {
  float: left;
  clear: left;
  width: 47%;
}

div#block-backyard-welcometothebackyardsmokehouse h2 {
  float: left;
  clear: left;
  width: 47%;
  font-family: var(--Squada);
  font-weight: 400;
  font-size: 32.98px;
  line-height: 36.91px;
  letter-spacing: 0%;
  margin-bottom: 35px;
}

#block-backyard-welcometothebackyardsmokehouse>div:nth-child(2) {
  font-weight: 400;
  font-size: 17.63px;
  line-height: 35px;
  letter-spacing: 0%;
  color: #D0D0D0;
}

#block-backyard-welcometothebackyardsmokehouse>div:nth-child(3) {
  float: right;
  width: 47%;
  box-shadow: 30px 14px 74px 90px #0E0E0E inset;

}

#block-backyard-welcometothebackyardsmokehouse>div:nth-child(3) img {
  max-height: 811px;
  box-shadow: 30px 14px 74px 90px #0E0E0E inset;

}

.aboutuspage div#content-wrap {
  background: #0e0e0e;
}


body.intro-active {
  overflow: hidden !important;
  height: 100vh;
}

body.intro-active header,
body.intro-active main,
body.intro-active footer,
body.intro-active .menu-toggle {
  display: none !important;
}

/* Intro wrapper - BLACK BACKGROUND */
.backyard-intro-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: url("../images/introBg.png") no-repeat center;
  background-size: 100% 100%;
  background-color: #000000;
  z-index: 99999;
  overflow: hidden;
}

.intro-label {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #666;
  font-size: 12px;
  letter-spacing: 2px;
  z-index: 10;
  text-transform: uppercase;
  display: none;
}

/* Video/Image container */
.intro-video-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.intro-bg-image {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.6;
  object-fit: cover;
}

/* Location Popup */
.location-popup {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fadeIn 0.4s ease;
}

.location-popup.active {
  display: flex;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Merged: Combined two duplicate .popup-content declarations */
.popup-content {
  background: rgba(60, 60, 60, 0.95);
  border-radius: 2px;
  text-align: center;
  max-width: 745px;
  animation: slideUp 0.5s ease;
  padding: 0;
  width: 745px;
  height: 283px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.popup-content h2 {
  color: #fff;
  font-family: var(--Squada);
  font-weight: 400;
  font-size: 26.86px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  margin-top: 0;
}

.popup-content p {
  display: flex;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
  margin-top: 37px;
  gap: 48px;
}

.popup-content p a {
  color: #fff !important;
  font-family: var(--Squada);
  font-weight: 400;
  font-size: 21.87px;
  line-height: 100%;
  letter-spacing: 0%;
  text-decoration: underline;
  text-decoration-style: solid;
  text-underline-offset: 17.5%;
  text-decoration-thickness: 6%;
  position: relative;
  transition: transform 0.3s ease;
}


/* Arrow styling */
.popup-content p a::after {
  content: '';
  width: 20px;
  height: 20px;
  background: url("../images/next.png") no-repeat center;
  background-size: 16px;
  position: absolute;
  right: -25px;
  opacity: 0;
  top: 3px;
  transform: translateX(-10px);
  transition: all 0.3s ease;
}

/* Hover effect */
.popup-content p a:hover {
  transform: translateX(-10px);
}

.popup-content p a:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* Style the popup block */
#block-backyard-intropopup {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}

#block-backyard-intropopup h2 {
  color: #fff;
  font-family: var(--Squada);
  font-weight: 400;
  font-size: 26.86px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  margin-top: 0;
  margin-bottom: 35px;
}

#block-backyard-intropopup p {
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
  margin: 0;
  gap: 20px;
}

#block-backyard-intropopup a {
  color: #fff !important;
  font-family: var(--Squada);
  font-weight: 400;
  font-size: 21.87px;
  line-height: 100%;
  letter-spacing: 0%;
  text-decoration: underline !important;
  text-decoration-style: solid;
  text-underline-offset: 17.5%;
  text-decoration-thickness: 6%;
  background: transparent;
  border: none;
  padding: 0;
  transition: all 0.3s ease;
}

#block-backyard-intropopup a:hover,
#block-backyard-intropopup a:focus {
  opacity: 0.7;
}

/* Intro Content */
.intro-content-wrapper {
  position: relative;
  z-index: 10;
  /* display: none; */
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px;
}

/* Style the main intro block */
#block-backyard-intro {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 142px;
  flex-wrap: wrap;
  color: #fff;
}

/* First div contains image and text */
#block-backyard-intro>div:first-child {
  min-width: 300px;
  text-align: left;
  order: 2;
  position: relative;
  z-index: 3;
}

/* Logo image */
#block-backyard-intro>div:first-child>p:first-child {
  text-align: left;
  margin-bottom: 40px;
  width: 100%;
}

#block-backyard-intro>div:first-child img {
  max-width: 200px;
  height: auto;
  display: inline-block;
}

/* Heading */
#block-backyard-intro h2 {
  color: #fff;
  font-family: var(--Squada);
  font-weight: 400;
  font-size: 25.63px;
  line-height: 146%;
  letter-spacing: 0%;
  margin-bottom: 40px;
}

/* Paragraph with ENTER button */
#block-backyard-intro>div:first-child>p:last-child {
  margin: 0;
}

/* Second div contains video */
#block-backyard-intro>div:nth-child(2) {
  max-width: 550px;
  width: 100%;
  order: 1;
}

#block-backyard-intro video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow:
    inset 0 0 80px 40px rgba(0, 0, 0, 0.8),
    0 0 100px 50px rgba(0, 0, 0, 0.9);
}

/* Hide visually-hidden text */
#block-backyard-intro .visually-hidden {
  display: none !important;
}

.intro-text {
  max-width: 800px;
  margin: 0 auto;
}

.intro-text img {
  max-width: 150px;
  height: auto;
  margin-bottom: 20px;
  display: inline-block;
}

.intro-text h2 {
  font-size: 24px;
  font-weight: 400;
  margin: 20px 0;
  color: #fff;
  line-height: 1.5;
}

.intro-text p {
  font-size: 16px;
  margin-bottom: 30px;
  color: #fff;
  opacity: 0.9;
}

.intro-text br {
  display: block;
  content: "";
  margin: 10px 0;
}

.enter-btn,
#enter-btn {
  display: flex;
  width: 219px;
  height: 50px;
  padding: 18px 0 18px 25px;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #000;
  margin-top: 35px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  font-size: 13.63px;
  font-weight: 600;
  letter-spacing: 1.09px;
  font-family: "Gilmer Medium";
}

.enter-btn::before,
#enter-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -94%;
  width: 100%;
  height: 100%;
  background: var(--secondColor);
  z-index: -1;
  transition: 0.3s ease;
}

.enter-btn::after,
#enter-btn::after {
  content: "";
  width: 30px;
  height: 1px;
  background-color: #fff;
  order: -1;
  transform: translateY(-50%);
  opacity: 0;
  margin-left: -30px;
}

.enter-btn:hover,
#enter-btn:hover {
  padding-left: 30px;
  color: #fff;
}

.enter-btn:hover::after,
#enter-btn:hover::after {
  opacity: 1;
  margin-left: 0;
}

.enter-btn:hover::before,
#enter-btn:hover::before {
  left: 0;
}




.language-switcher {
  margin-top: 20px;
  font-size: 12px;
}

#block-backyard-intro>div:nth-child(1)>p:nth-child(3)>div:nth-child(3),
#block-backyard-intro>div:nth-child(1)>p:nth-child(3)>div:nth-child(4) {
  display: none;
}

.language-switcher span {
  color: #666;
  margin: 0 5px;
}

.lang-link {
  color: #999 !important;
  text-decoration: none !important;
  margin: 0 10px;
  transition: color 0.3s;
  cursor: pointer;
}

.lang-link.active,
.lang-link:hover {
  color: #fff !important;
}

/* Don't show intro on admin pages */
body.page-admin .backyard-intro-wrapper {
  display: none !important;
}

body.page-admin.intro-active {
  overflow: auto !important;
  height: auto !important;
}

body.page-admin.intro-active header,
body.page-admin.intro-active main,
body.page-admin.intro-active footer,
body.page-admin.intro-active .menu-toggle {
  display: block !important;
}

/* Responsive */
@media (max-width: 1024px) {
  #block-backyard-intro {
    gap: 40px;
  }

  #block-backyard-intro>div:nth-child(2) {
    max-width: 400px;
  }

  #block-backyard-intro h2 {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .intro-content-wrapper {
    padding: 20px;
  }

  .popup-content p {
    gap: 20px;
  }

  #block-backyard-intro {
    flex-direction: column;
    gap: 30px;
  }

  #block-backyard-intro>div:first-child,
  #block-backyard-intro>div:nth-child(2) {
    order: 0;
  }

  #block-backyard-intro>div:first-child {
    text-align: center;
  }

  #block-backyard-intro>div:first-child img {
    max-width: 150px;
  }

  #block-backyard-intro>div:nth-child(2) {
    max-width: 100%;
  }

  #block-backyard-intro h2 {
    font-size: 20px;
  }

  #enter-btn,
  .enter-btn {
    padding: 12px 40px;
    font-size: 12px;
  }

  .popup-content {
    padding: 40px 30px;
    margin: 20px;
    width: auto;
    height: auto;
  }

  .popup-content h2,
  #block-backyard-intropopup h2 {
    font-size: 20px;
    margin-bottom: 30px;
  }

  .location-links,
  #block-backyard-intropopup p {
    flex-direction: column;
    gap: 15px;
  }

  .location-btn,
  #block-backyard-intropopup a {
    width: 100%;
    padding: 12px 0;
    text-align: center;
  }

  .intro-text h2 {
    font-size: 20px;
  }

  .intro-text p {
    font-size: 14px;
  }

  .intro-text img {
    max-width: 100px;
  }
}

@media (max-width: 480px) {
  .intro-label {
    font-size: 10px;
    top: 15px;
    left: 15px;
  }

  .popup-content {
    padding: 30px 20px;
  }

  .popup-content h2,
  #block-backyard-intropopup h2 {
    font-size: 18px;
  }

  #block-backyard-intro>div:first-child img {
    max-width: 100px;
  }

  #block-backyard-intro h2 {
    font-size: 18px;
  }

  .intro-text h2 {
    font-size: 18px;
  }

  .intro-text img {
    max-width: 80px;
  }
}

/************ intro *********/


.simplenews-subscriber-form #edit-subscriptions-wrapper,
.simplenews-subscriber-form .description,
.simplenews-subscriber-form label {
  display: none;
}

.simplenews-subscriber-form {
  margin-left: auto;
}

.simplenews-subscriber-form form {
  display: flex;
  gap: 12px;
  justify-content: end;
}

.simplenews-subscriber-form .form-submit {
  background: #fff;
  width: 98px;
  height: 48px;
  border-radius: 8px;
  color: #000;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0%;
  text-align: center;
}

.simplenews-subscriber-form .form-email {
  width: 100%;
  height: 48px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #94A3B863;
  background: #fff;
  color: #94A3B8;
  font-size: 16px;
  max-width: 280px;
}

.simplenews-subscriber-form .form-email::placeholder {
  color: #94A3B8;
  font-size: 14px;
}


/* Language switcher in menu */
.language-switcher-menu {
  display: inline-block;
  margin-left: 20px;
}

.language-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
}

.language-links li {
  display: inline-block;
}

.language-links a {
  color: #fff;
  text-decoration: none;
  padding: 5px 10px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  font-size: 14px;
}

.language-links li.active a {
  font-weight: bold;
  border-bottom: 2px solid #fff;
}

.language-links a:hover {
  opacity: 0.7;
}

/* Intro language switcher */
.intro-content-wrapper .language-switcher {
  margin-top: 20px;
  font-size: 12px;
}

.intro-content-wrapper .language-switcher .lang-link {
  color: #999 !important;
  text-decoration: none !important;
  margin: 0 10px;
  transition: color 0.3s;
  cursor: pointer;
  text-transform: uppercase;
}

.intro-content-wrapper .language-switcher .lang-link.active,
.intro-content-wrapper .language-switcher .lang-link:hover {
  color: #fff !important;
}

.intro-content-wrapper .language-switcher span {
  color: #666;
  margin: 0 5px;
}

/* Language switcher in header/menu */
#block-backyard-languageswitcher-2,
#block-backyard-languageswitcher {
  display: inline-block;
  margin-top: 30px;
  position: absolute;
  bottom: 10%;
  left: 4%;
  z-index: 9999;
}

#block-backyard-languageswitcher-2 .links,
#block-backyard-languageswitcher .links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
  align-items: center;
}

#block-backyard-languageswitcher-2 .links li,
#block-backyard-languageswitcher .links li {
  display: inline-block;
  margin: 0;
  padding: 0;
}

/* Hide the full text "English" and "French" */
#block-backyard-languageswitcher-2 a,
#block-backyard-languageswitcher a {
  color: #fff;
  text-decoration: none;
  padding: 0 10px;
  transition: all 0.3s ease;
  font-size: 0;
  font-weight: 400;
  font-family: sans-serif;
}

/* Show only EN for first link */
#block-backyard-languageswitcher-2 .links li:nth-child(1) a::before,
#block-backyard-languageswitcher .links li:nth-child(1) a::before {
  content: 'EN';
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
}

/* Show only FR for second link */
#block-backyard-languageswitcher-2 .links li:nth-child(2) a::before,
#block-backyard-languageswitcher .links li:nth-child(2) a::before {
  content: 'FR';
  font-size: 14px;
  text-transform: uppercase;
  color: #ffffffa4;
}

/* Add . separator between them */
#block-backyard-languageswitcher-2 .links li:nth-child(1)::after,
#block-backyard-languageswitcher .links li:nth-child(1)::after {
  content: '.';
  color: #fff;
  margin: 0;
  font-size: 20px;
  line-height: 0;
}

/* Active state */
#block-backyard-languageswitcher-2 a.session-active::before,
#block-backyard-languageswitcher-2 a.is-active::before,
#block-backyard-languageswitcher a.session-active::before,
#block-backyard-languageswitcher a.is-active::before {
  font-weight: bold;
}

/* Hover state */
#block-backyard-languageswitcher-2 a:hover::before,
#block-backyard-languageswitcher a:hover::before {
  opacity: 0.7;
}

/* Responsive */
@media (max-width: 768px) {

  #block-backyard-languageswitcher-2,
  #block-backyard-languageswitcher {
    margin-left: 10px;
    z-index: 2;
  }

  #block-backyard-languageswitcher-2 .links li:nth-child(1) a::before,
  #block-backyard-languageswitcher-2 .links li:nth-child(2) a::before,
  #block-backyard-languageswitcher .links li:nth-child(1) a::before,
  #block-backyard-languageswitcher .links li:nth-child(2) a::before {
    font-size: 12px;
  }

  #block-backyard-languageswitcher-2 a,
  #block-backyard-languageswitcher a {
    padding: 0 8px;
  }
}


/* Language switcher in intro */
.intro-lang-switcher {
  display: inline-block;
  margin-top: 20px;
  margin-left: 0 !important;
}

.intro-lang-switcher .links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
  align-items: center;
  justify-content: center;
}

.intro-lang-switcher .links li {
  display: inline-block;
  margin: 0;
  padding: 0;
}

/* Hide the full text "English" and "French" */
.intro-lang-switcher a {
  color: #999 !important;
  text-decoration: none;
  padding: 0 10px;
  transition: all 0.3s ease;
  font-size: 0;
  font-weight: 400;
}

/* Show only EN for first link */
.intro-lang-switcher .links li:nth-child(1) a::before {
  content: 'EN';
  font-size: 14px;
  text-transform: uppercase;
  color: #999;
}

/* Show only FR for second link */
.intro-lang-switcher .links li:nth-child(2) a::before {
  content: 'FR';
  font-size: 14px;
  text-transform: uppercase;
  color: #999;
}

/* Add . separator */
.intro-lang-switcher .links li:nth-child(1)::after {
  content: '.';
  color: #fff;
  margin: 0;
  font-size: 20px;
  line-height: 0;
}

/* Active state */
.intro-lang-switcher a.session-active::before,
.intro-lang-switcher a.is-active::before {
  font-weight: bold;
  color: #fff !important;
}

/* Hover state */
.intro-lang-switcher a:hover::before {
  color: #fff !important;
}

/* Responsive */
@media (max-width: 768px) {
  .intro-lang-switcher {
    margin-top: 15px;
  }

  .intro-lang-switcher .links li:nth-child(1) a::before,
  .intro-lang-switcher .links li:nth-child(2) a::before {
    font-size: 12px;
  }
}

/* Fade in up animation - DESKTOP ONLY */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Only apply animations on desktop (768px and up) */
@media (min-width: 769px) {

  /* Initially hide elements that will animate */
  .fade-in-up {
    opacity: 0;
    transform: translateY(30px);
  }

  /* Animated state - stays visible after animation */
  .fade-in-up.animated {
    animation: fadeInUp 0.8s ease forwards;
    opacity: 1;
    transform: translateY(0);
  }

  /* Staggered animations - add delay for sequential elements */
  .fade-in-up.delay-1 {
    animation-delay: 0.2s;
  }

  .fade-in-up.delay-2 {
    animation-delay: 0.4s;
  }

  .fade-in-up.delay-3 {
    animation-delay: 0.6s;
  }

  .fade-in-up.delay-4 {
    animation-delay: 0.8s;
  }

  .fade-in-up.delay-5 {
    animation-delay: 1s;
  }
}

/* On mobile - elements are always visible, no animation */
@media (max-width: 768px) {
  .fade-in-up {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}


/* Custom cursor for reservation section */
.reservation {
  cursor: none;
  position: relative;
}

/* Hide default cursor when hovering on views-row */
.reservation .views-row {
  cursor: default;
}

/* Custom cursor element */
.custom-cursor {
  position: fixed;
  width: 200px;
  height: 200px;
  pointer-events: none;
  z-index: 9999;
  display: none;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  opacity: 0;
  padding: 0;
}

.custom-cursor.active {
  display: block;
  opacity: 1;
}

.custom-cursor.hidden {
  opacity: 0;
}

/* Cursor content - circular background */
.custom-cursor-content {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  /* backdrop-filter: blur(10px); */
  border-radius: 50%;
  display: flex;
  /* flex-direction: column;
  justify-content: center;
  align-items: center; */
  text-align: center;
  color: #fff;
  padding: 0;
}

.custom-cursor .view-more {
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
}

.custom-cursor .view-more svg {
  width: 100%;
  height: 100%;
}

/* Hide on mobile */
@media (max-width: 768px) {
  .reservation {
    cursor: default;
  }

  .custom-cursor {
    display: none !important;
  }
}

body.page-node-user.page-args-user-login .inner {
  height: 500px;
}

body.page-node-user.page-args-user-login div#content-wrap {
  background: #101010;
  max-width: 50%;
  margin: 0 auto;
  padding: 40px;
  margin-top: -250px;
  position: relative;
  z-index: 3;
}

body.page-node-user.page-args-user-login div#block-backyard-primary-local-tasks ul {
  display: none;
}

body.page-node-user.page-args-user-login .js-form-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 25px;
}

body.page-node-user.page-args-user-login .js-form-item label {
  color: #fff;
  font-weight: 400;
  font-size: 18.9px;
  line-height: 27px;
}

body.page-node-user.page-args-user-login .js-form-item input {
  background: transparent;
  width: 100%;
  height: 55px;
  border: none;
  border-bottom: 1px solid #fff;
  border-radius: 0;
  margin-bottom: 20px;
  padding: 0 10px;
}

body.page-node-user.page-args-user-login input#edit-submit {
  margin-top: 0;
  border: 1px solid #fff;
  border-radius: 135px;
  font-weight: 400;
  font-size: 22.6px;
  line-height: 25.92px;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  height: 52px;
  color: #000;
  font-weight: 600;
  text-transform: uppercase;
}

body.page-node-user.page-args-user-login input#edit-submit:hover {
  background: #fff;
  color: #222;
}

#backyard-intro.hover-background {
  background-image: url('../images/introHoverGrid.svg');
  /* background-size: auto;
  background-position: center; */
  transition: background-image 0.3s ease;
}


section.slider .swiper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/inerGridLines.svg) no-repeat center;
  background-size: cover;
  z-index: 2;
  opacity: 1;
}

.menu-overlay .menu-container {
  background: #c33118;
}

.menu-col-right,
.menu-col-center {
  padding-left: 5px;
  border-left: 1px solid rgba(19, 19, 19, 0.03);
}

.menu-col-left,
.menu-col-center,
.menu-col-right {
  position: relative;
  z-index: 3;
  background: transparent;
}

.franchingpage .inner #block-backyard-views-block-inner-image-block-1 .views-field.views-field-body {
  position: absolute;
  bottom: 20PX;
  right: 150px;
  color: #FFF;
  font-weight: 400;
  font-size: 14.63px;
  line-height: 23px;
  letter-spacing: 0%;
  max-width: 599px;
  RIGHT: 50px;
}

@media (max-width: 1280px) {
  .inner #block-backyard-views-block-inner-image-block-1 .views-field.views-field-field-sub-title {
    left: 100px;
  }
}

.intro-video-container {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  /* controls roundness */
}

/* Rounded vignette overlay */
.intro-video-container::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.35) 65%, rgba(0, 0, 0, 0.75) 85%, rgba(0, 0, 0, 1) 100%);
  z-index: 13;
  opacity: 1;
  width: 40%;
  left: 15%;
  border: 120px solid #000;
  border-radius: 0;
}

@media (max-width: 990px) {
  .intro-video-container::after {
    display: none;
  }
}

/* Video styling */
.intro-video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 22px;
}

.cateringpage .inner #block-backyard-views-block-inner-image-block-1 .views-field.views-field-body {
  max-width: 599px;
  right: 50px;
}



.webform-submission-form select * {
  background-color: black !important;
  color: white !important;
}

.webform-submission-form select option {
  background-color: black !important;
  color: white !important;
}

.webform-submission-form select option:hover {
  background-color: #222 !important;
  color: white !important;
}

.webform-submission-form select option:checked {
  background-color: #333 !important;
  color: white !important;
}

/* For WebKit browsers */
.webform-submission-form select option:checked {
  background-color: #333 !important;
  color: white !important;
}

/* Remove blue highlight in Chrome */
.webform-submission-form select option::selection {
  background-color: transparent !important;
}

/* Firefox specific styling */
@-moz-document url-prefix() {
  .webform-submission-form select option {
    background-color: black !important;
    color: white !important;
  }

  .webform-submission-form select option:hover {
    background-color: #222 !important;
    color: white !important;
  }
}

body:not(.page-node-) .menu-overlay {
  height: 700px;
}

.col-md-8.social_links {
  padding: 0;
}

div#block-backyard-welcometothebackyardsmokehouse p {
  margin-bottom: 0;
}

/* Wrapper */
.careerpage .form-item-attach-resume {
  color: #fff;
  font-family: Arial, sans-serif;
}

/* Hide real file input */
.careerpage #edit-attach-resume-upload {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Custom file UI */
.careerpage .custom-file-wrapper {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  margin-bottom: 20px;
}

/* Button */
.careerpage .custom-file-btn {
  background: #ff3b30;
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.careerpage .custom-file-btn:hover {
  background: #e63228;
}

.careerpage .custom-file-name {
  font-size: 14px;
  color: #bbb;
}

/*===========================================
  BRANCHES LISTING PAGE STYLES
  /branches - Pixel Perfect from Figma
  Body class: page-node-branches
  
  HTML Structure:
  article.node--type-branch
    > h2 (title)
    > div (inner wrapper)
        > ul.links.inline (button - 1st child)
        > div (image - 2nd child)  
        > div (address - 3rd/last child)
============================================*/

/*
 * !important REQUIRED: Drupal Views module generates inline grid styles
 * via PHP that cannot be modified without core/module edits. These overrides
 * force vertical card layout over the default 3-column horizontal grid.
 */
.page-node-branches .views-view-grid.horizontal.cols-3 {
  display: block !important;
  max-width: 1017px !important;
  margin: 0 auto !important;
  padding: 0 20px 100px !important;
}

/* Each row - stack vertically */
.page-node-branches .views-view-grid .views-row {
  display: block !important;
  width: 100% !important;
  clear: both !important;
}

/* Each column takes full width and stacks with 41px gap */
.page-node-branches .views-view-grid .views-col {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 0 41px 0 !important;
  float: none !important;
  display: block !important;
}

/* ===========================================
   BRANCH CARD - Main Container
   Figma: 1017px x 322px, #232323, no radius
=========================================== */
.page-node-branches article.node--type-branch.node--view-mode-teaser {
  display: block !important;
  position: relative !important;
  background: #232323 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  height: 322px !important;
  max-width: 1017px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* ===========================================
   TITLE (H2) - Figma: 34.8px Squada One
   Position: Top left of content area
=========================================== */
.page-node-branches article.node--type-branch.node--view-mode-teaser>h2 {
  position: absolute !important;
  top: 45px !important;
  left: 50px !important;
  width: calc(57% - 100px) !important;
  z-index: 10 !important;
  font-family: var(--Squada), 'Squada One', sans-serif !important;
  font-size: 34.8px !important;
  font-weight: 400 !important;
  line-height: 38.84px !important;
  color: #fff !important;
  margin: 0 !important;
  padding: 0 !important;
}

.page-node-branches article.node--type-branch.node--view-mode-teaser>h2 a {
  color: #fff !important;
  text-decoration: none !important;
}

.page-node-branches article.node--type-branch.node--view-mode-teaser>h2 a:hover {
  color: var(--secondColor, #C9A227) !important;
}

/* Hide the separator on H2 - will add to content area */
.page-node-branches article.node--type-branch.node--view-mode-teaser>h2::after {
  display: none !important;
}

/* ===========================================
   INNER WRAPPER (div) - Content area
   Contains: button (ul), image (div), address (div)
=========================================== */
.page-node-branches article.node--type-branch.node--view-mode-teaser>div {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ===========================================
   IMAGE CONTAINER (2nd child div)
   Figma: 434px width, positioned right
=========================================== */
.page-node-branches article.node--type-branch.node--view-mode-teaser>div>div:nth-child(2) {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 43% !important;
  max-width: 434px !important;
  height: 100% !important;
  z-index: 5 !important;
  display: block !important;
}

.page-node-branches article.node--type-branch.node--view-mode-teaser>div>div:nth-child(2) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ===========================================
   ADDRESS (3rd/last child div)
   Figma: 12.65px Montserrat, #b5b5b5
   Position: Below title with separator
=========================================== */
.page-node-branches article.node--type-branch.node--view-mode-teaser>div>div:last-child {
  position: absolute !important;
  top: 145px !important;
  left: 50px !important;
  width: calc(57% - 100px) !important;
  z-index: 10 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12.65px !important;
  font-weight: 400 !important;
  line-height: 18.98px !important;
  color: #b5b5b5 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Separator line above address */
.page-node-branches article.node--type-branch.node--view-mode-teaser>div>div:last-child::before {
  content: '' !important;
  display: block !important;
  width: 39.5px !important;
  height: 0 !important;
  border-bottom: 1.58px solid #383838 !important;
  margin-bottom: 23px !important;
}

/* ===========================================
   BUTTON (ul.links.inline - 1st child)
   Figma: 0.8px border, View Branch text
=========================================== */
.page-node-branches article.node--type-branch.node--view-mode-teaser>div>ul.links.inline,
.page-node-branches article.node--type-branch.node--view-mode-teaser .links.inline {
  position: absolute !important;
  bottom: 45px !important;
  left: 50px !important;
  z-index: 10 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.page-node-branches article.node--type-branch.node--view-mode-teaser .links.inline li {
  margin: 0 !important;
  padding: 0 !important;
}

.page-node-branches article.node--type-branch.node--view-mode-teaser .links.inline a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14.6px 24px !important;
  border: 0.8px solid #fff !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  min-width: 130px !important;
}

/* Insert "VIEW BRANCH" text via pseudo-element */
.page-node-branches article.node--type-branch.node--view-mode-teaser .links.inline a::before {
  content: "VIEW BRANCH" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11.07px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.79px !important;
  white-space: nowrap !important;
}

.page-node-branches article.node--type-branch.node--view-mode-teaser .links.inline a:hover {
  background: #fff !important;
}

.page-node-branches article.node--type-branch.node--view-mode-teaser .links.inline a:hover::before {
  color: #000 !important;
}

/* Hide the visually-hidden span */
.page-node-branches article.node--type-branch.node--view-mode-teaser .links.inline a .visually-hidden {
  display: none !important;
}

/* Header Text Section - EXACT Figma specs (node 1-5124) */
/* IMPORTANT: In Figma, BOTH lines use SAME styling: Squada One 38.63px white */
/* NOTE: Removed 'header' from selector - it was incorrectly targeting .siteHeader */
.page-node-branches .view-header,
.page-node-branches .branches-header-text {
  text-align: center !important;
  padding: 80px 20px 70px !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  font-family: var(--Squada), 'Squada One', sans-serif !important;
  font-size: 38.63px !important;
  line-height: 47px !important;
  color: #fff !important;
}

/* Both H2 and P use SAME Squada One 38.63px styling per Figma */
.page-node-branches .view-header h2,
.page-node-branches header h2,
.page-node-branches .branches-header-text h2,
.page-node-branches .view-header .branches-header-text h2,
.page-node-branches .view-header p,
.page-node-branches header p,
.page-node-branches .branches-header-text p,
.page-node-branches .view-header .branches-header-text p {
  font-family: var(--Squada), 'Squada One', sans-serif !important;
  font-size: 38.63px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  text-transform: none !important;
  color: #fff !important;
  line-height: 47px !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
  width: 100% !important;
  text-align: center !important;
}

/*===========================================
  INDIVIDUAL BRANCH PAGE STYLES
  /node/XX - Full view mode
  Body class: page-node-type-branch
  Figma node: 1-5210
  
  STRUCTURE:
  article.node--type-branch
    └── div (wrapper)
        ├── div:nth-child(1) = Welcome + Description
        ├── div:nth-child(2) = Address link (HIDE)
        ├── div:nth-child(3) = Google Map iframe
        ├── div:nth-child(4) = Info Card (address, phone, hours, email)
        └── div:nth-child(5) = Gallery (4 images)
============================================*/

/* Main Content Container */
.page-node-type-branch article.node--type-branch.node--view-mode-full,
.node--type-branch.node--view-mode-full {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 20px;
}

/*===========================================
  WRAPPER - Grid Layout for all sections
============================================*/
.page-node-type-branch article.node--type-branch>div {
  display: grid !important;
  grid-template-columns: 37% 63% !important;
  grid-template-areas:
    "desc desc"
    "info map"
    "gallery gallery" !important;
  gap: 0 !important;
  grid-auto-rows: min-content !important;
}

/* Hide redundant address link (div 2) */
.page-node-type-branch article.node--type-branch>div>div:nth-child(2) {
  display: none !important;
}

/*===========================================
  Welcome Header + Description (div 1)
============================================*/
.page-node-type-branch article.node--type-branch>div>div:nth-child(1) {
  grid-area: desc !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 33px !important;
  margin-bottom: 68px !important;
}

/* Welcome Title */
.page-node-type-branch article.node--type-branch>div>div:nth-child(1) p:first-child,
.page-node-type-branch article.node--type-branch>div>div:nth-child(1) strong:first-child {
  font-family: var(--Squada), 'Squada One', sans-serif !important;
  font-size: 33px !important;
  font-weight: 400 !important;
  color: #fff !important;
  line-height: 37px !important;
  margin: 0 !important;
  display: block !important;
}

/* Welcome Text / Body */
.page-node-type-branch article.node--type-branch>div>div:nth-child(1) p:nth-child(2) {
  color: #d0d0d0 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 17.6px !important;
  font-weight: 400 !important;
  line-height: 35px !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/*===========================================
  INFO CARD + MAP - Side by Side Layout
  Both elements share the same row and match heights
============================================*/

/* Map Container (div 3) - RIGHT side */
.page-node-type-branch article.node--type-branch>div>div:nth-child(3) {
  grid-area: map !important;
  background: #fff !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 374px !important;
}

/* Map iframe - fills container height */
.page-node-type-branch article.node--type-branch>div>div:nth-child(3) iframe,
.page-node-type-branch iframe {
  width: 100% !important;
  /*height: 100% !important;*/
  flex: 1 1 auto !important;
  min-height: 0 !important;
  border: none !important;
  display: block !important;
}

/* Info Card (div 4) - LEFT side */
.page-node-type-branch article.node--type-branch>div>div:nth-child(4) {
  grid-area: info !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 28px !important;
  padding: 40px 50px 40px 110px !important;
  background: #fff !important;
  color: #101010 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15.5px !important;
  line-height: 23px !important;
  height: 374px !important;
  box-sizing: border-box !important;
}

/* Info Card Address */
.page-node-type-branch article.node--type-branch>div>div:nth-child(4) p,
.page-node-type-branch article.node--type-branch>div>div:nth-child(4) div {
  color: #101010 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 400 !important;
  line-height: 23px !important;
  margin: 0 !important;
}

/* Info Card content wrapper */
.page-node-type-branch article.node--type-branch>div>div:nth-child(4) > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Email Button */
.page-node-type-branch a[href^="mailto"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 18px 16px !important;
  border: 1px solid #0e0e0e !important;
  background: transparent !important;
  color: #0e0e0e !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.96px !important;
  text-decoration: none !important;
  margin-top: 0 !important;
  transition: all 0.3s ease !important;
  max-width: 442px !important;
  min-height: 54px !important;
  box-sizing: border-box !important;
}

.page-node-type-branch a[href^="mailto"]::before,
.page-node-type-branch a[href^="mailto"]::after {
  content: "";
  display: inline-block;
  width: 17px;
  height: 1px;
  background: #0e0e0e;
}

.page-node-type-branch a[href^="mailto"]:hover {
  background: #0e0e0e !important;
  color: #fff !important;
}

.page-node-type-branch a[href^="mailto"]:hover::before,
.page-node-type-branch a[href^="mailto"]:hover::after {
  background: #fff;
}

/*===========================================
  GALLERY - 4 Images in Horizontal Row (div 5)
============================================*/

/* Gallery container */
.page-node-type-branch article.node--type-branch>div>div:nth-child(5) {
  grid-area: gallery !important;
  display: flex !important;
  gap: 44px !important;
  margin-top: 68px !important;
  margin-bottom: 80px !important;
}

/* Each gallery image wrapper */
.page-node-type-branch article.node--type-branch>div>div:nth-child(5)>div {
  flex: 1 1 0 !important;
  overflow: hidden;
  border-radius: 0;
  aspect-ratio: 257 / 298;
}

/* Gallery images */
.page-node-type-branch article.node--type-branch>div>div:nth-child(5) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.3s ease !important;
}

.page-node-type-branch article.node--type-branch>div>div:nth-child(5)>div:hover img {
  transform: scale(1.05);
}

/*===========================================
  RESPONSIVE STYLES - BRANCHES PAGES
============================================*/

/* ============================================
   iPad Pro & iPad Air (768px - 1024px)
   Same layout as desktop (horizontal split)
   ============================================ */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Grid container */
  .page-node-branches .views-view-grid.horizontal.cols-3 {
    display: block !important;
    padding: 0 30px 80px 30px !important;
  }

  .page-node-branches .views-view-grid .views-row {
    display: block !important;
    width: 100% !important;
    margin-bottom: 30px !important;
  }

  .page-node-branches .views-view-grid .views-col {
    width: 100% !important;
    margin: 0 0 25px 0 !important;
  }

  /* Card - Same as desktop layout */
  .page-node-branches article.node--type-branch.node--view-mode-teaser {
    height: 280px !important;
  }

  /* Title */
  .page-node-branches article.node--type-branch.node--view-mode-teaser > h2 {
    top: 35px !important;
    left: 35px !important;
    width: calc(55% - 70px) !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  /* Image - Right side */
  .page-node-branches article.node--type-branch.node--view-mode-teaser > div > div:nth-child(2) {
    width: 45% !important;
  }

  /* Address */
  .page-node-branches article.node--type-branch.node--view-mode-teaser > div > div:last-child {
    top: 120px !important;
    left: 35px !important;
    width: calc(55% - 70px) !important;
    font-size: 11px !important;
  }

  /* Button */
  .page-node-branches article.node--type-branch.node--view-mode-teaser .links.inline {
    bottom: 35px !important;
    left: 35px !important;
  }

  .page-node-branches article.node--type-branch.node--view-mode-teaser .links.inline a {
            left: -15px;
    padding: 12px 20px !important;
    min-width: 110px !important;
  }

  .page-node-branches article.node--type-branch.node--view-mode-teaser .links.inline a::before {
    font-size: 10px !important;
  }

  /* Header text */
  .page-node-branches .view-header,
  .page-node-branches .branches-header-text {
    padding: 60px 30px 50px !important;
  }

  .page-node-branches .view-header h2,
  .page-node-branches .view-header p,
  .page-node-branches .branches-header-text h2,
  .page-node-branches .branches-header-text p {
    font-size: 32px !important;
    line-height: 40px !important;
  }

  /* Individual Branch Page - Keep desktop layout (side by side) */
  .page-node-type-branch article.node--type-branch > div {
    grid-template-columns: 40% 60% !important;
    grid-template-areas:
      "desc desc"
      "info map"
      "gallery gallery" !important;
    gap: 0 !important;
  }

  /* Main container padding */
  .page-node-type-branch article.node--type-branch.node--view-mode-full {
    padding: 50px 30px !important;
  }

  /* Description section */
  .page-node-type-branch article.node--type-branch > div > div:nth-child(1) {
    margin-bottom: 30px !important;
  }

  .page-node-type-branch article.node--type-branch > div > div:nth-child(1) p:first-child,
  .page-node-type-branch article.node--type-branch > div > div:nth-child(1) strong:first-child {
    font-size: 22px !important;
  }

  .page-node-type-branch article.node--type-branch > div > div:nth-child(1) p:nth-child(2) {
    font-size: 14px !important;
  }

  /* Map container - RIGHT side */
  .page-node-type-branch article.node--type-branch > div > div:nth-child(3) {
    /*border-radius: 0 10px 10px 0 !important;*/
  }

  .page-node-type-branch article.node--type-branch > div > div:nth-child(3) iframe {
    min-height: 300px !important;
  }

  /* Info Card - LEFT side */
  .page-node-type-branch article.node--type-branch > div > div:nth-child(4) {
    /*border-radius: 10px 0 0 10px !important;*/
    padding: 25px !important;
    font-size: 13px !important;
  }

  /* Email button */
  .page-node-type-branch a[href^="mailto"] {
    padding: 12px 20px !important;
    font-size: 10px !important;
  }

  /* Gallery - 4 columns like desktop */
  .page-node-type-branch article.node--type-branch > div > div:nth-child(5) {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    margin: 40px 0 60px !important;
  }
}

/* ============================================
   Mobile (below 768px)
   Full-image cards with overlay content
   ============================================ */
@media (max-width: 767px) {

  /* Grid container */
  .page-node-branches .views-view-grid.horizontal.cols-3 {
    display: block !important;
    padding: 0 15px 60px 15px !important;
  }

  .page-node-branches .views-view-grid .views-row {
    display: block !important;
    width: 100% !important;
    margin-bottom: 15px !important;
  }

  .page-node-branches .views-view-grid .views-col {
    width: 100% !important;
    margin: 0 0 15px 0 !important;
  }

  /* Card - Full image with overlay */
  .page-node-branches article.node--type-branch.node--view-mode-teaser {
    height: 300px !important;
    background: #000 !important;
  }

  /* Image - Full card background */
  .page-node-branches article.node--type-branch.node--view-mode-teaser > div > div:nth-child(2) {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    z-index: 0 !important;
  }

  .page-node-branches article.node--type-branch.node--view-mode-teaser > div > div:nth-child(2) img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Dark gradient overlay */
  .page-node-branches article.node--type-branch.node--view-mode-teaser > div > div:nth-child(2)::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.2) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  /* Title - Top left on image */
  .page-node-branches article.node--type-branch.node--view-mode-teaser > h2 {
    top: 25px !important;
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.9) !important;
  }

  /* Address - Bottom left, above button */
  .page-node-branches article.node--type-branch.node--view-mode-teaser > div > div:last-child {
    position: absolute !important;
    top: auto !important;
    bottom: 70px !important;
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: rgba(255,255,255,0.85) !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9) !important;
  }

  /* Hide separator line on mobile */
  .page-node-branches article.node--type-branch.node--view-mode-teaser > div > div:last-child::before {
    display: none !important;
  }

  /* Button - Bottom left */
  .page-node-branches article.node--type-branch.node--view-mode-teaser .links.inline {
    bottom: 20px !important;
    left: 20px !important;
  }

  .page-node-branches article.node--type-branch.node--view-mode-teaser .links.inline a {
            top: 10px;
        left: -30px;
    padding: 10px 18px !important;
    min-width: 110px !important;
  }

  .page-node-branches article.node--type-branch.node--view-mode-teaser .links.inline a::before {
    font-size: 10px !important;
  }

  /* Header text */
  .page-node-branches .view-header,
  .page-node-branches .branches-header-text {
    padding: 50px 20px 40px !important;
  }

  .page-node-branches .view-header h2,
  .page-node-branches .view-header p,
  .page-node-branches .branches-header-text h2,
  .page-node-branches .branches-header-text p {
    font-size: 26px !important;
    line-height: 34px !important;
  }

  /* Individual Branch Page - Keep desktop-like layout */
  .page-node-type-branch article.node--type-branch.node--view-mode-full {
    padding: 30px 15px !important;
  }

  .page-node-type-branch article.node--type-branch > div {
    grid-template-columns: 40% 60% !important;
    grid-template-areas:
      "desc desc"
      "info map"
      "gallery gallery" !important;
    gap: 0 !important;
  }

  /* Description section */
  .page-node-type-branch article.node--type-branch > div > div:nth-child(1) {
    margin-bottom: 30px !important;
    gap: 20px !important;
  }

  .page-node-type-branch article.node--type-branch > div > div:nth-child(1) p:first-child,
  .page-node-type-branch article.node--type-branch > div > div:nth-child(1) strong:first-child {
    font-size: 22px !important;
    line-height: 26px !important;
  }

  .page-node-type-branch article.node--type-branch > div > div:nth-child(1) p:nth-child(2) {
    font-size: 14px !important;
    line-height: 24px !important;
  }

  /* Map container - RIGHT side like desktop */
  .page-node-type-branch article.node--type-branch > div > div:nth-child(3) {
    height: 280px !important;
    border-radius: 0 10px 10px 0 !important;
    overflow: hidden !important;
  }

  .page-node-type-branch article.node--type-branch > div > div:nth-child(3) iframe {
    min-height: 280px !important;
    height: 100% !important;
    border-radius: 0 10px 10px 0 !important;
  }

  /* Info Card - LEFT side like desktop */
  .page-node-type-branch article.node--type-branch > div > div:nth-child(4) {
    height: 280px !important;
    border-radius: 10px 0 0 10px !important;
    padding: 20px !important;
    font-size: 12px !important;
    line-height: 18px !important;
    gap: 15px !important;
    overflow: hidden !important;
  }

  /* Info Card text responsiveness */
  .page-node-type-branch article.node--type-branch > div > div:nth-child(4) p,
  .page-node-type-branch article.node--type-branch > div > div:nth-child(4) div {
    font-size: 12px !important;
    line-height: 18px !important;
  }

  .page-node-type-branch article.node--type-branch > div > div:nth-child(4) > div:first-child {
    gap: 8px !important;
  }

  /* Email button */
  .page-node-type-branch a[href^="mailto"] {
    padding: 10px 14px !important;
    font-size: 9px !important;
    min-height: 40px !important;
  }

  .page-node-type-branch a[href^="mailto"]::before,
  .page-node-type-branch a[href^="mailto"]::after {
    width: 12px !important;
  }

  /* Gallery - 2x2 Grid (2 top, 2 bottom) */
  .page-node-type-branch article.node--type-branch > div > div:nth-child(5) {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    gap: 15px !important;
    margin: 40px 0 50px !important;
  }

  .page-node-type-branch article.node--type-branch > div > div:nth-child(5) > div {
    aspect-ratio: 1 / 1 !important;
    border-radius: 8px !important;
    flex: none !important;
    overflow: hidden !important;
  }
}

/* ============================================
   Small Mobile (480px and below)
   ============================================ */
@media (max-width: 480px) {

  /* Card height */
  .page-node-branches article.node--type-branch.node--view-mode-teaser {
    height: 280px !important;
  }

  /* Title */
  .page-node-branches article.node--type-branch.node--view-mode-teaser > h2 {
    top: 20px !important;
    left: 15px !important;
    right: 15px !important;
    font-size: 20px !important;
  }

  /* Address */
  .page-node-branches article.node--type-branch.node--view-mode-teaser > div > div:last-child {
    bottom: 60px !important;
    left: 15px !important;
    right: 15px !important;
    font-size: 10px !important;
  }

  /* Button */
  .page-node-branches article.node--type-branch.node--view-mode-teaser .links.inline {
    bottom: 15px !important;
    left: 15px !important;
  }

  .page-node-branches article.node--type-branch.node--view-mode-teaser .links.inline a {
    top: 20px;
    left: -35px;
    padding: 8px 16px !important;
    min-width: 100px !important;
  }

  .page-node-branches article.node--type-branch.node--view-mode-teaser .links.inline a::before {
    font-size: 9px !important;
    letter-spacing: 0.5px !important;
  }

  /* Header text */
  .page-node-branches .view-header h2,
  .page-node-branches .view-header p,
  .page-node-branches .branches-header-text h2,
  .page-node-branches .branches-header-text p {
    font-size: 22px !important;
    line-height: 30px !important;
  }

  /* Individual Branch Page - Small Mobile - Keep side by side layout */
  .page-node-type-branch article.node--type-branch.node--view-mode-full {
    padding: 25px 12px !important;
  }

  .page-node-type-branch article.node--type-branch > div > div:nth-child(1) {
    gap: 15px !important;
  }

  .page-node-type-branch article.node--type-branch > div > div:nth-child(1) p:first-child,
  .page-node-type-branch article.node--type-branch > div > div:nth-child(1) strong:first-child {
    font-size: 18px !important;
    line-height: 22px !important;
  }

  .page-node-type-branch article.node--type-branch > div > div:nth-child(1) p:nth-child(2) {
    font-size: 12px !important;
    line-height: 20px !important;
  }

  /* Info Card + Map - smaller height for small mobile */
  .page-node-type-branch article.node--type-branch > div > div:nth-child(3),
  .page-node-type-branch article.node--type-branch > div > div:nth-child(4) {
    height: 220px !important;
  }

  /* Map with border radius */
  .page-node-type-branch article.node--type-branch > div > div:nth-child(3) {
    border-radius: 0 8px 8px 0 !important;
  }

  .page-node-type-branch article.node--type-branch > div > div:nth-child(3) iframe {
    border-radius: 0 8px 8px 0 !important;
  }

  /* Info Card with border radius and responsive text */
  .page-node-type-branch article.node--type-branch > div > div:nth-child(4) {
    border-radius: 8px 0 0 8px !important;
    padding: 15px 12px !important;
    font-size: 10px !important;
    line-height: 15px !important;
    gap: 10px !important;
  }

  .page-node-type-branch article.node--type-branch > div > div:nth-child(4) p,
  .page-node-type-branch article.node--type-branch > div > div:nth-child(4) div {
    font-size: 10px !important;
    line-height: 15px !important;
  }

  .page-node-type-branch article.node--type-branch > div > div:nth-child(4) > div:first-child {
    gap: 6px !important;
  }

  .page-node-type-branch article.node--type-branch > div > div:nth-child(3) iframe {
    min-height: 220px !important;
  }

  /* Email button smaller */
  .page-node-type-branch a[href^="mailto"] {
    padding: 8px 12px !important;
    font-size: 8px !important;
    min-height: 36px !important;
  }

  .page-node-type-branch a[href^="mailto"]::before,
  .page-node-type-branch a[href^="mailto"]::after {
    width: 10px !important;
  }

  /* Gallery - 2x2 Grid */
  .page-node-type-branch article.node--type-branch > div > div:nth-child(5) {
    gap: 10px !important;
    margin: 30px 0 40px !important;
  }

  .page-node-type-branch article.node--type-branch > div > div:nth-child(5) > div {
    border-radius: 6px !important;
    overflow: hidden !important;
  }
}

/*===========================================
  BRANCH PAGE HERO TITLE OVERLAY
  Pixel-perfect Figma implementation
============================================*/

/* 1. Hero Container - Full width breakout */
.page-node-type-branch .views-element-container .views-row {
  position: relative !important;
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  transform: none !important;
  overflow: hidden !important;
  height: 700px !important;
  /* Fixed container height */
}

/* 2. Title Position - EXACT FIGMA: left calc(50%-600px), top calc(50%-26px) */
.page-node-type-branch .views-field-title {
  display: block !important;
  position: absolute !important;
  top: calc(50% - 26px) !important;
  /* Figma exact */
  left: calc(50% - 600px) !important;
  /* Figma exact */
  transform: none !important;
  z-index: 20;
  width: auto !important;
  max-width: 60% !important;
  text-align: left !important;
  pointer-events: none;
}

/* 3. Title Typography - EXACT FIGMA: 81.27px, #e3e3e3, line-height 0.963 */
.page-node-type-branch .views-field-title span,
.page-node-type-branch .views-field-title .field-content {
  font-family: var(--Squada), 'Squada One', sans-serif !important;
  font-size: 81.27px !important;
  /* Figma exact */
  line-height: 0.963 !important;
  /* Figma exact */
  font-weight: 400 !important;
  text-transform: none !important;
  color: #e3e3e3 !important;
  /* Figma exact */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6) !important;
  display: block !important;
  white-space: normal !important;
  margin: 0;
}

/* 4. Hero Image Container - Fixed 700px height */
.page-node-type-branch .views-field-field-page-image {
  /*position: relative !important;*/
  width: 100% !important;
  height: 700px !important;
  /* Figma: 700px */
  overflow: hidden !important;
  display: block !important;
  z-index: 1;
}

/* 5. Hero Image - COVER: Fill full width, Figma positioning */
.page-node-type-branch .views-field-field-page-image img {
  width: 100% !important;
  height: 154.02% !important;
  /* Figma exact */
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
  position: absolute !important;
  top: -11.47% !important;
  /* Figma exact - centers the image */
  left: 0 !important;
}

/* 6. Dark overlay on hero image - FIGMA: rgba(0,0,0,0.4) */
.page-node-type-branch .views-field-field-page-image::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.4) !important;
  /* Figma exact */
  z-index: 2 !important;
  pointer-events: none !important;
}

/*===========================================
  HERO TITLE RESPONSIVE BREAKPOINTS
============================================*/

/* iPad Pro and larger tablets (1024px - 1200px) */
@media (max-width: 1200px) {

  /* Adjust title position for tablets */
  .page-node-type-branch .views-field-title {
    left: 5% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    max-width: 50% !important;
  }

  /* Scale down title font */
  .page-node-type-branch .views-field-title span,
  .page-node-type-branch .views-field-title .field-content {
    font-size: clamp(50px, 6vw, 70px) !important;
  }
}

/* iPad / Tablet portrait (768px - 1024px) */
@media (max-width: 1024px) {

  /* Reduce hero height for iPad */
  /*.page-node-type-branch .views-element-container .views-row,
  .page-node-type-branch .views-field-field-page-image {
    height: 550px !important;
  }*/

  /* Adjust image positioning for smaller height */
  .page-node-type-branch .views-field-field-page-image img {
    height: 130% !important;
    top: -8% !important;
  }

  /* Title adjustments for iPad */
  .page-node-type-branch .views-field-title {
        left: 10% !important;
    max-width: 55% !important;
  }

  .page-node-type-branch .views-field-title span,
  .page-node-type-branch .views-field-title .field-content {
    font-size: clamp(40px, 5vw, 55px) !important;
    line-height: 1.05 !important;
  }
}

/* Mobile landscape and small tablets (481px - 767px) */
@media (max-width: 767px) {

  /* Mobile: smaller hero container */
  /*.page-node-type-branch .views-element-container .views-row,
  .page-node-type-branch .views-field-field-page-image {
    height: 400px !important;
  }*/


  /* Adjust image for mobile */
  .page-node-type-branch .views-field-field-page-image img {
    height: 120% !important;
    top: -5% !important;
  }

  /* Mobile: title positioning */
  .page-node-type-branch .views-field-title {
    left: 3% !important;
    max-width: 65% !important;
  }

  /* Mobile: smaller title */
  .page-node-type-branch .views-field-title span,
  .page-node-type-branch .views-field-title .field-content {
    font-size: clamp(28px, 7vw, 40px) !important;
    line-height: 1.1 !important;
  }
}

/* Mobile portrait (up to 480px) */
@media (max-width: 480px) {

  /* Small mobile: compact hero */
  /*.page-node-type-branch .views-element-container .views-row,
  .page-node-type-branch .views-field-field-page-image {
    height: 350px !important;
  }
    */

  /* Adjust image for small mobile */
  .page-node-type-branch .views-field-field-page-image img {
    height: 115% !important;
    top: -4% !important;
  }

  /* Small mobile: title */
  .page-node-type-branch .views-field-title {
    /*left: 3% !important;
    max-width: 70% !important;*/
    top: 40% !important;
    left: 20% !important;
    max-width: 70% !important;
  }

  .page-node-type-branch .views-field-title span,
  .page-node-type-branch .views-field-title .field-content {
    font-size: clamp(24px, 6.5vw, 32px) !important;
    line-height: 1.15 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
  }
}