/*
 * NYC Luxury Club local-only shared nav harness (NLC-DEV-20260826-16).
 *
 * Local test prototype only. This is NOT the production WordPress/UberMenu
 * nav implementation. Live WordPress continues to use UberMenu; this file
 * exists so `.nlc-service` pages can be locally tested with a shared top
 * nav pattern (visual direction borrowed from the accepted Homepage nav)
 * before a later, separately-scoped lane translates the stable hook names
 * below into a live UberMenu integration.
 *
 * Scope: every selector here is scoped to `.nlc-service-nav` and its
 * descendants. Do not add a global reset, Homepage-only class names
 * (`.nlc-nav`, `.nlc-nav-bg`, `.nlc-theme-toggle`, `.cur`, `.cur-ring`,
 * `.btn-gold`, `.btn-outline`, `.btn-ghost`), custom-cursor rules, or any
 * rule outside this nav's own scope except the single minimal
 * `.nlc-service-nav-space` top-spacing utility documented at the bottom
 * of this file.
 *
 * Stable hooks/classes for a later live UberMenu mirror:
 *   #nlcServiceNav, .nlc-service-nav,
 *   .nlc-service-nav__brand, .nlc-service-nav__links,
 *   .nlc-service-nav__link, .nlc-service-nav__phone,
 *   .nlc-service-nav__theme-toggle, .nlc-service-nav__theme-toggle-thumb,
 *   .nlc-service-nav__book
 */

/*
 * NLC-DEV-20260826-16-C01: scoped token context for the nav harness.
 *
 * #nlcServiceNav is inserted as a sibling before <main class="nlc-service
 * ...">, not as a descendant of it. CSS custom properties only cascade to
 * descendants, so the .nlc-service-scoped tokens in
 * shared/site-foundation.css and shared/service-page.css never reached
 * the nav, leaving every var(--nlc-*) reference below unresolved and the
 * nav unreadable in dark mode. This block re-declares, at the same
 * literal values, only the tokens this file actually uses, scoped to the
 * nav's own selector so it resolves correctly regardless of its position
 * relative to .nlc-service. Do not add a global :root block.
 *
 * NLC-DEV-20260828-07: the former #nlcServiceNavBg overlay element (and
 * its matching selector here) was removed with the rest of the .stuck
 * scroll-surface layer; #nlcServiceNav is now the only element needing
 * this scoped token context.
 */
#nlcServiceNav {
  --nlc-ink: #0a0a0a;
  --nlc-surface: #111010;
  --nlc-cream: #f2ebd9;
  --nlc-cream-dim: #b8ae9c;
  --nlc-cream-ghost: #a19587;
  --nlc-accent: #076ec6;
  --nlc-accent-bright: #69b5f5;
  --nlc-accent-deep: #055aa4;
  --nlc-on-accent-alt: #ffffff;
  --nlc-focus: #69b5f5;
  --nlc-rule: rgba(255, 255, 255, 0.08);
  --nlc-rule-strong: rgba(7, 110, 198, 0.55);
  --nlc-heading: "Syne", "Helvetica Neue", Arial, sans-serif;
}

/*
 * NLC-DEV-20260828-08: --nlc-surface (dark) and --nlc-card plus a
 * corrected --nlc-rule (light) are added so the dropdown panel can be
 * visually distinct from the page in both themes. Confirmed live before
 * this change: in light mode the dropdown panel's background
 * (var(--nlc-ink)) was byte-identical to the page background
 * (rgb(245, 240, 230) on both, zero shadow), and --nlc-rule was never
 * redeclared for light mode at all, so the existing border-top separators
 * resolved to a white-based rgba nearly invisible on a light card. Values
 * match STYLE.md's already-documented dark Surface (#111010) and light
 * Card (#E4DDD0) / Divider (rgba(26,22,18,0.10)) tokens exactly.
 */
