/* Clone additions — only re-created runtime behavior missing from the original JS:
   FAQ accordion, mobile nav overlay, smooth scroll, and framer-motion-like
   entrance reveals. Core visual styles come from the preserved compiled CSS. */

html { scroll-behavior: smooth; }

/* Overscroll seamlessness: base page is dark; keep html/body dark so pulling
   past the top (or below content) reveals dark, not the light paper. */
html, body { background: #0b0c0a; }

/* ---- Framer-style entrance reveals ---- */
.clone-reveal {
  will-change: opacity, transform;
  transition-property: opacity, transform;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); /* easeInOut, framer default */
  margin: 0;
}
.clone-reveal.clone-revealed {
  opacity: 1 !important;
  transform: none !important;
}
.mi-grad-hero.clone-reveal,
.mi-grad-services.clone-reveal {
  transition-duration: 1.2s;
}
.mi-grad-hero.clone-revealed { opacity: 1 !important; }
.mi-grad-services.clone-revealed { opacity: .6 !important; }

/* Original underlines ship with stroke-dasharray="0 1". Recreate the draw-on
   reveal from the Next/framer client bundle. */
h1 [pathLength="1"], h2 [pathLength="1"] {
  transition: stroke-dasharray .85s cubic-bezier(.25,1,.5,1) .18s;
}
.clone-underline-drawn { stroke-dasharray: 1 1 !important; }

@media (prefers-reduced-motion: reduce) {
  .clone-reveal { transition-duration: .01ms !important; }
  h1 [pathLength="1"], h2 [pathLength="1"] { transition-duration: .01ms !important; }
}

/* ---- FAQ accordion ----
   The answer panel (.overflow-hidden) is animated via max-height, toggled in script.js. */
#faq .border-b .overflow-hidden {
  overflow: hidden;
  transition: max-height .38s cubic-bezier(.25,1,.5,1);
}
#faq .border-b .overflow-hidden p {
  max-width: 42rem;
  padding-bottom: 1.5rem;   /* keep pb-6 value */
  padding-left: 3rem;       /* pl-12 value */
  font-size: .875rem;
  line-height: 1.625;
  color: var(--mi-gray);
}
#faq .border-b button svg { transition: transform .3s ease; }
#faq .border-b button svg.rotate-45 { transform: rotate(45deg); }

/* ---- Mobile nav overlay (client-rendered in the original) ---- */
.clone-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: .25rem;
  padding: 1.5rem;
  background: rgba(11,12,10,.98);
  backdrop-filter: blur(12px);
}
.clone-menu.clone-open { display: flex; }
.clone-menu a, .clone-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(243,245,236,.12);
  color: #f3f5ec;
  font-family: var(--font-geist-mono);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: left;
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  cursor: pointer;
}
.clone-menu .clone-menu-close {
  justify-content: flex-start;
  color: #2563eb;
  margin-bottom: .75rem;
  border-top: 0;
}

/* ---------- Hamburger: 3 stacked bars (template offsets) ----------
   The origin shows a real hamburger: 3 bars 4px apart. The SSR markup ships
   three identical bars at the same position; the offsets are a CSS rule that
   was in a template chunk we didn't capture, so we re-state it here. */
[aria-label="Toggle menu"] .h-3\.5 > span {
  transition: transform .3s cubic-bezier(0.42,0,0.58,1), opacity .25s ease, background .2s ease;
  will-change: transform, opacity;
}
[aria-label="Toggle menu"] .h-3\.5 > span:nth-child(1) { transform: translateY(-4px); }
[aria-label="Toggle menu"] .h-3\.5 > span:nth-child(2) { transform: none; }
[aria-label="Toggle menu"] .h-3\.5 > span:nth-child(3) { transform: translateY(4px); }
/* open state -> X */
[aria-label="Toggle menu"].clone-open .h-3\.5 > span:nth-child(1) { transform: translateY(2px) rotate(45deg); }
[aria-label="Toggle menu"].clone-open .h-3\.5 > span:nth-child(2) { opacity: 0; transform: none; }
[aria-label="Toggle menu"].clone-open .h-3\.5 > span:nth-child(3) { transform: translateY(-2px) rotate(-45deg); }

