/* =========================================
   WELCOME
========================================= */

.welcome{
  min-height:700px;
  padding:100px 0 100px;
  position:relative;
  overflow:hidden;
  background:var(--cream);

  display:grid;
  grid-template-columns:1fr minmax(520px,720px) 1fr;
  align-items:center;
  gap:64px;
}

.welcome-copy{
  position:relative;
  z-index:2;
  width:100%;
  margin:0 auto;
  text-align:center;
}

.welcome h1{
  margin:0 0 30px;

  font-size:30px;
  line-height:1.08;
  font-weight:400;

  text-transform:none;
}

.welcome p{
  max-width:720px;
  margin:0 auto 18px;
  color:#111;
  font-size:15px;
  line-height:1.78;
  letter-spacing:.0px;
}

/* LINK */

.text-link,
.discover{
  position:relative;
  display:inline-flex;

  margin-top:22px;
  padding-bottom:5px;
  color:#4e4e4e;
  font-size:14px;
  font-weight:500;
  letter-spacing:.1px;
  text-transform:uppercase;
}

.text-link::after,
.discover::after{
  content:"";

  position:absolute;
  left:0;
  bottom:0;

  width:100%;
  height:1px;

  background:var(--red);

  transition:transform .38s ease;
}

.text-link:hover::after,
.discover:hover::after{
  transform:scaleX(1.18);
}

/* =========================================
   WELCOME IMAGES
========================================= */

.welcome-art{
  position:relative;
  z-index:1;
  pointer-events:none;
}

.welcome-art img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  filter:none;
  opacity:1;

  transition:transform .65s cubic-bezier(.22,.72,.22,1);
}

.welcome-art img:hover{
  transform:scale(1.015);
}

/* LEFT IMAGE */

.welcome-art-left{
  justify-self:end;
  align-self:end;

  width:200px;
  height:250px;

  margin-bottom:-10px;
}

/* RIGHT IMAGE */

.welcome-art-right{
  justify-self:start;
  align-self:start;

  width:200px;
  height:250px;

  margin-top:8px;
}

/* =========================================
   VIDEO SECTION
========================================= */

.video-section{
  position:relative;
  min-height:500px;

  display:flex;
  align-items:center;

  color:#fff;
  overflow:hidden;
}

.video-section video{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  z-index:0;
}

.video-section::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:1;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.68),
      rgba(0,0,0,.38) 52%,
      rgba(0,0,0,.56)
    ),
    rgba(97,54,15,.30);
}

.split{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:1.03fr .97fr;

  gap:110px;
  align-items:center;

  padding:72px 0;
}

.eyebrow{
  display:block;
  margin-bottom:15px;

  font-size:10px;
  font-weight:800;

  letter-spacing:.28em;
  text-transform:uppercase;
}

.split h2{
  font-size:30px;
  line-height:1.38;

  text-transform:none;
}

.split p{
  font-size:14px;
  line-height:1.95;

  color:rgba(255,255,255,.9);
}

/* =========================================
   BRAND
========================================= */

.brand{
  padding:105px 0 88px;
  background:var(--cream);
}

.section-head{
  width:min(690px,86%);
  margin:0 auto 76px;

  text-align:center;
}

.section-head h2{
  font-size:30px;
  text-transform:none;

  margin-bottom:22px;
}

.section-head p{
  font-size:14px;
  line-height:1.9;

  letter-spacing:.012em;
}

/* =========================================
   TABS
========================================= */

.tabs{
  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:0;
  margin-bottom:28px;

  border-bottom:1px solid var(--line);
}

.tab{
  position:relative;

  appearance:none;
  border:0;
  background:transparent;

  padding:0 0 12px;

  color:#050505;

  font-size:12px;
  line-height:1;
  font-weight:600;

  letter-spacing:.16em;
  text-transform:uppercase;

  transition:color .25s ease;
}

.tab::before{
  content:"";

  position:absolute;
  left:0;
  right:100%;
  bottom:-1px;

  height:1px;

  background:var(--red);

  transition:right .35s ease;
}

.tab.active,
.tab:hover{
  color:var(--red);
}

.tab.active::before,
.tab:hover::before{
  right:0;
}

/* =========================================
   HOTEL GRID
========================================= */

.hotel-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:32px 24px;
}

.hotel-card{
  opacity:1;
  transform:translateY(0);

  transition:
    opacity .35s ease,
    filter .35s ease,
    transform .35s ease;
}

.hotel-card.dim{
  opacity:.24;
  filter:grayscale(1);
}

.hotel-card:hover{
  opacity:1;
  filter:none;

  transform:translateY(-4px);
}

.hotel-img{
  height:168px;

  object-fit:cover;

  margin-bottom:12px;

  background:#d6d0c2;
}

.hotel-card h3{
  font-size:20px;
  margin-bottom:8px;
}

.hotel-card p{
  margin:0 0 14px;
  font-size:14px;
}

.discover{
  margin-top:0;
}

/* =========================================
   TABLET
========================================= */

@media(max-width:980px){

  .welcome{
    min-height:auto;
    padding:92px 36px 82px;

    display:grid;
    grid-template-columns:110px 1fr 110px;
    gap:22px;

    align-items:center;
  }

  .welcome h1{
    font-size:34px;
  }

  .welcome p{
    font-size:14px;
    line-height:1.9;
  }

  .welcome-art-left{
    width:110px;
    height:150px;

    margin-bottom:0;
  }

  .welcome-art-right{
    width:110px;
    height:150px;

    margin-top:0;
  }

  .split{
    grid-template-columns:1fr;

    gap:30px;
    padding:64px 0;

    text-align:center;
    justify-items:center;
  }

  .split h2{
    font-size:28px;
  }

  .split h2,
  .split p{
    max-width:680px;
    margin-inline:auto;
  }

  .hotel-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .tabs{
    display:none;
  }

  .hotel-card,
  .hotel-card.dim{
    opacity:1;
    filter:none;
  }

  .section-head,
  .welcome-copy{
    text-align:center;
  }
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:560px){

  .welcome{
    padding:82px 28px 76px;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px 16px;

    align-items:start;
  }

  .welcome-copy{
    grid-column:1 / -1;
    order:1;

    text-align:center;
  }

  .welcome-art-left{
    grid-column:1;
    order:2;

    justify-self:start;

    width:112px;
    height:145px;

    margin:6px 0 0;
  }

  .welcome-art-right{
    grid-column:2;
    order:3;

    justify-self:end;

    width:112px;
    height:145px;

    margin:6px 0 0;
  }

  .welcome h1{
    margin-bottom:26px;

    font-size:30px;
    line-height:1.06;
  }

  .welcome p{
    max-width:100%;

    font-size:14px;
    line-height:1.9;

    text-align:center;
  }

  .text-link{
    justify-content:center;
  }

  .section-head h2{
    font-size:26px;
  }

  .brand{
    padding:74px 0 65px;
  }

  .section-head{
    margin-bottom:48px;
  }

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

  .hotel-img{
    height:210px;
  }
}/* =========================================
   WELCOME
========================================= */

.welcome{
  min-height:700px;
  padding:100px 0 100px;
  position:relative;
  overflow:hidden;
  background:var(--cream);

  display:grid;
  grid-template-columns:1fr minmax(520px,720px) 1fr;
  align-items:center;
  gap:64px;
}

.welcome-copy{
  position:relative;
  z-index:2;
  width:100%;
  margin:0 auto;
  text-align:center;
}

.welcome h1{
  margin:0 0 30px;

  font-size:30px;
  line-height:1.08;
  font-weight:400;

  text-transform:none;
}

.welcome p{
  max-width:720px;
  margin:0 auto 18px;

  color:#4e4e4e;

  font-size:14px;
  line-height:1.78;
  letter-spacing:.01em;
}

/* LINK */

.text-link,
.discover{
  position:relative;
  display:inline-flex;
  margin-top:22px;
  padding-bottom:5px;
  color:#4e4e4e;
  font-size:14px;
  font-weight:600;
  letter-spacing:.1px;
  text-transform:capitalize;
}

.text-link::after,
.discover::after{
  content:"";

  position:absolute;
  left:0;
  bottom:0;

  width:100%;
  height:1px;

  background:var(--red);

  transition:transform .38s ease;
}

.text-link:hover::after,
.discover:hover::after{
  transform:scaleX(1.18);
}

/* =========================================
   WELCOME IMAGES
========================================= */

.welcome-art{
  position:relative;
  z-index:1;
  pointer-events:none;
}

.welcome-art img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  filter:none;
  opacity:1;

  transition:transform .65s cubic-bezier(.22,.72,.22,1);
}

.welcome-art img:hover{
  transform:scale(1.015);
}

/* LEFT IMAGE */

.welcome-art-left{
  justify-self:end;
  align-self:end;

  width:200px;
  height:250px;

  margin-bottom:-10px;
}

/* RIGHT IMAGE */

.welcome-art-right{
  justify-self:start;
  align-self:start;

  width:200px;
  height:250px;

  margin-top:8px;
}

/* =========================================
   VIDEO SECTION
========================================= */

.video-section{
  position:relative;
  min-height:500px;

  display:flex;
  align-items:center;

  color:#fff;
  overflow:hidden;
}

.video-section video{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  z-index:0;
}

.video-section::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:1;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.68),
      rgba(0,0,0,.38) 52%,
      rgba(0,0,0,.56)
    ),
    rgba(97,54,15,.30);
}

.split{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:1.03fr .97fr;

  gap:110px;
  align-items:center;

  padding:72px 0;
}

.eyebrow{
  display:block;
  margin-bottom:15px;

  font-size:10px;
  font-weight:800;

  letter-spacing:.28em;
  text-transform:uppercase;
}

