/* Sixty Seconds, the shared nav (Raph, 26 Oct: "Nav bar needs to show all the correct options").
   Loaded by every page after its own stylesheet (home.css?v=e4aa017aba or demo/css/demo.css), so these rules win. Behaviour: js/nav.js. Numbers: motion/MOTION-STUDY.md P11, P13.
   881px and up: logo, the four links and both buttons on one line (tighter gaps below 1200px).
   880px and down: logo, Book a call and a menu button; the button opens a 300px sheet from the right (350px from 640px up) with every link plus Book a call.
   P11: the bar slides up out of view on scroll down past 140px (300ms) and back on any scroll up (160ms), cubic-bezier(.23,1,.32,1). Reduced motion: it never moves. */
.nav ul a[aria-current="page"]{color:rgb(var(--ink))}
.nav-burger,.nav-sheet,.nav-scrim{display:none}

/* P11 */
.nav{transform:none;transition:transform .16s cubic-bezier(.23,1,.32,1)}
.nav.nav-hide,html[data-nav-lock] .nav{transform:translate3d(0,calc(-100% - 1px),0);transition-duration:.3s}
.nav.nav-hide:focus-within{transform:none;transition-duration:.16s}

/* ---------- R4 R1: Resources dropdown, "the unfurl" (Raph, 28 Oct: the boxed panel was clunky).
   No box. On open a full-width strip unfurls under the bar (clip-path wipe, 520ms house ease) and the bar and strip read as one surface. Inside, on the 1248 grid:
   Blog, Guides and FAQs as three big Cabinet Grotesk 800 links (number, title, one line), a spectrum hairline that draws left to right along the strip's lower edge,
   and a cover preview of the latest piece on the right that follows the hovered or focused link (js/nav.js builds it from the registry in resources/kit/articles.json).
   Items rise in 70ms apart; hovering one dims the others and draws a spectrum underline under its title. Emerald stays on Book a call only.
   Behaviour (unchanged): hover 80ms in / 160ms grace, click, Enter/Space, ArrowDown/Up/Home/End, Esc returns focus, Tab out closes, aria-expanded, closes when the bar hides on scroll.
   Only opacity, transform and clip-path animate. Reduced motion: it simply appears. ---------- */
.nav-in{position:static}
.nav::before{z-index:-1}
.nav .has-sub{position:static;display:block}
.nav .nav-sub-btn{all:unset;box-sizing:border-box;position:relative;display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;
  font:inherit;font-size:inherit;font-weight:inherit;color:rgb(var(--body));transition:color .25s var(--ease);border-radius:8px;padding:0;line-height:inherit}
.nav .nav-sub-btn:hover,.nav .has-sub.open .nav-sub-btn,.nav .nav-sub-btn.is-current{color:rgb(var(--ink))}
.nav .nav-sub-btn:focus-visible{outline:2px solid rgb(var(--a4));outline-offset:4px}
.nav .nav-caret{flex:none;transition:transform .3s var(--ease)}
.nav .has-sub.open .nav-caret{transform:rotate(180deg)}
/* bar + strip are one surface while it is open */
.nav:has(.has-sub.open)::before{opacity:1;border-bottom-color:transparent;transition-duration:.2s}
.nav ul.nav-sub{display:grid;position:absolute;left:0;right:0;top:100%;z-index:5;margin:0;list-style:none;gap:0;
  grid-template-columns:repeat(3,minmax(0,1fr)) minmax(280px,340px);
  padding:clamp(26px,2.6vw,36px) max(32px,calc((100% - 1248px) / 2)) clamp(28px,2.8vw,38px);
  background:linear-gradient(rgb(var(--bg)/.74),rgb(var(--bg)/.97) 62%);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  box-shadow:0 50px 80px -30px rgb(0 0 0/.75);
  clip-path:inset(0 0 100% 0);opacity:0;visibility:hidden;pointer-events:none;
  transition:clip-path .22s var(--ease),opacity .18s var(--ease),visibility 0s linear .24s}
