/* Encore marketing site: the Mosaic menu (Josh, R4 Addendum 11). Shell file, loaded on every page after site.css.
   Markup: shell/nav.html (.dd--nm panels, .nm-mlist in the drawer). Behaviour: site.js + assets/nav-menu.js.
   Left: an index of pages in Hedvig, grouped, each with the same small stair-step mark (a 32x32 cut of the brand
   mosaic). Right: the brand mosaic itself, carrying a white card that shows what the page gives the person answering.
   Laws: Hedvig + PP Neue Montreal only, text 14px and up at full or mute colour, one hairline per group, no shadows. */

/* ============================== The panels (901px and up) ============================== */
.dd--nm { width: min(calc(100vw - var(--gut) * 2), 1040px); border-radius: 26px; overflow: hidden; transform: none; }
.dd--nm-uses { width: min(calc(100vw - var(--gut) * 2), 1000px); }
/* With the script, one white surface (.nm-surface) sits behind both panels and changes size and shape between them.
   The panels drop their own border then, so the mosaic meets the surface's corner exactly. */
.nm-surface { display: none; }
.nav.nm-morph .nm-surface { display: block; position: absolute; z-index: 50; left: 0; top: 0; width: 0; height: 0; background: #FFFFFF; border: 1px solid var(--hair); border-radius: 26px; opacity: 0; pointer-events: none; }
.nav.nm-morph .dd--nm { background: transparent; border: 0; transition: opacity .24s var(--ease-out), visibility 0s .24s; }
.nav.nm-morph .dd--nm.is-open { transition: opacity .28s var(--ease-out) .06s, visibility 0s; }

.nm { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 42%, 440px); --nm-name: 184px; }
.nm--uses { grid-template-columns: minmax(0, 1fr) clamp(300px, 36%, 360px); --nm-name: 250px; }

/* ---- The list: a lead, then labelled groups; every row is mark | name | what it is ---- */
.nm-list { padding: 30px 28px 26px 30px; }
.nm-lead { display: block; margin: 0 -2px; padding: 4px 14px 24px; border-radius: 16px; text-decoration: none; }
.nm-lead-name { display: inline-flex; align-items: center; gap: 12px; font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.06; letter-spacing: -.018em; }
.nm-arr { width: 16px; height: 16px; flex: none; transition: transform .35s var(--ease-out); }
.nm-lead:hover .nm-arr, .nm-lead:focus-visible .nm-arr, .nm-lead.is-on .nm-arr { transform: translateX(4px); }
.nm-lead .nm-line { display: block; max-width: 34ch; margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--mute); }
.nm-lead[aria-current="page"] .nm-lead-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

/* Each group carries one hairline, on its label. */
.nm-label { margin: 0 12px; padding: 20px 0 10px; border-top: 1px solid var(--hair); font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: .01em; color: var(--mute); }
.nm-label--sep { margin-top: 14px; }

.nm-items { display: grid; gap: 2px; }
.nm-item {
  display: grid; grid-template-columns: 30px var(--nm-name) minmax(0, 1fr); column-gap: 16px; align-items: baseline;
  padding: 12px 14px 12px 12px; border-radius: 14px; text-decoration: none; transition: background-color .3s var(--ease-out);
}
.nm-item .nm-mark { align-self: start; }
.nm-name { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 30px; letter-spacing: -.012em; }
.nm-line { display: block; font-size: 15px; line-height: 1.45; color: var(--mute); text-wrap: pretty; }
.nm-item:hover, .nm-item:focus-visible, .nm-item.is-on { background: var(--plane); }
.nm-item[aria-current="page"] .nm-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.nm-item[aria-current="page"] .nm-line::before { content: "You’re here · "; color: var(--plum); }

/* ---- The mark: the same two-row stair for every page. It re-steps (rows slide one block, opposite ways) with the row. ---- */
.nm-mark { display: block; width: 30px; height: 30px; flex: none; border-radius: 3px; overflow: hidden; }
.nm-mark svg { display: block; width: 30px; height: 30px; shape-rendering: crispEdges; }
.nm-mark g { transition: transform .6s var(--ease-out); }
.nm-item:hover .nm-ra, .nm-item:focus-visible .nm-ra, .nm-item.is-on .nm-ra, [aria-current="page"] > .nm-mark .nm-ra { transform: translateX(-8px); }
.nm-item:hover .nm-rb, .nm-item:focus-visible .nm-rb, .nm-item.is-on .nm-rb, [aria-current="page"] > .nm-mark .nm-rb { transform: translateX(8px); }

