/* ============================================================
   BADBAN — mobile-desktop.css
   Everything here is scoped to html.dv (phone/tablet shown in
   "desktop site" mode by js/desktop-view.js) or html.dv-wait
   (first visit, while the brand loader is still playing).
   Desktop browsers never match these selectors.
   Remove this file + its <link> + desktop-view.js to revert.
============================================================ */

/* ---------- first visit: the loader plays in its normal mobile
   layout; the page behind it stays invisible so its slide-up
   reveals the brand colour, not a layout about to be replaced --- */
html.dv-wait, html.dv-wait body { background: #04262d; }
html.dv-wait body > *:not(#loader):not(script):not(style) { visibility: hidden; }

/* ---------- desktop view ------------------------------------- */
html.dv {
  --dv-h: 820px;                       /* a desktop-like "first screen" height */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* nothing may ever push the page wider than the design width */
html.dv, html.dv body { max-width: 100%; overflow-x: hidden; }
html.dv body { overflow-x: clip; }

/* vh / svh would equal the (huge) scaled viewport height — pin them */
html.dv .hero { min-height: var(--dv-h); }
html.dv .hero__ring { inset-block-start: calc(var(--dv-h) * 0.08); }
html.dv .hero__ring--small { inset-block-start: calc(var(--dv-h) * 0.3); }

/* ---------- legibility pass ----------------------------------
   The page is shown at ~1/3 scale, so the type is lifted a little
   and the pinned header (the one thing people tap constantly) is
   given real thumb-sized targets — the layout itself stays the
   desktop layout. */
html.dv { font-size: 112.5%; --header-h: 116px; }

html.dv .header__inner { gap: 1rem; flex-wrap: nowrap; }
html.dv .wordmark { font-size: 1.85rem; letter-spacing: 0.2em; white-space: nowrap; }
html.dv .nav { gap: 1.45rem; flex-wrap: nowrap; }
html.dv .nav__link { font-size: 1.02rem; letter-spacing: 0.06em; padding-block: 0.9rem; white-space: nowrap; }
html.dv .header__actions { gap: 0.9rem; flex-wrap: nowrap; }
html.dv .lang-switch a { font-size: 0.88rem; padding: 0.75rem 0.9rem; white-space: nowrap; }
html.dv .header__cta, html.dv .header__cta.btn--small { font-size: 0.95rem; letter-spacing: 0.06em; padding: 1rem 1.15rem; white-space: nowrap; }