/* =========================
   DLG ABOUT US - SIMPLE / WIDE STANDARD
   Scoped only to .dlg-about-simple
========================= */

.dlg-about-simple{
  --about-green:#247d80;
  --about-dark:#155f63;
  --about-gold:#bc955c;
  --about-cream:#f7efe8;
  --about-text:#283638;
  --about-muted:#687476;
  --about-line:rgba(36,125,128,.16);
  --about-container:1280px;
  --about-gutter:64px;

  width:100%;
  overflow:hidden;
  background:#fff;
  color:var(--about-text);
  font-family:Montserrat, Arial, Helvetica, sans-serif;
}

.dlg-about-simple *,
.dlg-about-simple *::before,
.dlg-about-simple *::after{
  box-sizing:border-box;
}

/* =========================
   BANNER
========================= */

.about-simple-banner{
  position:relative;
  width:100%;
  height:clamp(390px, 46vw, 600px);
  overflow:hidden;
  background:#f4f7f7;
}

.about-simple-banner img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.about-simple-banner__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,57,60,.60) 0%, rgba(0,57,60,.32) 42%, rgba(0,57,60,.08) 100%),
    linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.08) 45%, rgba(0,0,0,.30) 100%);
}

.about-simple-banner__content{
  position:absolute;
  left:50%;
  bottom:86px;
  width:min(var(--about-container), calc(100% - var(--about-gutter) * 2));
  transform:translateX(-50%);
  color:#fff;
  text-align:left;
}

.about-simple-banner__content span{
  display:block;
  margin-bottom:14px;
  color:rgba(255,255,255,.82);
  font-family:Montserrat, Arial, Helvetica, sans-serif;
  font-size:11px;
  line-height:1;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.about-simple-banner__content h1{
  max-width:560px;
  margin:0;
  color:#fff;
  font-family:"Playfair Display", "Playfair Display", Georgia, serif;
  font-size:clamp(40px, 5vw, 66px);
  line-height:1.03;
  font-weight:400;
  letter-spacing:-.025em;
  text-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* =========================
   LAYOUT
========================= */

.about-simple-container{
  width:min(var(--about-container), calc(100% - var(--about-gutter) * 2));
  margin:0 auto;
}

.about-simple-section{
  padding:74px 0;
}

.about-simple-intro{
  padding-top:84px;
  padding-bottom:62px;
}

.about-simple-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.12fr) minmax(390px, .88fr);
  gap:70px;
  align-items:center;
}

.about-simple-grid--reverse{
  grid-template-columns:minmax(390px, .88fr) minmax(0, 1.12fr);
}

.about-simple-image{
  height:540px;
  overflow:hidden;
  background:#eee;
}

.about-simple-image--large{
  height:570px;
}

.about-simple-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.22,.72,.22,1);
}

.about-simple-image:hover img{
  transform:scale(1.035);
}

.about-simple-content{
  max-width:500px;
}

.about-simple-label{
  display:block;
  margin-bottom:14px;
  color:var(--about-gold);
  font-size:11px;
  line-height:1;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.dlg-about-simple h1,
.dlg-about-simple h2{
  margin:0;
  color:var(--about-dark);
  font-family:"Playfair Display", "Playfair Display", Georgia, serif;
  font-weight:400;
  letter-spacing:-.02em;
}

.dlg-about-simple h2{
  font-size:clamp(29px, 3vw, 42px);
  line-height:1.1;
}

.dlg-about-simple p{
  margin:20px 0 0;
  color:var(--about-muted);
  font-size:14px;
  line-height:1.85;
  font-weight:400;
}

.about-simple-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:26px;
  color:var(--about-dark);
  font-size:12px;
  line-height:1;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
}

.about-simple-link::after{
  content:"";
  width:42px;
  height:1px;
  background:currentColor;
  transition:width .3s ease;
}

.about-simple-link:hover::after{
  width:58px;
}

/* =========================
   SMOOTH FADE-IN ON SCROLL
   Same motion standard as Dining page
========================= */

