/* ==========================================================================
   Brazil Boogie , design language modelled on ourhabitas.com
   Type: Cormorant Garamond (stands in for Canela) + Jost (stands in for Arboria/Canaro)
   Palette + metrics lifted from the Habitas theme stylesheet.
   ========================================================================== */

:root{
  --taupe:#796c5c;        /* primary: headings, buttons, borders */
  --taupe-2:#807566;      /* secondary headings */
  --dark:#404242;         /* overlays */
  --body:#444;            /* body copy */
  --cream:#fff8ee;        /* secondary button fill */
  --offwhite:#f9f8f7;     /* section background */
  --white:#fff;
  --near-black:#161616;
  --container:1358px;
  --gutter:32px;
  --ease:cubic-bezier(.405,.005,0,1);
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:62.5%;scroll-behavior:smooth}          /* 1rem = 10px, as Habitas */
body{
  margin:0;max-width:100%;overflow-x:hidden;overscroll-behavior:none;
  color:var(--body);
  font:400 1.8rem/1.4 'Jost',"Helvetica Neue",Helvetica,Arial,sans-serif;
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
body.nav-open{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{margin:0;padding:0;font-weight:400}
button{font-family:inherit;border:0;background:none;cursor:pointer;padding:0;color:inherit}

.container{max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.u-mb-50{margin-bottom:50px}
.u-mb-125{margin-bottom:125px}

/* ---------- display type ---------- */
.h1,.h2,.h3,h1,h2,h3{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:300;
}
.h1{
  color:var(--taupe);font-size:4rem;font-weight:500;
  letter-spacing:.45rem;text-align:center;text-transform:uppercase;line-height:1.15;
}
.h2{
  color:var(--taupe-2);font-size:3.6rem;font-weight:500;
  letter-spacing:.17rem;line-height:1;
}
.h3{
  font-family:'Jost',sans-serif;color:#333;font-size:2.2rem;font-weight:500;
  letter-spacing:.2rem;line-height:1.2;text-transform:uppercase;
}
.eyebrow{
  font-family:'Jost',sans-serif;font-size:1.1rem;font-weight:500;
  letter-spacing:.45rem;text-transform:uppercase;color:var(--taupe);
}

/* ---------- buttons (exact Habitas metrics) ---------- */
.btn{
  border:1px solid var(--taupe);color:var(--taupe);
  display:inline-flex;justify-content:center;align-items:center;
  font-family:'Jost',sans-serif;font-size:1.4rem;font-weight:500;
  letter-spacing:.44rem;line-height:1;padding:21px 55px;min-width:365px;
  text-align:center;text-transform:uppercase;transition:all .3s ease-in;
  background:transparent;cursor:pointer;
}
.btn:hover,.btn:focus{background-color:var(--taupe);color:var(--white)}
.btn--fill{background-color:var(--taupe);color:var(--white)}
.btn--fill:hover,.btn--fill:focus{background-color:transparent;color:var(--taupe)}
.btn--light{border-color:var(--white);color:var(--white)}
.btn--light:hover,.btn--light:focus{background-color:var(--white);color:var(--taupe)}
.btn-secondary{
  background-color:var(--cream);border:2px solid var(--cream);border-radius:1.8rem;
  font-family:'Jost',sans-serif;font-size:1.4rem;font-weight:600;
  letter-spacing:.2rem;line-height:2rem;padding:10px 25px;
  text-transform:uppercase;transition:all .3s ease-in;color:var(--body);
}
.btn-secondary:hover,.btn-secondary:focus{background-color:var(--taupe);border-color:var(--taupe);color:var(--cream)}
@media(max-width:640px){.btn{min-width:0;width:100%;padding:19px 30px;letter-spacing:.3rem}}

/* ==========================================================================
   HEADER
   ========================================================================== */
.page-header{
  position:fixed;top:0;left:0;right:0;z-index:90;height:auto;pointer-events:none;
  max-width:none;padding:0;
  transition:background-color .3s ease-in,box-shadow .3s ease-in;
}
.page-header:before{
  content:"";position:absolute;left:0;right:0;top:0;height:15%;min-height:110px;
  background-image:linear-gradient(180deg,#000,transparent);
  opacity:.5;transition:all .3s ease-in;
}
.page-header.is-scrolling:before{opacity:0}
.page-header.is-scrolling{background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.page-header.is-scrolling .hamburger,
.page-header.is-scrolling .header-home-logo{color:var(--taupe)}
.page-header.is-scrolling .btn-secondary{background:var(--taupe);border-color:var(--taupe);color:#fff}
.page-header__inner{
  position:relative;height:100%;max-width:var(--container);margin:0 auto;
  padding:25px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
}
.page-header__inner > *{pointer-events:auto}
.header-left{display:flex;align-items:center;gap:34px}

.hamburger{display:flex;align-items:center;gap:12px;color:var(--white);z-index:120;position:relative}
.hamburger svg{transition:.6s var(--ease)}
.hamburger.is-opened svg{transform:rotate(120deg)}
.hamburger__copy{
  font-family:'Jost',sans-serif;font-size:1.3rem;font-weight:300;
  letter-spacing:normal;line-height:1.495rem;text-transform:uppercase;
}
.header-home-logo{
  font-family:'Playfair Display',serif;color:var(--white);
  font-size:2.2rem;letter-spacing:.5rem;text-transform:uppercase;white-space:nowrap;
  position:absolute;left:50%;transform:translateX(-50%);
}
@media(max-width:900px){
  .hamburger__copy{display:none}
  .header-home-logo{font-size:1.7rem;letter-spacing:.35rem}
}

/* ---------- slide-in nav ---------- */
.nav{position:fixed;inset:0;z-index:110;visibility:hidden;pointer-events:none;
  background-color:rgba(0,0,0,.3)}
.nav__scrim{
  position:absolute;inset:0;background-color:transparent;
  opacity:0;transition:opacity .4s ease-in;
}
.nav__inner{
  position:relative;height:100vh;max-height:100vh;width:min(494px,100%);
  background-color:rgba(127,117,102,.9);
  padding:0 var(--gutter);
  display:flex;flex-direction:column;justify-content:center;
  transform:translateX(-100%);
  transition:transform .7s var(--ease);
}
.nav.is-opened{visibility:visible;pointer-events:auto}
.nav.is-opened .nav__scrim{opacity:1}
.nav.is-opened .nav__inner{transform:translateX(0);transition-delay:.4s}

.nav__menu-wrap{padding-top:40px}
.nav__logo{max-width:300px;margin-bottom:48px;opacity:0;visibility:hidden;transition:all .5s ease-in}
.nav__logo span{
  font-family:'Playfair Display',serif;color:var(--white);
  font-size:2.4rem;letter-spacing:.5rem;text-transform:uppercase;
}
.nav__menu{max-width:294px;list-style:none;margin:0;padding:0}
.nav__menu > li{
  margin-bottom:12px;opacity:0;visibility:hidden;
  transition:opacity .5s ease-in,visibility .5s ease-in;
}
.nav.is-opened .nav__logo,.nav.is-opened .nav__menu > li{opacity:1;visibility:visible}
.nav.is-opened .nav__menu>li:nth-child(1){transition-delay:.7s}
.nav.is-opened .nav__menu>li:nth-child(2){transition-delay:.8s}
.nav.is-opened .nav__menu>li:nth-child(3){transition-delay:.9s}
.nav.is-opened .nav__menu>li:nth-child(4){transition-delay:1s}
.nav.is-opened .nav__menu>li:nth-child(5){transition-delay:1.1s}
.nav.is-opened .nav__menu>li:nth-child(6){transition-delay:1.2s}
.nav.is-opened .nav__menu>li:nth-child(7){transition-delay:1.3s}
.nav__menu a,.nav__link-text{
  color:var(--white);font-family:'Jost',sans-serif;font-size:2rem;font-weight:400;
  letter-spacing:.2rem;line-height:2.6rem;position:relative;display:inline-block;
  text-transform:uppercase;
}
.nav__menu a:before{
  content:"";position:absolute;right:0;bottom:-2px;height:2px;width:0;
  background-color:currentColor;transition:all .3s ease-in;
}
.nav__menu a:hover:before{width:100%;left:0;right:auto}

/* sub-menu ("Rooms" -> the three tiers), mirrors Habitas "Our Homes" */
.nav .sub-menu{padding-top:18px;padding-left:0;list-style:none;margin:0;
  max-height:0;overflow:hidden;transition:max-height .5s var(--ease),padding-top .5s var(--ease)}
.nav .sub-menu.is-open{max-height:320px}
.nav .sub-menu li{margin-bottom:10px}
.nav .sub-menu a{font-size:1.4rem;font-weight:400;letter-spacing:.2rem;line-height:2rem;
  text-transform:none;color:rgba(255,255,255,.5)}
.nav .sub-menu a:hover{color:var(--white)}
.nav__row{display:flex;align-items:center;gap:14px}
.nav__toggle{display:inline-flex;align-items:center;color:var(--white);padding:6px 4px}
.nav__toggle .chev{transition:transform .4s var(--ease)}
.nav__toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav__foot{
  margin-top:56px;font-family:'Jost',sans-serif;font-size:1.1rem;
  letter-spacing:.35rem;text-transform:uppercase;color:rgba(255,255,255,.45);
  opacity:0;transition:opacity .5s ease-in .1s;
}
.nav.is-opened .nav__foot{opacity:1;transition-delay:1.4s}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;height:76vh;min-height:520px;overflow:hidden;color:var(--white)}
.hero--short{height:72vh;min-height:460px}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);transition:transform 1.2s var(--ease)}
.hero.is-ready .hero__media img{transform:scale(1)}
.hero__media:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.15) 45%,rgba(0,0,0,.55) 100%);
}
/* short heroes put the title over the middle of the frame, so they need a
   centred scrim as well as the top/bottom one */
