/* =========================================================
   OUR STORY PAGE
   Banner uses video. Content below rebuilt to match reference.
========================================================= */

.story-hero{
  position:relative;
  min-height:75vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:#fff;
  background:#111;
}

.story-hero-media{
  position:absolute;
  inset:0;
  z-index:0;
}

.story-hero-media img,
.story-hero-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.story-hero-video{
  position:absolute;
  inset:0;
  background:#111;
}

.story-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.55),
      rgba(0,0,0,.24),
      rgba(0,0,0,.62)
    ),
    rgba(80,30,20,.18);
}

.story-hero-content{
  position:relative;
  z-index:2;
  width:min(760px,calc(100% - 48px));
  padding-top:90px;
  text-align:center;
}

.story-hero h1{
  margin:0;
  color:#f4eadf;
  font-size:30px;
  line-height:1.08;
  font-weight:400;
  letter-spacing:.003em;
  text-shadow:0 6px 34px rgba(0,0,0,.34);
}

.story-origin,
.story-faifo{
  background:#f4f2ed;
}

.story-origin-container{
  width:min(1080px,calc(100% - 96px));
  margin:0 auto;
}

.story-origin{
  padding:104px 0 78px;
}

.story-origin-grid{
  display:grid;
  grid-template-columns:45% 55%;
  align-items:center;
  gap:54px;
}

.story-origin-images{
  position:relative;
  width:100%;
  min-height:330px;
}

.story-origin-img{
  position:absolute;
  margin:0;
  overflow:hidden;
  background:#ddd;
}

.story-origin-images{
  --story-scroll:.5;
}

.story-origin-img{
  will-change:transform;
  transition:transform .18s linear;
}

.story-origin-img--town{
  transform:translate3d(0, calc((var(--story-scroll) - .5) * -34px), 0);
}

.story-origin-img--portrait{
  transform:translate3d(0, calc((var(--story-scroll) - .5) * 42px), 0);
}

@media (prefers-reduced-motion: reduce){
  .story-origin-img--town,
  .story-origin-img--portrait{
    transform:none;
    transition:none;
  }
}


.story-origin-img img,
.story-faifo-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.story-origin-img--town{
  left:70px;
  top:0;
  width:230px;
  height:305px;
}

.story-origin-img--portrait{
  right:10px;
  bottom:0;
  width:210px;
  height:260px;
  z-index:2;
  filter:grayscale(1);
}

.story-origin-copy{
  max-width:530px;
}

.story-origin-copy h2{
  margin:0 0 28px;
  color:#25231f;
  font-size:31px;
  line-height:1.08;
  font-weight:400;
  letter-spacing:.02em;
  text-transform:none;
}

.story-origin-copy p,
.story-faifo-text p{
  margin:0 0 18px;
  color:#484844;
  font-size:15px;
  line-height:1.86;
  font-weight:400;
  letter-spacing:.002em;
}

.story-origin-copy p:last-child,
.story-faifo-text p:last-child{
  margin-bottom:0;
}

.story-quote{
  padding:72px 24px 78px;
  background:#edeae5;
  text-align:center;
}

.story-quote-inner{
  width:min(860px,100%);
  margin:0 auto;
}

.story-quote p{
  margin:0 auto;
  color:#302d29;
  font-family:"Americana", "Playfair Display", Georgia, serif;
  font-size:30px;
  line-height:1.26;
  font-weight:400;
  letter-spacing:.003em;
}

.story-quote p span{
  display:block;
}

.story-faifo{
  padding:70px 0 96px;
}

.story-faifo-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:88px;
  row-gap:58px;
  align-items:start;
}

.story-faifo-text{
  padding-top:56px;
}

.story-faifo-text--right{
  padding-top:16px;
}

.story-faifo-text h3{
  margin:0 0 30px;
  color:#44413c;
  font-family:inherit;
  font-size:15px;
  line-height:1.86;
  font-weight:400;
  letter-spacing:.002em;
}

.story-faifo-image{
  margin:0;
  overflow:hidden;
  background:#ddd;
}

.story-faifo-image--old{
  height:286px;
}

.story-faifo-image--house{
  height:420px;
}

/* =========================
   FADE IN
========================= */

.fadein-up{
  opacity:0;
  transform:translate3d(0,34px,0);
  transition:
    opacity 1.2s var(--ease, cubic-bezier(.22,1,.36,1)),
    transform 1.2s var(--ease, cubic-bezier(.22,1,.36,1));
  will-change:opacity,transform;
}

.fadein-up.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}

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

@media(max-width:980px){
  .story-origin-container{
    width:min(760px,calc(100% - 56px));
  }

  .story-origin-grid,
  .story-faifo-grid{
    grid-template-columns:1fr;
    gap:52px;
  }

  .story-origin{
    padding:82px 0 66px;
  }

  .story-origin-images{
    width:min(460px,100%);
    min-height:340px;
    margin:0 auto;
  }

  .story-origin-img--town{
    left:0;
  }

  .story-origin-img--portrait{
    right:0;
  }

  .story-origin-copy{
    max-width:100%;
    text-align:center;
  }

  .story-quote{
    padding:64px 28px 70px;
  }

  .story-quote p{
    font-size:27px;
    line-height:1.3;
  }

  .story-faifo-text,
  .story-faifo-text--right{
    padding-top:0;
    text-align:center;
  }

  .story-faifo-image--old,
  .story-faifo-image--house{
    height:auto;
    aspect-ratio:16/10;
  }

  .story-faifo-image--old{
    order:1;
  }

  .story-faifo-text--left{
    order:2;
  }

  .story-faifo-image--house{
    order:3;
  }

  .story-faifo-text--right{
    order:4;
  }
}

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