.dlg-about-simple .fadein-up,
.dlg-about-simple .fadein-left,
.dlg-about-simple .fadein-right{
  opacity:0;
  transition:
    opacity 1s cubic-bezier(.22,.72,.22,1),
    transform 1s cubic-bezier(.22,.72,.22,1);
  transition-delay:var(--fade-delay, 0ms);
  will-change:opacity, transform;
}

.dlg-about-simple .fadein-up{
  transform:translateY(32px);
}

.dlg-about-simple .fadein-left{
  transform:translateX(-34px);
}

.dlg-about-simple .fadein-right{
  transform:translateX(34px);
}

.dlg-about-simple .fadein-up.is-visible,
.dlg-about-simple .fadein-left.is-visible,
.dlg-about-simple .fadein-right.is-visible{
  opacity:1;
  transform:translate(0,0);
}

/* Banner title: keep exact lower-center position while fading like Dining */
.dlg-about-simple .about-simple-banner__content.fadein-up{
  opacity:0;
  transform:translate(-50%, calc(-50% + 22px)) !important;
}

.dlg-about-simple .about-simple-banner__content.fadein-up.is-visible{
  opacity:1;
  transform:translate(-50%, -50%) !important;
}

@media (prefers-reduced-motion: reduce){
  .dlg-about-simple .about-simple-image img,
  .dlg-about-simple .fadein-up,
  .dlg-about-simple .fadein-left,
  .dlg-about-simple .fadein-right{
    transition:none !important;
  }

  .dlg-about-simple .fadein-up,
  .dlg-about-simple .fadein-left,
  .dlg-about-simple .fadein-right{
    opacity:1;
    transform:none !important;
  }
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1180px){
  .dlg-about-simple{
    --about-gutter:40px;
    --about-container:1120px;
  }

  .about-simple-grid,
  .about-simple-grid--reverse{
    gap:48px;
  }
}

@media(max-width:980px){
  .dlg-about-simple{
    --about-gutter:32px;
  }

  .about-simple-banner{
    height:430px;
  }

  .about-simple-banner__content{
    bottom:62px;
  }

  .about-simple-section{
    padding:64px 0;
  }

  .about-simple-intro{
    padding-top:64px;
    padding-bottom:48px;
  }

  .about-simple-grid,
  .about-simple-grid--reverse{
    grid-template-columns:1fr;
    gap:34px;
  }

  .about-simple-grid--reverse .about-simple-content{
    order:2;
  }

  .about-simple-grid--reverse .about-simple-image{
    order:1;
  }

  .about-simple-content{
    max-width:720px;
  }

  .about-simple-image,
  .about-simple-image--large{
    height:460px;
  }
}

@media(max-width:560px){
  .dlg-about-simple{
    --about-gutter:20px;
  }

  .about-simple-banner{
    height:360px;
  }

  .about-simple-banner__overlay{
    background:
      linear-gradient(90deg, rgba(0,57,60,.68) 0%, rgba(0,57,60,.38) 62%, rgba(0,57,60,.14) 100%),
      linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.14) 100%);
  }

  .about-simple-banner__content{
    bottom:44px;
  }

  .about-simple-banner__content h1{
    font-size:38px;
  }

  .about-simple-section{
    padding:52px 0;
  }

  .about-simple-intro{
    padding-top:52px;
    padding-bottom:42px;
  }

  .about-simple-image,
  .about-simple-image--large{
    height:330px;
  }

  .dlg-about-simple h2{
    font-size:27px;
  }

  .dlg-about-simple p{
    font-size:14px;
    line-height:1.78;
  }

  .dlg-about-simple .fadein-left,
  .dlg-about-simple .fadein-right{
    transform:translateY(26px);
  }

}


/* =========================================================
   FINAL BANNER STANDARD — match Room Detail hero style
   Gradient / lower elegant title / centered banner mood
   Scoped only to .dlg-about-simple
========================================================= */

.dlg-about-simple {
  --about-green: #0b6f78;
  --about-dark: #07545c;
  --about-gold: #bc955c;
}

.dlg-about-simple .about-simple-banner {
  height: clamp(430px, 52.5vw, 610px) !important;
  background: #111 !important;
}

.dlg-about-simple .about-simple-banner img {
  transform: scale(1.01);
}

