/* focusEDU whimsy: "chalk", the hand-drawn ink layer (2026-09-28).
   The motif is the red crescent over "focus" in the logo: a tapered, confident pen
   stroke, heavy where the pen lands and hair-fine where it lifts. Every mark here is
   one of a few such strokes, drawn left to right by a clip-path wipe.
   Decorative only: pseudo-elements and aria-hidden spans, all absolutely positioned
   (no layout shift). Hover effects also fire on :focus-visible. Reduced motion shows
   the finished strokes with no drawing. Remove: delete the <link> and <script>. */
:root {
  --wc-arc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M2.9 8.1L7.8 8.6 12.5 9.2 17.3 9.6 22.2 10.0 27.1 10.4 32.1 10.7 37.0 10.8 42.0 10.8 46.9 10.8 51.7 10.9 56.6 10.9 61.5 10.9 66.3 11.0 71.2 11.0 76.1 11.1 81.0 11.1 85.8 11.1 90.7 11.2 95.6 11.2 100.5 11.2 105.4 11.3 110.2 11.3 115.1 11.3 120.0 11.3 124.9 11.3 129.8 11.2 134.6 11.1 139.5 11.0 144.4 10.9 149.3 10.7 154.1 10.5 159.0 10.3 163.9 10.2 168.8 10.0 173.6 9.9 178.5 9.7 183.4 9.6 188.3 9.5 193.1 9.5 198.0 9.4 202.9 9.0 207.8 8.4 212.7 7.6 217.6 6.8 222.4 6.0 227.3 5.3 232.1 4.8 237.0 4.6 237.1 4.6 237.2 4.5 237.2 4.4 237.2 4.3 237.1 4.2 237.0 4.2 232.1 4.3 227.2 4.7 222.3 5.2 217.4 5.8 212.5 6.5 207.7 7.1 202.8 7.6 198.0 7.8 193.1 7.9 188.2 7.9 183.4 7.9 178.5 7.9 173.6 7.9 168.7 8.0 163.9 8.0 159.0 8.0 154.1 8.0 149.2 8.0 144.4 8.1 139.5 8.1 134.6 8.1 129.7 8.1 124.9 8.1 120.0 8.1 115.1 8.1 110.3 8.0 105.4 7.9 100.5 7.8 95.7 7.6 90.8 7.4 85.9 7.2 81.0 7.0 76.2 6.8 71.3 6.7 66.4 6.5 61.5 6.3 56.7 6.2 51.8 6.1 46.9 6.0 42.0 6.0 37.2 5.9 32.4 5.5 27.6 4.9 22.8 4.3 17.9 3.7 13.0 3.2 8.0 3.3 3.1 3.5 1.9 3.8 1.0 4.6 0.7 5.7 1.0 6.9 1.8 7.8Z'/%3E%3C/svg%3E");
  --wc-swash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M3.0 8.7L7.9 8.9 12.7 9.1 17.6 9.4 22.5 9.8 27.3 10.1 32.2 10.3 37.1 10.4 42.0 10.6 46.8 10.8 51.7 11.0 56.6 11.2 61.5 11.4 66.4 11.5 71.2 11.6 76.1 11.7 81.0 11.7 85.9 11.6 90.8 11.5 95.7 11.3 100.6 11.0 105.5 10.8 110.3 10.5 115.2 10.2 120.1 9.9 124.9 9.6 129.8 9.4 134.7 9.2 139.5 9.0 144.4 8.9 149.2 8.8 154.1 8.8 159.0 8.8 163.9 8.8 168.7 8.8 173.6 8.9 178.5 8.9 183.4 8.8 188.2 8.8 193.1 8.7 198.0 8.7 202.9 8.6 207.7 8.5 212.6 8.6 217.5 8.8 222.3 9.1 227.2 9.4 232.1 9.6 237.0 9.6 237.1 9.6 237.2 9.5 237.2 9.4 237.2 9.3 237.1 9.2 237.0 9.2 232.1 9.0 227.3 8.8 222.4 8.4 217.5 7.9 212.7 7.5 207.8 7.2 202.9 7.0 198.0 6.9 193.1 6.8 188.3 6.7 183.4 6.5 178.5 6.4 173.6 6.3 168.8 6.3 163.9 6.2 159.0 6.1 154.1 6.1 149.3 6.0 144.4 5.9 139.5 5.8 134.6 5.8 129.7 5.8 124.8 5.9 119.9 5.9 115.0 6.0 110.2 6.1 105.3 6.3 100.4 6.4 95.5 6.6 90.7 6.7 85.8 6.8 81.0 7.0 76.1 7.1 71.3 7.2 66.4 7.2 61.5 7.3 56.7 7.3 51.8 7.3 46.9 7.3 42.0 7.2 37.2 7.1 32.3 7.1 27.4 7.0 22.5 7.1 17.6 7.2 12.8 7.4 7.9 7.6 3.0 7.7 2.7 7.7 2.5 7.9 2.5 8.2 2.5 8.5 2.7 8.7Z'/%3E%3C/svg%3E");
  --wc-flick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M3.0 8.8L7.9 9.0 12.7 9.2 17.6 9.2 22.5 9.3 27.4 9.3 32.2 9.3 37.1 9.3 42.0 9.3 46.8 9.3 51.7 9.3 56.6 9.3 61.5 9.3 66.3 9.4 71.2 9.4 76.1 9.4 81.0 9.5 85.8 9.6 90.7 9.6 95.6 9.7 100.5 9.8 105.3 9.9 110.2 10.0 115.1 10.1 120.0 10.1 124.8 10.2 129.7 10.2 134.6 10.3 139.5 10.3 144.4 10.3 149.2 10.3 154.1 10.3 159.0 10.3 163.9 10.3 168.7 10.3 173.6 10.3 178.5 10.3 183.4 10.3 188.3 10.3 193.2 10.2 198.0 10.0 202.9 9.7 207.8 9.5 212.7 9.3 217.6 8.8 222.5 7.5 227.3 5.9 232.2 4.6 237.0 4.0 237.1 4.0 237.2 3.9 237.2 3.8 237.2 3.7 237.1 3.6 237.0 3.6 232.1 4.1 227.2 5.3 222.3 6.6 217.4 7.7 212.6 7.9 207.7 7.8 202.8 7.8 198.0 7.9 193.1 8.0 188.2 8.1 183.4 8.1 178.5 8.1 173.6 8.0 168.8 7.9 163.9 7.9 159.0 7.8 154.1 7.7 149.3 7.5 144.4 7.4 139.5 7.3 134.7 7.2 129.8 7.0 124.9 6.9 120.0 6.7 115.2 6.6 110.3 6.5 105.4 6.4 100.5 6.2 95.7 6.1 90.8 6.0 85.9 5.9 81.0 5.7 76.2 5.6 71.3 5.4 66.4 5.3 61.5 5.1 56.7 5.0 51.8 4.8 46.9 4.7 42.0 4.5 37.2 4.4 32.3 4.3 27.4 4.2 22.5 4.1 17.6 4.1 12.8 4.0 7.9 4.2 3.0 4.4 1.9 4.7 1.1 5.5 0.8 6.6 1.1 7.7 1.9 8.5Z'/%3E%3C/svg%3E");
  --wc-mini: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2.0 5.0L5.4 5.3 8.7 5.6 12.1 5.9 15.6 6.1 19.0 6.3 22.5 6.4 26.0 6.4 29.4 6.4 32.8 6.4 36.3 6.5 39.7 6.5 43.1 6.4 46.6 6.4 50.0 6.4 53.4 6.3 56.9 6.3 60.3 6.1 63.7 6.0 67.2 5.9 70.6 5.7 74.0 5.5 77.4 5.3 80.9 5.1 84.3 5.0 87.8 4.5 91.2 3.7 94.6 3.0 98.0 2.6 98.2 2.6 98.2 2.5 98.2 2.3 98.1 2.2 98.0 2.2 94.5 2.4 91.1 3.1 87.7 3.7 84.3 4.0 80.8 3.9 77.4 3.9 74.0 3.9 70.5 4.0 67.1 4.1 63.7 4.2 60.3 4.3 56.8 4.3 53.4 4.3 50.0 4.2 46.6 4.1 43.2 3.9 39.7 3.8 36.3 3.7 32.9 3.6 29.4 3.6 26.0 3.6 22.6 3.4 19.3 3.1 15.9 2.8 12.4 2.4 9.0 2.1 5.5 2.1 2.0 2.2 1.2 2.4 0.7 3.1 0.7 4.0 1.2 4.7Z'/%3E%3C/svg%3E");
  --wc-hair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 5' preserveAspectRatio='none'%3E%3Cpath d='M1.5 3.4L5.9 3.5 10.3 3.7 14.7 3.9 19.1 4.1 23.5 4.2 27.9 4.2 32.4 4.3 36.8 4.3 41.2 4.3 45.6 4.2 50.0 4.1 54.4 4.0 58.8 3.8 63.2 3.6 67.6 3.4 72.1 3.2 76.5 3.1 80.9 2.9 85.3 2.7 89.7 2.3 94.1 2.0 98.5 1.8 98.6 1.7 98.7 1.6 98.6 1.5 98.5 1.4 94.1 1.4 89.7 1.5 85.2 1.7 80.8 1.9 76.4 2.0 72.0 2.0 67.6 2.0 63.2 2.0 58.8 2.0 54.4 2.1 50.0 2.2 45.6 2.3 41.2 2.3 36.8 2.3 32.4 2.2 28.0 2.2 23.6 2.1 19.2 2.0 14.7 2.1 10.3 2.2 5.9 2.3 1.5 2.4 1.1 2.5 1.0 2.9 1.1 3.3Z'/%3E%3C/svg%3E");
  --wc-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' preserveAspectRatio='none'%3E%3Cpath d='M2.3 8.9L3.3 8.7 4.4 8.2 5.3 7.5 6.1 6.9 6.6 6.4 7.4 6.1 8.4 5.3 9.2 4.2 9.9 3.1 10.7 2.7 10.8 2.6 10.8 2.3 10.7 2.2 10.6 2.1 10.3 2.1 9.4 2.5 8.4 3.4 7.5 4.2 6.8 4.3 5.9 4.3 4.7 4.7 3.8 5.3 3.0 5.8 2.4 6.1 1.7 6.3 1.0 6.7 0.7 7.5 0.8 8.3 1.4 8.8Z'/%3E%3C/svg%3E");
  --wc-ink: #da2027;       /* the logo's red, sampled from focusedu-logo-white.png; used on navy */
  --wc-ink-deep: #b81321;  /* focus-red; used on white and light grey */
  --wc-ease: cubic-bezier(.55, .05, .25, 1);
}

