/* CShark mobile experience: one visual system, iPhone-quality interaction. */
@media (max-width: 980px) {
  :root {
    --mobile-header-bar: 64px;
    --header-height: calc(var(--mobile-header-bar) + env(safe-area-inset-top));
    --mobile-gutter: 14px;
    --mobile-ease: cubic-bezier(.16, 1, .3, 1);
  }

  html {
    min-width: 320px;
    scroll-padding-top: calc(var(--header-height) + 12px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-width: 320px;
    overscroll-behavior-x: none;
  }

  button,
  a,
  summary,
  input,
  select,
  textarea {
    touch-action: manipulation;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .page-shell {
    width: min(
      calc(100% - (var(--mobile-gutter) * 2) - env(safe-area-inset-left) - env(safe-area-inset-right)),
      var(--shell)
    );
  }

  .guide-shell {
    width: min(
      calc(100% - (var(--mobile-gutter) * 2) - env(safe-area-inset-left) - env(safe-area-inset-right)),
      1180px
    );
  }

  .docs-shell {
    width: min(
      calc(100% - (var(--mobile-gutter) * 2) - env(safe-area-inset-left) - env(safe-area-inset-right)),
      var(--docs-shell)
    );
  }

  body.inner-page,
  body.guide-page,
  body.documentation-page {
    padding-top: var(--header-height);
  }

  .site-header {
    min-height: var(--header-height);
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: var(--mobile-header-bar);
    column-gap: 10px !important;
    align-content: end;
    padding-top: env(safe-area-inset-top);
    padding-right: max(10px, env(safe-area-inset-right));
    padding-left: max(10px, env(safe-area-inset-left));
    color: var(--ink);
    background: rgba(247, 248, 243, .94);
    border-bottom-color: rgba(12, 21, 18, .1);
    box-shadow: 0 8px 26px rgba(7, 16, 23, .035);
    backdrop-filter: blur(18px) saturate(.9);
    -webkit-backdrop-filter: blur(18px) saturate(.9);
  }

  .site-header.scrolled,
  .inner-page .site-header.scrolled {
    background: rgba(247, 248, 243, .82);
    box-shadow: 0 8px 26px rgba(7, 16, 23, .045);
    backdrop-filter: blur(22px) saturate(.82);
    -webkit-backdrop-filter: blur(22px) saturate(.82);
  }

  .brand,
  .brand-logo {
    width: 78px;
    height: 44px;
  }

  .brand { min-height: 44px; }

  .brand-logo {
    object-fit: cover;
    content: url("assets/cshark-logo-on-light.svg?v=20260719-transparent");
  }

  .desktop-nav,
  .header-contact-menu,
  .header-actions > .button {
    display: none !important;
  }

  .header-actions {
    min-width: 0;
    justify-self: end;
    gap: 8px;
  }

  .site-header .menu-button,
  .language-switcher > summary {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--ink);
    background: rgba(255, 255, 255, .42);
    border: 1px solid rgba(12, 21, 18, .54);
    border-radius: 8px;
  }

  .language-switcher > summary {
    width: 66px;
    grid-template-columns: auto 14px;
    gap: 6px;
  }

  .language-switcher-menu {
    top: calc(100% + 8px);
    right: 0;
    width: min(264px, calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    padding: 8px;
    border-radius: 12px;
    box-shadow: 0 22px 70px rgba(7, 16, 23, .18);
  }

  .language-switcher-menu a { min-height: 44px; }

  .mobile-nav {
    position: fixed !important;
    z-index: 999;
    top: var(--header-height) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: auto;
    left: max(8px, env(safe-area-inset-left)) !important;
    width: auto;
    height: calc(100dvh - var(--header-height) - max(8px, env(safe-area-inset-bottom))) !important;
    max-height: calc(100dvh - var(--header-height) - max(8px, env(safe-area-inset-bottom))) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 22px;
    align-content: start;
    padding: 8px 16px calc(18px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--ink);
    background: rgba(247, 248, 243, .975);
    border: 1px solid rgba(12, 21, 18, .12);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 28px 80px rgba(7, 16, 23, .22);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    animation: cshark-mobile-menu-in 220ms var(--mobile-ease) both;
  }

  .mobile-nav[hidden] { display: none !important; }

  .mobile-nav > a:not(.mobile-nav-cta) {
    min-height: 48px;
    padding: 6px 2px;
    border-bottom: 1px solid rgba(12, 21, 18, .09);
    font-size: 15px;
    line-height: 1.25;
  }

  .mobile-nav-cta {
    min-height: 50px !important;
    margin-top: 12px;
    border-radius: 8px;
    font-size: 15px;
  }

  .mobile-nav-contacts { margin-top: 10px; padding-top: 12px; }
  .mobile-nav-contacts > strong { font-size: 11px; }
  .mobile-nav .mobile-nav-contacts a {
    min-height: 52px;
    font-size: 13px;
  }

  body.mobile-nav-open { overflow: hidden; }

  .button,
  .guide-button,
  .docs-header__action,
  .guide-header__action,
  .cookie-button {
    min-height: 48px;
  }

  .button:active,
  .guide-button:active,
  .mobile-nav-cta:active,
  .cookie-button:active {
    transform: scale(.98);
    transition-duration: 80ms;
  }

  .guide-card p,
  .capability-item p,
  .docs-card p,
  .scenario-disclosure p {
    font-size: 15px;
    line-height: 1.62;
  }

  .guide-article p,
  .guide-article li,
  .docs-article p,
  .docs-article li,
  .docs-article dd {
    font-size: 16px;
    line-height: 1.72;
  }

  .guide-card__link,
  .docs-card__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
  }

  .inner-hero h1,
  .guide-hero h1,
  .docs-hero h1 {
    text-wrap: balance;
    overflow-wrap: normal;
  }

  .demo-dialog,
  .scenario-dialog {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - env(safe-area-inset-top));
    margin: auto 0 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -24px 70px rgba(3, 10, 15, .26);
  }

  .demo-dialog::backdrop,
  .scenario-dialog::backdrop {
    background: rgba(3, 10, 15, .52);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  .dialog-close,
  .scenario-dialog-close,
  .demo-mobile-sheet-close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
  }

  .cookie-consent {
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    width: auto;
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
    overflow-y: auto;
    border-radius: 16px;
    box-shadow: 0 26px 80px rgba(0, 0, 0, .38);
  }

  .cookie-consent-copy strong { margin-bottom: 6px; font-size: 16px; }
  .cookie-consent-copy p { font-size: 13px; line-height: 1.5; }
  .cookie-consent-links { gap: 6px 16px; margin-top: 8px; }
  .cookie-consent-links a { min-height: 28px; display: inline-flex; align-items: center; font-size: 12px; }
  .cookie-consent-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .cookie-button { padding: 9px 8px; font-size: 11px; line-height: 1.2; }

  .cshark-footer-main {
    gap: 32px;
    padding-top: 52px;
    padding-bottom: 44px;
  }

  .cshark-footer-positioning { font-size: 18px; }
  .cshark-footer-identity > p,
  .cshark-footer-contacts span,
  .cshark-footer-contacts address,
  .cshark-footer-contacts a { font-size: 14px; }
  .cshark-footer-contacts a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .cshark-footer-nav { padding-top: 20px; }
  .cshark-footer-nav h2 { font-size: 16px; }
  .cshark-footer-nav a,
  .cshark-footer-docs a,
  .cshark-footer-docs button {
    width: 100%;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
  }
  .cshark-footer-docs strong { font-size: 13px; }
  .cshark-footer-bottom strong,
  .cshark-footer-bottom p { font-size: 12px; }

  .demo3d-view-switch button,
  .demo3d-top-actions a,
  .demo3d-top-actions button,
  .demo3d-floors button,
  .demo3d-toolbar button,
  .demo3d-mobile-controls button,
  .demo3d-object-actions button,
  #demo3d-close-inspector,
  #demo3d-close-log,
  #demo3d-clear-log {
    min-width: 44px;
    min-height: 44px;
  }

  .demo3d-mobile-controls {
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    padding: 6px;
    border-radius: 12px;
    background: rgba(250, 252, 249, .9);
    backdrop-filter: blur(20px) saturate(.9);
    -webkit-backdrop-filter: blur(20px) saturate(.9);
  }

  .demo3d-mobile-controls button { border-radius: 8px; font-size: 10px; }
  .demo3d-view-switch button { font-size: 11px; }
  .demo3d-metrics small { font-size: 8px; }
  .demo3d-metrics strong { font-size: 14px; }

  .demo-mobile-mode-link,
  .demo-icon-button,
  .demo-floor-switch button,
  .demo-plan-controls button,
  #demo-plan-fit {
    min-width: 44px;
    width: 44px;
    min-height: 44px;
    height: 44px;
  }

  .demo-map-toolbar { min-height: 54px; height: 54px; }
  .demo-map-metrics small { font-size: 8px; }
  .demo-mobile-actionbar { border-radius: 12px; }
  .demo-mobile-actionbar button span { font-size: 10px; }
  .demo-mobile-actionbar .demo-mobile-primary span { font-size: 11px; }

  @supports (content-visibility: auto) {
    body:not(.demo-page) main > section:nth-of-type(n + 3) {
      content-visibility: auto;
      contain-intrinsic-size: auto 720px;
    }
  }

  @keyframes cshark-mobile-menu-in {
    from { opacity: 0; transform: translateY(-8px); }
  }
}

