/* Engage shared foundations. Section layouts belong in separate stylesheets.
   Preview implementation v1 — 4 September 2026. No third-party font loading. */
:root {
  --engage-navy: #172a46;
  --engage-navy-light: #24466c;
  --engage-blue: #005c97;
  --engage-aqua: #5bc6cc;
  --engage-gold: #caaa77;
  --engage-orange: #ff6d2d;
  --engage-orange-ink: #a83d13;
  --engage-external: #526d6f;
  --engage-ink: #172230;
  --engage-muted: #596777;
  --engage-cream: #fff6ec;
  --engage-mist: #f2f6f9;
  --engage-line: #dce3e8;
  --engage-white: #fff;
  --engage-font: Calibri, Carlito, Arial, sans-serif;
  --engage-text: 1rem;
  --engage-label: .875rem;
  --engage-meta: .75rem;
  --engage-h1: clamp(2.5rem, 4vw, 3.5rem);
  --engage-h2: clamp(2rem, 3.5vw, 3.25rem);
  --engage-h3: clamp(1.375rem, 2vw, 1.625rem);
  --engage-leading: 1.55;
  --engage-heading-leading: 1.08;
  --engage-space-1: .25rem;
  --engage-space-2: .5rem;
  --engage-space-3: .75rem;
  --engage-space-4: 1rem;
  --engage-space-6: 1.5rem;
  --engage-space-8: 2rem;
  --engage-space-12: 3rem;
  --engage-space-16: 4rem;
  --engage-content: 73.75rem;
  --engage-gutter: clamp(1rem, 3vw, 1.5rem);
  --engage-section-space: clamp(3rem, 6vw, 5rem);
  --engage-radius-control: .9375rem;
  --engage-radius-media: 1.125rem;
  --engage-radius-card: 1.75rem;
  --engage-radius-panel: 2.25rem;
  --engage-radius-feature: clamp(3rem, 6vw, 5rem);
  --engage-radius-pill: 999px;
  --engage-shadow: 0 .625rem 1.75rem rgb(23 42 70 / 9%);
  --engage-motion: 180ms ease;
}

[data-engage-site] {
  font-family: var(--engage-font);
  font-size: var(--engage-text);
  line-height: var(--engage-leading);
  color: var(--engage-ink);
  background: var(--engage-white);
}
[data-engage-site] :is(button, input, select, textarea) { font-family: inherit; }
[data-engage-site] :is(h1, h2, h3) {
  font-family: inherit;
  font-weight: 700;
  line-height: var(--engage-heading-leading);
  overflow-wrap: break-word;
}
[data-engage-site] :is(.engage-kicker, .engage-eyebrow) {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
}
[data-engage-site] :is(.engage-kicker, .engage-eyebrow)::before {
  width: .9rem;
  height: .9rem;
  flex: 0 0 .9rem;
  border: 0;
  background: var(--engage-kicker-accent, currentColor);
  clip-path: polygon(0 0, 38% 0, 100% 50%, 38% 100%, 0 100%, 62% 50%);
  content: "";
  transform: none;
}
[data-engage-site] :is(.engage-kicker--koiss, .engage-eyebrow--koiss) { --engage-kicker-accent: var(--engage-aqua); }
[data-engage-site] :is(.engage-kicker--clubs, .engage-eyebrow--clubs) { --engage-kicker-accent: var(--engage-gold); }
[data-engage-site] :is(.engage-kicker--office, .engage-eyebrow--office) { --engage-kicker-accent: var(--engage-orange); }
[data-engage-site] :is(.engage-kicker--koi, .engage-eyebrow--koi) { --engage-kicker-accent: var(--engage-blue); }
[data-engage-site] :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--engage-blue);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--engage-white);
}
[data-engage-site] :is(section, main) { scroll-margin-top: 7rem; }
[data-engage-site] .engage-skip-link {
  position: absolute;
  z-index: 100;
  top: .5rem;
  left: 1rem;
  transform: translateY(-200%);
  padding: .75rem 1rem;
  border-radius: var(--engage-radius-control);
  background: var(--engage-white);
  color: var(--engage-navy);
  font-weight: 700;
}
[data-engage-site] .engage-skip-link:focus { transform: none; }