.dlg-about-simple .about-simple-banner__overlay {
  z-index: 2 !important;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.04) 42%, rgba(0, 0, 0, 0.15)),
    linear-gradient(to top, rgba(8, 95, 105, 0.52), rgba(8, 95, 105, 0.10) 47%, rgba(0, 0, 0, 0.06)),
    linear-gradient(to right, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.02) 45%, rgba(0, 0, 0, 0.10)) !important;
}

.dlg-about-simple .about-simple-banner__content {
  position: absolute !important;
  z-index: 3 !important;
  left: 50% !important;
  top: 74% !important;
  bottom: auto !important;
  width: min(980px, calc(100% - 64px)) !important;
  transform: translate(-50%, -50%) !important;
  color: #fff !important;
  text-align: center !important;
}

.dlg-about-simple .about-simple-banner__content span {
  display: block !important;
  margin: 0 0 14px !important;
  color: rgba(255,255,255,.88) !important;
  font-family: "Montserrat", Arial, Helvetica, sans-serif !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  text-shadow: 0 8px 24px rgba(0,0,0,.30) !important;
}

.dlg-about-simple .about-simple-banner__content h1 {
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  color: #fff !important;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
  font-size: clamp(32px, 3.1vw, 46px) !important;
  font-weight: 400 !important;
  line-height: 1.16 !important;
  letter-spacing: .018em !important;
  text-align: center !important;
  text-transform: none !important;
  text-shadow: 0 10px 30px rgba(0,0,0,.32) !important;
}

@media (max-width: 980px) {
  .dlg-about-simple .about-simple-banner__content {
    top: 72% !important;
  }
}

@media (max-width: 560px) {
  .dlg-about-simple .about-simple-banner {
    height: 390px !important;
  }

  .dlg-about-simple .about-simple-banner__content {
    top: 70% !important;
    width: calc(100% - 44px) !important;
  }

  .dlg-about-simple .about-simple-banner__content h1 {
    font-size: 28px !important;
  }
}


/* =========================================================
   ABOUT HERO TEXT GUARD
   Same behaviour as Dining: only banner content fades,
   hero wrapper itself never shifts the title.
========================================================= */
.dlg-about-simple .about-simple-banner.fadein-up{
  opacity:1 !important;
  transform:none !important;
}

.dlg-about-simple .about-simple-banner__content.fadein-up{
  transition:
    opacity 1s cubic-bezier(.22,.72,.22,1),
    transform 1s cubic-bezier(.22,.72,.22,1) !important;
}

/* Final override: keep About hero fade transform after banner standard rules */
.dlg-about-simple .about-simple-banner__content.fadein-up{
  opacity:0 !important;
  transform:translate(-50%, calc(-50% + 22px)) !important;
}

.dlg-about-simple .about-simple-banner__content.fadein-up.is-visible{
  opacity:1 !important;
  transform:translate(-50%, -50%) !important;
}

/* =========================================================
   FINAL BANNER HARD FIX — NO EFFECT / SAME POSITION AS ROOM DETAIL
   Remove all banner + banner text animation and lock exact layout.
   Scoped only to About page.
========================================================= */

.dlg-about-simple .about-simple-banner,
.dlg-about-simple .about-simple-banner *,
.dlg-about-simple .about-simple-banner *::before,
.dlg-about-simple .about-simple-banner *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

.dlg-about-simple .about-simple-banner {
  position: relative !important;
  width: 100% !important;
  height: clamp(430px, 52.5vw, 610px) !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #111 !important;
}

.dlg-about-simple .about-simple-banner img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

.dlg-about-simple .about-simple-banner__overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.04) 42%, rgba(0, 0, 0, 0.15)),
    linear-gradient(to top, rgba(8, 95, 105, 0.52), rgba(8, 95, 105, 0.10) 47%, rgba(0, 0, 0, 0.06)),
    linear-gradient(to right, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.02) 45%, rgba(0, 0, 0, 0.10)) !important;
}

.dlg-about-simple .about-simple-banner__content,
.dlg-about-simple .about-simple-banner__content.fadein-up,
.dlg-about-simple .about-simple-banner__content.fadein-up.is-visible {
  position: absolute !important;
  z-index: 3 !important;
  left: 50% !important;
  top: 77% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(980px, calc(100% - 64px)) !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  color: #fff !important;
  text-align: center !important;
  transform: translate(-50%, -50%) !important;
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
  pointer-events: none !important;
}

