/* =========================================================
   mobile.css — May 2026 mobile redesign pass
   Loaded after revisions.css. Scoped to ≤1023.98px so the
   mobile arrangement engages at all narrow viewports
   (phones AND resized desktop windows).
   ========================================================= */

@media (max-width: 1023.98px) {

  /* ---------------------------------------------------------
     1. NAV — left logo, right hamburger only.
     Tapping hamburger expands the topbar pill into a rounded
     panel containing: tab labels, divider, "Join Our Team" CTA,
     then a row with the language toggle + theme toggle.
     --------------------------------------------------------- */

  /* The topbar itself becomes the dropdown when nav-open. */
  .topbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 52px !important;
    padding: 8px 14px !important;
    border-radius: 22px !important;
    align-items: center !important;
    inset-inline: 10px !important;
    top: 10px !important;
  }
  .topbar.is-pinned { top: 6px !important; }

  /* Logo (left) */
  .topbar .brand { flex: 0 0 auto !important; order: 1 !important; }
  .topbar .brand-logo { height: 22px !important; width: auto !important; }

  /* Hamburger — sits at the END of the topbar:
     LTR: pushed to the right; RTL: pushed to the left. */
  .nav-hamburger {
    display: inline-flex !important;
    order: 2 !important;
    margin-left: auto !important;
  }
  [dir="rtl"] .nav-hamburger {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* Hide everything except logo + hamburger when collapsed */
  .topbar .nav-links { display: none !important; }
  .topbar .top-right { display: none !important; }

  /* Expanded panel — everything wraps to its own row inside the
     same fixed topbar. Visually a single dropdown card. */
  body.nav-open .topbar {
    background: var(--bg) !important;
    box-shadow: 0 18px 44px -18px rgba(1,24,33,0.28), 0 2px 8px -2px rgba(1,24,33,0.08) !important;
    padding-bottom: 14px !important;
  }
  body.nav-open .topbar .nav-links {
    /* Override revisions.css mobile rule that fixes nav-links to
       its own floating panel — we want it inline in the topbar so
       the top-right block can stack beneath it. */
    position: static !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 6px 0 0 !important;
    padding: 2px 0 0 !important;
    gap: 2px !important;
  }
  body.nav-open .topbar .nav-link {
    padding: 12px 8px !important;
    font-size: 16px !important;
    min-height: 44px !important;
    color: var(--ink) !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-family: var(--ff-sans) !important;
    letter-spacing: 0 !important;
  }

  /* The top-right block becomes a grid: CTA spans 2 cols, then
     lang + theme share a row. A thin divider sits above. */
  body.nav-open .topbar .top-right {
    display: grid !important;
    order: 4 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas: "cta cta" "lang theme" !important;
    gap: 10px !important;
    padding-top: 14px !important;
    margin-top: 2px !important;
    border-top: 1px solid var(--line) !important;
  }
  body.nav-open .topbar .top-right .nav-cta {
    grid-area: cta !important;
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
  }
  body.nav-open .topbar .top-right .toggle-group {
    grid-area: lang !important;
    width: 100% !important;
    height: 44px !important;
    padding: 3px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
  }
  body.nav-open .topbar .top-right .toggle-group button {
    flex: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    text-align: center !important;
  }
  body.nav-open .topbar .top-right .theme-btn {
    grid-area: theme !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 0 !important;
    border-radius: 999px !important;
    transform: none !important;
  }
  body.nav-open .topbar .top-right .theme-btn:hover,
  body.nav-open .topbar .top-right .theme-btn:focus,
  body.nav-open .topbar .top-right .theme-btn:active { transform: none !important; }
  /* Make the CTA show its full label when in the dropdown,
     overriding the small-screen hide rule. */
  body.nav-open .topbar .top-right .nav-cta span:not(.arrow) { display: inline !important; }

  /* ---------------------------------------------------------
     2. TYPE — section headers LARGER than card titles.
     One section-title size used across every page so the
     visual rhythm is consistent (Landing, Who We Are, What
     We Do, Careers, Portal).
     --------------------------------------------------------- */
  /* Section headers — fluid across all phone widths */
  .display.h-md {
    font-size: clamp(26px, 8.5vw, 38px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.018em !important;
  }
  .display.h-md em { font-size: inherit !important; }

  .edge-card h4,
  .outcome h4,
  .reason h4,
  .value-row h4,
  .office h4 {
    font-size: clamp(20px, 6vw, 26px) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.012em !important;
  }

  .display.h-lg {
    font-size: clamp(26px, 8.5vw, 38px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.018em !important;
  }
  /* Page-top headlines (h-xl + home hero h1) — visually dominant
     scale on mobile, matching the home hero. */
  .display.h-xl,
  #home .hero .hero-h {
    font-size: clamp(32px, 11vw, 48px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.018em !important;
  }
  /* Allow page-head h-xl + home hero h-h .line segments to flow
     inline as one paragraph (matching how .display.h-md
     "Systems We Build and Operate." flows) rather than stacking
     as forced blocks. Overrides .line { display: block } from
     style.css and the .hero-copy/.hero--v2 block rules in
     revisions.css for the mobile breakpoint only. */
  .page-head .h-xl .line,
  #home .hero .hero-h .line,
  #home .hero--v2 .hero-h .line,
  .hero-copy .hero-h .line {
    display: inline !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  #home .hero--v2 .hero-h .line,
  #home .hero .hero-h .line { font-size: inherit !important; }
  .page-head .h-xl .line > span,
  .page-head .h-xl .line > em { font-size: inherit !important; }

  /* Strip out inline `height` overrides that were put on the
     page-head headline spans — they cause inconsistent line
     wrapping between pages. Mobile resets them all to auto. */
  .page-head .h-xl,
  .page-head .h-xl .line,
  .page-head .h-xl .line > span,
  .page-head .h-xl .line > em { height: auto !important; }
  /* (no longer force .page-head .h-xl .line { display: block } —
     it's set to inline above so segments flow as one paragraph.) */

  /* Bolded section heads where the spec calls for it.
     (Disabled — page-head h-xl on Who We Are / What We Do /
     Careers / Portal now render light, matching the landing
     hero's "Advancing the capital markets of tomorrow" title.) */
  /* removed: #about/#systems/#careers/#portal .page-head .h-xl bold rules */
  /* removed: #systems systems-block:not(.alt) h-md and #careers cta-card h-md bold rules */

  /* ---------------------------------------------------------
     3. SECTION RHYTHM — normalize vertical spacing across all
     mobile sections. One vertical unit, no surprises.
     --------------------------------------------------------- */
  .page > section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    margin: 0 !important;
  }
  .page > section.page-head { padding-top: 96px !important; padding-bottom: 32px !important; }
  .page > section:last-of-type { padding-bottom: 56px !important; }
  .page > section .container > * + * { margin-top: 16px; }
  .page > section .container > .display + .lede,
  .page > section .container > .display + p { margin-top: 12px !important; }

  /* Pitch sits visually as part of the home hero block. */
  #home .pitch { padding-top: 32px !important; padding-bottom: 40px !important; }
  #home .pitch-quote {
    font-size: clamp(20px, 6.5vw, 30px) !important;
    line-height: 1.22 !important;
    font-family: 'Unna', Georgia, serif !important;
    margin: 0 !important;
  }
  #home .pitch-body { font-size: 15px !important; line-height: 1.55 !important; margin-top: 16px !important; }

  /* ---------------------------------------------------------
     4. HOME HERO — visual sits BENEATH the body text as an
     inline block (round-2 spec). It is no longer a background.
     --------------------------------------------------------- */
  #home .hero.hero--v2 {
    position: relative !important;
    overflow: visible !important;
    padding-top: 92px !important;
    padding-bottom: 32px !important;
    height: auto !important;
    min-height: 0 !important;
  }
  #home .hero .container.hero-split-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }
  #home .hero .hero-copy {
    grid-column: auto !important;
    grid-row: auto !important;
    padding: 0 !important;
    width: 100% !important;
    order: 1 !important;
  }
  #home .hero .hero-sub--full {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px 0 0 !important;
    font-size: clamp(14px, 4.2vw, 18px) !important;
    line-height: 1.5 !important;
    position: relative !important;
    z-index: 2 !important;
    order: 2 !important;
  }
  /* Stock tape height: half of previous round-2 sizing */
  #home .hero .hero-tape--inline {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
    z-index: 1 !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    margin: 20px 0 0 !important;
    order: 3 !important;
    align-self: stretch !important;
    display: flex !important;
    overflow: hidden !important;
  }
  #home .hero .hero-tape--inline .tape-frame {
    width: 100% !important;
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
    overflow: hidden !important;
  }
  #home .hero .hero-tape--inline::after { display: none !important; content: none !important; }

  /* Stock tape rows — distribute columns evenly across the full
     width of the visual at narrow widths. The default grid +
     right-aligned cells crowds the data toward the middle on
     phones; switch to flex with space-between so each column
     hugs an equal share of the available width. All cells
     center-align so the gap between adjacent cell text is
     uniform end-to-end (no over-large gap before the last
     column from right-anchored numbers). */
  #home .hero .hero-tape--inline .tape-row,
  #home .hero .hero-tape--inline .tape-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 14px !important;
  }
  #home .hero .hero-tape--inline .tape-row > *,
  #home .hero .hero-tape--inline .tape-head > * {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center !important;
  }
  /* Disable the left/right edge fade-out mask on the hero tape
     at narrow widths — it was clipping/blurring the rightmost
     column. Tape stays fully visible end-to-end on phones. */
  #home .hero .hero-tape,
  #home .hero .hero-tape--inline,
  #home .hero .hero-tape .tape-frame,
  #home .hero .hero-tape .tape-body,
  #home .hero .hero-tape--inline .tape-frame,
  #home .hero .hero-tape--inline .tape-body {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* ---------------------------------------------------------
     5. STATS — one row per stat (spec: stacked rows), with
     numbers and labels centered both horizontally and
     vertically inside each box.
     --------------------------------------------------------- */
  .stats .stat-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .stats .stat {
    grid-template-columns: 1fr !important;
    border-inline-end: 0 !important;
    border-block-end: 1px solid var(--line) !important;
    padding: 28px 16px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 120px !important;
  }
  .stats .stat:last-child { border-block-end: 0 !important; }
  .stats .stat .v {
    justify-content: center !important;
    align-items: baseline !important;
    text-align: center !important;
    font-size: 44px !important;
    width: auto !important;
    gap: 2px !important;
  }
  .stats .stat .v .prefix,
  .stats .stat .v .suffix { font-size: 17px !important; }
  .stats .stat .l {
    text-align: center !important;
    width: auto !important;
    max-width: 36ch !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
  .stat-label-v span { font-size: 44px !important; }

  /* ---------------------------------------------------------
     6. CAROUSELS — one card visible, swipe / arrow to advance.
     Activated by [data-mobile-carousel] on the track wrapper.
     Arrows are injected by initMobileCarousel() in index.html.
     --------------------------------------------------------- */
  [data-mobile-carousel] {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 14px !important;
    padding: 4px 0 4px !important;
    margin: 0 !important;
    scrollbar-width: none !important;
    scroll-behavior: smooth !important;
  }
  [data-mobile-carousel]::-webkit-scrollbar { display: none !important; }
  /* Carousel cards must NOT animate vertically when the user
     scrolls sideways via arrow controls. Override the global
     `.appear` fade-up so cards arrive in their final position
     instantly — sideways nav is sideways-only. */
  [data-mobile-carousel] > .appear,
  [data-mobile-carousel] > .appear.delay-1,
  [data-mobile-carousel] > .appear.delay-2,
  [data-mobile-carousel] > .appear.delay-3 {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* Lime "selection" border for the currently centered carousel
     card (added by JS as .is-current) AND when the user taps a
     card. Matches the desktop :hover treatment so phones still
     get visible selection feedback on touch / arrow nav. The
     transition is overridden to a snappier 180ms ease-in-out
     so the highlight fades in responsively rather than slugishly. */
  [data-mobile-carousel] > .edge-card,
  [data-mobile-carousel] > .outcome,
  [data-mobile-carousel] > .reason {
    transition: border-color 0.18s ease-in-out, box-shadow 0.18s ease-in-out, background 0.18s ease-in-out !important;
  }
  [data-mobile-carousel] > .edge-card.is-current,
  [data-mobile-carousel] > .outcome.is-current,
  [data-mobile-carousel] > .reason.is-current,
  [data-mobile-carousel] > .edge-card:active,
  [data-mobile-carousel] > .outcome:active,
  [data-mobile-carousel] > .reason:active,
  [data-mobile-carousel] > .edge-card:focus-visible,
  [data-mobile-carousel] > .outcome:focus-visible,
  [data-mobile-carousel] > .reason:focus-visible {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent), 0 18px 40px -22px color-mix(in srgb, var(--accent) 55%, transparent) !important;
  }
  /* Same lime selection treatment on Core Values rows when
     touched (no carousel — but the spec calls for matching
     "selection" feedback on tap). */
  .values .value-row:active,
  .values .value-row:focus-visible {
    border-color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 6%, transparent) !important;
  }
  [data-mobile-carousel] > * {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: center !important;
    min-height: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  /* Container that wraps a carousel — created by JS — hosts the
     arrows below the strip. */
  .mc-wrap { position: relative; padding-bottom: 60px; }
  .mc-arrows {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .mc-arrow {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    appearance: none;
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
  }
  .mc-arrow:active { transform: scale(0.95); }
  .mc-arrow:disabled { opacity: 0.35; cursor: default; }
  .mc-arrow svg { width: 18px; height: 18px; }
  .mc-count {
    margin-left: 12px;
    font-family: var(--ff-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    color: var(--ink-mute);
    letter-spacing: 0.04em;
  }

  /* Style the carousel cards so they sit nicely as standalone
     full-width pieces (a bit more padding, a clearer card). */
  [data-mobile-carousel] .edge-card,
  [data-mobile-carousel] .outcome,
  [data-mobile-carousel] .reason {
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    padding: 28px 22px !important;
    min-height: 240px !important;
    background: color-mix(in srgb, var(--bg) 92%, transparent) !important;
  }
  [data-mobile-carousel] .edge-card p,
  [data-mobile-carousel] .outcome p,
  [data-mobile-carousel] .reason p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-top: 12px !important;
  }

  /* ---------------------------------------------------------
     7. WHO WE ARE — order in section 2: header, body, visual.
     The .book-grid currently has the visual to one side; on
     mobile we force prose first, then visual.
     --------------------------------------------------------- */
  /* Order book foot: keep all three stats in a single row
     (Spread / Depth / Imbalance). Tighter padding and font
     so they fit across a 390px viewport. */
  .book-section .book-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  .book-section .book-prose { order: 1 !important; }
  .book-section .book { order: 2 !important; max-width: 100% !important; overflow-x: auto !important; }
  .book-section .book-foot {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .book-section .book-foot > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 10px 4px !important;
    min-width: 0 !important;
  }
  .book-section .book-foot .lbl {
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
    width: auto !important;
  }
  .book-section .book-foot .v {
    font-size: 14px !important;
    text-align: center !important;
    width: auto !important;
    white-space: nowrap !important;
  }
  .book-section .book-prose h2 { width: 100% !important; }
  .book-section .book-prose p {
    width: 100% !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  /* Values: clean stacked rows */
  .values .values-list { display: flex !important; flex-direction: column !important; gap: 12px !important; }
  .values .value-row {
    grid-template-columns: 1fr !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    padding: 22px 20px !important;
    gap: 10px !important;
  }
  .values .value-row p { font-size: 15px !important; line-height: 1.55 !important; }

  /* ---------------------------------------------------------
     8. WHAT WE DO — interleave the cone between the two
     prose blocks in the first systems-block (Block 1). The
     research-cols block stays a simple vertical stack.
     --------------------------------------------------------- */
  #systems .systems-block:not(.alt) .systems-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  /* "display: contents" lets the children of .systems-prose be
     treated as direct flex-items of .systems-grid, so we can
     order them around the .arch-diagram sibling. */
  #systems .systems-block:not(.alt) .systems-prose {
    display: contents !important;
  }
  #systems .systems-block:not(.alt) .systems-prose > h3:nth-of-type(1) { order: 1; margin-top: 0 !important; }
  #systems .systems-block:not(.alt) .systems-prose > p:nth-of-type(1)  { order: 2; margin: 0 !important; }
  #systems .systems-block:not(.alt) .arch-diagram                       { order: 3; width: 100% !important; }
  #systems .systems-block:not(.alt) .systems-prose > h3:nth-of-type(2) { order: 4; margin: 8px 0 0 !important; }
  #systems .systems-block:not(.alt) .systems-prose > p:nth-of-type(2)  { order: 5; margin: 0 !important; }

  /* Constrain the cone visual to a sensible mobile height */
  #systems .arch-diagram .techfield {
    width: 100% !important;
    height: 320px !important;
    max-width: 100% !important;
  }
  #systems .systems-block .systems-prose h3 {
    font-size: 22px !important;
    line-height: 1.18 !important;
    letter-spacing: -0.01em !important;
  }
  #systems .systems-block .systems-prose p,
  #systems .systems-block .systems-prose .body-text {
    font-size: 15px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
  }

  /* Block 2 (Research) — stack the two prose columns */
  #systems .systems-block.alt .research-cols {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }

  /* ---------------------------------------------------------
     9. CAREERS — hero CTA below body (half-size, left-aligned),
     CTA card button half-size and centered, offices stacked
     --------------------------------------------------------- */
  #careers .page-head .careers-cta {
    margin-top: 20px !important;
    display: flex !important;
    justify-content: flex-start !important;
  }
  #careers .page-head .careers-cta .btn-primary {
    width: auto !important;
    min-width: 0 !important;
    max-width: 200px !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    font-size: 13px !important;
  }

  .offices .offices-head {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .offices .offices-intro { order: 1 !important; }
  .offices .offices-list { order: 2 !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
  .offices .office {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    padding: 22px 20px !important;
    height: auto !important;
  }
  .offices .office h4 { font-size: 24px !important; margin-bottom: 8px !important; }
  .offices .office p { font-size: 14px !important; line-height: 1.5 !important; }

  /* CTA card — stack title, body, button (button half-size, centered) */
  #careers .cta-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 32px 24px !important;
    gap: 14px !important;
    text-align: center !important;
  }
  #careers .cta-card .display.h-md { font-size: 32px !important; line-height: 1.08 !important; text-align: center !important; }
  #careers .cta-card p { font-size: 15px !important; line-height: 1.55 !important; text-align: center !important; }
  #careers .cta-card .btn-primary {
    width: auto !important;
    min-width: 0 !important;
    max-width: 200px !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    font-size: 13px !important;
    margin-top: 6px !important;
    align-self: center !important;
  }

  /* ---------------------------------------------------------
     10. PORTAL — Filter button to the left of search, modal
     for filter groups. The native sidebar is hidden; modal
     content is the same .portal-filters reused inside a
     dialog. JS in index.html drives open/close.
     --------------------------------------------------------- */
  #portal .portal-toolbar {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  #portal .portal-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    position: static !important;
    width: 100% !important;
  }
  #portal .portal-search-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }
  #portal .portal-search-row .filter-trigger {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 48px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    border: 1px solid var(--line) !important;
    background: var(--bg) !important;
    color: var(--ink) !important;
    font-family: var(--ff-mono, 'JetBrains Mono', monospace) !important;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
  }
  #portal .portal-search-row .filter-trigger.has-active {
    background: var(--ink) !important;
    color: var(--bg) !important;
    border-color: var(--ink) !important;
  }
  #portal .portal-search-row .filter-trigger svg { width: 16px; height: 16px; }
  #portal .portal-search {
    flex: 1 1 auto !important;
    min-height: 48px !important;
    width: auto !important;
  }
  /* Hide the inline filter list — it now lives in the modal */
  #portal .portal-sidebar .portal-filters { display: none !important; }
  /* The portal-sidebar markup just wraps the search now */
  #portal .portal-sidebar .portal-search {
    margin-bottom: 0 !important;
  }
  /* Results stack as full-width rows.
     Spec: text left-aligned, "Apply" button on the right of the
     same row, vertically centered. Single horizontal line. */
  #portal .portal-results { width: 100% !important; }
  #portal .role-card {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "ttl apply" "meta apply" !important;
    align-items: center !important;
    gap: 4px 14px !important;
    padding: 20px !important;
    text-align: left !important;
  }
  #portal .role-card:hover { padding-inline: 20px !important; }
  #portal .role-card .ttl   { grid-area: ttl; font-size: 18px !important; line-height: 1.2 !important; }
  #portal .role-card .meta  { grid-area: meta; flex-wrap: wrap; gap: 8px !important; font-size: 11px !important; }
  #portal .role-card .apply { grid-area: apply; align-self: center; flex-shrink: 0; padding: 10px 16px !important; min-height: 40px !important; }

  /* The filter modal itself */
  .filter-modal[hidden] { display: none !important; }
  .filter-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    flex-direction: column;
    background: var(--bg);
  }
  body.filter-modal-open .filter-modal:not([hidden]) { display: flex; }
  body.filter-modal-open { overflow: hidden; }
  .filter-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
  }
  .filter-modal-head h3 {
    margin: 0;
    font-family: var(--ff-display, 'Unna', Georgia, serif);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .filter-modal-close {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
  }
  .filter-modal-body {
    flex: 0 1 auto;
    overflow-y: auto;
    padding: 4px 20px 8px;
  }
  .filter-modal-body .filter-collapse {
    border-bottom: 1px solid var(--line);
    padding: 10px 0;
  }
  .filter-modal-body .filter-collapse:last-child { border-bottom: 0; }
  .filter-modal-body .filter-collapse summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
    padding: 10px 0;
    font-family: var(--ff-display, 'Unna', Georgia, serif);
    text-transform: none;
    font-size: 22px;
    letter-spacing: -0.01em;
    line-height: 1.1;
    font-weight: 400;
    color: var(--ink);
  }
  .filter-modal-body .filter-collapse summary::-webkit-details-marker { display: none; }
  .filter-modal-body .filter-collapse summary .collapse-icon {
    width: 12px; height: 12px; position: relative;
  }
  .filter-modal-body .filter-collapse summary .collapse-icon::before,
  .filter-modal-body .filter-collapse summary .collapse-icon::after {
    content: "";
    position: absolute;
    background: var(--ink);
    transition: transform 0.2s ease;
  }
  .filter-modal-body .filter-collapse summary .collapse-icon::before {
    left: 0; top: 5px; width: 12px; height: 2px;
  }
  .filter-modal-body .filter-collapse summary .collapse-icon::after {
    left: 5px; top: 0; width: 2px; height: 12px;
  }
  .filter-modal-body .filter-collapse[open] summary .collapse-icon::after { transform: scaleY(0); }
  .filter-modal-body .filter-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0 4px;
  }
  .filter-modal-body .filter-check {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0 !important;
    min-height: 44px !important;
    font-size: 15px;
    color: var(--ink);
    cursor: pointer;
  }
  .filter-modal-body .filter-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex: 0 0 18px !important;
    aspect-ratio: 1 / 1 !important;
    border: 1.5px solid var(--line-2, var(--line));
    border-radius: 50% !important;
    background: var(--bg);
    display: inline-block;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    vertical-align: middle;
    transition: border-color 0.18s ease, background 0.18s ease;
  }
  .filter-modal-body .filter-check input[type="checkbox"]:checked {
    background: var(--accent, #C5F443);
    border-color: var(--accent, #C5F443);
  }
  /* Round-2: filled circle, no inner dot. */
  .filter-modal-body .filter-check input[type="checkbox"]:checked::after { display: none !important; content: none !important; }
  .filter-modal-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: var(--bg);
  }
  .filter-modal-foot button {
    appearance: none;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    border-radius: 999px;
    min-height: 48px;
    font-family: var(--ff-sans);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 0 18px;
  }
  .filter-modal-foot .fm-save {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }
  .filter-modal-foot .fm-clear { color: var(--ink-mute); }

  /* ---------------------------------------------------------
     11. FOOTER — Rebuild from scratch.
     The footer container uses the same 16px horizontal gutter
     as the rest of the site (provided by .container at mobile
     in style.css). Inside that padded area:
        - Logo, left-aligned at the inner left edge
        - Three-column grid that spans the full inner width,
          with three equal 1fr columns and a consistent gap.
     Column 1 starts at the padding edge; Column 3 ends at the
     padding edge. The breathing room from the screen edges
     is created entirely by the container padding, not by
     extra grid space.
     --------------------------------------------------------- */
  .footer {
    padding: 32px 0 !important;
    height: auto !important;
    min-height: 220px !important;
    display: flex !important;
    align-items: center !important;
  }
  .footer > .container {
    padding-left: 40px !important;
    padding-right: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: 100% !important;
  }
  .footer .footer-grid {
    display: block !important;
    width: 100% !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    height: auto !important;
    text-align: left !important;
  }
  /* Hide the default desktop footer items on mobile —
     .footer-mobile takes over. */
  .footer .footer-brand,
  .footer .footer-nav,
  .footer .footer-follow,
  .footer .footer-bottom { display: none !important; }

  .footer-mobile {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }
  .footer-mobile-brand {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 0 22px 0 !important;
  }
  .footer-mobile-brand .brand-logo {
    height: 26px !important;
    width: auto !important;
  }

  /* Three equal columns spanning the full inner width — each
     col takes roughly one-third of the available width. The
     entire footer block sits with symmetric 20px padding so
     no content touches the viewport edges. */
  .footer-mobile-cols {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    column-gap: 18px !important;
    row-gap: 0 !important;
    align-items: center !important;
    justify-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .footer-mobile-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-width: 0 !important;
    width: 100% !important;
    align-items: flex-start !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Middle column — text horizontally centered within its cell
     so "What We Do" / "Careers" sit centered between the
     left text column and the right icon column. Left column
     stays flex-start; right (icons) stays flex-end. */
  .footer-mobile-cols > .footer-mobile-col:nth-child(2) {
    align-items: center !important;
    text-align: center !important;
  }
  .footer-mobile-cols > .footer-mobile-col:nth-child(2) a {
    text-align: center !important;
    justify-content: center !important;
  }
  [dir="rtl"] .footer-mobile-col { align-items: flex-end !important; }

  /* Row items use the same height + gap across all three
     columns so Row 1 and Row 2 share exact horizontal baselines.
     Tab labels and social buttons are both 36px tall. */
  .footer-mobile-col a {
    color: var(--ink-2) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    height: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: color 0.25s ease !important;
  }
  .footer-mobile-col a:hover { color: var(--accent-2) !important; }

  /* Social column — LinkedIn on top, Email below.
     Right-aligned inside its own column so the icons' right
     edge sits at the container's right padding boundary,
     mirroring how the "Home" column's left edge sits at the
     container's left padding boundary. Result: the rendered
     icons sit the same distance from the viewport's right
     edge as the logo / Home text sit from the viewport's
     left edge. */
  .footer-mobile-social {
    align-items: flex-end !important;
  }
  [dir="rtl"] .footer-mobile-social {
    align-items: flex-start !important;
  }
  .footer-mobile-social a {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--ink) !important;
    background: var(--bg) !important;
    transition: transform 0.3s ease, border-color 0.25s ease, color 0.25s ease, background 0.25s ease !important;
    gap: 0 !important;
  }
  .footer-mobile-social a:hover {
    transform: translateY(-2px) !important;
    border-color: var(--ink) !important;
    background: var(--ink) !important;
    color: var(--bg) !important;
  }
  .footer-mobile-social a svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    color: currentColor !important;
  }

  /* ---------------------------------------------------------
     12. Misc polish at phone size
     --------------------------------------------------------- */
  .lede { font-size: 15px !important; line-height: 1.55 !important; }
  .btn-primary { min-height: 48px !important; padding: 0 22px !important; }
  .section-bordered { border-color: var(--line) !important; }

  /* Theme button must not rotate on tap — touch devices fire
     :hover on tap which makes the icon visibly tilt. Override
     the desktop hover transform. */
  .theme-btn,
  .theme-btn:hover,
  .theme-btn:active,
  .theme-btn:focus { transform: none !important; }

  .page-head .lede { margin-top: 14px !important; max-width: 100% !important; }
  #systems .systems-block .systems-prose { height: auto !important; width: 100% !important; }
}

/* Very narrow phones — book section needs different layout.
   Allow horizontal scroll on the order book for narrow phones
   rather than hiding it (spec requires the visual to render). */
@media (max-width: 479.98px) {
  .book-section .book { display: block !important; }
  .book-section .book .book-main { min-width: 0 !important; }
  .book-section .book .book-l2 { font-size: 11px !important; }
  .book-section .book-prose { margin-bottom: 0 !important; }
}

/* ---------------------------------------------------------
   DESKTOP — filter trigger button and modal are mobile-only.
   Always hidden at ≥1024px so the inline sidebar filters
   remain the desktop experience. The mobile-only footer block
   is also desktop-hidden.
   --------------------------------------------------------- */
@media (min-width: 1024px) {
  .filter-trigger { display: none !important; }
  .filter-modal { display: none !important; }
  .portal-search-row {
    display: contents;
  }
  .footer-mobile { display: none !important; }
}