/* ============================================================
   POW Studio - nav.css: the site's header, one component (14 Nov 2026)
   Markup: scripts/nav/nav.html, installed on every page between <!-- site:nav:start --> and <!-- site:nav:end -->
   by scripts/nav/apply_nav.py. Behaviour: assets/js/nav.js. Bump ?v= on every page (apply_nav.py does it) after a
   change here.

   What this file owns
   - The closed header's geometry, the homepage's to the pixel on every page: the pill, the wordmark, the links,
     Talk to us, the menu button, their sizes, gaps and the page gutter (16 / 32 / 48 px, wider past 1920). The
     selectors start at #nav so the old pages' own header rules (classes only) can never move it. Colour and tone
     in the closed state stay with each page (its film, its dark bands, overscroll.js), as before.
   - The open states. Desktop (from 769 px): Services drops a sheet the width of the screen with the three services
     as large names over real work; the page under it recedes behind an ink veil and holds still. Phone (to 768 px):
     a full-screen sheet, the services large with their line, the other links, Talk to us pinned at the foot with the
     social links and the email under it. Both take the header's tone when they open (html[data-nav-tone]).
   Motion: one travel curve, 260 ms open, 200 ms close, nothing fades up, instant with reduced motion.
   ============================================================ */
:root {
  --nav-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --nav-open: 260ms;
  --nav-close: 200ms;
}
/* The page gutter, the homepage's steps. 100% is the header's width (the screen's, less a classic scrollbar). */
#nav.nav { --nav-gutter: 16px; }
@media (min-width: 769px) { #nav.nav { --nav-gutter: 32px; } }
@media (min-width: 1025px) { #nav.nav { --nav-gutter: max(48px, calc((100% - 1824px) / 2)); } }

/* ---------- The closed header: geometry ---------- */
#nav.nav {
  display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; width: 100%;
  padding: 22px var(--nav-gutter) 22px calc(var(--nav-gutter) - 24px);
  font-family: 'Inter Tight', 'Geist', system-ui, sans-serif; font-size: 16px; line-height: normal;
}
@media (max-width: 1024px) { #nav.nav { padding-top: 14px; padding-bottom: 14px; } }
@media (max-width: 768px) { #nav.nav { padding: 16px var(--nav-gutter); } }
#nav .nav-inner { display: flex; align-items: center; gap: 32px; box-sizing: border-box; padding: 10px 24px; border-radius: 8px; }
@media (max-width: 768px) { #nav .nav-inner { padding: 0; } }
#nav .nav-logo { display: block; box-sizing: content-box; height: auto; padding: 4px 0; margin: 0; line-height: 0; }
#nav .nav-logo svg { display: block; height: 12px; width: auto; margin: 0; }
#nav .nav-links { display: flex; align-items: center; gap: 24px; }
#nav .nav-links a { display: inline-block; box-sizing: content-box; padding: 0; margin: 0; font-size: 14px; line-height: 18px; font-weight: 400; letter-spacing: normal; text-decoration: none; }
#nav .services-trigger { cursor: pointer; }
#nav .nav-cta { display: flex; align-items: center; box-sizing: border-box; height: 41px; min-height: 0; padding: 0 20px; border-radius: 8px; text-decoration: none; }
#nav .nav-cta span { font-size: 14px; line-height: 18px; font-weight: 500; letter-spacing: normal; }
#nav .nav-hamburger { display: none; box-sizing: content-box; width: 20px; height: 16px; padding: 14px; margin: -14px; background: none; border: 0; cursor: pointer; }
#nav .nav-hamburger svg { display: block; width: 20px; height: 10px; overflow: visible; }
#nav .nav-hamburger line { transform-box: fill-box; transform-origin: center; }
/* Touch: the wordmark and the links take a 44 px tall target, keeping their place through equal negative margins */
@media (max-width: 1024px), (pointer: coarse) {
  #nav .nav-logo { padding: 16px 0; margin: -12px 0; }
  #nav .nav-links a { padding: 13px 7px; margin: -13px -7px; }
  #nav .nav-cta { min-height: 44px; }
}
@media (max-width: 768px) {
  #nav .nav-links, #nav .nav-cta { display: none; }
  #nav .nav-hamburger { display: flex; align-items: center; }
}

/* ---------- The trigger: its caret turns while open; the ring is for the keyboard only ---------- */
#nav .nav-caret { display: inline-block; transition: transform var(--nav-close) var(--nav-ease); }
#nav .services-trigger[aria-expanded="true"] .nav-caret { transform: rotate(180deg); transition-duration: var(--nav-open); }
#nav .services-trigger:focus-visible, #nav .nav-hamburger:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
/* a control last pressed with a pointer never draws the ring (nav.js sets data-pointer; the next key press clears it) */
#nav .services-trigger[data-pointer]:focus-visible, #nav .nav-hamburger[data-pointer]:focus-visible { outline: none; }
#nav .nav-hamburger, #nav .navp a, #nav .nav-sheet a { -webkit-tap-highlight-color: transparent; }
/* Open, shown quietly: Services at full strength, the other header links a step back */
#nav.is-menu-open .nav-links a, #nav.is-menu-closing .nav-links a { transition: color 0.4s, opacity var(--nav-open) var(--nav-ease); }
#nav.is-menu-open .nav-links a:not(.services-trigger) { opacity: 0.55; }
#nav.is-menu-open .nav-links .services-trigger { opacity: 1; }

/* ---------- Services: the sheet (from 769 px) ---------- */
#nav .navp, #nav .navp-scrim { display: none; }
#nav .navp ul { list-style: none; margin: 0; padding: 0; }
@media (min-width: 769px) {
  #nav .navp {
    display: block; position: absolute; z-index: -1; top: 0; left: 0; right: calc(-1 * var(--navp-sb, 0px));
    box-sizing: border-box;
    padding: calc(var(--navp-head, 63px) + 48px) calc(var(--navp-r, var(--nav-gutter)) + var(--navp-sb, 0px)) var(--nav-gutter) var(--navp-l, var(--nav-gutter));
    border-radius: 0 0 24px 24px;
    --p-bg: #0E0E10; --p-ink: #FFFFFF; --p-muted: rgba(255, 255, 255, 0.6); --p-tile: rgba(255, 255, 255, 0.08);
    --p-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 16px 40px rgba(0, 0, 0, 0.24);
    background: var(--p-bg); color: var(--p-ink); box-shadow: var(--p-shadow);
    font-family: 'Inter Tight', 'Geist', system-ui, sans-serif;
    visibility: hidden; opacity: 0; pointer-events: none;
    clip-path: inset(-48px -48px 100% -48px);
    transition: opacity var(--nav-close) var(--nav-ease), clip-path var(--nav-close) var(--nav-ease), visibility 0s linear var(--nav-close);
  }
  html[data-nav-tone="light"] #nav .navp {
    --p-bg: #FFFFFF; --p-ink: #09090B; --p-muted: #09090B99; --p-tile: rgba(9, 9, 11, 0.04);
    --p-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 16px 40px rgba(9, 9, 11, 0.08);
  }
  #nav .navp.is-open, #nav .navp:target {
    visibility: visible; opacity: 1; pointer-events: auto; clip-path: inset(-48px);
    transition: opacity 180ms var(--nav-ease), clip-path var(--nav-open) var(--nav-ease), visibility 0s;
  }
  /* Without JavaScript: open on hover and on keyboard focus anywhere in the header */
  html:not(.nav-js) #nav .nav-inner:hover ~ .navp, html:not(.nav-js) #nav .navp:hover, html:not(.nav-js) #nav:focus-within .navp {
    visibility: visible; opacity: 1; pointer-events: auto; clip-path: inset(-48px);
  }
  #nav .navp-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 24px; }
  #nav .navp-item { display: flex; flex-direction: column; color: inherit; text-decoration: none; outline: none; }
  #nav .navp-media {
    display: block; position: relative; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; margin-bottom: 24px;
    background: var(--p-tile); transition: opacity 200ms var(--nav-ease);
  }
  #nav .navp-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
  #nav .navp-name { font-size: clamp(28px, 2.5vw, 40px); font-weight: 400; line-height: 1.05; letter-spacing: -0.035em; color: var(--p-ink); transition: color 200ms var(--nav-ease); }
  #nav .navp-line { margin-top: 8px; font-size: 16px; line-height: 1.45; color: var(--p-muted); text-wrap: pretty; }
  @media (min-width: 1280px) { #nav .navp-line { font-size: 17px; } }
  #nav .navp-item:focus-visible .navp-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
  /* the one under the pointer or in focus stays, the others step back */
  #nav .navp-list.is-pointing .navp-item:not(.is-current) .navp-name { color: var(--p-muted); }
  #nav .navp-list.is-pointing .navp-item:not(.is-current) .navp-media { opacity: 0.4; }
  /* The page under the sheet recedes: an ink veil with a light blur, deep over dark pages and soft over light ones,
     fading with the sheet. A click on it closes the sheet; the page holds still while it is open (nav.js). */
  #nav .navp-scrim {
    display: block; position: fixed; inset: 0; z-index: -2; background: rgba(9, 9, 11, 0.7);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden; transition: opacity var(--nav-close) var(--nav-ease), visibility 0s linear var(--nav-close);
  }
  html[data-nav-tone="light"] #nav .navp-scrim { background: rgba(9, 9, 11, 0.35); }
  #nav.is-menu-open .navp-scrim { opacity: 1; visibility: visible; transition: opacity var(--nav-open) var(--nav-ease), visibility 0s; }
  /* the header row sits straight on the sheet: the pill's surface and shadow step aside while it is open */
  #nav.is-menu-open .nav-inner {
    background: transparent !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  /* the sheet's own tone for the header row over it */
  html[data-nav-tone="dark"] #nav.is-menu-open .nav-logo svg path { fill: #FFFFFF !important; }
  html[data-nav-tone="dark"] #nav.is-menu-open .nav-links a { color: #FFFFFF !important; }
  html[data-nav-tone="light"] #nav.is-menu-open .nav-logo svg path { fill: #09090B !important; }
  html[data-nav-tone="light"] #nav.is-menu-open .nav-links a { color: #09090B !important; }
  /* held still under the sheet; the scrollbar's space is kept so nothing moves sideways */
  html.navp-locked { overflow: hidden !important; scrollbar-gutter: stable; }
}