.split h2{
  font-size:30px;
  line-height:1.38;

  text-transform:none;
}

.split p{
  font-size:14px;
  line-height:1.95;

  color:rgba(255,255,255,.9);
}

/* =========================================
   BRAND
========================================= */

.brand{
  padding:105px 0 88px;
  background:var(--cream);
}

.section-head{
  width:min(690px,86%);
  margin:0 auto 76px;

  text-align:center;
}

.section-head h2{
  font-size:30px;
  text-transform:none;

  margin-bottom:22px;
}

.section-head p{
  font-size:14px;
  line-height:1.9;
  color:#4e4e4e;
  letter-spacing:.012em;
}

/* =========================================
   TABS
========================================= */

.tabs{
  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:0;
  margin-bottom:28px;

  border-bottom:1px solid var(--line);
}

.tab{
  position:relative;

  appearance:none;
  border:0;
  background:transparent;

  padding:0 0 12px;

  color:#050505;

  font-size:12px;
  line-height:1;
  font-weight:600;

  letter-spacing:.16em;
  text-transform:uppercase;

  transition:color .25s ease;
}

.tab::before{
  content:"";

  position:absolute;
  left:0;
  right:100%;
  bottom:-1px;

  height:1px;

  background:var(--red);

  transition:right .35s ease;
}

.tab.active,
.tab:hover{
  color:var(--red);
}

.tab.active::before,
.tab:hover::before{
  right:0;
}

/* =========================================
   HOTEL GRID
========================================= */

.hotel-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:32px 24px;
}

.hotel-card{
  opacity:1;
  transform:translateY(0);

  transition:
    opacity .35s ease,
    filter .35s ease,
    transform .35s ease;
}

.hotel-card.dim{
  opacity:.24;
  filter:grayscale(1);
}

.hotel-card:hover{
  opacity:1;
  filter:none;

  transform:translateY(-4px);
}

.hotel-img{
  height:168px;

  object-fit:cover;

  margin-bottom:12px;

  background:#d6d0c2;
}

.hotel-card h3{
  font-size:20px;
  margin-bottom:8px;
}

.hotel-card p{
  margin:0 0 14px;
  font-size:14px;
}

.discover{
  margin-top:0;
}

/* =========================================
   TABLET
========================================= */

@media(max-width:980px){

  .welcome{
    min-height:auto;
    padding:92px 36px 82px;

    display:grid;
    grid-template-columns:110px 1fr 110px;
    gap:22px;

    align-items:center;
  }

  .welcome h1{
    font-size:34px;
  }

  .welcome p{
    font-size:14px;
    line-height:1.9;
  }

  .welcome-art-left{
    width:110px;
    height:150px;

    margin-bottom:0;
  }

  .welcome-art-right{
    width:110px;
    height:150px;

    margin-top:0;
  }

  .split{
    grid-template-columns:1fr;

    gap:30px;
    padding:64px 0;

    text-align:center;
    justify-items:center;
  }

  .split h2{
    font-size:28px;
  }

  .split h2,
  .split p{
    max-width:680px;
    margin-inline:auto;
  }

  .hotel-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .tabs{
    display:none;
  }

  .hotel-card,
  .hotel-card.dim{
    opacity:1;
    filter:none;
  }

  .section-head,
  .welcome-copy{
    text-align:center;
  }
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:560px){

  .welcome{
    padding:82px 28px 76px;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px 16px;

    align-items:start;
  }

  .welcome-copy{
    grid-column:1 / -1;
    order:1;

    text-align:center;
  }

  .welcome-art-left{
    grid-column:1;
    order:2;

    justify-self:start;

    width:112px;
    height:145px;

    margin:6px 0 0;
  }

  .welcome-art-right{
    grid-column:2;
    order:3;

    justify-self:end;

    width:112px;
    height:145px;

    margin:6px 0 0;
  }

  .welcome h1{
    margin-bottom:26px;

    font-size:30px;
    line-height:1.06;
  }

  .welcome p{
    max-width:100%;

    font-size:14px;
    line-height:1.9;

    text-align:center;
  }

  .text-link{
    justify-content:center;
  }

  .section-head h2{
    font-size:26px;
  }

  .brand{
    padding:74px 0 65px;
  }

  .section-head{
    margin-bottom:48px;
  }

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

  .hotel-img{
    height:210px;
  }
}



/* =========================================
   EXCLUSIVE OFFERS
   Layout refined to match reference image
========================================= */

.exclusive-offers-section{
  position:relative !important;
  overflow:hidden !important;
  padding:76px 0 150px !important;
  background:var(--cream) !important;
  color:#111 !important;
}

.exclusive-offers-section *{
  box-sizing:border-box !important;
}

.exclusive-offers-inner{
  width:min(1250px,74vw) !important;
  margin:0 auto !important;
}

.exclusive-offers-head{
  display:grid !important;
  grid-template-columns:minmax(260px,1fr) minmax(420px,520px) !important;
  align-items:start !important;
  gap:90px !important;
  margin:0 0 46px !important;
}

.exclusive-offers-head h2{
  margin:0 !important;
  font-size:30px !important;
  line-height:1.08 !important;
  font-weight:400 !important;
  letter-spacing:.005em !important;
  text-transform:none !important;
}

.exclusive-offers-head p{
  margin:0 !important;
  max-width:520px !important;
  color:#111 !important;
  font-size:14px !important;
  line-height:1.32 !important;
  letter-spacing:.018em !important;
}

.exclusive-offers-control{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:18px !important;
  margin:42px 0 0 !important;
}

.exclusive-offers-line-main{
  display:block !important;
  width:100% !important;
  height:1px !important;
  min-height:1px !important;
  background:var(--red) !important;
}

.exclusive-offers-arrows{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:18px !important;
  white-space:nowrap !important;
}

.exclusive-offers-arrows button{
  position:relative !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  width:31px !important;
  min-width:31px !important;
  height:18px !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
  cursor:pointer !important;
  transition:opacity .28s ease, transform .28s ease !important;
}

.exclusive-offers-arrows button::before{
  content:"" !important;
  position:absolute !important;
  left:2px !important;
  right:2px !important;
  top:50% !important;
  height:1px !important;
  background:var(--red) !important;
  transform:translateY(-50%) !important;
}

.exclusive-offers-arrows button::after{
  content:"" !important;
  position:absolute !important;
  top:50% !important;
  width:7px !important;
  height:7px !important;
  border-top:1px solid var(--red) !important;
  border-right:1px solid var(--red) !important;
}

.exclusive-offers-prev::after{
  left:2px !important;
  transform:translateY(-50%) rotate(-135deg) !important;
}

.exclusive-offers-next::after{
  right:2px !important;
  transform:translateY(-50%) rotate(45deg) !important;
}

.exclusive-offers-arrows button:hover{
  opacity:.72 !important;
  transform:translateX(1px) !important;
}

.exclusive-offers-arrows button:disabled,
.exclusive-offers-arrows button.is-disabled{
  opacity:.28 !important;
  cursor:default !important;
  pointer-events:none !important;
  transform:none !important;
}

.exclusive-offers-arrows button:disabled::before,
.exclusive-offers-arrows button:disabled::after,
.exclusive-offers-arrows button.is-disabled::before,
.exclusive-offers-arrows button.is-disabled::after{
  opacity:.72 !important;
}

.exclusive-offers-view,
.exclusive-offer-link{
  position:relative !important;
  display:inline-flex !important;
  width:auto !important;
  padding:0 0 6px !important;
  color:#111 !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:600 !important;
  letter-spacing:.095em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  white-space:nowrap !important;
}

.exclusive-offers-view{
  font-size:14px !important;
  letter-spacing:1px !important;
  padding-bottom:0 !important;
}

.exclusive-offers-view{
  transition:color .32s ease, opacity .32s ease, transform .32s ease !important;
}

.exclusive-offers-view:hover{
  color:rgba(139,3,4,.72) !important;
  opacity:.86 !important;
  transform:translateY(-1px) !important;
}

.exclusive-offers-view:focus-visible{
  outline:1px solid rgba(139,3,4,.45) !important;
  outline-offset:5px !important;
}

.exclusive-offer-link::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:1px !important;
  background:var(--red) !important;
  transition:transform .38s ease !important;
}

.exclusive-offer-link:hover::after{
  transform:scaleX(1.18) !important;
}

.exclusive-offers-viewport{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
  position:relative !important;
  touch-action:pan-y !important;
  cursor:grab !important;
}

.exclusive-offers-track{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  gap:23px !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  transform:translate3d(0,0,0);
  transition:transform .72s cubic-bezier(.22,.72,.22,1) !important;
  will-change:transform !important;
}

.exclusive-offer-card{
  flex:0 0 calc((100% - 69px) / 4) !important;
  width:calc((100% - 69px) / 4) !important;
  min-width:0 !important;
  max-width:none !important;
  display:flex !important;
  flex-direction:column !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  float:none !important;
  clear:none !important;
  overflow:visible !important;
  transition:transform .45s ease !important;
}

.exclusive-offer-card:hover{
  transform:translateY(-4px) !important;
}

.exclusive-offer-image{
  display:block !important;
  width:100% !important;
  height:190px !important;
  min-height:190px !important;
  max-height:190px !important;
  margin:0 0 15px !important;
  overflow:hidden !important;
  background:#d6d0c2 !important;
  text-decoration:none !important;
}

.exclusive-offer-image img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:100% !important;
  min-height:100% !important;
  object-fit:cover !important;
  margin:0 !important;
  border:0 !important;
  transition:transform .65s cubic-bezier(.22,.72,.22,1) !important;
}

.exclusive-offer-card:hover .exclusive-offer-image img{
  transform:scale(1.035) !important;
}