[data-theme="light"] #nlcServiceNav {
  --nlc-ink: #f5f0e6;
  --nlc-card: #e4ddd0;
  --nlc-cream: #1a1612;
  --nlc-cream-dim: #1c1915;
  --nlc-cream-ghost: #6e6258;
  --nlc-rule: rgba(26, 22, 18, 0.1);
}

/*
 * NLC-DEV-20260828-06: always-on smoked-glass surface, present from page
 * load rather than only after a scroll-triggered state (NLC-DEV-20260828-05
 * confirmed the nav was fully transparent, background: rgba(0,0,0,0) and
 * backdrop-filter: none, at scrollY: 0). Restrained "tinted luxury glass /
 * black car window tint" values only: a plain near-black translucent
 * background, a plain blur (no saturate/brightness boost), and the
 * existing quiet --nlc-rule hairline -- no box-shadow, no gradient, no
 * glow.
 *
 * NLC-DEV-20260828-06-C01 correction: the base layer's own
 * `transition: background 0.35s, backdrop-filter 0.35s` made the very
 * first paint fade in from the browser's default transparent start value
 * instead of rendering the smoked-glass surface instantly. The base layer
 * applies with no transition -- readability is present the instant the
 * element paints, in both themes. A light-mode variant uses the accepted
 * --nlc-card tone (rgb(228, 221, 208)) at the same translucency as the
 * dark base, so [data-theme="light"] gets a smoked warm-card glass
 * surface instead of inheriting the dark rgba value. Both themes resolve
 * purely from the existing [data-theme] attribute selector, so
 * nav-harness.js's existing synchronous `root.setAttribute("data-theme",
 * theme)` call (already used for the theme toggle, unedited here) updates
 * the nav surface immediately with no additional JS.
 *
 * NLC-DEV-20260828-07 simplification: the separate #nlcServiceNavBg
 * overlay element and its .stuck scroll-intensification rules (previously
 * declared below this block) are removed entirely. #nlcServiceNav's own
 * always-on background is now the nav's only visual surface source, with
 * no scroll-dependent state at all -- confirmed safe by the accepted
 * preflight (docs/website/qa/local-nav-surface-simplification-preflight-
 * 2026-08-28.md): #nlcServiceNav.stuck already had zero matching CSS rule
 * before this change, so the scroll listener's other half was already
 * inert. Both theme opacities move from 0.72 to 0.86 -- not a readability
 * fix (WCAG contrast at 0.72 already cleared AAA even against a
 * worst-case bright-image sample, per the preflight's computed evidence),
 * but a stability margin now that no scroll-triggered intensification
 * exists to add contrast on busier content later.
 */
#nlcServiceNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding: 1.5rem 3rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2.25rem;
  max-width: 1920px;
  margin: 0 auto;
  background: rgba(10, 10, 10, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--nlc-rule);
}

[data-theme="light"] #nlcServiceNav {
  background: rgba(228, 221, 208, 0.86);
}

@supports not (backdrop-filter: blur(1px)) {
  #nlcServiceNav {
    background: rgba(10, 10, 10, 0.94);
  }

  [data-theme="light"] #nlcServiceNav {
    background: rgba(228, 221, 208, 0.94);
  }
}

.nlc-service-nav__brand {
  font-family: var(--nlc-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--nlc-cream);
  text-decoration: none;
}

.nlc-service-nav__brand span {
  color: var(--nlc-accent);
}

.nlc-service-nav__links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  margin-left: auto;
}

/*
 * NLC-DEV-20260828-08: desktop link/phone type increased from 0.62rem and
 * 0.6rem for readability (confirmed live at the tightest desktop width,
 * 1100px: Book Now's right edge lands with 63px of clearance, zero
 * overflow, zero wrapping). Letter-spacing reduced slightly alongside the
 * larger size so tracked-uppercase type stays comfortable to read.
 */
.nlc-service-nav__link {
  font-family: var(--nlc-heading);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nlc-cream-dim);
  text-decoration: none;
  transition: color 0.25s;
}