.dlg-about-simple .about-simple-banner__content span {
  display: block !important;
  width: 100% !important;
  margin: 0 0 14px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-family: "Montserrat", Arial, Helvetica, sans-serif !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: normal !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.30) !important;
}

.dlg-about-simple .about-simple-banner__content h1 {
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  color: #fff !important;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
  font-size: clamp(32px, 3.1vw, 46px) !important;
  font-weight: 400 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.018em !important;
  text-align: center !important;
  text-transform: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.32) !important;
}

@media (max-width: 600px) {
  .dlg-about-simple .about-simple-banner {
    height: 390px !important;
  }

  .dlg-about-simple .about-simple-banner__content,
  .dlg-about-simple .about-simple-banner__content.fadein-up,
  .dlg-about-simple .about-simple-banner__content.fadein-up.is-visible {
    top: 72% !important;
    width: calc(100% - 44px) !important;
    transform: translate(-50%, -50%) !important;
  }

  .dlg-about-simple .about-simple-banner__content h1 {
    font-size: 28px !important;
    line-height: 1.16 !important;
  }

  .dlg-about-simple .about-simple-banner__content span {
    font-size: 10px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.18em !important;
  }
}

/* =========================================================
   EXACT ROOM DETAIL BANNER FIX
   Scoped only to .dlg-about-simple. Banner position/layout copied from room-detail.
   Do not affect page content below.
========================================================= */

.dlg-about-simple .about-simple-banner {
  position: relative !important;
  width: 100% !important;
  height: clamp(430px, 52.5vw, 610px) !important;
  overflow: hidden !important;
  background: #111 !important;
  margin: 0 !important;
}

.dlg-about-simple .about-simple-banner img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

.dlg-about-simple .about-simple-banner__overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.04) 42%, rgba(0, 0, 0, 0.15)),
    linear-gradient(to top, rgba(8, 95, 105, 0.52), rgba(8, 95, 105, 0.10) 47%, rgba(0, 0, 0, 0.06)),
    linear-gradient(to right, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.02) 45%, rgba(0, 0, 0, 0.10)) !important;
}

.dlg-about-simple .about-simple-banner__content,
.dlg-about-simple .about-simple-banner__content.fadein-up,
.dlg-about-simple .about-simple-banner__content.fadein-up.is-visible {
  position: absolute !important;
  z-index: 3 !important;
  left: 50% !important;
  top: 77% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(980px, calc(100% - 64px)) !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) !important;
  opacity: 1 !important;
  color: #fff !important;
  text-align: center !important;
  display: block !important;
  pointer-events: none !important;
  transition: none !important;
  animation: none !important;
}

.dlg-about-simple .about-simple-banner__content span {
  display: block !important;
  margin: 0 0 14px !important;
  color: rgba(255,255,255,.88) !important;
  font-family: "Montserrat", Arial, Helvetica, sans-serif !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: normal !important;
  text-shadow: 0 8px 24px rgba(0,0,0,.30) !important;
}

.dlg-about-simple .about-simple-banner__content h1 {
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  color: #fff !important;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
  font-size: clamp(32px, 3.1vw, 46px) !important;
  font-weight: 400 !important;
  line-height: 1.16 !important;
  letter-spacing: .018em !important;
  text-align: center !important;
  text-transform: none !important;
  text-shadow: 0 10px 30px rgba(0,0,0,.32) !important;
  transition: none !important;
  animation: none !important;
}

@media (max-width: 600px) {
  .dlg-about-simple .about-simple-banner {
    height: 390px !important;
  }

  .dlg-about-simple .about-simple-banner__content,
  .dlg-about-simple .about-simple-banner__content.fadein-up,
  .dlg-about-simple .about-simple-banner__content.fadein-up.is-visible {
    top: 72% !important;
    width: calc(100% - 44px) !important;
    transform: translate(-50%, -50%) !important;
  }

  .dlg-about-simple .about-simple-banner__content h1 {
    font-size: 28px !important;
    line-height: 1.16 !important;
  }
}