/* ---------- Phone: the sheet (to 768 px) ---------- */
#nav .nav-sheet { display: none; }
@media (max-width: 768px) {
  #nav .nav-sheet {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: -1;
    --ns-bg: #FFFFFF; --ns-ink: #09090B; --ns-muted: #09090B99; --ns-cta-bg: #09090B; --ns-cta-ink: #FFFFFF;
    background: var(--ns-bg); color: var(--ns-ink); font-family: 'Inter Tight', 'Geist', system-ui, sans-serif;
    visibility: hidden; clip-path: inset(0 0 100% 0);
    transition: clip-path var(--nav-close) var(--nav-ease), visibility 0s linear var(--nav-close);
  }
  html[data-nav-tone="dark"] #nav .nav-sheet { --ns-bg: #09090B; --ns-ink: #FFFFFF; --ns-muted: rgba(255, 255, 255, 0.6); --ns-cta-bg: #FFFFFF; --ns-cta-ink: #09090B; }
  #nav .nav-sheet.is-open, #nav .nav-sheet:target { visibility: visible; clip-path: inset(0); transition: clip-path 300ms var(--nav-ease), visibility 0s; }
  /* open: the header (and its sheet) above the hiring bar, the header row exactly where it was */
  html.ns-open #nav { z-index: 160; }
  html.ns-open, html.ns-open body { overflow: hidden; }
  /* the header row takes the sheet's tone */
  html.ns-open[data-nav-tone="dark"] #nav .nav-logo svg path { fill: #FFFFFF !important; }
  html.ns-open[data-nav-tone="dark"] #nav .nav-hamburger line { stroke: #FFFFFF !important; }
  html.ns-open[data-nav-tone="light"] #nav .nav-logo svg path { fill: #09090B !important; }
  html.ns-open[data-nav-tone="light"] #nav .nav-hamburger line { stroke: #09090B !important; }
  #nav .ns-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--ns-top, 88px) + 24px) var(--nav-gutter) 24px; }
  #nav .ns-label { margin: 0 0 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; line-height: 16px; text-transform: uppercase; color: var(--ns-muted); }
  #nav .ns-list, #nav .ns-links, #nav .ns-social { list-style: none; margin: 0; padding: 0; }
  #nav .ns-service { display: flex; flex-direction: column; padding-block: 8px; color: var(--ns-ink); text-decoration: none; }
  #nav .ns-name { font-size: 28px; line-height: 34px; letter-spacing: -0.02em; }
  #nav .ns-line { margin-top: 2px; font-size: 15px; line-height: 20px; color: var(--ns-muted); text-wrap: pretty; }
  #nav .ns-links { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  #nav .ns-links a { display: flex; align-items: center; min-height: 44px; font-size: 20px; line-height: 28px; letter-spacing: -0.01em; color: var(--ns-ink); text-decoration: none; }
  #nav .ns-service:focus-visible, #nav .ns-links a:focus-visible, #nav .ns-cta:focus-visible, #nav .ns-social a:focus-visible, #nav .ns-email:focus-visible {
    outline: 2px solid var(--ns-ink); outline-offset: 2px; border-radius: 4px;
  }
  /* Talk to us pinned at the foot, the social links and the email under it; content scrolling under it fades out */
  #nav .ns-foot { flex: none; position: relative; display: flex; flex-direction: column; padding: 12px var(--nav-gutter) calc(4px + env(safe-area-inset-bottom, 0px)); background: var(--ns-bg); }
  html:has(.pow-consent.is-visible) #nav .ns-foot { padding-bottom: 160px; }
  #nav .ns-foot::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; background: linear-gradient(to bottom, transparent, var(--ns-bg)); pointer-events: none; }
  #nav .ns-cta { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 8px; background: var(--ns-cta-bg); color: var(--ns-cta-ink); font-size: 15px; line-height: 18px; font-weight: 500; text-decoration: none; }
  /* the social links: one quiet row (two on the narrowest phones), the menu's small type, muted, ink when pressed */
  /* Even 20 px between the names; each name's tap target is at least 44 x 44 (the short X is 44 wide, drawn over
     its neighbours' outer edges so the gaps stay even). Under 360 px the row splits three and two, never one name
     alone. */
  #nav .ns-social { display: flex; flex-wrap: wrap; justify-content: center; margin: 4px auto 0; }
  @media (max-width: 359px) { #nav .ns-social { max-width: 230px; } }
  #nav .ns-social a { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 10px; box-sizing: border-box; font-size: 13px; line-height: 16px; color: var(--ns-muted); text-decoration: none; transition: color 0.15s ease; }
  #nav .ns-social a.is-short { min-width: 44px; padding: 0; margin: 0 -8px; z-index: 1; }
  #nav .ns-social a:active { color: var(--ns-ink); }
  @media (hover: hover) { #nav .ns-social a:hover { color: var(--ns-ink); } }
  #nav .ns-email { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 13px; line-height: 16px; color: var(--ns-muted); text-decoration: none; }
  #nav .ns-nojs-close { display: none; }
  /* without JavaScript the sheet is white: the wordmark and the menu button turn ink over it */
  html:not(.nav-js) #nav:has(.nav-sheet:target) .nav-logo svg path { fill: #09090B !important; }
  html:not(.nav-js) #nav:has(.nav-sheet:target) .nav-hamburger line { stroke: #09090B !important; }
  html:not(.nav-js) #nav .ns-nojs-close { display: flex; align-items: center; min-height: 44px; margin-bottom: 8px; font-size: 15px; color: var(--ns-muted); text-decoration: none; }
  /* the menu button turns into the close in the same spot */
  #nav .nav-hamburger line { transition: transform var(--nav-close) var(--nav-ease), stroke 0.2s; }
  #nav .nav-hamburger[aria-expanded="true"] line { transition-duration: var(--nav-open), 0.2s; }
  #nav .nav-hamburger[aria-expanded="true"] line:first-of-type { transform: translateY(4px) rotate(45deg); }
  #nav .nav-hamburger[aria-expanded="true"] line:last-of-type { transform: translateY(-4px) rotate(-45deg); }
}

@media (prefers-reduced-motion: reduce) {
  #nav .navp, #nav .navp.is-open, #nav .navp-media, #nav .navp-name, #nav .navp-scrim, #nav .nav-caret, #nav .nav-sheet,
  #nav .nav-sheet.is-open, #nav .nav-links a, #nav .nav-hamburger line { transition: none !important; }
}