.exclusive-offer-card h3{
  min-height:42px !important;
  margin:0 0 14px !important;
  color:#111 !important;
  font-size:20px !important;
  line-height:.96 !important;
  font-weight:400 !important;
  letter-spacing:-.01em !important;
  text-transform:none !important;
}

.exclusive-offer-card strong{
  display:block !important;
  min-height:18px !important;
  margin:0 0 16px !important;
  color:#111 !important;
  font-size:12px !important;
  line-height:1.35 !important;
  font-weight:800 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
}

.exclusive-offer-card p{
  margin:0 0 20px !important;
  color:#111 !important;
  font-size:14px !important;
  line-height:1.55 !important;
  letter-spacing:.01em !important;
  flex:1 1 auto !important;
}

.exclusive-offer-card .exclusive-offer-link{
  align-self:flex-start !important;
  margin-top:auto !important;
}


@media(max-width:1320px){
  .exclusive-offers-inner{
    width:min(1120px,82vw) !important;
  }

  .exclusive-offer-image{
    height:180px !important;
    min-height:180px !important;
    max-height:180px !important;
  }
}

@media(max-width:980px){
  .exclusive-offers-section{
    padding:78px 0 86px !important;
  }

  .exclusive-offers-inner{
    width:min(760px,88vw) !important;
  }

  .exclusive-offers-head{
    grid-template-columns:1fr !important;
    gap:22px !important;
    margin-bottom:38px !important;
    text-align:center !important;
    justify-items:center !important;
  }

  .exclusive-offers-head p{
    max-width:680px !important;
    line-height:1.72 !important;
  }

  .exclusive-offers-control{
    margin:36px 0 0 !important;
  }

  .exclusive-offer-card{
    flex-basis:calc((100% - 23px) / 2) !important;
    width:calc((100% - 23px) / 2) !important;
  }

  .exclusive-offer-image{
    height:230px !important;
    min-height:230px !important;
    max-height:230px !important;
  }

  .exclusive-offer-card h3{
    min-height:auto !important;
    line-height:1.06 !important;
  }
}

@media(max-width:560px){
  .exclusive-offers-section{
    padding:68px 0 68px !important;
  }

  .exclusive-offers-inner{
    width:100% !important;
    padding:0 22px !important;
  }

  .exclusive-offers-head{
    margin-bottom:34px !important;
  }

  .exclusive-offers-head h2{
    font-size:28px !important;
  }

  .exclusive-offers-head p{
    font-size:14px !important;
  }

  .exclusive-offers-control{
    grid-template-columns:1fr !important;
    gap:18px !important;
    margin:34px 0 0 !important;
    justify-items:center !important;
  }

  .exclusive-offers-line-main{
    order:1 !important;
    width:100% !important;
  }

  .exclusive-offers-arrows{
    order:2 !important;
    justify-content:center !important;
  }

  .exclusive-offers-view{
    order:3 !important;
    font-size:13px !important;
  }

  .exclusive-offer-card{
    flex-basis:100% !important;
    width:100% !important;
  }

  .exclusive-offer-image{
    height:245px !important;
    min-height:245px !important;
    max-height:245px !important;
  }

  .exclusive-offer-card h3{
    margin-bottom:14px !important;
    font-size:21px !important;
  }
}

/* =========================================
   GLOBAL CONTENT WIDTH LOCK
   Keep all section content aligned perfectly
   Added only to standardize inner widths.
========================================= */

:root{
  --lhag-section-width: min(1250px, 74vw);
}

