/* almano.media header navigation (2026-10), loaded by almano-header-nav.php.
   Desktop (992px and up): hovering or clicking "Services" opens one full-width dark glass panel under the header.
   Phones and tablets (991px and down): the burger opens a full-screen dark glass menu; Services has its own screen.
   Everything is scoped to .alm-hnav-* classes; the theme header markup is untouched. */
:root {
  --alm-hnav-glass: rgba(22, 22, 24, .78);
  --alm-hnav-sheet-solid: #111113;
  --alm-hnav-text: #F5F5F7;
  --alm-hnav-muted: #A1A1A6;
  --alm-hnav-line: rgba(255, 255, 255, .12);
  --alm-hnav-tile: rgba(255, 255, 255, .08);
  --alm-hnav-yellow: #F8C757;
  --alm-hnav-yellow-hover: #F5BD3E;
  --alm-hnav-ink: #111111;
  --alm-hnav-focus: #6FB2FF;
  --alm-hnav-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --alm-hnav-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --alm-hnav-ease: cubic-bezier(.32, .72, 0, 1);
}

.alm-hnav-panel svg.alm-i, .alm-hnav-sheet svg.alm-i, .alm-hnav-chev {
  width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.alm-hnav-panel a, .alm-hnav-sheet a { text-decoration: none !important; box-shadow: none; }
.alm-hnav-panel :focus-visible, .alm-hnav-sheet :focus-visible, .alm-burger:focus-visible, .alm-hnav-trigger:focus-visible {
  outline: 2px solid var(--alm-hnav-focus); outline-offset: 3px; border-radius: 6px;
}

/* ---------- desktop: "Services" trigger ---------- */
.alm-hnav-trigger { display: inline-flex !important; align-items: center; gap: 6px; }
.alm-hnav-chev { width: 14px; height: 14px; stroke-width: 2; transition: transform .25s ease; }
.alm-hnav-trigger[aria-expanded="true"] .alm-hnav-chev { transform: rotate(180deg); }

/* header and panel read as one dark sheet while the panel is open (also on light pages and the clear home header;
   #masthead#masthead outranks the global body.home #masthead rules) */
html.alm-hnav-open body #masthead#masthead {
  background: rgba(20, 20, 22, .94) !important; background-color: rgba(20, 20, 22, .94) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-bottom-color: transparent !important; box-shadow: none !important;
}
html.alm-hnav-open body #masthead .site-branding .logo img { filter: brightness(0) invert(1); }
html.alm-hnav-open body #masthead #mega-menu-wrap ul#secondary-menu li:not(.header-nav-cta):not(.header-social-link) a,
html.alm-hnav-open body #masthead #mega-menu-wrap ul#secondary-menu li.header-social-link a { color: #fff !important; }
html.alm-hnav-open body #masthead #mega-menu-wrap ul#secondary-menu li:not(.header-nav-cta):not(.header-social-link) a:hover,
html.alm-hnav-open body #masthead #mega-menu-wrap ul#secondary-menu li:not(.header-nav-cta):not(.header-social-link) a.alm-hnav-trigger[aria-expanded="true"],
html.alm-hnav-open body #masthead #mega-menu-wrap ul#secondary-menu li.header-social-link a:hover { color: var(--alm-hnav-yellow) !important; }

/* dark-hero pages (white-text header): as soon as the page moves the header gets the same dark glass as the
   scrolled home header, so text never slides under a see-through header. Open menus keep their own look. */
html.alm-hnav-scrolled:not(.alm-hnav-open):not(.alm-hnav-sheet-open) body #masthead#masthead.light-text {
  background: rgba(17, 17, 17, .94) !important; background-color: rgba(17, 17, 17, .94) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important; backdrop-filter: blur(14px) saturate(140%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .1) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, .35) !important;
}

