/* The KM Studio — interactive component layer.
   Layout lives in site.css; this file is the chrome that opens, closes,
   validates or animates. Every component here works without JavaScript;
   script only refines it. */

/* ── Services dropdown ──────────────────────────────────────────────── */
/* Opens on CSS alone. :focus-within carries the keyboard case, so the menu
   is reachable by tab with scripting disabled. */
.has-menu{position:relative}
.services-menu{position:absolute;top:calc(100% + 10px);left:-12px;min-width:232px;
  padding:var(--space-2) 0;z-index:50;
  background:var(--white);border:1px solid var(--border-hairline);border-radius:2px;
  box-shadow:var(--shadow-md);
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity var(--duration-fast) var(--ease-out),
             transform var(--duration-fast) var(--ease-out)}
.has-menu:hover > .services-menu,
.has-menu:focus-within > .services-menu,
.has-menu[data-open="true"] > .services-menu{opacity:1;transform:translateY(0);pointer-events:auto}
.services-menu__item{display:block;padding:11px 20px;font:var(--type-small);
  color:var(--text-primary);white-space:nowrap;
  transition:background var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard)}
.services-menu__item:hover,.services-menu__item:focus-visible{
  background:var(--ivory-deep);color:var(--burgundy-800)}
.services-menu__divider{margin:var(--space-2) 0;border:0;
  border-top:1px solid var(--border-hairline)}
.services-menu__group{display:block;padding:8px 20px 4px;
  font-family:var(--font-eyebrow);font-size:var(--text-2xs);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--text-muted)}

/* Below the nav breakpoint the panel is not a popup at all — it is a nested
   list inside the disclosure that already exists. No hover, no timer, no
   absolute positioning. Must match the 860px breakpoint in site.css. */
@media (max-width:860px){
  .services-menu{position:static;opacity:1;transform:none;pointer-events:auto;
    min-width:0;padding:var(--space-2) 0 var(--space-2) var(--space-4);
    background:transparent;border:0;box-shadow:none}
  .services-menu__item{padding:9px 0}
}

@media (prefers-reduced-motion:reduce){
  .services-menu{transition:none}
}

/* ── Contact dialog ─────────────────────────────────────────────────── */
/* A native <dialog>, so focus trapping, Escape and inert background come
   free. The design system's .km-dialog card styles still apply; these rules
   add the top-layer behaviour it was not written for. */
dialog.km-dialog{margin:24px auto;max-width:560px;max-height:calc(100vh - 48px);
  overflow-y:auto;border:0;padding:var(--space-12)}
dialog.km-dialog::backdrop{background:var(--veil-dark);
  backdrop-filter:var(--blur-veil);-webkit-backdrop-filter:var(--blur-veil)}
dialog.km-dialog:not([open]){display:none}

/* The design system's close button is replaced by a hairline cross, matching
   the prototype — two 1px rules, no glyph, no SVG. */
.dialog-close{position:absolute;top:16px;right:16px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;cursor:pointer;color:var(--text-muted);
  transition:color var(--duration-base) var(--ease-standard)}
.dialog-close:hover{color:var(--burgundy-800)}
.dialog-close__mark{position:relative;display:block;width:14px;height:14px}
.dialog-close__mark::before,.dialog-close__mark::after{content:"";position:absolute;
  top:6px;left:0;width:14px;height:1px;background:currentColor}
.dialog-close__mark::before{transform:rotate(45deg)}
.dialog-close__mark::after{transform:rotate(-45deg)}

.dialog-state{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.dialog-state[hidden]{display:none}
.dialog-embed{border:1px solid var(--border-hairline);background:var(--white);overflow:hidden}
.dialog-embed iframe{display:block;width:100%;height:560px;border:0}
.dialog-note{font:var(--type-small);color:var(--text-muted);margin:0}
.dialog-note strong{color:var(--text-primary)}
.dialog-body-text{font:var(--type-body);color:var(--text-secondary);margin:0}
.dialog-summary{font:var(--type-small);color:var(--text-primary);
  background:var(--ivory-deep);border:1px solid var(--border-hairline);
  padding:16px;margin:0;white-space:pre-wrap;word-break:break-word}

@media (max-width:600px){
  dialog.km-dialog{padding:var(--space-8)}
  .dialog-embed iframe{height:70vh}
}

/* ── Five-step stepper (About) ──────────────────────────────────────── */
/* All five slides are in the DOM and the section renders as a plain list when
   nothing runs, so the content never depends on the enhancement. */
.stepper{position:relative}
.stepper__slides{position:relative;display:grid}
.stepper__slide{grid-area:1/1;display:flex;align-items:center;justify-content:flex-start;
  gap:clamp(20px,3vw,36px);flex-wrap:wrap;
  opacity:0;transform:translateY(8px);visibility:hidden;pointer-events:none;
  transition:opacity var(--duration-slow) var(--ease-out),
             transform var(--duration-slow) var(--ease-out)}
.stepper__slide[data-active="true"]{opacity:1;transform:none;visibility:visible;
  pointer-events:auto}
/* Without script no slide carries data-active, so every step simply stacks. */
.stepper:not([data-enhanced="true"]) .stepper__slides{display:flex;
  flex-direction:column;gap:clamp(28px,4vw,48px)}
.stepper:not([data-enhanced="true"]) .stepper__slide{opacity:1;transform:none;
  visibility:visible;pointer-events:auto}
.stepper:not([data-enhanced="true"]) .stepper__dots{display:none}
.stepper__dots{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(24px,3vw,36px)}
.stepper__dot{width:36px;height:36px;padding:0;cursor:pointer;border-radius:2px;
  font-family:var(--font-display);font-size:var(--text-sm);
  border:1px solid var(--border-hairline);background:transparent;color:var(--text-muted);
  transition:color var(--duration-base) var(--ease-out),
             background var(--duration-base) var(--ease-out),
             border-color var(--duration-base) var(--ease-out)}
.stepper__dot[aria-current="true"]{border-color:var(--burgundy-800);
  background:var(--burgundy-800);color:var(--white)}

@media (prefers-reduced-motion:reduce){
  .stepper__slide{transition:none}
}

/* Stepper slide internals — media left, copy right, stacking when narrow. */
.stepper__media{flex:0 0 220px;max-width:220px;background:var(--ivory-deep)}
.stepper__copy{flex:1 1 320px;min-width:0}