.video-section > .container.split,
.brand > .wide-container,
.exclusive-offers-inner{
  width:var(--lhag-section-width) !important;
  max-width:var(--lhag-section-width) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.welcome{
  padding-left:calc((100vw - var(--lhag-section-width)) / 2) !important;
  padding-right:calc((100vw - var(--lhag-section-width)) / 2) !important;
  grid-template-columns:200px minmax(0,1fr) 200px !important;
  gap:64px !important;
}

.welcome-copy{
  max-width:720px !important;
}

.welcome p{
  max-width:720px !important;
}

@media(max-width:1320px){
  :root{
    --lhag-section-width: min(1120px, 82vw);
  }
}

@media(max-width:980px){
  :root{
    --lhag-section-width: min(760px, 88vw);
  }

  .video-section > .container.split,
  .brand > .wide-container,
  .exclusive-offers-inner{
    width:var(--lhag-section-width) !important;
    max-width:var(--lhag-section-width) !important;
  }

  .welcome{
    width:var(--lhag-section-width) !important;
    max-width:var(--lhag-section-width) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
    grid-template-columns:110px minmax(0,1fr) 110px !important;
    gap:22px !important;
  }
}

@media(max-width:560px){
  :root{
    --lhag-section-width:100%;
  }

  .video-section > .container.split,
  .brand > .wide-container,
  .exclusive-offers-inner,
  .welcome{
    width:100% !important;
    max-width:100% !important;
    padding-left:22px !important;
    padding-right:22px !important;
  }

  .welcome{
    grid-template-columns:1fr 1fr !important;
    gap:24px 16px !important;
  }
}

/* =========================================
   LUXURY TYPOGRAPHY STANDARD
   Refined only: line-height, letter-spacing, reading color.
   Layout, carousel, spacing blocks and HTML remain untouched.
========================================= */

:root{
  --lhag-reading-color:#4e4e4e;
  --lhag-heading-tracking:.002em;
  --lhag-body-tracking:.004em;
  --lhag-link-tracking:.035em;
  --lhag-body-leading:1.76;
  --lhag-compact-leading:1.48;
}

/* Main body copy */
.welcome p,
.section-head p,
.hotel-card p,
.exclusive-offers-head p,
.exclusive-offer-card p{
  color:var(--lhag-reading-color) !important;
  line-height:var(--lhag-body-leading) !important;
  letter-spacing:var(--lhag-body-tracking) !important;
  font-weight:400 !important;
}

/* Keep video-section copy readable on dark video overlay */
.video-section .split p{
  color:rgba(255,255,255,.9) !important;
  line-height:1.86 !important;
  letter-spacing:.006em !important;
}

/* Luxury title rhythm */
.welcome h1,
.section-head h2,
.split h2,
.exclusive-offers-head h2{
  line-height:1.12 !important;
  letter-spacing:var(--lhag-heading-tracking) !important;
}

.hotel-card h3,
.exclusive-offer-card h3{
  line-height:1.14 !important;
  letter-spacing:0 !important;
}

/* Supporting labels / prices */
.eyebrow{
  line-height:1.2 !important;
  letter-spacing:.24em !important;
}

.exclusive-offer-card strong{
  color:var(--lhag-reading-color) !important;
  line-height:1.45 !important;
  letter-spacing:.032em !important;
  font-weight:700 !important;
}

/* Tabs: premium spacing, less aggressive than full corporate uppercase */
.tab{
  line-height:1.18 !important;
  letter-spacing:.115em !important;
}

/* Links: title case, refined tracking */
.text-link,
.discover,
.exclusive-offers-view,
.exclusive-offer-link{
  color:var(--lhag-reading-color) !important;
  line-height:1.22 !important;
  letter-spacing:var(--lhag-link-tracking) !important;
  text-transform:none !important;
}

.exclusive-offers-view{
  letter-spacing:.03em !important;
}

/* Mobile readability */
@media(max-width:560px){
  .welcome p,
  .section-head p,
  .hotel-card p,
  .exclusive-offers-head p,
  .exclusive-offer-card p{
    line-height:1.72 !important;
    letter-spacing:.003em !important;
  }

  .welcome h1,
  .section-head h2,
  .split h2,
  .exclusive-offers-head h2{
    line-height:1.13 !important;
  }
}

/* =========================================
   LUXURY COLOR STANDARD
   Updated only typography colors.
   No layout, carousel, spacing or HTML changes.
========================================= */

:root{
  --lhag-title-color:#2b2723;
  --lhag-card-title-color:#2f2a26;
  --lhag-reading-color:#4e4e4e;
  --lhag-muted-color:#68625c;
}

/* Main section titles - softer charcoal, less heavy than pure black */
.welcome h1,
.section-head h2,
.split h2,
.exclusive-offers-head h2{
  color:var(--lhag-title-color) !important;
}

/* Titles on dark video sections stay white for contrast */
.video-section .split h2{
  color:#fff8ee !important;
}

/* Card titles */
.hotel-card h3,
.exclusive-offer-card h3{
  color:var(--lhag-card-title-color) !important;
}

/* Main reading text */
.welcome p,
.section-head p,
.hotel-card p,
.exclusive-offers-head p,
.exclusive-offer-card p{
  color:var(--lhag-reading-color) !important;
}

/* Supporting offer price / detail text */
.exclusive-offer-card strong{
  color:var(--lhag-muted-color) !important;
}

/* Links */
.text-link,
.discover,
.exclusive-offers-view,
.exclusive-offer-link{
  color:var(--lhag-reading-color) !important;
}

.text-link:hover,
.discover:hover,
.exclusive-offers-view:hover,
.exclusive-offer-link:hover{
  color:var(--red) !important;
}

/* Tabs */
.tab{
  color:var(--lhag-card-title-color) !important;
}

.tab.active,
.tab:hover{
  color:var(--red) !important;
}


/* =========================================
   WELCOME SCROLL MOTION + MOBILE STAGGER
   Final scoped overrides only for Welcome section.
========================================= */

.welcome .welcome-art{
  --welcome-scroll-y:0px;
  transform:translate3d(0,var(--welcome-scroll-y),0);
  transition:transform .18s linear;
  will-change:transform;
}

.welcome .welcome-art img{
  transform:scale(1);
}

.welcome .welcome-art:hover img{
  transform:scale(1.015);
}

/* Desktop: opposite gentle rhythm */
.welcome-art-left{
  margin-bottom:-26px !important;
}

.welcome-art-right{
  margin-top:-18px !important;
}

@media(max-width:560px){
  .welcome{
    padding-top:72px !important;
    grid-template-columns:1fr 1fr !important;
    align-items:start !important;
  }

  /* Images stay above the Welcome text on mobile */
  .welcome-art-left{
    grid-column:1 !important;
    grid-row:1 !important;
    order:1 !important;
    justify-self:start !important;
    width:42vw !important;
    max-width:158px !important;
    height:205px !important;
    margin:0 !important;
  }

  .welcome-art-right{
    grid-column:2 !important;
    grid-row:1 !important;
    order:2 !important;
    justify-self:end !important;
    width:42vw !important;
    max-width:158px !important;
    height:205px !important;
    margin:38px 0 0 !important;
  }

  .welcome-copy{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    order:3 !important;
    margin-top:24px !important;
  }
}

@media(max-width:380px){
  .welcome-art-left,
  .welcome-art-right{
    height:178px !important;
  }

  .welcome-art-right{
    margin-top:30px !important;
  }
}


/* =========================================
   WELCOME IMAGE OVERLAP + STRONGER SCROLL MOTION
   Scoped override: lantern image overlaps hand image,
   and both move more visibly while scrolling.
========================================= */

.welcome .welcome-art{
  transition:transform .08s linear !important;
  will-change:transform !important;
}

.welcome .welcome-art-left{
  z-index:1 !important;
}

.welcome .welcome-art-right{
  z-index:3 !important;
}

/* Desktop / tablet: keep the elegant side layout, but make motion clearer */
@media(min-width:561px){
  .welcome .welcome-art-left{
    transform:translate3d(0,calc(var(--welcome-scroll-y) * 1.15),0) !important;
  }

  .welcome .welcome-art-right{
    transform:translate3d(0,calc(var(--welcome-scroll-y) * 1.35),0) !important;
  }
}

/* Mobile: both images sit above Welcome, staggered and overlapping */
@media(max-width:560px){
  .welcome{
    grid-template-columns:1fr !important;
    gap:0 !important;
    padding-top:64px !important;
  }

  .welcome-art-left,
  .welcome-art-right{
    grid-column:1 !important;
    grid-row:1 !important;
    order:1 !important;
    pointer-events:none !important;
  }

  .welcome-art-left{
    justify-self:start !important;
    width:58vw !important;
    max-width:210px !important;
    height:255px !important;
    margin:0 0 0 2vw !important;
    z-index:1 !important;
    transform:translate3d(0,calc(var(--welcome-scroll-y) * 1.2),0) !important;
  }

  .welcome-art-right{
    justify-self:end !important;
    width:56vw !important;
    max-width:205px !important;
    height:245px !important;
    margin:58px 2vw 0 0 !important;
    z-index:4 !important;
    transform:translate3d(0,calc(var(--welcome-scroll-y) * 1.55),0) !important;
  }

  .welcome-copy{
    grid-column:1 !important;
    grid-row:2 !important;
    order:2 !important;
    margin-top:56px !important;
    position:relative !important;
    z-index:5 !important;
  }
}

@media(max-width:380px){
  .welcome-art-left{
    width:60vw !important;
    max-width:188px !important;
    height:228px !important;
    margin-left:0 !important;
  }

  .welcome-art-right{
    width:58vw !important;
    max-width:184px !important;
    height:220px !important;
    margin-top:50px !important;
    margin-right:0 !important;
  }

  .welcome-copy{
    margin-top:46px !important;
  }
}

/* =========================================
   WELCOME MOBILE IMAGE BALANCE — V4
   Reduce overlap on mobile while keeping the lantern image
   subtly layered over the hand image and clearly moving on scroll.
========================================= */

@media(max-width:560px){
  .welcome{
    padding-top:66px !important;
  }

  .welcome-art-left{
    width:52vw !important;
    max-width:198px !important;
    height:238px !important;
    margin:0 0 0 1vw !important;
    z-index:1 !important;
    transform:translate3d(0,calc(var(--welcome-scroll-y) * 1.15),0) !important;
  }

  .welcome-art-right{
    width:50vw !important;
    max-width:194px !important;
    height:226px !important;
    margin:42px 1vw 0 0 !important;
    z-index:4 !important;
    transform:translate3d(0,calc(var(--welcome-scroll-y) * 1.45),0) !important;
  }

  .welcome-copy{
    margin-top:42px !important;
  }
}

@media(max-width:430px){
  .welcome{
    padding-top:62px !important;
  }

  .welcome-art-left{
    width:51vw !important;
    max-width:176px !important;
    height:216px !important;
    margin-left:0 !important;
  }

  .welcome-art-right{
    width:49vw !important;
    max-width:172px !important;
    height:204px !important;
    margin-top:38px !important;
    margin-right:0 !important;
  }

  .welcome-copy{
    margin-top:36px !important;
  }
}

@media(max-width:380px){
  .welcome-art-left{
    width:50vw !important;
    max-width:158px !important;
    height:198px !important;
  }

  .welcome-art-right{
    width:48vw !important;
    max-width:154px !important;
    height:188px !important;
    margin-top:34px !important;
  }

  .welcome-copy{
    margin-top:32px !important;
  }
}

/* =========================================
   WELCOME MOBILE IMAGE BALANCE — V5
   Equal image size, 1/3 horizontal overlap and subtle stagger.
   Keeps clear scroll movement without excessive covering.
========================================= */

@media(max-width:560px){
  .welcome{
    padding-top:64px !important;
    grid-template-columns:1fr !important;
    gap:0 !important;
  }

  .welcome-art-left,
  .welcome-art-right{
    grid-column:1 !important;
    grid-row:1 !important;
    order:1 !important;
    width:60% !important;
    max-width:250px !important;
    height:auto !important;
    aspect-ratio:1 / 1.16 !important;
    pointer-events:none !important;
  }

  .welcome-art-left{
    justify-self:start !important;
    margin:0 !important;
    z-index:1 !important;
    transform:translate3d(0,calc(var(--welcome-scroll-y) * 1.15),0) !important;
  }

  .welcome-art-right{
    justify-self:end !important;
    margin:19% 0 0 0 !important;
    z-index:3 !important;
    transform:translate3d(0,calc(var(--welcome-scroll-y) * 1.45),0) !important;
  }

  .welcome-copy{
    grid-column:1 !important;
    grid-row:2 !important;
    order:2 !important;
    margin-top:17% !important;
    position:relative !important;
    z-index:5 !important;
  }
}

@media(max-width:430px){
  .welcome-art-left,
  .welcome-art-right{
    width:60% !important;
    max-width:222px !important;
    aspect-ratio:1 / 1.15 !important;
  }

  .welcome-art-right{
    margin-top:18% !important;
  }

  .welcome-copy{
    margin-top:16% !important;
  }
}

@media(max-width:380px){
  .welcome-art-left,
  .welcome-art-right{
    width:60% !important;
    max-width:205px !important;
    aspect-ratio:1 / 1.14 !important;
  }

  .welcome-art-right{
    margin-top:17% !important;
  }

  .welcome-copy{
    margin-top:15% !important;
  }
}


/* =========================================
   WELCOME MOBILE FINAL — MATCH SCREENSHOT
   Scoped only to the Welcome/content opening block.
   Keeps desktop/tablet and all later sections untouched.
========================================= */

@media(max-width:560px){
  .welcome{
    min-height:auto !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:118px 52px 86px !important;
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    column-gap:20px !important;
    row-gap:0 !important;
    align-items:start !important;
    background:var(--cream) !important;
    overflow:hidden !important;
  }

  .welcome .welcome-art{
    grid-row:1 !important;
    order:1 !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    aspect-ratio:1 / 1.06 !important;
    margin:0 !important;
    pointer-events:none !important;
    will-change:transform !important;
  }

  .welcome .welcome-art-left{
    grid-column:1 !important;
    justify-self:stretch !important;
    align-self:start !important;
    z-index:1 !important;
    transform:translate3d(0,calc(30px + (var(--welcome-scroll-y) * .45)),0) !important;
  }

  .welcome .welcome-art-right{
    grid-column:2 !important;
    justify-self:stretch !important;
    align-self:start !important;
    z-index:2 !important;
    transform:translate3d(0,calc(-2px + (var(--welcome-scroll-y) * .55)),0) !important;
  }

  .welcome .welcome-art img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    transform:none !important;
  }

  .welcome-copy{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    order:2 !important;
    width:100% !important;
    max-width:100% !important;
    margin:118px auto 0 !important;
    padding:0 !important;
    text-align:center !important;
    position:relative !important;
    z-index:5 !important;
  }

  .welcome h1{
    margin:0 0 38px !important;
    color:var(--lhag-title-color, #2b2723) !important;
    font-size:38px !important;
    line-height:1.08 !important;
    font-weight:400 !important;
    letter-spacing:.01em !important;
    text-transform:none !important;
  }

  .welcome p{
    max-width:100% !important;
    margin:0 auto 18px !important;
    color:var(--lhag-reading-color, #4e4e4e) !important;
    font-size:15px !important;
    line-height:1.72 !important;
    letter-spacing:.018em !important;
    font-weight:400 !important;
    text-align:center !important;
  }

  .welcome .text-link{
    justify-content:center !important;
    margin-top:20px !important;
  }
}

@media(max-width:430px){
  .welcome{
    padding:118px 52px 82px !important;
    column-gap:20px !important;
  }

  .welcome-copy{
    margin-top:114px !important;
  }

  .welcome h1{
    font-size:38px !important;
  }
}

@media(max-width:390px){
  .welcome{
    padding-left:38px !important;
    padding-right:38px !important;
    column-gap:18px !important;
  }

  .welcome-copy{
    margin-top:100px !important;
  }

  .welcome h1{
    font-size:34px !important;
  }
}


/* =========================================
   OUR BRANDS & HOTELS - CINEMATIC FULL WIDTH CAROUSEL
   Scoped override only for #brand section.
   6 original cards, continuous auto-run, dual arrows.
========================================= */

.brand.brand-cinematic-carousel{
  position:relative !important;
  padding:100px 0 78px !important;
  overflow:hidden !important;
  background:var(--cream) !important;
}

.brand.brand-cinematic-carousel > .wide-container{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

.brand.brand-cinematic-carousel .section-head{
  width:min(760px,86vw) !important;
  max-width:min(760px,86vw) !important;
  margin:0 auto 70px !important;
  text-align:center !important;
}

.brand.brand-cinematic-carousel .section-head h2{
  margin:0 0 20px !important;
  color:var(--lhag-title-color,#2b2723) !important;
  font-size:42px !important;
  line-height:1.08 !important;
  font-weight:400 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
}

.brand.brand-cinematic-carousel .section-head p{
  max-width:760px !important;
  margin:0 auto !important;
  color:var(--lhag-reading-color,#4e4e4e) !important;
  font-size:15px !important;
  line-height:1.5 !important;
  letter-spacing:.035em !important;
  text-align:center !important;
}

.brand.brand-cinematic-carousel .tabs{
  display:none !important;
}

.brand-cinematic-carousel .brand-marquee{
  position:relative !important;
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  overflow:hidden !important;
}

.brand-cinematic-carousel .brand-marquee::before,
.brand-cinematic-carousel .brand-marquee::after{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  z-index:5 !important;
  width:9vw !important;
  pointer-events:none !important;
}

.brand-cinematic-carousel .brand-marquee::before{
  left:0 !important;
  background:linear-gradient(90deg, var(--cream) 0%, rgba(246,243,236,0) 100%) !important;
}

.brand-cinematic-carousel .brand-marquee::after{
  right:0 !important;
  background:linear-gradient(270deg, var(--cream) 0%, rgba(246,243,236,0) 100%) !important;
}

.brand-cinematic-carousel .brand-track{
  display:flex !important;
  width:max-content !important;
  transform:translate3d(0,0,0) !important;
  animation:lhagBrandRunLeft 54s linear infinite !important;
  will-change:transform !important;
}

.brand-cinematic-carousel .brand-marquee[data-direction="right"] .brand-track{
  animation-name:lhagBrandRunRight !important;
}

.brand-cinematic-carousel .brand-marquee.is-user-controlled .brand-track{
  animation-duration:34s !important;
}

.brand-cinematic-carousel .brand-marquee:hover .brand-track,
.brand-cinematic-carousel .brand-marquee:focus-within .brand-track{
  animation-play-state:paused !important;
}

.brand-cinematic-carousel .brand-set{
  display:flex !important;
  flex:0 0 auto !important;
  width:max-content !important;
}

.brand.brand-cinematic-carousel .hotel-card{
  position:relative !important;
  flex:0 0 clamp(280px, 25vw, 380px) !important;
  width:clamp(280px, 25vw, 380px) !important;
  height:520px !important;
  min-height:520px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  transform:none !important;
  opacity:1 !important;
  filter:none !important;
  background:#1d1a17 !important;
}

.brand.brand-cinematic-carousel .hotel-card-link{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  color:inherit !important;
  text-decoration:none !important;
  overflow:hidden !important;
}

.brand.brand-cinematic-carousel .hotel-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  pointer-events:none !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.18) 38%, rgba(0,0,0,.80) 100%),
    linear-gradient(90deg, rgba(0,0,0,.16), rgba(0,0,0,.02) 52%, rgba(0,0,0,.14)) !important;
  opacity:.9 !important;
  transition:opacity .7s cubic-bezier(.22,.72,.22,1) !important;
}

.brand.brand-cinematic-carousel .hotel-card::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:3 !important;
  height:58% !important;
  pointer-events:none !important;
  background:linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,0)) !important;
  opacity:.86 !important;
  transition:opacity .7s cubic-bezier(.22,.72,.22,1) !important;
}

