/* Behaviour and polish on top of app.css (the original compiled Tailwind build). */

/* ------------------------------------------------------------------ */
/* Light theme. Dark is the default; [data-theme] is set before paint. */
/* ------------------------------------------------------------------ */
:root[data-theme="light"] {
  --background: 252 40% 98%;
  --foreground: 250 32% 11%;
  --card: 0 0% 100%;
  --card-foreground: 250 32% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 250 32% 11%;
  --primary: 263 72% 52%;
  --secondary: 330 76% 50%;
  --accent: 280 72% 52%;
  --muted: 250 25% 94%;
  --muted-foreground: 250 12% 36%;
  --border: 250 22% 88%;
  --input: 250 22% 88%;
  --ring: 263 72% 52%;
  --surface: 250 30% 96%;
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }

/* Hard-coded white/black utilities from the original build. */
[data-theme="light"] [class~="border-white/[0.06]"],
[data-theme="light"] [class~="border-white/[0.08]"],
[data-theme="light"] [class~="border-white/5"],
[data-theme="light"] [class~="border-white/10"],
[data-theme="light"] .glass-card { border-color: hsl(var(--foreground) / .09); }
[data-theme="light"] [class~="bg-white/[0.04]"],
[data-theme="light"] [class~="bg-white/[0.02]"] { background-color: hsl(var(--foreground) / .035); }
[data-theme="light"] [class*="rgba(0,0,0,0.4)"],
[data-theme="light"] [class*="rgba(0,0,0,0.5)"],
[data-theme="light"] [class*="rgba(0,0,0,0.1)"] { --tw-shadow: 0 12px 40px -16px rgba(60, 30, 140, .18) !important; }
[data-theme="light"] .noise-overlay { display: none; }
/* Faded text classes (text-muted-foreground/50 etc.) are too faint on white. */
[data-theme="light"] [class*="text-muted-foreground/"] { color: hsl(var(--muted-foreground)); }
[data-theme="light"] [class*="text-foreground/"] { color: hsl(var(--foreground) / .82); }
[data-theme="light"] .spot { box-shadow: 0 1px 2px rgba(30, 15, 70, .04), 0 10px 30px -18px rgba(70, 35, 160, .22); }
[data-theme="light"] [class*="blur-[1"][class*="rounded-full"],
[data-theme="light"] [class*="blur-[2"][class*="rounded-full"] { mix-blend-mode: multiply; }
[data-theme="light"] .drift { opacity: .55; }

/* Logos: white wordmark on dark, ink wordmark on light. */
[data-theme="dark"] .logo-on-light,
[data-theme="light"] .logo-on-dark { display: none !important; }
.brand-logo { display: block; width: auto; height: 52px; }
nav .brand-logo { height: 58px; transition: height .35s ease; }
nav.fixed.is-scrolled .brand-logo { height: 46px; }
footer .brand-logo { height: 56px; }
@media (max-width: 640px) { nav .brand-logo { height: 46px; } }

/* Hero globe (assets/globe.js). */
.globe-stage { position: relative; width: min(100%, 580px); aspect-ratio: 1; margin-inline: auto; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; }
.globe-stage.dragging { cursor: grabbing; }
.globe-stage:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 6px; border-radius: 50%; }
.globe-halo { position: absolute; inset: 14%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, hsl(var(--primary) / .45), hsl(var(--secondary) / .18) 45%, transparent 70%); filter: blur(48px); }
[data-theme="light"] .globe-halo { background: radial-gradient(circle at 50% 45%, hsl(var(--primary) / .22), hsl(var(--secondary) / .1) 45%, transparent 70%); }
.globe-canvas, .globe-arcs { position: absolute; inset: 0; width: 100%; height: 100%; }
.globe-canvas { opacity: 0; transform: scale(.94); transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.globe-stage.ready .globe-canvas { opacity: 1; transform: none; }
.globe-arcs { pointer-events: none; }
.globe-label { position: absolute; left: 0; top: 0; z-index: 2; display: inline-flex; align-items: center; gap: 6px; margin: -14px 0 0 12px;
  padding: 5px 11px 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none;
  color: hsl(var(--foreground)); background: hsl(var(--card) / .72); border: 1px solid hsl(var(--primary) / .35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 24px -10px hsl(var(--primary) / .6); }
.globe-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary))); }
.globe-label i { font-style: normal; font-size: 10px; letter-spacing: .1em; color: hsl(var(--primary)); }
.globe-stage:not(.ready) .globe-label { visibility: hidden; }
@media (max-width: 640px) { .globe-label { font-size: 11px; padding: 4px 9px 4px 8px; } }
.globe-hint { position: absolute; left: 50%; bottom: 0; translate: -50% 0; display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--muted-foreground)); transition: opacity .6s; pointer-events: none; }
.globe-hint::before { content: "⟷"; letter-spacing: 0; color: hsl(var(--primary)); }
.globe-stage.touched .globe-hint { opacity: 0; }
.globe-stage.no-webgl .globe-label { opacity: 1 !important; visibility: visible; position: static; display: inline-flex; margin: 4px; }
.globe-stage.no-webgl { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; cursor: default; }