.nlc-service-nav__link:hover {
  color: var(--nlc-accent-bright);
}

/*
 * NLC-DEV-20260828-09: light-mode dropdown hover/focus correction. The
 * bright accent (var(--nlc-accent-bright), #69b5f5) reads clearly on the
 * near-black dark surface but is a low-contrast pastel on the light
 * warm-card surface -- switching to the darker, already-declared
 * var(--nlc-accent-deep) for dropdown-row hover/focus in light mode keeps
 * the same signal-blue accent family without introducing a new token.
 *
 * NLC-DEV-20260828-17 / -17-C01: the NLC-DEV-20260828-10 left accent bar
 * (and its unconditionally-reserved transparent border-left) is removed
 * per user visual review -- see the edge-to-edge hover/focus `background`
 * declared directly on the compact dropdown row rules below, which now
 * supplies the row's interactive affordance in both themes instead.
 * Light-mode hover/focus text keeps the darker accent-deep tone; only the
 * border-left mechanism is gone.
 */
[data-theme="light"] .nlc-service-nav__menu .nlc-service-nav__link:hover,
[data-theme="light"] .nlc-service-nav__menu .nlc-service-nav__link:focus-visible {
  color: var(--nlc-accent-deep);
}

.nlc-service-nav__link:focus-visible,
.nlc-service-nav__phone:focus-visible,
.nlc-service-nav__book:focus-visible {
  outline: 2px solid var(--nlc-focus);
  outline-offset: 3px;
}

/*
 * NLC-DEV-20260828-10: the phone link gets white-space: nowrap and
 * flex-shrink: 0 unconditionally. Root cause confirmed live in the
 * accepted preflight: without these, the flex row shrinks the phone
 * link's box below its own text width in the 1106px-1175px desktop
 * sub-range (the phone link had no flex-shrink/white-space guard, unlike
 * every other nav control), forcing the phone number to wrap internally
 * onto 2-3 lines -- not a breakpoint problem, since the row itself never
 * overflows the viewport at any of those widths. This selector-only fix
 * is unconditional (not media-query-scoped) because a nowrap/no-shrink
 * phone number is correct at every width the base rule applies to; the
 * compact dropdown's own wider row width makes this a no-op improvement
 * there, not a regression.
 */
.nlc-service-nav__phone {
  font-family: var(--nlc-heading);
  font-size: 0.68rem;
  font-weight: 500;
  flex-shrink: 0;
  letter-spacing: 0.08em;
  color: var(--nlc-cream-ghost);
  text-decoration: none;
  transition: color 0.25s;
  white-space: nowrap;
}

.nlc-service-nav__phone:hover {
  color: var(--nlc-cream);
}

/*
 * NLC-DEV-20260828-08: small wrapper so the existing theme-toggle button
 * can sit next to a visible, decorative label inside the flex-column
 * dropdown, addressing the finding that the dark/light toggle is not
 * obvious to casual users. The label is aria-hidden; the button's existing
 * aria-label="Toggle light/dark mode" remains the sole accessible name,
 * unedited.
 *
 * NLC-DEV-20260828-09 correction: the label text changed from "Display" to
 * "Theme", and now hides at desktop widths (display: none by default,
 * shown only inside the compact-dropdown @media block below) since the
 * toggle is already visible unlabeled in the desktop row via the shared
 * .nlc-service-nav__menu { display: contents } mechanism, and a bare icon
 * switch there reads as an ordinary control without needing a caption --
 * the label's job is specifically the mobile/tablet dropdown, where
 * casual users are most likely to be unsure what the control does.
 */
.nlc-service-nav__theme-field {
  align-items: center;
  display: flex;
  gap: 0.6rem;
}