.brand.brand-cinematic-carousel .hotel-card:hover::before{
  opacity:.74 !important;
}

.brand.brand-cinematic-carousel .hotel-card:hover::after{
  opacity:.98 !important;
}

.brand.brand-cinematic-carousel .hotel-img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  max-height:none !important;
  margin:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:scale(1) !important;
  transition:transform 1.15s cubic-bezier(.22,.72,.22,1), filter .8s ease !important;
  will-change:transform !important;
}

.brand.brand-cinematic-carousel .hotel-card:hover .hotel-img{
  transform:scale(1.055) !important;
}

.brand.brand-cinematic-carousel .hotel-overlay{
  position:absolute !important;
  left:9% !important;
  right:9% !important;
  bottom:52px !important;
  z-index:4 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-end !important;
  text-align:center !important;
  color:#fff !important;
  transform:translate3d(0,0,0) !important;
  transition:transform .68s cubic-bezier(.22,.72,.22,1) !important;
}

.brand.brand-cinematic-carousel .hotel-card:hover .hotel-overlay{
  transform:translate3d(0,-9px,0) !important;
}

.brand.brand-cinematic-carousel .hotel-card h3{
  margin:0 0 15px !important;
  color:#fff8ee !important;
  font-size:28px !important;
  line-height:1.02 !important;
  font-weight:400 !important;
  letter-spacing:.075em !important;
  text-transform:uppercase !important;
  text-shadow:0 2px 18px rgba(0,0,0,.36) !important;
}

.brand.brand-cinematic-carousel .hotel-card p{
  max-width:320px !important;
  margin:0 auto 24px !important;
  color:rgba(255,255,255,.92) !important;
  font-size:14px !important;
  line-height:1.48 !important;
  letter-spacing:.022em !important;
  text-shadow:0 1px 14px rgba(0,0,0,.38) !important;
}

.brand.brand-cinematic-carousel .discover{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:170px !important;
  min-height:41px !important;
  margin:0 !important;
  padding:0 22px !important;
  border:1px solid rgba(255,255,255,.72) !important;
  color:#fff !important;
  background:rgba(0,0,0,.04) !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:500 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  overflow:hidden !important;
  transition:color .42s ease, border-color .42s ease, background .42s ease, transform .42s ease !important;
}

.brand.brand-cinematic-carousel .discover::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  background:var(--red) !important;
  transform:scaleX(0) !important;
  transform-origin:left center !important;
  transition:transform .48s cubic-bezier(.22,.72,.22,1) !important;
}

.brand.brand-cinematic-carousel .discover::after{
  display:none !important;
}

.brand.brand-cinematic-carousel .hotel-card-link:hover .discover{
  border-color:var(--red) !important;
  color:#fff !important;
  background:transparent !important;
  transform:translateY(-1px) !important;
}

.brand.brand-cinematic-carousel .hotel-card-link:hover .discover::before{
  transform:scaleX(1) !important;
}

.brand-cinematic-carousel .brand-arrow{
  position:absolute !important;
  top:50% !important;
  z-index:8 !important;
  width:56px !important;
  height:56px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:rgba(139,3,4,.82) !important;
  cursor:pointer !important;
  transform:translateY(-50%) !important;
  transition:background .32s ease, transform .32s ease, opacity .32s ease !important;
}

.brand-cinematic-carousel .brand-arrow::before{
  content:"" !important;
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  width:15px !important;
  height:15px !important;
  border-top:3px solid #fff !important;
  border-right:3px solid #fff !important;
}

.brand-cinematic-carousel .brand-arrow-prev{
  left:20px !important;
}

.brand-cinematic-carousel .brand-arrow-next{
  right:20px !important;
}

.brand-cinematic-carousel .brand-arrow-prev::before{
  transform:translate(-35%,-50%) rotate(-135deg) !important;
}

.brand-cinematic-carousel .brand-arrow-next::before{
  transform:translate(-65%,-50%) rotate(45deg) !important;
}

.brand-cinematic-carousel .brand-arrow:hover{
  background:var(--red) !important;
  opacity:.92 !important;
}

.brand-cinematic-carousel .brand-arrow-prev:hover{
  transform:translateY(-50%) translateX(-2px) !important;
}

.brand-cinematic-carousel .brand-arrow-next:hover{
  transform:translateY(-50%) translateX(2px) !important;
}

@keyframes lhagBrandRunLeft{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}

@keyframes lhagBrandRunRight{
  from{ transform:translate3d(-50%,0,0); }
  to{ transform:translate3d(0,0,0); }
}

@media(max-width:1180px){
  .brand.brand-cinematic-carousel .hotel-card{
    flex-basis:clamp(280px, 34vw, 360px) !important;
    width:clamp(280px, 34vw, 360px) !important;
    height:500px !important;
    min-height:500px !important;
  }

  .brand.brand-cinematic-carousel .hotel-card h3{
    font-size:25px !important;
  }
}

