/* Shared phone-only refinements. Tablet and desktop styles remain untouched. */
.za-mobile-header-language-card {
  display: none;
}

/* V29.3: the iPad Mini portrait breakpoint inherits the complete phone system
   below. This prevents a mixture of tablet and phone header/hero rules at
   768px while leaving phone, landscape tablet and desktop behaviour intact. */

/* V7: mobile hero spacing and visual balance. Desktop and tablet are unchanged. */
@media (max-width: 760px), (min-width: 761px) and (max-width: 780px) and (orientation: portrait) {
  /* Home already has a 92px main offset; add only a comfortable hero inset. */
  html body .za-main > section.za-hero:first-child {
    padding: 56px 5vw 60px !important;
  }

  /* These page heroes have no main offset and previously started behind the
     fixed 84px mobile header. */
  html body .za-main > section.za-about-hero:first-child,
  html body .za-main > section.za-practices-hero-grid:first-child,
  html body .za-main > section.za-hero-grid:first-child {
    padding: 118px 5vw 68px !important;
  }

  html body .za-main > section[data-screen-label="Start a Conversation"]:first-child {
    padding-top: 120px !important;
  }

  /* Slightly quieter mobile hero typography across every public page. */
  html body .za-main > section:first-child h1,
  html body .za-main > section:first-child h1 span {
    font-size: clamp(25px, 6.7vw, 28px) !important;
    line-height: 1.24 !important;
  }

  html body .za-main > section.za-hero:first-child h1,
  html body .za-main > section.za-hero:first-child h1 span {
    font-size: clamp(23px, 6vw, 26px) !important;
    line-height: 1.25 !important;
  }

  /* Give the homepage illustration enough visual weight beside the copy. */
  html body .za-main > section.za-hero:first-child .za-mobile-hero-art {
    display: block !important;
    width: clamp(236px, 68vw, 280px) !important;
    max-width: 82vw !important;
    height: auto !important;
    margin: 6px auto 2px !important;
  }
}

