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

@media (max-width: 1100px){

  .header-inner{
    grid-template-columns:125px 1fr auto;
    gap:18px;
  }

  .brand-logo img{
    width:118px;
  }

  .main-nav{
    gap:18px;
  }

  .main-nav a{
    font-size:0.86rem;
  }

  .header-login,
  .header-book{
    padding:0 17px;
    font-size:0.9rem;
  }

  .home-hero{
    background-position:64% center;
  }

  .home-hero-content{
    width:min(540px,100%);
  }

  .story-grid{
    gap:54px;
  }

  .story-photo-wrap{
    min-height:560px;
  }

  .story-photo{
    height:560px;
  }

  .story-cutout{
    right:-35px;
    width:210px;
  }

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

  .booking-cta-inner{
    grid-template-columns:130px 1fr auto;
    gap:28px;
  }

  .booking-cta img{
    width:125px;
  }
}


/* =========================================================
   MOBILE NAVIGATION / SMALL TABLET
========================================================= */

@media (max-width: 900px){

  .site-header{
    position:sticky;
  }

  .header-inner{
    min-height:76px;
    grid-template-columns:1fr auto;
  }

  .brand-logo img{
    width:112px;
    max-height:62px;
  }

  .main-nav{
    display:none;
  }

  .header-login{
    display:none;
  }

  .header-book{
    min-height:44px;
    padding:0 18px;
    font-size:0.88rem;
  }

  .mobile-menu-button{
    display:flex;
  }

  .header-actions{
    gap:10px;
  }

  .home-hero{
    min-height:760px;
    align-items:flex-end;
    padding:70px 24px 76px;
    background-position:66% center;
  }

  .home-hero-overlay{
    background:linear-gradient(
      180deg,
      rgba(250,248,246,0.08) 0%,
      rgba(250,248,246,0.30) 38%,
      rgba(250,248,246,0.94) 68%,
      rgba(250,248,246,0.99) 100%
    );
  }

  .home-hero-content{
    width:min(680px,100%);
    margin:0 auto;
  }

  .home-hero h1{
    max-width:640px;
    font-size:clamp(3.4rem,10vw,5.4rem);
  }

  .home-hero-motto{
    max-width:620px;
    font-size:clamp(2.2rem,7vw,3.7rem);
  }

  .story-grid,
  .story-grid-reverse{
    grid-template-columns:1fr;
    gap:56px;
  }

  .story-grid-reverse .story-photo-wrap,
  .story-grid-reverse .story-copy{
    order:initial;
  }

  .story-photo-wrap{
    min-height:520px;
  }

  .story-photo{
    height:520px;
  }

  .story-cutout{
    right:-12px;
    bottom:-34px;
    width:190px;
  }

  .difference-feature,
  .difference-feature-reverse{
    grid-template-columns:1fr;
  }

  .difference-feature-reverse img,
  .difference-feature-reverse > div{
    order:initial;
  }

  .difference-feature img{
    min-height:380px;
    height:380px;
  }

  .difference-feature > div{
    padding:42px;
  }

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

  .service-image-card{
    min-height:500px;
  }

  .booking-cta-inner{
    grid-template-columns:1fr;
    text-align:center;
  }

  .booking-cta img{
    margin:0 auto;
  }

  .booking-cta .button{
    justify-self:center;
  }

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

  .footer-grid > div:first-child{
    grid-column:1 / -1;
  }

  .footer-bottom{
    flex-direction:column;
    text-align:center;
  }
}


/* =========================================================
   PHONE
========================================================= */

@media (max-width: 650px){

  section{
    padding-left:18px;
    padding-right:18px;
  }

  .header-inner{
    width:calc(100% - 24px);
  }

  .brand-logo img{
    width:100px;
  }

  .header-book{
    display:none;
  }

  .home-hero{
    min-height:720px;
    padding:60px 18px 64px;
    background-position:68% center;
  }

  .home-hero-eyebrow{
    font-size:0.74rem;
    letter-spacing:0.14em;
  }

  .home-hero h1{
    font-size:clamp(3rem,14vw,4.4rem);
  }

  .home-hero-motto{
    margin-top:16px;
    font-size:clamp(2rem,11vw,3.1rem);
  }

  .home-hero-copy{
    margin-top:20px;
    font-size:0.98rem;
    line-height:1.65;
  }

  .home-hero-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .home-hero-actions .button{
    width:100%;
  }

  .story-section,
  .difference-showcase,
  .services-showcase{
    padding-top:82px;
    padding-bottom:82px;
  }

  .story-photo-wrap{
    min-height:440px;
  }

  .story-photo{
    height:440px;
    border-radius:28px;
  }

  .story-photo-accent{
    top:16px;
    left:16px;
    border-radius:28px;
  }

  .story-cutout{
    width:150px;
    right:-6px;
    bottom:-28px;
  }

  .section-heading{
    margin-bottom:42px;
  }

  .section-heading h2,
  .story-copy h2,
  .promise-inner h2,
  .booking-cta h2{
    font-size:clamp(2.4rem,12vw,3.7rem);
  }

  .story-lead{
    font-size:1.55rem;
  }

  .promise-section{
    padding:76px 18px;
  }

  .gold-paw-divider span{
    width:58px;
  }

  .difference-feature{
    min-height:0;
    border-radius:28px;
  }

  .difference-feature img{
    min-height:300px;
    height:300px;
  }

  .difference-feature > div{
    padding:32px 26px;
  }

  .difference-feature h3{
    font-size:2.5rem;
  }

  .services-showcase-grid{
    grid-template-columns:1fr;
  }

  .service-image-card{
    min-height:470px;
    border-radius:28px;
  }

  .service-image-content{
    padding:28px;
  }

  .suite-plaque-grid{
    grid-template-columns:1fr;
  }

  .booking-cta{
    padding:62px 18px;
  }

  .footer-grid{
    grid-template-columns:1fr;
    gap:34px;
  }

  .footer-grid > div:first-child{
    grid-column:auto;
  }

  .footer-logo{
    width:150px;
  }
}

@media (max-width:900px){

  .story-section-daisy .story-grid{
    grid-template-columns:1fr;
    gap:54px;
  }

  .story-section-daisy .story-photo-wrap{
    height:520px;
  }

  .story-section-daisy .story-photo{
    height:520px;
  }

  .story-section-daisy .story-cutout{
    right:-8px;
    width:150px !important;
    height:200px !important;
  }
}

@media (max-width:650px){

  .story-section-daisy .story-photo-wrap{
    height:430px;
  }

  .story-section-daisy .story-photo{
    height:430px;
  }

  .story-section-daisy .story-cutout{
    width:125px !important;
    height:170px !important;
    bottom:-22px;
  }
}

@media (hover:none){

  .service-image-card{
    min-height:540px;
  }

  .service-card-front{
    bottom:150px;
  }

  .service-card-drawer{
    opacity:1;
    transform:translateY(0);
  }

  .service-card-drawer p{
    font-size:0.92rem;
  }
}

@media (max-width:650px){

  .story-name-title{
    gap:10px;
  }

  .story-name-prefix{
    font-size:2.8rem;
  }

  .story-name-script{
    font-size:4.7rem;
  }
}