/* ============================================================================
   TB Group — responsive / mobile optimization layer
   Loaded LAST (end of <body>) so it wins over every page's inline styles.
   EVERY rule lives inside a max-width media query: desktop (>=1001px) is
   byte-for-byte untouched. Mobile gets a reflowed, touch-friendly version of
   the same design — same colors, type families and visual identity.
   ==========================================================================*/

/* --------------------------------------------------------------------------
   TABLET  (<=1000px)
-------------------------------------------------------------------------- */
@media (max-width:1000px){
  /* Header: part of the flow, two rows, every menu option visible.
     Some pages pin it with position:fixed!important — match it. */
  .top{position:static !important;background:linear-gradient(180deg,rgba(5,9,13,.96),rgba(5,9,13,.88))}
  /* Pages build the bar as a fixed-height grid (.top .nav{height:66px!important});
     on mobile it must grow and wrap, so match specificity + !important. */
  .nav,.top .nav{display:flex !important;flex-wrap:wrap !important;height:auto !important;
    min-height:0 !important;grid-template-columns:none !important;
    align-items:center;justify-content:space-between;gap:12px 16px;padding:12px 0 0}
  /* !important because several pages hide the menu with
     `.top .links{display:none!important}` — equal specificity + !important,
     and this sheet loads last, so mobile wins. */
  .links,.top .links{display:flex !important;order:3;width:100%;flex-wrap:wrap;gap:11px 18px;padding:12px 0 16px;font-size:10px;line-height:1.25}
  .links a{white-space:nowrap}
  .hero,.hero-content{padding-top:24px}

  /* Media never spills out of its container */
  img,video,svg,canvas,iframe,embed,object{max-width:100%}
  /* Wide tables become horizontally scrollable instead of blowing the layout */
  table{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}

  /* Floating concierge: tucked into the corner, clear of the safe area */
  .juli-root{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  /* Minimized video player fits narrow screens */
  .vlb-overlay.mini{inset:auto 12px calc(12px + env(safe-area-inset-bottom,0px)) auto;width:min(360px,calc(100vw - 24px))}
}

/* --------------------------------------------------------------------------
   PHONE  (<=650px)
-------------------------------------------------------------------------- */
@media (max-width:650px){
  /* Keep search, language and 360° pill reachable on phones.
     Pages hide these with !important, so match it. */
  .nav-right .pill:not(.gold){display:inline-flex !important}
  .nav-right .iconbtn{display:grid !important}
  .lang-select,.nav-right .lang-select{display:inline-block !important}
  .nav-right{flex-wrap:wrap;gap:10px}

  /* Comfortable tap targets */
  .links{gap:6px 10px;font-size:9.5px}
  /* page shrinks menu text to 8.7px!important — keep it legible on phones */
  .links a,.top .links a{font-size:10px !important;padding:9px 7px;border-radius:6px}
  .btn,.pill,.mini-btn{min-height:44px}
  .pill{padding:13px 16px}
  .logo-img{width:72px}
  .nav{padding-top:10px}

  /* "Scroll to discover" joins the flow under the CTAs instead of floating
     on top of them. The page pins it with !important, so match it. */
  .scroll,.smart-scroll{position:static !important;transform:none !important;
    left:auto !important;bottom:auto !important;
    display:inline-flex !important;margin:22px auto 0;width:max-content}
  .hero{padding-bottom:28px}

  /* Floating concierge: smaller, above the home-indicator safe area */
  .juli-root{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  /* higher specificity: juli-ai.js injects its sizes at runtime */
  .juli-root .juli-launch{width:58px !important;height:58px !important}
  .juli-root .juli-launch .juli-portrait{width:100% !important;height:100% !important}
  /* the injected face/avatar keep their 78–88px desktop size and stick out
     past the 58px button (and the viewport edge) — pin them to the button */
  .juli-root .juli-avatar,.juli-root .juli-face,.juli-root .juli-photo-avatar{
    width:100% !important;height:100% !important;max-width:100% !important}
  .juli-panel{width:calc(100vw - 24px);height:min(70vh,520px);max-height:calc(100vh - 140px)}

  /* Tile action pills wrap instead of colliding */
  .tile-copy{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .tile-copy h3,.tile-copy p{width:100%}

  /* Filter / chip rows wrap */
  .filter,.filters,.filter-row,.chips,.proof-tags{flex-wrap:wrap}

  /* Text never clips or overlaps */
  h1,h2,h3,h4,p,span,td,th,a{overflow-wrap:break-word}
  .wrap{width:min(1180px,92vw)}
}

/* --------------------------------------------------------------------------
   SMALL PHONE  (<=360px, covers 320px devices)
-------------------------------------------------------------------------- */
@media (max-width:360px){
  .wrap{width:94vw}
  .links{gap:4px 8px;font-size:9px}
  .links a{padding:8px 5px}
  .hero h1{letter-spacing:-.04em}
  /* higher specificity than the runtime-injected juli styles */
  .juli-root .juli-launch{width:52px !important;height:52px !important}
  /* product spotlight image must not bleed past the edge */
  .product-photo img.product-current{max-width:100% !important;width:100% !important;left:0 !important;inset:0 !important}
  /* Control cluster fits 320px. Pages pin
     `.nav-right{flex:0 0 auto!important;gap:7px!important}`, which sizes it to
     max-content (339px) and blows the viewport — let it shrink + wrap instead. */
  .nav-right,.top .nav-right{flex:1 1 auto !important;min-width:0 !important;
    max-width:100% !important;gap:8px !important;flex-wrap:wrap !important;
    justify-content:flex-end}
  .nav-right .pill{padding:11px 12px;min-height:40px}
  .nav-right .lang-select{max-width:96px;height:36px}
  /* page sets `.top .logo-img{width:74px!important}` — match specificity */
  .top .logo-img,.logo-img{width:64px !important}
  .btn{padding:14px 14px;font-size:11px}
  /* grids must be allowed to shrink below their content's min-width */
  .hero-grid,.story-grid,.vision-grid,.founder-detail,.apply-grid,.contact-grid{grid-template-columns:1fr !important}
  .hero-grid>*,.story-grid>*,.vision-grid>*,.founder-detail>*{min-width:0}
}

/* --------------------------------------------------------------------------
   SAFE AREA (notched phones) — fixed/sticky chrome respects the insets
-------------------------------------------------------------------------- */
@supports (padding: env(safe-area-inset-bottom)){
  @media (max-width:1000px){
    .foot{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
    .cms-bar{padding-top:env(safe-area-inset-top,0px)}
  }
}