@media (max-width: 760px), (min-width: 761px) and (max-width: 780px) and (orientation: portrait) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  html body header {
    align-items: center !important;
    overflow: visible !important;
  }

  html body header > a:first-child,
  html body .za-mobile-nav-details,
  html body header > a[href*="start-a-conversation"] {
    align-self: center !important;
  }

  html body .za-mobile-nav-details {
    position: relative !important;
    z-index: 1002 !important;
  }

  html body .za-mobile-toggle {
    display: flex !important;
    border: 1px solid rgba(0, 12, 29, 0.14) !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 12, 29, 0.04) !important;
  }

  html body .za-mobile-nav-details[open] > .za-mobile-toggle {
    border-color: rgba(212, 175, 55, 0.7) !important;
    background: #fbf7eb !important;
  }

  /* Keep the open menu attached to the three-line header control, but below
     the always-visible language switcher. */
  html body .za-mobile-nav-details nav[aria-label="Mobile navigation"] {
    position: absolute !important;
    top: calc(100% + 48px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-40%) !important;
    width: min(92vw, 340px) !important;
    max-width: 340px !important;
    max-height: calc(100vh - 88px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 12px !important;
    gap: 2px !important;
    border: 1px solid rgba(8, 21, 40, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 44px rgba(0, 12, 29, 0.16) !important;
    box-sizing: border-box !important;
  }

  html body .za-mobile-nav-details nav > a,
  html body .za-mobile-nav-details nav > details > summary {
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    padding: 10px 8px !important;
    white-space: normal !important;
    text-align: left !important;
    line-height: 1.35 !important;
  }

  html body .za-mobile-practices-details > div a {
    padding: 9px 8px 9px 16px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
  }

  /* The old copy inside the hamburger menu is intentionally hidden. */
  html body .za-mobile-language-card {
    display: none !important;
  }

  /* This compact card sits outside the dynamic page renderer and is visually
     anchored beside the hamburger before the visitor opens navigation. */
  html body .za-mobile-header-language-card {
    position: absolute !important;
    top: 50px;
    z-index: 1003;
    display: block !important;
    width: max-content;
    color: #000c1d;
    box-sizing: border-box;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  html body .za-mobile-header-language-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 79px !important;
    min-height: 31px !important;
    padding: 7px 9px !important;
    border: 1px solid rgba(212, 175, 55, 0.55) !important;
    border-radius: 8px !important;
    background: #fbf7eb !important;
    box-shadow: 0 5px 14px rgba(0, 12, 29, 0.1);
    color: #000c1d !important;
    font-family: 'Merriweather', serif;
    font-size: 10.5px !important;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    cursor: pointer;
  }

  html body .za-mobile-header-globe {
    font-size: 12px;
    line-height: 1;
  }

  html body .za-mobile-header-language-chevron {
    margin-left: auto;
    font-size: 9px;
    transition: transform 0.18s ease;
  }

  html body .za-mobile-header-language-trigger[aria-expanded="true"] .za-mobile-header-language-chevron {
    transform: rotate(180deg);
  }

  html body .za-mobile-header-language-menu {
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    z-index: 1005;
    display: flex;
    flex-direction: column;
    width: 138px;
    padding: 5px;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(0, 12, 29, 0.16);
    transform: translateX(-50%);
  }

  html body .za-mobile-header-language-menu[hidden] {
    display: none !important;
  }

  html body .za-mobile-header-language-option {
    display: grid;
    grid-template-columns: 16px 1fr;
    align-items: center;
    width: 100%;
    min-height: 34px !important;
    padding: 7px 8px !important;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #000c1d;
    font-family: 'Merriweather', serif;
    font-size: 11.5px !important;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
  }

  html body .za-mobile-header-language-option:hover,
  html body .za-mobile-header-language-option:focus-visible {
    background: rgba(212, 175, 55, 0.1);
    outline: none;
  }

  html body .za-mobile-header-language-check {
    color: #d4af37;
    font-weight: 700;
  }

  /* Shared content safeguards for every phone route. */
  html body .za-main,
  html body main {
    width: 100%;
    overflow: hidden;
  }

  html body .za-main img,
  html body main img,
  html body .za-main svg,
  html body main svg {
    max-width: 100%;
  }

  html body .za-main h1,
  html body .za-main h2,
  html body .za-main h3,
  html body main h1,
  html body main h2,
  html body main h3 {
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  html body .za-main p,
  html body main p {
    overflow-wrap: break-word;
  }

  html body a,
  html body button,
  html body summary {
    -webkit-tap-highlight-color: rgba(212, 175, 55, 0.18);
  }
}

@media (max-width: 390px) {
  html body .za-mobile-nav-details nav[aria-label="Mobile navigation"] {
    width: min(94vw, 334px) !important;
    transform: translateX(-45%) !important;
  }

  html body .za-mobile-header-language-trigger {
    min-width: 75px !important;
    padding-inline: 8px !important;
  }
}

/* Stable mobile-only additions for the confirmed-working package. */
@media (max-width: 760px), (min-width: 761px) and (max-width: 780px) and (orientation: portrait) {
  html body header {
    column-gap: 8px !important;
  }

  html body .za-mobile-header-language-card {
    position: fixed !important;
    right: auto !important;
    margin: 0;
    transform: none !important;
  }

  html body .za-mobile-header-language-trigger {
    justify-content: center;
    gap: 3px;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    font-size: 10px !important;
  }

  html body .za-mobile-header-globe {
    display: none;
  }

  html body .za-mobile-header-language-chevron {
    margin-left: 0;
    font-size: 7px;
  }

  html body .za-mobile-header-language-menu {
    right: 0;
    left: auto;
    transform: none;
  }

  html body .za-mobile-nav-details nav[aria-label="Mobile navigation"] {
    top: calc(100% + 10px) !important;
  }

  html body section[data-screen-label="Recognition"] {
    padding: 48px 5vw !important;
  }

  html body .za-recognition-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 420px !important;
    gap: 16px !important;
  }

  html body .za-review-card,
  html body .za-accreditation-card {
    width: 100% !important;
    padding: 18px !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(0, 12, 29, 0.07);
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  html body .za-review-card #proSealWidget {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 112px;
    margin: 0 !important;
    overflow: hidden;
  }

  html body .za-review-card #proSealWidget > *,
  html body .za-review-card #proSealWidget iframe {
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  html body .za-recognition-separator {
    display: none !important;
  }

  html body .za-accreditation-title {
    font-size: 17px !important;
    line-height: 1.35 !important;
  }

  html body .za-accreditation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 12px !important;
  }

  html body .za-accreditation-badge {
    width: 100% !important;
    height: 104px !important;
    padding: 12px !important;
    border: 1px solid rgba(15, 23, 42, 0.09) !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
  }
}