@media(max-width:760px){
  .brand.brand-cinematic-carousel{
    padding:76px 0 60px !important;
  }

  .brand.brand-cinematic-carousel .section-head{
    width:88vw !important;
    max-width:88vw !important;
    margin-bottom:44px !important;
  }

  .brand.brand-cinematic-carousel .section-head h2{
    font-size:32px !important;
  }

  .brand.brand-cinematic-carousel .section-head p{
    font-size:14px !important;
    line-height:1.68 !important;
    letter-spacing:.012em !important;
  }

  .brand.brand-cinematic-carousel .hotel-card{
    flex-basis:76vw !important;
    width:76vw !important;
    height:470px !important;
    min-height:470px !important;
  }

  .brand.brand-cinematic-carousel .hotel-overlay{
    left:8% !important;
    right:8% !important;
    bottom:40px !important;
  }

  .brand.brand-cinematic-carousel .hotel-card h3{
    font-size:24px !important;
    letter-spacing:.055em !important;
  }

  .brand.brand-cinematic-carousel .hotel-card p{
    max-width:300px !important;
    font-size:14px !important;
    line-height:1.44 !important;
  }

  .brand-cinematic-carousel .brand-arrow{
    width:46px !important;
    height:46px !important;
  }

  .brand-cinematic-carousel .brand-arrow-prev{
    left:12px !important;
  }

  .brand-cinematic-carousel .brand-arrow-next{
    right:12px !important;
  }
}

@media(max-width:420px){
  .brand.brand-cinematic-carousel .hotel-card{
    flex-basis:82vw !important;
    width:82vw !important;
    height:445px !important;
    min-height:445px !important;
  }
}

/* =========================================
   BRAND CAROUSEL — SQUARE IMAGE FINAL UPDATE
   Scoped only to Our Brands & Hotels carousel.
   - Square cards / images
   - Lighter overlay
   - Continuous autoplay kept active
   - Arrows remain active
   - Mobile: one full-width square card at a time
========================================= */

.brand-cinematic-carousel .brand-track{
  animation:lhagBrandRunLeft 46s linear infinite !important;
  animation-play-state:running !important;
}

.brand-cinematic-carousel .brand-marquee:hover .brand-track,
.brand-cinematic-carousel .brand-marquee:focus-within .brand-track{
  animation-play-state:running !important;
}

.brand-cinematic-carousel .brand-marquee.is-user-controlled .brand-track{
  animation-duration:28s !important;
  animation-play-state:running !important;
}

.brand.brand-cinematic-carousel .hotel-card{
  flex:0 0 clamp(300px, 23vw, 390px) !important;
  width:clamp(300px, 23vw, 390px) !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:1 / 1 !important;
  background:#1b1714 !important;
}

.brand.brand-cinematic-carousel .hotel-card-link,
.brand.brand-cinematic-carousel .hotel-img{
  width:100% !important;
  height:100% !important;
}

.brand.brand-cinematic-carousel .hotel-img{
  object-fit:cover !important;
  object-position:center center !important;
}

.brand.brand-cinematic-carousel .hotel-card::before{
  background:
    linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.08) 42%, rgba(0,0,0,.48) 100%),
    linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,0) 54%, rgba(0,0,0,.06)) !important;
  opacity:.78 !important;
}

.brand.brand-cinematic-carousel .hotel-card::after{
  height:54% !important;
  background:linear-gradient(0deg, rgba(0,0,0,.52), rgba(0,0,0,0)) !important;
  opacity:.68 !important;
}

.brand.brand-cinematic-carousel .hotel-card:hover::before{
  opacity:.62 !important;
}

.brand.brand-cinematic-carousel .hotel-card:hover::after{
  opacity:.78 !important;
}

.brand.brand-cinematic-carousel .hotel-overlay{
  left:8.5% !important;
  right:8.5% !important;
  bottom:34px !important;
}

.brand.brand-cinematic-carousel .hotel-card h3{
  font-size:25px !important;
  line-height:1.04 !important;
  margin-bottom:12px !important;
}

.brand.brand-cinematic-carousel .hotel-card p{
  max-width:310px !important;
  margin-bottom:18px !important;
  color:rgba(255,255,255,.88) !important;
}

.brand.brand-cinematic-carousel .discover{
  min-width:152px !important;
  min-height:38px !important;
}

.brand-cinematic-carousel .brand-arrow{
  opacity:1 !important;
  pointer-events:auto !important;
}

@media(max-width:1180px){
  .brand.brand-cinematic-carousel .hotel-card{
    flex-basis:clamp(292px, 31vw, 360px) !important;
    width:clamp(292px, 31vw, 360px) !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:1 / 1 !important;
  }
}

@media(max-width:760px){
  .brand-cinematic-carousel .brand-marquee{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
  }

  .brand-cinematic-carousel .brand-marquee::before,
  .brand-cinematic-carousel .brand-marquee::after{
    width:0 !important;
    display:none !important;
  }

  .brand.brand-cinematic-carousel .hotel-card{
    flex:0 0 100vw !important;
    width:100vw !important;
    max-width:100vw !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:1 / 1 !important;
  }

  .brand.brand-cinematic-carousel .hotel-overlay{
    left:9vw !important;
    right:9vw !important;
    bottom:38px !important;
  }

  .brand.brand-cinematic-carousel .hotel-card h3{
    font-size:25px !important;
    letter-spacing:.052em !important;
  }

  .brand.brand-cinematic-carousel .hotel-card p{
    max-width:78vw !important;
    font-size:14px !important;
    line-height:1.48 !important;
  }

  .brand-cinematic-carousel .brand-arrow{
    width:44px !important;
    height:44px !important;
    background:rgba(139,3,4,.72) !important;
  }

  .brand-cinematic-carousel .brand-arrow-prev{
    left:12px !important;
  }

  .brand-cinematic-carousel .brand-arrow-next{
    right:12px !important;
  }
}

@media(max-width:420px){
  .brand.brand-cinematic-carousel .hotel-card{
    flex-basis:100vw !important;
    width:100vw !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:1 / 1 !important;
  }

  .brand.brand-cinematic-carousel .hotel-overlay{
    bottom:30px !important;
  }

  .brand.brand-cinematic-carousel .hotel-card h3{
    font-size:22px !important;
  }

  .brand.brand-cinematic-carousel .hotel-card p{
    font-size:13px !important;
    line-height:1.42 !important;
    margin-bottom:15px !important;
  }

  .brand.brand-cinematic-carousel .discover{
    min-width:142px !important;
    min-height:36px !important;
    font-size:12px !important;
  }
}


/* =========================================
   BRAND CAROUSEL FINAL FIX — 3 DESKTOP / 1 MOBILE
   Scoped only to Our Brands & Hotels section.
========================================= */

.brand.brand-cinematic-carousel{
  padding:100px 0 82px !important;
  overflow:hidden !important;
}

.brand.brand-cinematic-carousel > .wide-container{
  width:100% !important;
  max-width:100% !important;
  padding:0 !important;
  margin:0 !important;
}

.brand-cinematic-carousel .brand-marquee{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  overflow:hidden !important;
  position:relative !important;
}

.brand-cinematic-carousel .brand-track{
  display:flex !important;
  flex-wrap:nowrap !important;
  width:max-content !important;
  max-width:none !important;
  animation:none !important;
  transition:none !important;
  will-change:transform !important;
}

.brand-cinematic-carousel .brand-marquee:hover .brand-track,
.brand-cinematic-carousel .brand-marquee:focus-within .brand-track{
  animation-play-state:running !important;
}

.brand-cinematic-carousel .brand-set{
  display:flex !important;
  flex:0 0 auto !important;
  width:max-content !important;
  max-width:none !important;
}

.brand.brand-cinematic-carousel .hotel-card{
  flex:0 0 calc(100vw / 3) !important;
  width:calc(100vw / 3) !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:1 / 1 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#1d1a17 !important;
  transform:none !important;
  opacity:1 !important;
  filter:none !important;
}

.brand.brand-cinematic-carousel .hotel-card-link{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
}

.brand.brand-cinematic-carousel .hotel-img{
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:scale(1) !important;
  transition:transform 1s cubic-bezier(.22,.72,.22,1), filter .8s ease !important;
}

.brand.brand-cinematic-carousel .hotel-card:hover .hotel-img{
  transform:scale(1.045) !important;
}

.brand.brand-cinematic-carousel .hotel-card::before{
  background:
    linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.08) 42%, rgba(0,0,0,.48) 100%),
    linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.00) 52%, rgba(0,0,0,.08)) !important;
  opacity:.78 !important;
}

.brand.brand-cinematic-carousel .hotel-card::after{
  height:54% !important;
  background:linear-gradient(0deg, rgba(0,0,0,.50), rgba(0,0,0,0)) !important;
  opacity:.68 !important;
}

.brand.brand-cinematic-carousel .hotel-card:hover::before{
  opacity:.58 !important;
}

.brand.brand-cinematic-carousel .hotel-card:hover::after{
  opacity:.76 !important;
}

.brand.brand-cinematic-carousel .hotel-overlay{
  left:8% !important;
  right:8% !important;
  bottom:42px !important;
}

.brand.brand-cinematic-carousel .hotel-card h3{
  font-size:clamp(22px, 2.15vw, 34px) !important;
  letter-spacing:.06em !important;
}

.brand.brand-cinematic-carousel .hotel-card p{
  max-width:360px !important;
  color:rgba(255,255,255,.88) !important;
}

.brand-cinematic-carousel .brand-arrow{
  z-index:20 !important;
  pointer-events:auto !important;
}

