/*
 * V102.51.15.20 — Brand Development mobile refinement.
 * Shared mobile-only correction layer for every Brand Master and Market Landing
 * rendered by the public Brand Development visual system, across all locales.
 * Desktop/tablet publishing data, canonical content and media assignments are untouched.
 */

/* Brand Development owns its locale switcher. Do not show the global GTranslate
 * floating switcher on these public pages, otherwise mobile renders two language UIs. */
.emwh-brand-development-body #gt_float_wrapper,
.emwh-brand-development-body .gt_float_switcher,
.emwh-brand-development-body .gt_switcher_wrapper,
.emwh-brand-development-body .gtranslate_wrapper,
.emwh-brand-development-body .gtranslate-floating,
.emwh-brand-development-body .switcher.notranslate{
  display:none!important;
}

@media (max-width:760px){
  /* Compact editorial rhythm across every current/future page using this renderer. */
  .emwh-brand-development-body .emwh-brand-visual-story{margin-top:42px!important;gap:18px!important}
  .emwh-brand-development-body .emwh-brand-visual-origin-craft{margin-top:42px!important}
  .emwh-brand-development-body .emwh-brand-visual-focus{margin-top:42px!important}
  .emwh-brand-development-body .emwh-brand-visual-portfolio{margin-top:46px!important}
  .emwh-brand-development-body .emwh-brand-visual-gallery{margin-top:36px!important}
  .emwh-brand-development-body .emwh-brand-visual-faq{margin-top:42px!important;padding-top:30px!important}
  .emwh-brand-development-body .emwh-brand-visual-cta{margin-top:44px!important}

  /* Hero: keep the image-led treatment, but give copy a protected mobile safe area.
   * The extra bottom breathing room deliberately coexists with the site's fixed
   * Private Access control, which remains outside Brand Development ownership. */
  .emwh-brand-development-body .emwh-brand-visual-hero{
    min-height:560px!important;
    min-height:min(620px,calc(100svh - 44px))!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-hero-content{
    padding:28px 0 94px!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-hero h1,
  .emwh-brand-development-body .emwh-brand-visual-page.is-market .emwh-brand-visual-hero h1,
  .emwh-brand-development-body .emwh-brand-visual-page.is-market .emwh-brand-visual-hero.is-headline-long h1,
  .emwh-brand-development-body .emwh-brand-visual-page.is-market .emwh-brand-visual-hero.is-headline-xlong h1{
    max-width:12.5ch!important;
    margin:7px 0 12px!important;
    font-size:clamp(34px,10.6vw,46px)!important;
    line-height:1.01!important;
    letter-spacing:-.04em!important;
    text-wrap:balance;
  }
  .emwh-brand-development-body .emwh-brand-visual-page.is-market .emwh-brand-visual-hero h1{
    font-size:clamp(33px,10.2vw,44px)!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-hero p,
  .emwh-brand-development-body .emwh-brand-visual-page.is-market .emwh-brand-visual-hero p{
    max-width:31em!important;
    font-size:14.5px!important;
    line-height:1.5!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-hero-overlay{
    background:linear-gradient(0deg,rgba(7,22,33,.94) 0%,rgba(7,22,33,.72) 32%,rgba(7,22,33,.34) 60%,rgba(7,22,33,.09) 100%)!important;
  }

  /* Shared mobile headings: strong editorial hierarchy without desktop-sized blocks. */
  .emwh-brand-development-body .emwh-brand-visual-copy h2,
  .emwh-brand-development-body .emwh-brand-visual-focus h2,
  .emwh-brand-development-body .emwh-brand-visual-portfolio h2,
  .emwh-brand-development-body .emwh-brand-visual-markets h2,
  .emwh-brand-development-body .emwh-brand-visual-gallery h2,
  .emwh-brand-development-body .emwh-brand-visual-faq h2,
  .emwh-brand-development-body .emwh-brand-visual-cta h2{
    margin:7px 0 11px!important;
    font-size:clamp(30px,9vw,38px)!important;
    line-height:1.04!important;
    letter-spacing:-.03em!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-copy p,
  .emwh-brand-development-body .emwh-brand-visual-focus p,
  .emwh-brand-development-body .emwh-brand-visual-portfolio>header p,
  .emwh-brand-development-body .emwh-brand-visual-markets>header p{
    font-size:14.5px!important;
    line-height:1.55!important;
  }

  /* Origin/Craft: remove the desktop-derived empty visual pause after the dark block. */
  .emwh-brand-development-body .emwh-brand-visual-origin-craft-copy{
    gap:20px!important;
    padding:27px 20px 28px!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-origin-craft-copy article{
    padding-bottom:20px!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-origin-craft-copy h2{
    font-size:clamp(28px,8.2vw,34px)!important;
    line-height:1.06!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-origin-craft-copy p{
    font-size:14px!important;
    line-height:1.58!important;
  }

  /* Positioning: this was the most oversized mobile statement in the live capture. */
  .emwh-brand-development-body .emwh-brand-visual-positioning,
  .emwh-brand-development-body .emwh-brand-visual-page.is-market .emwh-brand-visual-positioning{
    margin:28px auto 0!important;
    padding:25px 0!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-positioning h2,
  .emwh-brand-development-body .emwh-brand-visual-positioning.is-copy-long h2,
  .emwh-brand-development-body .emwh-brand-visual-positioning.is-copy-xlong h2{
    max-width:26ch!important;
    font-size:clamp(24px,7vw,30px)!important;
    line-height:1.12!important;
    letter-spacing:-.025em!important;
  }

  /* Selected Markets + More Markets: keep the same canonical Market Cover cards,
   * but shorten the mobile card and remove the double vertical gap before the next block. */
  .emwh-brand-development-body .emwh-brand-visual-markets.is-selected-markets,
  .emwh-brand-development-body .emwh-brand-visual-page.is-market>.emwh-brand-public-related-markets.is-related-markets{
    margin-top:40px!important;
    padding:0 0 22px!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-markets.is-selected-markets>header,
  .emwh-brand-development-body .emwh-brand-visual-page.is-market>.emwh-brand-public-related-markets.is-related-markets>header{
    margin-bottom:16px!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-markets.is-selected-markets .emwh-brand-market-card,
  .emwh-brand-development-body .emwh-brand-visual-page.is-market>.emwh-brand-public-related-markets.is-related-markets .emwh-brand-market-card{
    aspect-ratio:16/10!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-markets.is-selected-markets .emwh-brand-market-card-copy,
  .emwh-brand-development-body .emwh-brand-visual-page.is-market>.emwh-brand-public-related-markets.is-related-markets .emwh-brand-market-card-copy{
    padding:32px 17px 15px!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-markets.is-selected-markets .emwh-brand-market-card-copy>strong,
  .emwh-brand-development-body .emwh-brand-visual-page.is-market>.emwh-brand-public-related-markets.is-related-markets .emwh-brand-market-card-copy>strong{
    font-size:clamp(25px,7.5vw,31px)!important;
    line-height:1.02!important;
  }

  /* Focus/portfolio are already stacked by V15.16; tighten only the excess spacing. */
  .emwh-brand-development-body .emwh-brand-visual-focus-copy{padding:23px 19px 25px!important}
  .emwh-brand-development-body .emwh-brand-visual-portfolio>header{margin-bottom:17px!important}
  .emwh-brand-development-body .emwh-brand-visual-portfolio-layout{gap:18px!important}

  /* Selected Media: one controlled landscape frame per swipe with a subtle next-card peek. */
  .emwh-brand-development-body .emwh-brand-visual-gallery>header{margin-bottom:15px!important}
  .emwh-brand-development-body .emwh-brand-visual-gallery>div{
    width:calc(100% + 12px)!important;
    gap:10px!important;
    margin-right:-12px!important;
    padding-right:12px;
    scroll-padding-left:0;
  }
  .emwh-brand-development-body .emwh-brand-visual-gallery figure,
  .emwh-brand-development-body .emwh-brand-visual-gallery figure.is-featured{
    flex:0 0 min(calc(100vw - 54px),390px)!important;
    width:min(calc(100vw - 54px),390px)!important;
    aspect-ratio:4/3!important;
  }

  /* FAQ: preserve generous touch targets while reducing the headline block. */
  .emwh-brand-development-body .emwh-brand-visual-faq>header{margin-bottom:14px!important}
  .emwh-brand-development-body .emwh-brand-visual-faq h2{
    font-size:clamp(29px,8.5vw,36px)!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-faq summary{
    min-height:54px!important;
    padding:16px 36px 16px 0!important;
    font-size:15px!important;
    line-height:1.34!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-faq summary:after{top:12px!important}
  .emwh-brand-development-body .emwh-brand-visual-faq details p{
    padding:0 18px 16px 0!important;
    font-size:14px!important;
    line-height:1.58!important;
  }

  /* CTA: concise mobile close with a full-width action. */
  .emwh-brand-development-body .emwh-brand-visual-cta{
    padding:27px 18px 32px!important;
    gap:20px!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-cta p{
    font-size:14px!important;
    line-height:1.55!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-cta-primary{
    min-height:48px!important;
  }

  /* Commercial enquiry: leave a real bottom safe zone so the site's fixed
   * Private Access pill cannot cover consent/actions when the form reaches its end. */
  .emwh-brand-development-body .emwh-brand-inquiry-dialog{
    scroll-padding-bottom:112px;
    padding-bottom:calc(112px + env(safe-area-inset-bottom))!important;
  }
  .emwh-brand-development-body .emwh-brand-inquiry-actions{
    margin-top:4px!important;
  }

  /* Footer: reduce the large mobile nav gaps and keep legal/meta content above
   * the fixed unauthenticated Private Access control. */
  .emwh-brand-development-body .emwh-brand-visual-footer-inner{
    row-gap:14px!important;
    padding:24px 18px 20px!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-footer-navigation .emwh-brand-visual-footer-primary-nav{
    gap:2px!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-footer-primary-nav a{
    min-height:34px!important;
    padding:5px 0!important;
    font-size:11px!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-footer-meta-strip{
    padding-bottom:calc(72px + env(safe-area-inset-bottom))!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-footer-meta{
    padding-bottom:8px!important;
  }
}

@media (max-width:480px){
  .emwh-brand-development-body .emwh-brand-visual-hero{
    min-height:540px!important;
    min-height:min(600px,calc(100svh - 44px))!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-hero-content{
    padding:24px 0 92px!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-hero h1,
  .emwh-brand-development-body .emwh-brand-visual-page.is-market .emwh-brand-visual-hero h1,
  .emwh-brand-development-body .emwh-brand-visual-page.is-market .emwh-brand-visual-hero.is-headline-long h1,
  .emwh-brand-development-body .emwh-brand-visual-page.is-market .emwh-brand-visual-hero.is-headline-xlong h1{
    font-size:clamp(32px,10.3vw,42px)!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-positioning h2,
  .emwh-brand-development-body .emwh-brand-visual-positioning.is-copy-long h2,
  .emwh-brand-development-body .emwh-brand-visual-positioning.is-copy-xlong h2{
    font-size:clamp(23px,6.8vw,28px)!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-gallery figure,
  .emwh-brand-development-body .emwh-brand-visual-gallery figure.is-featured{
    flex-basis:calc(100vw - 50px)!important;
    width:calc(100vw - 50px)!important;
  }
  .emwh-brand-development-body .emwh-brand-visual-footer-navigation .emwh-brand-visual-footer-primary-nav{
    grid-template-columns:1fr!important;
  }
}