/* The Clarity Writers top bar (desktop) and top bar with menu (phones), copied from the
   main site's index.html so the Clarity Box pages sit inside the same site. Keep the values
   in step with the .cw-topnav and #mobile-header rules there. Markup is in each page,
   between the "Clarity Writers site navigation" comments; site-rail.js wires both menus. */

#mobile-header, #mobile-menu {
  --ink: #0a0e1c;
  --brand: #1979eb;
  --brand-text: #1257b0;
  --rail-line: rgba(10, 14, 28, 0.09);
  --mobile-header-h: 64px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Desktop (>=981px): the Clarity Writers top bar, the same as .cw-topnav in the main
   site's index.html, which copied its values from this page's own header. */
.cw-topnav { display: none; }
.brand-guide__subnav { list-style: none; }
@media (min-width: 981px) {
  .cw-topnav { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 130; height: 65px; box-sizing: border-box; background: #fdfcfc; border-bottom: 1px solid transparent; font-family: 'Inter', system-ui, sans-serif; }
  .cw-topnav__inner { max-width: 1280px; height: 64px; margin: 0 auto; padding: 0 64px; box-sizing: border-box; display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 48px; align-items: center; }
  .cw-topnav__logo { justify-self: start; display: flex; align-items: center; text-decoration: none; color: #000; }
  /* The logo is drawn bars plus live Urbanist text, so it stays sharp at nav size
     (Jordan, 12 Nov 2026). The bars sit on whole pixels, 3px tall with 2px gaps. */
  .cw-logo { display: flex; align-items: flex-start; height: 28px; color: #000; }
  .cw-logo__bars { display: block; flex: none; }
  .cw-logo__name { margin: -3px 0 0 7.5px; font: 400 28px/1 Urbanist, "Inter", sans-serif; letter-spacing: 0; white-space: nowrap; }
  .cw-topnav__links { display: flex; align-items: center; gap: 16px; list-style: none; margin: 0; padding: 0; }
  .cw-topnav__links li { position: relative; }
  .cw-topnav__links a,
  .cw-topnav__links button { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border: 0; border-radius: 8px; background: none; color: #4a4d52; font: 400 13px/21px 'Inter', system-ui, sans-serif; text-decoration: none; cursor: pointer; transition: color var(--dur-s) var(--ease-std), background-color var(--dur-s) var(--ease-std); }
  .cw-topnav__links a:hover,
  .cw-topnav__links button:hover,
  .cw-topnav__links .is-current { color: #17181a; background: #f3f2ef; }
  .cw-topnav__links button svg { width: 13px; height: 13px; transition: transform var(--dur-xs) var(--ease-std); }
  .cw-topnav__services.is-open button svg { transform: rotate(180deg); }
  .cw-topnav__menu { position: absolute; top: calc(100% + 12px); left: 0; min-width: 240px; padding: 6px; box-sizing: border-box; background: #ffffff; border: 1px solid #e7e7e7; border-radius: 14px; box-shadow: 0 12px 32px rgba(23, 24, 26, 0.08); opacity: 0; visibility: hidden; transform-origin: top left; transform: translateY(-4px) scale(0.98); transition: opacity var(--dur-xs) var(--ease-std), transform var(--dur-xs) var(--ease-std), visibility var(--dur-xs); }
  .cw-topnav__menu::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  .cw-topnav__services:hover .cw-topnav__menu,
  .cw-topnav__services.is-open .cw-topnav__menu { opacity: 1; visibility: visible; transform: none; transition-duration: var(--dur-s); transition-timing-function: var(--ease-out); }
  .cw-topnav__menu a { display: flex; width: 100%; box-sizing: border-box; padding: 10px 12px; }
  .cw-topnav__cta { justify-self: end; display: inline-flex; align-items: center; height: 44px; box-sizing: border-box; padding: 6.4px 14px; border: 1px solid #c9c9c5; border-radius: 100px; background: #ffffff; color: #17181a; font: 500 13px/1 'Inter', system-ui, sans-serif; text-decoration: none; transition: border-color var(--dur-s) var(--ease-std), color var(--dur-s) var(--ease-std), transform var(--dur-xs) var(--ease-out); }
  .cw-topnav__cta:hover { border-color: #6b6e73; }
  .cw-topnav__cta:active { transform: scale(var(--press)); }
  .cw-topnav a:focus-visible,
  .cw-topnav button:focus-visible { outline: 2px solid #1979eb; outline-offset: 2px; }

  body { padding-top: 65px; }
  #mobile-header, #mobile-menu { display: none; }
  /* The Clarity Box bar sits under the site bar. */
  header.top { top: 65px; }
  header.top.top--managed { top: -7px; }
  header.top.top--managed.is-stuck,
  header.top.top--managed[data-open="true"] { top: 65px; }
}

/* Phones and tablets: the rail becomes a fixed top bar with a full-screen menu. */
#mobile-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 150;
  height: var(--mobile-header-h);
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-end;
  padding: 0 clamp(1.1rem, 5vw, 2rem);
  background: rgba(253, 252, 252, 0.92);
  border-bottom: 1px solid var(--rail-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.mobile-header__logo { display: flex; align-items: center; margin-right: auto; text-decoration: none; }
.mobile-header__logo img { height: 1.7rem; width: auto; display: block; }
#mobile-menu-toggle { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 100px; background: #ffffff; color: var(--ink); cursor: pointer; }
#mobile-menu-toggle svg { width: 20px; height: 20px; display: block; }
#mobile-menu-toggle .mobile-menu-icon--close { display: none; }
body.menu-open #mobile-menu-toggle .mobile-menu-icon--bars { display: none; }
body.menu-open #mobile-menu-toggle .mobile-menu-icon--close { display: block; }

#mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  box-sizing: border-box;
  padding: calc(var(--mobile-header-h) + 2rem) clamp(1.1rem, 5vw, 2rem) 2.25rem;
  background: #ffffff;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--rise-s));
  transition: opacity var(--dur-m) var(--ease-out), visibility var(--dur-m), transform var(--dur-m) var(--ease-out);
}
#mobile-menu.open { opacity: 1; visibility: visible; transform: none; }
/* Menu items rise in one after another when the menu opens, and go together when it closes. */
#mobile-menu .mobile-menu__list > li { opacity: 0; transform: translateY(var(--rise-s)); transition: opacity var(--dur-m) var(--ease-out), transform var(--dur-m) var(--ease-out); transition-delay: 0ms; }
#mobile-menu.open .mobile-menu__list > li { opacity: 1; transform: none; }
#mobile-menu.open .mobile-menu__list > li:nth-child(2) { transition-delay: calc(var(--stagger) * 1 * var(--motion)); }
#mobile-menu.open .mobile-menu__list > li:nth-child(3) { transition-delay: calc(var(--stagger) * 2 * var(--motion)); }
#mobile-menu.open .mobile-menu__list > li:nth-child(4) { transition-delay: calc(var(--stagger) * 3 * var(--motion)); }
#mobile-menu.open .mobile-menu__list > li:nth-child(5) { transition-delay: calc(var(--stagger) * 4 * var(--motion)); }
#mobile-menu.open .mobile-menu__list > li:nth-child(6) { transition-delay: calc(var(--stagger) * 5 * var(--motion)); }
#mobile-menu.open .mobile-menu__list > li:nth-child(7) { transition-delay: calc(var(--stagger) * 6 * var(--motion)); }
#mobile-menu .mobile-menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
#mobile-menu .nav-top,
#mobile-menu .nav-services__label {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.45rem, 5.5vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  text-decoration: none;
  display: grid;
  grid-template-columns: 2em 1fr;
  align-items: baseline;
}
#mobile-menu .num { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.8rem; font-weight: 500; color: var(--brand-text); }
#mobile-menu .nav-top.is-active { color: var(--brand-text); }
#mobile-menu .brand-guide__subnav { list-style: none; margin: 0.85rem 0 0.3rem; padding-left: calc(2em * 1.45); display: flex; flex-direction: column; gap: 0.7rem; }
#mobile-menu .brand-guide__subnav a { font-family: 'Inter', sans-serif; font-size: 1.08rem; font-weight: 500; line-height: 1.3; color: rgba(10, 14, 28, 0.62); text-decoration: none; }
#mobile-menu .mobile-menu__footer { display: flex; flex-direction: column; gap: 1.4rem; padding-top: 1.6rem; border-top: 1px solid var(--rail-line); }
#mobile-menu .mobile-menu__cta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.95rem 1.4rem; border-radius: 100px; background: var(--ink); color: #ffffff; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.95rem; letter-spacing: 0.02em; text-decoration: none; }
#mobile-menu .mobile-menu__cta svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
#mobile-menu .mobile-menu__contact { display: flex; flex-direction: column; gap: 0.45rem; }
#mobile-menu .mobile-menu__contact a { font-size: 0.88rem; color: rgba(10, 14, 28, 0.55); text-decoration: none; letter-spacing: 0.02em; }

@media (max-width: 980px) {
  #mobile-header, #mobile-menu { display: flex; }
  body { padding-top: var(--cw-bar, 64px); }
  body.menu-open { overflow: hidden; }
  /* The Clarity Box bar sits under the site bar. One menu only: its own menu button goes,
     and its Book a demo button stays. */
  header.top { top: 64px; }
  header.top.top--managed { top: -8px; }
  header.top.top--managed.is-stuck,
  header.top.top--managed[data-open="true"] { top: 64px; }
  header.top .menu-btn { display: none !important; }
  header.top .top__cta { display: inline-flex !important; }
}

/* Safety net under reduce motion or ?motion=0: no movement, nothing left half hidden. */
@media (prefers-reduced-motion: reduce) {
  html:not(.cw-motion-on) #mobile-menu,
  html:not(.cw-motion-on) #mobile-menu .mobile-menu__list > li { transform: none; }
}
html.cw-motion-off #mobile-menu,
html.cw-motion-off #mobile-menu .mobile-menu__list > li { transform: none; }

/* 8 Nov 2026, Jordan: the top bar behaves as on the main site. It blends into the
   page and scrolls away with it, then returns as a sticky bar after 240px. Driven by
   site-rail.js. 9 Nov 2026 (motion pass): it moves by transform, not top, so scrolling
   doesn't redo the page layout every frame. Timings are the motion tokens in
   consistency.css, which are zero under reduce motion. */
@media (min-width: 981px) {
  .cw-topnav.cw-topnav--managed { top: 0; transform: translateY(var(--cw-nav-top, 0px)); transition: transform var(--dur-m) var(--ease-out), background-color var(--dur-s) var(--ease-std), border-color var(--dur-s) var(--ease-std); }
  /* Scrolling away: follow the page exactly, keep only the colour transitions. */
  .cw-topnav.cw-topnav--managed.is-tracking { transition: background-color var(--dur-s) var(--ease-std), border-color var(--dur-s) var(--ease-std); }
  .cw-topnav.cw-topnav--managed.is-stuck,
  .cw-topnav.cw-topnav--managed:focus-within { transform: none; }
  /* 9 Nov 2026, Jordan: a light grey line under the bar once it is sticky. */
  .cw-topnav.cw-topnav--managed.is-stuck { border-bottom-color: #e6e6e3; }
}

/* "New" tag on the Clarity Box nav link (8 Nov 2026, Jordan). Remove the span from
   each page's nav to retire it. */
.cw-nav-new { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 7px; border-radius: 100px; background: #edf4ff; color: #1257b0; font: 600 10px/1.3 'Inter', system-ui, sans-serif; letter-spacing: 0.01em; }

/* Top nav never wraps a label (9 Nov 2026, Jordan): keep each label on one line, and
   tighten the gaps between 981px and 1180px so everything still fits. */
@media (min-width: 981px) {
  .cw-topnav__links a, .cw-topnav__links button, .cw-topnav__cta { white-space: nowrap; }
}
@media (min-width: 981px) and (max-width: 1180px) {
  .cw-topnav__inner { column-gap: 20px; }
  .cw-topnav__links { gap: 2px; }
  .cw-topnav__links a, .cw-topnav__links button { padding: 8px 9px; }
}

/* Resources dropdown in the top nav (9 Nov 2026, Jordan). Uses the Services menu styles;
   the Resources label itself is a link to /resources. */
@media (min-width: 981px) {
  .cw-topnav__resources > a svg { width: 13px; height: 13px; transition: transform var(--dur-xs) var(--ease-out); }
  .cw-topnav__resources:hover > a svg, .cw-topnav__resources:focus-within > a svg { transform: rotate(180deg); }
  .cw-topnav__services:focus-within .cw-topnav__menu { opacity: 1; visibility: visible; transform: none; }
  .cw-topnav__resources .cw-topnav__menu { min-width: 200px; }
}

/* Top nav Contact us in brand blue (9 Nov 2026, Jordan). */
@media (min-width: 981px) {
  .cw-topnav .cw-topnav__cta { background: #1979eb; border-color: #1979eb; color: #fff; }
  .cw-topnav .cw-topnav__cta:hover { background: #1468cc; border-color: #1468cc; color: #fff; }
  .cw-topnav .cw-topnav__cta:focus-visible { outline: 2px solid #1462c2; outline-offset: 3px; }
}

/* Mobile menu, cleaner (9 Nov 2026, Jordan): no numbers, one row per item with a thin
   divider and a chevron, sub-links in two tidy columns, Contact us left to the blue
   button at the bottom. Same rules on the Clarity Box pages (site-rail.css). */
#mobile-menu { gap: 2rem; padding: calc(var(--mobile-header-h, 64px) + 1rem) 20px 28px; background: #fdfcfc; }
#mobile-menu .mobile-menu__list { gap: 0; }
#mobile-menu .mobile-menu__list > li { border-bottom: 1px solid #ecebe8; }
#mobile-menu .mobile-menu__list > li:has(> a[href="/contact"]) { display: none; }
#mobile-menu .nav-top .num, #mobile-menu .nav-services__label .num { display: none; }
#mobile-menu .nav-top, #mobile-menu .nav-services__label { display: flex; align-items: center; gap: 10px; padding: 18px 2px; font: 500 22px/1.2 'Inter', sans-serif; letter-spacing: -.02em; color: #0a0e1c; }
#mobile-menu a.nav-top::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-top: 1.5px solid #9a9a96; border-right: 1.5px solid #9a9a96; transform: rotate(45deg); }
#mobile-menu .nav-top.is-active { color: #1979eb; }
#mobile-menu .nav-top.is-active::after { border-color: #1979eb; }
#mobile-menu .mm-new { padding: 3px 8px; border-radius: 100px; background: #eaf3fe; color: #1468cc; font: 600 11px/1 'Inter', sans-serif; letter-spacing: 0; }
#mobile-menu .nav-services .nav-top { padding-bottom: 12px; }
#mobile-menu .nav-services__label { padding-bottom: 12px; }
#mobile-menu .brand-guide__subnav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin: 0; padding: 0 2px 18px; list-style: none; }
#mobile-menu .brand-guide__subnav a { display: block; padding: 6px 0; font: 400 15px/1.35 'Inter', sans-serif; color: #55575e; }
#mobile-menu .brand-guide__subnav a.is-active { color: #1979eb; font-weight: 500; }
#mobile-menu .mobile-menu__footer { gap: 16px; padding-top: 0; border-top: 0; }
#mobile-menu .mobile-menu__cta { justify-content: center; gap: 8px; padding: 15px 20px; border-radius: 100px; background: #1979eb; color: #fff; font: 500 16px/1 'Inter', sans-serif; letter-spacing: 0; }
#mobile-menu .mobile-menu__cta svg { width: 16px; height: 16px; }
#mobile-menu .mobile-menu__contact { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
#mobile-menu .mobile-menu__contact a { font: 400 13.5px/1.4 'Inter', sans-serif; color: #77777a; letter-spacing: 0; }

/* Light grey line along the top of the footer, as on the main site (9 Nov 2026, Jordan). */
.foot { border-top: 1px solid #e6e6e3 !important; }

/* No chevrons on the top nav dropdown labels (9 Nov 2026, Jordan). */
@media (min-width: 981px) { .cw-topnav__links > li > a svg, .cw-topnav__links > li > button svg { display: none !important; } }

/* Phone fixes (9 Nov 2026, Jordan approved the phone audit in mockups/phone-audit-20261109.md).
   Backup _archive/file-backups/box-pre-phone-fixes-20261109/. Phones and tablets only. */
@media (max-width: 980px) {
  /* Same 24px side gutter as the page content and the footer. */
  #mobile-header { padding: 0 24px; }
  #mobile-menu { padding-left: 24px; padding-right: 24px; }
  /* Item 30: the header's bottom line shows only once the page has scrolled
     (site-rail.js adds .is-scrolled), as the desktop bar does when sticky. */
  #mobile-header { border-bottom-color: transparent; transition: border-color var(--dur-s) var(--ease-std); }
  #mobile-header.is-scrolled, body.menu-open #mobile-header { border-bottom-color: var(--rail-line); }
  /* Item 26: tap targets of at least 44px for the logo, menu sub-links and contact links. */
  .mobile-header__logo { min-width: 44px; min-height: 44px; }
  #mobile-menu .brand-guide__subnav { row-gap: 0; }
  #mobile-menu .brand-guide__subnav a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; box-sizing: border-box; }
  #mobile-menu .mobile-menu__contact a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Item 27: sub-links in one column on narrow phones, so no label wraps. */
@media (max-width: 399px) {
  #mobile-menu .brand-guide__subnav { grid-template-columns: 1fr; }
}
/* Phone fixes, round 2 (9 Nov 2026): the menu is taller than the screen with 44px rows,
   so Contact us and the contact links stay pinned to the bottom while the list scrolls.
   Same rules as the main site. Backup _archive/file-backups/phone-fixes-2-20261109/. */
@media (max-width: 980px) {
  #mobile-menu { padding-bottom: 0; }
  #mobile-menu .mobile-menu__footer {
    position: sticky; bottom: 0; z-index: 1;
    gap: 4px;
    margin: 0 -24px;
    padding: 12px 24px calc(4px + env(safe-area-inset-bottom, 0px));
    background: #fdfcfc;
    border-top: 1px solid #ecebe8;
  }
  #mobile-menu .mobile-menu__contact { gap: 0 16px; }
  #mobile-menu .mobile-menu__contact a { min-height: 40px; }
}