@media(max-width:760px){
  .brand.brand-cinematic-carousel{
    padding:76px 0 60px !important;
  }

  .brand-cinematic-carousel .brand-marquee::before,
  .brand-cinematic-carousel .brand-marquee::after{
    width:0 !important;
    display:none !important;
  }

  .brand.brand-cinematic-carousel .hotel-card{
    flex-basis:100vw !important;
    width:100vw !important;
    aspect-ratio:1 / 1 !important;
    height:auto !important;
    min-height:0 !important;
  }

  .brand.brand-cinematic-carousel .hotel-overlay{
    left:8% !important;
    right:8% !important;
    bottom:34px !important;
  }

  .brand.brand-cinematic-carousel .hotel-card h3{
    font-size:26px !important;
  }

  .brand.brand-cinematic-carousel .hotel-card p{
    max-width:84vw !important;
    font-size:14px !important;
    line-height:1.5 !important;
  }

  .brand.brand-cinematic-carousel .discover{
    min-width:154px !important;
    min-height:38px !important;
  }

  .brand-cinematic-carousel .brand-arrow{
    width:44px !important;
    height:44px !important;
    background:rgba(139,3,4,.72) !important;
  }

  .brand-cinematic-carousel .brand-arrow-prev{
    left:12px !important;
  }

  .brand-cinematic-carousel .brand-arrow-next{
    right:12px !important;
  }
}


/* =========================================
   FINAL FIX 2026-05-29
   Our Brands carousel: JS-driven autoplay, 3 desktop / 1 mobile,
   lighter edge gradient and working arrows.
========================================= */
.brand.brand-cinematic-carousel{
  overflow:hidden !important;
}

.brand-cinematic-carousel .brand-marquee{
  position:relative !important;
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  overflow:hidden !important;
  isolation:isolate !important;
}

.brand-cinematic-carousel .brand-marquee::before,
.brand-cinematic-carousel .brand-marquee::after{
  display:block !important;
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  z-index:6 !important;
  width:4.5vw !important;
  min-width:42px !important;
  pointer-events:none !important;
  opacity:.42 !important;
}

.brand-cinematic-carousel .brand-marquee::before{
  left:0 !important;
  background:linear-gradient(90deg, var(--cream) 0%, rgba(246,243,236,.38) 42%, rgba(246,243,236,0) 100%) !important;
}

.brand-cinematic-carousel .brand-marquee::after{
  right:0 !important;
  background:linear-gradient(270deg, var(--cream) 0%, rgba(246,243,236,.38) 42%, rgba(246,243,236,0) 100%) !important;
}

.brand-cinematic-carousel .brand-track{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  width:max-content !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  gap:0 !important;
  animation:none !important;
  transition:none !important;
  will-change:transform !important;
  transform:translate3d(0,0,0);
}

.brand-cinematic-carousel .brand-marquee:hover .brand-track,
.brand-cinematic-carousel .brand-marquee:focus-within .brand-track,
.brand-cinematic-carousel .brand-marquee.is-user-controlled .brand-track{
  animation:none !important;
  transition:none !important;
}

.brand-cinematic-carousel .brand-set{
  display:flex !important;
  flex:0 0 auto !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  width:max-content !important;
  max-width:none !important;
  gap:0 !important;
}

.brand.brand-cinematic-carousel .hotel-card{
  position:relative !important;
  flex:0 0 calc(100vw / 3) !important;
  width:calc(100vw / 3) !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:1 / 1 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#1d1a17 !important;
  opacity:1 !important;
  filter:none !important;
  transform:none !important;
}

.brand.brand-cinematic-carousel .hotel-card-link{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
}

.brand.brand-cinematic-carousel .hotel-img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  max-height:none !important;
  margin:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:scale(1) !important;
  transition:transform 1s cubic-bezier(.22,.72,.22,1), filter .8s ease !important;
}

.brand.brand-cinematic-carousel .hotel-card:hover .hotel-img{
  transform:scale(1.045) !important;
}

.brand.brand-cinematic-carousel .hotel-card::before{
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 42%, rgba(0,0,0,.34) 100%),
    linear-gradient(90deg, rgba(0,0,0,.035), rgba(0,0,0,0) 54%, rgba(0,0,0,.035)) !important;
  opacity:.66 !important;
}

.brand.brand-cinematic-carousel .hotel-card::after{
  height:50% !important;
  background:linear-gradient(0deg, rgba(0,0,0,.38), rgba(0,0,0,0)) !important;
  opacity:.58 !important;
}

.brand.brand-cinematic-carousel .hotel-card:hover::before{
  opacity:.54 !important;
}

.brand.brand-cinematic-carousel .hotel-card:hover::after{
  opacity:.66 !important;
}

.brand-cinematic-carousel .brand-arrow{
  position:absolute !important;
  top:50% !important;
  z-index:30 !important;
  pointer-events:auto !important;
  opacity:1 !important;
  cursor:pointer !important;
}

@media(max-width:760px){
  .brand-cinematic-carousel .brand-marquee::before,
  .brand-cinematic-carousel .brand-marquee::after{
    display:none !important;
  }

  .brand.brand-cinematic-carousel .hotel-card{
    flex:0 0 100vw !important;
    width:100vw !important;
    max-width:100vw !important;
    aspect-ratio:1 / 1 !important;
  }
}


/* =========================================
   TRIET DE FIX — OUR BRANDS CAROUSEL WORKING
   Fixes previous non-moving carousel by allowing JS inline !important transform.
   Desktop: 3 square slides full width. Mobile: 1 square slide full width.
========================================= */
.brand-cinematic-carousel .brand-marquee{
  touch-action:pan-y !important;
  cursor:grab !important;
}

.brand-cinematic-carousel .brand-marquee:active{
  cursor:grabbing !important;
}

.brand-cinematic-carousel .brand-track{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  gap:0 !important;
  width:max-content !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  animation:none !important;
  transition:none !important;
  will-change:transform !important;
  backface-visibility:hidden !important;
}

.brand-cinematic-carousel .brand-set{
  display:flex !important;
  flex:0 0 auto !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  gap:0 !important;
  width:max-content !important;
  max-width:none !important;
}

.brand.brand-cinematic-carousel .hotel-card{
  flex:0 0 calc(100vw / 3) !important;
  width:calc(100vw / 3) !important;
  max-width:none !important;
  aspect-ratio:1 / 1 !important;
  height:auto !important;
  min-height:0 !important;
}

.brand.brand-cinematic-carousel .hotel-img{
  object-fit:cover !important;
  object-position:center center !important;
}

.brand-cinematic-carousel .brand-marquee::before,
.brand-cinematic-carousel .brand-marquee::after{
  width:3.5vw !important;
  min-width:30px !important;
  opacity:.26 !important;
}

.brand-cinematic-carousel .brand-marquee::before{
  background:linear-gradient(90deg, var(--cream) 0%, rgba(246,243,236,.22) 45%, rgba(246,243,236,0) 100%) !important;
}

.brand-cinematic-carousel .brand-marquee::after{
  background:linear-gradient(270deg, var(--cream) 0%, rgba(246,243,236,.22) 45%, rgba(246,243,236,0) 100%) !important;
}

.brand-cinematic-carousel .brand-arrow{
  z-index:80 !important;
  pointer-events:auto !important;
  opacity:1 !important;
  cursor:pointer !important;
}

@media(max-width:760px){
  .brand.brand-cinematic-carousel .hotel-card{
    flex:0 0 100vw !important;
    width:100vw !important;
    max-width:100vw !important;
    aspect-ratio:1 / 1 !important;
    height:auto !important;
    min-height:0 !important;
  }

  .brand-cinematic-carousel .brand-marquee::before,
  .brand-cinematic-carousel .brand-marquee::after{
    display:none !important;
  }
}


/* =========================================
   OUR BRANDS & HOTELS — STEP CAROUSEL FINAL
   Reference behavior: 3 visible on desktop, 1 card slides in from right,
   1 card hides on left per move. Mobile: 1 full-width square card.
========================================= */
.brand.brand-step-carousel{
  position:relative !important;
  padding:100px 0 82px !important;
  overflow:hidden !important;
  background:var(--cream) !important;
}

.brand.brand-step-carousel > .wide-container{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

.brand.brand-step-carousel .section-head{
  width:min(760px,86vw) !important;
  max-width:min(760px,86vw) !important;
  margin:0 auto 70px !important;
  text-align:center !important;
}

.brand.brand-step-carousel .section-head h2{
  margin:0 0 20px !important;
  color:var(--lhag-title-color,#2b2723) !important;
  font-size:30px !important;
  line-height:1.08 !important;
  font-weight:400 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
}

.brand.brand-step-carousel .section-head p{
  max-width:760px !important;
  margin:0 auto !important;
  color:var(--lhag-reading-color,#4e4e4e) !important;
  font-size:14px !important;
  line-height:1.55 !important;
  letter-spacing:.02em !important;
  text-align:center !important;
}

.brand-step-carousel .brand-step-viewport{
  position:relative !important;
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  overflow:hidden !important;
  isolation:isolate !important;
}

.brand-step-carousel .brand-step-viewport::before,
.brand-step-carousel .brand-step-viewport::after{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  z-index:6 !important;
  width:3vw !important;
  min-width:24px !important;
  pointer-events:none !important;
  opacity:.18 !important;
}

.brand-step-carousel .brand-step-viewport::before{
  left:0 !important;
  background:linear-gradient(90deg, var(--cream) 0%, rgba(246,243,236,.18) 48%, rgba(246,243,236,0) 100%) !important;
}

.brand-step-carousel .brand-step-viewport::after{
  right:0 !important;
  background:linear-gradient(270deg, var(--cream) 0%, rgba(246,243,236,.18) 48%, rgba(246,243,236,0) 100%) !important;
}

.brand-step-carousel .brand-step-track{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  width:max-content !important;
  max-width:none !important;
  gap:0 !important;
  margin:0 !important;
  padding:0 !important;
  transform:translate3d(0,0,0);
  will-change:transform !important;
  backface-visibility:hidden !important;
}

.brand-step-carousel .brand-step-card{
  position:relative !important;
  flex:0 0 calc(100vw / 3) !important;
  width:calc(100vw / 3) !important;
  max-width:none !important;
  aspect-ratio:1 / 1 !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#1d1a17 !important;
  transform:none !important;
  opacity:1 !important;
  filter:none !important;
}

.brand-step-carousel .brand-step-link{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
  color:inherit !important;
  text-decoration:none !important;
}

.brand-step-carousel .brand-step-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  pointer-events:none !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.04) 42%, rgba(0,0,0,.30) 100%),
    linear-gradient(90deg, rgba(0,0,0,.025), rgba(0,0,0,0) 55%, rgba(0,0,0,.025)) !important;
  opacity:.58 !important;
  transition:opacity .7s cubic-bezier(.22,.72,.22,1) !important;
}