/* page dims and blurs behind the open panel */
.alm-hnav-scrim {
  position: fixed; inset: 0; z-index: 99990; background: rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
html.alm-hnav-open .alm-hnav-scrim { opacity: 1; pointer-events: auto; }

/* ---------- desktop: the glass panel ---------- */
.alm-hnav-panel {
  position: fixed; z-index: 99998; left: 0; right: 0; top: 68px;
  background: var(--alm-hnav-glass); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid var(--alm-hnav-line); color: var(--alm-hnav-text);
  font: 400 16px/1.6 var(--alm-hnav-body); -webkit-font-smoothing: antialiased;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
html.alm-hnav-open .alm-hnav-panel.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .22s ease, visibility 0s; }
.alm-hnav-panel-in {
  box-sizing: border-box; width: min(1240px, 100%); margin-inline: auto;
  padding: 32px clamp(20px, 5vw, 80px) 38px;
  display: grid; grid-template-columns: repeat(var(--alm-hnav-cols, 2), minmax(0, 1fr)); gap: 40px;
}
.alm-hnav-col { min-width: 0; }
.alm-hnav-col + .alm-hnav-col { border-left: 1px solid var(--alm-hnav-line); padding-left: 32px; }
.alm-hnav-kicker { display: block; font: 600 11px/1 var(--alm-hnav-display); letter-spacing: 1.6px; text-transform: uppercase; color: var(--alm-hnav-muted); }
.alm-hnav-list { display: grid; gap: 2px; margin-top: 14px; }
.alm-hnav-svc {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px; align-items: start; gap: 14px;
  padding: 11px 12px; margin-inline: -12px; border-radius: 14px; color: var(--alm-hnav-text) !important; transition: background-color .2s ease;
}
.alm-hnav-svc:active { background: rgba(255, 255, 255, .07); }
.alm-hnav-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--alm-hnav-tile); color: var(--alm-hnav-yellow); }
.alm-hnav-name { display: block; font: 600 20px/1.2 var(--alm-hnav-display); letter-spacing: -.3px; color: var(--alm-hnav-text); }
.alm-hnav-desc { display: block; margin-top: 3px; font: 400 14px/1.4 var(--alm-hnav-body); color: var(--alm-hnav-muted); }
.alm-hnav-go { align-self: center; width: 18px !important; height: 18px !important; color: var(--alm-hnav-yellow); opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease; }
.alm-hnav-svc:focus-visible .alm-hnav-go { opacity: 1; transform: none; }
.alm-hnav-list > * { opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease, background-color .2s ease; }
.alm-hnav-panel.is-open .alm-hnav-list > * { opacity: 1; transform: none; }
.alm-hnav-panel.is-open .alm-hnav-list > *:nth-child(2) { transition-delay: .03s; }
.alm-hnav-panel.is-open .alm-hnav-list > *:nth-child(3) { transition-delay: .06s; }
.alm-hnav-panel.is-open .alm-hnav-list > *:nth-child(4) { transition-delay: .09s; }
/* a dropdown with one group (Apps, Education): its entries sit side by side, at most 3, each at most 560px wide */
.alm-hnav-panel-in.is-single .alm-hnav-list { grid-template-columns: repeat(var(--alm-hnav-items, 1), minmax(0, 560px)); column-gap: 40px; row-gap: 2px; }
/* "Coming soon" pill after a name, and the extra small line under an entry (menu item Title Attribute) */
.alm-hnav-pill { display: inline-block; margin-left: 2px; padding: 4px 8px 3px; border-radius: 999px; background: rgba(248, 199, 87, .16); color: var(--alm-hnav-yellow); font: 600 10.5px/1 var(--alm-hnav-display); letter-spacing: .6px; text-transform: uppercase; vertical-align: 3px; white-space: nowrap; }
.alm-hnav-meta { display: block; margin-top: 5px; font: 600 12px/1.35 var(--alm-hnav-body); color: var(--alm-hnav-text); opacity: .8; }
@media (max-width: 991px) { .alm-hnav-panel, .alm-hnav-scrim { display: none !important; } }