.nlc-service-nav__theme-label {
  color: var(--nlc-cream-ghost);
  display: none;
  font-family: var(--nlc-heading);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nlc-service-nav__theme-toggle {
  width: 36px;
  height: 20px;
  background: var(--nlc-rule);
  border: 1px solid var(--nlc-rule);
  border-radius: 20px;
  position: relative;
  flex-shrink: 0;
  padding: 0;
  appearance: none;
  cursor: pointer;
}

/*
 * NLC-DEV-20260828-11: hover/focus corrected to match the accepted
 * Homepage toggle's translucent-ring feel (legacy-wordpress/pages/homepage
 * /styles.css: border-color: var(--nlc-rule-blue) rgba(7,110,198,0.25-0.3),
 * background: var(--nlc-blue-dim) rgba(7,110,198,0.12-0.15) -- a soft
 * blue-tinted glow, not a solid fill) instead of the previous solid
 * var(--nlc-accent-deep) (#055aa4) background, which read as a heavier,
 * more opaque "filled pill" than the Homepage reference, especially
 * noticeable in light mode. The border keeps the already-declared local
 * var(--nlc-rule-strong) (rgba(7,110,198,0.55)) as the visible ring.
 *
 * NLC-DEV-20260828-12 correction: the background now matches Homepage's
 * --nlc-blue-dim value directly, `rgba(7, 110, 198, 0.15)`, as a literal
 * (not `var(--nlc-blue-dim)` -- that token is declared only in Homepage's
 * own local stylesheet, not in this shared service nav harness, and
 * importing the token name here would blur that ownership boundary even
 * though the two files happen to want the same value). var(--nlc-rule-
 * strong) at 0.55 alpha was closer to the ring/border weight than the
 * soft fill Homepage actually uses for the background specifically. The
 * border stays on var(--nlc-rule-strong) -- a visibly stronger ring than
 * the new softer fill, matching Homepage's own border/background alpha
 * relationship (its border is roughly 2x its background's alpha too), so
 * no conflict between the two values.
 */
.nlc-service-nav__theme-toggle:hover {
  background: rgba(7, 110, 198, 0.15);
  border-color: var(--nlc-rule-strong);
}

.nlc-service-nav__theme-toggle:focus-visible {
  outline: 2px solid var(--nlc-focus);
  outline-offset: 3px;
}

.nlc-service-nav__theme-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--nlc-accent);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), background 0.3s;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nlc-service-nav__theme-toggle-thumb svg {
  width: 8px;
  height: 8px;
  fill: var(--nlc-ink);
  transition: opacity 0.2s;
}

.nlc-service-nav__theme-toggle.is-light .nlc-service-nav__theme-toggle-thumb {
  transform: translateX(16px);
}

.nlc-service-nav__theme-toggle .icon-moon {
  opacity: 1;
}

.nlc-service-nav__theme-toggle .icon-sun {
  opacity: 0;
  position: absolute;
}

.nlc-service-nav__theme-toggle.is-light .icon-moon {
  opacity: 0;
}

.nlc-service-nav__theme-toggle.is-light .icon-sun {
  opacity: 1;
}

/*
 * NLC-DEV-20260828-11: same fix pattern as -10's phone no-wrap correction.
 * .nlc-service-nav__book had no white-space/flex-shrink guard, so the
 * flex row could compress it below its own text width at tight desktop
 * widths, wrapping "BOOK NOW" onto "BOOK" / "NOW". Unconditional (not
 * media-query-scoped), matching the phone fix, since a nowrap Book Now
 * button is correct at every width the base rule applies to.
 */
.nlc-service-nav__book {
  font-family: var(--nlc-heading);
  font-size: 0.6rem;
  font-weight: 600;
  flex-shrink: 0;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nlc-on-accent-alt);
  background: var(--nlc-accent);
  padding: 0.55rem 1.3rem;
  text-decoration: none;
  transition: background 0.25s;
  white-space: nowrap;
}

/*
 * NLC-DEV-20260828-04: the decorative calendar icon is hidden by default
 * (desktop/tablet and mobile widths above the 430px icon breakpoint show
 * the full "Book Now" text); the max-width: 430px block below reveals it
 * and visually hides .nlc-service-nav__book-label in its place.
 */