@media(max-width:560px){
  .story-hero{
    min-height:62vh;
  }

  .story-hero-content{
    width:calc(100% - 48px);
    padding-top:70px;
  }

  .story-hero h1{
    font-size:30px;
  }

  .story-origin-container{
    width:calc(100% - 42px);
  }

  .story-origin{
    padding:64px 0 54px;
  }

  .story-origin-grid,
  .story-faifo-grid{
    gap:42px;
  }

  .story-origin-images{
    min-height:300px;
  }

  .story-origin-img--town{
    width:58%;
    height:250px;
  }

  .story-origin-img--portrait{
    width:52%;
    height:220px;
  }

  .story-origin-copy h2{
    font-size:28px;
    line-height:1.12;
  }

  .story-origin-copy p,
  .story-faifo-text p{
    font-size:14px;
    line-height:1.82;
  }

  .story-quote{
    padding:58px 22px 64px;
  }

  .story-quote p{
    font-size:24px;
    line-height:1.34;
    letter-spacing:0;
  }

  .story-quote p span{
    display:inline;
  }

  .story-quote p span::after{
    content:" ";
  }

  .story-faifo{
    padding:56px 0 76px;
  }

  .story-faifo-text h3{
    margin-bottom:18px;
    font-size:14px;
    line-height:1.82;
  }
}

@media(max-width:380px){
  .story-quote p{
    font-size:22px;
    line-height:1.36;
  }
}


/* =========================================
   OUR STORY WIDTH STANDARD
   Match content.css global section width.
   Scoped only to Our Story containers.
========================================= */

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

.story-origin-container{
  width:var(--lhag-section-width) !important;
  max-width:var(--lhag-section-width) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.story-quote-inner{
  width:min(860px, var(--lhag-section-width)) !important;
  max-width:min(860px, var(--lhag-section-width)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

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

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

  .story-origin-container{
    width:var(--lhag-section-width) !important;
    max-width:var(--lhag-section-width) !important;
  }

  .story-quote-inner{
    width:min(100%, var(--lhag-section-width)) !important;
    max-width:min(100%, var(--lhag-section-width)) !important;
  }
}

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

  .story-origin-container{
    width:100% !important;
    max-width:100% !important;
    padding-left:22px !important;
    padding-right:22px !important;
    box-sizing:border-box !important;
  }

  .story-quote-inner{
    width:100% !important;
    max-width:100% !important;
  }
}

/* Hotels & Brands logo collection, shared with the Hotels & Brands page. */
.hb-container{
  width:min(1180px,calc(100% - 90px));
  margin-inline:auto;
}

.hb-cta{
  padding:88px 0 96px;
  color:var(--ink, #2b2723);
  background:#edeae4;
}

.hb-cta-inner{
  display:block;
  text-align:center;
}

.hb-cta h2{
  width:auto;
  margin:0 0 42px;
  color:var(--ink, #2b2723);
  font-size:34px;
  line-height:1.15;
}

.hb-logo-frame{
  --hb-logo-frame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M6 .75H94C94 3.65 96.35 6 99.25 6V94C96.35 94 94 96.35 94 99.25H6C6 96.35 3.65 94 .75 94V6C3.65 6 6 3.65 6 .75Z' fill='none' stroke='%238b0304' stroke-opacity='.34' stroke-width='1.2'/%3E%3C/svg%3E");
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  align-items:center;
  gap:24px;
  width:100%;
  padding:30px 34px;
  box-sizing:border-box;
  border:8px solid transparent;
  border-image-source:var(--hb-logo-frame);
  border-image-slice:8;
  border-image-width:8px;
  border-image-repeat:stretch;
}

.hb-logo-frame a{
  --hb-logo-scale:1;
  display:grid;
  place-items:center;
  min-width:0;
  min-height:118px;
  padding:10px;
  transition:opacity .3s ease, transform .45s cubic-bezier(.22,.72,.22,1);
}

.hb-logo-frame img{
  display:block;
  width:min(148px,100%);
  height:96px;
  object-fit:contain;
  transform:scale(var(--hb-logo-scale));
  transform-origin:center;
}

.hb-logo-frame .hb-logo--little-hoian,
.hb-logo-frame .hb-logo--oasis,
.hb-logo-frame .hb-logo--faifo{
  --hb-logo-scale:.88;
}

.hb-logo-frame .hb-logo--residence{
  --hb-logo-scale:1.13;
}

.hb-logo-frame .hb-logo--allegro{
  --hb-logo-scale:1.04;
}

.hb-logo-frame .hb-logo--riverside{
  --hb-logo-scale:1.1;
}

.hb-logo-frame a:hover{
  opacity:.78;
  transform:translateY(-3px);
}

@media(max-width:980px){
  .hb-logo-frame{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:560px){
  .hb-container{
    width:calc(100% - 36px);
  }

  .hb-cta{
    padding:68px 0 74px;
  }

  .hb-cta h2{
    margin-bottom:30px;
    font-size:28px;
  }

  .hb-logo-frame{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    padding:22px 18px;
  }

  .hb-logo-frame a{
    min-height:104px;
    padding:8px;
  }

  .hb-logo-frame img{
    width:min(124px,100%);
    height:82px;
  }
}