/* viCOMPASSa v15.12 — consolidated responsive layer
   Layout only. Desktop styling and the established colour system are untouched. */

@media screen and (max-width: 1080px) {
  :root {
    --vc-r-gutter: clamp(14px, 3.8vw, 28px);
    --vc-r-content: 72rem;
    --vc-r-header-gap: clamp(10px, 2.4vw, 22px);
    --vc-r-card-gap: clamp(14px, 2.4vw, 24px);
  }

  html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
    -webkit-text-size-adjust: 100%;
  }
  body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip !important;
  }
  body > * { max-width: 100%; }
  main, section, article, header, footer, nav, div { min-width: 0; }
  img, svg, video, canvas, iframe { max-width: 100% !important; height: auto; }

  .site-shell, .container, .hero-shell, .executive-hero-shell,
  .phase-intro, .decision-panel, .executive-decision-panel {
    width: min(calc(100% - (2 * var(--vc-r-gutter))), var(--vc-r-content)) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  /* Stable responsive header: brand and menu share one row; CTA occupies its own row. */
  .site-header,
  .site-header * { box-sizing: border-box !important; }
  .site-header {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .site-header .nav-shell,
  body.home-page .site-header .nav-shell--split-band {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand mobilebutton"
      "cta cta" !important;
    align-items: center !important;
    column-gap: var(--vc-r-header-gap) !important;
    row-gap: clamp(7px, 1.8vw, 14px) !important;
    padding: calc(clamp(8px, 1.8vw, 14px) + env(safe-area-inset-top, 0px))
             max(var(--vc-r-gutter), env(safe-area-inset-right, 0px))
             clamp(9px, 2vw, 15px)
             max(var(--vc-r-gutter), env(safe-area-inset-left, 0px)) !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .site-header .official-brand-lockup,
  body.home-page .site-header .official-brand-lockup {
    grid-area: brand !important;
    display: grid !important;
    grid-template-columns: clamp(31px, 5vw, 44px) minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: clamp(7px, 1.3vw, 11px) !important;
    width: min(100%, 560px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  .site-header .official-brand-lockup .vicompassa-motion-icon {
    width: clamp(31px, 5vw, 44px) !important;
    height: auto !important;
    min-width: 0 !important;
    flex: none !important;
  }
  .site-header .official-brand-lockup .vicompassa-motion-wordmark {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
  }
  html[dir="rtl"] .site-header .official-brand-lockup .vicompassa-motion-wordmark {
    object-position: right center !important;
  }

  .site-header .menu-toggle,
  .site-header .primary-nav { display: none !important; }
  .vc-mobile-menu-button {
    grid-area: mobilebutton !important;
    align-self: center !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: clamp(42px, 6vw, 48px) !important;
    height: clamp(42px, 6vw, 48px) !important;
    min-width: clamp(42px, 6vw, 48px) !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  .site-header .conversation-link--featured,
  body.home-page .site-header .conversation-link--featured {
    grid-area: cta !important;
    justify-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: calc(100vw - (2 * var(--vc-r-gutter))) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: clamp(3px, .55vw, 6px) clamp(12px, 2vw, 20px) !important;
    white-space: nowrap !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }
  .site-header .conversation-link--featured .primary-yellow-cta__label,
  body.home-page .site-header .conversation-link--featured .primary-yellow-cta__label {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(.78rem, 1.8vw, 1rem) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  /* Drawer geometry is viewport-safe and content-driven. */
  .vc-mobile-drawer {
    top: max(8px, env(safe-area-inset-top, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: auto !important;
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    padding: clamp(58px, 8vw, 72px) clamp(12px, 2.6vw, 20px) clamp(16px, 2.5vw, 24px) !important;
    margin: 0 !important;
    gap: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: clamp(14px, 2vw, 20px) !important;
  }
  .vc-mobile-drawer > .nav-group,
  .vc-mobile-drawer .nav-group { margin: 0 !important; padding: 0 !important; }
  .vc-mobile-drawer .nav-group > a,
  .vc-mobile-drawer .language-trigger {
    min-height: clamp(48px, 7vw, 56px) !important;
    padding: clamp(8px, 1.5vw, 11px) clamp(14px, 2.5vw, 20px) !important;
  }
  .vc-mobile-drawer .nav-group > a > span:last-child,
  .vc-mobile-drawer .language-trigger .menu-chevron {
    margin-inline-start: auto !important;
    margin-inline-end: clamp(5px, 1vw, 9px) !important;
    flex: 0 0 auto !important;
  }
  .vc-mobile-drawer .language-trigger {
    justify-content: flex-start !important;
    gap: 10px !important;
  }
  .vc-mobile-drawer .language-current-name {
    display: inline-block !important;
    min-width: 0 !important;
    font: inherit !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
  }

  /* Fluid type and section spacing. */
  h1, .executive-hero-copy h1, .page-hero h1, .phase-page-hero h1, .compass-hero h1 {
    max-width: 100% !important;
    white-space: normal !important;
    font-size: clamp(2rem, 6.2vw, 3.65rem) !important;
    line-height: 1.08 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  h2 { font-size: clamp(1.55rem, 4.6vw, 2.45rem) !important; line-height: 1.18 !important; }
  h3 { font-size: clamp(1.2rem, 3.4vw, 1.7rem) !important; line-height: 1.25 !important; }
  p, li { font-size: clamp(.98rem, 2.25vw, 1.08rem); line-height: 1.6; }
  html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { line-height: 1.3 !important; }

  .home-hero, .page-hero, .phase-page-hero, .compass-hero {
    min-height: auto !important;
    height: auto !important;
    padding-block: clamp(34px, 6vw, 68px) !important;
    background-position: center center !important;
  }
  body.home-page .home-hero,
  body.home-page .approved-home-hero,
  body.home-page .executive-hero-v71 {
    padding-bottom: clamp(54px, 8vw, 88px) !important;
  }
  .executive-hero-copy, .page-hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
  }
  .executive-hero-copy p, .page-hero p, .phase-page-hero p {
    max-width: 38ch !important;
    margin-inline: auto !important;
  }

  /* Desktop rows become stable responsive grids. */
  .decision-grid, .executive-decision-grid, .service-grid, .cards-grid, .insights-grid,
  .principles-grid, .offer-grid, .decision-engineering-questions, .decision-outcome-grid,
  .compass-belief-grid, .compass-capability-grid, .compass-phase-grid, .compass-principle-grid,
  .phase-content-grid, .contact-grid, .thesis-principles, .question-led-list,
  .lifecycle-comparison, .phase-page-nav {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
    gap: var(--vc-r-card-gap) !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .decision-chain, .decision-chain__track {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)) !important;
  }
  .decision-card, .phase-content-card, .thesis-card, .compass-protected-panel,
  .decision-engineering-card, article[class*="card"], div[class*="card"] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin-inline: 0 !important;
    padding: clamp(17px, 3.2vw, 26px) !important;
  }
  .primary-yellow-cta:not(header .primary-yellow-cta), .phase-page-nav > a {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    white-space: normal !important;
    padding: .82em 1em !important;
  }

  table, .diagram, .journey-diagram, .decision-chain-visual, .compass-diagram,
  [class*="diagram"], .working-compass-component {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .working-compass-component iframe { width: 100% !important; min-height: 680px !important; }

  .single-line-footer-shell {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 22px var(--vc-r-gutter) !important;
    text-align: center !important;
  }
  .footer-navigation {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
  }
  .floating-compass-nav { max-width: calc(100vw - 20px) !important; }
}

/* Phones: one-column content and phone-appropriate scale, independent of device model. */
@media screen and (max-width: 600px) {
  :root { --vc-r-gutter: clamp(13px, 4vw, 18px); }

  .site-header .nav-shell,
  body.home-page .site-header .nav-shell--split-band {
    grid-template-columns: minmax(0, 1fr) clamp(42px, 11vw, 47px) !important;
    column-gap: clamp(12px, 3.5vw, 18px) !important;
  }
  .site-header .official-brand-lockup,
  body.home-page .site-header .official-brand-lockup {
    grid-template-columns: clamp(29px, 8.2vw, 36px) minmax(0, 1fr) !important;
    column-gap: clamp(6px, 2vw, 9px) !important;
  }
  .site-header .official-brand-lockup .vicompassa-motion-icon {
    width: clamp(29px, 8.2vw, 36px) !important;
  }
  .site-header .conversation-link--featured,
  body.home-page .site-header .conversation-link--featured {
    padding: 3px clamp(12px, 3.6vw, 16px) !important;
  }
  .site-header .conversation-link--featured .primary-yellow-cta__label,
  body.home-page .site-header .conversation-link--featured .primary-yellow-cta__label {
    font-size: clamp(.72rem, 3vw, .88rem) !important;
  }

  h1, .executive-hero-copy h1, .page-hero h1, .phase-page-hero h1, .compass-hero h1 {
    font-size: clamp(1.95rem, 10vw, 3rem) !important;
  }
  h2 { font-size: clamp(1.45rem, 7vw, 2.15rem) !important; }
  h3 { font-size: clamp(1.15rem, 5.4vw, 1.55rem) !important; }
  p, li { font-size: clamp(.95rem, 4vw, 1.04rem); }

  .decision-grid, .executive-decision-grid, .service-grid, .cards-grid, .insights-grid,
  .principles-grid, .offer-grid, .decision-engineering-questions, .decision-outcome-grid,
  .compass-belief-grid, .compass-capability-grid, .compass-phase-grid, .compass-principle-grid,
  .phase-content-grid, .contact-grid, .thesis-principles, .question-led-list,
  .lifecycle-comparison, .phase-page-nav,
  .decision-chain, .decision-chain__track {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .vc-mobile-drawer {
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
  }
}

/* Only genuinely narrow phones receive a small safety adjustment. */
@media screen and (max-width: 380px) {
  :root { --vc-r-gutter: 12px; }
  .site-header .nav-shell,
  body.home-page .site-header .nav-shell--split-band {
    grid-template-columns: minmax(0, 1fr) 41px !important;
    column-gap: 11px !important;
  }
  .vc-mobile-menu-button {
    width: 41px !important;
    height: 41px !important;
    min-width: 41px !important;
  }
  .site-header .conversation-link--featured .primary-yellow-cta__label,
  body.home-page .site-header .conversation-link--featured .primary-yellow-cta__label {
    font-size: .72rem !important;
  }
}

/* v15.13 — restore the complete compass mark after the fluid header refactor.
   The icon layers are absolutely positioned, so the wrapper needs an explicit
   fluid height as well as width. Mobile/tablet only; desktop remains untouched. */
@media screen and (max-width: 1080px) {
  .site-header .official-brand-lockup .vicompassa-motion-icon,
  body.home-page .site-header .official-brand-lockup .vicompassa-motion-icon {
    position: relative !important;
    display: block !important;
    width: clamp(31px, 5vw, 44px) !important;
    height: clamp(45px, 7.2vw, 63px) !important;
    min-width: clamp(31px, 5vw, 44px) !important;
    min-height: clamp(45px, 7.2vw, 63px) !important;
    overflow: visible !important;
  }
  .site-header .official-brand-lockup .vicompassa-motion-icon > img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

@media screen and (max-width: 380px) {
  .site-header .official-brand-lockup .vicompassa-motion-icon,
  body.home-page .site-header .official-brand-lockup .vicompassa-motion-icon {
    width: clamp(29px, 8.2vw, 36px) !important;
    height: clamp(42px, 11.8vw, 52px) !important;
    min-width: clamp(29px, 8.2vw, 36px) !important;
    min-height: clamp(42px, 11.8vw, 52px) !important;
  }
}

/* viCOMPASSa v15.14 — phone header proportion and alignment refinement */
@media screen and (max-width: 600px) {
  .site-header .official-brand-lockup,
  body.home-page .site-header .official-brand-lockup {
    grid-template-columns: clamp(28px, 7.4vw, 38px) minmax(0, 1fr) !important;
    column-gap: clamp(6px, 1.7vw, 9px) !important;
    width: 96% !important;
  }

  .site-header .official-brand-lockup .vicompassa-motion-icon,
  body.home-page .site-header .official-brand-lockup .vicompassa-motion-icon {
    width: clamp(28px, 7.4vw, 38px) !important;
  }

  .site-header .official-brand-lockup .vicompassa-motion-wordmark,
  body.home-page .site-header .official-brand-lockup .vicompassa-motion-wordmark {
    width: 96% !important;
  }

  .vc-mobile-menu-button {
    transform: translateY(5px) !important;
  }

  .site-header .conversation-link--featured,
  body.home-page .site-header .conversation-link--featured {
    padding: 2px clamp(11px, 3.5vw, 17px) !important;
  }

  .site-header .conversation-link--featured .primary-yellow-cta__label,
  body.home-page .site-header .conversation-link--featured .primary-yellow-cta__label {
    font-size: clamp(.72rem, 3vw, .9rem) !important;
    line-height: 1.02 !important;
  }
}

/* viCOMPASSa v15.15 — align the mobile menu with the visible compass mark.
   The compass artwork sits lower inside its transparent image canvas, so grid
   centering against the wrapper is not visually correct. This optical offset
   applies only to phone layouts and leaves desktop/tablet geometry unchanged. */
@media screen and (max-width: 600px) {
  .vc-mobile-menu-button {
    transform: translateY(clamp(9px, 2.5vw, 11px)) !important;
  }
}

/* viCOMPASSa v15.16 — preserve the desktop logo composition on phones.
   The logo remains one inline-flex lockup (compass + wordmark), scaled as a
   unit. Only the independent mobile menu occupies the second grid column. */
@media screen and (max-width: 600px) {
  .site-header .official-brand-lockup,
  body.home-page .site-header .official-brand-lockup {
    display: inline-flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(6px, 1.8vw, 9px) !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  .site-header .official-brand-lockup .vicompassa-motion-icon,
  body.home-page .site-header .official-brand-lockup .vicompassa-motion-icon {
    position: relative !important;
    align-self: center !important;
    flex: 0 0 clamp(28px, 7.4vw, 34px) !important;
    width: clamp(28px, 7.4vw, 34px) !important;
    height: clamp(40px, 10.64vw, 49px) !important;
    min-width: clamp(28px, 7.4vw, 34px) !important;
    min-height: clamp(40px, 10.64vw, 49px) !important;
    margin: 0 !important;
    transform: none !important;
  }

  .site-header .official-brand-lockup .vicompassa-motion-wordmark,
  body.home-page .site-header .official-brand-lockup .vicompassa-motion-wordmark {
    display: block !important;
    flex: 0 1 auto !important;
    width: clamp(190px, 54vw, 245px) !important;
    max-width: calc(100vw - 2 * var(--vc-r-gutter) - clamp(42px, 11vw, 47px) - clamp(28px, 7.4vw, 34px) - clamp(18px, 5vw, 27px)) !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  html[dir="rtl"] .site-header .official-brand-lockup .vicompassa-motion-wordmark {
    object-position: right center !important;
  }

  .vc-mobile-menu-button {
    align-self: center !important;
    margin: 0 !important;
    transform: none !important;
  }
}

/* viCOMPASSa v15.18 — mobile page-start spacing and COMPASS phase-card contrast */
@media screen and (max-width: 1080px) {
  /* Give every internal page and phase subpage a calm start below the responsive header. */
  body:not(.home-page) main > section:first-child {
    padding-top: clamp(52px, 8vw, 84px) !important;
  }

  /* The interactive diagram is replaced by phase cards on touch/mobile layouts.
     Yellow surfaces must use the established navy text for full contrast. */
  body.compass-method-page .compass-mobile-cards .compass-phase-card,
  body.compass-method-page .compass-phase-grid .compass-phase-card {
    background: #EEC665 !important;
    background-color: #EEC665 !important;
    color: #071B34 !important;
    -webkit-text-fill-color: #071B34 !important;
  }
  body.compass-method-page .compass-phase-card .phase-name,
  body.compass-method-page .compass-phase-card h3,
  body.compass-method-page .compass-phase-card p,
  body.compass-method-page .compass-phase-card strong,
  body.compass-method-page .compass-phase-card span {
    color: #071B34 !important;
    -webkit-text-fill-color: #071B34 !important;
    opacity: 1 !important;
  }
}