.hero--short .hero__media:after{
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,0) 70%),
    linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.2) 50%,rgba(0,0,0,.45) 100%);
}
.hero__inner{
  position:relative;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
}
.hero__inner h1{
  font-family:'Playfair Display',serif;font-size:61px;font-weight:300;
  letter-spacing:.2rem;text-transform:uppercase;color:var(--white);line-height:1.1;
}
.hero__sub{
  margin-top:26px;font-family:'Jost',sans-serif;font-size:1.2rem;font-weight:400;
  letter-spacing:.45rem;text-transform:uppercase;color:rgba(255,255,255,.9);
}
.hero__scroll{
  position:absolute;bottom:44px;left:50%;transform:translateX(-50%);
  width:34px;height:34px;border:1px solid rgba(255,255,255,.7);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--white);
  animation:bob 2.6s var(--ease) infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}}
@media(max-width:760px){.hero__inner h1{font-size:34px;letter-spacing:.12rem}}

/* ==========================================================================
   INTRO COPY (centred, max 500px , straight from Habitas)
   ========================================================================== */
.intro-copy{margin-bottom:125px;padding-top:100px}
.intro-copy__inner{
  font-family:'Jost',sans-serif;font-size:1.8rem;font-weight:300;letter-spacing:.02rem;
  margin-left:auto;margin-right:auto;max-width:500px;text-align:center;
}
.intro-copy__inner h2,.intro-copy__inner .h1{color:var(--taupe);line-height:1.1;margin-bottom:40px}
.intro-copy__inner p{margin:0 0 18px}
.intro-copy--left .intro-copy__inner{text-align:left}
/* the opening block carries more copy than Habitas ever does, so it gets room */
.intro-copy__inner--wide{max-width:500px}
/* the opening hook is a single line, so it gets to break the 640px column */
.intro-copy__inner--wide > .h1{
  max-width:none;width:max-content;margin-left:auto;margin-right:auto;
  white-space:nowrap;font-size:3.6rem;font-weight:500;letter-spacing:-.009rem;
  line-height:1.1;text-transform:none;
}
@media(max-width:560px){
  .intro-copy__inner--wide > .h1{white-space:normal;width:auto;max-width:100%;font-size:2.6rem;letter-spacing:.2rem}
}
.intro-copy__inner--wide p{margin-bottom:18px}