/* ---- shared: one masked ink shape ------------------------------------------ */
header nav > a::after,
header nav .nav-dd__link::after,
header nav .insights-nav__link::after,
#mobile-nav a.px-3::after,
header [data-nav-panel] a::before,
#mobile-nav > div > a.px-6::before,
main a.inline-flex.rounded-lg:is(.bg-focus-red, .bg-focus-navy, .bg-focus-light, [class~="border-white/30"])::after,
footer li > button::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background: var(--wc-ink);
  -webkit-mask: var(--wc-mini) 0 0 / 100% 100% no-repeat;
          mask: var(--wc-mini) 0 0 / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  /* leaving: fade, then reset the wipe so the next hover draws again */
  transition: opacity .2s ease, clip-path 0s linear .2s;
}

/* ---- main nav (desktop): a small logo arc drawn under the word ----------------- */
header nav > a,
header nav .nav-dd__link,
header nav .insights-nav__link { position: relative; }
header nav > a::after,
header nav .nav-dd__link::after,
header nav .insights-nav__link::after {
  left: .75rem; right: .75rem; bottom: 2px; height: 7px;
}
/* dropdown words carry .375rem right padding (room for the chevron's focus ring) */
header nav .nav-dd__link::after,
header nav .insights-nav__link::after { right: .375rem; }