.brand-step-carousel .brand-step-card::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:3 !important;
  height:48% !important;
  pointer-events:none !important;
  background:linear-gradient(0deg, rgba(0,0,0,.34), rgba(0,0,0,0)) !important;
  opacity:.52 !important;
  transition:opacity .7s cubic-bezier(.22,.72,.22,1) !important;
}

.brand-step-carousel .brand-step-card:hover::before{
  opacity:.48 !important;
}

.brand-step-carousel .brand-step-card:hover::after{
  opacity:.62 !important;
}

.brand-step-carousel .brand-step-img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  max-height:none !important;
  margin:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:scale(1) !important;
  transition:transform 1s cubic-bezier(.22,.72,.22,1), filter .8s ease !important;
  will-change:transform !important;
}

.brand-step-carousel .brand-step-card:hover .brand-step-img{
  transform:scale(1.045) !important;
}

.brand-step-carousel .brand-step-overlay{
  position:absolute !important;
  left:8% !important;
  right:8% !important;
  bottom:42px !important;
  z-index:4 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-end !important;
  color:#fff !important;
  text-align:center !important;
  transform:translate3d(0,0,0) !important;
  transition:transform .68s cubic-bezier(.22,.72,.22,1) !important;
}

.brand-step-carousel .brand-step-card:hover .brand-step-overlay{
  transform:translate3d(0,-8px,0) !important;
}

.brand-step-carousel .brand-step-overlay h3{
  margin:0 0 13px !important;
  color:#fff8ee !important;
  font-size:clamp(22px, 2.05vw, 32px) !important;
  line-height:1.04 !important;
  font-weight:400 !important;
  letter-spacing:.055em !important;
  text-transform:uppercase !important;
  text-shadow:0 2px 16px rgba(0,0,0,.28) !important;
}

.brand-step-carousel .brand-step-overlay p{
  max-width:360px !important;
  margin:0 auto 18px !important;
  color:rgba(255,255,255,.86) !important;
  font-size:14px !important;
  line-height:1.48 !important;
  letter-spacing:.014em !important;
  text-shadow:0 1px 12px rgba(0,0,0,.28) !important;
}

.brand-step-carousel .brand-step-discover{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:152px !important;
  min-height:38px !important;
  margin:0 !important;
  padding:0 20px !important;
  border:1px solid rgba(255,255,255,.68) !important;
  color:#fff !important;
  background:rgba(0,0,0,.03) !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:500 !important;
  letter-spacing:.075em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  overflow:hidden !important;
  transition:color .42s ease, border-color .42s ease, background .42s ease, transform .42s ease !important;
}

.brand-step-carousel .brand-step-discover::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  background:var(--red) !important;
  transform:scaleX(0) !important;
  transform-origin:left center !important;
  transition:transform .48s cubic-bezier(.22,.72,.22,1) !important;
}

.brand-step-carousel .brand-step-link:hover .brand-step-discover{
  border-color:var(--red) !important;
  color:#fff !important;
  background:transparent !important;
  transform:translateY(-1px) !important;
}

.brand-step-carousel .brand-step-link:hover .brand-step-discover::before{
  transform:scaleX(1) !important;
}

.brand-step-carousel .brand-step-arrow{
  position:absolute !important;
  top:50% !important;
  z-index:30 !important;
  width:54px !important;
  height:54px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:rgba(139,3,4,.68) !important;
  cursor:pointer !important;
  transform:translateY(-50%) !important;
  transition:background .32s ease, transform .32s ease, opacity .32s ease !important;
}

.brand-step-carousel .brand-step-arrow::before{
  content:"" !important;
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  width:14px !important;
  height:14px !important;
  border-top:2px solid #fff !important;
  border-right:2px solid #fff !important;
}

.brand-step-carousel .brand-step-prev{
  left:20px !important;
}

.brand-step-carousel .brand-step-next{
  right:20px !important;
}

.brand-step-carousel .brand-step-prev::before{
  transform:translate(-35%,-50%) rotate(-135deg) !important;
}

.brand-step-carousel .brand-step-next::before{
  transform:translate(-65%,-50%) rotate(45deg) !important;
}

.brand-step-carousel .brand-step-arrow:hover{
  background:var(--red) !important;
  opacity:.92 !important;
}

.brand-step-carousel .brand-step-prev:hover{
  transform:translateY(-50%) translateX(-2px) !important;
}

.brand-step-carousel .brand-step-next:hover{
  transform:translateY(-50%) translateX(2px) !important;
}

@media(max-width:760px){
  .brand.brand-step-carousel{
    padding:76px 0 60px !important;
  }

  .brand.brand-step-carousel .section-head{
    width:88vw !important;
    max-width:88vw !important;
    margin-bottom:44px !important;
  }

  .brand.brand-step-carousel .section-head h2{
    font-size:32px !important;
  }

  .brand.brand-step-carousel .section-head p{
    font-size:14px !important;
    line-height:1.68 !important;
    letter-spacing:.012em !important;
  }

  .brand-step-carousel .brand-step-viewport::before,
  .brand-step-carousel .brand-step-viewport::after{
    display:none !important;
  }

  .brand-step-carousel .brand-step-card{
    flex:0 0 100vw !important;
    width:100vw !important;
    max-width:100vw !important;
    aspect-ratio:1 / 1 !important;
  }

  .brand-step-carousel .brand-step-overlay{
    left:8% !important;
    right:8% !important;
    bottom:32px !important;
  }

  .brand-step-carousel .brand-step-overlay h3{
    font-size:25px !important;
    letter-spacing:.05em !important;
  }

  .brand-step-carousel .brand-step-overlay p{
    max-width:84vw !important;
    font-size:14px !important;
    line-height:1.46 !important;
  }

  .brand-step-carousel .brand-step-discover{
    min-width:148px !important;
    min-height:36px !important;
    font-size:12px !important;
  }

  .brand-step-carousel .brand-step-arrow{
    width:44px !important;
    height:44px !important;
    background:rgba(139,3,4,.64) !important;
  }

  .brand-step-carousel .brand-step-prev{
    left:12px !important;
  }

  .brand-step-carousel .brand-step-next{
    right:12px !important;
  }
}

@media(max-width:420px){
  .brand-step-carousel .brand-step-overlay{
    bottom:26px !important;
  }

  .brand-step-carousel .brand-step-overlay h3{
    font-size:22px !important;
  }

  .brand-step-carousel .brand-step-overlay p{
    font-size:13px !important;
    line-height:1.42 !important;
    margin-bottom:14px !important;
  }

  .brand-step-carousel .brand-step-discover{
    min-width:138px !important;
    min-height:35px !important;
  }
}

/* =========================================
   OUR BRANDS & HOTELS — SOFT BOTTOM OVERLAY
   Added only to improve text readability on the step carousel.
   Light black gradient from bottom to top, not too dark.
========================================= */
.brand-step-carousel .brand-step-card::before{
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.015) 44%,
      rgba(0,0,0,.11) 70%,
      rgba(0,0,0,.28) 100%
    ) !important;
  opacity:.72 !important;
}

.brand-step-carousel .brand-step-card::after{
  height:54% !important;
  background:linear-gradient(
    0deg,
    rgba(0,0,0,.30) 0%,
    rgba(0,0,0,.16) 42%,
    rgba(0,0,0,0) 100%
  ) !important;
  opacity:.58 !important;
}

.brand-step-carousel .brand-step-card:hover::before{
  opacity:.68 !important;
}

.brand-step-carousel .brand-step-card:hover::after{
  opacity:.64 !important;
}

.brand-step-carousel .brand-step-overlay h3{
  text-shadow:0 2px 14px rgba(0,0,0,.34) !important;
}

.brand-step-carousel .brand-step-overlay p{
  text-shadow:0 1px 12px rgba(0,0,0,.30) !important;
}


/* =========================================
   OUR BRANDS & HOTELS — STRONGER TEXT OVERLAY
   Increased bottom black gradient slightly for easier readability,
   while keeping the image elegant and not overly dark.
========================================= */
.brand-step-carousel .brand-step-card::before{
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.03) 38%,
      rgba(0,0,0,.18) 66%,
      rgba(0,0,0,.40) 100%
    ) !important;
  opacity:.82 !important;
}

.brand-step-carousel .brand-step-card::after{
  height:62% !important;
  background:linear-gradient(
    0deg,
    rgba(0,0,0,.46) 0%,
    rgba(0,0,0,.28) 42%,
    rgba(0,0,0,.08) 74%,
    rgba(0,0,0,0) 100%
  ) !important;
  opacity:.76 !important;
}

.brand-step-carousel .brand-step-card:hover::before{
  opacity:.86 !important;
}

.brand-step-carousel .brand-step-card:hover::after{
  opacity:.82 !important;
}

.brand-step-carousel .brand-step-overlay h3{
  text-shadow:0 2px 18px rgba(0,0,0,.42) !important;
}

.brand-step-carousel .brand-step-overlay p{
  color:rgba(255,255,255,.92) !important;
  text-shadow:0 1px 14px rgba(0,0,0,.38) !important;
}