.nlc-service-nav__book-icon {
  display: none;
}

.nlc-service-nav__book:hover {
  background: var(--nlc-accent-deep);
}

/*
 * NLC-DEV-20260827-18: mobile menu-toggle button and dropdown panel.
 * Hidden/inert by default (desktop/tablet); active only inside the
 * existing max-width: 767px breakpoint below.
 *
 * .nlc-service-nav__menu wraps the existing .nlc-service-nav__link and
 * .nlc-service-nav__phone elements (already present in the DOM, never
 * duplicated). At desktop/tablet it uses `display: contents` so it adds
 * no box of its own and the existing .nlc-service-nav__links flex gap/
 * alignment is byte-for-byte unchanged from before this lane. At mobile,
 * when NLC-DEV-20260826-18's .nlc-service-nav--menu-open state class is
 * present on #nlcServiceNav, it becomes an absolutely positioned panel
 * anchored below the fixed nav bar -- an overlay, not a growing box, so
 * it does not push #nlcServiceNav taller and does not require the page's
 * static top padding to change. Local prototype only; not the production
 * WordPress/UberMenu nav.
 *
 * NLC-DEV-20260827-21 update: the menu-toggle button and Book Now link
 * are now direct #nlcServiceNav children (mobile-only left/right zones)
 * instead of siblings inside .nlc-service-nav__links, and the theme
 * toggle now lives inside .nlc-service-nav__menu as its final item (the
 * approved "toggle near the bottom" order), joining the shared
 * display: contents mechanism at desktop/tablet and the dropdown column
 * at mobile. About/Contact links reuse the existing .nlc-service-nav__link
 * class inside the same wrapper, so no new close-on-click or spacing rule
 * is required for them.
 */
.nlc-service-nav__menu-toggle {
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  display: none;
  flex-direction: column;
  flex-shrink: 0;
  gap: 5px;
  height: 32px;
  justify-content: center;
  padding: 0;
  width: 32px;
}

.nlc-service-nav__menu-toggle-bar {
  background: var(--nlc-cream);
  display: block;
  height: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
  width: 20px;
}

.nlc-service-nav__menu-toggle:focus-visible {
  outline: 2px solid var(--nlc-focus);
  outline-offset: 3px;
}

#nlcServiceNav.nlc-service-nav--menu-open .nlc-service-nav__menu-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

#nlcServiceNav.nlc-service-nav--menu-open .nlc-service-nav__menu-toggle-bar:nth-child(2) {
  opacity: 0;
}

#nlcServiceNav.nlc-service-nav--menu-open .nlc-service-nav__menu-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nlc-service-nav__menu {
  display: contents;
}

/*
 * NLC-DEV-20260828-02: deliberate three-equal-zone mobile top row, replacing
 * NLC-DEV-20260828-01's flex-leftover-space approach after further visual
 * review found the wordmark still read as optically off-center (it was
 * centered in whatever space was left between two unequal-width
 * neighbors, not in a true equal zone). Every child placed in this row
 * gets an explicit `grid-column` AND `grid-row: 1` -- the earlier CSS Grid
 * attempt in `-01` failed because .nlc-service-nav__links's explicit
 * row/column span, combined with the hamburger/Book Now having NO explicit
 * grid-row, triggered auto-placement to push them onto a second implicit
 * row. Giving every item an explicit row here is deliberate placement, not
 * auto-placement, and avoids that failure mode entirely.
 *
 * NLC-DEV-20260828-06 update: this compact hamburger/dropdown layout now
 * extends through max-width: 1099px (previously 767px) so the row never
 * falls back to the tightly-packed full horizontal link list at
 * tablet-ish widths (NLC-DEV-20260828-05 measured zero literal overlap in
 * that range, but the row was proportionally cramped, especially where
 * the old 768px-1023px de-emphasis band snapped back to full-size type at
 * exactly 1024px). The wordmark's font-size/letter-spacing now use
 * `clamp()` so it scales up smoothly toward its full desktop size as the
 * viewport widens through this extended range, instead of staying pinned
 * at its narrow-phone size inside much wider equal columns -- a minimal,
 * targeted usability fix, not a full proportional redesign.
 */