/* ==========================================================================
   FULL-BLEED MEDIA BREAK
   ========================================================================== */
.media-block{margin:0 auto 50px;overflow:hidden;max-width:var(--container);padding:0 var(--gutter)}
.media-block img{width:100%;height:78vh;min-height:420px;object-fit:cover}

/* ==========================================================================
   IMAGE + TEXT  (Concept A: Habitas metrics, full-bleed media, 115px rule,
   image scales back as the copy slides up)
   ========================================================================== */
.img-text{
  display:flex;align-items:center;justify-content:space-between;gap:6%;
  max-width:var(--container);margin:0 auto 140px;padding:0 var(--gutter);
}
.img-text--flip{flex-direction:row-reverse}
.img-text__media{width:52%;overflow:hidden;flex:none}
.img-text__media img,.img-text__media video{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transform:scale(1.12);transition:transform .8s var(--ease);
}
.img-text.is-visible .img-text__media img,.img-text.is-visible .img-text__media video{transform:scale(1)}
.img-text__copy{
  flex:1;padding:0 4%;max-width:none;
  text-align:center;display:flex;flex-direction:column;align-items:center;
}

.img-text__copy h2{
  font-family:'Playfair Display',serif;color:var(--taupe);font-size:5.2rem;font-weight:500;
  letter-spacing:.25rem;text-transform:uppercase;line-height:1;margin:0;
}
.img-text__copy p{position:relative;font-size:1.8rem;font-weight:300;letter-spacing:.02rem;line-height:1.4;color:var(--body);margin:0;max-width:300px}
.img-text__copy p:first-of-type:before{
  content:"";display:block;width:115px;height:1px;background:var(--taupe);
  margin:44px auto 50px;
}
.img-text__copy .btn{
  margin-top:80px;border:0;padding:0 0 8px;min-width:0;background:transparent;
  color:var(--taupe);border-bottom:1px solid var(--taupe);
  font-size:1.4rem;font-weight:500;letter-spacing:.44rem;
}
.img-text__copy .btn:hover,.img-text__copy .btn:focus{
  background:transparent;color:var(--body);border-bottom-color:var(--body);
}
@media(max-width:900px){
  .img-text,.img-text--flip{flex-direction:column;margin-bottom:76px;gap:0;padding:0 var(--gutter)}
  .img-text__media,.img-text__copy{width:100%}
  .img-text__copy{padding:36px var(--gutter) 0;text-align:center;align-items:center}
  .img-text__copy h2{font-size:2.6rem;letter-spacing:.08rem}
  .img-text__copy p{font-size:1.5rem}
  .img-text__copy p:first-of-type:before{margin:26px 0 28px;width:80px}
  /* on a phone the underlined text link floats alone and reads as a heading,
     so it becomes a real bordered button that is obviously tappable */
  .img-text__copy .btn{
    margin-top:32px;align-self:stretch;width:auto;padding:18px 24px;
    border:1px solid var(--taupe);border-bottom:1px solid var(--taupe);
    letter-spacing:.3rem;font-size:1.2rem;
  }
  .img-text__copy .btn:hover,.img-text__copy .btn:focus{
    background:var(--taupe);color:#fff;
  }
}

/* ==========================================================================
   CAROUSEL (Habitas "core values" slider)
   Natively scrollable so trackpad, wheel and touch all work; arrows just
   call scrollBy on the same element.
   ========================================================================== */
.slider-section{overflow:hidden;padding-top:45px;padding-bottom:64px;background:var(--white)}
.slider-header{display:flex;justify-content:center;margin-bottom:56px}
/* every section heading behaves the same way */
.slider-viewport{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;
  cursor:grab;
}
.slider-viewport::-webkit-scrollbar{display:none}
.slider-viewport.is-dragging{cursor:grabbing;scroll-snap-type:none}
.slider-track{display:flex;gap:24px;width:max-content;padding-bottom:4px}
.slide{flex:0 0 410px;max-width:410px;scroll-snap-align:start}
.slide__media{overflow:hidden;aspect-ratio:3/4}
.slide__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.slide:hover .slide__media img{transform:scale(1.05)}
.slide__details{padding-top:32px;line-height:25px}
.slide__title{
  font-family:'Jost',sans-serif;font-size:2.2rem;font-weight:500;letter-spacing:.2rem;
  line-height:2.6rem;color:#333;text-transform:uppercase;margin-bottom:11px;display:block;
}
.slide__text{font-size:1.6rem;color:var(--body)}
.slider-nav{display:flex;gap:16px;justify-content:center;margin-top:48px}
.slider-nav button{
  width:46px;height:46px;border:1px solid var(--taupe);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--taupe);
  transition:all .3s ease-in;
}
.slider-nav button:hover:not(:disabled){background:var(--taupe);color:var(--white)}
.slider-nav button:disabled{opacity:.3;cursor:default}

/* ==========================================================================
   ROOM / PRICING CARDS
   ========================================================================== */
