/* ==========================================================================
   Mobile compaction (phones, <=760px). Loaded last.
   Same sections, content and design language as desktop (white tiles, 1px --line
   borders, soft shadows), laid out as compact grids: 16px gutters, 12px gaps,
   tighter vertical rhythm, long lists trimmed to their first items behind
   "Show more", small cards clamped and expandable on tap, no empty full-viewport
   spacers. Behaviour: end of /assets/geek.js (adds html.m-compact and the
   .m-clip / .m-tapcard / .m-acc hooks). Without JS all content stays expanded.
   ========================================================================== */

@media (max-width: 760px) {

  /* ---------- rhythm: section intros ---------- */
  .home-page .section-header { padding: 2.25rem 1rem .9rem; gap: .5rem; }
  .home-page .section-header h2 { font-size: 1.75rem; line-height: 1.15; }
  .home-page .section-header .ss { font-size: .97rem; line-height: 1.55; }

  /* ---------- nav: 44px touch target for the menu button ---------- */
  nav .menu-toggle-btn { padding-top: 14px; padding-bottom: 14px; }

  /* ---------- hero image: whole 16:10 shot instead of a 100svh portrait crop ---------- */
  .home-page .hero-img-holder { height: auto !important; min-height: 0 !important; padding: .5rem 1rem 1rem !important; }
  .home-page .hero-img-holder .hero-img { height: auto !important; aspect-ratio: 16 / 10; border-radius: 14px; }
  .home-page .hero-img-holder .hero-img img { width: 100%; height: 100% !important; object-fit: cover; }

  /* ---------- about: heading beside a small portrait ---------- */
  .home-page .about-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem 1rem !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 2.5rem 1rem 1.5rem !important;
  }
  .home-page .about-hero-header { grid-column: 1; grid-row: 1; order: 0; }
  .home-page .about-hero .about-hero-header h2 { font-size: 2.6rem !important; line-height: .95 !important; }
  .home-page .about-hero .about-portrait { grid-column: 2; grid-row: 1; order: 0; width: 96px; margin: 0 6px 6px 0; }
  .home-page .about-hero .about-portrait::before { inset: 6px -6px -6px 6px; border-radius: 14px; }
  .home-page .about-hero .about-portrait__frame { border-radius: 12px; box-shadow: 0 0 0 3px #fff, 0 12px 24px -12px rgba(11, 27, 51, .45); }
  /* the caption repeats the heading at this size: kept for screen readers only */
  .home-page .about-hero .about-portrait__tag {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .home-page .about-hero-bio { grid-column: 1 / -1; grid-row: 2; gap: 1rem !important; }
  .home-page .about-hero-bio .about-lead { font-size: 1.25rem; line-height: 1.3; }
  .home-page .about-hero-bio .ss { font-size: .94rem; line-height: 1.6; }

  /* ---------- stats: three compact tiles in one row ---------- */
  .home-page .stats { padding: 1.5rem 1rem 1.75rem !important; min-height: 0 !important; }
  .home-page .stats-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; }
  .home-page .stats-header { grid-column: 1 / -1; margin: 0 0 .25rem !important; }
  .home-page .stats-header h2 { font-size: 1.75rem; }
  .home-page .stats-col {
    aspect-ratio: auto !important; min-height: 116px !important; height: auto !important;
    padding: .75rem .6rem !important; gap: .5rem !important; border-radius: 12px; min-width: 0;
  }
  .home-page .stats-col .h1 { font-size: 1.45rem !important; line-height: 1 !important; letter-spacing: -.01em; }
  .home-page .stats-col .mn { font-size: .62rem; line-height: 1.35; letter-spacing: .02em; }

  /* ---------- experience: full-width cards, first two highlights, rest on demand ---------- */
  .home-page .timeline { padding: .5rem 1rem 2.5rem !important; }
  .home-page .timeline .timeline-list { margin: 0 !important; gap: 12px !important; }
  .home-page .timeline .timeline-card { padding: 1rem 1rem .25rem !important; }
  .home-page .timeline .timeline-role { font-size: 1.1rem; }
  .home-page .timeline .timeline-list-items p { font-size: .94rem; line-height: 1.55; }
  html.m-compact .timeline-card.m-clip:not(.is-open) .timeline-context,
  html.m-compact .timeline-card.m-clip:not(.is-open) .timeline-list-items p:nth-child(n + 3) { display: none; }
  html.m-compact .timeline-card.m-clip:not(.is-open) .timeline-list-items p {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }

  /* shared "Show more" button */
  .m-more {
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    width: 100%; min-height: 44px; margin-top: .5rem; padding: 0;
    border: 0; border-top: 1px solid var(--line); background: none; cursor: pointer;
    font: 600 .8rem/1 var(--read, Inter, system-ui, sans-serif); letter-spacing: .01em; color: var(--accent1);
  }
  .m-more::after { content: ""; width: .42em; height: .42em; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
  .is-open > .m-more::after { transform: translateY(2px) rotate(-135deg); }
  .m-more:focus-visible, .m-acc-btn:focus-visible, .m-top:focus-visible, .m-tap:focus-visible { outline: 3px solid var(--accent1); outline-offset: 2px; }

  /* ---------- clients: 3-column hairline logo grid ---------- */
  .home-page .clients { padding: 0 1rem 2rem !important; }
  .home-page .clients .client-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; }
  .home-page .clients .client-item { padding: .85rem .35rem .7rem; gap: .45rem; }
  .home-page .clients .client-mark { height: 36px; }
  .home-page .clients .client-mark img { max-height: 36px; max-width: min(84px, 100%); }
  .home-page .clients .client-mark--wide img { max-height: 22px; }
  .home-page .clients .client-wordmark { font-size: .62rem; letter-spacing: .08em; padding: .45em .5em; }
  .home-page .clients .client-name { font-size: .7rem; line-height: 1.3; }

  /* ---------- products: full-width flagship, then a 2-column grid of tap-to-open cards ---------- */
  .home-page .products { padding: .25rem 1rem 2.5rem !important; }
  .home-page .products-wrap { gap: 12px !important; }
  .home-page .products .prod-row { gap: 12px !important; }
  .products .prod-card { box-shadow: var(--shadow-sm) !important; min-width: 0; }
  .products .prod-feature { grid-template-columns: minmax(0, 1fr) !important; }
  .products .prod-card .prod-body { min-width: 0; }
  .products .prod-media:not([class*="-shots"]) { aspect-ratio: 4 / 3; min-height: 0; }
  .products .prod-card .prod-body, .products .prod-feature .prod-body { padding: .9rem 1rem .25rem !important; gap: .5rem !important; }
  .products .prod-card .prod-title { font-size: 1.35rem !important; line-height: 1.15; }
  .products .prod-card .prod-lede { font-size: .94rem !important; line-height: 1.5; }
  .products .prod-card .prod-list li { font-size: .9rem; line-height: 1.5; }
  .products .prod-card .prod-chips { gap: 6px; }
  .products .prod-card .prod-chips li { font-size: .66rem; }
  .products .prod-card .prod-stats dt { font-size: 1.15rem; }
  html.m-compact .prod-body.m-clip:not(.is-open) .prod-list li:nth-child(n + 3) { display: none; }
  html.m-compact .prod-body.m-clip:not(.is-open) .prod-chips {
    flex-wrap: nowrap !important; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
  html.m-compact .prod-body.m-clip:not(.is-open) .prod-chips li { flex: none; white-space: nowrap !important; }

  /* 2-column product grid: image, kicker, title, clamped lede; an opened card spans both columns */
  .home-page .products .prod-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  html.m-compact .products .prod-row .prod-card:not(.is-open) .prod-media:not([class*="-shots"]) { aspect-ratio: 1 / 1; }
  html.m-compact .products .prod-row .prod-card:not(.is-open) .prod-body { padding: .7rem .75rem 1.9rem !important; gap: .3rem !important; }
  html.m-compact .products .prod-row .prod-card:not(.is-open) .prod-kicker { font-size: .6rem; line-height: 1.3; }
  html.m-compact .products .prod-row .prod-card:not(.is-open) .prod-title { font-size: 1rem !important; line-height: 1.2; }
  html.m-compact .products .prod-row .prod-card:not(.is-open) .prod-ar { display: none; }
  html.m-compact .products .prod-row .prod-card:not(.is-open) .prod-lede {
    font-size: .8rem !important; line-height: 1.45;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  }
  html.m-compact .products .prod-row .prod-card:not(.is-open) :is(.prod-list, .prod-stats, .prod-chips) { display: none !important; }
  html.m-compact .products .prod-row .prod-card.is-open { grid-column: 1 / -1; }
  html.m-compact .products .prod-row .prod-card.is-open .prod-body { padding-bottom: 2.2rem !important; }
  html.m-compact .products .prod-row .prod-card .prod-badge, html.m-compact .products .prod-row .prod-card:not(.is-open) .raseel-toast { display: none; }
  /* chevron sits at the bottom of the card, not over the image */
  .products .prod-card.m-tapcard::after { top: auto; bottom: 16px; right: 15px; width: 8px; height: 8px; border-width: 0 2px 2px 0; }
  .products .prod-card.m-tapcard.is-open::after { transform: translateY(4px) rotate(-135deg); }

  /* agent suite: domain labels + 2-column tiles */
  .products .agents { padding: 1.25rem 1rem 1rem !important; }
  .products .agents-head { margin-bottom: .25rem !important; }
  .products .agents .agents-title { font-size: 1.45rem; }
  .products .agents .agents-lede { font-size: .94rem !important; }
  .products .agents-group { padding: .9rem 0 0 !important; gap: .5rem !important; border-top: 0 !important; }
  .products .agents .agents-domain {
    margin: 0; padding: 0 !important;
    font: 600 .72rem/1.3 var(--read, Inter, system-ui, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  }
  .products .agents .agents-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .products .agents .agent {
    position: relative; display: flex; flex-direction: column; gap: .45rem; min-width: 0;
    padding: .75rem !important; border: 1px solid var(--line) !important; border-radius: 12px;
    background: var(--bg, #F7F9FC);
  }
  .products .agents .agent:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .products .agents .agent-name {
    display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: .55rem; align-items: center;
    font-size: .88rem; line-height: 1.2; padding-right: .6rem;
  }
  .products .agents .agent-mark, .products .agents .agent-mark--img {
    position: static !important; grid-column: 1; grid-row: 1 / span 2;
    width: 36px !important; height: 36px !important; margin: 0 !important; border-radius: 9px;
  }
  .products .agents .agent-ar { grid-column: 2; justify-self: start; text-align: left; font-size: .76rem; line-height: 1.2; }
  .products .agents .agent-desc { font-size: .8rem; line-height: 1.45; margin: 0; }
  html.m-compact .agents .agent.m-tapcard:not(.is-open) .agent-desc {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }

  /* tap-to-expand cards: invisible full-card button + small corner chevron */
  .m-tapcard { position: relative; }
  .m-tap { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; }
  .m-tapcard::after {
    content: ""; position: absolute; top: 14px; right: 13px; width: 6px; height: 6px;
    border: solid var(--accent1); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: .75; pointer-events: none;
  }
  .m-tapcard.is-open::after { transform: translateY(3px) rotate(-135deg); }

  /* ---------- how I deliver ---------- */
  .home-page .deliver { padding: .25rem 1rem 2.5rem !important; }
  .home-page .dl-wrap { gap: 1.75rem !important; }
  .deliver .dl-block-head { margin-bottom: .75rem !important; }
  .deliver .dl-block-title { font-size: 1.15rem; line-height: 1.25; }
  /* stages: compact vertical stepper, details on demand */
  .deliver .dl-steps { gap: 10px !important; }
  .deliver .dl-step { gap: .75rem !important; }
  .deliver .dl-card { padding: .85rem 1rem .1rem !important; }
  .deliver .dl-step-title { font-size: 1.05rem; margin-bottom: .2rem; }
  .deliver .dl-purpose { font-size: .92rem; line-height: 1.45; margin-bottom: .25rem; }
  html.m-compact .dl-card.m-clip:not(.is-open) .dl-bullets,
  html.m-compact .dl-card.m-clip:not(.is-open) .dl-deliv-label,
  html.m-compact .dl-card.m-clip:not(.is-open) .dl-chips { display: none !important; }
  .deliver .dl-card .m-more { margin-top: .4rem; min-height: 40px; justify-content: flex-start; }
  .deliver .dl-card.is-open .m-more { margin-top: .75rem; }
  /* beyond the code: 2-column small cards */
  .deliver .dl-caps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .deliver .dl-cap { padding: .8rem !important; min-width: 0; }
  .deliver .dl-cap .dl-icon { width: 32px; height: 32px; margin-bottom: .5rem; }
  .deliver .dl-cap .dl-cap-title { font-size: .88rem; line-height: 1.25; margin-bottom: .3rem; padding-right: .75rem; }
  .deliver .dl-cap p { font-size: .8rem; line-height: 1.45; }
  html.m-compact .dl-cap.m-tapcard:not(.is-open) p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  /* principles: 2-column grid inside the navy panel */
  .deliver .dl-principles { padding: 1.1rem 1rem 1rem !important; }
  .deliver .dl-principles-title { font-size: 1.15rem; margin-bottom: .75rem; }
  .deliver .dl-prin-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px 12px !important; }
  .deliver .dl-prin-list li { padding-top: .6rem !important; min-width: 0; }
  .deliver .dl-prin-list h4 { font-size: .86rem; line-height: 1.25; padding-right: .75rem; }
  .deliver .dl-prin-list p { font-size: .78rem; line-height: 1.45; }
  html.m-compact .dl-prin-list li.m-tapcard:not(.is-open) p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .dl-prin-list .m-tapcard::after, .dl-prin-list li.m-tapcard::after { border-color: #9DB8F7; top: 16px; right: 2px; }
  /* CTA */
  .deliver .dl-cta { padding: 1.1rem 1rem !important; gap: .9rem !important; }
  .deliver .dl-cta-actions { flex-direction: row !important; gap: 8px; }
  .deliver .dl-cta-actions .dl-btn { flex: 1; min-height: 48px; }

  /* ---------- production stack: 4-up icon tiles, group names as small labels ---------- */
  .home-page .stack { padding: .25rem 1rem 2.5rem !important; }
  .stack .stack-head { margin-bottom: .5rem !important; padding-top: 2.25rem; }
  .stack .stack-head h2 { font-size: 1.75rem; }
  .stack .stack-head .ss { font-size: .97rem; }
  .stack .stack-group { padding: .75rem 0 !important; gap: .5rem !important; }
  .stack .stack-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px !important; }
  .stack .stack-grid li {
    flex-direction: column; justify-content: flex-start; gap: .35rem !important; min-width: 0; min-height: 0;
    padding: .5rem .2rem .45rem !important; border-radius: 10px; text-align: center;
    font-size: .64rem !important; line-height: 1.2; font-weight: 500;
  }
  .stack .stack-grid li i { width: 18px; height: 18px; }
  .stack .stack-grid li span { max-width: 100%; letter-spacing: -.01em; hyphens: auto; }

  /* ---------- technical skills: accordion per area ---------- */
  .home-page .expertise { padding: .25rem 1rem 2.5rem !important; }
  .home-page .expertise .expertise-grid { margin: 0 !important; padding: .25rem 1rem !important; gap: 0 !important; }
  .home-page .expertise .expertise-card { padding: 0 !important; gap: 0 !important; }
  .home-page .expertise .expertise-card + .expertise-card { border-top: 1px solid var(--line); }
  .home-page .expertise .expertise-card h3 { margin: 0; font-size: 1rem; line-height: 1.25; }
  html.m-compact .expertise-card.m-acc:not(.is-open) .pill-list { display: none; }
  .expertise-card.m-acc.is-open .pill-list { padding-bottom: 1rem; }
  .m-acc-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    width: 100%; min-height: 50px; margin: 0; padding: .5rem 0;
    border: 0; background: none; color: inherit; cursor: pointer; text-align: left;
    font: inherit; letter-spacing: inherit; text-transform: inherit;
  }
  .m-acc-btn::after {
    content: ""; flex: none; width: 8px; height: 8px; margin-right: 6px;
    border: solid var(--accent1); border-width: 0 2px 2px 0;
    transform: translateY(-2px) rotate(45deg); transition: transform .2s;
  }
  .m-acc.is-open > * > .m-acc-btn::after { transform: translateY(2px) rotate(-135deg); }

  /* ---------- credentials: education stacked, certifications 2-column ---------- */
  .home-page .creds { padding: 0 1rem 2.5rem !important; }
  .home-page .creds-inner { gap: 1.25rem !important; }
  .creds .creds-group { gap: 10px !important; }
  .creds-edu { gap: 8px !important; }
  .creds-edu .cred { padding: .8rem !important; gap: .8rem !important; }
  .creds .creds-cert { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .creds .creds-cert .cred { flex-direction: column !important; gap: .4rem !important; padding: .65rem .7rem !important; height: 100%; min-width: 0; }
  .creds .creds-cert .cred-logo { width: 2.25rem !important; height: 2.25rem !important; }
  .creds .creds-cert .cred-logo--wide, .creds .creds-cert .cred-logo--pair { width: 3rem !important; }
  .creds .creds-cert .cred-title { font-size: .84rem; line-height: 1.3; }
  .creds .creds-cert .cred-meta { font-size: .74rem; line-height: 1.4; }
  .creds .creds-cert .cred-foot { gap: .35rem .5rem; }
  .creds .creds-cert .cred-tag { font-size: .64rem; }
  .creds .creds-cert .cred-link { font-size: .72rem; }
  .creds .creds-bar { padding: .8rem !important; gap: .6rem !important; }

  /* ---------- after hours ---------- */
  .home-page .afterhours { padding: .25rem 1rem 1rem !important; }

  /* ---------- interactive terminal: command deck + desktop-style terminal window ---------- */
  .home-page .geek-section { padding: 0 1rem 2rem !important; }
  /* every query visible at once: a white card holding a 4 x 2 grid of keys (label + mono command);
     the last query run stays lit in the terminal's navy */
  .geek-section .qr-chips {
    display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
    margin: 0 0 10px !important; padding: 10px;
    background: var(--surface, #fff); border: 1px solid var(--line, #DCE3EE); border-radius: 14px; box-shadow: var(--shadow-sm);
  }
  .geek-section .qr-label {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
    margin: 0 2px 2px !important; text-align: left; font-size: .68rem; letter-spacing: .08em; color: var(--ink-3, #5B6B84);
  }
  .geek-section .qr-label::after { content: "tap to run \21B5"; font-family: supply-mono, monospace; letter-spacing: .02em; text-transform: none; opacity: .8; }
  .geek-section .qr-chip {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .3em;
    min-width: 0; min-height: 56px; padding: .45rem .2rem !important;
    border-radius: 10px; border: 1px solid var(--line, #DCE3EE); background: var(--bg, #F7F9FC); box-shadow: none;
    font-size: .8rem; line-height: 1.1; text-align: center; color: var(--fg);
  }
  .geek-section .qr-chip span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .geek-section .qr-chip code {
    display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 0; background: none; font-size: .6rem; letter-spacing: -.01em; color: var(--accent1);
  }
  .geek-section .qr-chip code::before { content: "\203A"; margin-right: .3em; opacity: .6; }
  .geek-section .qr-chip:hover { transform: none; }
  .geek-section .qr-chip:active { transform: scale(.96); }
  .geek-section .qr-chip.is-current { background: var(--fg); border-color: var(--fg); color: #fff; box-shadow: 0 4px 12px rgba(11, 27, 51, .22); }
  .geek-section .qr-chip.is-current code { color: #7AA2FF; }
  /* narrow phones (iPhone SE): 2 columns so labels and commands are never cut */
  @media (max-width: 374px) {
    .geek-section .qr-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; }
    .geek-section .qr-chip { min-height: 50px; padding: .35rem .5rem !important; font-size: .8rem; }
  }

  /* the window itself reads like the desktop terminal: shell prompt on the input line, small mono text,
     key/value columns, compact title bar and a taller body */
  .geek-section .win { border-radius: 14px; }
  #terminal-app .win-bar { gap: .4em; padding: .55em .7em; }
  #terminal-app .win-dot { width: .6em; height: .6em; }
  #terminal-app .win-title { font-size: .7rem; }
  #terminal-app .term-live { padding: .25em .55em; font-size: .6rem; }
  #terminal-app .term-clear { min-height: 30px; min-width: 0; padding: .3em .6em; font-size: .68rem; }
  .geek-section .win .term-body { height: min(28rem, 60svh); padding: .85em .8em; font-size: .72rem; line-height: 1.55; }
  .geek-section .term-out .t-grid { grid-template-columns: max-content minmax(0, 1fr); gap: .1em .9em; }
  .geek-section .term-out .t-grid > :nth-child(odd) { margin-top: 0; }
  .geek-section .term-out .t-chips .t-run, .geek-section .term-out .t-grid .t-run { min-height: 30px; padding: .15em .5em; }
  .geek-section .term-line { gap: .45em; padding: 0; border: 0; border-radius: .5em; background: none; }
  .geek-section .term-line:focus-within { box-shadow: inset 0 -1px 0 #24406E; }
  .geek-section .term-line .prompt { display: inline; }
  .geek-section .term-line input { font-size: 16px; padding: .35em 0; } /* 16px stops iOS zooming on focus */
  .geek-section .term-line input::placeholder { font-size: .8rem; }
  .geek-section .term-run { min-height: 36px; min-width: 0; padding: .3em .65em; font-size: .7rem; }

  /* ---------- terminal cues: shorter hero link, pill clear of the back-to-top button ---------- */
  /* link sits between the intro and the buttons so the buttons keep covering the hero card's first-paint peek */
  .hero-intro .hero-role { order: 0; }
  .hero-term { order: 1; font-size: .88rem; margin: -.6rem 0 -.35rem; }
  .hero-ctas { order: 2; }
  #terminal-app .win-bar { flex-wrap: nowrap; }
  #terminal-app .win-title { flex: 0 1 auto; min-width: 0; margin-left: .35em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #terminal-app .term-live { flex: none; }
  .hero-term-lead { display: none; }
  .term-nudge { left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 92px); }
  .term-nudge-go { font-size: .74rem; }

  /* ---------- contact CTA ---------- */
  .home-page .contact-cta { height: auto !important; min-height: 0 !important; padding: 1.5rem 1rem 2rem !important; }
  .home-page .contact-cta .contact-button { width: 100% !important; height: auto !important; min-height: 0 !important; padding: 2rem 1.25rem !important; }

  /* ---------- footer: natural height, all four columns in a 2x2 grid ---------- */
  .home-page footer { height: auto !important; min-height: 0 !important; padding: .5rem 1rem 1rem !important; }
  .home-page footer .footer-container { height: auto !important; min-height: 0 !important; padding: 2rem 1.1rem 1.25rem !important; }
  .home-page footer .footer-header { margin-bottom: 1.1rem; }
  .home-page footer .footer-tagline { font-size: .85rem; line-height: 1.5; }
  .home-page footer .footer-header .h1 { font-size: 2rem !important; line-height: .95 !important; }
  .home-page footer .footer-row {
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem !important;
    width: 100%; margin: 0 0 1rem !important;
  }
  .home-page footer .footer-col { display: flex !important; gap: 0 !important; min-width: 0; }
  .home-page footer .footer-col p { font-size: .9rem; overflow-wrap: anywhere; }
  .home-page footer .footer-col p:first-child { margin-bottom: .35rem; }
  .home-page footer .footer-col p:not(:first-child) { min-height: 30px; display: flex; align-items: center; justify-content: center; }
  .home-page footer .footer-col a { display: inline-flex; align-items: center; min-height: 44px; }

  /* ---------- back to top ---------- */
  .m-top {
    position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40;
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: 50%; background: var(--fg); color: #fff; box-shadow: var(--shadow);
    cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .25s, transform .25s;
  }
  .m-top.show { opacity: 1; transform: none; pointer-events: auto; }
  .m-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  body:has(.menu-toggle-btn.menu-open) .m-top { opacity: 0; pointer-events: none; }
}

/* very narrow phones: agent icon above the name so names and Arabic labels do not wrap */
@media (max-width: 380px) {
  .products .agents .agent-name { grid-template-columns: minmax(0, 1fr); row-gap: .15rem; }
  .products .agents .agent-mark, .products .agents .agent-mark--img { grid-row: auto; margin: 0 0 .3rem !important; }
  .products .agents .agent-ar { grid-column: 1; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .m-acc-btn::after, .m-top { transition: none; }
}