/* HumTum V89 — mobile editorial layout, no changes to desktop widths.
   V88 remains the base. This file must load LAST on every public page. */
@media (max-width: 700px) {
  :root { --ht-mobile-gutter: 20px; }
  html { scroll-padding-top: 82px; }
  html, body { max-width: 100%; overflow-x: clip; }

  /* One persistent, integrated header. Never float a large menu square over work. */
  html body header.site-header,
  html body header.ht-header {
    position: sticky !important; top: 0 !important; z-index: 10000 !important;
    min-height: 72px !important; background: rgba(8,9,10,.97) !important;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  html body header.site-header .header-inner,
  html body header.ht-header .ht-inner {
    height: 72px !important; min-height: 72px !important;
    padding-inline: 16px !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1.35fr) 44px !important;
    column-gap: 8px !important;
  }
  html body header.site-header .header-inner > .header-menu-wrap,
  html body header.ht-header .ht-inner > .ht-wrap,
  html body.v80-has-scrolled header.site-header .header-inner > .header-menu-wrap {
    position: relative !important; top: auto !important; right: auto !important;
    left: auto !important; bottom: auto !important; z-index: 10001 !important;
    background: transparent !important; box-shadow: none !important;
    border: 0 !important; padding: 0 !important; margin: 0 !important;
    border-radius: 0 !important; isolation: auto !important;
  }
  html body header.site-header .header-menu-wrap:focus-within,
  html body header.site-header .header-menu-wrap.is-open,
  html body.v80-has-scrolled header.site-header .header-menu-wrap {
    background: transparent !important; box-shadow: none !important; border: 0 !important;
  }
  html body header.site-header .menu-toggle,
  html body header.ht-header .ht-toggle {
    width: 44px !important; height: 44px !important;
    min-width: 44px !important; min-height: 44px !important;
    padding: 7px !important; margin: 0 !important;
    background: transparent !important; border: 0 !important; border-radius: 0 !important;
  }
  html body header.site-header .menu-glyph i,
  html body header.ht-header .ht-lines i { width: 26px !important; height: 2px !important; }
  html body header.site-header .header-menu-wrap > .nav,
  html body header.ht-header .ht-wrap > .ht-nav {
    position: absolute !important; top: calc(100% + 14px) !important;
    right: -4px !important; left: auto !important;
    width: min(330px, calc(100vw - 32px)) !important;
    max-height: calc(100dvh - 90px) !important;
    border-radius: 3px !important; z-index: 10002 !important;
  }
  html body header.site-header .wordmark { font-size: clamp(25px, 7vw, 31px) !important; }
  html body header.site-header .header-center {
    font-size: clamp(9px, 2.35vw, 11px) !important;
    line-height: 1.15 !important; white-space: normal !important;
    text-wrap: balance; letter-spacing: .025em !important;
  }
  html body .v27-quick-nav { display: none !important; }

  /* Homepage: clear headline, then the full uncropped reel, never native controls over type. */
  html body main > section.hero {
    display: flex !important; flex-direction: column !important;
    justify-content: flex-start !important;
    aspect-ratio: auto !important; height: auto !important;
    min-height: 0 !important; max-height: none !important;
    overflow: hidden !important; padding: 0 !important;
    background: #08090a !important;
  }
  html body main > section.hero > .hero-content {
    order: 0 !important; width: 100% !important; max-width: 100% !important;
    position: relative !important; z-index: 1 !important;
    padding: 36px var(--ht-mobile-gutter) 28px !important;
    margin: 0 !important;
  }
  html body main > section.hero .hero-eyebrow {
    font-size: 10px !important; letter-spacing: .11em !important;
    line-height: 1.5 !important; margin-bottom: 20px !important;
  }
  html body main > section.hero h1 {
    font-size: clamp(40px, 10.4vw, 52px) !important;
    line-height: 1.03 !important; letter-spacing: -.055em !important;
    max-width: 100% !important; margin: 0 0 18px !important;
    text-wrap: balance;
  }
  html body main > section.hero .hero-sub {
    font-size: clamp(15px, 4vw, 17px) !important;
    line-height: 1.48 !important; max-width: 32ch !important;
    margin: 0 !important;
  }
  html body main > section.hero .hero-actions {
    display: flex !important; flex-wrap: wrap !important;
    gap: 10px 20px !important; margin: 20px 0 0 !important;
  }
  html body main > section.hero .hero-actions .round-link {
    min-height: 36px !important; font-size: 11px !important;
    letter-spacing: .08em !important; gap: 8px !important;
  }
  html body main > section.hero > .hero-media {
    order: 1 !important; position: relative !important;
    inset: auto !important; z-index: 0 !important;
    width: 100% !important; height: auto !important;
    aspect-ratio: 3840 / 1644 !important; overflow: hidden !important;
    background: #08090a url('../images/showreel-poster.webp') center / contain no-repeat !important;
    border: 0 !important; margin: 0 !important;
  }
  html body main > section.hero > .hero-media::after { display: none !important; }
  html body main > section.hero > .hero-media > #hero-video {
    display: block !important; position: absolute !important;
    inset: 0 !important; width: 100% !important; height: 100% !important;
    max-width: 100% !important; object-fit: contain !important;
    object-position: center !important; opacity: 1 !important;
    filter: none !important; pointer-events: none !important;
  }
  html body main > section.hero .v27-scroll-strip {
    position: relative !important; order: 2 !important;
    left: auto !important; right: auto !important; bottom: auto !important;
    min-height: 42px !important; background: transparent !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  html body .hero-foot { padding-block: 18px !important; }

  /* Restore editorial rhythm across the homepage and secondary pages. */
  html body main .section-pad,
  html body main .v27-clients,
  html body main .v11-client-actions {
    padding-top: 58px !important; padding-bottom: 58px !important;
  }
  html body main .shell { padding-left: var(--ht-mobile-gutter) !important;
                           padding-right: var(--ht-mobile-gutter) !important; }
  html body main .section-top { margin-bottom: 28px !important; }
  html body main .section-head { margin-bottom: 24px !important; }
  html body main :is(.capabilities-layout,.models-heading,.estimate-grid) {
    gap: 26px !important;
  }
  html body main .capabilities-lead h2 {
    font-size: clamp(35px, 9vw, 45px) !important;
    line-height: 1.12 !important; margin: 0 0 22px !important;
  }
  html body main .capabilities-lead p {
    font-size: 16px !important; line-height: 1.55 !important;
    margin: 0 0 18px !important;
  }
  html body main .capabilities-lead .inline-link {
    margin: 8px 0 12px !important; min-height: 38px !important;
  }
  html body main .capabilities-list { margin: 6px 0 0 !important; }
  html body main .capability {
    display: grid !important; grid-template-columns: 28px minmax(0,1fr) 24px !important;
    align-items: center !important; column-gap: 10px !important;
    padding: 20px 0 !important; min-height: 66px !important;
    font-size: clamp(15px, 4vw, 17px) !important;
    line-height: 1.35 !important;
  }
  html body main .capability .cap-num { font-size: 12px !important; }
  html body main .work-grid { grid-template-columns: minmax(0,1fr) !important;
                              gap: 34px !important; }
  html body main .project-meta { padding-top: 14px !important; gap: 10px !important; }
  html body main .project-meta h3 {
    font-size: clamp(21px, 5.6vw, 25px) !important;
    line-height: 1.2 !important; margin: 0 0 7px !important;
  }
  html body main .project-meta p {
    font-size: 13px !important; line-height: 1.45 !important;
    margin: 0 !important;
  }
  html body .v22-compare .v22-label.left { left: 11px !important; }
  html body .v22-compare .v22-label.right { right: 11px !important; }
  html body main .models-heading h2,
  html body main .section-head h2,
  html body main .estimate h2,
  html body main .approach h2 {
    font-size: clamp(35px, 9vw, 46px) !important;
    line-height: 1.12 !important;
  }
  html body main .contact-inner { padding-block: 65px !important; }
  html body main .contact h2 { font-size: clamp(38px, 10vw, 52px) !important; }
  html body main .approach h2 { margin: 18px 0 26px !important; }
  html body main .approach-grid { gap: 26px !important; }
  html body main .approach-grid h3 { margin-top: 16px !important; }
  html body main .v11-client-actions { padding-inline: var(--ht-mobile-gutter) !important; }
  html body main :is(.v20-work-wrap,.v9-wrap,.v22-wrap) { max-width: 100% !important; }
  html body main :is(.v54-case-gallery,.v59-media-row,.ht-image-gallery) {
    grid-template-columns: minmax(0,1fr) !important; gap: 20px !important;
  }
  html body main .ht-managed-case :is(.v22-compare,figure,img,video) { max-width: 100% !important; }
}

/* V90: Preserve the exact desktop icon glyphs, geometry and styling on phones.
   This only asks mobile browsers to render existing arrows as text, not emoji.
   No SVG replacements, no new icon shapes, no altered dimensions. */
@media (max-width: 700px) {
  html body :is(.v22-handle, .project-icon, .cap-arrow, .circle-arrow, .v9-circle,
                .inline-link > span:last-child, .contact-link > span:last-child) {
    font-family: Arial, Helvetica, sans-serif !important;
    font-variant-emoji: text !important;
  }
}