/* ---------- phones and tablets: new burger in the old burger's place ---------- */
.alm-burger { display: none; }
@media (max-width: 991px) {
  html.alm-hnav #masthead #hamburger-menu { display: none !important; }
  .alm-burger {
    display: grid; place-items: center; width: 44px; height: 44px; margin: 0 -12px 0 auto; padding: 0;
    border: 0; border-radius: 12px; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .alm-burger span { position: relative; display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: background-color .2s ease; }
  .alm-burger span::before, .alm-burger span::after {
    content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--alm-hnav-ease);
  }
  .alm-burger span::before { top: -7px; }
  .alm-burger span::after { top: 7px; }
  html.alm-hnav-sheet-open .alm-burger span { background: transparent; }
  html.alm-hnav-sheet-open .alm-burger span::before { transform: translateY(7px) rotate(45deg); }
  html.alm-hnav-sheet-open .alm-burger span::after { transform: translateY(-7px) rotate(-45deg); }

  /* while the menu is open the header is part of the glass sheet: clear background, white logo and X */
  html.alm-hnav-sheet-open body #masthead#masthead {
    background: transparent !important; background-color: transparent !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border-bottom-color: transparent !important; box-shadow: none !important; color: #fff !important;
  }
  html.alm-hnav-sheet-open body #masthead .site-branding .logo img { filter: brightness(0) invert(1); }
  html.alm-hnav-sheet-open body #masthead .alm-burger { color: #fff; }
  html.alm-hnav-sheet-open, html.alm-hnav-sheet-open body { overflow: hidden !important; }
  /* the theme's search icon (tablets) is not part of the open menu */
  html.alm-hnav-sheet-open body #masthead .menu-other { visibility: hidden; }
  /* iPhones can draw a playing page video on top of the open menu and the header: page videos are hidden
     (and paused by the script) while the menu is open; they show and play again when it closes */
  html.alm-hnav-sheet-open video { visibility: hidden !important; }
}
/* the same guard for the desktop panel on touch screens (iPad) */
@media (min-width: 992px) and (hover: none) {
  html.alm-hnav-open video { visibility: hidden !important; }
}