/* ---- mobile menu: the same arc under the start of each top-level word ---------- */
#mobile-nav a.px-3 { position: relative; }
#mobile-nav a.px-3::after {
  left: .75rem; bottom: 9px; height: 6px;
  width: var(--wc-tw, 3.25em); max-width: calc(100% - 1.5rem);
}

/* ---- dropdown items (About Us, Services, Our Team) + mobile sub-items: a pen dash
        drawn into the left padding. The Insights list is left exactly as it is. --- */
header [data-nav-panel] a,
#mobile-nav > div > a.px-6 { position: relative; }
header [data-nav-panel] a::before,
#mobile-nav > div > a.px-6::before {
  left: 4px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  background: var(--wc-ink-deep);
  -webkit-mask-image: var(--wc-dash); mask-image: var(--wc-dash);
}
#mobile-nav > div > a.px-6::before {
  left: 9px; width: 10px; background: var(--wc-ink);
}

/* ---- buttons: an ink stroke under the label ----------------------------------- */
main a.inline-flex.rounded-lg:is(.bg-focus-red, .bg-focus-navy, .bg-focus-light, [class~="border-white/30"]):not(.absolute):not(.fixed) {
  position: relative;
}
main a.inline-flex.rounded-lg:is(.bg-focus-red, .bg-focus-navy, .bg-focus-light, [class~="border-white/30"])::after {
  left: 21%; right: 21%; top: calc(50% + .72em); height: 5px;
}
/* white ink on the red button; the logo red everywhere else (navy, outline, light) */
main a.inline-flex.rounded-lg.bg-focus-red::after { background: rgba(255, 255, 255, .82); }
main a.inline-flex.rounded-lg.text-sm::after { top: calc(50% + .8em); height: 4px; }