html body section[data-screen-label="How We Work"] {
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

html body section[data-screen-label="How We Work"] *,
html body section[data-screen-label="How We Work"].za-reveal > * {
  opacity: 1 !important;
  visibility: visible !important;
}

html body section[data-screen-label="How We Work"] > *,
html body section[data-screen-label="How We Work"] .za-fade,
html body section[data-screen-label="How We Work"] .za-cert-fade {
  transform: none !important;
}

/* Use the existing desktop language selector in the mobile header. This keeps
   the native EN/DE state, one-language label, tick, and dropdown behaviour. */
@media (max-width: 760px), (min-width: 761px) and (max-width: 780px) and (orientation: portrait) {
  html body .za-mobile-header-language-card {
    display: none !important;
  }

  html body header {
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: 32px 32px !important;
    row-gap: 4px !important;
    min-height: 84px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  html body header > a:first-child,
  html body header > a[href*="start-a-conversation"] {
    grid-row: 1 / 3 !important;
    align-self: center !important;
  }

  html body header > .za-mobile-nav-details {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: start !important;
    margin: 0 0 0 8px !important;
  }

  html body header > .za-mobile-nav-details > .za-mobile-toggle {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 7px !important;
  }

  html body header > .za-mobile-nav-details > .za-mobile-toggle svg {
    width: 16px !important;
    height: 16px !important;
  }

  html body header > .za-lang-wrap {
    display: block !important;
    position: relative !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: start !important;
    margin: 0 0 0 8px !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    z-index: 1004 !important;
  }

  html body header > .za-lang-wrap > .za-lang-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border: 1px solid rgba(212, 175, 55, 0.55) !important;
    border-radius: 7px !important;
    background: #fbf7eb !important;
    color: #000c1d !important;
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body header > .za-lang-wrap > .za-lang-btn .za-globe-icon {
    display: none !important;
  }

  html body header > .za-lang-wrap > [role="listbox"] {
    right: auto !important;
    left: 0 !important;
    width: 145px !important;
    min-width: 145px !important;
    max-width: none !important;
    z-index: 1006 !important;
  }

  html body header > .za-lang-wrap > [role="listbox"] .za-lang-item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 9px 10px !important;
    white-space: nowrap !important;
  }

  /* Requested mobile-only corrections. */
  html body header > .za-mobile-nav-details[open],
  html body header > .za-mobile-nav-details[open] nav[aria-label="Mobile navigation"] {
    z-index: 1201 !important;
  }

  html body .za-review-card #proSealWidget {
    display: none !important;
  }

  html body .za-review-card .za-provenexpert-mobile-fallback {
    display: flex !important;
    width: min(100%, 320px) !important;
    min-height: 112px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    margin: 0 auto !important;
    padding: 18px 20px !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06) !important;
    color: #000c1d !important;
    font-family: 'Merriweather', serif !important;
    text-decoration: none !important;
  }

  html body .za-provenexpert-mobile-fallback .za-provenexpert-mark {
    display: flex !important;
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #f8efd9 !important;
    color: #c89b2b !important;
    font-size: 25px !important;
    line-height: 1 !important;
  }

  html body .za-provenexpert-mobile-fallback .za-provenexpert-copy {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
    line-height: 1.2 !important;
  }

  html body .za-provenexpert-mobile-fallback strong {
    font-size: 16px !important;
    font-weight: 700 !important;
  }

  html body .za-provenexpert-mobile-fallback .za-provenexpert-copy > span:not(.za-provenexpert-stars) {
    color: #64748b !important;
    font-size: 11px !important;
  }

  html body .za-provenexpert-mobile-fallback .za-provenexpert-stars {
    color: #d4af37 !important;
    font-size: 15px !important;
    letter-spacing: 2px !important;
  }

  html body #leadership-performance > .za-three-col,
  html body #communication-influence > .za-three-col,
  html body #leadership-digitalisation > .za-three-col {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 20px !important;
    gap: 20px !important;
    overflow: hidden !important;
  }

  html body #leadership-performance > .za-three-col > div,
  html body #communication-influence > .za-three-col > div,
  html body #leadership-digitalisation > .za-three-col > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: flex-start !important;
  }

  html body #leadership-performance > .za-three-col > div > div:last-child,
  html body #communication-influence > .za-three-col > div > div:last-child,
  html body #leadership-digitalisation > .za-three-col > div > div:last-child {
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }

  html body #leadership-performance > .za-three-col p,
  html body #communication-influence > .za-three-col p,
  html body #leadership-digitalisation > .za-three-col p {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.55 !important;
  }

  html body #executive-education > .za-three-col > div:nth-child(2),
  html body #executive-education > .za-three-col > div:nth-child(2) > div:last-child {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body #executive-education > .za-three-col > div:nth-child(2) > div:last-child {
    flex: 1 1 auto !important;
  }

  html body #executive-education > .za-three-col > div:nth-child(2) p {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.55 !important;
  }
}