/* ============================================================
   Services nav — dropdown (desktop) + accordion (mobile)
   Built against WebsiteSpa-Design-System.md (2 Oct 2026):
     · tokens only — every value comes from the page's own
       --surface / --ink / --accent / --border / --rad set
     · radii: var(--rad) (4px) for the panel, items and controls —
       the live site uses 4px for cards AND menus (the design doc's
       6px card radius is marked "proposed")
     · no shadow: the system says shadows are not a motif — the panel
       separates with a 1px --border outline on the raised surface
     · nav text: .76rem / 600 / uppercase / .05em tracking, brightened
       on hover, 2px --accent underline when the section is current
     · motion 140–200ms, colour/border only, reduced-motion respected
     · focus-visible: 2px --accent ring, 2px offset
   ============================================================ */

.nav-svc{position:relative;display:inline-flex;align-items:center}

.nav-svc-btn{
  font:inherit;
  font-size:.76rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ink-2);
  background:none;border:0;margin:0;
  padding:10px 0;                 /* ~40px hit area, same visual height */
  display:inline-flex;align-items:center;gap:6px;
  cursor:pointer;
  transition:color 140ms var(--ease,ease);
}
.nav-svc-btn:hover,.nav-svc-btn[aria-expanded="true"]{color:var(--ink)}
.nav-svc-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav-svc.is-on .nav-svc-btn{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}

.nav-svc-caret{
  width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform 200ms var(--ease,ease);
}
.nav-svc-btn[aria-expanded="true"] .nav-svc-caret{transform:translateY(0) rotate(225deg)}

/* ---------- panel ---------- */
/* Positioned by nav-services.js: the panel is centred on the Services item and then
   clamped inside the viewport, so it always opens UNDER the trigger instead of
   hanging off to the left of it (it used to be right-anchored and ran 33px off-screen
   at 1280px). The CSS values below are the no-JS fallback. */
.svc-menu{
  position:absolute;
  top:calc(100% + 14px);
  left:0;
  z-index:60;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px 22px;
  padding:22px 24px 16px;
  width:min(650px,calc(100vw - 40px));
  max-width:calc(100vw - 40px);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--rad);
}
.svc-menu[hidden]{display:none}

/* hairline between the three groups — editorial, same 1px --border-subtle divider
   the rest of the site uses, so the columns read as organised rather than busy */
.svc-col + .svc-col{border-left:1px solid var(--border);padding-left:22px}

/* hover bridge so the pointer can travel from the button into the panel */
.svc-menu::before{
  content:"";position:absolute;left:0;right:0;top:-14px;height:14px;
}

/* the page's own `.nav-links a` rule forces uppercase + .76rem + .05em on EVERY
   anchor inside the nav list, which made this menu shout. Reset case, tracking and
   size for menu copy — the category label (.svc-h) and the badges (.svc-tag) keep
   their own uppercase mono rules, so they are excluded here. */
.nav-svc .svc-menu a,
.nav-svc .svc-menu a strong,
.nav-svc .svc-menu a span:not(.svc-tag){text-transform:none;letter-spacing:normal}
.nav-svc .svc-menu a{font-size:.875rem;font-weight:400;color:var(--ink-2)}

/* group label — mono + tracking keeps it a quiet label; sentence case per the
   owner's call (no shouting caps inside the menu). Badges below stay uppercase:
   they are 3–4 character chips, the one place the design system asks for it. */
.svc-h{
  font-family:var(--font-mono);
  font-size:10px;font-weight:500;
  letter-spacing:.12em;
  color:var(--muted);margin:0 0 6px;
}
.svc-col a{
  display:block;
  padding:8px 10px;
  margin:0 -10px;
  border-radius:var(--rad);
  text-decoration:none;
  color:var(--ink-2);
  font-size:.875rem;
  line-height:1.35;
  transition:background 140ms var(--ease,ease),color 140ms var(--ease,ease);
}
.svc-col a:hover{background:var(--surface-alt);color:var(--ink)}
.svc-col a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.svc-col a strong{display:block;font-weight:600;color:var(--ink);font-size:.9rem;letter-spacing:-.005em}
.svc-col a span.svc-d{display:block;color:var(--muted);font-size:.78rem;margin-top:2px;font-weight:400}

/* category badge — mono uppercase, blue text on the soft blue backing */
.svc-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:10px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;
  background:var(--surface-alt);color:var(--muted);
  margin-left:6px;vertical-align:1px;
}
.svc-tag.free,.svc-tag.new{background:var(--accent-soft);color:var(--accent-text)}
.svc-tag.soon{background:var(--surface-alt);color:var(--muted)}

.svc-foot{
  grid-column:1/-1;
  border-top:1px solid var(--border);
  margin-top:8px;padding-top:12px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:.8rem;color:var(--muted);
}
.svc-foot a{color:var(--accent-text);font-weight:600;text-decoration:none}
.svc-foot a:hover{text-decoration:underline}
.svc-foot a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- mobile accordion (<=860px) ---------- */
.svc-acc{display:none}
@media(max-width:860px){
  /* the site's own `.nav-links.open li{display:block}` outranks a bare class,
     so match its specificity (and win by cascade order / !important) */
  .nav-links li.nav-svc{display:none !important}
  .svc-acc{display:block;width:100%}
  .svc-acc details{border-top:1px solid var(--border)}
  .svc-acc summary{
    list-style:none;cursor:pointer;
    padding:14px 0;font-size:.8rem;font-weight:600;letter-spacing:normal;color:var(--ink-2);
    display:flex;align-items:center;justify-content:space-between;
  }
  .svc-acc summary::-webkit-details-marker{display:none}
  .svc-acc summary::after{content:"+";font-size:1rem;color:var(--muted)}
  .svc-acc details[open] summary::after{content:"–"}
  .svc-acc summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .svc-acc ul{list-style:none;margin:0 0 10px;padding:0 0 0 12px}
  .svc-acc li a{display:block;padding:11px 0;font-size:.875rem;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--border)}
  .svc-acc li:last-child a{border-bottom:0}
  .svc-acc li a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
}

@media(prefers-reduced-motion:reduce){
  .nav-svc-btn,.nav-svc-caret,.svc-col a{transition-duration:.01ms}
}

/* Narrow desktop / small laptop (the accordion takes over at 861px): three columns
   would be ~100px wide here, so drop to two and lose the dividers. */
@media(max-width:1150px) and (min-width:861px){
  .svc-menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 20px}
  .svc-col + .svc-col{border-left:0;padding-left:0}
  .svc-col:nth-child(2){padding-left:20px;border-left:1px solid var(--border)}
}