.nav .has-sub.open ul.nav-sub{clip-path:inset(0 0 -60px 0);opacity:1;visibility:visible;pointer-events:auto;transition:clip-path .62s var(--ease),opacity .3s var(--ease),visibility 0s}
/* the spectrum hairline draws along the strip's lower edge */
.nav ul.nav-sub::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,rgb(var(--a1)/0),rgb(var(--a1)) 12%,rgb(var(--a4)) 50%,rgb(var(--a7)) 88%,rgb(var(--a7)/0));transition:transform .2s var(--ease)}
.nav .has-sub.open ul.nav-sub::after{transform:none;transition:transform .9s var(--ease) .12s}
.nav .nav-sub>li{display:block;counter-increment:nsi;opacity:0;transform:translate3d(0,18px,0);transition:opacity .15s var(--ease),transform .15s var(--ease)}
.nav .nav-sub{counter-reset:nsi}
.nav .has-sub.open .nav-sub>li{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .7s var(--ease)}
.nav .has-sub.open .nav-sub>li:nth-child(1){transition-delay:.1s}.nav .has-sub.open .nav-sub>li:nth-child(2){transition-delay:.17s}
.nav .has-sub.open .nav-sub>li:nth-child(3){transition-delay:.24s}.nav .has-sub.open .nav-sub>li:nth-child(4){transition-delay:.31s}
.nav .nav-sub li:not(.ns-prev){--c:var(--a3)}
.nav .nav-sub li:nth-child(1){--c:var(--a1)}.nav .nav-sub li:nth-child(2){--c:var(--a4)}.nav .nav-sub li:nth-child(3){--c:var(--a7)}
.nav .nav-sub li:not(.ns-prev) a{position:relative;display:flex;flex-direction:column;gap:0;height:100%;min-height:120px;padding:6px clamp(20px,2.4vw,40px) 6px 0;margin-right:clamp(20px,2.4vw,40px);
  border-right:1px solid rgb(var(--line)/.6);border-radius:0;color:rgb(var(--ink));background:none;border-top:0;border-left:0;border-bottom:0;
  transition:opacity .35s var(--ease)}
.nav .nav-sub li:nth-child(3) a{border-right:0}
.nav .nav-sub a:focus-visible{outline:2px solid rgb(var(--a4));outline-offset:6px;border-radius:10px}
.nav .nav-sub .ns-i{display:none}
.nav .nav-sub li:not(.ns-prev) a::before{content:counter(nsi,decimal-leading-zero);order:-1;margin-bottom:22px;font:700 12px/1 Inter,system-ui,sans-serif;letter-spacing:.24em;color:rgb(var(--c));opacity:.9}
.nav .nav-sub b{position:relative;align-self:flex-start;font:800 clamp(34px,3.5vw,52px)/1 Cabinet,system-ui,sans-serif;letter-spacing:-.035em;padding-bottom:10px;
  transition:transform .6s var(--ease)}