/* Visitor-controlled animation pause. The control is shared so every Engage
   page can offer the same predictable accessibility behaviour. */
[data-engage-site] .engage-motion-toggle {
  position: fixed;
  z-index: 80;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem .9rem;
  border: 2px solid var(--engage-navy);
  border-radius: var(--engage-radius-pill);
  background: rgb(255 255 255 / 94%);
  color: var(--engage-navy);
  box-shadow: 0 .45rem 1.25rem rgb(23 42 70 / 14%);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(.5rem);
}
[data-engage-site] .engage-motion-toggle:hover { background: var(--engage-mist); }
[data-engage-site] .engage-motion-toggle__icon {
  position: relative;
  width: .85rem;
  height: .85rem;
  display: inline-block;
  flex: 0 0 .85rem;
}
[data-engage-site] .engage-motion-toggle__icon::before,
[data-engage-site] .engage-motion-toggle__icon::after {
  position: absolute;
  top: .05rem;
  bottom: .05rem;
  width: .2rem;
  border-radius: .15rem;
  background: currentColor;
  content: "";
}
[data-engage-site] .engage-motion-toggle__icon::before { left: .14rem; }
[data-engage-site] .engage-motion-toggle__icon::after { right: .14rem; }
[data-engage-site].engage-motion-paused .engage-motion-toggle__icon::before {
  inset: .03rem auto .03rem .16rem;
  width: .65rem;
  border-radius: .08rem;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
[data-engage-site].engage-motion-paused .engage-motion-toggle__icon::after { display: none; }

[data-engage-site].engage-motion-paused *,
[data-engage-site].engage-motion-paused *::before,
[data-engage-site].engage-motion-paused *::after {
  animation-play-state: paused !important;
  scroll-behavior: auto !important;
}
[data-engage-site].engage-motion-paused [data-engage-spotlight] {
  --engage-spotlight-rx: 0deg !important;
  --engage-spotlight-ry: 0deg !important;
  --engage-spotlight-opacity: 0 !important;
  transform: none !important;
}

/* Shared, progressive scroll reveal. Content remains visible if JavaScript fails. */
[data-engage-site].engage-motion-ready [data-engage-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 520ms cubic-bezier(.22, 1, .36, 1) var(--engage-reveal-delay, 0ms),
    transform 520ms cubic-bezier(.22, 1, .36, 1) var(--engage-reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-engage-site].engage-motion-ready [data-engage-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

/* Signature motion: masked words and headings, inspired by editorial motion
   design rather than decorative looping animation. */
[data-engage-site] .engage-hero-line-mask {
  display: block;
  overflow: hidden;
  padding: .04em 0 .09em;
  margin: -.04em 0 -.09em;
}
[data-engage-site] [data-engage-hero-line] { display: block; }
[data-engage-site].engage-motion-ready [data-engage-hero-line] {
  opacity: 0;
  transform: translate3d(0, 105%, 0) skewY(1.5deg);
  transition:
    opacity 520ms cubic-bezier(.22, 1, .36, 1) var(--engage-hero-delay, 0ms),
    transform 720ms cubic-bezier(.16, 1, .3, 1) var(--engage-hero-delay, 0ms);
  will-change: opacity, transform;
}
[data-engage-site].engage-motion-ready.engage-hero-entered [data-engage-hero-line] {
  opacity: 1;
  transform: translate3d(0, 0, 0) skewY(0);
  will-change: auto;
}
[data-engage-site].engage-motion-ready [data-engage-hero-media] {
  opacity: 0;
  clip-path: inset(0 9% 0 0 round var(--engage-radius-media));
  transform: translate3d(22px, 0, 0) scale(.985);
  transition:
    opacity 620ms cubic-bezier(.22, 1, .36, 1) 230ms,
    clip-path 760ms cubic-bezier(.16, 1, .3, 1) 230ms,
    transform 760ms cubic-bezier(.16, 1, .3, 1) 230ms;
}
[data-engage-site].engage-motion-ready.engage-hero-entered [data-engage-hero-media] {
  opacity: 1;
  clip-path: inset(0 round var(--engage-radius-media));
  transform: translate3d(0, 0, 0) scale(1);
}
[data-engage-site].engage-motion-ready [data-engage-motion-title] {
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 9px, 0);
  transition:
    clip-path 660ms cubic-bezier(.16, 1, .3, 1) 70ms,
    transform 660ms cubic-bezier(.16, 1, .3, 1) 70ms;
}
[data-engage-site].engage-motion-ready [data-engage-reveal].is-revealed [data-engage-motion-title] {
  clip-path: inset(0);
  transform: translate3d(0, 0, 0);
}

/* Engage Orbit: a shared directional signature for major page moments.
   Section styles set its size, placement, contrast and tempo. */
[data-engage-site] .engage-orbit {
  --engage-orbit-line: rgb(91 198 204 / 54%);
  --engage-orbit-inner: rgb(0 92 151 / 22%);
  --engage-orbit-gold: #caaa77;
  --engage-orbit-radius: 8rem;
  position: absolute;
  z-index: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  animation: engage-shared-orbit-drift 18s cubic-bezier(.45, .05, .55, .95) infinite;
}
[data-engage-site] .engage-orbit::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    var(--engage-orbit-line) 0deg 230deg,
    transparent 230deg 310deg,
    var(--engage-orbit-line) 310deg 360deg
  );
  content: "";
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}
[data-engage-site] .engage-orbit > i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
[data-engage-site] .engage-orbit > i::before {
  position: absolute;
  inset: 15%;
  border-radius: inherit;
  background: conic-gradient(from 24deg, transparent 0 42deg, var(--engage-orbit-inner) 42deg 174deg, transparent 174deg 360deg);
  content: "";
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
}
[data-engage-site] .engage-orbit > i::after {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: clamp(14px, 7%, 23px);
  height: clamp(14px, 7%, 23px);
  border: 0 solid var(--engage-orbit-gold);
  border-right-width: clamp(4px, .35vw, 6px);
  border-bottom-width: clamp(4px, .35vw, 6px);
  border-radius: 0 0.28rem 0.12rem 0.28rem;
  content: "";
  transform: translate(-50%, 42%) rotate(45deg);
}
[data-engage-site] .engage-orbit::after {
  position: absolute;
  top: calc(50% - 9px);
  left: calc(50% - 9px);
  width: 18px;
  height: 18px;
  border: 3px solid var(--engage-navy);
  border-radius: 50%;
  background: var(--engage-orange);
  box-shadow: 0 0 0 5px rgb(255 255 255 / 92%);
  content: "";
  transform: rotate(300deg) translateX(var(--engage-orbit-radius)) rotate(-300deg);
  animation: engage-shared-orbit-point 12s cubic-bezier(.45, .05, .55, .95) infinite;
}
@keyframes engage-shared-orbit-point {
  0%, 8%, 100% { opacity: 1; transform: rotate(300deg) translateX(var(--engage-orbit-radius)) rotate(-300deg); }
  50%, 58% { opacity: 1; transform: rotate(420deg) translateX(var(--engage-orbit-radius)) rotate(-420deg); }
}
@keyframes engage-shared-orbit-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  28% { transform: translate3d(-8px, 5px, 0); }
  56% { transform: translate3d(-3px, 12px, 0); }
  78% { transform: translate3d(6px, 5px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-engage-site] *, [data-engage-site] *::before, [data-engage-site] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  [data-engage-site].engage-motion-ready [data-engage-reveal] {
    opacity: 1;
    transform: none;
  }
  [data-engage-site].engage-motion-ready :is([data-engage-hero-line], [data-engage-hero-media], [data-engage-motion-title]) {
    opacity: 1;
    clip-path: none;
    transform: none;
  }
  [data-engage-site] .engage-motion-toggle { display: none; }
}