/* Calendly booking embed on /contact. */
.cal-embed { position: relative; height: 700px; margin-bottom: 32px; border-radius: 16px; overflow: hidden;
  border: 1px solid hsl(var(--foreground) / .08); background: hsl(var(--card) / .6); }
.cal-embed iframe { width: 100%; height: 100%; border: 0; }
.cal-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font-size: 14px; color: hsl(var(--muted-foreground)); }
.cal-fallback a { color: hsl(var(--primary)); text-decoration: underline; }
.cal-embed.ready .cal-fallback { display: none; }
@media (max-width: 640px) { .cal-embed { height: 960px; margin-inline: -12px; } }

/* Theme toggle. */
.theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-right: 12px; border-radius: 999px;
  color: hsl(var(--foreground)); border: 1px solid hsl(var(--foreground) / .12); background: hsl(var(--card) / .5);
  transition: transform .3s ease, border-color .2s, background .2s; flex-shrink: 0; }
.theme-toggle:hover { border-color: hsl(var(--primary) / .6); background: hsl(var(--primary) / .1); transform: rotate(-12deg); }
.theme-toggle svg { grid-area: 1 / 1; transition: transform .45s cubic-bezier(.4, 0, .2, 1), opacity .3s; }
[data-theme="dark"] .theme-toggle .i-moon,
[data-theme="light"] .theme-toggle .i-sun { opacity: 0; transform: rotate(90deg) scale(.4); }
.nav-row { gap: 0; }

/* Circular reveal when switching theme (View Transitions; instant elsewhere). */
html.theme-vt::view-transition-old(root),
html.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
/* Soft cross-fade between pages in browsers that support it. */
@view-transition { navigation: auto; }
nav.fixed { view-transition-name: site-nav; }

/* ------------------------------------------------------------------ */
/* Motion                                                              */
/* ------------------------------------------------------------------ */
html.js [data-rv] { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--rv-delay, 0s); }
html.js [data-rv].in { opacity: 1; transform: none; }

/* First screen: pure CSS so it shows on first paint. */
.load-in { animation: load-in .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes load-in { from { opacity: 0; translate: 0 22px; } }

/* Headline words rise in one after another on load. */
html.js h1 > span:not(.vh):not([class*="absolute"]) { display: inline-block; animation: word-in .9s cubic-bezier(.2, .7, .2, 1) both; }
html.js h1 > span:nth-of-type(2) { animation-delay: .12s; }
html.js h1 > span:nth-of-type(3) { animation-delay: .24s; }
@keyframes word-in { from { opacity: 0; transform: translateY(.35em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

.drift { animation: drift 9s ease-in-out infinite alternate; }
.drift:nth-child(3n) { animation-duration: 12s; animation-delay: -4s; }
.drift:nth-child(3n+1) { animation-duration: 7s; animation-delay: -2s; }
@keyframes drift { to { transform: translate(14px, -18px) scale(1.15); } }

/* Cursor spotlight on cards. */
.spot:not(.absolute):not(.fixed) { position: relative; }
.spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), hsl(var(--primary) / .14), transparent 45%); }
.spot:hover::after { opacity: 1; }

/* Shine across primary buttons. */
.btn-gradient { position: relative; overflow: hidden; isolation: isolate; }
.btn-gradient::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transition: transform .8s ease; }
a:hover > .btn-gradient::after, .btn-gradient:hover::after { transform: translateX(120%); }
a:active > .btn-gradient, .btn-gradient:active { transform: scale(.98); }

/* Roles marquee (home). */
.role-strip { position: relative; padding: 28px 0 8px; border-block: 1px solid hsl(var(--foreground) / .06); background: hsl(var(--card) / .25); }
.role-strip-label { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: 16px; }
.marquee { overflow: hidden; padding-bottom: 20px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; width: max-content; gap: 12px; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { white-space: nowrap; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; color: hsl(var(--foreground) / .85);
  border: 1px solid hsl(var(--foreground) / .08); background: hsl(var(--card) / .6); }
.marquee-track span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; vertical-align: middle;
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--secondary))); }
@keyframes marquee { to { transform: translateX(calc(-50% - 6px)); } }

@media (prefers-reduced-motion: reduce) {
  html.js [data-rv] { opacity: 1; transform: none; transition: none; }
  html.js h1 > span, .load-in { animation: none !important; }
  .drift, .animate-pulse, .animate-spin, .marquee-track { animation: none !important; }
  @view-transition { navigation: none; }
}

/* ------------------------------------------------------------------ */
/* Nav                                                                 */
/* ------------------------------------------------------------------ */
nav.fixed > .container { transition: height .35s ease; }
nav.fixed.is-scrolled { background-color: hsl(var(--background) / .82); box-shadow: 0 10px 40px -20px rgba(0, 0, 0, .45); }
nav.fixed.is-scrolled > .container { height: 4.5rem; }
.scroll-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--progress, 0));
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent)), hsl(var(--secondary))); }

