/* GravenReach Media: the shared top bar on the ten /work service pages (24 Oct 2026).
   tools/postbuild.mjs writes the markup at the top of each page, from the same nav list and WhatsApp number the home
   page renders (src/app/content.ts), so a visitor who opens a service page keeps the home page's bar: the mark, the
   five links, WhatsApp, the profile plates (step 4 adds them beside "Talk to us") and, on a phone, Menu.
   The bar carries its own yellow ground; each page keeps its own colours below it. Measurements follow the home
   header (signal.module.css .header): 84px tall, 76px at 700px and below, links hidden at 860px and below.
   Loaded after /work/_shared/tokens.css, which supplies the faces and the .pf plate-and-face hook.
   Nothing here is below 16px. Motion is transform only and stops for prefers-reduced-motion. */

.grm-head { --grm-gut: max(16px, 4.5vw, calc((100vw - 1360px) / 2)); --grm-red: #D7262D; --grm-ink: #151515;
  box-sizing: border-box; position: relative; z-index: 60; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; height: 84px; margin: 0; padding: 0 var(--grm-gut); background: #FFC20E; color: var(--grm-ink);
  border-bottom: 3px solid var(--grm-ink); font-family: var(--font-display, "Archivo", system-ui, sans-serif);
  font-size: 17px; line-height: 1.2; text-align: left; }
.grm-head *, .grm-head *::before, .grm-head *::after { box-sizing: border-box; }
.grm-head a { color: var(--grm-ink); text-decoration: none; }
.grm-head ul { margin: 0; padding: 0; list-style: none; }

/* the mark and the stacked wordmark, as on the home page */
.grm-head .grm-head-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.grm-head .grm-head-brand svg { display: block; width: 40px; height: 40px; flex: none; color: var(--grm-red); transition: transform 300ms var(--ease, ease); }
.grm-head .grm-head-brand > span { font-size: 24px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.grm-head .grm-head-brand > span > span { display: block; font-size: 16px; font-weight: 600; letter-spacing: .28em; margin-top: 4px; }

/* the five links: a red line draws under each on hover and focus */
.grm-head .grm-head-nav { display: flex; gap: 34px; font-size: 17px; font-weight: 650; }
.grm-head .grm-head-nav a, .grm-head .grm-head-menu summary { position: relative; }
.grm-head .grm-head-nav a { padding: 10px 0; }
.grm-head .grm-head-nav a::after, .grm-head .grm-head-menu summary::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 3px; background: var(--grm-red);
  transform: scaleX(0); transform-origin: right; transition: transform 260ms var(--ease, ease); pointer-events: none; }

.grm-head .grm-head-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.grm-head .grm-head-wa { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 650; }
.grm-head .grm-head-wa svg { display: block; width: 16px; height: 16px; flex: none; transition: transform 260ms var(--ease, ease); }