.nav .nav-sub b::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;background:linear-gradient(90deg,rgb(var(--c)),rgb(var(--a7)));transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.nav .nav-sub small{margin-top:14px;max-width:26ch;font:400 15px/1.45 Inter,system-ui,sans-serif;color:rgb(var(--muted));transition:color .3s var(--ease)}
.nav .nav-sub a::after{content:"\2192";position:absolute;right:calc(clamp(20px,2.4vw,40px) + 2px);top:4px;font:600 22px/1 Inter,system-ui,sans-serif;color:rgb(var(--c));opacity:0;transform:translate3d(-8px,0,0);transition:opacity .35s var(--ease),transform .5s var(--ease)}
.nav .nav-sub li:not(.ns-prev) a:hover b::after,.nav .nav-sub li:not(.ns-prev) a:focus-visible b::after,.nav .nav-sub a[aria-current="page"] b::after{transform:none}
.nav .nav-sub a[aria-current="page"] b::after{opacity:.5}
.nav .nav-sub a:hover small,.nav .nav-sub a:focus-visible small{color:rgb(var(--body))}
.nav .nav-sub a:hover::after,.nav .nav-sub a:focus-visible::after{opacity:1;transform:none}
/* hovering one link settles the others back */
@media (hover:hover){.nav .nav-sub:hover li:not(.ns-prev):not(:hover) a{opacity:.42}}
.nav .nav-sub:has(a:focus-visible) li:not(.ns-prev):not(:has(a:focus-visible)) a{opacity:.5}
/* the cover preview: three covers stacked, the one for the hovered/focused link shows (data-pv on the list) */
.nav .ns-prev{position:relative;min-width:0}
.nav .ns-prev a{display:block;position:relative;color:inherit;text-decoration:none;border-radius:16px}
.nav .ns-prev .pv-stage{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:rgb(var(--s1));box-shadow:0 0 0 1px rgb(var(--line-br)/.5),0 26px 50px -26px rgb(0 0 0/.9)}
.nav .ns-prev .pv-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.045);transition:opacity .5s var(--ease),transform .9s var(--ease)}
.nav .nav-sub[data-pv="0"] .pv-stage img:nth-child(1),.nav .nav-sub[data-pv="1"] .pv-stage img:nth-child(2),.nav .nav-sub[data-pv="2"] .pv-stage img:nth-child(3){opacity:1;transform:none}
.nav .ns-prev .pv-cap{position:relative;display:block;height:3.1em;margin-top:12px}
.nav .ns-prev .pv-cap span{position:absolute;left:0;right:0;top:0;opacity:0;transform:translate3d(0,6px,0);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.nav .nav-sub[data-pv="0"] .pv-cap span:nth-child(1),.nav .nav-sub[data-pv="1"] .pv-cap span:nth-child(2),.nav .nav-sub[data-pv="2"] .pv-cap span:nth-child(3){opacity:1;transform:none}
.nav .ns-prev .pv-cap i{display:block;margin-bottom:5px;font:700 11px/1 Inter,system-ui,sans-serif;font-style:normal;letter-spacing:.22em;text-transform:uppercase;color:rgb(var(--muted))}
.nav .ns-prev .pv-cap em{display:block;font:600 14.5px/1.3 Inter,system-ui,sans-serif;font-style:normal;color:rgb(var(--ink));overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nav .ns-prev a:hover .pv-stage{box-shadow:0 0 0 1px rgb(var(--a4)/.7),0 26px 50px -26px rgb(0 0 0/.9)}
.nav .ns-prev a:focus-visible{outline:2px solid rgb(var(--a4));outline-offset:4px}
/* no-JS fallback: the strip opens on hover or focus-within (and shows the three links, no preview) */
.nav:not(.nav-ready) .has-sub:hover ul.nav-sub,.nav:not(.nav-ready) .has-sub:focus-within ul.nav-sub{clip-path:none;opacity:1;visibility:visible;pointer-events:auto}
.nav:not(.nav-ready) .has-sub:hover .nav-sub>li,.nav:not(.nav-ready) .has-sub:focus-within .nav-sub>li{opacity:1;transform:none}
/* narrower desktops: drop the preview, keep the three links */
@media (max-width:1100px){.nav ul.nav-sub{grid-template-columns:repeat(3,minmax(0,1fr))}.nav .ns-prev{display:none}.nav .nav-sub li:nth-child(3) a{border-right:0}}

/* the sheet's Resources group: a small spectrum-marked label, then the three links in the list */
.nav-sheet .sh-group{border-top:1px solid rgb(var(--line)/.7)}
.nav-sheet .sh-label{display:flex;align-items:center;gap:10px;min-height:48px;padding-top:6px;font:700 11.5px/1 Inter,system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:rgb(var(--muted))}
.nav-sheet .sh-label::before{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgb(var(--a1)),rgb(var(--a7)))}
.nav-sheet .sh-group ul{margin:0 0 6px;padding:0;list-style:none}
.nav-sheet .sh-group li+li{border-top:1px solid rgb(var(--line)/.45)}
.nav-sheet .sh-group ul a{min-height:46px;padding-left:32px;font-size:16px}
@media (prefers-reduced-motion:reduce){
  .nav ul.nav-sub,.nav ul.nav-sub::after,.nav .nav-sub>li,.nav .nav-caret,.nav .nav-sub a,.nav .nav-sub b,.nav .nav-sub b::after,.nav .nav-sub-btn,.nav .ns-prev img,.nav .ns-prev .pv-cap span{transition:none!important}
  .nav ul.nav-sub{clip-path:none}
}

@media (max-width:1200px){
  .nav-in{grid-template-columns:auto 1fr auto;column-gap:20px}
  .nav ul{display:flex;justify-content:center;gap:clamp(16px,2.2vw,32px);font-size:14px}
  .nav ul a{white-space:nowrap}
  .nav .acts{gap:8px}
  .nav .acts .btn.sm{padding:0 15px}
  .nav .btn.ghost{display:inline-flex}
}

@media (max-width:880px){
  .nav-in>ul,.nav-in>.acts .btn.ghost{display:none}
  .nav-in{grid-template-columns:1fr auto auto;column-gap:10px}
  .nav-burger{display:grid;place-content:center;gap:5px;width:44px;height:44px;padding:0;margin-right:-4px;border-radius:12px;cursor:pointer;
    background:rgb(var(--s1)/.7);border:1px solid rgb(var(--line-br));color:rgb(var(--ink));transition:border-color .3s var(--ease)}
  .nav-burger:hover{border-color:rgb(var(--a3)/.7)}
  .nav-burger span{display:block;width:18px;height:2px;border-radius:2px;background:currentColor}

  /* P13: the sheet. Closed it sits off to the right and is not focusable (visibility); the scrim is black 80% */
  .nav-scrim{display:block;position:fixed;inset:0;z-index:69;background:#000;opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s ease-in-out,visibility 0s linear .3s}
  .nav-sheet{display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;z-index:70;width:300px;max-width:100vw;overflow-y:auto;overscroll-behavior:contain;
    background:rgb(var(--bg));border-left:1px solid rgb(var(--line-br)/.8);box-shadow:-30px 0 60px -30px rgb(0 0 0/.9);
    transform:translate3d(100%,0,0);visibility:hidden;
    transition:transform .3s ease-in-out,visibility 0s linear .3s}
  html.nav-open{overflow:hidden}
  html.nav-open .nav-scrim{opacity:.8;visibility:visible;pointer-events:auto;transition:opacity .5s ease-in-out,visibility 0s}
  html.nav-open .nav-sheet{transform:none;visibility:visible;transition:transform .5s ease-in-out,visibility 0s}

  .nav-close{position:relative;flex:none;align-self:flex-end;width:44px;height:44px;margin:calc((var(--nav) - 44px) / 2) clamp(20px,2.5vw,32px) 0 0;padding:0;border-radius:12px;cursor:pointer;
    background:rgb(var(--s1)/.7);border:1px solid rgb(var(--line-br));color:rgb(var(--ink))}
  .nav-close span{position:absolute;left:50%;top:50%;width:18px;height:2px;margin:-1px 0 0 -9px;border-radius:2px;background:currentColor;transform:rotate(45deg)}
  .nav-close span+span{transform:rotate(-45deg)}
  .nav-close:hover{border-color:rgb(var(--a3)/.7)}
  .nav-sheet-in{padding:12px 24px 32px}
  .nav-sheet ul{display:flex;flex-direction:column;gap:0;font-size:17px;font-weight:500}
  .nav-sheet-in>ul>li+li{border-top:1px solid rgb(var(--line)/.7)}
  .nav-sheet ul a{display:flex;align-items:center;min-height:52px;text-decoration:none;color:rgb(var(--body));transition:color .25s var(--ease)}
  .nav-sheet ul a:hover,.nav-sheet ul a[aria-current="page"]{color:rgb(var(--ink))}
  .nav-sheet .acts{display:flex;flex-direction:column;gap:10px;margin-top:20px}
  .nav-sheet .acts .btn{display:inline-flex;width:100%;height:48px;font-size:15px}
}
@media (min-width:640px) and (max-width:880px){.nav-sheet{width:350px}}
@media (prefers-reduced-motion:reduce){
  .nav,.nav.nav-hide{transition:none!important;transform:none!important}
  .nav-sheet,.nav-scrim,.nav-burger{transition:none!important}
}

/* Legibility and tap floor (30 Oct responsive pass): on phones no label drops under 11px, and on touch screens every footer, crumb and back link gets a 44px hit area. */
html .cue,html .cmp-tag,html .vt-tag,html .lp-k,html .hc-top,html .hc-act{font-size:11px}
@media (max-width:760px){
  html .tag,html .cmp-tag,html .vt-tag,html .cmp-sub,html .cmp-mail p,html .eyebrow span{font-size:11px}
  html .cue{font-size:12px}
}
@media (pointer:coarse){
  html footer nav{row-gap:0}
  html footer nav a,html footer .fl,html .crumb a{display:inline-flex;align-items:center;min-height:44px}
}