/* ---------- Smooth section navigation ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
.clone-menu a { scroll-margin-top: 96px; }

/* ---------- Action Map (excalidraw viewer) — action-map-v1 ---------- */
.excal-map{position:relative;margin-top:1.75rem;height:clamp(430px,58vw,780px);border:1px solid var(--mi-line);background:#fffdf9;border-radius:2px;overflow:hidden}
.excal-map .excalidraw{--default-bg-color:transparent;--input-bg-color:transparent}
.excal-map .excalidraw .Island,
.excal-map .excalidraw .layer-ui__wrapper__footer,
.excal-map .excalidraw .layer-ui__wrapper__top-right{display:none!important}
.excal-map .excalidraw .layer-ui__wrapper{background:transparent}
.excal-map-fallback{height:100%;overflow:auto}
.excal-map-fallback img{display:block;min-width:940px;width:100%;height:auto}
.excal-map:not(.excal-map--ready)::after{content:"";position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border:2px solid var(--kit-accent,var(--mi-accent,#8a8f98));border-top-color:transparent;border-radius:50%;animation:excalmap-spin .8s linear infinite}
@keyframes excalmap-spin{to{transform:rotate(360deg)}}

/* ---------- Action Map chrome (click-to-interact toggle) — action-map-v4 ---------- */
/* transparent shield blocks wheel/pointer from reaching the canvas; chrome layer sits above it */
.excal-map__shield{position:absolute;inset:0;z-index:5;background:transparent}
.excal-map__chrome{position:absolute;inset:0;z-index:6;pointer-events:none;font-family:var(--kit-sans,ui-sans-serif,system-ui,sans-serif)}
.excal-map__btn,.excal-map__scrollback{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:3px;font-size:12px;font-weight:600;letter-spacing:.03em;cursor:pointer;font-family:inherit;transition:background .15s ease,color .15s ease}
.excal-map__btn{position:absolute;top:10px;right:10px;background:#23252b;color:#fff;border:1px solid #23252b;box-shadow:0 1px 5px rgba(20,21,15,.28)}
.excal-map__btn:hover{background:var(--kit-accent,var(--mi-accent,#7a8089));border-color:var(--kit-accent,var(--mi-accent,#7a8089))}
.excal-map__btn--live{background:#fff;color:#23252b;border:1px solid #7a8089;box-shadow:0 1px 4px rgba(20,21,15,.14)}
.excal-map__btn--live:hover{border-color:var(--kit-accent,var(--mi-accent,#7a8089));color:var(--kit-accent,var(--mi-accent,#7a8089))}
.excal-map__scrollback{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:#fff;color:#23252b;border:1px solid #7a8089;box-shadow:0 1px 5px rgba(20,21,15,.2)}
.excal-map__scrollback:hover{border-color:var(--kit-accent,var(--mi-accent,#7a8089));color:var(--kit-accent,var(--mi-accent,#7a8089))}
.excal-map__btn:focus-visible,.excal-map__scrollback:focus-visible{outline:2px solid var(--kit-accent,var(--mi-accent,#7a8089));outline-offset:1px}
/* hide excalidraw's own scroll-back button (replaced by ours) */
.excal-map .excalidraw .scroll-back-to-content{display:none!important}

/* ---- case-study v3: anchor bar + build shot ---- */
html{scroll-behavior:smooth}
.cs-anchorbar{border-bottom:1px solid var(--mi-line)}
.cs-anchor{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;padding:14px 24px;max-width:1680px;margin:0 auto}
.cs-anchors{display:flex;flex-wrap:wrap;gap:4px 20px}
.cs-anchors a{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mi-gray);text-decoration:none;transition:color .2s}
.cs-anchors a:hover{color:var(--mi-accent)}
.cs-cta{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mi-ink);border:1px solid var(--mi-line);padding:8px 14px;text-decoration:none;transition:color .2s,border-color .2s}
.cs-cta:hover{color:var(--mi-accent);border-color:var(--mi-accent)}
@media (max-width:640px){.cs-cta{margin-left:0}}
.kit-shot img{width:100%;height:auto;display:block}