.rooms-section{background:var(--offwhite);padding-top:100px;padding-bottom:100px}

/* three photo cards side by side: photo, name, one line, price, link */
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:64px;align-items:stretch}
.room-card{background:var(--white);display:flex;flex-direction:column;transition:box-shadow .4s ease-in}
.room-card:hover{box-shadow:0 24px 60px rgba(64,66,66,.10)}
.room-card__media{overflow:hidden;aspect-ratio:3/4}
.room-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.room-card:hover .room-card__media img{transform:scale(1.06)}
.room-card__body{padding:34px 30px 36px;display:flex;flex-direction:column;flex:1;text-align:center}
.room-card h3{
  font-family:'Jost',sans-serif;font-size:2.2rem;font-weight:500;
  letter-spacing:.2rem;text-transform:uppercase;color:#333;
  margin-bottom:12px;line-height:2.6rem;
}
.room-card__beds{font-size:1.8rem;font-weight:400;line-height:2.5rem;color:var(--body);margin-bottom:26px}
.room-card__price{
  font-family:'Playfair Display',serif;font-size:4.4rem;font-weight:300;
  color:var(--body);line-height:1;margin-top:auto;
}
.room-card__per{font-family:'Jost',sans-serif;font-size:1.1rem;letter-spacing:.3rem;
  text-transform:uppercase;color:#9a918a;margin-top:12px}
.room-card__cta{
  margin-top:26px;font-family:'Jost',sans-serif;font-size:1.2rem;font-weight:500;
  letter-spacing:.4rem;text-transform:uppercase;color:var(--taupe);
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
}
.room-card__cta .arrow{transition:transform .3s ease-in}
.room-card:hover .room-card__cta .arrow{transform:translateX(6px)}

/* ==========================================================================
   AIRBNB-STYLE LABELLED GALLERY
   ========================================================================== */
.gallery-section{padding-top:100px;padding-bottom:100px}
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 32px;margin-top:64px}
.gallery-grid--3{grid-template-columns:repeat(3,1fr)}
.gallery-item{cursor:zoom-in}
.gallery-item__media{overflow:hidden;aspect-ratio:3/2;background:#efeae3}
.gallery-item__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gallery-item:hover .gallery-item__media img{transform:scale(1.05)}
.gallery-item__label{
  padding-top:16px;font-family:'Jost',sans-serif;font-size:1.2rem;font-weight:400;
  letter-spacing:.3rem;text-transform:uppercase;color:var(--taupe-2);
}
@media(max-width:900px){.gallery-grid,.gallery-grid--3{grid-template-columns:1fr}}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(22,22,22,.96);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .4s ease-in,visibility .4s ease-in;
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox img{max-width:88vw;max-height:78vh;object-fit:contain}
.lightbox__cap{
  margin-top:24px;font-family:'Jost',sans-serif;font-size:1.2rem;letter-spacing:.3rem;
  text-transform:uppercase;color:rgba(255,255,255,.7);
}
.lightbox__close{position:absolute;top:30px;right:36px;color:#fff}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;padding:20px}
.lightbox__nav--prev{left:16px}
.lightbox__nav--next{right:16px}

/* ==========================================================================
   ROOM PAGE SPECIFICS
   ========================================================================== */
.room-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:32px 40px;
  border-top:1px solid #ece7e0;border-bottom:1px solid #ece7e0;padding:44px 0;margin-bottom:80px}
.room-fact__label{font-family:'Jost',sans-serif;font-size:1rem;letter-spacing:.4rem;
  text-transform:uppercase;color:#9a918a;margin-bottom:12px}
.room-fact__value{
  font-family:'Playfair Display',serif;font-size:clamp(1.9rem,2vw,2.6rem);
  font-weight:300;color:var(--taupe);line-height:1.2;overflow-wrap:break-word;
}
@media(max-width:760px){.room-facts{grid-template-columns:1fr 1fr;gap:26px 24px;padding:32px 0;margin-bottom:56px}}

.back-link{
  display:inline-flex;align-items:center;gap:12px;font-family:'Jost',sans-serif;
  font-size:1.1rem;letter-spacing:.4rem;text-transform:uppercase;color:var(--taupe);
  margin-bottom:48px;
}
.back-link .arrow{transition:transform .3s ease-in}
.back-link:hover .arrow{transform:translateX(-6px)}

/* ==========================================================================
   CTA + FOOTER
   ========================================================================== */
.cta{position:relative;padding:150px 0;text-align:center;color:var(--white);overflow:hidden}
.cta__media{position:absolute;inset:0}
.cta__media img{width:100%;height:100%;object-fit:cover}
.cta__media:after{content:"";position:absolute;inset:0;background-color:var(--dark);opacity:.72}
.cta .container{position:relative}
.cta h2{font-family:'Playfair Display',serif;font-size:4rem;font-weight:300;
  letter-spacing:.45rem;text-transform:uppercase;margin-bottom:28px}
.cta p{max-width:500px;margin:0 auto 44px;color:rgba(255,255,255,.85)}

.page-footer{background:rgb(70,69,67);color:rgba(255,255,255,.8);padding:80px 0 44px}
.page-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px}
.page-footer__brand p{max-width:260px}
.page-footer__logo{font-family:'Playfair Display',serif;color:#fff;font-size:2.4rem;
  letter-spacing:.5rem;text-transform:uppercase;margin-bottom:20px}
.page-footer h4{font-family:'Jost',sans-serif;font-size:1.1rem;font-weight:500;letter-spacing:.4rem;
  text-transform:uppercase;color:rgba(255,255,255,.45);margin:0 0 22px}
.page-footer ul{list-style:none;margin:0;padding:0}
.page-footer li{margin-bottom:12px}
.page-footer a{font-size:1.4rem;letter-spacing:.1rem;transition:color .3s ease-in}
.page-footer a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.16);padding-top:30px;color:rgba(255,255,255,.8);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:'Jost',sans-serif;font-size:1.1rem;letter-spacing:.3rem;text-transform:uppercase}
@media(max-width:820px){.page-footer__grid{grid-template-columns:1fr;gap:40px}}