/* ---------- phones and tablets: the full-screen glass sheet ---------- */
.alm-hnav-sheet {
  position: fixed; inset: 0; z-index: 99998; display: flex; flex-direction: column; padding-top: 60px; box-sizing: border-box;
  /* solid dark, no blur: on iPhones a blurred layer over the fixed home video (and animated content inside it)
     let the video draw over the menu and header; at this darkness the blur was hardly visible anyway */
  background: var(--alm-hnav-sheet-solid); -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--alm-hnav-text); font: 400 16px/1.6 var(--alm-hnav-body); -webkit-font-smoothing: antialiased; text-align: left;
  opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility 0s linear .28s;
}
.alm-hnav-sheet *, .alm-hnav-panel * { box-sizing: border-box; }
html.alm-hnav-sheet-open .alm-hnav-sheet { opacity: 1; visibility: visible; transition: opacity .28s ease, visibility 0s; }
@media (min-width: 992px) { .alm-hnav-sheet { display: none !important; } }
.alm-hnav-screens { position: relative; flex: 1; min-height: 0; overflow: hidden; width: 100%; max-width: 560px; margin-inline: auto; }
.alm-hnav-screen {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; padding: 6px max(20px, env(safe-area-inset-right, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
}
.alm-hnav-screen::-webkit-scrollbar { display: none; }
/* menu ⇄ Services: a quick cross-fade (no sliding; moving layers inside the menu upset iPhones) */
.alm-hnav-main { transition: opacity .2s ease, visibility 0s; }
html.alm-hnav-sub-on .alm-hnav-main { opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility 0s linear .2s; }
.alm-hnav-sub { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.alm-hnav-sub.is-on { opacity: 1; visibility: visible; transition: opacity .22s ease .05s, visibility 0s; }

/* main screen: one row per page, icon + name + one short line */
.alm-hnav-rows { list-style: none !important; margin: 0 -10px !important; padding: 0 !important; }
.alm-hnav-rows li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.alm-hnav-row {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  width: 100%; min-height: 66px; margin: 0; padding: 10px; border: 0; border-radius: 16px; background: none;
  color: #fff !important; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s ease;
}
.alm-hnav-rows li + li .alm-hnav-row::before { content: ""; position: absolute; top: 0; left: 64px; right: 10px; height: 1px; background: var(--alm-hnav-line); }
.alm-hnav-row:active { background: rgba(255, 255, 255, .07); }
.alm-hnav-tile { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--alm-hnav-tile); color: #fff; }
.alm-hnav-tile svg.alm-i { width: 21px; height: 21px; }
.alm-hnav-txt { min-width: 0; }
.alm-hnav-txt b { display: block; font: 600 20px/1.2 var(--alm-hnav-display); letter-spacing: -.3px; color: #fff; }
.alm-hnav-txt > span { display: block; margin-top: 2px; font: 400 14px/1.35 var(--alm-hnav-body); color: var(--alm-hnav-muted); }
.alm-hnav-more { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--alm-hnav-tile); color: #fff; }
.alm-hnav-more svg.alm-i { width: 16px; height: 16px; stroke-width: 2; }
.alm-hnav-row[aria-current="page"] .alm-hnav-tile { background: rgba(248, 199, 87, .16); color: var(--alm-hnav-yellow); }
.alm-hnav-row[aria-current="page"] b::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 9px; border-radius: 50%;
  background: var(--alm-hnav-yellow); vertical-align: middle; transform: translateY(-2px);
}
/* owner: the yellow button sits right under Contact (not at the screen bottom) */
.alm-hnav-foot { padding-top: 20px; display: grid; gap: 10px; }
/* "Start a project" is the site's own header button (Poppins 600, capitals, 4px corners), full width;
   on phones a little larger than the desktop 13.5px (owner) */
.alm-hnav-cta {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 20px; border-radius: 4px;
  background: var(--alm-hnav-yellow); color: var(--alm-hnav-ink) !important; font: 600 15.5px/1 var(--alm-hnav-display);
  letter-spacing: .3px; text-transform: uppercase; -webkit-tap-highlight-color: transparent; transition: background-color .2s ease;
}
.alm-hnav-cta:active { background: var(--alm-hnav-yellow-hover); }
.alm-hnav-row:focus-visible, .alm-hnav-srow:focus-visible, .alm-hnav-back:focus-visible { outline-offset: -2px; border-radius: 14px; }

/* services screen: back button, the same groups as desktop, then "See all services" */
.alm-hnav-back {
  display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: 0 0 0 -8px; padding: 0 14px 0 4px;
  border: 0; border-radius: 12px; background: none; color: var(--alm-hnav-yellow); font: 500 17px/1 var(--alm-hnav-body);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.alm-hnav-back svg.alm-i { width: 24px; height: 24px; stroke-width: 2; }
.alm-hnav-title { margin: 2px 0 0 !important; padding: 0 !important; font: 600 30px/1.1 var(--alm-hnav-display) !important; letter-spacing: -.6px; color: #fff !important; text-transform: none !important; }
.alm-hnav-sub .alm-hnav-kicker { margin: 20px 0 4px; font-size: 12px; }
.alm-hnav-slist { display: grid; margin: 0 -10px; }
.alm-hnav-srow {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 60px;
  padding: 9px 10px; border-radius: 14px; color: #fff !important; -webkit-tap-highlight-color: transparent; transition: background-color .2s ease;
}
.alm-hnav-srow:active { background: rgba(255, 255, 255, .07); }
.alm-hnav-srow .alm-hnav-ico { width: 40px; height: 40px; }
.alm-hnav-srow b { display: block; font: 600 17px/1.2 var(--alm-hnav-display); letter-spacing: -.2px; color: #fff; }
.alm-hnav-srow .alm-hnav-desc { display: block; margin-top: 2px; font: 400 13px/1.35 var(--alm-hnav-body); color: var(--alm-hnav-muted); }
.alm-hnav-srow .alm-hnav-meta { font-size: 11.5px; }
/* phones: the icon stays at the top of long entries */
.alm-hnav-srow { align-items: start; }
.alm-hnav-srow .alm-hnav-ico { margin-top: 1px; }
/* "See all services" is the site's outline button (hero "See our work") */
.alm-hnav-all {
  display: flex; align-items: center; justify-content: center; flex: none; min-height: 48px; margin-top: 18px;
  border: 1.5px solid #fff; border-radius: 4px; color: #fff !important; font: 600 15px/1 var(--alm-hnav-display);
  -webkit-tap-highlight-color: transparent; transition: background-color .2s ease;
}
.alm-hnav-all:active { background: rgba(255, 255, 255, .08); }

/* hover looks only for a real mouse: on phones and tablets a tapped row would otherwise stay lit */
@media (hover: hover) and (pointer: fine) {
  .alm-hnav-svc:hover, .alm-hnav-row:hover, .alm-hnav-srow:hover { background: rgba(255, 255, 255, .07); }
  .alm-hnav-svc:hover .alm-hnav-go { opacity: 1; transform: none; }
  .alm-hnav-cta:hover { background: var(--alm-hnav-yellow-hover); }
  .alm-hnav-all:hover { background: rgba(255, 255, 255, .08); }
}

/* leaving the page or coming back: the menu shuts at once, with no animation */
html.alm-hnav-instant .alm-hnav-panel, html.alm-hnav-instant .alm-hnav-panel *, html.alm-hnav-instant .alm-hnav-scrim,
html.alm-hnav-instant .alm-hnav-sheet, html.alm-hnav-instant .alm-hnav-sheet *, html.alm-hnav-instant .alm-hnav-chev,
html.alm-hnav-instant .alm-burger span, html.alm-hnav-instant .alm-burger span::before, html.alm-hnav-instant .alm-burger span::after,
html.alm-hnav-instant #masthead, html.alm-hnav-instant #masthead .site-branding .logo img { transition: none !important; }

/* open motion: rows rise in one after another */
.alm-hnav-main .alm-hnav-rows li, .alm-hnav-main .alm-hnav-foot { opacity: 0; transition: opacity .3s ease; }
html.alm-hnav-sheet-open .alm-hnav-main .alm-hnav-rows li, html.alm-hnav-sheet-open .alm-hnav-main .alm-hnav-foot { opacity: 1; }
html.alm-hnav-sheet-open .alm-hnav-rows li:nth-child(2) { transition-delay: .03s; }
html.alm-hnav-sheet-open .alm-hnav-rows li:nth-child(3) { transition-delay: .06s; }
html.alm-hnav-sheet-open .alm-hnav-rows li:nth-child(4) { transition-delay: .09s; }
html.alm-hnav-sheet-open .alm-hnav-rows li:nth-child(5) { transition-delay: .12s; }
html.alm-hnav-sheet-open .alm-hnav-main .alm-hnav-foot { transition-delay: .15s; }

@media (prefers-reduced-motion: reduce) {
  .alm-hnav-panel, .alm-hnav-panel *, .alm-hnav-scrim, .alm-hnav-sheet, .alm-hnav-sheet *, .alm-burger span, .alm-burger span::before, .alm-burger span::after, .alm-hnav-chev { transition: none !important; }
  .alm-hnav-list > *, .alm-hnav-main .alm-hnav-rows li, .alm-hnav-main .alm-hnav-foot, .alm-hnav-panel { transform: none !important; }
}

/* Desktop: Apps and Education leave the top bar (class alm-in-services on their menu items) and show as the
   right-hand column of the Services panel instead (owner, 2026-10-23); phones keep them as menu rows */
@media (min-width: 992px) {
  html.alm-hnav #masthead #mega-menu-wrap ul#secondary-menu li.alm-in-services { display: none !important; }
}
.alm-hnav-col-extra .alm-hnav-list + .alm-hnav-kicker { margin-top: 26px; }

/* green "New" pill in the top-right corner of an entry (menu item class alm-new, e.g. CutFast): a softly pulsing
   dot and glow draw the eye; nothing moves or changes size (paint-only animation, safe over iPhone videos) */
/* corner pills ("New", "Coming soon"): top-right of the entry, the name keeps clear of them */
.alm-hnav-svc.has-corner, .alm-hnav-srow.has-corner { position: relative; }
.alm-hnav-corner { position: absolute; top: 10px; right: 12px; display: flex; gap: 6px; pointer-events: none; }
.alm-hnav-srow .alm-hnav-corner { top: 9px; right: 10px; }
.has-corner .alm-hnav-name, .alm-hnav-srow.has-corner b { display: block; padding-right: 108px; }
.alm-hnav-corner .alm-hnav-pill { margin: 0; padding: 4px 9px; border: 1px solid rgba(248, 199, 87, .32); vertical-align: 0; }
.alm-hnav-new {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px 4px 8px; border-radius: 999px; pointer-events: none;
  background: rgba(34, 197, 94, .14); border: 1px solid rgba(74, 222, 128, .38); color: #86EFAC;
  font: 600 10.5px/1 var(--alm-hnav-display); letter-spacing: .7px; text-transform: uppercase;
  animation: alm-hnav-new-glow 2.4s ease-in-out infinite;
}
.alm-hnav-new-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ADE80; animation: alm-hnav-new-ping 2.4s ease-out infinite; }
@keyframes alm-hnav-new-ping { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .65); } 70%, 100% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); } }
@keyframes alm-hnav-new-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } 50% { box-shadow: 0 0 14px 0 rgba(74, 222, 128, .26); } }
@media (prefers-reduced-motion: reduce) { .alm-hnav-new, .alm-hnav-new-dot { animation: none !important; } }