@media (max-width: 1099px) {
  #nlcServiceNav {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    padding: 1.25rem 1.5rem;
  }

  .nlc-service-nav__menu-toggle {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .nlc-service-nav__brand {
    font-size: clamp(0.42rem, 1.6vw, 0.68rem);
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    letter-spacing: clamp(0.1em, 0.4vw, 0.26em);
    min-width: 0;
    text-align: center;
    white-space: nowrap;
  }

  .nlc-service-nav__book {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .nlc-service-nav__links {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-left: 0;
  }

  /*
   * NLC-DEV-20260828-08: the dropdown panel now uses a one-step-lifted
   * surface tone in each theme (var(--nlc-surface) dark / var(--nlc-card)
   * light) instead of var(--nlc-ink), which was byte-identical to the
   * page background in light mode (confirmed live: rgb(245,240,230) on
   * both, zero shadow) and only marginally distinct from the page in dark
   * mode. A restrained warm-toned shadow (no glow, no gradient) adds the
   * "layered" feel requested in both themes.
   *
   * NLC-DEV-20260828-09 correction: separation from the navbar above now
   * comes from the panel container itself (a quiet top hairline, in
   * addition to the existing shadow) rather than from a border-top on the
   * first dropdown row, which read as a stray line under the panel edge
   * rather than a deliberate row separator. Row separators (below) now use
   * border-bottom between rows instead of border-top on every row.
   */
  /*
   * NLC-DEV-20260828-17-C02: horizontal padding moved off the menu
   * container and onto each row item (link/phone/theme-field) below, so
   * the row hover/focus background (-17-C01) can fill the full dropdown
   * panel width instead of stopping at the container's old inner padding.
   * Vertical top/bottom padding is preserved unchanged.
   */
  .nlc-service-nav__menu {
    background: var(--nlc-surface);
    border-bottom: 1px solid var(--nlc-rule);
    border-top: 1px solid var(--nlc-rule);
    box-shadow: 0 12px 28px rgba(26, 22, 18, 0.18);
    display: none;
    flex-direction: column;
    left: 0;
    padding-block: 0.5rem 1.25rem;
    padding-inline: 0;
    position: absolute;
    right: 0;
    top: 100%;
  }

  [data-theme="light"] .nlc-service-nav__menu {
    background: var(--nlc-card);
  }

  #nlcServiceNav.nlc-service-nav--menu-open .nlc-service-nav__menu {
    display: flex;
  }

  /*
   * NLC-DEV-20260828-08: dropdown rows enlarged into row-like touch
   * targets (font-size 0.85rem, line-height 1.4, padding-block 1.15rem,
   * up from the inherited 0.62rem/default-line-height/1rem) and brightened
   * from var(--nlc-cream-dim) to var(--nlc-cream) to fix the "too faint"
   * finding. The separator border already resolves correctly in both
   * themes via var(--nlc-rule), now that --nlc-rule has a light-mode value
   * (previously unset, leaving light-mode separators invisible).
   *
   * NLC-DEV-20260828-09: separators moved to border-bottom (one shared
   * rule for links and phone) so they read as row dividers between items
   * rather than a top border sitting under the panel edge on the first
   * row; the last row (phone, immediately before the theme field) keeps
   * its own bottom border so the divider rhythm continues right up to the
   * theme toggle. Light mode's link hover/focus text color is corrected
   * separately above (var(--nlc-accent-deep) instead of the low-contrast
   * bright accent).
   *
   * NLC-DEV-20260828-17-C01: after user visual review rejected the -17
   * inset ::before highlight, the hover/focus background is restored
   * directly on the row/link/phone element itself, filling the row
   * edge-to-edge within the dropdown content area (no separate pseudo
   * layer, no position/z-index stacking-context rules). The no-left-rail
   * decision from -17 stays: no border-left is reintroduced.
   *
   * NLC-DEV-20260828-17-C02: padding-inline (1.5rem, the exact value
   * removed from .nlc-service-nav__menu's own horizontal padding above)
   * moves onto each row item here, so the row's own background box now
   * spans the full dropdown panel width and the hover/focus fill reaches
   * both edges, while the text sits at the same horizontal offset as
   * before (same 1.5rem, just supplied by the row instead of the
   * container).
   */
  .nlc-service-nav__menu .nlc-service-nav__link,
  .nlc-service-nav__menu .nlc-service-nav__phone {
    border-bottom: 1px solid var(--nlc-rule);
    font-size: 0.85rem;
    line-height: 1.4;
    padding-block: 1.15rem;
    padding-inline: 1.5rem;
  }

  .nlc-service-nav__menu .nlc-service-nav__link {
    color: var(--nlc-cream);
  }

  .nlc-service-nav__menu .nlc-service-nav__link:hover,
  .nlc-service-nav__menu .nlc-service-nav__link:focus-visible,
  .nlc-service-nav__menu .nlc-service-nav__phone:hover,
  .nlc-service-nav__menu .nlc-service-nav__phone:focus-visible {
    background: var(--nlc-rule);
  }

  .nlc-service-nav__theme-label {
    display: block;
  }

  /*
   * NLC-DEV-20260828-10: the theme field now matches the other dropdown
   * rows' width/height/spacing (measured before this fix: 84x20px with no
   * padding or border, versus 327x57px for an ordinary row) instead of
   * sitting as a small, undersized cluster in the corner of the panel.
   * align-self: stretch lets it fill the same row width as the links
   * above it; justify-content: space-between pushes the label to the left
   * edge and the toggle to the right edge, matching the requested
   * "Theme left, toggle right" setting-row feel; padding-block matches
   * the other rows exactly. The phone row directly above already
   * supplies this row's top separator via its own border-bottom, so no
   * additional border is added here.
   */
  .nlc-service-nav__menu .nlc-service-nav__theme-field {
    align-self: stretch;
    justify-content: space-between;
    margin-top: 0;
    padding-block: 1.15rem;
    padding-inline: 1.5rem;
  }
}

