/* Compact layouts share the app's breakpoint; desktop composition stays intact. */
.language-cycle { display: none; }

@media (max-width: 1024px), (max-width: 1100px) and (max-height: 550px) {
  /* Keep page gestures to scrolling. Photo zoom is an independent transform. */
  html { touch-action: pan-x pan-y; }
  #panorama { touch-action: none; }
  :root {
    --header-height: clamp(160px, 24svh, 188px);
    --mobile-bottom-space: calc(86px + env(safe-area-inset-bottom, 0px));
    --mobile-ease: cubic-bezier(.22, .72, .2, 1);
  }

  html { scroll-padding-top: 104px; }
  body { padding-bottom: 0; }
  /* Soften only the live hero background, without tinting it or its clear UI.
     Entering the interactive tour removes this filter immediately. */
  body[data-view="home"]:not(.tour-mode) > .panorama {
    filter: blur(6px);
  }
  body[data-view="home"] > .panorama-shade {
    background: none;
  }
  /* Follow the live panorama through page scrolling and mobile viewport changes.
     A fixed pixel height clipped the shade and leaves across the advisor. */
  .panorama-shade,
  .foliage-edges {
    position: fixed;
    inset: 0;
    height: auto;
  }
  .edge-leaves-left,
  .edge-leaves-right {
    top: 0;
  }
  /* Each source is 1:3. Cover the viewport without stretching the image or
     changing the geometry used by the mouse-driven foliage mesh. */
  .edge-leaves-left { width: max(210px, calc((100dvh + 2px) / 3)); }
  .edge-leaves-right { width: max(360px, calc((100dvh + 2px) / 3)); }
  .header-slot {
    height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
    /* This layout spacer stays tall when the header shrinks. Let taps reach
       the drawer below; real header buttons already opt into pointer events. */
    pointer-events: none;
  }
  .header {
    height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
    transition: height 300ms var(--mobile-ease);
  }
  .brand {
    top: calc(32px + env(safe-area-inset-top, 0px));
    width: min(72vw, 280px);
    transition: top 300ms var(--mobile-ease), width 300ms var(--mobile-ease), opacity 180ms ease;
  }
  .header .decor-image,
  .header-tuft {
    transition: width 300ms var(--mobile-ease), top 300ms var(--mobile-ease), opacity 250ms ease;
  }
  .menu-toggle,
  .language-cycle {
    top: calc(14px + env(safe-area-inset-top, 0px));
    width: 48px;
    height: 48px;
    box-shadow: 0 3px 12px #28441418;
  }
  .menu-toggle { left: max(14px, env(safe-area-inset-left)); }
  .language-cycle {
    position: absolute;
    right: max(14px, env(safe-area-inset-right));
    display: inline-flex;
    border: 2px solid white;
    z-index: 4;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    touch-action: manipulation;
  }
  .is-page-scrolled:not(.menu-open) .header,
  .menu-open .header,
  .menu-open.menu-scrolled .header {
    height: calc(88px + env(safe-area-inset-top, 0px));
  }
  .is-page-scrolled:not(.menu-open) .brand,
  .menu-open .brand,
  .menu-open.menu-scrolled .brand {
    top: calc(10px + env(safe-area-inset-top, 0px));
    width: 150px;
  }
  .menu-open .header-tuft {
    top: calc(100% - 48px);
    width: 82px;
    opacity: .9;
  }
  .menu-open .header .decor-image { width: 150px; opacity: .8; }

  /* JS moves the same accessible telephone link out of the animated header. */
  .phone-pill {
    position: fixed;
    inset: auto max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) auto;
    display: inline-flex;
    width: 56px;
    height: 56px;
    min-height: 56px;
    padding: 6px;
    gap: 0;
    font-size: 16px;
    line-height: 1.2;
    z-index: 34;
    box-shadow: 0 5px 24px #183b1b2b, 0 2px 5px #6c641e17;
  }
  .phone-pill > span:last-child {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .phone-pill .icon-bubble { width: 40px; height: 40px; }
  .phone-pill .icon { width: 21px; height: 21px; }
  .tour-mode .phone-pill { visibility: hidden; pointer-events: none; }
  body:has(dialog[open]) .phone-pill { visibility: hidden; pointer-events: none; }

  .sidebar {
    padding: calc(106px + env(safe-area-inset-top, 0px))
      max(18px, calc((100vw - 440px) / 2))
      calc(28px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-block: 106px 24px;
  }
  .mobile-menu-present .sidebar { display: flex; }
  .mobile-menu-present:not(.menu-open) .sidebar { pointer-events: none; }
  .mobile-menu-present { overflow: hidden; }
  .sidebar .language-switch { display: none; }
  .language-switch button { min-height: 44px; }
  .navigation { gap: 8px; }
  .nav-link { min-height: 52px; padding: 10px 17px; gap: 16px; font-size: 16px; }
  .sidebar .partners-heading { margin-block: 22px 12px; }
  .sidebar .partner-list { gap: 8px; }
  .sidebar .partner-card { min-height: 56px; }
  .sidebar .drawer-features { margin-top: 24px; }
  .sidebar .drawer-features .feature-card { min-height: 86px; padding: 16px; }
  .sidebar .social-links { padding-bottom: 4px; }

  .home-view { min-height: 0; padding: 0; }
  .hero-copy {
    width: 100%;
    max-width: 460px;
    min-height: 0;
    margin: clamp(18px, 3.5svh, 30px) auto 24px;
    padding-inline: clamp(18px, 5vw, 36px);
    text-align: left;
  }
  .hero-copy h1 {
    position: relative;
    z-index: 1;
    line-height: 1.05;
    white-space: normal;
    text-wrap: initial;
    filter: drop-shadow(0 3px 3px #9e822311);
  }
  html:lang(en) .hero-copy h1 { white-space: normal; }
  .hero-copy .heading-line {
    display: block;
    width: fit-content;
    line-height: 1.05;
    -webkit-text-stroke-width: .52em;
  }
  .hero-copy .line-one,
  .hero-copy .line-two { font-size: clamp(24px, 7.5vw, 38px); }
  .hero-copy .line-one { color: #76b711; }
  .hero-copy .line-two { color: #a16ccf; }
  .hero-copy .line-three {
    margin-top: 0;
    font-size: clamp(36px, 11vw, 54px);
    color: #278e10;
    letter-spacing: -.6px;
  }
  .hero-description {
    position: relative;
    isolation: isolate;
    max-width: 326px;
    margin: -2px auto 0;
    padding: 20px 22px 30px;
    color: var(--ink);
    font-size: clamp(16px, 4.25vw, 18px);
    font-weight: 600;
    line-height: 1.35;
    text-shadow: none;
    text-align: center;
    text-wrap: pretty;
  }
  .hero-description::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--paper);
    /* Match the desktop paper contour while allowing translated text to grow. */
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 326 130' preserveAspectRatio='none'%3E%3Cpath d='M43 0H280C310 0 326 15 326 37C326 53 315 59 315 67C315 75 324 80 324 94C324 117 304 128 276 129C211 130 135 130 68 130C27 130 7 114 3 89C0 71 0 53 0 38C0 16 15 0 43 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    pointer-events: none;
  }
  .hero-cta {
    display: flex;
    width: min(100%, 304px);
    min-height: 80px;
    margin: -20px auto 0;
    padding: 16px 26px 18px;
    gap: 18px;
    font-size: 16px;
  }
  .hero-cta > [data-i18n] { min-width: 0; }
  .decor-mascot-extra { display: none; }
  .tour-aside { margin: 0; padding: 0 18px 26px; }
  .wonder-advisor {
    --advisor-unit: clamp(.76px, .22vw, .96px);
    height: calc(470 * var(--advisor-unit));
  }
  .advisor-cloud { top: calc(8 * var(--advisor-unit)); transform: rotate(-6deg); }
  .advisor-cloud-content { inset: 3% 12% 34%; }
  .experiences { padding-top: 28px; }
  .experiences h2::after { top: calc(100% - 2px); }
  .content-view { margin-bottom: 20px; }
  /* Keep the call-button clearance inside the cream surface, down to page end. */
  .mobile-discover { padding-bottom: calc(100px + var(--mobile-bottom-space)); }
  .contact-footer .inline-link { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (min-width: 600px) and (max-width: 1024px) {
  .hero-copy { max-width: 560px; margin-top: 28px; }
  .hero-description { max-width: 360px; font-size: 19px; }
  .tour-aside { padding-bottom: 32px; }
}

@media (max-width: 370px) {
  .hero-copy { padding-inline: 18px; }
  .hero-copy .line-one,
  .hero-copy .line-two { font-size: 24px; }
  .hero-copy .line-three { font-size: 36px; }
  .hero-cta { gap: 12px; font-size: 15px; }
  .sidebar { padding-inline: 16px; }
}

@media (max-width: 1100px) and (max-height: 550px) and (orientation: landscape) {
  :root { --header-height: 106px; }
  .brand { top: calc(12px + env(safe-area-inset-top, 0px)); width: 178px; }
  .header .decor-image { width: 142px; }
  .header-tuft { width: 86px; top: calc(100% - 50px); }
  .hero-copy { margin-block: 12px 20px; }
  .hero-copy .line-one,
  .hero-copy .line-two { font-size: 28px; }
  .hero-copy .line-three { font-size: 41px; }
  .hero-description { max-width: 360px; font-size: 16px; }
  .hero-cta { min-height: 74px; }
  .phone-pill { bottom: max(10px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .header,
  .brand,
  .header .decor-image,
  .header-tuft { transition: none; }
}