/* v315 — iPad / Android tablet refinement.
   Tablets retain the desktop composition while scaling typography and controls
   to the available width. Phone layouts remain unchanged at <=700px. */
@media (min-width:701px) and (max-width:1180px){
  html,body{max-width:100%;overflow-x:clip}
  :root{--header-h:72px}
  .site-header{height:var(--header-h)}
  .header-inner{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:center!important;
    height:var(--header-h)!important;
    padding:0 222px 0 18px!important;
  }
  .nav-left,.nav-right{display:contents!important}
  .nav-left .nav-link,.nav-right .nav-link,.nav-link{
    display:block!important;
    justify-self:center!important;
    max-width:100%;
    font-size:clamp(10.5px,1.35vw,13px)!important;
    letter-spacing:.055em!important;
    white-space:nowrap!important;
  }
  .mobile-menu-toggle,.mobile-panel{display:none!important}
  .utility{
    height:var(--header-h)!important;
    width:212px!important;
    padding:0 12px!important;
    gap:0!important;
    justify-content:space-between!important;
  }
  .utility-link,
  .utility-link:nth-child(1),.utility-link:nth-child(2),.utility-link:nth-child(3),.utility-link:nth-child(4){
    display:inline-grid!important;
    width:30px!important;
    min-width:30px!important;
    height:44px!important;
    place-items:center!important;
  }
  .utility-link svg{width:20px!important;height:20px!important}
  .language{margin-left:2px!important}
  .language-button{min-width:58px!important;height:44px!important;font-size:13px!important}
  .sticky-mark{width:68px!important;height:66px!important}
  .sticky-mark img{height:52px!important}

  /* Keep desktop two-column storytelling on tablets. */
  .forest-grid{grid-template-columns:1fr 1fr!important;min-height:680px!important}
  .forest-copy{min-height:680px!important;padding:92px clamp(28px,4vw,62px) 70px!important}
  .forest-image{min-height:680px!important}
  .story-section,.story-section.story-reverse{min-height:650px}
  .story-region{grid-template-columns:60% 40%!important}
  .story-region .story-visual{min-height:650px!important}
  .story-copy{padding-left:clamp(28px,4vw,54px);padding-right:clamp(28px,4vw,54px)}

  /* Prevent fixed/sticky compositions from creating accidental tablet overflow. */
  img,video,iframe,svg{max-width:100%}
  video{transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}
  .hero,.story-section,.story-visual,.forest-image,.park-maze{contain:layout paint style}
  .story-copy,.intro,.forest-copy{contain:layout style}

  /* Touch tablets do not need hover-only animation layers. */
  @media (hover:none),(pointer:coarse){
    .nav-link:hover,.utility-link:hover svg{transform:none!important}
    .accommodation-dropdown{display:none!important}
  }
}

/* iPad portrait / compact Android tablets: retain the same desktop hierarchy,
   just tighten the utility block so the five navigation labels stay equidistant. */
@media (min-width:701px) and (max-width:820px){
  .header-inner{padding-right:194px!important;padding-left:12px!important}
  .utility{width:188px!important;padding:0 8px!important}
  .utility-link{width:27px!important;min-width:27px!important}
  .language-button{min-width:54px!important}
  .nav-link{font-size:10.5px!important;letter-spacing:.035em!important}
  .story-region{grid-template-columns:58% 42%!important}
  .forest-copy{padding-left:30px!important;padding-right:30px!important}
}