/* ---- footer: a hairline of ink under the link (not the social icons) ----------
   The :has() rules are kept apart, so a browser without :has() drops only them. */
footer li > button { position: relative; }
footer li > button::after {
  left: 0; right: 0; top: calc(50% + .6em); height: 4px;
  -webkit-mask-image: var(--wc-hair); mask-image: var(--wc-hair);
}
footer a:not(:has(> svg)) { position: relative; }
footer a:not(:has(> svg))::after {
  content: ""; position: absolute; pointer-events: none;
  left: var(--wc-pad, 0px); right: var(--wc-pad, 0px); top: calc(50% + .6em); height: 4px;
  background: var(--wc-ink);
  -webkit-mask: var(--wc-hair) 0 0 / 100% 100% no-repeat;
          mask: var(--wc-hair) 0 0 / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0); opacity: 0;
  transition: opacity .2s ease, clip-path 0s linear .2s;
}
footer nav a { --wc-pad: 1rem; }   /* legal links carry px-4 */

/* ---- drawn states (hover, keyboard focus, open dropdown) ---------------------- */
header nav > a:is(:hover, :focus-visible)::after,
header nav .nav-dd__link:is(:hover, :focus-visible)::after,
header nav .insights-nav__link:is(:hover, :focus-visible)::after,
#mobile-nav a.px-3:is(:hover, :focus-visible)::after,
header [data-nav-panel] a:is(:hover, :focus-visible)::before,
#mobile-nav > div > a.px-6:is(:hover, :focus-visible)::before,
main a.inline-flex.rounded-lg:is(.bg-focus-red, .bg-focus-navy, .bg-focus-light, [class~="border-white/30"]):is(:hover, :focus-visible)::after,
footer li > button:is(:hover, :focus-visible)::after {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transition: clip-path .42s var(--wc-ease), opacity .05s linear;
}
/* the word stays underlined while its dropdown is open (:has, kept apart) */
header nav [data-nav-menu]:has([data-nav-toggle][aria-expanded="true"]) .nav-dd__link::after,
header nav [data-insights-menu]:has([data-insights-toggle][aria-expanded="true"]) .insights-nav__link::after {
  clip-path: inset(0 0 0 0); opacity: 1;
  transition: clip-path .42s var(--wc-ease), opacity .05s linear;
}
footer a:not(:has(> svg)):is(:hover, :focus-visible)::after {
  clip-path: inset(0 0 0 0); opacity: 1;
  transition: clip-path .42s var(--wc-ease), opacity .05s linear;
}
header [data-nav-panel] a:is(:hover, :focus-visible)::before,
#mobile-nav > div > a.px-6:is(:hover, :focus-visible)::before {
  transition: clip-path .24s var(--wc-ease), opacity .05s linear;
}

/* ---- section headings: a stroke that draws itself once (placed by chalk.js) ---- */
.wc-h { position: relative; }
.wc-hs {
  position: absolute; left: 0; top: 100%; width: 120px; height: 10px;
  pointer-events: none;
  background: var(--wc-ink-deep);
  -webkit-mask: var(--wc-arc) 0 0 / 100% 100% no-repeat;
          mask: var(--wc-arc) 0 0 / 100% 100% no-repeat;
  transform: rotate(var(--wc-rot, 0deg));
  transform-origin: 0 50%;
  clip-path: inset(0 100% 0 0);
}
.wc-hs--swash { -webkit-mask-image: var(--wc-swash); mask-image: var(--wc-swash); }
.wc-hs--flick { -webkit-mask-image: var(--wc-flick); mask-image: var(--wc-flick); }
.wc-hs--dark { background: var(--wc-ink); }
.wc-hs.is-drawn { animation: wc-draw var(--wc-dur, .8s) var(--wc-ease) var(--wc-delay, .12s) both; }
@keyframes wc-draw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* "Your Success : Our Job": the red colon blinks once, like a cursor, as the stroke
   finishes, then rests. One blink (off ~0.3s). */
.wc-colon.is-blink { animation: wc-blink .8s steps(1, end) 1.05s 1; }
@keyframes wc-blink {
  0%   { opacity: 1; }
  30%  { opacity: 0; }
  68%  { opacity: 1; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .wc-hs { clip-path: none; animation: none !important; }
  .wc-colon { animation: none !important; }
  header nav > a::after, header nav .nav-dd__link::after, header nav .insights-nav__link::after,
  #mobile-nav a.px-3::after, header [data-nav-panel] a::before, #mobile-nav > div > a.px-6::before,
  main a.inline-flex.rounded-lg::after, footer a::after, footer li > button::after {
    transition: none !important;
  }
}