/* =========================================================
   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;
  }
}