/* "Talk to us": ink face on a red plate (tokens.css .pf) */
.grm-head a.grm-head-cta { --pf-plate: var(--grm-red); display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: var(--grm-ink); color: #FFC20E; font-size: 16px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.grm-head a.grm-head-cta svg { display: block; width: 18px; height: 18px; flex: none; }
/* step 4 wraps the link with the profile plates; in the bar they share its line */
.grm-head .grm-talk { margin: 0; flex-wrap: nowrap; }
.grm-head .grm-talk > .grm-soc { flex-wrap: nowrap; }
.grm-head .grm-talk > .grm-soc a { min-height: 46px; }

/* Menu, for phones: a native disclosure, so it works before any script runs */
.grm-head .grm-head-menu { display: none; }
.grm-head .grm-head-menu summary { display: block; min-height: 44px; padding: 10px 4px 0; font-size: 16px; font-weight: 700;
  border-bottom: 3px solid currentColor; cursor: pointer; list-style: none; }
.grm-head .grm-head-menu summary::-webkit-details-marker { display: none; }
.grm-head .grm-head-menu summary::after { bottom: -3px; }
.grm-head .grm-head-menu .grm-m-close { display: none; }
.grm-head .grm-head-menu[open] .grm-m-open { display: none; }
.grm-head .grm-head-menu[open] .grm-m-close { display: inline; }
.grm-head .grm-head-panel { position: absolute; top: 100%; left: 0; width: 100%; padding: 8px var(--grm-gut) 24px; background: #FFC20E;
  border-top: 3px solid var(--grm-ink); border-bottom: 3px solid var(--grm-ink); box-shadow: 0 24px 40px #15151540; }
.grm-head .grm-head-panel > a { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; font-size: 28px;
  font-weight: 800; letter-spacing: -.03em; line-height: 1.1; border-bottom: 2px solid #15151559; }
.grm-head .grm-head-panel > a svg { display: block; width: 24px; height: 24px; flex: none; color: var(--grm-red); transition: transform 260ms var(--ease, ease); }
.grm-head .grm-head-panel .grm-soc { gap: 12px; padding-top: 22px; }

/* hover (fine pointers only), keyboard focus mirrors it, press sinks */
@media (hover: hover) and (pointer: fine) {
  .grm-head .grm-head-brand:hover svg { transform: rotate(-8deg) scale(1.06); }
  .grm-head .grm-head-nav a:hover::after, .grm-head .grm-head-menu summary:hover::after { transform: scaleX(1); transform-origin: left; }
  .grm-head .grm-head-wa:hover svg { transform: translate(3px, -3px); }
  .grm-head .grm-head-panel > a:hover svg { transform: translate(4px, -4px); }
}
.grm-head a:focus-visible, .grm-head summary:focus-visible { outline: 3px solid var(--grm-ink); outline-offset: 4px; }
.grm-head a.grm-head-cta:focus-visible { outline-offset: 7px; }
.grm-head .grm-head-brand:focus-visible svg { transform: rotate(-8deg) scale(1.06); }
.grm-head .grm-head-nav a:focus-visible::after, .grm-head .grm-head-menu summary:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.grm-head .grm-head-wa:focus-visible svg { transform: translate(3px, -3px); }
.grm-head .grm-head-panel > a:focus-visible svg { transform: translate(4px, -4px); }
.grm-head .grm-head-brand:active svg { transform: rotate(-8deg) scale(.94); transition-duration: 80ms; }
.grm-head .grm-head-nav a:active, .grm-head .grm-head-menu summary:active { translate: 2px 2px; }
.grm-head .grm-head-nav a:active::after, .grm-head .grm-head-menu summary:active::after { transform: scaleX(1); transform-origin: left; transition-duration: 80ms; }
.grm-head .grm-head-panel > a:active svg { transform: translate(4px, -4px); transition-duration: 80ms; }

/* same steps as the home header */
@media (max-width: 1100px) {
  .grm-head .grm-head-nav { gap: 22px; }
}
@media (max-width: 1100px) and (min-width: 861px) { .grm-head .grm-talk > .grm-soc { display: none; } }
@media (max-width: 860px) {
  .grm-head .grm-head-nav, .grm-head .grm-head-wa { display: none; }
  .grm-head .grm-head-menu { display: block; }
}
@media (max-width: 700px) {
  .grm-head { --grm-gut: 16px; height: 76px; }
  .grm-head .grm-head-brand { gap: 8px; }
  .grm-head .grm-head-brand svg { width: 34px; height: 34px; }
  .grm-head .grm-head-brand > span { font-size: 20px; }
  .grm-head .grm-head-actions { gap: 12px; }
  .grm-head a.grm-head-cta { padding: 10px 12px; }
  .grm-head a.grm-head-cta svg { display: none; }
}
@media (max-width: 359px) {
  .grm-head .grm-head-brand > span { font-size: 18px; }
  .grm-head .grm-head-brand > span > span { letter-spacing: .2em; }
}
@media (prefers-reduced-motion: reduce) {
  .grm-head *, .grm-head *::before, .grm-head *::after { transition: none !important; }
}

/* Tap to call (24 Oct 2026): "Call 98185 39600" beside WhatsApp; on a phone the number folds away and "Call" stays,
   so the bar keeps a one-tap call on every service page. The Menu panel also carries the full number. */
.grm-head a.grm-head-tel { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; white-space: nowrap; }
@media (max-width: 1100px) { .grm-head a.grm-head-tel > span { display: none; } }
@media (max-width: 380px) { .grm-head a.grm-head-tel { display: none; } }

/* The visible breadcrumb trail under the bar, from the page's BreadcrumbList markup. */
.grm-crumbs { box-sizing: border-box; padding: 10px max(16px, 4.5vw, calc((100vw - 1360px) / 2)); background: #EFEADF; color: #151515;
  border-bottom: 1.5px solid #151515; font-family: var(--font-mono, "Space Mono", ui-monospace, monospace); font-size: 16px; line-height: 1.4; }
.grm-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; }
.grm-crumbs li + li::before { content: "/"; margin-right: 10px; opacity: .7; }
.grm-crumbs a { color: inherit; text-underline-offset: 3px; }