/* ==========================================================================
   SCROLL REVEAL (stands in for their GSAP js-visibility)
   ========================================================================== */
.js-visibility{opacity:0;transform:translateY(40px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-visibility.is-visible{opacity:1;transform:none}
.js-visibility[data-delay="1"]{transition-delay:.12s}
.js-visibility[data-delay="2"]{transition-delay:.24s}
.js-visibility[data-delay="3"]{transition-delay:.36s}
@media(prefers-reduced-motion:reduce){
  .js-visibility{opacity:1;transform:none;transition:none}
  .hero__scroll{animation:none}
  .hero__media img{transform:none}
}

/* ---------- page transition (stands in for Barba) ---------- */
.page-fade{position:fixed;inset:0;z-index:300;background:var(--near-black);
  pointer-events:none;opacity:1;transition:opacity .7s var(--ease)}
.page-fade.is-done{opacity:0}
.page-fade.is-leaving{opacity:1;pointer-events:auto}

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media(max-width:980px){
  .rooms{grid-template-columns:1fr;gap:28px}
  .room-card__media{aspect-ratio:16/10}
}
@media(max-width:760px){
  :root{--gutter:22px}
  section{padding-top:0;padding-bottom:0}
  .intro-copy{padding-top:64px;margin-bottom:32px}
  .u-mb-125{margin-bottom:64px}
  .slider-section{padding-top:32px;padding-bottom:48px}
  .slider-header{margin-bottom:36px}
  .rooms-section{padding-top:72px;padding-bottom:72px}
  .gallery-section{padding-top:64px;padding-bottom:64px}
  .room-facts{margin-bottom:44px}
  .places{margin-bottom:8px}
  .cta{padding-top:96px;padding-bottom:96px}
  .h1{font-size:2.8rem;letter-spacing:.3rem}
  .h2{font-size:2.6rem}
  .hero__sub{font-size:1.05rem;letter-spacing:.3rem}
  .header-home-logo{font-size:1.5rem;letter-spacing:.28rem}
  .page-header__inner{padding-top:16px;padding-bottom:16px}
  .btn-secondary{font-size:1rem;letter-spacing:.3rem;padding:9px 18px}
  .slide{flex:0 0 78vw;max-width:78vw}
  .slide__title{font-size:1.8rem}
  .slider-nav{display:none}            /* thumb-scroll instead of arrows */
  .media-block img{height:52vh;min-height:300px}
  .img-text{margin-bottom:32px}
  .room-card h3{font-size:2.6rem}
  .room-card__price{font-size:3.8rem}
  .gallery-grid,.gallery-grid--3{gap:26px}
  .cta h2{font-size:2.8rem;letter-spacing:.3rem}
  .page-footer{padding:56px 0 32px}
  .footer-bottom{flex-direction:column;gap:10px}
  .lightbox__nav{padding:12px}
  .lightbox img{max-width:94vw;max-height:66vh}
}
@media(max-width:420px){
  .hero__inner h1{font-size:28px}
  .header-home-logo{font-size:1.3rem;letter-spacing:.2rem}
  .room-facts{grid-template-columns:1fr}
}

/* ==========================================================================
   PHOTO TOUR GROUPS (the house page, grouped as Airbnb groups it)
   ========================================================================== */
/* sticky room rail, like Airbnb's photo tour */
.tour-rail{
  position:sticky;top:0;z-index:40;background:var(--white);
  border-bottom:1px solid #ece7e0;margin-bottom:56px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.tour-rail::-webkit-scrollbar{display:none}
.tour-rail ul{display:flex;gap:34px;list-style:none;margin:0;padding:22px 0;width:max-content}
.tour-rail a{
  font-family:'Jost',sans-serif;font-size:1.1rem;font-weight:500;letter-spacing:.3rem;
  text-transform:uppercase;color:#9a918a;white-space:nowrap;
  padding-bottom:6px;border-bottom:1px solid transparent;transition:all .3s ease-in;
}
.tour-rail a:hover{color:var(--taupe);border-bottom-color:var(--taupe)}

.tour-group{margin-bottom:88px;scroll-margin-top:90px}
.tour-group__title{
  font-family:'Jost',sans-serif;font-size:1.2rem;font-weight:500;
  letter-spacing:.45rem;text-transform:uppercase;color:var(--taupe);
  padding-bottom:18px;border-bottom:1px solid var(--line,#ece7e0);
}
.tour-group__hl{
  font-family:'Jost',sans-serif;font-size:1.4rem;font-weight:300;color:#8a8078;
  margin:14px 0 0;
}
.tour-group .gallery-grid{margin-top:28px;grid-template-columns:repeat(2,1fr);gap:16px}
.tour-group .gallery-grid > .gallery-item:first-child{grid-column:1 / -1}
.tour-group .gallery-grid > .gallery-item:first-child .gallery-item__media{aspect-ratio:16/9}
@media(max-width:760px){
  .tour-group .gallery-grid{grid-template-columns:1fr}
  .tour-group{margin-bottom:56px}
}
.note{
  text-align:center;color:#9a918a;font-family:'Jost',sans-serif;
  font-size:1.2rem;letter-spacing:.3rem;text-transform:uppercase;padding:40px 0;
}

/* ==========================================================================
   THE AREA: places list
   ========================================================================== */
.places{border-top:1px solid #ece7e0;margin-top:8px}
.place{
  display:grid;grid-template-columns:1.6fr 1fr auto;gap:24px;align-items:baseline;
  padding:26px 0;border-bottom:1px solid #ece7e0;
}
.place__name{
  font-family:'Playfair Display',serif;font-size:2.4rem;font-weight:300;color:var(--taupe);
}
.place__kind{
  font-family:'Jost',sans-serif;font-size:1.1rem;letter-spacing:.3rem;
  text-transform:uppercase;color:#9a918a;
}
.place__dist{
  font-family:'Jost',sans-serif;font-size:1.4rem;color:var(--body);white-space:nowrap;
}
@media(max-width:700px){
  .place{grid-template-columns:1fr auto;gap:8px 20px}
  .place__name{grid-column:1/-1}
}

/* ==========================================================================
   THE AREA
   ========================================================================== */
.area-blocks{
  display:grid;grid-template-columns:repeat(2,1fr);gap:56px 72px;
  margin:88px 0;
}
.area-block__title{
  font-family:'Jost',sans-serif;font-size:1.2rem;font-weight:500;
  letter-spacing:.45rem;text-transform:uppercase;color:var(--taupe);
  padding-bottom:16px;border-bottom:1px solid #ece7e0;margin-bottom:22px;
}
.area-block p{font-size:1.7rem;line-height:1.55;color:var(--body);margin:0}

.notice{
  background:var(--cream);padding:40px 48px;margin:0 auto;max-width:820px;
  border-left:2px solid var(--taupe);
}
.notice h3{
  font-family:'Jost',sans-serif;font-size:1.2rem;font-weight:500;
  letter-spacing:.45rem;text-transform:uppercase;color:var(--taupe);margin-bottom:16px;
}
.notice p{font-size:1.7rem;line-height:1.55;margin:0;color:var(--body)}
@media(max-width:900px){
  .area-blocks{grid-template-columns:1fr;gap:44px;margin:64px 0}
  .notice{padding:30px 26px}
}

/* area sections can carry a photo above the heading */
.area-block__media{overflow:hidden;aspect-ratio:3/2;margin-bottom:22px;background:var(--shell,#efeae3)}
.area-block__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.area-block:hover .area-block__media img{transform:scale(1.04)}

/* carousel cards that link to a page */
.slide--link .slide__media{aspect-ratio:4/5}
.slide--link .slide__title{transition:color .3s ease-in}
.slide--link:hover .slide__title{color:var(--taupe)}
.slide--link .slide__details{position:relative;padding-right:34px}
.slide--link .slide__details:after{
  content:"";position:absolute;right:4px;top:34px;width:18px;height:8px;
  border-right:1px solid var(--taupe);border-top:1px solid var(--taupe);
  transform:rotate(45deg);transition:transform .3s ease-in;
}
.slide--link:hover .slide__details:after{transform:rotate(45deg) translate(3px,-3px)}

/* ==========================================================================
   PLACEHOLDER (skydiving photo/video slot, awaiting Callie's content)
   ========================================================================== */
.placeholder{padding:0 0 100px}
.placeholder__box{
  aspect-ratio:16/7;background:var(--cream);border:1px dashed #d8cdba;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
}
.placeholder__label{
  font-family:'Playfair Display',serif;font-size:clamp(2.2rem,3vw,3.6rem);
  font-weight:300;letter-spacing:.3rem;text-transform:uppercase;color:var(--taupe);
  text-align:center;padding:0 24px;
}
.placeholder__sub{
  font-family:'Jost',sans-serif;font-size:1rem;font-weight:500;letter-spacing:.4rem;
  text-transform:uppercase;color:#b3a795;
}
@media(max-width:760px){.placeholder{padding-bottom:64px}.placeholder__box{aspect-ratio:4/3}}

/* ==========================================================================
   APPLICATION FORM
   ========================================================================== */
.form{max-width:820px;margin:0 auto}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px}
.field{display:block;margin-bottom:34px}
.field__label{
  display:block;font-family:'Jost',sans-serif;font-size:1.1rem;font-weight:500;
  letter-spacing:.35rem;text-transform:uppercase;color:var(--taupe);margin-bottom:12px;
}
.field__label em{font-style:normal;color:#b3a795;letter-spacing:.25rem}
.field input,.field select,.field textarea{
  width:100%;box-sizing:border-box;background:transparent;
  border:0;border-bottom:1px solid #ddd2c2;border-radius:0;
  font-family:'Jost',sans-serif;font-size:1.7rem;font-weight:300;color:var(--body);
  padding:12px 2px;transition:border-color .3s ease-in;
  -webkit-appearance:none;appearance:none;
}
.field textarea{border:1px solid #ddd2c2;padding:14px;resize:vertical}
.field select{
  cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none' stroke='%23796c5c' stroke-width='1.3'><path d='M1 1l4.5 4.5L10 1'/></svg>");
  background-repeat:no-repeat;background-position:right 4px center;padding-right:28px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--taupe);
}
.field input::placeholder,.field textarea::placeholder{color:#c3b9ab}

.check{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px;cursor:pointer}
.check input{
  flex:none;width:17px;height:17px;margin-top:4px;accent-color:var(--taupe);cursor:pointer;
}
.check span{font-size:1.5rem;line-height:1.5;color:var(--body)}
.form .btn{margin-top:26px}
.form__note{
  margin-top:22px;font-family:'Jost',sans-serif;font-size:1.4rem;color:var(--taupe);min-height:1em;
}
@media(max-width:760px){
  .form__row{grid-template-columns:1fr;gap:0}
  .field{margin-bottom:28px}
}

/* plus-one callout on the Private Suite */
.room-card__note{
  margin-top:16px;font-family:'Jost',sans-serif;font-size:1.3rem;font-weight:400;
  color:var(--taupe);background:var(--cream);padding:10px 14px;line-height:1.4;
}
.hero__note{
  margin-top:14px;font-family:'Jost',sans-serif;font-size:1.2rem;font-weight:500;
  letter-spacing:.2rem;color:#fff;background:rgba(121,108,92,.85);
  padding:9px 18px;border-radius:2px;display:inline-block;
}

/* ==========================================================================
   RECENT JUMPS (Instagram tiles)
   ========================================================================== */
.reels{padding:0 0 100px}
.reels .slider-header{margin-bottom:14px}
.reels .h1{font-size:2.2rem;letter-spacing:.4rem}
.reels__note{
  text-align:center;font-family:'Jost',sans-serif;font-size:1.2rem;font-weight:300;
  letter-spacing:.1rem;color:#9a918a;margin:0 0 40px;
}
.reels__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.reel{
  aspect-ratio:9/16;background:var(--cream);border:1px solid #ece7e0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:var(--taupe);
  transition:border-color .3s ease-in,transform .4s var(--ease);
}
.reel img{width:100%;height:100%;object-fit:cover}
a.reel:hover{border-color:#c9bda8;transform:translateY(-3px)}
.reels__play{opacity:.5;transition:opacity .3s ease-in}
a.reel:hover .reels__play{opacity:1}
.reel--empty{cursor:default}



/* ==========================================================================
   WHAT'S INCLUDED (shown wherever a price appears)
   ========================================================================== */
.incl{margin-top:56px;border-top:1px solid #ece7e0;padding-top:40px}
/* above the price cards: no top rule, sits as an intro instead of a footnote */
.incl--top{margin-top:0;margin-bottom:56px;border-top:0;border-bottom:1px solid #ece7e0;
  padding-top:0;padding-bottom:44px}
.incl__title{
  text-align:center;font-family:'Jost',sans-serif;font-size:1.1rem;font-weight:500;
  letter-spacing:.45rem;text-transform:uppercase;color:var(--taupe);margin-bottom:32px;
}
.incl__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.incl__item{text-align:center}
.incl__k{
  font-family:'Playfair Display',serif;font-size:2.1rem;font-weight:300;
  color:var(--taupe);margin-bottom:6px;line-height:1.2;
}
.incl__v{font-family:'Jost',sans-serif;font-size:1.35rem;font-weight:300;color:#8a8078;line-height:1.45}


/* ==========================================================================
   YOUR HOSTS  (two large square portraits, full container width)
   ========================================================================== */
.hosts{padding:0 0 64px}
.hosts__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;max-width:820px;margin:0 auto}
.host{text-align:center}
.host__media{
  aspect-ratio:4/5;overflow:hidden;background:var(--cream);margin:0 0 18px;
  display:flex;align-items:center;justify-content:center;border-radius:0;
  width:auto;height:auto;
}
.host__media img{width:100%;height:100%;object-fit:cover;border:0}
.hosts__ph{
  font-family:'Jost',sans-serif;font-size:1rem;font-weight:500;letter-spacing:.4rem;
  text-transform:uppercase;color:#c3b9ab;
}
.host__name{
  font-family:'Playfair Display',serif;font-size:2.3rem;font-weight:300;
  letter-spacing:.15rem;text-transform:uppercase;color:var(--taupe);margin-bottom:8px;
}
.host__bio{font-size:1.35rem;line-height:1.5;color:#8a8078;margin:10px auto 0;max-width:340px}
.hosts__handle{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Jost',sans-serif;font-size:1.25rem;font-weight:500;letter-spacing:.15rem;
  color:var(--taupe);padding:7px 14px;border:1px solid #e2d9cb;border-radius:999px;
  transition:all .3s ease-in;
}
.hosts__handle .ig{flex:none}
.hosts__handle:hover{background:var(--taupe);border-color:var(--taupe);color:#fff}
@media(max-width:760px){
  .hosts{padding-bottom:64px}
  .hosts__grid{gap:18px}
  .host__name{font-size:2rem;letter-spacing:.08rem}
  .host__bio{font-size:1.15rem;line-height:1.4;margin-top:10px}
  .hosts__handle{font-size:.95rem;letter-spacing:.05rem;padding:5px 9px;gap:5px}
  .hosts__handle .ig{width:12px;height:12px}
}

/* ==========================================================================
   MOBILE: hold the columns. Callie would rather read small than scroll.
   Nothing that belongs side by side is allowed to stack.
   ========================================================================== */
@media(max-width:760px){
  /* rooms swipe sideways at full size, one and a half visible */
  .rooms{
    display:flex;grid-template-columns:none;gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin:64px calc(var(--gutter) * -1) 0;
    padding:0 var(--gutter) 4px;
  }
  .rooms::-webkit-scrollbar{display:none}
  .room-card{flex:0 0 66vw;scroll-snap-align:center}
  .room-card__media{aspect-ratio:4/3}
  .room-card__body{padding:24px 20px 26px}
  .room-card h3{font-size:1.9rem;letter-spacing:.15rem;margin-bottom:10px;line-height:1.25}
  .room-card__beds{font-size:1.4rem;margin-bottom:18px;line-height:1.4}
  .room-card__price{font-size:3.4rem}
  .room-card__per{font-size:1rem;letter-spacing:.2rem;margin-top:10px;line-height:1.3}
  .room-card__cta{font-size:1.05rem;letter-spacing:.25rem;margin-top:20px;gap:10px}

  /* what's included: one per row with room to breathe */
  .incl__grid{grid-template-columns:1fr;gap:24px;text-align:center}
  .incl__k{font-size:2rem;margin-bottom:6px}
  .incl__v{font-size:1.4rem;line-height:1.45}
  .incl__title{font-size:1.05rem;letter-spacing:.35rem;margin-bottom:28px}
  .incl{margin-top:0;margin-bottom:44px;padding-top:0;padding-bottom:36px}

  /* the two of you stay side by side */
  .hosts__grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .host__name{font-size:1.5rem;letter-spacing:.04rem}
  .host__line{font-size:1.05rem;line-height:1.35}
  .host__media{margin-bottom:14px}

  /* reels swipe sideways too */
  .reels__grid{
    display:flex;grid-template-columns:none;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter);
  }
  .reels__grid::-webkit-scrollbar{display:none}
  .reel{flex:0 0 42vw;scroll-snap-align:center}

  /* the area: one block per row, properly spaced */
  .area-blocks{grid-template-columns:1fr;gap:44px;margin:48px 0}
  .area-block__title{font-size:1.15rem;letter-spacing:.35rem;margin-bottom:18px;padding-bottom:14px}
  .area-block p{font-size:1.6rem;line-height:1.55}
  .area-block__media{margin-bottom:20px}
  .notice{padding:28px 24px;margin-bottom:8px}
  .notice p{font-size:1.5rem;line-height:1.5}
  .notice h3{font-size:1.1rem;letter-spacing:.35rem}

  /* the skydiving page: stack the rows so nothing runs off the edge */
  .room-facts{grid-template-columns:repeat(2,1fr);gap:22px 16px}
  .room-fact__value{font-size:1.7rem;word-break:break-word}
  .room-fact__label{font-size:.95rem;letter-spacing:.25rem}
  .place{grid-template-columns:1fr;gap:4px;padding:20px 0}
  .place__name{font-size:1.8rem}
  .place__kind{font-size:1.2rem;line-height:1.4}
  .place__dist{font-size:1.5rem;white-space:normal;text-align:left;color:var(--taupe)}

  /* the villa tour reads two across */
  .tour-group .gallery-grid,.gallery-grid,.gallery-grid--3{grid-template-columns:repeat(2,1fr);gap:8px}
  .tour-group .gallery-grid > .gallery-item:first-child{grid-column:1 / -1}
}
@media(max-width:420px){
  .room-card{flex:0 0 72vw}
  .room-card h3{font-size:1.7rem}
  .room-card__price{font-size:3rem}
  .reel{flex:0 0 46vw}
  .incl__k{font-size:1.3rem}
  .host__name{font-size:1.25rem}
  .room-facts{grid-template-columns:1fr}
}

/* play mark sitting over a real cover frame */
.reel{position:relative}
.reels__play--over{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;opacity:.9;text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.reels__play--over svg{filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
a.reel:hover .reels__play--over{opacity:1}

/* ==========================================================================
   VIDEO (hero and the skydiving section)
   ========================================================================== */
.hero__media video{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.08);transition:transform 1.2s var(--ease);
}
.hero.is-ready .hero__media video{transform:scale(1)}
.img-text__media video{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease);
}
.img-text:hover .img-text__media video{transform:scale(1.05)}
@media(prefers-reduced-motion:reduce){
  .hero__media video{transform:none}
}

/* the clip on the skydiving page */
.film{margin:0 0 72px;overflow:hidden;background:#000}
.film video{width:100%;max-height:78vh;object-fit:cover;display:block}
@media(max-width:760px){.film{margin-bottom:48px}.film video{max-height:60vh}}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{max-width:820px;margin:80px auto 0;border-top:1px solid #ece7e0;padding-top:48px}
.contact__title{
  text-align:center;font-family:'Jost',sans-serif;font-size:1.1rem;font-weight:500;
  letter-spacing:.45rem;text-transform:uppercase;color:var(--taupe);margin-bottom:32px;
}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.contact__item{
  display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;
  border:1px solid #ece7e0;padding:26px 20px;transition:all .3s ease-in;
}
a.contact__item:hover{border-color:var(--taupe);background:var(--cream)}
.contact__k{
  font-family:'Jost',sans-serif;font-size:1rem;font-weight:500;letter-spacing:.4rem;
  text-transform:uppercase;color:#9a918a;
}
.contact__v{font-family:'Jost',sans-serif;font-size:1.5rem;font-weight:300;color:var(--taupe)}
.contact__item--todo .contact__v{color:#c3b9ab}

/* footer: give the columns and links some air */
.page-footer__logo{margin-bottom:0}
.page-footer h4{margin-bottom:26px}
.page-footer li{margin-bottom:16px}
.page-footer a{font-size:1.6rem;font-weight:400;letter-spacing:.02rem;line-height:2.5rem;text-transform:uppercase;color:rgba(255,255,255,.8)}
.footer-bottom{padding-top:34px;font-size:1.05rem;letter-spacing:.35rem;color:#6a6459}
@media(max-width:760px){.contact__grid{grid-template-columns:1fr;gap:14px}}
.form + .contact,.gallery-section .intro-copy__inner strong{font-weight:500;color:var(--taupe)}

/* call-to-action band above the footer, the way Habitas opens theirs */
.footer-cta{background:var(--cream);padding:64px 0}
.footer-cta__inner{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.footer-cta h2{
  font-family:'Playfair Display',serif;color:var(--taupe);font-size:4.2rem;font-weight:500;
  letter-spacing:.15rem;text-transform:uppercase;line-height:1;margin:0;
}
@media(max-width:900px){
  .page-footer__grid{grid-template-columns:1fr 1fr;gap:34px}
  .footer-cta{padding:44px 0}
  .footer-cta__inner{flex-direction:column;align-items:flex-start;gap:26px}
  .footer-cta h2{font-size:2.6rem}
  .footer-cta .btn{width:100%}
}
@media(max-width:560px){.page-footer__grid{grid-template-columns:1fr;gap:28px}}