@media (max-width: 560px) {
  .mobile-nav { grid-template-columns: 1fr; }

  .demo3d-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .demo3d-view-switch { display: none; }

  .demo3d-top-actions > * { display: none !important; }
  .demo3d-top-actions > a:first-child,
  .demo3d-top-actions > button:last-child {
    display: flex !important;
  }
  .demo3d-top-actions > a:first-child { width: 62px; }
  .demo3d-top-actions > a:first-child span { display: inline; }
}

@media (max-width: 390px) {
  .cookie-consent { padding: 14px; }
  .cookie-consent-copy p { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav { animation: none !important; }
  .button:active,
  .guide-button:active,
  .mobile-nav-cta:active,
  .cookie-button:active { transform: none; }
}

/* Shared compact mobile header. SVG paths carry the brand colors, not CSS filters. */
@media(max-width:980px){
  :root{--mobile-header-bar:52px}
  body.inner-page main>.inner-hero{padding-top:40px}
  body .site-header.site-header,body .site-header.site-header.scrolled{
    top:0!important;left:0!important;right:0!important;width:auto!important;
    height:var(--header-height)!important;min-height:var(--header-height)!important;
    margin:0;padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));
    border:0;border-bottom:1px solid #dce2e4;border-radius:0!important;
    background:rgba(247,248,243,.97);color:#10212e;box-shadow:none;
    grid-template-rows:52px;gap:0;transform:none;
  }
  body .site-header.site-header .brand{display:flex;align-items:center;width:64px;height:52px;min-height:44px}
  body .site-header.site-header .brand-logo{width:56px;height:36px;object-fit:contain;filter:none;opacity:1;content:url('/assets/cshark-header-navy-20260910.svg')}
  body .site-header.site-header .header-actions{height:52px;gap:0}
  body .site-header.site-header .menu-button{position:relative;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:0;background:transparent;color:#10212e;box-shadow:none}
  .site-header .menu-button>*{display:none!important}
  .site-header .menu-button::before,.site-header .menu-button::after{content:"";position:absolute;width:20px;height:2px;left:12px;top:21px;background:currentColor;transform:translateY(-4px);transition:transform .2s ease}
  .site-header .menu-button::after{transform:translateY(4px)}
  .site-header .menu-button[aria-expanded="true"]::before{transform:rotate(45deg)}
  .site-header .menu-button[aria-expanded="true"]::after{transform:rotate(-45deg)}
  .site-header .menu-button:focus-visible,#mobile-nav a:focus-visible,#mobile-nav summary:focus-visible{outline:2px solid #10212e;outline-offset:3px}
  body .site-header.site-header:has(.menu-button[aria-expanded="true"]){background:#f7f8f3;backdrop-filter:none;-webkit-backdrop-filter:none}
  #mobile-nav{top:var(--header-height)!important;left:0!important;right:0!important;width:auto;bottom:0;height:calc(100dvh - var(--header-height))!important;max-height:calc(100dvh - var(--header-height))!important;display:block;padding:24px max(24px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));border:0;border-radius:0;box-shadow:none;background:#f7f8f3;color:#10212e;overscroll-behavior:contain}
  #mobile-nav>a:not(.mobile-nav-cta){display:block;min-height:48px;padding:8px 0;border:0;font-size:clamp(25px,7vw,32px);font-weight:650;line-height:1.25;letter-spacing:-.7px;color:#10212e;background:none}
  #mobile-nav .mobile-nav-more{margin:20px 0 12px;border-top:1px solid #dce2e4;padding-top:8px}
  #mobile-nav .mobile-nav-more>summary{padding:14px 0;min-height:44px;font-size:16px;cursor:pointer;list-style-position:inside}
  #mobile-nav .mobile-nav-more-links{display:grid;gap:0}
  #mobile-nav .mobile-nav-more-links>a{display:block;padding:12px 0;min-height:44px;font-size:17px;line-height:1.4;font-weight:500;border:0}
  #mobile-nav .mobile-nav-cta{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:48px!important;padding:10px 0;margin:0;background:none;border:0;border-radius:0;color:#086e5b;font-size:18px;box-shadow:none}
  #mobile-nav .mobile-nav-language{margin-top:10px}
  #mobile-nav .language-switcher{display:block;position:relative}
  #mobile-nav .language-switcher>summary{display:flex;justify-content:flex-start;gap:10px;width:auto;min-height:44px;padding:8px 0;background:none;border:0;border-radius:0;box-shadow:none;color:#10212e;font-size:16px}
  #mobile-nav .language-switcher-menu{position:static;width:100%;max-height:none;margin:8px 0 0;padding:4px 0;border:0;border-radius:0;box-shadow:none;background:none}
  #mobile-nav .language-switcher-menu a{display:flex;min-height:44px;padding:10px 0}
  #mobile-nav .mobile-nav-contacts{margin-top:18px}
  #mobile-nav .mobile-nav-contacts a{min-height:44px}
  html[dir="rtl"] #mobile-nav{text-align:right}
  html[dir="rtl"] .site-header .menu-button::before,html[dir="rtl"] .site-header .menu-button::after{left:12px;right:auto}
}
@media(prefers-reduced-motion:reduce){.site-header .menu-button::before,.site-header .menu-button::after{transition:none}}