/* ---- The mosaic and its card ---- */
.nm-art { position: relative; overflow: hidden; background: var(--plum); }
.nm-mosaic { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nm-cards { position: absolute; inset: 0; display: grid; place-items: center; padding: 36px; }
/* R5 (ruling 4): the shown card takes visibility: inherit, never visible. A visible child inside a hidden (closed) panel
   is still painted to hit-testing: the invisible card caught the pointer mid-screen and opened Use cases over the page. */
.nm-card {
  grid-area: 1 / 1; display: flex; flex-direction: column; width: 100%; max-width: 284px; padding: 28px 26px 26px;
  background: #FFFFFF; border-radius: 26px; color: var(--plum); font-size: 15px; line-height: 1.45;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s var(--ease-out), transform .5s var(--ease-out), visibility 0s .25s;
}
.nm-card.is-on { opacity: 1; visibility: inherit; transform: none; transition: opacity .35s var(--ease-out) .1s, transform .6s var(--ease-out) .1s, visibility 0s; }

.nm-studio { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 18px; line-height: 1.2; }
.nm-studio i { width: 28px; height: 28px; border-radius: 50%; background: var(--plum); color: #FFFFFF; display: grid; place-items: center; font-style: normal; font-size: 14px; }
.nm-rule { display: block; width: 28px; height: 2px; border-radius: 1px; background: var(--plum); margin: 10px auto 12px; }
.nm-rule--l { margin: 18px 0 16px; }
.nm-k { display: block; font-size: 14px; line-height: 1.35; color: var(--mute); }
.nm-k--t { margin-top: 8px; }
.nm-h { margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: 27px; line-height: 1.08; letter-spacing: -.016em; text-wrap: balance; }
.nm-p { margin-top: 10px; font-size: 15px; color: var(--mute); }
.nm-steps { margin-top: 18px; display: grid; gap: 10px; }
.nm-steps span { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.nm-dot { width: 8px; height: 16px; flex: none; }
.nm-dot--pk { background: #EDC9D8; } .nm-dot--lv { background: #C8C2F0; } .nm-dot--pc { background: #F7CBB0; }
.nm-go { margin-top: 22px; height: 44px; border-radius: 999px; background: var(--plum); color: #FFFFFF; display: grid; place-items: center; font-weight: 500; font-size: 15px; }

.nm-q { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.nm-t { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.nm-pair { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.nm-pair .c { min-width: 80px; padding: 10px 14px; border-radius: 12px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--hair-strong); font-family: var(--serif); font-size: 17px; line-height: 1.1; }
.nm-pair .c.on { background: var(--plum); color: #FFFFFF; box-shadow: none; }
.nm-pair .or, .nm-imgs .or { font-size: 14px; color: var(--mute); }
.nm-imgs { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.nm-imgs img { width: 70px; height: 86px; object-fit: cover; border-radius: 10px; }
.nm-imgs .vs { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,.12); font-size: 12px; color: var(--ink, #1D1B22); }
.nm-imgs--lg img { width: 98px; height: 122px; border-radius: 12px; }
.nm-spec { display: block; width: 100%; max-width: 220px; margin-top: 24px; }
.nm-spec .track { position: relative; display: block; height: 5px; border-radius: 3px; background: #EEEBF0; }
.nm-spec .track b { position: absolute; left: 0; top: 0; bottom: 0; width: 64%; border-radius: 3px; background: #8F83D6; }
.nm-spec .track i { position: absolute; left: 64%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--plum); }
.nm-spec .ends { display: flex; justify-content: space-between; margin-top: 12px; font-size: 14px; color: var(--mute); }
.nm-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; margin-top: 14px; }
.nm-board span { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; }
.nm-board img { width: 100%; height: 100%; object-fit: cover; }
.nm-board .rated::after { content: ""; position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--plum, #6C5CB2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7v6H3V7zM5 7l3-5a1.6 1.6 0 0 1 2 1.8L9.5 6H13a1.5 1.5 0 0 1 1.5 1.8l-1 4.5A1.5 1.5 0 0 1 12 13.5H5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.nm-board .rated.down::after { background-color: #E5776A; transform: scaleY(-1); }
.nm-path { margin-top: 18px; display: grid; gap: 12px; }
.nm-path > span { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; font-size: 15px; line-height: 1.3; }
.nm-path b { grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; background: #ECE8F6; display: grid; place-items: center; font-size: 14px; font-weight: 500; }
.nm-path small { font-size: 14px; color: var(--mute); }
.nm-ans { margin-top: 16px; display: grid; gap: 5px; }
.nm-ans small { font-size: 14px; color: var(--mute); }
.nm-ans b { display: flex; align-items: baseline; gap: 8px; font-weight: 500; font-size: 16px; }
.nm-ans em { font-style: normal; font-size: 14px; font-weight: 400; color: var(--mute); }
.nm-tiles { display: flex; gap: 3px; margin-top: 2px; }
.nm-tiles i { width: 14px; height: 22px; background: #EDC9D8; }
.nm-tiles i.p { background: var(--plum); }
.nm-chosen { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.nm-chosen img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; }
.nm-who { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.nm-who span { padding: 7px 12px; border-radius: 999px; background: #F1EDF7; font-size: 14px; }

/* ---- Narrower windows and short screens: the panel must fit without scrolling ---- */
@media (max-width: 1180px) {
  .nm { --nm-name: 176px; }
  .nm--uses { --nm-name: 238px; }
  .nm-list { padding: 24px 20px 20px 22px; }
  .nm-item { column-gap: 14px; }
  .nm-cards { padding: 28px; }
}
@media (max-height: 860px) and (min-width: 901px) {
  .nm-list { padding-top: 22px; padding-bottom: 16px; }
  .nm-lead { padding-bottom: 18px; }
  .nm-lead-name { font-size: 30px; }
  .nm-lead .nm-line { margin-top: 8px; }
  .nm-label { padding: 14px 0 6px; }
  .nm-label--sep { margin-top: 8px; }
  .nm-item { padding-top: 9px; padding-bottom: 9px; }
  .nm-name { font-size: 22px; line-height: 28px; }
}

/* ============================== Phone drawer (900px and under) ============================== */
.nm-band { display: none; }
@media (max-width: 900px) {
  .dg-panel ul.nm-mlist { display: grid; gap: 2px; padding: 0 0 18px; }
  .dg-panel .nm-mlist a { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: start; padding: 10px 0; }
  .nm-mlist .nm-mark { grid-row: span 2; margin-top: 2px; }
  .nm-mlist .nm-name { font-size: 22px; line-height: 1.2; }
  .nm-mlist .nm-line { font-size: 15px; }
  .dg-panel .nm-mlist a[aria-current="page"] { font-weight: 400; }
  .dg-panel .nm-mlist a[aria-current="page"]::after { content: none; }
  .nm-mlist a[aria-current="page"] .nm-line::before { content: "You’re here · "; color: var(--plum); }
  .nm-band { display: block; flex: none; position: relative; height: 96px; margin: 32px calc(var(--gut) * -1) 0; overflow: hidden; background: var(--plum); }
  .drawer-end { padding-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  /* site.css shortens every transition to 1ms here, but a 1ms visibility transition (on the panel and, inherited, on
     every link inside it) still starts hidden, so a menu opened from the keyboard couldn't take focus in the same tick.
     Inside the menus and the drawer nothing transitions: everything switches outright. */
  .dd, .dd *, .drawer, .drawer * { transition: none !important; }
  .nm-mark g, .nm-arr, .nm-item { transition: none; }
  .nm-card, .nm-card.is-on { transition: none; transform: none; }
  .nav.nm-morph .dd--nm, .nav.nm-morph .dd--nm.is-open { transition: none; }
}

/* ============================== v11: the Use cases menu, by group ==============================
   Seventeen roles in four groups (Weddings and events · Design and building | Teams · Clients and customers), two
   columns under the lead; each row is the stair mark and the role's name (what it gives the person answering is on
   the card beside it, as before). Same panel, same mosaic and card; the panel widens to hold the columns and tightens
   on short screens so it always fits the window (it scrolls inside, never off the page, below 520px tall). */
.dd--nm-uses { width: min(calc(100vw - var(--gut) * 2), 1160px); }
.nm--uses { grid-template-columns: minmax(0, 1fr) clamp(300px, 30%, 350px); }
.nm--uses .nm-lead .nm-line { max-width: 56ch; }
.nm-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.nm-col { min-width: 0; }
.nm-col > .nm-label + .nm-items + .nm-label { margin-top: 10px; }
.nm-items--names { gap: 0; }
.nm--uses .nm-items--names .nm-item { grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 8px 12px; }
.nm--uses .nm-items--names .nm-item .nm-mark { align-self: center; }
.nm-items--names .nm-mark, .nm-items--names .nm-mark svg { width: 26px; height: 26px; }
.nm--uses .nm-items--names .nm-name { font-size: 22px; line-height: 28px; }
.nm-items--names .nm-item[aria-current="page"] .nm-name::after { content: "You’re here"; margin-left: 10px; font-family: var(--sans); font-size: 14px; letter-spacing: 0; color: var(--plum); }
.nm-h--tpl { font-size: 24px; }
.nm--uses .nm-card .nm-path { margin-top: 16px; gap: 10px; }
.nm--uses .nm-card .nm-k--t { margin-top: 14px; }

@media (max-width: 1180px) {
  .nm--uses { grid-template-columns: minmax(0, 1fr) clamp(280px, 31%, 320px); }
  .nm--uses .nm-items--names .nm-name { font-size: 20px; line-height: 26px; }
  .nm--uses .nm-items--names .nm-item { padding-inline: 10px; column-gap: 12px; }
  .nm--uses .nm-cards { padding: 24px; }
  .nm--uses .nm-card { padding: 24px 22px 22px; }
  .nm-h--tpl { font-size: 22px; }
}
@media (max-height: 860px) and (min-width: 901px) {
  .nm--uses .nm-items--names .nm-item { padding-top: 6px; padding-bottom: 6px; }
  .nm--uses .nm-items--names .nm-name { font-size: 20px; line-height: 26px; }
  .nm--uses .nm-label { padding: 12px 0 4px; }
}
@media (max-height: 700px) and (min-width: 901px) {
  .nm--uses .nm-list { padding-top: 16px; padding-bottom: 12px; }
  .nm--uses .nm-lead { padding-bottom: 10px; }
  .nm--uses .nm-lead-name { font-size: 26px; }
  .nm--uses .nm-lead .nm-line { display: none; }
  .nm--uses .nm-items--names .nm-item { padding-top: 3px; padding-bottom: 3px; }
  .nm--uses .nm-items--names .nm-name { font-size: 18px; line-height: 24px; }
  .nm-items--names .nm-mark, .nm-items--names .nm-mark svg { width: 22px; height: 22px; }
  .nm--uses .nm-items--names .nm-item { grid-template-columns: 22px minmax(0, 1fr); }
  .nm--uses .nm-label { padding: 8px 0 2px; }
  .nm-col > .nm-label + .nm-items + .nm-label { margin-top: 6px; }
  .nm--uses .nm-card .nm-path small { display: none; }
}
/* Never taller than the window: the list scrolls inside the panel (the mosaic and card stay put). */
@media (min-width: 901px) {
  .dd--nm-uses .nm--uses .nm-list { max-height: calc(100vh - var(--nav-h) - 4px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}

/* Phone drawer: the lead, then each group under its own label, names only */
.nm-mlabel { display: none; }
@media (max-width: 900px) {
  .nm-mlabel { display: block; margin: 0; padding: 14px 0 4px; border-top: 1px solid var(--hair); font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--mute); }
  .dg-panel ul.nm-mlist--names { padding-bottom: 8px; }
  .dg-panel .nm-mlist--names a { grid-template-columns: 26px minmax(0, 1fr); align-items: center; padding: 7px 0; }
  .nm-mlist--names .nm-mark { grid-row: auto; margin-top: 0; width: 26px; height: 26px; }
  .nm-mlist--names .nm-mark svg { width: 26px; height: 26px; }
  .nm-mlist--names .nm-name { font-size: 20px; line-height: 1.25; }
  .dg-panel .nm-mlist--names a[aria-current="page"] .nm-name::after { content: " · You’re here"; font-family: var(--sans); font-size: 14px; color: var(--plum); }
  .dg-panel ul.nm-mlist--tpl { border-top: 1px solid var(--hair); padding-top: 8px; padding-bottom: 18px; }
}

/* v11.2 page weight: a closed menu's photos are not fetched until the visitor reaches for the menu. Chrome's lazy
   loading ignores visibility, so the hidden panels (opacity 0, visibility hidden, in the first screen) fetched every
   card photo on every page load (about 0.5 MB on a desktop, and on a phone, where the panels never show). The first
   mouse or pen over the bar, or focus inside it, adds .nm-primed (assets/nav-menu.js) and the photos load while the
   pointer travels to a trigger; an open panel always shows them. */
.nav:not(.nm-primed) .dd:not(.is-open) img { display: none; }

/* still tier: the reduced-motion rules above */
html.mo-still /* site.css shortens every transition to 1ms here,html.mo-still but a 1ms visibility transition (on the panel and,html.mo-still inherited,html.mo-still on
     every link inside it) still starts hidden,html.mo-still so a menu opened from the keyboard couldn't take focus in the same tick.
     Inside the menus and the drawer nothing transitions: everything switches outright. */
  .dd,html.mo-still .dd *,html.mo-still .drawer,html.mo-still .drawer *{transition: none !important;}html.mo-still .nm-mark g,html.mo-still .nm-arr,html.mo-still .nm-item{transition: none;}html.mo-still .nm-card,html.mo-still .nm-card.is-on{transition: none; transform: none;}html.mo-still .nav.nm-morph .dd--nm,html.mo-still .nav.nm-morph .dd--nm.is-open{transition: none;}