/* Mobile presentation and progressive enhancements. Desktop styles stay in site.css. */
.mobile-sections, .job-filters, .job-outline { display: none; }
.filter-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }

@media (max-width: 767px) {
  :root { --header-height: 60px; --mobile-nav-height: 48px; --section-space: 48px; }
  .nav { gap: 0; }
  .brand { gap: 9px; font-size: 13px; }
  .brand-wordmark { gap: 10px; }
  .site-header .nav-tools { display: none; }
  .brand-values { display: grid; grid-template-columns: repeat(2, max-content); gap: 6px 24px; margin-top: 14px; font-size: 13px; }
  .company-body { padding-top: 28px; }
  .section h2 { font-size: clamp(28px, 6.5vw, 34px); }
  .jobs-layout { display: flex; flex-direction: column; gap: 0; }
  .jobs-aside { display: contents; }
  .jobs-intro h2 br { display: none; }
  .jobs-intro > p { max-width: 520px; }
  .job-board { width: 100%; }
  .job summary { padding-inline: 0; margin-inline: 0; }
  .job-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .job details[open] > summary { background: transparent; }
  .global-layout { gap: 24px; }
  .global-details { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 22px; }
  .global-office { padding: 0 0 20px; margin: 0; border-right: 0; border-bottom: 1px solid #dce4ee; }
  .global-office h3, .global-markets h3 { margin-bottom: 8px; font-size: 17px; }
  .market-list { gap: 12px 20px; }
  .footer-main { flex-direction: column; align-items: stretch; gap: 24px; padding-bottom: 24px; }
  .footer-wordmark strong { font-size: 22px; }
  .footer-wordmark > span { font-size: 18px; }
  .footer-actions { justify-content: space-between; gap: 16px; }
  .footer-top-label { display: none; }
  .footer-bottom { flex-direction: column; align-items: start; gap: 7px; padding-block: 18px 24px; }
  html { scroll-padding-top: calc(var(--mobile-nav-height) + env(safe-area-inset-top, 0px) + 16px); -webkit-text-size-adjust: 100%; }
  body { font-size: 15px; }
  .wrap { width: calc(100% - 40px); }
  .site-header { position: relative; top: auto; padding-top: env(safe-area-inset-top, 0px); background: #fff; border-bottom: 0; }
  .site-header.is-scrolled { box-shadow: none; }
  .nav { min-height: var(--header-height); flex-wrap: nowrap; }
  .nav-brand { min-height: var(--header-height); padding-block: 10px; }
  .brand-wordmark strong { font-size: 19px; }
  .brand-wordmark > span { font-size: 10px; letter-spacing: .14em; }
  .hamb, .js .hamb, .links, .js .links, .js .links.open { display: none; }
  .mobile-sections { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; column-gap: 4px; width: 100%; margin-inline: auto; padding-inline: 20px; border-block: 1px solid #edf0f6; background: #fffffff5; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  .mobile-sections::before { content: ''; position: absolute; bottom: 100%; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: #fff; }
  .mobile-sections > a { position: relative; display: flex; align-items: center; justify-content: center; min-height: var(--mobile-nav-height); color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
  .mobile-sections > a::after { position: absolute; bottom: -1px; left: 24%; right: 24%; height: 2px; content: ''; background: var(--accent); border-radius: 2px; transform: scaleX(0); transition: transform .18s; }
  .mobile-sections > a[aria-current] { color: var(--accent-dark); font-weight: 650; }
  .mobile-sections > a[aria-current]::after { transform: scaleX(1); }
  .mobile-sections > a:focus-visible { outline-offset: -4px; }
  .mobile-language { position: relative; min-width: 52px; }
  .mobile-language summary { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: var(--mobile-nav-height); padding-inline: 8px; list-style: none; cursor: pointer; color: var(--ink); font-size: 12px; font-weight: 600; }
  .mobile-language summary::-webkit-details-marker { display: none; }
  .mobile-language summary::marker { content: ''; }
  .mobile-language summary:focus-visible { outline-offset: -4px; }
  .mobile-language summary svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; }
  .mobile-language[open] summary svg { transform: rotate(180deg); }
  .mobile-language-options { position: absolute; right: 0; top: calc(100% + 8px); min-width: 132px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: 0 8px 28px #19223614; }
  .mobile-language-options a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 6px; color: var(--muted); font-size: 14px; }
  .mobile-language-options a[aria-current="page"] { color: var(--accent-dark); background: #edf2ff; font-weight: 600; }

  .hero { display: block; min-height: 0; padding-block: 32px 20px; background: var(--paper); }
  .hero::after { content: none; }
  .hero h1 { font-size: clamp(30px, 8.5vw, 43px); line-height: 1.35; letter-spacing: -.045em; }
  .hero h1 > em { display: block; margin-top: 4px; }
  .hero-tagline { margin-top: 16px; font-size: 16px; line-height: 1.6; color: #657186; letter-spacing: .01em; }

  #about { padding-block: 0 var(--section-space); }
  .company-block { scroll-margin-top: 0; }
  .company-body { display: flex; flex-direction: column; align-items: stretch; gap: 36px; }
  #solutions { order: -1; padding: 0; background: none; border-radius: 0; }
  .solution-grid { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; }
  .solution, .solution:first-child, .solution:nth-child(n+3), .solution:last-child { display: block; padding: 20px 0; border: 0; border-top: 1px solid #e8edf4; border-radius: 0; box-shadow: none; }
  .solution:first-child { padding-top: 0; border-top: 0; }
  .solution:last-child { padding-bottom: 0; }
  .company .solution h2 { margin: 0 0 8px; font-size: 17px; }
  .solution p { font-size: 14px; line-height: 1.8; }

  .global { padding-block: var(--section-space); }
  .global-intro { margin-bottom: 24px; }
  .global-intro h2 { max-width: 430px; font-size: 28px; line-height: 1.5; text-wrap: pretty; }
  .global-intro > p { margin-top: 14px; font-size: 14px; line-height: 1.9; }
  .global-map { margin-inline: 0; height: clamp(220px, 64vw, 300px); }
  .global-map img { position: absolute; left: 50%; top: 0; display: block; width: max(100%, min(550px, 150%)); max-width: none; height: auto; transform: translateX(-57%); }

  .jobs { padding-block: var(--section-space); background: var(--paper); overflow-anchor: none; }
  .jobs-intro { padding-bottom: 24px; }
  .jobs-intro .kicker { font-size: 12px; }
  .jobs-intro h2 { margin-block: 10px 14px; font-size: 30px; }
  .jobs-intro > p { font-size: 14px; line-height: 1.9; }
  .jobs-list-head { padding-bottom: 14px; border-bottom: 0; }
  .jobs-list-head h3 { font-size: 15px; }
  .jobs-list-head > span { font-size: 12px; }
  .job-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding-bottom: 16px; }
  .job-filters button { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 8px 3px; border: 1px solid #e0e6f0; border-radius: 8px; background: #fff; color: var(--muted); font-size: 12px; white-space: nowrap; }
  .job-filters button span { font-size: 12px; font-variant-numeric: tabular-nums; }
  .job-filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
  .job-grid { display: grid; gap: 10px; }
  .job { padding-inline: 16px; border: 1px solid #e1e7f1; border-radius: 12px; background: var(--surface); scroll-margin-top: 0; }
  .job:has(details[open]) { border-color: #bcccef; background: var(--card); }
  .job details[open] { background: transparent; }
  .job details[open] .job-body { margin-inline: 0; padding-inline: 0; border-radius: 0; background: none; }
  .job summary { min-height: 96px; gap: 10px; padding-block: 18px; align-items: center; }
  .job-title { font-size: 17px; line-height: 1.55; }
  .job-meta { margin-top: 6px; font-size: 12px; line-height: 1.8; }
  .job-summary { font-size: 14px; line-height: 1.8; margin-top: 10px; }
  .job details:not([open]) .job-summary { display: none; }
  .job-toggle { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 5px; margin-right: -4px; border-radius: 50%; background: #f2f5fa; }
  .job-toggle::after { width: 7px; height: 7px; }
  .job details[open] > summary { border-bottom: 1px solid var(--line); border-radius: 0; }
  .job-body { padding-block: 22px 16px; }
  .job-outline { display: grid; grid-template-columns: repeat(var(--outline-columns, 3), minmax(0, 1fr)); gap: 6px; margin: -4px 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
  .job-outline a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; border: 1px solid #e0e7f3; border-radius: 7px; background: #f6f8fc; color: #4b5d79; font-size: 12px; line-height: 1.7; white-space: nowrap; }
  .job-outline a[aria-current] { border-color: #a8bdf5; color: var(--accent-dark); background: #edf2ff; }
  .job-outline a:focus-visible { outline-offset: 2px; }
  .jd { font-size: 15px; line-height: 1.9; }
  .jd h4 { font-size: 15px; margin-top: 26px; scroll-margin-top: 4px; }
  .jd h4:focus { outline: none; }
  .jd li { margin-bottom: 12px; padding-left: 2px; }
  .jd ol { padding-left: 21px; }
  .job-end { justify-content: flex-end; align-items: center; padding-top: 16px; }
  .close-job { font-size: 13px; padding-inline: 4px; }
  .site-footer { overflow-anchor: none; }
  .footer { padding-block: 32px 0; }
  .footer-links { gap: 20px; }
  .footer-links a { min-height: 44px; font-size: 13px; }
  .footer-bottom { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  a:active, button:active, summary:active { opacity: .72; }
}

@media (max-width: 359px) {
  .wrap { width: calc(100% - 32px); }
  .mobile-sections { padding-inline: 16px; }
  .mobile-sections > a { font-size: 12px; }
  .solution, .solution:first-child, .solution:last-child { padding-inline: 0; column-gap: 12px; }
  .job { padding-inline: 12px; }
  .job-filters { gap: 4px; }
  .job-filters button { gap: 3px; font-size: 12px; }
}

@media (max-width: 767px) and (max-height: 500px) and (orientation: landscape) {
  .hero { padding-block: 26px 16px; }
  .hero-copy { max-width: 100%; }
  .hero h1 { font-size: 30px; }
}