/* viCOMPASSa v14.0 responsive layer — shared across all languages */
:root{--mobile-gutter:clamp(16px,4vw,28px)}
html{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
iframe{max-width:100%}
*{box-sizing:border-box}

/* Fluid foundations */
.site-shell,.container{width:min(100% - (2 * var(--mobile-gutter)),1800px)!important;max-width:1800px!important;margin-inline:auto!important}
main,section,article,header,footer{min-width:0}
h1,h2,h3,h4,p,li,a,span{overflow-wrap:break-word}
:is(h1,h2,h3,.phase-question,.page-hero h1,.executive-hero-copy h1){text-wrap:balance}
:is(p,.text-block,.phase-page-note,.decision-heading p){text-wrap:pretty}

/* Avoid rigid desktop-only rows on smaller viewports */
@media (max-width:1080px){
  .site-header{position:relative!important;z-index:1000!important}
  .site-header .nav-shell,
  body.home-page .site-header .nav-shell--split-band{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"brand toggle" "cta cta" "nav nav"!important;
    align-items:center!important;
    gap:10px 14px!important;
    min-height:auto!important;
    height:auto!important;
    padding:10px var(--mobile-gutter) 12px!important;
    background:rgba(5,26,52,.94)!important;
    backdrop-filter:blur(12px)!important;
  }
  .site-header .official-brand-lockup{grid-area:brand!important;width:min(360px,72vw)!important;height:auto!important;min-height:0!important;justify-self:start!important;overflow:visible!important}
  body.home-page .site-header .official-brand-lockup{width:min(360px,72vw)!important;height:auto!important}
  .site-header .official-brand-lockup .vicompassa-motion-icon{width:58px!important;height:72px!important;flex:0 0 58px!important}
  .site-header .official-brand-lockup .vicompassa-motion-wordmark{width:min(285px,55vw)!important;height:auto!important;max-width:100%!important;object-fit:contain!important}
  .site-header .menu-toggle{grid-area:toggle!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:48px!important;min-height:44px!important;padding:9px 12px!important;border:1px solid #EEC665!important;border-radius:999px!important;background:#071b3a!important;color:#EEC665!important;font-weight:800!important;font-size:0!important;cursor:pointer!important}
  .site-header .menu-toggle::after{content:"☰";font-size:1.35rem;line-height:1}
  .site-header .menu-toggle[aria-expanded="true"]::after{content:"×";font-size:1.8rem}
  .site-header .primary-nav{grid-area:nav!important;display:none!important;position:static!important;width:100%!important;max-height:min(68vh,680px)!important;overflow:auto!important;padding:8px!important;margin:0!important;flex-direction:column!important;align-items:stretch!important;gap:4px!important;background:rgba(5,26,52,.985)!important;border:1px solid rgba(238,198,101,.6)!important;border-radius:16px!important;box-shadow:0 18px 45px rgba(0,0,0,.35)!important}
  .site-header .primary-nav.open{display:flex!important}
  .site-header .primary-nav>.nav-group{display:block!important;width:100%!important;position:relative!important}
  .site-header .primary-nav>.nav-group>a,
  .site-header .language-trigger{display:flex!important;width:100%!important;min-height:46px!important;align-items:center!important;justify-content:space-between!important;padding:10px 14px!important;font-size:1rem!important;line-height:1.25!important;color:#fff!important;text-align:start!important;border-radius:10px!important}
  .site-header .primary-nav .dropdown{position:static!important;display:none!important;visibility:visible!important;opacity:1!important;transform:none!important;width:100%!important;min-width:0!important;max-width:none!important;margin:2px 0 8px!important;padding:5px!important;background:rgba(255,255,255,.04)!important;border:0!important;border-radius:10px!important;box-shadow:none!important}
  .site-header .primary-nav .nav-group:hover>.dropdown,
  .site-header .primary-nav .nav-group:focus-within>.dropdown{display:block!important}
  .site-header .primary-nav .dropdown a{display:block!important;padding:10px 12px!important;font-size:.94rem!important;white-space:normal!important;line-height:1.3!important}
  .site-header .conversation-link--featured{grid-area:cta!important;justify-self:stretch!important;width:100%!important;min-width:0!important;max-width:560px!important;margin-inline:auto!important;min-height:46px!important;padding:.72em 1em!important;font-size:clamp(.92rem,3.5vw,1.08rem)!important;transform:none!important}
  html[dir="rtl"] .site-header .official-brand-lockup{justify-self:end!important}
  html[dir="rtl"] .site-header .primary-nav>.nav-group>a,
  html[dir="rtl"] .site-header .language-trigger{text-align:right!important;direction:rtl!important}
}

@media (max-width:768px){
  :root{--mobile-gutter:16px}
  body{font-size:16px}
  .site-header .nav-shell,body.home-page .site-header .nav-shell--split-band{padding:8px 12px 10px!important;gap:7px 10px!important}
  .site-header .official-brand-lockup,body.home-page .site-header .official-brand-lockup{width:min(290px,75vw)!important}
  .site-header .official-brand-lockup .vicompassa-motion-icon{width:44px!important;height:58px!important;flex-basis:44px!important}
  .site-header .official-brand-lockup .vicompassa-motion-wordmark{width:min(230px,57vw)!important}
  .site-header .conversation-link--featured{min-height:44px!important;border-radius:999px!important}

  /* Hero sections */
  .home-hero,.page-hero,.phase-page-hero,.compass-hero{min-height:auto!important;height:auto!important;padding-block:clamp(38px,9vw,72px)!important}
  .hero-shell,.executive-hero-shell,.phase-intro{min-height:0!important;height:auto!important;padding:0!important}
  .executive-hero-copy{width:100%!important;max-width:none!important;padding:0!important;margin:0 auto!important;text-align:center!important}
  .executive-hero-copy .executive-hero-kicker{font-size:clamp(.72rem,3vw,.92rem)!important;letter-spacing:.13em!important;line-height:1.45!important}
  .executive-hero-copy h1,.page-hero h1,.phase-page-hero h1,.compass-hero h1{
    max-width:100%!important;width:100%!important;margin-inline:auto!important;padding-inline:0!important;
    font-size:clamp(2.05rem,10.5vw,4rem)!important;line-height:1.02!important;letter-spacing:-.025em!important;
    white-space:normal!important;text-align:center!important
  }
  html[dir="rtl"] .executive-hero-copy h1,html[dir="rtl"] .page-hero h1,html[dir="rtl"] .phase-page-hero h1{line-height:1.22!important;letter-spacing:0!important}
  .executive-hero-copy h1 br{display:none!important}
  .executive-hero-copy p,.page-hero p,.phase-page-hero p{font-size:clamp(.9rem,4.1vw,1.12rem)!important;line-height:1.55!important;max-width:36ch!important;margin-inline:auto!important}
  .executive-hero-star{margin-block:20px!important}

  /* Homepage decision area */
  .decision-panel,.executive-decision-panel{padding:22px 0 0!important;margin-top:24px!important}
  .decision-heading h2{font-size:clamp(1.45rem,7vw,2.2rem)!important;line-height:1.2!important}
  .decision-heading p{font-size:1rem!important}
  .decision-grid,.executive-decision-grid{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;width:100%!important}
  .decision-card{min-height:0!important;height:auto!important;padding:20px!important}
  .decision-card strong{font-size:clamp(1.15rem,5.5vw,1.5rem)!important;line-height:1.25!important}

  /* Common grid systems */
  .thesis-principles,.question-led-list,.decision-outcome-grid,.compass-belief-grid,.compass-capability-grid,
  .compass-phase-grid,.compass-principle-grid,.phase-content-grid,.contact-grid,.service-grid,.cards-grid,
  .insights-grid,.principles-grid,.offer-grid,.decision-grid,.decision-engineering-questions{
    grid-template-columns:1fr!important;display:grid!important;gap:14px!important
  }
  .thesis-card,.compass-protected-panel,.decision-engineering-card,.phase-content-card,.compass-closing,
  [class*="panel"],[class*="card"]{max-width:100%!important}
  .thesis-card{padding:22px!important}
  .thesis-card h2{font-size:clamp(1.65rem,7vw,2.35rem)!important;line-height:1.22!important}
  .decision-chain{grid-template-columns:1fr!important;gap:8px!important}

  /* Phase pages */
  .phase-content{padding-block:28px!important}
  .phase-content-grid{display:block!important}
  .phase-content-card{padding:22px 18px!important;margin-bottom:16px!important}
  .phase-question{font-size:clamp(1.65rem,7.5vw,2.45rem)!important;line-height:1.25!important}
  .phase-page-nav{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;width:100%!important}
  .phase-page-nav>a{width:100%!important;justify-content:center!important;text-align:center!important;min-height:50px!important}
  .phase-page-note{font-size:.96rem!important;line-height:1.6!important;padding:18px!important;white-space:normal!important}

  /* COMPASS method and diagrams */
  .working-compass-component{width:100%!important;max-width:100%!important;overflow:hidden!important}
  .working-compass-component iframe{display:block!important;width:100%!important;min-height:720px!important;border:0!important}
  .compass-mobile-cards{display:grid!important;grid-template-columns:1fr!important}
  .compass-phases-section,.compass-principles-section,.compass-belief-section,.compass-capability-section,
  .compass-protected-section,.compass-closing-section{padding-block:42px!important}
  .north-star-orbit,.compass-north-star{max-width:100%!important;transform:scale(.82)!important;transform-origin:center!important}
  .lifecycle-comparison{grid-template-columns:1fr!important;gap:18px!important}
  .lifecycle-divider{display:none!important}

  /* Tables and wide visual components */
  table{display:block!important;width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .diagram,.journey-diagram,.decision-chain-visual,.compass-diagram,[class*="diagram"]{max-width:100%!important;overflow-x:auto!important}

  /* Buttons and touch targets */
  a.button,button,.primary-yellow-cta,.conversation-link,.phase-page-nav a{min-height:44px}
  .primary-yellow-cta:not(header .primary-yellow-cta){max-width:100%!important;white-space:normal!important}

  /* Footer */
  .single-line-footer-shell{display:flex!important;flex-direction:column!important;gap:12px!important;align-items:center!important;text-align:center!important;padding-block:22px!important}
  .footer-navigation{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:10px 18px!important}
  .footer-copyright{font-size:.86rem!important}

  /* Floating controls */
  .floating-compass-nav{right:10px!important;bottom:10px!important;transform:scale(.78)!important;transform-origin:right bottom!important}
  html[dir="rtl"] .floating-compass-nav{right:auto!important;left:10px!important;transform-origin:left bottom!important}
}

@media (max-width:430px){
  .site-header .official-brand-lockup,body.home-page .site-header .official-brand-lockup{width:min(250px,73vw)!important}
  .site-header .official-brand-lockup .vicompassa-motion-icon{width:38px!important;height:50px!important;flex-basis:38px!important}
  .site-header .official-brand-lockup .vicompassa-motion-wordmark{width:min(198px,56vw)!important}
  .site-header .conversation-link--featured{font-size:.9rem!important;padding:.68em .75em!important}
  .executive-hero-copy h1,.page-hero h1,.phase-page-hero h1,.compass-hero h1{font-size:clamp(1.85rem,10vw,2.65rem)!important}
  .decision-card,.phase-content-card,.thesis-card{padding:18px 15px!important}
}

/* Landscape phones: avoid overly tall headers */
@media (max-height:520px) and (orientation:landscape) and (max-width:950px){
  .site-header .nav-shell,body.home-page .site-header .nav-shell--split-band{grid-template-areas:"brand toggle cta" "nav nav nav"!important;grid-template-columns:minmax(0,1fr) auto minmax(220px,34vw)!important}
  .site-header .conversation-link--featured{grid-area:cta!important;min-height:40px!important}
  .site-header .official-brand-lockup,body.home-page .site-header .official-brand-lockup{width:min(270px,38vw)!important}
  .site-header .primary-nav{max-height:58vh!important}
}

/* Respect user accessibility preferences */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* v14.01 — iPhone mobile-menu containment fix */
@media (max-width:768px){
  .site-header,
  .site-header .nav-shell,
  body.home-page .site-header .nav-shell--split-band{
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
  }
  .site-header .nav-shell,
  body.home-page .site-header .nav-shell--split-band{
    overflow:visible!important;
    grid-template-columns:minmax(0,1fr) 48px!important;
  }
  .site-header .official-brand-lockup,
  body.home-page .site-header .official-brand-lockup{
    width:auto!important;
    max-width:calc(100vw - 88px)!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  .site-header .official-brand-lockup .vicompassa-motion-wordmark{
    width:auto!important;
    max-width:calc(100vw - 142px)!important;
    min-width:0!important;
  }
  .site-header .primary-nav.open{
    display:flex!important;
    position:fixed!important;
    inset-inline:12px!important;
    top:calc(env(safe-area-inset-top, 0px) + 76px)!important;
    width:auto!important;
    min-width:0!important;
    max-width:calc(100vw - 24px)!important;
    max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 92px)!important;
    margin:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    z-index:2147483000!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .site-header .primary-nav.open > *,
  .site-header .primary-nav.open .nav-group,
  .site-header .primary-nav.open .plain-link,
  .site-header .primary-nav.open .language-menu{
    min-width:0!important;
    max-width:100%!important;
  }
  .site-header .primary-nav.open a,
  .site-header .primary-nav.open button,
  .site-header .primary-nav.open .language-trigger{
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
}

@media (max-width:430px){
  .site-header .official-brand-lockup .vicompassa-motion-icon{
    width:34px!important;
    height:46px!important;
    flex-basis:34px!important;
  }
  .site-header .official-brand-lockup .vicompassa-motion-wordmark{
    max-width:calc(100vw - 132px)!important;
  }
}

/* v14.02 — definitive mobile navigation viewport anchoring */
@media screen and (max-width:1080px){
  html,body{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important}
  .site-header .primary-nav.open{
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    inset-inline:auto!important;
    top:calc(env(safe-area-inset-top, 0px) + 82px)!important;
    bottom:auto!important;
    width:calc(100vw - 24px)!important;
    min-width:0!important;
    max-width:calc(100vw - 24px)!important;
    margin:0!important;
    padding:10px!important;
    transform:none!important;
    translate:none!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    z-index:2147483640!important;
  }
  .site-header .primary-nav.open::before,
  .site-header .primary-nav.open::after{max-width:100%!important}
  .site-header .primary-nav.open > *{width:100%!important;max-width:100%!important;min-width:0!important}
}
@media screen and (max-width:430px){
  .site-header .primary-nav.open{
    left:10px!important;
    right:10px!important;
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    top:calc(env(safe-area-inset-top, 0px) + 76px)!important;
  }
}

/* v14.03 — true viewport mobile navigation overlay (Safari-safe) */
@media screen and (max-width:1080px){
  body.mobile-menu-open{overflow:hidden!important;touch-action:none}
  .primary-nav.mobile-nav-overlay{
    position:fixed!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:4px!important;
    left:max(12px,env(safe-area-inset-left,0px))!important;
    right:max(12px,env(safe-area-inset-right,0px))!important;
    top:calc(env(safe-area-inset-top,0px) + 76px)!important;
    bottom:max(12px,env(safe-area-inset-bottom,0px))!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:12px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    box-sizing:border-box!important;
    background:rgba(5,26,52,.99)!important;
    border:1px solid rgba(238,198,101,.75)!important;
    border-radius:18px!important;
    box-shadow:0 22px 70px rgba(0,0,0,.55)!important;
    transform:none!important;
    translate:none!important;
    z-index:2147483646!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .primary-nav.mobile-nav-overlay > .nav-group{
    display:block!important;
    position:relative!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
  }
  .primary-nav.mobile-nav-overlay > .nav-group > a,
  .primary-nav.mobile-nav-overlay .language-trigger{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    padding:11px 14px!important;
    margin:0!important;
    color:#fff!important;
    font-size:1rem!important;
    line-height:1.3!important;
    text-align:left!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    border-radius:10px!important;
  }
  html[dir="rtl"] .primary-nav.mobile-nav-overlay > .nav-group > a,
  html[dir="rtl"] .primary-nav.mobile-nav-overlay .language-trigger{
    direction:rtl!important;
    text-align:right!important;
  }
  .primary-nav.mobile-nav-overlay .dropdown{
    position:static!important;
    display:none!important;
    visibility:visible!important;
    opacity:1!important;
    transform:none!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:2px 0 8px!important;
    padding:5px!important;
    background:rgba(255,255,255,.05)!important;
    border:0!important;
    border-radius:10px!important;
    box-shadow:none!important;
  }
  .primary-nav.mobile-nav-overlay .nav-group.open > .dropdown,
  .primary-nav.mobile-nav-overlay .nav-group:focus-within > .dropdown,
  .primary-nav.mobile-nav-overlay .language-menu.open > .dropdown{
    display:block!important;
  }
  .primary-nav.mobile-nav-overlay .dropdown a{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:10px 12px!important;
    font-size:.94rem!important;
    line-height:1.35!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
}
@media screen and (max-width:430px){
  .primary-nav.mobile-nav-overlay{
    left:max(8px,env(safe-area-inset-left,0px))!important;
    right:max(8px,env(safe-area-inset-right,0px))!important;
    top:calc(env(safe-area-inset-top,0px) + 70px)!important;
    bottom:max(8px,env(safe-area-inset-bottom,0px))!important;
    padding:10px!important;
    border-radius:16px!important;
  }
  .site-header .nav-shell,
  body.home-page .site-header .nav-shell--split-band{
    grid-template-columns:minmax(0,1fr) 46px!important;
  }
  .site-header .official-brand-lockup,
  body.home-page .site-header .official-brand-lockup{
    max-width:calc(100vw - 78px)!important;
  }
}