/*
 * NLC-DEV-20260828-10: optical-centering nudge for the wordmark, scoped to
 * exactly the sub-range where Book Now renders as full text (431px, one
 * pixel above the icon breakpoint, through the existing 1099px compact
 * ceiling -- both boundaries already established elsewhere in this file,
 * not new numbers). The wordmark's own box is already mathematically
 * centered in the three-equal-column grid at every compact width
 * (confirmed live, offset 0px), but the whitespace gap flanking it is
 * highly asymmetric once Book Now is a ~86-120px text pill next to a
 * fixed 32px hamburger icon -- measured live: a 4.54:1 gap ratio at
 * 431px, easing to 1.27:1 by 1099px. A fixed -16px nudge toward the
 * hamburger measurably improves the ratio at both ends of this range
 * (431px: 4.54 -> 2.33; 1099px: 1.27 -> 1.16) with zero overlap.
 * Deliberately excluded at max-width: 430px, where Book Now is the
 * compact icon and the unadjusted ratio is already near-balanced
 * (1.17:1 at 375px) -- applying the same nudge there was tested and
 * found to overshoot into the opposite imbalance (0.77:1).
 */
@media (min-width: 431px) and (max-width: 1099px) {
  .nlc-service-nav__brand {
    transform: translateX(-16px);
  }
}

