/* The Services dropdown (25 Oct 2026; public/assets/js/services-menu.js),
   on every page with the site header. The panel is always light (shell)
   with ink text, over any header colour. Opacity and transform only. */
.nav-services { position: relative; display: flex; }
.nav .nav-trigger { font: inherit; font-size: .9688rem; font-weight: 500; line-height: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 8px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: background-color .3s var(--ease, ease); }
.nav .nav-trigger:hover, .nav .nav-trigger[aria-expanded="true"] { background: color-mix(in srgb, var(--fg, #14201F) 8%, transparent); }
.nav .nav-trigger .chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease, ease); }
.nav .nav-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
.services-menu { position: absolute; top: calc(100% + 10px); left: -8px; z-index: 60; width: 420px; max-width: calc(100vw - 32px); margin: 0; padding: 8px; list-style: none; border-radius: 18px; background: #FBF8F2; color: #14201F; box-shadow: 0 0 0 1px #E2D9C8, 0 28px 56px -24px rgba(20, 32, 31, .4);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s var(--ease, ease), transform .18s var(--ease, ease), visibility 0s linear .18s; }
.nav-services.is-open .services-menu,
html:not(.nav-js) .nav-services:hover .services-menu,
html:not(.nav-js) .nav-services:focus-within .services-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav .services-menu a, .mm-services a { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 14px; text-decoration: none; color: #14201F; }
.nav .services-menu a { padding: 12px; border-radius: 12px; }
.nav .services-menu a:hover, .nav .services-menu a:focus-visible { background: rgba(19, 107, 128, .08); }
.nav .services-menu a[aria-current="page"] { background: rgba(19, 107, 128, .1); }
/* the nav links' underline (aegean.css, site.css) is not for the list's items */
.nav .services-menu a::after { content: none; display: none; }
.sm-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(19, 107, 128, .1); color: #136B80; }
.sm-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sm-text { display: grid; gap: 2px; min-width: 0; }
.sm-text b { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.sm-text span { font-size: .875rem; line-height: 1.4; color: #4F5A57; }
html.motion-off .services-menu, html.motion-off .nav .nav-trigger .chev { transition: none; transform: none; }
@media (prefers-reduced-motion: reduce) { .services-menu, .nav .nav-trigger .chev { transition: none; transform: none; } }

/* The menu sheet on a phone: Services is its own section, then the other links. */
.mobile-menu { max-height: calc(100vh - var(--header-total, 68px)); max-height: calc(100dvh - var(--header-total, 68px)); overflow-y: auto; overscroll-behavior: contain; }
.mm-label { margin: 6px 0 0; padding: 10px 0 4px; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #4F5A57; }
.mm-services { list-style: none; margin: 0; padding: 0 0 6px; border-bottom: 1px solid var(--hair, #E2D9C8); }
.mobile-menu .mm-services a { padding: 10px 0; border-bottom: 0; font-size: 1rem; }
.mobile-menu .mm-services .sm-text b { font-size: 1.0625rem; font-weight: 500; }