.dd-menu { display: none; }
.dd:hover > .dd-menu, .dd.open > .dd-menu { display: block; animation: menu-in .18s ease-out; }
/* `translate`, not `transform`, so the centred dropdown keeps its -translate-x-1/2. */
@keyframes menu-in { from { opacity: 0; translate: 0 -6px; } }
.dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.dd:hover > button svg, .dd.open > button svg { transform: rotate(180deg); }
nav a[aria-current="page"] { color: hsl(var(--foreground)); }
nav a[aria-current="page"] > span { width: 100%; }

/* Hamburger that turns into a cross. */
.burger { display: grid; gap: 5px; width: 22px; }
.burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s ease, opacity .2s; }
[aria-expanded="true"] .burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#mobile-menu { position: fixed; inset: 72px 0 auto 0; z-index: 60; max-height: calc(100dvh - 72px); overflow-y: auto;
  background: hsl(var(--card) / .97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid hsl(var(--border)); animation: menu-in .2s ease-out; }
#mobile-menu[hidden] { display: none; }
.mm-inner { padding: 8px 20px 28px; display: flex; flex-direction: column; }
.mm-title { margin: 20px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--primary)); }
#mobile-menu a { padding: 10px 0; color: hsl(var(--muted-foreground)); border-bottom: 1px solid hsl(var(--border) / .5); }
#mobile-menu a:hover, #mobile-menu a[aria-current="page"] { color: hsl(var(--foreground)); }
#mobile-menu a.mm-cta { margin-top: 24px; padding: 14px; border: 0; border-radius: 999px; text-align: center; font-weight: 600; color: #fff;
  background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--secondary))); }
@media (min-width: 1280px) { #mobile-menu { display: none !important; } }

/* ------------------------------------------------------------------ */
/* Bits and pieces                                                     */
/* ------------------------------------------------------------------ */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: hsl(var(--primary)); color: #fff; font-weight: 600; transition: top .2s; }
.skip-link:focus { top: 16px; }

.to-top { position: fixed; right: 20px; bottom: 20px; z-index: 70; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px;
  color: #fff; background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary))); box-shadow: 0 10px 30px -10px hsl(var(--primary) / .7);
  opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s, transform .3s; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { transform: translateY(-3px); }

/* FAQ accordion: the markup already has the closed/open grid classes. */
[data-faq] svg { transition: transform .3s; }
[data-faq][aria-expanded="true"] svg { transform: rotate(180deg); }

/* Forms. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
form[data-form] input, form[data-form] textarea { transition: border-color .2s, box-shadow .2s, background-color .2s; }
form[data-form] input:focus, form[data-form] textarea:focus { border-color: hsl(var(--primary) / .7); box-shadow: 0 0 0 4px hsl(var(--primary) / .15); outline: none; }
form.was-validated :invalid { border-color: hsl(0 80% 60% / .8); }
form.flash { animation: flash 1.4s ease; }
@keyframes flash { 30% { box-shadow: 0 0 0 6px hsl(var(--primary) / .35); } }
.form-status { margin: 0; font-size: 14px; color: hsl(var(--muted-foreground)); }
.form-status:empty { display: none; }
.form-status.ok { color: hsl(150 60% 45%); font-weight: 500; }
.form-status.error { color: hsl(0 75% 60%); }
.form-status a { text-decoration: underline; }
form button[disabled] { opacity: .6; cursor: progress; }
#toast { position: fixed; right: 16px; bottom: 76px; z-index: 100; max-width: 360px; padding: 14px 18px; border-radius: 12px;
  background: hsl(var(--card)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--primary) / .4); box-shadow: 0 12px 40px rgba(0, 0, 0, .35); font-size: 14px; animation: menu-in .25s ease-out; }

/* Plain text pages (privacy, 404). */
.page-plain { padding: 160px 20px 96px; }
.page-plain-inner { max-width: 720px; margin: 0 auto; color: hsl(var(--muted-foreground)); line-height: 1.7; }
.page-plain .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--primary)); margin-bottom: 12px; }
.page-plain h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; line-height: 1.15; color: hsl(var(--foreground)); margin-bottom: 24px; }
.page-plain h2 { font-size: 1.25rem; font-weight: 600; color: hsl(var(--foreground)); margin: 32px 0 8px; }
.page-plain p + p { margin-top: 12px; }
.page-plain a:not(.btn-plain) { color: hsl(var(--primary)); text-decoration: underline; }
.page-404 { min-height: 70vh; }
.page-plain-actions { margin-top: 28px !important; display: flex; flex-wrap: wrap; gap: 12px; }
.btn-plain { display: inline-block; padding: 12px 24px; border-radius: 999px; font-weight: 600; color: #fff;
  background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--secondary))); }
.btn-plain-ghost { background: transparent; border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); }

::selection { background: hsl(var(--primary) / .35); }
:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
section[id], form[id] { scroll-margin-top: 96px; }