/*
 * NLC-DEV-20260828-04: at narrow phone widths the full "Book Now" text
 * pill visually dominates its equal grid column even though nothing
 * overlaps (NLC-DEV-20260828-02 already confirmed zero technical overflow
 * at 375px/603px). This compacts the nav Booker control to an icon-only
 * button: .nlc-service-nav__book-label is visually hidden with a standard
 * clip-based sr-only pattern (kept in the DOM and accessibility tree, so
 * the anchor's accessible name stays the literal text "Book Now" -- no
 * aria-label substitution), .nlc-service-nav__book-icon (a decorative,
 * aria-hidden calendar glyph already present in the markup) is revealed,
 * and the button itself becomes a 44x44px flex-centered square, matching
 * the existing minimum-tap-target rule already used elsewhere in this
 * file. The 430px threshold sits well inside the compact hamburger range
 * (max-width: 1099px as of NLC-DEV-20260828-06).
 */
@media (max-width: 430px) {
  .nlc-service-nav__book {
    align-items: center;
    display: flex;
    height: 44px;
    justify-content: center;
    padding: 0;
    width: 44px;
  }

  .nlc-service-nav__book-label {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .nlc-service-nav__book-icon {
    display: block;
    height: 20px;
    width: 20px;
  }
}

/*
 * NLC-DEV-20260827-21: at 768px the horizontal nav gained two more links
 * (About, Contact) on top of the existing three plus the phone number,
 * back when the desktop horizontal row still rendered at this width. Since
 * NLC-DEV-20260828-06 extended the compact hamburger/dropdown range through
 * 1099px, the desktop row no longer renders here at all, so this band's
 * remaining gap/padding tweaks are inert leftovers for the (invisible)
 * .nlc-service-nav__links box.
 *
 * NLC-DEV-20260828-08: removed this band's .nlc-service-nav__link /
 * .nlc-service-nav__phone font-size overrides (0.56rem / 0.5rem), which
 * would otherwise have shrunk the dropdown row text specifically inside
 * this 768px-1023px slice, undermining the new dropdown-legibility sizing
 * declared above. The compound .nlc-service-nav__menu .nlc-service-nav__link
 * selector already wins on specificity over the plain .nlc-service-nav__link
 * selector this band used, so removing these two rules is a cleanup, not a
 * behavior-preserving no-op fix.
 */
@media (min-width: 768px) and (max-width: 1023px) {
  #nlcServiceNav {
    gap: 1.25rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .nlc-service-nav__links {
    gap: 1.1rem;
  }
}

/*
 * NLC-DEV-20260831-23: local nav-offset mechanism realigned to match the
 * accepted WordPress MU-plugin nav model (nav.css,
 * NLC-DEV-20260831-19/-20) instead of the old .nlc-service-nav-space
 * utility class + compensating hero margin/padding trick this rule used
 * to be part of. #nlcServiceNav is immediately followed by
 * <main class="nlc-service ..."> in every local page's markup (confirmed
 * by inspection -- no HTML change needed to reach this structure), so
 * the exact same adjacent-sibling selector nav.css already uses on
 * WordPress works identically here. Values (5.25rem desktop, 4.75rem at
 * the existing <=1099px compact nav breakpoint) are copied verbatim from
 * nav.css's own accepted, live-measured NLC-DEV-20260831-20 correction --
 * not re-derived, so local and WP now share one tuned source of truth
 * for this offset instead of two independently-drifting ones.
 *
 * This replaces the old .nlc-service-nav-space utility (previously
 * padding-top: 5.5rem, applied to <main>) and, together with it, retires
 * the compensating .nlc-service-nav-space > .nlc-service__hero:first-of-
 * type margin/padding trick removed from shared/service-page.css in the
 * same task -- that trick only ever affected where the hero's own
 * background bled visually behind the nav, never actual content
 * position (proven live in NLC-DEV-20260831-22's preflight: changing its
 * constant moved zero pixels), so nothing is lost by removing it. The
 * `nlc-service-nav-space` class remains present in page HTML (out of
 * this task's scope to remove, and harmless left in place) but is no
 * longer read by any CSS rule.
 */
#nlcServiceNav + .nlc-service {
  padding-top: 5.25rem;
}

@media (max-width: 1099px) {
  #nlcServiceNav + .nlc-service {
    padding-top: 4.75rem;
  }
}